/* Graphite Note Premium Pass 5
   Analytical Workspace System
   Scope: all 11 model/result families + model catalog.
   Presentation only. No model/API/data behavior changes. */

:root {
  --gn-p5-content-max: 1480px;
  --gn-p5-report-max: 1180px;
  --gn-p5-reading-max: 920px;
  --gn-p5-border: #d8e1ee;
  --gn-p5-border-soft: #e8edf4;
  --gn-p5-surface: #ffffff;
  --gn-p5-surface-subtle: #f8fafc;
  --gn-p5-ink: #0f1f36;
  --gn-p5-muted: #607087;
  --gn-p5-accent: #1967ff;
  --gn-p5-accent-soft: #eff5ff;
  --gn-p5-cyan: #35c9e8;
  --gn-p5-radius: 8px;
}

/* ------------------------------------------------------------------
   1. Shared model result composition
   ------------------------------------------------------------------ */
.gn-app-shell .gn-analytical-workspace {
  width: 100%;
  max-width: var(--gn-p5-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40px !important;
}

.gn-app-shell .gn-analytical-workspace > .col-12:first-child {
  padding-left: 12px;
  padding-right: 12px;
}

/* Secondary model navigation is navigation, not a row of form buttons. */
.gn-app-shell .gn-analytical-workspace .pill-tabs {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  min-height: 42px;
  margin: 4px 0 20px;
  padding: 0 4px;
  border-bottom: 1px solid var(--gn-p5-border);
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.gn-app-shell .gn-analytical-workspace .pill-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
  height: 40px;
  padding: 0 1px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #526279 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.gn-app-shell .gn-analytical-workspace .pill-tabs button:hover {
  color: var(--gn-p5-ink) !important;
  background: transparent !important;
}

.gn-app-shell .gn-analytical-workspace .pill-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
}

.gn-app-shell .gn-analytical-workspace .pill-tabs button.is-active,
.gn-app-shell .gn-analytical-workspace .pill-tabs button[aria-selected="true"] {
  color: #0b4dd9 !important;
  font-weight: 650 !important;
}

.gn-app-shell .gn-analytical-workspace .pill-tabs button.is-active::after,
.gn-app-shell .gn-analytical-workspace .pill-tabs button[aria-selected="true"]::after {
  background: var(--gn-p5-accent);
}

/* Major result sections get intentional separation rather than Bootstrap gaps. */
.gn-app-shell .gn-analytical-workspace > [ng-if^="tabPage"],
.gn-app-shell .gn-analytical-workspace > [ng-show^="tabPage"] {
  animation: gnP5FadeIn 120ms ease-out;
}

