/* Public, light-DOM contracts. Layout owns spacing between components. */

.mk-stack { display: flex; flex-direction: column; gap: var(--space-lg); }

.mk-field { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.mk-field > label, label.mk-label { display: block; margin: 0; font-weight: 700; }

.mk-hint, .mk-error { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.mk-error { color: var(--error); }
.mk-input { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 2.5rem; margin: 0; padding: calc(var(--space-sm) + 1px) calc(var(--space-md) + 1px); font: inherit; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--control-bg); color: var(--ink); }
textarea.mk-input { resize: vertical; }
.mk-input::placeholder { color: var(--muted); opacity: 1; }
.mk-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); }
.mk-input[aria-invalid="true"] { border-color: var(--error); }
.mk-input:disabled { opacity: .55; cursor: not-allowed; }
.mk-input[readonly] { background: var(--surface-sunken); }

.mk-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 2.75rem; margin: 0; padding: calc(var(--space-sm) + 1px) calc(var(--space-lg) + 1px); border: 1px solid var(--btn-border); border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; }
.mk-btn:hover { background: var(--btn-hover-bg); color: var(--btn-ink); border-color: var(--btn-hover-border); }
.mk-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mk-btn[data-variant="primary"] { background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: var(--btn-primary-bg); }
.mk-btn[data-variant="primary"]:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.mk-btn[data-variant="danger"] { background: var(--btn-danger-bg); color: var(--btn-danger-ink); border-color: var(--btn-danger-bg); }
.mk-btn[data-variant="danger"]:hover { border-color: var(--ink); }
.mk-btn[data-variant="quiet"] { background: transparent; border-color: transparent; color: var(--ink); }
.mk-btn[data-variant="quiet"]:hover { background: var(--btn-hover-bg); }
.mk-btn:disabled { opacity: .45; cursor: not-allowed; }
.mk-btn[aria-busy="true"] { cursor: progress; }
.mk-btn[data-size="compact"], .mk-input[data-size="compact"] { min-height: 2rem; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); }
.mk-btn[data-size="touch"], .mk-input[data-size="touch"] { min-height: 3rem; }
.mk-btn[data-block] { width: 100%; }
/* A touch screen answers a press at once. */
.mk-btn[data-size="touch"]:active:not(:disabled) { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
:is(.mk-btn, .mk-input, .mk-field)[hidden] { display: none; }

.mk-btn > :is(svg, .mk-icon) { width: 1.25em; height: 1.25em; flex: none; }
/* Status as plain words beside a heading or label: counts, health, saved
   state. The tone only reinforces the words. */
.mk-status-text { font-size: var(--text-sm); font-weight: 500; color: var(--muted); }
.mk-status-text[data-tone="warning"] { color: var(--warning); }
.mk-status-text[data-tone="error"] { color: var(--error); }
.mk-status-text[data-tone="success"] { color: var(--success); }
.mk-status-text[data-tone="changed"] { color: var(--card-changed); }

/* `data-only` on any component (through its rest attributes) or element:
   shown only with scripts running, only without, only on screen, only on
   paper. The islands script marks the page `js`. */
html:not(.js) [data-only="script"], html.js [data-only="no-script"] { display: none !important; }
@media print { [data-only="screen"] { display: none !important; } }
@media screen { [data-only="print"] { display: none !important; } }

/* The Select component (crates/ui, select.behaviour.ts): the select the
   page sent, drawn as a button and a list that floats over the page once
   its island attaches. Without JavaScript the select is shown as it is. */
.mk-select { display: block; position: relative; }
.mk-select[data-compact] { display: inline-block; vertical-align: middle; }
.mk-select > select.mk-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.mk-button, .mk-button:hover {
  box-sizing: border-box; font: inherit; display: flex; align-items: center; gap: var(--space-sm); width: 100%; margin: 0;
  padding: calc(var(--space-sm) + 1px) calc(var(--space-md) + 1px);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  background: var(--control-bg); color: var(--ink); font-weight: 400; text-align: left; cursor: pointer;
}
.mk-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.mk-button:disabled { opacity: .45; cursor: not-allowed; }
.mk-button[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.mk-value { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; flex: 1 1 auto; }
.mk-value .mk-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-prompt { color: var(--muted); }
.mk-caret { margin-left: auto; width: .5em; height: .5em; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-25%) rotate(45deg); flex: none; }
.mk-button[aria-expanded="true"] .mk-caret { transform: translateY(25%) rotate(-135deg); }
.mk-logo { width: 1.4em; height: 1.4em; flex: none; border-radius: 22%; object-fit: contain; }
.mk-detail { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.mk-note { margin-left: auto; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--muted); text-align: right; }
.mk-popup {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 50;
  display: flex; flex-direction: column; max-height: 20rem; padding: 4px; box-sizing: border-box;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  background: var(--paper-raised); box-shadow: 0 8px 24px var(--popup-shadow);
}
.mk-popup[hidden] { display: none; }
.mk-popup.mk-up { top: auto; bottom: calc(100% + 4px); }
/* In the top layer (the Popover API): placed by the script, in the
   window's coordinates, over any dialog. */
.mk-popup[popover] { position: fixed; inset: auto; margin: 0; color: var(--ink); overflow: visible; }
.mk-popup[popover]:not(:popover-open) { display: none; }
.mk-find { margin: 0 0 4px; flex: none; }
.mk-list { position: relative; list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.mk-option { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.mk-option:hover, .mk-option.mk-active { background: var(--surface-sunken); }
.mk-option[aria-selected="true"] { background: var(--tint-highlight); font-weight: 700; }
.mk-option[aria-selected="true"].mk-active { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mk-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mk-option .mk-note { font-weight: 400; }
.mk-empty { margin: 0; padding: var(--space-sm) var(--space-md); color: var(--muted); }
.mk-select[data-compact] .mk-button { width: auto; min-width: 9rem; padding: .25rem .5rem; }
.mk-select[data-compact] .mk-popup { white-space: nowrap; }

/* An on/off setting (`views::switch`): a checkbox drawn as a switch, so it
   works the same without JavaScript. */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); margin: 0; cursor: pointer; font-weight: 600; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .switch-track { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--switch-off); transition: background .15s; }
.switch .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--switch-knob); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--switch-on); }
.switch input:checked + .switch-track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .45; }
.switch .switch-on, .switch .switch-off { order: -1; }
.switch .switch-off, .switch input:checked ~ .switch-on { display: inline; }
.switch .switch-on, .switch input:checked ~ .switch-off { display: none; }
@media (prefers-reduced-motion: reduce) { .switch .switch-track, .switch .switch-track::after { transition: none; } }

/* Metadata used by enhanced options and their native text equivalents. */
.tag {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: normal;
  white-space: nowrap;
}
/* Sentence case, whatever the label's own: "Waiting for payment". */
.tag::first-letter { text-transform: uppercase; }
.tag-ok { background: var(--tint-success); }
.tag-error { background: var(--tint-error); }
.tag-unknown { background: var(--tint-neutral); }
.tag-syncing { background: var(--accent); color: var(--accent-ink); }
.tag-stalled { background: var(--tint-warning); }
.tag-slow { background: var(--tint-warning); }
.tag-muted, .tag-dashed { font-weight: 500; text-transform: none; color: var(--muted); border-color: var(--line); background: var(--paper); }
.tag-dashed { border-style: dashed; background: transparent; }
.tag:has(> .tag-icon) { display: inline-flex; align-items: center; gap: var(--pill-gap); }
.tag-icon { display: inline-flex; flex: none; }
.tag-icon > * { width: 1.1em; height: 1.1em; }
/* A Monero network (`views::network_badge`): the word always, an icon,
   and an edge that differs as well as the tint, so colour is never the
   only sign. Solid for mainnet (real money), dashed for a test network. */
