/* Inference Zero To Hero — book styles.
   Colors are tokens so every widget, tab and figure works in light and dark themes.
   mdBook puts the theme name on <html>: light, rust, coal, navy, ayu. */

:root, html.light, html.rust {
  --izh-accent: #1f6f8b;
  --izh-accent-soft: #e3f0f4;
  --izh-accent-2: #2b8a5e;
  --izh-accent-2-soft: #e2f3ea;
  --izh-warn: #b15c00;
  --izh-warn-soft: #fbefe1;
  --izh-bad: #b3261e;
  --izh-bad-soft: #fbe7e6;
  --izh-ink: #18232d;
  --izh-ink-soft: #4b5b69;
  --izh-line: #c6d3dc;
  --izh-panel: #f5f8fa;
  --izh-cell: #edf2f6;
  --izh-masked: #e2e6ea;
  --izh-heat-0: #f2f6f9;
  --izh-heat-1: #1f6f8b;
}
html.coal, html.navy, html.ayu {
  --izh-accent: #6cc3de;
  --izh-accent-soft: #17323d;
  --izh-accent-2: #6fd3a2;
  --izh-accent-2-soft: #173327;
  --izh-warn: #f2a65a;
  --izh-warn-soft: #3a2a17;
  --izh-bad: #ff8a80;
  --izh-bad-soft: #3d1d1b;
  --izh-ink: #e3eaf0;
  --izh-ink-soft: #a9b8c4;
  --izh-line: #3a4a57;
  --izh-panel: #1b2630;
  --izh-cell: #22303b;
  --izh-masked: #182129;
  --izh-heat-0: #1c2731;
  --izh-heat-1: #6cc3de;
}

/* ---------- Reading layout ---------- */
.content main { max-width: 880px; line-height: 1.72; }
.content h1 { font-size: 2.25em; line-height: 1.2; margin-bottom: .6em; }
.content h2 { margin-top: 2.1em; line-height: 1.3; }
.content h3 { margin-top: 1.7em; }
.content p, .content li { max-width: 80ch; }
.content table { display: block; overflow-x: auto; font-size: .94em; }
.content pre { line-height: 1.45; border-radius: 7px; }
.content img { display: block; max-width: 100%; margin: 1.6em auto; border-radius: 10px; }
.content figure { margin: 1.8em 0; }
.content figcaption { color: var(--izh-ink-soft); font-size: .9em; text-align: center; margin-top: .4em; }

/* Chapter opener: what you'll learn / build / time. */
.chapter-goals {
  border: 1px solid var(--izh-line); border-left: 5px solid var(--izh-accent);
  background: var(--izh-panel); border-radius: 8px; padding: .9em 1.2em; margin: 1.2em 0 2em;
}
.chapter-goals h4 { margin: .2em 0 .5em; font-size: .95em; text-transform: uppercase; letter-spacing: .05em; color: var(--izh-accent); }
.chapter-goals ul { margin: .2em 0 .6em; padding-left: 1.2em; }
.chapter-goals p { margin: .3em 0; }

/* Engine milestone box. */
.milestone {
  border: 2px solid var(--izh-accent-2); background: var(--izh-accent-2-soft);
  border-radius: 10px; padding: .8em 1.2em; margin: 1.8em 0;
}
.milestone > p:first-child { margin-top: 0; font-weight: 700; color: var(--izh-accent-2); }

/* Difficulty stars for stretch exercises. */
.stars { color: var(--izh-warn); letter-spacing: .1em; }

/* Collapsible "deeper" sections. */
details.deeper {
  border: 1px dashed var(--izh-line); border-radius: 8px; padding: .5em 1em; margin: 1.3em 0;
  background: var(--izh-panel);
}
details.deeper > summary { cursor: pointer; font-weight: 600; color: var(--izh-accent); }
details.deeper[open] > summary { margin-bottom: .6em; }

/* ---------- Language tabs ---------- */
.code-tabs { margin: 1.2em 0 1.5em; }
.code-tabs .izh-tabbar { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--izh-line); }
.code-tabs .izh-tabbar button {
  font: inherit; font-size: .86em; padding: .35em .95em; cursor: pointer;
  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
  background: transparent; color: var(--izh-ink-soft);
}
.code-tabs .izh-tabbar button:hover { color: var(--izh-ink); background: var(--izh-panel); }
.code-tabs .izh-tabbar button[aria-selected="true"] {
  color: var(--izh-accent); background: var(--izh-panel); border-color: var(--izh-line);
  font-weight: 700; position: relative; top: 2px; border-bottom: 2px solid var(--izh-panel);
}
.code-tabs > pre { margin-top: 0; border-top-left-radius: 0; }
.code-tabs > .izh-tab-hidden { display: none; }
.code-tabs .izh-tab-note { font-size: .82em; color: var(--izh-ink-soft); margin: .3em 0 0; }

