/* Accounts screens (mockups/accounts.html): mode choice, signing in, consent, trainer name, region, link earlier
   sessions. Everything is scoped under .acc so nothing leaks into the other screens. */
.acc .pad { padding: 14px 16px 16px; }
.acc .help { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.acc .help b { color: var(--text); font-weight: 600; }

.acc .modes { display: grid; gap: 10px; margin-top: 18px; }
.acc .mode { --mc: 0,229,255; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--mc),.45); background: linear-gradient(160deg, rgba(var(--mc),.12), rgba(var(--mc),.02) 60%), var(--surface); text-align: left; }
.acc .mode.pv { --mc: 162,89,255; }
.acc .mode .mi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--mc),.14); color: rgb(var(--mc)); }
.acc .mode .mi .ico { width: 22px; height: 22px; }
.acc .mode h3 { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 28px; letter-spacing: .04em; line-height: 1; color: var(--text-hi); }
.acc .mode .tag { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--mc)); }
.acc .mode ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.acc .mode li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 8px; font-size: 14px; line-height: 1.4; color: var(--text); }
.acc .mode li .ico { width: 14px; height: 14px; margin-top: 3px; color: rgb(var(--mc)); }
.acc .mode li.no, .acc .mode li.no .ico { color: var(--muted); }
.acc .mode .act { grid-column: 1 / -1; margin-top: 4px; }

/* Google's light button: white, the four-colour G (Google's branding rules) */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: .01em; cursor: pointer; }
.gbtn svg { width: 20px; height: 20px; }
.gbtn[disabled] { opacity: .6; cursor: progress; }
.acc .pvbtn { border-color: rgba(162,89,255,.55); color: #d2b5ff; background: rgba(162,89,255,.08); }

.acc .center { display: grid; justify-items: center; gap: 14px; padding: 70px 10px 30px; text-align: center; }
.acc .spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--cyan); animation: acc-spin 1s linear infinite; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
.acc .err { color: var(--pink); }

