/* Presto — Phase S1 sign-in, rebuilt to the UI polish brief (PrestoScribe_SignIn_UI_Polish.md; the six states of
   Presto_SignIn_States_Mockup.html). A sign in · B code · C choose a password: one centred card on the navy field and
   nothing else (signed out). D start trial · E ended: one gate card over a sleeping workspace (signed in, no plan).
   F active: no card — the chip and a quiet usage line. The rules: one state, one sentence, one button; champagne only for
   selection; no browser-default link; Source Serif titles that name the person; gated means asleep; signed out means
   focused. Every control is at least 44 px to tap; motion follows Presto's reduced-motion rule. */

/* ── Signed out means focused: one card, centred; the workspace, the account chip and the counter are not shown ─── */
body.signed-out main > :not(#authScreen):not(#tryLine), body.signed-out #drDock, body.signed-out #meterChip, body.signed-out .acctchip.s1{display:none !important;}
body.signed-out main{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 150px); min-height:calc(100dvh - 150px); padding:28px 14px 40px;} /* 14 px either side: on a phone the card keeps the mockup's margins */
body.signed-out #authScreen{width:100%; max-width:420px; margin:0 auto; padding:30px 30px 26px; background:#0F2638; border:1px solid #1D3850; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4);}
/* "New to Presto? Try it first" — one quiet line under the sign-in card (web app; the sign-in step only) */
.tryline{display:none; margin:22px 0 0; font-size:13px; line-height:1.6; color:#8DA0A9; text-align:center;}
body.signed-out[data-auth="signin"] main > #tryLine{display:block;}
#tryLine[hidden]{display:none !important;}

/* ── Try it first: the demo card ("Try it instantly") over a working workspace — the gate card's frame and type ─── */
body.trying #authScreen, body.trying #tryLine, body.trying #drDock, body.trying #meterChip, body.trying .acctchip.s1{display:none !important;}
body.trying #demoBanner{max-width:760px; margin:12px auto 22px; padding:28px 30px 24px; background:#0F2638; border:1px solid #1D3850; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
body.trying #demoBanner h2{margin:0 0 8px; font-family:var(--serif); font-variation-settings:"opsz" 14; font-size:27px; line-height:1.2; font-weight:400; letter-spacing:0; color:#F4F7F8;}
body.trying #demoBanner h2:focus{outline:none;}
body.trying #demoBanner .sub{margin:0 0 18px; max-width:56ch; font-size:14.5px; line-height:1.6; color:#C9D4D9;}
body.trying #demoSamples{display:flex; flex-wrap:wrap; gap:8px; margin:0;}
body.trying #demoSamples .chip{position:relative; margin:0; padding:9px 15px; font-family:var(--sans); font-size:13px; line-height:normal; font-weight:500; color:#E9EFF1; background:#14324A; border:1px solid #24415B; border-radius:999px; cursor:pointer; transition:border-color .15s ease, color .15s ease;}
body.trying #demoSamples .chip::after{content:""; position:absolute; inset:-4px -2px;} /* 44 px to tap */
body.trying #demoSamples .chip:hover{border-color:rgba(216,184,99,.65); color:#F4F7F8; transform:none; filter:none; box-shadow:none;}
body.trying #demoSamples .chip:focus-visible{outline:none; border-color:rgba(216,184,99,.65); box-shadow:0 0 0 3px rgba(216,184,99,.18);}
.demounder{display:none;}
body.trying .demounder{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:16px; font-size:13px; line-height:1.5; color:#8DA0A9;}
body.trying .demounder span, body.trying #demoBanner .sub{text-wrap:pretty;} /* no lone word on the last line */
@media (min-width:800px){ body.trying #demoBanner{margin-top:8px;} }
@media (max-width:720px){
  body.trying #demoBanner{padding:22px 18px 20px;}
  body.trying #demoBanner h2{font-size:23px;}
  body.trying .demounder{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){ body.trying #demoSamples .chip{transition:none !important;} }

/* ── The auth card (sign in · code · choose a password; also the extension's card and the lock screen) ─────────── */
.authscreen{padding:28px 30px 24px;}
.authcard{max-width:420px;}
.authmarkbox{width:40px; height:40px; margin:0 0 18px; border-radius:11px; background:#14324A; border:1px solid #24415B; display:flex; align-items:center; justify-content:center;}
.authmarkbox .authmark{width:20px; height:20px;}
.authcard h2.authh, .lockpanel h2.authh{margin:0 0 6px; font-family:var(--serif); font-variation-settings:"opsz" 14; font-size:26px; line-height:1.2; font-weight:400; letter-spacing:0; color:#F4F7F8;} /* the serif's text cut (optical size 14), exactly as in the mockup — not the narrower display cut */
.authsub{margin:0 0 20px; font-size:14px; line-height:1.55; color:#C9D4D9; text-wrap:pretty;}
.authsub b{color:var(--tg-text); font-weight:500;}
.authform{margin:0;}
.authlabel{display:block; margin:0 0 6px; font-size:12.5px; line-height:normal; font-weight:400; letter-spacing:0; text-transform:none; color:#8DA0A9;}
input.authinput, /* "input." so the app's own input[type=password] rule (12 px, 10 px padding) never wins */
input.authdigit{
  width:100%; height:46px; min-height:46px; padding:0 14px; font-family:var(--sans); font-size:15px; line-height:1.3;
  border:1px solid #24415B; border-radius:11px; background:#14324A; color:var(--tg-text);
  outline:none; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.authform > .authinput, .authpw{margin-bottom:14px;}
.authinput::placeholder{color:#6E7E86;}
.authinput:focus, input.authdigit:focus{border-color:rgba(198,161,91,.65); box-shadow:0 0 0 3px rgba(198,161,91,.12);}
.authinput:focus-visible, input.authdigit:focus-visible{outline:none;} /* the gold border and halo are 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; margin-bottom:0;}
.autheye{position:absolute; top:1px; right:1px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:#8DA0A9; border-radius:10px; cursor:pointer; padding:0;}
.autheye:hover{color:#C9D4D9; background:rgba(255,255,255,.04);}
.autheye:focus-visible{outline:none; color:#D8B863; box-shadow:inset 0 0 0 2px rgba(216,184,99,.55);}
.autherr{margin:-8px 0 12px; 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);}
/* a notice on the card ("Sign in to connect the Presto extension.", "Your session has ended…") — a quiet note, never champagne */
.authnote{display:none; margin:0 0 16px; padding:10px 12px; font-size:13px; line-height:1.5; color:#C9D4D9; background:rgba(20,50,74,.6); border:1px solid #24415B; border-radius:11px;}
.authnote.show{display:block;}
/* The one gold button: the same gold and dark lettering as "Generate document" */
button.primary.authgo{width:100%; min-height:47px; margin-top:4px; padding:14px; font-family:var(--sans); font-size:15px; line-height:normal; font-weight:500; border-radius:12px; box-shadow:0 10px 26px rgba(198,161,91,.22); transition:transform .12s ease, box-shadow .18s ease;}
button.primary.authgo:not(:disabled), button.primary.authgo.busy, button.primary.authgo.waiting{background:linear-gradient(135deg, #D8B863, #B8944E); color:#1B2B36;}
button.primary.authgo:hover{transform:translateY(-1px);}
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:#1B2B36;}
button.primary.authgo:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(216,184,99,.5), 0 10px 26px rgba(198,161,91,.22);} /* the focus glow sits flush — no offset ring */
.authspin.sm{width:15px; height:15px;}
.authalt{margin:16px 0 0; font-size:13px; line-height:1.6; color:#8DA0A9; text-align:center;}
.authcard > .authalt:last-child{margin-bottom:13px;} /* the mockup's breathing room beneath the last line */
/* links drawn as buttons: gold, no underline — a 1px gold hairline at 35% beneath the words, stronger on hover */
.authlink{display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; padding:0; border:none; cursor:pointer; vertical-align:baseline;
  font:inherit; font-weight:400; color:#D8B863; text-decoration:none;
  background:linear-gradient(rgba(216,184,99,.35), rgba(216,184,99,.35)) no-repeat; background-size:100% 1px; background-position:0 calc(50% + .72em); transition:background-image .15s;}
.authlink:hover{background-image:linear-gradient(#D8B863, #D8B863);}
.authlink{position:relative;}
.authlink::after{content:""; position:absolute; inset:0 -6px;} /* a short word ("Sign in") is still 44 px wide to tap */
.authsub .authlink, .authalt .authlink{min-width:44px; justify-content:center;} /* "Edit", "Sign in": the box itself is 44 px wide (the audit measures it) */
.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 mono boxes across the card; resend and "Use a different email" on one centred line */
.authcode{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; margin:4px 0 18px;}
.authcode input.authdigit{width:100%; min-width:0; height:56px; padding:0; text-align:center; font-family:var(--mono); font-size:24px; font-weight:400; caret-color:#D8B863;}
.authcard.checking .authdigit{opacity:.6;}
.authalt.authrow{display:block; margin-top:0;}
.authsep{margin:0 6px; color:#6E7E86;}
.authdim{color:#8DA0A9; font-variant-numeric:tabular-nums;} /* "Resend code in 0:30": the muted grey (5.7:1), not the mockup's fainter grey (3.7:1) — every kind of text at WCAG AA */

/* "Connect the Presto extension?" (signed in): the one decision on screen until it is answered */
body[data-auth="pair"] main > :not(#authScreen), body[data-auth="pair"] #drDock > :not(#drBtn), body[data-auth="pair"] #drBtn > *{opacity:.4; transition:opacity .3s ease;}
/* …in the plan card's frame and rhythm: flush with the workspace card, the lead to 56 characters, a full-width gold button */
body[data-auth="pair"] #authScreen{margin:12px 0 22px; padding:28px 30px 24px; background:#0F2638; border:1px solid #1D3850; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
body[data-auth="pair"] #authScreen .authcard{max-width:none;}
body[data-auth="pair"] #authScreen .authsub{max-width:56ch;}
@media (min-width:800px){ body[data-auth="pair"] #authScreen{margin-top:8px;} }
@media (max-width:720px){ body[data-auth="pair"] #authScreen{padding:22px 18px 20px;} } /* the Derm Rounds bar's glass stays solid; only what is on it fades */

/* ── Signed in, no plan: the gate card (D start trial · E ended), and the workspace asleep beneath it ───────────── */
#acctGate{margin:12px 0 0;} /* flush with the workspace card beneath (same left and right edges); 26 px below the header with main's 14 px, as in the mockup */
.gatecard{max-width:760px; margin:0 auto 22px; padding:28px 30px 24px; background:#0F2638; border:1px solid #1D3850; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.gatecard h2.gateh{margin:0 0 8px; font-family:var(--serif); font-variation-settings:"opsz" 14; font-size:27px; line-height:1.2; font-weight:400; color:#F4F7F8;}
.gatecard h2.gateh:focus{outline:none;}
.gatelead{margin:0 0 20px; max-width:56ch; font-size:14.5px; line-height:1.6; color:#C9D4D9;}
.gatelead b{color:var(--tg-text); font-weight:500;}
.gatecycle{display:inline-flex; gap:6px; padding:3px; margin:0 0 16px; border-radius:999px; background:rgba(20,50,74,.6); border:1px solid #24415B;}
.gatecycle .seg{position:relative; display:inline-block; margin:0; padding:6px 13px; border:0; border-radius:999px; background:transparent; color:#C9D4D9; font:inherit; font-size:12.5px; line-height:normal; cursor:pointer;}
.gatecycle .seg::after{content:""; position:absolute; inset:-8px -3px;} /* 44 px to tap; the pill itself stays 28 px */
.gatecycle .seg.on{background:#F5EFE1; color:#6E5828; font-weight:500;} /* champagne: selection only */
.gatecycle .seg:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(216,184,99,.55);}
.gatecycle .seg .save{margin-left:5px; font-family:var(--mono); font-size:11px; opacity:.85;}
.gatecta{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:50px; padding:15px 20px; border:0; border-radius:13px; cursor:pointer; font:inherit; text-align:left;
  background:linear-gradient(135deg, #D8B863, #B8944E); color:#1B2B36; box-shadow:0 10px 28px rgba(198,161,91,.22); transition:transform .12s ease, box-shadow .18s ease;}
.gatecta:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(198,161,91,.3);}
.gatecta:active{transform:none;}
.gatecta:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(216,184,99,.5), 0 10px 28px rgba(198,161,91,.22);}
.gatecta .act{font-size:16px; line-height:normal; font-weight:500;}
.gatecta .price{font-family:var(--mono); font-size:13.5px; line-height:normal; opacity:.85;}
.gateunder{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:14px; font-size:13px; line-height:1.5; color:#8DA0A9;}
.gatelinks{display:flex; gap:18px;}
.gatelinks a{position:relative;}
.gatelinks a::after{content:""; position:absolute; inset:-14px -4px;} /* 44 px to tap (17 px of words + 2 × 14); the hairline stays under the words */
.gateplans{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:16px;}
.gateplans[hidden]{display:none;}
.gp{padding:12px 14px; border:1px solid #24415B; border-radius:12px; background:rgba(20,50,74,.35);}
.gp.gpon{border-color:rgba(216,184,99,.55);}
.gpn{font-family:var(--serif); font-size:17px; color:#F4F7F8;}
.gpp{margin-top:2px; font-family:var(--mono); font-size:13px; color:var(--tg-text);}
.gpl{margin:4px 0 8px; font-size:12.5px; color:#8DA0A9;}
.gpnote{font-size:12.5px; color:#D8B863;}
.gatemsg{margin-top:12px; font-size:13px; line-height:1.5; color:#C9D4D9;}
.gatemsg.bad{color:#F2A39C;} /* checkout messages stay one quiet line — no boxed notes on the card */
.gatemsg:empty, .gatemsg.hidden{display:none;}
body.gated main > :not(#acctGate):not(#authScreen):not(#settingsCard):not(#usageLine), body.gated #drDock{opacity:.42; pointer-events:none; user-select:none; transition:opacity .25s ease;}
body.gated #drDock{display:none !important;} /* the Derm Rounds bar would float over the sleeping workspace: one card, nothing else on top */

/* ── Active: no card. A quiet usage line beneath the header; the header's counter gives way to it ──────────────── */
.usageline{max-width:760px; margin:12px auto 22px; font-size:12.5px; line-height:normal; color:#8DA0A9; text-align:right; font-variant-numeric:tabular-nums;}
.usageline.hidden{display:none;}
body.signed-in #meterChip{display:none !important;}

/* ── The account chip (header): 38 px gold circle, the first letter of the name; the full name on hover or focus ─── */
.acctchip.s1{position:relative; width:38px; height:38px; padding:0; justify-content:center; border-radius:50%; border:0; background:linear-gradient(135deg, #D8B863, #B8944E);}
.acctchip.s1::after{content:""; position:absolute; inset:-3px;} /* 44 px to tap */
.acctchip.s1 .ava{width:auto; height:auto; background:none; color:#1B2B36; font-size:15px; font-weight:500; letter-spacing:0;}
.acctchip.s1 .acctip{position:absolute; top:46px; right:0; z-index:61; padding:6px 10px; white-space:nowrap; font-size:12px; font-weight:400; color:#C9D4D9; background:#14324A; border:1px solid #24415B; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s ease;}
.acctchip.s1:hover .acctip, .acctchip.s1:focus-visible .acctip{opacity:1;}
.acctchip.s1[aria-expanded="true"] .acctip{opacity:0;}
.acctchip.s1:hover{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; height:42px; min-height:42px;}
.acctpane .acctinline .autheye{width:40px; height:40px;}
#settingsCard .acctpane label.authlabel{margin:12px 0 6px; font-size:12.5px; line-height:1.5; 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:420px; padding:30px 30px 26px; background:#0F2638; border:1px solid #1D3850;
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4);}
.lockpanel .authsub{margin-bottom:2px;}

/* ── Phone ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .authcode{gap:6px;} /* six boxes at least 44 px wide on a 390 px phone */
  .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 (max-width:720px){
  .gatecard{padding:22px 18px 20px;}
  .gatecard h2.gateh{font-size:23px;}
  .gatecta{flex-direction:column; align-items:flex-start; gap:4px;}
  .gateunder{flex-direction:column; align-items:flex-start;}
  .gateplans{grid-template-columns:1fr;}
}
@media (min-width:800px){
  #acctGate, .usageline{margin-top:8px;} /* the web app's wide layout gives main 18 px at the top: still 26 px below the header */
}
@media (max-width:480px){
  input.authinput{font-size:16px;} /* phones never zoom into a 16 px field */
}
@media (max-width:360px){
  body.signed-out #authScreen{padding:24px 18px 22px;} /* the smallest phones: room for six boxes */
}
@media (prefers-reduced-motion: reduce){
  .authspin{animation:none; border-top-color:rgba(255,255,255,.45); border-right-color:#fff;}
  .authinput, input.authdigit, button.primary.authgo, .gatecta, .acctchip.s1 .acctip, .authlink, body.gated main > *, body.gated #drDock{transition:none !important;}
  button.primary.authgo:hover, .gatecta:hover{transform:none;}
}

/* ── The no-card trial (trial brief version 2). Every word comes from the copy file; one gold action per screen;
   champagne only on what is chosen (the active billing segment, the chosen plan) — UI polish brief rules 1–2. ─────── */
/* /start: hidden on the signed-out field like the sign-in card; the quiet line under the button */
body.signed-out[data-auth="start"] main > #tryLine{display:none;}
#startForm .authalt.startnote{margin:12px 0 0;} /* "We'll email you a six-digit code." — a centred line, like the card's other small lines */
.authsub .authlink{margin:-12px 0;} /* "Edit" beside the address — still 44 px to tap */
.authalt.authspam{margin:8px 0 0; font-size:12.5px; line-height:1.5;} /* the spam-folder hint: a centred line under the resend row */
#authNameErr:empty{min-height:0;}
#authNameErr{margin-bottom:14px;}
/* the pill beside the chip (Section 7.1): the last day as a date; on a phone the short form */
/* the button is a 44 px tap area; the slim pill is drawn inside it */
.trialpill{display:inline-flex; align-items:center; min-height:44px; margin:0 8px 0 0; padding:0; border:0; background:none; color:#C9D4D9; font:inherit; font-size:12.5px; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; cursor:pointer;}
.trialpill .pl-face{display:inline-flex; align-items:center; min-height:34px; padding:0 13px; box-sizing:border-box; border:1px solid #24415B; border-radius:999px; background:rgba(11,30,45,.6); color:#C9D4D9;}
.trialpill:hover .pl-face{border-color:#3A5A75; color:var(--tg-text);}
.trialpill:focus-visible{outline:none;}
.trialpill:focus-visible .pl-face{box-shadow:0 0 0 2px rgba(216,184,99,.55);}
.trialpill .pl-short{display:none;}
@media (max-width:560px){ .trialpill .pl-long{display:none;} .trialpill .pl-short{display:inline;} }
body.signed-out .trialpill, body.trying .trialpill{display:none !important;}
/* the gold ring on the chip during the trial (1.5 px, #D8B863 at 70%) */
.acctchip.s1.trialring{box-shadow:0 0 0 2px var(--tg-bg, #0B1E2D), 0 0 0 3.5px rgba(216,184,99,.7);}
/* the quiet line at the top of the workspace: two days left · we couldn't charge your card (never champagne, never a popup) */
.trialline{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:760px; margin:12px auto 14px; padding:10px 14px; border:1px solid #24415B; border-radius:12px; background:rgba(20,50,74,.45); font-size:13px; line-height:1.55; color:#C9D4D9;}
.trialline .authlink{margin:-12px 0;}
.trialline .tlamber{color:#E8B86A;}
.trialline .tlamber .authlink{color:#E8B86A;}
.trialline .tlx{position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:none; color:#8DA0A9; font:inherit; font-size:16px; line-height:1; cursor:pointer;}
.trialline .tlx::after{content:""; position:absolute; inset:-10px;} /* 44 px to tap */
.trialline .tlx:hover{color:#C9D4D9; background:rgba(255,255,255,.05);}
.trialline .tlx:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(216,184,99,.55);}
/* the Challenge's shorthand, waiting in the box: one gold line above it, gone at the first Generate */
.carryline{margin:0 0 8px; font-size:13px; line-height:1.5; color:#D8B863;}
/* the gate: the lead collapses to one line when the picker opens in place */
.gatelead.oneline{margin-bottom:6px;}
/* the plan picker (Section 7.4) — three tiles, the chosen one in a champagne frame; one gold button */
.picker{margin-top:4px;}
.picker .pickh{margin:4px 0 12px; font-family:var(--serif); font-variation-settings:"opsz" 14; font-size:20px; line-height:1.25; font-weight:400; color:#F4F7F8;}
.picker .pickh:focus{outline:none;}
.picker .gatecycle{margin:0 0 14px;}
.picker .pickplans{margin:0 0 14px;}
.picker button.gp{display:block; width:100%; margin:0; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;}
.picker button.gp > span{display:block;}
.picker button.gp:hover{border-color:#3A5A75;}
.picker button.gp.on{border-color:#E8D9B0; box-shadow:inset 0 0 0 1px #E8D9B0; background:rgba(245,239,225,.07);}
.picker button.gp:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(216,184,99,.45);}
.picker button.gp.on:focus-visible{box-shadow:inset 0 0 0 1px #E8D9B0, 0 0 0 3px rgba(216,184,99,.45);}
.picker .gpl{margin-bottom:0;}
/* "Plans open shortly": the same gold (its words must stay readable — AA), but nothing to press yet: no lift, no pointer */
.picker .gatecta[data-holding]{cursor:default; justify-content:center; box-shadow:none;}
.picker .gatecta[data-holding]:hover{transform:none; box-shadow:none;}
.picker .pickq{margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#8DA0A9;}
@media (max-width:720px){ .picker .pickplans{grid-template-columns:1fr;} }
/* Settings → Plan */
.planpane .planlead{margin:0 0 14px; max-width:60ch; font-size:14px; line-height:1.6; color:#C9D4D9;}
.planpane .planlead b{color:var(--tg-text); font-weight:500;}
/* at a trial's ceiling: a quiet note with the way on (never the red "Generation failed … Retry") */
#composeErr.trialceil{font-size:13px; line-height:1.55; padding:10px 12px; color:#C9D4D9; background:rgba(20,50,74,.6); border:1px solid #24415B; border-radius:12px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center;}
#composeErr.trialceil .authlink{margin:-12px 0;}