/*
  account.css: the account pages (sign in, sign up, forgot password, choose a
  password, confirm email, your account, alerts) and the coming-soon page.
  Colours and fonts come from tokens.css, so both themes work.
*/

/* ---------- the account menu in the header ---------- */
.account{display:flex;align-items:center;gap:8px}
.account a.btn{text-decoration:none}
.account .who{font-size:13px;color:var(--muted);max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--magenta);color:var(--on-magenta);font:600 11px/18px var(--font-body);text-align:center;margin-left:4px}

/* ---------- forms ---------- */
.form-card{max-width:440px;margin:8px auto;padding:20px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--panel)}
.form-card h2{font-family:var(--font-display);font-size:28px;margin:0 0 4px}
.form-card .lead{color:var(--muted);font-size:14px;margin:0 0 14px}
.form-card form{display:flex;flex-direction:column;gap:12px}
.form-card label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.form-card label.inline{flex-direction:row;align-items:center;gap:8px}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=password],.form-card select{
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper);color:var(--ink);font:15px var(--font-body);width:100%}
.form-card input:focus,.form-card select:focus{outline:2px solid var(--blue);outline-offset:1px}
.form-card .row-links{display:flex;justify-content:space-between;gap:12px;font-size:13px;flex-wrap:wrap}
.form-card .btn.primary{padding:9px 14px;font-size:14px}
.form-msg{font-size:13px;min-height:1.3em}
.form-msg.ok{color:var(--ok)}
.form-msg.bad{color:var(--bad)}
.hint{font-size:12px;color:var(--muted)}

/* ---------- account and alerts pages ---------- */
.settings{display:grid;gap:16px;max-width:640px}
.settings section{border:1px solid var(--line);border-radius:var(--radius-l);padding:14px 16px;background:var(--panel)}
.settings h3{margin:0 0 8px}
.settings form{display:flex;flex-direction:column;gap:10px}
.settings label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.settings label.inline{flex-direction:row;align-items:center;gap:6px}
.settings input[type=text],.settings input[type=password],.settings select{
  padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper);color:var(--ink);font:14px var(--font-body)}
.settings .danger{border-color:color-mix(in srgb,var(--bad) 50%,var(--line))}
.alert-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alert-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--panel)}
.alert-list li.off{opacity:.6}
.alert-list .what{flex:1 1 220px;font-size:14px}
.alert-list .what .sub{display:block;color:var(--muted);font-size:12px}
.alert-list label{display:flex;flex-direction:row;align-items:center;gap:5px;font-size:13px}
.alert-list .up{color:var(--ok);font-weight:600}
.event-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.event-list li{padding:6px 10px;border-left:3px solid var(--line);font-size:13px}
.event-list li.new{border-left-color:var(--magenta)}
.event-list .when{color:var(--muted);font-size:12px}

/* ---------- the coming-soon page ---------- */
.soon{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:var(--paper);color:var(--ink);font-family:var(--font-body)}
.soon .brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.soon .brand svg{width:34px;height:34px;color:var(--magenta)}
.soon .brand h1{font:700 44px/1 var(--font-display);margin:0;letter-spacing:.01em}
.soon .lede{color:var(--muted);margin:0 0 22px;text-align:center;max-width:32em}
.soon .form-card{width:100%}
.soon footer{margin-top:20px;font-size:12px;color:var(--muted);text-align:center;max-width:36em}

/* ---------- the "Alert me" dialog ---------- */
dialog label.inline-check{flex-direction:row;align-items:center;gap:8px}