/*
 * Nota components — built only from tokens.css. Load order on every page:
 *   ./shared/tokens.css, ./shared/components.css, then the page's ./style.css
 * (page layout only; no colors, sizes or fonts that are not tokens).
 *
 * Canonical copy: site/shared/ (see tokens.css for the sync rule).
 *
 * Conventions:
 *   - Square corners everywhere.
 *   - State never picks a color directly: a page script maps each state to a
 *     tone class (tone-ok, tone-info, tone-warn, tone-alarm, tone-neutral) and
 *     a variant (badge--solid, badge--dashed). One red block per region: the
 *     alarm tone is for capture gaps and failed chains only.
 */

/* ---- Fonts (self-hosted; OFL, see ./fonts/OFL-*.txt) --------------------- */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/hanken-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/hanken-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/hanken-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/hanken-grotesk-800.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/dm-mono-500.woff2") format("woff2"); }

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; line-height: var(--leading-snug); text-wrap: balance; }
p { margin: 0; }
a { color: var(--color-accent); }
a:hover { color: var(--color-ink); }

code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.muted { color: var(--color-ink-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px));
}
@media (min-width: 48rem) {
  .container { padding-inline: var(--space-10); }
}
/* A single-column page (the custodian's enrollment). */
.container--narrow { max-width: 48rem; }
@media (min-width: 48rem) { .container--narrow { padding-inline: var(--space-6); } }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-body);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

/* ---- Site header: waves, brand, navigation ------------------------------- */
/* The threads keep their drawn shape (1280 x 96) and are never squeezed: on a
 * narrower screen they are cut off at the right, and when the header wraps
 * taller they stay a 96px band at the top. Wider than 1280 they stretch. The
 * mask fades them out across whatever width is visible (full to 20%, gone at
 * the edge). */
.site-header {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg);
  margin-bottom: var(--space-4);
  /* The header sets its own type, so a page's body size (16px on the public
   * site, 15px on the consoles) never changes the tabs or the line under
   * them. */
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--waves-image);
  background-size: max(100%, 1280px) 6rem;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 20%, transparent);
  mask-image: linear-gradient(to right, #000 20%, transparent);
}
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}
.brand__mark { width: 3rem; height: 3rem; display: block; }
/* The logo is the home link on every page. */
a.brand:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Both marks are in the page; the theme shows one. A <picture> media query
 * could not follow a forced data-theme, so this mirrors tokens.css instead. */
.brand__mark--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark--light { display: none; }
  :root:not([data-theme="light"]) .brand__mark--dark { display: block; }
}
:root[data-theme="dark"] .brand__mark--light { display: none; }
:root[data-theme="dark"] .brand__mark--dark { display: block; }
.brand__name { font-weight: var(--weight-heavy); font-size: 2.5rem; letter-spacing: var(--tracking-tight); line-height: 1; }

.session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}
.session a { color: var(--color-ink); }

/* Light / Dark / System (theme.js renders the buttons). Square, hairline,
 * the chosen one filled, like the primary button. */
.theme-picker {
  display: inline-flex;
  border: var(--border-thin) solid var(--color-line-strong);
  background: var(--color-surface);
}
.theme-picker__choice {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}
.theme-picker__choice + .theme-picker__choice { border-left: var(--border-thin) solid var(--color-line-strong); }
.theme-picker__choice[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.theme-picker__choice:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Navigation: underline. Mark the current link aria-current="page". */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-line);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-bold);
}
.nav a {
  color: var(--color-ink-2);
  text-decoration: none;
  padding-block: var(--space-3);
  border-bottom: var(--border-accent) solid transparent;
  margin-bottom: calc(-1 * var(--border-thin));
}
.nav a:hover { color: var(--color-ink); }

/* Narrow screens: the nav takes its own full-width row under the brand and
 * never wraps. It scrolls sideways (no visible scrollbar); the right edge
 * fades to show there is more, and end padding lets the last link scroll
 * clear of the fade. No script, so it works under every page's CSP. */
@media (max-width: 40rem) {
  .nav {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 0 var(--space-6);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline-end: var(--space-12);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--space-12));
    mask-image: linear-gradient(to left, transparent, #000 var(--space-12));
    /* Sideways only. The line under the tabs is drawn inside the row and
     * the current tab's underline sits on it, so nothing pokes out below
     * for the row to scroll up and down to (Stephen, 2026-11-02). */
    overflow-y: hidden;
    border-bottom: 0;
    box-shadow: inset 0 calc(-1 * var(--border-thin)) 0 var(--color-line);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; white-space: nowrap; margin-bottom: 0; }
  .nav a:focus-visible { outline-offset: -2px; }
}
.nav a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
/* A count beside a nav label (Gaps 2): solid alarm while nonzero. */
.nav__count {
  display: inline-block;
  min-width: 1.5em;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  text-align: center;
  border: var(--border-thin) solid var(--color-line);
}
.nav__count--alarm { background: var(--tone-alarm); border-color: var(--tone-alarm); color: var(--tone-alarm-on); }
.nav__count[hidden] { display: none; }
/* The console's section row sits under the brand row, inside the header,
 * closer to it than the page below (the design's 18px). */
