/* Add to My Pool: the bench stylesheet. Slate and strip. Sizes in rem; px only for borders and the 16px input floor. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/vial/type/plexsans-book.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/vial/type/plexsans-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/vial/type/plexsans-semibold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/vial/type/plexmono-medium.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --slate: #2f3e4c;
  --slate-deep: #26333f;
  --bench: #f4f6f7;
  --paper-card: #ffffff;
  --graphite: #1f2a33;
  --pewter: #4b5a66;
  --hairline: #d3dbe0;
  --pad-pink: #e0457b;
  --pad-sun: #f2c230;
  --pad-aqua: #3bb7c4;
  --pad-plum: #7b5ea7;
  --in-range: #2e6b4f;
  --watch: #8b5a02;
  --stop-red: #a32638;
  --sans-face: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono-face: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* supporting shades */
  --dip: #b0305f;
  --dip-ink: #ffffff;
  --tile: #dbe2e6;
  --ring: #7b5ea7;
  --rinse-link: #8f2650;
  --control-edge: #66757f;
  --on-slate: #ffffff;
  --on-slate-soft: #d5dee3;
  --stop-wash: #fbeef0;
  --watch-wash: #fcf4e4;
  --range-wash: #e9f3ee;
  --band-track: #e3e8eb;
  --nav-cue: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --slate: #1d2832;
    --slate-deep: #17212a;
    --bench: #12191e;
    --paper-card: #1a232a;
    --graphite: #e5ebee;
    --pewter: #b5c2ca;
    --hairline: #33424d;
    --pad-pink: #e65a8a;
    --pad-sun: #e9bd34;
    --pad-aqua: #46bfcb;
    --pad-plum: #9479c0;
    --in-range: #82d3aa;
    --watch: #efbd5f;
    --stop-red: #ff8e9b;
    --dip: #c63b6e;
    --dip-ink: #ffffff;
    --tile: #0a0e11;
    --ring: #46bfcb;
    --rinse-link: #f4a6c3;
    --control-edge: #8698a4;
    --on-slate: #ffffff;
    --on-slate-soft: #ccd6dc;
    --stop-wash: #2b191d;
    --watch-wash: #29230f;
    --range-wash: #15271f;
    --band-track: #2a3640;
    --nav-cue: rgba(255, 255, 255, 0.4);
  }
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tile);
  color: var(--graphite);
  font-family: var(--sans-face);
  font-size: 1.1875rem;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 48em) { body { font-size: 1.25rem; } }

