/* Adwaita, as libadwaita paints it — the named colours from its own palette, so
   the prototype reads as the same app rather than a web page about it. */

:root {
  /* Sidemark's OWN palette, not Adwaita's — `_load_theme()`'s defaults, which
     are what the desktop falls back to before a system theme overrides them.
     The app is meant to read like paper; a cool white-and-grey reads clinical
     beside it. */
  --window-bg: #fdf6ee;
  --window-fg: #22211d;
  --headerbar-bg: #f7f0e6;
  --headerbar-border: rgb(34 33 29 / 14%);
  --view-bg: #fffdf9;
  --card-bg: #fffdf9;
  --popover-bg: #fdf8f1;
  --popover-shadow: 0 1px 2px rgb(34 33 29 / 12%), 0 6px 18px rgb(34 33 29 / 18%);
  --accent-bg: #3584e4;
  --accent-fg: #ffffff;
  --dim: rgb(34 33 29 / 58%);
  --btn-bg: rgb(34 33 29 / 7%);
  --btn-hover: rgb(34 33 29 / 12%);
  --btn-active: rgb(34 33 29 / 18%);
  --separator: rgb(34 33 29 / 13%);
  --surround: #e8ddd2;   /* PDFCanvas.surround_color, (0.910, 0.867, 0.824) */
  --radius: 8px;
  --header-h: 47px;      /* what floats under the header measures from this */
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --window-bg: #232220;
    --window-fg: #f2ece2;
    --headerbar-bg: #2c2a27;
    --headerbar-border: rgb(0 0 0 / 38%);
    --view-bg: #1d1c1a;
    --card-bg: rgb(255 253 249 / 7%);
    --popover-bg: #35322e;
    --popover-shadow: 0 1px 2px rgb(0 0 0 / 36%), 0 6px 18px rgb(0 0 0 / 44%);
    --dim: rgb(242 236 226 / 55%);
    --btn-bg: rgb(242 236 226 / 10%);
    --btn-hover: rgb(242 236 226 / 15%);
    --btn-active: rgb(242 236 226 / 22%);
    --separator: rgb(242 236 226 / 13%);
    --surround: #171614;
  }
}

:root[data-theme="dark"] {
  --window-bg: #232220;
  --window-fg: #f2ece2;
  --headerbar-bg: #2c2a27;
  --headerbar-border: rgb(0 0 0 / 38%);
  --view-bg: #1d1c1a;
  --card-bg: rgb(255 253 249 / 7%);
  --popover-bg: #35322e;
  --popover-shadow: 0 1px 2px rgb(0 0 0 / 36%), 0 6px 18px rgb(0 0 0 / 44%);
  --dim: rgb(242 236 226 / 55%);
  --btn-bg: rgb(242 236 226 / 10%);
  --btn-hover: rgb(242 236 226 / 15%);
  --btn-active: rgb(242 236 226 / 22%);
  --separator: rgb(242 236 226 / 13%);
  --surround: #171614;
}

* { box-sizing: border-box; }

/* `hidden` MEANS hidden, everywhere and once.
   The UA sheet's `[hidden] { display: none }` is an author-rule loss waiting to
   happen: any class rule that sets `display` outranks it, so `.pager` painted
   the presenter's timer in the header for a document nobody was presenting —
   while the JS that set `hidden` was correct the whole time. The half-dozen
   `.thing[hidden]` rules further down were each that bug, found and patched one
   at a time; this is the rule they were all approximating. Keep new components
   OUT of that list — they are covered here. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--window-bg);
  color: var(--window-fg);
  font-family: Cantarell, "Adwaita Sans", Inter, system-ui, -apple-system,
               "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ── header bar ──────────────────────────────────────────────────────────── */

.headerbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  min-height: var(--header-h);
  padding: 0 6px;
  background: var(--headerbar-bg);
  border-bottom: 1px solid var(--headerbar-border);
  flex: none;
}