.tag-network { display: inline-flex; align-items: center; gap: var(--pill-gap); font-size: var(--text-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; border: 1px solid var(--network-test-edge); border-radius: 999px; padding: var(--pill-pad-y-roomy) var(--pill-pad-x-roomy); color: var(--network-ink); }
.tag-network svg { width: 1.05em; height: 1.05em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag-network.is-main { background: var(--network-main-bg); border-color: var(--network-main-edge); }
.tag-network.is-test { background: var(--network-test-bg); border-style: dashed; }
/* Icon only (beside a wallet's name, in a table): a round badge, its name
   for screen readers and on hover. */
.tag-network[data-size="icon"] { padding: var(--pill-pad-y); border-radius: 50%; }
.tag-network[data-size="icon"] > .tag-network-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* `views::state_badge`: the short words replace the long ones on a phone;
   the long ones stay for screen readers. */
.tag .label-short { display: none; }
@media (max-width: 640px) {
  .tag .label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tag .label-short { display: inline; }
}
/* An order's status, the same everywhere it's shown: the checkout, the POS
   and the dashboard (`views::state_badge`). Each `.state-*` names its colour
   set; `.tag` and the POS's own badges and cards paint with it. */
.tag[class*="state-"] { background: var(--state-bg); color: var(--state-ink); border-color: var(--state-border); }
.state-pending { --state-bg: var(--state-pending-bg); --state-border: var(--state-pending-border); --state-ink: var(--state-pending-ink); }
.state-unconfirmed { --state-bg: var(--state-unconfirmed-bg); --state-border: var(--state-unconfirmed-border); --state-ink: var(--state-unconfirmed-ink); }
.state-confirming { --state-bg: var(--state-confirming-bg); --state-border: var(--state-confirming-border); --state-ink: var(--state-confirming-ink); }
.state-partial { --state-bg: var(--state-partial-bg); --state-border: var(--state-partial-border); --state-ink: var(--state-partial-ink); }
.state-paid { --state-bg: var(--state-paid-bg); --state-border: var(--state-paid-border); --state-ink: var(--state-paid-ink); }
.state-overpaid { --state-bg: var(--state-overpaid-bg); --state-border: var(--state-overpaid-border); --state-ink: var(--state-overpaid-ink); }
.state-expired, .state-offline, .state-unknown { --state-bg: var(--state-expired-bg); --state-border: var(--state-expired-border); --state-ink: var(--state-expired-ink); }
.state-double-spend { --state-bg: var(--state-double-spend-bg); --state-border: var(--state-double-spend-border); --state-ink: var(--state-double-spend-ink); }
.state-cancelled { --state-bg: var(--state-cancelled-bg); --state-border: var(--state-cancelled-border); --state-ink: var(--state-cancelled-ink); }

/* Current is descriptive metadata, not a second chip beside the network. */
.mk-current { color: var(--success); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }

/* On a phone an option is its name and its network's icon: the detail, the
   note and the chips would push it past the screen's edge. */
@media (max-width: 640px) {
  .mk-select :is(.mk-detail, .mk-note, .mk-chip, .mk-current) { display: none; }
  .mk-option { white-space: normal; }
  .mk-option .mk-label, .mk-value .mk-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* What pages are made of between the controls (crates/ui/src/components/content.rs):
   Panel (.box), Alert (.error, .warning, .success, .notice), Hint, Heading,
   Facts, ShortValue, Disclosure, Checks and Timeline.
   Tag and NetworkBadge are in select.css, which draws them in options too. */
/* A message (Alert): its tone's edge and words on its tone's tint, a solid
   ground like a toast's. */
.error {
  border: 2px solid var(--error);
  background: var(--tint-error);
  border-radius: var(--radius-md);
  color: var(--error);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  margin: 1em 0;
}
.success {
  border: 2px solid var(--success);
  background: var(--tint-success);
  border-radius: var(--radius-md);
  color: var(--success);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  margin: 1em 0;
}
.hint { color: var(--muted); font-size: var(--text-sm); }
/* A message's title and its actions (Alert). */
.alert-title { font-weight: 800; }
:is(.error, .warning, .success, .notice):has(> .alert-title) { font-weight: 500; }
/* An icon at the message's left, the words beside it. */
:is(.error, .warning, .success, .notice):has(> .alert-icon) { position: relative; padding-inline-start: calc(var(--space-md) + 1.6em); font-weight: 500; }
.alert-icon { position: absolute; inset-inline-start: var(--space-md); top: calc(var(--space-sm) + .1em); display: flex; }
.alert-icon svg { width: 1.2em; height: 1.2em; }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
/* Muted words in a line, at its size. */
.muted { color: var(--muted); }
/* Admin settings banners after a save (admin_settings_v2.md task 4.5). */
.warning {
  border: 2px solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--warning);
  background: var(--tint-warning);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  margin: 1em 0;
}
.notice {
  border: 1px solid var(--line);
  background: var(--tint-neutral);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin: 1em 0;
}
/* Read out, not shown: words that go with something only visible. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.box {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  padding: var(--space-xl);
  margin: 1.2rem 0;
  box-shadow: 0 var(--shadow-ambient-y) var(--shadow-ambient-blur) var(--shadow-ambient);
}
.box + .box { margin-top: 1.2rem; }
.box[data-look="tile"] { margin: 0; min-width: 0; box-shadow: none; border-radius: var(--radius-lg); }
.box[data-look="tile"] > :first-child { margin-top: 0; }
.box[data-look="tile"] > :last-child { margin-bottom: 0; }
.short-value { position: relative; display: inline-block; text-decoration: inherit; }
.short-value-text { user-select: none; }
.short-value-full { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: transparent; user-select: text; }
details:is(.keys-help, .more-options) { margin: var(--space-md) 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
details:is(.keys-help, .more-options) > summary { display: block; padding: var(--space-md) var(--space-lg); font-weight: 700; border-radius: var(--radius-md); }
details:is(.keys-help, .more-options) > summary:hover { background: var(--surface-sunken); }
details:is(.keys-help, .more-options)[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.keys-help-body, details.more-options > .setting-field { padding: var(--space-md) var(--space-lg); margin: 0; }
/* "More options" is a group of its own between the wallet's name and the
   ways to add it: a wide step (xl) from each, like settings are apart. */
details.more-options { margin: var(--space-xl) 0; }
.keys-help-body h4 { margin: var(--space-md) 0 var(--space-xs); font-size: var(--text-base); }
.keys-help-body h4:first-child { margin-top: 0; }
.keys-help-body p { margin: 0; }
.keys-help-body ol { margin: 0; padding-left: 1.3em; }
.keys-help-body li { margin: .25em 0; }
.keys-help-body pre { margin: var(--space-xs) 0 var(--space-sm); font-size: var(--text-sm); }
.keys-help-body .copy-this { background: var(--tint-highlight); border-radius: 2px; padding: 0 .2em; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin: .6em 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-md); padding: var(--space-sm) 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline time { color: var(--muted); }
@media (max-width: 640px) {
  .timeline li { grid-template-columns: 1fr; gap: 0; }
}
.checks { list-style: none; padding: 0; margin: var(--space-md) 0 var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-md); }
.checks li { display: flex; gap: var(--space-sm); align-items: baseline; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--line); }
.checks li:first-child { border-top: 0; }
.checks .mark { width: 1em; flex: none; font-weight: 800; text-align: center; }
.checks .ok .mark { color: var(--success); }
.checks .no .mark { color: var(--error); }
.checks .fix { display: block; font-size: var(--text-sm); color: var(--muted); }
.checks .fix-line { display: block; }
.checks .then .mark { color: var(--muted); }
.checks .fix { overflow-wrap: anywhere; }
/* A disclosure's summary reads as a link: underlined, the accent when
   hovered; a plain one is a line in the text. */
