/* docs-page.css — shared styles for the standalone, CSP-compliant pages
 * (compliance.html, facilitator-guide.html, revisit.html).
 *
 * EXTERNAL stylesheet on purpose: the production Content-Security-Policy is
 * `style-src 'self'` (no 'unsafe-inline'), so inline <style> blocks are blocked
 * in production. A same-origin <link rel="stylesheet"> is allowed. (The dev
 * server relaxes to 'unsafe-inline', which is why inline styles "worked" locally
 * but not in prod.)
 *
 * Consumes tokens.css (linked before this file on every consumer page) — no
 * raw hex/px values here; everything references a design token. This also
 * inherits the Source Serif/Sans faces and automatic dark-mode support. */
* { box-sizing: border-box; }
body {
  font: var(--fs-2)/var(--lh-body) var(--font-sans);
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
  background: var(--bg);
}
h1 { font-family: var(--font-serif); font-size: var(--fs-5); line-height: var(--lh-tight); margin: 0 0 2px; color: var(--ink); }
h2 { font-family: var(--font-serif); font-size: var(--fs-3); line-height: var(--lh-snug); margin: var(--s-5) 0 var(--s-2);
  border-bottom: 2px solid var(--primary); padding-bottom: var(--s-1); color: var(--ink); }
.sub { color: var(--muted); margin: 0 0 var(--s-4); }
ul { margin: 6px 0; padding-left: 1.3em; }
li { margin: 3px 0; }
a { color: var(--primary); }
.note { font-size: var(--fs-1); color: var(--muted); background: var(--nagoya-50); border-left: 3px solid var(--primary);
  padding: var(--s-3); border-radius: var(--r-sm); margin: var(--s-3) 0; }
.foot { margin-top: var(--s-6); font-size: var(--fs-1); color: var(--muted); border-top: 1px solid var(--line);
  padding-top: var(--s-3); }
.pbtn { background: var(--primary); color: var(--on-primary); border: 0; border-radius: var(--r-sm); padding: 9px 16px;
  font-size: var(--fs-2); cursor: pointer; }
.pbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.badge { display: inline-block; font-size: var(--fs-1); font-weight: var(--fw-semibold); background: var(--ok-50);
  color: var(--ok-strong); border: 1px solid var(--ok); border-radius: var(--r-sm); padding: 2px 9px; margin: 2px 4px 2px 0; }

/* Facilitator-guide numbered steps. */
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: var(--s-4) 0; }
ol.steps > li { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) 52px; margin: 0 0 var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--n-25); }
ol.steps > li::before { counter-increment: s; content: counter(s); position: absolute;
  left: var(--s-3); top: var(--s-3); width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--primary);
  color: var(--on-primary); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }
.step-h { font-weight: var(--fw-bold); color: var(--ink); }
.tip { font-size: var(--fs-1); background: var(--ok-50); border-left: 3px solid var(--ok); padding: 9px var(--s-3);
  border-radius: var(--r-sm); margin: var(--s-2) 0; }

/* Retention-quiz (revisit.html). */
.q-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); margin: var(--s-3) 0; background: var(--n-25); }
.q-text { font-weight: var(--fw-semibold); margin: 0 0 var(--s-2); }
.q-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line-strong); background: var(--card);
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); margin: 6px 0; cursor: pointer; font: inherit; color: inherit; }
.q-opt:hover { background: var(--nagoya-50); }
.q-opt:disabled { cursor: default; }
.q-opt.correct { border-color: var(--ok); background: var(--ok-50); }
.q-opt.wrong { border-color: var(--key); background: var(--key-50); }
.q-exp { font-size: var(--fs-1); color: var(--muted); margin: var(--s-2) 0 0; }
.q-score { font-family: var(--font-serif); font-size: var(--fs-4); font-weight: var(--fw-bold); color: var(--ink); margin: var(--s-3) 0; }

@media print { .noprint { display: none; } body { padding: 0; } }