/*
 * switchboard — switchboard.css
 * The .sb-* component layer for the charm-web design language, consuming tokens.css.
 * Governing: ADR-0018 (charm-web design language), SPEC-0015 REQ "Application Shell And
 * Navigation", REQ "Design Token System".
 */

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sb-canvas);
  /* The signature charm-web canvas: a faint Tron floor grid on the void/paper (ADR-0018). */
  background-image:
    linear-gradient(var(--sb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sb-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--sb-text);
  font-family: var(--sb-font-mono);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sb-primary);
}
a:hover {
  color: var(--sb-primary-hover);
}

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

/* ---- app shell: top bar over horizontal nav + main (SPEC-0015 shell) ---- */

.sb-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The nav strip sits full-width under the top bar; main flows beneath it. */
.sb-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- top bar: wordmark · ~/operator breadcrumb · MCP indicator · + new · theme ---- */

.sb-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px;
  background: var(--sb-panel);
  border-bottom: 1px solid var(--sb-border);
}

.sb-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
}

.sb-wordmark {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--sb-ink);
  letter-spacing: -0.02em;
}

/* ~/operator breadcrumb (SPEC-0015 "Application Shell And Navigation"). */
.sb-crumb {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  color: var(--sb-muted);
  margin-left: 4px;
}

.sb-topbar__spacer {
  margin-left: auto;
}

/* MCP-connected indicator: a flat highlight bar, cell-honest (no pill). */
.sb-mcp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: var(--sb-radius-chip);
  background: var(--sb-live-bg);
  color: var(--sb-live);
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sb-mcp--down {
  background: var(--sb-status-failed-bg);
  color: var(--sb-status-failed);
}
.sb-mcp__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* "+ new" wizard launcher. */
.sb-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--sb-radius-btn);
  background: var(--sb-primary);
  color: var(--sb-on-primary);
  font-family: var(--sb-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sb-glow-primary);
  transition: background-color var(--sb-dur-enter) var(--sb-ease), transform var(--sb-dur-enter) var(--sb-ease-spring);
}
.sb-new:hover {
  background: var(--sb-primary-hover);
  color: var(--sb-on-primary);
  transform: translateY(-1px);
}

/* Theme control (SPEC-0015 REQ "Theme Toggle"): visible toggle, cycles day/night. */
.sb-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-btn);
  background: var(--sb-raised-lo);
  color: var(--sb-secondary);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--sb-dur-enter) var(--sb-ease), color var(--sb-dur-enter) var(--sb-ease);
}
.sb-theme-toggle:hover {
  border-color: var(--sb-ring);
  color: var(--sb-ink);
}
/* The control shows the theme a click switches TO: night glyph on day, day glyph at night. */
.sb-theme-toggle__night,
[data-theme="night"] .sb-theme-toggle__day {
  display: inline;
}
.sb-theme-toggle__day,
[data-theme="night"] .sb-theme-toggle__night {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) .sb-theme-toggle__night {
    display: none;
  }
  :root:not([data-theme="day"]) .sb-theme-toggle__day {
    display: inline;
  }
}

.sb-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-live-bg);
  color: var(--sb-live);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Idle zero-state: the pill is always present (it is the counts frame's SSE swap target) but
   reads muted with a still dot until traffic arrives (SPEC-0013 top-bar live rate). */
.sb-live--idle {
  background: var(--sb-header-strip);
  color: var(--sb-faint-2);
}
.sb-live--idle .sb-live__dot {
  animation: none;
}

.sb-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: sb-live-pulse var(--sb-dur-pulse) var(--sb-ease) infinite;
}

.sb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sb-primary);
  color: var(--sb-on-primary);
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sb-linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-family: var(--sb-font-mono);
  font-size: 12px;
  color: var(--sb-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb-linklike:hover {
  color: var(--sb-primary);
}

/* ---- nav: the six-view horizontal strip (SPEC-0015: board · todos · endpoints ·
   personas · friends · providers). Keeps the .sb-rail hooks the tests and sb.js target;
   the charm-web shell renders it as a lowercase mono nav with an underline on the
   active view, not a side rail. ---- */

.sb-rail {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--sb-panel);
  border-bottom: 1px solid var(--sb-border);
}

.sb-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.sb-rail__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 2px solid transparent;
  color: var(--sb-secondary);
  font-family: var(--sb-font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
  text-decoration: none;
}
.sb-rail__item:hover {
  color: var(--sb-ink);
  background: var(--sb-row-hover);
}

.sb-rail__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  background: var(--sb-faint-3);
}

.sb-rail__item[aria-current="page"] {
  border-bottom-color: var(--sb-accent);
  color: var(--sb-ink);
  font-weight: 700;
}
.sb-rail__item[aria-current="page"] .sb-rail__dot {
  background: var(--sb-accent);
}

.sb-rail__count {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-muted);
}

.sb-rail__foot {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-muted);
}

.sb-conn__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--sb-live);
}
.sb-conn--down .sb-conn__dot {
  background: var(--sb-status-failed);
}
.sb-conn--down {
  color: var(--sb-status-failed);
}

/* dots-only nav below 820px: labels, counts, and the connectivity text collapse */
@media (max-width: 820px) {
  .sb-rail {
    padding: 0 10px;
  }
  .sb-rail__item {
    justify-content: center;
    padding: 10px 8px;
  }
  .sb-rail__label,
  .sb-rail__count,
  .sb-rail__foot .sb-conn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sb-rail__dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }
  .sb-rail__foot {
    justify-content: center;
  }
}

/* ---- main content ---- */

.sb-main {
  flex: 1;
  min-width: 0;
  padding: 26px 30px 60px;
  max-width: 1160px;
}

/* ---- content-info footer (contentinfo landmark) with the key-hint slot ---- */

.sb-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 30px;
  border-top: 1px solid var(--sb-border);
  background: var(--sb-panel);
}

.sb-footer__text {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sb-muted);
}

/* Key-hint footer (SPEC-0015: every view ends in the active keymap, TUI help-line style).
   sb-keys.js renders `key action` pairs from the single keymap registry into this slot. */
