/*
 * Site Header (#20136) — the ONE header chrome, on every surface
 * ==============================================================
 * Styles app/views/shared/_site_header.html.erb: wordmark · slot · account.
 * Linked standalone by layouts/terminal, layouts/public, layouts/dm and
 * layouts/_head (the application layout), so every surface paints the same
 * top band — same height, background, border and wordmark position.
 *
 * Tokens only (terminal/tokens/): every layout that links this file links
 * terminal/_tokens first. No literals — the header has no palette of its own.
 * Layers on: terminal/_tokens
 *
 * TERMINAL: the status bar is the slot's content and keeps its own three
 * zones, padding and 38px geometry. The header takes the bar's place as the
 * .terminal-container column's first row. Wherever the bar is NOT a plain top
 * row — the phone layout (#17837 owns that geometry; #16285 / #13904), a
 * non-terminal shell (dos386/mud/dos-gui pin it to the bottom, script hides
 * it), the on-screen keyboard and focus mode — the header box steps out of
 * the way with `display: contents` and the wordmark hides, so the box tree
 * those rules were written against is exactly what it was before #20136.
 *
 * Spec: .claude/constraints/subsystems/ui_design_language.md §SITE-HEADER.
 */

.site-header {
  --site-header-bg: var(--color-bg-primary);
  --site-header-border: var(--color-border-subtle);
  --site-header-fg: var(--color-text-primary);
  --site-header-fg-muted: var(--color-text-secondary);
  --site-header-mark: var(--accent-player);

  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  height: var(--status-bar-height);
  min-height: var(--status-bar-height);
  flex-shrink: 0;
  padding: 0 var(--space-4);
  background: var(--site-header-bg);
  border-bottom: 1px solid var(--site-header-border);
  color: var(--site-header-fg);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1;
}

.site-header__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  color: var(--site-header-mark);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__wordmark:hover {
  color: var(--site-header-fg);
  text-decoration: none;
}

.site-header__wordmark:focus-visible,
.site-header__account-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.site-header__wordmark-icon .svg-icon,
.site-header__wordmark-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.site-header__slot {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  color: var(--site-header-fg-muted);
  overflow: hidden;
}

.site-header__account {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__account-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--site-header-fg);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__account-link:hover {
  color: var(--site-header-mark);
  text-decoration: none;
}

.site-header__account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--site-header-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* ---- Terminal: the status bar is the slot ------------------------------ */

.site-header--terminal {
  /* The bar keeps its own horizontal padding; the header adds only the
   * wordmark's inset so the band reads as one row. */
  padding: 0 0 0 var(--space-4);
  gap: 0;
}

.site-header--terminal > .site-header__slot {
  align-items: stretch;
  overflow: visible;
  color: inherit;
}

/* The header owns the band's background and bottom border; the bar inside
 * keeps its zones, padding and content-row height (38 − 1 border = 37, as
 * before) and gives up only the duplicate border. */
.site-header--terminal .status-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  border-bottom: 0;
}

@media (max-width: 767px) {
  .site-header--terminal,
  .site-header--terminal > .site-header__slot {
    display: contents;
  }

  .site-header--terminal > .site-header__wordmark {
    display: none;
  }

  .site-header--terminal .status-bar {
    border-bottom: 1px solid var(--site-header-border);
  }
}

:root[data-shell]:not([data-shell="terminal"]) .site-header--terminal,
:root[data-shell]:not([data-shell="terminal"]) .site-header--terminal > .site-header__slot,
.mobile-keyboard-open .site-header--terminal,
.mobile-keyboard-open .site-header--terminal > .site-header__slot,
.terminal-container--focus-mode .site-header--terminal,
.terminal-container--focus-mode .site-header--terminal > .site-header__slot {
  display: contents;
}

:root[data-shell]:not([data-shell="terminal"]) .site-header--terminal > .site-header__wordmark,
.mobile-keyboard-open .site-header--terminal > .site-header__wordmark,
.terminal-container--focus-mode .site-header--terminal > .site-header__wordmark {
  display: none;
}

/* ---- DM workspace: full-width band above the fixed sidebar -------------- */

.site-header--dm {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-panel) + 1);
}

.site-header--dm ~ .dm-container .dm-sidebar {
  top: var(--status-bar-height);
  height: calc(100vh - var(--status-bar-height));
}

.site-header--dm ~ .dm-container .dm-main {
  min-height: calc(100vh - var(--status-bar-height));
}

@media (max-width: 767px) {
  /* The fixed sidebar toggle sits over the band's left edge. */
  .site-header--dm {
    padding-left: calc(var(--space-4) * 3);
  }

  .site-header--dm .site-header__wordmark-text,
  .site-header--page .site-header__wordmark-text {
    display: none;
  }
}