.hb-start, .hb-end { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* the side cells must be allowed to SHRINK, or they push into the centre one
   and the whole bar overlaps itself rather than adapting */
.headerbar > * { min-width: 0; }
.hb-start { justify-self: start; padding-left: 2px; }
.hb-center { justify-self: center; display: flex; align-items: center; gap: 8px; }

.swatch-btn {
  /* `button`'s min-height is 30px and would win over `height`, which made this
     a 22×30 oval instead of a dot */
  width: 22px; height: 22px; min-height: 0;
  flex: none; padding: 0;
  border-radius: 999px;
  border: 1px solid rgb(34 33 29 / 30%);
}
.swatch-btn:hover { box-shadow: 0 0 0 3px var(--btn-hover); }
.hb-end { justify-self: end; }

/* the title must give way before the buttons do, not push them into a new row */
.hb-start .title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: 4px; min-width: 0;
}

.title { font-weight: 700; font-size: 14px; }
/* unsaved work is marked on the title, the way a document window does it */
.title.dirty::after { content: " •"; color: var(--accent-bg); }
button.suggested { background: var(--accent-bg); color: var(--accent-fg); }
button.suggested:hover { background: color-mix(in srgb, var(--accent-bg) 88%, black); }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: var(--btn-bg);
  border-radius: 6px;
  padding: 5px 10px;
  min-height: 30px;
  cursor: pointer;
}
button:hover { background: var(--btn-hover); }
button:active { background: var(--btn-active); }
button.flat { background: transparent; }
button.flat:hover { background: var(--btn-hover); }
button.small { padding: 3px 9px; min-height: 26px; font-size: 13px; }
button:disabled { opacity: .4; cursor: default; }
button:disabled:hover { background: transparent; }

.icon-btn {
  display: inline-grid;      /* grid is block-level; inline-grid stays in the row */
  place-items: center;
  width: 34px;
  flex: none;
  padding: 0;
}
.icon-btn svg { width: 16px; height: 16px; }

/* linked button group, as libadwaita links a segmented row */
.linked { display: flex; }
.linked > button {
  border-radius: 0;
  margin: 0;
  position: relative;
}
.linked > button:first-child { border-radius: 6px 0 0 6px; }
.linked > button:last-child { border-radius: 0 6px 6px 0; }
.linked > button + button { box-shadow: inset 1px 0 0 var(--separator); }

/* ── the tool bar as a binding surface ───────────────────────────────────── */

.tool-btn {
  flex: none;
  width: 38px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}
.tool-btn svg { width: 17px; height: 17px; pointer-events: none; }
.tool-btn.unavailable { opacity: .35; }

/* The stripes are a LIVE readout, and they are the ONLY signal: holding a
   modifier repaints them from the chord table, so the bar always shows what
   each button would do right now. An unbound chord shows nothing, because that
   is what pressing it would do. There is no second highlight. */
.strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  display: flex;
  pointer-events: none;   /* untargetable, so it never eats the binding click */
}
.strip > i { flex: 1; }

.pager { display: flex; align-items: center; gap: 1px; margin-right: 4px; }
.page-counter {
  font-size: 13px; color: var(--dim); min-width: 58px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── narrow windows ───────────────────────────────────────────────────────
   The three groups stop fitting on one line at about 1000px, and a grid whose
   middle column is fixed does not degrade — it overlaps. So the tools take a
   row of their own, which loses nothing: every button stays reachable and only
   the bar gets taller. Below that the title goes (the tab already names the
   document) and then the zoom buttons (scroll and pinch still zoom). */

@media (max-width: 1000px) {
  :root { --header-h: 84px; }
  .headerbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 2px;
    padding: 3px 6px;
  }
  .hb-start { grid-area: 1 / 1; }
  .hb-end { grid-area: 1 / 2; }
  .hb-center {
    grid-area: 2 / 1 / 2 / -1;
    justify-self: center;
    max-width: 100%;
    overflow-x: auto;          /* narrower still: the tools scroll, never clip */
    scrollbar-width: none;
  }
  .hb-center::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  .hb-start .title { display: none; }
}

@media (max-width: 620px) {
  #sidebar { width: 150px; }
}

/* ── search ──────────────────────────────────────────────────────────────── */

.searchbar {
  position: absolute;
  top: calc(var(--header-h) + 8px); right: 14px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  background: var(--popover-bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--popover-shadow);
}
.searchbar[hidden] { display: none; }
.searchbar input {
  font: inherit; color: inherit; background: var(--btn-bg);
  border: none; border-radius: 6px; padding: 5px 9px; min-height: 30px;
  width: 190px;
}
.searchbar input:focus { outline: 2px solid var(--accent-bg); outline-offset: -1px; }
.searchbar input.not-found { background: color-mix(in srgb, rgb(224,27,36) 22%, transparent); }
.search-count {
  font-size: 12px; color: var(--dim); min-width: 62px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── body: sidebar + page ────────────────────────────────────────────────── */

#body { flex: 1; min-height: 0; display: flex; }

#sidebar {
  width: 190px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--window-bg);
  border-right: 1px solid var(--separator);
  min-height: 0;
}
#sidebar[hidden] { display: none; }

