/* ==========================================================================
   Operation Serval — account.css
   The navbar account widget: sign-in pill, circular avatar, and the dropdown
   that hangs off it. Also the sign-in modal's own bits (the shared modal frame
   and form controls come from site.css).

   The dropdown is deliberately click-only (never hover): it is a menu, it has
   a destructive item in it, and it must be keyboard-drivable. All motion is
   short and eased on the same curve the modals use, so it reads as part of the
   same interface.
   ========================================================================== */

/* --- Circular avatar (nav trigger, dropdown header, later the profile page) - */
.acct-av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #22210f;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  user-select: none;
}
.acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Monogram fallback — the seed stored on the account picks the tint, so a user
   always gets the same one. Kept in the site's olive / amber / steel range. */

/* Optical centring of the initial. Flex centres the *line box*, not the ink, and
   a capital only occupies baseline → cap-height inside it, so the letter lands
   high. Bebas Neue (--f-display) measures: cap-height .70em, and ascent minus
   descent = .60em on both metric paths a browser might pick (hhea .90/.30,
   usWin .95/.35). With line-height 1 that puts the ink centre at .45em in a
   .5em box — .05em too high, the same on every platform.
   padding-top of twice that pushes it down by exactly .05em (border-box, so the
   disc keeps its size). Recompute the constant if --f-display ever changes:
   offset = (ascent - descent - capHeight) / 2.
   text-indent likewise cancels the trailing gap letter-spacing leaves after the
   last glyph, which otherwise drags a centred initial half a step left. */
.acct-av-mono {
  padding-top: .1em;
  text-indent: .03em;
}
.acct-av-c0 { background: linear-gradient(150deg, #4a5228, #2b2f16); color: #d3daa8; }
.acct-av-c1 { background: linear-gradient(150deg, #6b4c12, #33260c); color: #f3cf85; }
.acct-av-c2 { background: linear-gradient(150deg, #3a4a4a, #1d2626); color: #b6cbcb; }
.acct-av-c3 { background: linear-gradient(150deg, #5a3a26, #2c1d13); color: #e2b295; }
.acct-av-c4 { background: linear-gradient(150deg, #3f3f52, #1f1f2a); color: #bfbfd8; }
.acct-av-c5 { background: linear-gradient(150deg, #4d5040, #262820); color: #cdd0bc; }

/* Anonymous state — the same disc, holding a glyph instead of a face, so the
   navbar keeps its shape and rhythm before and after signing in. */
.acct-av-anon {
  background: rgba(232, 227, 214, .07);
  color: var(--muted);
  transition: background-color .2s ease, color .2s ease;
}
.acct-trigger:hover .acct-av-anon,
.acct-trigger:focus-visible .acct-av-anon,
.acct.is-open .acct-av-anon {
  background: rgba(232, 163, 23, .15);
  color: var(--amber);
}

/* --- Trigger -------------------------------------------------------------- */
.acct { position: relative; flex-shrink: 0; }

.acct-trigger {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(232, 227, 214, .18);
  transition: box-shadow .2s ease;
}
.acct-trigger:hover { box-shadow: 0 0 0 2px rgba(232, 163, 23, .55); }
.acct-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--amber), 0 0 0 5px rgba(232, 163, 23, .16);
}
.acct.is-open .acct-trigger {
  box-shadow: 0 0 0 2px var(--amber), 0 0 16px -2px rgba(232, 163, 23, .5);
}

/* --- Dropdown panel ------------------------------------------------------ */
.acct-pop {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  z-index: 70;
  width: min(274px, calc(100vw - 28px));
  background: var(--panel);
  border: 1px solid rgba(232, 163, 23, .28);
  border-radius: 3px;
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9), 0 8px 22px -14px rgba(0, 0, 0, .7);
  /* Grows out of the avatar it hangs from. */
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transition: opacity .18s ease, transform .22s cubic-bezier(.16, .84, .24, 1);
}
.acct-pop.is-open { opacity: 1; transform: none; }

/* Caret, centred under the 36px trigger. Sits on top of the panel border so
   the seam disappears and the panel reads as attached to the avatar. */
.acct-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 13px;
  width: 10px;
  height: 10px;
  background: #2a2311;
  border-left: 1px solid rgba(232, 163, 23, .28);
  border-top: 1px solid rgba(232, 163, 23, .28);
  transform: rotate(45deg);
}

/* Header: identity block over the site's diagonal hatching motif. */
.acct-pop-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 13px;
  background: linear-gradient(180deg, rgba(232, 163, 23, .09), rgba(232, 163, 23, .02));
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.acct-pop-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, .17) 0 3px, transparent 3px 9px);
  opacity: .55;
  pointer-events: none;
}
.acct-pop-id { position: relative; min-width: 0; }
.acct-pop-name {
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-pop-sub {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .01em;
  color: var(--muted-2);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sign-in method chips */
.acct-pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 13px;
  background: linear-gradient(180deg, rgba(232, 163, 23, .02), transparent);
}
.acct-pop-chips:empty { display: none; }
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--f-stencil);
  font-size: 9.5px;
  letter-spacing: .12em;
  padding: 3px 7px;
}
.acct-chip i { font-size: 12px; color: var(--amber-deep); }

.acct-sep { height: 1px; background: var(--line-soft); }

/* --- Menu items ---------------------------------------------------------- */
.acct-list { padding: 6px; }

.acct-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--ink-soft);
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* Growing amber tick on the leading edge — the site's kicker motif, small. */
.acct-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .18s cubic-bezier(.16, .84, .24, 1);
}
.acct-item:hover,
.acct-item:focus-visible {
  background: rgba(232, 163, 23, .08);
  color: var(--ink);
  outline: none;
}
.acct-item:hover::before,
.acct-item:focus-visible::before { transform: scaleY(1); }

.acct-item-ic { font-size: 16.5px; color: var(--muted); transition: color .15s ease; }
.acct-item:hover .acct-item-ic,
.acct-item:focus-visible .acct-item-ic { color: var(--amber); }
.acct-item-lb { flex: 1; min-width: 0; }
.acct-item-go {
  font-size: 14px;
  color: var(--muted-3);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .18s ease, transform .18s ease, color .15s ease;
}
.acct-item:hover .acct-item-go,
.acct-item:focus-visible .acct-item-go {
  opacity: 1;
  transform: none;
  color: var(--amber-deep);
}

/* Not-yet-built destination: visible, legible, obviously inert. */
.acct-item.is-soon { color: var(--muted-2); cursor: default; }
.acct-item.is-soon:hover { background: none; color: var(--muted-2); }
.acct-item.is-soon:hover::before { transform: scaleY(0); }
.acct-item.is-soon:hover .acct-item-ic { color: var(--muted); }
.acct-soon {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--muted-4);
  border: 1px solid var(--muted-3);
  padding: 2px 5px;
}

/* The FR / EN pill. The active code is marked by .acct-lang-thumb, one amber
   block that slides across instead of a background appearing on the other half
   — the movement is what tells you the switch landed, since the row's own label
   is one of the things about to be re-translated.
   The geometry has to be exact for the slide to land: no gap, both codes
   flex: 1 1 0 (so each is precisely half the content box regardless of glyph
   width), and the thumb one half wide, offset by exactly its own width. */
.acct-lang {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2px;
}
.acct-lang-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 1px;
  background: var(--amber);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), background-color .15s ease;
}
.acct-lang[data-on="en"] .acct-lang-thumb { transform: translateX(100%); }
/* The pill answers to the row, not to itself: the whole row is the target. */
.acct-langrow:hover .acct-lang-thumb,
.acct-langrow:focus-visible .acct-lang-thumb { background: var(--amber-bright); }

