/* Account layer: sign-in, loading, Pro locks, demo labels and account sheet, in the app's own design tokens (app.css) */
.g-screen { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--e-bg); color: var(--e-text); }
.g-screen[hidden] { display: none; }
.g-wrap { min-height: 100%; max-width: 440px; margin: 0 auto; padding: calc(var(--e-safe-t) + 32px) var(--e-pad) calc(var(--e-safe-b) + 24px); display: grid; align-content: center; gap: 20px; }
.g-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.g-logo { width: min(140px, 40vw); height: auto; }
.g-head h1 { margin: 0; font: 600 30px/1.15 var(--e-serif); color: var(--e-text); }
.g-head p { margin: 0; max-width: 34ch; font: 400 15px/1.5 var(--e-sans); color: var(--e-muted); }
.g-card { gap: 14px; }
.g-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--e-r-btn, 14px); background: var(--e-wash); }
.g-tabs button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--e-muted); font: 500 14px/1 var(--e-sans); cursor: pointer; }
.g-tabs button[aria-selected="true"] { background: var(--e-surface); color: var(--e-primary); box-shadow: var(--e-shadow); }
.g-tabs[hidden] { display: none; }
.g-form { display: grid; gap: 10px; }
.g-form[hidden] { display: none; }
.g-form .x-big { margin-top: 4px; }
.g-form .x-big.is-text { justify-self: center; margin-top: 0; }
.g-sent { margin: 0; font: 400 14px/1.5 var(--e-sans); color: var(--e-text); overflow-wrap: anywhere; }
.g-or { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.g-or::before, .g-or::after { content: ""; flex: 1; height: 1px; background: var(--e-line); }
.g-or[hidden], #l-google[hidden], #l-resendc[hidden] { display: none; }
.g-google svg { width: 18px; height: 18px; }
#l-resendc { justify-self: center; }
.g-msg { margin: 0; min-height: 0; text-align: center; }
.g-msg:empty { display: none; }
.g-msg.is-error { color: var(--e-danger); }
.g-small { margin: 0; text-align: center; overflow-wrap: anywhere; }
.g-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 4px 0; }
.g-foot a { font: 500 12px/1.6 var(--e-sans); letter-spacing: .06em; color: var(--e-muted); text-decoration: none; }
.g-foot a:hover { color: var(--e-primary); text-decoration: underline; text-underline-offset: 3px; }

/* loading screen while the session and plan are checked */
.g-boot { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: var(--e-bg); transition: opacity 300ms ease; }
.g-boot.is-out { opacity: 0; pointer-events: none; }
.g-splash { display: grid; justify-items: center; gap: 16px; animation: x-splash-in 600ms var(--e-ease) both; }
.g-splash img { width: min(120px, 36vw); height: auto; }
.g-splash p { margin: 0; font: 600 24px/1.2 var(--e-serif); letter-spacing: .08em; color: var(--e-primary); }
.x-splash[hidden] { display: none; }
.x-splash .x-land > img { width: min(120px, 36vw); }

/* top bar: fit the account button on small phones */
.x-brandrow { overflow: hidden; }
@media (max-width: 400px) { .x-clock { display: none; } .x-brand { letter-spacing: .12em; } }

/* Pro locks */
.x-pro.is-locked { display: inline-flex; align-items: center; gap: 4px; }
.x-pro.is-locked svg { flex: none; color: var(--e-gold); }
.x-lock { border: 1px dashed var(--e-gold-line, rgba(255, 77, 46, .4)); }
.x-lock .x-note { margin: 0; }
.x-lock__why:empty { display: none; }

/* demo labels (trainer dashboard) */
.x-demo { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 77, 46, .16); color: var(--e-text); font: 500 11px/1.5 var(--e-sans); letter-spacing: .06em; text-transform: none; }
.x-demo--bar { display: block; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; font-size: 13px; text-align: center; }

/* account sheet */
.g-acct { display: grid; gap: 4px; }
.g-acct dl { margin: 0; display: grid; }
.g-acct dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 48px; padding: 10px 0; border-top: 1px solid var(--e-line); }
.g-acct dl > div:first-child { border-top: 0; }
.g-acct dt { font: 500 12px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.g-acct dd { margin: 0; font: 500 15px/1.4 var(--e-sans); color: var(--e-text); text-align: right; overflow-wrap: anywhere; }
.g-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 500 12px/1.3 var(--e-sans); letter-spacing: .06em; background: var(--e-wash); color: var(--e-primary); }
.g-pill.is-active { background: var(--e-primary); color: #fff; }
.g-pill.is-expired { background: rgba(239, 68, 68, .1); color: var(--e-danger); }
.x-sheet .g-foot { padding-top: 4px; }
.x-sheet .g-msg { text-align: left; }