﻿@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --background-color: #0c121b;
  --section-divider-bg: radial-gradient(circle at 20% 20%, #152537 0%, #0a0f16 72%);

  --heading-font: "IBM Plex Sans", Verdana, sans-serif;
  --body-font: "IBM Plex Sans", Arial, sans-serif;
  --base-font-size: 32px;
  --text-size: 15pt;
  --h1-size: 50pt;
  --h2-size: 32pt;
  --h3-size: 20pt;
  --footnote-size: 10pt;

  --primary-color: #4db6c7;
  --secondary-color: #ffc857;
  --text-color: #eaf0f7;
  --muted-color: #9db0c3;
  --line-color: #27425e;

  --slide-padding: 56px;
  --slide-padding-top: 34px;
  --content-gap: 16px;

  --box-radius: 10px;
  --box-bg: rgba(16, 31, 46, 0.8);
  --box-border: rgba(90, 137, 178, 0.4);
  --accent-border-width: 5px;

  --blue: #4db6c7;
  --blue-bg: rgba(36, 86, 113, 0.4);
  --blue-border: rgba(87, 161, 206, 0.7);

  --orange: #ffc857;
  --orange-bg: rgba(95, 72, 24, 0.45);
  --orange-border: rgba(255, 207, 112, 0.72);

  --green: #76d6a4;
  --green-bg: rgba(36, 90, 66, 0.45);
  --green-border: rgba(131, 220, 170, 0.7);

  --gray: #9db0c3;
  --gray-bg: rgba(67, 82, 99, 0.45);
  --gray-border: rgba(146, 169, 190, 0.7);
}

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
}

.reveal-viewport {
  background: var(--background-color);
}

.reveal-viewport.is-section-divider .slide-background.present {
  background: var(--section-divider-bg) !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
  letter-spacing: 0.01em;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); }
.reveal h3 { font-size: var(--h3-size); }

.reveal p,
.reveal li,
.reveal .callout,
.reveal blockquote {
  font-size: var(--text-size);
  color: var(--text-color);
}

.reveal a {
  color: #9ad7ff;
}

.reveal .slides section {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}

.reveal .slides section.stack {
  padding: 0 !important;
}

.reveal .slides section > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--content-gap);
  padding-top: 10px;
  text-align: left;
}

.reveal .slides section > h2 {
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line-color);
}

.reveal .slides section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #4db6c7 0%, #ffc857 50%, #4db6c7 100%);
}

.reveal .slides section > .footnote {
  position: absolute;
  bottom: 12px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  font-size: var(--footnote-size);
  color: var(--muted-color);
}

.reveal .slides section.section-divider {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.reveal .slides section.section-divider::before {
  height: 6px;
  background: linear-gradient(90deg, #4db6c7 0%, #7bc2c8 35%, #ffc857 75%, #ffd98f 100%);
}

.reveal .slides section.section-divider h1 {
  font-size: 56pt;
  margin: 8px 0;
  border-bottom: none;
}

.reveal .slides section.section-divider p {
  font-size: 19pt;
  color: var(--muted-color);
}

.title-kicker {
  font-size: 15pt !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8fc3e5 !important;
}

.report-meta {
  font-size: 14pt !important;
  color: #b8c9d9 !important;
}

.text-lg { font-size: 17pt !important; }
.text-xl { font-size: 20pt !important; }
.text-2xl { font-size: 24pt !important; }
.text-3xl { font-size: 28pt !important; }
.text-4xl { font-size: 32pt !important; }
.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.font-bold { font-weight: 600; }

.box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: var(--box-radius);
  padding: 16px 18px;
  margin: 0;
  backdrop-filter: blur(2px);
}

.box-dark {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.box p,
.box li,
.box h3,
.box strong {
  color: #ecf3fa;
}

.box h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.reveal ul,
.reveal ol {
  margin-top: 8px;
  margin-bottom: 0;
}

.reveal li {
  margin-bottom: 6px;
}

.reveal code {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12pt;
  color: #ffd88d;
  background: rgba(20, 33, 50, 0.8);
  padding: 2px 6px;
  border-radius: 5px;
}

.callout {
  border-left: var(--accent-border-width) solid var(--primary-color);
  padding: 11px 14px;
  margin: 0;
  border-radius: var(--box-radius);
}

.callout p,
.callout li,
.callout strong {
  color: #eef5fd;
}

.callout-blue {
  border-left-color: var(--blue);
  background: var(--blue-bg);
}

.callout-orange {
  border-left-color: var(--orange);
  background: var(--orange-bg);
}

.callout-green {
  border-left-color: var(--green);
  background: var(--green-bg);
}

.callout-gray {
  border-left-color: var(--gray);
  background: var(--gray-bg);
}

.callout-bordered {
  border: 1px solid var(--box-border);
  border-left: var(--accent-border-width) solid var(--primary-color);
}

.callout-bordered.callout-blue {
  border-color: var(--blue-border);
  border-left-color: var(--blue);
}

.callout-bordered.callout-orange {
  border-color: var(--orange-border);
  border-left-color: var(--orange);
}

.callout-bordered.callout-green {
  border-color: var(--green-border);
  border-left-color: var(--green);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kpi-card {
  border: 1px solid rgba(123, 173, 211, 0.52);
  background: rgba(14, 28, 42, 0.82);
  border-radius: 10px;
  padding: 12px;
}

.kpi-label {
  margin: 0;
  font-size: 12pt !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9cb6cc !important;
}

.kpi-value {
  margin: 6px 0 0 0;
  font-size: 28pt !important;
  font-weight: 700;
  color: #f7fbff !important;
}

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  font-size: 11pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.status-pill.keep {
  background: rgba(118, 214, 164, 0.2);
  border: 1px solid rgba(118, 214, 164, 0.58);
  color: #9ce6c3;
}

.status-pill.improve {
  background: rgba(77, 182, 199, 0.18);
  border: 1px solid rgba(77, 182, 199, 0.58);
  color: #8ddbe6;
}

.status-pill.replace {
  background: rgba(255, 143, 112, 0.18);
  border: 1px solid rgba(255, 143, 112, 0.58);
  color: #ffb6a2;
}

.priority-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.priority-card h3 {
  min-height: 52px;
}

.phase-list {
  margin: 0;
  padding-left: 24px;
}

.phase-list li {
  margin-bottom: 10px;
}

.source-list li {
  margin-bottom: 8px;
}