.acct-lang-opt {
  position: relative;          /* over the thumb */
  z-index: 1;
  flex: 1 1 0;
  padding: 3px 7px;
  border-radius: 1px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  transition: color .2s ease;
}
/* The inactive code brightens with the row; the active one is on the thumb and
   stays inverted, hence the :not() rather than a bare descendant selector. */
.acct-langrow:hover .acct-lang-opt:not(.is-on),
.acct-langrow:focus-visible .acct-lang-opt:not(.is-on) { color: var(--ink); }
/* Sits on the amber thumb, so it inverts — and keeps doing so while the thumb
   is still travelling, which is why the colour transition matches its duration. */
.acct-lang-opt.is-on {
  color: #14140d;
  font-weight: 700;
  transition: color .34s ease;
}

@media (prefers-reduced-motion: reduce) {
  .acct-lang-thumb { transition: background-color .15s ease; }
}

/* Sign in — the primary row while anonymous, so it carries the accent. */
.acct-item-in { color: var(--ink); }
.acct-item-in .acct-item-ic { color: var(--amber-deep); }
.acct-item-in .acct-item-go { opacity: 1; transform: none; color: var(--muted-3); }

/* Discord — the row that leaves the site, so it lights up in the brand's
   blurple rather than the site amber. Lifted from #5865F2, which is a button
   colour: as text on a panel this dark it sits too close to the background. */
