/* ============================================================
 * Editorial RMD override — restyles the default flatly/bootstrap
 * RMarkdown output to match the editorial paper-tone palette.
 * Loaded via models/header.html on every knit.
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap");

:root {
  --paper: #f4f0e6;
  --paper-deep: #ebe5d4;
  --paper-card: #fbf8ef;
  --ink: #1c1a15;
  --ink-soft: #3d362b;
  --muted: #6b6356;
  --rule: #d4ccb8;
  --rule-light: #e5ddc8;
  --accent: #8a3b24;
  --accent-soft: #c89c8a;

  --serif: "Fraunces", "Source Serif 4", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --ui: "Inter", "Source Sans 3", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

/* ---- Global reset of bootstrap/flatly defaults ---- */
html, body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
}

body > .container-fluid,
body > .container,
.main-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 56px 48px 120px 280px !important;
  background: var(--paper) !important;
}

/* ---- Hide the ugly flatly navbar ---- */
.navbar,
nav.navbar,
#rmd-navbar,
.navbar-default,
.navbar-inverse,
.navbar-fixed-top {
  display: none !important;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6,
.title,
h1.title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  border: none !important;
}
h1, h1.title { font-size: 42px !important; line-height: 1.1 !important; margin: 0 0 16px !important; }
h2 { font-size: 26px !important; line-height: 1.25 !important; margin: 52px 0 14px !important; font-weight: 500 !important; }
h3 { font-size: 20px !important; line-height: 1.35 !important; margin: 32px 0 10px !important; font-weight: 500 !important; font-style: italic !important; color: var(--ink-soft) !important; }
h4 { font-size: 16.5px !important; font-weight: 600 !important; margin: 24px 0 8px !important; font-family: var(--ui) !important; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent) !important; }

/* Author / date under title */
.author, h4.author,
.date, h4.date {
  font-family: var(--ui) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  color: var(--muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 4px !important;
}

/* ---- Body text ---- */
p, li {
  color: var(--ink) !important;
  font-family: var(--body) !important;
}
p { margin: 0 0 18px !important; }

a {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--accent-soft) !important;
}
a:hover { border-bottom-color: var(--accent) !important; }

/* ---- Inline code ---- */
code, code.r, code.python {
  font-family: var(--mono) !important;
  font-size: 0.88em !important;
  background: var(--paper-deep) !important;
  color: var(--ink-soft) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  border: none !important;
}

