/* =================================================================
   Top header — warm carbon theme.
   Layout preserved (logo + all-version tabs + search + theme toggle);
   only colors and chrome are themed.
   ================================================================= */

.rvt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* left | center | right (versions in middle) */
  align-items: center;
  padding: 0 20px;
  gap: 18px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.rvt-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
}
.rvt-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Sit at the start of the right column so the search button hugs the
     version tabs, then push the theme toggle to the far edge with
     margin-left:auto. The right column itself is 1fr so this still occupies
     the right-of-center half of the header. */
  justify-self: stretch;
  width: 100%;
}
.rvt-topbar-right .rvt-theme-toggle {
  margin-left: auto;
}

/* === Logo === */
.rvt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--text-0);
  text-decoration: none;
  flex-shrink: 0;
}
.rvt-logo:hover { color: var(--accent); }
.rvt-logo-mark {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--accent) 0%, #d68a30 100%);
  border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--bg-0);
  box-shadow: 0 0 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.rvt-logo-tld  { color: var(--text-3); font-weight: 400; }
.rvt-logo-docs { color: var(--accent); }
.rvt-logo-text { white-space: nowrap; }

/* === Version tabs === */
/* Each version tab is its own pill — no shared container background.
 * Status (same/changed/missing) shows as a colored bottom-border on the
 * tab itself; no inline dot, since the colored underline already conveys
 * status without eating horizontal space. */
.rvt-version-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
}
.rvt-version-tab {
  position: relative;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}
