/* Login, invite and admin pages. Tokens come from /theme.css (linked first). */
body{margin:0;color:var(--ink);font:16px/1.45 var(--font);min-height:100vh;min-height:100dvh}
.card{max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 48px) 16px 32px;position:relative}
.card>div,.box{background:var(--paper);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);border-radius:var(--r-card);padding:28px 26px;box-shadow:var(--shadow),inset 0 1px 0 var(--hairline)}
.card>div{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}}
.brand{display:block;height:26px;width:auto;margin:0 0 22px}
.mark{display:none} /* the serif heading carries the page; a slat glyph read as a menu button */
h1{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.01em;line-height:1.02;margin:0 0 8px;text-wrap:balance}
h1 em{font-style:italic;color:var(--accent)}
p.sub{color:var(--muted);margin:0 0 18px;font-size:15px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:16px 0 6px;letter-spacing:.01em}
input,select{font:inherit;width:100%;min-height:52px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-field);background:rgba(255,255,255,.9);color:var(--ink);transition:border-color .2s,box-shadow .25s var(--ease),background .2s;box-shadow:inset 0 1px 2px rgba(90,60,35,.06)}
input:hover,select:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
button{font:inherit;font-weight:600;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:10px 20px;min-height:46px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,filter .2s}
button:hover{box-shadow:var(--shadow-soft)}
button:active{transform:scale(.97)}
button.primary{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent));color:var(--accent-ink);border-color:transparent;width:100%;margin-top:20px;min-height:56px;font-size:16px;letter-spacing:.01em;box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.28)}
button.primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px color-mix(in srgb,var(--accent) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
button.primary:active{transform:scale(.98)}
button.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
button.primary:hover::after{transform:translateX(120%)}
button.small{padding:6px 16px;font-size:14px;min-height:40px}
button.danger{color:var(--bad);border-color:var(--bad)}
button:disabled{opacity:.5;transform:none}
.err{color:var(--bad);font-size:14px;margin-top:12px;min-height:1.4em}
.ok{color:var(--accent);font-size:14px}
/* a slow ribbon of window treatments under the sign-in card */
.ribbon{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);z-index:-1}
.ribbon div{display:flex;width:max-content;animation:ribbon 60s linear infinite}
.ribbon span{font:italic 400 clamp(30px,7vw,54px)/1.1 var(--serif);color:rgba(110,85,62,.2);white-space:nowrap;padding-right:.6em}
.ribbon span b{font-weight:400;color:rgba(150,101,30,.32);padding:0 .35em;font-style:normal}
@keyframes ribbon{to{transform:translateX(-50%)}}
@media (max-height:640px){.ribbon{display:none}}
@media (prefers-reduced-motion:reduce){.card>div,.ribbon div{animation:none}button.primary::after{display:none}}
.links{text-align:center;margin:16px 0 0;font-size:14px}
.links a{color:var(--accent);font-weight:600;text-decoration:none}
.links a:hover{text-decoration:underline}