.site-header__nav { padding-bottom: 0; }
/* With a section row, the floret sits midway between the top of the header
 * and the tops of the tab letters, as the eye sees them: 30px each way. The
 * tab labels' text box starts about 6px above their letters, and the floret
 * drawing has 3px of air inside its box, hence the odd padding. Measured in
 * the browser (letter tops from canvas text metrics), not by eye. */
.site-header:has(.site-header__nav) .site-header__bar { padding-top: 1.6875rem; padding-bottom: 0.5625rem; }

/* ---- Tones --------------------------------------------------------------- */
.tone-ok      { --t: var(--tone-ok);      --t-on: var(--tone-ok-on);      --t-text: var(--tone-ok-text); }
.tone-info    { --t: var(--tone-info);    --t-on: var(--tone-info-on);    --t-text: var(--tone-info-text); }
.tone-warn    { --t: var(--tone-warn);    --t-on: var(--tone-warn-on);    --t-text: var(--tone-warn-text); }
.tone-alarm   { --t: var(--tone-alarm);   --t-on: var(--tone-alarm-on);   --t-text: var(--tone-alarm-text); }
.tone-neutral { --t: var(--tone-neutral); --t-on: var(--tone-neutral-on); --t-text: var(--tone-neutral-text); }

/* ---- Badge --------------------------------------------------------------- */
.badge {
  display: inline-block;
  white-space: nowrap;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--t-text, var(--color-ink-2));
  border: var(--border-thin) solid var(--t, var(--color-line));
  border-radius: var(--radius-none);
}
.badge--solid { background: var(--t, var(--color-ink-2)); color: var(--t-on, var(--color-surface)); }
.badge--dashed { border-style: dashed; }
.badge--mono { font-family: var(--font-mono); font-weight: var(--weight-regular); }
.badge-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* A badge that is a link (Sign out): set like the theme picker beside it,
 * filled on hover and focus like a chosen picker button. */
a.badge--action {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  border-color: var(--color-line-strong);
  background: var(--color-surface);
}
a.badge--action:hover,
a.badge--action:focus-visible { background: var(--color-primary); color: var(--color-on-primary); }
a.badge--action:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---- Button -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-sans);
  text-decoration: none;
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--easing);
}
.btn:hover { filter: brightness(1.08); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn--secondary { background: transparent; }
.btn--quiet { border-color: transparent; color: var(--color-accent); }
.btn--danger { background: var(--tone-alarm); border-color: var(--tone-alarm); color: var(--tone-alarm-on); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; filter: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }

/* ---- Containers ---------------------------------------------------------- */
.sheet {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
@media (min-width: 48rem) { .sheet { padding: var(--space-7); } }

.panel {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
/* A button directly in a stacked container keeps its own width. */
.panel > .btn, .sheet > .btn { align-self: flex-start; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.panel__title { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
.panel__meta { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-ink-2); }
/* Running text in a panel (the public site's channel cards). */
.panel__text { font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-ink-2); }

.section-title {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-title.tone-alarm { color: var(--t-text); }

/* ---- Summary tiles ------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); }
.tile {
  border-top: var(--border-strong) solid var(--color-line-strong);
  padding: var(--space-3) var(--space-1) var(--space-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
.tile__value { font-size: var(--text-3xl); font-weight: var(--weight-heavy); line-height: 1; font-variant-numeric: tabular-nums; color: var(--t-text, var(--color-ink)); }
.tile__label { font-size: var(--text-sm); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
/* The one red box: only a nonzero gap count gets it. Like every tile it has
 * its top line, in red, and the red box starts a gap below it (Stephen,
 * 2026-11-02). */
.tile--alarm {
  background: linear-gradient(var(--tone-alarm), var(--tone-alarm)) left bottom / 100% calc(100% - var(--space-1)) no-repeat;
  color: var(--tone-alarm-on);
  border-top-color: var(--tone-alarm);
  padding-inline: var(--space-4);
}
.tile--alarm .tile__value { color: inherit; }

/* ---- Table --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: var(--leading-body); }
/* A wide table scrolls inside .table-scroll below its minimum width. */
.table--min-44rem { min-width: 44rem; }
.table--min-52rem { min-width: 52rem; }
.table caption { text-align: left; font-size: var(--text-lg); font-weight: var(--weight-bold); padding-bottom: var(--space-3); }
.table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  border-top: var(--border-thin) solid var(--color-line-strong);
  border-bottom: var(--border-thin) solid var(--color-line-strong);
}
.table td { padding: var(--space-3); border-bottom: var(--border-thin) solid var(--color-line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-mono { font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; }
.table .cell-primary { font-weight: var(--weight-bold); }
.table .cell-sub { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-2); }
.row--alarm { background: var(--tone-alarm-tint); box-shadow: inset var(--border-accent) 0 0 var(--tone-alarm); }

/* ---- Gap box (one per open capture gap; they stack) ---------------------- */
.gap-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.gap-box { border: var(--border-thin) solid var(--tone-alarm); background: var(--color-surface); font-size: var(--text-md); line-height: var(--leading-body); }
.gap-box__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--tone-alarm);
  color: var(--tone-alarm-on);
  font-weight: var(--weight-heavy);
}
.gap-box__elapsed { font-family: var(--font-mono); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; }
.gap-box__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
}
.gap-box__text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 20rem; min-width: 0; }
.gap-box__headline { font-weight: var(--weight-bold); font-size: var(--text-base); }
.gap-box__detail { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---- Alerts -------------------------------------------------------------- */
.alert { font-size: var(--text-md); line-height: var(--leading-body); padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--t, var(--color-line)); background: var(--color-surface); font-weight: var(--weight-semibold); }
.alert--alarm { --t: var(--tone-alarm); background: var(--tone-alarm-tint); color: var(--tone-alarm-text); box-shadow: inset var(--border-accent) 0 0 var(--tone-alarm); }
.alert--notice { --t: var(--tone-warn); color: var(--tone-warn-text); box-shadow: inset var(--border-accent) 0 0 var(--tone-warn); }
.alert a { color: inherit; }

