/* Shares the journey sound control's border and icon treatment. */
.account-control{display:grid;place-items:center;position:relative;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);color:var(--gold-2);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.account-control svg{width:18px;height:18px}
.account-control:hover{border-color:var(--gold);box-shadow:0 0 18px -4px rgba(231,194,125,.4)}
.account-control:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.account-control .account-dot{position:absolute;right:2px;top:2px;width:7px;height:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 2px var(--night)}
@media(max-width:560px){
 /* The steps fill the room between the logo and the buttons, centred, as big as fits (owner, 2026-10-21):
    about 25px circles on a 390px phone, 18px at 320px. */
 header.top .topr{flex:1;min-width:0;gap:6px}
 header.top .steps{flex:1;min-width:0;justify-content:center;gap:0}
 header.top .steps span{flex:none;padding:2px;gap:0}
 header.top .steps span b{width:clamp(18px,calc(9.4vw - 12px),30px);height:clamp(18px,calc(9.4vw - 12px),30px);font-size:clamp(10px,3.3vw,14px)}
 header.top .steps i{flex:1 1 2px;min-width:2px;max-width:14px}
 header.top .snd{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){.account-control{transition:none}}
/* The welcome screen has no progress navigation; don't reserve its invisible width. */
body.welcome header.top .steps{display:none}

/* A second welcome action only appears for accounts with a saved reading. */
.hx-cta #journey-new{width:100%;min-height:60px;padding:16px 26px;box-sizing:border-box;font-size:14px;letter-spacing:.13em;text-decoration:none}

.hx-cta #journey-new[hidden]{display:none}

.resume-note{font-size:14px;line-height:1.6;color:var(--muted);text-align:center;max-width:38ch;align-self:center}.resume-note[hidden]{display:none}