/* dna.css -- the upbringing wizard (#0000-1929): one question per screen, big buttons; the same overlay on a phone and on a desktop. */
.dna { position: fixed; inset: 0; z-index: 8500; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.dna-box { width: min(640px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
.dna-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.dna-title { font-weight: 600; font-size: 15px; }
.dna-sub { flex: 1; opacity: .7; font-size: 12px; }
.dna-close, .dna-back { background: none; border: none; color: var(--accent-hi, var(--accent)); cursor: pointer; font: inherit; padding: 8px 4px; }
.dna-topic { font-size: 11px; letter-spacing: .06em; opacity: .65; }
.dna-ask { margin: 6px 0 14px; font-size: 18px; line-height: 1.35; }
.dna-opts { display: flex; flex-direction: column; gap: 8px; }
.dna-opt, .dna-btn { min-height: 48px; padding: 10px 14px; text-align: left; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface2, transparent); color: inherit; font: inherit; cursor: pointer; }
.dna-opt.chosen { border-color: var(--accent); }
.dna-opt:hover, .dna-btn:hover { background: var(--hover); }
.dna-btn.primary { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); }
.dna-btn:disabled { opacity: .5; cursor: default; }
.dna-own, .dna-text { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--text); font: inherit; }
.dna-text { font-family: ui-monospace, monospace; font-size: 12px; }
.dna-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dna-note, .dna-msg { opacity: .8; font-size: 13px; }
.dna-msg.bad { color: var(--attn); opacity: 1; }
.dna-bar { height: 4px; border-radius: 2px; background: var(--rule); margin-bottom: 12px; overflow: hidden; }
.dna-barfill { height: 100%; background: var(--accent); }