/* The account button, its menu and the sign-in window (js/account-ui.js), shared by the
   landing page and the planner. It carries its own colours for light and dark, so it looks
   the same on both pages whatever each page's own tokens are. The button designs come from
   buttons.css. */
.au,.au-host{
  --au-ink:#111827;--au-muted:#4b5563;--au-line:#e5e7eb;--au-field:#ffffff;--au-field-edge:#d1d5db;
  --au-panel:color-mix(in srgb,#ffffff 92%,transparent);--au-accent:#fd6703;--au-accent-text:#c2410c;
  --au-ok:#15803d;--au-bad:#b91c1c;--au-bad-bg:#fef2f2;--au-shadow:#4b2a3f;
  --au-glass:color-mix(in srgb,#ffffff 60%,transparent);--au-glass-strong:color-mix(in srgb,#ffffff 82%,transparent);
  --au-edge-a:color-mix(in srgb,#ffffff 95%,transparent);--au-edge-b:color-mix(in srgb,#fd6703 25%,transparent);
  --au-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--au-ink)}
:root[data-theme=dark] .au,:root[data-theme=dark] .au-host{
  --au-ink:#f8fafc;--au-muted:#9aa3ae;--au-line:color-mix(in srgb,#ffffff 12%,transparent);--au-field:#0f1318;--au-field-edge:color-mix(in srgb,#ffffff 16%,transparent);
  --au-panel:color-mix(in srgb,#0e1116 94%,transparent);--au-accent:#7dd3fc;--au-accent-text:#7dd3fc;
  --au-ok:#34d399;--au-bad:#f87171;--au-bad-bg:color-mix(in srgb,#f87171 12%,transparent);--au-shadow:#000000;
  --au-glass:color-mix(in srgb,#ffffff 4%,transparent);--au-glass-strong:color-mix(in srgb,#ffffff 8%,transparent);
  --au-edge-a:color-mix(in srgb,#ffffff 22%,transparent);--au-edge-b:color-mix(in srgb,#ffffff 4%,transparent)}
.au [hidden],.au-host [hidden]{display:none!important}
.au-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the button: the landing page's glass ---------- */
.au{position:relative}
.au-icon-btn{position:relative;isolation:isolate;display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:.6rem;
  background:transparent;color:var(--au-ink);font-size:1rem;cursor:pointer}
.au-icon-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--au-grain),var(--au-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);box-shadow:inset 0 1px 0 color-mix(in srgb,#ffffff 30%,transparent)}
.au-icon-btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,var(--au-edge-a),transparent 38%,transparent 62%,var(--au-edge-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.au-icon-btn:hover::after{background:var(--au-grain),var(--au-glass-strong)}
.au-icon-btn:focus-visible{outline:2px solid var(--au-accent);outline-offset:3px}
.au-icon-btn .dot{position:absolute;top:-.15rem;right:-.15rem;z-index:2;width:.55rem;height:.55rem;border-radius:50%;background:var(--au-ok);border:2px solid var(--au-field)}

/* ---------- the menu ---------- */
.au-menu{position:absolute;right:0;top:calc(100% + .6rem);z-index:60;width:min(20rem,calc(100vw - 2rem));padding:.4rem;border:1px solid var(--au-line);border-radius:1rem;
  background:var(--au-grain),var(--au-panel);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 1.5rem 3rem -1.25rem color-mix(in srgb,var(--au-shadow) 45%,transparent);text-align:left}
.au-menu .menu-head{margin:.25rem 0 .35rem;padding:0 .75rem;font-size:.75rem;color:var(--au-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-menu [role=menuitem]{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:2.4rem;padding:.5rem .75rem;border:0;border-radius:.5rem;
  background:transparent;color:var(--au-ink);font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.au-menu [role=menuitem]:hover,.au-menu [role=menuitem]:focus-visible{background:color-mix(in srgb,var(--au-ink) 6%,transparent);outline:none}
.au-menu [role=menuitem] .au-ico{font-size:.875rem;color:var(--au-muted);transition:transform .16s ease}
.au-menu [role=menuitem][aria-expanded=true] .au-ico{transform:rotate(180deg)}
.au-menu .danger{color:var(--au-bad)}
.au-personalise{padding:.15rem .75rem .6rem}
.au-choices{border:0;margin:0;padding:0;min-width:0}
.au-choices legend{padding:0;margin:.15rem 0 .45rem;font-size:.75rem;font-weight:600;color:var(--au-muted)}
.au-options{display:flex;flex-wrap:wrap;gap:.375rem}
.au-opt{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .7rem;border:1px solid var(--au-field-edge);border-radius:.5rem;background:var(--au-field);
  font-size:.8125rem;font-weight:600;color:var(--au-ink);cursor:pointer}
.au-opt .au-ico{font-size:.95rem}
.au-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.au-opt:has(input:checked){border-color:var(--au-accent);background:color-mix(in srgb,var(--au-accent) 10%,var(--au-field));color:var(--au-accent-text)}
.au-opt:has(input:focus-visible){outline:2px solid var(--au-accent);outline-offset:2px}

/* ---------- the sign-in window ---------- */
.au-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.5rem;background:color-mix(in srgb,#111827 30%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.au-dialog{width:min(26rem,100%);padding:1.4rem 1.5rem 1.25rem;border:1px solid var(--au-line);border-radius:1.1rem;color:var(--au-ink);
  background:var(--au-grain),var(--au-panel);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 2rem 4rem -2rem color-mix(in srgb,var(--au-shadow) 55%,transparent)}
.au-dialog h2{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.02em}
.au-dialog p{margin:.4rem 0 0;font-size:.875rem;line-height:1.55;color:var(--au-muted)}
.au-dialog p strong{color:var(--au-ink)}
.au-field{margin-top:1rem}
.au-field label{display:block;margin-bottom:.35rem;font-size:.8125rem;font-weight:600}
.au-input{width:100%;min-height:2.6rem;padding:.55rem .75rem;border:1px solid var(--au-field-edge);border-radius:.5rem;background:var(--au-field);color:var(--au-ink);font:inherit;font-size:.9375rem}
.au-input:focus-visible{outline:2px solid var(--au-accent);outline-offset:1px}
.au-input::placeholder{color:var(--au-muted);opacity:.8}
.au-code{font-size:1.5rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.au-error{margin:.65rem 0 0!important;padding:.5rem .65rem;border-radius:.5rem;background:var(--au-bad-bg);color:var(--au-bad)!important;font-weight:500}
.au-hint{font-size:.8125rem!important}
.au-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.2rem}
.au-action{min-height:2.6rem;padding:.55rem 1.15rem;font-size:.875rem}
.au-danger{background:var(--au-bad);color:#fff;border-radius:.6rem}
.au-danger:hover{background:color-mix(in srgb,var(--au-bad) 85%,#000)}
@media(prefers-reduced-motion:no-preference){.au-menu,.au-dialog{animation:au-pop .2s cubic-bezier(.2,.8,.2,1)}}
@keyframes au-pop{from{opacity:0;translate:0 .5rem}to{opacity:1;translate:0 0}}