/* Shared public-site header/navigation component.
   Loaded after page theme CSS so Home, How It Works, Pricing, FAQ,
   Imprint, and Privacy use one identical navigation system. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(10, 9, 8, 0.74);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.header-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding-inline: 28px;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-inner::before {
  content: none;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f4f1ec;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-header .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, #f3bd78, #c8843a);
  color: #2a1c0c;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 12px -4px rgba(232, 168, 94, 0.6);
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 4px;
  position: static;
  height: auto;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .nav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: #b9b2a8;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.site-header .nav a:hover {
  color: #f4f1ec;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-header .nav a.active {
  color: #f3bd78;
  background: rgba(232, 168, 94, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.auth-cta {
  display: none;
}

.has-auth-hint .auth-cta {
  display: inline-flex;
}

/* Guest CTAs — the exact mirror of .auth-cta, driven by the same
   pre-paint auth-hint bootstrap so there is zero flicker: logged-out
   visitors see "Sign in" + "Start free" in the header, signed-in
   users see "Continue Building" instead. */
.guest-cta {
  display: none;
}

html:not(.has-auth-hint) .guest-cta {
  display: inline-flex;
}

/* Quiet text-pill sign-in for returning users (same interaction
   language as the nav links). */
.site-header .hdr-signin {
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  color: #b9b2a8;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.2s ease;
}

.site-header .hdr-signin:hover {
  color: #f4f1ec;
  background: rgba(255, 255, 255, 0.06);
}

.site-header .hdr-signin:focus-visible {
  outline: 2px solid rgba(243, 189, 120, 0.75);
  outline-offset: 2px;
}

.site-header .btn--sm {
  height: auto;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

.site-header .icon-btn,
.site-header .util-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #b9b2a8;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}

.site-header .icon-btn:hover,
.site-header .util-btn:hover {
  color: #f4f1ec;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.072);
}

/* tactile press feedback (the burger toggles have no hover on touch) */
.site-header .icon-btn:active,
.site-header .util-btn:active { transform: scale(0.92); }

.site-header .icon-btn:focus-visible,
.site-header .util-btn:focus-visible {
  outline: 2px solid rgba(243, 189, 120, 0.75);
  outline-offset: 2px;
}

.site-header .util-btn[aria-expanded="true"] {
  color: #e8a85e;
  border-color: rgba(232, 168, 94, 0.4);
  background: rgba(232, 168, 94, 0.10);
}

.site-header .icon-btn svg,
.site-header .util-btn svg {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------
   Language toggle — first-class header control (both auth states,
   all widths). Replaces the old language rows that were buried in
   the profile dropdown. Raw values so it renders identically on the
   bewerbheld.css (home) and glass.css (all other) theme systems.
   ------------------------------------------------------------------ */
.lang-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
}

.lang-seg .lang-opt {
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #b9b2a8;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, background 0.2s ease;
}

.lang-seg .lang-opt:hover { color: #f4f1ec; }

.lang-seg .lang-opt.is-on {
  background: linear-gradient(180deg, #f3bd78, #c8843a);
  color: #2a1c0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.lang-seg .lang-opt:focus-visible {
  outline: 2px solid rgba(243, 189, 120, 0.75);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Account menu (signed-in only) — the avatar toggle + dropdown.
   The whole .util-menu carries .auth-cta so guests never see it.
   Purely account management (identity, Settings, Billing, Log out);
   primary navigation lives on the "Dashboard →" button beside it, so
   there is no duplicated destination.
   ------------------------------------------------------------------ */
.site-header #utilToggle {
  border-color: transparent;
  background: transparent;
  padding: 0;
}

.site-header #utilToggle:hover { background: transparent; border-color: transparent; }

.util-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3bd78, #c8843a);
  color: #2a1c0c;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px -3px rgba(232, 168, 94, 0.7);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.site-header #utilToggle:hover .util-avatar { filter: brightness(1.06); }

.site-header #utilToggle[aria-expanded="true"] .util-avatar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px rgba(232, 168, 94, 0.32);
}

/* dropdown panel — self-contained raw values (identical on both themes) */
.site-header .util-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 244px;
  padding: 7px;
  border-radius: 16px;
  background:
    radial-gradient(150% 105% at 22% -40%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 48%),
    linear-gradient(168deg, rgba(30, 27, 23, 0.97), rgba(20, 18, 16, 0.98));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px -22px rgba(0, 0, 0, 0.7),
    0 6px 20px -12px rgba(0, 0, 0, 0.6);
  z-index: 250;
}

.site-header .util-panel[hidden] { display: none; }

.acct-id { padding: 9px 11px 11px; }

.acct-email {
  font-size: 0.86rem;
  font-weight: 600;
  color: #f4f1ec;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-plan {
  margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: #f0bb7c;
  font-weight: 600;
}

.site-header .util-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 5px 6px;
}

