/* ============================================================
   ECON3049 — Shared lesson stylesheet
   Tufte-inspired: generous margins, readable serif body,
   restrained palette, prints cleanly. Linked by every lesson.
   ============================================================ */

/* ============================================================
   Palette.

   Every colour in the site — including every colour in the SVG
   figures, which read these at draw time — comes from a token here.
   Adding a theme means redefining the tokens and nothing else.

   Light is the default. Dark is applied either because the reader's
   system asks for it (prefers-color-scheme) or because they chose it
   (data-theme on <html>, set by assets/reader.js). The explicit
   choice always wins in both directions.
   ============================================================ */
:root {
  --ink:        #1a1a1a;
  --ink-soft:   #555;
  --ink-faint:  #8a8378;
  --paper:      #fffff8;   /* warm off-white, Tufte */
  --rule:       #e4e0d4;
  --rule-soft:  #c9c2b6;
  --accent:     #7a1f2b;   /* deep maroon, matches the textbook */
  --accent-2:   #2c5f7c;   /* slate blue for R/code accents */
  --good:       #3a6230;
  --key-bg:     #fbf6e9;
  --def-bg:     #eef3f6;
  --refresh-bg: #f1f6ee;
  --warn-bg:    #fcefec;
  --code-bg:    #f6f4ec;
  --card:       #ffffff;   /* raised surfaces: figures, quiz options, cards */
  --ok-bg:      #e8f3e3;
  --ok-ink:     #2c5022;
  --ok-line:    #4a7c3a;
  --bad-bg:     #fbe6e2;
  --bad-ink:    #6e1b22;
  --key-ink:    #8a6508;
  --cmt:        #7a8a6a;
  --maxw:       720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ink:        #e9e6df;
  --ink-soft:   #a9a49a;
  --ink-faint:  #8d887e;
  --paper:      #1a1917;
  --rule:       #35332e;
  --rule-soft:  #4a473f;
  --accent:     #e0949e;
  --accent-2:   #86b8d8;
  --good:       #8fc07d;
  --key-bg:     #2a2418;
  --def-bg:     #1b2429;
  --refresh-bg: #1d2a1b;
  --warn-bg:    #2f1e1e;
  --code-bg:    #232219;
  --card:       #211f1c;
  --ok-bg:      #1e2c1b;
  --ok-ink:     #a9d199;
  --ok-line:    #4a7c3a;
  --bad-bg:     #2f1d1d;
  --bad-ink:    #e8a9a2;
  --key-ink:    #d9b366;
  --cmt:        #93a383;
  }
}
:root[data-theme="dark"] {
  --ink:        #e9e6df;
  --ink-soft:   #a9a49a;
  --ink-faint:  #8d887e;
  --paper:      #1a1917;
  --rule:       #35332e;
  --rule-soft:  #4a473f;
  --accent:     #e0949e;
  --accent-2:   #86b8d8;
  --good:       #8fc07d;
  --key-bg:     #2a2418;
  --def-bg:     #1b2429;
  --refresh-bg: #1d2a1b;
  --warn-bg:    #2f1e1e;
  --code-bg:    #232219;
  --card:       #211f1c;
  --ok-bg:      #1e2c1b;
  --ok-ink:     #a9d199;
  --ok-line:    #4a7c3a;
  --bad-bg:     #2f1d1d;
  --bad-ink:    #e8a9a2;
  --key-ink:    #d9b366;
  --cmt:        #93a383;
}

/* ---------- Reader text size ----------
   Steps the root font size, which everything else is expressed in
   rem against. The narrow-screen sizes below step in parallel, so
   choosing "larger" on a phone does not undo the mobile scaling. */
html                  { font-size: 18px; }
html[data-text="s"]   { font-size: 16px; }
html[data-text="l"]   { font-size: 20px; }
html[data-text="xl"]  { font-size: 22.5px; }

