/* Presto — Phase S1: email and one password. The sign-in card, the code screen, Set your password, the account chip and
   its menu, Settings → Account and the lock screen. Built only from Presto's own tokens (styles.css §1): the navy panel
   with the faint gold hairline, Source Serif headings, the gold button, the champagne accents. Every control is at least
   44 px tall; inputs on the sign-in screens are 16 px so phones never zoom in; motion follows Presto's reduced-motion rule. */

/* ── The sign-in card (one card, same edges as every other card) ─────────────────────────────────────────────────── */
.authscreen{padding:20px 14px 18px;} /* the same 14 px inner edge as every other card, so the text lines up down the page */
.authcard{max-width:400px;}
.authh{display:flex; align-items:center; gap:10px; margin:0 0 6px; font-family:var(--serif); font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.01em; color:var(--tg-text);}
.authh .authmark{flex:0 0 auto; margin-left:-1.375px;} /* the star's ink starts 1.375 px inside its box: this puts the ink on the text edge */
.authsub{margin:0 0 4px; font-size:13.5px; line-height:1.55; color:var(--tg-dim); text-wrap:pretty;}
.authsub b{color:var(--tg-text); font-weight:600;}
.authform{margin:0;}
.authlabel{display:block; margin:16px 0 6px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--tg-text);}
.authinput,
input.authdigit{
  width:100%; min-height:46px; padding:11px 13px; font-family:var(--sans); font-size:16px; line-height:1.3;
  border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-md); background:var(--tg-surf-grad); color:var(--tg-text);
  outline:none; box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
  transition:border-color .3s ease, box-shadow .38s var(--tg-ease);
}
.authinput::placeholder{color:var(--tg-faint);}
.authinput:focus, input.authdigit:focus{border-color:rgba(216,184,99,.55); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), var(--tg-gold-glow);}
.authinput:focus-visible, input.authdigit:focus-visible{outline:none;} /* the gold glow is the focus mark — no offset outline */
.authinput.bad, input.authdigit.bad{border-color:rgba(242,163,156,.7);}
.authpw{position:relative;}
.authpw .authinput{padding-right:50px;}
.autheye{position:absolute; top:1px; right:1px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--tg-dim); border-radius:var(--tg-r-md); cursor:pointer; padding:0;}
.autheye:hover{color:var(--tg-gold-dark);}
.autheye:focus-visible{outline:none; color:var(--tg-gold-dark); box-shadow:inset 0 0 0 2px rgba(216,184,99,.55);}
.autherr{min-height:0; margin-top:6px; font-size:12.5px; line-height:1.45; color:#F2A39C;}
.autherr:empty{display:none;}
.autherr.ok{color:#7FE0BC;}
.authhint{margin-top:6px; font-size:12px; color:var(--tg-dim);}
.authnote{display:none; margin:8px 0 2px; padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--tg-champ-text); background:var(--tg-champ); border:1px solid var(--tg-champ-border); border-radius:var(--tg-r-md);}
.authnote.show{display:block;}
/* The main button wears the same gold and dark lettering as "Generate document" (rounds/glass.css): 5:1 or better on every
   part of the gold, where white lettering managed 1.5:1 */
button.primary.authgo{width:100%; min-height:48px; margin-top:18px; font-size:15px; border-radius:var(--tg-r-pill);}
button.primary.authgo:not(:disabled), button.primary.authgo.busy, button.primary.authgo.waiting{background:linear-gradient(135deg, #D8B863, #B8944E); color:var(--tg-paper-text);}
button.primary.authgo.busy{cursor:progress; opacity:.92;}
button.primary.authgo.waiting{cursor:default; opacity:.85; gap:10px;}
.authgo .authspin{border-color:rgba(27,43,54,.28); border-top-color:var(--tg-paper-text);}
button.primary.authgo:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(216,184,99,.5), 0 12px 28px -12px rgba(154,123,63,.72);} /* the focus glow sits flush — no offset ring */
.authspin.sm{width:15px; height:15px;}
.authalt{margin:14px 0 0; font-size:13px; color:var(--tg-dim);}
.authlink{display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; padding:0; border:none; background:none; cursor:pointer; vertical-align:baseline;
  font:inherit; font-weight:600; color:var(--tg-gold-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.authlink:hover{color:var(--tg-gold);}
.authlink:disabled{opacity:.6; cursor:default;}
.authlink:focus-visible{outline:none; border-radius:4px; box-shadow:0 0 0 2px rgba(216,184,99,.55);}
.authsr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.authhidden{position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; border:0; padding:0;}
.authspin{width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:authspin .8s linear infinite;}
@keyframes authspin{to{transform:rotate(360deg)}}
.authrestart{margin-top:10px;}

/* The code screen: six large mono boxes across the form's width, a little extra space after the third (the email
   shows the code as "123 456") */
.authcode{display:flex; gap:8px; margin:18px 0 0;}
.authcode input.authdigit{flex:1 1 0; width:auto; min-width:0; padding:0; min-height:56px; text-align:center; font-family:var(--mono); font-size:24px; font-weight:600; caret-color:var(--tg-gold-dark);}
.authcode input.authdigit:nth-child(4){margin-left:8px;}
.authcard.checking .authdigit{opacity:.6;}
.authrow{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; font-size:13px;}
.authdim{color:var(--tg-dim); font-variant-numeric:tabular-nums;}

/* While signed out, the old account surfaces stay out of the way */
body.signed-out #acctGate{display:none !important;}
/* One thing leads while signing in. The "Try it instantly" card takes the same quiet frame as every other card (its gold
   heading still finds the visitors who came to try it); during the code and new-password steps it steps aside — it says
   "No account needed" — and the rest of the page recedes, so nothing else asks for attention mid-sign-in. */
body.signed-out #demoBanner{border-color:var(--tg-gold-line); background:var(--tg-panel-grad);}
body[data-auth="code"] #demoBanner, body[data-auth="setpw"] #demoBanner{display:none;}
body[data-auth="code"] main > :not(#authScreen), body[data-auth="setpw"] main > :not(#authScreen),
body[data-auth="ext"] main > :not(#authScreen), /* the extension panel, signed out: nothing below works until it connects */
body[data-auth="pair"] main > :not(#authScreen), /* "Connect the Presto extension?" — the one decision on screen until answered */
body[data-auth="code"] #drDock > :not(#drBtn), body[data-auth="setpw"] #drDock > :not(#drBtn), body[data-auth="pair"] #drDock > :not(#drBtn),
body[data-auth="code"] #drBtn > *, body[data-auth="setpw"] #drBtn > *, body[data-auth="pair"] #drBtn > *{opacity:.4; transition:opacity .3s ease;} /* the Derm Rounds bar's glass and the strip under it stay solid; only what is on them fades */

/* ── The account chip (header): the first letter of the name, 44 px to tap ─────────────────────────────────────── */
.acctchip.s1{position:relative; width:30px; height:30px; padding:0; justify-content:center; border-radius:50%; border:1px solid rgba(198,161,91,.42); background:linear-gradient(135deg, #D8B863, #B8944E);}
.acctchip.s1::after{content:""; position:absolute; inset:-7px;}
.acctchip.s1 .ava{width:auto; height:auto; background:none; color:var(--tg-paper-text); font-size:12.5px; font-weight:700; letter-spacing:0;} /* dark on gold, like the main buttons */
.acctchip.s1:hover{border-color:var(--tg-gold-dark); filter:brightness(1.06);}
.acctchip.s1[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(216,184,99,.22);}
.acctchip.s1:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(216,184,99,.45);}
.acctmenu{position:fixed; z-index:60; min-width:220px; max-width:min(300px, calc(100vw - 16px)); padding:6px; background:var(--tg-panel-grad);
  border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-xl); box-shadow:var(--tg-sh-xl), inset 0 1px 0 rgba(255,255,255,.05);}
.acctmenuwho{padding:8px 10px 9px; margin-bottom:4px; border-bottom:1px solid var(--tg-hairline); font-size:12.5px; line-height:1.4; overflow:hidden;}
.acctmenuwho b{display:block; color:var(--tg-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.acctmenuwho span{display:block; color:var(--tg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.acctmenu button{display:flex; align-items:center; width:100%; min-height:44px; padding:0 10px; border:none; background:none; border-radius:var(--tg-r-md);
  color:var(--tg-text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer;}
.acctmenu button:hover, .acctmenu button:focus-visible{background:rgba(216,184,99,.10); color:var(--tg-gold-dark); outline:none;}

/* ── Settings → Account: six rows, the same labels as every other Settings pane ─────────────────────────────────── */
.acctpane .acrow{padding:14px 0; border-top:1px solid var(--tg-hairline);}
.acctpane .acrow:first-child{border-top:none; padding-top:0;}
.acctpane .acctk, #settingsCard .acctpane label.acctk{display:block; margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--tg-dim); line-height:1.4;}
.acctpane .acctv{display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:32px;}
.acctpane .acctval{font-size:13.5px; color:var(--tg-text); overflow-wrap:anywhere;}
.acctpane .acctval.dim{color:var(--tg-dim); letter-spacing:.12em;}
.acctpane .acctval b{font-weight:600;}
.acctpane .accthint{margin-top:4px; font-size:12px; line-height:1.5; color:var(--tg-dim);}
.acctpane .acctinput{width:100%; max-width:360px; min-height:40px; padding:9px 11px; font-family:var(--sans); font-size:13.5px; border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-md);
  background:var(--tg-surf-grad); color:var(--tg-text); outline:none; box-shadow:inset 0 1px 2px rgba(0,0,0,.22);}
.acctpane .acctinput:focus{border-color:rgba(216,184,99,.55); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), var(--tg-gold-glow);}
.acctpane .acctinput:focus-visible{outline:none;}
.acctpane .acsaved{font-size:12px; color:#7FE0BC;}
.acctpane .acctinline{margin-top:10px; padding:4px 14px 14px; max-width:420px; border:1px solid var(--tg-hairline); border-radius:var(--tg-r-lg); background:rgba(20,50,74,.35);}
.acctpane .acctinline .authinput{font-size:14px; min-height:42px;}
.acctpane .acctinline .autheye{width:40px; height:40px;}
#settingsCard .acctpane label.authlabel{margin:12px 0 6px; font-size:12.5px; text-transform:none; letter-spacing:0; font-weight:600; color:var(--tg-text);}
.acctpane .acctbtns{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;}
.acctpane .acctouts .acctbtns{margin-top:0;}
.acctpane .scbtn{min-height:40px;}
.acctpane .scbtn.quiet{border-color:var(--tg-border); color:var(--tg-dim); font-weight:500;}
.acctpane .scbtn.quiet:hover{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark); background:none;}
.acctpane .scbtn.danger{border-color:rgba(242,163,156,.55); color:#F2A39C;}
.acctpane .scbtn.danger:hover{background:rgba(242,163,156,.08);}
.acctpane .scbtn.busy{opacity:.8;}
.acctpane .scbtn .authspin{width:14px; height:14px; border-color:rgba(216,184,99,.35); border-top-color:var(--tg-gold-dark);}
.acctpane .acctconfirm{display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--tg-text); padding-top:10px;}
.acctpane .acctconfirm .acctbtns{margin-top:0;}
.acctpane .acctdone{padding-top:10px; font-size:13px; color:#7FE0BC;}
.acctpane .acctempty{font-size:13px; color:var(--tg-dim); margin-bottom:12px;}
.acctpane .acctcode{max-width:160px; font-family:var(--mono); letter-spacing:.3em; font-size:18px;}
#settingsCard .acctpane label.lockline{display:grid; grid-template-columns:18px minmax(0, 1fr); column-gap:10px; align-items:center; margin:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:13px; line-height:1.5; color:var(--tg-text); cursor:pointer; min-height:40px;}
.acctpane .lockline input[type=checkbox]{width:18px; height:18px; margin:0; accent-color:var(--tg-gold-dark);}
.acctpane .acctselect{display:inline-block; width:auto; min-height:34px; margin:0 4px; padding:5px 8px; border:1px solid var(--tg-border); background:var(--tg-surface); color:var(--tg-text); border-radius:var(--tg-r-md); font-size:13px;}
.acctpane .acctselect:focus{outline:none; border-color:var(--tg-gold-deep);}
@media (pointer:coarse){
  .acctpane .scbtn, .acctpane .acctinput, .acctpane .acctselect{min-height:44px;}
}

/* ── The lock screen: nothing readable behind it ────────────────────────────────────────────────────────────────── */
body.locked{overflow:hidden;}
body.locked .app{filter:blur(18px) saturate(.7); pointer-events:none; user-select:none;}
.lockov{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(8,19,30,.78); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);}
.lockpanel{width:100%; max-width:380px; padding:26px 24px 22px; background:var(--tg-panel-grad); border:1px solid var(--tg-gold-line);
  border-radius:var(--tg-r-3xl); box-shadow:var(--tg-sh-xl), inset 0 1px 0 rgba(255,255,255,.05);}
.lockpanel .authsub{margin-bottom:2px;}

/* ── Phone ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .authh{font-size:20px;}
  .authcode{gap:6px;}
  .authcode input.authdigit{min-height:52px; font-size:22px;}
  .authcode input.authdigit:nth-child(4){margin-left:6px;}
  .lockpanel{padding:22px 18px 18px;}
  /* the header has no room beside Settings on a phone: the chip sits in the top-right corner, level with the logo */
  .acctchip.s1.show{position:absolute; top:15px; right:14px;}
}
@media (prefers-reduced-motion: reduce){
  .authspin{animation:none; border-top-color:rgba(255,255,255,.45); border-right-color:#fff;}
}