details:is(.disclosure, .keys-help, .more-options) > summary { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
details:is(.disclosure, .keys-help, .more-options) > summary:hover { color: var(--accent-text); }
details.disclosure > summary { display: inline; }
details:is(.disclosure, .keys-help, .more-options) > summary { cursor: pointer; list-style: none; }
details:is(.disclosure, .keys-help, .more-options) > summary::-webkit-details-marker { display: none; }
/* Every look: a caret that turns over when open. */
details:is(.disclosure, .keys-help, .more-options) > summary::after { content: " \25BE"; color: var(--muted); }
details:is(.disclosure, .keys-help, .more-options)[open] > summary::after { content: " \25B4"; }

/* Tables (Table, Row, Cell). */
table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
th, td { border: 1px solid var(--line); padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: top; }
/* A code/pre value inside a table cell (an address, a txid) shouldn't carry
   its own box on top of the cell's own border - the cell border is enough. */
td code, td pre, th code, th pre { background: none; border: none; padding: 0; }
th { background: var(--table-head-bg); color: var(--table-head-ink); font-weight: 700; }
/* `color-mix` with `transparent`, not a flat `rgba(0,0,0,...)`: a literal
   black tint darkens a light surface but is imperceptible on a dark one.
   Mixing a sliver of `--ink` itself means the stripe darkens in light mode
   (ink is near-black) and lightens in dark mode (ink is near-white) from
   the same rule. */
tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* A table sits in its own scroll box, so however wide it gets, the page
   never scrolls sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 0.8em 0; }
.table-scroll > table { margin: 0; }
/* Phones (the same 640px as the nav): a table drops the columns marked
   optional, and a `.table-cards` table turns each row into a card - title
   and status, then amount and date, then the rest. */
@media (max-width: 640px) {
  .col-optional { display: none; }
  table.table-cards, table.table-cards tbody { display: block; }
  table.table-cards thead { display: none; }
  table.table-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); align-items: center; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
  table.table-cards td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  table.table-cards td.col-optional { display: none; }
  table.table-cards .card-title { grid-column: 1; grid-row: 1; font-weight: 700; }
  table.table-cards .card-status { grid-column: 2; grid-row: 1; justify-self: end; }
  table.table-cards .card-amount { grid-column: 1; grid-row: 2; font-weight: 700; }
  table.table-cards .card-when { grid-column: 2; grid-row: 2; justify-self: end; color: var(--muted); font-size: var(--text-sm); }
  table.table-cards .card-meta { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-sm); }
  table.table-cards .card-meta:empty { display: none; }
  table.table-cards .card-detail { grid-column: 1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
}
/* A phone: a table of facts (`.kv-table`) puts each label over its value,
   and a `.table-stack` table (settings rows with inputs and buttons) turns
   each row into a box of its cells, each named by its `data-label`. */
@media (max-width: 640px) {
  .kv-table, .kv-table tbody, .kv-table tr, .kv-table th, .kv-table td { display: block; width: auto; }
  .kv-table { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
  .kv-table th, .kv-table td, .kv-table tr:nth-child(even) td { border: 0; padding: 0; background: none; }
  .kv-table tr { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
  .kv-table tr:last-child { border-bottom: 0; }
  .kv-table th { color: var(--muted); font-size: var(--text-xs); }
  .kv-table td code { word-break: break-all; }
  table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: auto; }
  table.table-stack thead { display: none; }
  table.table-stack tr { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
  table.table-stack td, table.table-stack tr:nth-child(even) td { border: 0; padding: var(--space-xs) 0; background: none; overflow-wrap: anywhere; }
  table.table-stack td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
  table.table-stack td:empty { display: none; }
}

/* A compact disclosure: a small panel, one line until opened. */
details.disclosure-compact { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
details.disclosure-compact > summary { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); min-height: 2rem; font-size: var(--text-xs); border-radius: var(--radius-md); cursor: pointer; list-style: none; overflow: hidden; white-space: nowrap; }
details.disclosure-compact > summary::-webkit-details-marker { display: none; }
details.disclosure-compact > summary::after { content: ""; flex: none; margin-left: auto; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .2s; }
details.disclosure-compact[open] > summary::after { transform: rotate(45deg); }
details.disclosure-compact > summary:hover { background: var(--tint-hover); }
details:is(.disclosure-compact, .disclosure-row)[data-alert] { border-color: var(--error); }
details.disclosure-compact > .disclosure-body { padding: var(--space-xs) var(--space-sm) var(--space-sm); font-size: var(--text-xs); border-top: 1px solid var(--line); }
/* A row of a list: one line, a form under it once opened. */
details.disclosure-row { background: var(--paper); border: 1px solid var(--card-border); border-radius: var(--radius-md); min-width: 0; }
details.disclosure-row > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); cursor: pointer; list-style: none; }
details.disclosure-row > summary::-webkit-details-marker { display: none; }
details.disclosure-row > summary:hover { background: var(--surface-sunken); }
details.disclosure-row[open] > summary { border-bottom: 1px solid var(--card-border); border-radius: var(--radius-md) var(--radius-md) 0 0; }
details.disclosure-row > .disclosure-body { padding: var(--space-sm) var(--space-md); }
@media (prefers-reduced-motion: reduce) { details.disclosure-compact > summary::after { transition: none; } }
/* A help tip: a round "?" and help over the page under it. */
.help-tip { position: relative; display: inline-block; }
.help-tip[data-anchor="container"] { position: static; }
.help-tip > summary { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--btn-border); font-weight: 800; font-size: var(--text-xs); color: var(--btn-ink); background: var(--btn-bg); cursor: pointer; list-style: none; }
.help-tip > summary::-webkit-details-marker { display: none; }
.help-tip > summary:hover { border-color: var(--btn-hover-border); }
.help-tip[open] > summary { background: var(--ink); color: var(--paper-raised); border-color: var(--ink); }
.help-tip-body { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(28rem, calc(100vw - 32px)); max-height: min(78vh, 760px); overflow-y: auto; padding: var(--space-sm) var(--space-md) var(--space-md); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 500; }
.help-tip[data-size="wide"] > .help-tip-body { width: min(920px, calc(100vw - 32px)); }
/* Paging links (Pagination). */
.mk-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: var(--space-md) 0; }
.mk-pagination-status { color: var(--muted); font-size: var(--text-sm); }
/* One of a list, as a card (Card). */
.mk-card { padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); min-width: 0; }
.mk-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); }
.mk-card-head > div { min-width: 0; }
.mk-card-title { margin: 0; padding: 0; border: 0; font-size: var(--text-base); font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card-sub { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--muted); }
.mk-card-amount { margin: var(--space-sm) 0 0; font-size: var(--text-display-sm); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mk-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.mk-card-foot small { min-width: 0; font-size: var(--text-xs); color: var(--muted); }
.mk-card-foot > :last-child { flex: none; }

/* Dialogs (crates/ui/src/components/dialog.rs): a question before
   something that can't be undone, or more about one thing; and the page
   holding the same content, where its opener goes without JavaScript. */
.settings-dialog { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); box-sizing: border-box; padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); }
.settings-dialog::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.settings-dialog > h2 { margin-top: 0; }
.confirm-dialog { width: min(32rem, calc(100vw - 2rem)); }
.confirm-dialog-page { max-width: 32rem; margin: var(--space-lg) 0; }
.wide-dialog-page { max-width: 46rem; margin: var(--space-lg) 0; }
.dialog-title { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); border: 0; padding: 0; margin: 0 0 var(--space-sm); }
.dialog-aside { margin-left: auto; white-space: nowrap; }
.dialog-aside + .dialog-x, .dialog-aside + .dialog-x:hover { margin-left: 0; }
.dialog-x, .dialog-x:hover { margin: 0 0 0 auto; padding: 0 var(--space-xs); border: 0; background: none; color: var(--muted); font-size: var(--text-xl); line-height: 1; }
/* The answers: Cancel, then the action, at the right. */
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }
.dialog-actions button { margin: 0; }
.dialog-actions button[disabled] { opacity: .45; cursor: not-allowed; }

