/* Shared stylesheet for STOR 323 ML pipeline lessons & reference docs.
   Tufte-ish: serif body, narrow measure, generous whitespace, quiet color. */

:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --paper: #fdfcf9;
  --paper-raised: #f5f3ee;
  --rule: #ddd8cc;
  --accent: #2f6fb3;
  --accent-soft: #e8f0f9;
  --warn: #b3502f;
  --warn-soft: #fbeee8;
  --good: #2f7d4f;
  --good-soft: #e9f5ee;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6df;
    --ink-soft: #b3b0a6;
    --paper: #1c1b18;
    --paper-raised: #26241f;
    --rule: #3a382f;
    --accent: #7bb0e8;
    --accent-soft: #1f2c38;
    --warn: #e08a63;
    --warn-soft: #3a2620;
    --good: #7fcf9f;
    --good-soft: #1e3126;
  }
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.4rem;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  margin: 0 0 0.3rem;
}

h2 {
  font-size: 1.3rem;
  margin: 2.6rem 0 0.8rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
}

h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 1.6rem 0 0.5rem;
}

p { margin: 0.9rem 0; }

.subtitle {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 1.8rem;
}

.formula {
  font-family: var(--mono);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-size: 0.95rem;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.8rem 1.1rem;
  margin: 1.3rem 0;
  border-radius: 0 6px 6px 0;
}

.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.good { border-left-color: var(--good); background: var(--good-soft); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule);
}

th {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem;
  margin: 1.2rem 0;
}

.pipeline .node {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
}

.pipeline .arrow { color: var(--ink-soft); }

