/*
 * surface_header.css — <surface-header> custom element styling.
 *
 * Phase 5 of the surface-architecture migration. Consolidates the top-bar
 * rules that previously lived split across:
 *   - canvas.css       (.cv-top, .cv-top-left, .cv-top-right,
 *                       .cv-bc-link, .cv-bc-sep, .cv-bc-current)
 *   - styles.css       (.top, .top-left, .top-right, .crumb*, .kbd, .who*
 *                       — historic concepts.html header chrome)
 *
 * Spec: surface_architecture.md §4.4 + §5 (CSS ownership) + §7 Phase 5
 *
 * BEM-style selectors: surface-header__<part>--<modifier>.
 * Mode driven by [data-mode="concepts" | "canvas"] on the host.
 */

/* ============================================================
   HOST — common shell
   ============================================================ */
surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  z-index: 10;
}

surface-header[hidden] { display: none; }

/* ============================================================
   MODE — Canvas. Top bar of the <surface-shell class="surface-shell--canvas">
   grid (Phase 6). Solid surface tint + bottom border. No backdrop blur.
   Wave 19A2 P4 — height normalized to var(--top-h, 60px) so Canvas + Concepts
   read the same physical height. Vertical padding swaps for explicit height
   so the inner items center to the same line whichever surface you're on.
   ============================================================ */
surface-header[data-mode="canvas"] {
  height: var(--top-h, 60px);
  padding: 0 18px;
  flex-shrink: 0;
  background: var(--surface, #FFFFFF);
  border-bottom: 1px solid var(--ink-ghost, #ECE3D8);
  box-sizing: border-box;
}

/* Grid placement of the header inside <surface-shell> (Phase 6 migration).
   The `surface-shell > [slot="header"]` rule in surface_shell.css owns the
   actual grid-column / grid-row pinning; this comment is retained so future
   readers know the placement logic moved with the .cv-shell → surface-shell
   rename. The previous `.cv-shell > surface-header { grid-column: 1 / -1;
   grid-row: 1 }` rule was deleted on the same change. */

/* ============================================================
   MODE — Concepts. Sticky-translucent top bar inside .main.
   Matches the historic .top look: backdrop blur + rounded top
   corners on the main card.
   ============================================================ */
surface-header[data-mode="concepts"] {
  position: sticky;
  top: 0;
  height: var(--top-h, 60px);
  padding: 0 24px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
}

/* ============================================================
   LEFT — breadcrumb region
   ============================================================ */
.surface-header__left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

surface-header[data-mode="concepts"] .surface-header__left {
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted, #7A7269);
  font-weight: 500;
}

/* ----- breadcrumb link / inert segments (intermediate items) ----- */
.surface-header__bc-link {
  font-family: var(--display, var(--body, sans-serif));
  font-size: 13.5px;
  color: var(--ink-muted, #7A7269);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
  transition: color 0.12s, background 0.12s;
  cursor: pointer;
}
.surface-header__bc-link:hover {
  color: var(--accent-deep, #A85E3B);
  background: var(--accent-tint, rgba(201, 122, 79, 0.08));
}
.surface-header__bc-link--inert {
  cursor: default;
}
.surface-header__bc-link--inert:hover {
  /* still subtle hover so it doesn't look broken; surface decides whether
     a click does anything via header-breadcrumb-click event */
  color: var(--accent-deep, #A85E3B);
  background: transparent;
}

/* ----- breadcrumb separator chevron ----- */
.surface-header__bc-sep {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--ink-faint, #C7BFB4);
}

/* ----- breadcrumb current segment (last item, bold) ----- */
.surface-header__bc-current {
  font-family: var(--display, var(--body, sans-serif));
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1F1B16);
  padding: 3px 8px;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* On Concepts the current segment is slightly smaller to match the
   historic .crumb sizing (which read 13px). */
surface-header[data-mode="concepts"] .surface-header__bc-current {
  font-size: 13px;
}
surface-header[data-mode="concepts"] .surface-header__bc-link {
  font-size: 13px;
}

/* ============================================================
   RIGHT — actions region
   ============================================================ */
.surface-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

surface-header[data-mode="concepts"] .surface-header__right {
  gap: 10px;
}

.surface-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* slot wrapper for complex controls (search input, dropdown menus, the
   Alpine-bound user-info pill, etc.) — inline-flex so children sit on
   the same row as the property-driven buttons. */
.surface-header__slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ----- property-driven action buttons ----- */
.surface-header__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink, #1F1B16);
  background: transparent;
  border: 1px solid var(--ink-ghost, #ECE3D8);
  border-radius: var(--radius-pill, 999px);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.surface-header__action:hover {
  background: var(--accent-tint, rgba(201, 122, 79, 0.08));
  border-color: var(--accent-soft, rgba(201, 122, 79, 0.3));
  color: var(--accent-deep, #A85E3B);
}
.surface-header__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.surface-header__action:disabled:hover {
  background: transparent;
  border-color: var(--ink-ghost, #ECE3D8);
  color: var(--ink, #1F1B16);
}

.surface-header__action--primary {
  background: var(--accent, #C97A4F);
  border-color: var(--accent, #C97A4F);
  color: #FFF8F1;
}
.surface-header__action--primary:hover {
  background: var(--accent-deep, #A85E3B);
  border-color: var(--accent-deep, #A85E3B);
  color: #FFF8F1;
}

.surface-header__action--quiet {
  border-color: transparent;
  color: var(--ink-muted, #7A7269);
}
.surface-header__action--quiet:hover {
  border-color: var(--accent-soft, rgba(201, 122, 79, 0.3));
}

.surface-header__action--danger {
  border-color: var(--err, #9B4B3F);
  color: var(--err, #9B4B3F);
}
.surface-header__action--danger:hover {
  background: var(--err, #9B4B3F);
  color: #FFF8F1;
}