/**
 * shell.css — chrome for the merged ML Study Lab page.
 * ============================================================================
 *
 * This is the ONLY stylesheet on the page that is not namespaced to a panel.
 * It styles the shared header (brand, tab bar, theme switch) and the panel
 * containers themselves.
 *
 * Everything else — every rule from either app — is rewritten at build time by
 * scripts/scope-css.mjs so it can only match inside its own panel. Without
 * that, the two sheets would fight: they both style bare `html`, `body`, `*`,
 * `h1..h3`, and they both define `.chip`, `.scenario-card`, `.resource-card`
 * and `--muted` with different meanings.
 *
 * Rules here are kept deliberately few. If a style belongs to one of the two
 * apps, it belongs in that app's vendored sheet, not here.
 */

/* --------------------------------------------------------------------------
 * Shell tokens
 *
 * These are now ALIASES onto the estate-wide tokens in
 * shared/purple-tokens.css, which this page loads first. The shell was the
 * first surface migrated (see the adoption table in docs/DESIGN-SYSTEM.md),
 * following the two-step the design doc prescribes: alias the existing names
 * onto the shared ones so nothing below has to change and any visual movement
 * is attributable, then retire the aliases later.
 *
 * The --pi-shell-* names are kept for now because ~40 rules below reference
 * them; the values are no longer defined here, so the shell cannot drift from
 * the rest of the estate.
 * ----------------------------------------------------------------------- */
:root {
  /* Height reserved for the shared top bar, used to offset each app's own
     sticky sub-navigation so it parks underneath rather than behind it. The
     bar scales with the viewport, so this tracks the same clamp. */
  --pi-shell-h: calc(clamp(28px, 2.4vw, 34px) + 2 * clamp(8px, 0.9vw, 12px) + clamp(8px, 1.4vw, 18px) + 2px);
  --pi-shell-bg: var(--pi-paper);
  --pi-shell-fg: var(--pi-ink);
  --pi-shell-muted: var(--pi-muted);
  --pi-shell-border: var(--pi-line);
  --pi-shell-accent: var(--pi-accent);
  --pi-shell-active-bg: var(--pi-accent-wash);

  /* Not aliased: the page background deliberately tracks the visible tab so
     overscroll matches the panel on screen. Each app keeps its own paper
     colour until its interior is migrated. */
  --pi-page-bg: #f7f7fb;
}

:root[data-theme="dark"] {
  --pi-page-bg: #0f0a18;
}

/* The two apps use different page backgrounds. Track the visible tab so
 * overscroll and the area behind the header match the panel on screen. */
:root[data-pi-panel="ai-architect"] { --pi-page-bg: #f6f3ec; }
:root[data-theme="dark"][data-pi-panel="ai-architect"] { --pi-page-bg: #0d0618; }

/* The Kubernetes console was built against the apex palette, so its tab uses
   the shared page background rather than a study-guide paper colour. */
:root[data-pi-panel="kubernetes"] { --pi-page-bg: var(--pi-bg); }

/* --------------------------------------------------------------------------
 * Page baseline
 * `html`/`body` rules from both apps were rewritten onto their panel elements
 * by the scoping transform, so the document itself is styled only here.
 * ----------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  background: var(--pi-page-bg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--pi-page-bg);
  color: var(--pi-shell-fg);
  /* Estate face, from the token sheet. This previously hard-coded an Inter
     stack, which is exactly the drift docs/DESIGN-SYSTEM.md forbids — and it
     meant the shell disagreed with the brand root about what the site's
     typeface is. */
  font-family: var(--pi-font-sans);
  -webkit-text-size-adjust: 100%;
}

.pi-skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--pi-shell-bg);
  color: var(--pi-shell-fg);
  border: 2px solid var(--pi-shell-accent);
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.pi-skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
 * Shared header + tab bar
 * ----------------------------------------------------------------------- */
.pi-shell-header {
  position: sticky;
  top: 0;
  /* Above each app's own sticky section nav, which sits at z-index 40. */
  z-index: 100;
  height: var(--pi-shell-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--pi-shell-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pi-shell-border);
  font-size: 14px;
}

