/* ═══════════════════════════════════════════════════════════════════
   layout.css — app shell, topbar, tabs, view switching, progress bar,
   sticky wizard nav. Structure only; the things inside these regions
   are styled by components.css / wizard.css / review.css / auth.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Skip link ───────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-3); }

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: var(--sp-2) var(--gutter);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.topbar .logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
}
.topbar .logo:hover { text-decoration: none; }
.topbar .logo svg { width: 22px; height: 22px; color: var(--accent); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.sub-id {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
/* One class per status in api.js:STATUS_COPY, which mirrors
   models/submission.py. The three statuses wave 3 added had no rule here, so a
   finished project fell through to the unstyled default and never went green —
   in the dashboard card and in the topbar both.

   `answers_complete` is amber, not green: the interview being over is not the
   same thing as there being something to download. */
.status-badge.draft { background: var(--bg-sunken); color: var(--text-muted); }
.status-badge.cv_parsed { background: var(--amber); color: #fff; }
.status-badge.answers_complete { background: var(--amber-light); color: var(--amber-text); }
.status-badge.generating { background: var(--accent); color: var(--text-on-accent); animation: pulse 1.5s infinite; }
.status-badge.site_complete { background: var(--green); color: #fff; }
.status-badge.profile_complete { background: var(--violet); color: #fff; }
.status-badge.completed { background: var(--green); color: #fff; }
.status-badge.failed { background: var(--red); color: #fff; }
.status-badge.legacy { background: var(--bg-sunken); color: var(--text-secondary); border: 1px solid var(--border-strong); }

.auth-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.user-greeting {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.tabs {
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-tabs);
  display: flex;
  padding: 0 var(--gutter);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab.active,
.tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--fw-semibold);
}
.tab .pi { display: inline-flex; }
.tab .pi svg { width: 16px; height: 16px; }

/* ── View + tab switching ────────────────────────────────────────── */
.app-view { display: none; }
.app-view.active { display: block; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.container {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter) var(--sp-10);
}
.container.wide { max-width: var(--shell-max-wide); }

.tab-header,
.wizard-header {
  padding: var(--sp-4) 0 var(--sp-2);
  text-align: center;
}
.tab-header h2,
.wizard-header h2 { font-size: var(--fs-2xl); }
.tab-header p,
.wizard-header p {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}
.section-head h2 { font-size: var(--fs-xl); }
.section-desc {
  margin: var(--sp-1) 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Progress — two independent phase counters ───────────────────────
   Contract for T7: set --progress-current / --progress-total (unitless
   integers) on .progress plus data-phase="1" or "2". The fill width is
   derived from those, never written as an inline width.

   <div class="progress" data-phase="1"
        style="--progress-current:3; --progress-total:10">
     <div class="progress-phases">
       <span class="progress-counter" data-phase-counter="1">Phase 1 of 10</span>
       <span class="progress-counter" data-phase-counter="2">Phase 2 of 8</span>
     </div>
     <div class="progress-track"><div class="progress-fill"></div></div>
     <div class="progress-labels">...</div>
   </div>
   ──────────────────────────────────────────────────────────────────── */
.progress {
  --progress-current: 0;
  --progress-total: 1;
  margin: var(--sp-4) 0 var(--sp-5);
}

.progress-phases {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.progress-counter {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
/* The phase in play lights up; the other stays a quiet marker. */
.progress[data-phase="1"] .progress-counter[data-phase-counter="1"],
.progress[data-phase="2"] .progress-counter[data-phase-counter="2"] { color: var(--accent); }

.progress-track {
  height: 6px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: calc(100% * var(--progress-current) / var(--progress-total));
  min-width: 2px;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--transition-slow);
}
.progress[data-phase="2"] .progress-fill { background: var(--violet); }
.progress[data-complete] .progress-fill { background: var(--green); }

/* Per-step ticks — kept from the previous wizard so step markers read the same */
.progress-steps {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.progress-step {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: var(--r-pill);
}
.progress-step.active { background: var(--accent); }
.progress-step.done { background: var(--green); }

.progress-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.progress-labels span.active { color: var(--accent); font-weight: var(--fw-semibold); }
/* Step names are noise on a phone — the counter carries the information. */
@media (max-width: 599px) {
  .progress-labels { display: none; }
}

/* ── Wizard nav — sticky to the bottom so it stays thumb-reachable ── */
.wizard-nav {
  position: sticky;
  bottom: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) calc(var(--gutter) * -1) 0;
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border);
}
.wizard-nav .save-indicator {
  flex: 1;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.wizard-nav .nav-next { min-width: 128px; justify-content: center; }

/* ── Desktop ─────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .topbar,
  .tabs { padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); }
  .container { padding: var(--sp-7) var(--gutter-lg) var(--sp-9); }
  .wizard-nav {
    position: static;
    margin: var(--sp-6) 0 0;
    padding: var(--sp-4) 0 0;
    background: none;
  }
}