/* /Components/Pages/CssPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Hand-written CSS for /scoped. No Tailwind anywhere in this file.

   Written the way a careful person writes it, because a straw man would
   prove nothing: values live in custom properties rather than scattered as
   literals, class names describe the thing rather than its paint, and the
   responsive rules sit together at the bottom instead of being sprinkled.

   Two honest observations fall out of doing it properly.

   First, the token layer reappears. Nobody who has maintained a stylesheet
   writes #0a0a0a forty times; you end up declaring variables at the top and
   referring to them below. That is the same idea as theme.css — the
   difference is that these ones stop at this file, so the next page starts
   over.

   Second, dark mode is where the bill arrives. Every value has to be stated
   twice, once here and once under html.dark: eleven of them for this one
   screen, plus a rule for the delta colour that is not a token at all. On the
   token pages that number is zero — swapping the variable swaps everything
   that reads it, and no component ever learns that dark mode exists.

   Note what Blazor does to these selectors. Each one is rewritten to end in
   a [b-xxxxx] attribute, so `.badge` becomes `.badge[b-xxxxx]`. A class plus
   an attribute beats a plain class, which is why a rule in a file like this
   silently outranks any utility — cause 4 in DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════ */

.page[b-1eotdsecdk] {
  /* Local to this page. That is the point and the limitation. */
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #6b7280;
  --line: #e5e7eb;
  --accent: #171717;
  --accent-ink: #fafafa;
  --ok-bg: #f4f4f5;
  --ok-ink: #18181b;
  --bad-bg: #fee2e2;
  --bad-ink: #991b1b;
  --radius: 0.625rem;
  --gap: 1.5rem;

  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
}

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

.head[b-1eotdsecdk] { margin-bottom: var(--gap); }

