/* ══════════════════════════════════════════════════════════════════
   CODEX HEADER (redesign step 2)
   See design_handoff_codex_redesign/README.md §Component Vocabulary 1.

   Layout: slim 52px bar — logo + tabs + global search + utility cluster.
   Tokens come from src/styles/themes.css (dark by default, light via
   codex-light-theme.css). All control IDs and data-actions are
   preserved from the legacy compact-header so existing JS keeps working.
   ══════════════════════════════════════════════════════════════════ */

.codex-header {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 72px;
  padding: 8px 18px;
  margin: -10px -10px 16px;            /* bleed past the .container padding */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  position: relative;
  border-radius: 12px 12px 0 0;
  /* Override every visual property the legacy .compact-header sets so we
     don't inherit gradients, padding, or shadows from base.css/dark-mode.css. */
  background-image: none;
  box-shadow: none;
}

/* Two-row layout: logo spans full height on the left; everything else
   stacks into two rows on the right of the divider. */
.codex-header--two-row {
  align-items: stretch;
}

.codex-header-rows {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 6px;
}

.codex-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

/* ── Single-row header at ≥1100px ──────────────────────────────────
   The 2-row layout exists because at 1200px the content (primary
   tabs · search · data-source · secondary tabs · utilities) barely
   fits even split. Above 1100px there's plenty of horizontal slack;
   flatten both rows into one with display:contents on the inner
   wrappers so the children become direct flex items in document
   order: primary tabs → search → data-source → secondary tabs →
   utilities. The search keeps its existing flex:1 1 auto + cap so it
   grows to fill the slack on 2K+ screens.

   Below 1100px the original column layout kicks back in. */
@media (min-width: 1100px) {
  .codex-header-rows {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .codex-header-row {
    display: contents;
  }
  /* Bigger gap between groups when flattened (the row's own 8px gap
     no longer applies since the row is display:contents). */
  .codex-header-rows > .codex-header-row > * {
    margin-right: 8px;
  }
}

/* Light-theme variant inherits Codex light tokens (surface = white) */
:root[data-theme='light'] .codex-header,
.theme-light .codex-header {
  background: var(--surface);
  border-bottom-color: var(--border);
}

/* ── Logo ─────────────────────────────────────────────────────────── */

.codex-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 4px 0 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  align-self: stretch;
}

.codex-logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  /* Override the legacy .brand-mascot absolute positioning. */
  position: static;
  left: auto;
  top: auto;
  pointer-events: none;
}

.codex-logo-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  /* Override legacy h1 brand-name styles */
  text-align: left;
}

.codex-logo-text-dim {
  color: var(--text-dim);
  font-size: inherit;
  font-weight: inherit;
}

/* The legacy .brand-chonky uses the bubbly ChonkyBrand woff2 (see
   @font-face in base.css) — keep that here too, just sized to fit the
   Codex header strip. */
.codex-logo .brand-chonky {
  font-family: 'ChonkyBrand', sans-serif;
  font-size: 1.8em;
  letter-spacing: 0.5px;
  font-weight: 400;
}
.codex-logo .brand-dot {
  color: var(--text);
}

/* Vertical divider after the logo — spans the full header height */
.codex-header-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Section tabs ─────────────────────────────────────────────────── */

.codex-tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* In the 2-row layout, each row's tab block sits at the start of the
   row. The search and utilities take the rest of the space. */
.codex-tabs--top,
.codex-tabs--bottom {
  flex-shrink: 0;
}

/* The .codex-tab buttons keep their legacy .segment-btn class so the
   existing view code that toggles `.active` still wins. Reset every
   visual property the old .segmented-control + .segment-btn brought. */
.codex-tab.segment-btn,
.codex-tab {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  /* Wipe out the legacy gradient/shadow from .segment-btn */
  background-image: none;
  box-shadow: none;
}

.codex-tab:hover {
  background: var(--surface);
  color: var(--text);
}

