/* Graphite Note Premium Pass 4
 * Overview clarity, AI overview surfaces, loading motion and TS validation layout.
 * Loaded last. Presentation only; no model/API calculations are changed.
 */

:root {
  --gn4-ink: #0b1f38;
  --gn4-text: #24364d;
  --gn4-muted: #667990;
  --gn4-line: #d9e3ef;
  --gn4-line-strong: #c6d4e5;
  --gn4-blue: #1769ff;
  --gn4-cyan: #31b8e6;
  --gn4-ai-soft: #f7fbff;
  --gn4-ai-pill: #edf6ff;
}

/* --------------------------------------------------------------------------
   1. Performance context
   The old "Overview metric · F1/R²" pill looked like a quality verdict and was
   not the same thing as model readiness. The KPI cards already provide context.
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-model-performance-context {
  gap: 4px !important;
  margin-bottom: 2px !important;
}
.gn-app-shell .gn-model-performance-context__metric {
  display: none !important;
}
.gn-app-shell .gn-model-performance-context__copy {
  color: var(--gn4-muted) !important;
}
.gn-app-shell .gn-model-performance-context__target {
  color: var(--gn4-ink) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   2. AI/model overview surface
   Light evidence panel instead of a dark marketing surface. One accent rail,
   no duplicate inner line, no shimmer, and markdown remains readable.
   -------------------------------------------------------------------------- */
.gn-app-shell .actionable-insights-bgr,
.gn-app-shell .gn-decision-surface {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px 20px !important;
  border: 1px solid var(--gn4-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--gn4-text) !important;
  box-shadow: inset 3px 0 0 var(--gn4-cyan), 0 2px 8px rgba(13, 39, 74, .035) !important;
}

/* Kill the old decorative grid/second vertical rail. */
.gn-app-shell .actionable-insights-bgr::after,
.gn-app-shell .gn-decision-surface::after {
  content: none !important;
  display: none !important;
}
.gn-app-shell .actionable-insights-bgr::before {
  content: none !important;
  display: none !important;
}

/* Regression/classification overview keeps one quiet source eyebrow. */
.gn-app-shell .gn-decision-surface::before {
  content: 'GRAPHITE NOTE AI · MODEL OVERVIEW' !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 10px !important;
  background: none !important;
  color: #2479a7 !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
}

.gn-app-shell .actionable-insights-bgr h1,
.gn-app-shell .actionable-insights-bgr h2,
.gn-app-shell .actionable-insights-bgr h3,
.gn-app-shell .actionable-insights-bgr h4,
.gn-app-shell .actionable-insights-bgr h5,
.gn-app-shell .actionable-insights-bgr h6,
.gn-app-shell .gn-decision-surface h1,
.gn-app-shell .gn-decision-surface h2,
.gn-app-shell .gn-decision-surface h3,
.gn-app-shell .gn-decision-surface h4,
.gn-app-shell .gn-decision-surface h5,
.gn-app-shell .gn-decision-surface h6 {
  color: var(--gn4-ink) !important;
  font-family: Inter, Arial, sans-serif !important;
}

.gn-app-shell .actionable-insights-bgr h4 {
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}

