/* ==========================================================================
   Statistics & Econometrics with R — book styles
   Design goal: a student can land on any page and read it without a guide.
   ========================================================================== */

:root {
  --ink:        #1f2933;
  --ink-soft:   #52606d;
  --rule:       #e4e7eb;
  --accent:     #2b6cb0;
  --accent-bg:  #ebf4fb;
  --theory:     #5a67d8;
  --theory-bg:  #eef0fd;
  --rcode:      #2f855a;
  --rcode-bg:   #edf7f0;
  --warn:       #c05621;
  --warn-bg:    #fdf1e7;
  --task:       #b7791f;
  --task-bg:    #fdf6e3;
}

/* --- Base reading experience ---------------------------------------------
   CAREFUL: gitbook sets `html { font-size: 62.5% }`, so in this stylesheet
   1rem = 10px, not 16px. Sizes here are therefore given in px, so that trap
   cannot bite again.

   The five rules below correspond to gitbook's own font-size classes, which
   the "A" button in the toolbar cycles through. Defining all five keeps that
   control working — a single font-size rule on section.normal has the same
   specificity as gitbook's, wins on load order, and silently disables it.
   -------------------------------------------------------------------------- */

.book .book-body .page-inner section.normal {
  color: var(--ink);
  line-height: 1.72;
}

.book.font-size-0 .book-body .page-inner section.normal { font-size: 15px; }
.book.font-size-1 .book-body .page-inner section.normal { font-size: 16.5px; }
.book.font-size-2 .book-body .page-inner section.normal { font-size: 18px; }
.book.font-size-3 .book-body .page-inner section.normal { font-size: 20.5px; }
.book.font-size-4 .book-body .page-inner section.normal { font-size: 24px; }

/* gitbook's own rule is `.book .book-body .page-wrapper .page-inner`, which
   out-specifies a three-class selector and keeps its 800px. Match it exactly.
   700px gives roughly 74 characters of prose at the default size — inside the
   comfortable range — and, with the code size set below, fits the widest code
   lines in the book without horizontal scrolling. */
.book .book-body .page-wrapper .page-inner {
  max-width: 700px;
}

