/*! © 2026 Ermis Tatsis. All rights reserved. PiForce Primary Simulator — stemracing.gr/simulator. */
/* Sign-in and one-time setup pages. Builds on the simulator's own tokens
   (simulator.css): sign-in is one centred glass card; setup has its form
   beside a short "how it works" panel. */
#simulator-app.auth-app{min-height:70vh}
#simulator-app .auth-main{max-width:1120px}
#simulator-app .auth-layout{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:24px;align-items:start;margin-top:8px}
#simulator-app :is(.auth-card,.auth-info){min-width:0;padding:22px 24px;border:1px solid var(--glass-border);border-radius:18px;background-color:var(--glass);background-image:var(--glass-sheen);box-shadow:var(--glass-edge),var(--card-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
#simulator-app .auth-card{background-color:var(--glass-strong)}
/* The sign-in page: just the form, one centred card. */
#simulator-app .auth-layout--single{grid-template-columns:minmax(0,440px);justify-content:center;margin-top:20px}
#simulator-app .auth-form{display:grid;gap:6px}
#simulator-app .auth-form h2{margin-bottom:4px;font-size:19px;font-weight:600;line-height:1.3}
#simulator-app .auth-form label{margin-top:8px;font-size:13px;font-weight:500}
#simulator-app .auth-form :is(input[type=email],input[type=password],input[type=text]),#simulator-app .acct-input{width:100%;min-width:0;min-height:42px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--text);font-size:16px}
#simulator-app .auth-form input:focus-visible,#simulator-app .acct-input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
#simulator-app .auth-optional{font-weight:400;color:var(--muted)}
#simulator-app .auth-note{font-size:14px;color:var(--muted)}
#simulator-app .auth-submit{margin-top:14px;width:100%;min-height:44px;font-size:15px;text-decoration:none}
#simulator-app .auth-form .ghost-button{width:100%;min-height:40px;margin-top:6px}
#simulator-app .auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:6px}
#simulator-app .auth-links .text-button{padding:6px 0}
#simulator-app .auth-check{display:flex!important;align-items:flex-start;gap:10px;margin-top:12px!important;font-weight:400!important;font-size:14px!important;line-height:1.4}
#simulator-app .auth-check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
#simulator-app .auth-privacy{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:13.5px}
#simulator-app .auth-privacy summary{cursor:pointer;font-weight:600;color:var(--accent)}
#simulator-app .auth-privacy p{margin-top:8px;color:var(--muted);line-height:1.5}
#simulator-app .auth-message{margin-bottom:12px;padding:10px 12px;border:1px solid var(--line);border-left-width:3px;border-radius:9px;background:var(--surface-2);font-size:14px;line-height:1.45}
#simulator-app .auth-message[data-tone=error]{border-left-color:var(--bad);color:var(--text)}
#simulator-app .auth-message[data-tone=success]{border-left-color:var(--good)}
#simulator-app .auth-message[data-tone=info]{border-left-color:var(--accent)}
#simulator-app .auth-info h2{font-size:17px;font-weight:600}
#simulator-app .auth-steps{display:grid;gap:14px;margin:14px 0 0;padding:0;list-style:none;counter-reset:auth-step}
#simulator-app .auth-steps li{position:relative;display:grid;gap:2px;padding-left:40px;counter-increment:auth-step;font-size:14px;color:var(--muted)}
#simulator-app .auth-steps li::before{content:counter(auth-step,decimal-leading-zero);position:absolute;left:0;top:1px;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--icon-bg);color:var(--accent);font-size:12px;font-weight:700}
#simulator-app .auth-steps strong{color:var(--text);font-weight:600}
#simulator-app a.run-button{display:inline-flex;align-items:center;justify-content:center;color:var(--on-primary)}
@media(max-width:860px){#simulator-app .auth-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){#simulator-app :is(.auth-card,.auth-info){padding:18px 16px;border-radius:14px}#simulator-app .auth-links{flex-direction:column;align-items:flex-start}}
#simulator-app .auth-legacy{display:grid;gap:6px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
#simulator-app .auth-legacy .ghost-button{width:100%;min-height:40px;height:auto;padding:8px 12px;white-space:normal;text-align:center;text-decoration:none}
#simulator-app .auth-password-row{display:flex;gap:8px}
#simulator-app .auth-password-row input{flex:1;min-width:0}
#simulator-app .auth-password-row .ghost-button{width:auto;min-height:42px;margin:0;padding:0 14px}
/* One-time admin setup: the generated password, shown once. */
#simulator-app .setup-secret{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:10px 0 4px;padding:12px 14px;border:1px solid var(--accent);border-radius:12px;background:var(--surface-2)}
#simulator-app .setup-secret dt{font-size:13px;color:var(--muted)}
#simulator-app .setup-secret dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:600;overflow-wrap:anywhere;user-select:all}
#simulator-app a.run-button[aria-disabled=true]{opacity:.45;pointer-events:none}
/* The sign-in form's way to the sign-up page: a divider line and a full-width
   secondary button, shown while sign-ups are open. The sign-up page's own
   "Already have an account? Sign in" line uses .auth-signup. */
#simulator-app .auth-signup{margin-top:12px;font-size:14px;text-align:center;color:var(--muted)}
#simulator-app .auth-signup a{color:var(--accent);font-weight:600;text-underline-offset:2px}
#simulator-app .auth-signup-offer{display:grid;gap:10px;margin-top:18px}
#simulator-app .auth-divider{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
#simulator-app .auth-divider::before,#simulator-app .auth-divider::after{content:"";flex:1;height:1px;background:var(--line-strong)}
#simulator-app .auth-form a.auth-signup-button{margin:0;min-height:44px;border-color:var(--line-strong);font-size:15px;font-weight:600;text-decoration:none;color:var(--text)}
/* The sign-up page (/simulator/signup): what an account gets, the fields, the
   team question and the privacy consent. */
#simulator-app .signup-offer{margin:0 0 4px;padding:10px 12px;border-radius:10px;background:var(--icon-bg);color:var(--text);font-size:15px;font-weight:600;line-height:1.4}
#simulator-app .signup-offer:empty{display:none}
#simulator-app .signup-hint{font-size:13px;line-height:1.45}
#simulator-app .auth-form .auth-select{width:100%;min-width:0;min-height:42px;padding:9px 34px 9px 12px;border:1px solid var(--line-strong);border-radius:9px;background-color:var(--surface);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--text);font-size:16px;-webkit-appearance:none;appearance:none}
#simulator-app .auth-form .auth-select:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
#simulator-app .auth-select option{background:var(--bg);color:var(--text)}
#simulator-app .auth-form [aria-invalid=true]{border-color:var(--bad)}
#simulator-app .auth-form input[type=checkbox][aria-invalid=true]{outline:2px solid var(--bad);outline-offset:2px}
#simulator-app .signup-choice{min-width:0;margin:10px 0 0;padding:0;border:0}
#simulator-app .signup-choice legend{padding:0;font-size:13px;font-weight:500;line-height:1.4}
#simulator-app .signup-choice__options{display:flex;gap:8px;margin-top:6px}
#simulator-app .auth-form label.signup-radio{position:relative;display:flex;flex:1;align-items:center;gap:8px;min-height:42px;margin:0;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);font-size:15px;cursor:pointer}
#simulator-app .signup-radio input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)}
#simulator-app .signup-radio:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#simulator-app .signup-radio:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
#simulator-app .signup-team{display:grid;gap:6px}
#simulator-app .signup-consent :is(a,.signup-privacy-link){padding:0;border:0;background:none;font:inherit;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#simulator-app .signup-privacy-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
#simulator-app .auth-form .auth-password-row .ghost-button{white-space:nowrap}
/* The sign-up page: one wide, short card. Two columns on wide screens (email and
   country, the password twice, the team or school question and its name), then
   the consent and the button with the sign-in link beside it; one column on phones. */
#simulator-app.signup-app .auth-layout--single{grid-template-columns:minmax(0,820px)}
#simulator-app .signup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;align-items:start}
#simulator-app .signup-field{display:grid;gap:6px;align-content:start;min-width:0}
#simulator-app .signup-grid .signup-choice{margin-top:8px}
#simulator-app .signup-consent-block{display:grid;gap:4px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
#simulator-app .signup-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:8px}
#simulator-app .signup-actions .auth-submit{flex:0 1 300px;margin:0}
#simulator-app .signup-actions .auth-signup{margin:0}
@media(max-width:700px){
#simulator-app .signup-grid{grid-template-columns:minmax(0,1fr)}
#simulator-app .signup-actions{flex-direction:column;align-items:stretch}
#simulator-app .signup-actions .auth-submit{flex:none;width:100%}
}