/* The account header widget + sign-in dialog, shared by the app
   (index.html) and the landing page (landing/index.html) — #504. Both
   pages link this file; auth.js renders into #account and creates the
   dialog. Styled on the app's tokens: --acc/--accsoft, --cta/--ctasoft,
   --seltext, --danger/--dangersoft, plus --ink/--mut/--line/--bg/--card.
   app.css defines them per theme; the landing page aliases its own. */
  .account{display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--mut); min-width:0}
  .authbtn{font:inherit; font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px;
    border:1px solid var(--line,#e4e7eb); background:#fff; color:var(--ink); cursor:pointer}
  .authbtn:hover{border-color:var(--acc); background:var(--accsoft)}
  /* #207: delete an unfinished book — quiet until hovered, loud once armed */
  .authbtn.danger{color:var(--mut)}
  .authbtn.danger:hover, .authbtn.danger.armed{border-color:var(--danger); background:var(--dangersoft); color:var(--danger)}
  /* My trips: permanent bar link once any book exists */
  .tripslink{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
    color:var(--ink); text-decoration:none; padding:6px 12px; border-radius:999px}
  .tripslink:hover{background:var(--ctasoft); color:var(--cta)}
  .tripslink svg{width:14px; height:14px; color:var(--cta)}
  .tripslink .count{font-size:11px; font-weight:700; color:var(--cta); background:var(--ctasoft);
    border-radius:999px; padding:0 7px; line-height:18px}
  /* avatar + menu (signed-in) */
  #account{position:relative; display:inline-flex; gap:8px; align-items:center}
  .avbtn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
    border-radius:50%; border:1px solid var(--line); background:var(--accsoft); color:var(--seltext);
    font-size:13px; font-weight:700; padding:0; cursor:pointer}
  .avbtn:hover, .avbtn[aria-expanded="true"]{border-color:var(--acc)}
  .avbtn[aria-expanded="true"]{box-shadow:0 0 0 3px var(--accsoft)}
  .menu{position:absolute; top:calc(100% + 10px); right:0; z-index:30; min-width:220px;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 30px rgba(31,41,51,.12); padding:6px; display:none; color:var(--ink)}
  .menu.open{display:block}
  .menu .whohead{padding:9px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px;
    color:var(--mut); font-size:12px; max-width:260px; text-align:left}
  .menu .whohead b{display:block; font-size:13px; font-weight:650; color:var(--ink)}
  .menu .whohead b, .menu .whohead span{overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; display:block}
  .mi{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none;
    border:0; border-radius:8px; padding:8px 12px; font-size:13px; color:var(--ink);
    text-decoration:none; cursor:pointer}
  .mi:hover{background:var(--accsoft); color:var(--acc)}
  .mi.quiet{color:var(--mut)}
  /* #207: delete book, adopted into the menu by auth.js — same quiet-until-
     hovered, loud-once-armed contract as .authbtn.danger in the guest bar */
  .mi.danger{color:var(--mut)}
  .mi.danger:hover, .mi.danger.armed{background:var(--dangersoft); color:var(--danger)}
  .mi.danger[disabled]{opacity:.6; cursor:default}
  .mi.mobile-only{display:none}
  @media (max-width:640px){          /* the bar link folds into the menu */
    .tripslink{display:none}
    .mi.mobile-only{display:flex}
  }
  /* sign-in dialog: provider-neutral pill in the bar, providers live here */
  .signdlg{border:0; border-radius:16px; padding:0; width:min(92vw, 380px);
    box-shadow:0 24px 60px rgba(31,41,51,.25); background:var(--card); color:var(--ink)}
  .signdlg::backdrop{background:rgba(31,41,51,.35)}
  .signdlg .dlgin{padding:28px 28px 22px; text-align:center; position:relative}
  .signdlg .dlgx{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
    border:0; background:none; color:var(--mut); font-size:15px; line-height:1}
  .signdlg .dlgx:hover{background:var(--bg); color:var(--ink)}
  .signdlg .dlglogo{font-weight:700; font-size:14px; letter-spacing:-.01em;
    color:var(--mut); margin-bottom:14px; display:flex; flex-direction:column; align-items:center; gap:8px}
  .signdlg .dlglogo img{width:40px; height:40px; display:block}
  .signdlg .dlglogo b{color:var(--ink)} .signdlg .dlglogo span{color:var(--acc)}
  .signdlg h2{margin:0 0 16px; font-size:18px; letter-spacing:-.01em}
  .prov{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:11px 16px; border-radius:10px; border:1px solid var(--line);
    background:#fff; color:var(--ink); font-size:13.5px; font-weight:600}
  .prov:hover{border-color:var(--acc); background:var(--accsoft)}
  .prov svg{width:17px; height:17px; flex:none}
  .signdlg .keep{margin:16px 0 0; font-size:11.5px; color:var(--mut); line-height:1.5}
  .autherr{color:var(--danger); font-size:11.5px; margin-top:10px; min-height:1em}
  .autherr:empty{margin:0; min-height:0}