.sb-keys {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-faint);
}
.sb-keys__pair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sb-keys__key {
  padding: 1px 5px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-chip);
  background: var(--sb-raised-lo);
  color: var(--sb-secondary);
  font-size: 10px;
}
.sb-keys__sep {
  color: var(--sb-faint);
}

.sb-page-title {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--sb-ink);
  margin: 0 0 4px;
}

.sb-tagline {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  color: var(--sb-muted);
  margin: 0 0 20px;
}

.sb-section-title {
  font-family: var(--sb-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--sb-ink);
  margin: 28px 0 10px;
}

/* ---- view header: page title + tagline left, header chrome (legend, reaper pill) right ----
   Design record board/todos headers (#179). Wraps on narrow viewports. */
.sb-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sb-view-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Section head: the mono section title with a right-aligned hint (Board 'Incoming lines' ·
   'newest first · live', design record #179). */
.sb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sb-section-hint {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-faint-2);
  white-space: nowrap;
}

/* Reaper pill: the amber 'lease reaper active' chip in the Durable-queue headers. Ported from the
   design record's ringPulse pill onto the existing token trio (amber trust-token palette) and the
   sb-ring-pulse keyframes — same 1.4s scale/opacity pulse. */
.sb-reaper {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--sb-radius-chip);
  background: var(--sb-trust-token-bg);
  color: var(--sb-trust-token);
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.sb-reaper__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sb-trust-token-dot);
  animation: sb-ring-pulse var(--sb-dur-pulse) var(--sb-ease) infinite;
}

.sb-backlink {
  font-family: var(--sb-font-mono);
  font-size: 12px;
}

.sb-muted {
  color: var(--sb-muted);
  font-size: 13px;
}

.sb-mono {
  font-family: var(--sb-font-mono);
}

/* ---- micro-label (mono uppercase) ---- */

.sb-microlabel {
  display: block;
  font-family: var(--sb-font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sb-faint);
}

/* ---- cards & stat tiles ---- */

.sb-card {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 16px 18px;
  margin: 14px 0;
}

.sb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.sb-tile {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 14px 16px;
}
.sb-tile--alert {
  background: var(--sb-alert-tint);
  border-color: var(--sb-status-failed);
}

.sb-tile__value {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--sb-ink);
  line-height: 1.2;
  margin-top: 4px;
}

.sb-tile__unit {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-faint-2);
  margin-top: 2px;
}

/* ---- badges, pills, tags, status ---- */

/* Flat, square, cell-honest chips (ADR-0018: no pill radii on trust/state — only the LIVE
   throughput pill keeps --sb-radius-pill). */
.sb-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--sb-radius-chip);
  font-family: var(--sb-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sb-badge--signed {
  color: var(--sb-trust-signed);
  background: var(--sb-trust-signed-bg);
}
.sb-badge--token {
  color: var(--sb-trust-token);
  background: var(--sb-trust-token-bg);
}
.sb-badge--open {
  color: var(--sb-trust-open);
  background: var(--sb-trust-open-bg);
}
.sb-badge--queue {
  color: var(--sb-trust-queue);
  background: var(--sb-trust-queue-bg);
}
/* endpoint state pills share the badge grammar */
.sb-badge--active {
  color: var(--sb-status-done);
  background: var(--sb-status-done-bg);
}
.sb-badge--revoked {
  color: var(--sb-status-neutral);
  background: var(--sb-divider);
}

.sb-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: var(--sb-radius-chip);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--sb-secondary);
  background: var(--sb-code-bg);
}
/* Trust-tinted provider tag (design drawer identity block: the tag chip carries the trust
   badge's colors). Shares the --sb-trust-* token family with .sb-badge--*. */
.sb-tag--signed {
  color: var(--sb-trust-signed);
  background: var(--sb-trust-signed-bg);
}
.sb-tag--token {
  color: var(--sb-trust-token);
  background: var(--sb-trust-token-bg);
}
.sb-tag--open {
  color: var(--sb-trust-open);
  background: var(--sb-trust-open-bg);
}
.sb-tag--queue {
  color: var(--sb-trust-queue);
  background: var(--sb-trust-queue-bg);
}

/* Todo state chips: ● dot + lowercase mono word on the AA-gated status tint pair — flat and
   square like the trust badges (ADR-0018 "flat chips for trust/state"; SPEC-0015 REQ "Design
   Token System" holds the pairs to AA in both themes). */
.sb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--sb-radius-chip);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  background: var(--sb-divider);
  color: var(--sb-status-neutral);
}
.sb-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sb-status-neutral);
}
.sb-status--pending {
  color: var(--sb-status-pending);
  background: var(--sb-status-pending-bg);
}
.sb-status--pending .sb-status__dot {
  background: var(--sb-trust-queue-dot);
}
.sb-status--claimed {
  color: var(--sb-status-claimed);
  background: var(--sb-status-claimed-bg);
}
.sb-status--claimed .sb-status__dot {
  background: var(--sb-trust-token-dot);
}
.sb-status--done {
  color: var(--sb-status-done);
  background: var(--sb-status-done-bg);
}
.sb-status--done .sb-status__dot {
  background: var(--sb-trust-signed-dot);
}
.sb-status--failed {
  color: var(--sb-status-failed);
  background: var(--sb-status-failed-bg);
}
.sb-status--failed .sb-status__dot {
  background: var(--sb-trust-open-dot);
}

.sb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--sb-radius-pill);
  border: 1px solid var(--sb-input-border-soft);
  background: var(--sb-panel);
  color: var(--sb-secondary);
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
}

/* trust legend (Board) */
.sb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

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

.sb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  overflow: hidden;
  margin: 10px 0;
}
.sb-table th {
  text-align: left;
  padding: 9px 12px;
  background: var(--sb-header-strip);
  font-family: var(--sb-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-muted);
}
.sb-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--sb-divider);
  font-size: 13px;
  vertical-align: middle;
}
.sb-table tbody tr:hover {
  background: var(--sb-row-hover);
}

/* ---- patch-panel lanes (SPEC-0015 REQ "Patch Panel Board") ---- */

.sb-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0;
  align-items: start;
}

.sb-lane__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--sb-border);
}

