/* The private mailbox page. It builds on style.css and its theme tokens. */

.public-link { font-size:14px; color:var(--muted); text-underline-offset:3px; }
.public-link:hover { color:var(--ink); }
.account-button { gap:8px; max-width:240px; }
.account-button svg { width:17px; height:17px; flex:none; }
.account-button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.primary-button { border:1px solid var(--ink); background:var(--ink); color:var(--page); border-radius:8px; padding:9px 16px; min-height:42px;
  font-size:15px; font-weight:600; }
.primary-button:hover:not(:disabled) { opacity:.88; }
.primary-button:disabled { opacity:.45; cursor:not-allowed; }
.danger-text { color:var(--error-text); }
.danger-button { color:var(--error-text); border-color:var(--error-border); }
.danger-button:hover { background:var(--error-bg); }

/* Sign-in, registration and recovery */
.auth-shell { flex:1; display:flex; justify-content:center; align-items:flex-start; padding:24px 0 40px; }
.auth-card { width:min(460px,100%); padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  box-shadow:0 8px 30px var(--shadow); }
.auth-card h2 { margin:0 0 8px; font-size:24px; line-height:1.25; }
.auth-lead { margin:0 0 20px; color:var(--muted); font-size:15px; }
.auth-modes { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:8px; border-radius:9px; background:var(--surface-raised); }
.auth-modes button { min-height:38px; border:0; border-radius:6px; background:none; color:var(--muted); font-size:14px; font-weight:550; }
.auth-modes button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px var(--shadow); }
.auth-shell:has(#recover-form:not([hidden])) .auth-modes { display:none; }
.auth-form label, .settings-section label { display:block; margin:16px 0 6px; font-size:14px; font-weight:550; }
.auth-form input, .settings-section input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:7px;
  color:var(--ink); background:var(--page); font:inherit; font-size:16px; }
.address-field { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:7px; background:var(--page); }
.address-field:focus-within { outline:3px solid var(--focus); outline-offset:2px; }
.address-field input { flex:1; min-width:0; border:0; border-radius:7px 0 0 7px; outline:none; }
.address-domain { display:flex; align-items:center; padding:0 12px; color:var(--muted); font-size:15px; white-space:nowrap;
  border-left:1px solid var(--line); background:var(--surface-alt); border-radius:0 7px 7px 0; }
.field-hint, .field-status { margin:6px 0 0; color:var(--muted); font-size:13px; }
.address-preview { display:flex; gap:12px; align-items:flex-start; margin:10px 0 0; padding:12px 14px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface-alt); }
.address-preview-icon { width:18px; height:18px; flex:none; margin-top:1px; color:var(--muted); }
.address-preview-body { flex:1; min-width:0; }
.address-preview-lead { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.address-preview-list { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; padding:0; list-style:none; }
.address-preview-list li { max-width:100%; padding:2px 8px; border:1px solid var(--line); border-radius:6px; background:var(--page);
  font:500 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.address-preview-name { color:var(--ink); font-weight:700; }
.address-preview-name.is-placeholder { color:var(--muted); font-weight:500; font-style:italic; }
.address-preview-domain { color:var(--muted); }
.field-status:empty, .form-status:empty { display:none; }
.field-status[data-state="available"] { color:var(--success-text); }
.field-status[data-state="taken"], .field-status[data-state="invalid"] { color:var(--error-text); }
.form-status { margin:14px 0 0; padding:10px 12px; border-radius:7px; font-size:14px; background:var(--surface-raised); }
.form-status[data-state="error"] { color:var(--error-text); background:var(--error-bg); border:1px solid var(--error-border); }
.form-status[data-state="success"] { color:var(--success-text); background:var(--success-bg); border:1px solid var(--success-border); }
.form-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:20px; }
.auth-notice { margin:12px 0 0; padding:10px 12px; border-radius:7px; font-size:14px; color:var(--warning-text); background:var(--warning-bg);
  border:1px solid var(--warning-border); }
#recover-form .auth-notice { color:var(--muted); background:var(--surface-raised); border-color:var(--line); }
.auth-privacy { margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.recovery-code { margin:0; padding:16px; border:1px dashed var(--border-accent); border-radius:8px; background:var(--page);
  font:600 clamp(17px,5vw,22px)/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em; text-align:center;
  overflow-wrap:anywhere; user-select:all; }
.confirm-check { display:flex; gap:10px; align-items:flex-start; margin-top:20px; font-size:15px; }
.confirm-check input { width:18px; height:18px; margin-top:3px; flex:none; }

/* Mailbox */
.folder-tabs { display:flex; gap:6px; margin:0 20px 10px; }
.folder-tabs button { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border:1px solid var(--line);
  border-radius:999px; background:none; color:var(--muted); font-size:13px; font-weight:550; }
.folder-tabs button[aria-pressed="true"] { color:var(--ink); background:var(--selected); border-color:var(--border-accent); }
.folder-count:empty { display:none; }
.folder-count { min-width:20px; padding:0 6px; border-radius:999px; background:var(--selected-chip); color:var(--ink); font-size:12px; }
.message-item.unread .list-subject { font-weight:700; color:var(--ink); }
.message-item.unread .list-sender::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%;
  background:var(--accent); vertical-align:middle; }
.list-footer:has(#load-older[hidden]) { display:none; }
.reply-status { display:inline-block; margin-left:8px; padding:0 8px; border-radius:999px; font-size:12px; background:var(--surface-raised); }
.reply-status[data-status="sent"] { color:var(--success-text); background:var(--success-bg); }
.reply-status[data-status="failed"], .reply-status[data-status="cancelled"] { color:var(--error-text); background:var(--error-bg); }
#reply-form .reply-recipient { margin:0 0 4px; }

/* Settings */
.settings-dialog { width:min(520px,calc(100vw - 32px)); }
.settings-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.settings-section { padding:18px 0; border-top:1px solid var(--line); }
.settings-heading + .settings-section { border-top:0; }
.settings-section h3 { margin:0 0 6px; font-size:16px; }
.settings-section .secondary-button { margin-top:14px; }
.account-addresses { margin:8px 0 0; padding:0; list-style:none; font-weight:600; overflow-wrap:anywhere; }
.danger-zone h3 { color:var(--error-text); }

@media(max-width:820px) {
  .auth-shell { padding:8px 0 24px; }
  .auth-card { padding:20px; }
  .folder-tabs { margin:0 16px 8px; }
  .account-button { max-width:44px; padding:0; width:40px; }
  .account-button span { display:none; }
}
@media(max-width:420px) {
  .address-domain { padding:0 8px; font-size:13px; }
}