.door-side { background-color: var(--sp-side-bg); color: var(--sp-side-brand); display: flex; flex-direction: column;
  justify-content: center; gap: 18px; padding: 48px 56px; box-sizing: border-box; font-family: var(--sp-font-ui); }
.door-brand { font-family: var(--sp-font-ui); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: normal;
  color: var(--sp-side-brand); margin: 0; text-transform: none; }
.door-line { margin: 0; max-width: 30ch; font-size: 17px; line-height: 1.45; color: var(--sp-side-link); }

                                                                       
.door-rail { position: relative; margin-top: 18px; max-width: 420px; padding-top: 10px; }
.door-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 3px;
  background: linear-gradient(var(--sp-k-rail-top), var(--sp-k-rail-light) 35%, var(--sp-k-rail-dark)); }
.door-tickets { display: flex; gap: 12px; align-items: flex-start; }
.door-ticket { position: relative; flex: 0 0 auto; width: 132px; padding: 18px 10px 12px; background-color: var(--sp-k-paper);
  color: var(--sp-k-paper-ink); font-family: var(--sp-font-list); font-size: 12px; line-height: 1.5; }
.door-ticket.older { background-color: var(--sp-k-paper-2); margin-top: 6px; }
.door-ticket:nth-child(2) { transform: rotate(-1.5deg); }
.door-ticket:nth-child(3) { transform: rotate(1.2deg); }
.door-tape { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 1px 10px;
  background-color: var(--sp-k-tape); color: var(--sp-k-paper-ink); font-family: var(--sp-font-tape); font-size: 12px; white-space: nowrap; }
.door-ticket p { margin: 0; border-bottom: 1px dashed var(--sp-k-paper-rule); padding: 2px 0; }
.door-ticket p:last-child { border-bottom: 0; }

                                                                            
.login-overlay { background: var(--sp-o-page); padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center; overflow-y: auto; }
.login-overlay[hidden] { display: none; }
.login-overlay > .door-side { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; justify-self: stretch; }
.login-overlay > .login-card { grid-column: 2; grid-row: 1; }
.login-overlay > .login-support { grid-column: 2; grid-row: 2; margin: 0 0 24px; }

.login-card, body.door .card { background: var(--sp-o-card); border: 1px solid var(--sp-o-card-edge); border-radius: var(--sp-radius-lg);
  box-shadow: none; color: var(--sp-o-ink); font-family: var(--sp-font-ui); }
.login-card { width: 400px; max-width: calc(100% - 32px); padding: 32px; text-align: left; gap: 14px; }
.login-card h1, body.door h1 { font-family: var(--sp-font-ui); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: normal;
  text-transform: none; padding-left: 0; color: var(--sp-o-ink); }
.login-card .subtitle { color: var(--sp-o-muted); font-size: 14px; line-height: 1.45; margin: 0 0 4px; }
.login-card label, body.door label, body.door .eyebrow { font-family: var(--sp-font-ui); font-size: 13px; font-weight: 500; letter-spacing: normal;
  text-transform: none; color: var(--sp-o-ink-2); }
.login-card input, body.door input:not([type="checkbox"]) { min-height: var(--sp-target); box-sizing: border-box; font-family: var(--sp-font-ui);
  font-size: 15px; border: 1px solid var(--sp-o-input-edge); border-radius: var(--sp-radius); background-color: var(--sp-o-card); color: var(--sp-o-ink); }
.login-card input:focus, body.door input:focus { outline: none; border-color: var(--sp-o-ink); box-shadow: 0 0 0 2px var(--sp-o-card-edge); }
.login-card input:-webkit-autofill, .login-card input:-webkit-autofill:hover, .login-card input:-webkit-autofill:focus,
body.door input:-webkit-autofill, body.door input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--sp-o-card) inset; box-shadow: 0 0 0 1000px var(--sp-o-card) inset;
  -webkit-text-fill-color: var(--sp-o-ink); caret-color: var(--sp-o-ink); }

                                                                                                   
#login-submit, #login-mfa-verify, #reset-submit, body.door .nda-primary, body.door button[type="submit"] {
  min-height: var(--sp-target); background-color: var(--sp-o-primary); color: var(--sp-o-primary-ink); border: 1px solid var(--sp-o-primary);
  border-radius: var(--sp-radius-seg); font-family: var(--sp-font-ui); font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; }
