/* The composed watershed answer (static/js/open_map_watershed.js): its map
 * control, and the panel it fills inside the map's docked window.
 *
 * Its own file for the reason the flood-warning block's is: the JS that draws
 * this is loaded only by the open map, so the CSS that paints it should be
 * too, and a stylesheet that belongs to one feature can be removed with that
 * feature.
 *
 * Palette is the page's own tokens with hard-coded fallbacks, and every colour
 * has a `body.dark-mode` partner — this page's dark mode is a class on <body>,
 * not a media query, so a `prefers-color-scheme` block would paint the wrong
 * thing for a reader who has chosen against their system setting.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * THE ONE THING THIS STYLESHEET IS REALLY FOR
 * ─────────────────────────────────────────────────────────────────────────
 * Eight sections about one place, from eight sources, three of which are
 * legally binding and five of which are not. The visual job is to keep them
 * APART — so:
 *
 *   • The PROVENANCE CHIP is the only saturated colour in the panel, and the
 *     seven kinds are seven distinct chips. Regulatory reads as the heaviest
 *     because it is the one with legal force; reference and derived are the
 *     quietest. Nothing else competes for that channel.
 *   • The SCOPE LINE is italic and unstyled otherwise, sitting between the
 *     heading and the number, so a reader cannot reach a count without
 *     passing the sentence that says what the count is of.
 *   • A STATE line (loading, failed, not asked, nothing found) is drawn in a
 *     LEFT RULE rather than a background, because four differently-tinted
 *     boxes in one panel is noise and a rule reads at a glance without
 *     shouting. The left rule is that channel and nothing else may use it.
 *   • A QUALIFIER — the outlet caveat, a sentence a source insists travels
 *     with it — is SET IN from the left and stepped down in size, with no
 *     fill and no rule of its own. It carries full-strength ink, because it
 *     is subordinate to the line above it and not less important than it.
 */

/* --------------------------------------------------------- the control */