.eyebrow[b-1eotdsecdk] {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.head h1[b-1eotdsecdk] {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lede[b-1eotdsecdk] { margin: 0.35rem 0 0; color: var(--ink-soft); }

/* ─────────────────────────────── stats ─────────────────────────────── */

.stats[b-1eotdsecdk] {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;   /* widened in the media queries below */
  margin-bottom: var(--gap);
}

.stat[b-1eotdsecdk] {
  position: relative;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.stat-label[b-1eotdsecdk] { margin: 0; color: var(--ink-soft); font-size: 0.8125rem; }
.stat-value[b-1eotdsecdk] { margin: 0.25rem 0 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.stat-note[b-1eotdsecdk]  { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.75rem; }

.delta[b-1eotdsecdk] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.delta.up[b-1eotdsecdk]   { color: #15803d; }
.delta.down[b-1eotdsecdk] { color: var(--ink-soft); }

/* ─────────────────────────────── panels ─────────────────────────────── */

.panel[b-1eotdsecdk] {
  min-width: 0;            /* without this the table below widens the page */
  margin-bottom: var(--gap);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.panel h2[b-1eotdsecdk] { margin: 0; font-size: 1rem; font-weight: 600; }
.sub[b-1eotdsecdk] { margin: 0.2rem 0 1rem; color: var(--ink-soft); font-size: 0.8125rem; }

/* ─────────────────────────────── table ─────────────────────────────── */

.table-wrap[b-1eotdsecdk] {
  min-width: 0;
  overflow-x: auto;        /* the wrapper scrolls; the page does not */
}

table[b-1eotdsecdk] { width: 100%; border-collapse: collapse; }

th[b-1eotdsecdk], td[b-1eotdsecdk] {
  padding: 0.6rem 0.5rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

th[b-1eotdsecdk] { color: var(--ink-soft); font-weight: 500; font-size: 0.8125rem; }
tbody tr:last-child td[b-1eotdsecdk] { border-bottom: 0; }
.num[b-1eotdsecdk] { text-align: right; font-variant-numeric: tabular-nums; }
.muted[b-1eotdsecdk] { color: var(--ink-soft); }
.name[b-1eotdsecdk] { font-weight: 500; }

.avatar[b-1eotdsecdk] {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ink-soft);
  font-size: 0.625rem;
  vertical-align: middle;
}

.badge[b-1eotdsecdk] {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
}

.badge.ok[b-1eotdsecdk]      { background: var(--ok-bg); color: var(--ok-ink); }
.badge.bad[b-1eotdsecdk]     { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }
.badge.quiet[b-1eotdsecdk]   { color: var(--ink-soft); }
.badge.neutral[b-1eotdsecdk] { color: var(--ink); }

/* ─────────────────────────────── form ─────────────────────────────── */

.field[b-1eotdsecdk] { margin-bottom: 0.9rem; }
.field label[b-1eotdsecdk] { display: block; margin-bottom: 0.35rem; font-weight: 500; }

.field input[b-1eotdsecdk],
.field select[b-1eotdsecdk] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

/* Written out by hand, for every focusable thing, on every page that needs
   it. This one rule is what the Focus.Ring constant exists to stop being
   copied around. */
.field input:focus-visible[b-1eotdsecdk],
.field select:focus-visible[b-1eotdsecdk],
.btn:focus-visible[b-1eotdsecdk] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.actions[b-1eotdsecdk] { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

.btn[b-1eotdsecdk] {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.btn:hover[b-1eotdsecdk] { background: var(--ok-bg); }

.btn.primary[b-1eotdsecdk] {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.btn.primary:hover[b-1eotdsecdk] { opacity: 0.9; }

.footnote[b-1eotdsecdk] { margin: 0; color: var(--ink-soft); font-size: 0.75rem; text-align: center; }
.footnote code[b-1eotdsecdk] { font-size: 0.75rem; }

/* ─────────────────────────── responsive ───────────────────────────
   Three breakpoints, chosen and maintained here. On the other two pages
   this is `sm:grid-cols-2 lg:grid-cols-4` written where it applies.
   Neither is wrong; they fail differently. A stylesheet keeps the rules
   together and the markup clean, and lets a breakpoint drift out of step
   with the markup without anything complaining.
   ──────────────────────────────────────────────────────────────────── */

@media (min-width: 40rem) {
  .page[b-1eotdsecdk] { padding: 2.5rem 1.5rem; }
  .stats[b-1eotdsecdk] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel[b-1eotdsecdk] { padding: 1.5rem; }
}

@media (min-width: 64rem) {
  .page[b-1eotdsecdk] { padding: 3.5rem 2rem; }
  .stats[b-1eotdsecdk] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─────────────────────────── dark theme ───────────────────────────
   Eleven values restated, plus one rule for a colour that never was a token.
   Every pair has to be said twice. The theme
   class is put on <html> by the server, and Blazor only appends its scope
   attribute to the last selector in a chain — so `html.dark .stat` becomes
   `html.dark .stat[b-xxxxx]` and works as written.

   This block is the honest price of the approach. On the token pages the
   equivalent is one line per value in theme.css, and the components never
   learn that dark mode exists.
   ─────────────────────────────────────────────────────────────────── */

html.dark .page[b-1eotdsecdk] {
  --bg: #0a0a0a;
  --surface: #0f0f10;
  --ink: #fafafa;
  --ink-soft: #a1a1aa;
  --line: #27272a;
  --accent: #fafafa;
  --accent-ink: #0a0a0a;
  --ok-bg: #1c1c1f;
  --ok-ink: #e4e4e7;
  --bad-bg: #7f1d1d;
  --bad-ink: #fecaca;
}

html.dark .delta.up[b-1eotdsecdk] { color: #4ade80; }
/* /Components/Pages/CssShell.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   The app shell, hand-written. Mirror of /sidebar, which does the same
   thing with Tailwind variants.

   The state lives where it lives on the other page too — in data attributes
   on the shell. That part is the platform, not the framework; nothing here
   needs Tailwind to read an ancestor's state.

   What Tailwind was doing is the *scoping*. Over there a single class,

       lg:group-data-[collapsed=true]/sidebar:hidden

   sits on the element it hides and carries the breakpoint and the ancestor
   condition with it. Here those two have to be taken apart: the ancestor
   condition becomes a descendant selector, and "from lg up" becomes a media
   query the rule has to be physically moved inside. So the rule for an
   element no longer lives next to that element, and the collapse behaviour
   ends up split across five places in this file — look for the COLLAPSE
   markers below, numbered 1 to 5.

   That is the honest trade. In exchange the markup stays clean: the nav item
   over there carries five variant strings, the one here carries `class="item"`.
   ═══════════════════════════════════════════════════════════════════════ */

.shell[b-h401p4qp9z] {
  --bg: #ffffff;
  --panel: #fafafa;
  --ink: #0a0a0a;
  --ink-soft: #6b7280;
  --line: #e5e7eb;
  --hover: #f4f4f5;
  --active: #ececee;
  --mark-bg: #171717;
  --mark-ink: #fafafa;
  --bad-bg: #fee2e2;
  --bad-ink: #991b1b;
  --rail: 3.5rem;
  --wide: 16rem;

  display: flex;
  min-height: calc(100vh - 3.5rem);
  color: var(--ink);
  font-size: 0.875rem;
}

.shell svg[b-h401p4qp9z] { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────────────────────── sidebar ───────────────────────────── */

.bar[b-h401p4qp9z] {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--wide);
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 200ms ease-out, width 200ms ease-out;
}

/* Drawer open — below the breakpoint only; the wide rules override it. */
.shell[data-open="true"] .bar[b-h401p4qp9z] { transform: translateX(0); }

.scrim[b-h401p4qp9z] {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.shell[data-open="true"] .scrim[b-h401p4qp9z] { opacity: 1; pointer-events: auto; }

.brand[b-h401p4qp9z] { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem; border-bottom: 1px solid var(--line); }

.mark[b-h401p4qp9z] {
  display: inline-grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex: none;
  border-radius: 0.5rem;
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-size: 0.6875rem;
  font-weight: 600;
}

.mark.small[b-h401p4qp9z] { width: 1.6rem; height: 1.6rem; }
.mark.tiny[b-h401p4qp9z]  { width: 1.4rem; height: 1.4rem; font-size: 0.5625rem; background: var(--hover); color: var(--ink-soft); }

.brand-text[b-h401p4qp9z], .who-text[b-h401p4qp9z] { display: grid; min-width: 0; }
.brand-name[b-h401p4qp9z], .who-name[b-h401p4qp9z] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub[b-h401p4qp9z], .who-mail[b-h401p4qp9z] { color: var(--ink-soft); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu[b-h401p4qp9z] { flex: 1; overflow-y: auto; padding: 0.5rem; display: grid; gap: 0.125rem; align-content: start; }

.item[b-h401p4qp9z] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 2rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.item:hover[b-h401p4qp9z] { background: var(--hover); color: var(--ink); }
.item[aria-current="page"][b-h401p4qp9z] { background: var(--active); color: var(--ink); font-weight: 500; }
.item:focus-visible[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: -2px; }

.item-text[b-h401p4qp9z] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.count[b-h401p4qp9z] {
  flex: none;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--active);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.who[b-h401p4qp9z] { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem; border-top: 1px solid var(--line); }

/* ───────────────────────────── main ───────────────────────────── */

.main[b-h401p4qp9z] { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.topbar[b-h401p4qp9z] {
  position: sticky;
  top: 3.5rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.5rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.icon-btn[b-h401p4qp9z] {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex: none;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.icon-btn:hover[b-h401p4qp9z] { background: var(--hover); color: var(--ink); }
.icon-btn:focus-visible[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }

.crumbs[b-h401p4qp9z] { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-root[b-h401p4qp9z], .sep[b-h401p4qp9z] { color: var(--ink-soft); }

.content[b-h401p4qp9z] { padding: 1.25rem 0.75rem; min-width: 0; }
.content h1[b-h401p4qp9z] { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.lede[b-h401p4qp9z] { margin: 0.3rem 0 1.25rem; color: var(--ink-soft); }

.cards[b-h401p4qp9z] { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }

.card[b-h401p4qp9z] { min-width: 0; padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--panel); }
.card-label[b-h401p4qp9z] { margin: 0; color: var(--ink-soft); font-size: 0.8125rem; }
.card-value[b-h401p4qp9z] { margin: 0.2rem 0 0; font-size: 1.5rem; font-weight: 600; }
.card-note[b-h401p4qp9z] { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.75rem; }

.panel[b-h401p4qp9z] { min-width: 0; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--panel); padding: 0.75rem; }
.table-wrap[b-h401p4qp9z] { min-width: 0; overflow-x: auto; }

table[b-h401p4qp9z] { width: 100%; border-collapse: collapse; }
th[b-h401p4qp9z], td[b-h401p4qp9z] { padding: 0.55rem 0.5rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th[b-h401p4qp9z] { color: var(--ink-soft); font-weight: 500; font-size: 0.8125rem; }
tbody tr:last-child td[b-h401p4qp9z] { border-bottom: 0; }
.num[b-h401p4qp9z] { text-align: right; font-variant-numeric: tabular-nums; }
.muted[b-h401p4qp9z] { color: var(--ink-soft); }
.strong[b-h401p4qp9z] { font-weight: 500; }

.tag[b-h401p4qp9z] { display: inline-block; padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; }
.tag.bad[b-h401p4qp9z] { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }
.tag.quiet[b-h401p4qp9z] { color: var(--ink-soft); }

.footnote[b-h401p4qp9z] { margin: 1.25rem 0 0; color: var(--ink-soft); font-size: 0.75rem; }

/* Which of the two toggles is shown is itself a breakpoint decision, so it
   also has to be stated twice — once here, once in the media query. */
.only-wide[b-h401p4qp9z] { display: none; }

/* ─────────────────────── from the breakpoint up ───────────────────────
   Everything that was a `lg:` prefix over there lives in here instead.
   ─────────────────────────────────────────────────────────────────── */

@media (min-width: 64rem) {
  .bar[b-h401p4qp9z] {
    position: sticky;
    top: 3.5rem;
    height: calc(100vh - 3.5rem);
    transform: none;              /* the drawer transform must be undone */
  }

  .scrim[b-h401p4qp9z] { display: none; }       /* and the scrim must be taken away */

  .only-narrow[b-h401p4qp9z] { display: none; }
  .only-wide[b-h401p4qp9z] { display: inline-grid; }

  .content[b-h401p4qp9z] { padding: 1.5rem 1.25rem; }
  .cards[b-h401p4qp9z] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* COLLAPSE 1 — the width. */
  .shell[data-collapsed="true"] .bar[b-h401p4qp9z] { width: var(--rail); }

  /* COLLAPSE 2 — everything that does not fit in the rail. Five rules,
     because five different elements have to be told separately. Over there
     each of these was one class on the element itself. */
  .shell[data-collapsed="true"] .brand-text[b-h401p4qp9z],
  .shell[data-collapsed="true"] .who-text[b-h401p4qp9z],
  .shell[data-collapsed="true"] .item-text[b-h401p4qp9z],
  .shell[data-collapsed="true"] .count[b-h401p4qp9z] { display: none; }

  /* COLLAPSE 3 — what is left has to be recentred, because the row was
     laid out for a label that is no longer there. */
  .shell[data-collapsed="true"] .brand[b-h401p4qp9z],
  .shell[data-collapsed="true"] .who[b-h401p4qp9z] { justify-content: center; padding-inline: 0; }
  .shell[data-collapsed="true"] .item[b-h401p4qp9z] { justify-content: center; padding-inline: 0; }
}

@media (min-width: 80rem) {
  .cards[b-h401p4qp9z] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .content[b-h401p4qp9z] { padding: 2rem 2rem; }
}

/* ───────────────────────────── dark theme ─────────────────────────────
   Same bill as the other page: every pair stated twice.
   ─────────────────────────────────────────────────────────────────── */

html.dark .shell[b-h401p4qp9z] {
  --bg: #0a0a0a;
  --panel: #0f0f10;
  --ink: #fafafa;
  --ink-soft: #a1a1aa;
  --line: #27272a;
  --hover: #1c1c1f;
  --active: #26262a;
  --mark-bg: #fafafa;
  --mark-ink: #0a0a0a;
  --bad-bg: #7f1d1d;
  --bad-ink: #fecaca;
}

html.dark .scrim[b-h401p4qp9z] { background: rgb(0 0 0 / 0.7); }

/* ═══════════════════════════════════════════════════════════════════════
   Everything below is the price of matching /sidebar screen for screen.
   Each block is a handful of rules the Tailwind version never wrote,
   because it composed them from utilities at the point of use.
   ═══════════════════════════════════════════════════════════════════════ */

.group-label[b-h401p4qp9z] {
  margin: 0.75rem 0 0.2rem;
  padding: 0 0.6rem;
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Stand-in for the caption once it no longer fits — shown only in the rail. */
.group-rule[b-h401p4qp9z] { display: none; height: 1px; margin: 0.6rem auto; width: 1.5rem; background: var(--line); }

.foot[b-h401p4qp9z] { border-top: 1px solid var(--line); padding: 0.5rem; display: grid; gap: 0.25rem; }
.who[b-h401p4qp9z] { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-top: 0; }

/* ─────────────────────────── topbar extras ─────────────────────────── */

.search[b-h401p4qp9z] {
  display: none;                 /* no room on a phone; shown from sm up */
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0 0.6rem;
  height: 2rem;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--ink-soft);
}

.search input[b-h401p4qp9z] { min-width: 0; width: 10rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.8125rem; outline: none; }
.search:focus-within[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }

.bell[b-h401p4qp9z] { position: relative; margin-left: auto; }
.search + .bell[b-h401p4qp9z] { margin-left: 0; }
.dot[b-h401p4qp9z] { position: absolute; top: 0.35rem; right: 0.35rem; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #ef4444; }

/* ─────────────────────────── content head ─────────────────────────── */

.head[b-h401p4qp9z] { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.head-text[b-h401p4qp9z] { min-width: 0; }
.head-actions[b-h401p4qp9z] { display: flex; gap: 0.5rem; }

.btn[b-h401p4qp9z] {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover[b-h401p4qp9z] { background: var(--hover); }
.btn:focus-visible[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.primary[b-h401p4qp9z] { border-color: transparent; background: var(--mark-bg); color: var(--mark-ink); }
.btn.primary:hover[b-h401p4qp9z] { opacity: 0.9; }
.btn.ghost[b-h401p4qp9z] { border-color: transparent; background: none; }
.btn.ghost:hover[b-h401p4qp9z] { background: var(--hover); }

/* ─────────────────────────── panels ─────────────────────────── */

.panel h2[b-h401p4qp9z] { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.sub[b-h401p4qp9z] { margin: 0.15rem 0 0.9rem; color: var(--ink-soft); font-size: 0.8125rem; }
.panel.flush[b-h401p4qp9z] { padding: 0; }

/* Spacing between blocks is stated as a relationship, because in a
   stylesheet there is no "gap on the parent" to lean on — every pairing that
   can occur has to be named. Miss one and two blocks end up flush. */
.cards + .split[b-h401p4qp9z], .cards + .panel[b-h401p4qp9z],
.split + .panel[b-h401p4qp9z], .panel + .panel[b-h401p4qp9z],
.panel + .actions[b-h401p4qp9z] { margin-top: 1rem; }

/* ─────────────────────────── stat cards ─────────────────────────── */

.card[b-h401p4qp9z] { position: relative; }

.card-label[b-h401p4qp9z] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding-right: 3.5rem;      /* room for the delta parked top-right */
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.card-label svg[b-h401p4qp9z] { width: 0.875rem; height: 0.875rem; }
.card-label span[b-h401p4qp9z] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-value[b-h401p4qp9z] { margin: 0.2rem 0 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.delta[b-h401p4qp9z] {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.delta.up[b-h401p4qp9z] { color: var(--ink); }

/* ─────────────────────── activity and deliverability ─────────────────── */

.split[b-h401p4qp9z] { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.feed[b-h401p4qp9z] { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.feed li[b-h401p4qp9z] { display: flex; align-items: flex-start; gap: 0.7rem; }
.feed-text[b-h401p4qp9z] { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.feed-line[b-h401p4qp9z] { font-size: 0.875rem; }
.when[b-h401p4qp9z] { color: var(--ink-soft); font-size: 0.75rem; }

.bars[b-h401p4qp9z] { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.bars li[b-h401p4qp9z] { display: grid; gap: 0.35rem; }
.bar-head[b-h401p4qp9z] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; }
.bar-num[b-h401p4qp9z] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.track[b-h401p4qp9z] { height: 0.4rem; border-radius: 999px; background: var(--hover); overflow: hidden; }
.fill[b-h401p4qp9z] { display: block; height: 100%; background: var(--mark-bg); }

/* ─────────────────────────── domains ─────────────────────────── */

.hosts[b-h401p4qp9z] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.hosts li[b-h401p4qp9z] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

.host-icon[b-h401p4qp9z] { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 0.375rem; background: var(--hover); color: var(--ink-soft); }
.host-text[b-h401p4qp9z] { display: grid; flex: 1; min-width: 0; }
.host-text .strong[b-h401p4qp9z], .host-text .sub[b-h401p4qp9z] { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-text .sub[b-h401p4qp9z] { font-size: 0.75rem; }
.hosts .tag[b-h401p4qp9z] { flex: none; }

/* ─────────────────────────── coming soon ─────────────────────────── */

.empty[b-h401p4qp9z] { display: grid; justify-items: center; gap: 0.6rem; padding: 3.5rem 1rem; text-align: center; }
.empty-icon[b-h401p4qp9z] { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--hover); color: var(--ink-soft); }
.empty-icon svg[b-h401p4qp9z] { width: 1.25rem; height: 1.25rem; }
.empty .sub[b-h401p4qp9z] { margin: 0; }
.narrow-text[b-h401p4qp9z] { max-width: 24rem; }

/* ─────────────────────────── form ─────────────────────────── */

.field[b-h401p4qp9z] { margin-bottom: 0.85rem; }
.field:last-child[b-h401p4qp9z] { margin-bottom: 0; }
.field label[b-h401p4qp9z] { display: block; margin-bottom: 0.3rem; font-weight: 500; }

.field input[b-h401p4qp9z], .field select[b-h401p4qp9z] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg);
  color: inherit;
  font: inherit;
}

.field input:focus-visible[b-h401p4qp9z], .field select:focus-visible[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }

.row[b-h401p4qp9z] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* A row whose control is too wide to share a line on a phone. Stacked until
   there is room, then back to a row — two rules for what the Tailwind version
   says once, in place, as `flex-col sm:flex-row`. */
.row.stack[b-h401p4qp9z] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.row-text[b-h401p4qp9z] { display: grid; min-width: 0; }
.row-text .sub[b-h401p4qp9z] { margin: 0.1rem 0 0; }
.rule[b-h401p4qp9z] { height: 1px; margin: 0.9rem 0; border: 0; background: var(--line); }

/* A switch with no component behind it. The input carries the state and the
   semantics; the track and knob are decoration reacting to :checked. Over
   there this is one <Switch @bind-Value> and the library's problem. */
.toggle[b-h401p4qp9z] { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.toggle input[b-h401p4qp9z] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sw-track[b-h401p4qp9z] { display: inline-flex; align-items: center; width: 2rem; height: 1.15rem; padding: 1px; border-radius: 999px; background: var(--line); transition: background 150ms ease-out; }
.sw-knob[b-h401p4qp9z] { display: block; width: 1rem; height: 1rem; border-radius: 999px; background: var(--bg); transition: transform 150ms ease-out; }
.toggle input:checked + .sw-track[b-h401p4qp9z] { background: var(--mark-bg); }
.toggle input:checked + .sw-track .sw-knob[b-h401p4qp9z] { transform: translateX(calc(100% - 2px)); }
.toggle input:focus-visible + .sw-track[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Same again for the checkbox. */
.check[b-h401p4qp9z] { display: flex; align-items: center; gap: 0.6rem; position: relative; cursor: pointer; }
.check input[b-h401p4qp9z] { position: absolute; inset: 0; width: 1rem; height: 1rem; opacity: 0; cursor: pointer; }
.box[b-h401p4qp9z] { display: grid; place-items: center; width: 1rem; height: 1rem; flex: none; border: 1px solid var(--line); border-radius: 0.25rem; color: transparent; }
.box svg[b-h401p4qp9z] { width: 0.75rem; height: 0.75rem; stroke-width: 3; }
.check input:checked + .box[b-h401p4qp9z] { background: var(--mark-bg); border-color: transparent; color: var(--mark-ink); }
.check input:focus-visible + .box[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }

.sr[b-h401p4qp9z] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.actions[b-h401p4qp9z] { display: flex; gap: 0.5rem; }

/* ─────────────────────────── theme control ───────────────────────────
   Calls the same global appTheme.set() the shared control does, and reads
   the same attribute on <html> to decide which option is lit. Three rules,
   one per option, because there is no variant to generate them.
   ─────────────────────────────────────────────────────────────────── */

.seg[b-h401p4qp9z] { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px; border-radius: 0.5rem; background: var(--hover); }

.opt[b-h401p4qp9z] {
  padding: 0.25rem 0.55rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.opt:hover[b-h401p4qp9z] { color: var(--ink); }
.opt:focus-visible[b-h401p4qp9z] { outline: 2px solid var(--ink); outline-offset: 2px; }

html[data-theme-choice="light"] .opt.light[b-h401p4qp9z],
html[data-theme-choice="dark"] .opt.dark[b-h401p4qp9z],
html[data-theme-choice="system"] .opt.system[b-h401p4qp9z] { background: var(--bg); color: var(--ink); }

/* ─────────────────────── from the breakpoint up ─────────────────────── */

@media (min-width: 40rem) {
  .search[b-h401p4qp9z] { display: inline-flex; }
  .head[b-h401p4qp9z] { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .row.stack[b-h401p4qp9z] { flex-direction: row; align-items: center; gap: 1rem; }
}

@media (min-width: 64rem) {
  .split[b-h401p4qp9z] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .panel.wide[b-h401p4qp9z] { grid-column: span 3; }
  .panel.narrow[b-h401p4qp9z] { grid-column: span 2; }

  /* COLLAPSE 4 — the caption swaps for the divider, and the account row
     loses its text like everything else. Two more rules that exist only
     because the rail exists. */
  .shell[data-collapsed="true"] .group-label[b-h401p4qp9z] { display: none; }
  .shell[data-collapsed="true"] .group-rule[b-h401p4qp9z] { display: block; }
  .shell[data-collapsed="true"] .foot[b-h401p4qp9z] { padding-inline: 0.25rem; }
}

/* ─────────────────── the last of the parity details ─────────────────── */

.chev[b-h401p4qp9z] { width: 0.85rem; height: 0.85rem; flex: none; color: var(--ink-soft); }

.tiny-btn[b-h401p4qp9z] { width: 1.75rem; height: 1.75rem; }
.tiny-btn svg[b-h401p4qp9z] { width: 0.95rem; height: 0.95rem; }
.signout[b-h401p4qp9z] { display: contents; }

/* Both icons ship and CSS picks one, so a prerendered page never flashes
   the wrong one — the server cannot know the visitor's theme. */
.only-dark[b-h401p4qp9z] { display: none; }
html.dark .only-light[b-h401p4qp9z] { display: none; }
html.dark .only-dark[b-h401p4qp9z] { display: block; }

.panel-foot[b-h401p4qp9z] { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8125rem; }

.opt[b-h401p4qp9z] { display: inline-flex; align-items: center; gap: 0.3rem; }
.opt svg[b-h401p4qp9z] { width: 0.85rem; height: 0.85rem; }

/* A form screen reads better as a narrow centred column than stretched, so
   this one screen gets a cap — the same call the Tailwind shell makes. */
.content[data-section="settings"][b-h401p4qp9z] { max-width: 42rem; margin-inline: auto; }

@media (min-width: 64rem) {
  /* COLLAPSE 5 — the two footer controls have no room in the rail either. */
  .shell[data-collapsed="true"] .hide-rail[b-h401p4qp9z] { display: none; }
}