.side-bookmarks { padding: 0 10px 6px; font-size: 12px; color: var(--dim); margin: 0; }
.side-bookmarks[hidden] { display: none; }

.side-switch { padding: 8px; }
.side-switch[hidden] { display: none; }
.side-switch > button { flex: 1; font-size: 13px; min-height: 28px; }
.side-switch > button.selected { background: var(--accent-bg); color: var(--accent-fg); }
.side-switch > button.selected:hover { background: var(--accent-bg); }

#side-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border-radius: 8px;
  padding: 4px;
  text-align: left;
  position: relative;
  flex: none;
}
.row:hover { background: var(--btn-hover); }

.thumb { flex-direction: column; gap: 3px; }
.thumb-img {
  display: grid; place-items: center;
  width: 100%; min-height: 40px;
  background: #fff;
  border: 1px solid var(--separator);
  border-radius: 3px;
  overflow: hidden;
}
.thumb-img canvas { width: 100%; height: auto; display: block; }
.thumb-no { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.thumb.current .thumb-img { outline: 2px solid var(--accent-bg); outline-offset: 1px; }
/* set aside: still in the document and still editable, but skipped when paging
   and left out of an export. Dimmed rather than removed, because the row is the
   only way to select it again and bring it back. */
.thumb.picked { background: color-mix(in srgb, var(--accent-bg) 18%, transparent); }
.thumb.picked .thumb-img { outline: 2px solid var(--accent-bg); outline-offset: 1px; }
.thumb.hidden-page .thumb-img { opacity: .35; }
.thumb.hidden-page .thumb-no { text-decoration: line-through; color: var(--dim); }
.thumb.current .thumb-no { color: var(--window-fg); font-weight: 700; }
/* A LINKED RUN shares one body (row 129), so every page of it is a page these
   notes are for. Lit as a group — a tinted row and a dashed edge — while the
   one you are actually on keeps the solid outline: the run says which notes,
   the outline says which page. */
.thumb.in-run { background: color-mix(in srgb, var(--accent-bg) 12%, transparent); }
.thumb.in-run .thumb-img { outline: 2px dashed color-mix(in srgb, var(--accent-bg) 55%, transparent);
                           outline-offset: 1px; }
.thumb.in-run.current .thumb-img { outline: 2px solid var(--accent-bg); }
.thumb.in-run .thumb-no { color: var(--window-fg); }

.outline-row { padding-right: 8px; }
.outline-title {
  flex: 1; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.outline-page {
  font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums;
}
/* on an entry's own page: the solid bar and a bold title */
.outline-row.current { background: var(--btn-bg); }
.outline-row.current .outline-title { font-weight: 700; }
.outline-row.current::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: var(--accent-bg);
}
/* an outline entry sitting on a page of the run reads as part of it too */
.outline-row.in-run { background: color-mix(in srgb, var(--accent-bg) 12%, transparent); }
.outline-row.in-run.current { background: var(--btn-bg); }

/* the entry you fall UNDER keeps only a faint tint */
.outline-row.containing { background: color-mix(in srgb, var(--accent-bg) 10%, transparent); }

/* the "you are here" rule, between the two entries you fall between */
.here-line {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px; flex: none;
  font-size: 10px; color: var(--accent-bg);
  font-variant-numeric: tabular-nums;
  pointer-events: none;    /* a row you could click would be a destination
                              that does not exist */
}
.here-line::before, .here-line::after {
  content: ""; height: 2px; background: var(--accent-bg); border-radius: 1px;
}
.here-line::before { width: 10px; }
.here-line::after { flex: 1; }

.row.dragging { opacity: .4; }

/* the page context menu */
.page-menu {
  position: fixed;
  z-index: 40;
  min-width: 150px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--popover-bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--popover-shadow);
}
.page-menu button {
  background: transparent;
  text-align: left;
  border-radius: 6px;
  font-size: 13px;
  min-height: 28px;
  padding: 4px 8px;
}
.page-menu button:hover { background: var(--btn-hover); }
.page-menu button.danger { color: rgb(224, 27, 36); }
/* one colour for "this removes something", wherever the verb is offered */
.menu-item.danger { color: rgb(224, 27, 36); }

