/* Shared page edges, controls and identity badges. Page themes keep their colours. */
:root {
  --site-content-width: 1440px;
  --site-gutter: clamp(16px, 2.5vw, 32px);
  --site-shell-width: min(calc(100% - var(--site-gutter) * 2), var(--site-content-width));
  --content-width: var(--site-content-width);
  --page-padding: var(--site-gutter);
  --header-control-size: 44px;
  --header-icon-size: 20px;
  --identity-badge-height: 26px;
}

body :is(.header-inner, .container, .container--wide, .home-container,
  .hero__container, .uel-container, .shop-shell, .friends-container,
  .messages-container, .ranking-shell, .calendar-premium-shell,
  .support-shell, .legal-shell, .donate-container) {
  box-sizing: border-box;
  width: var(--site-shell-width) !important;
  max-width: var(--site-content-width) !important;
  margin-inline: auto;
  padding-inline: 0 !important;
}
.container .container { width: 100% !important; }
body .support-page { padding-inline: 0; }
body.post-reader-page :is(.published-post, .post-engagement),
body :is(.article-shell, .post-editor-shell) {
  box-sizing: border-box;
  width: var(--site-shell-width) !important;
  max-width: var(--site-content-width) !important;
  margin-inline: auto;
}
body.post-reader-page :is(.reader-header, .published-post__summary, .published-post__body) {
  max-width: 900px; margin-inline: auto;
}

