/* ============================================================
   POSE THEME — "Field Manual / Whiteboard"
   Built for people who teach with their hands: board white,
   marker black, safety orange, stencil labels. Sturdy over sleek.
   Source of truth for the design: mockups/theme.html
   ============================================================ */
:root {
  /* whiteboard & marker */
  --paper:    #f2f4f4;   /* page background — whiteboard white, slightly cool */
  --surface:  #ffffff;   /* cards, panels */
  --ink:      #1f242a;   /* primary text — dry-erase black */
  --muted:    #47545f;   /* secondary text — dark enough to read on the speckled board */
  --line:     #d5dbdf;   /* borders */
  --line-hard:#a7b2ba;   /* emphasized borders */
  /* workwear accents */
  --orange:      #cd4a0b;   /* safety orange — primary action */
  --orange-deep: #a83c08;
  --orange-tint: #f8e3d4;
  --steel:       #34586e;   /* tool steel blue — links, assist */
  --steel-tint:  #dfe8ec;
  --green:       #3d7442;   /* go / complete */
  --green-tint:  #e2ecdd;
  --amber:       #96700f;   /* caution */
  --amber-tint:  #f4ead0;
  /* code */
  --shop-dark:   #22272c;   /* code blocks: dark slate */
  --shop-text:   #e1e7ec;
  /* shape */
  --r: 3px;                 /* squared-off corners */
}
* { box-sizing: border-box; }
body {
  margin: 0; background-color: var(--paper); color: var(--ink);
  /* marker-dust texture: faint dark speckle, like a well-used whiteboard */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.14 0 0 0 0 0.16 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.55;
}
h1, h2, h3, h4 {
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700; line-height: 1.15; margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: 27px; margin-bottom: 6px; }
.mono, code, .microlabel { font-family: "IBM Plex Mono", ui-monospace, monospace; }
/* stencil microlabel — the theme's signature detail */
.microlabel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.microlabel.orange { color: var(--orange); }
a { color: var(--steel); text-underline-offset: 2px; }
a:hover { color: var(--orange); }
p.sub { color: var(--muted); margin: 0 0 28px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
hr.divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- app header ---------- */
header.app {
  background: var(--surface); border-bottom: 2px solid var(--ink);
  padding: 13px 32px; display: flex; align-items: baseline; gap: 14px;
}
.logo {
  font-family: "Barlow", system-ui, sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: 0.02em; color: var(--ink); text-decoration: none;
}
.logo .tick { color: var(--orange); }
header.app .tagline { color: var(--muted); font-size: 13px; }
header.app nav { margin-left: auto; display: flex; gap: 22px; align-items: baseline; }
header.app nav a, header.app nav button.linklike {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: 14.5px;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
header.app nav a.active, header.app nav a:hover { border-bottom-color: var(--orange); color: var(--ink); }
header.app nav form { display: inline; }
button.linklike {
  background: none; border: none; box-shadow: none; padding: 0; cursor: pointer;
  font: 500 14.5px "IBM Plex Sans", sans-serif;
}
button.linklike:hover { border-bottom: 2px solid var(--orange); }

main { max-width: 900px; margin: 0 auto; padding: 40px 28px 90px; }
main.wide { max-width: 1080px; }
main.narrow { max-width: 480px; }

/* ---------- buttons ---------- */
button, .btn {
  font: 600 14.5px "IBM Plex Sans", sans-serif; cursor: pointer;
  border-radius: var(--r); padding: 10px 20px; text-decoration: none;
  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);
  box-shadow: 2px 2px 0 rgba(31,36,42,.18); display: inline-block;
}
button:active, .btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(31,36,42,.18); }
.btn-primary { background: var(--orange); border-color: var(--orange-deep); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); color: #fff; }
.btn-quiet { border-color: var(--line-hard); box-shadow: none; font-weight: 500; }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); font-weight: 500; }
.btn-ghost:hover { color: var(--ink); }
.btn-small { padding: 5px 12px; font-size: 13px; }
button[disabled], .btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=email], input[type=url],
textarea, select {
  font: inherit; width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--line-hard); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint);
}
label.field { display: block; margin: 16px 0 6px; }
label.field:first-child { margin-top: 0; }
label.field .microlabel { color: var(--ink); }
.row { display: flex; gap: 14px; }
.row > * { flex: 1; }
.errorlist { color: var(--orange-deep); font-size: 13.5px; margin: 4px 0 0; padding-left: 0; list-style: none; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checkbox-line input { width: auto; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1.5px solid var(--line-hard);
  border-radius: var(--r); padding: 24px 26px; margin-bottom: 18px;
}
.card.raised { box-shadow: 3px 3px 0 rgba(31,36,42,.12); }
.card h2 { font-size: 19px; }

/* ---------- badges & chips ---------- */
.kind {
  display: inline-block; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--r);
  border: 1px solid var(--line-hard); color: var(--muted); background: var(--paper);
  white-space: nowrap;
}
.kind.lab      { border-color: var(--orange); color: var(--orange); background: var(--orange-tint); }
.kind.reading  { border-color: var(--steel);  color: var(--steel);  background: var(--steel-tint); }
.kind.assessment { border-color: var(--amber); color: var(--amber); background: var(--amber-tint); }
.chip {
  display: inline-block; font: 500 12px "IBM Plex Mono", monospace; padding: 2px 9px;
  border-radius: 12px; border: 1.5px solid var(--line-hard); color: var(--muted);
  background: var(--surface); cursor: pointer; margin: 0 4px 4px 0; user-select: none;
}
.chip:hover { border-color: var(--orange); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* chips as checkbox labels (plan alignment) */
.chip input { display: none; }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag-match {
  font: 600 12px "IBM Plex Sans", sans-serif; color: var(--green); background: var(--green-tint);
  border: 1px solid var(--green); border-radius: var(--r); padding: 2px 8px; white-space: nowrap;
}
.tag-match.partial { color: var(--amber); background: var(--amber-tint); border-color: var(--amber); }
.status-pill {
  font: 600 12px "IBM Plex Sans", sans-serif; border-radius: var(--r); padding: 2px 8px;
  border: 1px solid var(--line-hard); color: var(--muted); background: var(--paper); white-space: nowrap;
}
.status-pill.ready { color: var(--green); background: var(--green-tint); border-color: var(--green); }

/* ---------- wizard furniture ---------- */
.steps { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.steps .step {
  display: flex; align-items: center; gap: 7px; font: 600 12px "IBM Plex Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.steps .dot {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-hard);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; background: var(--surface); font-family: "IBM Plex Mono", monospace;
}
.steps .step.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.steps .step.now { color: var(--ink); }
.steps .step.now .dot { background: var(--orange); border-color: var(--orange-deep); color: #fff; }
.steps .bar { flex: 0 0 26px; height: 2px; background: var(--line-hard); }
.wizfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
.wizfoot .hint { font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- assist note (the AI voice) ---------- */
.assist {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--steel-tint); border: 1.5px solid var(--steel);
  border-left-width: 5px; border-radius: var(--r);
  padding: 13px 16px; font-size: 14px; margin-bottom: 20px;
}
.assist .microlabel { color: var(--steel); flex: 0 0 auto; padding-top: 2px; }

/* ---------- progress ---------- */
.meter { height: 10px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.meter > div {
  height: 100%; transition: width .4s;
  background: repeating-linear-gradient(-45deg, var(--orange), var(--orange) 8px, var(--orange-deep) 8px, var(--orange-deep) 16px);
}

/* ---------- doors & pick cards ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.door {
  background: var(--surface); border: 1.5px solid var(--line-hard); border-radius: var(--r);
  padding: 28px 26px; cursor: pointer; display: block; color: var(--ink); text-decoration: none;
  box-shadow: 3px 3px 0 rgba(31,36,42,.12);
}
.door:hover { border-color: var(--orange); color: var(--ink); }
.door .icon { font-size: 30px; margin-bottom: 10px; }
.door h2 { margin-bottom: 6px; font-size: 20px; }
.door p { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.door .go { color: var(--orange); font-weight: 600; font-size: 14px; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.picks.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.picks.cols-1 { grid-template-columns: 1fr; }
.pick {
  border: 1.5px solid var(--line-hard); border-radius: var(--r); padding: 16px;
  cursor: pointer; background: var(--surface); display: block;
}
.pick:hover { border-color: var(--orange); }
.pick.selected { border-color: var(--orange); background: var(--orange-tint); }
.pick h3 { margin: 0 0 4px; font-size: 15px; }
.pick p { margin: 0; font-size: 13px; color: var(--muted); }
.pick input[type=radio] { display: none; }

/* ---------- dropzone ---------- */
.dropzone {
  border: 2px dashed var(--line-hard); border-radius: var(--r); padding: 36px;
  text-align: center; color: var(--muted); background: var(--paper); cursor: pointer;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--orange); }
.dropzone b { color: var(--ink); }

/* ---------- lists ---------- */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li {
  padding: 10px 12px; border: 1px solid var(--line-hard); border-radius: var(--r);
  margin-bottom: 8px; background: var(--surface); display: flex; gap: 10px; align-items: baseline;
}
ul.plain li .grip { color: var(--line-hard); cursor: grab; }
ul.plain li .edit { margin-left: auto; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.manifest-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line-hard); border-radius: var(--r);
  margin-bottom: 8px; background: var(--surface);
}
.manifest-row .title { font-weight: 600; flex: 1 1 200px; }
.manifest-row .chips { flex: 0 1 auto; }
.checkline { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14.5px; }
.checkline .st { width: 22px; text-align: center; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
  font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--ink); color: var(--ink);
}
table.list td { padding: 10px; border-bottom: 1px solid var(--line); }

/* ---------- match cards (materials step) ---------- */
.match {
  border: 1px solid var(--line-hard); border-radius: var(--r); padding: 14px 16px;
  margin-bottom: 10px; background: var(--surface);
}
.match .top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.match .top h3 { margin: 0; font-size: 15px; }
.match .why { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.match .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.match .actions button, .match .actions .btn { font-size: 13px; padding: 5px 12px; box-shadow: none; }
.match .actions .on {
  background: var(--orange-tint); border-color: var(--orange); color: var(--orange-deep); font-weight: 600;
}
.match.dashed { border-style: dashed; }

/* ---------- attribution plate ---------- */
.plate {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--ink); border-radius: var(--r);
  background: var(--surface); padding: 7px 14px; font-size: 13px;
  box-shadow: 2px 2px 0 rgba(31,36,42,.18); margin-top: 6px;
}
.plate .rivet { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hard); border: 1px solid var(--ink); flex: 0 0 auto; }

