/* Header / topbar — wordmark, tagline, topnav (search + toggle + links + status pill).
   Inlined into index.html via the @@HEADER@@ template substitution in server.py. */

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 4px 0;
}
.brand {
  min-width: 0;
}
.wordmark-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}
.brand-mark {
  flex-shrink: 0;
  width: clamp(56px, 9vw, 96px);
  height: auto;
  color: var(--text);
}
.brand-mark .accent { color: var(--text); opacity: 0.28; }
.brand-mark .bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: bar-pulse 1.8s ease-in-out infinite;
}
.brand-mark .b0  { animation-delay: 0.00s; }
.brand-mark .b1  { animation-delay: 0.06s; }
.brand-mark .b2  { animation-delay: 0.12s; }
.brand-mark .b3  { animation-delay: 0.18s; }
.brand-mark .b4  { animation-delay: 0.24s; }
.brand-mark .b5  { animation-delay: 0.30s; }
.brand-mark .b6  { animation-delay: 0.36s; }
.brand-mark .b7  { animation-delay: 0.42s; }
.brand-mark .b8  { animation-delay: 0.48s; }
.brand-mark .b9  { animation-delay: 0.54s; }
.brand-mark .b10 { animation-delay: 0.60s; }
.brand-mark .b11 { animation-delay: 0.66s; }
.brand-mark .b12 { animation-delay: 0.72s; }
.brand-mark .b13 { animation-delay: 0.78s; }
.brand-mark .b14 { animation-delay: 0.84s; }
.brand-mark .b15 { animation-delay: 0.90s; }
.brand-mark .b16 { animation-delay: 0.96s; }
.brand-mark .b17 { animation-delay: 1.02s; }
.brand-mark .b18 { animation-delay: 1.08s; }
.brand-mark .b19 { animation-delay: 1.14s; }
@keyframes bar-pulse {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark .bar { animation: none; transform: scaleY(1); }
}

h1.wordmark {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--text);
  font-style: normal;
}
.wordmark-link { color: inherit; text-decoration: none; cursor: pointer; }
.wordmark-link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 6px;
  border-radius: 4px;
}
.tagline {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--text-dim);
  letter-spacing: -0.005em;
}

.topnav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 14px;
  flex-shrink: 0;
}
.topnav-links { display: flex; align-items: center; gap: 18px; }
.topnav-links a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
  letter-spacing: -0.005em;
}
.topnav-links a:hover { color: var(--text); }
.topnav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* header episode search — collapsed icon → expanded input + dropdown */
.header-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header-search-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  padding: 0;
}
.header-search-btn:hover { color: var(--text); border-color: var(--border); }
.header-search-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.header-search-input {
  width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: width 0.18s ease, padding 0.18s ease, margin 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.header-search-input::placeholder { color: var(--text-faint); }
.header-search-input::-webkit-search-cancel-button { display: none; }
.header-search.open .header-search-input {
  width: 220px;
  padding: 4px 12px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.header-search.open .header-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 90, 95, 0.15);
}
.header-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  max-width: 420px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
  display: none;
  z-index: 200;
}
.header-search.has-results .header-search-results { display: block; }
.header-search-row {
  padding: 10px 14px;
  cursor: pointer;
  display: block;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.header-search-row:last-child { border-bottom: 0; }
.header-search-row:hover,
.header-search-row.active { background: rgba(0, 0, 0, 0.04); }
.header-search-row .t { font-weight: 500; line-height: 1.25; }
.header-search-row .h {
  color: var(--text-faint);
  font-size: 11px;
  margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-search-empty {
  padding: 14px;
  color: var(--text-faint);
  font-family: var(--sans);
  font-size: 12px;
}

.topnav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.topnav-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.topnav-toggle-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background 0.15s, box-shadow 0.15s;
}
.topnav-toggle[aria-pressed="true"] {
  color: #fff;
  border-color: var(--text);
  background: var(--text);
}
.topnav-toggle[aria-pressed="true"] .topnav-toggle-dot {
  background: var(--accent, #ff5a5f);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* idle pill: hidden on landing, shown in session view */
.topnav-status {
  display: none;
  align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--text-dim);
  letter-spacing: -0.005em;
}
body.in-session .topnav-status { display: inline-flex; }
.topnav-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.topnav-status.on { color: var(--text); }
.topnav-status.on .dot {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  animation: pulse 1.6s ease-in-out infinite;
}