.sb-lane__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  background: var(--sb-status-neutral);
}
.sb-lane--received .sb-lane__dot {
  background: var(--sb-trust-token-dot);
}
.sb-lane--verified .sb-lane__dot {
  background: var(--sb-cyan);
}
.sb-lane--patched .sb-lane__dot {
  background: var(--sb-status-done);
}

.sb-lane__title {
  margin: 0;
  font-family: var(--sb-font-mono);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sb-ink);
}

.sb-lane__count {
  margin-left: auto;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-muted);
  white-space: nowrap;
}
.sb-lane__n {
  color: var(--sb-text);
  font-weight: 600;
}

.sb-lane__cards {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One patch-panel card: glyph + headline, chips, detail · age foot (SPEC-0015 card anatomy). */
.sb-lcard {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sb-lcard__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sb-lcard__text {
  min-width: 0;
}

.sb-lcard__title {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--sb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-lcard__sub {
  display: block;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-lcard__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-lcard__foot {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-faint-2);
}
.sb-lcard__detail {
  color: var(--sb-muted);
}

/* Ephemeral received-lane states (SSE-only; sb-live.js expires them via data-sb-ephemeral). */
.sb-status--verifying {
  color: var(--sb-trust-token-dot);
}
.sb-lcard--rejected {
  border-color: var(--sb-status-failed);
  background: var(--sb-alert-tint);
}
.sb-status--rejected {
  color: var(--sb-status-failed);
}
.sb-status--rejected .sb-status__dot {
  background: var(--sb-trust-open-dot);
}
/* Deduped: this delivery collapsed onto an existing todo — a truthful transient resolution rather
   than a perpetual "verifying". */
.sb-status--deduped {
  color: var(--sb-dedup);
}
.sb-status--deduped .sb-status__dot {
  background: var(--sb-dedup);
}

/* Ringing pulse: a just-received line, still verifying. */
.sb-lcard__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: sb-ring-pulse var(--sb-dur-pulse) var(--sb-ease) infinite;
}

/* Claim (mono action, brass-bordered) on pending feed rows. */
.sb-btn--claim {
  border-color: var(--sb-accent);
  color: var(--sb-trust-token);
  background: var(--sb-trust-token-bg);
}
.sb-btn--claim:hover {
  background: var(--sb-trust-token-bg);
  border-color: var(--sb-accent-bright);
  color: var(--sb-trust-token);
}

/* Throughput tile activity bars: 24 per-minute buckets, brass bars, current minute oxblood
   (design record 03-components "Throughput tile"). Heights are server-stamped inline styles. */
.sb-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 42px;
  margin-top: 10px;
}
.sb-bars__bar {
  flex: 1 1 0;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sb-accent-chart);
}
.sb-bars__bar--now {
  background: var(--sb-primary);
}
.sb-bars__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--sb-font-mono);
  font-size: 9.5px;
  color: var(--sb-faint-2);
  margin-top: 3px;
}

.sb-empty {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  color: var(--sb-faint);
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--sb-input-border-soft);
  border-radius: var(--sb-radius-card);
}

/* ---- buttons ---- */

.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--sb-radius-btn);
  border: 1px solid transparent;
  background: var(--sb-primary);
  color: var(--sb-on-primary);
  font-family: var(--sb-font-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.sb-btn:hover {
  background: var(--sb-primary-hover);
  color: var(--sb-on-primary);
}
.sb-btn:disabled {
  background: var(--sb-primary-disabled);
  cursor: not-allowed;
}

.sb-btn--success {
  background: var(--sb-trust-signed);
}
.sb-btn--success:hover {
  background: var(--sb-trust-signed-dot);
}

.sb-btn--secondary {
  background: transparent;
  border-color: var(--sb-input-border-soft);
  color: var(--sb-secondary);
}
.sb-btn--secondary:hover {
  background: var(--sb-row-hover);
  color: var(--sb-text);
}

.sb-btn--danger {
  background: transparent;
  border-color: var(--sb-status-failed);
  color: var(--sb-status-failed);
}
.sb-btn--danger:hover {
  background: var(--sb-alert-tint);
  color: var(--sb-status-failed);
}

.sb-btn--mono {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 7px;
  background: var(--sb-code-bg);
  border-color: var(--sb-input-border-soft);
  color: var(--sb-body);
}
.sb-btn--mono:hover {
  background: var(--sb-row-hover);
  color: var(--sb-ink);
}

/* ---- forms ---- */

.sb-field {
  margin: 12px 0;
}

.sb-field label,
.sb-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--sb-font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sb-faint);
}

.sb-input,
.sb-field input,
.sb-field select,
.sb-field textarea {
  width: 100%;
  max-width: 420px;
  padding: 8px 11px;
  border-radius: var(--sb-radius-btn);
  border: 1px solid var(--sb-input-border);
  background: var(--sb-input-bg);
  color: var(--sb-text);
  font-family: var(--sb-font-mono);
  font-size: 13px;
}

.sb-help {
  margin-top: 5px;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-faint);
}

/* ---- code ---- */

code,
.sb-code {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  background: var(--sb-code-bg);
  color: var(--sb-body);
  border-radius: 4px;
  padding: 1px 5px;
}

pre,
.sb-pre {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  background: var(--sb-code-bg);
  color: var(--sb-body);
  border: 1px solid var(--sb-border-strong);
  border-radius: var(--sb-radius-btn);
  padding: 12px 14px;
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
}

/* ---- callouts ---- */

.sb-callout {
  border: 1px solid var(--sb-input-border-soft);
  border-left: 3px solid var(--sb-accent);
  border-radius: var(--sb-radius-btn);
  background: var(--sb-panel);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--sb-body);
  margin: 12px 0;
}
.sb-callout--danger {
  border-left-color: var(--sb-status-failed);
  background: var(--sb-alert-tint);
  color: var(--sb-status-failed);
}
.sb-callout--warn {
  border-left-color: var(--sb-ring);
  background: var(--sb-status-claimed-bg);
  color: var(--sb-status-claimed);
}

/* ---- overlay slot & toast region (present-but-empty; wired by later stories) ---- */

.sb-overlay[hidden] {
  display: none;
}
.sb-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--sb-scrim);
}