/* ---------- toasts / messages ---------- */
.messages { max-width: 900px; margin: 16px auto 0; padding: 0 28px; }
.message {
  border: 1.5px solid var(--steel); border-left-width: 5px; background: var(--steel-tint);
  border-radius: var(--r); padding: 10px 14px; font-size: 14px; margin-bottom: 8px;
}
.message.error { border-color: var(--orange-deep); background: var(--orange-tint); }
.message.success { border-color: var(--green); background: var(--green-tint); }

/* ---------- big done check ---------- */
.bigcheck { font-size: 44px; color: var(--green); }

/* ============================================================
   MARKDOWN RENDERING — .prose
   How generated course material reads. Optimized for print-
   ability and long-form reading, like a good shop manual.
   ============================================================ */
.prose { max-width: 70ch; font-size: 16px; }
.prose h1 {
  font-size: 30px; border-bottom: 3px solid var(--ink);
  padding-bottom: 10px; margin: 0 0 6px;
}
.prose .doc-meta { color: var(--muted); font-size: 13.5px; margin: 0 0 28px; font-family: "IBM Plex Mono", monospace; }
.prose h2 { font-size: 21px; margin: 36px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.prose h2::before { content: "§"; color: var(--orange); font-weight: 700; font-size: 17px; }
.prose h3 { font-size: 17px; margin: 26px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ol, .prose ul { padding-left: 26px; margin: 0 0 14px; }
.prose li { margin-bottom: 7px; }
.prose ol > li::marker { font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--orange); }
.prose code {
  font-size: 13.5px; background: var(--orange-tint); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1px 5px;
}
.prose pre {
  background: var(--shop-dark); color: var(--shop-text);
  border-radius: var(--r); border-left: 5px solid var(--orange);
  padding: 16px 18px; overflow-x: auto; margin: 0 0 16px;
}
.prose pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.6; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 14.5px; }
.prose th {
  font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--ink); color: var(--ink);
}
.prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.prose blockquote {
  margin: 0 0 16px; padding: 12px 18px;
  border-left: 5px solid var(--amber); background: var(--amber-tint);
  border-radius: var(--r);
}
.prose blockquote p:last-child { margin: 0; }
.prose ul.task-list, .prose ul:has(> li.task-list-item) { list-style: none; padding-left: 4px; }
.prose hr { border: none; border-top: 2px dashed var(--line-hard); margin: 30px 0; }
.prose .instructor-only {
  border: 2px dashed var(--orange); border-radius: var(--r);
  padding: 18px 22px; margin-top: 30px; background: var(--orange-tint);
}
.prose .instructor-only > .microlabel { color: var(--orange); display: block; margin-bottom: 10px; }

@media (max-width: 760px) {
  .doors, .picks, .picks.cols-3 { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  header.app { flex-wrap: wrap; }
}
@media print {
  body { background: #fff; }
  header.app, .wizfoot, .steps, nav { display: none; }
}