/* Password and recovery: the Settings card (codes, password, remembered browsers), the one-time code slip and the "Forgot your password?" dialog. */

.acct-card { position: relative; }
/* The forms below set display:grid, which would otherwise beat the hidden attribute. */
.acct-card [hidden], .acct-dialog [hidden] { display: none !important; }
.acct-seal { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; color: var(--paper); background: var(--red); border-radius: 6px; box-shadow: 3px 3px 0 #080808; font: 400 24px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-6deg); }
.acct-card .section-label { padding-right: 52px; }
.acct-card h2 { margin-top: 18px; font: 400 26px/1.1 Georgia, serif; letter-spacing: -.02em; }
.acct-lede { margin: 10px 0 0; color: #55514a; font: 15px/1.6 Arial, sans-serif; }

.acct-part { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(18, 18, 18, .28); }
.acct-part-head { display: grid; gap: 4px; margin-bottom: 12px; }
.acct-part h3 { font: italic 400 20px/1.2 Georgia, serif; }
.acct-status { margin: 0; color: #55514a; font: 14px/1.5 Arial, sans-serif; }
.acct-status[data-state="loading"] { color: #7b766b; }
.acct-status[data-state="empty"], .acct-status[data-state="error"] { color: #a5281f; }

.acct-card button:focus-visible, .acct-dialog button:focus-visible, .acct-dialog a:focus-visible, .acct-forgot:focus-visible, .acct-slip h4:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.acct-button, .acct-quiet { min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); color: var(--ink); background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.acct-button:hover { border-color: var(--red); color: var(--paper); background: var(--red); }
.acct-quiet { border-color: #8a8374; }
.acct-quiet:hover { border-color: var(--red); color: var(--red); }
.acct-primary { min-height: 44px; padding: 0 20px; font-size: 12px; }
.acct-primary:disabled, .acct-quiet:disabled { opacity: .55; cursor: progress; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.acct-inline, .acct-dialog-form { display: grid; gap: 8px; }
.acct-inline label, .acct-dialog-form label { margin-top: 4px; color: #57534b; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.acct-field { display: flex; min-width: 0; }
.acct-inline input, .acct-dialog-form input { width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid #8d8879; border-radius: 0; color: var(--ink); background: #fffdf5; font: 16px Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.acct-inline input:focus, .acct-dialog-form input:focus { border-color: var(--red); outline: 0; box-shadow: 0 0 0 1px var(--red); }
.acct-field input { flex: 1; }
.acct-reveal { flex: none; min-width: 64px; min-height: 46px; padding: 0 12px; border: 1px solid #8d8879; border-left: 0; color: var(--ink); background: #ece5d2; font: 700 11px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.acct-reveal[data-shown="true"] { color: var(--paper); background: var(--ink); }
.acct-hint { margin: 0; color: #6d685e; font: 13px/1.45 Arial, sans-serif; }
.acct-error { margin: 0; color: #a5281f; font: 700 13px/1.45 Arial, sans-serif; }
.acct-error:empty { display: none; }

/* The codes: a slip of paper torn off for the drawer. */
.acct-slip { position: relative; margin-top: 4px; padding: 18px 16px 16px; border: 1px dashed #8a8374; background: #fffdf5; box-shadow: 4px 4px 0 rgba(18, 18, 18, .18); transform: rotate(-.4deg); }
.acct-slip-stamp { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--red); border-radius: 50%; color: var(--red); font: 400 22px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-8deg); opacity: .9; }
.acct-slip h4 { margin: 0; padding-right: 52px; font: italic 400 21px/1.2 Georgia, serif; }
.acct-slip-copy { margin: 8px 0 0; padding-right: 8px; color: #55514a; font: 14px/1.5 Arial, sans-serif; }
.acct-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin: 14px 0; padding: 0; list-style: none; }
.acct-codes li { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 8px 0; border-bottom: 1px dotted #b9b19c; }
.acct-code-no { flex: none; color: var(--red); font: 700 10px/1 Arial, sans-serif; letter-spacing: .06em; }
.acct-codes code { overflow-wrap: anywhere; color: var(--ink); font: 600 clamp(14px, 3.9vw, 17px)/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .04em; -webkit-user-select: all; user-select: all; }
.acct-slip-actions { margin-bottom: 12px; }
.acct-stored { width: 100%; }

/* Remembered browsers: a short ledger of where this account signed in. */
.acct-status[data-state="pending"] { color: #7b766b; }
.acct-devices-why { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.acct-devices-kanji { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--red); border-radius: 50%; color: var(--red); font: 400 15px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-6deg); }
.acct-devices { display: grid; margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px dotted #b9b19c; }
.acct-device { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px dotted #b9b19c; }
.acct-device-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font: italic 400 17px/1.3 Georgia, serif; }
.acct-device-tag { padding: 3px 7px; border: 1px solid var(--red); color: var(--red); font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: rotate(-2deg); }
.acct-device-meta { grid-column: 1 / -1; color: #6d685e; font: 13px/1.4 Arial, sans-serif; }

/* A red dot on the Settings tab while there is no unused code. */
.acct-tab-dot { position: absolute; top: 9px; left: calc(50% + 11px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #171719; pointer-events: none; }
.acct-tab-dot[hidden] { display: none; }

/* Sign-in form: "Forgot your password?" only when signing in. */
.acct-forgot-row { position: relative; margin-top: 2px; }
.local-account-form[data-mode="register"] + .acct-forgot-row { display: none; }
.acct-forgot { min-height: 44px; padding: 0; border: 0; color: #6d685e; background: none; font: italic 14px/1.3 Georgia, serif; text-decoration: underline; text-decoration-color: rgba(18, 18, 18, .35); text-underline-offset: 3px; }
.acct-forgot:hover { color: var(--red); text-decoration-color: currentColor; }
/* "Keep me signed in" in the recovery dialog (base style in app.css): undo the dialog's text-field look. */
.acct-dialog-form .keep-signed-in { margin-top: 6px; font: 400 13px/1.3 Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.acct-dialog-form .keep-signed-in input { width: 20px; min-height: 0; height: 20px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-appearance: auto; appearance: auto; }
.acct-dialog-form .keep-signed-in input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.acct-dialog { box-sizing: border-box; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 1px solid #99917e; color: var(--ink); background-color: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(18, 18, 18, .05) 28px); box-shadow: 10px 10px 0 #080808; }
.acct-dialog::backdrop { background: rgba(8, 8, 8, .74); }
.acct-dialog-form { padding: 20px 22px 24px; }
.acct-dialog-head { display: flex; align-items: center; gap: 12px; }
.acct-dialog-seal { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--paper); background: var(--red); border-radius: 6px; box-shadow: 3px 3px 0 #080808; font: 400 24px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-6deg); }
.acct-dialog-head .section-label { flex: 1; margin: 0; color: #57534b; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .12em; }
.acct-close { flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 0; border: 0; color: var(--ink); background: none; font: 30px/1 Georgia, serif; }
.acct-close:hover { color: var(--red); }
.acct-dialog h2 { margin: 10px 0 0; font: italic 400 28px/1.15 Georgia, serif; }
.acct-dialog-copy { margin: 0 0 6px; color: #46433c; font: 15px/1.55 Georgia, serif; }
.acct-code-input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace !important; letter-spacing: .1em; text-transform: uppercase; }
.acct-code-input::placeholder { letter-spacing: .1em; color: #a29b88; }
.acct-wide { width: 100%; margin-top: 6px; }
.acct-dialog-help { margin: 6px 0 0; color: #57534b; font: 13px/1.5 Arial, sans-serif; }
.acct-dialog-help a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-dialog-help a:hover { color: var(--red); }