/*
 * Dose to Volume. White, near-black, one teal accent, one centred column.
 *
 * The site answers one question, so the design has one job: make the answer the largest thing on
 * the screen and keep everything else out of its way. A single measure of 40rem, no second
 * column anywhere, no cards, no panels with rounded corners and drop shadows, no gradients and no
 * animation. The only decorated element on any page is the answer itself, and the decoration is
 * size.
 *
 * Nothing here is shared with any other site in the network.
 */

:root {
  --fg: #101215;
  --fg-2: #51585f;
  --fg-3: #7b838b;
  --bg: #ffffff;
  --bg-2: #f6f8f8;
  --edge: #dde2e3;
  --edge-2: #b9c1c3;
  --teal: #0f6b63;
  --teal-dark: #0a4f49;
  --warn: #7a5200;

  --t: 1rem;
  --measure: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

.to-content { position: absolute; left: -9999px; }
.to-content:focus {
  left: 0.5rem; top: 0.5rem; z-index: 4;
  background: var(--bg); border: 2px solid var(--teal); padding: 0.3rem 0.6rem;
}

a { color: var(--teal-dark); }
a:hover { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.dv-wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.1rem;
}

/* ---------------------------------------------------------------- header */

.dv-head {
  padding: 1.6rem 0 0.9rem;
  border-bottom: 1px solid var(--edge);
}
.dv-mark {
  display: inline-block;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--fg);
  text-decoration: none;
}
.dv-mark:hover { color: var(--teal); }
.dv-nav {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.9;
}
.dv-nav a { color: var(--fg-2); text-decoration: none; }
.dv-nav a:hover { color: var(--teal); text-decoration: underline; }
.dv-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.dv-dot { padding: 0 0.5rem; color: var(--fg-3); }

/* ---------------------------------------------------------------- the one column */

main { padding: 2.2rem 0 3rem; }

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.lede { margin: 0 0 0.6rem; font-size: 1.08rem; color: var(--fg-2); }
.one-liner {
  margin: 0 0 1.8rem;
  font-size: 0.87rem;
  color: var(--warn);
}

.block { margin: 0 0 2.2rem; }
.block-head {
  margin: 0 0 0.6rem;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
}
.block h3 { margin: 1.3rem 0 0.4rem; font-size: 1rem; font-weight: 700; }
.block p, .run p { margin: 0 0 var(--t); }
.run { margin: 0 0 2.2rem; }
code {
  font-family: inherit;
  font-weight: 700;
  background: var(--bg-2);
  padding: 0 0.2em;
}

/* ---------------------------------------------------------------- the panel */

.dv-panel {
  margin: 0 0 2.2rem;
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--edge);
}
.dv-lines { padding: 1.1rem 0; display: grid; gap: 0.7rem; }
.dv-line { display: grid; gap: 0.25rem; }
@media (min-width: 34rem) {
  .dv-line { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; }
}
.dv-line > label { font-size: 0.93rem; font-weight: 600; }
.dv-control { min-width: 0; }
.dv-united { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem; }
.dv-hint { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--fg-3); }

.dv-panel input, .dv-panel select {
  width: 100%;
  min-width: 0;
  font: 400 1rem/1.3 inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  background: var(--bg);
  color: var(--fg);
}
.dv-panel input:focus, .dv-panel select:focus { border-color: var(--teal); }
.dv-united select { width: auto; }

