/* The one sign-in flow (#1655, canvas page 8 SI): tripley.app/signin and the sheet over any page. Self-contained so
   every page that can ask someone to sign in links only this file (design/PRINCIPLES.md: dark green main button,
   white outlined second, navy words, 8 px corners, Plus Jakarta Sans). */
:root{--si-green:#0D402C;--si-cream:#FEFAEA;--si-ink:#13213B;--si-muted:#4E5B73;--si-faint:#6B7689;--si-hint:#8B96A8;--si-field:#CDD2DA;--si-line:#E6E6E9;--si-line-2:#EFEFF1;--si-grey:#E9EBEE;--si-ok:#2E9E6A}

/* The steps (page and sheet alike) */
.si-flow{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:left;color:var(--si-ink);font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif}
.si-flow .si-back{align-self:flex-start;min-height:44px;margin:-6px 0 6px -10px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--si-muted);cursor:pointer;display:flex;align-items:center;gap:4px}
.si-flow .si-h1{margin:0;max-width:none;text-align:left;font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.03em;color:var(--si-ink)}
.si-flow .si-sub{margin:0;font-size:15px;line-height:1.5;font-weight:400;color:var(--si-muted);overflow-wrap:anywhere}
.si-flow .si-notice{margin:6px 0 0;padding:10px 12px;border-radius:8px;background:#FFF4D6;color:#7A5600;font-size:14px;font-weight:600;line-height:1.4}
.si-flow .si-form{display:flex;flex-direction:column;gap:12px;margin:18px 0 0;padding:0;width:100%;max-width:none}
.si-flow .si-primary,.si-flow .si-white{min-height:50px;width:100%;margin:0;padding:0 16px;border-radius:8px;font:inherit;font-size:16px;font-weight:700;line-height:1.2;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:none}
.si-flow .si-primary{border:0;background:var(--si-green);color:var(--si-cream)}
.si-flow .si-primary:disabled{background:var(--si-grey);color:var(--si-hint);cursor:default}
.si-flow .si-white{border:1px solid var(--si-field);background:#FFFFFF;color:var(--si-ink)}
.si-flow .si-white:disabled{color:var(--si-hint);cursor:default}
.si-flow .si-white img{flex:none;max-width:none}
.si-flow .si-field{display:flex;flex-direction:column;gap:6px;margin:0}
.si-flow .si-label{font-size:13px;font-weight:600;color:var(--si-muted)}
.si-flow .si-input{height:50px;width:100%;box-sizing:border-box;margin:0;border:1px solid var(--si-field);border-radius:8px;padding:0 12px;font:inherit;font-size:16px;color:var(--si-ink);background:#FFFFFF;outline:none;box-shadow:none}
.si-flow .si-input:focus{border:2px solid var(--si-green);padding:0 11px}
.si-flow .si-input[aria-invalid=true]{border-color:#B3261E}
.si-flow .si-code{height:56px;text-align:center;font-size:24px;font-weight:800;letter-spacing:.4em}
.si-flow .si-fine{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--si-muted);text-align:center}
.si-flow .si-fine a{color:inherit}
.si-flow .si-note{margin:0;font-size:13px;line-height:1.45;color:var(--si-muted)}
.si-flow .si-error{margin:0;font-size:14px;line-height:1.45;color:#B3261E;text-align:left}
.si-flow .si-error:empty{display:none}
.si-flow .si-resend{align-self:center;min-height:44px;border:0;background:none;padding:0 8px;font:inherit;font-size:14px;font-weight:600;color:var(--si-muted);cursor:pointer}
.si-flow .si-resend:disabled{cursor:default;color:var(--si-hint)}
.si-flow :focus-visible{outline:2px solid var(--si-green);outline-offset:3px}

/* The page: tripley.app/signin */
body.signin{margin:0;min-height:100vh;min-height:100dvh;background:#FFFFFF;display:block}
.si-top{height:64px;box-sizing:border-box;padding:0 40px;display:flex;align-items:center;border-bottom:1px solid var(--si-line-2)}
.si-top a{display:flex}
.si-top img{height:24px;width:auto;display:block}
.si-main{width:min(400px,calc(100% - 48px));margin:120px auto 96px;padding:0;max-width:none}

/* The sheet: a dialog over the page; a bottom sheet on a phone */
dialog.si-dialog{position:fixed;inset:0;margin:auto;width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-sizing:border-box;padding:24px 28px 28px;border:0;border-radius:16px;background:#FFFFFF;box-shadow:0 24px 60px rgba(19,33,59,.22);overflow-y:auto;text-align:left}
dialog.si-dialog::backdrop{background:rgba(19,33,59,.38)}
dialog.si-dialog .si-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border:0;border-radius:50%;background:#F1F2F4;display:grid;place-items:center;cursor:pointer;padding:0;z-index:1}
dialog.si-dialog .si-flow{padding-top:28px}
dialog.si-dialog .si-flow .si-h1{font-size:24px;padding-right:44px}
dialog.si-dialog .si-flow .si-back{margin-top:-28px}

/* The toast: the page 11 pill (T0, #737) */
.si-toast{position:fixed;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;justify-content:center;pointer-events:none}
.si-toast[hidden]{display:none}
.si-toast-pill{max-width:358px;min-height:44px;box-sizing:border-box;padding:0 18px 0 12px;border-radius:999px;background:#FFFFFF;border:1px solid var(--si-line);box-shadow:0 10px 28px rgba(19,33,59,.16);display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif}
.si-toast-dot{fill:var(--si-ok)}
.si-toast.error .si-toast-dot{fill:#D64545}
.si-toast-text{overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600;color:var(--si-ink)}

@media (max-width:600px){
 .si-top{padding:0 16px}
 .si-main{margin-top:40px}
 .si-main.si-flow .si-h1{font-size:28px}
 dialog.si-dialog{inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:100dvh;border-radius:20px 20px 0 0;padding:20px 24px calc(24px + env(safe-area-inset-bottom,0px))}
}