/* ==========================================================================
   DOSE_COEFFICIENTS.HTML

   The shape of erosion_corrosion.html and rtm.html: a settings panel on the
   left, a drag handle, and a work area of tabs. Colours are the tokens in
   kvot.css, so the page follows the theme toggle. Class prefix: dc-.
   ========================================================================== */

.dc {
  display: grid;
  grid-template-columns: var(--dc-side-width, 330px) 8px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  font-family: verdana, sans-serif;
  font-size: 13px;
}

/* ---- the settings column ------------------------------------------------ */
.dc-side {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.dc-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0 14px 10px; }
.dc-side-foot {
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.dc-resize {
  cursor: col-resize;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.dc-resize::after { content: ''; width: 3px; border-radius: 2px; transition: background 0.15s; }
.dc-resize:hover::after, .dc-resize.active::after, .dc-resize:focus-visible::after { background: var(--color-kvot-accent); }
.dc-resize:focus-visible { outline: none; }

/* ---- a folding section -------------------------------------------------- */
.dc-sec { margin: 0 0 4px; }
.dc-sec > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 6px;
  padding: 0 0 4px 16px;
  border-bottom: 1px solid var(--border-color);
  font: 700 0.95rem RawengulkSans, sans-serif;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.dc-sec > summary::-webkit-details-marker { display: none; }
.dc-sec > summary::before { content: '▸'; position: absolute; left: 0; transition: transform 0.15s; color: var(--text-muted); }
.dc-sec[open] > summary::before { transform: rotate(90deg); }
.dc-sec > summary .dc-sec-title { flex: 1 1 auto; min-width: 0; }
.dc-count { font: 11px verdana, sans-serif; color: var(--text-muted); }

/* ---- controls ----------------------------------------------------------- */
.dc-row { display: block; margin: 0 0 9px; }
.dc-row[hidden] { display: none; }
.dc-row label { color: var(--text-primary); }
.dc-row .dc-label-line { align-items: flex-start; margin: 0 0 2px; }
.dc-row input[type="text"], .dc-row select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 2px;
  padding: 4px 6px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 13px;
}
.dc-row input#dcNuclide { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
/* The nuclide field's own list of suggestions, under the field. */
.dc-combo { position: relative; }
.dc-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: 16rem; overflow-y: auto; margin: 0; padding: 3px 0;
  list-style: none; background: var(--bg-primary); border: 1px solid var(--input-border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.dc-suggest[hidden] { display: none; }
.dc-suggest li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 10px; cursor: pointer;
  font: 13px ui-monospace, Menlo, Consolas, monospace; color: var(--text-primary); }
.dc-suggest li .dc-sug-t { font: 11px verdana, sans-serif; color: var(--text-muted); }
.dc-suggest li:hover, .dc-suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--color-kvot-accent) 16%, var(--bg-primary)); }
.dc-desc { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.dc-muted { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.dc-muted:empty { display: none; }
.dc-radio { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 7px; line-height: 1.4; cursor: pointer; font-size: 12px; }
.dc-radio input { margin-top: 2px; }
.dc-check { display: flex; gap: 6px; align-items: center; cursor: pointer; font-size: 12px; }
.dc-ages { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin: 0 0 6px; }

/* A segmented choice of two or three. */
.dc-seg { display: inline-flex; border: 1px solid var(--input-border); border-radius: 6px; overflow: hidden; margin-top: 2px; }
.dc-seg label { position: relative; cursor: pointer; }
/* The radio stays invisible when disabled too (kvot.css gives disabled radios opacity 0.55). */
.dc-seg input[type="radio"], .dc-seg input[type="radio"]:disabled { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dc-seg input[type="radio"]:disabled { cursor: not-allowed; }
.dc-seg input:disabled + span { color: var(--text-muted); opacity: 0.45; }
.dc-seg span { display: block; padding: 4px 12px; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border-right: 1px solid var(--input-border); }
.dc-seg label:last-child span { border-right: 0; }
.dc-seg input:checked + span { background: var(--accent-fill); color: #fff; }
.dc-seg input:focus-visible + span { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.dc-seg.small span { padding: 3px 9px; font-size: 11px; }

/* ---- buttons and status ------------------------------------------------- */
.dc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-btn {
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent-fill);
  color: #fff;
  font: 600 12px verdana, sans-serif;
  cursor: pointer;
}
.dc-btn:hover:not(:disabled) { background: var(--accent-fill-hover); }
.dc-btn.secondary { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); }
.dc-btn.secondary:hover:not(:disabled) { background: var(--bg-secondary); }
.dc-btn.small { padding: 3px 9px; font-size: 11px; font-weight: 400; }
.dc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dc-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.dc-btn[hidden] { display: none; }
.dc-status {
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  height: 4.35em;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.dc-status.ok { border-color: var(--accent-success); }
.dc-status.error { border-color: var(--color-kvot-accent); color: var(--text-primary); }
.dc-progress { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--bg-secondary); overflow: hidden; }
.dc-progress > div { height: 100%; width: 0; background: var(--accent-line); transition: width 0.2s; }

/* ---- the work area ------------------------------------------------------ */
.dc-main { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; margin-left: -8px; padding-left: 8px; }
/* The bar: the tabs scroll sideways when they do not fit; the buttons at its
   end stay put. */
.dc-tabbar {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin-left: -8px;
  padding-left: 8px;
  background: linear-gradient(var(--border-color), var(--border-color)) left bottom / 100% 1px no-repeat, var(--bg-secondary);
}
.dc-tabs {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* a tab cut off where the buttons begin fades out (only its padding when all fit) */
  -webkit-mask-image: linear-gradient(to left, transparent, #000 14px);
  mask-image: linear-gradient(to left, transparent, #000 14px);
}
.dc-tabs button {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font: 12px verdana, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.dc-tabs button:hover { color: var(--text-primary); }
.dc-tabs button.active { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); font-weight: 600; }
.dc-tabs button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.dc-tabend { display: flex; flex: none; align-items: center; gap: 2px; padding: 3px 8px 1px 2px; }
.dc-tabend > button { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--text-secondary); cursor: pointer; }
.dc-tabend > button:hover { background: var(--bg-primary); color: var(--text-primary); }
.dc-tabend > button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.dc-tabend > .theme-toggle { font-size: 14px; line-height: 1; }
.dc-tabend > .theme-toggle:hover { transform: none; }
.dc-homelink { flex: none; align-items: center; padding: 3px 2px 1px 6px; }
.dc-homelink img { display: block; width: 20px; height: 20px; }

/* The full window (the button at the right end of the tab bar): the page
   without the site's header and footer. There the kvot mark at the left of
   the bar goes to the home page and the site's theme switch is beside the
   button; otherwise they are the header's and the footer's own. The page's
   head sets the class before the first paint when it was left on. */
:root.dc-full { --header-height: 0px; --footer-height: 0px; }
:root.dc-full body > header, :root.dc-full body > footer, :root.dc-full body > .nav-toggle, :root.dc-full body > #menu { display: none; }
.dc-tabbar .dc-fullonly { display: none; }
:root.dc-full .dc-tabbar .dc-fullonly { display: inline-flex; }
.dc-fullbtn .dc-full-in, :root.dc-full .dc-fullbtn .dc-full-out { display: none; }
:root.dc-full .dc-fullbtn .dc-full-in { display: inline; }
.dc-pane { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 16px 24px; background: var(--bg-primary); }
.dc-pane[hidden] { display: none; }
.dc-empty { margin: 0; padding: 24px 4px 40px; color: var(--text-muted); font-size: 12px; }
.dc-empty[hidden] { display: none; }

.dc-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; font-size: 12px; }
.dc-toolbar label { display: flex; gap: 5px; align-items: center; color: var(--text-secondary); }
.dc-toolbar select {
  padding: 2px 5px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 12px;
}
.dc-spacer { flex: 1 1 auto; }
.dc-headline { font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.dc-headline b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.dc-headline .dc-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 11px; }
.dc-h3 { margin: 18px 0 8px; font: 700 1rem RawengulkSans, sans-serif; color: var(--text-primary); }
.dc-unit { font: 400 11px verdana, sans-serif; color: var(--text-muted); margin-left: 6px; }

/* ---- tables ------------------------------------------------------------- */
.dc-table-wrap { overflow: auto; max-width: 100%; }
.dc-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.dc-table th, .dc-table td { padding: 3px 12px 3px 6px; text-align: right; border-bottom: 1px solid var(--table-border); }
.dc-table td { font-family: ui-monospace, Menlo, Consolas, monospace; }
.dc-table th { background: var(--bg-secondary); color: var(--text-primary); font-weight: 600; position: sticky; top: 0; z-index: 1; }
.dc-table th:first-child, .dc-table td:first-child { text-align: left; font-family: verdana, sans-serif; }
.dc-table td.text, .dc-table th.text { text-align: left; font-family: verdana, sans-serif; white-space: normal; }
.dc-table tbody tr:nth-child(even) { background: var(--table-stripe); }
.dc-table tbody tr:hover { background: var(--bg-surface); }
.dc-table tr.sum td { font-weight: 700; }
.dc-table tr.group td { background: var(--bg-surface); font-weight: 600; font-family: verdana, sans-serif; color: var(--text-secondary); }
.dc-table td.dim { color: var(--text-muted); }
.dc-table td.big { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.dc-table .dc-w { color: var(--text-muted); font-size: 11px; }
/* The risk tab: printed values beside the calculated ones, a deviation marked. */
.dc-table td.dc-off { color: var(--accent-text); font-weight: 700; text-decoration: underline dotted; cursor: help; }
.dc-risk-sum th { position: static; text-align: center; }
.dc-risk-sum th[rowspan] { text-align: left; }
.dc-formula { max-width: 60rem; margin: 10px 0 4px; font-size: 12px; line-height: 1.6; color: var(--text-primary); }
.dc-risk-steps th { white-space: normal; max-width: 6.5rem; vertical-align: bottom; line-height: 1.3; }
.dc-risk-steps th.nw { white-space: nowrap; max-width: none; }
.dc-notes.dc-steps { padding-left: 1.6em; }
.dc-h3 select { margin-left: 4px; font: 12px verdana, sans-serif; }
/* The page's own tooltip (setupTips in ui.js): the theme's colours, at once. */
.dc-tip { position: fixed; z-index: 1000; left: 0; top: 0; max-width: 24rem; padding: 5px 9px; border: 1px solid var(--border-color); border-radius: 6px;
  background: var(--bg-primary); color: var(--text-primary); font: 12px/1.45 verdana, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.08s; }
.dc-tip.on { opacity: 1; visibility: visible; }
/* The values at the pointer in a chart, largest first. */
.dc-plot-tip { max-width: min(26rem, calc(100vw - 16px)); font-size: 11px; transition: none; }
.dc-plot-tip-time { margin: 0 0 3px; font-weight: bold; }
.dc-plot-tip table { border-collapse: collapse; }
.dc-plot-tip td { padding: 1px 0; vertical-align: middle; }
.dc-plot-tip td:nth-child(2) { padding: 1px 12px 1px 6px; }
.dc-plot-tip td.num { text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.dc-plot-tip td.pct { padding-left: 6px; text-align: right; color: var(--text-muted); white-space: nowrap; }
.dc-plot-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; }

/* Radon at home: its inputs in a wrapping row. */
.dc-radon-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 4px 0 10px; font-size: 12px; color: var(--text-secondary); }
.dc-radon-inputs label { display: flex; flex-direction: column; gap: 2px; }
.dc-radon-inputs label[hidden] { display: none; }
.dc-radon-inputs input { width: 8.5rem; padding: 3px 6px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--input-text); font: 13px ui-monospace, Menlo, Consolas, monospace; }
.dc-radon-main th { white-space: normal; max-width: 8rem; vertical-align: bottom; line-height: 1.3; }
.dc-notes { margin: 14px 0 0; max-width: 60rem; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.dc-note { font-size: 12px; color: var(--text-secondary); }
.dc-notes li { margin: 0 0 4px; }
.dc-notes li.dc-caution { list-style: none; margin: 0 0 8px -1.2em; padding: 6px 10px; border-left: 3px solid var(--color-kvot-bright); background: var(--bg-surface); color: var(--text-primary); }

/* ---- charts ------------------------------------------------------------- */
.plot { width: 100%; height: 420px; margin: 0 0 8px; }
/* Plotly's box of the values at the pointer: the page shows its own (ui.js, showPlotTip). */
.plot .hoverlayer .legend { visibility: hidden; }
.plot[hidden] { display: none; }

/* ---- the model ---------------------------------------------------------- */
.dc-model-text { max-width: 60rem; margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
/* The drawing of the model and the body beside it (below it when there is
   no room); each box as wide as its drawing, not the pane. */
.dc-model-figs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0 0 6px; }
.dc-model-figs > [hidden] { display: none; }
.dc-diagram { overflow: auto; width: fit-content; max-width: 100%; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); }
.dc-diagram svg { display: block; }
.dc-diagram .node rect { fill: var(--bg-primary); stroke: var(--input-border); stroke-width: 1; }
.dc-diagram .node.blood rect { fill: color-mix(in srgb, var(--color-kvot-accent) 16%, var(--bg-primary)); stroke: var(--color-kvot-accent); }
.dc-diagram .node.bone rect { fill: color-mix(in srgb, var(--color-kvot-bright) 22%, var(--bg-primary)); }
.dc-diagram .node.content rect { fill: var(--bg-secondary); stroke-dasharray: 3 2; }
.dc-diagram .node.sink rect { fill: none; stroke: none; }
.dc-diagram .node text { fill: var(--text-primary); font: 11px verdana, sans-serif; }
.dc-diagram .node.sink text { fill: var(--text-muted); font-style: italic; }
.dc-diagram .node .region { fill: var(--text-muted); font-size: 9px; }
.dc-diagram .edge { fill: none; stroke: var(--text-muted); stroke-width: 1; opacity: 0.75; }
.dc-diagram .edge.out { stroke: var(--accent-line); }
/* The alimentary tract and bladder models around the systemic one. */
.dc-diagram .edge.tract { stroke-dasharray: 5 3; }
.dc-table tr.tract td { color: var(--text-secondary); }
.dc-diagram .hit { fill: none; stroke: transparent; stroke-width: 9; pointer-events: stroke; }
.dc-diagram .edge-g:hover .edge { stroke-width: 2.2; opacity: 1; }
/* An arrow and its row of the transfer table, lit together; the boxes at its ends outlined. */
.dc-tlit .dc-diagram .edge-g:not(.tlit) { opacity: 0.2; }
.dc-diagram .edge-g.tlit .edge { stroke: var(--color-kvot-accent); stroke-width: 2.6; opacity: 1; marker-end: url(#dcArrowLit); }
.dc-diagram .arrow.lit { fill: var(--color-kvot-accent); }
.dc-diagram .node.tend rect { stroke: var(--color-kvot-accent); stroke-width: 2; }
/* Pointing at a box: the transfers into it in blue, out of it in the accent,
   the box itself outlined, the boxes at the other ends (and the box's body
   region, which linkParts lights) left clear, the rest dimmed. These rules
   outrank the body region's dimming further down. */
.dc { --dc-in: #2f7fc1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc { --dc-in: #6fb3ea; } }
:root[data-theme="dark"] .dc { --dc-in: #6fb3ea; }
.dc-diagram .arrow.in { fill: var(--dc-in); }
.dc-nlit .dc-diagram .edge-g:not(.tin):not(.tout) { opacity: 0.12; }
.dc-nlit .dc-diagram .node:not(.nsel):not(.nend):not(.lit):not(.sink) { opacity: 0.4; }
.dc-nlit .dc-model-figs.dc-lit .dc-diagram .node:is(.nsel, .nend):not(.sink) { opacity: 1; }
.dc-diagram .edge-g.tin .edge, .dc-model-figs.dc-lit .dc-diagram .edge-g.tin .edge { stroke: var(--dc-in); stroke-width: 2.4; opacity: 1; marker-end: url(#dcArrowIn); }
.dc-diagram .edge-g.tout .edge, .dc-model-figs.dc-lit .dc-diagram .edge-g.tout .edge { stroke: var(--color-kvot-accent); stroke-width: 2.4; opacity: 1; marker-end: url(#dcArrowLit); }
.dc-nlit .dc-diagram .node.nsel rect, .dc-nlit .dc-model-figs.dc-lit .dc-diagram .node.nsel.lit rect { stroke: var(--text-primary); stroke-width: 2.4; }
.dc-table tbody tr.tin { background: color-mix(in srgb, var(--dc-in) 20%, transparent); }
.dc-table tbody tr.tin td:first-child { box-shadow: inset 3px 0 0 var(--dc-in); }
.dc-table tbody tr.tout { background: color-mix(in srgb, var(--color-kvot-accent) 22%, transparent); }
.dc-table tbody tr.tout td:first-child { box-shadow: inset 3px 0 0 var(--color-kvot-accent); }
.dc-table tbody tr.tlit, .dc-table tbody tr.tlit:hover { background: color-mix(in srgb, var(--color-kvot-accent) 26%, transparent); }
.dc-diagram .arrow { fill: var(--text-muted); }
.dc-diagram .arrow.out { fill: var(--accent-line); }
.dc-diagram .lane { fill: var(--text-muted); font: 700 10px verdana, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.dc-diagram .node .badge .disc, .dc-body-svg .bp-num .disc { fill: var(--accent-fill); stroke: var(--bg-primary); stroke-width: 1; }
.dc-diagram .node .badge text { fill: #fff; font: 700 8.5px verdana, sans-serif; }
.dc-model-figs.dc-lit .dc-diagram .node:not(.lit):not(.sink), .dc-model-figs.dc-lit .dc-diagram .edge { opacity: 0.35; }
.dc-model-figs.dc-lit .dc-diagram .node.lit rect { stroke: var(--color-kvot-accent); stroke-width: 2.2; }
/* The boxes as buckets (after a calculation): each filled from the bottom to
   its share of the member's activity in the body, the share as its second
   line; the boxes' own tints give way so that the levels read alike. */
.dc-diagram .node .level { fill: var(--accent-line); fill-opacity: 0.5; pointer-events: none; }
.dc-diagram .node .share { display: none; font: 600 9.5px verdana, sans-serif; fill: var(--text-primary); }
.dc-diagram svg.buckets .node .share { display: inline; }
.dc-diagram svg.buckets .node .rcode { display: none; }
.dc-diagram svg.buckets .node:not(.sink) > rect { fill: var(--bg-primary); }
.dc-diagram svg.buckets .node > text { paint-order: stroke; stroke: var(--bg-primary); stroke-width: 3px; stroke-linejoin: round; }
.dc-buckets { margin: 0 0 10px; }
.dc-buckets .dc-toolbar { margin-bottom: 2px; }
.dc-toolbar label[hidden] { display: none; }
.dc-range { flex: 1 1 220px; min-width: 150px; max-width: 420px; margin: 0; accent-color: var(--color-kvot-accent); }
.dc-buckets-time { min-width: 25ch; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dc-buckets .dc-btn { min-width: 8em; }
/* What changes with the time keeps its size, so that the drawing below stays
   put: the note over the longest notes of the view (the sizer, hidden), each
   share in a width of its own. */
.dc-bucket-note { display: grid; margin: 4px 0 0; }
.dc-bucket-note > p { grid-area: 1 / 1; margin: 0; }
.dc-sizer { visibility: hidden; display: grid; }
.dc-sizer > span { grid-area: 1 / 1; }
.dc-bucket-extra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; font-size: 11.5px; }
.dc-bucket-extra:empty { display: none; }
.dc-bucket-extra-head { color: var(--text-muted); }
.dc-chip { position: relative; display: inline-flex; align-items: center; overflow: hidden; padding: 3px 8px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); }
.dc-chip-level { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--level, 0) * 100%); background: var(--accent-line); opacity: 0.5; }
.dc-chip-text { position: relative; }
.dc-chip-text b { display: inline-block; min-width: 7.5ch; font-variant-numeric: tabular-nums; } /* "< 0.01 %", the widest */

/* The body: organs faint, those of the model tinted and numbered, the ones
   pointed at (and their boxes) strong. */
.dc-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; margin: 0; padding: 8px 12px 8px 8px; max-width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); }
.dc-body-svg { flex: none; width: 170px; height: auto; }
.dc-body figcaption { flex: 1 1 11rem; max-width: 14rem; }
.dc-body-key { list-style: none; margin: 0 0 6px; padding: 0; font-size: 11px; line-height: 1.35; }
.dc-body-key li { display: flex; gap: 7px; padding: 2px 4px; border-radius: 4px; cursor: default; outline: none; }
.dc-body-key li .num { flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-fill); color: #fff; font: 700 10px/17px verdana, sans-serif; text-align: center; }
.dc-body-key li .names { color: var(--text-muted); }
.dc-body-key li.lit, .dc-body-key li:focus-visible { background: color-mix(in srgb, var(--color-kvot-accent) 16%, transparent); }
.dc-body-svg .bp { fill: var(--bg-primary); stroke: var(--input-border); stroke-width: 0.7; }
.dc-body-svg .bp .fill { fill: var(--bg-secondary); stroke: none; }
.dc-body-svg .bp .skin { fill: none; stroke: var(--text-muted); stroke-width: 1; }
.dc-body-svg .bp .band { fill: none; stroke: transparent; stroke-width: 7; }
.dc-body-svg .bp :is(.vessel, .tube, .gut, .bone, .marrow, .texture) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dc-body-svg .bp .vessel { stroke: color-mix(in srgb, var(--text-muted) 40%, transparent); stroke-width: 1.1; }
.dc-body-svg .bp .tube { stroke-width: 2.2; }
.dc-body-svg .bp .tube.thin { stroke-width: 1; }
.dc-body-svg .bp .gut { stroke-width: 5; stroke: color-mix(in srgb, var(--input-border) 70%, var(--bg-primary)); }
.dc-body-svg .bp .texture { stroke-width: 0.6; }
.dc-body-svg .bp .bone { stroke: color-mix(in srgb, var(--text-muted) 45%, transparent); stroke-width: 2.4; }
.dc-body-svg .bp .bone.spine { stroke-width: 3.6; stroke-dasharray: 3 1.4; stroke-linecap: butt; }
.dc-body-svg .bp .bone.rib { stroke-width: 1.2; }
.dc-body-svg .bp .marrow { stroke: transparent; stroke-width: 1.2; }
.dc-body-svg .bp .marrow.spine { stroke-width: 1.4; }
.dc-body-svg .bp.breast { fill: none; stroke-dasharray: 2 1.5; }
.dc-body-svg .hatch { stroke: color-mix(in srgb, var(--color-kvot-accent) 45%, transparent); stroke-width: 1.4; }
.dc-body-svg .bp.used { fill: color-mix(in srgb, var(--color-kvot-accent) 30%, var(--bg-primary)); stroke: var(--color-kvot-accent); }
.dc-body-svg .bp.used .fill { fill: url(#dcBodyHatch); }
.dc-body-svg .bp.used .skin { stroke: var(--color-kvot-accent); stroke-width: 2; }
.dc-body-svg .bp.used .band { stroke: color-mix(in srgb, var(--color-kvot-accent) 35%, transparent); }
.dc-body-svg .bp.used :is(.vessel, .tube, .gut, .bone, .marrow) { stroke: color-mix(in srgb, var(--color-kvot-accent) 70%, var(--bg-primary)); }
.dc-body-svg .bp.used.breast { fill: none; }
.dc-body-svg .bp-num text { fill: #fff; font: 700 8px verdana, sans-serif; }
.dc-model-figs.dc-lit .dc-body-svg .bp.used:not(.lit), .dc-model-figs.dc-lit .dc-body-svg .bp-num:not(.lit) { opacity: 0.35; }
.dc-body-svg .bp.lit { fill: color-mix(in srgb, var(--color-kvot-accent) 72%, var(--bg-primary)); stroke-width: 1.3; }
.dc-body-svg .bp.lit :is(.vessel, .tube, .gut, .bone, .marrow) { stroke: var(--color-kvot-accent); stroke-width: 3; }
.dc-body-svg .bp.lit .skin { stroke-width: 3; }
.dc-body-svg .bp.lit .band { stroke: color-mix(in srgb, var(--color-kvot-accent) 60%, transparent); }
.dc-kv { border-collapse: collapse; font-size: 12px; margin: 0 0 12px; }
.dc-kv th, .dc-kv td { padding: 3px 14px 3px 0; text-align: left; border-bottom: 1px solid var(--table-border); vertical-align: top; }
.dc-kv th { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.dc-kv td.num { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }

/* ---- help --------------------------------------------------------------- */
.dc-help { line-height: 1.65; }
.dc-help > * { max-width: 64rem; }
.dc-help h2 { margin: 4px 0 10px; font: 700 1.3rem RawengulkSans, sans-serif; color: var(--text-primary); }
.dc-help h3 { margin: 22px 0 6px; font: 700 1.05rem RawengulkSans, sans-serif; color: var(--text-primary); }
.dc-help h4 { margin: 16px 0 4px; font: 700 0.95rem verdana, sans-serif; color: var(--color-kvot-accent); }
.dc-help p { margin: 0 0 10px; }
.dc-help ul { margin: 0 0 10px; padding-left: 1.4em; }
.dc-help li { margin: 0 0 5px; }
.dc-help code { padding: 1px 4px; border-radius: 3px; background: var(--code-bg); font-size: 0.92em; }
.dc-help table.dc-ref { border-collapse: collapse; margin: 4px 0 14px; font-size: 12px; }
.dc-help table.dc-ref td, .dc-help table.dc-ref th { padding: 4px 16px 4px 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--table-border); }
.dc-help table.dc-ref th { font-weight: 600; }
.dc-help table.dc-ref td.num { text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
/* The ratio tables: a column per age at intake under one heading. */
.dc-help table.dc-ratios th.group { text-align: center; padding-right: 0; border-bottom: 0; }
.dc-help table.dc-ratios th.age { text-align: right; font-weight: normal; color: var(--text-secondary); white-space: nowrap; padding-right: 10px; }
.dc-help table.dc-ratios td.num { padding-right: 10px; }
.dc-help table.dc-ratios tbody td:not(.num):not(:last-child) { white-space: nowrap; }
.dc-help table.dc-ratios td:last-child, .dc-help table.dc-ratios thead tr:first-child th:last-child { padding-left: 14px; }

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width: 760px) {
  .dc { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; height: auto; min-height: 100%; }
  .dc-side { height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--border-color); }
  .dc-side-scroll { overflow: visible; }
  .dc-resize { display: none; }
  .dc-main { margin-left: 0; padding-left: 0; height: auto; min-height: 70vh; }
  .dc-tabbar { margin-left: 0; padding-left: 0; }
  .dc-pane { padding: 10px 10px 24px; }
  .plot { height: 340px; }
  .dc-body figcaption { max-width: none; }
  .dc-radon-inputs input { font-size: 16px; } /* no zoom on iOS */
  .dc-row input[type="text"], .dc-row select, .dc-row input#dcNuclide { font-size: 16px; } /* no zoom on iOS */
}

/* What Calculate will solve, above the button: a line, and the details under it. */
.dc-size { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.dc-size[hidden] { display: none; }
.dc-size summary { cursor: pointer; list-style-position: outside; margin-left: 1em; }
.dc-size-kicker { font-weight: bold; color: var(--text-primary); }
.dc-size-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 0; max-height: 14rem; overflow-y: auto; }
.dc-size-body dt { font-weight: bold; color: var(--text-primary); }
.dc-size-body dd { margin: 0; overflow-wrap: anywhere; }
/* Which choice the Model and Decay chain tabs show, and whether it has been calculated. */
.dc-pane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.dc-head-note { font-size: 12px; color: var(--text-muted); }
/* Results no longer of the current settings: a notice over them, and the
   numbers and charts dimmed until Calculate runs again. */
.dc-stale-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 7px 12px;
  border-left: 3px solid var(--color-kvot-bright); border-radius: 4px; background: var(--bg-surface); color: var(--text-primary);
  font-size: 12.5px; line-height: 1.5; }
.dc-stale-note[hidden] { display: none; }
.dc-stale-note .dc-btn { flex: none; }
.dc-stale .dc-table-wrap, .dc-stale .plot, .dc-stale .dc-notes, .dc-table-wrap.dc-dim { opacity: 0.5; filter: grayscale(0.5); transition: opacity 0.15s; }
/* ---- the Batch tab ----------------------------------------------------------- */
.dc-batch-form { display: flex; flex-direction: column; gap: 12px; max-width: 62rem; margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); }
.dc-batch-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.dc-batch-form fieldset[hidden] { display: none; }
.dc-batch-form legend, .dc-batch-label { margin: 0 0 4px; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dc-batch-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.dc-batch-nuclides { display: flex; flex-direction: column; }
.dc-batch-nuclides textarea { box-sizing: border-box; width: 100%; min-height: 3.4em; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--input-text); font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; resize: vertical; }
.dc-batch-parsed { margin: -6px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.dc-batch-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dc-batch-results { flex-direction: column; gap: 3px; }
.dc-batch-view { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); }
.dc-batch-view select { margin-left: 4px; }
.dc-batch-go { display: flex; flex-direction: column; gap: 8px; }
.dc-batch-count { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-primary); }
.dc-batch-progress { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-secondary); }
.dc-batch-progress[hidden] { display: none; }
.dc-batch-progress .dc-progress { height: 8px; margin-top: 0; border-radius: 4px; }
.dc-batch-caption { font-size: 12px; }
.dc-toolbar[hidden] { display: none; }
.dc-batch-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 4px; }
.dc-batch-label-row .dc-batch-label { margin: 0; }
.dc-batch-select { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; }
.dc-batch-select select { align-self: flex-start; }
.dc-batch-select .dc-muted { font-size: 11.5px; }
/* What the table shows: apart from what is calculated. */
.dc-batch-show { display: flex; flex-direction: column; gap: 8px; max-width: 62rem; margin: 0 0 12px; padding: 10px 14px;
  border: 1px dashed var(--border-color); border-radius: 8px; }
.dc-batch-show-head { font-size: 12.5px; color: var(--text-primary); }
.dc-batch-show .dc-batch-view { margin: 0; }
.dc-batch-results .dc-check:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* The radionuclide picker of the Batch tab. */
.dc-picker { width: min(64rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.dc-picker::backdrop { background: rgba(0, 0, 0, 0.45); }
.dc-picker[open] { display: flex; flex-direction: column; overflow: auto; }
.dc-picker-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 12px 16px 8px; border-bottom: 1px solid var(--border-color); }
.dc-picker-head h2 { margin: 0; font-size: 16px; }
.dc-picker-x { margin-left: auto; border: 0; background: none; color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; }
.dc-picker-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; padding: 10px 16px; font-size: 12px; color: var(--text-secondary); }
.dc-picker-filters label { display: flex; flex-direction: column; gap: 2px; }
.dc-picker-filters label.dc-check { flex-direction: row; align-items: center; padding-bottom: 4px; }
.dc-picker-filters input[type="search"], .dc-picker-filters select { padding: 3px 6px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--input-text); font: 13px verdana, sans-serif; }
.dc-picker-search input { width: 12rem; }
.dc-picker-lists { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; flex: none; padding: 0 16px; }
.dc-picker-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dc-picker-col select { width: 100%; min-height: 16rem; height: 40vh; padding: 2px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--input-text); font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.dc-picker-moves { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dc-picker-hint { margin: 8px 16px 0; font-size: 11.5px; }
/* Cancel and Use stay in view when the dialog scrolls (phones). */
.dc-picker-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding: 12px 16px;
  border-top: 1px solid var(--border-color); background: var(--bg-primary); }
@media (max-width: 760px) {
  .dc-picker-lists { grid-template-columns: 1fr; }
  .dc-picker-moves { flex-direction: row; flex-wrap: wrap; }
  .dc-picker-col select { height: 30vh; min-height: 8rem; }
  .dc-picker-filters input[type="search"], .dc-picker-filters select, .dc-picker-col select, .dc-batch-select select { font-size: 16px; } /* no zoom on iOS */
}
.dc-batch-table th.group { text-align: center; border-bottom: 1px solid var(--border-color); }
@media (max-width: 760px) {
  .dc-batch-nuclides textarea, .dc-batch-view select { font-size: 16px; } /* no zoom on iOS */
}
/* The settings of a single calculation, dimmed while the Batch or Radon at
   home tab (which have their own) is open; pointing at them, or a focus in
   them, brings them back. */
.dc-side-note { flex: 0 0 auto; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--border-color); border-left: 3px solid var(--color-kvot-bright);
  background: var(--bg-secondary); color: var(--text-primary); font-size: 12px; line-height: 1.45; }
.dc-side-note[hidden] { display: none; }
.dc-side-away .dc-side-scroll, .dc-side-away .dc-side-foot { opacity: 0.4; filter: grayscale(0.6); transition: opacity 0.2s, filter 0.2s; }
.dc-side-away .dc-side-scroll:hover, .dc-side-away .dc-side-scroll:focus-within,
.dc-side-away .dc-side-foot:hover, .dc-side-away .dc-side-foot:focus-within { opacity: 0.8; filter: none; }