/* ------------------------------------------------------------------
   Module 4 workbook styles.
   .run-local  = files & setup box (blue)
   .web        = work done on a database website (green)
   .terminal   = shell commands for RStudio's Terminal tab (amber)
   .cytoscape  = work done in the Cytoscape desktop app (grey)
   .provenance = data-provenance / caveat note
   ------------------------------------------------------------------ */

:root {
  --local-accent: #1f6feb;
  --local-bg: #eef4fd;
  --local-bg-dark: #10203a;
  --browser-accent: #2f7d4f;
  --browser-bg: #eef7f1;
  --browser-bg-dark: #0f2418;
  --warn-accent: #b8860b;
  --warn-bg: #fdf6e3;
  --warn-bg-dark: #2c2410;
  --ink: #1b2430;          /* explicit body ink for the callouts */
}

/* ---------- "run this locally" block ---------- */
.run-local {
  border: 1px solid rgba(31, 111, 235, 0.35);
  border-left: 5px solid var(--local-accent);
  background: var(--local-bg);
  border-radius: 6px;
  padding: 0.9em 1.1em 0.6em;
  color: var(--ink);
  margin: 1.4em 0;
}

.run-local > p:first-child { margin-top: 0; }
.run-local > :last-child { margin-bottom: 0.4em; }

.run-local::before {
  content: "📁  FILES & SETUP";
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--local-accent);
  margin-bottom: 0.6em;
}

/* Code inside a local block is reference material, not editable — make that read. */
.run-local pre,
.run-local code {
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(31, 111, 235, 0.25);
  border-radius: 4px;
}

/* ---------- website block ---------- */
.web {
  border: 1px solid rgba(47, 125, 79, 0.35);
  border-left: 5px solid var(--browser-accent);
  background: var(--browser-bg);
  border-radius: 6px;
  padding: 0.9em 1.1em 0.6em;
  color: var(--ink);
  margin: 1.4em 0;
}
.web > p:first-child { margin-top: 0; }
.web > :last-child { margin-bottom: 0.4em; }
.web::before {
  content: "🌐  IN YOUR BROWSER — a database website, not RStudio";
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--browser-accent);
  margin-bottom: 0.6em;
}

/* ---------- terminal block ---------- */
.terminal {
  border: 1px solid rgba(90, 70, 20, 0.45);
  border-left: 5px solid #8a6508;
  background: #f7f3ea;
  border-radius: 6px;
  padding: 0.9em 1.1em 0.6em;
  color: var(--ink);
  margin: 1.4em 0;
}

.terminal > p:first-child { margin-top: 0; }
.terminal > :last-child { margin-bottom: 0.4em; }

.terminal::before {
  content: "⌨  TERMINAL — paste into RStudio's Terminal tab, not the R console";
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: #8a6508;
  margin-bottom: 0.6em;
}

.terminal pre,
.terminal code {
  color: var(--ink);
  background: #fffdf7;
  border: 1px solid rgba(138, 101, 8, 0.25);
  border-radius: 4px;
}

/* ---------- data-provenance / caveat note ---------- */
.provenance {
  border: 1px solid rgba(184, 134, 11, 0.4);
  border-left: 5px solid var(--warn-accent);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 0.8em 1.1em;
  color: var(--ink);
  margin: 1.3em 0;
  font-size: 0.94rem;
}

.provenance::before {
  content: "ⓘ  Where this data comes from";
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: #8a6508;
  margin-bottom: 0.45em;
}

/* ---------- file manifest inside a local block ---------- */
.filelist {
  font-family: var(--bs-font-monospace, Menlo, Consolas, monospace);
  font-size: 0.86rem;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  padding: 0.55em 0.8em;
  margin: 0.5em 0;
}

/* ---------- session header chips ---------- */
.session-chip {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: #e4e8ee;
  color: #3d4855;
  vertical-align: middle;
  margin-left: 0.5em;
}

