/* Account danger colours retain 4.5:1 contrast in every style and theme. */
:root{--danger:#a63128;--danger-text:#fffaf0}
html[data-theme=dark]{--danger:#ff9b87;--danger-fill:#a63128;--danger-text:#fffaf0}
html[data-style=pixel]{--danger:#a63128;--danger-fill:#a63128;--danger-text:#fffaf0}
html[data-style=pixel][data-theme=dark]{--danger:#ff9b87;--danger-fill:#a63128;--danger-text:#fffaf0}
.account-header .switches{margin-left:auto}.account-main{max-width:720px;margin:48px auto 72px;padding:0 28px}.account-main h1{font-size:48px;letter-spacing:-1px;margin:12px 0 28px}.account-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:32px}.account-main h2{font-size:28px;letter-spacing:0;margin:0 0 20px}.account-main p{margin-bottom:18px}.account-main label{display:block;margin:0 0 8px;font-weight:600}.account-main input{display:block;width:100%;min-height:48px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg);color:var(--text);padding:10px 12px;font:inherit}.account-main input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.account-field{margin-bottom:22px}.account-main input[name=code]{letter-spacing:.2em;font-size:24px}.account-main button{min-height:48px}.account-main .submit{background:var(--accent);color:var(--accent-text);border-color:var(--accent);min-width:150px}.account-main button:disabled{cursor:wait;opacity:.7}.account-main .resend{padding:8px 0;border:0;box-shadow:none;text-decoration:underline;text-underline-offset:4px;background:transparent;color:var(--accent)}.account-main a{text-decoration:underline;text-underline-offset:4px}.account-nav{margin-top:24px;color:var(--accent)}.account-section{border-top:1px solid var(--border);padding-top:28px;margin-top:28px}.account-messages:empty{display:none}.account-message{padding:12px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);margin-bottom:16px;overflow-wrap:anywhere}.account-message[data-type=error]{border-color:var(--text);font-weight:600}.field-messages .account-message{margin-top:10px}.account-privacy{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);color:var(--text-2);font-size:16px;line-height:1.75}.account-privacy h2{font:600 16px/1.6 var(--font-sans);margin-bottom:10px}.account-privacy p{margin:0}.account-email{overflow-wrap:anywhere;font-weight:600}.machine-list{list-style:none;padding:0;margin:0}.machine-row{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}.machine-row code{font-size:16px;overflow-wrap:anywhere}.machine-date{display:block;color:var(--text-2)}.machine-row>div{min-width:0;max-width:100%}.delete-warning{color:var(--text-2)}.account-main .danger{border:2px solid var(--danger-fill,var(--danger));background:var(--danger-fill,var(--danger));color:var(--danger-text);font-weight:600}html .account-main .danger:hover{border-color:var(--danger-fill,var(--danger))}.account-main .danger:disabled,html .account-main .danger:disabled:hover{border-color:var(--danger);background:transparent;color:var(--danger)}.account-main [hidden]{display:none}.account-main .session-status{color:var(--text-2)}html[data-style=pixel] .account-card,html[data-style=pixel] .account-main input{border-radius:0;border-width:2px}html[data-style=pixel] .account-card{box-shadow:6px 6px 0 var(--border)}html[data-style=pixel] .account-main h1{font-size:48px;letter-spacing:0}html[data-style=pixel] .account-main h2{font-size:30px}html[data-style=pixel] .account-main .submit{background:var(--accent);color:var(--accent-text)}html[data-style=pixel] .account-main .resend{background:transparent;box-shadow:none;border:0}html[data-style=pixel] .account-privacy h2{font:600 16px/1.6 var(--font-sans)}@media(max-width:700px){.account-main{margin-top:28px;padding:0 20px}.account-card{padding:24px 20px}.account-main h1,html[data-style=pixel] .account-main h1{font-size:36px}.account-main h2,html[data-style=pixel] .account-main h2{font-size:26px}.machine-row{align-items:flex-start;flex-direction:column}.account-header .brand{gap:6px}html[data-style=pixel] .account-header .brand{font-size:22px;gap:6px}}
/* Share one wrapping action gap across account forms, navigation and machines. */
.account-main :is(.account-actions,.account-nav,.machine-actions){display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.account-main #delete-confirm{margin-bottom:20px}
.account-main .account-privacy h2,html[data-style=pixel] .account-main .account-privacy h2{font:600 16px/1.6 var(--font-sans)}
.account-main button:disabled{cursor:not-allowed;opacity:1;border-style:dashed}
html[aria-busy=true] .account-main button:disabled{cursor:wait}

/* Keep account navigation beside the controls on wide screens and in its own row below them on smaller screens. */
header:has(.account-links){flex-wrap:wrap}
header .account-links{display:grid;grid-template-columns:max-content;flex-shrink:0;margin-left:0;gap:16px;white-space:nowrap;justify-content:start}
header .account-links :is(.account-links-reserve,.account-links-items){grid-area:1/1;display:flex;gap:inherit}
header .account-links-reserve{visibility:hidden;pointer-events:none}
html[data-style=pixel] header .account-links{gap:16px}
@media(min-width:701px) and (max-width:1200px){header>nav:not(.account-links){order:3;flex-basis:100%;margin-left:0;justify-content:center}header .switches{margin-left:auto}}
@media(max-width:700px){header .account-links{order:4;flex-basis:100%;grid-template-columns:1fr}header .account-links :is(.account-links-reserve,.account-links-items){justify-self:center}}

/* Beta questions share the account card, controls and colour tokens. */
.beta-field{border:0;padding:0;min-width:0;margin:28px 0}
.beta-field legend{font-weight:600;margin-bottom:12px;padding:0;line-height:1.5}
.beta-choices{display:flex;flex-wrap:wrap;gap:10px}
.account-main .beta-choice{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;min-height:48px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg);cursor:pointer;font-weight:400;max-width:100%}
.account-main .beta-choice:has(:checked){border-color:var(--accent);background:var(--accent-soft)}
.account-main .beta-choice input{width:20px;height:20px;min-height:20px;padding:0;margin:0;flex-shrink:0;accent-color:var(--accent)}
.account-main textarea{display:block;width:100%;resize:vertical;min-height:150px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg);color:var(--text);padding:12px;font:inherit;line-height:1.5}
.account-main textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.account-main .beta-count{color:var(--text-2);margin:8px 0 0;font-size:16px}
.account-main .beta-field-error{margin:10px 0 0}
.beta-answers{margin:28px 0}.beta-answers dt{font-weight:600;margin-top:22px}.beta-answers dd{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.beta-status{font-weight:600;color:var(--accent)}
.beta-readback summary{width:fit-content;max-width:100%;min-height:48px;padding:10px 0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.beta-readback summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
html[data-style=pixel] .account-main :is(textarea,.beta-choice){border-radius:0;border-width:2px}

.account-main a.button{text-decoration:none}

/* Feedback uses the account form and readable text in both appearances. */
.feedback-number{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:16px 0}
.feedback-number code{font:600 32px/1.4 var(--font-sans);letter-spacing:.04em;user-select:all;overflow-wrap:anywhere}
.feedback-number code:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.feedback-envelope{display:block;width:160px;height:auto;margin-bottom:20px}
.feedback-text{white-space:pre-wrap;overflow-wrap:anywhere}
.feedback-item{border-top:1px solid var(--border);padding-top:18px;margin-top:22px}
.feedback-item h3{font:600 20px/1.5 var(--font-sans);margin:0 0 4px}
.feedback-item time{display:block;color:var(--text-2);font-size:16px;margin-bottom:12px}
.feedback-email{overflow-wrap:anywhere}
.account-privacy p+p{margin-top:12px}
.account-main > [hidden]{display:none}
#feedback-copied:empty{display:none}