/* cs live monitor: the read-only page. Visual spec: docs/monitor-design.md (neutral page, a 1280px column between two
   hairline rails, white cards with a 1px ring, 400/500 weights, blue only for what is clickable or "on").
   No inline styles anywhere (CSP style-src 'self'); runtime sizes and series colors go through the CSSOM.

   Colour checks (2026-11-13; dataviz validate_palette.js and its contrast(), WCAG 2 ratios):
   - Books, light, on #ffffff: #317cff #f58e3a #956cde #1baf9a: band, chroma, CVD (worst adjacent ΔE 15.5 deutan),
     normal vision (25.3) PASS; contrast WARN: #f58e3a 2.38, #1baf9a 2.75 (< 3:1), so a book colour is only ever a
     mark next to the book's name, and every chart has a table view.
   - Books, dark, on #1c1c1c: #3d82f5 #d9772e #8c6bd6 #199e8a: all PASS (worst adjacent ΔE 14.1 deutan, normal 23.0).
   - Up/down fills, light on #ffffff: #00a558/#f53b3a: band, chroma, contrast, normal vision (34.5) PASS; CVD FAIL
     (ΔE 5.6 deutan), as any green/red pair: values always carry + / − and 多/空, and the setting offers blue/red,
     #317cff/#f53b3a, which PASSES (ΔE 28.8 protan).
   - Up/down fills, dark on #1c1c1c: the spec's #1fb86a/#ff5a55 (OKLCH L 0.690/0.688) and #5b95ff (0.681) fall just
     above the dark band (≤ 0.67), so the fills are the same hue and chroma at L 0.665: #08b063, #f7524e, #5690fa ->
     band, chroma, contrast PASS; green/red CVD FAIL (ΔE 4.4, same relief as above); #5690fa/#f7524e PASS (ΔE 25.4).
     The spec values stay as the dark text steps (below).
   - Text, light (on #ffffff / #fcfcfc / #f8f8f8): --ink 17.58 / 17.14 / 16.56; --ink-2 (= #707070 on white) 4.95 /
     4.90 / 4.80; --ink-3 2.88 (axes, units, time stamps only, never body text); up #008136 5.01 / 4.88 (4.59 on the
     hover row #f5f5f5); down #dd1b24 4.93 / 4.81 (4.53); blue-up #1d69ea 4.93 / 4.80 (4.52); link #1e6aec 4.85 /
     4.73 (#317cff itself is 3.85, so it stays the focus ring, switch and selection colour, not link text).
   - Text, dark (on #1c1c1c / #141414 / #191919): --ink 14.56 / 15.74 / 15.02; --ink-2 (= #a6a6a6) 7.00 / 7.30 /
     7.14; --ink-3 4.08; up #1fb86a 6.59 / 7.13; down #ff5a55 5.56 / 6.01; blue-up and link #5b95ff 5.83 / 6.31
     (on the hover row #2a2a2a: 5.55 / 4.68 / 4.91).
   - Status text on its own 12 % chip wash, over a card | over a hovered row. Light: good #007530 5.10 | 4.71;
     warning #a05900 4.92 | 4.54; serious #b83f00 4.87 | 4.52; critical #c8141b 4.93 | 4.56. Dark: good #1fb86a
     5.70 | 4.76; warning #f5a524 6.70 | 5.57; serious #f4874e 5.90 | 4.99; critical #ff6d68 5.61 | 4.78.
   - Buttons: #ffffff on --btn #363636 12.08; #141414 on #ededed 15.74. Calendar: --ink on the strongest step (38 %)
     light 11.35 up / 10.36 down, dark 7.62 / 8.32. */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;
  --page: #fcfcfc;
  --wash: #f8f8f8;
  --card: #ffffff;
  --ink: #191919;
  --ink-2: rgba(25, 25, 25, 0.62);
  --ink-3: rgba(25, 25, 25, 0.45);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.06);
  --line-3: rgba(0, 0, 0, 0.16); /* dashed outlines and switch tracks only */
  --tint: rgba(0, 0, 0, 0.04);
  --hover: #f5f5f5; /* --tint on a card, opaque (sticky table cells) */
  --accent: #317cff;
  --accent-text: #1e6aec;
  --btn: #363636;
  --btn-hover: #191919;
  --btn-ink: #ffffff;
  --shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-pop: 0 0 0 1px var(--line), 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --topbar: rgba(252, 252, 252, 0.92);

  /* the four books, in config.live.json order */
  --slot-1: #317cff;
  --slot-2: #f58e3a;
  --slot-3: #956cde;
  --slot-4: #1baf9a;

  /* the cumulative chart: the real P&L in ink, the virtual one de-emphasised */
  --real-line: var(--ink);
  --virtual-line: var(--ink-3);

  --green-fill: #00a558;
  --red-fill: #f53b3a;
  --blue-fill: #317cff;
  --green-text: #008136;
  --red-text: #dd1b24;
  --blue-text: #1d69ea;

  /* status: separate from the book colours, always with an icon and a word */
  --good: #00a558;
  --warning: #f5a524;
  --serious: #e5641f;
  --critical: #e5322f;
  --good-text: #007530;
  --warning-text: #a05900;
  --serious-text: #b83f00;
  --critical-text: #c8141b;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --r-sm: 6px;
  --r: 10px;
  --col: 1280px;
  --gut: 24px;
}