/* ---------- Interactive widgets ---------- */
.izh-widget {
  border: 1px solid var(--izh-line); border-radius: 10px; padding: 1em 1.2em; margin: 1.6em 0;
  background: var(--izh-panel); color: var(--izh-ink);
}
.izh-widget > p:first-child { margin-top: 0; }
.izh-widget .izh-title { font-weight: 700; color: var(--izh-accent); margin: 0 0 .4em; font-size: .95em; text-transform: uppercase; letter-spacing: .04em; }
.izh-controls { display: flex; gap: 1.1em 1.4em; flex-wrap: wrap; margin: .6em 0 1em; align-items: end; }
.izh-controls label { display: grid; gap: .3em; min-width: 140px; font-size: .9em; }
.izh-controls label .izh-value { font-family: var(--mono-font); color: var(--izh-accent); }
.izh-controls input[type=range] { width: 170px; max-width: 100%; accent-color: var(--izh-accent); }
.izh-controls input[type=text], .izh-controls input[type=number], .izh-controls select {
  font: inherit; padding: .25em .4em; border-radius: 5px; border: 1px solid var(--izh-line);
  background: var(--bg); color: var(--fg); max-width: 100%;
}
.izh-widget button {
  font: inherit; font-size: .9em; padding: .35em .85em; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--izh-accent); background: var(--izh-accent-soft); color: var(--izh-ink);
}
.izh-widget button:hover { background: var(--izh-accent); color: var(--bg); }
.izh-output { font-family: var(--mono-font); font-size: .86em; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .8em; line-height: 1.5; }
.izh-grid { display: grid; gap: 3px; margin: .8em 0; }
.izh-cell {
  border: 1px solid var(--izh-line); padding: .35em .15em; text-align: center; white-space: pre-line;
  color: var(--izh-ink); background: var(--izh-cell); border-radius: 4px; font-size: .85em; font-family: var(--mono-font);
}
.izh-cell.active { background: var(--izh-accent-2-soft); border-color: var(--izh-accent-2); font-weight: 700; }
.izh-cell.hot { background: var(--izh-accent-soft); border-color: var(--izh-accent); font-weight: 700; }
.izh-cell.warn { background: var(--izh-warn-soft); border-color: var(--izh-warn); }
.izh-cell.masked { background: var(--izh-masked); color: var(--izh-ink-soft); opacity: .7; }
.izh-bars { display: grid; gap: .4em; }
.izh-bar { display: flex; align-items: center; gap: .6em; font-family: var(--mono-font); font-size: .84em; }
.izh-bar > code:first-child { min-width: 6.5em; }
.izh-bar span.fill { display: inline-block; height: 18px; background: var(--izh-accent); border-radius: 3px; min-width: 2px; transition: width .25s; }
.izh-bar span.fill.alt { background: var(--izh-accent-2); }
.izh-bar span.fill.dim { background: var(--izh-line); }
.izh-bar span.fill.warn { background: var(--izh-warn); }
.izh-widget svg { display: block; max-width: 100%; margin: .4em auto; }
.izh-widget svg text { fill: var(--izh-ink); font-family: var(--mono-font); }
.izh-widget svg .stroke { stroke: var(--izh-ink-soft); fill: none; }
.izh-widget svg .accent { fill: var(--izh-accent); }
.izh-widget svg .accent2 { fill: var(--izh-accent-2); }
.izh-widget svg .warn { fill: var(--izh-warn); }
.izh-widget svg .soft { fill: var(--izh-accent-soft); stroke: var(--izh-line); }
.izh-legend { font-size: .82em; color: var(--izh-ink-soft); margin-top: .4em; }
.izh-kpi { display: flex; flex-wrap: wrap; gap: .8em; margin: .6em 0; }
.izh-kpi div { border: 1px solid var(--izh-line); border-radius: 8px; padding: .4em .8em; background: var(--bg); min-width: 8em; }
.izh-kpi div b { display: block; font-size: 1.25em; color: var(--izh-accent); font-family: var(--mono-font); }
.izh-kpi div small { color: var(--izh-ink-soft); }

/* Figures drawn as standalone SVG files carry their own light background so they read in any theme. */
.content img[src$=".svg"] { width: 100%; background: #f7fafc; padding: 4px; }

@media (max-width: 600px) {
  .content h1 { font-size: 1.75em; }
  .izh-grid { font-size: .78em; }
  .izh-controls input[type=range] { width: 130px; }
}
@media print {
  .izh-controls, .izh-widget button, .code-tabs .izh-tabbar { display: none; }
  .code-tabs > .izh-tab-hidden { display: block; }
  .code-tabs > pre::before { content: attr(data-izh-label); display: block; font-weight: 700; font-size: .8em; }
  .izh-widget, .content img, .milestone { break-inside: avoid; }
}