.rvt-version-tab:hover {
  color: var(--text-0);
  background: var(--bg-3);
}
.rvt-version-tab.is-current {
  color: var(--accent);
  background: var(--bg-0);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

/* Cross-version status — small inline dot (the primary indicator) + a
 * very light colored underline as a secondary cue. The underline is
 * thin (1px) and low-opacity so it doesn't dominate the tab visually.
 * Green = same as current. Yellow = signature changed. Red = missing.
 *
 * IMPORTANT: this feature is critical to RVT-Docs UX (users navigate
 * between Revit years via these tabs). Don't remove these rules without
 * an explicit replacement — the user has called it out as breaking
 * multiple times already. */
/* Status dot rendered as a CSS pseudo-element — purely class-driven so
 * it tracks the tab's status across AJAX year-switches without DOM
 * manipulation. The previous server-rendered <span> went stale because
 * the header isn't re-rendered on AJAX nav, leaving the wrong dot on
 * the just-selected version. */
.rvt-version-tab--same::before,
.rvt-version-tab--changed::before,
.rvt-version-tab--missing::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  margin-left: 1px;
  margin-top: -1px;
  flex-shrink: 0;
}
.rvt-version-tab--same::before    { background: #5fb87a; }
.rvt-version-tab--changed::before { background: #ffc14a; }
.rvt-version-tab--missing::before { background: #c54a64; }

.rvt-version-tab--same    { box-shadow: inset 0 -1px 0 rgba(95, 184, 122, 0.4); }
.rvt-version-tab--changed { box-shadow: inset 0 -1px 0 rgba(255, 193, 74, 0.5); }
.rvt-version-tab--missing { box-shadow: inset 0 -1px 0 rgba(197, 74, 100, 0.4); opacity: 0.75; }
/* is-current overrides status: no dot, no tinted underline. The
 * accent ring + filled background mark "this is the year you're on". */
.rvt-version-tab.is-current::before { content: none; }
.rvt-version-tab.is-current {
  box-shadow: 0 0 0 1px var(--accent-glow);
}

/* === Collapse / expand toggle ===================================
 * Small chevron button that sits as the first child of #version-buttons.
 * Clicking it animates the non-active tabs to width 0 + fade so only the
 * arrow + active version remain visible. State is persisted to
 * localStorage and re-applied via an inline script in the template
 * (no FOUC). */
.rvt-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.rvt-collapse-toggle:hover {
  color: var(--accent);
  background: var(--bg-3);
  border-color: var(--border-strong);
}
.rvt-collapse-chevron {
  transition: transform 220ms ease;
}
.rvt-version-tabs.is-collapsed .rvt-collapse-chevron {
  transform: rotate(180deg);
}

/* Animatable tab transitions. The original `transition: all 0.15s` on
 * .rvt-version-tab covers most of these for free, but locking down the
 * properties + 180ms duration here makes the collapse motion smooth and
 * predictable. */
.rvt-version-tab {
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    max-width 0.18s ease,
    padding 0.18s ease,
    margin 0.18s ease,
    opacity 0.15s ease,
    visibility 0s;
}

/* Collapsed strip: gap shrinks so the surviving tab snaps next to the
 * arrow, and every other tab shrinks to width 0 with no padding and fades
 * out. visibility: hidden (applied after the shrink completes) takes the
 * tab out of the keyboard tab order; pointer-events: none guards against
 * ghost clicks while the transition is mid-flight.
 *
 * Which tab survives depends on the page:
 *   - has an active version  -> keep .is-current
 *   - no active version      -> keep .is-latest (the newest year)
 * On pages with no current version (home /, /dev/<u>/, /snippets/, ...)
 * NO tab is .is-current, so collapsing falls back to the latest year and
 * the strip is never left empty. */
.rvt-version-tabs {
  transition: gap 0.18s ease;
}
.rvt-version-tabs.is-collapsed {
  gap: 0;
}
.rvt-version-tabs.is-collapsed .rvt-collapse-toggle {
  margin-right: 6px;
}
.rvt-version-tabs.is-collapsed:has(.is-current) .rvt-version-tab:not(.is-current),
.rvt-version-tabs.is-collapsed:not(:has(.is-current)) .rvt-version-tab:not(.is-latest) {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    max-width 0.18s ease,
    padding 0.18s ease,
    margin 0.18s ease,
    opacity 0.15s ease,
    visibility 0s linear 0.18s;
}

/* === Search container (app_search_v2 search.js mounts a button/dialog here) === */
.rvt-topbar-search { display: flex; align-items: center; }
.rvt-topbar-search button,
.rvt-topbar-search [role="button"] {
  height: 32px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rvt-topbar-search button:hover,
.rvt-topbar-search [role="button"]:hover {
  color: var(--text-0);
  border-color: var(--border-strong);
  background: var(--bg-3);
}

/* === Theme toggle === */
.rvt-theme-toggle {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.rvt-theme-toggle:hover {
  color: var(--accent);
  background: var(--bg-2);
  border-color: var(--border);
}
.rvt-theme-toggle .hidden { display: none; }

/* === Responsive layout ============================================
 *
 * - `>=1100px` — full desktop: 4-digit years, full right cluster.
 * - `720-1099px` — tablet: 2-digit years; Code Lib + bug button move
 *                  into the burger so the center has enough horizontal
 *                  room for 8 version pills.
 * - `<=720px` — mobile: single version-picker button + burger; only
 *               logo mark, picker, search, notifications, Sign in (anon)
 *               and burger stay visible.
 *
 * The 1fr auto 1fr grid is replaced by `auto 1fr auto` at tablet+ so the
 * center track expands instead of being squeezed by the right cluster's
 * min-content. Otherwise the version tabs wrap to vertical stacks. */

/* Mobile-only / desktop-only visibility helpers. */
.rvt-mobile-only  { display: none !important; }

/* Year-text default: full year shown above the abbrev breakpoint, short
 * year hidden. The @media block below flips both at 1099px. */
.rvt-yr-full  { display: inline; }
.rvt-yr-short { display: none; }

@media (max-width: 1099px) {
  /* === Tablet: switch grid to auto 1fr auto so the center stretches.
   * Version tabs become 2-digit and Code Lib + bug button hide (they
   * live inside the burger from this width down). */
  .rvt-topbar {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .rvt-yr-full  { display: none; }
  .rvt-yr-short { display: inline; }
  .rvt-version-tab { padding: 4px 8px; }
  .rvt-version-tabs { justify-content: center; }
  /* Hide bulky right-cluster items at tablet; they live in the burger. */
  .rvt-header-codelib,
  .rvt-bug-btn { display: none !important; }
  /* Burger appears at tablet (handles the now-hidden items). */
  .rvt-burger-host { display: inline-flex !important; }
}

@media (max-width: 720px) {
  /* === Mobile: tabs strip out, single picker in. ================== */
  .rvt-topbar {
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    padding: 0 12px;
  }
  .rvt-version-tabs { display: none !important; }
  .rvt-collapse-toggle { display: none !important; }
  .rvt-desktop-only { display: none !important; }
  .rvt-mobile-only  { display: inline-flex !important; }
  .rvt-topbar-right { gap: 4px; }
  /* Auth slot: hide Sign-up (primary) and the avatar dropdown on mobile.
   * Sign in stays visible as a CTA. Avatar items live in the burger. */
  .rvt-auth-slot .rvt-auth-btn--primary { display: none; }
  .rvt-auth-slot .rvt-avatar-wrap       { display: none; }
  .rvt-topbar-right .rvt-theme-toggle { margin-left: 0; }
}

/* === Mobile version picker ====================================== */
.rvt-version-picker { position: relative; }
.rvt-version-picker-btn {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.rvt-version-picker-btn:hover { background: var(--bg-3); }
.rvt-version-picker-btn svg { opacity: 0.7; }
.rvt-version-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  min-width: 180px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 60;
}
.rvt-version-picker-menu[hidden] { display: none; }
/* Picker-menu tabs reuse .rvt-version-tab markup so the JS click handler
   already in the inline script in modern_header.html applies to them. */

/* === Mobile burger ============================================== */
.rvt-burger-btn {
  width: 34px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rvt-burger-btn:hover {
  color: var(--accent);
  background: var(--bg-2);
  border-color: var(--border-strong);
}
.rvt-burger-btn[aria-expanded="true"] {
  color: var(--accent);
  background: var(--bg-2);
  border-color: var(--accent);
}

.rvt-burger-panel {
  position: absolute;
  top: 100%;
  right: 12px;
  margin-top: 6px;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  z-index: 60;
}
.rvt-burger-panel[hidden] { display: none; }
.rvt-burger-panel a,
.rvt-burger-panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.rvt-burger-panel a:hover,
.rvt-burger-panel button:hover {
  background: var(--bg-2);
  color: var(--text-0);
}
.rvt-burger-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.rvt-burger-section-label {
  padding: 8px 12px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}