.codex-tab.active,
.codex-tab.segment-btn.active {
  background: var(--surface2);
  color: var(--text);
  box-shadow: none;
}

/* ── Global search ────────────────────────────────────────────────── */

/* (codex-search shortcut button removed — it was a duplicate of the
   real #searchBox on the cards toolbar. ⌘K still calls
   window.focusGlobalSearch() from cardModal.js to focus #searchBox.) */

/* ── Compact switch state: collapse to active option only ────────── */
/* When the switch isn't [data-switch-expanded], every option that
   doesn't carry the .active class is hidden. Clicking the active
   option (the only one visible) flips data-switch-expanded via
   initCompactSwitches() in app.js. */
.codex-header .lang-switch:not([data-switch-expanded]) .lang-switch-option:not(.active),
.codex-header .currency-switch:not([data-switch-expanded]) .currency-switch-option:not(.active),
.codex-header .theme-switch:not([data-switch-expanded]) .theme-switch-option:not(.active),
.codex-header .dev-switch:not([data-switch-expanded]) .dev-switch-option:not(.active) {
  display: none;
}
/* The collapsed container shows just the active option — drop the
   pad so it reads as a single button rather than a chip with empty
   slots. */
.codex-header .lang-switch:not([data-switch-expanded]),
.codex-header .currency-switch:not([data-switch-expanded]),
.codex-header .theme-switch:not([data-switch-expanded]),
.codex-header .dev-switch:not([data-switch-expanded]) {
  padding: 2px;
}
/* Hover hint: the chip lifts subtly to advertise that it's clickable. */
.codex-header .lang-switch:not([data-switch-expanded]):hover,
.codex-header .currency-switch:not([data-switch-expanded]):hover,
.codex-header .theme-switch:not([data-switch-expanded]):hover,
.codex-header .dev-switch:not([data-switch-expanded]):hover {
  border-color: var(--accent);
}

/* ── Right utility cluster ────────────────────────────────────────── */

.codex-utilities {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Bottom utility cluster pushes itself to the right edge of row 2. */
.codex-utilities--bottom {
  margin-left: auto;
}

.codex-utilities--top {
  flex-shrink: 0;
}

.codex-utilities .header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Data-source pills (My collection + remote) ───────────────────── */
/* Codex aesthetic: flat surface chip with hairline border, subtle dot
   indicator. The pill keeps all its sub-controls — we just restyle the
   container chrome to match Codex. */
.codex-header .ds-local-pill,
.codex-header .ds-remote-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  /* Strip legacy gradients/shadows */
  background-image: none;
  box-shadow: none;
}

.codex-header .ds-local-pill:hover,
.codex-header .ds-remote-pill:hover {
  border-color: var(--border-hi);
}

.codex-header .ds-local-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

/* The status dot — green when synced, warm when pending, etc. The legacy
   .sync-status-dot keeps its own state-driven background; we just set the
   default + size here. */
.codex-header .sync-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 0 var(--pos);
  flex-shrink: 0;
}

.codex-header .ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.codex-header .ds-icon-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.codex-header .ds-icon-btn svg {
  display: block;
}

.codex-header .ds-add-btn {
  color: var(--accent);
}

.codex-header .ds-close-btn {
  color: var(--text-dim);
}

.codex-header .ds-readonly-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warm);
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--warm) 40%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--warm) 10%, transparent);
}

.codex-header .ds-empty-label {
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 500;
}
.codex-header .ds-empty-label:hover {
  color: var(--text);
}

/* Saved-remotes switcher (eye + count badge) — visible only when
   viewing local AND there's at least one saved remote. Clicking
   opens a small popover listing them so the user can swap modes
   without going through the collection manager. */
.codex-header .ds-remotes-switcher {
  position: relative;
  display: inline-flex;
}
.codex-header .ds-remotes-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.codex-header .ds-remotes-trigger:hover {
  border-color: var(--border-hi);
  color: var(--text);
}
.codex-header .ds-remotes-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
}
.codex-header .ds-remotes-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1000;
  min-width: 220px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.codex-header .ds-remotes-popover[hidden] {
  display: none;
}
.codex-header .ds-remotes-popover-header {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.codex-header .ds-remotes-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.codex-header .ds-remotes-popover-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.codex-header .ds-remotes-popover-item:hover {
  background: var(--surface2);
}
.codex-header .ds-remotes-popover-manage {
  margin-top: 4px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
  transition: color 0.1s ease;
}
.codex-header .ds-remotes-popover-manage:hover {
  color: var(--text);
}

/* Pill-swap mode: when a remote collection is active, the remote pill
   takes over the local pill's spot with a noticeably different tint
   to make the "you're viewing someone else's collection" state
   obvious at a glance. Sync.js hides the local pill while this one
   is shown, so the two never coexist. */
.codex-header .ds-remote-pill.ds-active {
  background: color-mix(in srgb, var(--warm) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--warm) 45%, var(--border));
}
.codex-header .ds-remote-eye {
  font-size: 13px;
  margin-right: 2px;
  opacity: 0.85;
}
/* "Back to my collection" button: more prominent than the bare ✕, with
   readable text so the exit path is obvious. Auto-collapses to icon
   only on narrow headers. */
.codex-header .ds-close-btn {
  width: auto;
  padding: 0 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  background: color-mix(in srgb, var(--warm) 18%, transparent);
}
.codex-header .ds-close-btn:hover {
  background: color-mix(in srgb, var(--warm) 32%, transparent);
}
@media (max-width: 900px) {
  .codex-header .ds-close-btn span[data-i18n] {
    display: none;
  }
}

.codex-header #dataSourceSelect {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 0 4px;
  height: 22px;
  cursor: pointer;
}

/* Codex sync indicator: dot-only at compact widths (the verbose status
   sits on the tooltip — title attr set by sync.js). At ≥ 1280px we let
   the label peek out beside the dot in a mono, dim style — Codex
   aesthetic, just enough to read at a glance without re-introducing the
   overflow problem we hit earlier. The .ds-sync-btn relaxes its fixed
   22×22 box so the label can grow it. */
.codex-header .header-sync-label {
  display: none;
}
.codex-header .sync-status-wrapper {
  width: 22px;
  flex: 0 0 22px;
}
@media (min-width: 1280px) {
  .codex-header .header-sync-label {
    display: inline;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    margin-left: 5px;
    text-transform: lowercase;
  }
  .codex-header .ds-sync-btn {
    width: auto;
    padding: 0 6px 0 4px;
    gap: 4px;
  }
  .codex-header .sync-status-wrapper {
    width: auto;
    flex: 0 0 auto;
  }
  /* When dirty / remote-newer / checking, lift the label color so it
     reads at a glance. The legacy classes are toggled in sync.js. */
  .codex-header #syncStatusLabel.dirty {
    color: var(--warm);
  }
  .codex-header #syncStatusLabel.remote-newer {
    color: var(--cool);
  }
  .codex-header #syncStatusLabel.checking {
    color: var(--text-dim);
  }
}

/* ── Currency segmented control ───────────────────────────────────── */
/* Codex says "currency segmented" — mono labels, surface bg, active = surface3.
   The slider element from the legacy switch becomes redundant in Codex's
   discrete-segment style; we hide it. */
.codex-header .currency-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 34px;
  margin: 0;
}

.codex-header .currency-switch-slider {
  display: none;
}

.codex-header .currency-switch-option {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.codex-header .currency-switch-option:hover {
  color: var(--text);
  background: var(--surface2);
}
.codex-header .currency-switch-option.active {
  background: var(--surface3);
  color: var(--text);
  opacity: 1;
}

/* ── Lang flag pills ──────────────────────────────────────────────── */
.codex-header .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 34px;
}

.codex-header .lang-switch-slider {
  display: none;
}

.codex-header .lang-switch-option {
  position: static;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.codex-header .lang-switch-option:hover {
  opacity: 0.95;
  background: var(--surface2);
}
.codex-header .lang-switch-option.active {
  opacity: 1;
  background: var(--surface3);
}
.codex-header .lang-switch-option .flag-icon {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: block;
}

/* ── Theme tri-state switch ───────────────────────────────────────── */
.codex-header .theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 34px;
  margin: 0;
}

.codex-header .theme-switch-slider {
  display: none;
}

.codex-header .theme-switch-option {
  position: static;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.codex-header .theme-switch-option:hover {
  color: var(--text);
  background: var(--surface2);
}
.codex-header .theme-switch-option.active {
  color: var(--accent);
  background: var(--surface3);
}
.codex-header .theme-switch-option svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ── Dev switch (hidden until unlocked) ───────────────────────────── */
.codex-header .dev-switch {
  display: none;          /* legacy default; revealed by JS toggling display */
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 34px;
  margin: 0;
}
.codex-header .dev-switch-slider {
  display: none;
}
.codex-header .dev-switch-option {
  position: static;
  width: auto;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.codex-header .dev-switch-option:hover {
  color: var(--text);
  background: var(--surface2);
}
.codex-header .dev-switch-option.active {
  background: var(--surface3);
  color: var(--warm);
}

/* ── Contact icon button ──────────────────────────────────────────── */
.codex-header .ds-contact-btn {
  width: 28px;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
}
.codex-header .ds-contact-btn:hover {
  background: var(--surface2);
  border-color: var(--border-hi);
  color: var(--text);
}

/* ── Suppress the legacy compact-header styling that bleeds in ────── */
/* The element keeps both classes (.codex-header.compact-header) so that
   any selector still depending on .compact-header keeps matching. The
   block below neutralises the visible properties from base.css /
   dark-mode.css that we don't want anymore. */
.codex-header.compact-header {
  margin-bottom: 16px;
  padding-top: 0;
  padding-bottom: 0;
  background-image: none;
}
body.dark-mode .codex-header.compact-header {
  background: var(--bg);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   Container chrome cleanup (Codex polish).
   The legacy .container provides a 1400px-wide rounded white panel
   with 30px padding + drop shadow. That eats the 590px the Codex
   header needs and walls the dark theme off from edge-to-edge slate.
   In dark mode we strip the chrome so the page reads as a flat data
   surface; light mode keeps its existing frame for now.
   ══════════════════════════════════════════════════════════════════ */
body.dark-mode .container,
:root[data-theme='light'] .container,
.theme-light .container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0 16px;
  max-width: none;
}

/* Re-anchor the Codex header now that the container has no padding. */
body.dark-mode .codex-header,
:root[data-theme='light'] .codex-header,
.theme-light .codex-header {
  margin: 0 -16px 16px;
  padding: 0 18px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}

/* Strip the body padding in both themes so the chrome reaches edges. */
body.dark-mode,
:root[data-theme='light'] body,
.theme-light body {
  padding: 0;
}
body.dark-mode .container,
:root[data-theme='light'] .container,
.theme-light .container {
  padding-top: 0;
  padding-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════════════
   Right-cluster sizing overrides — keep the contact button + data-
   source pill compact so the row stays balanced. The four utility
   switches (lang / currency / theme / dev) use the larger sizes from
   their main blocks above for legibility.
   ══════════════════════════════════════════════════════════════════ */

.codex-header .ds-contact-btn {
  width: 26px;
  height: 26px;
}
.codex-header .ds-contact-btn svg {
  width: 13px;
  height: 13px;
}
.codex-header .ds-local-pill,
.codex-header .ds-remote-pill {
  font-size: 11.5px;
  padding: 0 7px;
  height: 26px;
}