.acc .clist { display: grid; }
.acc .crow { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.acc .crow:last-child { border-bottom: 0; }
.acc .crow .ico { margin-top: 2px; color: var(--cyan); }
.acc .crow.no .ico { color: var(--muted); }
.acc .crow b { display: block; font-size: 15px; font-weight: 600; color: var(--text-hi); }
.acc .crow span { display: block; margin-top: 1px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.acc .check { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; align-items: start; width: 100%; padding: 14px 16px; border-bottom: 1px solid rgba(42,42,58,.6); text-align: left; }
.acc .check:last-child { border-bottom: 0; }
.acc .check .bx { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--muted); display: grid; place-items: center; color: transparent; }
.acc .check .bx .ico { width: 16px; height: 16px; stroke-width: 3; }
.acc .check[aria-checked="true"] .bx { border-color: var(--cyan); background: var(--cyan); color: var(--bg); box-shadow: 0 0 10px rgba(0,229,255,.4); }
.acc .check b { display: block; font-size: 15px; font-weight: 600; color: var(--text-hi); }
.acc .check span span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.acc .btn[disabled] { opacity: .4; box-shadow: none; pointer-events: none; }

.acc .namebox { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); }
.acc .namebox:focus-within { border-color: rgba(0,229,255,.6); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.acc .namebox input { min-width: 0; border: 0; outline: none; background: transparent; font-size: 18px; font-weight: 600; color: var(--text-hi); }
.acc .namebox .cnt { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.acc .regions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.acc .reg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 76px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; }
.acc .reg .num { font-size: 26px; color: var(--text); }
.acc .reg small { font-size: 13px; line-height: 1.3; color: var(--muted); }
.acc .reg[aria-pressed="true"] { border-color: rgba(0,229,255,.7); background: linear-gradient(160deg, rgba(0,229,255,.16), rgba(0,229,255,.03)); box-shadow: 0 0 16px rgba(0,229,255,.15); }
.acc .reg[aria-pressed="true"] .num { color: var(--cyan); }
.acc .reg.none { grid-column: 1 / -1; min-height: 52px; flex-direction: row; align-items: center; justify-content: space-between; }
.acc .reg.none .num { font-size: 22px; }
.acc .wbox { margin-top: 10px; }
.acc .wbox .search input { background: var(--surface2); }
.acc .wres { margin-top: 8px; min-height: 22px; font-size: 14px; color: var(--muted); }
.acc .wres b { color: var(--cyan); font-weight: 600; }
.acc .wres button { color: var(--cyan); text-decoration: underline; min-height: 32px; }

.acc .lrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.acc .lrow:last-child { border-bottom: 0; }
.acc .lrow .t { font-size: 15px; font-weight: 600; color: var(--text-hi); }
.acc .lrow .lbl { display: block; margin-top: 2px; }
.acc .lrow .rec { font-family: var(--font-head); font-size: 24px; line-height: 1; }

/* Mode pill in app bars and Settings */
.modepill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.modepill.lg { border: 1px solid rgba(0,229,255,.45); color: var(--cyan); background: rgba(0,229,255,.08); }
.modepill.pv { border: 1px solid rgba(162,89,255,.55); color: #d2b5ff; background: rgba(162,89,255,.1); }

/* Review (mockups/submit-result.html): region line, kept / Private Mode banner */
.rv-region { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 4px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); }
.rv-region .lbl b { color: var(--cyan); }
.banner.pv { border: 1px solid rgba(162,89,255,.55); background: rgba(162,89,255,.08); }
.banner.pv b, .banner.pv .ico { color: #d2b5ff; }

/* Likely moves (mockups/moves-prefill.html): pre-filled from the format's moveset, dashed until the player sees them. */
.mchip.likely { color: var(--text); border: 1px dashed color-mix(in srgb, var(--c) 75%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--surface2)); box-shadow: none; }
.mchip.likely .dot { display: inline-block; }
.mchip.likely .ck { display: none; }
.mchip .lk { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.mhead2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 6px 10px; }
.mhead2 .lbl { letter-spacing: .06em; }
.mhead2 .lbl b { color: var(--yellow); }
.allseen { flex-shrink: 0; white-space: nowrap; min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(0,229,255,.45); background: rgba(0,229,255,.06); color: var(--cyan); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.slot .mvst { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.slot .mvst b { color: var(--yellow); font-weight: 500; }
.slot .mvst.ok b { color: var(--green); }
.mv.lk { opacity: .55; font-style: italic; }
/* The moves line sits under the sprite row: lift the shadow badge back onto the sprite. */
.slot.has-mvst .slot-sh { bottom: 17px; }

/* Live Meta for signed-in players (mockups/meta-login.html): region filter, basis line, signed-out teaser */
.meta .regseg { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); width: 100%; margin-top: 8px; }
.meta .regseg button { min-width: 0; padding: 0 4px; font-size: 11px; letter-spacing: .08em; }
.meta .regseg.off { opacity: .45; }
.meta .seg button[disabled] { opacity: .4; cursor: not-allowed; }
.meta .regnote { margin-top: 8px; font-size: 13px; color: var(--muted); }
.meta .regnote b { color: var(--yellow); font-weight: 600; }
.meta .basis { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(0,229,255,.3); background: rgba(0,229,255,.05); font-size: 14px; }
.meta .basis .ico { color: var(--cyan); flex-shrink: 0; }
.meta .lockwrap { position: relative; margin-top: 14px; min-height: 480px; }
.meta .ghost { filter: blur(3px); opacity: .55; pointer-events: none; user-select: none; }
.meta .grow { display: grid; grid-template-columns: 22px 44px minmax(0,1fr) 56px 56px; column-gap: 8px; align-items: center; min-height: 66px; padding: 0 12px 0 8px; border-bottom: 1px solid rgba(42,42,58,.6); }
.meta .grow i { display: block; height: 10px; border-radius: 5px; background: var(--border); }
.meta .grow .gs { width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); }
.meta .lockcard { position: absolute; left: 12px; right: 12px; top: 38px; padding: 20px 18px; border-radius: 16px; border: 1px solid rgba(0,229,255,.45); background: rgba(18,18,26,.96); box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(0,229,255,.12); text-align: center; }
.meta .lockcard .li { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(0,229,255,.12); color: var(--cyan); }
.meta .lockcard .li .ico { width: 24px; height: 24px; }
.meta .lockcard .h2 { margin-top: 10px; font-size: 30px; }
.meta .lockcard p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.meta .lockcard .linkbtn { margin-top: 6px; }

/* Settings in both modes (mockups/accounts.html · 7–8) */
.settings .kv-link { width: 100%; text-align: left; color: inherit; }
.settings .kv-v.cy { color: var(--cyan); font-size: 13px; }
.settings .acct { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.settings .acct .gdot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.settings .acct .gdot svg { width: 22px; height: 22px; }
.settings .acct b { display: block; font-size: 16px; font-weight: 600; color: var(--text-hi); }
.settings .acct .lbl { display: block; margin-top: 2px; }
.settings .twobtn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.settings .warn { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,209,102,.45); background: rgba(255,209,102,.07); font-size: 14px; line-height: 1.45; }
.settings .warn .ico { color: var(--yellow); }
.settings .warn b { color: var(--yellow); font-weight: 600; }
.settings .gbtn { margin-top: 12px; }
.del-in { width: 100%; height: var(--tap); margin: 10px 0; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); font-family: var(--font-mono); font-size: 16px; letter-spacing: .1em; color: var(--text-hi); outline: none; }

/* Sign in with email (mockups/accounts.html · 2a, 2b) */
.orline { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.orline::before, .orline::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.embtn { font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
.acc .codein { width: 100%; height: 64px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); text-align: center; font-family: var(--font-mono); font-size: 32px; letter-spacing: .5em; color: var(--text-hi); outline: none; }
.acc .codein:focus { border-color: rgba(0,229,255,.6); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.acc .inline-link { color: var(--cyan); text-decoration: underline; padding: 0; font: inherit; }
.acc .inline-link[disabled] { color: var(--muted); text-decoration: none; }
.settings .acct .gdot .ico { color: #1f1f1f; }