/* The quick way in and the host's "one step from your code" on /account/ (site audit item 2, 2026-11-03).
   Loaded by the account page only. assets/hunt-account.js shows the host step and folds the password forms. */

.acct-quick { display: flex; flex-direction: column; gap: 0.9rem; }
.acct-quick[hidden], .acct-pw[hidden], .magic-sent[hidden], .host-step[hidden], .host-alt[hidden], .pw-toggle[hidden], .or-pw[hidden],
[data-form="magic"][hidden], [data-form="magic-terms"][hidden], [data-magic-btns][hidden], .perks[hidden], .page-head[hidden], .host-poster[hidden] { display: none; }
.acct-quick-h { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted, var(--muted)); }
.acct-quick .gsi { align-items: stretch; }
.acct-quick .gsi .gbtn { display: flex; justify-content: center; min-height: 44px; }
.magic-sent { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem 1rem; border-left: 3px solid #855700; background: rgba(133, 87, 0, 0.1); border-radius: 0 0.4rem 0.4rem 0; }
.magic-sent:focus { outline: 3px solid #855700; outline-offset: 2px; }
.magic-sent .eyebrow { margin: 0; }
.magic-sent-h { margin: 0; font-family: var(--display-plain, var(--heading, inherit)); font-weight: 800; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; color: var(--paper-ink, inherit); }
.account-card .linkish { font: inherit; color: inherit; text-decoration: underline; background: none; border: 0; padding: 0.6rem 0; min-height: 44px; cursor: pointer; }
.or-pw { display: flex; align-items: center; gap: 0.7rem; width: 100%; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper-muted, var(--muted)); margin: 1.2rem 0 0.9rem; }
.or-pw::before, .or-pw::after { content: ""; flex: 1; border-top: 1px solid var(--paper-line); }
.pw-toggle { margin: 1.1rem 0 0; }
.pw-toggle .btn { min-height: 44px; }
.host-alt { margin-top: 1.1rem !important; }
[data-panel="magic"]:focus { outline: none; }
[data-panel="magic"] h2 { margin: 0; }

/* the host step: the game they picked, and sign-in as the only step left */
.host-step { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; margin: 0.4rem 0 1.2rem; }
.host-step:not(:has(.host-poster:not([hidden]))) { grid-template-columns: 1fr; }
.host-poster { width: 100%; height: auto; border-radius: 0.45rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
.host-step h1 { font: 900 clamp(1.7rem, 7vw, 3rem)/0.95 var(--display, inherit); text-transform: uppercase; margin: 0.15rem 0 0.5rem; }
@media (max-width: 560px) {
  .host-step { grid-template-columns: 4.8rem 1fr; gap: 0.8rem; }
  .host-step .lede { font-size: 0.95rem; }
  .host-step [data-host-back] { padding: 0.35rem 0; }
}
.host-step .lede { margin: 0 0 0.7rem; font-size: 1rem; }
.host-step .eyebrow { margin: 0; }
.host-steps { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; counter-reset: hs; }
.host-steps li { counter-increment: hs; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: var(--muted); }
.host-steps li::before { content: counter(hs); display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 700; font-size: 0.8rem; }
.host-steps li.is-done { color: #b9d9a8; }
.host-steps li.is-done::before { content: "\2713"; border-color: #6f9a5d; }
.host-steps li.is-now { color: var(--gold-ink, #f0c25a); font-weight: 700; }
.host-steps li.is-now::before { background: var(--gold, #e3a72f); color: #1b1407; border-color: var(--gold, #e3a72f); }
.host-step [data-host-back] { display: inline-block; padding: 0.55rem 0; min-height: 44px; }
@media (min-width: 900px) {
  .host-step { grid-template-columns: 9rem 1fr; max-width: 52rem; }
  [data-account].is-host .account-grid { grid-template-columns: minmax(0, 34rem); }
}
@media (max-width: 760px) {
  [data-account].is-host .host-step { margin-bottom: 0.6rem; }
  [data-account].is-host .host-step .lede { display: block; }
}