/* Voltara Intelligence course: shared stylesheet. Every lesson and reference page links this.
   Tufte-inspired: one readable column, sidenotes in the margin, restrained colour. */

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

:root {
  --bg: #fffff8;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --rule: #d9d6c7;
  --accent: #a33b20;        /* rust: headings, links */
  --accent-soft: #f4e6df;
  --good: #2f6b3a;
  --good-soft: #e3f0e3;
  --bad: #9b2c2c;
  --bad-soft: #f7e1e1;
  --code-bg: #f3f1e7;
  --door-page: #2d5f8a;
  --door-action: #a33b20;
  --door-api: #6a4c93;
  --door-cron: #2f6b3a;
  --measure: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161614; --ink: #e9e6da; --muted: #a09d92; --rule: #3a3833;
    --accent: #e08a6b; --accent-soft: #3a2821; --good: #8fcf98; --good-soft: #1f3322;
    --bad: #f09a9a; --bad-soft: #3a2020; --code-bg: #24231f;
    --door-page: #82b4de; --door-action: #e08a6b; --door-api: #b9a0e0; --door-cron: #8fcf98;
  }
}
:root[data-theme="dark"] {
  --bg: #161614; --ink: #e9e6da; --muted: #a09d92; --rule: #3a3833;
  --accent: #e08a6b; --accent-soft: #3a2821; --good: #8fcf98; --good-soft: #1f3322;
  --bad: #f09a9a; --bad-soft: #3a2020; --code-bg: #24231f;
  --door-page: #82b4de; --door-action: #e08a6b; --door-api: #b9a0e0; --door-cron: #8fcf98;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
main { max-width: calc(var(--measure) + 16rem); margin: 0 auto; padding: 2.5rem 16px 4rem; }
main > * { max-width: var(--measure); }

/* ── Header / nav ─────────────────────────────── */
.crumbs { font-size: .8rem; color: var(--muted); letter-spacing: .02em; margin-bottom: 1.5rem; }
.crumbs a { color: var(--muted); }
h1 { font-weight: 400; font-size: 2.1rem; line-height: 1.15; margin: 0 0 .4rem; }
.subtitle { font-style: italic; color: var(--muted); font-size: 1.15rem; margin: 0 0 2rem; }
h2 { font-weight: 400; font-style: italic; font-size: 1.5rem; margin: 2.8rem 0 .8rem; color: var(--accent); }
h3 { font-weight: 600; font-size: 1.05rem; margin: 1.8rem 0 .4rem; }
a { color: var(--accent); text-underline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ── Meta boxes ───────────────────────────────── */
.win, .source, .ask, .mission {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: .8rem 1rem; margin: 1.4rem 0; font-size: .95rem;
}
.win strong, .source strong, .ask strong, .mission strong { display: block; margin-bottom: .2rem; }
.mission { border-left-color: var(--muted); background: transparent; border: 1px solid var(--rule); border-left: 3px solid var(--muted); }
.ask { border-left-color: var(--door-api); background: transparent; border: 1px solid var(--rule); border-left: 3px solid var(--door-api); }

/* ── Sidenotes (citations) ────────────────────── */
.sn { position: relative; }
.sidenote {
  float: right; clear: right; margin-right: -16rem; width: 14rem;
  font-size: .78rem; line-height: 1.4; color: var(--muted); margin-top: .2rem;
}
.sidenote a { color: var(--muted); }
@media (max-width: 1000px) {
  .sidenote { float: none; display: block; margin: .4rem 0 .8rem 1rem; width: auto; border-left: 2px solid var(--rule); padding-left: .6rem; }
}

/* ── Code ─────────────────────────────────────── */
code, pre, .mono { font-family: "JetBrains Mono", Menlo, Consolas, monospace; font-size: .8em; }
code { background: var(--code-bg); padding: .08em .3em; border-radius: 3px; }
pre { background: var(--code-bg); padding: .9rem 1rem; overflow-x: auto; border-radius: 4px; line-height: 1.45; }
pre code { background: none; padding: 0; }

/* ── Tables ───────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 1rem 0; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; border-bottom: 2px solid var(--ink); }
.table-wrap { overflow-x: auto; }

/* ── Door colour tags ─────────────────────────── */
.door { font-weight: 600; white-space: nowrap; }
.door.page { color: var(--door-page); }
.door.action { color: var(--door-action); }
.door.api { color: var(--door-api); }
.door.cron { color: var(--door-cron); }

/* ── Figures ──────────────────────────────────── */
figure { margin: 1.6rem 0; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { font-size: .8rem; color: var(--muted); font-style: italic; margin-top: .4rem; }

/* ── Recall prompt (retrieval practice) ───────── */
.recall { border: 1px dashed var(--rule); padding: 1rem; margin: 1.4rem 0; }
.recall p { margin: 0 0 .6rem; }
.recall textarea { width: 100%; min-height: 5rem; font: inherit; font-size: .95rem; padding: .5rem; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); }
.recall .reveal { display: none; margin-top: .8rem; padding: .8rem; background: var(--code-bg); font-size: .95rem; }
.recall.open .reveal { display: block; }

/* ── Quiz ─────────────────────────────────────── */
.quiz { margin: 1.4rem 0; }
.quiz .q { border: 1px solid var(--rule); padding: 1rem 1rem .8rem; margin-bottom: 1rem; }
.quiz .q-text { margin: 0 0 .7rem; }
.quiz .opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.quiz button, .btn {
  font: inherit; font-size: .9rem; padding: .35rem .9rem; cursor: pointer;
  background: var(--bg); color: var(--ink); border: 1px solid var(--muted); border-radius: 3px;
  min-width: 5.5rem;
}
.quiz button:hover:not(:disabled), .btn:hover { border-color: var(--accent); color: var(--accent); }
.quiz button.right { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.quiz button.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.quiz button:disabled { cursor: default; }
.quiz .fb { display: none; margin-top: .7rem; font-size: .9rem; }
.quiz .q.done .fb { display: block; }
.quiz .score { font-style: italic; color: var(--muted); }

/* ── Course map ───────────────────────────────── */
.module { margin: 1.6rem 0; }
.module ol { padding-left: 1.4rem; }
.module li { margin: .35rem 0; }
.status { font-size: .75rem; font-family: "JetBrains Mono", monospace; color: var(--muted); margin-left: .3rem; }
.status.ready { color: var(--good); }

/* ── Print ────────────────────────────────────── */
@media print {
  :root { --bg: #fff; --ink: #000; }
  html { font-size: 11pt; }
  main { max-width: none; padding: 0; }
  main > * { max-width: 100%; }
  .sidenote { float: none; display: block; margin: .2rem 0 .5rem 1rem; width: auto; }
  .quiz, .recall textarea, .btn, .ask { display: none; }
  a { color: inherit; }
  h2 { break-after: avoid; }
}

/* ── Ordering exercise (assets/order.js) ──────── */
.order-list { list-style: decimal; padding-left: 1.6rem; margin: 1rem 0 .4rem; }
.order-list li { border: 1px solid var(--rule); padding: .45rem .6rem; margin: .35rem 0; display: flex; gap: .5rem; align-items: baseline; font-size: .95rem; }
.order-list li button { font: inherit; font-size: .8rem; padding: 0 .45rem; cursor: pointer; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; }
.order-list li button:disabled { opacity: .3; cursor: default; }
.order-list li.ok { border-color: var(--good); background: var(--good-soft); }
.order-list li.no { border-color: var(--bad); background: var(--bad-soft); }
@media print { .order-list button { display: none; } }

/* ── Alert box: something the manager must act on ── */
.alert { border: 1px solid var(--bad); border-left: 4px solid var(--bad); background: var(--bad-soft); padding: .9rem 1rem; margin: 1.4rem 0; font-size: .95rem; }
.alert strong:first-child { display: block; margin-bottom: .3rem; color: var(--bad); }

/* ── Numeric exercise (assets/numeric.js) ─────── */
.num-q { border: 1px solid var(--rule); padding: 1rem 1rem .8rem; margin-bottom: 1rem; }
.num-q .q-text { margin: 0 0 .7rem; }
.num-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.num-row input { font: inherit; font-size: .95rem; width: 8rem; padding: .3rem .5rem; background: var(--bg); color: var(--ink); border: 1px solid var(--muted); border-radius: 3px; }
.num-unit { color: var(--muted); font-size: .9rem; }
.num-fb { margin-top: .7rem; font-size: .9rem; }
.num-q.ok { border-color: var(--good); background: var(--good-soft); }
.num-q.no { border-color: var(--bad); background: var(--bad-soft); }
@media print { .num-row { display: none; } }

/* ── Annotated screenshot: <figure class="shot"><img><span class="pin" style="left:x%;top:y%">1</span></figure> ── */
.shot { position: relative; margin: 1.6rem 0; }
.shot img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 4px; }
.shot .pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent); color: #fff; font: 600 .75rem/1.5rem "JetBrains Mono", monospace; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.pin-key { list-style: none; padding: 0; columns: 2; column-gap: 2rem; font-size: .9rem; }
.pin-key li { break-inside: avoid; margin: .3rem 0; }
.pin-key b { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: #fff; text-align: center; font: 600 .7rem/1.4rem "JetBrains Mono", monospace; margin-right: .4rem; }
@media (max-width: 640px) { .pin-key { columns: 1; } .shot .pin { width: 1.1rem; height: 1.1rem; font-size: .6rem; line-height: 1.1rem; } }

/* ── Role track tags ─────────────────────────── */
.track { display: inline-block; font: 600 .7rem "JetBrains Mono", monospace; padding: .05rem .4rem; border-radius: 3px; border: 1px solid var(--rule); color: var(--muted); margin-right: .25rem; }

/* ── Images in figures never overflow the column ── */
figure img { max-width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 4px; }