.book .book-body .page-inner section.normal h1,
.book .book-body .page-inner section.normal h2,
.book .book-body .page-inner section.normal h3 {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.book .book-body .page-inner section.normal h2 {
  margin-top: 2.6em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}

/* --- Sidebar ------------------------------------------------------------- */

.book .book-summary { border-right: 1px solid var(--rule); }

.toc-logo a {
  display: block;
  padding: 1.1em 1.2em 0.4em;
  font-size: 0.98em;
  line-height: 1.35;
  color: var(--ink) !important;
}

.toc-after {
  padding: 1.4em 1.2em;
  font-size: 0.78em;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  margin-top: 1em;
}

/* --- Section questions ---------------------------------------------------
   Each section of Unit 1 opens with the question it exists to answer, so the
   unit reads as one investigation rather than a sequence of definitions.
   -------------------------------------------------------------------------- */

.question {
  margin: 0 0 1.8em;
  padding: 0.1em 0 0.1em 1em;
  border-left: 3px solid var(--accent);
  font-size: 1.15em;
  line-height: 1.45;
  color: var(--ink);
}
.question p { margin: 0; }

/* --- Callout blocks ------------------------------------------------------ */

.intuition, .theory, .inr, .watchout, .yourturn, .keyidea, .deeper {
  margin: 1.7em 0;
  padding: 1.05em 1.25em 1.05em 1.35em;
  border-left: 4px solid;
  border-radius: 0 6px 6px 0;
  font-size: 0.97em;
}

.intuition > :first-child, .theory > :first-child, .inr > :first-child,
.watchout > :first-child, .yourturn > :first-child, .keyidea > :first-child,
.deeper > :first-child {
  margin-top: 0;
}
.intuition > :last-child, .theory > :last-child, .inr > :last-child,
.watchout > :last-child, .yourturn > :last-child, .keyidea > :last-child,
.deeper > :last-child {
  margin-bottom: 0;
}

/* Each block announces itself, so a student never has to guess its role. */
.intuition::before, .theory::before, .inr::before,
.watchout::before, .yourturn::before, .keyidea::before, .deeper::before {
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.55em;
}

.intuition { border-color: var(--accent); background: var(--accent-bg); }
.intuition::before { content: "The idea in plain words"; color: var(--accent); }

.theory { border-color: var(--theory); background: var(--theory-bg); }
.theory::before { content: "Where this comes from"; color: var(--theory); }

.inr { border-color: var(--rcode); background: var(--rcode-bg); }
.inr::before { content: "Doing it in R"; color: var(--rcode); }

.watchout { border-color: var(--warn); background: var(--warn-bg); }
.watchout::before { content: "Watch out"; color: var(--warn); }

.yourturn { border-color: var(--task); background: var(--task-bg); }
.yourturn::before { content: "Your turn"; color: var(--task); }

.keyidea { border-color: var(--ink); background: #f4f6f8; }
.keyidea::before { content: "Remember this"; color: var(--ink); }

/* An aside for the elegant-but-inessential. Kept visually quieter than the
   other callouts so a reader can skip it without feeling they have missed a
   step in the argument. */
.deeper { border-color: #8b8ea3; background: #f7f7fa; }
.deeper::before { content: "Going a little further"; color: #6b6e85; }



/* --- Worked examples from real data --------------------------------------
   NOTE: the class is `realworld`, not `example`. bookdown reserves `example`
   (along with theorem, lemma, definition, exercise, proof, remark and
   solution) as an auto-numbered theorem environment, and using it produced a
   nested "Example 1.1" heading inside the box. Same reason `answer` is used
   below rather than `solution`.
   Unlike the callouts above, which are asides within the argument, an example
   is a self-contained exhibit. It gets a full border and a header band so it
   reads as something set apart from the running text.
   -------------------------------------------------------------------------- */

.realworld {
  margin: 2.2em 0;
  padding: 0 1.4em 1.2em;
  border: 1px solid #cfe3d7;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.97em;
}

.realworld::before {
  content: "Evidence from the real world";
  display: block;
  margin: 0 -1.4em 1.15em;
  padding: 0.62em 1.4em;
  background: var(--rcode-bg);
  border-bottom: 1px solid #dfeee6;
  border-radius: 5px 5px 0 0;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rcode);
}

.realworld > :last-child { margin-bottom: 0; }

/* Code inside an exhibit sits on a tint, so it does not read as a second box
   floating inside the first. */
.book .book-body .page-inner section.normal .realworld pre {
  border-color: #e3efe8;
}
.realworld div.sourceCode, .realworld pre.sourceCode { background: #f7fbf9; }

@media (max-width: 600px) {
  .realworld { padding: 0 1em 1em; }
  .realworld::before { margin: 0 -1em 1em; padding: 0.55em 1em; }
}

/* --- Code ---------------------------------------------------------------- */

.book .book-body .page-inner section.normal pre {
  border: 1px solid var(--rule);
  border-radius: 6px;
  /* Code is set smaller than prose, as usual, but the exact value is chosen so
     the longest line in the book clears the column rather than scrolling. */
  font-size: 0.8em;
  line-height: 1.55;
}

/* Computed output is visually distinct from the code that produced it. */
pre.sourceCode, div.sourceCode {
  background: #fbfbfc;
}

.book .book-body .page-inner section.normal pre:not(.sourceCode) {
  background: #ffffff;
  border-left: 3px solid var(--rcode);
  color: var(--ink-soft);
}

/* --- Collapsible solutions ----------------------------------------------- */

details.answer {
  margin: 1.2em 0 1.8em;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0 1.1em;
  background: #fcfcfd;
}

details.answer > summary {
  cursor: pointer;
  padding: 0.75em 0;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}

details.answer > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

details.answer[open] > summary::before { content: "▾ "; }
details.answer[open] { padding-bottom: 0.6em; }
details.answer > summary::-webkit-details-marker { display: none; }

/* --- Tables -------------------------------------------------------------- */

.book .book-body table {
  font-size: 0.93em;
  margin: 1.6em auto;
}

.book .book-body table th {
  border-bottom: 2px solid var(--ink);
  font-weight: 650;
}

/* --- Print / small screens ----------------------------------------------- */

@media (max-width: 600px) {
  /* One step down on a phone, but still respecting the reader's own choice
     from the toolbar. */
  .book.font-size-2 .book-body .page-inner section.normal { font-size: 16.5px; }
  .book.font-size-3 .book-body .page-inner section.normal { font-size: 18px; }
  .book.font-size-4 .book-body .page-inner section.normal { font-size: 21px; }

  .intuition, .theory, .inr, .watchout, .yourturn, .keyidea, .deeper {
    padding: 0.9em 1em;
  }
}

/* --- Interactive z explorer ---------------------------------------------
   Used once, in the confidence-interval section. HTML output only; the book
   ships no PDF, so there is no fallback to maintain.
   -------------------------------------------------------------------------- */

.zexplore {
  margin: 1.8em 0;
  padding: 1em 1.2em 0.8em;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fcfcfd;
}

.zexplore svg { width: 100%; height: auto; display: block; }

.zexplore-ctl {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex-wrap: wrap;
  margin-top: 0.4em;
  font-size: 0.86em;
  color: var(--ink-soft);
}

.zexplore-ctl label { flex: 1 1 100%; }
.zexplore-ctl input[type="range"] { flex: 1 1 260px; accent-color: var(--accent); }
.zexplore-ctl output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.zexplore-note {
  margin: 0.7em 0 0;
  font-size: 0.86em;
  line-height: 1.5;
  color: var(--ink-soft);
}