/* Form controls (crates/ui/src/components/forms.rs) beyond Field: a
   checkbox with what it means (Checkbox), radio cards (RadioCards), an
   icon-only button (IconButton) and a form's row of buttons (FormActions).
   Inputs and text areas are .mk-input (primitives.css); the switch is in
   select.css. */
.check-line { display: flex; gap: var(--space-sm); align-items: flex-start; font-weight: 600; }
.check-line input { width: auto; margin: var(--space-xs) 0 0; accent-color: var(--accent-text); }
.mk-checkbox { margin: 0; accent-color: var(--accent-text); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.form-actions .spacer { flex-grow: 1; }
.form-actions button { margin: 0; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); margin: var(--space-sm) 0; border: 0; padding: 0; }
.radio-card { display: flex; align-items: center; gap: var(--space-md); margin: 0; padding: var(--space-md) var(--space-lg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper-raised); font-weight: 400; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--tint-highlight); }
.radio-card input { width: auto; margin: 0; accent-color: var(--accent-text); }
.radio-card[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-sunken); border-style: dashed; }
.radio-card[aria-disabled="true"] > *:not(.tag) { opacity: .45; }
/* Small cards side by side: the theme's three. */
.radio-cards.is-compact { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-sm); margin: 0; }
.radio-cards.is-compact .radio-card { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
.mk-btn.icon-only { width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; }
.mk-btn.icon-only svg { width: 1.1rem; height: 1.1rem; }
/* A note under a field (FieldNote): help, a problem, a pending save, a
   check that passed. */
:is(.field-help, .setting-problem, .setting-pending, .field-check) { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.setting-problem { color: var(--error); }
.setting-pending { color: var(--warning); font-weight: 700; }
.field-check { color: var(--success); font-weight: 700; }
:is(.field-help, .setting-problem, .field-check) a { color: inherit; }
/* A value set elsewhere (LockedValue): a disabled box, a padlock inside. */
.locked-input { position: relative; display: block; }
.locked-input > .mk-input { padding-right: 2.4em; background: var(--surface-sunken); color: var(--muted); cursor: not-allowed; opacity: 1; }
.locked-input .lock-icon { position: absolute; right: 0.8em; top: 50%; width: 1em; height: 1em; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* A tile that opens a tool (LaunchTile): an icon, a title, a line. */
.mk-launch-tile { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-md); min-width: 11em; padding: var(--space-md) var(--space-lg); border: 1px solid var(--btn-border); border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; }
a.mk-launch-tile[href]:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--btn-ink); }
.mk-launch-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mk-launch-tile[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mk-launch-tile-icon { flex: none; display: flex; }
.mk-launch-tile-icon svg { width: 1.7em; height: 1.7em; }
.mk-launch-tile-text { display: flex; flex-direction: column; gap: var(--space-xs); }
.mk-launch-tile-title { font-weight: 700; }
.mk-launch-tile-hint { font-size: var(--text-sm); opacity: .85; }
/* An input with buttons inside its right edge (Input actions). */
.mk-input-with-actions { position: relative; display: block; min-width: 0; }
/* Typed text stops short of the actions, however many there are. */
.mk-input-with-actions > .mk-input { padding-right: calc(var(--space-sm) + 2.1rem); }
.mk-input-with-actions:has(> .mk-input-actions > :nth-child(2)) > .mk-input { padding-right: calc(var(--space-sm) + 2 * 2.1rem + var(--space-xs)); }
.mk-input-with-actions:has(> .mk-input-actions > :nth-child(3)) > .mk-input { padding-right: calc(var(--space-sm) + 3 * 2.1rem + 2 * var(--space-xs)); }
.mk-input-actions { position: absolute; top: 50%; right: var(--space-xs); transform: translateY(-50%); display: flex; gap: var(--space-xs); }
.mk-input-actions > .mk-btn.icon-only { border-color: transparent; background: transparent; }
.mk-input-actions > .mk-btn.icon-only:hover { background: var(--btn-hover-bg); }

/* A list in the user's order (SortableList, SortableItem, SortHandle):
   a dragged item follows the pointer, lifted with the popups' shadow; the
   items it passes slide out of its way. */
.mk-sortable { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: var(--space-sm); }
.mk-sortable-item { min-width: 0; transition: transform .15s ease; }
.mk-sortable-item.is-dragging { position: relative; z-index: 2; transition: none; box-shadow: 0 8px 24px var(--popup-shadow); border-radius: var(--radius-md); }
.mk-sortable-item[data-sortable-fixed] > details.disclosure-row { border-style: dashed; background: transparent; }
.mk-sort-handle { cursor: grab; color: var(--muted); font-size: var(--text-lg); line-height: 1; padding: 0 var(--space-xs); user-select: none; touch-action: none; }
.mk-sortable-item.is-dragging .mk-sort-handle { cursor: grabbing; }
.mk-sort-handle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .mk-sortable-item { transition: none; } }

/* The top of a page (PageHeader): where it sits, its title, then a flow's
   progress, under the site's bar with room to breathe. The title row
   carries the rule under it, so a badge or the page's actions sit on it.
   Breadcrumbs: links to the pages above, a "›" between them; one link
   alone is a back link, with an arrow. Long names shorten; their title
   says them whole. Real URLs keep it useful without scripts or history. */
