/* gate.css — the pages a person meets before (or instead of) the console:
 * sign-in, no-access, protected share link, invitation. One centred card on
 * the platform's own tokens, served from /_kit/ to every host so the page under
 * an app's address looks like the console it leads to. Replaces three
 * hand-written inline <style> blocks (and the 'unsafe-inline' the CSP needed
 * for them) — a neon sign-in, a third-palette no-access page, a plain unlock.
 */
@import url('/_kit/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--k-bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px;
  background: var(--k-bg); color: var(--k-ink);
  font: var(--k-text-base)/var(--k-leading-body) var(--k-font);
  -webkit-font-smoothing: antialiased;
}
.gate {
  width: min(420px, 100%);
  background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-lg);
  padding: 32px 30px; display: grid; gap: 14px;
}
.gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--k-ink); }
.gate-mark { display: block; width: 36px; height: auto; flex: none; }
.gate-mark .core { fill: var(--k-accent); }
.gate-brand span { font-size: var(--k-text-base); font-weight: 650; letter-spacing: -.01em; }
h1 { margin: 0; font-size: var(--k-text-2xl); font-weight: 650; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; color: var(--k-ink-2); }
.who { color: var(--k-ink); font-weight: 600; }
label { display: grid; gap: 6px; font-size: var(--k-text-sm); font-weight: 600; color: var(--k-ink-2); }
input {
  width: 100%; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-sm);
  background: var(--k-surface); color: var(--k-ink); font: inherit; font-weight: 400;
}
input::placeholder { color: var(--k-muted); }
input:focus { outline: none; border-color: var(--k-accent); box-shadow: 0 0 0 3px var(--k-accent-soft); }
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--k-accent); border-radius: var(--k-radius-sm);
  background: var(--k-accent); color: var(--k-accent-ink);
  font: 600 var(--k-text-md)/1 var(--k-font); text-decoration: none; cursor: pointer;
  transition: background var(--k-t-fast) var(--k-ease);
}
.btn:hover { background: var(--k-accent-hover); border-color: var(--k-accent-hover); color: var(--k-accent-ink); }
.btn-secondary { background: var(--k-surface); border-color: var(--k-line-strong); color: var(--k-ink); }
.btn-secondary:hover { background: var(--k-surface-2); border-color: var(--k-line-strong); color: var(--k-ink); }
.btn .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.or { display: flex; align-items: center; gap: 12px; color: var(--k-muted); font-size: var(--k-text-xs); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--k-line); }
.note, .err, .ok { padding: 10px 12px; border-radius: var(--k-radius-sm); font-size: var(--k-text-sm); }
.note { background: var(--k-accent-soft); color: var(--k-accent-text); }
.err { background: var(--k-bad-soft); color: var(--k-bad); }
.ok { background: var(--k-good-soft); color: var(--k-good); }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: var(--k-text-sm); }
.links a, .links button { color: var(--k-accent-text); background: none; border: 0; padding: 4px 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.links form { margin: 0; }
.foot { color: var(--k-muted); font-size: var(--k-text-xs); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
form { margin: 0; display: grid; gap: 14px; }
@media (max-width: 480px) { body { padding: 16px; align-items: start; } .gate { padding: 24px 20px; } }

/* The login is an immersive monochrome entry; the other access gates retain
   their existing layout. These local tokens keep the form and OS autofill neutral. */
html:has(.login-page) { background:#0c0d0e; color-scheme:dark; }
.login-page {
  --k-bg:#0c0d0e; --k-surface:#131415; --k-surface-2:#202121;
  --k-ink:#f0ede6; --k-ink-2:#bcbab4; --k-muted:#93948f;
  --k-line:#27292a; --k-line-strong:#3c3e3e;
  --k-accent:#e8e4da; --k-accent-ink:#161715; --k-accent-hover:#ffffff;
  --k-accent-soft:#252623; --k-accent-text:#e8e4da;
  color-scheme:dark; display:flex; flex-direction:column; align-items:stretch;
  padding:0 max(40px,calc((100vw - 1320px)/2)); min-height:100svh;
  background:var(--k-bg); color:var(--k-ink);
}
.login-header { display:flex; align-items:center; justify-content:space-between; min-height:108px; border-bottom:1px solid var(--k-line); }
.login-header .gate-brand { margin:0; gap:12px; }
.login-header .gate-mark { width:34px; }
.login-header .gate-brand > span { font-size:17px; font-weight:500; letter-spacing:-.4px; }
.login-private { display:flex; align-items:center; gap:8px; color:var(--k-muted); font-size:12px; }
.login-private svg,.login-trust svg { width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; }
.login-layout { flex:1; display:grid; grid-template-columns:1.2fr 1fr; min-height:660px; }
.login-hero { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:68px 48px 40px 4px; overflow:hidden; }
.login-intro { position:relative; z-index:1; }
.login-intro h1 { font-size:clamp(52px,5.5vw,78px); line-height:1.03; letter-spacing:-4px; font-weight:450; text-wrap:initial; }
.login-intro h1 em { font-family:var(--k-font-serif); font-weight:400; letter-spacing:-3px; color:#b9b5ab; }
.login-intro p { color:var(--k-muted); font-size:15px; line-height:1.8; margin:23px 0 0; max-width:390px; }
.login-art { position:relative; align-self:center; width:min(480px,100%); margin:-12px 0 -18px; aspect-ratio:480/360; pointer-events:none; }
.login-sculpture { position:absolute; inset:-10% 0; width:100%; height:117%; overflow:visible; }
.sculpture-strands { opacity:.76; }
.sculpture-bands { opacity:.29; }
.login-art-aura { position:absolute; inset:18% 15%; border-radius:50%; background:radial-gradient(ellipse,rgba(231,222,200,.065),transparent 70%); }
.login-art-point { position:absolute; width:3px; height:3px; border-radius:50%; background:#e8e4da; opacity:.7; }
.point-one { left:12%; top:34%; }
.point-two { right:13%; bottom:25%; width:2px; height:2px; opacity:.4; }
.login-capabilities { display:flex; align-items:center; gap:20px; font-size:12px; color:var(--k-muted); }
.login-capabilities i { width:3px; height:3px; border-radius:50%; background:#555650; }
.login-entry { display:flex; align-items:center; justify-content:center; border-left:1px solid var(--k-line); padding:60px 32px 60px 60px; }
.login-form.gate { width:100%; max-width:360px; padding:0; gap:22px; border:0; border-radius:0; background:transparent; }
.login-welcome { margin-bottom:12px; }
.login-welcome h2 { font-size:32px; font-weight:500; letter-spacing:-1.1px; line-height:1.2; }
.login-welcome p { margin:12px 0 0; color:var(--k-muted); font-size:14px; }
.login-form label { font-size:12px; font-weight:500; color:var(--k-ink-2); gap:9px; }
.login-form input { height:50px; padding:0 15px; font-size:14px; border:1px solid var(--k-line); border-radius:8px; background:var(--k-surface); }
.login-form input:focus { border-color:#989a92; box-shadow:0 0 0 3px rgba(220,220,205,.07); }
.login-form input::placeholder { color:#81847e; }
.login-form input:autofill { box-shadow:0 0 0 60px var(--k-surface) inset; -webkit-text-fill-color:var(--k-ink); }
.login-form .btn { min-height:50px; border-radius:8px; font-size:13px; font-weight:600; gap:11px; }
.login-form .login-arrow { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-left:auto; }
.login-form .login-sso { padding:0 17px; }
.login-sso .icon { stroke:none; }
.login-form .or { gap:15px; font-size:12px; margin:0; color:var(--k-muted); }
.login-submit { margin-top:3px; padding:0 17px !important; }
.login-form .login-secondary { background:#202221; border-color:#3b3e3b; color:var(--k-ink); }
.login-form .login-secondary:hover { background:#2b2e2a; border-color:#62655e; }
.login-trust { display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 0; color:var(--k-muted); font-size:12px; }
.login-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px; border-top:1px solid var(--k-line); color:#82857f; font-size:12px; }
@media (prefers-reduced-motion:no-preference) {
  /* A single slow turn reveals the depth of the sculpture, then settles. */
  .login-sculpture { animation:sculpture-unfold 5s var(--k-ease) both; }
  .login-art-aura { animation:sculpture-light 5s var(--k-ease) both; }
}
@keyframes sculpture-unfold { from { transform:translateY(12px) rotate(-18deg) scale(.94); opacity:0; } 20% { opacity:1; } to { transform:translateY(0) rotate(0) scale(1); opacity:1; } }
@keyframes sculpture-light { from { opacity:0; } to { opacity:1; } }
@media (max-width:1000px) {
  .login-page { padding-inline:32px; }
  .login-layout { grid-template-columns:1fr 1fr; min-height:620px; }
  .login-hero { padding-right:26px; }
  .login-intro h1 { font-size:58px; letter-spacing:-3px; }
  .login-intro h1 em { letter-spacing:-2px; }
  .login-intro p { font-size:13px; }
  .login-entry { padding-left:32px; padding-right:0; }
}
@media (max-width:700px) {
  .login-page { padding-inline:24px; }
  .login-header { min-height:80px; }
  .login-private { font-size:12px; }
  .login-layout { grid-template-columns:1fr; min-height:0; }
  .login-hero { min-height:190px; padding:36px 0; overflow:hidden; justify-content:center; }
  .login-intro h1 { font-size:42px; letter-spacing:-1.7px; }
  .login-intro h1 em { letter-spacing:-1.3px; }
  .login-intro p,.login-capabilities { display:none; }
  .login-art { position:absolute; width:250px; right:-55px; top:3px; margin:0; opacity:.65; }
  .login-intro { max-width:65%; }
  .login-entry { border-left:0; border-top:1px solid var(--k-line); padding:36px 0 50px; }
  .login-form.gate { max-width:420px; gap:20px; }
  .login-welcome { margin-bottom:8px; }
  .login-welcome h2 { font-size:28px; }
  .login-footer { min-height:64px; font-size:12px; }
  .login-footer span:first-child { max-width:170px; }
}
@media (max-width:380px) {
  .login-page { padding-inline:20px; }
  .login-header .gate-brand > span { font-size:15px; }
  .login-private { max-width:106px; line-height:1.5; }
  .login-hero { min-height:170px; }
  .login-intro h1 { font-size:36px; }
  .login-art { width:220px; right:-70px; top:4px; opacity:.45; }
}
@media (prefers-reduced-motion:reduce) {
  .login-sculpture,.login-art-aura { animation:none; }
}