/* --- Theme tokens --- */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --primary: #2563eb;
  --primary-contrast: #ffffff;
  --accent: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --border: #e2e8f0;
  --shadow: 0 8px 30px rgba(2,6,23,.08);
  --radius: 14px;
  --space: clamp(10px, 2vmin, 22px);
  --code: #0b1220;
  --code-bg: #f1f5f9;
}

:root.theme-dark {
  --bg: #0b1220;
  --surface: #12192b;
  --text: #e2e8f0;
  --muted: #93a1b2;
  --primary: #60a5fa;
  --primary-contrast: #0b1220;
  --accent: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --border: #1f2a44;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --code: #e2e8f0;
  --code-bg: #0f172a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #c7d2fe40, transparent 50%),
              radial-gradient(900px 600px at 90% 0%, #99f6e440, transparent 50%),
              var(--bg);
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space);
  padding: calc(var(--space) * 0.75) calc(var(--space) * 1.2);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(160%) blur(10px);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--primary-contrast);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.brand-text { display: flex; flex-direction: column; font-size: 14px; }
.brand-text .muted { color: var(--muted); font-weight: 500; }

/* Progress */
.progress-wrap { height: 6px; background: transparent; }
.progress-bar {
  height: 6px; width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 6px;
  box-shadow: var(--shadow);
  transition: width .25s ease;
  margin: 0 10px;
}

/* Buttons */
.btn {
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: var(--shadow);
  font-weight: 600;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--primary); color: var(--primary-contrast); border: none; }
.btn--secondary { background: var(--surface); }

/* Layout */
.presentation-container {
  max-width: 1100px;
  margin: 22px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
  min-height: 72vh;
  display: grid;
  align-items: stretch;
}

.slide {
  display: none;
  padding: clamp(20px, 4vw, 48px);
}
.slide.active { display: block; }

h1 { font-size: clamp(26px, 4.2vw, 44px); line-height: 1.15; margin: 0 0 10px;}
h2 { font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 10px;}
h3 { font-size: clamp(18px, 2.6vw, 24px); margin: 14px 0 6px; }

.subtitle { color: var(--muted); margin-top: 2px; }
.note { color: var(--muted); font-style: italic; margin-top: 8px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.pill {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px; font-weight: 600; font-size: 14px;
}

.agenda { display: grid; gap: 10px; padding-left: 1.2rem; }
.tip { color: var(--muted); margin-top: 16px; }

.definition-box {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-left: 5px solid var(--accent);
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

.works-fails { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.works-fails .box { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); padding: 14px; border-radius: 12px; border: 1px solid var(--border); }
.works-fails .box ul { margin: 10px 0 0 18px; }

.bullets { margin-top: 8px; }
.bullets li { margin: 6px 0; }

.step-list { counter-reset: step; display: grid; gap: 10px; margin-top: 8px; }
.step-list li { list-style: none; position: relative; padding-left: 36px; background: color-mix(in srgb, var(--warning) 10%, var(--surface)); border-radius: 10px; border: 1px solid var(--border); padding: 12px 14px 12px 40px; }
.step-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: grid; place-items: center; font-weight: 800;
  color: var(--primary-contrast);
  background: var(--primary); border-radius: 999px; box-shadow: var(--shadow);
}

.code {
  background: var(--code-bg);
  color: var(--code);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  overflow: auto;
  box-shadow: var(--shadow);
}

.controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }

/* Interactive timelines */
.timeline {
  position: relative;
  width: 100%;
  height: 180px; /* JS overrides based on number of activities */
  border: 1px dashed var(--border);
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 40px, color-mix(in srgb, var(--muted) 10%, transparent) 40px 41px),
    color-mix(in srgb, var(--primary) 5%, var(--surface));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.activity-bar {
  position: absolute; top: 0; height: 28px;
  border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: #fff; padding: 0 8px;
  transform: none;
}
.activity-bar.pending { background: #64748b; }
.activity-bar.selected { background: #22c55e; box-shadow: 0 0 0 3px #22c55e30; }
.activity-bar.rejected { background: #ef4444; box-shadow: 0 0 0 3px #ef444430; }

.step-info {
  margin-top: 10px; padding: 10px 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px; min-height: 46px;
}

/* Knapsack */
.knapsack-items { display: flex; gap: 10px; flex-wrap: wrap; }
.knapsack-item {
  flex: 1 1 220px; min-width: 210px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border: 1px solid var(--border); padding: 12px; border-radius: 12px; text-align: center;
}
.knapsack-item.selected { outline: 3px solid #22c55e; }
.knapsack-item.partial { outline: 3px solid #f59e0b; }
.knapsack-visual { height: 60px; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.knapsack-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--warning)); transition: width .25s ease; }

/* Graphs */
.graph-container {
  position: relative;
  width: min(100%, 720px);
  height: 480px;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  box-shadow: var(--shadow);
  overflow: hidden;
}
svg.graph { width: 100%; height: 100%; }
.edge { stroke: #94a3b8; stroke-width: 2; opacity: .6; transition: all .2s ease; }
.edge.selected { stroke: #22c55e; stroke-width: 4; opacity: 1; }
.edge.rejected { stroke: #ef4444; stroke-width: 3; opacity: .9; }
.weight-bg { fill: #ffffff; fill-opacity: .8; stroke: #cbd5e1; rx: 4; }
.weight-text { font-size: 12px; font-weight: 800; fill: #0f172a; }
.node { fill: #2563eb; stroke: #1d4ed8; stroke-width: 2; }
.node-label { fill: #fff; font-weight: 900; font-size: 14px; text-anchor: middle; dominant-baseline: central; }

/* Footer nav */
.navigation {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 12px 14px; max-width: 1100px; margin: 10px auto 26px;
}
.slide-counter { color: var(--muted); font-weight: 700; }
.table-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.compare thead th { text-align: left; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--text); }

/* Accessibility */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, #0000); outline-offset: 2px; }
kbd { background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 6px; padding: 2px 6px; border: 1px solid var(--border); }