.site-header .header-inner { gap: 16px; }
.site-header .main-nav { gap: clamp(10px, 1.1vw, 18px); min-width: 0; }
.site-header .header-actions { gap: 8px; }
.site-header .pitch-language-desktop .pitch-language {
  box-sizing: border-box;
  height: var(--header-control-size);
  min-height: var(--header-control-size);
  border-radius: 12px;
}
.site-header :is(.header-search-trigger, .header-notification-trigger,
  .header-message-trigger, .header-menu-toggle) {
  box-sizing: border-box;
  width: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  height: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  flex: 0 0 var(--header-control-size) !important;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  background: #ffffff07;
  color: #d2dcd6;
  line-height: 1;
}
.site-header :is(.header-search-trigger, .header-notification-trigger, .header-message-trigger) { display: grid; }
.site-header .header-search-trigger :is(span, kbd) { display: none; }
.site-header :is(.header-search-trigger, .header-notification-trigger, .header-message-trigger) svg,
.admin-topbar__actions .pitch-events-trigger svg {
  width: var(--header-icon-size) !important;
  height: var(--header-icon-size) !important;
  flex: 0 0 var(--header-icon-size);
}
.admin-topbar__actions :is(.pitch-events-trigger, .admin-menu-toggle) {
  box-sizing: border-box;
  width: var(--header-control-size); height: var(--header-control-size);
  min-width: var(--header-control-size); min-height: var(--header-control-size);
  padding: 0; border-radius: 12px;
}
.site-header :is(.header-notification-badge, .header-message-badge) {
  box-sizing: border-box;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 4px;
  font: 800 10px/1 var(--font-sans, system-ui) !important;
}
.site-header .header-user-trigger {
  box-sizing: border-box;
  height: var(--header-control-size);
  min-height: var(--header-control-size);
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 12px;
}
.site-header .header-user-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.site-header .header-user-meta { gap: 3px; }
.site-header .header-user-name { max-width: 120px; font-size: 13px !important; line-height: 1.2 !important; }
.site-header .header-user-level { font-size: 10px !important; line-height: 1 !important; }
.site-header .header-user-level > span { overflow: hidden; text-overflow: ellipsis; font: inherit !important; }
.site-header .header-user-status { right: auto; left: 28px; bottom: 4px; }
.header-identity-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.site-header .header-role-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 5px; flex: 0 0 auto;
  border: 1px solid #00ff6633; border-radius: 5px;
  background: #00ff660a; color: #8dffb8;
  font: 750 9px/1 var(--font-sans, system-ui) !important;
  white-space: nowrap;
}
.header-wallet {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-sizing: border-box; height: var(--header-control-size); min-width: 78px;
  padding: 0 10px; flex: 0 0 auto; border: 1px solid #00ff6633;
  border-radius: 12px; background: linear-gradient(145deg, #00ff6612, #00ff6604);
  color: #00ff66; text-decoration: none; font: 750 13px/1 var(--font-sans, system-ui);
  font-variant-numeric: tabular-nums; transition: border-color .18s, background .18s;
}
.header-wallet:hover { border-color: #00ff6680; background: #00ff6615; }
.header-wallet__coin { display: block; width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.header-wallet__amount { min-width: 1ch; }
.header-wallet__compact { display: none; }
.header-wallet[aria-busy="true"] .header-wallet__amount { opacity: .5; }
.header-wallet.is-unavailable { color: #aebbb1; border-color: #ffffff18; }
.header-wallet:focus-visible { outline: 2px solid #00ff66; outline-offset: 3px; }

/* The level, staff, verification and premium marks share one baseline. */
body .profile-name-row { align-items: center; gap: 8px; flex-wrap: wrap; }
body .profile-name-row :is(.profile-verified-mark, .profile-role-label,
  .profile-level-chip, .shop-vip-badge) {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--identity-badge-height) !important;
  min-height: var(--identity-badge-height) !important;
  margin-block: 0 !important; padding: 0 8px;
  flex: 0 0 auto; gap: 5px; border-radius: 7px;
  font: 750 11px/1 var(--font-sans, system-ui) !important;
  letter-spacing: .02em; white-space: nowrap;
}
body .profile-name-row .profile-verified-mark { width: var(--identity-badge-height); padding: 0; }
body .profile-name-row :is(.profile-role-label, .profile-level-chip, .shop-vip-badge) :is(span, b) { font-size: inherit !important; line-height: 1 !important; }
body .profile-name-row :is(.profile-level-chip, .profile-verified-mark) svg { width: 14px; height: 14px; flex: 0 0 14px; }
:is(.team-role-pill, .mod-staff-role, .staff-role-badge) {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: var(--identity-badge-height);
  padding: 0 8px; font-size: 11px !important; line-height: 1 !important;
}
img.country-flag, .profile-country img.country-flag, .country-option img.country-flag {
  display: inline-block; width: 24px; height: 18px; flex: 0 0 24px;
  object-fit: contain; border-radius: 3px; vertical-align: middle;
}
.country-flag--empty { width: 24px; height: 18px; flex: 0 0 24px; border: 1px dashed #ffffff30; border-radius: 3px; }
.country-option[hidden] { display: none !important; }
.country-search { position: sticky; top: 0; padding: 8px; background: #0d141a; z-index: 1; }
.country-search input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #ffffff25; border-radius: 8px; background: #080e12; color: #e9f2ed; font: inherit; }
.country-options { max-height: 280px; overflow: auto; overscroll-behavior: contain; }
.country-options-empty { padding: 12px; color: #a5b6ac; }
.country-dropdown { max-height: 360px; overflow: auto; overscroll-behavior: contain; }

/* A closed surface must never leave a transparent click blocker. */
[data-user-dropdown][hidden], .pitch-search[hidden], .pitch-auth-modal[hidden],
.pitch-consent-modal[hidden] { display: none !important; }

@media (min-width: 1201px) and (max-width: 1480px) {
  .site-header .header-user-meta, .site-header .header-user-chevron { display: none; }
  .site-header .header-user-trigger { padding: 5px; }
  .site-header .header-inner { gap: 12px; }
}
@media (max-width: 1200px) {
  .site-header .header-inner { gap: 8px; }
  .site-header .header-actions { gap: 8px; }
  .site-header .header-user-meta, .site-header .header-user-chevron { display: none; }
  .site-header .header-user-trigger { width: var(--header-control-size); padding: 5px; }
  .site-header .header-search-trigger { margin-left: auto; }
  .site-header .main-nav { max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; }
  .site-header .header-user-dropdown { max-height: calc(100dvh - 100px); overflow-y: auto; }
}
@media (max-width: 600px) {
  :root { --header-control-size: 36px; --header-icon-size: 18px; }
  .site-header .header-inner, .site-header .header-actions { gap: 5px; }
  .site-header .site-logo { font-size: 25px; }
  .site-header .header-user-avatar { width: 26px; height: 26px; flex-basis: 26px; }
  .site-header .header-user-trigger { padding: 4px; }
  .site-header .header-user-status { width: 7px; height: 7px; left: 24px; bottom: 2px; }
  .header-wallet { min-width: 60px; padding: 0 7px; gap: 5px; font-size: 12px; }
  .header-wallet__coin { width: 18px; height: 18px; flex-basis: 18px; }
  .header-wallet__amount { display: none; }
  .header-wallet__compact { display: inline; }
}
@media (max-width: 400px) {
  :root { --header-control-size: 32px; --header-icon-size: 17px; }
  .site-header .header-inner, .site-header .header-actions { gap: 4px; }
  .site-header .site-logo { font-size: 22px; }
  .header-wallet { min-width: 54px; padding: 0 5px; gap: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .header-wallet { transition: none; } }