.dv-out {
  display: block;
  padding: 1.2rem 0 1.3rem;
  border-top: 1px solid var(--edge);
}
.dv-idle { margin: 0; color: var(--fg-3); }
.dv-no { margin: 0; font-weight: 600; color: #8a2b16; }
.dv-nojs { margin: 0; padding: 1rem 0; border-top: 1px solid var(--edge); font-size: 0.92rem; }

.dv-answer { margin: 0 0 1.1rem; }
.dv-answer:last-of-type { margin-bottom: 0; }
.dv-cap { margin: 0; font-size: 0.85rem; color: var(--fg-2); }
.dv-big {
  margin: 0.1rem 0 0;
  font-size: 1.7rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/*
 * The lead answer is the volume and the derived reading is subordinate to it, which is a design
 * review fix: a second bold number of nearly the same size turned a single-answer page into two
 * competing tasks.
 */
.dv-answer-lead .dv-big { font-size: 2.5rem; }
.dv-answer:not(.dv-answer-lead) .dv-big { font-size: 1.25rem; }
.dv-qual { font-size: 0.95rem; font-weight: 600; color: var(--warn); letter-spacing: 0; }
/*
 * The unit is part of the answer, not a footnote beside it. A design review found "mL" set small
 * and light enough next to a large number that the two did not read as one statement.
 */
.dv-u { font-size: 1.1rem; font-weight: 400; color: var(--fg); margin-left: 0.35rem; }
.dv-answer:not(.dv-answer-lead) .dv-u { font-size: 0.9rem; color: var(--fg-2); }
.dv-small { margin: 0.25rem 0 0; font-size: 0.87rem; color: var(--fg-2); }

.dv-extras { margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.dv-extras li { padding: 0.15rem 0; border-bottom: 1px solid var(--bg-2); }
.dv-extras span { color: var(--fg-2); margin-right: 0.4rem; }
.dv-warn { margin: 1rem 0 0; font-size: 0.85rem; color: var(--warn); }
.dv-warn p { margin: 0 0 0.2rem; font-weight: 600; }
.dv-warn ul { margin: 0; padding-left: 1.1rem; }
.dv-warn li { margin-bottom: 0.2rem; }

/* ---------------------------------------------------------------- the caveats */

.limits {
  margin: 0 0 2.2rem;
  padding: 1rem 0 0.2rem;
  border-top: 1px solid var(--fg);
}
.limits h2 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }
.limits p { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--fg-2); }
.caveat-links { color: var(--fg-3); }

/* ---------------------------------------------------------------- lists and tables */

.dv-list { margin: 0 0 2rem; padding: 0; list-style: none; }
.dv-list li { padding: 0.65rem 0; border-top: 1px solid var(--edge); }
.dv-list li:last-child { border-bottom: 1px solid var(--edge); }
.dv-list a { font-weight: 600; text-decoration: none; }
.dv-list a:hover { text-decoration: underline; }
.dv-list p { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--fg-2); }

.dv-steps { margin: 0 0 var(--t); padding-left: 1.2rem; }
.dv-steps li { margin-bottom: 0.5rem; }

.dv-table { overflow-x: auto; margin: 0 0 1.6rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
caption { text-align: left; padding-bottom: 0.5rem; font-size: 0.84rem; color: var(--fg-2); }
th, td { padding: 0.3rem 0.5rem; text-align: right; border-bottom: 1px solid var(--edge); }
th[scope="col"] { border-bottom: 2px solid var(--fg); font-weight: 700; }
th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
thead th:first-child { text-align: left; }

details { margin: 0 0 1.8rem; }
summary { cursor: pointer; font-weight: 600; font-size: 0.93rem; }
details[open] summary { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- policies */

.policy h2 { margin: 1.9rem 0 0.5rem; font-size: 1.1rem; font-weight: 700; }
.policy h2:first-child { margin-top: 0; }
.policy p { margin: 0 0 var(--t); line-height: 1.72; }

/* ---------------------------------------------------------------- footer */

.dv-foot {
  padding: 1.8rem 0 3rem;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  color: var(--fg-2);
}
.dv-stamp p { margin: 0 0 0.6rem; }
.dv-foot-cols { margin-top: 1.4rem; display: grid; gap: 1.2rem; }
@media (min-width: 34rem) { .dv-foot-cols { grid-template-columns: repeat(3, 1fr); } }
.dv-foot-col h2 { margin: 0 0 0.35rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); }
.dv-foot-col ul { margin: 0; padding: 0; list-style: none; }
.dv-foot-col li { margin-bottom: 0.15rem; }
.dv-foot-col a { text-decoration: none; }
.dv-foot-col a:hover { text-decoration: underline; }