/* ============================================================
   header.css  —  Sticky header bar + theme toggle panel + GitHub btn
   ============================================================ */

/* ── Header bar ──────────────────────────────────────────── */
.header {
  position: sticky; top: 0;
  height: var(--header-h);
  /* Solid bg — no backdrop-filter (would create stacking context that traps the theme panel) */
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 1.375rem; gap: 0.75rem;
  z-index: 100;
  transition: background var(--dur2) var(--ease), border-color var(--dur2) var(--ease);
}

/* ── Hamburger ───────────────────────────────────────────── */
.sidebar-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 4.5px;
  background: none; border: none;
  padding: 6px 4px; flex-shrink: 0;
}
.sidebar-toggle span {
  display: block; width: 19px; height: 2px;
  background: var(--fg); border-radius: 1px;
  transition: all var(--dur) var(--ease);
}
.sidebar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sidebar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sidebar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Breadcrumb ──────────────────────────────────────────── */
.header-breadcrumb {
  flex: 1; display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.83rem; min-width: 0; overflow: hidden;
}
.bc-parent  { color: var(--fg2); white-space: nowrap; flex-shrink: 0; }
.bc-sep     { color: var(--fg3); flex-shrink: 0; }
.bc-current {
  color: var(--fg); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Right side ──────────────────────────────────────────── */
.header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* Icon button base */
.header-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--fg2);
  transition: all var(--dur) var(--ease);
}
.header-icon-btn svg { width: 17px; height: 17px; }
.header-icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--fg); }
.header-icon-btn[aria-expanded="true"] { background: var(--surface); border-color: var(--accent); color: var(--accent); }

/* Sun visible in dark, moon in light */
.icon-sun  { display: none; }
.icon-moon { display: none; }
[data-scheme="dark"]  .icon-sun  { display: block; }
[data-scheme="light"] .icon-moon { display: block; }

/* ── Theme toggle panel  (position:fixed — escapes all stacking contexts) ── */
.theme-wrap { position: relative; }

.theme-panel {
  position: fixed;
  /* JS will update top/right via inline style on open */
  width: 210px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding: 0.875rem;
  z-index: 9999;          /* above everything */
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease),
              transform var(--dur) var(--ease), background var(--dur2) var(--ease),
              border-color var(--dur2) var(--ease);
}
.theme-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.tp-section { margin-bottom: 0.875rem; }
.tp-section:last-child { margin-bottom: 0; }
.tp-label {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--fg2); margin-bottom: 0.5rem;
}

/* Scheme buttons */
.tp-scheme-btns { display: flex; gap: 0.375rem; }
.tp-scheme-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.425rem 0.25rem;
  background: var(--surface); border: 1px solid transparent;
  border-radius: var(--r); font-size: 0.77rem; font-weight: 500;
  color: var(--fg2);
  transition: all var(--dur) var(--ease);
}
.tp-scheme-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.tp-scheme-btn:hover { color: var(--fg); border-color: var(--border); }
.tp-scheme-btn.is-active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent); color: var(--accent);
}

/* Color swatches */
.tp-swatches { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.tp-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.tp-swatch:hover { transform: scale(1.18); }
.tp-swatch.is-active {
  border-color: var(--fg);
  box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--c);
}

/* ── GitHub button (Material-style) ─────────────────────── */
.gh-btn {
  display: inline-flex; align-items: stretch;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  color: var(--fg2);
  font-size: 0.78rem; font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease);
  background: var(--surface);
}
.gh-btn:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.gh-btn:hover .gh-btn__icon { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.gh-btn__icon {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.5rem;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-right: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.gh-btn__icon svg { width: 15px; height: 15px; fill: currentColor; }

.gh-btn__label {
  display: flex; align-items: center;
  padding: 0 0.625rem;
}

.gh-btn__stars {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0 0.55rem;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease);
}
.gh-btn__stars svg { flex-shrink: 0; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar-toggle { display: flex; }
  .header { padding: 0 1rem; }
}
@media (max-width: 500px) {
  .gh-btn__label { display: none; }
  .gh-btn__icon  { border-right: none; }
  .gh-btn__stars { border-left: 1px solid var(--border); }
}