.sb-toasts {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.sb-toast {
  background: var(--sb-toast-bg);
  color: var(--sb-toast-text);
  font-family: var(--sb-font-mono);
  font-size: 12px;
  border-radius: 10px;
  padding: 9px 16px;
  box-shadow: var(--sb-shadow-toast);
  animation: sb-fade-up var(--sb-dur-enter) var(--sb-ease);
  pointer-events: auto;
}

/* ---- Todos view: ❯ search prompt, flat filter chips, queue table (SPEC-0015 REQ "Todos View
   And Drawer"; ADR-0018) ---- */

/* Search behind the terminal prompt glyph (design language: prompts are ❯, typed in the mono
   face). The global `/` key (sb-keys.js) focuses the input. */
.sb-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 14px;
}
.sb-search__prompt {
  font-family: var(--sb-font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--sb-cyan);
}
.sb-search__input {
  max-width: 340px;
}

/* Filter chips: flat and square (ADR-0018 — no pill radii on state controls), lowercase mono,
   active chip carried on the hot-pink accent like the nav's active underline. */
.sb-fpills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.sb-fpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--sb-radius-chip);
  border: 1px solid var(--sb-input-border-soft);
  background: var(--sb-panel);
  color: var(--sb-secondary);
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
  text-decoration: none;
}
.sb-fpill:hover {
  background: var(--sb-row-hover);
  color: var(--sb-text);
}
.sb-fpill--active {
  background: var(--sb-nav-active-bg);
  border-color: var(--sb-accent);
  color: var(--sb-ink);
  font-weight: 700;
}
.sb-fpill__n {
  font-size: 11px;
  color: var(--sb-muted);
}
.sb-fpill--active .sb-fpill__n {
  color: var(--sb-accent);
}

.sb-table-wrap {
  overflow-x: auto;
}
.sb-table--todos {
  min-width: 720px;
}

.sb-trow__source {
  font-weight: 600;
  color: var(--sb-text);
}
.sb-trow__kind {
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
  color: var(--sb-muted);
}
.sb-trow__sub {
  display: block;
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-faint-2);
  margin-top: 2px;
}
.sb-trow__age {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-faint-2);
  white-space: nowrap;
}
.sb-trow__act {
  text-align: right;
  white-space: nowrap;
}

/* dedup ×N badge — the idempotency key collapsed multiple deliveries onto one todo. */
.sb-dedup {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--sb-radius-chip);
  font-family: var(--sb-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--sb-dedup);
  background: var(--sb-dedup-bg);
}

/* Whole-row drawer affordance (design record #179): the row itself opens the drawer — sb.js
   forwards row clicks/Enter to the id cell's trigger. The pointer signals it; keyboard focus on
   the tabindexed <tr> gets the global :focus-visible brass outline; the row hover tint above
   already marks the hot row. */
.sb-trow[data-sb-row-open] {
  cursor: pointer;
}

/* Reaper re-surface flash: a claimed lease expired back to pending — highlight the row briefly as
   its OOB swap lands (SPEC-0015 REQ "Todos View And Drawer": SSE row updates preserved). */
.sb-trow--flash {
  animation: sb-row-flash var(--sb-dur-row) var(--sb-ease);
}

/* ---- todo detail drawer (SPEC-0015 REQ "Todos View And Drawer"; ADR-0018) ---- */

.sb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  overflow-y: auto;
  background: var(--sb-panel);
  border-left: 1px solid var(--sb-border-strong);
  box-shadow: var(--sb-shadow-drawer);
  padding: 20px 22px 28px;
  animation: sb-drawer-in var(--sb-dur-enter) var(--sb-ease);
}
/* Inline standalone fallback (the /todos/{id} page): the same panel, not fixed to the edge. */
.sb-drawer-inline .sb-drawer {
  position: static;
  width: 100%;
  max-width: 480px;
  box-shadow: none;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  animation: none;
}

.sb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sb-drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The line id leads in the display voice (Space Mono, like view titles). */
.sb-drawer__id {
  font-family: var(--sb-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--sb-ink);
}
.sb-drawer__close {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--sb-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--sb-radius-chip);
}
.sb-drawer__close:hover {
  background: var(--sb-row-hover);
  color: var(--sb-ink);
}

/* Identity block — trust-tinted provider tag beside the source name and event type, at the top
   of the drawer body (design drawer: detail.tag / detail.src / detail.type). */
.sb-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
}
.sb-identity__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sb-identity__src {
  font-weight: 600;
  font-size: 15px;
  color: var(--sb-ink);
}
.sb-identity__type {
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
  color: var(--sb-secondary);
  word-break: break-word;
}

.sb-lease {
  border: 1px solid var(--sb-input-border-soft);
  border-radius: var(--sb-radius-card);
  background: var(--sb-status-claimed-bg);
  padding: 12px 14px;
  margin: 12px 0;
}
/* Card head row: "Visibility lease · {agent}" label left, the live countdown right (design). */
.sb-lease__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sb-lease .sb-microlabel {
  color: var(--sb-status-claimed);
}
.sb-lease__count {
  font-family: var(--sb-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-status-claimed);
  white-space: nowrap;
}
/* Reaper hint (design: "if the lease expires, the reaper re-surfaces this todo to the queue"). */
.sb-lease__hint {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-status-claimed);
  margin: 8px 0 0;
}
.sb-lease__track {
  height: 6px;
  border-radius: 3px;
  background: var(--sb-lease-track);
  overflow: hidden;
}
.sb-lease__bar {
  height: 100%;
  background: var(--sb-accent);
  transition: width 1s linear;
}
.sb-drawer__acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Failed-with-retry card (drawer): the scheduled-backoff countdown toward next_retry_at.
   Design failed-card ("retry with backoff · attempt N" + live ↻ countdown); SPEC-0003 scheduled
   backoff. Mirrors .sb-lease's card shape in the failed status tint. */
.sb-retry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--sb-input-border-soft);
  border-radius: var(--sb-radius-card);
  background: var(--sb-status-failed-bg);
  padding: 12px 14px;
  margin: 12px 0;
}
.sb-retry__label {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-status-failed);
}
.sb-retry__count {
  font-family: var(--sb-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-status-failed);
  white-space: nowrap;
}
/* Todos-table failed-row retry sub-line ticks in the failed tint too. */
.sb-trow__sub--retry {
  color: var(--sb-status-failed);
}

