/* account.css — the shared account control (LMX-430 slice 2).
 *
 * One popover for every surface: the person's initial in a hairline ring at the
 * header's utility end, the sheet hanging under it. Lifted verbatim from the
 * shell (app.html, slice 1 of the accounts work, 2026-10-31) so the door
 * (threshold.html) wears the same control. Token-routed: each page's own palette
 * fills it; the fallbacks cover the door, which has no --panel family. */
.acct-toggle {
  flex: none; width: 24px; height: 24px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-strong); background: none; color: var(--muted);
  font-family: var(--font-display); font-size: 13px; line-height: 1; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.acct-toggle:hover, .acct-toggle[aria-expanded="true"] { color: var(--crimson-bright); border-color: var(--crimson); }
.acct-toggle[hidden] { display: none; }
.acct {
  position: fixed; top: var(--acct-top, 46px); right: 10px; z-index: 60;
  width: min(320px, calc(100vw - 20px));
  background: var(--panel, var(--bg-lift, var(--bg))); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow-pop, 0 10px 30px rgba(0, 0, 0, 0.35)); padding: 12px 14px; font-size: 13px; color: var(--ink);
}
.acct[hidden] { display: none; }
/* The sheet's rows toggle with the hidden attribute; the flex labels below
   would otherwise win over it on a page without a global [hidden] rule (the door). */
.acct [hidden] { display: none !important; }
.acct .acct-row { margin: 0 0 8px; }
.acct .acct-email { color: var(--bright); font-weight: 400; word-break: break-all; }
.acct .acct-anon { color: var(--grey, var(--muted)); line-height: 1.5; }
.acct .acct-limit, .acct .acct-admin {
  color: var(--muted); font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.acct label.acct-name { display: flex; gap: 8px; align-items: baseline; color: var(--muted); }
.acct label.acct-name input {
  flex: 1; min-width: 0; background: var(--panel-soft, var(--bg-base, transparent)); color: var(--bright);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: inherit;
}
.acct label.acct-updates { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); cursor: pointer; }
.acct label.acct-updates input { width: auto; margin: 2px 0 0; flex: none; accent-color: var(--crimson); }
.acct .acct-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acct .acct-actions button, .acct .acct-confirm button {
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  font: inherit; font-size: 12px; padding: 4px 11px; cursor: pointer;
}
.acct .acct-actions button:hover, .acct .acct-confirm button:hover { color: var(--bright); border-color: var(--line-strong); }
.acct button.acct-danger { color: var(--crimson-bright); }
.acct button.acct-danger:hover { border-color: var(--crimson); }
.acct .acct-confirm { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.acct .acct-confirm p { margin: 0 0 8px; color: var(--grey, var(--muted)); line-height: 1.5; }
.acct .acct-confirm input {
  width: 100%; background: var(--panel-soft, var(--bg-base, transparent)); color: var(--bright);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; margin-bottom: 8px;
}
.acct .acct-err { color: var(--crimson-bright); min-height: 1.2em; margin-top: 6px; font-size: 12px; }