.gn-app-shell .actionable-insights-bgr p,
.gn-app-shell .actionable-insights-bgr li,
.gn-app-shell .actionable-insights-bgr span,
.gn-app-shell .actionable-insights-content,
.gn-app-shell .actionable-insights-content p,
.gn-app-shell .actionable-insights-content li,
.gn-app-shell .gn-decision-surface p,
.gn-app-shell .gn-decision-surface li,
.gn-app-shell .gn-decision-surface span,
.gn-app-shell .gn-decision-surface .normal {
  color: var(--gn4-text) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

/* This was the second cyan line visible inside the Time Series overview. */
.gn-app-shell .actionable-insights-content,
.gn-app-shell .actionable-insights-bgr .actionable-insights-content,
.gn-app-shell .gn-decision-surface .actionable-insights-content {
  border-left: 0 !important;
  padding-left: 0 !important;
  max-width: 1180px;
}

/* Markdown emphasis should look like emphasis, not pale chips with white text. */
.gn-app-shell .actionable-insights-bgr strong,
.gn-app-shell .gn-decision-surface strong,
.gn-app-shell .actionable-insights-content strong {
  color: var(--gn4-ink) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}
.gn-app-shell .actionable-insights-bgr mark,
.gn-app-shell .actionable-insights-bgr .blueShaded,
.gn-app-shell .gn-decision-surface mark,
.gn-app-shell .gn-decision-surface .blueShaded {
  color: #184f7a !important;
  background: #eaf5ff !important;
  border-radius: 3px !important;
  padding: 1px 4px !important;
}
.gn-app-shell .actionable-insights-bgr a,
.gn-app-shell .gn-decision-surface a {
  color: #125fc2 !important;
  font-weight: 650 !important;
}

/* Premium, quiet AI badge. Shimmer was visually noisy and could wash out text. */
.gn-app-shell .actionable-insights-bgr .gn-ai-badge,
.gn-app-shell .gn-decision-surface .gn-ai-badge,
.gn-app-shell bayesian-overview .gn-ai-badge {
  min-height: 24px !important;
  padding: 3px 8px !important;
  border: 1px solid #cce1f5 !important;
  border-radius: 999px !important;
  background: var(--gn4-ai-pill) !important;
  color: #246b9d !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 700 !important;
  animation: none !important;
}

/* Keep long generated narratives readable, not edge-to-edge walls of text. */
.gn-app-shell .actionable-insights-bgr .actionable-insights-content > :first-child,
.gn-app-shell .gn-decision-surface > .normal > :first-child {
  margin-top: 0 !important;
}
.gn-app-shell .actionable-insights-bgr .actionable-insights-content p,
.gn-app-shell .gn-decision-surface p {
  margin-bottom: 8px !important;
}
.gn-app-shell .actionable-insights-bgr .actionable-insights-content ul,
.gn-app-shell .gn-decision-surface ul {
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  padding-left: 20px !important;
}

/* --------------------------------------------------------------------------
   3. Loading indicator
   Unique spinner class avoids legacy .loader animation conflicts. It always
   communicates progress; reduced-motion uses a slower rotation, not a frozen UI.
   -------------------------------------------------------------------------- */
q-loading-indicator #modal,
.gn-loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  min-height: 92px !important;
  z-index: 9998 !important;
  cursor: progress !important;
}
q-loading-indicator #modalBackground {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background: rgba(248, 251, 255, .80) !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  backdrop-filter: blur(1px);
}
q-loading-indicator #modalContent {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}
q-loading-indicator .gn-loader-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  border: 1px solid #d9e4f1 !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 4px 14px rgba(17, 40, 72, .08) !important;
}
q-loading-indicator .gn-loader-spinner {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  box-sizing: border-box !important;
  border: 2px solid #d8e4f2 !important;
  border-right-color: var(--gn4-blue) !important;
  border-bottom-color: var(--gn4-blue) !important;
  border-radius: 50% !important;
  transform: translateZ(0) rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: gn4-loader-spin .72s linear infinite !important;
}
q-loading-indicator .gn-loader-label {
  color: #52657d !important;
  font-size: 14px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
@keyframes gn4-loader-spin {
  from { transform: translateZ(0) rotate(0deg); }
  to { transform: translateZ(0) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  q-loading-indicator .gn-loader-spinner {
    animation: gn4-loader-spin 1.8s linear infinite !important;
  }
}

/* --------------------------------------------------------------------------
   4. Time Series model-fit layout
   Prevent validation metrics from extending beyond the card at laptop widths.
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-chart-card > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.gn-app-shell .bayesian-fit-summary,
.gn-app-shell .bayesian-fit-summary.col-12 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  grid-template-columns: minmax(185px, 230px) minmax(0, 1fr) !important;
  gap: 14px !important;
  overflow: hidden;
}
.gn-app-shell .bayesian-fit-validation {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden;
}
.gn-app-shell .bayesian-fit-metrics {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(4, minmax(86px, 1fr)) !important;
  gap: 7px !important;
}
.gn-app-shell .bayesian-fit-metric {
  overflow: hidden;
}
.gn-app-shell .bayesian-fit-metric dt,
.gn-app-shell .bayesian-fit-metric dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .gn-app-shell .bayesian-fit-summary,
  .gn-app-shell .bayesian-fit-summary.col-12 {
    grid-template-columns: 1fr !important;
    overflow: visible;
  }
  .gn-app-shell .bayesian-fit-selector {
    max-width: 320px !important;
  }
}
@media (max-width: 720px) {
  .gn-app-shell .bayesian-fit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gn-app-shell .actionable-insights-bgr,
  .gn-app-shell .gn-decision-surface {
    padding: 15px 14px !important;
  }
}