/*
 * console-shell.css — unified page-chrome primitive for staff satellites (v3.1.0).
 *
 * Replaces the page-headers reinvented across:
 *   - survey-admin (.hdr-bar)
 *   - survey-builder (inline topbar)
 *   - survey-dashboard (inline toolbar)
 *   - payment-request (.page-header)
 *
 * Mobile-first by default. All breakpoints use min-width: queries.
 *
 * Anatomy:
 *   .console-shell           — outer page wrapper, max-width container
 *   .console-shell__header   — title cluster + actions row
 *   .console-shell__back     — optional back link (left of title)
 *   .console-shell__titles   — title + subtitle stack
 *   .console-shell__title    — h1 — Be Vietnam Pro 24px (chrome fg via --hub-chrome-fg)
 *   .console-shell__sub      — supporting subtitle
 *   .console-shell__actions  — right-aligned action cluster
 *   .console-shell__body     — content region (cards live here)
 *
 * Optional modifiers:
 *   .console-shell--narrow   — 720px max-width (forms)
 *   .console-shell--wide     — 1280px max-width (dashboards)
 *   .console-shell--sticky-header — pins header on scroll
 */

.console-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5, 20px) var(--space-4, 16px) var(--space-9, 48px);
}
.console-shell--narrow { max-width: 720px; }
.console-shell--wide   { max-width: 1280px; }

.console-shell__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 20px);
  padding-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--border);
}

.console-shell--sticky-header .console-shell__header {
  position: sticky;
  top: 0;
  background: var(--surface-1, #F8F9FC);
  z-index: var(--z-sticky, 50);
  margin-bottom: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
}

.console-shell__head-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
}

.console-shell__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 4px;
  font-family: var(--font-display, 'Be Vietnam Pro', sans-serif);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--hub-chrome-fg, var(--indigo));
  opacity: 0.75;
  text-decoration: none;
  transition: opacity var(--duration-fast, 0.12s);
}
.console-shell__back:hover { opacity: 1; }
.console-shell__back svg { width: 16px; height: 16px; }

.console-shell__titles { flex: 1; min-width: 0; }

.console-shell__title {
  font-family: var(--font-display, 'Be Vietnam Pro', sans-serif);
  font-size: var(--font-size-xl, 22px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--hub-chrome-fg, var(--indigo));
  letter-spacing: -0.01em;
  line-height: var(--line-height-tight, 1.2);
}

.console-shell__sub {
  margin-top: 2px;
  font-size: var(--font-size-sm, 13px);
  color: var(--muted);
  line-height: var(--line-height-base, 1.55);
}

.console-shell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
}

.console-shell__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

/* ── ≥ 640px tablet ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .console-shell {
    padding: var(--space-6, 24px) var(--space-5, 20px) var(--space-9, 48px);
  }
  .console-shell__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5, 20px);
  }
  .console-shell__title { font-size: var(--font-size-2xl, 28px); }
}

/* ── ≥ 1024px desktop ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .console-shell {
    padding: var(--space-7, 32px) var(--space-6, 24px) var(--space-12, 80px);
  }
}