/* Bragwire "My account" (shared/account/account-ui.js). Same file on app.bragwire.com and bragwire.com.
   Scoped under .bwa; light by default, html.dark for dark (both hosts set that class). */
.bwa { --bwa-ink: #0A1018; --bwa-muted: #4f647f; --bwa-line: rgba(10,16,24,.12); --bwa-card: #ffffff; --bwa-field: #f5f8fa;
  --bwa-accent: #00B67A; --bwa-accent-ink: #ffffff; --bwa-danger: #b91c1c;
  color: var(--bwa-ink); max-width: 40rem; margin: 0 auto; font: inherit; line-height: 1.4; box-sizing: border-box; }
html.dark .bwa { --bwa-ink: #F5F8FA; --bwa-muted: #93A5B3; --bwa-line: rgba(147,165,179,.22); --bwa-card: #0F1A24; --bwa-field: #0A1018;
  --bwa-accent: #00E69A; --bwa-accent-ink: #07131D; --bwa-danger: #f87171; }
.bwa *, .bwa *::before, .bwa *::after { box-sizing: border-box; }
.bwa-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem; }
.bwa-lead, .bwa-muted { color: var(--bwa-muted); margin: 0 0 .75rem; font-size: .92rem; }
.bwa-h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.bwa-card { background: var(--bwa-card); border: 1px solid var(--bwa-line); border-radius: 14px; padding: 1rem; margin: 0 0 1rem; min-width: 0; }
.bwa-form { display: grid; gap: .65rem; margin: 0 0 .75rem; }
.bwa-field { display: grid; gap: .25rem; }
.bwa-label { font-size: .8rem; font-weight: 600; color: var(--bwa-muted); }
.bwa-input { width: 100%; min-height: 44px; padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--bwa-line);
  background: var(--bwa-field); color: var(--bwa-ink); font: inherit; font-size: 16px; }
.bwa-input:focus { outline: 2px solid var(--bwa-accent); outline-offset: 1px; }
.bwa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
  border-radius: 10px; border: 1px solid var(--bwa-line); background: transparent; color: var(--bwa-ink); font: inherit;
  font-weight: 700; cursor: pointer; text-decoration: none; }
.bwa-btn:disabled { opacity: .55; cursor: default; }
.bwa-btn--primary { background: var(--bwa-accent); border-color: var(--bwa-accent); color: var(--bwa-accent-ink); }
.bwa-btn--danger { border-color: var(--bwa-danger); color: var(--bwa-danger); }
.bwa-btn--sm { min-height: 32px; padding: .2rem .7rem; font-size: .82rem; }
.bwa-btn--google { width: 100%; background: #ffffff; color: #1f2937; border-color: #d1d5db; }
.bwa-g { font-weight: 800; color: #4285F4; }
.bwa-or { text-align: center; color: var(--bwa-muted); font-size: .82rem; margin: .75rem 0; }
.bwa-links, .bwa-alt { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: .25rem 0 .75rem; }
.bwa-link { background: none; border: 0; padding: .25rem 0; min-height: 32px; color: var(--bwa-accent); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
html:not(.dark) .bwa-link { color: #047857; }
.bwa-link--danger, html:not(.dark) .bwa-link--danger { color: var(--bwa-danger); }
.bwa-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.bwa-note { border-radius: 10px; padding: .6rem .75rem; margin: 0 0 .75rem; font-size: .9rem; border: 1px solid var(--bwa-line); }
.bwa-note--error { border-color: var(--bwa-danger); color: var(--bwa-danger); }
.bwa-note--warn { border-color: #d97706; color: #92400e; background: rgba(245,158,11,.08); }
html.dark .bwa-note--warn { color: #fbbf24; }
.bwa-rows { list-style: none; margin: 0; padding: 0; }
.bwa-row { border-top: 1px solid var(--bwa-line); padding: .6rem 0; min-width: 0; }
.bwa-row:first-child { border-top: 0; }
.bwa-row-main, .bwa-profile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.bwa-row-copy { display: flex; flex-direction: column; min-width: 0; }
.bwa-row-name { font-weight: 700; overflow-wrap: anywhere; }
.bwa-row-sub { font-size: .8rem; color: var(--bwa-muted); overflow-wrap: anywhere; }
.bwa-row-side { display: flex; align-items: center; gap: .4rem; flex: none; }
.bwa-row-actions { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.bwa-tag { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.bwa-tag--active { color: #047857; background: rgba(16,185,129,.1); }
.bwa-tag--pending { color: #92400e; background: rgba(245,158,11,.12); }
.bwa-tag--lapsed { color: #b91c1c; background: rgba(239,68,68,.1); }
.bwa-tag--deactivated, .bwa-tag--closed { color: #4b5563; background: rgba(107,114,128,.1); }
html.dark .bwa-tag--active { color: #34d399; } html.dark .bwa-tag--pending { color: #fbbf24; } html.dark .bwa-tag--lapsed { color: #f87171; }
html.dark .bwa-tag--deactivated, html.dark .bwa-tag--closed { color: #9ca3af; }
.bwa-row--closed .bwa-row-name { opacity: .7; }
.bwa-inline { border: 1px solid var(--bwa-line); border-radius: 12px; padding: .75rem; margin: .5rem 0 0; background: rgba(127,127,127,.06); }
.bwa-confirm-text { margin: 0 0 .25rem; font-size: .92rem; }
.bwa-billing-line { margin: 0 0 .25rem; }
.bwa--busy { cursor: progress; }
@media (min-width: 900px) { .bwa-card { padding: 1.25rem; } }
.bb-my-account .bwa-title--account { display: none; } /* the app's PageBar already says My account */

/* Home-screen Google sign-in: the code the browser must show before Confirm. */
.bwa-sso { text-align: center; }
.bwa-sso-code { font: 800 2.25rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .3em; margin: .25rem 0 .75rem; padding-left: .3em; }