h1, h2, h3 { font-weight: 600; line-height: 1.25; overflow-wrap: break-word; margin: 1.6em 0 0.5em; }
h1 { font-size: clamp(1.75rem, 5.5vw, 2.6rem); margin-top: 0.4em; }
h2 { font-size: clamp(1.35rem, 3.6vw, 1.7rem); }
h3 { font-size: 1.2rem; }
p, li { max-width: 33em; }  /* about 70 characters of Plex Sans a line */
p { margin: 0 0 0.9em; }
a { color: var(--rinse-link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.12em; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
img, svg, video, iframe { max-width: 100%; height: auto; }
.mono { font-family: var(--mono-face); font-weight: 500; }
q { quotes: "\201C" "\201D"; }
.tidbits { font-size: 1.0625rem; color: var(--pewter); }
.readaloud { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.offsite { width: 0.8em; height: 0.8em; margin-left: 0.2em; vertical-align: -0.05em; fill: none; stroke: currentColor; stroke-width: 1.6; }

.divein { position: absolute; left: 0.75rem; top: -4rem; padding: 0.6rem 1rem; background: var(--paper-card); color: var(--graphite); border-radius: 6px; z-index: 3; }
.divein:focus { top: 0.75rem; }

/* ---------- masthead, strip band, shelf nav ---------- */
.poolhead { background: var(--slate); color: var(--on-slate); }
.poolhead-in { max-width: 70rem; margin: 0 auto; padding: 0.8rem 1rem; }
.poolsign { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--on-slate); text-decoration: none; min-height: 2.75rem; }
.poolsign svg { width: 3rem; height: 3rem; flex: none; }  /* 48px on phones, 64px on computers */
.poolsign-words { display: flex; flex-direction: column; min-width: 0; }
.poolsign-name { font-weight: 600; font-size: 1.75rem; line-height: 1.15; overflow-wrap: break-word; }
.poolsign-tag { font-size: 1.0625rem; color: var(--on-slate-soft); line-height: 1.35; }  /* one size down on phones: the small-print floor */
@media (min-width: 40em) { .poolsign-tag { font-size: 1.1875rem; } }
@media (min-width: 48em) {
  .poolhead-in { padding: 1rem 2.25rem; }
  .poolsign { gap: 1rem; }
  .poolsign svg { width: 4rem; height: 4rem; }
  .poolsign-name { font-size: 2.5rem; line-height: 1.1; }
  .poolsign-tag { font-size: 1.25rem; }
}
.strip-case { fill: var(--on-slate); stroke: var(--on-slate); }
.strip-pink { fill: var(--pad-pink); } .strip-sun { fill: var(--pad-sun); } .strip-aqua { fill: var(--pad-aqua); } .strip-plum { fill: var(--pad-plum); }

.padband { display: flex; height: 0.5rem; }
@media (min-width: 48em) { .padband { height: 0.65rem; } }
.padband span { flex: 1 1 0; }
.padband span:nth-child(1) { background: var(--pad-pink); }
.padband span:nth-child(2) { background: var(--pad-sun); }
.padband span:nth-child(3) { background: var(--pad-aqua); }
.padband span:nth-child(4) { background: var(--pad-plum); }

.shelfnav { background: var(--slate-deep); }
.shelfnav ul { list-style: none; margin: 0 auto; padding: 0 0.5rem; max-width: 70rem; display: flex; flex-wrap: wrap; row-gap: 0; column-gap: 0.25rem; }
.shelfnav li { max-width: none; flex: none; }
.shelfnav a, .shelfnav .unpoured { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem; color: var(--on-slate); font-size: 1em; white-space: nowrap; }
@media (min-width: 48em) {
  .shelfnav ul { padding: 0 1.65rem; }
  .shelfnav a, .shelfnav .unpoured { min-height: 3.5rem; }
}
/* below computer width the nav is one row that scrolls sideways; the light edge shows there is more */
@media (max-width: 63.99em) {
  .shelfnav ul {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: var(--on-slate-soft) transparent;
    background:
      linear-gradient(to right, var(--slate-deep) 40%, transparent) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--slate-deep) 40%, transparent) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to right, var(--nav-cue), transparent) left center / 1.25rem 100% no-repeat scroll,
      linear-gradient(to left, var(--nav-cue), transparent) right center / 1.25rem 100% no-repeat scroll,
      var(--slate-deep);
  }
}
.shelfnav a { text-decoration: none; }
.shelfnav a:hover, .shelfnav a[aria-current] { text-decoration: underline; }
.shelfnav .unpoured { color: var(--on-slate-soft); }

/* ---------- the sheet ---------- */
.deck { max-width: 70rem; margin: 0 auto; background: var(--bench); padding: 1rem 1rem 3rem; container-type: inline-size; container-name: sheet; }
@media (min-width: 48em) { .deck { padding: 1.5rem 2.25rem 3.5rem; } }
.deck-bare { max-width: 47rem; }  /* embeds: the tool's own width, no side column */
.deckmain { min-width: 0; }
.deckmain > section, .deckmain > nav, .deckmain > aside, .deckmain > div, .deckmain > figure, .deck-bare > * { min-width: 0; }
h2[id], #bench-top { scroll-margin-top: 1rem; }

/* ---------- the side column: wide sheets only (phones and tablets as before) ---------- */
.sidebench { display: none; }
@container sheet (min-width: 58rem) {
  .deckgrid { display: grid; grid-template-columns: minmax(0, 42rem) minmax(15rem, 18rem); column-gap: 2rem; justify-content: space-between; align-items: start; }
  /* stays in view while the page scrolls (never inside an overflow box); taller than the window, it scrolls inside itself */
  .sidebench {
    display: block; position: sticky; top: 1rem; margin-top: 2rem;
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    overflow-y: auto; scrollbar-width: thin; font-size: 1.0625rem; line-height: 1.5;
  }
}
.sidebench-box { background: var(--paper-card); border: 1px solid var(--hairline); border-left: 0.4rem solid var(--pad-pink); border-radius: 0 6px 6px 0; padding: 0 0.9rem 0.5rem; margin: 0 0 0.6rem; }
.sidebench-box[data-pad="2"] { border-left-color: var(--pad-sun); }
.sidebench-box[data-pad="3"] { border-left-color: var(--pad-aqua); }
.sidebench-head { background: var(--slate); color: var(--on-slate); font-size: 1.0625rem; margin: 0 -0.9rem 0.4rem; padding: 0.3rem 0.9rem; border-radius: 0 5px 0 0; }
.sidebench-list { list-style: none; margin: 0; padding: 0; }
.sidebench-list li { max-width: none; }
.sidebench-list a, .sidebench-list .unpoured { display: block; padding: 0.15rem 0; }
.sidebench-figs { margin: 0; }
.sidebench-figs div + div { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--hairline); }
.sidebench-figs dt { color: var(--pewter); }
.sidebench-figs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.skimline { font-size: 1.0625rem; color: var(--pewter); display: flex; flex-wrap: wrap; gap: 0 0.45rem; }
.skimline a { color: var(--rinse-link); }
.chartline { font-size: 1.0625rem; color: var(--pewter); margin-top: -0.2rem; }
.lowdown { font-size: 1.08em; }

