/* DevBanjo insights: the "why" question box. Fits the app through its own
   variables: set --dbin-ink, --dbin-muted, --dbin-line and --dbin-bg on :root
   or .dbin, or it uses the app's --ink, --muted, --line and --card. */

.dbin {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--dbin-line, var(--line, #d8d8de));
  border-radius: 12px;
  background: var(--dbin-bg, var(--card, transparent));
  color: var(--dbin-ink, var(--ink, #1c1c1e));
}
.dbin-q { margin: 0 0 10px; font-weight: 600; }
.dbin-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.dbin button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--dbin-line, var(--line, #d8d8de));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dbin button:focus-visible, .dbin input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dbin-other { display: block; margin-top: 12px; font-size: 0.9em; color: var(--dbin-muted, var(--muted, #5b5b66)); }
.dbin-other input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--dbin-line, var(--line, #d8d8de));
  border-radius: 8px;
  background: transparent;
  color: var(--dbin-ink, var(--ink, #1c1c1e));
  font: inherit;
}
.dbin button[type="submit"] { margin-top: 8px; }
.dbin .dbin-skip { margin-top: 8px; margin-left: 8px; border-color: transparent; color: var(--dbin-muted, var(--muted, #5b5b66)); text-decoration: underline; }
.dbin-thanks { margin: 0; color: var(--dbin-muted, var(--muted, #5b5b66)); }
.dbin:has(.dbin-thanks:empty) { display: none; }