.sb-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 14px 0;
}
.sb-meta__cell dt {
  font-family: var(--sb-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-faint);
  margin-bottom: 3px;
}
.sb-meta__cell dd {
  margin: 0;
  font-size: 13px;
  color: var(--sb-text);
}
.sb-meta__idem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
/* dedupLine — the always-present dedup summary sentence under the idempotency key (design:
   "N duplicate deliveries collapsed via idempotency key" / "no duplicate deliveries"). */
.sb-meta__dedupline {
  display: block;
  width: 100%;
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-faint-2);
}

.sb-drawer__payload {
  max-height: 240px;
  margin: 4px 0 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Glyph lifecycle timeline (ADR-0018 iconography: type the glyph in the mono face — ✓ for
   resolved steps, ○ for the steps ahead — over a faint box-drawing rail). */
.sb-timeline {
  list-style: none;
  margin: 6px 0 16px;
  padding: 0;
}
.sb-timeline li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
  color: var(--sb-faint-2);
}
.sb-timeline li::before {
  content: "○";
  position: absolute;
  left: 2px;
  top: 4px;
  font-family: var(--sb-font-mono);
  font-size: 11.5px;
  line-height: inherit;
  color: var(--sb-faint-3);
}
.sb-timeline li + li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -6px;
  height: 10px;
  border-left: 1px solid var(--sb-divider);
}
.sb-timeline__done {
  color: var(--sb-body);
}
.sb-timeline__done::before {
  content: "✓";
  color: var(--sb-mint);
}

.sb-drawer__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
/* Terminal footer for done todos (design: "✓ completed · acked to source" where the action
   buttons would be — a finished todo is read-only). */
.sb-drawer__done {
  flex: 1;
  text-align: center;
  font-family: var(--sb-font-mono);
  font-size: 12px;
  color: var(--sb-status-done);
  padding: 10px 0;
}

/* ---- login (public page, no rail) ---- */

.sb-login {
  max-width: 460px;
  margin: 8vh auto 0;
  padding: 0 20px;
}

/* ---- motion ---- */

@keyframes sb-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

@keyframes sb-ring-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.75);
  }
}

@keyframes sb-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sb-drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0.4;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes sb-row-flash {
  0% {
    background: var(--sb-row-flash);
  }
  100% {
    background: transparent;
  }
}

/* ---- Personas view (SPEC-0013) ---- */

.sb-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.sb-persona {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.sb-persona__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.sb-persona__name {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--sb-ink);
  margin: 0;
}
.sb-persona__agent {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-faint);
  margin: 2px 0 0;
}
/* the human-authored system prompt reads as a quotation (design canvas: italic, quoted, brass
   left rule) */
.sb-persona__prompt {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--sb-accent);
  background: var(--sb-code-bg);
  border-radius: var(--sb-radius-btn);
  font-size: 13px;
  font-style: italic;
  color: var(--sb-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sb-persona__prompt::before {
  content: "\201C"; /* “ */
}
.sb-persona__prompt::after {
  content: "\201D"; /* ” */
}
/* "Advertised skills · derived from vended verbs" section: microlabel over the skill + verb chips */
.sb-persona__skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-persona__url {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sb-persona__urllink {
  font-size: 11px;
  color: var(--sb-secondary);
  overflow-wrap: anywhere;
}
.sb-persona__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.sb-persona__acts form {
  margin: 0;
}
.sb-persona__pinned {
  margin: 0;
  padding: 8px 11px;
  border: 1px dashed var(--sb-input-border-soft);
  border-radius: var(--sb-radius-btn);
  color: var(--sb-body);
}
/* the agent-card URL shown under the modal's name field (oxblood-accented per the design canvas) */
.sb-persona__urlpreview {
  color: var(--sb-primary);
  overflow-wrap: anywhere;
}

/* chips: derived skills, advertised verbs, and selectable verb/queue checkboxes */
.sb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--sb-radius-pill);
  border: 1px solid var(--sb-input-border-soft);
  background: var(--sb-panel);
  color: var(--sb-secondary);
  font-family: var(--sb-font-mono);
  font-size: 11px;
}
.sb-chip--skill {
  color: var(--sb-ink);
  background: var(--sb-nav-active-bg);
  border-color: var(--sb-accent);
}
.sb-chip--mono {
  color: var(--sb-body);
}
.sb-chip--check {
  cursor: pointer;
}
.sb-chip--check input {
  width: auto;
  margin: 0;
}
.sb-help--inline {
  display: inline;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* create/edit modal — a centered dialog in the shared overlay slot */
.sb-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border-strong);
  border-radius: var(--sb-radius-card);
  box-shadow: var(--sb-shadow-drawer);
  padding: 20px 22px 24px;
  animation: sb-drawer-in var(--sb-dur-enter) var(--sb-ease);
}
.sb-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sb-modal__title {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--sb-ink);
  margin: 0;
}
.sb-modal__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.sb-modal__foot-spacer {
  flex: 1;
}
.sb-modal__foot form {
  margin: 0;
}
.sb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sb-font-mono, var(--sb-font-mono));
  font-size: 13px;
  color: var(--sb-body);
}
.sb-toggle input {
  width: auto;
  margin: 0;
}

/* ---- stateful Published/Draft publish toggle (persona modal) ----
   Design canvas: a track + knob switch with a dynamic title (Published/Draft) and hint. Both state
   labels are in the DOM; the visually-hidden-but-focusable checkbox's :checked flips the track,
   slides the knob, and swaps which label shows — pure CSS, so it works inside cloned <template>
   content and without JS. */
