/* ─────────────────────────────────────────────────────────────
 * TwitterScore — header skin.
 *
 * Re-skins the original .header-wrapper / search_header.html /
 * sign_in_block.html elements to match the Claude Design topbar
 * look (white/dark surface, brand-blue focus rings, dark pill
 * Sign Up, transparent Log In, square icon-style theme toggle).
 *
 * Pure CSS overrides — no markup, no JS changes. Load order in
 * head.html: search.css → header-skin.css so we win specificity
 * ties without !important most of the time.
 * ────────────────────────────────────────────────────────────── */


/* ── Header bar surface ─────────────────────────────────────── */
.header-wrapper {
  background: var(--ts-bg, #fff);
  border-bottom: 1px solid var(--ts-border, #DDDCE5);
  transition: background 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Use the FULL viewport width for the inner content (no 1136px cap)
   so the logo hugs the left edge and the right cluster hugs the
   right edge — matching the new design's edge-to-edge topbar. */
.header-wrapper .content-wrapper {
  max-width: none !important;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* Layout inside the header: logo on the LEFT, everything else
   (search + auth + theme) clustered on the RIGHT.
   The template renders .content > .menu-wrapper(logo) + (search?) + buttons-wrapper.
   Originally .content used justify-content: space-between which scattered
   the children across the bar. Switch to flex-start and push the first
   non-logo sibling with margin-left: auto so it (and everything after it)
   anchors to the right edge. */
.header-wrapper .content {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
/* Push the right cluster against the right edge by stretching the
   logo's margin-right to auto — that absorbs all leftover space and
   shoves everything after it (search, buttons-wrapper, plus any
   <style>/<script> the Django includes inject) to the right.
   Bonus: this works whether search is present (internal pages) or
   absent (home), since the trick doesn't rely on which sibling is
   first after the logo. */
.header-wrapper .content > .menu-wrapper {
  margin-right: auto !important;
}
/* search.css ships .search-wrapper with margin: 0 auto (centers it).
   Zero both margins so the search sits flush in the right cluster. */
.header-wrapper .content .search-wrapper.search-header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* On focus, the legacy rules in search.css do two annoying things:
   1. .header-wrapper:has(.search-header .autocomplete-input:focus)
      .content-wrapper { margin-left/right: ... } shifts the
      content-wrapper, which makes the logo "jump" toward the center.
   2. .header-wrapper.search-focused-mode .search-wrapper.search-header
      { width: 100% !important; max-width: 680px } expands search
      across the full bar, anchored to its right edge — so the input
      visibly slides leftward as it grows.

   Counter both: keep the content-wrapper unchanged, and lift the
   search out of flex with position:absolute, anchored at its
   pre-focus left position (captured by search_header.html's focus
   handler into --ts-search-left). Right edge extends to viewport
   padding — search grows rightward only, left stays put.

   search.css loads AFTER header-skin.css via search_header.html's
   {% block style %}, so we need extra specificity (body prefix or
   matching :has()) to win the cascade tie. */
body .header-wrapper:has(.search-header .autocomplete-input:focus) .content-wrapper,
body .header-wrapper.search-focused-mode .content-wrapper {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body .header-wrapper.search-focused-mode,
body .header-wrapper:has(.search-header .autocomplete-input:focus),
body .header-wrapper:focus-within {
  overflow: visible;
}

/* Anchor search at its pre-focus left, grow rightward to viewport edge.
   .header-wrapper has position:fixed (sidebar-layout.css), so absolute
   children position relative to it — its own left:0 means
   --ts-search-left (a viewport-x value) maps 1:1 onto our left.
   Safety nets:
   - max-width: 680px caps how wide it can grow even if --ts-search-left
     is missing/0 (don't span the entire bar).
   - min-width: 300px keeps it from collapsing below natural width. */
body .header-wrapper.search-focused-mode .search-wrapper.search-header,
body .header-wrapper:has(.search-header .autocomplete-input:focus) .search-wrapper.search-header {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--ts-search-left, 731px);
  right: 24px;
  width: auto !important;
  min-width: 300px;
  max-width: 680px !important;
  margin: 0 !important;
  flex: none !important;
}


/* ── Logo color per theme (override legacy home-page exception) ──
   theme_scripts.html assumes a blue header bg on home and toggles
   .hide on .logo-color / .logo-white accordingly. Since header-skin
   now paints the header white/dark on every page (including home),
   the logo needs to follow the theme, not the page. Override the
   .hide class via specificity. */
body:not(.dark) .header-wrapper .logo-color { display: block !important; }
body:not(.dark) .header-wrapper .logo-white { display: none !important; }
body.dark .header-wrapper .logo-color { display: none !important; }
body.dark .header-wrapper .logo-white { display: block !important; }
body.dark .header-wrapper {
  background: #1F1F22;
  border-bottom-color: rgba(255, 255, 255, .06);
}
/* Force header to stay white/dark even on home (body is blue there).
   Override the sidebar-layout.css home-page override so the topbar
   doesn't paint blue. */
body.home-page .header-wrapper,
body.home-page:not(.mobile) .site-wrapper > .header-wrapper {
  background: var(--ts-bg, #fff);
  border-bottom: 1px solid var(--ts-border, #DDDCE5);
}
body.home-page.dark .header-wrapper,
body.home-page.dark:not(.mobile) .site-wrapper > .header-wrapper {
  background: #1F1F22;
  border-bottom-color: rgba(255, 255, 255, .06);
}


/* ── Search pill — design-token surface + focus ring ───────── */
.search-wrapper.search-header .container {
  background-color: var(--ts-bg-elev, #F2F3F6);
  border-radius: 12px;
  border: 1px solid transparent;
  height: 40px;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.search-wrapper.search-header:focus-within .container {
  background-color: #fff;
  border-color: var(--ts-brand, #0544FD);
  box-shadow: 0 0 0 4px rgba(5, 68, 253, .14);
}
body.dark .search-wrapper.search-header .container {
  background-color: rgba(255, 255, 255, .05);
}
body.dark .search-wrapper.search-header:focus-within .container {
  background-color: rgba(255, 255, 255, .08);
  border-color: var(--ts-brand-soft, #5188FF);
  box-shadow: 0 0 0 4px rgba(81, 136, 255, .18);
}


/* ── Right cluster — buttons + theme toggle ─────────────────── */
.header-wrapper .buttons-wrapper.d-flex-r {
  gap: 8px;
  align-items: center;
}

/* Auth pills — Log In transparent, Sign Up dark */
.header-wrapper #logIn_button.button,
.header-wrapper #singIn_button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 0;
  padding: 0 18px !important;     /* defeat buttons.css's !important */
  border-radius: 999px !important;
  font: 500 14px/1 var(--ts-font-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease;
}
.header-wrapper #logIn_button.button {
  background: transparent;
  color: var(--ts-fg-1, #101014);
}
.header-wrapper #logIn_button.button:hover {
  background: var(--ts-bg-elev, #F2F3F6);
  color: var(--ts-fg-1, #101014);
}
.header-wrapper #singIn_button.button {
  background: var(--ts-fg-1, #101014);
  color: #fff;
}
.header-wrapper #singIn_button.button:hover {
  background: var(--ts-brand, #0544FD);
  color: #fff;
}
/* Dark theme — swap pill colors */
body.dark .header-wrapper #logIn_button.button { color: #fff; }
body.dark .header-wrapper #logIn_button.button:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
body.dark .header-wrapper #singIn_button.button,
body.dark .header-wrapper #singIn_button.button span {
  background: #fff;
  color: var(--ts-fg-1, #101014);
}
body.dark .header-wrapper #singIn_button.button:hover,
body.dark .header-wrapper #singIn_button.button:hover span {
  background: var(--ts-brand, #0544FD);
  color: #fff;
}

/* Theme switcher — square 38×38 icon button, like .topbar-icon */
.header-wrapper .theme-switcher.button-light {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ts-fg-4, #656565);
  transition: background 200ms ease, color 200ms ease;
}
.header-wrapper .theme-switcher.button-light:hover {
  background: var(--ts-bg-elev, #F2F3F6);
  color: var(--ts-fg-1, #101014);
}
.header-wrapper .theme-switcher .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  color: currentColor;
}
body:not(.dark) .header-wrapper .theme-switcher.button-light .material-symbols-outlined {
  color: var(--ts-fg-1, #101014) !important;
}
body.dark .header-wrapper .theme-switcher.button-light {
  color: rgba(255, 255, 255, .65);
}
body.dark .header-wrapper .theme-switcher.button-light:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}


/* ── Authenticated state — avatar + Pro upgrade ────────────── */
.header-wrapper .user-link .main-profile-image img.rounded-circle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ts-border, #DDDCE5);
  transition: transform 200ms ease;
}
.header-wrapper .user-link:hover .main-profile-image img.rounded-circle {
  transform: scale(1.05);
}
body.dark .header-wrapper .user-link .main-profile-image img.rounded-circle {
  border-color: rgba(255, 255, 255, .10);
}

/* User dropdown menu surface */
.header-wrapper .user-menu.sub-menu {
  background: #fff;
  border: 1px solid var(--ts-border, #DDDCE5);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 16, 20, .12), 0 4px 8px rgba(16, 16, 20, .04);
  padding: 8px;
  min-width: 200px;
}
body.dark .header-wrapper .user-menu.sub-menu {
  background: #27272A;
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
}
.header-wrapper .user-menu-item a,
.header-wrapper .user-menu-item > div {
  padding: 10px 14px;
  border-radius: 8px;
  font: 500 14px/20px var(--ts-font-body);
  color: var(--ts-fg-1, #101014);
}
.header-wrapper .user-menu-item > .theme-switcher.button-light {
  width: 100%;
  height: auto;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}
.header-wrapper .user-menu-item > .theme-switcher.button-light .switcher-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.header-wrapper .user-menu-item a:hover,
.header-wrapper .user-menu-item > div:hover {
  background: var(--ts-bg-elev, #F2F3F6);
}
body.dark .header-wrapper .user-menu-item a,
body.dark .header-wrapper .user-menu-item > div { color: rgba(255, 255, 255, .85); }
body.dark .header-wrapper .user-menu-item a:hover,
body.dark .header-wrapper .user-menu-item > div:hover {
  background: rgba(255, 255, 255, .06);
}