/* =========================
   Header / Controls
   Extracted from main.css
   ========================= */

/* ---- Header / Controls ---- */
.top-pinned-shell {
  position: sticky;
  top: 0;
  z-index: 41;
  background: var(--bg);
}

header {
  /* Outer shell: only controls the collapse animation */
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.22s ease, opacity 0.20s ease;
}

header.header-collapsed {
  grid-template-rows: 0fr !important;
  opacity: 0;
  pointer-events: none;
}

.header-inner {
  /* Inner content wrapper — must have min-height: 0 for grid collapse to work */
  min-height: 0;
  overflow: hidden;
  padding: 0 2px 0;
  display: grid;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: min(800px, calc(100dvh - var(--safe-top-inset) - 52px));
}

/* In collapsed (Hide) mode only show the status badge, go-live toggle and share QR */
header.header-collapsed ~ .sticky-nav-bar #cloudEditCodeBadgeBtn,
header.header-collapsed ~ .sticky-nav-bar #cloudViewCodeBadgeBtn {
  display: none !important;
}

#parBadge.header-collapsed {
  display: none;
}

.sticky-nav-bar {
  position: relative;
  top: auto;
  z-index: 1;
  background: var(--bg);
  padding-bottom: 0;
}

.header-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 0 var(--space-lg) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.header-collapse-bar::-webkit-scrollbar {
  display: none;
}

.header-cloud-status-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

.header-cloud-status-group > * {
  flex: 0 0 auto;
}

/* Mini scroll indicator for cloud icon row overflow.
   Lives as a sibling of .header-collapse-bar inside .sticky-nav-bar so it
   does not scroll with the overflow-x content. */
.header-cloud-scroll-indicator {
  display: block;
  margin: 0 var(--space-lg) 4px;
  height: 3px;
  border-radius: 2px;
  background: rgba(74, 158, 255, 0.18);
  pointer-events: none;
  position: relative;
}

.header-cloud-scroll-indicator__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  background: #4a9eff;
  opacity: 0;
  transition: left 80ms linear, width 120ms ease, opacity 120ms ease;
}

.header-collapse-bar.has-cloud-scroll-overflow + .header-cloud-scroll-indicator .header-cloud-scroll-indicator__thumb {
  opacity: 0.95;
}

/* Don't let the cloud status badge get clipped to just the ☁ emoji.
   Always show "☁ Live" / "☁ Offline" in full. */
.cloud-status-badge { flex: 0 0 auto; }

.header-bar-badge {
  font-size: calc(12px + var(--font-size-step));
  min-width: 0;
}
/* Match cloud status and code buttons to Hide/Show control sizing */
.header-collapse-bar .cloud-status-badge,
.header-collapse-bar .cloud-code-badge-btn {
  min-height: 36px;
  padding: 8px 14px;
  font-size: calc(13px + var(--font-size-step));
  font-weight: 600;
  line-height: 1.4;
}root[data-theme="light"] .header-cloud-scroll-indicator {
  background: rgba(37, 99, 235, 0.18);
}
h1 {
  margin: 0;
  font-size: var(--text-3xl);
  letter-spacing: .2px;
  line-height: 1.12;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  max-width: 100%;
}

.control {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  min-height: var(--touch-min);
}

.control label {
  font-size: var(--text-base);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

#vegasGhostRotationWrap[hidden] {
  display: none !important;
}

.control input[type="text"] {
  background: #0c1218;
  border: 2px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: 10px var(--space-md);
  min-width: 120px;
  min-height: var(--touch-min);
  font-size: var(--text-xl);
}

.btn {
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  cursor: pointer;
  min-height: var(--touch-min);
  font-size: var(--text-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.btn:active {
  transform: scale(0.96);
  opacity: 0.82;
}

.btn.accent {
  border-color: #224;
  background: #14202a;
}

.meta {
  font-size: var(--text-sm);
  color: var(--muted);
}

.view-mode-banner {
  margin: 2px var(--space-lg);
  padding: 4px var(--space-md);
  border: 2px solid var(--warn);
  border-radius: var(--radius-md);
  background: rgba(255, 180, 84, 0.14);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-view-locked,
.cloud-view-locked:disabled,
.cloud-view-locked[readonly] {
  opacity: 1 !important;
  filter: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

.cloud-view-locked::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* ---- Theme Toggle Button ---- */
.theme-toggle {
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  filter: brightness(1.08);
}

.font-size-btn.active {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

:root[data-theme="light"] .header-cloud-scroll-indicator__thumb {
  background: #2563eb;
}