@keyframes gnP5FadeIn {
  from { opacity: .72; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   2. Universal overview/report language
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-overview {
  width: 100%;
  color: var(--gn-p5-ink);
}

.gn-app-shell .gn-model-overview p,
.gn-app-shell .gn-model-overview li {
  line-height: 1.52;
}

.gn-app-shell .gn-model-overview .gn-result-section-title,
.gn-app-shell .gn-model-overview .accountsPageH2,
.gn-app-shell .gn-model-overview h2,
.gn-app-shell .gn-model-overview h3,
.gn-app-shell .gn-model-overview h4 {
  color: var(--gn-p5-ink);
  letter-spacing: -0.01em;
}

/* Narrative analytical overviews should read like reports, not full-width logs. */
.gn-app-shell .gn-model-overview--rfm > .row,
.gn-app-shell .gn-model-overview--clv > .row,
.gn-app-shell .gn-model-overview--abc > .row,
.gn-app-shell .gn-model-overview--basket > .row.justify-content-center,
.gn-app-shell .gn-model-overview--basket > .row.mt-4 {
  max-width: var(--gn-p5-report-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

.gn-app-shell .gn-model-overview--rfm .normal,
.gn-app-shell .gn-model-overview--clv > .row .col-12,
.gn-app-shell .gn-model-overview--abc > .row .col-12 {
  max-width: var(--gn-p5-reading-max);
}

.gn-app-shell .gn-model-overview--rfm .normal,
.gn-app-shell .gn-model-overview--clv .font-weight-light,
.gn-app-shell .gn-model-overview--abc .font-weight-light {
  color: #33455d;
}

/* Report section headings become crisp, readable anchors. */
.gn-app-shell .gn-model-overview .gn-result-section-title {
  margin: 24px 0 8px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

.gn-app-shell .gn-model-overview ul {
  margin-top: 8px;
  padding-left: 20px;
}

.gn-app-shell .gn-model-overview li {
  margin-bottom: 8px !important;
}

/* ------------------------------------------------------------------
   3. Predictive KPI evidence strips
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-overview--forecast .gn-kpi-grid,
.gn-app-shell .gn-model-overview--binary .gn-kpi-grid,
.gn-app-shell .gn-model-overview--multiclass .gn-kpi-grid,
.gn-app-shell .gn-model-overview--regression .gn-kpi-grid {
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.gn-app-shell .gn-model-overview .gn-kpi-card {
  min-height: 72px !important;
  padding: 11px 12px 10px !important;
  border-color: var(--gn-p5-border) !important;
  border-radius: 7px !important;
  background: var(--gn-p5-surface) !important;
}

.gn-app-shell .gn-model-overview .gn-kpi-card h5 {
  margin-top: 7px !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums;
}

/* Error metrics without a comparable 0-100 scale should not carry a fake progress rail. */
.gn-app-shell .gn-model-overview--regression .gn-kpi-card:nth-child(n/**/+2) q-model-kpi-performance-info,
.gn-app-shell .gn-model-overview--forecast .gn-kpi-card:nth-child(n/**/+2) q-model-kpi-performance-info {
  display: none !important;
}

/* ------------------------------------------------------------------
   4. Chart and analytical panel shell
   ------------------------------------------------------------------ */
.gn-app-shell .gn-analytical-workspace .visualization,
.gn-app-shell .gn-analytical-workspace .gn-compact-chart,
.gn-app-shell .gn-analytical-workspace [id^="chartCanvas"],
.gn-app-shell .gn-analytical-workspace #chart,
.gn-app-shell .gn-analytical-workspace #visualization {
  border-radius: 6px;
}

.gn-app-shell .gn-analytical-workspace .chartSize,
.gn-app-shell .gn-model-overview--cohort,
.gn-app-shell .gn-model-overview--new-returning,
.gn-app-shell .gn-model-overview--segmentation {
  position: relative;
}

.gn-app-shell .gn-model-overview--cohort > .row.mt-4.mb-4,
.gn-app-shell .gn-model-overview--new-returning > .row,
.gn-app-shell .gn-model-overview--segmentation > .row.mt-4.mb-4 {
  margin: 18px 0 !important;
  padding: 16px !important;
  border: 1px solid var(--gn-p5-border);
  border-radius: var(--gn-p5-radius);
  background: var(--gn-p5-surface);
}

.gn-app-shell .gn-model-overview--cohort #chart,
.gn-app-shell .gn-model-overview--cohort #visualization,
.gn-app-shell .gn-model-overview--new-returning .visualization,
.gn-app-shell .gn-model-overview--segmentation .visualization {
  margin-top: 12px !important;
}

/* Cohort controls become a compact toolbar. */
.gn-app-shell .gn-model-overview--cohort .col-4.ml-3 {
  flex: 0 0 auto;
  max-width: none;
  margin-left: 0 !important;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.gn-app-shell .gn-model-overview--cohort .col-4.ml-3 > .d-inline-flex {
  align-items: center;
  gap: 8px;
}

.gn-app-shell .gn-model-overview--cohort .col-4.ml-3 p {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600;
  color: #41516a;
}

/* ------------------------------------------------------------------
   5. RFM and CLV: turn tiny equal boxes into an evidence rail
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-overview--rfm .d-inline-flex.pb-3,
.gn-app-shell .gn-model-overview--clv .d-inline-flex.pb-3 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  width: 100%;
  gap: 8px;
  padding-bottom: 0 !important;
}

.gn-app-shell .gn-model-overview--rfm .d-inline-flex.pb-3 > div,
.gn-app-shell .gn-model-overview--clv .d-inline-flex.pb-3 > div {
  margin-right: 0 !important;
  padding: 12px !important;
  min-width: 0;
  min-height: 82px;
  text-align: left !important;
  border: 1px solid var(--gn-p5-border) !important;
  border-radius: 7px;
  background: #fff;
}

.gn-app-shell .gn-model-overview--rfm .kpiNumber,
.gn-app-shell .gn-model-overview--clv .kpiNumber {
  padding-top: 0 !important;
  margin-bottom: 5px;
  font-size: 18px !important;
  line-height: 1.1;
  font-weight: 650;
  color: var(--gn-p5-ink);
  font-variant-numeric: tabular-nums;
}

.gn-app-shell .gn-model-overview--rfm .extraSmall,
.gn-app-shell .gn-model-overview--clv .extraSmall {
  display: inline;
  font-size: 14px !important;
  line-height: 1.35;
  color: var(--gn-p5-muted);
}

.gn-app-shell .gn-model-overview--rfm .extraSmall + .extraSmall::before,
.gn-app-shell .gn-model-overview--clv .extraSmall + .extraSmall::before {
  content: " ";
}

/* RFM generated overview gets a clean report frame without a giant card. */
.gn-app-shell .gn-model-overview--rfm > .row.ml-1 {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--gn-p5-border-soft);
}

/* ------------------------------------------------------------------
   6. Basket analysis: portfolio-style summary instead of five chunky boxes
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-overview--basket > .row.mt-4:not(.justify-content-center) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.gn-app-shell .gn-model-overview--basket > .row.mt-4:not(.justify-content-center) > .col {
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}

.gn-app-shell .gn-model-overview--basket .accountsPage.wrapper {
  min-height: 88px !important;
  padding: 12px !important;
  border: 1px solid var(--gn-p5-border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.gn-app-shell .gn-model-overview--basket .accountsPage.wrapper h3 {
  margin-bottom: 8px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--gn-p5-muted) !important;
  text-align: left !important;
}

.gn-app-shell .gn-model-overview--basket .accountsPage.wrapper p {
  font-size: 18px !important;
  line-height: 1.05;
  color: var(--gn-p5-ink);
  font-variant-numeric: tabular-nums;
}

.gn-app-shell .gn-model-overview--basket .accountsPageH2 {
  font-size: 17px !important;
}

.gn-app-shell .gn-model-overview--basket .accountsPage.help {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--gn-p5-muted);
}

/* ------------------------------------------------------------------
   7. General segmentation: intentional two-stage analytical surface
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-overview--segmentation > .row.mt-4.mb-4 {
  display: block;
}

.gn-app-shell .gn-model-overview--segmentation .col-md-12.ml-3 {
  margin-left: 0 !important;
}

.gn-app-shell .gn-model-overview--segmentation .row > .col-md-12.ml-3 + .row {
  margin: 18px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--gn-p5-border-soft);
}

/* ------------------------------------------------------------------
   8. ABC / deterministic reports
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-overview--abc {
  padding: 8px 0 24px;
}

.gn-app-shell .gn-model-overview--abc .col-12.mt-3 {
  padding: 0 18px;
}

.gn-app-shell .gn-model-overview--abc ul {
  padding-left: 18px;
}

/* ------------------------------------------------------------------
   9. AI Business Advisor as a premium report, not raw markdown
   ------------------------------------------------------------------ */
.gn-app-shell .gn-ai-advisor-workspace {
  max-width: var(--gn-p5-report-max);
  margin-left: 0;
  margin-right: auto;
}

.gn-app-shell .gn-ai-advisor-workspace .pill-tabs {
  max-width: 100%;
}

.gn-app-shell .gn-ai-advisor-workspace .actionable-insights-bgr,
.gn-app-shell .gn-ai-advisor-workspace [class*="actionable-insights"] {
  max-width: var(--gn-p5-report-max);
}

.gn-app-shell .gn-ai-advisor-workspace .actionable-insights-content,
.gn-app-shell .gn-ai-advisor-workspace .normal[ng-bind-html] {
  max-width: var(--gn-p5-reading-max) !important;
}

.gn-app-shell .gn-ai-advisor-workspace h1,
.gn-app-shell .gn-ai-advisor-workspace h2,
.gn-app-shell .gn-ai-advisor-workspace h3 {
  letter-spacing: -0.015em;
}

.gn-app-shell .gn-ai-advisor-workspace h2,
.gn-app-shell .gn-ai-advisor-workspace h3 {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--gn-p5-border-soft);
}

.gn-app-shell .gn-ai-advisor-workspace code {
  padding: 2px 6px;
  border: 1px solid #d9e6f7;
  border-radius: 5px;
  background: #f3f7fc;
  color: #194c82;
  font-size: .92em;
}

/* ------------------------------------------------------------------
   10. Data grids and details: make them feel like one product
   ------------------------------------------------------------------ */






/* ------------------------------------------------------------------
   11. Model catalog: feels like a curated product catalog
   ------------------------------------------------------------------ */
.gn-app-shell .gn-model-catalog-step {
  padding-bottom: 28px;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-grid--ModelsType {
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 14px;
  max-width: 1460px;
  margin: 18px auto 0;
  padding: 0 18px 18px;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card {
  min-height: 246px !important;
  padding: 16px !important;
  border-color: var(--gn-p5-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(21,42,70,.03) !important;
  background: #fff !important;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card:hover {
  transform: translateY(-1px);
  border-color: #9fc2ff !important;
  box-shadow: 0 8px 20px rgba(25,70,125,.08) !important;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card::after {
  opacity: .55;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card__chips {
  min-height: 22px;
  margin-bottom: 10px;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-chip {
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 550;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card__icon {
  margin-bottom: 10px;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card__title {
  margin-bottom: 7px;
  font-size: 14px !important;
  line-height: 1.25;
  font-weight: 650 !important;
  letter-spacing: -.01em;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card__desc {
  color: #55677f;
  font-size: 14px !important;
  line-height: 1.45;
}

.gn-app-shell .gn-model-catalog-step .gn-picker-card__requirements {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px !important;
  font-weight: 600;
  color: #526279;
}

/* ------------------------------------------------------------------
   12. Large-screen and responsive behavior
   ------------------------------------------------------------------ */
@media (min-width: 1700px) {
  :root { --gn-p5-content-max: 1510px; }
}

@media (max-width: 1366px) {
  .gn-app-shell .gn-model-catalog-step .gn-picker-grid--ModelsType {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .gn-app-shell .gn-model-overview--rfm .d-inline-flex.pb-3,
  .gn-app-shell .gn-model-overview--clv .d-inline-flex.pb-3 {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .gn-app-shell .gn-model-overview--basket > .row.mt-4:not(.justify-content-center) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .gn-app-shell .gn-analytical-workspace .pill-tabs {
    gap: 18px;
    margin-bottom: 14px;
  }

  .gn-app-shell .gn-model-catalog-step .gn-picker-grid--ModelsType {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 12px;
    padding-right: 12px;
  }

  .gn-app-shell .gn-model-overview--rfm .d-inline-flex.pb-3,
  .gn-app-shell .gn-model-overview--clv .d-inline-flex.pb-3,
  .gn-app-shell .gn-model-overview--basket > .row.mt-4:not(.justify-content-center) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gn-app-shell .gn-ai-advisor-workspace,
  .gn-app-shell .gn-model-overview--rfm > .row,
  .gn-app-shell .gn-model-overview--clv > .row,
  .gn-app-shell .gn-model-overview--abc > .row {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .gn-app-shell .gn-model-catalog-step .gn-picker-grid--ModelsType,
  .gn-app-shell .gn-model-overview--rfm .d-inline-flex.pb-3,
  .gn-app-shell .gn-model-overview--clv .d-inline-flex.pb-3,
  .gn-app-shell .gn-model-overview--basket > .row.mt-4:not(.justify-content-center) {
    grid-template-columns: 1fr;
  }

  .gn-app-shell .gn-model-catalog-step .gn-picker-card {
    min-height: 0 !important;
  }

  .gn-app-shell .gn-model-overview--cohort > .row.mt-4.mb-4,
  .gn-app-shell .gn-model-overview--new-returning > .row,
  .gn-app-shell .gn-model-overview--segmentation > .row.mt-4.mb-4 {
    padding: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gn-app-shell .gn-analytical-workspace > [ng-if^="tabPage"],
  .gn-app-shell .gn-analytical-workspace > [ng-show^="tabPage"],
  .gn-app-shell .gn-model-catalog-step .gn-picker-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}