/* Rowan's questions: the access-code dialog and the entry link's two labels
   (rowan-access.js). Purple, the bank's own colour. */
:root { --qb-rowan: #884db6; }
body.dark { --qb-rowan: #d4a7f2; }

/* the link says "Enter the code" until the server says this browser has access */
.ra-open { display: none; }
html[data-rowan-access="open"] .ra-open { display: inline; }
html[data-rowan-access="open"] .ra-locked { display: none; }

/* Code dialog (native <dialog>: focus stays inside, Escape closes). */
.qb-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; width: min(400px, calc(100vw - 32px)); padding: 0; color: var(--text-color); background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 24px); box-shadow: 0 24px 60px rgba(20, 16, 28, .28); }
.qb-dialog::backdrop { background: rgba(20, 16, 28, .5); }
.qb-dialog-form { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 1.5rem 1.25rem; }
.qb-dialog-title { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; }
.qb-dialog-help { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.qb-dialog-input { width: 100%; min-height: 48px; padding: .65rem .85rem; font: inherit; font-size: 1rem; color: var(--text-color); background: var(--surface-2); border: 1.5px solid var(--border-color); border-radius: 12px; }
.qb-dialog-input:focus { outline: none; border-color: var(--qb-rowan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qb-rowan) 25%, transparent); }
.qb-dialog-error { margin: 0; color: #b4233a; font-size: .92rem; font-weight: 600; }
body.dark .qb-dialog-error { color: #ff9aa8; }
.qb-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .25rem; }
.qb-btn { min-height: 44px; padding: .55rem 1.2rem; font: inherit; font-weight: 600; border-radius: 999px; cursor: pointer; }
.qb-btn-quiet { color: var(--text-color); background: transparent; border: 1px solid var(--border-color); }
.qb-btn-quiet:hover { background: var(--surface-2); }
.qb-btn-primary { color: #fff; background: var(--qb-rowan); border: 0; }
body.dark .qb-btn-primary { color: #1b1426; }
.qb-btn-primary:disabled { opacity: .6; cursor: progress; }
.qb-dialog-note { margin: .25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }