/*
 * Vial Bench. Paper and ink, one rust accent, a sidebar that is always visible.
 *
 * The look is a workshop notebook rather than an app: warm paper ground, a serif for headings so
 * the reading matter reads as reading matter, and figures set large in the sans so the answer is
 * the loudest thing on the page. No cards, no pills, no gradients, no shadows, no animation. The
 * restraint is the point: a bench with ten tools on it cannot afford decoration competing with
 * the tools.
 *
 * Nothing here is shared with any other site in the network. The custom properties, the class
 * names and the layout are all this directory's own.
 */

:root {
  --paper: #faf7f2;
  --paper-deep: #f2ece1;
  --ink: #1d1a16;
  --ink-soft: #5b544a;
  --rule: #ddd4c4;
  --rule-dark: #bdb09a;
  --rust: #9c4221;
  --rust-deep: #7a3319;
  --flag: #6b4a06;

  --gap-xs: 0.3rem;
  --gap-s: 0.6rem;
  --gap: 1.1rem;
  --gap-l: 2rem;
  --gap-xl: 3.4rem;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
}

.jump { position: absolute; left: -9999px; }
.jump:focus {
  left: 0.6rem;
  top: 0.4rem;
  z-index: 5;
  background: var(--paper);
  border: 2px solid var(--rust);
  padding: var(--gap-xs) var(--gap-s);
}

a { color: var(--rust-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rust); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }

.page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ---------------------------------------------------------------- masthead */

.bench-top {
  padding: var(--gap-l) 0 var(--gap);
  border-bottom: 2px solid var(--ink);
}
.wordmark {
  font: 600 1.45rem/1.1 var(--serif);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--rust); }
.wordmark-sub {
  /*
   * Hidden on a phone. It explains the site to somebody who has just arrived, and a design pass
   * measured it as part of 400px of preamble sitting above the first input on a 390px screen. The
   * reader who needs it is on the bench index; the reader on a tool page needs the tool.
   */
  display: none;
  margin: var(--gap-xs) 0 0;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
@media (min-width: 48rem) { .wordmark-sub { display: block; } }

/* ---------------------------------------------------------------- the two columns */

/*
 * ON A PHONE THE SIDEBAR GOES BELOW THE ARTICLE, and that is a design-review fix rather than a
 * preference. The first independent pass measured the expanded directory pushing the page title
 * to about 850px and the answer to about 1600px on a 390px screen: a reader who arrived at a tool
 * met a site index first and their own task last. The directory is this site's proposition on a
 * wide screen, where it costs nothing, so the order flips rather than the directory disappearing
 * behind a control.
 */
.bench-body {
  display: grid;
  gap: var(--gap-l);
  padding: var(--gap-l) 0;
}
.bench-main { order: 1; }
.bench-side { order: 2; padding-top: var(--gap); border-top: 1px solid var(--rule); }

@media (min-width: 60rem) {
  .bench-body {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--gap-xl);
  }
  .bench-main { order: 2; }
  .bench-side {
    order: 1;
    position: sticky;
    top: var(--gap);
    align-self: start;
    padding-top: 0;
    border-top: 0;
  }
}

.bench-side h2 {
  margin: var(--gap) 0 var(--gap-xs);
  font: 600 0.78rem/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}
.bench-side h2:first-child { margin-top: 0; }
.bench-side ul { margin: 0; padding: 0; list-style: none; }
.bench-side li { margin: 0; }
.bench-side a {
  display: block;
  padding: 0.22rem 0;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bench-side a:hover { color: var(--rust); border-bottom-color: var(--rule-dark); }
.bench-side a[aria-current="page"] {
  color: var(--rust-deep);
  font-weight: 600;
}

.bench-main { min-width: 0; max-width: 42rem; }
.bench-main h1 {
  margin: 0 0 var(--gap-s);
  font: 600 2rem/1.18 var(--serif);
  letter-spacing: -0.01em;
}
.bench-main h2 {
  margin: var(--gap-l) 0 var(--gap-s);
  font: 600 1.3rem/1.25 var(--serif);
}
.bench-main h3 {
  margin: var(--gap) 0 var(--gap-xs);
  font: 600 1.05rem/1.3 var(--sans);
}
.bench-main p { margin: 0 0 var(--gap); }
.standfirst { font-size: 1.1rem; color: var(--ink-soft); }
.one-line {
  margin: 0 0 var(--gap-l);
  padding: var(--gap-xs) 0 var(--gap-s);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--flag);
}
code {
  font-family: var(--sans);
  font-weight: 600;
  background: var(--paper-deep);
  padding: 0 0.2em;
}

/* ---------------------------------------------------------------- the tool rig */

/*
 * NOT A CARD. The first design pass flagged the form and its answer as a two-part bordered panel,
 * which the design standard rules out by default. The enclosure is gone: a single rule above the
 * inputs, a single rule above the answer, and spacing doing the rest.
 */
