/* Page-level layout primitives.
   Foundation playground sections + page chrome + application shell. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-body);
  color: var(--color-gray-900);
  background: var(--color-app-bg);
  line-height: 1.5;
}

/* ============================================================================
   Application shell — left nav (64px) + top header + scrollable main area.
   Wraps every page. Per DESIGN_GUIDELINES_Claude.md "Layout Structure".
   ============================================================================ */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-app-bg);
}

/* Left navigation — 64px fixed, white bg, vertical icon list. */
.left-nav {
  position: sticky;
  top: 0;
  width: 64px;
  flex-shrink: 0;
  height: 100vh;
  background: var(--color-white);
  border-right: 1px solid var(--color-gray-200);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  z-index: 20;
  align-self: flex-start;
}

.left-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.left-nav__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  transition: background var(--transition-standard) ease,
              color var(--transition-standard) ease;
  padding: 0;
}

.left-nav__icon:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.left-nav__icon.is-active {
  background: var(--color-blue-600);
  color: var(--color-white);
}

.left-nav__icon svg {
  width: 20px;
  height: 20px;
}

/* Right column — main content (top header + scrollable page). */
.app-main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top header — full width of main column; sticky at top. */
.top-header {
  position: sticky;
  top: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 1.125rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 15;
  min-height: 64px;
}

.top-header__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  flex-wrap: wrap;
}

.top-header__crumb {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color var(--transition-standard) ease;
}

.top-header__crumb:hover {
  color: var(--color-gray-900);
}

.top-header__current {
  color: var(--color-blue-600);
  font-weight: var(--font-weight-medium);
}

.top-header__sep {
  color: var(--color-gray-400);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.top-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.top-header__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  transition: background var(--transition-standard) ease;
  padding: 0;
}

.top-header__icon-btn:hover {
  background: var(--color-gray-50);
}

.top-header__icon-btn svg {
  width: 16px;
  height: 16px;
}

.top-header__time-window {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-gray-700);
  transition: background var(--transition-standard) ease;
}

.top-header__time-window:hover {
  background: var(--color-gray-50);
}

/* Main content area — scrollable host for page content. */
.app-main {
  flex: 1;
  min-width: 0;
}

.page-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

.page-header {
  margin-bottom: 3rem;
}

.page-header__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

.page-header__subtitle {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0 0 0.5rem;
}

.page-header__attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-600);
  margin-top: 0.75rem;
}

.page-header__attribution .sparkle-icon {
  width: 14px;
  height: 14px;
}

/* Playground sections — each labeled, separated. */
.foundation-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

.foundation-section__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.25rem;
}

.foundation-section__hint {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  margin: 0 0 1.25rem;
}

.foundation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.foundation-row--column {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.foundation-row--stretch > * {
  flex: 1 1 0;
  min-width: 280px;
}

.foundation-prose {
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.7;
  max-width: 70ch;
}

.foundation-prose strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.foundation-label {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.foundation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* Materialize sandbox — a target container the materialize button writes into. */
.materialize-sandbox {
  margin-top: 1rem;
  min-height: 96px;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  background: var(--color-gray-50);
}

/* ============================================================================
   Org landing page primitives.
   ============================================================================ */

.org-page {
  padding: 3rem 2.5rem 4rem;
}

.org-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.org-header__left {
  flex: 1;
}

.org-header__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.375rem;
  line-height: 1.15;
}

.org-header__subtitle {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0;
  max-width: 60ch;
}

.org-header__attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-600);
  margin-top: 0.875rem;
}

.org-header__attribution .sparkle-icon {
  width: 14px;
  height: 14px;
}

.org-header__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Section primitives. */
.org-section {
  margin-bottom: 2.5rem;
}

.org-section__title {
  font-size: var(--text-section);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.25rem;
}

.org-section__hint {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0 0 1.25rem;
}

.org-section__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

/* Grids. */
.summary-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.875rem;
}

