/* DevBanjo invites kit. To match the app, set any of these on :root or on
   .dbi: --dbi-ink, --dbi-muted, --dbi-line, --dbi-error. Unset, they fall back
   to the app's own --ink, --muted and --line, then to plain defaults. The
   fallbacks sit where each color is used, not on :root, so the app's values
   win whichever stylesheet loads first. Lay it out to fit the app's own
   world: this file only spaces things out. */

.dbi { display: grid; gap: 10px; }
.dbi[hidden] { display: none; }
.dbi h2, .dbi h3 { margin: 0; }
.dbi p { margin: 0; }
.dbi-lede { color: var(--dbi-ink, var(--ink, #1c1c1e)); }
.dbi-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dbi-app { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--dbi-line, var(--line, #d8d8de)); }
.dbi-app:last-child { border-bottom: 1px solid var(--dbi-line, var(--line, #d8d8de)); }
.dbi-name { font-weight: 700; }
.dbi-about, .dbi-note { color: var(--dbi-muted, var(--muted, #5b5b66)); font-size: 15px; }
.dbi-note:empty { display: none; }
.dbi-error { color: var(--dbi-error, #b3261e); font-size: 15px; }
.dbi-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dbi-row a { text-decoration: none; }
.dbi-out { display: grid; gap: 8px; }
.dbi-out:empty { display: none; }
.dbi-link { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 15px; }

@media (prefers-color-scheme: dark) {
  .dbi-error { color: var(--dbi-error, #f2b8b5); }
}