/* ---------- the bench (tool box) ---------- */
.workbench { background: var(--paper-card); border: 2px solid var(--hairline); border-radius: 6px; padding: 1rem; margin: 1.25rem 0 0.75rem; }
@media (min-width: 48em) { .workbench { padding: 1.5rem 1.75rem; } }
.workbench fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.workbench legend { font-weight: 600; font-size: 1.2rem; padding: 0; margin-bottom: 0.6rem; }
.sampler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 0.9rem 1.1rem; }
.sampler > * { min-width: 0; }
.sampler-wide { grid-column: 1 / -1; }
.dropper { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.dropper > label, .dropper > span.dropper-name { font-weight: 600; }
.dropper[hidden], .sampler > [hidden] { display: none; }
.dropper .tidbits { margin: 0; }
.workbench input[type="text"], .workbench select, .carryout textarea {
  font: inherit;
  font-size: max(1.0625rem, 16px);
  color: var(--graphite);
  background: var(--paper-card);
  border: 2px solid var(--control-edge);
  border-radius: 6px;
  min-height: 2.75rem;
  padding: 0.45rem 0.6rem;
  width: 100%;
  min-width: 0;
}
.workbench input[type="text"] { font-family: var(--mono-face); }
.sizepair { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sizepair input[type="text"] { flex: 1 1 7rem; width: auto; }
.sizepair select { flex: 1 1 8rem; width: auto; }
.tickrow { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 600; }
.tickrow input { width: 1.35rem; height: 1.35rem; margin: 0; flex: none; accent-color: var(--dip); }
.pour, .pour-quiet {
  font: inherit; font-weight: 600; font-size: 1.125rem;
  min-height: 2.75rem; padding: 0.5rem 1.4rem;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pour { background: var(--dip); color: var(--dip-ink); border: 2px solid var(--dip); }
.pour:hover { filter: brightness(1.08); }
.pour-quiet { background: transparent; color: var(--graphite); border: 2px solid var(--control-edge); }
.pourrow { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.sizer { margin: 0.25rem 0 0; border: 1px dashed var(--control-edge); border-radius: 6px; padding: 0 0.9rem; }
.sizer > summary { padding-block: 0.65rem; cursor: pointer; font-weight: 600; min-height: 2.75rem; }
.sizer[open] { padding-bottom: 0.9rem; }
.sizer-out { margin-top: 0.8rem; }

/* ---------- results ---------- */
.readout:empty { display: none; }
.readout { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.readout > * { margin: 0; min-width: 0; }
.readout h3 { margin: 0; }
.readout-vol { font-weight: 600; }
.readout-flag { border-left: 0.35rem solid var(--watch); background: var(--watch-wash); padding: 0.65rem 0.9rem; border-radius: 0 6px 6px 0; }
.readout-error { border-left: 0.35rem solid var(--stop-red); background: var(--stop-wash); padding: 0.65rem 0.9rem; border-radius: 0 6px 6px 0; font-weight: 600; }
.readout ul { margin: 0; padding-left: 1.2rem; }
.readout li + li { margin-top: 0.35rem; }
.dose-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.dose-steps > li { max-width: none; }
.dose-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.9rem; background: var(--paper-card); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.9rem 1rem; }
.dose-step > div { min-width: 0; }
.dose-step h3 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.dose-step p { margin: 0.35rem 0; }
.pad-mark { width: 1.05rem; height: 2.7rem; border-radius: 4px; border: 2px solid var(--graphite); margin-top: 0.15rem; }
@media (max-width: 30em) {
  .workbench { padding: 0.85rem 0.75rem; }
  .dose-step { grid-template-columns: minmax(0, 1fr); padding: 0.75rem; }
  .dose-step .pad-mark { width: 2.7rem; height: 1.05rem; margin: 0 0 0.5rem; }
  .readout ul { padding-left: 1.05rem; }
}
[data-pad="1"] > .pad-mark, .pad-mark[data-pad="1"] { background: var(--pad-pink); }
[data-pad="2"] > .pad-mark, .pad-mark[data-pad="2"] { background: var(--pad-sun); }
[data-pad="3"] > .pad-mark, .pad-mark[data-pad="3"] { background: var(--pad-aqua); }
[data-pad="4"] > .pad-mark, .pad-mark[data-pad="4"] { background: var(--pad-plum); }
.dose-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
.dose-amount .dose-label { font-weight: 600; }
.dose-amount .dose-us { font-family: var(--mono-face); font-weight: 500; font-size: clamp(1.2rem, 5vw, 1.6rem); overflow-wrap: anywhere; }
.dose-amount .dose-metric { font-family: var(--mono-face); font-weight: 500; color: var(--pewter); overflow-wrap: anywhere; }
.dose-amount.is-quiet .dose-us { font-size: 1.05em; }
.waitline { font-weight: 600; }
.swimline { color: var(--graphite); }

/* ---------- warning, professional and source parts ---------- */
.caution-panel { border-left: 0.5rem solid var(--stop-red); background: var(--stop-wash); border-radius: 0 6px 6px 0; padding: 0.9rem 1rem 0.6rem 1.1rem; margin: 1.25rem 0; }
.caution-panel h2, .caution-panel h3 { color: var(--stop-red); margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 600; }
.caution-panel ol { margin: 0 0 0.6rem; padding-left: 1.5rem; }
.caution-panel li + li { margin-top: 0.3rem; }
.caution-panel .is-new { font-weight: 600; }
.whyline > summary { padding-block: 0.65rem; min-height: 2.75rem; cursor: pointer; font-weight: 600; }
.whyline ol { font-size: 1.0625rem; }
.whyline li p { margin: 0.25rem 0; }
.pro-panel { border: 3px solid var(--watch); background: var(--watch-wash); border-radius: 6px; padding: 1rem 1.1rem; }
.pro-panel h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.sourcepill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.6rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: 1.0625rem; line-height: 1.6; background: var(--paper-card); color: var(--graphite); font-weight: 400; overflow-wrap: anywhere; vertical-align: baseline; }
.sourcepill::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; background: var(--pewter); }
.sourcepill.is-official::before { background: var(--in-range); }
.sourcepill.is-other::before { background: var(--watch); }
.sourcepill.is-open::before { background: var(--stop-red); }

.assay { font-size: 1.0625rem; color: var(--pewter); }

/* ---------- tables ---------- */
.skimbox { overflow-x: auto; max-width: 100%; border: 1px solid var(--hairline); border-radius: 6px; margin: 1rem 0; background: var(--paper-card); }
.readingtable { border-collapse: collapse; width: 100%; min-width: min(20rem, 100%); }
.readingtable caption { text-align: left; padding: 0.6rem 0.8rem; font-size: 1.0625rem; color: var(--pewter); }
.readingtable th, .readingtable td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-top: 1px solid var(--hairline); overflow-wrap: break-word; }
.readingtable tbody th { min-width: 7.5em; }
.readingtable thead th { background: var(--slate); color: var(--on-slate); border-top: 0; font-weight: 600; }
.readingtable tbody th { font-weight: 600; }

/* ---------- home: fix one thing ---------- */
.fixcards { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem; }
.fixcards > li { max-width: none; min-width: 0; background: var(--paper-card); border: 2px solid var(--hairline); border-top-width: 0.45rem; border-radius: 6px; padding: 0.6rem 0.9rem 0.8rem; }
.fixcards > li[data-pad="1"] { border-top-color: var(--pad-pink); }
.fixcards > li[data-pad="2"] { border-top-color: var(--pad-sun); }
.fixcards > li[data-pad="3"] { border-top-color: var(--pad-aqua); }
.fixcards > li[data-pad="4"] { border-top-color: var(--pad-plum); }
.fixcards h3 { margin: 0; font-size: 1.2rem; }
.fixcards h3 a, .fixcards h3 span { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fixcards p { margin: 0.2rem 0 0; }

/* ---------- pH band drawing (positions drawn to scale) ---------- */
.levelband { margin: 1.5rem 0; padding: 1rem; background: var(--paper-card); border: 1px solid var(--hairline); border-radius: 6px; }
.levelband-track { position: relative; height: 2.6rem; background: var(--band-track); border-radius: 4px; margin: 0.4rem 0 0.2rem; }
.levelband-track span { position: absolute; top: 0; bottom: 0; }
.levelband .lb-ok { background: var(--pad-aqua); }
.levelband .lb-aim { background: var(--in-range); top: 0.55rem; bottom: 0.55rem; }
.levelband .lb-floor { width: 0.25rem; background: var(--stop-red); top: -0.35rem; bottom: -0.35rem; margin-left: -0.125rem; }
.levelband-ticks { position: relative; height: 1.9rem; font-family: var(--mono-face); font-size: 1.0625rem; }
.levelband-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.levelband-ticks .lb-start { transform: none; }
.levelband-ticks .lb-end { transform: translateX(-100%); }
@media (max-width: 30em) { .levelband-ticks .lb-inner { display: none; } }  /* the key gives the aim band on small screens */
.levelband-key { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 1.0625rem; }
.levelband-key li { display: flex; gap: 0.6rem; align-items: baseline; }
.levelband-key i { flex: none; width: 1.6rem; height: 0.9rem; border-radius: 3px; display: inline-block; }
.levelband-key .lb-ok { background: var(--pad-aqua); }
.levelband-key .lb-aim { background: var(--in-range); }
.levelband-key .lb-floor { background: var(--stop-red); width: 0.3rem; }
.levelband figcaption { font-size: 1.0625rem; color: var(--pewter); margin-top: 0.6rem; }
.levelband-name { font-weight: 600; margin: 0 0 0.2rem; }
.levelband .lb-mark { width: 0.2rem; background: var(--graphite); top: -0.25rem; bottom: -0.25rem; margin-left: -0.1rem; }
.levelband-key .lb-mark { background: var(--graphite); width: 0.25rem; }
.levelband .lb-alt, .levelband-key .lb-alt { background: var(--pad-plum); }
.levelset { display: flex; flex-direction: column; gap: 0; }
.ratiolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ratiolist li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 0.15rem 0.8rem; align-items: center; max-width: none; }
.ratio-name { font-size: 1.0625rem; }
.ratio-track { position: relative; height: 1.3rem; background: var(--band-track); border-radius: 3px; }
.ratio-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--in-range); border-radius: 3px; }
.ratio-fig { grid-column: 2; font-size: 1.0625rem; overflow-wrap: anywhere; }
@media (max-width: 30em) { .ratiolist li { grid-template-columns: minmax(0, 1fr); } .ratio-fig { grid-column: 1; } }

