/* ═══════════════════════════════════════════════════════════════
   DRAWING OFFICE — lesson blocks, callouts, checks, certificate
   ═══════════════════════════════════════════════════════════════ */

.lesson__id {
  font-family: var(--f-data);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--g-600);
  letter-spacing: -0.04em;
  margin-bottom: var(--s3);
  user-select: none;
}
.lesson__title { margin-bottom: var(--s4); }
.lesson__meta { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s7); }

/* ── the block spine ──────────────────────────────────────────
   Every block hangs off a single hairline running down the left
   of the lesson, with a marker at each block. It reads as the
   margin rule on a drawing sheet.                                */
.block {
  position: relative;
  padding-left: var(--s6);
  padding-bottom: var(--s7);
}
.block::before {
  content: '';
  position: absolute; left: 9px; top: 22px; bottom: 0;
  width: 1px; background: var(--g-700);
}
.block:last-child { padding-bottom: var(--s5); }
.block:last-child::before { bottom: auto; height: 0; }

.block__tag {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
  font-family: var(--f-data); font-size: var(--t-mm);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--p-300);
}
.block__tag i {
  position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border: 1px solid var(--g-600);
  border-radius: 50%;
  background: var(--g-900);
  font-style: normal; font-size: 9px; letter-spacing: 0;
  color: var(--p-300);
}
.block--core .block__tag i  { border-color: var(--ink-dim); color: var(--ink); }
.block--check .block__tag i { border-color: var(--employer-dim); color: var(--employer); }
.block--take .block__tag i  { border-color: var(--slack-dim); color: var(--slack); }

@media (max-width: 620px) {
  .block { padding-left: var(--s5); }
  .block::before { left: 8px; }
  .block__tag i { width: 17px; height: 17px; }
}

/* ── hook: set in the display serif, italic. The one place the
      course speaks rather than instructs.                        */
.block--hook .prose p {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 6, 'WONK' 0, 'opsz' 24;
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.45;
  color: var(--p-100);
}

/* ── callouts ──────────────────────────────────────────────── */
.callout {
  border: 1px solid var(--g-700);
  border-left: 2px solid var(--g-500);
  border-radius: var(--radius);
  background: var(--g-850);
  padding: var(--s4) var(--s5);
}
.callout > * + * { margin-top: var(--s3); }
.callout p { color: var(--p-200); font-size: var(--t-sm); }
.callout__l {
  display: block;
  font-family: var(--f-data); font-size: var(--t-mm);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--p-300); margin-bottom: var(--s2);
}
.callout--law     { border-left-color: var(--ink);        background: var(--ink-wash); }
.callout--law .callout__l { color: var(--ink); }
.callout--warn    { border-left-color: var(--critical);   background: var(--critical-wash); }
.callout--warn .callout__l { color: var(--critical); }
.callout--protocol{ border-left-color: var(--employer);   background: var(--employer-wash); }
.callout--protocol .callout__l { color: var(--employer); }
.callout--site    { border-left-color: var(--slack);      background: var(--slack-wash); }
.callout--site .callout__l { color: var(--slack); }

.callout__cite {
  display: block; font-size: var(--t-xs); color: var(--p-400);
  font-family: var(--f-data); letter-spacing: .04em;
  padding-top: var(--s2); border-top: 1px dashed var(--g-700);
}