.summary-tiles-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
  .summary-tiles-grid,
  .summary-tiles-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 980px) {
  .trend-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Team landing page primitives — Order Management (Pillar 1), Claims (Pillar 2),
   Customer Service (Pillar 3). Mirrors org-page conventions but scoped to a
   single team. Wraps the application shell main column.
   ============================================================================ */

.team-page {
  padding: 3rem 2.5rem 4rem;
}

.team-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.team-header__left {
  flex: 1;
}

.team-header__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.team-header__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.375rem;
  line-height: 1.15;
}

.team-header__subtitle {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0;
  max-width: 60ch;
}

/* At-risk segment appended when one or more goals carry at-risk / not-meeting
   statuses. Mirrors the bubble-chart at-risk highlight (Phase 5 polish #34A —
   amber-600). Per goal_centric_team_page_change.md §2.D (brief said amber-700;
   the token doesn't exist, so we use the closest available variant which is
   also what the bubble chart uses for the same semantic).
   ============================================================================ */
.team-header__subtitle-at-risk {
  color: var(--color-amber-600);
  font-weight: var(--font-weight-medium);
}

.team-header__attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-600);
  margin-top: 0.875rem;
}

.team-header__attribution .sparkle-icon {
  width: 14px;
  height: 14px;
}

.team-section {
  margin-bottom: 2.5rem;
}

.team-section__title {
  font-size: var(--text-section);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.team-section__hint {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0 0 1.25rem;
}

/* Workflow cards row — three across, wraps on narrow viewports. */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 1100px) {
  .workflow-grid {
    grid-template-columns: 1fr;
  }
}

/* Modifier — four columns. Used by CS team landing's top row (Pillar 3). */
.workflow-grid--four-up {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .workflow-grid--four-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sequential-plus-exception layout (CS team landing).
   Separator strip between the top row and the wide bottom card. Reads as
   "exception flow" — typography + thin lines, no edges or connectors. */
.workflow-exception-separator {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.25rem 0 1rem;
}

.workflow-exception-separator__line {
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

.workflow-exception-separator__label {
  font-size: var(--text-small);
  color: var(--color-gray-500);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Hypothesis cards — one column, ample breathing room. */
.hypothesis-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ============================================================================
   Workflow detail page — Pillar 1's destination from the team landing's
   "Investigate" CTA. Two-column layout: main content (left, flex) +
   Twin Trace panel (right, sticky, fixed-width).
   ============================================================================ */

.workflow-page {
  padding: 3rem 2.5rem 4rem;
}

.workflow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.workflow-header__left {
  flex: 1;
  min-width: 0;
}

.workflow-header__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.workflow-header__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.375rem;
  line-height: 1.15;
}

.workflow-header__attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-600);
  margin-top: 0.5rem;
}

.workflow-header__attribution .sparkle-icon {
  width: 14px;
  height: 14px;
}

.workflow-tab-bar {
  margin-bottom: 1.5rem;
}

/* Two-column body — main flexes, trace is fixed 380px and sticky. */
.workflow-detail {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.workflow-detail__main {
  flex: 1;
  min-width: 0;
}

.workflow-detail__trace {
  flex: 0 0 380px;
  position: sticky;
  top: 96px;                        /* sticky top header (~64px) + breathing room */
  height: calc(100vh - 112px);      /* definite height so the panel's flex:1 body actually scrolls */
  align-self: flex-start;
  display: flex;
}

/* Narrow viewports — stack trace below main rather than squeezing horizontally. */
@media (max-width: 1100px) {
  .workflow-detail {
    flex-direction: column;
  }
  .workflow-detail__trace {
    flex: 1 1 auto;
    width: 100%;
    position: static;
    height: auto;                   /* release the fixed height when stacked */
  }
}

/* When the Workflow tab is active (Pillar 2's H+A observability surface),
   hide the Twin Trace panel and let the main column take the full width.
   The trace panel only earns its real estate during the live runs on the
   Analyses tab. */
.workflow-detail.is-trace-hidden .workflow-detail__trace {
  display: none;
}

/* Tab panels — only one visible at a time. Toggled via .is-active. */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Analyses tab on workflow-cs-returns.html stacks the entry context banner
   above the beats container — flex layout for the gap between siblings. */
.tab-panel.analyses-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}