/* ==========================================================================
   Grillsons — the account control in the header (inc/account-ui.php)
   Signed out: "Sign in / Join" pill (phones: "Sign in").
   Signed in: account icon + first name, opening a small menu.
   Loaded after design-system.css and mobile.css.
   ========================================================================== */

.gs-hacct { position: relative; display: inline-flex; flex: none; }

.gs-hacct--out,
.gs-hacct__btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding-block: 0; padding-inline: 5px 15px;
  border: 1px solid var(--hairline-3); border-radius: var(--r-pill);
  background: none; color: var(--text);
  font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .28s var(--ease-spring);
}
.gs-hacct--out:hover,
.gs-hacct__btn:hover,
.gs-hacct__btn[aria-expanded="true"] {
  border-color: rgba(212, 162, 78, .6); background: rgba(212, 162, 78, .08); color: var(--text-bright);
}
.gs-hacct--out:hover,
.gs-hacct__btn:hover { transform: translateY(-2px); }

.gs-hacct__ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(212, 162, 78, .14); color: var(--gold);
}
/* Signed in: the icon fills gold, the way the cart pill does. */
.gs-hacct--in .gs-hacct__ico { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--surface-ink); }

.gs-hacct__short { display: none; }
.gs-hacct__name { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.gs-hacct__chev { flex: none; margin-inline-start: -3px; color: var(--text-dim); transition: transform .2s ease; }
.gs-hacct__btn[aria-expanded="true"] .gs-hacct__chev { transform: rotate(180deg); }

/* ---- the menu ---- */
.gs-hacct__menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 90;
  width: 260px; max-width: calc(100vw - 24px); padding: 8px;
  background: var(--surface); border: 1px solid rgba(212, 162, 78, .24); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: gs-hacct-in .18s var(--ease-out);
}
.gs-hacct__menu[hidden] { display: none; }
@keyframes gs-hacct-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.gs-hacct__who { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline-2); }
.gs-hacct__k {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
}
.gs-hacct__v {
  display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-bright);
}
.gs-hacct__list { list-style: none; margin: 0; padding: 0; }
.gs-hacct__list a {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px;
  border-radius: 9px; color: var(--text-2); font-size: 14.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.gs-hacct__list a svg { flex: none; color: var(--gold); }
.gs-hacct__list a:hover,
.gs-hacct__list a:focus-visible { background: rgba(237, 230, 216, .06); color: var(--text-bright); }
.gs-hacct__pts { margin-inline-start: auto; font-family: var(--font-mono); font-size: 12px; color: var(--gold); }
.gs-hacct__sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hairline-2); }
.gs-hacct__sep a svg { color: var(--text-dim); }
.gs-hacct__sep a:hover { color: #F0A090; }
[dir="rtl"] .gs-hacct__mi--signout { transform: scaleX(-1); }
.gs-rtl .gs-hacct__k { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }

/* The menu sheet's account tile, while signed out: a touch brighter. */
.gs-drawer__util a.gs-drawer__signin { color: var(--text); border-color: rgba(212, 162, 78, .4); }

/* ---- phones: the header holds logo · language · account ---- */
@media (max-width: 860px) {
  .gs-hacct--out,
  .gs-hacct__btn { height: 44px; padding-inline: 5px 13px; gap: 7px; font-size: 13.5px; }
  .gs-hacct__ico { width: 32px; height: 32px; }
  .gs-hacct__long { display: none; }
  .gs-hacct__short { display: inline; }
  .gs-hacct__name { max-width: 8ch; }
}
@media (max-width: 380px) {
  .gs-hacct__name { max-width: 6ch; }
  .gs-hacct__chev { display: none; }
}
/* The narrowest phones: icon only, as before (the label is still read out). */
@media (max-width: 349px) {
  .gs-hacct--out { padding: 0 5px; }
  .gs-hacct--out .gs-hacct__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-hacct__menu { animation: none; }
  .gs-hacct--out:hover, .gs-hacct__btn:hover { transform: none; }
}