/* dark: the OS setting unless the viewer picked light, or the viewer picked dark (two copies of one list) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #141414;
    --wash: #191919;
    --card: #1c1c1c;
    --ink: #ededed;
    --ink-2: rgba(237, 237, 237, 0.66);
    --ink-3: rgba(237, 237, 237, 0.46);
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.06);
    --line-3: rgba(255, 255, 255, 0.18);
    --tint: rgba(255, 255, 255, 0.06);
    --hover: #2a2a2a;
    --accent: #5b95ff;
    --accent-text: #5b95ff;
    --btn: #ededed;
    --btn-hover: #ffffff;
    --btn-ink: #141414;
    --shadow: 0 0 0 1px var(--line);
    --shadow-pop: 0 0 0 1px var(--line), 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --topbar: rgba(20, 20, 20, 0.92);
    --slot-1: #3d82f5;
    --slot-2: #d9772e;
    --slot-3: #8c6bd6;
    --slot-4: #199e8a;
    --green-fill: #08b063;
    --red-fill: #f7524e;
    --blue-fill: #5690fa;
    --green-text: #1fb86a;
    --red-text: #ff5a55;
    --blue-text: #5b95ff;
    --good-text: #1fb86a;
    --warning-text: #f5a524;
    --serious-text: #f4874e;
    --critical-text: #ff6d68;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #141414;
  --wash: #191919;
  --card: #1c1c1c;
  --ink: #ededed;
  --ink-2: rgba(237, 237, 237, 0.66);
  --ink-3: rgba(237, 237, 237, 0.46);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.06);
  --line-3: rgba(255, 255, 255, 0.18);
  --tint: rgba(255, 255, 255, 0.06);
  --hover: #2a2a2a;
  --accent: #5b95ff;
  --accent-text: #5b95ff;
  --btn: #ededed;
  --btn-hover: #ffffff;
  --btn-ink: #141414;
  --shadow: 0 0 0 1px var(--line);
  --shadow-pop: 0 0 0 1px var(--line), 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --topbar: rgba(20, 20, 20, 0.92);
  --slot-1: #3d82f5;
  --slot-2: #d9772e;
  --slot-3: #8c6bd6;
  --slot-4: #199e8a;
  --green-fill: #08b063;
  --red-fill: #f7524e;
  --blue-fill: #5690fa;
  --green-text: #1fb86a;
  --red-text: #ff5a55;
  --blue-text: #5b95ff;
  --good-text: #1fb86a;
  --warning-text: #f5a524;
  --serious-text: #f4874e;
  --critical-text: #ff6d68;
}

/* the up/down convention (default: green up, red down) */
:root {
  --up-fill: var(--green-fill);
  --down-fill: var(--red-fill);
  --up-text: var(--green-text);
  --down-text: var(--red-text);
}
:root[data-updown="red-up"] {
  --up-fill: var(--red-fill);
  --down-fill: var(--green-fill);
  --up-text: var(--red-text);
  --down-text: var(--green-text);
}
:root[data-updown="cvd"] {
  --up-fill: var(--blue-fill);
  --down-fill: var(--red-fill);
  --up-text: var(--blue-text);
  --down-text: var(--red-text);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* both clip, so the full-bleed lines never widen a phone's layout viewport */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 13px/18px var(--font);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
button,
input,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4,
b,
strong,
th {
  margin: 0;
  font-weight: 500;
}
p {
  margin: 0;
}
code,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the one floating tooltip for every [data-tip] */
.float-tip {
  position: fixed;
  z-index: 60;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
/* a label with an explanation behind it */
.tipped {
  text-decoration: underline dotted var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}
.unpriced {
  cursor: help;
}
.unpriced.is-compact {
  height: 16px;
  padding: 0 5px 0 3px;
  gap: 2px;
  font-size: 10px;
  line-height: 12px;
}
/* the label row's end: the unpriced marker, 配置, 旧 */
.tile-marks {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  letter-spacing: 0.01em;
}
.kv-cell .k .unpriced {
  margin-left: 6px;
}
.tile-value .unpriced {
  margin-left: 8px;
}
td .unpriced {
  margin-right: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 8px;
  top: -40px;
  background: var(--card);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  z-index: 50;
}
.skip:focus {
  top: 8px;
}
.num,
td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}
.up {
  color: var(--up-text);
}
.down {
  color: var(--down-text);
}
.flat,
.dim,
.muted {
  color: var(--ink-2);
}
.nil {
  color: var(--ink-3);
}
.strong {
  font-weight: 500;
}
.small {
  font-size: 12px;
  line-height: 16px;
}
.wrap-anywhere {
  overflow-wrap: anywhere;
}
.nowrap {
  white-space: nowrap;
}
.only-narrow {
  display: none;
}
.t-dim {
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ buttons and controls */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  list-style: none;
  transition: background-color var(--ease), color var(--ease);
}
.btn::-webkit-details-marker {
  display: none;
}
.btn:hover {
  background: var(--hover);
}
.btn:disabled {
  cursor: default;
  color: var(--ink-3);
  background: var(--card);
}
.btn-small {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 18px;
}
.btn-icon {
  width: 32px;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
/* the one primary button */
.btn-primary {
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--btn-hover);
}
.btn-primary:disabled {
  background: var(--btn);
  color: var(--btn-ink);
  opacity: 0.55;
}
/* text buttons: 表格, 展开 */
.btn-text {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 6px;
  margin: 0 -6px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ease);
}
.btn-text:hover {
  background: var(--tint);
}
/* the auto-refresh switch: the track and knob are pseudo-elements, the words say the state */
.btn-toggle {
  position: relative;
  background: none;
  box-shadow: none;
  padding: 0 8px 0 42px;
  color: var(--ink-2);
  font-weight: 400;
}
.btn-toggle:hover {
  background: var(--tint);
}
.btn-toggle::before,
.btn-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 9999px;
  transition: transform var(--ease), background-color var(--ease);
}
.btn-toggle::before {
  left: 8px;
  width: 28px;
  height: 16px;
  margin-top: -8px;
  background: var(--line-3);
}
.btn-toggle::after {
  left: 10px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-toggle[aria-pressed="true"] {
  color: var(--ink);
}
.btn-toggle[aria-pressed="true"]::before {
  background: var(--accent);
}
.btn-toggle[aria-pressed="true"]::after {
  transform: translateX(12px);
}
.btn-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent-text);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* segmented choice: a wash group, the current item lifted onto a card */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg-btn {
  border: 0;
  background: none;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}
