/* Codeblock (used in /backup snapshot commands etc.) */
.code-block {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--gap-4);
}
.code-block h5:first-child { margin-top: 0; }

/* QR enrollment frame */
.qr-frame {
  display: inline-block;
  background: var(--bg);
  padding: var(--gap-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.qr-canvas { width: 200px; height: 200px; }
.qr-canvas svg { width: 100%; height: 100%; display: block; }

/* TOTP code input — wide letter spacing for legibility */
.totp-input {
  letter-spacing: 0.3em;
  font-size: 1.05rem;
  text-align: center;
}

/* Scrollable list (used inside the groups checkbox picker) */
.scroll-y-sm { max-height: 11rem; overflow-y: auto; }
.scroll-y-md { max-height: 18rem; overflow-y: auto; }

/* Chip-tray for the groups _form member picker */
.chip-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  min-height: 2rem;
}

/* Footer with a single delete button right-aligned */
.danger-footer {
  margin-top: var(--gap-6);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
}

/* User picker dropdown row helpers */
.user-pick__name { font-weight: 600; }
.user-pick__more { border-top: 1px solid var(--rule); }

/* Stick something to the right inside an inline-check */
.inline-check__meta {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* "Bundle row" — the 14rem|1fr two-column row used on the ZAF install page */
.bundle-row {
  padding: var(--gap-4) 0;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--gap-4);
}
.bundle-row:last-child { border-bottom: 0; }

/* Address card edit shape (organizations form) */
.address-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--gap-4); }
.address-card.is-primary { border-color: var(--ink); }
/* Inline tag row — a list of badges or similar pills */
.tag-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}

/* Address summary card on org show */
.address-summary {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--gap-4);
}
.address-summary.is-primary { border-color: var(--ink); }
.address-summary__body { margin-top: var(--gap-2); }
/* Notes list (organizations) */
.notes-list { list-style: none; padding: 0; margin: 0; }
.notes-list > li {
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--gap-2) 0;
  margin: 0;
}
.notes-list > li:first-child { padding-top: 0; }
.notes-list > li:last-child  { border-bottom: 0; padding-bottom: 0; }

/* VIPs list (organizations) — operational contact roster. Same row
   rhythm as the notes list so the two sections feel like a pair. */
.vip-list { list-style: none; padding: 0; margin: 0; }
.vip-list > li {
  padding: var(--gap-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.vip-list > li:first-child { padding-top: 0; }
.vip-list > li:last-child  { border-bottom: 0; }

.vip-row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-3);
}
.vip-row__name { font-size: 1rem; }
.vip-row__notes { margin: var(--gap-1) 0 0; }
.vip-row__actions { margin-top: var(--gap-2); }

.notes-list .note-body {
  margin-top: var(--gap-1);
}
/* Render notes at their natural height. Trim Quill's tag margins so
   a short note doesn't have a tall "halo" of paragraph spacing
   (browser default <p> margin is ~1em top + bottom), and hide the
   trailing-empty `<p><br></p>` / `<p></p>` Quill leaves as a
   next-line affordance — each one renders as a full blank line and
   inflates a one-word note's footprint. */
.note-body__content > :first-child { margin-top: 0; }
.note-body__content > :last-child  { margin-bottom: 0; }
.note-body__content p,
.note-body__content blockquote,
.note-body__content pre,
.note-body__content ul,
.note-body__content ol {
  margin: 0 0 0.5em;
}
.note-body__content p:empty,
.note-body__content p:has(> br:only-child) { display: none; }

/* Metric row inside a panel sub-grid (count + label pair) */
.metric-row {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Metric card — flex column so the label sits up top and the number +
   sub line sit aligned to the bottom, keeping siblings in a grid row
   visually balanced even when content lengths differ. */
.metric-card {
  display: flex;
  flex-direction: column;
  min-height: 8rem;
}
.metric-card .metric        { margin-top: auto; }
.metric-card .metric-sub    { margin-top: var(--gap-2); }

/* Big numeric metric used on the dashboard */
.metric {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  margin-top: var(--gap-2);
  letter-spacing: -0.018em;
}
.metric--small {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.metric-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.metric-sub {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: var(--gap-1);
}

/* Form picker on /complaints/new step 1 — a clickable list of
   published forms. Each row is one full-bleed anchor so the whole
   surface is the click target. Light hover, no chrome. */
.form-picker { list-style: none; padding: 0; margin: 0; }
.form-picker > li + li {
  border-top: 1px solid var(--rule-soft);
}
.form-picker__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-1);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.08s ease, color 0.08s ease;
}
.form-picker__row:hover {
  background: rgba(28, 27, 24, 0.04);
  color: var(--accent);
}
.form-picker__name { font-weight: 600; }