/* Account chrome for signed-in pages (guard.js fills it in), in the future
   theme. Load after theme.css. The gating rules keep a page's content hidden
   until the session is confirmed. */
[hidden] { display: none !important; }
body[data-requires-account]:not(.account-ready) main,
body[data-requires-account]:not(.account-ready) .account-bar { display: none; }
.account-ready .account-loading { display: none; }

.account-loading { width: min(440px, calc(100% - 32px)); margin: 12vh auto 0; padding: 28px; text-align: center; line-height: 1.7;
                   background: var(--paper, #f7f7e6); border: 1.5px solid var(--blue, #1f2bff); color: var(--fink, #142a6b); }
.account-loading p { margin: 0 0 8px; }
.account-loading a { display: inline-block; margin: 8px 10px 0; font: 500 12px/1 var(--futura); letter-spacing: .24em; text-transform: uppercase; }

/* Compact account cluster at the right of the header: one joined chip for
   gold, name and the account pages, with Log out set apart and quieter. */
.account-bar { display: flex; align-items: center; gap: 14px; margin-left: auto; font: 500 12px/1 var(--futura); color: var(--fink, #142a6b); }
.acct-group { display: inline-flex; align-items: stretch; height: 34px; background: var(--paper, #f7f7e6); border: 1.5px solid var(--blue, #1f2bff); }
.acct-group > * { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; }
.acct-group > * + * { border-left: 1px solid rgba(31, 43, 255, .3); }
.acct-who strong { font-weight: 600; }
.acct-who .gold { display: inline-flex; align-items: center; gap: 4px; color: var(--gold, #a77708); }
.acct-group a { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--blue, #1f2bff); }
.acct-group a:hover, .acct-group a:focus-visible { background: var(--blue, #1f2bff); color: var(--paper, #f7f7e6); outline: none; }
.logout { height: 34px; padding: 0 12px; font: 500 10.5px/1 var(--futura); letter-spacing: .22em; text-transform: uppercase;
          color: var(--fmute, #4f5f8f); background: rgba(247, 247, 230, .82); border: 1px solid rgba(20, 42, 107, .35); border-radius: 0; cursor: pointer; }
.logout:hover { color: var(--danger, #c43d27); border-color: currentColor; background: var(--paper, #f7f7e6); }
.logout:focus-visible { outline: 2px solid var(--blue, #1f2bff); outline-offset: 3px; }
.logout:disabled { opacity: .6; cursor: wait; }

.account-error { color: var(--danger, #c43d27); font: 14px/1.6 var(--futura); margin: 8px clamp(16px, 4vw, 32px) 0; }
.account-error:empty { display: none; }
.gold-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.1em; fill: currentColor; }

/* Phones: the cluster takes its own full-width row under the header, the
   chip stretching to the page edges with Log out at its end. */
@media (max-width: 620px) {
  .account-bar { width: 100%; margin-left: 0; gap: 8px; }
  .acct-group { flex: 1; min-width: 0; }
  .acct-group > * { padding: 0 8px; }
  .acct-group a { flex: 1 1 auto; justify-content: center; letter-spacing: .12em; }
  .logout { padding: 0 10px; letter-spacing: .12em; }
}