.seg-btn:hover {
  color: var(--ink);
  background: var(--tint);
}
.seg-btn[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--ink-2);
}
.field select {
  letter-spacing: -0.005em;
  font-weight: 400;
}
.field-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
select,
input[type="search"] {
  height: 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 0 10px;
  font-size: 13px;
}
select {
  padding-right: 6px;
}
input[type="search"] {
  min-width: 0;
  width: 100%;
}
input[type="search"]::placeholder {
  color: var(--ink-3);
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-2);
}
.check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}
.search {
  flex: 0 1 260px;
  display: flex;
  min-width: 140px;
}

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page);
  box-shadow: 0 1px 0 var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar {
    background: var(--topbar);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.topbar-in {
  max-width: var(--col);
  margin: 0 auto;
  min-height: 52px;
  padding: 0 var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.brand-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.brand-sub {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.top-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.top-meta {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  white-space: nowrap;
}
.top-meta.is-stale {
  color: var(--serious-text);
  font-weight: 500;
}
.top-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.top-controls .top-meta + .top-meta {
  margin-left: -2px;
}

/* status pills in the top bar: a 12 % wash, the status text step, an icon */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 7px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.pill svg {
  flex: none;
  width: 12px;
  height: 12px;
}
.pill-good {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  color: var(--good-text);
}
.pill-critical {
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--critical) 45%, transparent);
}
.pill-neutral {
  background: var(--tint);
  color: var(--ink-2);
}
/* the mode and the order switch */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.badge-live {
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: none;
}
.badge-paper {
  background: var(--tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
/* the config file differs from the one the executor runs */
.badge-warn {
  color: var(--warning-text);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent);
}
.badge-warn svg {
  flex: none;
}
/* the executor is not running: its switch is unknown */
.badge-unknown {
  color: var(--ink-3);
}
/* the connection is down: the status on show is the last one fetched */
.top-status.is-stale .pill,
.top-status.is-stale .badge {
  filter: grayscale(1);
  opacity: 0.6;
}
.badge-on {
  color: var(--critical-text);
  background: color-mix(in srgb, var(--critical) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--critical);
}
.switch {
  position: relative;
  width: 20px;
  height: 12px;
  border-radius: 9999px;
  background: var(--line-3);
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}
.switch.is-on {
  background: var(--critical);
}
.switch.is-on::after {
  left: 10px;
}

.settings {
  position: relative;
}
.settings[open] > summary {
  background: var(--hover);
}
.settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
}

/* ------------------------------------------------------------------ the column between the rails */

.shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line);
}
/* a block: a hairline under it running past both rails */
.block {
  position: relative;
}
.block::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