/* ---------- worked example, steps, questions ---------- */
.trialrun { background: var(--range-wash); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.9rem 1.1rem; margin: 1rem 0; }
.trialrun p:last-child { margin-bottom: 0; }
.dosesteps-howto { padding-left: 1.5rem; }
.dosesteps-howto li + li { margin-top: 0.45rem; }
.askbox h3 { font-size: 1.2rem; margin: 1.3rem 0 0.35rem; }

/* ---------- next test, embed box, sources ---------- */
.nexttest ul { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0 1.4rem; row-gap: 0; }
.nexttest a, .nexttest .unpoured { display: inline-flex; align-items: center; min-height: 2.75rem; }
.nexttest .unpoured { color: var(--graphite); }
/* the two fold-outs at the end of a page: the embed code, then the figures list (both closed until opened) */
.carryout, .chartfold { background: var(--paper-card); border: 1px solid var(--hairline); border-left: 0.4rem solid var(--pad-aqua); border-radius: 0 6px 6px 0; margin: 1rem 0 1.25rem; }
.chartfold { border-left-color: var(--pad-plum); margin-top: 0.5rem; }
.carryout > summary, .chartfold > summary { padding: 0.65rem 1rem; min-height: 2.75rem; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.carryout[open] > summary, .chartfold[open] > summary { border-bottom: 1px solid var(--hairline); margin-bottom: 0.6rem; }
.carryout-in, .chartfold-in { padding: 0 1rem 1rem; }
.chartfold-in > p:first-child { margin-top: 0; }
.chartbook > h2 { margin-bottom: 0.4rem; }
.carryout textarea { font-family: var(--mono-face); font-size: max(1rem, 16px); line-height: 1.5; resize: vertical; overflow-wrap: anywhere; }
.carryout label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.sourcebook { list-style: none; padding: 0; margin: 0.5rem 0; border-top: 1px solid var(--hairline); }
.sourcebook > li { max-width: none; border-bottom: 1px solid var(--hairline); }
.sourcebook summary { padding-block: 0.65rem; min-height: 2.75rem; cursor: pointer; overflow-wrap: anywhere; }
.sourcebook .sb-name { font-weight: 600; }
.sourcebook details > div { padding: 0 0 0.8rem 1.1rem; font-size: 1.0625rem; }
.sourcebook details p { margin: 0.35rem 0; overflow-wrap: anywhere; }

/* ---------- foot: the footer and privacy lines, then two link groups ----------
   stacked on phones; on tablets the lines run across the top with the groups side by side below;
   on computers one grid across the sheet (each text column well under 75 characters) */
.basefoot { background: var(--slate); color: var(--on-slate); }
.basefoot-in { max-width: 70rem; margin: 0 auto; padding: 1.25rem 1rem 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 2.5rem; align-items: start; }
.basefoot-in > * { min-width: 0; }
.basefoot p { font-size: 1.0625rem; color: var(--on-slate); max-width: 36em; margin: 0 0 0.75rem; }
.basefoot-say > p:last-child, .basefoot-rack > p:last-child { margin-bottom: 0; }
.basefoot a { color: var(--on-slate); }
.basefoot-head { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--on-slate-soft); margin: 0; padding-bottom: 0.3rem; border-bottom: 1px solid var(--nav-cue); }
.basefoot ul { list-style: none; padding: 0; margin: 0.2rem 0 0.5rem; }
.basefoot li { max-width: none; }
.basefoot li a, .basefoot li .unpoured { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.0625rem; }
.basefoot .unpoured { color: var(--on-slate-soft); }
.mailto { overflow-wrap: anywhere; }
@media (min-width: 48em) {
  .basefoot-in { padding: 1.75rem 2.25rem 2.25rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .basefoot-say { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .basefoot-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .basefoot-say { grid-column: auto; }
}

@media print {
  .shelfnav, .padband, .workbench, .carryout, .basefoot ul, .basefoot-head, .divein, .sidebench { display: none !important; }
  .deckgrid, .basefoot-in { display: block !important; }
  body, .deck { background: var(--paper-card); }
}
/* print shows the figures list open (browsers with ::details-content; reagent.js opens it on print for the rest) */
@media print { .chartfold::details-content { content-visibility: visible; } }

/* positions for the drawings, written by the build (the CSP allows no style attributes) */
.at-0_000{left:0.0%}.at-100_000{left:100.0%}.at-10_000{left:10.0%}.at-15_000{left:15.0%}.at-17_500{left:17.5%}.at-20_000{left:20.0%}.at-25_000{left:25.0%}.at-28_571{left:28.571%}.at-30_000{left:30.0%}.at-33_333{left:33.333%}.at-40_000{left:40.0%}.at-42_857{left:42.857%}.at-50_000{left:50.0%}.at-55_556{left:55.556%}.at-57_143{left:57.143%}.at-60_000{left:60.0%}.at-71_111{left:71.111%}.at-71_429{left:71.429%}.at-75_000{left:75.0%}.at-77_778{left:77.778%}.at-80_000{left:80.0%}.wide-100_000{width:100.0%}.wide-14_286{width:14.286%}.wide-15_556{width:15.556%}.wide-16_667{width:16.667%}.wide-20_000{width:20.0%}.wide-22_222{width:22.222%}.wide-30_000{width:30.0%}.wide-42_857{width:42.857%}.wide-50_000{width:50.0%}.wide-62_500{width:62.5%}.wide-75_000{width:75.0%}.wide-85_000{width:85.0%}