/* AstroEngine account pages (/account and below): loaded after style.css, whose tokens and .btn, .os, .dl-foot, .win it reuses.
   The status colours are the app's light-theme tokens (DESIGN.md, Status). */
/* Google Sans, SIL OFL 1.1: assets/fonts/google-sans-OFL.txt. Used only on the Google button, as Google's rules ask. */
@font-face{font-family:"Google Sans";src:url(/assets/fonts/google-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ok:#129865;--ok-ink:#0a724c;--ok-soft:#e3f5ed;
  --warn:#b26a00;--warn-ink:#8f5400;--warn-soft:#fdf1dc;
  --danger:#d1393a;--danger-ink:#b3261e;--danger-soft:#fbe7e7;
}
/* iter-40: the dark theme, by style.css's rule (<html data-theme>, site iter-25): the app's dark status tokens (DESIGN.md *-dark).
   The two blocks are one set: change both. */
:root[data-theme=dark]{
  --ok:#3ccf8e;--ok-ink:#3ccf8e;--ok-soft:#12291f;
  --warn:#f0b44c;--warn-ink:#f0b44c;--warn-soft:#2e2412;
  --danger:#ff6b6b;--danger-ink:#ff6b6b;--danger-soft:#331717;
}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{
  --ok:#3ccf8e;--ok-ink:#3ccf8e;--ok-soft:#12291f;
  --warn:#f0b44c;--warn-ink:#f0b44c;--warn-soft:#2e2412;
  --danger:#ff6b6b;--danger-ink:#ff6b6b;--danger-soft:#331717;
}}

/* Sign in with Google, by Google's branding rules. Their fill, stroke, ink, type, padding and G are fixed, so these literal
   values are not site tokens, and the button keeps its own width: it is never stretched. The G sits on white, so hover changes
   the stroke and shadow, never the fill. */
.gsi{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 11px;background:#fff;border:1px solid #747775;border-radius:var(--r-sm);color:#1f1f1f;font:500 14px/20px "Google Sans",Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:box-shadow .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.gsi img{flex:none;width:20px;height:20px}
@media(hover:hover) and (pointer:fine){.gsi:hover{border-color:#1f1f1f;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);color:#1f1f1f}}
.gsi:active{box-shadow:none;transform:scale(.97)}

/* signed out: the same text-and-window pairing as the download area */
.acct-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:32px clamp(32px,4.4vw,64px);align-items:center}
.acct-split .gsi{margin-top:24px}
.acct-split .note{margin-top:16px}
.acct-split .acct-alert{margin:0 0 16px}

/* signed in */
.acct{max-width:760px}
.acct-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:24px}
.acct-head h1{margin:0}
.acct-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0;color:var(--fg-3);font-size:15px}
.acct-who b{color:var(--fg);font-weight:500;overflow-wrap:anywhere}
.acct-out{padding:0;background:none;border:0;border-radius:var(--r-sm);color:var(--link);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
@media(hover:hover) and (pointer:fine){.acct-out:hover{color:var(--fg)}}
button.btn{font-family:inherit;cursor:pointer}

.acct-panel{container-type:inline-size;overflow:hidden;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-win);box-shadow:var(--win-shadow)}
.acct-status{display:grid;grid-template-columns:10px minmax(0,1fr);gap:2px 12px;padding:22px 24px;border-bottom:1px solid var(--rule-soft)}
.acct-status:last-child{border-bottom:0}
.acct-status::before{content:"";grid-row:1;align-self:center;width:10px;height:10px;border-radius:50%;background:var(--fg-3)}
.acct-status[data-tone=ok]::before{background:var(--ok)}
.acct-status[data-tone=warn]::before{background:var(--warn)}
.acct-status[data-tone=danger]::before{background:var(--danger)}
.acct-status[data-tone=wait]::before{background:var(--accent);animation:acct-wait 1.6s ease-in-out infinite}
.page .acct-status h2{grid-column:2;margin:0;font-size:1.375rem;line-height:1.3}
.acct-status p{grid-column:2;color:var(--fg-2)}
.acct-status b{font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.acct-status .actions{grid-column:2;margin-top:14px}
@keyframes acct-wait{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.acct-status[data-tone=wait]::before{animation:acct-wait 1.6s ease-in-out infinite!important}}

.os h3{font-size:1.125rem}
.os:last-child{border-bottom:0}
.acct-wait{flex:none;color:var(--fg-3);font-size:15px}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 24px;border-bottom:1px solid var(--rule-soft)}
.acct-row:last-child{border-bottom:0}
.acct-row p{min-width:0;color:var(--fg-2);font-size:15px}
.acct-row .btn{flex:none}

.acct-price{padding:20px 24px 22px;border-bottom:1px solid var(--rule-soft)}
.acct-price .amount{display:block;color:var(--fg);font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.875rem);font-weight:600;line-height:1.15;letter-spacing:-.026em}
.acct-price p{margin-top:8px;color:var(--fg-2)}
.acct-price .fine{color:var(--fg-3);font-size:15px}
.acct-price .btn{margin-top:18px}

/* what went wrong, and the calm version of the same box */
.acct-alert,.acct-note{margin:0 0 16px;padding:12px 16px;border:1px solid;border-radius:var(--r-btn);font-size:15px;max-width:none}
.acct-alert{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger-ink)}
.acct-note{background:var(--paper);border-color:var(--rule);color:var(--fg-2)}

@media(max-width:960px){
  .acct-split{grid-template-columns:minmax(0,1fr)}
}
@container(max-width:500px){
  .acct-status{padding:18px 20px}
  .acct-row{flex-direction:column;align-items:stretch;padding:16px 20px}
  .acct-row form .btn{display:flex;width:100%}
  .acct-price{padding:18px 20px 20px}
  .acct-price .btn{display:flex;width:100%}
  .os .acct-wait{padding:2px 0}
}
/* iter-40: a signed-in header says "Your account", longer than the site's "Get Access", beside the theme toggle: on narrow phones it
   steps down so the mark, the toggle and the button keep one row (style.css sizes the row for "Get Access") */
@media(max-width:380px){header.top .nav-cta[aria-current=page]{padding:0 10px;font-size:14px}}
@media(max-width:340px){header.top .nav-cta[aria-current=page]{padding:0 7px;font-size:13px}}
@media(forced-colors:active){
  .acct-status::before{forced-color-adjust:none;background:CanvasText}
}