/* ---- Forms --------------------------------------------------------------- */
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
/* Fields in a row stretch to the row, so every label sits on the same line
 * whatever its control's rendered height (a native select can render
 * shorter than min-height); buttons in the row stay at the bottom. */
.field-row > .field { align-self: stretch; }
.field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 12rem; min-width: 0; font-size: var(--text-md); line-height: var(--leading-body); }
.field label { font-size: var(--text-sm); line-height: var(--leading-body); font-weight: var(--weight-bold); color: var(--color-ink-2); }
.input {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font: var(--text-md) var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius-none);
}
select.input { height: 2.75rem; }
/* A read-only value (a domain already verified) reads as fixed, not as a field to type in. */
.input--readonly { background: var(--color-surface-sunken); color: var(--color-ink-2); }

/* ---- Code block (single-use values, hashes) ------------------------------ */
.code-block {
  display: block;
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: var(--border-thin) solid var(--color-line);
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* ---- Footers ------------------------------------------------------------- */
/* The public site's footer (markup: site/partials/public-footer.html). */
.site-footer {
  border-top: var(--border-thin) solid var(--color-line);
  margin-top: var(--space-12);
  padding-block: var(--space-6) var(--space-10);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: baseline; }
.site-footer a { color: var(--color-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* A console page's one-line note under its content. */
.page-footer {
  padding-block: var(--space-6) var(--space-10);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Phones (under 40rem / 640px) ---------------------------------------- */
/* .table--cards: on a phone each row is a card instead of a row that scrolls
 * sideways. The header row hides; every cell but the first carries its own
 * label in data-label (dashboard.js custodianRows). */
@media (max-width: 40rem) {
  .table--cards, .table--cards tbody { display: block; min-width: 0; }
  .table--cards tbody td[data-label] > * { justify-self: start; }
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--cards tbody tr { display: block; padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-line); }
  .table--cards tbody tr.row--alarm { padding-left: var(--space-3); }
  .table--cards tbody td { display: block; border: 0; padding: var(--space-1) 0; }
  .table--cards tbody td[data-label] {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: start;
    gap: var(--space-3);
  }
  .table--cards tbody td[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink-2);
    padding-top: 0.2rem;
  }
  .table--cards .cell-mono { white-space: normal; overflow-wrap: anywhere; }
  .table--cards .cell-sub { overflow-wrap: normal; word-break: keep-all; }
}

@media (max-width: 40rem) {
  .site-header__bar,
  .site-header:has(.site-header__nav) .site-header__bar { padding-block: var(--space-4); gap: var(--space-3); }
  .brand__mark { width: 2.5rem; height: 2.5rem; }
  .brand__name { font-size: 2rem; }
  /* Header controls on one row: theme picker left, Sign out right. The
   * refresh time is the one thing dropped; the data still refreshes. */
  .session { width: 100%; justify-content: space-between; align-items: center; }
  .session__meta { display: none; }
  /* Nested boxes each gave up 20-24px a side; on a phone that is a third of
   * the width. */
  .sheet { padding: var(--space-3); gap: var(--space-4); }
  .panel { padding: var(--space-3); }
}

/* Page-structure and form variants used by the dashboard's settings and
 * signup-links pages (a page stylesheet may not restyle a component). */
textarea.input { font-family: var(--font-mono); font-size: var(--text-sm); resize: vertical; }
.table .cell-check { text-align: center; width: 1%; white-space: nowrap; }
.table .cell-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.token-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-thin) solid var(--tone-warn); box-shadow: inset var(--border-accent) 0 0 var(--tone-warn); }
.token-box__warn { font-weight: var(--weight-bold); color: var(--tone-warn-text); }
.token-box .btn { align-self: flex-start; }
/* A row whose fields differ in height (a textarea beside inputs) aligns at the top. */
.field-row:has(textarea) { align-items: flex-start; }
/* Chrome that does not print: a page prints its content, not the header. */
@media print {
  .screen-only, .site-header, .nav, .page-footer { display: none !important; }
}