/* Account strip and dialogs (sign in with a one-time code, save cards, My cards) */
.account-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 20px; background: #f7f9fc; border-bottom: 1px solid #dde1e7; font-size: 14px; color: #444; }
.account-bar .acct-msg { color: #444; }
.account-bar .acct-card { padding: 2px 10px; border-radius: 999px; background: #e6f0fc; color: #005bb5; font-weight: 600; }
.account-bar .acct-card.dirty { background: #fff3cd; color: #7a5b00; }
.account-bar .acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }

dialog.acct-dialog[open] { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.35); }
dialog.acct-dialog.acct-wide[open] { width: min(600px, calc(100vw - 32px)); }
dialog.acct-dialog::backdrop { background: rgba(20,24,32,.45); }
.acct-dialog label { display: grid; gap: 4px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.acct-dialog input[type=text], .acct-dialog input[type=email] { font: inherit; font-weight: 400; padding: 9px 10px; border: 1px solid #c7ccd4; border-radius: 6px; width: 100%; }
.acct-dialog input:focus, .acct-dialog button:focus-visible { outline: 2px solid #0073e6; outline-offset: 1px; }
.acct-dialog .code-input { font-size: 26px; letter-spacing: 8px; text-align: center; max-width: 11em; }
.acct-dialog .small { font-size: 13px; color: #666; margin-bottom: 8px; }
.acct-dialog p { margin-bottom: 10px; line-height: 1.5; }
.acct-dialog .msg { min-height: 1.4em; font-size: 14px; color: #b3261e; }
.acct-dialog .msg.ok { color: #1b7a34; }
.linkbtn { background: none; border: none; padding: 0; color: #0066cc; font: inherit; cursor: pointer; text-decoration: underline; }
.linkbtn:disabled { color: #888; text-decoration: none; cursor: default; }
.seg { display: flex; margin-bottom: 14px; border: 1px solid #c7ccd4; border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; padding: 8px; border: none; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.seg button.active { background: #0073e6; color: #fff; }
.modal-actions.spread { justify-content: space-between; align-items: center; }
.danger-link { color: #b3261e; border-color: transparent; background: none; }
.cards-list { list-style: none; margin: 0 0 12px; max-height: 50vh; overflow-y: auto; }
.cards-list li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #eceff3; }
.cards-list .c-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cards-list .c-name small { display: block; font-weight: 400; color: #666; }
.cards-list .c-current { font-size: 12px; color: #005bb5; }

/* Account menu (person icon) in the header */
.user-menu { position: relative; }
.user-menu[hidden], .user-pop[hidden] { display: none; }
.user-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: #e6f0fc; color: #005bb5; cursor: pointer; }
.user-btn:hover, .user-btn[aria-expanded=true] { background: #cfe3fa; }
.user-btn:focus-visible, .user-pop :is(button, a):focus-visible { outline: 2px solid #0073e6; outline-offset: 1px; }
.user-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 230px; max-width: min(320px, calc(100vw - 24px)); padding: 6px; background: #fff; border: 1px solid #dde1e7; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.user-profile { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #eceff3; overflow-wrap: anywhere; }
.user-profile .up-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #666; }
.user-profile strong { font-size: 15px; }
.user-profile span:last-child { font-size: 13px; color: #555; }
.user-pop [role=menuitem] { display: block; width: 100%; padding: 9px 10px; border: none; border-radius: 6px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: #333; text-align: left; text-decoration: none; cursor: pointer; }
.user-pop [role=menuitem]:hover, .user-pop [role=menuitem]:focus-visible { background: #eef1f5; }
@media (max-width: 600px) { .user-pop { right: auto; left: 0; } }

/* Card picker and save status in the account strip */
.account-bar .acct-select { font: inherit; font-weight: 600; padding: 6px 10px; border: 1px solid #c7ccd4; border-radius: 6px; background: #fff; max-width: min(320px, 60vw); }
.account-bar .acct-select:focus-visible { outline: 2px solid #0073e6; outline-offset: 1px; }
.account-bar .acct-status { font-size: 13px; color: #1b7a34; min-width: 9.5em; }
.account-bar .acct-status.saving, .account-bar .acct-status.pending { color: #666; }
.account-bar .acct-status.error, .account-bar .acct-status.toolarge { color: #b3261e; }

/* Opt-in checkbox rows */
.acct-dialog label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 4px 0 12px; line-height: 1.4; }
.acct-dialog label.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.acct-dialog label.check[hidden] { display: none; }
.acct-dialog .muted { color: #666; }

/* Signed in: save status at the far left, card picker with its pencil / plus buttons centered */
.account-bar.signed-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 14px; padding-left: 32px; padding-right: 32px; }
.account-bar.signed-in .acct-status { justify-self: end; min-width: 0; }
.account-bar .acct-controls { display: inline-flex; align-items: center; gap: 8px; }
.account-bar .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.account-bar .icon-btn:focus-visible { outline: 2px solid #0073e6; outline-offset: 1px; }
@media (max-width: 700px) {
  .account-bar.signed-in { grid-template-columns: 1fr; justify-items: center; padding-left: 16px; padding-right: 16px; }
  .account-bar.signed-in .acct-status { justify-self: center; order: 2; }
}

/* "Signed in as ..." beside the person icon in the header */
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-menu[hidden] { display: none; }
.user-who { font-size: 14px; color: #444; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .user-who { display: none; } }
.reminder-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.reminder-msg { text-align: center; font-size: 18px; font-weight: 400; line-height: 1.4; margin-bottom: 12px; }
.reminder-actions { text-align: right; }

/* Profile menu: pencil beside the name */
.user-profile .up-name-row { display: flex; align-items: center; gap: 8px; }
.user-pop .up-edit { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 4px; border-radius: 6px; color: #0073e6; flex: none; }
.user-pop .up-edit:hover, .user-pop .up-edit:focus-visible { background: #eef1f5; }
/* Profile dialog */
.profile-subhead { margin: 8px 0 6px; font-size: 14px; font-weight: 700; }
.acct-dialog input[readonly] { background: #f2f4f7; color: #555; cursor: default; }

.cf-turnstile-slot:not(:empty) { margin: 4px 0 12px; }