/* Agentic Harness Engineering — shared course stylesheet.
   Tufte-lite: serif body, generous margins, muted palette, prints clean.
   Every lesson and reference doc links this. Don't inline-style; extend here. */

:root {
  /* Woolworths theme: fresh green on white, bold sans wordmark feel */
  --ink: #2b2b2b;
  --ink-soft: #5f6560;
  --paper: #ffffff;
  --rule: #dfe4de;
  --accent: #178841;      /* Woolworths green - links, marks, eyebrows */
  --accent-soft: #e8f4e6; /* light apple-green tint */
  --good: #178841;
  --bad: #c40a2e;
  --code-bg: #eff4ed;
  --max: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 19px;
  margin: 0;
  padding: 3.5rem 1.5rem 6rem;
}

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

/* Kicker + titles */
.kicker {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
h1 { font-size: 2.15rem; line-height: 1.12; margin: 0 0 0.3rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin: 2.4rem 0 0.6rem; font-weight: 700; color: var(--accent); }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; font-weight: 600; letter-spacing: 0.01em; }
.subtitle { color: var(--ink-soft); font-style: italic; font-size: 1.05rem; margin: 0 0 1.2rem; }

p, li { color: var(--ink); }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
a:hover { border-bottom-color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }

/* Pull quote / key claim */
.claim {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.8rem 1.1rem;
  margin: 1.4rem 0;
  font-size: 1.05rem;
}
.claim cite { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.4rem; font-style: normal; }

/* Definition / callout boxes */
.box {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 1.3rem 0;
  background: #fff;
}
.box .label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}

/* Do-this task */
.task {
  border: 2px dashed var(--accent);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  background: #fff;
}
.task h3 { margin-top: 0; color: var(--accent); }

code, kbd, pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
}
code { background: var(--code-bg); padding: 0.08em 0.35em; border-radius: 3px; }
pre { background: var(--code-bg); padding: 0.9rem 1.1rem; border-radius: 6px; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; }

/* Footer nav / meta */
.meta { font-size: 0.82rem; color: var(--ink-soft); }
.nav {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}
.ask {
  display: none;
  margin-top: 2rem; padding: 0.9rem 1.1rem;
  background: var(--accent-soft); border-radius: 6px;
  font-size: 0.92rem; color: var(--ink-soft);
}
.ask strong { color: var(--ink); }

/* Progress dots for the course arc */
.arc { list-style: none; padding: 0; margin: 1rem 0; }
.arc li { padding: 0.15rem 0; color: var(--ink-soft); font-size: 0.95rem; }
.arc li.here { color: var(--ink); font-weight: 600; }
.arc li.here::before { content: "▶ "; color: var(--accent); }
.arc li.done::before { content: "✓ "; color: var(--good); }
.arc li.todo::before { content: "· "; color: var(--rule); }

/* Quiz widget (see quiz.js) */
.quiz {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 1rem 1.2rem; margin: 1.4rem 0; background: #fff;
}
.quiz .q { font-weight: 600; margin: 0 0 0.7rem; }
.quiz button {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 0.95rem;
  padding: 0.55rem 0.8rem; margin: 0.35rem 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 5px;
  cursor: pointer; color: var(--ink);
}
.quiz button:hover:not(:disabled) { border-color: var(--accent); }
.quiz button:disabled { cursor: default; opacity: 0.95; }
.quiz button.correct { background: #eaf3e9; border-color: var(--good); color: var(--good); font-weight: 600; }
.quiz button.wrong { background: #f7e9e6; border-color: var(--bad); color: var(--bad); text-decoration: line-through; }
.quiz .explain {
  display: none; margin: 0.8rem 0 0; padding-top: 0.7rem;
  border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-soft);
}

@media print {
  body { background: #fff; padding: 0; font-size: 12pt; }
  .ask, .nav, .quiz button { display: none; }
  a { color: var(--ink); border: 0; }
}