.sb-pubtoggle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  text-transform: none;
  letter-spacing: 0;
}
.sb-pubtoggle__input {
  /* visually hidden but still focusable/checkable (never display:none — that drops it from the
     form and the keyboard) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.sb-pubtoggle__track {
  flex: none;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--sb-input-border);
  transition: background 0.2s ease;
}
.sb-pubtoggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sb-input-bg);
  box-shadow: 0 1px 3px rgba(20, 15, 8, 0.35);
  transition: left 0.2s ease;
}
.sb-pubtoggle__input:checked ~ .sb-pubtoggle__track {
  background: var(--sb-live);
}
.sb-pubtoggle__input:checked ~ .sb-pubtoggle__track .sb-pubtoggle__knob {
  left: 18px;
}
.sb-pubtoggle__input:focus-visible ~ .sb-pubtoggle__track {
  outline: 2px solid var(--sb-accent);
  outline-offset: 2px;
}
.sb-pubtoggle__text {
  min-width: 0;
}
.sb-pubtoggle__state {
  display: none;
  flex-direction: column;
  gap: 1px;
}
.sb-pubtoggle__input:not(:checked) ~ .sb-pubtoggle__text .sb-pubtoggle__state--off,
.sb-pubtoggle__input:checked ~ .sb-pubtoggle__text .sb-pubtoggle__state--on {
  display: flex;
}
.sb-pubtoggle__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--sb-ink);
}
.sb-pubtoggle__hint {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-faint);
}

@media (prefers-reduced-motion: reduce) {
  .sb-pubtoggle__track,
  .sb-pubtoggle__knob {
    transition: none;
  }
}
.sb-field textarea {
  max-width: 100%;
  resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .sb-live__dot,
  .sb-lcard__pulse,
  .sb-reaper__dot,
  .sb-ring,
  .sb-drawer,
  .sb-modal,
  .sb-trow--flash {
    animation: none;
  }
  .sb-lease__bar {
    transition: none;
  }
}

/* ============================ Friends view (SPEC-0015) ============================ */
/* ============================ Endpoints view + vend modal (SPEC-0013) ============================ */

.sb-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* friend status badges reuse the badge grammar keyed by section group, matching the design canvas
   FR_STATUS palette (incoming amber · awaiting blue · established green · blocked red) via the
   shared trust/status tokens (ADR-0018 no per-template colors). */
.sb-badge--fr-incoming {
  color: var(--sb-status-claimed);
  background: var(--sb-status-claimed-bg);
}
.sb-badge--fr-outgoing {
  color: var(--sb-trust-queue);
  background: var(--sb-trust-queue-bg);
}
.sb-badge--fr-active {
  color: var(--sb-status-done);
  background: var(--sb-status-done-bg);
}
.sb-badge--fr-blocked {
  color: var(--sb-status-failed);
  background: var(--sb-status-failed-bg);
}

/* cards grid + one friendship card */
.sb-fcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.sb-fcard {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 14px 16px;
  margin-bottom: 6px;
}
.sb-vend-open {
  flex: none;
}

/* Endpoint cards grid. */
.sb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.sb-epcard {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-fcard--incoming {
  border-color: var(--sb-accent);
}
/* Outgoing pending: locally sent, awaiting the remote operator — provisional, so dashed (#174). */
.sb-fcard--outgoing {
  border-color: var(--sb-accent);
  border-style: dashed;
}
.sb-fcard__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Direction arrows (DESIGN Friends): → outgoing pending, ← incoming pending, ↔ established. */
.sb-fcard__arrow {
  color: var(--sb-faint);
}
.sb-fcard__arrow--incoming,
.sb-fcard__arrow--outgoing {
  color: var(--sb-accent);
  font-weight: 600;
}
.sb-fcard__arrow--blocked {
  color: var(--sb-status-failed);
}
/* The remote agent reads distinct from the local face: brass mono handle + faint board host. */
.sb-fcard__remote-handle {
  color: var(--sb-accent);
  font-weight: 600;
}
.sb-fcard__host {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-faint-2);
}
/* Blocked cards are dimmed but legible — proof the link existed (DESIGN Friends). */
.sb-fcard--blocked {
  opacity: 0.62;
}
/* The requester's note reads as a quoted callout on incoming requests (DESIGN Friends). */
.sb-fcard__note {
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--sb-muted);
  border-left: 2px solid var(--sb-input-border);
  padding-left: 11px;
  margin: 10px 0 0;
}
/* Card footer: the relative-time meta line left, actions right, over a hairline (DESIGN Friends). */
.sb-fcard__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--sb-divider);
  padding-top: 10px;
  margin-top: 10px;
}
.sb-fcard__meta {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-muted);
  min-width: 0;
}
.sb-fcard__foot .sb-fcard__acts {
  margin-left: auto;
}
.sb-fcard__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* intent chips */
.sb-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--sb-radius-chip);
  border: 1px solid var(--sb-border);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-ink);
  background: var(--sb-panel);
}
.sb-chip--none {
  color: var(--sb-faint);
  font-style: italic;
}

/* SPEC-0015 sections: status dot + mono uppercase heading + count + rule line over the cards grid
   per group (pending · in your queue / awaiting their operator / established / blocked). */
.sb-fledger {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sb-fgroup__head {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-secondary);
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sb-fgroup__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.sb-fgroup__dot--incoming {
  background: var(--sb-trust-token-dot);
}
.sb-fgroup__dot--outgoing {
  background: var(--sb-trust-queue-dot);
}
.sb-fgroup__dot--active {
  background: var(--sb-trust-signed-dot);
}
.sb-fgroup__dot--blocked {
  background: var(--sb-trust-open-dot);
}
.sb-fgroup__n {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--sb-faint);
}
.sb-fgroup__rule {
  flex: 1;
  height: 1px;
  background: var(--sb-border);
}
/* inline action forms */
.sb-fform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* A killed endpoint is dimmed but still legible — proof it existed and was revoked. */
.sb-epcard--revoked {
  opacity: 0.62;
  border-style: dashed;
}
.sb-epcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sb-epcard__ident {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Two-letter initials avatar tile on each endpoint card (design canvas: a rounded square in the
   queue-chip palette, distinct from the topbar's round human avatar). */
.sb-epcard__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--sb-chip-queue-bg);
  color: var(--sb-chip-queue);
  font-family: var(--sb-font-mono);
  font-size: 12px;
  font-weight: 600;
}
.sb-epcard__agent {
  font-weight: 600;
  color: var(--sb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-epcard__scope {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.sb-epcard__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sb-epcard__row dt {
  flex: none;
  width: 68px;
}
.sb-epcard__row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 4px;
  align-items: center;
}
.sb-epcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--sb-divider);
  padding-top: 10px;
  margin-top: 2px;
}
.sb-epcard__seen {
  font-size: 12px;
  color: var(--sb-muted);
}
.sb-epcard__killed {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-muted);
}
.sb-epcard__acts {
  display: flex;
  gap: 8px;
}
.sb-epcard__revoke,
.sb-epcard__delete {
  margin: 0;
}