.mk-page-header { margin: var(--space-lg) 0 var(--space-md); }
.mk-page-header:has(> .mk-breadcrumbs) { margin-top: var(--space-xl); }
.mk-page-title { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); min-width: 0; border-bottom: 2px solid var(--line); padding-bottom: 0.3em; }
.mk-page-title > h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; margin: 0; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
.mk-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-inline-start: auto; }
.mk-page-header > .mk-wizard-steps { margin: var(--space-lg) 0 0; }
.mk-breadcrumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-sm); min-width: 0; width: 100%; margin: 0 0 var(--space-sm); padding: 0; color: var(--muted); font-size: var(--text-sm); }
.mk-breadcrumbs > a { flex: 0 1 auto; display: block; min-width: 0; max-width: min(60vw, 24rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.mk-breadcrumbs > a:last-child { flex-shrink: 0; max-width: 45%; }
.mk-breadcrumbs > a + a::before { content: "›"; display: inline-block; margin-right: var(--space-sm); text-decoration: none; color: var(--muted); }
.mk-breadcrumbs > a + a { padding-inline-start: 0; }
.mk-breadcrumbs > a:hover { color: var(--accent-text); }
.mk-breadcrumbs > a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.mk-breadcrumbs > a:only-child { position: relative; padding-inline-start: 1.4em; }
.mk-breadcrumbs > a:only-child::before { content: "←"; position: absolute; inset-inline-start: 0; text-decoration: none; }

/* Flat progress segments; task details stay inside their parent label. */
.mk-wizard-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-lg); list-style: none; padding: 0; margin: var(--space-xl) 0; }
.mk-wizard-steps > li { display: flex; align-items: start; gap: var(--space-sm); min-width: 0; color: var(--muted); }
.mk-wizard-steps small { display: block; font-size: var(--text-sm); font-weight: 500; }
.mk-wizard-steps [aria-current="step"] { color: var(--ink); font-weight: 800; }
.mk-wizard-steps[data-design="strip"] > li { padding-block: var(--space-md); flex-direction: column; justify-content: space-between; }
/* Native values drive the fill in both server-rendered and JS-driven screens. */
.mk-wizard-progress { appearance: none; display: block; width: 100%; height: 3px; border: 0; border-radius: 0; background: var(--line-strong); color: var(--accent-text); }
.mk-wizard-progress::-webkit-progress-bar { background: var(--line-strong); }
.mk-wizard-progress::-webkit-progress-value { background: var(--accent-text); }
.mk-wizard-progress::-moz-progress-bar { background: var(--accent-text); }
.mk-wizard-steps > li > span { overflow-wrap: anywhere; }
@media (max-width: 480px) { .mk-wizard-steps { gap: var(--space-sm); } }
/* A short fixed sequence (ProgressSteps): a track of dots, then a line.
   Its colours are an order state's (--state-*, select.css). */
.mk-stage { text-align: left; padding: var(--space-sm) var(--space-md); border: 1px solid var(--state-border, var(--line)); border-radius: var(--radius-md); background: var(--state-bg, var(--paper-raised)); color: var(--state-ink, var(--ink)); }
.mk-track { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; }
.mk-track::before { content: ""; position: absolute; top: .8em; left: 16.67%; right: 16.67%; height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); }
.mk-track:has(> li:nth-child(2):last-child)::before { left: 25%; right: 25%; }
.mk-track > li { position: relative; display: grid; justify-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: 700; }
.mk-track-dot { display: grid; place-items: center; width: 2.13em; height: 2.13em; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 50%; background: var(--paper-raised); }
.mk-track-dot svg { width: 1.2em; height: 1.2em; }
.mk-track > .step-done .mk-track-dot { background: var(--state-paid-border); border-color: var(--state-paid-border); color: var(--paper-raised); }
.mk-track > .step-now .mk-track-dot { border-color: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.mk-track > .step-part .mk-track-dot { border-color: currentColor; background: conic-gradient(currentColor 0 50%, var(--paper-raised) 50% 100%); }
.mk-track > .step-fail .mk-track-dot { background: var(--state-border); border-color: var(--state-border); color: var(--paper-raised); }
.mk-track > .step-todo { opacity: .85; }
.mk-stage-msg { margin: 0; font-size: var(--text-sm); line-height: 1.4; }
.mk-stage[data-size="compact"] { padding: var(--space-sm); }
.mk-stage[data-size="compact"] .mk-track > li { font-size: var(--text-2xs); }
.mk-stage[data-size="compact"] .mk-stage-msg { font-size: var(--text-xs); }

/* The card is a section. Its actual link or button owns the action. */
.mk-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-lg); margin: 0; }
.mk-action-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); box-shadow: 0 var(--shadow-ambient-y) var(--shadow-ambient-blur) var(--shadow-ambient); overflow-wrap: anywhere; }
.mk-action-card :is(h2, h3) { margin: 0; padding: 0; border: 0; font-size: var(--text-lg); line-height: 1.35; }
.mk-action-card p { margin: 0; }
.mk-action-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 2.25rem; }
.mk-action-card-body { display: flex; flex-direction: column; flex: 1; gap: var(--space-sm); min-width: 0; }
.mk-action-card-description { flex: 1; }
.mk-action-card .mk-btn { align-self: flex-start; max-width: 100%; margin-top: var(--space-sm); }
.mk-action-card[data-recommended] { border-color: var(--line-strong); }
.mk-action-card[data-unavailable] { background: var(--surface-sunken); border-style: dashed; border-color: var(--line-strong); }
.mk-action-card[hidden] { display: none; }

/* A setting (Setting): its name and what it's for on the left, its
   control and any notes under it on the right; settings a line apart. The
   two wrap, by the room the setting has (a narrow card, a phone), not the
   window's width, so the control goes under the name rather than over it. A
   wide control (radio cards, a list of choices, a text area, a table, an
   ordered list) and a phone put the control under the name, full width. A field
   written by hand (a dialog's "type the name to confirm") stays one
   column: name, then control. */
.setting-field { margin: 0 0 var(--space-xl); }
.setting-field:last-child { margin-bottom: 0; }
.setting-field:has(> .setting-about) { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: start; margin: 0; }
.setting-field:has(> .setting-about) > .setting-about { flex: 1 1 10rem; }
.setting-field:has(> .setting-about) > .setting-control { flex: 100 1 12rem; max-width: 22rem; }
.setting-field:has(> .setting-about) + .setting-field:has(> .setting-about) { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.setting-field:has(> .setting-control > :is(.radio-cards, .setting-choices, textarea, table, .table-scroll, .mk-sortable):first-child) > :is(.setting-about, .setting-control) { flex-basis: 100%; max-width: none; }
.setting-field[hidden] { display: none; }
.setting-about { min-width: 0; }
.setting-field .setting-label-row { margin: 0 0 var(--space-xs); line-height: 1.3; }
.setting-about > .setting-label-row { margin: 0; }
.setting-field .setting-label { display: inline; margin: 0; font-weight: 700; }
.setting-about > .field-help { margin: var(--space-xs) 0 0; }
.setting-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.setting-control > * { min-width: 0; }
.setting-control > :is(.field-help, .setting-pending, .setting-problem, .field-check) { margin: 0; }
.setting-field > .setting-control:has(> :is(.switch, .mk-checkbox):only-child) { flex: 0 0 auto; margin-left: auto; }
/* A hand-written field: its name, then its control. */
.setting-field > .setting-label-row + :is(.field-help) { margin-bottom: var(--space-sm); }
.setting-choices .check-line { display: inline-flex; gap: 0.3em; align-items: center; margin: 0.2em 1.2em 0.2em 0; font-weight: 400; }
.setting-field input, .setting-field select, .setting-field textarea { max-width: 100%; }
.setting-field textarea { width: 100%; font-family: ui-monospace, monospace; }
@media (max-width: 640px) {
  .setting-field:has(> .setting-about) > :is(.setting-about, .setting-control) { flex-basis: 100%; max-width: none; }
  .setting-field > .setting-control:has(> :is(.switch, .mk-checkbox):only-child) { margin-left: 0; }
}
/* The admin settings page's tabs: a row of plain links. On a phone the row
   scrolls sideways inside itself rather than widening the page. */
.tab-bar { position: relative; display: flex; gap: var(--space-xs); overflow-x: auto; margin: var(--space-md) 0 var(--space-lg); border-bottom: 1px solid var(--line); }
.tab-bar a { flex: none; white-space: nowrap; padding: var(--space-sm) var(--space-md); color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.tab-bar a:hover { color: var(--accent-text); }
.tab-bar a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--tab-current); }
.tab-marker { color: var(--tab-marker); margin-left: 0.35em; font-size: var(--text-xs); }
/* A settings card: a group of settings, saved together. One with unsaved
   changes (with JavaScript) or that a save refused takes the thin edge's
   colour, never a thicker edge. */
