/* Only for the website version (web/). css/style.css is the Flask app's stylesheet, copied in by
   tools/export_web.py, so keep changes to the shared look there. */

/* buttons that look like the app's quiet links (where the Flask app used links or forms) */
button.quiet{font:inherit;font-size:.95rem;background:none;border:0;padding:0;cursor:pointer}
.welcome-go{display:flex;justify-content:flex-end}

/* "Your progress is saved in this browser only. Download a backup · Load a backup" */
.saved-note{margin-top:22px;font-size:.88rem;color:var(--muted)}
.saved-note button.quiet{font-size:inherit}

.load-error{margin-top:80px;color:var(--muted)}

/* prototype tools: labelled number inputs in a tools row (v3 only, so kept here rather than in css/style.css) */
.dev-row label{display:flex;align-items:center;gap:6px;font-size:.85rem}
.dev-row input{font:inherit;font-size:.85rem;width:9ch;padding:5px 8px;border-radius:6px;border:1px solid var(--faint);background:transparent;color:var(--ink)}

/* v3.5: the dashboard's top right, Train/Test and the sign-in */
.top-right{display:flex;align-items:center;gap:20px}
.top-right .account{color:var(--muted);font-size:.95rem;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-right .account + button.quiet{margin-left:-10px}

/* v3.5: the sign-in page, shown first until the visitor signs in or picks "without an account" (app.js signInView) */
.gate{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.gate .top{padding:20px 16px 0;max-width:1100px;width:100%;margin:0 auto}
.gate-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;max-width:1100px;width:100%;margin:0 auto;padding:24px 16px 48px}
.gate-pitch h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.01em;max-width:15ch}
.gate-pitch .lede{color:var(--muted);font-size:1.12rem;margin-top:16px;max-width:42ch}
.gate-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.gate-points li{display:flex;gap:12px;align-items:baseline}
.gate-points b{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--marker);color:#18282C;font-size:.85rem}
.gate-pie{margin-top:30px;display:flex;align-items:center;gap:16px;color:var(--muted);font-size:.9rem}
.gate-pie svg{width:92px;height:92px;flex:none}
.gate-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:36px 32px 28px;box-shadow:0 10px 30px rgba(24,40,44,.08)}
.gate-card h2{font-family:var(--serif);font-weight:500;font-size:1.9rem;line-height:1.15}
.gate-card .muted{margin-top:8px}
.gate-card .google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;margin-top:26px;border-radius:10px;
  border:1px solid var(--faint);background:#fff;color:#1f1f1f;font:600 1.02rem var(--sans);cursor:pointer}
.gate-card .google:hover{box-shadow:0 2px 8px rgba(24,40,44,.15)}
.gate-card .google svg{width:20px;height:20px}
.gate-why{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;font-size:.92rem;color:var(--muted)}
.gate-why li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:8px}
.gate-or{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:var(--faint);font-size:.82rem}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}
.gate-guest{display:block;width:100%;background:none;border:0;padding:4px;cursor:pointer;font:inherit;font-size:.95rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--faint)}
.gate-guest:hover{color:var(--ink)}
.gate-guest small{display:block;font-size:.8rem;margin-top:4px;text-decoration:none;opacity:.85}
.gate-fine{color:var(--muted);font-size:.78rem;text-align:center;margin-top:22px}
.gate-foot{text-align:center;color:var(--muted);font-size:.8rem;padding:0 16px 22px}
@media (max-width:820px){
  .gate-stage{grid-template-columns:1fr;gap:28px;padding-top:8px;align-content:start}
  .gate-pitch h1{max-width:none}
  .gate-pie{display:none}
  .gate-card{padding:28px 20px 22px}
}

/* v3.5: the Terms of Use and Privacy Policy pages (terms.html, privacy.html), and their links */
.legal{max-width:760px}
.legal main{padding-bottom:24px}
.legal h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,3rem);line-height:1.1;margin-top:6px}
.legal .lede{color:var(--muted);font-size:1.1rem;margin-top:14px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:34px 0 8px}
.legal p,.legal li{line-height:1.65}
.legal p + p{margin-top:10px}
.legal ul{margin:8px 0 0;padding-left:22px}
.legal li + li{margin-top:6px}
.legal ul + p{margin-top:12px}
.legal main a,.gate a,.saved-note a{color:var(--skill);text-underline-offset:3px}
.legal-links{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}

/* v3.5 beta: the "sign-in couldn't load" page */
.gate-single{grid-template-columns:minmax(0,520px);justify-content:center}
.gate-plain li::before{content:"–";color:var(--muted)}
.gate-retry{margin-top:24px;width:100%}