/* Scope chips: queues (brass) and verbs (green), plus a toggle variant for the vend form. */
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--sb-radius-chip);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.sb-chip--queue {
  color: var(--sb-chip-queue);
  background: var(--sb-chip-queue-bg);
  border-color: var(--sb-chip-queue-border);
}
.sb-chip--verb {
  color: var(--sb-chip-verb);
  background: var(--sb-chip-verb-bg);
  border-color: var(--sb-chip-verb-border);
}
.sb-chip--persona {
  color: var(--sb-secondary);
  background: var(--sb-nav-active-bg);
  border-color: var(--sb-border-strong);
}
.sb-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
/* Toggle chips are label-wrapped checkboxes: the native checkbox stays for no-JS + a11y, the chip
   dims when unchecked. */
.sb-chip--toggle {
  cursor: pointer;
  user-select: none;
  opacity: 0.5;
}
.sb-chip--toggle:has(input:checked) {
  opacity: 1;
}
.sb-chip--toggle input {
  margin: 0;
  accent-color: var(--sb-chip-verb);
}
.sb-chip--queue.sb-chip--toggle input {
  accent-color: var(--sb-chip-queue);
}

/* Modal: a centered dialog over the shared overlay scrim (the same #sb-overlay the drawer uses). */
.sb-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border-strong);
  border-radius: var(--sb-radius-modal);
  box-shadow: var(--sb-shadow-modal);
  padding: 20px 22px 24px;
  animation: sb-modal-in var(--sb-dur-enter) var(--sb-ease);
}
.sb-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-modal__title {
  font-family: var(--sb-font-display);
  font-size: 20px;
  margin: 0;
}
.sb-modal__note {
  font-size: 13px;
  color: var(--sb-muted);
  margin: 8px 0 14px;
}
.sb-modal__foot {
  margin-top: 16px;
}
.sb-resolve {
  margin-top: 5px;
  font-family: var(--sb-font-mono);
  font-size: 11px;
}
.sb-resolve__host {
  color: var(--sb-accent);
}
.sb-resolve__hint {
  color: var(--sb-faint);
}

/* visually-hidden label (icon-only / compact controls keep an accessible name) */
.sb-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  gap: 12px;
  margin-bottom: 14px;
}
.sb-modal__title {
  font-family: var(--sb-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--sb-ink);
  margin: 0;
}

/* Inline (no-JS) vend form + reveal panels reuse the card chrome, not the fixed overlay. The reveal
   fragment is the same .sb-modal markup the overlay uses, so — like .sb-drawer-inline — neutralize
   the fixed positioning when it renders inside a page card, and drop the overlay-only close control. */
.sb-vend-inline,
.sb-reveal-inline {
  max-width: 560px;
}
.sb-reveal-inline .sb-modal {
  position: static;
  transform: none;
  width: auto;
  max-height: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
  animation: none;
}
.sb-reveal-inline .sb-drawer__close {
  display: none;
}

/* Vend form / reveal footer: Cancel + submit (or Done) right-aligned, per the design canvas. */
.sb-vend__foot {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@keyframes sb-modal-in {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ---------------------------------------------------------------------------
   Wizard pages (SPEC-0015 REQ "Wizard Interaction Pattern"; ADR-0018): full-page
   routed steps — the vend wizard first (templates/vend.html), the revoke confirm
   page (templates/revoke.html), and every later create/connect flow. */
.sb-wiz {
  max-width: 620px;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 18px 20px 16px;
  margin: 16px 0;
}
/* Step tracker: terminal-style numbered rail; the current step reads accent, done steps muted. */
.sb-wiz__steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 4px;
  padding: 0;
  font-family: var(--sb-font-mono);
  font-size: 12px;
  color: var(--sb-faint);
}
.sb-wiz__step--current {
  color: var(--sb-accent);
  font-weight: 600;
}
.sb-wiz__step--done {
  color: var(--sb-muted);
}
.sb-wiz__step--done::after {
  content: " ✓";
}
.sb-wiz__stepnum {
  opacity: 0.7;
}
.sb-wiz__progress {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  margin: 0 0 12px;
}
/* Lifetime radios render as a vertical choice list (radio stays native for no-JS + a11y). */
.sb-wiz__choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
}
.sb-wiz__choice {
  font-family: var(--sb-font-mono);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Confirm summaries (vend confirm, revoke confirm) reuse the endpoint-card scope rows. */
.sb-wiz__summary {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Endpoint-card head flags: countdown chip + state badge, right-aligned together. */
.sb-epcard__flags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Expiry countdown chip (SPEC-0016 "the endpoints view SHALL show the countdown"): claimed-amber
   family — time-bounded, not failed. sb-live.js may hydrate it live from data-sb-expires-at. */
.sb-chip--expiry {
  color: var(--sb-status-claimed);
  background: var(--sb-status-claimed-bg);
  border-color: transparent;
}

/* One-time reveal, now an inline page section (the wizard completes as a full page render —
   no overlay). */
.sb-reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================================
   Providers view (SPEC-0017; ADR-0020): family sections over the runtime
   registry, per-line trust chips + health + lifecycle, and the two-tier
   catalog — connectable (implemented) vs available (planned, visually
   distinct, no connect path). Governing: ADR-0018.
   ========================================================================== */
.sb-prfam {
  margin: 0 0 22px;
}
/* Family heading mirrors the ledger group heading: mono uppercase + count + rule line. */
.sb-prfam__head {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-secondary);
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sb-prfam__glyph {
  color: var(--sb-accent);
}
.sb-prfam__n {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--sb-faint);
}
.sb-prfam__rule {
  flex: 1;
  height: 1px;
  background: var(--sb-border);
}
.sb-prcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.sb-prcard {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 13px 15px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* A disabled line stays legible but reads dead — the chip says why (SPEC-0017 lifecycle). */
.sb-prcard--disabled {
  opacity: 0.62;
  border-style: dashed;
}
.sb-prcard__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.sb-prcard__ident {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}
.sb-prcard__name {
  font-weight: 600;
  color: var(--sb-ink);
}
.sb-prcard__kind {
  font-size: 11px;
  color: var(--sb-faint-2);
}
.sb-prcard__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sb-prcard__row {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.sb-prcard__row dt {
  flex: none;
  min-width: 52px;
}
.sb-prcard__row dd {
  margin: 0;
  font-size: 12.5px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sb-prcard__secret {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-trust-signed);
}
/* A held-secret gap is a rejected line, not a warning footnote — token/signed reject everything. */
.sb-prcard__secret--missing {
  color: var(--sb-trust-open);
}
.sb-prcard__err {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-trust-open);
}
.sb-prcard__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--sb-divider);
  padding-top: 9px;
  margin-top: 2px;
}
.sb-prcard__rate {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-cyan);
}
.sb-prcard__seen {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
}
/* Configure affordance: a native disclosure so the lifecycle controls work with no JS. */
.sb-prcard__config {
  margin-left: auto;
}
.sb-prcard__config summary {
  list-style: none;
  cursor: pointer;
}
.sb-prcard__config summary::-webkit-details-marker {
  display: none;
}
.sb-prcard__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 8px;
}