#login-submit:hover, #login-mfa-verify:hover, #reset-submit:hover, body.door .nda-primary:hover:not(:disabled), body.door button[type="submit"]:hover {
  background-color: var(--sp-o-ink-hover); border-color: var(--sp-o-ink-hover); }
body.door .nda-primary:disabled { opacity: .45; }
.login-card .link-btn, .login-card .pw-eye { min-height: var(--sp-target); color: var(--sp-o-ink-2); font-family: var(--sp-font-ui); }
.login-card .pw-eye { min-width: var(--sp-target); }
                                                                                                                           
                                                         
.login-card .login-msg, body.door .nda-msg { color: var(--sp-o-ink-2); font-size: 14px; }
body.door .nda-msg.bad { color: var(--sp-problem); }
.login-support, .login-support a { color: var(--sp-o-faint); font-family: var(--sp-font-ui); font-size: 14px; }

                                                                                                     
body.door { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; margin: 0; padding: 0; background: var(--sp-o-page); color: var(--sp-o-ink);
  font-family: var(--sp-font-ui); align-items: start; }
                                                                                                                              
body.door { align-content: start; }
                                                                                                                   
body.door :is(main, .nda-bar) :not(code, pre, kbd) { font-family: var(--sp-font-ui); text-transform: none; letter-spacing: normal; }
body.door .nda-letterhead { border-bottom-color: var(--sp-o-card-edge); }
                                                                                                                        
                                                                                                                                         
body.door .nda-lh-word { font-family: var(--sp-font-ui); font-weight: 600; font-size: 28px; line-height: 1; color: #0E0E0E; flex: none; }
body.door mark.nda-fill { background-color: var(--sp-o-band); color: var(--sp-o-ink); }                                       
body.door :is(.nda-h, .nda-lh-name, h2, h3) { color: var(--sp-o-ink); }
body.door :is(.nda-lh-sub, .nda-intro, .nda-bar-note) { color: var(--sp-o-muted); }

                                                                                                                                
.login-card .link-btn, body.door .drawer-btn { background-color: var(--sp-o-card); border: 1px solid var(--sp-o-button-edge); color: var(--sp-o-ink-2);
  border-radius: var(--sp-radius); min-height: var(--sp-target); font-family: var(--sp-font-ui); font-weight: 500; letter-spacing: normal; text-transform: none;
  white-space: nowrap; }
.login-card .link-btn:hover, body.door .drawer-btn:hover { background-color: var(--sp-o-band); color: var(--sp-o-ink); }
body.door::before { display: none; }
body.door > .door-side { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 0; height: 100vh; }
body.door > main { grid-column: 2; justify-self: center; width: calc(100% - 64px); max-width: 640px; margin: 48px 0; }
body.door .nda-bar { left: 50%; background: var(--sp-o-card); border-top: 1px solid var(--sp-o-card-edge); }
body.door .nda-doc { font-family: var(--sp-font-ui); }

                                                                                 
@media (max-width: 860px) {
  .door-side { padding: 16px 20px; gap: 4px; }
  .door-brand { font-size: 28px; }
  .door-line { font-size: 14px; }
                                                                                                                                                                 
  .door-rail { margin-top: 10px; padding-top: 7px; max-width: 316px; }
  .door-rail::before { height: 8px; }
  .door-tickets { gap: 8px; }
  .door-ticket { width: 100px; padding: 11px 6px 5px; font-size: 10px; line-height: 1.35; white-space: nowrap; }
  .door-ticket.older { margin-top: 3px; }
  .door-ticket p:nth-of-type(n+2) { display: none; }
  .door-tape { font-size: 10px; top: -6px; padding: 0 7px; }
  .login-overlay { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; align-items: start; }
  .login-overlay > .door-side { grid-column: 1; grid-row: 1; }
  .login-overlay > .login-card { grid-column: 1; grid-row: 2; margin-top: 20px; padding: 24px 20px; }
  .login-overlay > .login-support { grid-column: 1; grid-row: 3; margin-top: 16px; }
  body.door { grid-template-columns: 1fr; }
  body.door > .door-side { grid-row: 1; position: static; height: auto; }
  body.door > main { grid-column: 1; grid-row: 2; width: calc(100% - 32px); margin: 20px 0 48px; }
  body.door .nda-bar { left: 0; }
}

                                                                                                                                 
                                                                                       
.drawer-btn { font-family: var(--sp-font-ui); }