/* ---- Code blocks ---- */
pre, pre.sourceCode {
  background: var(--paper-card) !important;
  border: 1px solid var(--rule-light) !important;
  border-left: 2px solid var(--accent-soft) !important;
  border-radius: 3px !important;
  padding: 14px 18px !important;
  overflow-x: auto !important;
  box-shadow: none !important;
  margin: 22px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
pre code {
  background: transparent !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: inherit !important;
}

/* knitr output blocks */
pre.r + pre,
pre.python + pre,
div.r-output pre,
.r-output,
.output {
  background: var(--paper-deep) !important;
  border-left-color: var(--rule) !important;
  color: var(--ink-soft) !important;
}

/* Syntax highlighting — restyle default flatly colors to paper-compatible ones */
code span.co, code span.co { color: var(--muted) !important; font-style: italic !important; } /* comment */
code span.st { color: #7a5a30 !important; } /* string */
code span.dv, code span.fl { color: #8a3b24 !important; } /* number */
code span.kw, code span.cf { color: #5a4a7a !important; font-weight: 500 !important; } /* keyword */
code span.fu { color: #3a5a7a !important; font-weight: 500 !important; } /* function */
code span.op { color: var(--ink-soft) !important; }
code span.va { color: var(--ink) !important; }

/* ---- Figures ---- */
.figure, div.figure {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 3px !important;
  padding: 14px !important;
  margin: 36px 0 !important;
  text-align: center !important;
}
.figure img, div.figure img, p img, img,
.figure > svg, div.figure > svg {
  background: var(--paper-card) !important;
  border-radius: 2px !important;
  padding: 14px !important;
  max-width: 100% !important;
  height: auto !important;
  box-shadow: inset 0 0 0 1px rgba(60, 50, 30, 0.04) !important;
}
.figure p.caption, .caption, div.figure > p.caption {
  font-family: var(--ui) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
  padding-top: 10px !important;
  margin: 10px 0 0 0 !important;
  border-top: 1px solid var(--rule-light) !important;
  text-align: left !important;
  font-style: normal !important;
}

/* knitr generated plots (ggplot2) wrap in <img> inside <p> — give them a plate too */
.main-container > p > img,
p > img {
  background: var(--paper-card) !important;
  padding: 18px !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px rgba(60, 50, 30, 0.04) !important;
  display: block;
  margin: 28px auto !important;
}

/* ---- Tables ---- */
table,
.table,
table.table {
  background: var(--paper-card) !important;
  border: 1px solid var(--rule) !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
  font-size: 14.5px !important;
  font-family: var(--ui) !important;
}
th {
  background: var(--paper-deep) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 10px 14px !important;
  text-align: left !important;
}
td {
  border-top: 1px solid var(--rule-light) !important;
  padding: 8px 14px !important;
  color: var(--ink-soft) !important;
}
tr:hover td { background: rgba(138, 59, 36, 0.03) !important; }

/* ---- Blockquotes ---- */
blockquote {
  border-left: 2px solid var(--accent-soft) !important;
  background: var(--paper-card) !important;
  padding: 14px 20px !important;
  margin: 22px 0 !important;
  color: var(--ink-soft) !important;
  font-style: italic !important;
}

/* ---- Horizontal rules ---- */
hr {
  border: none !important;
  border-top: 1px solid var(--rule) !important;
  margin: 48px 0 !important;
}

/* ---- Table of contents (if present) ---- */
#TOC, div#TOC, nav#TOC,
.tocify,
.tocify-wrapper {
  background: var(--paper-card) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 3px !important;
  font-family: var(--ui) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
}
.tocify .list-group-item,
#TOC a {
  background: transparent !important;
  border: none !important;
  color: var(--ink-soft) !important;
  padding: 4px 0 !important;
}
.tocify .list-group-item.active,
.tocify .list-group-item-success,
#TOC a:hover {
  background: transparent !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}

/* ---- toc_float: true (sidebar TOC, default in `readable` theme) ----
 * The default rmarkdown toc_float wraps the TOC in #TOC fixed to the left.
 * Make it look like a quiet editorial sidebar instead of a Bootstrap card. */
.tocify-wrapper,
#TOC.tocify {
  position: fixed !important;
  top: 56px !important;
  left: 24px !important;
  width: 220px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.tocify-wrapper .list-group {
  background: transparent !important;
  border: none !important;
}
.tocify-wrapper .tocify-header {
  text-indent: 0 !important;
}
.tocify-wrapper .tocify-subheader {
  display: none;
  text-indent: 0 !important;
  padding-left: 12px !important;
  font-size: 12px !important;
}
.tocify-wrapper .tocify-subheader > li {
  padding: 2px 0 !important;
}
.tocify-wrapper .tocify-item > a {
  font-family: var(--ui) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  border: none !important;
  border-left: 1px solid var(--rule-light) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 12px !important;
  background: transparent !important;
}
.tocify-wrapper .tocify-item.active > a,
.tocify-wrapper .tocify-item > a:hover {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

/* On narrow viewports, drop the floating TOC inline above content */
@media (max-width: 1180px) {
  .tocify-wrapper,
  #TOC.tocify {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 0 32px 0 !important;
    padding: 16px 18px !important;
    background: var(--paper-card) !important;
    border: 1px solid var(--rule-light) !important;
    border-radius: 3px !important;
  }
  /* TOC is now inline above content — drop the asymmetric left padding */
  body > .container-fluid,
  body > .container,
  .main-container {
    padding: 56px 32px 120px !important;
  }
}

/* ---- Code folding button (when code_folding: hide / show is on) ---- */
.code-folding-btn,
button.code-folding-btn,
[data-toggle="collapse"].btn-default {
  font-family: var(--ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  background: var(--paper-deep) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 2px !important;
  padding: 3px 10px !important;
  margin: 0 0 6px 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.code-folding-btn:hover,
button.code-folding-btn:hover {
  background: var(--paper-card) !important;
  color: var(--accent) !important;
  border-color: var(--accent-soft) !important;
}
/* The wrapper div rmarkdown puts around code-folding chunks */
.r-code-collapse {
  margin: 22px 0 !important;
}

/* ---- MathJax / KaTeX ---- */
.MathJax_Display,
.math.display,
.equation {
  margin: 24px 0 !important;
  padding: 14px 20px !important;
  background: var(--paper-card) !important;
  border-left: 2px solid var(--accent-soft) !important;
  border-radius: 2px !important;
  overflow-x: auto !important;
}

/* ---- Strip default Bootstrap / flatly noise ---- */
.btn { font-family: var(--ui) !important; border-radius: 3px !important; }
.alert {
  background: var(--paper-card) !important;
  border: 1px solid var(--rule-light) !important;
  border-left: 2px solid var(--accent-soft) !important;
  color: var(--ink) !important;
  border-radius: 3px !important;
}

/* ---- Strip teal / flatly colored accents still leaking through ---- */
.navbar-default .navbar-brand,
.nav > li > a,
.navbar-nav > li > a,
h1.title,
.title {
  color: var(--ink) !important;
}

/* ---- Home-link banner at top (injected via header.html) ---- */
.editorial-banner {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--muted);
  padding: 0 0 28px 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule-light);
  letter-spacing: 0.4px;
}
.editorial-banner a {
  color: var(--accent) !important;
  border-bottom: none !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 11px;
}
.editorial-banner a:hover { text-decoration: underline; }

/* ---- Footer note for model pages ---- */
.editorial-footer {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ============================================================
 * Override the inline custom box styles defined inside the Rmds
 * (insight-box / definition-box / method-box / dissertation-ref
 *  / figure-with-ref / download-source-link). These all hard-code
 * teal / purple / yellow flatly accents that fight the paper tone,
 * so we recolor them to fit the editorial palette.
 * ============================================================ */

.insight-box,
.definition-box,
.method-box,
.dissertation-ref,
.figure-with-ref {
  background: var(--paper-card) !important;
  border: 1px solid var(--rule-light) !important;
  border-left: 2px solid var(--accent-soft) !important;
  border-radius: 3px !important;
  padding: 18px 22px !important;
  margin: 28px 0 !important;
  box-shadow: none !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
}

.insight-box h4,
.method-box h4,
.definition-box h4 {
  font-family: var(--ui) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 0 0 10px 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
}

.dissertation-ref {
  font-size: 13.5px !important;
  font-family: var(--ui) !important;
  color: var(--muted) !important;
}
.dissertation-ref strong {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.figure-with-ref {
  text-align: center !important;
}
.figure-with-ref .fig-ref {
  font-family: var(--ui) !important;
  font-size: 12.5px !important;
  color: var(--muted) !important;
  border-top: 1px dashed var(--rule-light) !important;
  padding-top: 10px !important;
  margin-top: 12px !important;
}

/* The Rmd injects this floating purple button to download source.
 * Recolor to a quiet editorial pill in the top-right. */
.download-source-link {
  position: fixed !important;
  top: 18px !important;
  right: 24px !important;
  background: var(--paper-card) !important;
  color: var(--accent) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  padding: 6px 12px !important;
  font-family: var(--ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.download-source-link:hover {
  background: var(--paper-deep) !important;
  border-color: var(--accent-soft) !important;
  transform: none !important;
}

/* The Rmd's own .section-toggle and code-folding chrome — make them fit too. */
.section-toggle,
#code-toggle,
.dropdown-toggle.code-menu {
  background: var(--paper-deep) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 2px !important;
  padding: 4px 12px !important;
  font-family: var(--ui) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  box-shadow: none !important;
}

/* Tab content (R uses bootstrap nav-tabs for tabsets) */
.nav-tabs > li > a,
.nav-tabs > li.active > a {
  font-family: var(--ui) !important;
  font-size: 13px !important;
  border-radius: 2px 2px 0 0 !important;
  background: var(--paper-card) !important;
  color: var(--ink-soft) !important;
  border-color: var(--rule-light) !important;
}
.nav-tabs > li.active > a {
  background: var(--paper) !important;
  color: var(--accent) !important;
  border-bottom-color: var(--paper) !important;
}
.tab-content {
  background: var(--paper) !important;
  border: 1px solid var(--rule-light) !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px !important;
  padding: 18px !important;
}

/* details/summary collapsible blocks */
details {
  background: var(--paper-card) !important;
  border: 1px solid var(--rule-light) !important;
  border-left: 2px solid var(--accent-soft) !important;
  border-radius: 3px !important;
  padding: 14px 18px !important;
  margin: 22px 0 !important;
}
details summary {
  font-family: var(--ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  letter-spacing: 0.3px !important;
}
details[open] summary {
  border-bottom: 1px solid var(--rule-light) !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  body > .container-fluid,
  body > .container,
  .main-container {
    padding: 40px 20px 80px !important;
  }
  h1, h1.title { font-size: 32px !important; }
  h2 { font-size: 22px !important; }
}