/* ================= Lab safety pages (generated) =================
   GENERATED by scripts/sync_safety.py. Edit SAFETY_CSS there and re-run;
   changes made here are overwritten. Loaded after style.css and portal.css
   and only by the safety pages. Adds new selectors only. */

/* ---- Drive link, top right of the page head ----
   Absolutely positioned inside the head's .wrap, so it cannot push the title
   or the lead around. Scoping position:relative to .page-head.portal .wrap is
   safe: safety.css only loads on these eight pages. */
.page-head.portal .wrap { position: relative; }
.sf-folder {
  position: absolute; top: 0; right: var(--gutter);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; text-decoration: none;
  font-size: var(--fs--1); color: #9fb3d2;
  border: 1px solid rgba(255,255,255,.18);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.sf-folder:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.sf-folder-mark { display: inline-flex; }
.sf-folder-icon { width: 14px; height: 14px; display: block; }
@media (max-width: 700px) {
  /* Icon only once the title starts to run under it. The title attribute and
     the aria-label still say where it goes. */
  .sf-folder { top: -4px; padding: 7px 9px; }
  .sf-folder-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---- emergency band ---- */
.sf-emergency { background: var(--navy-950); color: #fff; padding: 46px 0 40px; }
.sf-em-head {
  font-family: var(--font-display); font-weight: var(--fw-med);
  font-size: var(--fs--2); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: #ffa3a3; margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.sf-em-grid { display: grid; }
@media (min-width: 780px) { .sf-em-grid { grid-template-columns: 1fr 1fr; column-gap: 46px; } }
.sf-em {
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 18px;
}
.sf-em-what { font-size: var(--fs-1); color: #fff; }
.sf-em-num {
  font-family: var(--font-display); font-size: var(--fs-3); font-weight: var(--fw-med);
  color: #fff; letter-spacing: var(--tr-snug); text-decoration: none; white-space: nowrap;
}
a.sf-em-num { border-bottom: 1px solid rgba(255,255,255,.3); }
a.sf-em-num:hover { color: var(--blue-light); border-bottom-color: var(--blue-light); }
.sf-em-when { grid-column: 1 / -1; font-size: var(--fs--1); color: #9fb3d2; }
.sf-em-foot { margin: 26px 0 0; font-size: var(--fs-0); color: #9fb3d2; }
.sf-em-foot a { color: var(--blue-light); }

/* ---- disclosure rows ---- */
.sf-actions { max-width: var(--maxw-text); }
.sf-details { border-bottom: 1px solid var(--line); }
.sf-details > summary {
  cursor: pointer; padding: 15px 30px 15px 0; font-size: var(--fs-2);
  font-family: var(--font-display); font-weight: var(--fw-book);
  color: var(--ink); list-style: none; position: relative;
}
.sf-details > summary::-webkit-details-marker { display: none; }
.sf-details > summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--blue); font-size: var(--fs-2); line-height: 1;
}
.sf-details[open] > summary::after { content: "\2013"; }
.sf-details > summary:hover { color: var(--blue); }
.sf-details > p { margin: 0 0 18px; color: var(--muted); font-size: var(--fs-1); line-height: 1.75; }
.sf-details > div { padding-bottom: 22px; }

/* ---- section cards ---- */
.sf-cards { display: grid; gap: 14px; }
@media (min-width: 700px) { .sf-cards { grid-template-columns: 1fr 1fr; } }
.sf-card {
  display: block; padding: 24px 26px; background: #fff;
  border: 1px solid var(--line); text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sf-card:hover { border-color: var(--blue); box-shadow: 0 6px 22px rgba(22,36,77,.07); }
.sf-card-title {
  display: block; font-family: var(--font-display); font-size: var(--fs-2);
  color: var(--navy); margin-bottom: 7px; letter-spacing: var(--tr-snug);
}
.sf-card:hover .sf-card-title { color: var(--blue); }
.sf-card-desc { display: block; font-size: var(--fs-0); color: var(--muted); line-height: 1.65; }

/* ---- people ---- */
.sf-people { max-width: 820px; }
.sf-person {
  padding: 17px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: 3px;
}
@media (min-width: 660px) {
  .sf-person { grid-template-columns: 1.1fr .9fr 1.3fr auto; align-items: baseline; gap: 18px; }
}
.sf-person-name { font-size: var(--fs-1); color: var(--ink); font-weight: var(--fw-med); }
.sf-person-role { font-size: var(--fs--1); color: var(--muted); }
.sf-person a { font-size: var(--fs-0); color: var(--blue); text-decoration: none; }
.sf-person a:hover { text-decoration: underline; }

/* ---- link groups ---- */
.sf-links { display: grid; gap: 30px; }
@media (min-width: 760px) { .sf-links { grid-template-columns: 1fr 1fr; } }
.sf-linkgroup ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sf-linkgroup li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-0); }
.sf-linkgroup li:last-child { border-bottom: 0; }
.sf-linkgroup a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.sf-linkgroup a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.sf-link-note { color: var(--muted); font-size: var(--fs--1); }
.sf-plain-links { list-style: none; margin: 0; padding: 0; max-width: var(--maxw-text); }
.sf-plain-links li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.sf-plain-links a { color: var(--navy); text-decoration: none; font-size: var(--fs-1); }
.sf-plain-links a:hover { color: var(--blue); }

/* ---- generic bits ---- */
.sf-note {
  max-width: var(--maxw-text); margin: 22px 0 0;
  font-size: var(--fs--1); color: var(--muted); line-height: 1.7;
}
.sf-source { margin: 34px 0 0; font-size: var(--fs--1); color: var(--muted); }
.sf-source a { color: var(--blue); text-decoration: none; }
.sf-source a:hover { text-decoration: underline; }

.sf-table-wrap { overflow-x: auto; margin: 6px 0 0; }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.sf-table th {
  text-align: left; font-family: var(--font-display); font-weight: var(--fw-med);
  font-size: var(--fs--2); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--navy); border-bottom: 2px solid var(--navy);
  padding: 10px 18px 9px 0; white-space: nowrap;
}
.sf-table td {
  padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink); line-height: 1.6;
}
.sf-table tr:last-child td { border-bottom: 0; }
.sf-table-ref td:first-child { white-space: nowrap; }

/* ---- document index ---- */
.sf-docgroup { margin-bottom: 44px; max-width: 900px; }
.sf-doc-list { list-style: none; margin: 14px 0 0; padding: 0; }
.sf-doc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.sf-doc-name { font-size: var(--fs-1); color: var(--navy); text-decoration: none; }
.sf-doc-name:hover { color: var(--blue); }
.sf-doc-desc { display: block; font-size: var(--fs--1); color: var(--muted); margin-top: 3px; }
.sf-doc-live {
  flex: none; font-size: var(--fs--1); color: var(--blue); text-decoration: none;
  border: 1px solid var(--line); padding: 5px 11px; white-space: nowrap;
}
.sf-doc-live:hover { border-color: var(--blue); background: var(--bg-tint); }

/* ---- chemical index ---- */
.sf-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 6px; }
.sf-stats div { display: flex; flex-direction: column; }
.sf-stats strong {
  font-family: var(--font-display); font-size: var(--fs-5);
  font-weight: var(--fw-light); color: var(--navy); line-height: 1.1;
}
.sf-stats span { font-size: var(--fs--1); color: var(--muted); }

/* Only the search row sticks, and it sits below the two bars already stuck
   above it: .site-header (76px, 66px on mobile) then .portal-bar (44px), at
   z-index 50 and 40. Two earlier versions were wrong in the same way and both
   are worth remembering: at top:0 the whole thing slid underneath the chrome,
   and with the filter chips inside it the stuck panel was ~360px tall and
   covered the first card's name as you scrolled past. Keep this row slim. */
.sf-tools {
  position: sticky; top: 121px; z-index: 4; background: var(--bg);
  padding: 14px 0 12px; border-bottom: 1px solid var(--line);
}
/* 820px, not 900: that is where .nav drops to 66px and portal.css moves
   .portal-bar to top:66. Using 900 left a 9px overlap between the two. */
@media (max-width: 820px) { .sf-tools { top: 111px; } }
.sf-search {
  width: 100%; max-width: 560px; padding: 13px 16px; font: inherit;
  font-size: var(--fs-1); color: var(--ink); border-radius: 0;
  border: 1px solid var(--line); background: var(--bg-tint);
}
.sf-search:focus { outline: none; border-color: var(--blue); background: #fff; }
.sf-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-tools-row .sf-search { flex: 1 1 320px; max-width: 560px; }
.sf-refbtns { display: flex; gap: 8px; margin-left: auto; }
.sf-refbtn {
  font: inherit; font-size: var(--fs--1); cursor: pointer; white-space: nowrap;
  color: var(--navy); background: #fff; border: 1px solid var(--line);
  padding: 12px 14px;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.sf-refbtn:hover { border-color: var(--blue); color: var(--blue); }
.sf-refbtn[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sf-expand {
  font: inherit; font-size: var(--fs--1); cursor: pointer; margin-left: 14px;
  color: var(--blue); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.sf-expand:hover { color: var(--navy); }
.sf-chips { margin-top: 30px; }
.sf-chiprow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.sf-chiprow-label {
  flex: none; width: 62px; text-align: right; padding-top: 7px;
  font-size: var(--fs--2); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.sf-chipset { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 700px) {
  .sf-chiprow { display: block; }
  .sf-chiprow-label { display: block; width: auto; text-align: left; padding: 0 0 5px; }
}
.sf-chip {
  font: inherit; font-size: var(--fs--1); color: var(--muted); cursor: pointer;
  background: var(--bg-soft); border: 1px solid transparent; padding: 6px 12px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sf-chip:hover { background: var(--bg-soft-2); color: var(--ink); }
.sf-chip.is-on { background: var(--navy); color: #fff; }
.sf-chip-n { opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }
.sf-chip-warn.is-on { background: #8a2020; }
.sf-count { margin: 12px 0 0; font-size: var(--fs--1); color: var(--muted); }

/* No gap under the sticky search row: anything in a gap there is visible for
   a moment as the filter chips scroll up behind it, which reads as a glitch.
   The first card's own top padding gives the spacing. */
.sf-chem-list { margin-top: 0; }
/* One collapsed row per chemical. Fully expanded, 77 entries ran to 29,000px.
   The summary is a three-column grid: what you scan for, the pictograms, the
   chevron. Everything else opens on click. */
.sf-chem { border-bottom: 1px solid var(--line); }
/* an author display always beats the UA [hidden] rule, so say it explicitly */
.sf-chem[hidden] { display: none !important; }
.sf-chem-sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center; gap: 10px 22px;
  padding: 15px 0; cursor: pointer; list-style: none;
}
.sf-chem-sum::-webkit-details-marker { display: none; }
.sf-chem-sum:hover .sf-chem-name { color: var(--blue); }
.sf-chem-head {
  min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 15px;
}
/* A grid item will not shrink below its min-content width, and some IUPAC
   names are one 90-character token, which pushed the whole mobile page 43px
   wider than the viewport. minmax(0,1fr) plus min-width:0 plus a wrap rule on
   the long values is the full fix; all three are needed. */
.sf-chem-name {
  font-family: var(--font-display); font-weight: var(--fw-book);
  font-size: var(--fs-2); color: var(--navy); letter-spacing: var(--tr-snug);
  overflow-wrap: anywhere; transition: color .15s var(--ease);
}
.sf-chem-chev {
  width: 8px; height: 8px; justify-self: end;
  border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.sf-chem[open] > .sf-chem-sum .sf-chem-chev { transform: rotate(-135deg); }
.sf-chem-body { padding: 2px 0 26px; max-width: 980px; }
.sf-chem-tags { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) {
  .sf-chem-sum { grid-template-columns: minmax(0, 1fr) 20px; }
  .sf-chem-head { flex-direction: column; align-items: flex-start; gap: 7px; }
  .sf-chem-pics { grid-column: 1 / -1; }
  .sf-pic-sm { width: 34px; height: 34px; }
}
.sf-tag {
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); background: var(--bg-soft-2); padding: 4px 9px;
}
.sf-tag-cold { background: #dcebf8; color: #14456f; }
.sf-tag-quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.sf-tag-loc { background: #e6f2e8; color: #1f5130; }

.sf-haz { margin-bottom: 14px; }
.sf-haz-label {
  display: block; font-size: var(--fs--2); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.sf-haz-list { list-style: none; margin: 0; padding: 0; }
.sf-haz-list li {
  font-size: var(--fs-0); color: var(--ink); padding: 3px 0; line-height: 1.6;
  display: flex; gap: 10px;
}
@media (min-width: 1080px) {
  .sf-haz-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
}
.sf-hcode {
  flex: none; min-width: 46px; font-variant-numeric: tabular-nums;
  font-weight: var(--fw-med); color: #8a2020;
}
.sf-haz-none {
  font-size: var(--fs--1); color: var(--muted); font-style: italic;
  max-width: 62ch; margin: 0 0 14px;
}

.sf-meta { display: flex; flex-wrap: wrap; gap: 5px 30px; margin: 0 0 16px; }
.sf-meta div { display: flex; gap: 8px; align-items: baseline; }
.sf-meta-wide { flex-basis: 100%; }
.sf-meta dt {
  font-size: var(--fs--2); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.sf-meta dd {
  margin: 0; font-size: var(--fs--1); color: var(--ink); min-width: 0;
  overflow-wrap: anywhere;
}

.sf-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-btn {
  font-size: var(--fs--1); text-decoration: none; padding: 7px 14px;
  border: 1px solid var(--line); color: var(--navy); background: #fff;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.sf-btn:hover { border-color: var(--blue); color: var(--blue); }
.sf-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.sf-btn-primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.sf-btn-off { color: var(--muted); background: var(--bg-soft); cursor: default; }
.sf-btn-off:hover { border-color: var(--line); color: var(--muted); }

.sf-chem-pics { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sf-pic { display: block; }
.sf-pic-sm { width: 46px; height: 46px; }
.sf-pic-lg { width: 60px; height: 60px; }

.sf-empty { display: none; padding: 40px 0; color: var(--muted); font-size: var(--fs-1); }
.sf-empty.show { display: block; }

.sf-legend { display: grid; gap: 16px; }
.sf-legend-item { display: flex; align-items: center; gap: 14px; font-size: var(--fs-0); color: var(--ink); }
.sf-legend-item em { display: block; font-style: normal; font-size: var(--fs--1); color: var(--muted); }

/* ---- reference drawers ----
   The pictogram key and the H-code table sat at the foot of the page, which
   meant scrolling past 77 entries to look up one code. They are drawers now,
   opened from the sticky row so they are reachable at any scroll position. */
.sf-refwrap { position: fixed; inset: 0; z-index: 120; }
body.sf-ref-open { overflow: hidden; }
.sf-refscrim { position: absolute; inset: 0; background: rgba(8, 15, 33, .45); }
.sf-refpanel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%); background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(8, 15, 33, .22);
}
.sf-refhead {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 26px; border-bottom: 1px solid var(--line); background: var(--navy);
}
.sf-refhead h2 {
  margin: 0; color: #fff; font-family: var(--font-display);
  font-weight: var(--fw-book); font-size: var(--fs-2); letter-spacing: var(--tr-snug);
}
.sf-refclose {
  font: inherit; font-size: 26px; line-height: 1; cursor: pointer;
  color: #9fb3d2; background: none; border: 0; padding: 0 4px;
}
.sf-refclose:hover { color: #fff; }
.sf-refbody { padding: 24px 26px 40px; overflow-y: auto; overscroll-behavior: contain; }
.sf-reffilter {
  width: 100%; padding: 10px 13px; font: inherit; font-size: var(--fs-0);
  border: 1px solid var(--line); background: var(--bg-tint);
  margin-bottom: 18px; border-radius: 0;
}
.sf-reffilter:focus { outline: none; border-color: var(--blue); background: #fff; }
.sf-refbody .sf-table td { padding: 9px 14px 9px 0; }
.sf-refbody .sf-table th { position: sticky; top: 0; background: #fff; }
.sf-refbody .sf-pic-sm { width: 30px; height: 30px; }
@media (max-width: 620px) {
  .sf-refpanel { top: auto; height: 88vh; box-shadow: 0 -12px 40px rgba(8, 15, 33, .22); }
  .sf-refbtns { margin-left: 0; width: 100%; }
  .sf-refbtn { flex: 1; padding: 11px 10px; }
}

/* ---- quick reference ---- */
.sf-doc .sf-qr-contacts { display: grid; gap: 1px; background: var(--line); margin: 0 0 46px; }
@media (min-width: 700px) { .sf-doc .sf-qr-contacts { grid-template-columns: 1fr 1fr; } }
.sf-qr-contact {
  background: var(--bg); padding: 18px 0 20px;
  display: flex; flex-direction: column; gap: 3px;
}
@media (min-width: 700px) { .sf-qr-contacts > .sf-qr-contact:nth-child(even) { padding-left: 30px; } }
.sf-qr-role {
  font-size: var(--fs--2); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--muted);
}
.sf-qr-name {
  font-family: var(--font-display); font-size: var(--fs-2); color: var(--navy);
  letter-spacing: var(--tr-snug); line-height: 1.3;
}
.sf-qr-phone {
  font-size: var(--fs-1); color: var(--blue); text-decoration: none;
  font-variant-numeric: tabular-nums; width: max-content;
}
.sf-qr-phone:hover { text-decoration: underline; }

.sf-doc .sf-qr-places {
  display: grid; gap: 14px; margin: 0 0 34px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.sf-qr-place {
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  padding: 17px 20px; background: var(--bg);
}
.sf-qr-thing {
  display: block; font-family: var(--font-display); font-size: var(--fs-1);
  font-weight: var(--fw-med); color: var(--navy); margin-bottom: 5px; line-height: 1.35;
}
.sf-qr-where { display: block; font-size: var(--fs-0); color: var(--muted); line-height: 1.6; }
.sf-doc .lbl-rule { margin-top: 0; }

/* ---- synced document pages ---- */
/* style.css styles `.hb-bar-links a, .hb-toc-toggle` but not
   `.hb-collapse-all`, so that button renders as a native grey control next to
   two styled ones. Same gap shows on /handbook; fixing it there means editing
   style.css, which is hand-maintained, so match the treatment here instead.
   If the rule is ever added to style.css this becomes a harmless duplicate. */
.hb-bar-links .hb-collapse-all {
  font-family: var(--font-body); font-size: var(--fs--1); font-weight: var(--fw-med);
  letter-spacing: .03em; color: #fff; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.28); background: none; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.hb-bar-links .hb-collapse-all:hover { background: var(--blue); border-color: var(--blue); }

.sf-doc { font-size: var(--fs-1); line-height: 1.8; color: var(--ink); }
.sf-doc-flat { max-width: var(--maxw-text); }
.sf-doc h2 {
  font-family: var(--font-display); font-weight: var(--fw-book);
  font-size: var(--fs-4); color: var(--navy); letter-spacing: var(--tr-snug);
  margin: 40px 0 14px;
}
.sf-doc h3 {
  font-family: var(--font-display); font-weight: var(--fw-med);
  font-size: var(--fs-2); color: var(--navy); margin: 30px 0 10px;
}
.sf-doc > h2:first-child, .sf-doc > h3:first-child { margin-top: 0; }
.sf-doc p { margin: 0 0 16px; }
.sf-doc ul, .sf-doc ol { margin: 0 0 18px; padding-left: 22px; }
.sf-doc li { margin-bottom: 8px; }
.sf-doc a { color: var(--blue); }
.sf-doc img { max-width: 100%; height: auto; }
.sf-doc .sf-table-wrap { margin-bottom: 24px; }

/* A synced form's table headers are sentences ("Chemical Name or Hazard
   Class"), not the one-word labels the chemical reference has, so they wrap
   here. .sf-table th elsewhere keeps its nowrap. */
.sf-doc .sf-table th { white-space: normal; padding-right: 22px; }
.sf-doc .sf-table td { padding-right: 22px; }
/* .sf-table-wrap already scrolls, so a wide table cannot break the page. This
   keeps the scroll SHORT: one long URL in a cell otherwise sets the table's
   width and drags a four-column table out to twice the screen. */
.sf-doc .sf-table td, .sf-doc .sf-table th { overflow-wrap: anywhere; }
.sf-doc .sf-table a { overflow-wrap: anywhere; }

/* ---- ballot boxes and blanks in a synced form ----
   The Chemical Hygiene Plan is an OESO form: whether a box is ticked is the
   content, and as a bare U+2610 in a run of prose it is unreadable. Drawn, the
   page can be skimmed for what is actually true of this lab. Ticked items keep
   full contrast; unticked ones drop to muted, so a section reads as its
   answers rather than as a wall of equal-weight lines. */
.sf-box {
  display: inline-block; position: relative; box-sizing: border-box;
  width: 15px; height: 15px; vertical-align: -2px;
  border: 1.5px solid #b9c4d6; background: var(--bg);
}
.sf-box.is-on { border-color: var(--blue); background: var(--blue); }
.sf-box.is-on::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.sf-doc .sf-checks { list-style: none; margin: 0 0 18px; padding: 0; }
.sf-doc .sf-checks .sf-check { margin: 0 0 10px; }
.sf-doc .sf-check {
  position: relative; padding-left: 27px; line-height: 1.7;
}
.sf-doc .sf-check > .sf-box { position: absolute; left: 0; top: .35em; }
.sf-doc .sf-check.is-off { color: var(--muted); }
.sf-doc .sf-check:last-child { margin-bottom: 0; }
/* In a table the box is the whole cell, so centre it rather than hang it. */
.sf-table td > .sf-box:only-child { vertical-align: 1px; }
/* Somewhere to sign, on the printed form. */
.sf-fill {
  display: inline-block; min-width: 150px; max-width: 100%;
  border-bottom: 1px solid #b9c4d6; vertical-align: baseline;
}
@media (max-width: 640px) {
  .sf-fill { min-width: 90px; }
}