.acct-item-discord::before { background: #5865F2; }
.acct-item-discord:hover,
.acct-item-discord:focus-visible { background: rgba(88, 101, 242, .14); color: #a7aefb; }
.acct-item-discord:hover .acct-item-ic,
.acct-item-discord:focus-visible .acct-item-ic,
.acct-item-discord:hover .acct-item-go,
.acct-item-discord:focus-visible .acct-item-go { color: #a7aefb; }

/* Sign out */
.acct-foot { padding: 6px; }
.acct-item-out { color: var(--muted); }
.acct-item-out::before { background: var(--danger); }
.acct-item-out:hover,
.acct-item-out:focus-visible { background: rgba(192, 57, 43, .12); color: #e0796d; }
.acct-item-out:hover .acct-item-ic,
.acct-item-out:focus-visible .acct-item-ic { color: #e0796d; }

/* Item reveal. An animation rather than a transition-delay, so the stagger
   never leaks into the hover transitions, and closing doesn't re-stagger. */
@keyframes acct-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
.acct-pop.is-open .acct-item {
  animation: acct-item-in .26s cubic-bezier(.16, .84, .24, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}

/* --- Busy state (an avatar upload in flight) ----------------------------- */
.acct-busy { position: relative; color: transparent !important; pointer-events: none; }
.acct-busy > * { visibility: hidden; }
.acct-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(232, 163, 23, .3);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: acct-spin .7s linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Sign-in modal
   ========================================================================== */
.auth-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.auth-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 24px;
  text-wrap: pretty;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--ink);
  font-family: var(--f-brand);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.auth-btn:hover,
.auth-btn:focus-visible {
  border-color: var(--amber);
  background: rgba(232, 163, 23, .07);
  outline: none;
}
.auth-btn i { font-size: 19px; color: var(--amber); }
.auth-g { display: grid; place-items: center; width: 18px; height: 18px; }
.auth-google-form { margin: 0; }

/* Amber-forward variant, for the one button that is the whole point of the pane
   it sits in — currently the "open this on the domain" link the modal shows when
   the site is reached by IP. */
.auth-btn-alt {
  border-color: rgba(232, 163, 23, .45);
  background: rgba(232, 163, 23, .06);
}
/* Also used by the avatar picker's format/size line. */
.auth-hint {
  margin: 10px 2px 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted-2);
  text-align: center;
  text-wrap: pretty;
}

.auth-note,
.auth-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted-2);
  margin-top: 20px;
}
.auth-note i, .auth-privacy i { font-size: 13px; flex-shrink: 0; margin-top: 2px; }

/* ==========================================================================
   Sign-in result toast
   ========================================================================== */
.auth-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 17px;
  background: var(--panel);
  border: 1px solid rgba(232, 163, 23, .35);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .85);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .26s ease, transform .3s cubic-bezier(.16, .84, .24, 1);
}
.auth-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.auth-toast i { font-size: 18px; color: var(--amber); flex-shrink: 0; }
.auth-toast.is-err { border-color: rgba(192, 57, 43, .45); }
.auth-toast.is-err i { color: #e0796d; }

/* --- Responsive ---------------------------------------------------------- */
/* The trigger is a fixed 36px disc at every width — there is no label to drop,
   which is the point of putting the account behind a picture. Only the panel
   needs to give way on narrow screens. */
@media (max-width: 420px) {
  .acct-pop { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .acct-pop { transition-duration: .01ms; transform: none; }
  .acct-pop.is-open .acct-item { animation: none; }
  .acct-item::before { transition: none; }
  .acct-busy::after { animation-duration: 2s; }
  .auth-toast { transition-duration: .01ms; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Sign-in modal — panes
   The five panes (sign in / create / code / forgot / reset) all ship in the
   markup and account.js flips `hidden` between them. Nothing here may depend
   on which pane is showing: the panel is one box and only its contents change.
   ========================================================================== */
.auth-pane { display: block; }
.auth-form { margin: 0 0 4px; }

/* Sign in and sign up carry no description line, so the title lands straight on
   the first field. Give back the air .auth-desc used to hold. */
.auth-title + .auth-form { margin-top: 10px; }

/* The fields are the newsletter form's (.nl-*, site.css) so the modal and the
   account page look like the same site. Only the rhythm is set here. */
.auth-form .nl-field { margin-bottom: 14px; }
.auth-form .auth-btn { margin-top: 18px; }

/* Left-aligned variant of the hint under a field — .auth-hint itself is
   centred, because the picker uses it under a centred control. */
.auth-hint-l { text-align: left; margin: 7px 2px 0; }

/* A code is read off a phone and typed in one glance: give it room and the
   mono face, so a 0 can never be an O. */
.auth-code {
  font-family: var(--f-mono);
  font-size: 19px;
  letter-spacing: .38em;
  text-indent: .19em;                 /* re-centres: tracking pads the right */
}

/* "or" across a hairline. The rule is drawn by the two flex children so it
   never needs a fixed width. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--line);
}

/* Every in-modal navigation is a <button>, not an <a>: these switch panes, they
   do not go anywhere, and a link that lands nowhere is a lie to a screen
   reader. Styled as text so they read as the secondary things they are. */
.auth-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 163, 23, .35);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.auth-link:hover,
.auth-link:focus-visible { border-bottom-color: var(--amber); outline: none; }

/* The "forgot password?" line sits directly under the sign-in button. */
.auth-form + .auth-link { display: inline-block; margin-top: 14px; }

/* Footer of a pane: the way out of it. A <div>, not a <p> — two of them hold a
   resend <form>, which is not allowed inside a paragraph and would be silently
   re-parented by the browser, taking the layout with it. */
.auth-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted-2);
}
.auth-resend { margin: 0; }

/* Confirmation counterpart of .nl-err, for "a new code has been sent". */
.auth-ok {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(232, 163, 23, .3);
  background: rgba(232, 163, 23, .07);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.auth-ok i { font-size: 14px; flex-shrink: 0; margin-top: 1px; color: var(--amber); }