/* cmgpanel dashboard. Mobile first: the base rules fit a 375 px screen, and wider
   layouts only appear inside min-width media queries. Colours are variables, set
   again for the dark scheme; the charts read them too. Text colours keep a WCAG AA
   contrast (4.5:1) on --bg, --surface and --surface-2, and on their own -bg tints;
   tests/test_contrast.py checks them. */

:root {
  color-scheme: light dark;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --text: #131a22;
  --muted: #586271;
  --border: #dde3ea;
  --border-strong: #7b8594;
  --accent: #1d5fc4;
  --accent-text: #ffffff;
  --accent-soft: #e9f0fb;
  --danger: #b42318;
  --danger-bg: #fdeeec;
  --danger-text: #ffffff;
  --warn: #8a5200;
  --warn-bg: #fff3d9;
  --ok: #147a3a;
  --ok-bg: #e6f4eb;
  --chart-balance: #2a78d6;
  --chart-equity: #eb6834;
  --chart-net: #2a78d6;
  --shadow: 0 1px 2px rgb(16 24 40 / 5%);
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --gap: 1rem;
  --tap: 2.75rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1015;
    --surface: #151a21;
    --surface-2: #1b2129;
    --text: #e5eaf0;
    --muted: #98a3b1;
    --border: #29313b;
    --border-strong: #677384;
    --accent: #7aa9f7;
    --accent-text: #0a1424;
    --accent-soft: #1a2a42;
    --danger: #ff8a80;
    --danger-bg: #3b1b1a;
    --danger-text: #1f0a08;
    --warn: #e8b54a;
    --warn-bg: #33290f;
    --ok: #5ccf8a;
    --ok-bg: #11301e;
    --chart-balance: #3987e5;
    --chart-equity: #d95926;
    --chart-net: #3987e5;
    --shadow: none;
  }
}

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

/* Keyboard focus never lands under the sticky navigation. */
html {
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h1 {
  margin-top: 0.25rem;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.0625rem;
}

h3 {
  font-size: 1rem;
}

/* Headings of a group of cards read as small labels above them. */
.section > h2 {
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

p {
  margin: 0 0 0.5rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

code {
  font-family: var(--mono);
  font-size: 0.9375em;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* Icons come from the sprite at the top of every page and take the text colour. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keyboard users can jump over the navigation; the link shows when it has the focus. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Header and navigation. On a phone the brand row scrolls away and the row of
   pages stays at the top, scrolling sideways inside itself. */

.site-header {
  position: sticky;
  top: calc(var(--tap) * -1);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  margin: 0 var(--gap);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
}

.brand-mark .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.25;
}

.site-nav {
  flex: 1 1 100%;
  min-width: 0;
}

.nav-list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0 var(--gap) 0.375rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gap);
  scrollbar-width: none;
}

.nav-list::-webkit-scrollbar {
  display: none;
}

.nav-list > li {
  flex: none;
}

.nav-form {
  margin: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  /* Where supported, the row opens scrolled to the current page. */
  scroll-initial-target: nearest;
}

/* Page */

.page {
  padding: var(--gap) var(--gap) calc(var(--gap) * 2);
}

.card {
  margin: 0 0 var(--gap);
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section {
  margin: 0 0 1.5rem;
}

.stack {
  display: grid;
  gap: 0.75rem;
}

.stack > :is(h2, h3, p),
.card > :last-child {
  margin-bottom: 0;
}

label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.stack > label + input {
  margin-top: -0.375rem;
}

input,
select,
button {
  font: inherit;
}

input[type="password"],
input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
select {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

input:focus-visible,
select:focus-visible {
  outline-offset: 1px;
  border-color: var(--accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--text));
}

.button-secondary {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--accent);
}

.button-secondary:hover {
  background: var(--accent-soft);
}

.button-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--danger-text);
}

.button-danger:hover {
  background: color-mix(in srgb, var(--danger) 88%, var(--text));
}

.button-danger-outline {
  border-color: var(--danger);
  background: var(--surface);
  color: var(--danger);
}

.button-danger-outline:hover {
  background: var(--danger-bg);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.message {
  margin: 0 0 0.75rem;
}

.message-error {
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
}

/* What became of a command or a change of trading. */
.command,
.callout {
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-left: 0.25rem solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.command .message,
.callout .message {
  margin: 0;
}

/* A section with nothing to show yet. */
.empty {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--gap);
  padding: 0.875rem var(--gap);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
}

.card .empty:not(:last-child) {
  margin-bottom: 0.75rem;
}

.error-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0.75rem;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
}