body {
  font-family: et-book, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  margin: 0;
  padding: 0 2rem 6rem;
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ---------- Justified setting ----------
   Prose is justified — flush at both edges, as in the textbooks this
   course sets — rather than ragged right. Hyphenation has to come with
   it: justification works by stretching the spaces along a line, and a
   column this narrow, in a subject that supplies words like
   "heteroscedasticity", opens rivers of white space without it.
   `<html lang="en">` is what lets the browser hyphenate at all, and the
   limits keep it to long words broken well away from either end.

   Set once, on the column, and reaching everything by inheritance — so
   any element declaring an alignment of its own keeps it, a declared
   value always beating an inherited one. That covers the centred
   display equations, the quiz options, table cells and the reader bar
   without naming one of them here. Hyphenation is then switched back
   off wherever a broken word would be wrong. */
.wrap {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 8 4 5;   /* 5 after, or you get "homoscedastic-ity" */
}
.math, .eqn-report, table, pre.code, code.inline, .viz-controls, .lesson-nav {
  -webkit-hyphens: manual;
  hyphens: manual;
}
/* Display lines are not prose: a wrapped subtitle, meta line or callout
   label stretched to the full measure reads as a mistake, and the
   uppercase letter-spaced labels worst of all. */
.subtitle, .unit-meta, .lesson-meta, .box .box-label, .deck-link, .g-index,
.viz-fallback, .sources, .fs-key, .fs-note, .fs-toc { text-align: left; }

/* ---------- Masthead / breadcrumb ---------- */
.masthead {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.4rem 0 0.6rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead a { color: var(--ink-soft); text-decoration: none; }
.masthead a:hover { color: var(--accent); }
.masthead .course { font-weight: 600; color: var(--accent); }

/* ---------- Headings ---------- */
h1, h2, h3 { font-weight: 400; line-height: 1.2; }
h1 {
  font-size: 2.2rem;
  margin: 2rem 0 0.3rem;
}
.subtitle {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.lesson-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}
h2 {
  font-size: 1.5rem;
  margin: 2.6rem 0 0.6rem;
  color: var(--accent);
}
h3 { font-size: 1.2rem; margin: 1.8rem 0 0.4rem; }

p { margin: 0.8rem 0; }
a { color: var(--accent); }

/* ---------- Callout boxes ---------- */
.box {
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 0.97rem;
}
.box .box-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-family: -apple-system, system-ui, sans-serif;
}
.box.def      { background: var(--def-bg);     border-left: 4px solid var(--accent-2); }
.box.def      .box-label { color: var(--accent-2); }
.box.key      { background: var(--key-bg);     border-left: 4px solid #b8860b; }
.box.key      .box-label { color: var(--key-ink); }
.box.refresh  { background: var(--refresh-bg); border-left: 4px solid #4a7c3a; }
.box.refresh  .box-label { color: var(--good); }
.box.warn     { background: var(--warn-bg);    border-left: 4px solid var(--accent); }
.box.warn     .box-label { color: var(--accent); }

/* ---------- Math (display) ---------- */
.math {
  text-align: center;
  font-style: italic;
  font-size: 1.1rem;
  margin: 1.2rem 0;
  color: var(--ink);
}
.math .small { font-style: normal; font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- R code blocks ---------- */
pre.code, code.inline {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  background: var(--code-bg);
}
pre.code {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-2);
  border-radius: 5px;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-x: auto;
  margin: 1.2rem 0;
}
pre.code .cmt  { color: var(--cmt); font-style: italic; }
pre.code .out  { color: var(--ink-soft); }
code.inline {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ---------- Citations ---------- */
.cite { font-size: 0.95em; }
sup.cite a { text-decoration: none; color: var(--accent); font-size: 0.75em; }
.sources {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 1rem;
}
.sources li { margin: 0.3rem 0; }

/* ---------- Primary-source spotlight ---------- */
.primary-source {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 2rem 0;
}
.primary-source .ps-label {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}

/* ---------- Quiz widget (paired with assets/quiz.js) ---------- */
.quiz { margin: 1.6rem 0; }
.quiz .q { font-weight: 600; margin-bottom: 0.7rem; }
.quiz .opt {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.6rem 0.9rem;
  margin: 0.45rem 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.quiz .opt:hover { border-color: var(--accent-2); }
.quiz .opt.correct   { background: var(--ok-bg); border-color: var(--ok-line); }
.quiz .opt.incorrect { background: var(--bad-bg); border-color: var(--accent); }
.quiz .opt:disabled  { cursor: default; }
.quiz .feedback {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  padding: 0.6rem 0.9rem;
  border-radius: 5px;
  display: none;
}
.quiz .feedback.show { display: block; }
.quiz .feedback.right { background: var(--ok-bg); color: var(--ok-ink); }
.quiz .feedback.wrong { background: var(--bad-bg); color: var(--bad-ink); }

/* ---------- Ask-your-teacher reminder ---------- */
.ask-teacher {
  background: var(--code-bg);
  border: 1px dashed var(--accent-2);
  border-radius: 6px;
  padding: 0.9rem 1.2rem;
  margin: 2.2rem 0 1rem;
  font-size: 0.95rem;
}
.ask-teacher strong { color: var(--accent-2); }

/* ---------- Lesson nav footer ---------- */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}
.lesson-nav a { text-decoration: none; }

/* ---------- Print ---------- */
@media print {
  /* Paper is always paper. Reset the tokens so a reader who chose the
     dark theme does not print white text on a white page. */
  :root, :root[data-theme="dark"] {
    --ink: #000; --ink-soft: #444; --ink-faint: #666;
    --paper: #fff; --rule: #ccc; --rule-soft: #ddd;
    --accent: #000; --accent-2: #000; --good: #000;
    --key-bg: #fff; --def-bg: #fff; --refresh-bg: #fff;
    --warn-bg: #fff; --code-bg: #f4f4f4;
  }
  body { background: #fff; color: #000; padding: 0; }
  .ask-teacher, .lesson-nav, .masthead { display: none; }
  .box, pre.code, .primary-source { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  html                  { font-size: 16px; }
  html[data-text="s"]   { font-size: 14.5px; }
  html[data-text="l"]   { font-size: 18px; }
  html[data-text="xl"]  { font-size: 20px; }
  body { padding: 0 1rem 4rem; }
  /* Justification needs a measure to work with. At roughly 35 characters
     a line, stretching the spaces opens gaps wide enough to read as
     errors, so a phone gets the ragged right edge back. */
  .wrap { text-align: left; }
}