.site-header .util-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  border-radius: 11px;
  color: #d8d2c8;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-header .util-item svg { flex: none; color: #8a8278; transition: color 0.15s ease; }
.site-header .util-item:hover { background: rgba(255, 255, 255, 0.06); color: #f4f1ec; }
.site-header .util-item:hover svg { color: #b9b2a8; }
.site-header .util-item:focus-visible { outline: 2px solid rgba(232, 168, 94, 0.7); outline-offset: -2px; }

.site-header .util-item--danger { color: #f0a89f; }
.site-header .util-item--danger svg { color: #d78b81; }
.site-header .util-item--danger:hover { background: rgba(232, 137, 126, 0.1); color: #f4b2a9; }
.site-header .util-item--danger:hover svg { color: #f0a89f; }

.site-header .hamburger {
  display: none;
}

@media (max-width: 820px) {
  .header-inner {
    grid-template-columns: auto 1fr;
  }

  .site-header .nav {
    display: none;
  }

  .site-header .hamburger {
    display: grid;
  }

  .site-header .header-actions .icon-btn.profile,
  .site-header .hide-mobile {
    display: none !important;
  }

  /* The language toggle stays first-class in the mobile header —
     only the marketing nav + CTA buttons collapse into the drawer. */
  .lang-seg { padding: 2px; }
  .lang-seg .lang-opt { min-width: 30px; height: 26px; padding: 0 7px; font-size: 0.74rem; }
}

@media (max-width: 480px) {
  .header-inner {
    padding-inline: 20px;
  }

  .site-header .brand {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .header-inner { padding-inline: 14px; }
  .site-header .header-actions { gap: 6px; }
  .lang-seg .lang-opt { min-width: 28px; padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav a,
  .site-header .hdr-signin,
  .site-header .icon-btn,
  .site-header .util-btn {
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   MOBILE MENU — .m-menu (canonical, all public pages)
   Full-screen glass sheet: brand top bar, numbered glass-panel
   nav, account card, footer-anchored CTA + legal meta, amber
   light wells, staggered entrance.
   Markup contract (JS binds these ids — never rename):
   #mMenu #menuOpen #menuClose #mobileAccountSection #mobileEmail
   #mobileRemaining #mobileContinueBtn #mobileLogout #mobileLoginBtn
   ============================================================ */

.m-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* The sheet stays in the flow and is shown/hidden via visibility + opacity
     (not display:none) so the CLOSE animates in reverse just like the open —
     display can't be transitioned, which is why the close used to hard-cut. */
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
  /* Near-opaque bg means heavy blur is invisible anyway — 14px keeps the
     glass hint at half the GPU cost of the old 28px on a full-viewport,
     mobile-only sheet (§12 blur budget). */
  background: rgba(8, 7, 6, 0.975);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  overscroll-behavior: contain;
  overflow-y: auto;
  /* closed state — pointer-events off so the invisible sheet never blocks the
     page; visibility is delayed to the end of the fade so it stays paintable
     while closing (reduced-motion baseline: a plain opacity fade, no movement). */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

@supports not (backdrop-filter: blur(1px)) {
  .m-menu { background: rgba(8, 7, 6, 0.99); }
}

/* ambient amber light wells — same language as the chapter sections */
.m-menu::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(480px 380px at 88% -6%, rgba(232, 168, 94, 0.13), transparent 70%),
    radial-gradient(420px 340px at -14% 106%, rgba(232, 168, 94, 0.06), transparent 70%);
}

/* open state — same properties, so removing .open transitions the sheet
   back out (a real close animation) instead of snapping to display:none. */
.m-menu.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s;
}

/* --- top row: brand · language · close ------------------------ */
.m-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.m-menu-top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.m-menu-lang { display: flex; gap: 4px; }

.m-menu-lang .util-pill {
  flex: 0 0 auto;
  min-width: 42px;
  height: 30px;
  padding: 0;
  font-size: 0.78rem;
}

/* one amber active-pill treatment on both theme systems */
.m-menu-lang .util-pill.is-on {
  background: linear-gradient(180deg, #f3bd78, #c8843a);
  color: #2a1c0c;
  border-color: rgba(255, 255, 255, 0.3);
}

.m-menu .icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #b9b2a8;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}

.m-menu .icon-btn:hover {
  color: #f4f1ec;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.072);
}

.m-menu .icon-btn:active { transform: scale(0.92); }

.m-menu .icon-btn:focus-visible {
  outline: 2px solid rgba(243, 189, 120, 0.75);
  outline-offset: 2px;
}

.m-menu .icon-btn svg { width: 18px; height: 18px; }

/* --- section label: mono eyebrow + fading rule ----------------- */
.m-menu-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c756c;
}

.m-menu-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), transparent);
}

/* --- primary nav: one glass panel, numbered rows --------------- */
.m-menu-nav {
  counter-reset: mnav;
  padding: 6px;
  border-radius: 22px;
  background: linear-gradient(157deg, rgba(255, 255, 255, 0.066) 0%, rgba(255, 255, 255, 0.022) 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 26px 64px rgba(0, 0, 0, 0.46),
    0 4px 14px rgba(0, 0, 0, 0.3);
}

.m-menu-nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 17px;
  color: #f4f1ec;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.m-menu-nav a + a { border-top: 1px solid rgba(255, 255, 255, 0.055); }

.m-menu-nav a::before {
  counter-increment: mnav;
  content: counter(mnav, decimal-leading-zero);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border: 1px solid rgba(232, 168, 94, 0.32);
  border-radius: 8px;
  background: rgba(232, 168, 94, 0.08);
  color: #f0bb7c;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.m-menu-nav .arrow {
  margin-left: auto;
  color: #b9b2a8;
  opacity: 0.35;
  font-size: 0.9em;
  transition: opacity 0.15s ease;
}

.m-menu-nav a:hover { background: rgba(255, 255, 255, 0.06); }
.m-menu-nav a:active { background: rgba(255, 255, 255, 0.08); }
.m-menu-nav a:hover .arrow { opacity: 0.7; }

.m-menu-nav a.active {
  background: rgba(232, 168, 94, 0.12);
  color: #f3bd78;
  box-shadow: inset 0 0 0 1px rgba(232, 168, 94, 0.30);
}

.m-menu-nav a.active::before {
  background: linear-gradient(180deg, #f3bd78, #c8843a);
  border-color: transparent;
  color: #2a1c0c;
  font-weight: 700;
}

.m-menu-nav a.active .arrow { opacity: 1; color: #f3bd78; }

.m-menu-nav a:focus-visible {
  outline: 2px solid rgba(232, 168, 94, 0.7);
  outline-offset: -2px;
}

/* --- account card (visible when signed in) --------------------- */
.m-menu-account-card {
  padding: 6px;
  border-radius: 22px;
  background: linear-gradient(157deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.38);
}

.m-menu-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 5px;
}

.m-menu-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(232, 168, 94, 0.10);
  border: 1px solid rgba(232, 168, 94, 0.28);
  color: #e8a85e;
}

.m-menu-avatar svg { width: 17px; height: 17px; }

.m-menu-user-id { min-width: 0; }

.m-menu-user-email {
  font-size: 0.86rem;
  color: #b9b2a8;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-menu-user-credits {
  font-size: 0.76rem;
  color: #f3bd78;
  font-weight: 600;
  margin-top: 2px;
}

.m-menu-account-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 15px;
  color: #f4f1ec;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.m-menu-account-link .arrow {
  margin-left: auto;
  opacity: 0.35;
  font-size: 0.9em;
  transition: opacity 0.15s ease;
}

.m-menu-account-link:hover { background: rgba(255, 255, 255, 0.06); }
.m-menu-account-link:hover .arrow { opacity: 0.7; }

.m-menu-account-link:focus-visible {
  outline: 2px solid rgba(232, 168, 94, 0.7);
  outline-offset: -2px;
}

.m-menu-account-link--primary {
  background: rgba(232, 168, 94, 0.10);
  color: #f3bd78;
  box-shadow: inset 0 0 0 1px rgba(232, 168, 94, 0.22);
  margin-bottom: 3px;
}

.m-menu-account-link--primary:hover { background: rgba(232, 168, 94, 0.16); color: #f3bd78; }
.m-menu-account-link--primary .arrow { opacity: 0.7; }

.m-menu-account-sep { height: 1px; background: rgba(255, 255, 255, 0.07); margin: 5px 10px; }

.m-menu-logout-btn {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #f0a89f;
  background: none;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  transition: background 0.15s ease;
}

.m-menu-logout-btn:hover { background: rgba(232, 137, 126, 0.10); }

.m-menu-logout-btn:focus-visible {
  outline: 2px solid rgba(232, 137, 126, 0.6);
  outline-offset: -2px;
}

/* --- footer: anchored CTA + legal meta -------------------------- */
.m-menu-foot {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 26px;
}

.m-menu-signin .btn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 0.98rem;
}

.m-menu-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  min-height: 44px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c756c;
}

.m-menu-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.m-menu-meta a:hover { color: #b9b2a8; }
.m-menu-meta a:focus-visible { outline: 2px solid rgba(232, 168, 94, 0.7); outline-offset: 2px; border-radius: 6px; }
.m-menu-meta-dot { opacity: 0.5; }

/* --- auth-state gating (CSS-driven from html.has-auth-hint, no flicker) --- */
.m-menu-account { display: none; }
.has-auth-hint .m-menu-account { display: block; }
.has-auth-hint .m-menu-signin { display: none; }

/* avatar shows the user's initial (text) — same amber chip, text-friendly */
.m-menu-avatar {
  font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e8a85e;
  text-transform: uppercase;
}

/* --- drawer language row (footer): labeled, first-class, uncramped --- */
.m-menu-langrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 4px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.m-menu-langlabel {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c756c;
}

.m-menu-langrow .m-menu-lang { gap: 6px; }
.m-menu-langrow .util-pill { min-width: 52px; height: 34px; }

/* --- entrance + exit motion (transform/opacity only) -----------
   Both directions are driven by the .m-menu / .m-menu.open transition
   pair, so the close is as smooth as the open (never a hard cut). The
   sheet gently rises + fades in on open and recedes + fades out on
   close — the close is a touch quicker (crisp ease-in) than the open
   (expo-out settle), the exits-feel-snappier convention. Content rows
   stagger in on open only; on close they recede with the sheet as one. */
@media (prefers-reduced-motion: no-preference) {
  .m-menu {
    transform: translateY(14px);
    transition:
      opacity 0.24s ease,
      transform 0.26s cubic-bezier(0.4, 0, 0.7, 1),
      visibility 0s linear 0.26s;
  }
  .m-menu.open {
    transform: none;
    transition:
      opacity 0.32s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  .m-menu.open .m-menu-nav a,
  .m-menu.open .m-menu-account,
  .m-menu.open .m-menu-foot {
    animation: mMenuRise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .m-menu.open .m-menu-nav a:nth-child(1) { animation-delay: 0.06s; }
  .m-menu.open .m-menu-nav a:nth-child(2) { animation-delay: 0.10s; }
  .m-menu.open .m-menu-nav a:nth-child(3) { animation-delay: 0.14s; }
  .m-menu.open .m-menu-nav a:nth-child(n+4) { animation-delay: 0.18s; }
  .m-menu.open .m-menu-account { animation-delay: 0.18s; }
  .m-menu.open .m-menu-foot { animation-delay: 0.22s; }
}

@keyframes mMenuRise {
  from { opacity: 0; transform: translateY(12px); }
}

/* ================================================================
   CANONICAL PUBLIC FOOTER — one component on every public page
   Ported from the homepage's integrated flat footer (the reference
   design) and refined with a bottom meta bar. Self-contained raw
   values so it renders identically on both theme systems
   (bewerbheld.css pages and glass.css pages). Markup contract:
   footer.site-footer > .sf-inner (.sf-brand + 3x .sf-col) + .sf-meta
   Keep the markup byte-identical across pages.
   ================================================================ */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 8px;
}

.site-footer .sf-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 56px 28px 58px;
  display: flex;
  justify-content: space-between;
  gap: 40px 32px;
  flex-wrap: wrap;
}

.site-footer .sf-brand { max-width: 272px; }

.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f4f1ec;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-footer .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, #f3bd78, #c8843a);
  color: #2a1c0c;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 12px -4px rgba(232, 168, 94, 0.6);
}

.site-footer .sf-tag {
  margin: 15px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #b9b2a8;
}

.site-footer .sf-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8a8278;
}

.site-footer .sf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ec57a;
  box-shadow: 0 0 8px rgba(94, 197, 122, 0.8);
}

/* Footer column titles are <h2 class="sf-h"> since the a11y pass (2026-07-07,
   §12ai) — they used to be <h5>, which skipped heading levels from the page
   h2s straight to h5 on every public page. Visual style is unchanged. */
.site-footer .sf-col h2.sf-h {
  margin: 0 0 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8a8278;
}

.site-footer .sf-col a {
  display: block;
  padding: 5px 0;
  font-size: 0.92rem;
  color: #b9b2a8;
  text-decoration: none;
  transition: color 0.18s ease;
}

.site-footer .sf-col a:hover { color: #f3bd78; }

.site-footer .sf-col a:focus-visible,
.site-footer .brand:focus-visible,
.site-footer .sf-meta a:focus-visible {
  outline: 2px solid rgba(232, 168, 94, 0.7);
  outline-offset: 2px;
  border-radius: 6px;
}

.site-footer .sf-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer .sf-meta-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 18px 28px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d675e;
}

@media (max-width: 640px) {
  .site-footer .sf-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
    padding: 46px 24px 48px;
  }
  .site-footer .sf-brand { grid-column: 1 / -1; max-width: none; }
  .site-footer .sf-col a { padding: 9px 0; }
  .site-footer .sf-meta-inner { padding: 16px 24px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   INPUT-MODALITY FOCUS SYSTEM — product-wide interaction contract.
   Focus rings are for keyboard users. iOS Safari matches :focus-visible
   on PROGRAMMATIC focus (drawer/modal focus traps + focus-restore), so
   tap-driven flows previously stranded rings (UA blue where uncustomized,
   amber where customized). public-header.js stamps
   <html data-input="pointer|kbd"> from the LAST input type; while it is
   "pointer", non-form focus outlines are suppressed. Form fields
   (input/textarea/select) ALWAYS keep their focus styles — they signal
   active text entry. Tab/arrow keys restore every ring instantly.
   Every ring in the product is outline-based (audited 2026-07-06), so
   suppressing outline alone is complete. Keep in sync with the copy in
   dashboard-shell.css. ═══════════════════════════════════════════════ */
html[data-input="pointer"] :focus:not(input):not(textarea):not(select) {
  outline: none !important;
}

/* Touch polish: kill the iOS gray tap-flash (components provide their own
   pressed states) and the double-tap-zoom delay on interactive elements. */
a, button, [role="button"], label, select, summary, [tabindex] {
  -webkit-tap-highlight-color: transparent;
}
a, button, input, select, textarea, label, summary {
  touch-action: manipulation;
}