.rig { margin: 0 0 var(--gap-l); border-top: 2px solid var(--ink); }
.io { padding: var(--gap) 0; display: grid; gap: var(--gap-s); }
@media (min-width: 42rem) {
  .io { grid-template-columns: 1fr 1fr; gap: var(--gap-s) var(--gap); }
}
.io-row { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.io-label { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; }
.io-input { display: block; }
.io-measured { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-xs); }
.io-note { font-size: 0.78rem; color: var(--ink-soft); }

.io input, .io select {
  width: 100%;
  min-width: 0;
  font: 400 1rem/1.3 var(--sans);
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--rule-dark);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
.io input:focus, .io select:focus { border-color: var(--rust); }
.io .io-unit { width: auto; }

.answer-box {
  padding: var(--gap) 0 var(--gap-s);
  border-top: 1px solid var(--rule);
}
.waiting { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.refused { margin: 0; color: var(--rust-deep); font-weight: 600; }
.no-js { margin: 0; padding: var(--gap) 0; border-top: 1px solid var(--rule); font-size: 0.92rem; }

.figure { margin: 0 0 var(--gap); }
.figure:last-child { margin-bottom: 0; }
.figure-label { margin: 0; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
/*
 * ONE LEAD FIGURE, NOT THREE EQUAL ONES. The first design pass found three equally emphasised
 * numbers competing on a page whose title promises one of them. The first answer the display
 * layer returns is the one the page is about, so it is set large and the figures derived from it
 * are set smaller.
 */
.figure-value { margin: 0.1rem 0 0; font-size: 1.2rem; line-height: 1.2; }
.figure-lead .figure-value { font-size: 2.1rem; letter-spacing: -0.015em; }
.figure-lead { margin-bottom: var(--gap); }
.figure-value strong { font-weight: 600; }
/*
 * The qualifier reads as part of the figure. A design pass found "at most" set small enough
 * beside a large number that a reader could lift the number out without it, which is precisely
 * the failure the qualifier exists to prevent. On the lead figure it is set to two thirds of the
 * number rather than a third.
 */
.qual { font-style: normal; font-size: 0.95rem; color: var(--flag); font-weight: 600; }
.figure-lead .qual { font-size: 1.4rem; }
.figure-unit { font-size: 0.95rem; color: var(--ink-soft); }
.figure-note { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--ink-soft); }

.aside-figures { margin: var(--gap-s) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--gap); font-size: 0.9rem; }
.aside-figures dt { color: var(--ink-soft); }
.aside-figures dd { margin: 0; }
.flags { margin: var(--gap-s) 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--flag); }
.flags li { margin-bottom: 0.25rem; }

/* ---------------------------------------------------------------- the guardrail */

.guardrail {
  margin: 0 0 var(--gap-l);
  padding: var(--gap) 0 0;
  border-top: 3px double var(--rule-dark);
}
.guardrail h2 { margin-top: 0; font-size: 1.05rem; font-family: var(--sans); }
.guardrail p { font-size: 0.9rem; margin-bottom: var(--gap-s); }
.caveat-links { color: var(--ink-soft); }

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

.bench-index { margin: 0 0 var(--gap-l); padding: 0; list-style: none; }
.bench-index li { padding: var(--gap-s) 0; border-bottom: 1px solid var(--rule); }
.bench-index a { font-weight: 600; }
.bench-index p { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

.steps { margin: 0 0 var(--gap); padding-left: 1.3rem; }
.steps li { margin-bottom: var(--gap-s); }

.sheet { overflow-x: auto; margin: 0 0 var(--gap-l); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
caption { text-align: left; padding-bottom: var(--gap-s); font-size: 0.85rem; color: var(--ink-soft); }
th, td { padding: 0.35rem 0.55rem; text-align: right; border-bottom: 1px solid var(--rule); }
th[scope="col"] { text-align: right; border-bottom: 1px solid var(--ink); font-weight: 600; }
th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
thead th:first-child { text-align: left; }

details { margin: 0 0 var(--gap-l); }
summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
details[open] summary { margin-bottom: var(--gap-s); }

/* ---------------------------------------------------------------- legal pages */

/*
 * A legal page is reading matter and is set as such: a narrower measure than the tool pages and
 * a little more leading. No boxes, no panels, no coloured warning blocks. A disclosure that looks
 * like an advert gets read like one.
 */
.terms { max-width: 36rem; }
.terms h2 {
  margin: var(--gap-l) 0 var(--gap-s);
  font-size: 1.15rem;
}
.terms h2:first-child { margin-top: 0; }
.terms p { line-height: 1.75; }

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

.bench-foot {
  padding: var(--gap-l) 0 var(--gap-xl);
  border-top: 2px solid var(--ink);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.bench-stamp p { margin: 0 0 var(--gap-s); max-width: 46rem; }
.foot-links { margin: var(--gap) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap); }