/* GENERATED from design-tokens.yaml by tokens-to-css.py — do not edit. */
.handbook {
  --hb-font: "Montserrat", system-ui, -apple-system, Segoe UI, sans-serif;
  --hb-display-lg: 2.0rem;
  --hb-display: 1.4rem;
  --hb-h1: 1.5rem;
  --hb-h2: 1.2rem;
  --hb-body: 1.0rem;
  --hb-small: 0.85rem;
  --hb-lh-body: 1.15;
  --hb-lh-heading: 1.1;
  --hb-ink: #1a1a1a;
  --hb-paper: #ffffff;
  --hb-brand: #bc2027;
  --hb-rule: #cccccc;
  --hb-thead-fill: #f4f5f7;
  --hb-para-gap: 0.75rem;
  --hb-h1-above: 1.5rem;
  --hb-h1-below: 0.6rem;
  --hb-h2-above: 1.0rem;
  --hb-h2-below: 0.4rem;
  --hb-list-indent: 0rem;
  --hb-list-body-indent: 0.6rem;
  --hb-list-item-gap: 0.25rem;
  --hb-cell-pad: 0.4rem;
  --hb-measure: 70ch;
}
/* TSAS handbook — web branch. Scoped to .handbook so it layers on top of the
 * site theme without leaking out. All values come from CSS custom properties
 * generated from design-tokens.yaml (see handbook-tokens.css) — the same source
 * the Typst print branch reads, so web and PDF stay in sync.
 *
 * Heading map mirrors the print branch's one-level offset: the Markdown doc
 * title is <h1>; sections are `##` -> <h2> (the print "h1" token); subsections
 * are `###` -> <h3> (the print "h2" token).
 */

.handbook {
  font-family: var(--hb-font);
  font-size: var(--hb-body);
  line-height: var(--hb-lh-body);
  color: var(--hb-ink);
  max-width: var(--hb-measure);
  margin-inline: auto;
  -webkit-font-smoothing: antialiased;
}

/* When layered on a host theme (Hugo), its element-level rules (paragraph,
 * heading, list, table cell) beat inherited .handbook font and color.
 * Re-assert both at class specificity. */
.handbook h1, .handbook h2, .handbook h3, .handbook h4,
.handbook p, .handbook li, .handbook th, .handbook td,
.handbook strong, .handbook em, .handbook a, .handbook figcaption {
  font-family: var(--hb-font);
}
.handbook p, .handbook li, .handbook th, .handbook td { color: var(--hb-ink); }

/* ---- headings ---- */
.handbook h1 {          /* document title */
  font-size: var(--hb-display-lg);
  line-height: var(--hb-lh-heading);
  font-weight: 700;
  color: var(--hb-brand);
  margin: 0 0 var(--hb-h1-below);
}
.handbook h2 {          /* section */
  font-size: var(--hb-h1);
  line-height: var(--hb-lh-heading);
  font-weight: 700;
  color: var(--hb-brand);
  margin: var(--hb-h1-above) 0 var(--hb-h1-below);
}
.handbook h3 {          /* subsection */
  font-size: var(--hb-h2);
  line-height: var(--hb-lh-heading);
  font-weight: 700;
  color: var(--hb-ink);
  margin: var(--hb-h2-above) 0 var(--hb-h2-below);
}
.handbook h4 {
  font-size: var(--hb-body);
  font-weight: 700;
  margin: var(--hb-h2-above) 0 var(--hb-h2-below);
}

/* ---- body ---- */
.handbook p { margin: 0 0 var(--hb-para-gap); }
.handbook strong { font-weight: 700; }   /* run-in lead-ins */
.handbook a { color: var(--hb-brand); text-underline-offset: 2px; }

/* ---- lists: markers flush to the left margin, hanging indent, ink bullets ---- */
.handbook ul,
.handbook ol {
  margin: 0 0 var(--hb-para-gap);
  padding-left: var(--hb-list-body-indent);
  list-style-position: outside;
}
.handbook ul { list-style: none; }
.handbook ul > li {
  position: relative;
  margin-bottom: var(--hb-list-item-gap);
}
.handbook ul > li::before {            /* sized filled-circle bullet, like print */
  content: "";
  position: absolute;
  left: calc(-1 * var(--hb-list-body-indent));
  top: 0.55em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--hb-ink);
}
.handbook ol > li { margin-bottom: var(--hb-list-item-gap); }

/* ---- tables (native HTML, styled to match the print figures) ---- */
.handbook table {
  border-collapse: collapse;
  border: 1px solid var(--hb-rule);
  font-size: 0.92em;
}
.handbook th,
.handbook td {
  border: 1px solid var(--hb-rule);
  padding: var(--hb-cell-pad);
  vertical-align: top;
  text-align: left;
}
.handbook thead th {
  font-weight: 700;
  background: var(--hb-thead-fill);
}

/* grad-requirements: centered numerics, bold row labels, bold total row */
.hb-table--grad td { text-align: center; vertical-align: middle; }
.hb-table--grad th[scope="row"] { font-weight: 700; }
.hb-table--grad thead th { text-align: center; }
.hb-table--grad .hb-total th { text-align: right; }
.hb-table--grad .hb-total td,
.hb-table--grad .hb-total th { font-weight: 700; }

.hb-table--stages { width: 100%; }
.hb-table--stages .hb-pe { display: block; margin-top: 0.25rem; font-size: 0.85em; font-style: italic; color: #555; }

/* ---- figures ---- */
.hb-figure { margin: var(--hb-h1-above) 0; }
.hb-figure--split {                    /* stages table beside the cascade SVG */
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.hb-figure--split .hb-table--stages { flex: 1 1 22rem; }
.hb-cascade { flex: 0 0 auto; }
.hb-cascade svg { height: auto; max-height: 24rem; max-width: 100%; }

@media (max-width: 34rem) {
  .hb-figure--split { flex-direction: column; align-items: stretch; }
  .hb-cascade { align-self: center; }
}