/* Catalog (SPEC-0017 REQ "Provider Catalog"): connectable vs available must read differently at a
   glance — available is dashed, dimmed, badged "planned", and contains nothing interactive. */
.sb-prcat {
  margin: 4px 0 8px;
}
.sb-prcat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.sb-catcard {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sb-catcard--available {
  border-style: dashed;
  background: transparent;
  opacity: 0.72;
}
.sb-catcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sb-catcard__title {
  font-weight: 600;
  color: var(--sb-ink);
  margin-right: auto;
}
.sb-catcard__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sb-body);
}
.sb-catcard__foot {
  border-top: 1px solid var(--sb-divider);
  padding-top: 7px;
}
.sb-catcard__state {
  font-family: var(--sb-font-mono);
  font-size: 10.5px;
  color: var(--sb-secondary);
}
/* Planned badge: neutral — deliberately NOT a trust tint; there is no enforced mode to claim. */
.sb-badge--planned {
  color: var(--sb-secondary);
  background: var(--sb-code-bg);
}

/* No-JS inline slot for the confirmation / rotate-reveal panels: the shared modal fragments
   render statically in-flow (the overlay positioning only applies inside #sb-overlay). */
.sb-prinline {
  margin: 0 0 18px;
}
.sb-prinline .sb-modal {
  position: static;
  transform: none;
  animation: none;
  width: min(560px, 100%);
  box-shadow: none;
}

/* ── OAuth consent — the "authorize access" surface (SPEC-0016 REQ "Authorization Code Flow
   With Consent"; ADR-0019). One centered card in the SPEC-0015 full-page pattern: the client's
   ask, the accountable principal, the endpoint binding, and scope bullets derived from the
   endpoint's stored scope. Both themes come free of charge from the token layer. */
.sb-oauth {
  text-align: center;
}
.sb-oauth__bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  margin: 6px 0 14px;
}
.sb-oauth__bars span {
  width: 12px;
  height: 26px;
  border-radius: 3px;
  background: var(--sb-mint);
  opacity: 0.55;
}
.sb-oauth__bars span:nth-child(2) {
  height: 38px;
  opacity: 1;
}
.sb-oauth__title {
  margin: 0 0 10px;
  font-family: var(--sb-font-mono);
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--sb-ink);
}
.sb-oauth__ask {
  margin: 0 auto 14px;
  max-width: 34ch;
  color: var(--sb-body);
  line-height: 1.55;
}
.sb-oauth__principal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  font-family: var(--sb-font-mono);
  font-size: 12.5px;
  color: var(--sb-secondary);
}
.sb-oauth__avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.sb-oauth__binding {
  text-align: left;
}
.sb-oauth__scope {
  margin: 0 0 16px;
  padding: 12px 16px;
  text-align: left;
  background: var(--sb-code-bg);
  border-radius: var(--sb-radius-card);
}
.sb-oauth__bullets {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sb-oauth__bullet {
  font-family: var(--sb-font-mono);
  font-size: 12.5px;
  color: var(--sb-body);
}
.sb-oauth__check {
  color: var(--sb-mint);
  margin-right: 4px;
}
.sb-oauth__form .sb-vend__foot {
  justify-content: center;
}
.sb-oauth__foot {
  margin: 14px 0 0;
  font-size: 11.5px;
/* ============================================================================
   Personas view + wizard (SPEC-0015 REQ "Personas View And Wizard"; ADR-0018):
   the card's initials block + vended-as row, and the wizard's live A2A card
   preview panel rendered from the unsaved draft.
   ========================================================================== */
.sb-persona__ident {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Two-letter initials tile mirroring the endpoint card's avatar (design canvas: rounded square,
   verb-chip palette so persona ≠ endpoint at a glance). */
.sb-persona__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--sb-chip-verb-bg);
  color: var(--sb-chip-verb);
  font-family: var(--sb-font-mono);
  font-size: 13px;
  font-weight: 600;
}
.sb-persona__vendedas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* The wizard's live agent-card preview: a bordered panel beside/below the step form. */
.sb-wiz__preview {
  margin: 14px 0 0;
}
.sb-cardprev {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--sb-border);
  border-radius: var(--sb-radius-card);
  background: var(--sb-code-bg);
}
.sb-cardprev__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sb-cardprev__name {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--sb-ink);
}
.sb-cardprev__desc {
  margin: 0;
  font-size: 13px;
  color: var(--sb-body);
}
.sb-cardprev__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.sb-cardprev__url {
  overflow-wrap: anywhere;
  color: var(--sb-secondary);
}
.sb-cardprev__skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-cardprev__json summary {
  cursor: pointer;
}
.sb-cardprev__json pre {
  margin: 8px 0 0;
  max-height: 320px;
  overflow: auto;
}
/* Delete on the edit wizard's final page: separated from the save form by a rule. */
.sb-wiz__danger {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--sb-divider);
}