/* color-mix is widely supported but not universal; the solid colour is a
 * perfectly good fallback and avoids an unreadable transparent header. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pi-shell-header { background: var(--pi-shell-bg); }
}

.pi-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pi-shell-fg);
  text-decoration: none;
  white-space: nowrap;
}
.pi-brand:hover { color: var(--pi-shell-accent); }

.pi-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pi-tabs::-webkit-scrollbar { display: none; }

.pi-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pi-shell-muted);
  font: inherit;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.pi-tab:hover { color: var(--pi-shell-fg); background: var(--pi-shell-active-bg); }
.pi-tab.is-active {
  color: var(--pi-shell-accent);
  background: var(--pi-shell-active-bg);
  border-color: color-mix(in srgb, var(--pi-shell-accent) 35%, transparent);
}
.pi-tab:focus-visible {
  outline: 2px solid var(--pi-shell-accent);
  outline-offset: 2px;
}

.pi-shell-actions { display: flex; align-items: center; gap: 8px; }

.pi-shell-button {
  appearance: none;
  border: 1px solid var(--pi-shell-border);
  background: transparent;
  color: var(--pi-shell-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.pi-shell-button:hover { background: var(--pi-shell-active-bg); border-color: var(--pi-shell-accent); }
.pi-shell-button:focus-visible { outline: 2px solid var(--pi-shell-accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .pi-brand { display: none; }
  .pi-shell-header { gap: 12px; padding: 0 12px; }
}

/* --------------------------------------------------------------------------
 * Panels
 * ----------------------------------------------------------------------- */
.pi-panel { display: block; }
.pi-panel[hidden] { display: none; }
.pi-panel:focus { outline: none; }

/* Each app shipped its own sticky top bar pinned to `top: 0`. Inside the
 * merged page that would sit underneath the shell header, so push both down
 * by the shell's height. `.topbar` is the AI Architect bar; `.site-header` is
 * the ML Stack Lab one. */
.pi-panel .topbar,
.pi-panel .site-header {
  top: var(--pi-shell-h);
  z-index: 40;
}

/* Both apps keep their own theme button in the DOM because their JavaScript
 * dereferences it (ML Stack Lab's setTheme writes to els.themeButton.textContent
 * on every call and would throw on null). The shell owns the visible switch,
 * so the per-app duplicates are hidden rather than removed. */
[data-pi-theme-proxy] { display: none !important; }

/* Each app's full-screen quiz/exam overlay was written to cover the viewport
 * of a standalone page. Keep them above the shell header while active so the
 * tab bar cannot overlap an exam in progress. */
.pi-panel .quiz-shell,
.pi-panel .exam-overlay {
  position: relative;
  z-index: 120;
}

/* ==========================================================================
 * Progress dialog (src/shell/progress.js)
 *
 * AI Architect had a "My Progress" button with nothing behind it — only a
 * tooltip. This is the dialog it now opens, matched to ML Stack Lab's.
 * ======================================================================= */

.pi-progress-dialog {
  font-family: var(--pi-font-sans);
  position: relative;
}

.pi-progress-dialog h2 {
  font-family: var(--pi-font-sans);
  font-size: var(--pi-text-2xl);
  font-weight: var(--pi-weight-bold);
  line-height: var(--pi-leading-tight);
  margin: var(--pi-space-1) 0 var(--pi-space-5);
  color: var(--pi-ink);
}

.pi-progress-headline {
  font-size: var(--pi-text-xl);
  font-weight: var(--pi-weight-bold);
  color: var(--pi-ink);
  margin: 0 0 var(--pi-space-2);
}

.pi-progress-subhead {
  font-size: var(--pi-text-md);
  font-weight: var(--pi-weight-semibold);
  color: var(--pi-ink);
  margin: var(--pi-space-6) 0 var(--pi-space-2);
}

.pi-progress-note {
  font-size: var(--pi-text-base);
  line-height: var(--pi-leading-relaxed);
  color: var(--pi-muted);
  margin: 0 0 var(--pi-space-3);
}

.pi-progress-rows { display: flex; flex-direction: column; }

.pi-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pi-space-4);
  padding: var(--pi-space-3) 0;
  border-bottom: 1px solid var(--pi-line);
  font-size: var(--pi-text-base);
}
.pi-progress-row:last-child { border-bottom: 0; }

.pi-progress-row-name { color: var(--pi-ink); font-weight: var(--pi-weight-medium); }
.pi-progress-row-value { color: var(--pi-ink); font-weight: var(--pi-weight-semibold); white-space: nowrap; }
.pi-progress-row small { color: var(--pi-muted); font-weight: var(--pi-weight-normal); }

.pi-progress-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--pi-space-6);
}

.pi-progress-close {
  position: absolute;
  top: var(--pi-space-4);
  right: var(--pi-space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--pi-muted);
  background: transparent;
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius-pill);
  cursor: pointer;
}
.pi-progress-close:hover { color: var(--pi-ink); background: var(--pi-accent-wash); border-color: var(--pi-accent); }
.pi-progress-close:focus-visible { outline: var(--pi-focus-ring); outline-offset: var(--pi-focus-offset); }