/* Host sign-in page, in the product shell (brand/shell.css: top bar, type, focus). Colors and
   fonts come from brand.css only. One card under the top bar; centered on a big screen. */
body{min-height:100vh}
.card{width:calc(100% - 32px); max-width:460px; margin:28px auto 40px; padding:28px 22px 22px;
  background:var(--brand-card); border-radius:var(--brand-radius-lg); box-shadow:var(--brand-shadow)}
.eyebrow{margin:0 0 8px}
h1{font:400 40px/1.05 var(--brand-font-body); letter-spacing:-.015em; margin:0 0 24px}
h2{font:400 28px/1.15 var(--brand-font-body); margin:0 0 10px}
p{margin:0 0 14px}
.note{color:var(--brand-ink-2)}
label{display:block; font-weight:500; margin:0 0 6px}
input{display:block; width:100%; min-height:52px; font:inherit; font-size:20px; padding:10px 14px;
  color:var(--brand-ink); background:var(--brand-paper); border:1px solid var(--brand-line); border-radius:var(--brand-radius); margin:0 0 12px}
input:focus{outline:2px solid var(--brand-ink); outline-offset:1px}
#pin, #new-pin{letter-spacing:.3em; font-variant-numeric:tabular-nums}
.btn{display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:12px 16px;
  font:500 var(--brand-text)/1.2 var(--brand-font-ui); text-decoration:none; text-align:center; cursor:pointer;
  color:var(--brand-paper); background:var(--brand-ink); border:0; border-radius:var(--brand-radius); transition:background .2s}
@media (hover:hover){.btn:hover{background:var(--brand-accent); color:var(--brand-accent-ink)}}
.btn.quiet{color:var(--brand-ink); background:transparent; box-shadow:inset 0 0 0 1.5px var(--brand-ink)}
@media (hover:hover){.btn.quiet:hover{background:var(--brand-panel)}}
.btn:disabled{opacity:.6; cursor:wait}
.or{display:flex; align-items:center; gap:12px; margin:24px 0 18px; color:var(--brand-ink-2)}
.or::before, .or::after{content:""; flex:1; border-top:1px solid var(--brand-rule)}
.bot{margin-top:12px}
.bot:empty{display:none}
.msg{min-height:1.5em; margin:12px 0 0}
.msg.err{color:var(--brand-danger)}
.msg.ok{color:var(--brand-ok)}
.who{font-size:20px}
#account form{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--brand-rule)}
.row{display:grid; gap:10px; margin-top:24px}
.to-event{margin:24px 0 0; text-align:center}
.to-event a{color:var(--brand-ink); display:inline-block; padding:10px; text-underline-offset:4px}
@media (min-width:700px){
  .card{margin-top:8vh; padding:44px 44px 34px}
  h1{font-size:48px}
  .row{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} }