.auth-nav-button.signed-in{border-color:var(--maple);color:var(--maple)}
.auth-nav-button.needs-upgrade{border-style:dashed}

.auth-panel{
  background:var(--cream);
  border:1px solid rgba(201,194,182,.7);
  border-radius:var(--radius-sm);
  box-shadow:0 22px 55px rgba(31,30,29,.22);
  padding:1rem;
  position:fixed;
  right:4vw;
  top:4.8rem;
  width:min(16rem,90vw);
  z-index:110;
}
.auth-panel[hidden]{display:none}
.auth-panel-head{align-items:baseline;display:flex;gap:.5rem;justify-content:space-between}
.auth-panel-head strong{font-family:var(--serif);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-panel-role{border:1px solid var(--maple);border-radius:var(--radius-pill);color:var(--maple);flex-shrink:0;font-size:.64rem;padding:.15rem .55rem}
.auth-panel-meta{color:var(--ink-soft);font-size:.7rem;line-height:1.6;margin:.4rem 0 0}
.auth-panel-links{border-top:1px solid var(--tint);display:flex;flex-direction:column;margin-top:.8rem;padding-top:.5rem}
.auth-panel-links a{border-radius:var(--radius-xs);color:var(--ink);font-size:.78rem;padding:.55rem .6rem;text-decoration:none}
.auth-panel-links a:hover{background:var(--cream-deep);color:var(--maple)}
.auth-panel-logout{background:#fff;border:1px solid var(--beige);border-radius:var(--radius-xs);color:var(--ink-soft);cursor:pointer;font:inherit;font-size:.76rem;margin-top:.6rem;padding:.55rem;width:100%}
.auth-panel-logout.armed{background:var(--maple);border-color:var(--maple);color:#fff}

.auth-mask{
  align-items:center;
  background:rgba(31,30,29,.58);
  backdrop-filter:blur(7px);
  display:flex;
  inset:0;
  justify-content:center;
  padding:1.2rem;
  position:fixed;
  z-index:120;
}
.auth-mask[hidden]{display:none}
.auth-dialog{
  background:var(--cream);
  border:1px solid rgba(201,194,182,.7);
  border-radius:var(--radius-sm);
  box-shadow:0 28px 80px rgba(31,30,29,.38);
  color:var(--ink);
  padding:1.8rem;
  width:min(24rem,100%);
}
.auth-eyebrow{color:var(--maple);font-family:var(--latin);font-size:.72rem;letter-spacing:.2em;margin-bottom:.35rem;text-transform:uppercase}
.auth-title{font-family:var(--serif);font-size:1.35rem;letter-spacing:.12em;line-height:1.4;margin:0}
.auth-subtitle{color:var(--ink-soft);font-size:.76rem;letter-spacing:.06em;line-height:1.8;margin:.5rem 0 1.25rem}
.auth-field{display:block;margin-top:.9rem}
.auth-field span{color:var(--ink-soft);display:block;font-size:.7rem;letter-spacing:.16em;margin-bottom:.38rem}
.auth-field input{background:#fff;border:1px solid var(--beige);border-radius:var(--radius-xs);color:var(--ink);font-family:var(--sans);font-size:16px;outline:none;padding:.68rem .75rem;width:100%}
.auth-field input:focus{border-color:var(--maple);box-shadow:0 0 0 3px rgba(168,80,47,.1)}
.auth-error{color:var(--danger);font-size:.72rem;line-height:1.6;margin:.65rem 0 0;min-height:1.15rem}
.auth-error.success{color:var(--success)}
.auth-actions{display:grid;gap:.7rem;grid-template-columns:1fr 1.35fr;margin-top:1rem}
.auth-actions.single{grid-template-columns:1fr;justify-items:center}
.auth-actions.single .auth-submit{width:min(12rem,100%)}
.auth-cancel{background:transparent;border:1px solid var(--beige);color:var(--ink-soft)}
.auth-submit{background:var(--maple);border:1px solid var(--maple);color:var(--cream)}
.auth-submit:hover{background:var(--maple-deep);border-color:var(--maple-deep)}
.auth-submit:disabled{cursor:wait;opacity:.55}

@media(max-width:720px){
  .nav-links .auth-nav-button{font-size:.8rem;letter-spacing:.12em;margin-top:.2rem;padding:.65rem 1.2rem;text-align:left;width:100%;max-width:none}
  .auth-dialog{padding:1.4rem}
  .auth-panel{left:4vw;right:4vw;top:4.3rem;width:auto}
}