/* The welcome guide (S21): B-03 and its /g/ variant, B-01's guide card, O-19's guide card and O-22. */

/* B-03 */
.bh-gd { gap: var(--space-4); }
.bh-gd-back { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; min-height: var(--target-min); font-weight: var(--weight-bold); text-decoration: none; }
.bh-gd-head { display: grid; gap: var(--space-1); }
.bh-gd-section, .bh-gd-card, .bh-gd-owner { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-gd-card > .bh-btn, .bh-gd-section > .bh-btn { justify-self: stretch; }
.bh-gd-title { display: flex; align-items: center; gap: var(--space-2); }
.bh-gd-title > .bh-icon { flex: none; color: var(--primary); }
.bh-gd-address { display: grid; gap: var(--space-2); }
.bh-gd-strong { font-weight: var(--weight-bold); }
.bh-gd-text { white-space: pre-line; }
.bh-gd-locked {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-control);
  background: var(--sunken); color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small);
}
.bh-gd-locked > .bh-icon { flex: none; margin-top: 2px; }

/* A code or a Wi-Fi value with its copy button (the design system's CopyField) */
.bh-gd-copy {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--card);
}
.bh-gd-copy-body { display: grid; min-width: 0; }
.bh-gd-value { font-family: var(--font-mono); font-size: var(--text-body); line-height: var(--leading-body); overflow-wrap: anywhere; }
.bh-gd-value--code { font-size: var(--text-code); line-height: var(--leading-code); font-weight: var(--weight-bold); }
.bh-gd-copy-btn { flex: none; }
.bh-gd-copy-btn.is-copied { color: var(--success-ink); }
.bh-gd-call { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* O-22: the secret fields' box, the field heads, the errors under a section */
.bh-gd-secret { display: grid; gap: var(--space-4); padding: var(--space-4); border: 2px solid var(--primary); border-radius: var(--radius-card); background: var(--card); }
.bh-gd-group { gap: var(--space-4); }
.bh-gd-code { font-family: var(--font-mono); font-size: var(--text-body); }
.bh-gd-optional { font-weight: var(--weight-regular); color: var(--ink-3); }
.bh-gd-field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-gd-error { display: grid; gap: var(--space-1); }