/* the sidebar drop gap */
.row.gap-before::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: -3px;
  height: 2px; background: var(--accent-bg); border-radius: 1px;
}
#side-list.gap-end::after {
  content: ""; height: 2px; background: var(--accent-bg);
  border-radius: 1px; margin: 0 2px; flex: none;
}

/* ── the page ────────────────────────────────────────────────────────────── */

/* The page and the notes, split by a draggable divider. The default is 62% to
   the page — the same split the desktop app opens on. */
#paned {
  flex: 1;
  min-width: 0;
  display: flex;
}

#stage {
  flex: 0 0 62%;
  min-width: 0;
  background: var(--surround);
  position: relative;
}

#divider {
  flex: none;
  width: 6px;
  cursor: col-resize;
  background: var(--separator);
  position: relative;
  touch-action: none;
}
#divider::after {
  content: "";
  position: absolute;
  inset: 0 -4px;      /* the grab region is wider than the paint */
}
#divider:hover, #divider.dragging { background: var(--accent-bg); }

/* Collapsed, the handle is the only way back to the page, so it wears a wide
   visible grip instead of a few pixels hard against the window edge. */
#paned.full-notes > #stage { flex-basis: 0 !important; overflow: hidden; }
/* the other end: the notes folded away entirely */
#paned.notes-hidden > #divider { width: 10px; }
#paned.notes-hidden > #notes-col { overflow: hidden; }
#paned.full-notes > #divider {
  width: 14px;
  background: var(--window-bg);
  border-right: 1px solid var(--separator);
  display: grid;
  place-items: center;
}
#paned.full-notes > #divider::before {
  content: "";
  width: 4px; height: 34px;
  border-radius: 2px;
  background: var(--dim);
  opacity: .5;
}
#paned.full-notes > #divider:hover::before { opacity: 1; }

#notes-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--view-bg);
  min-height: 0;
}
.notes-header {
  flex: none;
  padding: 6px 12px;
  border-bottom: 1px solid var(--separator);
  background: var(--window-bg);
}
.notes-header .check { margin: 0; font-size: 13px; color: var(--dim); }
.notes-header[hidden] { display: none; }

#notes {
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--view-bg);
  overflow: hidden;
  display: flex;
}
#notes .cm-editor { flex: 1; min-width: 0; }

.drop-hint {
  position: absolute;
  inset: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--accent-bg);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-bg) 12%, transparent);
  pointer-events: none;
  text-align: center;
  padding: 16px;
}
.drop-hint[hidden] { display: none; }
.drop-hint strong { font-size: 16px; }
.drop-hint span { font-size: 13px; color: var(--dim); }

#page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  /* stops the browser's own pan/zoom taking the gesture before a pointer event
     is ever delivered — without it a finger scrolls the page instead of
     reaching the router */
  touch-action: none;
}

/* ── popover ─────────────────────────────────────────────────────────────── */

.popover {
  position: absolute;
  top: calc(var(--header-h) + 5px);
  right: 8px;
  z-index: 20;
  width: 288px;
  max-height: calc(100vh - var(--header-h) - 20px);
  overflow-y: auto;
  background: var(--popover-bg);
  border-radius: 12px;
  box-shadow: var(--popover-shadow);
  border: 1px solid var(--separator);
}
.popover[hidden] { display: none; }
.popover-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; }

.dim { color: var(--dim); font-size: 13px; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.popover label.dim { margin-top: 6px; }

/* The overflow menu. A row is the BUTTON — same element, same id, same handler
   as when it stood in the bar — grown a label, because a verb you had to go
   looking for is one you no longer recognise by its icon alone. */
.menu-popover { width: 268px; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px;
  font-size: 14px; text-align: left; border-radius: 6px;
}
.menu-item svg { width: 16px; height: 16px; flex: none; }
/* one row is a LINK to the tour, not a button; it must not read as a different
   kind of thing just because it navigates */
a.menu-item { color: inherit; text-decoration: none; }
.menu-item:hover { background: var(--btn-hover); }
.menu-item .menu-key { margin-left: auto; font-size: 12px; color: var(--dim); }
.menu-sep { height: 1px; background: var(--separator); margin: 4px 2px; }

.scale-row { display: flex; align-items: center; gap: 8px; }
.scale-row output {
  font-size: 12px; color: var(--dim); min-width: 30px; text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--accent-bg);
  height: 20px;
}
input[type="color"] {
  width: 44px; height: 28px; padding: 2px;
  border: 1px solid var(--separator); border-radius: 6px;
  background: var(--btn-bg); cursor: pointer;
}