.settings-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); margin: 0 0 var(--space-lg); scroll-margin: var(--space-lg) 0 6rem; min-width: 0; }
.settings-card.is-dirty { border-color: var(--card-changed); }
.settings-card.is-failed { border-color: var(--card-failed); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--card-border); }
.card-head h3 { margin: 0; font-size: var(--text-lg); }
.card-spacer { flex: 1; }
.card-meta { font-size: var(--text-sm); color: var(--muted); }
.card-state { display: contents; }
.card-head .card-discard { margin: 0; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: 600; }
.card-discard[hidden] { display: none; }
.card-body { padding: var(--space-lg); min-width: 0; }
.card-body > .hint:first-child { margin-top: 0; margin-bottom: var(--space-lg); }
.card-body > p.error[role="alert"] { margin: 0 0 var(--space-lg); }
/* A part of a card (Coingecko, Visitors): a small-caps heading over a rule,
   unlike a setting's name, which is plain bold. */
.card-body > h4 { margin: var(--space-xl) 0 var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--card-border); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card-body > h4:first-child, .card-body > .hint:first-child + h4 { margin-top: 0; padding-top: 0; border-top: 0; }
.card-body > h4 + .hint { margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); }
.owner-chip { font-size: var(--text-xs); font-weight: 700; letter-spacing: normal; text-transform: capitalize; color: var(--muted); border: 1px solid var(--card-border); border-radius: 999px; padding: var(--pill-pad-y) var(--pill-pad-x); }
.badge { font-size: var(--text-xs); font-weight: 700; border-radius: 999px; padding: var(--pill-pad-y) var(--pill-pad-x); white-space: nowrap; color: var(--ink); }
.badge-unsaved { background: var(--tint-highlight); }
.badge-error { background: var(--tint-error); }
.badge-warning { background: var(--tint-warning); }
/* "changed" beside a setting the admin has edited (shown by the script). */
.changed-mark { display: none; margin-left: var(--space-xs); font-size: var(--text-xs); font-weight: 700; color: var(--card-changed); }
.setting-field.is-changed .changed-mark { display: inline; }
.setting-field.is-changed input:not([disabled]), .setting-field.is-changed select, .setting-field.is-changed textarea { border-color: var(--card-changed); }
/* The bar at the bottom of the window that saves the page's settings.
   Without JavaScript it's always there; with the component defined, only
   while something changed or a save refused a card. */
.save-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--save-bar-bg); border-top: 3px solid var(--save-bar-rule); padding-bottom: env(safe-area-inset-bottom, 0px); }
.save-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding-top: var(--space-md); padding-bottom: var(--space-md); }
/* Room under the last card for the bar, which is always there without
   JavaScript. */
body:has(.save-bar) { padding-bottom: 9rem; }
/* And a control scrolled to (by Tab, or a link to it) stops above the bar,
   not under it. */
html:has(.save-bar) { scroll-padding-bottom: 7rem; }
.save-bar.is-failed { border-top-color: var(--card-failed); }
.save-bar.is-leaving { border-top-color: var(--warning); }
.save-bar-message { flex: 1 1 16rem; min-width: 0; margin: 0; }
.save-bar-message:focus { outline: none; }
.save-bar-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.save-bar-actions[hidden] { display: none; }
.save-bar [data-save][aria-busy="true"] { display: inline-flex; align-items: center; gap: .5em; }
.save-bar [data-save][aria-busy="true"]::before { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: save-spin .8s linear infinite; }
@keyframes save-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .save-bar [data-save][aria-busy="true"]::before { animation: none; }
}
/* Once its island attaches: nothing to save or say, out of sight. */
.save-bar[data-idle] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .save-bar.is-dirty, .save-bar.is-leaving { animation: save-bar-in 0.18s ease-out; }
}
@keyframes save-bar-in { from { transform: translateY(100%); } to { transform: none; } }
/* The toast a save leaves, in the corner. Without JavaScript every toast
   fades by itself; with it, one saying something wasn't saved stays until
   it's closed. */
