/* acct.css -- the shared account menu, lifted out of index.html.
   Every colour here is a var(), so this file inherits whatever palette the host
   page declares and follows light/dark without knowing anything about either.

   Finding 28: every var in this file now carries a fallback chain, because the
   promise above was broken in exactly one place and it cost a real user the
   Begin button. index.html predates the --verd rename and defines the accent
   as --verdigris only; `.tfa .go` referenced bare var(--verd), the background
   declaration resolved to nothing, and the primary button of the enrolment
   panel rendered dark-on-dark on the front door. The chain is
   var(--verd, var(--verdigris, <hex>)) -- page's new name, page's old name,
   then a sane constant so the panel is never invisible anywhere. */

.acct { position: relative; margin-left: 10px; }
.acctbtn { display:inline-flex; align-items:center; gap:7px; font-family:var(--sans);
  font-size:13px; font-weight:500; border:1px solid var(--line); background:var(--card);
  color:var(--muted, var(--ink2)); padding:6px 11px; border-radius:9px; cursor:pointer;
  max-width:230px; }
.acctbtn:hover { color:var(--ink); }
.acctbtn i { font-size:15px; line-height:1; flex:none; }
.acctbtn .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.menu { position:absolute; right:0; top:calc(100% + 7px); min-width:252px;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow); padding:6px; z-index:30; }
.menu .mhead { padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.menu .mhead b { display:block; font-size:13.5px; font-weight:500; color:var(--ink);
  word-break:break-all; line-height:1.35; }
.menu .mhead span { display:block; font-size:11px; color:var(--muted, var(--ink3));
  margin-top:3px; letter-spacing:.6px; text-transform:uppercase; }
.menu button { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  font-family:var(--sans); font-size:13.5px; color:var(--ink); background:transparent;
  border:none; padding:8px 10px; border-radius:7px; cursor:pointer; }
.menu button:hover { background:var(--hover, var(--paper2)); }
.menu button i { font-size:16px; color:var(--muted, var(--ink3)); flex:none; }
.menu button.danger, .menu button.danger i { color:var(--danger); }
.menu .mnote { padding:2px 10px 7px; font-size:11.5px; color:var(--muted, var(--ink3)); line-height:1.5; }

/* box-sizing is load-bearing: .menu button is border-box by the reset and a
   content-box anchor at width:100% would overflow the 6px padding. */
.menu a.mlink { display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box;
  text-align:left; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:transparent; text-decoration:none; padding:8px 10px; border-radius:7px; }
.menu a.mlink:hover { background:var(--hover, var(--paper2)); }
.menu a.mlink i { font-size:16px; color:var(--muted, var(--ink3)); flex:none; }
.menu .msep { height:1px; background:var(--line); margin:5px 0; }

/* The 2FA row is a button when there is something to do about it and inert when
   there is not (a dead session has no 2FA state to manage). The chevron is CSS
   rather than markup so the button's textContent stays exactly the sentence the
   user reads -- which is what validate_enrolment_ui.mjs asserts on. */
.menu button.m2fa { font-size:11.5px; color:var(--muted, var(--ink2)); padding:6px 10px;
  line-height:1.5; display:block; text-align:left; }
.menu button.m2fa::after { content:" \203A"; color:var(--verd-deep, var(--verd, var(--verdigris, #2f7d6e))); font-weight:600; }
.menu button.m2fa:disabled { cursor:default; }
.menu button.m2fa:disabled:hover { background:transparent; }
.menu button.m2fa:disabled::after { content:""; }

/* ---- rail variant -------------------------------------------------------
   On the rail pages the account control is the footer of the left rail, so the
   menu opens upward from the bottom-left instead of down from the top-right. */
.acct--rail { margin-left:0; margin-top:auto; }
.acct--rail .acctbtn { width:100%; max-width:none; border:none; background:transparent;
  padding:12px 0 0; border-top:1px solid var(--line); border-radius:0; gap:9px; }
.acct--rail .acctbtn:hover { background:transparent; }
.acct--rail .acctbtn .av { width:28px; height:28px; border-radius:50%; background:var(--verd, var(--verdigris, #2f7d6e));
  color:var(--accent-fg, #eafff8); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex:none; }
.acct--rail .acctbtn .lbl { font-size:13px; color:var(--ink); }
.acct--rail .menu { top:auto; bottom:calc(100% + 7px); left:0; right:auto; }

/* ---- two-factor panel ---------------------------------------------------- */
.tfa-veil { position:fixed; inset:0; background:rgba(10,14,20,.45); display:none;
  align-items:center; justify-content:center; padding:22px; z-index:80; }
.tfa-veil.show { display:flex; }
.tfa { position:relative; width:min(460px,100%); max-height:88vh; overflow:auto;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.3); }
.tfa h2 { font-family:var(--serif); font-size:20px; font-weight:500; margin:0 0 4px; color:var(--ink); }
.tfa p { font-size:13px; line-height:1.55; color:var(--ink2, var(--muted)); margin:0 0 12px; }
.tfa .x { position:absolute; top:12px; right:12px; background:transparent; border:none;
  font-size:20px; line-height:1; color:var(--muted, var(--ink3)); cursor:pointer; padding:4px 8px; }
.tfa label { display:block; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted, var(--ink3)); margin:0 0 5px; }
.tfa input { width:100%; box-sizing:border-box; font-family:var(--mono, monospace); font-size:16px;
  letter-spacing:3px; color:var(--ink); background:var(--paper, var(--card));
  border:1px solid var(--line2, var(--line)); border-radius:9px; padding:10px 12px; }
.tfa .secret { font-family:var(--mono, monospace); font-size:13.5px; letter-spacing:1.5px;
  word-break:break-all; background:var(--paper2, var(--paper)); border:1px solid var(--line);
  border-radius:9px; padding:11px 12px; color:var(--ink); margin:0 0 8px; user-select:all; }
.tfa .row { display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.tfa .ghost, .tfa .go { font-family:inherit; font-size:13px; border-radius:9px;
  padding:9px 15px; cursor:pointer; }
.tfa .ghost { background:transparent; border:1px solid var(--line2, var(--line)); color:var(--ink2, var(--muted)); }
.tfa .go { background:var(--verd, var(--verdigris, #2f7d6e)); border:1px solid transparent; color:var(--accent-fg, #eafff8); }
.tfa .go:hover:not(:disabled) { background:var(--verd-deep, var(--verd, var(--verdigris, #215a4f))); }
.tfa .go:disabled, .tfa .ghost:disabled { opacity:.55; cursor:default; }
.tfa .danger { background:var(--danger, #c0504a); border:1px solid transparent; color:#fff; }
.tfa .foot { display:flex; justify-content:flex-end; gap:9px; margin-top:4px; }
.tfa .note { font-size:12.5px; line-height:1.55; margin:0 0 12px; min-height:0; }
.tfa .note.err { color:var(--danger); }
.tfa .note.ok { color:var(--verd-deep, var(--verd, var(--verdigris, #2f7d6e))); }
.tfa .warn { display:flex; gap:8px; font-size:11.5px; line-height:1.55; color:var(--ink2, var(--muted));
  background:var(--paper2, var(--paper)); border:1px solid var(--line);
  border-left:3px solid var(--amber, #b07d1e); border-radius:9px; padding:10px 12px; margin:0 0 14px; }
.tfa .warn i { color:var(--amber, #b07d1e); font-size:15px; flex:none; margin-top:1px; }
.tfa .codes { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
  font-family:var(--mono, monospace); font-size:13px; background:var(--paper2, var(--paper));
  border:1px solid var(--line); border-radius:9px; padding:12px 14px; margin:0 0 12px;
  color:var(--ink); user-select:all; }
.tfa .ack { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5;
  color:var(--ink2, var(--muted)); margin:0 0 14px; cursor:pointer; }
.tfa .ack input { width:auto; flex:none; margin-top:2px; letter-spacing:normal; padding:0; }
.tfa .uri { font-size:12.5px; word-break:break-all; color:var(--verd-deep, var(--verd, var(--verdigris, #2f7d6e))); }

@media print {
  body > *:not(.tfa-veil) { display:none !important; }
  .tfa-veil { position:static; background:none; padding:0; }
  .tfa { box-shadow:none; border:none; max-height:none; }
  .tfa .x, .tfa .foot, .tfa .ack { display:none !important; }
}