/* The notice stays in view at the bottom while the page scrolls, but takes its own
   place after the content, so the end of the page can always scroll clear of it. */
.notice {
  position: sticky;
  bottom: var(--gap);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 var(--gap) var(--gap);
  padding: 0.5rem 0.5rem 0.5rem var(--gap);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 20%);
}

.notice[hidden] {
  display: none;
}

.notice-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.notice-dismiss {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 0.75rem;
  border: 1px solid currentcolor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}

.badge {
  display: inline-block;
  padding: 0 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.0625rem;
}

/* Amounts and states. The text always says it too: signs, words, labels. */

.positive,
.ok {
  color: var(--ok);
}

.negative,
.bad {
  color: var(--danger);
}

.warn {
  color: var(--warn);
}

/* Status: a coloured edge on the card and a pill with an icon and the words. */

.status-card {
  border-left: 0.25rem solid var(--border-strong);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.625rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.status-hint {
  margin: 0 0 0.25rem;
}

.status-card .muted {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.tone-ok {
  border-left-color: var(--ok);
}

.tone-ok .status-line {
  background: var(--ok-bg);
  color: var(--ok);
}

.tone-warn {
  border-left-color: var(--warn);
}

.tone-warn .status-line {
  background: var(--warn-bg);
  color: var(--warn);
}

.tone-bad {
  border-left-color: var(--danger);
}

.tone-bad .status-line {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Figures: the key ones large and first, two to a row on a phone; the others
   smaller, three to a row, under a rule. */

.figures {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem 0;
  margin: 0;
}

.figure {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-width: 0;
  padding-right: 0.75rem;
}

.figure dt {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.figure dd {
  margin: auto 0 0;
  padding-top: 0.125rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.figure-key {
  grid-column: span 3;
  order: -1;
}

.figure-key dd {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.figure-key ~ .figure:not(.figure-key) {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.figures + p {
  margin-top: 0.75rem;
}

.figures-empty dd {
  color: var(--muted);
}

.pairs {
  display: grid;
  gap: 0.375rem;
  margin: 0;
}

.pair {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 0.75rem;
}

.pair dt {
  color: var(--muted);
}

.pair dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.cards {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 var(--gap);
  padding: 0;
  list-style: none;
}

.cards > .card {
  margin: 0;
}

/* Event lists */

.events {
  margin: 0 0 var(--gap);
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.event {
  padding: 0.625rem var(--gap);
  border-bottom: 1px solid var(--border);
}

.event:last-child {
  border-bottom: 0;
}

.event-meta {
  margin: 0 0 0.125rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.event-detail,
.event .message {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.level-warn .badge {
  border-color: var(--warn);
  color: var(--warn);
}

.level-error .badge {
  border-color: var(--danger);
  color: var(--danger);
}

/* Filters: two to a row on a phone in the trades and activity forms. */

.filters {
  display: grid;
  gap: 0.75rem;
}

form.card.filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* An odd last choice takes the whole row, so the two dates sit side by side. */
form.card.filters > .field:has(> select):nth-child(odd):not(:has(~ .field > select)) {
  grid-column: 1 / -1;
}

.field {
  display: grid;
  gap: 0.25rem;
  align-content: start;
}

.filters-note {
  margin: 0;
  font-size: 0.875rem;
}

.filters-note,
.filters .actions {
  grid-column: 1 / -1;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--gap);
}

/* Charts: uPlot draws inside .chart at the width of the box. */

.chart-figure {
  margin: 0 0 var(--gap);
}

.chart-figure figcaption {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.chart {
  width: 100%;
  min-height: 14rem;
}

.chart-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
  margin: 0;
  padding: var(--gap);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
}

.chart .u-legend {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.chart .u-legend th {
  font-weight: 500;
}

/* Backtests */

.job-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  overflow-wrap: anywhere;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  font-weight: 400;
}

.files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.log {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Settings */

.summary-text, .summary-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The overview shows the start of the latest summary; its page has the rest. */
#latest-summary .summary-preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9375rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.summary-figures {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.summary-figures dt {
  color: var(--muted);
}

.summary-figures dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.params {
  margin: 0;
  padding: 0;
  list-style: none;
}

.param {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.param:last-child {
  border-bottom: 0;
}

.param-name {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.param-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.param-allowed,
.param-role {
  color: var(--muted);
  font-size: 0.875rem;
}

.flag {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Tables: wide content scrolls sideways inside its own box, never the page, and
   the first column stays in view while it does. */

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.table-wrap > table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}

.table-wrap th,
.table-wrap td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.table-wrap thead th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-wrap tbody tr:last-child > * {
  border-bottom: 0;
}

.table-wrap tbody tr:hover > * {
  background: var(--surface-2);
}

.table-wrap tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--border);
}

.table-wrap thead tr > :first-child {
  background: var(--surface-2);
}

.table-wrap th.number,
.table-wrap td.number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The figure names of a comparison wrap, so two runs fit beside them on a phone. */
.compare th[scope="row"] {
  min-width: 7.5rem;
  white-space: normal;
}

/* Settings forms and Optimisation */

.edit summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.attention {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-left: 0.25rem solid var(--accent);
}

.attention-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention-link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.attention-link.bad {
  color: var(--danger);
}

.attention-list li + li {
  border-top: 1px solid var(--border);
}

.run-details {
  margin: 0;
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}

.run-details li + li {
  margin-top: 0.375rem;
}

.tap-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  overflow-wrap: anywhere;
}

.links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.run-message {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.check-item:last-child {
  border-bottom: 0;
}

.check-actual {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.badge.ok {
  border-color: var(--ok);
  color: var(--ok);
}

.badge.bad {
  border-color: var(--danger);
  color: var(--danger);
}

td.wrap {
  min-width: 10rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.alert {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Scores of an optimisation: darker is better; the candidate is outlined, its plateau dotted. */

.compare-two {
  font-size: 0.875rem;
}

.compare-two th,
.compare-two td {
  padding: 0.375rem;
}

.compare-two th[scope="row"] {
  min-width: 5.5rem;
}

.heatmap caption {
  padding-bottom: 0.375rem;
  color: var(--muted);
  text-align: left;
}

.heatmap {
  font-size: 0.875rem;
}

.heatmap th,
.heatmap td {
  padding: 0.375rem 0.25rem;
}

.heat {
  min-width: 2.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.heat-none,
.heat-zero {
  color: var(--muted);
}

.heat-0 { background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.heat-1 { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.heat-2 { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.heat-3 { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
.heat-4 { background: color-mix(in srgb, var(--ok) 23%, var(--surface)); }
.heat-5 { background: color-mix(in srgb, var(--ok) 28%, var(--surface)); }
.heat-6 { background: color-mix(in srgb, var(--ok) 33%, var(--surface)); }
.heat-7 { background: color-mix(in srgb, var(--ok) 38%, var(--surface)); }
.heat-8 { background: color-mix(in srgb, var(--ok) 44%, var(--surface)); }
.heat-9 { background: color-mix(in srgb, var(--ok) 50%, var(--surface)); }

.heat-candidate {
  outline: 2px solid var(--text);
  outline-offset: -2px;
  font-weight: 700;
}

.heat-neighbour {
  outline: 1px dashed var(--text);
  outline-offset: -3px;
}

@media (min-width: 48rem) {
  .site-header {
    top: 0;
    flex-wrap: nowrap;
    padding-right: var(--gap);
  }

  .site-nav {
    flex: 1 1 auto;
  }

  .nav-list {
    flex-wrap: wrap;
    padding: 0.375rem 0;
    overflow-x: visible;
  }

  html {
    scroll-padding-top: 5rem;
  }

  .page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
  }

  .card {
    padding: 1.25rem;
  }

  .card-narrow {
    max-width: 28rem;
    margin: 2.5rem auto var(--gap);
    padding: 1.75rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  /* Overview: status beside the account, the lists below both. */
  .live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0 var(--gap);
  }

  .live > .section {
    grid-column: 1 / -1;
  }

  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .figure,
  .figure-key {
    grid-column: auto;
  }

  .figure-key dd {
    font-size: 1.75rem;
  }

  .cards {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }

  .filters,
  form.card.filters {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    align-items: end;
  }

  form.card.filters > .field:has(> select):nth-child(odd):not(:has(~ .field > select)) {
    grid-column: auto;
  }
}