.toasts { position: fixed; top: 4.5rem; right: var(--space-lg); z-index: 20; display: grid; gap: var(--space-sm); width: min(24rem, calc(100% - 2 * var(--space-lg))); pointer-events: none; }
.toast { pointer-events: auto; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); align-items: start; background: var(--toast-bg); border: 1px solid var(--success); border-radius: var(--radius-md); box-shadow: 0 6px 24px var(--toast-shadow); padding: var(--space-md); font-size: var(--text-sm); animation: toast-in 0.22s ease-out, toast-out 0.3s ease-in 6s forwards; }
.toast-warning { border-color: var(--warning); animation: toast-in 0.22s ease-out, toast-out 0.3s ease-in 10s forwards; }
.toast-error { border-color: var(--error); animation: toast-in 0.22s ease-out, toast-out 0.3s ease-in 12s forwards; }
.toast-neutral { border-color: var(--line-strong); }
html.js .toast-error { animation: toast-in 0.22s ease-out; }
.toast.is-closing { animation: toast-out 0.25s ease-in forwards; }
.toast-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; }
.toast-icon .mk-icon { display: block; width: 100%; height: 100%; }
.toast-success .toast-icon { color: var(--success); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-error .toast-icon { color: var(--error); }
.toast-text { display: grid; gap: 0.15em; min-width: 0; overflow-wrap: anywhere; }
.toast-show { justify-self: start; font-size: var(--text-sm); }
.toasts .toast-close { margin: 0; padding: 0 var(--space-xs); border: 0; background: none; color: var(--muted); font-size: var(--text-lg); line-height: 1; }
@keyframes toast-in { from { transform: translateY(-0.6rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-0.4rem); opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast-warning, .toast-error, .toast.is-closing { animation-duration: 0.01s; }
}

/* Opaque status surfaces with the same thin border on every side. */
.toast-success { border: 1px solid var(--success); background: var(--tint-success); padding: var(--space-md); }

.toast:focus-within, .toast:hover { animation-play-state: paused; }
/* Embedded review and composition: reserve viewport positioning for page use. */
.save-bar[data-placement="inline"] { animation: none; position: static; padding: var(--space-md); }
body:has(.save-bar):not(:has(.save-bar:not([data-placement="inline"]))) { padding-bottom: 0; }
.toast[data-persistent] { animation: none; }
.settings-card[hidden] { display: none; }

.toast-warning { background: var(--tint-warning); }
.toast-error { background: var(--tint-error); }
.toast-neutral { background: var(--tint-neutral); }

/* On a phone the bar is its two buttons: what was edited is left out, until
   a save fails and it says why. */
@media (max-width: 640px) {
  .save-bar:not(.is-failed) .save-bar-message { display: none; }
  .save-bar-actions { flex: 1; justify-content: flex-end; }
}

/* Shared compositions; behaviour belongs to native HTML or the owning application. */

.mk-mono { font-family: var(--font-mono); }
.mk-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


.mk-tabs { display: flex; gap: var(--space-xs); overflow-x: auto; border-bottom: 1px solid var(--line); }
.mk-tabs > :is(a, button) { flex: none; margin: 0; padding: var(--space-sm) var(--space-md); font: inherit; color: var(--ink); text-decoration: none; background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; }
.mk-tabs > :is([aria-current="page"], [aria-selected="true"]) { border-bottom-color: var(--tab-current); font-weight: 700; }
.mk-tabs > :is(a, button):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mk-tab-count { margin-left: var(--space-xs); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.mk-tab-panels > section { padding-block: var(--space-lg); scroll-margin-top: var(--space-lg); }

.mk-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-width: 0; }
.mk-copy-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.mk-copy-value:focus { white-space: normal; overflow-wrap: anywhere; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mk-copy-status:empty { display: none; }
.mk-copy-status { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-sm); }
.mk-table-scroll { max-width: 100%; overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; text-align: start; font-size: var(--text-sm); }
.mk-table :is(th, td) { padding: var(--space-md); border-bottom: 1px solid var(--line); text-align: start; }
.mk-table th { background: var(--table-head-bg); color: var(--table-head-ink); }
.mk-table caption { text-align: start; font-weight: 700; margin-bottom: var(--space-sm); }
/* Explicit gaps work in a table cell as well as a standalone section. */

.mk-copy [hidden], .mk-tabset [hidden] { display: none; }

.mk-table thead th { border-bottom: 2px solid var(--line-strong); }
.mk-table tbody :is(th, td) { background: var(--paper-raised); }
.mk-table tbody tr:nth-child(even) > :is(th, td) { background: var(--surface-sunken); }
.mk-table :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--line-strong); }
.mk-table tbody tr:hover > :is(th, td) { background: var(--tint-highlight); }

.mk-copy > :is(.mk-copy-value, .mk-copy-preview) { grid-column: 1; grid-row: 1; }
.mk-copy > .mk-btn { grid-column: 2; grid-row: 1; }
.mk-copy-preview { user-select: none; cursor: text; min-width: 0; overflow-wrap: anywhere; }
/* Shortened (the behaviour drew a preview): the whole value stays for
   focus, selection and copying, out of sight until focused. */
.mk-copy:has(> .mk-copy-preview) > .mk-copy-value:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.mk-copy > .mk-copy-value:focus ~ .mk-copy-preview { display: none; }


/* Lines to copy (CopyBlock): the Copy button over the top right corner. */
.mk-copy-block { position: relative; min-width: 0; }
.mk-copy-block > pre { margin: 0; padding: var(--space-md) var(--space-lg); padding-right: 6rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); font: var(--text-sm)/1.6 var(--font-mono); }
.mk-copy-block > pre > code { border: 0; padding: 0; background: none; font: inherit; }
.mk-copy-block > .mk-btn { position: absolute; top: var(--space-sm); right: var(--space-sm); }
@media (max-width: 520px) { .mk-copy-block > pre { padding: 2.8rem var(--space-md) var(--space-md); } }
/* One view of a few (SegmentedControl): the pressed one underlined. */
.mk-segmented { display: flex; flex-wrap: wrap; gap: var(--space-lg); border-bottom: 2px solid var(--line); }
.mk-segmented > .mk-btn { min-height: 0; padding: 0 0 var(--space-xs); margin-bottom: -2px; border: 0; border-bottom: 4px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: var(--text-sm); font-weight: 800; }
.mk-segmented > .mk-btn:hover { background: none; color: var(--ink); }
.mk-segmented > .mk-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--tab-current); }

/* Native SVG plots and status headings extracted from live monitoring. */
.resource-chart { display: block; width: 100%; height: 5rem; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.chart-layer.chart-engine { fill: var(--chart-engine); }
.chart-layer.chart-monokulo { fill: var(--chart-monokulo); }
.chart-limit { stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-limit.chart-engine { stroke: var(--chart-engine); }
.chart-limit.chart-monokulo { stroke: var(--chart-monokulo); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-xs) 0; }
.chart-swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; margin-right: 0.35em; vertical-align: -0.05em; }
.chart-swatch.chart-engine { background: var(--chart-engine); }
.chart-swatch.chart-monokulo { background: var(--chart-monokulo); }
.sparkline { width: 4rem; height: 1rem; vertical-align: middle; fill: none; stroke: var(--chart-engine); stroke-width: 1.5; }
.sparkline polyline { vector-effect: non-scaling-stroke; }
.sparkline circle { fill: var(--chart-engine); stroke: none; }
.net-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); }
.net-head h2 { margin: 0; padding: 0; border: 0; font-size: var(--text-xl); font-weight: 800; }
/* States side by side beside the title: a dot between them. */
.net-head > .mk-status-text + .mk-status-text::before { content: "·"; margin-right: var(--space-md); color: var(--muted); }
.net-head > .mk-btn { margin: 0 0 0 auto; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
[data-net-card] h3.caps { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
[data-net-card] > .net-head + h3.caps { margin-top: 0; }
[data-net-card] .line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: var(--space-xs) 0; }


/* A page's column, and the bar's row lined up with it. */
.wrap { max-width: 880px; margin: 0 auto; padding: 0 1.2rem; }
.site-nav[data-width="wide"] .wrap { max-width: 1120px; }
.site-nav { background: var(--chrome-bg); color: var(--chrome-ink); border-bottom: 3px solid var(--chrome-rule); }
.site-nav-row {
  display: flex;
  align-items: center;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  /* One height signed in or out, whatever the bar holds: its tallest
     control (the 2em status target and account button) plus the padding. */
  min-height: calc(2em + 1.4rem);
  flex-wrap: wrap;
  position: relative;
}
/* The brand on the left; everything after it on the right. */
.site-nav-brand { margin-right: auto; color: var(--chrome-ink); text-decoration: none; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0.45em; }
/* The logo mark (`views::logo_mark`): its lines are `currentColor`, so the
   one inline SVG suits either theme's bar; its facets are the `--logo-*` roles. */
.site-nav-logo { display: block; }
.logo-mark { flex: none; }
.site-nav-links { display: flex; align-items: center; flex-wrap: wrap; }
.site-nav-links a {
  color: var(--chrome-ink);
  margin: 0 0 0 1.2em;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
  text-decoration: none;
}
.site-nav-links a[aria-current="page"] { color: var(--accent-text); }
.site-nav-links a:hover { color: var(--accent-text); background: none; text-decoration: underline; text-decoration-thickness: 1px; }
.site-nav-links .nav-theme-form { margin: 0; display: inline; }
/* The status dot's link: a 2em box round the dot, and a transparent
   ::before that makes the target at least 44px square. */
.nav-status-link { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 2em; height: 2em; border-radius: 50%; text-decoration: none !important; }
.nav-status-link::before { content: ""; position: absolute; inset: min(0px, calc((2em - 44px) / 2)); }
.nav-status-link:hover { background: var(--surface-sunken); }
/* The dot is in the bar itself, not the link list, so a phone shows it
   beside the hamburger. On a wider screen the list's items join the bar,
   and the dot goes between the links and the account menu. */
@media (min-width: 641px) {
  .site-nav-links { display: contents; }
  .site-nav-links > * { order: 1; }
  .site-nav-row > .nav-status-link { order: 2; margin-left: 1.2em; }
  .site-nav-links > .acct { order: 3; }
}
/* The account menu (`views::account_menu`): a <details>, so it opens
   without JavaScript. */
.acct { position: relative; margin-left: 1.2em; }
/* The account button: a person icon in a 2em circle (the bar's height
   stays the same), with a 44px target like the status dot's. */
.acct > summary { position: relative; display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--chrome-ink); }
.acct > summary::before { content: ""; position: absolute; inset: min(0px, calc((2em - 44px) / 2)); }
.acct > summary:hover, .acct[open] > summary { border-color: var(--ink); background: var(--btn-hover-bg); }
.acct > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.acct-icon { width: 1.15em; height: 1.15em; display: block; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: 17rem; padding: var(--space-xs); background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 6px 24px var(--popup-shadow); }
.acct-who { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); margin-bottom: var(--space-xs); overflow-wrap: anywhere; }
.acct-who small { display: block; color: var(--muted); }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-weight: 500; color: var(--ink); text-align: left; text-decoration: none; }
:is(a, button).menu-item:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.menu-note { color: var(--muted); font-size: var(--text-sm); }
.acct-menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-xs) 0; }
.acct-menu .theme-toggle { margin: 0; }
.menu-form { display: block; margin: 0; }
button.menu-item { border: 0; background: none; font: inherit; cursor: pointer; }
/* Three form buttons make each theme a direct target. Their sibling hover
   rules preview the indicator position without JavaScript. */