/* ── worked example: the calc sheet ────────────────────────── */
.calc {
  border: var(--hair); border-radius: var(--radius);
  background: var(--g-850); overflow: hidden;
  font-family: var(--f-data); font-size: var(--t-sm);
}
.calc__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--g-700);
}
.calc__row:last-child { border-bottom: 0; }
.calc__row span { color: var(--p-200); font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.45; }
.calc__row b { color: var(--p-100); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc__row--sub { background: var(--g-900); }
.calc__row--total {
  border-top: 1px solid var(--g-500); background: var(--g-800);
}
.calc__row--total span { color: var(--p-100); font-weight: 600; }
.calc__row--total b { color: var(--ink); font-weight: 600; }
.calc__row--crit b { color: var(--critical); }
.calc__row--emp b  { color: var(--employer); }
.calc__row--con b  { color: var(--contractor); }

/* ── check yourself ────────────────────────────────────────── */
.q { border: var(--hair); border-radius: var(--radius); background: var(--g-850); padding: var(--s5); }
.q + .q { margin-top: var(--s4); }
.q__n {
  font-family: var(--f-data); font-size: var(--t-mm);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--p-300); display: block; margin-bottom: var(--s3);
}
.q__stem { font-size: var(--t-sm); color: var(--p-100); margin-bottom: var(--s4); line-height: 1.55; }
.q__opts { display: grid; gap: var(--s2); }
.opt {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s3); align-items: start;
  text-align: left;
  padding: var(--s3);
  border: 1px solid var(--g-700);
  border-radius: var(--radius);
  background: var(--g-900);
  font-size: var(--t-sm);
  color: var(--p-200);
  line-height: 1.5;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
  width: 100%;
}
.opt:hover:not(:disabled) { border-color: var(--g-500); background: var(--g-800); color: var(--p-100); }
.opt__k {
  font-family: var(--f-data); font-size: var(--t-mm);
  color: var(--p-400); border: 1px solid var(--g-600);
  border-radius: 2px; width: 20px; height: 20px;
  display: grid; place-items: center; letter-spacing: 0;
}
.opt--right { border-color: var(--slack); background: var(--slack-wash); color: var(--p-100); }
.opt--right .opt__k { border-color: var(--slack); color: var(--slack); }
.opt--wrong { border-color: var(--critical); background: var(--critical-wash); color: var(--p-100); }
.opt--wrong .opt__k { border-color: var(--critical); color: var(--critical); }
.opt:disabled { cursor: default; }
.opt--muted { opacity: .5; }

.q__why {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px dashed var(--g-700);
  font-size: var(--t-xs); color: var(--p-200); line-height: 1.6;
  animation: rise 320ms var(--ease-out);
}
.q__why b { color: var(--p-100); }
.q__verdict {
  font-family: var(--f-data); font-size: var(--t-mm);
  text-transform: uppercase; letter-spacing: .14em;
  display: block; margin-bottom: var(--s2);
}
.q__verdict--ok { color: var(--slack); }
.q__verdict--no { color: var(--critical); }

/* ── takeaway ──────────────────────────────────────────────── */
.take { display: grid; gap: var(--s3); }
.take li {
  position: relative; padding-left: var(--s5);
  font-size: var(--t-sm); color: var(--p-200); line-height: 1.55;
}
.take li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 12px; height: 1px; background: var(--slack);
}

/* ── the mark-complete strip ───────────────────────────────── */
.done {
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s5);
  border: 1px dashed var(--g-600);
  border-radius: var(--radius);
  background: var(--g-850);
}
.done p { font-size: var(--t-xs); color: var(--p-300); flex: 1 1 220px; }

/* ══════════════════════════════════════════════════════════════
   QUIZ VIEW
   ══════════════════════════════════════════════════════════════ */

.quiz__bar {
  display: flex; align-items: center; gap: var(--s4);
  margin-bottom: var(--s6); flex-wrap: wrap;
}
.quiz__dots { display: flex; gap: 5px; flex-wrap: wrap; }
.quiz__dot {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--g-700);
  transition: background-color 220ms var(--ease), transform 220ms var(--ease);
}
.quiz__dot--now { background: var(--ink); transform: scale(1.25); }
.quiz__dot--ok  { background: var(--slack); }
.quiz__dot--no  { background: var(--critical); }

.score {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; background: var(--g-700);
  border: var(--hair); border-radius: var(--radius); overflow: hidden;
  margin-bottom: var(--s5);
}
.score > div { background: var(--g-850); padding: var(--s4) var(--s5); }
.score b {
  display: block; font-family: var(--f-data); font-size: 1.9rem;
  font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; color: var(--p-100);
}
.score span { font-family: var(--f-data); font-size: var(--t-mm); text-transform: uppercase; letter-spacing: .12em; color: var(--p-300); }
.score--pass b { color: var(--slack); }
.score--fail b { color: var(--critical); }

/* ══════════════════════════════════════════════════════════════
   GLOSSARY
   ══════════════════════════════════════════════════════════════ */

.gsearch {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s5);
}
.gsearch input {
  flex: 1 1 260px;
  padding: var(--s3) var(--s4);
  background: var(--g-850);
  border: 1px solid var(--g-600);
  border-radius: var(--radius);
  font-size: var(--t-sm);
}
.gsearch input:focus { border-color: var(--ink); outline: none; }

