/* Explicit desktop header grids prevent legacy rules from auto-placing controls. */
@media (min-width: 1299.6px) {
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil)[class*="page-"] .page-shell > .topbar {
    grid-template-columns: minmax(320px, 1fr) max-content minmax(120px, 280px) max-content !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    /* Reserve real space for the brand and account before sizing search. */
    grid-template-columns: minmax(320px, 1fr) max-content minmax(120px, 280px) max-content !important;
    grid-template-areas: "brand nav search account" !important;
    grid-template-rows: 76px !important;
    column-gap: 16px !important;
    align-items: center !important;
    transition: grid-template-columns 220ms ease-out !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar .sidebar-logo { grid-area: brand !important; min-width: 0 !important; }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar .site-nav { grid-area: nav !important; width: max-content !important; display: flex !important; flex-wrap: nowrap !important; gap: 18px !important; white-space: nowrap; }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch {
    grid-area: search !important;
    width: 100% !important;
    min-width: 0 !important;
    transition: border-color 220ms ease-out, box-shadow 220ms ease-out !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__results {
    width: 100% !important;
    max-width: none !important;
    transition: width 220ms ease-out !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopUserButton { grid-area: account !important; justify-self: end; }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopUserMenu { position: absolute !important; }

  /* Keep the established focus-width transition; only improve scanability. */
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch {
    min-height: 48px !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__input {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__icon {
    width: 18px !important;
    height: 18px !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__results {
    padding: 7px !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__result {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    min-height: 56px !important;
    padding: 7px 8px !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__cover {
    width: 42px !important;
    height: 42px !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__copy {
    gap: 4px !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__copy strong {
    color: #241c17 !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__copy span {
    font-size: 0.81rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar #desktopHeaderSearch .desktop-header-search__match {
    padding: 3px 6px !important;
    font-size: 0.66rem !important;
    font-weight: 750 !important;
  }
}
@media (min-width: 1366px) {
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar:has(#desktopHeaderSearch:focus-within) {
    grid-template-columns: minmax(320px, 1fr) max-content minmax(120px, min(360px, 30vw)) max-content !important;
  }
}

@media (min-width: 1400px) {
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar {
    grid-template-columns: minmax(340px, 1fr) max-content minmax(120px, 280px) max-content !important;
  }
  html body:is(.page-forside, .page-ranglister, .page-udforsk, .page-profil) .page-shell > .topbar:has(#desktopHeaderSearch:focus-within) {
    grid-template-columns: minmax(340px, 1fr) max-content minmax(120px, min(360px, 30vw)) max-content !important;
  }
}