.nh-wsctrl {
  padding: 6px 8px;
  max-width: 220px;
  background: var(--surface-1, #ffffff);
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

body.dark-mode .nh-wsctrl {
  background: #1f2937;
  color: #e5e7eb;
}

.nh-wsctrl__button {
  display: block;
  width: 100%;
  padding: 5px 9px;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text, #1f2937);
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--line, #d1d5db);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
}

body.dark-mode .nh-wsctrl__button {
  color: #e5e7eb;
  background: #374151;
  border-color: #4b5563;
}

.nh-wsctrl.is-armed .nh-wsctrl__button {
  color: #ffffff;
  background: #15803d;
  border-color: #15803d;
}

.nh-wsctrl__hint {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-wsctrl__hint { color: #9ca3af; }

/* ------------------------------------------------------------- the head */

.nh-ws__head {
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

body.dark-mode .nh-ws__head { border-bottom-color: #374151; }

.nh-ws__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}

.nh-ws__area {
  margin: 3px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
}

.nh-ws__meta {
  margin: 3px 0 0;
  font-size: 0.75rem;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-ws__meta { color: #9ca3af; }

/* The outlet caveat. Not a footnote and not behind a disclosure: what the
 * polygon is ABOUT is a precondition for reading anything counted inside it,
 * so it sits directly under the area it qualifies.
 *
 * SET IN, NOT HIGHLIGHTED. This was a cream box with an amber edge, which on
 * this panel said two things it did not mean: the left-rule channel here is
 * reserved for STATE (see the note at the head of this file) and a fill means
 * "sunk into a card". Stripped of both it is an indent and a size step — the
 * relationship to the line above survives, and the sentence keeps
 * full-strength ink so that it still reads as a qualifier and not a footnote.
 * Every word of it is unchanged. */
.nh-ws__caveat {
  margin: 6px 0 0;
  padding: 0 0 0 12px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink, #1A1A19);
}

/* ---------------------------------------------------------- a section */

.nh-ws { font-size: 0.86rem; line-height: 1.45; }

.nh-ws__sec {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  background: var(--surface-2, #f8fafc);
}

body.dark-mode .nh-ws__sec {
  border-color: #374151;
  background: #1f2937;
}

.nh-ws__sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.nh-ws__sectitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.nh-ws__count {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

/* WHAT THE NUMBER IS ABOUT, between the heading and the number. */
.nh-ws__scope {
  margin: 2px 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-ws__scope { color: #9ca3af; }

.nh-ws__rows { margin: 5px 0 0; padding-left: 18px; }
.nh-ws__row { margin: 1px 0; }

/* ------------------------------------------------ a stream condition score
 *
 * Three parts, and the whole point is that they are three DIFFERENT claims on
 * one line: the index, the number somebody's sample produced, and the
 * condition band this platform calculated from that number against CSCI's
 * published table. The band therefore takes the DERIVED chip — the same chip
 * a whole section would take — because the section around it says `observed`,
 * and a category must never be read as something anybody measured.
 *
 * Nothing is coloured by how good the score is. A CSCI band is a percentile
 * of reference streams; painting it green or red would assert what the index
 * does not, which is the rule base/bioassessment.py is written around and the
 * rule the site page's own scale keeps. */
.nh-ws__scoreindex { font-weight: 600; }
.nh-ws__scoreval { font-variant-numeric: tabular-nums; }
.nh-ws__band { font-weight: 600; }

/* Smaller than a section's chip: it qualifies two words, not a heading. */
.nh-ws__row .nh-ws__chip {
  margin-left: 5px;
  padding: 0 6px;
  font-size: 0.6rem;
}

/* "near a band edge" — the honest half of a label. Muted because it is an
 * aside, but never absent: 0.786 and 0.792 are the same creek in two
 * different categories, and the sentence behind this (the server's) says so
 * on hover. */
.nh-ws__edge {
  font-size: 0.72rem;
  font-style: italic;
  /* No `body.dark-mode` partner and no hard-coded fallback, deliberately:
     --muted is DEFINED in tokens.css for both themes (#56534C light, 6.85:1
     on this panel's --surface-2; #B9BCBE dark, 7.69:1 on its #1f2937), so the
     token switches itself. A fallback hex here would be the exact bug
     test_css_tokens_resolve.py was written for — one theme's colour rendered
     in both. */
  color: var(--muted);
}

.nh-ws__note,
.nh-ws__src {
  margin: 5px 0 0;
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-ws__note,
body.dark-mode .nh-ws__src { color: #9ca3af; }

/* A sentence a source insists travels with it. Same weight as the caveat,
 * because these are the lines nobody may drop: abandoned workings kill
 * people, and a mineral record is not a water-quality finding.
 *
 * Same treatment as the caveat, for the same reasons, and it is the one
 * thing in a section that is set in: the .nh-ws__note and .nh-ws__src lines
 * around it are meta and are drawn in muted ink, so full ink at an indent
 * still separates a sentence that must travel from an aside that need not. */
.nh-ws__warn {
  margin: 5px 0 0;
  padding: 0 0 0 12px;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--ink, #1A1A19);
}

/* ------------------------------------------- the four non-answer states */

.nh-ws__state {
  margin: 4px 0 0;
  padding: 4px 0 4px 8px;
  font-size: 0.78rem;
  border-left: 3px solid var(--line, #d1d5db);
}

/* Still working. Grey and calm: it is not news. */
.nh-ws__state.is-loading {
  border-left-color: #9ca3af;
  color: var(--muted, #6b7280);
}

/* We could not get an answer. The only red in the panel, because it is the
 * only state where the reader should not draw a conclusion at all. */
.nh-ws__state.is-error { border-left-color: #b91c1c; }

/* Nobody asked — an unloaded table, a missing key. Distinct from BOTH of the
 * two above on purpose: it is not a fault and it is not a finding. */
.nh-ws__state.is-absent { border-left-color: #7c3aed; }

/* The source answered and had nothing here. A FACT about the place, and the
 * only one of the four that will still be true tomorrow. */
.nh-ws__state.is-empty { border-left-color: #059669; }

/* DARK MODE FOR THE FOUR RULES, added 2026-09-05 with the species screen.
 *
 * The colours above were picked for white and measured against it (5.0:1 for
 * the amber, better for the rest). Left on a #1f2937 panel they measure
 * 2.3:1 (red), 2.6:1 (violet) and 3.9:1 (green) — below the 3:1 SC 1.4.11
 * asks of a non-text indicator, for the two that carry the worst news. The
 * hue is kept and the value is lifted; measured on #1f2937 below. */
body.dark-mode .nh-ws__state.is-loading { border-left-color: #9CA3AF; }  /* 5.78:1 */
body.dark-mode .nh-ws__state.is-error   { border-left-color: #F87171; }  /* 5.31:1 */
body.dark-mode .nh-ws__state.is-absent  { border-left-color: #A78BFA; }  /* 5.39:1 */
body.dark-mode .nh-ws__state.is-empty   { border-left-color: #34D399; }  /* 7.64:1 */

/* ------------------------------------------------- the provenance chips */

.nh-ws__chip {
  padding: 1px 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  color: #ffffff;
  background: #6b7280;
}

/* Legal force. The heaviest chip, and the only near-black one. */
.nh-ws__chip--regulatory { background: #1f2937; }
/* Measured by an instrument or a person. */
.nh-ws__chip--observed { background: #0369a1; }
/* Computed by a model. */
.nh-ws__chip--modelled { background: #7c3aed; }
/* A prediction of something that has not happened. */
.nh-ws__chip--forecast { background: #b45309; }
/* Calculated here, from other data on this page. */
.nh-ws__chip--derived { background: #0f766e; }
/* A published compilation. The quietest, because it is the least binding. */
.nh-ws__chip--reference { background: #6b7280; }
/* Reported by a member of the public. */
.nh-ws__chip--communityreported { background: #be185d; }

/* ------------------------------------------------------------- the tail */

.nh-ws__rest { margin: 4px 0 0; }

.nh-ws__more {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 0;
}

.nh-ws__group { margin: 8px 0 0; }

.nh-ws__grouptitle {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-ws__grouptitle { color: #9ca3af; }

.nh-ws__group > .nh-ws__scope { margin: 1px 0 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE ENDANGERED-SPECIES SCREEN (2026-09-05)
   ══════════════════════════════════════════════════════════════════════════

   One section draws more than a heading and a count, and this is it. The
   screen moved here from a signed-in page of its own, and its standing wording
   moved with it: the IPaC note, the four sources' own descriptions, the list
   of what it does NOT consult, and the closing sentence about a clean screen.
   Those sentences are the product. The visual job here is to keep them read
   rather than skimmed past, without letting one section swamp a panel that
   holds seven others.

   So, three channels and no more:

     • THE IPAC NOTE is the only BOXED thing in the whole panel — a full border
       and a tint. Nothing else in this stylesheet has one, which is what makes
       it the first thing the eye lands on inside the section.
     • A STATE (found / clean / unreachable / not asked) is a LEFT RULE, the
       same channel `.nh-ws__state` already owns above, because it is the same
       fact about the same four states.
     • EVERYTHING ELSE is typographic: indent and size, no fill, no rule. Four
       tinted boxes inside one section would be noise, and the sentences that
       matter would be the ones that lost.

   Contrast measured on both grounds, AA (4.5:1) or better throughout; the
   numbers are on each rule. */

/* ---- the IPaC note: "This is a screen. It is not a species list." ------- */

.nh-ws__ipac {
  margin: 6px 0 0;
  padding: 7px 9px;
  border: 1px solid #9A3412;
  border-left-width: 4px;
  border-radius: var(--r-sm, 6px);
  background: #FFF7ED;
  color: #1A1A19;                      /* 16.8:1 on #FFF7ED */
}

body.dark-mode .nh-ws__ipac {
  border-color: #E0A446;
  background: #2A2318;
  color: #F2F2EF;                      /* 13.3:1 on #2A2318 */
}

.nh-ws__ipachead {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #7C2D12;                      /* 9.7:1 on #FFF7ED */
}

body.dark-mode .nh-ws__ipachead { color: #E0A446; }   /* 7.0:1 on #2A2318 */

.nh-ws__ipacbody {
  margin: 3px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
}

.nh-ws__ipacmore { margin: 5px 0 0; }

.nh-ws__ipaclink {
  font-size: 0.78rem;
  font-weight: 600;
  color: #7C2D12;                      /* 9.7:1 on #FFF7ED */
}

body.dark-mode .nh-ws__ipaclink { color: #F0B96A; }   /* 8.9:1 on #2A2318 */

/* ---- the one-paragraph reading of the four rows ------------------------ */

.nh-ws__spsum {
  margin: 6px 0 0;
  padding: 3px 0 3px 8px;
  border-left: 3px solid var(--line, #d1d5db);
}

/* Something is mapped here. Not alarm — the reader's next step is a list from
   IPaC, not an evacuation — so the rule is the same amber the provisional
   token uses and nothing is tinted. */
.nh-ws__spsum--attention { border-left-color: #B45309; }
/* Nothing found. Green, and the closing caveat below says what that is worth. */
.nh-ws__spsum--clear { border-left-color: #059669; }
/* The screen did not complete. The one red, exactly as `.is-error` above. */
.nh-ws__spsum--unknown { border-left-color: #B91C1C; }

/* Same lift on the dark panel, and the same hues, as `.nh-ws__state` above. */
body.dark-mode .nh-ws__spsum--attention { border-left-color: #FBBF24; }  /* 8.79:1 */
body.dark-mode .nh-ws__spsum--clear     { border-left-color: #34D399; }  /* 7.64:1 */
body.dark-mode .nh-ws__spsum--unknown   { border-left-color: #F87171; }  /* 5.31:1 */

.nh-ws__spsumhead {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.nh-ws__spsumbody {
  margin: 2px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink, #1A1A19);
}

body.dark-mode .nh-ws__spsumbody { color: #E5E7EB; }

/* ---- one of the four sources ------------------------------------------- */

.nh-ws__src4 { margin: 8px 0 0; }

.nh-ws__src4head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.nh-ws__src4title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.nh-ws__src4agency {
  margin: 1px 0 0;
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-ws__src4agency { color: #9ca3af; }

/* THE FOUR STATES, in the panel's existing left-rule channel and with its
   existing colours. "The service answered and found nothing" and "we could
   not reach the service" look identical unless something insists otherwise,
   and only one of them can silently turn a screen clean. */
.nh-ws__src4state {
  margin: 3px 0 0;
  padding: 2px 0 2px 8px;
  font-size: 0.76rem;
  font-weight: 600;
  border-left: 3px solid var(--line, #d1d5db);
}

.nh-ws__src4state.is-found { border-left-color: #B45309; }
.nh-ws__src4state.is-empty { border-left-color: #059669; }
.nh-ws__src4state.is-error { border-left-color: #B91C1C; }
.nh-ws__src4state.is-absent { border-left-color: #7C3AED; }

body.dark-mode .nh-ws__src4state.is-found  { border-left-color: #FBBF24; }
body.dark-mode .nh-ws__src4state.is-empty  { border-left-color: #34D399; }
body.dark-mode .nh-ws__src4state.is-error  { border-left-color: #F87171; }
body.dark-mode .nh-ws__src4state.is-absent { border-left-color: #A78BFA; }

.nh-ws__src4detail {
  margin: 2px 0 0;
  padding: 0 0 0 8px;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--ink, #1A1A19);
}

body.dark-mode .nh-ws__src4detail { color: #E5E7EB; }

/* ---- one species ------------------------------------------------------- */

.nh-ws__splist {
  margin: 4px 0 0;
  padding: 0 0 0 8px;
  list-style: none;
}

.nh-ws__sp {
  margin: 4px 0 0;
  padding: 0 0 0 8px;
  border-left: 2px solid var(--line, #d1d5db);
}

body.dark-mode .nh-ws__sp { border-left-color: #374151; }

.nh-ws__spname { margin: 0; font-size: 0.78rem; }

.nh-ws__spcommon { font-weight: 700; }

/* The scientific name, because common names collide and this one does not. */
.nh-ws__splatin {
  margin-left: 5px;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-ws__splatin { color: #9ca3af; }

.nh-ws__spfacts {
  margin: 1px 0 0;
  font-size: 0.72rem;
  color: var(--ink, #1A1A19);
}

body.dark-mode .nh-ws__spfacts { color: #D1D5DB; }

.nh-ws__spmore { margin: 1px 0 0; }

.nh-ws__splink {
  font-size: 0.71rem;
  color: #1F6D8F;                      /* --link, 5.4:1 on white */
}

body.dark-mode .nh-ws__splink { color: #7FC4E6; }   /* 7.5:1 on #1f2937 */

/* ---- what it consults, and what it does not ---------------------------- */

/* Open by default (the JS sets `open`), and a <details> only so a reader who
   has read it once can fold it away. It is never how the card ships without
   the sentences. */
.nh-ws__spabout {
  margin: 8px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--line, #d1d5db);
}

body.dark-mode .nh-ws__spabout { border-top-color: #374151; }

.nh-ws__spaboutsum {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

.nh-ws__spconsults,
.nh-ws__splimits {
  margin: 5px 0 0;
  padding: 0 0 0 16px;
}

.nh-ws__spconsults { list-style: none; padding-left: 0; }

.nh-ws__spconsult { margin: 5px 0 0; }

.nh-ws__spconsulttitle { font-size: 0.75rem; }

.nh-ws__spconsultbody {
  margin: 1px 0 0;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--ink, #1A1A19);
}

body.dark-mode .nh-ws__spconsultbody { color: #D1D5DB; }

.nh-ws__spnothead {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.nh-ws__splimit {
  margin: 3px 0 0;
  font-size: 0.73rem;
  line-height: 1.45;
}

.nh-ws__splimittitle { font-weight: 700; }

/* "Treat a clean screen as a reason to look further, not as a clearance."
   Full ink at an indent, the same treatment `.nh-ws__warn` gets and for the
   same reason: it is the sentence nobody may drop. */
.nh-ws__spclose {
  margin: 8px 0 0;
  padding: 0 0 0 12px;
  font-size: 0.75rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink, #1A1A19);
}

body.dark-mode .nh-ws__spclose { color: #F2F2EF; }

/* ══════════════════════════════════════════════════════════════════════════
   DRAW A SHAPE (static/js/open_map_shape.js, 2026-09-05)
   ══════════════════════════════════════════════════════════════════════════

   Its own control beside the Watershed one, and deliberately a different
   colour from it. The basin answer is drawn in the map's green because that
   is the colour a published drainage basin is drawn in everywhere on this
   map; an outline the READER drew is amber, because the one thing a reader
   must not conclude is that their gesture came from a federal service.

   The palette here is the same amber as `.nh-ws__ipac` and the "found" state
   rules, for one reason: those are the three places on this panel that mean
   "this is yours to read carefully", and a fourth hue would be a fourth
   channel nobody asked for. */

.nh-drawctrl {
  padding: 6px 8px;
  max-width: 220px;
  background: #ffffff;
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

body.dark-mode .nh-drawctrl {
  background: #1f2937;
  color: #e5e7eb;                      /* 11.86:1 */
}

.nh-drawctrl__button,
.nh-drawctrl__done {
  display: block;
  width: 100%;
  padding: 5px 9px;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  color: #1A1A19;                      /* 17.4:1 on #ffffff */
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
}

body.dark-mode .nh-drawctrl__button,
body.dark-mode .nh-drawctrl__done {
  color: #e5e7eb;
  background: #374151;
  border-color: #4b5563;
}

/* Armed. White on #B45309 measures 5.02:1 — the same amber the drawn outline
   itself is stroked in, so the control and the shape on the map are visibly
   one thing. */
.nh-drawctrl.is-armed .nh-drawctrl__button {
  color: #ffffff;
  background: #B45309;
  border-color: #B45309;
}

.nh-drawctrl__done {
  margin-top: 5px;
  color: #ffffff;
  background: #9A3412;                 /* white on it: 7.31:1 */
  border-color: #9A3412;
}

/* `display: block` above beats the browser's own `[hidden] { display: none }`,
   which is a one-line rule and a two-line bug: the JS sets `hidden` when there
   is nothing to finish, the button stayed on screen anyway, and a reader could
   press Finish on a shape that no longer existed. Found by driving the page,
   not by reading it. */
.nh-drawctrl__done[hidden] { display: none; }

body.dark-mode .nh-drawctrl__done {
  color: #ffffff;
  background: #9A3412;
  border-color: #C2410C;
}

.nh-drawctrl__hint {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #56534C;                      /* 7.67:1 on #ffffff */
}

body.dark-mode .nh-drawctrl__hint { color: #9ca3af; }   /* 5.78:1 */

/* WHERE YOU ARE IN THE DRAWING. Full ink rather than muted: it is an
   instruction being followed right now, not a caption. */
.nh-drawctrl__status:empty { display: none; }

.nh-drawctrl__status {
  margin: 4px 0 0;
  font-size: 0.74rem;
  line-height: 1.3;
  font-weight: 600;
  color: #1A1A19;
}

body.dark-mode .nh-drawctrl__status { color: #e5e7eb; }

/* HOW THE ANSWER SPLITS, counted in the head block.
   "3 of these answer for the whole outline; 4 answer for a point or a circle
   inside it, and say so." A reader who reads only the top of the card still
   learns that most of it is about one point. Full ink at an indent — the same
   treatment `.nh-ws__warn` gets, because it is the same kind of sentence: one
   nobody may drop. */
.nh-ws__split {
  margin: 5px 0 0;
  padding: 0 0 0 12px;
  font-size: 0.76rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink, #1A1A19);
}

body.dark-mode .nh-ws__split { color: #F2F2EF; }