/* hint blocks: status colour at 9 %, ring at 25 %, the icon on the left */
.banners {
  padding: 0 var(--gut);
}
.banners:has(> :not([hidden])) {
  padding-top: 16px;
  padding-bottom: 16px;
}
.banners:not(:has(> :not([hidden])))::after {
  display: none;
}
.would-halt,
.conn-banner {
  --hint: var(--critical);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--hint) 9%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hint) 25%, transparent);
}
.would-halt {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: start;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hint) 55%, transparent);
}
.would-halt + .conn-banner {
  margin-top: 8px;
}
.would-halt .icon-wrap {
  grid-row: span 2;
  color: var(--critical);
  padding-top: 2px;
}
.would-halt .icon-wrap svg {
  width: 24px;
  height: 24px;
}
.would-halt h2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--critical-text);
}
.would-halt .why {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.conn-banner {
  --hint: var(--serious);
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 500;
}
.conn-banner svg {
  color: var(--serious);
  flex: none;
}

.alerts {
  padding: 16px var(--gut);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alerts:empty {
  display: none;
}
.alert {
  --alert: var(--ink-3);
  --alert-text: var(--ink-2);
  padding: 0 12px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--alert) 9%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alert) 25%, transparent);
}
.alert > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  list-style: none;
  cursor: pointer;
}
.alert > summary::-webkit-details-marker {
  display: none;
}
/* a chevron: down when folded, up when open */
.alert > summary::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 4px 3px auto;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
}
.alert[open] > summary::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
.alert-icon {
  color: var(--alert);
  display: flex;
}
.alert-level {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.03em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--alert-text);
}
.alert-body {
  min-width: 0;
  padding: 0 0 10px 26px;
}
.alert-level {
  margin-right: 6px;
}
.alert-title {
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}
.alert-text {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.alert-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 6px;
}
.alert-critical {
  --alert: var(--critical);
  --alert-text: var(--critical-text);
}
.alert-serious {
  --alert: var(--serious);
  --alert-text: var(--serious-text);
}
.alert-warning {
  --alert: var(--warning);
  --alert-text: var(--warning-text);
}
.alert-info {
  --alert: var(--ink-3);
  --alert-text: var(--ink-2);
}
.alert-info {
  background: var(--card);
  box-shadow: var(--shadow);
}
/* the fold: everything past the first rows (never a critical one) collapses into one row */
.alerts-more {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r);
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--ease);
}
.alerts-more:hover {
  background: var(--hover);
  color: var(--ink);
}
.alerts-more::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--ease);
}
.alerts-more[aria-expanded="true"]::before {
  transform: rotate(-135deg);
}

/* ------------------------------------------------------------------ tabs and panels */

.tabbar {
  padding: 12px var(--gut);
}
.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -2px;
  padding: 2px;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 20px;
  transition: background-color var(--ease), color var(--ease);
}
.tabs [role="tab"]:hover {
  background: var(--tint);
  color: var(--ink);
}
.tabs [role="tab"][aria-selected="true"] {
  color: var(--ink);
  font-weight: 500;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tab-count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--tint);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
}
.tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--serious);
}

main {
  flex: 1 0 auto;
  padding: 24px var(--gut);
  outline: none;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: none;
}
.panel-status:empty {
  display: none;
}
.panel-status {
  color: var(--ink-2);
  display: flex;
  gap: 8px;
  align-items: center;
}
/* the panel's own data time: small, at the line's end */
.panel-time {
  margin-left: auto;
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.panel-status.is-loading::before {
  content: "";
  width: 64px;
  height: 10px;
  border-radius: 9999px;
  background: var(--tint);
}
.panel-status.is-error {
  color: var(--ink);
  padding: 9px 12px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--serious) 9%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--serious) 25%, transparent);
}
.panel-status.is-error svg {
  color: var(--serious);
}
/* data kept from the last good fetch: dimmed, never blanked; the panel's own status line stays crisp */
.is-stale,
main.is-stale .panel > :not(.panel-status) {
  opacity: 0.55;
  transition: opacity 0.2s;
}
main.is-stale {
  opacity: 1;
}

.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.card-head > div:first-child {
  min-width: 0;
}
.card-title {
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
}
.card-sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  margin-top: 2px;
}
.card-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.empty-note {
  color: var(--ink-2);
  padding: 8px 0;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.filter-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--ink-2);
}
.filter-note {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.pager {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ------------------------------------------------------------------ stat tiles and meters */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.tiles-compact {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
.tiles:empty::before {
  content: "";
  grid-column: 1 / -1;
  height: 118px;
  border-radius: var(--r);
  background: var(--tint);
}
.tile {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tiles-compact .tile {
  min-height: 92px;
  padding: 12px 14px;
}
.tile-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 4px;
}
.tile-label svg {
  flex: none;
}
.tile-value {
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
/* an amount is never cut: the unit and percent wrap below it, and one too wide for the tile gets a smaller font
   (app.js fitText) */
.tile-value > span:first-child {
  white-space: nowrap;
}
.tile-value .unit,
.tile-value .pct {
  display: inline-block;
}
.tiles-compact .tile-value {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.015em;
}
.tiles-compact .tile-value .pct {
  display: block;
  margin-left: 0;
}
/* the one hero number: the margin balance */
#ov-tiles > .tile:first-child .tile-value {
  font-size: 40px;
  line-height: 44px;
  font-weight: 300;
  letter-spacing: -0.025em;
}
.tile-value .unit {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  margin-left: 4px;
}
.tile-value .pct {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.005em;
  font-weight: 500;
  margin-left: 8px;
}
.tile-sub {
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.tile-sub .num {
  text-align: left;
}
.tile.is-warning {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 70%, transparent), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tile.is-critical {
  box-shadow: 0 0 0 1.5px var(--critical), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tile .warn-icon {
  color: var(--warning);
  display: flex;
}
.tile .crit-icon {
  color: var(--critical);
  display: flex;
}

.meter {
  --meter: var(--ink);
  position: relative;
  height: 4px;
  border-radius: 9999px;
  background: var(--tint);
  margin: 2px 0 8px;
}
.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9999px;
  background: var(--meter);
  width: 0;
}
.meter-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--ink-3);
}
.meter[data-sev="warning"] {
  --meter: var(--warning);
}
.meter[data-sev="critical"] {
  --meter: var(--critical);
}

/* ------------------------------------------------------------------ tables */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.card > .table-wrap:only-child,
.card > .table-wrap:first-child {
  margin: -16px -16px 0;
  border-radius: var(--r) var(--r) 0 0;
}
.card > .table-wrap:only-child {
  margin-bottom: -16px;
  border-radius: var(--r);
}
.card-head + .table-wrap {
  margin: 0 -16px -16px;
  border-radius: 0 0 var(--r) var(--r);
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
th,
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
th {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  white-space: nowrap;
  background: var(--wash);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr:hover > td {
  background: var(--hover);
}
tbody tr:last-child > td {
  border-bottom: 0;
}
tfoot td {
  font-weight: 500;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--wash);
}
th.sortable {
  padding: 0;
}
th.sortable button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
th.sortable button:hover {
  color: var(--ink);
}
th.sortable.num button {
  justify-content: flex-end;
}
th.sortable button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.sort-mark {
  font-size: 9px;
  color: var(--ink-3);
  width: 8px;
}
th[aria-sort] {
  color: var(--ink);
}
th[aria-sort] .sort-mark {
  color: var(--ink);
}
tr.is-clickable {
  cursor: pointer;
}
tr.is-selected > td {
  background: var(--hover);
}
tr.is-selected > td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}
tr.is-expanded > td {
  border-bottom-color: transparent;
}
tr.sub-row > td,
tr.sub-row:hover > td {
  background: var(--wash);
  padding: 4px 12px 14px 40px;
}
.sub-table {
  width: auto;
  min-width: 420px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 8px;
}
.sub-table td,
.sub-table th {
  position: static;
  padding: 6px 12px;
}
.sub-table th {
  background: var(--card);
}
.sub-table tbody tr:hover > td {
  background: var(--hover);
}
.expander {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-3);
  margin-right: 6px;
  vertical-align: -5px;
}
.expander:hover {
  background: var(--tint);
  color: var(--ink);
}
.expander:focus-visible {
  outline: 2px solid var(--accent);
}
.expander svg {
  transition: transform var(--ease);
}
.expander[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
.table-sticky-first td:first-child,
.table-sticky-first th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
}
.table-sticky-first th:first-child {
  background: var(--wash);
}
.table-sticky-first tbody tr:hover > td:first-child {
  background: var(--hover);
}
.table-sticky-first tr.sub-row > td:first-child {
  position: static;
  background: var(--wash);
}
.table-foot {
  font-size: 11px;
  line-height: 15px;
  color: var(--ink-3);
  padding-top: 12px;
}
.cell-main {
  font-weight: 500;
}
.cell-sub {
  display: block;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  font-weight: 400;
}
.cell-sub.sym {
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0;
}
.num .cell-sub {
  text-align: right;
}
.hl-warn {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  border-radius: 4px;
  padding: 1px 4px;
  font-weight: 500;
}
.hl-warn svg {
  color: var(--warning);
  vertical-align: -1px;
}
.swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: 1px;
  flex: none;
}
/* status chips: 20px, a 12 % wash, the status text step, an icon */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px 0 6px;
  border-radius: 9999px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--tint);
  color: var(--ink-2);
}
.chip svg {
  flex: none;
  width: 10px;
  height: 10px;
}
.chip-good {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  color: var(--good-text);
}
.chip-warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning-text);
}
.chip-warning svg {
  color: var(--warning);
}
.chip-serious {
  background: color-mix(in srgb, var(--serious) 12%, transparent);
  color: var(--serious-text);
}
.chip-critical {
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical-text);
}
.side {
  font-weight: 500;
  white-space: nowrap;
}
.reason {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ charts */

.chart {
  position: relative;
  min-height: 120px;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
}
.chart > .chart-empty {
  flex: 1;
}
#pnl-chart {
  min-height: 300px;
}
#books-chart {
  min-height: 260px;
}
.chart:empty {
  border-radius: var(--r);
  background: var(--tint);
}
.chart svg {
  display: block;
  overflow: visible;
}
.chart svg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.chart text {
  fill: var(--ink-2);
  font-family: var(--font);
}
.chart .tick text {
  font-size: 11px;
  letter-spacing: 0.01em;
  fill: var(--ink-3);
}
.chart .grid-line {
  stroke: var(--line-2);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart .zero-line {
  stroke: var(--ink-3);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
/* the paper stretch: a neutral tint with a fine 45° hatch (an SVG pattern) */
.chart .band-bg {
  fill: var(--tint);
}
.chart .band-hatch {
  stroke: var(--line);
  stroke-width: 1;
}
.chart .band-label {
  font-size: 11px;
  fill: var(--ink-2);
}
.chart .series-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .series-line.is-dashed {
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  stroke-linecap: butt;
}
.chart .series-line.is-faded {
  opacity: 0.18;
}
.chart .end-dot,
.chart .hover-dot {
  stroke: var(--card);
  stroke-width: 2;
}
.chart .end-label {
  font-size: 12px;
  fill: var(--ink);
}
.chart .end-label .end-value {
  font-weight: 500;
}
.chart .leader {
  stroke: var(--line-3);
  stroke-width: 1;
}
.chart .crosshair {
  stroke: var(--ink-3);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart .marker-line {
  stroke: var(--line-3);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.chart .marker-head {
  fill: var(--ink-2);
}
.chart .bar-label {
  font-size: 12px;
  fill: var(--ink);
}
.chart .row-label {
  font-size: 12px;
  fill: var(--ink);
}
.chart .bar {
  transition: opacity var(--ease);
}
.chart .bar-row:hover .bar,
.chart .bar-row.is-active .bar {
  opacity: 0.8;
}
.chart .bar-hit {
  fill: transparent;
}
.chart .bar-row.is-active .bar-hit {
  fill: var(--tint);
}
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 160px;
  border-radius: var(--r);
  background: var(--wash);
  color: var(--ink-2);
  text-align: center;
  padding: 24px 16px;
}
.chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 190px;
  max-width: 300px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 18px;
}
.tip-title {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  margin-bottom: 6px;
  white-space: nowrap;
}
.tip-row {
  display: grid;
  grid-template-columns: 8px minmax(64px, auto) 1fr;
  align-items: center;
  gap: 8px;
}
.tip-key {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ink-3);
}
.tip-key.is-none {
  background: none;
}
.tip-value {
  font-weight: 500;
  text-align: right;
  color: var(--ink);
}
.tip-label {
  color: var(--ink-2);
  white-space: nowrap;
}
.tip-note {
  color: var(--ink-2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  align-items: center;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.legend-line {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.legend-line.is-dashed {
  height: 1.5px;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}
.legend-box {
  width: 12px;
  height: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 4px), var(--tint);
  box-shadow: inset 0 0 0 1px var(--line);
}
.legend-toggle {
  margin: -4px 0 12px;
  gap: 4px 6px;
}
.legend-toggle button {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  transition: background-color var(--ease);
}
.legend-toggle button:hover {
  background: var(--tint);
}
.legend-toggle button:focus-visible {
  outline: 2px solid var(--accent);
}
.legend-toggle .legend-line {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.legend-toggle button[aria-pressed="false"] {
  color: var(--ink-3);
}
.legend-toggle button[aria-pressed="false"] .legend-line {
  opacity: 0.3;
}

.chart-table {
  margin: 12px -16px -16px;
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
}

/* ------------------------------------------------------------------ overview */

.ov-books {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* the overview's seven tiles: four money tiles over three risk meters on a wide screen */
@media (min-width: 1100px) {
  #ov-tiles {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  #ov-tiles > .tile {
    grid-column: span 3;
  }
  #ov-tiles > .tile:nth-child(n + 5) {
    grid-column: span 4;
  }
}

/* ------------------------------------------------------------------ calendar */

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.month-title {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  min-width: 120px;
  text-align: center;
}
.cal-stats {
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.cal-stats b:not(.up):not(.down) {
  color: var(--ink);
}
.cal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 1100px) {
  .cal-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.cal-scale {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cal-scale-end {
  margin: 0 6px;
  color: var(--ink-3);
}
.cal-scale-step .sw {
  display: block;
  width: 20px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-dow {
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-3);
  text-align: center;
  padding: 0 0 4px;
}
.cal-cell {
  all: unset;
  box-sizing: border-box;
  position: relative;
  min-height: 80px;
  padding: 7px 8px 6px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--ease);
}
.cal-cell:hover {
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.cal-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cal-cell.is-blank {
  cursor: default;
  background: transparent;
  box-shadow: none;
}
.cal-cell.is-nodata {
  cursor: default;
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--line-3);
}
.cal-cell.is-selected {
  box-shadow: inset 0 0 0 2px var(--ink);
}
/* today (the partial day): a 1.5px accent ring */
.cal-cell.is-partial {
  box-shadow: 0 0 0 1.5px var(--accent), inset 0 0 0 1px var(--line);
}
.cal-cell.is-partial.is-selected {
  box-shadow: 0 0 0 1.5px var(--accent), inset 0 0 0 2px var(--ink);
}
.cal-day {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  display: flex;
  align-items: flex-start;
  gap: 3px;
}
.cal-day > span:first-of-type {
  margin-left: auto;
}
.cal-tag {
  display: inline-flex;
  align-items: center;
  height: 16px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  padding: 0 5px;
  border-radius: 9999px;
  color: var(--ink-2);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-3);
  white-space: nowrap;
}
.cal-legend .cal-tag {
  margin: 0;
}
.cal-amt {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  margin-top: auto;
  text-align: right;
}
.cal-pct {
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  text-align: right;
}
.cal-cell.is-paper .cal-amt {
  color: var(--ink-2);
  font-weight: 400;
}
/* the diverging fill on real_pct: --wash at 0.00 %, four alpha steps per arm at fixed cuts of |x| (0.2, 0.6, 1.2 %) */
.cal-cell[data-step="0"],
.cal-scale-step[data-step="0"] .sw {
  background: var(--wash);
}
.cal-cell[data-step="1"],
.cal-scale-step[data-step="1"] .sw {
  background: color-mix(in srgb, var(--up-fill) 8%, var(--card));
}
.cal-cell[data-step="2"],
.cal-scale-step[data-step="2"] .sw {
  background: color-mix(in srgb, var(--up-fill) 16%, var(--card));
}
.cal-cell[data-step="3"],
.cal-scale-step[data-step="3"] .sw {
  background: color-mix(in srgb, var(--up-fill) 26%, var(--card));
}
.cal-cell[data-step="4"],
.cal-scale-step[data-step="4"] .sw {
  background: color-mix(in srgb, var(--up-fill) 38%, var(--card));
}
.cal-cell[data-step="-1"],
.cal-scale-step[data-step="-1"] .sw {
  background: color-mix(in srgb, var(--down-fill) 8%, var(--card));
}
.cal-cell[data-step="-2"],
.cal-scale-step[data-step="-2"] .sw {
  background: color-mix(in srgb, var(--down-fill) 16%, var(--card));
}
.cal-cell[data-step="-3"],
.cal-scale-step[data-step="-3"] .sw {
  background: color-mix(in srgb, var(--down-fill) 26%, var(--card));
}
.cal-cell[data-step="-4"],
.cal-scale-step[data-step="-4"] .sw {
  background: color-mix(in srgb, var(--down-fill) 38%, var(--card));
}

.day-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.day-detail h3,
.round-detail h3 {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.day-detail section > .table-wrap {
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.detail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  align-items: center;
}
.detail-head h2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.detail-head > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.kv dt {
  color: var(--ink-2);
}
.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px 16px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--wash);
}
.kv-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kv-cell .k {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.kv-cell .v {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ rounds */

.round-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 0 0 1px var(--line-3), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.round-detail h3 {
  margin: 4px 0 -6px;
}
.round-detail .table-wrap {
  border-radius: 8px;
  box-shadow: var(--shadow);
}
/* wide order tables scroll sideways instead of stacking a word per line */
.round-detail td,
#rounds-table td,
.day-detail td {
  white-space: nowrap;
}
.round-detail td.reason,
#rounds-table td.reason,
.day-detail td.reason {
  white-space: normal;
  min-width: 180px;
}
.plan-error,
.halt-box {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--critical) 9%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--critical) 25%, transparent);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
details.disclosure > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--accent-text);
  padding: 4px 0;
  width: max-content;
  max-width: 100%;
}
details.disclosure[open] > summary {
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------ health */

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}
.health-grid > .empty-note {
  grid-column: 1 / -1;
}
.health-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.health-card.is-wide {
  grid-column: 1 / -1;
}
.health-card .card-head {
  margin-bottom: 0;
  align-items: center;
}
.health-card .kv {
  font-size: 13px;
}
.halt-box {
  white-space: pre-wrap;
  max-height: 240px;
  overflow: auto;
  margin-top: 6px;
}
.log-card {
  display: flex;
  flex-direction: column;
}
.log-tools {
  margin-bottom: 12px;
}
.log-view {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  height: 460px;
  overflow: auto;
  border-radius: 8px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 8px 0;
}
.log-line {
  padding: 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-left: 2px solid transparent;
}
.log-line .ts {
  color: var(--ink-3);
}
.log-line.is-halt {
  background: color-mix(in srgb, var(--critical) 10%, transparent);
  border-left-color: var(--critical);
  font-weight: 500;
}
.log-line.is-alert {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-left-color: var(--warning);
}
.log-line.is-round {
  border-left-color: var(--ink-3);
  font-weight: 500;
}
.log-line.is-heartbeat {
  color: var(--ink-2);
}
.log-line mark {
  background: color-mix(in srgb, var(--warning) 30%, transparent);
  color: inherit;
  border-radius: 2px;
}
.config {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 900px) {
  .config {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.config > * {
  min-width: 0;
}
.config > .table-wrap {
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.config table td:first-child {
  color: var(--ink-2);
}
.config table td.num {
  white-space: normal;
  overflow-wrap: anywhere;
}
.config .wide {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ footer and small screens */

.foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 16px var(--gut) 24px;
  font-size: 11px;
  line-height: 15px;
  color: var(--ink-3);
}
.foot::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: 0;
  height: 1px;
  background: var(--line);
}

@media (max-width: 720px) {
  :root {
    --gut: 16px;
  }
  .shell {
    box-shadow: none;
  }
  /* still sticky, with only the rows from the status pills down in view: the name and buttons scroll away
     (app.js sets --topbar-pin to minus their height) */
  .topbar {
    top: var(--topbar-pin, 0px);
  }
  .topbar-in {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px 10px;
  }
  .brand-sub {
    display: none;
  }
  /* narrow: name and buttons, then the status pills, then the two time stamps */
  .top-controls {
    display: contents;
  }
  .top-controls > * {
    order: 1;
  }
  .top-controls > .btn-toggle {
    margin-left: auto;
  }
  .top-status {
    order: 2;
    flex-basis: 100%;
  }
  .top-controls > .top-meta {
    order: 3;
  }
  .btn-toggle {
    padding-right: 6px;
  }
  .tabbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .tabs [role="tab"] {
    padding: 0 10px;
  }
  main {
    padding-top: 16px;
    padding-bottom: 20px;
  }
  .card {
    padding: 14px;
  }
  .card > .table-wrap:only-child,
  .card > .table-wrap:first-child {
    margin: -14px -14px 0;
  }
  .card > .table-wrap:only-child {
    margin-bottom: -14px;
  }
  .card-head + .table-wrap,
  .chart-table {
    margin: 12px -14px -14px;
  }
  .card-head + .table-wrap {
    margin-top: 0;
  }
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tile {
    padding: 12px;
    min-height: 112px;
  }
  .tile-value {
    font-size: 20px;
    line-height: 26px;
  }
  .tile-value .pct {
    display: block;
    margin-left: 0;
  }
  #ov-tiles > .tile:first-child {
    grid-column: 1 / -1;
  }
  #ov-tiles > .tile:first-child .tile-value {
    font-size: 32px;
    line-height: 38px;
  }
  #ov-tiles > .tile:first-child .tile-value .pct {
    display: inline;
  }
  .settings-panel {
    right: 0;
  }
  .pager {
    margin-left: 0;
  }
  .search {
    flex: 1 1 100%;
  }
  .would-halt h2 {
    font-size: 15px;
    line-height: 22px;
  }
  .foot {
    padding-top: 12px;
  }
  .log-view {
    height: 380px;
  }
  tr.sub-row > td,
  tr.sub-row:hover > td {
    padding-left: 12px;
  }
  .sub-table {
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .only-wide {
    display: none;
  }
  /* phone width: the cell marker is just its icon, left of the amount */
  .cal-cell .unpriced {
    position: absolute;
    left: 3px;
    top: 21px;
    padding: 0;
    height: auto;
    background: none;
  }
  .cal-cell .unpriced .n {
    display: none;
  }
  /* and 今 goes when 演 or 混 is there (the accent ring still marks today), 划 after 混 (the cell's label says it) */
  .cal-day .cal-tag + .cal-tag.is-today,
  .cal-day .cal-tag + .cal-tag.is-transfer {
    display: none;
  }
  .only-narrow {
    display: inline;
  }
  .tabs [role="tab"] {
    position: relative;
    padding: 0 8px;
    font-size: 13px;
  }
  /* the problem dot sits on the corner, so five tabs still fit */
  .tab-dot {
    position: absolute;
    top: 4px;
    right: 2px;
  }
  .cal-grid {
    gap: 3px;
  }
  .cal-cell {
    min-height: 60px;
    padding: 4px 4px 3px;
    border-radius: 8px;
  }
  .cal-amt {
    font-size: 11px;
    line-height: 14px;
  }
  .cal-pct {
    font-size: 10px;
    line-height: 12px;
  }
  .cal-tag {
    height: 14px;
    font-size: 9px;
    padding: 0 3px;
  }
  .cal-scale-step .sw {
    width: 16px;
  }
}

/* 375: the cells keep the day and the amount (the percent is in the cell's label) */
@media (max-width: 380px) {
  .cal-pct {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .meter-fill,
  .cal-scale-step .sw,
  .swatch,
  .legend-line,
  .tab-dot {
    forced-color-adjust: none;
  }
  .card,
  .tile,
  .btn,
  .seg-btn[aria-pressed="true"],
  .cal-cell {
    border: 1px solid CanvasText;
  }
}

/* ------------------------------------------------------------------ login (the published instance only) */

.login-body {
  justify-content: center;
}
.login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 96px;
}
.login-card {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.login-title {
  font-size: 18px;
  line-height: 24px;
  color: var(--ink);
}
.login-card input {
  height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.login-card #login-code {
  font-family: var(--mono);
  letter-spacing: 0.2em;
}
.login-error {
  color: var(--critical-text);
  font-size: 13px;
  line-height: 18px;
}
.login-submit {
  justify-content: center;
  height: 36px;
}