nav.crumbs {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
nav.crumbs a { color: var(--accent); }

a { color: var(--accent); }

.footer-links {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer-links a { display: inline-block; margin-right: 1.2rem; }

.ask-agent {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-top: 2.5rem;
}

/* --- Quiz widget --- */
.quiz {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
  margin: 1.6rem 0;
  background: var(--paper-raised);
}

.quiz .q {
  font-family: var(--sans);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.quiz input[type="text"] {
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 100%;
  max-width: 22rem;
  background: var(--paper);
  color: var(--ink);
}

.quiz button {
  font-family: var(--sans);
  font-size: 0.85rem;
  margin-left: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  border-radius: 4px;
  cursor: pointer;
}

.quiz button:hover { opacity: 0.9; }

.quiz .feedback {
  font-family: var(--sans);
  font-size: 0.88rem;
  margin-top: 0.6rem;
  min-height: 1.2rem;
}

.quiz .feedback.correct { color: var(--good); }
.quiz .feedback.incorrect { color: var(--warn); }

.quiz .reveal-btn {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
  margin-top: 0.4rem;
  margin-left: 0;
}

/* --- Visual analogy cards --- */
.card-pair {
  display: flex;
  gap: 1rem;
  margin: 1.2rem 0;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  min-width: 12rem;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
}

.card .card-icon { font-size: 1.6rem; display: block; margin-bottom: 0.3rem; }
.card .card-title { font-family: var(--sans); font-weight: 700; margin-bottom: 0.3rem; }
.card.hidden { background: var(--warn-soft); border-color: var(--warn); }
.card.guess { background: var(--good-soft); border-color: var(--good); }

/* --- Bar chart (argmax) --- */
.barchart {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  height: 160px;
  margin: 1.4rem 0 0.4rem;
  padding: 0 0.5rem;
  border-bottom: 2px solid var(--rule);
}

.barchart .bar {
  flex: 1;
  background: var(--rule);
  border-radius: 4px 4px 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.barchart .bar.winner { background: var(--accent); }
.barchart .bar .bar-val {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
  position: absolute;
  top: -1.4rem;
}
.barchart .bar.winner .bar-val { color: var(--accent); font-weight: 700; }
.barchart-labels {
  display: flex;
  gap: 0.8rem;
  padding: 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-soft);
}
.barchart-labels span { flex: 1; }

/* --- Funnel (conditional probability) --- */
.funnel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin: 1.4rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.funnel .stage {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  text-align: center;
  min-width: 8rem;
}
.funnel .stage.result { border-color: var(--accent); background: var(--accent-soft); }
.funnel .arrow { font-size: 1.4rem; color: var(--ink-soft); }

/* --- Receipt (sum notation) --- */
.receipt {
  font-family: var(--mono);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  max-width: 18rem;
}
.receipt .line { display: flex; justify-content: space-between; padding: 0.15rem 0; }
.receipt .total { border-top: 1px dashed var(--rule); margin-top: 0.4rem; padding-top: 0.4rem; font-weight: 700; }

/* --- Side-by-side group comparison --- */
.compare-grid {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin: 1.4rem 0;
}
.compare-col {
  flex: 1;
  min-width: 11rem;
}
.compare-col .compare-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0.4rem;
}
.compare-col .barchart { height: 130px; gap: 1rem; }
.compare-col .barchart .bar.fn { background: var(--rule); }
.compare-col .barchart .bar.fp { background: var(--warn); }

/* --- Line-fit interactive widget --- */
.linefit-wrap {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1.4rem 0;
  background: var(--paper-raised);
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.linefit-svg {
  width: 100%;
  max-width: 320px;
  flex: 1 1 300px;
}
.linefit-svg .axis { stroke: var(--ink-soft); stroke-width: 1; }
.linefit-svg .axis-label { font-family: var(--sans); font-size: 10px; fill: var(--ink-soft); text-anchor: middle; }
.linefit-svg .dots circle { fill: var(--ink); }
.linefit-svg .fit-line { stroke: var(--warn); stroke-width: 2.5; }

.linefit-controls {
  flex: 1 1 200px;
  font-family: var(--sans);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.linefit-controls label { display: flex; flex-direction: column; gap: 0.3rem; }
.linefit-controls input[type="range"] { width: 100%; }
.linefit-controls .b0-val, .linefit-controls .b1-val {
  font-family: var(--mono);
  color: var(--accent);
  align-self: flex-end;
}
.linefit-error {
  font-size: 0.95rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
}
.linefit-error strong { color: var(--warn); font-family: var(--mono); }

/* --- Path game exercise widget --- */
.pathgame-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; margin: 1.4rem 0; }
.pathgame-trail-wrap { position: sticky; top: 1rem; }
.pathgame-trail-svg { width: 100%; height: auto; }

.pathgame-stop-ring { fill: var(--paper-raised); stroke: var(--rule); stroke-width: 2; }
.pathgame-stop.locked .pathgame-stop-icon { opacity: 0.35; }
.pathgame-stop.current .pathgame-stop-ring { fill: var(--accent); stroke: var(--accent); animation: pathgame-pulse 1.8s ease-in-out infinite; }
.pathgame-stop.done .pathgame-stop-ring { fill: var(--good); stroke: var(--good); }
.pathgame-stop-icon { font-family: var(--sans); font-size: 20px; text-anchor: middle; dominant-baseline: central; fill: var(--ink-soft); }
.pathgame-stop.current .pathgame-stop-icon, .pathgame-stop.done .pathgame-stop-icon { fill: var(--paper); opacity: 1; }
.pathgame-trail-path { stroke: var(--rule); stroke-width: 3; fill: none; stroke-linecap: round; }

@keyframes pathgame-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50% { filter: drop-shadow(0 0 6px var(--accent)); }
}

.pathgame-card {
  border: 1px solid var(--rule); border-radius: 10px; padding: 1.4rem 1.5rem;
  background: var(--paper-raised); font-family: var(--sans); min-height: 320px;
}
.pathgame-step-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 0.5rem; }
.pathgame-scenario { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; margin-bottom: 0.9rem; color: var(--ink); }
.pathgame-ask { font-weight: 700; color: var(--accent); margin-bottom: 1rem; }

.pathgame-options { display: flex; flex-direction: column; gap: 0.7rem; }
.pathgame-options button {
  font-family: var(--sans); font-size: 0.95rem; text-align: left;
  padding: 0.9rem 1.1rem; border: 1px solid var(--rule); border-radius: 9px;
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.pathgame-options button:hover { border-color: var(--accent); background: var(--accent-soft); }

.pathgame-feedback.wrong { border-left: 4px solid var(--warn); padding-left: 1rem; }
.pathgame-feedback.wrong .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn); font-weight: 700; margin-bottom: 0.4rem; }
.pathgame-feedback.wrong h3 { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.pathgame-feedback.wrong p { line-height: 1.5; margin: 0 0 1.1rem; color: var(--ink); }

.pathgame-feedback.correct { border-left: 4px solid var(--good); padding-left: 1rem; }
.pathgame-feedback.correct .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--good); font-weight: 700; margin-bottom: 0.4rem; }
.pathgame-feedback.correct h3 { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.pathgame-feedback.correct p { line-height: 1.5; margin: 0 0 1.1rem; color: var(--ink); }

.pathgame-action { font-family: var(--sans); font-size: 0.88rem; padding: 0.6rem 1.2rem; border: none; border-radius: 7px; cursor: pointer; color: var(--paper); }
.pathgame-feedback.wrong .pathgame-action { background: var(--warn); }
.pathgame-feedback.correct .pathgame-action { background: var(--good); }

.pathgame-win-links { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; }

/* --- Softmax "talent show" widget --- */
.softmax-wrap {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1.4rem 0;
  background: var(--paper-raised);
}
.softmax-sliders {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.softmax-sliders label { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 9rem; }
.softmax-sliders input { width: 100%; }
.softmax-sliders .raw-val { font-family: var(--mono); color: var(--accent); align-self: flex-end; }
.softmax-chart .bar { background: var(--rule); transition: height 0.1s; }
.softmax-chart .bar.winner { background: var(--good); }
.softmax-sum { margin-top: 0.6rem; }
.softmax-sum strong { color: var(--good); font-family: var(--mono); }

/* --- kNN "ask your neighbors" widget --- */
.knn-wrap {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1.4rem 0;
  background: var(--paper-raised);
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.knn-svg {
  width: 100%;
  max-width: 320px;
  flex: 1 1 300px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: crosshair;
}
.knn-bg { fill: var(--paper); }
.knn-pt.a { fill: var(--accent); }
.knn-pt.b { fill: var(--warn); }
.knn-pt { stroke: transparent; stroke-width: 3; }
.knn-pt.knn-selected { stroke: var(--good); }
.knn-radius { fill: none; stroke: var(--good); stroke-dasharray: 4 3; stroke-width: 1.5; opacity: 0.6; }
.knn-query { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.knn-query.predict-a { stroke: var(--accent); }
.knn-query.predict-b { stroke: var(--warn); }

.knn-controls {
  flex: 1 1 180px;
  font-family: var(--sans);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.knn-controls label { display: flex; flex-direction: column; gap: 0.3rem; }
.knn-hint { color: var(--ink-soft); font-size: 0.8rem; margin: 0; }
.knn-result {
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
  font-size: 0.95rem;
}
.knn-result strong { color: var(--good); }

/* --- Threshold sweep widget --- */
.threshold-wrap {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1.4rem 0;
  background: var(--paper-raised);
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.threshold-main { flex: 2 1 320px; }
.threshold-row-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.6rem;
}
.threshold-strip { width: 100%; display: block; }
.th-dot.pos { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.5; }
.th-dot.neg { fill: var(--good-soft); stroke: var(--good); stroke-width: 1.5; }
.th-dot.pos.flagged { fill: var(--warn); }
.th-dot.neg.flagged { fill: var(--warn); }
.th-dot-tick { stroke: var(--rule); stroke-width: 1; }
.th-dot-label { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-soft); text-anchor: middle; }
.th-line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 2; }
.threshold-axis-label { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.3rem; }

.threshold-side {
  flex: 1 1 220px;
  font-family: var(--sans);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.threshold-side label { display: flex; flex-direction: column; gap: 0.3rem; }
.threshold-rates { display: flex; gap: 1.2rem; }
.threshold-rates strong { font-family: var(--mono); color: var(--warn); }
.roc-mini { width: 100%; max-width: 140px; }
.roc-diag { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 2; }
.roc-axis { stroke: var(--ink-soft); stroke-width: 1; }
.roc-trail-dot { fill: var(--accent); opacity: 0.5; }
.roc-current { fill: var(--warn); }
.roc-caption { font-size: 0.78rem; color: var(--ink-soft); }

/* --- Confusion matrix, big and color-coded --- */
.cm-wrap { flex: 1 1 100%; }
.cm-table {
  width: 100%;
  max-width: 30rem;
  border-collapse: separate;
  border-spacing: 5px;
  font-family: var(--sans);
  margin: 0.2rem 0 0.8rem;
}
.cm-table th, .cm-table td { padding: 0; border: none; }
.cm-corner { }
.cm-col {
  font-size: 0.78rem; color: var(--ink-soft); font-weight: 600;
  padding-bottom: 0.4rem !important; text-align: center;
}
.cm-col .cm-sub { font-weight: 400; font-family: var(--mono); font-size: 0.7rem; }
.cm-row {
  font-size: 0.78rem; color: var(--ink-soft); font-weight: 600;
  text-align: right; padding-right: 0.6rem !important; white-space: nowrap;
}
.cm-cell {
  border-radius: 8px; text-align: center; padding: 0.9rem 0.5rem !important;
  display: table-cell; vertical-align: middle;
}
.cm-cell.correct { background: var(--good-soft); border: 2px solid var(--good); }
.cm-cell.wrong { background: var(--warn-soft); border: 2px solid var(--warn); }
.cm-num {
  display: block; font-family: var(--mono); font-size: 2rem; font-weight: 700; line-height: 1;
}
.cm-cell.correct .cm-num { color: var(--good); }
.cm-cell.wrong .cm-num { color: var(--warn); }
.cm-label {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); margin-top: 0.3rem;
}
.cm-rule { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; max-width: 42rem; }
.cm-rule strong { color: var(--ink); }