select {
  font: inherit; color: inherit; background: var(--btn-bg);
  border: none; border-radius: 6px; padding: 5px 8px; min-height: 30px;
  cursor: pointer;
}

.swatches { display: flex; gap: 5px; margin-top: 4px; }
.swatches button {
  width: 26px; height: 26px; border-radius: 999px; padding: 0;
  border: 1px solid rgb(0 0 0 / 20%);
}

.check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.check input { accent-color: var(--accent-bg); width: 16px; height: 16px; }

hr { border: none; border-top: 1px solid var(--separator); margin: 10px 0 2px; width: 100%; }

.hint { margin: 2px 0 6px; font-size: 12px; color: var(--dim); }

/* the bindings list — the discovery surface, and the only way to CLEAR a
   binding: a chord-click can move one, never remove it */
.binding {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
}
.binding .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.binding .chord { font-size: 13px; min-width: 92px; }
.binding .tool { font-size: 13px; color: var(--dim); flex: 1; }
.binding button {
  background: transparent; padding: 2px 6px; min-height: 22px;
  font-size: 12px; color: var(--dim); border-radius: 5px;
}
.binding button:hover { background: var(--btn-hover); color: inherit; }

.recent-popover { width: 300px; }
.recent-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-radius: 6px;
}
.recent-row:hover { background: var(--btn-hover); }
.recent-row .open {
  flex: 1; min-width: 0; text-align: left; background: transparent;
  padding: 2px 4px; min-height: 24px;
}
.recent-row .name {
  display: block; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.recent-row .when { display: block; font-size: 11px; color: var(--dim); }
.recent-row.gone .name { color: var(--dim); text-decoration: line-through; }
.recent-row .drop {
  background: transparent; color: var(--dim); padding: 2px 6px;
  min-height: 22px; font-size: 14px; border-radius: 5px;
}
.recent-row .drop:hover { background: var(--btn-hover); color: inherit; }
.recent-empty { font-size: 13px; color: var(--dim); padding: 6px 4px; }

.name-popover { top: calc(var(--header-h) + 8px); right: 14px; width: 260px; }
.name-popover input[type="text"] {
  font: inherit; color: inherit; background: var(--btn-bg);
  border: none; border-radius: 6px; padding: 6px 9px; min-height: 32px;
  width: 100%;
}
.name-popover input:focus { outline: 2px solid var(--accent-bg); outline-offset: -1px; }
#bookmark-btn.marked { color: var(--accent-bg); }
#bookmark-btn.marked svg path { fill: currentColor; }

/* a bookmark row in the outline */
.outline-row .star { color: var(--accent-bg); font-size: 11px; flex: none; }

/* ── toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: absolute;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--popover-bg);
  border: 1px solid var(--separator);
  box-shadow: var(--popover-shadow);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* the toast itself ignores the pointer; only an action button in it does not */
.toast { pointer-events: none; }
.toast button { pointer-events: auto; background: var(--btn-bg); }
.toast[hidden] { display: none; }

/* Shown only when startup stalls — see watchForStalledStart. A blank sheet with
   no explanation is the worst way for this to fail. */
.startup-error {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto 28px;
  max-width: 460px;
  z-index: 100;
  padding: 14px 18px;
  text-align: center;
  line-height: 1.5;
  font-size: 14px;
  background: var(--popover-bg);
  border: 1px solid var(--separator);
  border-radius: 12px;
  box-shadow: var(--popover-shadow);
}
.startup-error.info { border-color: var(--accent-bg); }
.startup-error button {
  margin-top: 10px;
  background: var(--btn-bg);
}

.startup-error code {
  font-family: ui-monospace, monospace;
  background: var(--btn-bg);
  padding: 1px 5px;
  border-radius: 4px;
}