/* The door: the app's way in (login.html) in the new design (Dan, 9-10 Nov 2026: "я думал у нас сайн ин пейдж тож новый").
   The prototype's door (mocks/app-next, #door): paper, the threads behind a frosted card, Outfit, a big light headline
   with one word in weight. Colour jobs as in the app: ink for signing in and every ordinary step, madder red only for the
   step that opens a workspace (an early-access link), red text only for what went wrong. */
@font-face{font-family:"Outfit";src:url(next/fonts/outfit-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url(next/fonts/outfit-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#FBFAF8;--ink:#1B1712;--body:#4A443C;--muted:#736C62;--faint:#A39B90;
  --hair:rgba(27,23,18,.1);--hair-2:rgba(27,23,18,.06);
  --red:#DD0200;--red-hi:#F2190E;--err:#B3261E;--err-bg:#FCEDEB;
  --sh-float:0 1px 2px rgba(27,23,18,.06),0 30px 70px -24px rgba(27,23,18,.32);
  --font:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;padding:24px 16px;background:var(--paper);color:var(--body);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
b,strong{font-weight:500;color:var(--ink)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:10px}

/* the threads, behind everything; paper until the first frame, and paper where there is no graphics card */
.door-c{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;background:var(--paper);opacity:0;transition:opacity .9s ease}
.door-c.on{opacity:1}

/* held from the top, so a message that appears grows the card downwards instead of moving it */
.door-card{position:relative;z-index:1;width:min(452px,100%);margin-top:max(0px,calc(50svh - 290px));padding:26px 28px 24px;border-radius:30px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(40px) saturate(1.15);backdrop-filter:blur(40px) saturate(1.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--sh-float)}
.dc-top{display:flex;align-items:center;gap:9px;width:max-content;margin-bottom:46px;border-radius:10px}
.dc-top svg{width:26px;height:26px;display:block}
.dc-top b{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

.dc-h{font-size:33px;line-height:1.14;font-weight:300;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.dc-h b{font-weight:500}
.dc-h:focus{outline:0}
.dc-p{margin-top:10px;color:var(--body);font-size:15px;text-wrap:pretty}

/* what went wrong, one red line by the button */
.dc-err{color:var(--err);font-size:14px;line-height:1.45}
.dc-note{margin-top:12px;color:var(--body);font-size:15px;text-wrap:pretty}

.dc-form{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.dc-f{display:flex;flex-direction:column;gap:7px}
.dc-f label{font-size:13.5px;font-weight:500;color:var(--ink)}
.fld{position:relative;display:flex;align-items:center;height:58px;border-radius:17px;background:#fff;box-shadow:0 1px 2px rgba(27,23,18,.04)}
/* the ring is drawn over the field: an autofilled input paints its own box and would hide a ring behind it */
.fld::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--hair);pointer-events:none;transition:box-shadow .15s}
.fld:focus-within::after{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dc-f.is-error .fld::after{box-shadow:inset 0 0 0 1.5px var(--err)}
.fld input{flex:1;min-width:0;height:100%;padding:0 18px;border:0;border-radius:17px;background:none;outline:0;font-size:17px;color:var(--ink)}
.fld input::placeholder{color:var(--faint)}
/* the address a link was sent to: shown, not for changing */
.fld input[readonly]{color:var(--body)}
.fld:has(input[readonly]){background:rgba(255,255,255,.55);box-shadow:none}
.fld:has(input[readonly])::after{box-shadow:inset 0 0 0 1px var(--hair-2)}
.fld-show{flex:none;display:flex;align-items:center;justify-content:center;height:44px;margin-right:7px;padding:0 12px;border-radius:12px;color:var(--muted);font-size:14px;font-weight:500}
.fld-show:hover{background:rgba(27,23,18,.05);color:var(--ink)}
.fld input:-webkit-autofill,.fld input:-webkit-autofill:hover,.fld input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 9999s ease-out 0s}
.dc-help{font-size:13px;color:var(--muted)}
.dc-f.is-error .dc-help{color:var(--err)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border-radius:14px;font-size:15px;font-weight:500;white-space:nowrap;transition:background-color .15s,opacity .2s,transform .15s var(--ease)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover:not(:disabled){background:#000}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover:not(:disabled){background:var(--red-hi)}
.btn-soft{background:rgba(27,23,18,.06);color:var(--ink)}
.btn-soft:hover{background:rgba(27,23,18,.1)}
.btn-wide{width:100%}
.btn:disabled{opacity:.38}
.btn.is-loading{opacity:1;pointer-events:none}
.dc-form .btn{margin-top:6px}
.spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Google, when the identity provider has it switched on */
.dc-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;margin-top:26px;border-radius:14px;background:#fff;color:var(--ink);font-size:15px;font-weight:500;box-shadow:inset 0 0 0 1px var(--hair),0 1px 2px rgba(27,23,18,.04)}
.dc-google:hover{box-shadow:inset 0 0 0 1px rgba(27,23,18,.22),0 1px 2px rgba(27,23,18,.04)}
.dc-google svg{width:18px;height:18px}
.dc-google:not([hidden]) + .dc-or + .dc-form{margin-top:0}
.dc-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:13px;color:var(--muted)}
.dc-or::before,.dc-or::after{content:'';flex:1;height:1px;background:var(--hair)}

/* the one-time code: six cells */
.dc-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:26px}
.dc-code input{width:100%;height:58px;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);text-align:center;font-size:22px;font-weight:500;color:var(--ink);outline:0;transition:box-shadow .15s}
.dc-code input:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dc-code.is-error input{box-shadow:inset 0 0 0 1.5px var(--err)}
.dc-code-err{margin-top:10px;font-size:14px;color:var(--err)}
#codeBusy{margin-top:18px}

.dc-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.dc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:16px;font-size:14px;color:var(--muted)}
.dc-link{color:var(--body);font-size:14px;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.dc-link:hover{color:var(--ink);text-decoration-color:currentColor}

.dc-terms,.dc-fine{margin-top:16px;font-size:13px;color:var(--muted)}
.dc-terms{margin-top:12px}
.dc-terms a{white-space:nowrap}
.dc-terms a,.dc-fine a{color:var(--body);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.dc-terms a:hover,.dc-fine a:hover{color:var(--ink);text-decoration-color:currentColor}

@media (max-width:520px){
  body{padding:16px 16px 28px}
  .door-card{padding:22px 20px 20px;border-radius:26px;margin-top:max(0px,calc(18svh - 90px))}
  .dc-top{margin-bottom:34px}
  .dc-h{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}