.theme-toggle {
  width: max-content;
  margin: 0 0 0 1.2em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-raised);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 5em;
  height: 2em;
  padding-inline: 0.25em;
}
.theme-toggle-option, .theme-toggle-option:hover {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 33.333%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.theme-toggle-option svg { width: 1em; height: 1em; display: block; }
.theme-toggle-option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 999px; }
.theme-toggle-system .theme-toggle-option-system,
.theme-toggle-light .theme-toggle-option-light,
.theme-toggle-dark .theme-toggle-option-dark,
.theme-toggle-option-system:hover,
.theme-toggle-option-light:hover,
.theme-toggle-option-dark:hover,
.theme-toggle-option-system:focus-visible,
.theme-toggle-option-light:focus-visible,
.theme-toggle-option-dark:focus-visible { color: var(--accent-ink); }
.theme-toggle:has(.theme-toggle-option:is(:hover, :focus-visible)) .theme-toggle-option { color: var(--muted); }
.theme-toggle:has(.theme-toggle-option:is(:hover, :focus-visible)) .theme-toggle-option:is(:hover, :focus-visible) { color: var(--accent-ink); }
.theme-toggle-thumb {
  position: absolute;
  top: 0.25em;
  width: 1.5em;
  height: 1.5em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
  transition: left 0.28s ease;
}
/* Match the visible System, Light, Dark order and center on each icon. */
.theme-toggle-system .theme-toggle-thumb,
.theme-toggle-option-system:is(:hover, :focus-visible) ~ .theme-toggle-thumb {
  left: 1em;
}
.theme-toggle-light .theme-toggle-thumb,
.theme-toggle-option-light:is(:hover, :focus-visible) ~ .theme-toggle-thumb {
  left: 50%;
}
.theme-toggle-dark .theme-toggle-thumb,
.theme-toggle-option-dark:is(:hover, :focus-visible) ~ .theme-toggle-thumb {
  left: calc(100% - 1em);
}
/* A page that opts into cross-document view transitions (monokulo's
   site.css) carries the indicator to its new place after the theme form
   navigates. */
.theme-toggle-thumb { view-transition-name: theme-indicator; }
::view-transition-group(theme-indicator) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-thumb { transition: none; }
  ::view-transition-group(theme-indicator) { animation-duration: 0.01ms; }
}
.nav-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; color: var(--chrome-ink); font-size: var(--text-xl); line-height: 1; cursor: pointer; user-select: none; }
/* No-JS-required small-screen menu: below the breakpoint, the link group
   wraps onto its own full-width row (the honest "progressive enhancement"
   fallback) *and* starts collapsed behind the checkbox-driven hamburger -
   pure CSS, nothing here depends on JS running at all. */
@media (max-width: 640px) {
  .nav-toggle-label { display: block; }
  .site-nav-links {
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6em;
    margin-top: 0.6em;
  }
  .site-nav-links a, .theme-toggle { margin-left: 0; }
  .nav-toggle-checkbox:checked ~ .site-nav-links { display: flex; }
  /* The account menu's items join the list, each row at least 44px. A
     browser that can't show a closed <details>'s content keeps the
     account button, which opens them in place. */
  .site-nav-links { align-items: stretch; gap: 0; border-top: 1px solid var(--line); }
  .site-nav-links > a, .site-nav-links .acct-menu .menu-item { display: flex; align-items: center; min-height: 44px; }
  .site-nav-links > a { border-bottom: 1px solid var(--line); }
  /* The status dot stays in the bar, left of the hamburger. */
  .site-nav-row > .nav-status-link { margin-right: var(--space-sm); }
  /* Only in the site's list: elsewhere (the POS's bar) the menu stays a
     menu. */
  .site-nav-links .acct { margin-left: 0; }
  .site-nav-links .acct > summary { margin: var(--space-sm) 0; }
  .site-nav-links .acct-menu { position: static; width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: inherit; }
  .site-nav-links .acct-who { padding-left: 0; padding-right: 0; }
  .site-nav-links .acct-menu .menu-item { padding: 0; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--chrome-ink); font-weight: 600; }
  .site-nav-links .acct-menu hr { display: none; }
  @supports selector(::details-content) {
    .site-nav-links .acct > summary { display: none; }
    .site-nav-links .acct::details-content { content-visibility: visible; display: contents; }
  }
}
.status-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--muted);
}
.status-dot-ok { background: var(--success); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--success) 75%, transparent); animation: status-pulse 2s ease-in-out infinite; }
.status-dot-error { background: var(--error); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--error) 75%, transparent); animation: status-pulse 1.2s ease-in-out infinite; }
.status-dot-slow { background: var(--warning); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--warning) 75%, transparent); animation: status-pulse 1.2s ease-in-out infinite; }
.status-dot-unknown { background: var(--muted); box-shadow: none; animation: none; }
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}