/* Sign-in and account pages. Values mirror the roles in design-system.css (see DESIGN.md);
   this page loads before the app, so it carries only the handful it needs. */
:root,:root[data-theme=light]{color-scheme:light;--canvas:#fff;--showcase:#f5f7fc;--text:#20242d;--muted:#626a78;--line:#e3e6eb;--control:#ccd1da;--hover:#eef0f4;--pressed:#e7eaf0;--primary:#3d63ee;--primary-hover:#3154d5;--primary-pressed:#2946b5;--on-primary:#fff;--link:#3154d5;--focus:#3d63ee;--negative:#b33b37;--toast-shadow:0 12px 32px rgba(32,36,45,.12),0 2px 6px rgba(32,36,45,.06)}
:root[data-theme=dark]{color-scheme:dark;--canvas:#1a1b1e;--showcase:#181c25;--text:#eef0f5;--muted:#b1b7c3;--line:#34373e;--control:#555b67;--hover:#25272c;--pressed:#30333a;--link:#a5bbff;--focus:#9eb6ff;--negative:#f1a39b;--toast-shadow:0 12px 32px rgba(0,0,0,.45)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--canvas);color:var(--text);font-family:var(--system-font);font-size:14px;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:var(--link);text-underline-offset:3px}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh}
.auth-side{display:flex;flex-direction:column;min-width:0}
.auth-header{padding:28px 40px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:25px;font-weight:650;letter-spacing:-.025em;border-radius:6px}
.brand img{width:28px;height:28px;border-radius:8px}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px 96px}
.auth-card{width:360px;max-width:100%}

h1{font-size:40px;line-height:1.1;font-weight:650;letter-spacing:-.025em;margin:0 0 28px}
.subtitle{color:var(--muted);line-height:1.55;margin:-16px 0 24px;overflow-wrap:anywhere}
.stack{display:grid;gap:12px}
.btn{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;height:42px;padding:0 16px;border:1px solid var(--control);border-radius:6px;background:var(--canvas);color:var(--text);font-weight:550;text-decoration:none;transition:background-color .12s,border-color .12s}
.btn:hover:not(:disabled){background:var(--hover)}
.btn:active:not(:disabled){background:var(--pressed);transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.primary:active:not(:disabled){background:var(--primary-pressed);border-color:var(--primary-pressed)}
.btn .arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:13px}
.divider:before,.divider:after{content:'';flex:1;border-top:1px solid var(--line)}

input{width:100%;height:42px;padding:0 12px;background:var(--canvas);border:1px solid var(--control);border-radius:6px;outline:none;transition:border-color .12s}
input:focus{border-color:var(--focus)}
input:focus-visible{outline:none}
input::placeholder{color:var(--muted);opacity:.8}
.code-input{font-size:18px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.code-input::placeholder{font-size:14px;letter-spacing:normal}
.code-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.link{background:none;border:0;padding:0;min-height:32px;color:var(--link);font-weight:500;border-radius:4px}
.link:disabled{color:var(--muted);opacity:1}

label{display:block;font-size:13px;font-weight:550;margin:0 0 8px}
.field{margin-top:16px}
.field-head{display:flex;justify-content:space-between;align-items:baseline}
.field-head a{font-size:12px;color:var(--muted);text-decoration:none}
.password{position:relative}
.password input{padding-right:64px}
.password button{position:absolute;right:4px;top:0;height:42px;min-width:52px;padding:0 8px;border:0;background:none;color:var(--muted);font-size:13px}
#auth-form .btn.primary{margin-top:22px}

.notice{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:20px;color:var(--muted);line-height:1.5;font-size:13px}
.notice a{display:inline-block;margin-top:5px}
.error{color:var(--negative);font-size:13px;line-height:1.5;margin:14px 0 0}
.error:empty{margin:0}
footer{color:var(--muted);font-size:13px;line-height:1.5;margin-top:24px}
footer a{font-weight:550}

/* Right-hand product preview, as on the landing page. Decorative only. */
.auth-showcase{position:relative;overflow:hidden;background:var(--showcase);border-left:1px solid var(--line);padding:clamp(56px,11vh,120px) 0 0 clamp(40px,6vw,96px)}
.showcase-copy{max-width:500px;padding-right:40px}
.showcase-copy h2{font-size:clamp(28px,2.6vw,38px);line-height:1.12;font-weight:650;letter-spacing:-.025em;margin:0 0 16px;text-wrap:balance}
.showcase-copy p{color:var(--muted);font-size:16px;line-height:1.55;margin:0;max-width:440px}
.showcase-frame{margin-top:48px;width:max(1080px,150%);border:1px solid var(--line);border-right:0;border-radius:12px 0 0 0;overflow:hidden;background:#fff}
.showcase-frame img{display:block;width:100%;height:auto}
.showcase-toast{position:absolute;left:clamp(24px,4vw,64px);bottom:clamp(32px,7vh,72px);display:flex;align-items:center;gap:12px;max-width:min(380px,calc(100% - 48px));padding:12px 16px 12px 12px;background:var(--canvas);border:1px solid var(--line);border-radius:10px;box-shadow:var(--toast-shadow)}
.toast-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:8px;background:var(--hover);color:var(--muted)}
.toast-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.showcase-toast strong{display:block;font-size:13px;font-weight:600}
.showcase-toast span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

@media (min-width:1001px){.auth-layout{height:100dvh}.auth-side{overflow-y:auto}}
@media (max-width:1000px){.auth-layout{grid-template-columns:1fr}.auth-showcase{display:none}}
@media (max-width:480px){.auth-header{padding:20px 16px}.auth-main{align-items:flex-start;padding:40px 16px 64px}h1{font-size:28px}}
@media (pointer:coarse){.btn,input{height:44px}.password button{height:44px}.link{min-height:44px}}
@media (prefers-reduced-motion:reduce){.btn,input{transition:none}.btn:active:not(:disabled){transform:none}}

/* MCP consent (/oauth/consent, server/mcp-oauth.mjs): one centred column, no showcase. */
.consent-layout{grid-template-columns:minmax(0,1fr)}
.consent-layout .auth-card{width:420px}
.consent-layout h1{font-size:28px;line-height:1.2;margin-bottom:24px;overflow-wrap:anywhere}
.consent-points{margin:0 0 24px;padding:0 0 0 18px;color:var(--text);line-height:1.55;display:grid;gap:8px}
.consent-actions{display:grid;gap:12px}