.glist { display: grid; gap: var(--s3); }
.gterm {
  border: var(--hair); border-left: 2px solid var(--g-600);
  border-radius: var(--radius);
  background: var(--g-850); padding: var(--s4) var(--s5);
}
.gterm dt {
  font-weight: 600; font-size: var(--t-sm); color: var(--p-100);
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}
.gterm dt em {
  font-style: normal; font-family: var(--f-data); font-size: var(--t-mm);
  color: var(--p-400); letter-spacing: .1em; text-transform: uppercase;
}
.gterm dd { font-size: var(--t-xs); color: var(--p-200); margin-top: var(--s2); line-height: 1.6; }
.gterm dd a { color: var(--ink-soft); border-bottom: 1px solid var(--ink-dim); }

/* ── glossary popover, shared with lesson prose ────────────── */
.term {
  color: var(--p-100);
  border-bottom: 1px dotted var(--ink);
  cursor: help;
  font: inherit;
  padding: 0;
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}
.term:hover, .term[aria-expanded="true"] { color: var(--ink-soft); background: var(--ink-wash); }

.pop {
  position: absolute; z-index: 120;
  width: min(330px, calc(100vw - 24px));
  background: var(--g-800);
  border: 1px solid var(--g-500);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: 0 22px 48px -18px rgba(0,0,0,.9);
  font-size: var(--t-xs); line-height: 1.55; color: var(--p-200);
  animation: rise 180ms var(--ease-out);
}
.pop__t {
  font-family: var(--f-data); font-size: var(--t-mm);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); margin-bottom: var(--s2);
}
.pop__go {
  display: block; margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px dashed var(--g-700);
  font-family: var(--f-data); font-size: var(--t-mm);
  color: var(--p-300); letter-spacing: .08em;
}
.pop__go:hover { color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════════════ */

.setrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) 0; border-bottom: var(--hair);
}
.setrow:last-child { border-bottom: 0; }
.setrow p { font-size: var(--t-xs); color: var(--p-300); max-width: 52ch; margin-top: 2px; }
.setrow h4 { color: var(--p-100); }

.toggle {
  position: relative; width: 46px; height: 26px;
  border: 1px solid var(--g-600); border-radius: 999px;
  background: var(--g-800); flex: 0 0 auto;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--p-300);
  transition: transform 240ms var(--ease), background-color 200ms var(--ease);
}
.toggle[aria-pressed="true"] { background: var(--ink-wash); border-color: var(--ink); }
.toggle[aria-pressed="true"]::after { transform: translateX(20px); background: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   CERTIFICATE — a drawing title block, issued
   ══════════════════════════════════════════════════════════════ */

.cert {
  border: 1px solid var(--g-500);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91,157,217,.10), transparent 70%),
    var(--g-850);
  padding: var(--s8) var(--s6);
  text-align: center;
  position: relative; overflow: hidden;
}
.cert::before, .cert::after {
  content: ''; position: absolute; left: var(--s5); right: var(--s5);
  height: 1px; background: var(--g-600);
}
.cert::before { top: var(--s5); }
.cert::after  { bottom: var(--s5); }
.cert__kicker { font-family: var(--f-data); font-size: var(--t-mm); text-transform: uppercase; letter-spacing: .28em; color: var(--ink); }
.cert__name {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 4, 'WONK' 0, 'opsz' 100;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05;
  margin: var(--s5) 0 var(--s3);
}
.cert__for { color: var(--p-200); max-width: 52ch; margin-inline: auto; font-size: var(--t-sm); }
.cert__block {
  margin-top: var(--s7);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; background: var(--g-700);
  border: 1px solid var(--g-700);
  text-align: left;
}
.cert__block > div { background: var(--g-850); padding: var(--s3) var(--s4); }
.cert__block span { display: block; font-family: var(--f-data); font-size: var(--t-mm); text-transform: uppercase; letter-spacing: .12em; color: var(--p-300); }
.cert__block b { font-family: var(--f-data); font-size: var(--t-sm); color: var(--p-100); font-weight: 400; }

@media print {
  .head, .foot, .lnav, .done, .gate { display: none !important; }
  .view { padding: 0; }
}