/* HCC 3.0 login (Entrance). hcc3.css tokens only — no new colours.
   Page = --surface-0 (same as every v3 page); panel = guide .parchment (class on the card). */
html,body.login3{min-height:100%;background:var(--surface-0)}
body.login3{margin:0;color:var(--ink-1);font:400 15px/1.55 var(--font-body)}
/* house accent strip */
.house-strip{position:fixed;inset:0 0 auto 0;height:4px;z-index:5;
  background:linear-gradient(90deg,var(--h-gry) 0 25%,var(--h-huf) 25% 50%,var(--h-rav) 50% 75%,var(--h-sly) 75% 100%)}
.login-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s12) var(--s5) var(--s6)}
.login-crest{display:flex;flex-direction:column;align-items:center}
.login-crest img{width:168px;height:168px;display:block}
.login-crest .motto-ribbon{margin:-14px 0 0;font-size:12px;padding:6px 26px}
.login-title{margin:var(--s5) 0 2px;font:700 clamp(26px,4.2vw,40px)/1.15 var(--font-display);letter-spacing:.06em;text-align:center;color:var(--gryffindor-gold-light)}
.login-est{font:500 12px var(--font-display);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
/* gothic ornament: pointed arch + lozenge between two accent rules */
.ornament{display:flex;align-items:center;gap:var(--s3);width:min(420px,80vw);margin:var(--s4) 0 var(--s5);color:var(--accent)}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.ornament::after{background:linear-gradient(270deg,transparent,var(--accent))}
.ornament svg{flex:none}
/* parchment panel: colours come from the guide's .parchment; layout only here */
.login-card.parchment{position:relative;width:min(440px,100%);padding:var(--s8) var(--s8) var(--s6);box-shadow:var(--shadow)}
.login-card::before{content:"";position:absolute;inset:var(--s2);border:1px solid var(--parchment-line);border-radius:var(--r);pointer-events:none}
.card-corner-bl,.card-corner-br{position:absolute;bottom:2px;font-size:10px;color:var(--ravenclaw-bronze)}
.card-corner-bl{left:6px}.card-corner-br{right:6px}
.card-incantation{font:600 12px var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--ravenclaw-bronze);text-align:center}
.card-question{margin:var(--s2) 0 var(--s4);font:500 17px/1.45 var(--font-display);text-align:center;color:var(--parchment-ink)}
.login-label{display:block;margin:0 0 6px;font:600 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--parchment-ink)}
.login-input{width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--ravenclaw-bronze);background:var(--parchment);color:var(--parchment-ink);
  font:500 16px var(--font-body);transition:border-color .15s,box-shadow .15s}
.login-input::placeholder{color:var(--ravenclaw-bronze)}
.login-input:focus{outline:none;border-color:var(--parchment-ink);box-shadow:0 0 0 3px var(--accent-ring)}
.login-input[aria-invalid="true"]{border-color:var(--neg)!important;box-shadow:0 0 0 3px var(--neg-soft)!important}
.login-error{display:none;margin:var(--s2) 0 0;font:600 13px var(--font-body);color:var(--gryffindor-red)}
.login-error.show{display:flex;gap:6px;align-items:center}
.btn-enter{display:block;width:100%;height:46px;margin-top:var(--s3);border:0;border-radius:var(--r-sm);cursor:pointer;
  font:700 14px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--parchment);background:var(--gryffindor-red)}
.btn-enter:hover{filter:brightness(1.15)}
.card-divider{border:0;height:1px;margin:var(--s5) 0 var(--s4);background:var(--parchment-line)}
.btn-tour{display:block;text-align:center;padding:10px;border-radius:var(--r-sm);border:1px solid var(--parchment-line);color:var(--parchment-ink);
  font:600 13px var(--font-body);text-decoration:none;background:transparent}
.btn-tour:hover{border-color:var(--ravenclaw-bronze);background:var(--accent-soft)}
.btn-tour.btn-commission{padding:12px;letter-spacing:.12em;border-color:var(--ravenclaw-bronze);background:var(--accent-soft)}
.tour-hint{margin:var(--s2) 0 0;text-align:center;font-size:12px;color:var(--parchment-ink)}
.btn-enter:focus-visible,.btn-tour:focus-visible{outline:3px solid var(--ravenclaw-blue-bright);outline-offset:2px}
.login-footer-bar{margin-top:var(--s6);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);text-align:center}
.login-footer-brand{font-family:var(--font-display);letter-spacing:.12em;color:var(--ink-2)}
.login-footer-status{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.login-online-indicator{display:flex;align-items:center;gap:6px}
.login-online-indicator .dot{width:7px;height:7px;border-radius:50%;background:var(--pos)}
.brass-rule{display:none}
@media (max-width:520px){
  .login-page{padding:var(--s10) var(--s4) var(--s5);justify-content:flex-start}
  .login-crest img{width:120px;height:120px}
  .login-crest .motto-ribbon{font-size:10px;letter-spacing:.16em;padding:5px 18px}
  .login-card.parchment{padding:var(--s6) var(--s5) var(--s5)}
  .card-question{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* accounts entrance (templates/auth/entrance.html) — tokens only */
.btn-tour.btn-commission{margin-top:var(--s2)}
.tour-hint.lead{margin-top:0}
.auth-qr{text-align:center}
.auth-qr img{padding:6px;border-radius:var(--r-sm);background:var(--ink-1)} /* light quiet zone keeps the code scannable */
.auth-secret{font-family:var(--font-mono);word-break:break-all;text-align:center;color:var(--parchment-ink)}
.auth-codes{font:500 15px/1.7 var(--font-mono);text-align:center;color:var(--parchment-ink);background:transparent}
.btn-enter.btn-link{text-align:center;line-height:46px;text-decoration:none}
.btn-tour.auth-back{margin-top:var(--s3)}
.login-card details summary{cursor:pointer}
.login-card .login-label + .login-input + .login-label{margin-top:var(--s3)}