/* ---------- dark mode ----------
   Keyed on Quarto's own theme class, NOT prefers-color-scheme. The page ships a
   light theme only, so following the OS setting would put dark boxes behind the
   page's dark body text and make the callouts unreadable. */
body.quarto-dark .run-local {
  background: var(--local-bg-dark);
  border-color: rgba(88, 156, 255, 0.4);
  color: #dce6f5;
}
body.quarto-dark .run-local pre,
body.quarto-dark .run-local code {
  background: #0b1526;
  border-color: rgba(88, 156, 255, 0.3);
  color: #dce6f5;
}
body.quarto-dark .run-local::before { color: #6ea8ff; }

body.quarto-dark .web { background: var(--browser-bg-dark); border-color: rgba(90, 190, 130, 0.4); color: #d6efe0; }
body.quarto-dark .web::before { color: #6fd39a; }

body.quarto-dark .terminal {
  background: #241d0e;
  border-color: rgba(214, 170, 60, 0.4);
  color: #f0e4c8;
}
body.quarto-dark .terminal::before { color: #e0b544; }
body.quarto-dark .terminal pre, body.quarto-dark .terminal code {
  background: #191307; color: #f0e4c8; border-color: rgba(214, 170, 60, 0.3);
}

body.quarto-dark .provenance {
  background: var(--warn-bg-dark);
  border-color: rgba(214, 170, 60, 0.4);
  color: #f0e4c8;
}
body.quarto-dark .provenance::before { color: #e0b544; }

body.quarto-dark .filelist { background: rgba(255, 255, 255, 0.06); color: #dce6f5; }
body.quarto-dark .session-chip { background: #2b333d; color: #c7d0da; }

/* ---------- schedule table ----------
   Fixed layout with explicit widths: without it the long file names in the
   materials column push the table wider than the page and clip the last column,
   while squeezing the description into six-line wraps. */
.schedule { overflow-x: auto; }
.schedule table { table-layout: fixed; width: 100%; font-size: 0.9rem; }
.schedule th, .schedule td { vertical-align: top; padding-left: 0.35rem; padding-right: 0.35rem; }

.schedule th:nth-child(1), .schedule td:nth-child(1) { width: 9.5%; }
.schedule th:nth-child(2), .schedule td:nth-child(2) { width: 13.5%; white-space: nowrap; }
.schedule th:nth-child(3), .schedule td:nth-child(3) { width: 35%; }
.schedule th:nth-child(4), .schedule td:nth-child(4) { width: 29%; font-size: 0.84rem; line-height: 1.4; }
.schedule th:nth-child(5), .schedule td:nth-child(5) { width: 13%; }
.schedule td:nth-child(5) { white-space: nowrap; }

/* file names may break rather than widen the table */
.schedule td:nth-child(4) code {
  white-space: normal;
  overflow-wrap: anywhere;
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
}

/* Break and lunch rows are scaffolding, not content — mute them so the eye
   skips to the teaching blocks. */
.schedule td em { color: #7a8794; font-style: italic; }
body.quarto-dark .schedule td em { color: #93a1b0; }

/* ---------- Cytoscape block ---------- */
.cytoscape {
  border: 1px solid rgba(80, 90, 105, 0.35);
  border-left: 5px solid #5a6472;
  background: #f1f3f5;
  border-radius: 6px;
  padding: 0.9em 1.1em 0.6em;
  color: var(--ink);
  margin: 1.4em 0;
}
.cytoscape > p:first-child { margin-top: 0; }
.cytoscape > :last-child { margin-bottom: 0.4em; }
.cytoscape::before {
  content: "🖥  CYTOSCAPE — the desktop program on your own computer";
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: #4a5361;
  margin-bottom: 0.6em;
}
body.quarto-dark .cytoscape { background: #1c2128; border-color: rgba(160, 170, 185, 0.35); color: #dbe1e8; }
body.quarto-dark .cytoscape::before { color: #b5bfcb; }

/* screenshots from the original notebooks */
.shot img { border: 1px solid #d0d7de; border-radius: 6px; max-width: 100%; }