/* FILL THE ROOM · the lesson component.
   Every value below is a Foundation token from /assets/style.css.
   No new color is introduced. Verified by an assert in build_foh.py. */

.foh-hours { display:grid; gap:10px; margin-top:28px; }
.foh-hours__row {
  display:grid; grid-template-columns:38px 1fr 64px; gap:16px; align-items:baseline;
  padding:14px 18px; background:var(--bg-card);
  border:1px solid var(--rule); border-left:3px solid var(--bronze); border-radius:4px;
}
.foh-hours__row--soon { opacity:.55; border-left-color:var(--muted); }
.foh-hours__n {
  font-family:'Courier New',monospace; font-size:13px; color:var(--bronze-deep);
}
.foh-hours__t { font-family:Georgia,serif; font-size:17px; color:var(--ink); line-height:1.3; }
.foh-hours__t small { display:block; font-family:'Segoe UI',sans-serif; font-size:13px; color:var(--ink-soft); margin-top:4px; }
.foh-hours__h {
  font-family:'Courier New',monospace; font-size:12px; color:var(--ink-soft);
  text-align:right; font-variant-numeric:tabular-nums;
}
a.foh-hours__row { text-decoration:none; }
a.foh-hours__row:hover { border-left-width:6px; background:var(--bg-soft); }

.foh-les {
  background:var(--bg-card); border:1px solid var(--rule);
  border-left:3px solid var(--bronze); border-radius:4px;
  padding:26px 28px; margin:18px 0;
}
.foh-les--room  { border-left-color:var(--bronze-deep); }
.foh-les--paper { border-left-color:var(--bronze-glow); }
.foh-les__num {
  font-family:'Courier New',monospace; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bronze-deep); margin-bottom:10px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.foh-les__num span { color:var(--muted); letter-spacing:.18em; }
.foh-les__title {
  font-family:Georgia,serif; font-size:21px; color:var(--ink);
  margin:0 0 18px; line-height:1.25;
}
.foh-les__row { display:grid; grid-template-columns:76px 1fr; gap:18px; padding:13px 0; border-top:1px solid var(--rule); }
.foh-les__label {
  font-family:'Courier New',monospace; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bronze-deep); padding-top:4px;
}
.foh-les__body { font-size:15.5px; line-height:1.75; color:var(--ink-soft); }
.foh-les__body b, .foh-les__body strong { color:var(--ink); font-weight:600; }
.foh-les__body em { color:var(--bronze-deep); font-style:italic; }
/* ⛔ 6 Oct 2026 · THE ANSWER USED TO BE PRINTED HERE, under every question.
   Nathan: "what kind of curriculum is this where you put the answers right in
   front of the student?" planet-lab.js had already documented the same fault
   being found and fixed once on the Cultivation planet.

   ⚠ THIS IS NOT MULTIPLE CHOICE, AND IT SHOULD SAY SO HONESTLY. The lab's ten
   missions are real multiple choice because wrong options were written for
   them. These 47 lesson checks have a question and an answer and no
   distractors — writing 141 of those is a separate job. Until then the student
   must commit an answer in their own words before the real one opens, which is
   the same principle (no free ride) with the content that actually exists. */
.foh-q { margin:0 0 10px; }
.foh-chk__in {
  width:100%; box-sizing:border-box; font-family:'Segoe UI',sans-serif;
  font-size:15px; line-height:1.55; color:var(--ink); background:var(--bg-card);
  border:1px solid var(--rule); border-radius:4px; padding:11px 13px; resize:vertical;
}
.foh-chk__in:focus { outline:2px solid var(--bronze); outline-offset:1px; border-color:var(--bronze); }
.foh-chk__go {
  margin-top:9px; font-family:'Courier New',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  background:var(--bg-soft); color:var(--bronze-deep);
  border:1px solid var(--rule); border-radius:4px; padding:10px 18px;
}
.foh-chk__go:hover:not(:disabled) { background:var(--bronze); color:var(--bg-card); border-color:var(--bronze); }
.foh-chk__go:disabled { opacity:.55; cursor:not-allowed; color:var(--muted); }
.foh-chk__a {
  margin-top:11px; padding:12px 16px; background:var(--bg-soft);
  border-left:2px solid var(--bronze); border-radius:3px;
  font-family:Georgia,serif; font-style:italic; color:var(--ink);
}
.foh-chk__a::before {
  content:'The answer'; display:block; font-family:'Courier New',monospace;
  font-style:normal; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bronze-deep); margin-bottom:6px;
}
.foh-chk.is-open .foh-chk__go { display:none; }

.foh-key { display:grid; gap:10px; margin-top:22px; }
.foh-key__i { display:grid; grid-template-columns:132px 1fr; gap:16px; font-size:14.5px; color:var(--ink-soft); }
.foh-key__i b { font-family:'Courier New',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-deep); }

/* ⛔ NEVER display:grid on a list item whose content mixes elements and bare
   text. A <li> like "<b>Title.</b> Then a sentence." produces THREE grid
   items — the ::before counter, the <b>, and an anonymous box for the text —
   so the sentence wraps onto the next row into a 26px column and renders one
   word per line. It shipped that way on 5 Oct. Absolute positioning has no
   child count to get wrong. */
.foh-list { counter-reset:foh; margin-top:16px; padding:0; list-style:none; }
.foh-list li {
  display:block; position:relative; padding-left:38px; margin-bottom:11px;
  font-size:15px; line-height:1.7; color:var(--ink-soft);
}
.foh-list li::before {
  content:counter(foh); counter-increment:foh;
  position:absolute; left:0; top:4px; width:26px; text-align:left;
  font-family:'Courier New',monospace; font-size:11px; color:var(--bronze-deep);
}
.foh-list li b, .foh-list li strong { color:var(--ink); }

.foh-next { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

@media (max-width:640px){
  .foh-les__row { grid-template-columns:1fr; gap:6px; }
  .foh-les__label { padding-top:0; }
  .foh-hours__row { grid-template-columns:30px 1fr; }
  .foh-hours__h { grid-column:2; text-align:left; }
  .foh-key__i { grid-template-columns:1fr; gap:3px; }
}

@media print {
  .top, .corner-mark, footer, .foh-next, .btn { display:none !important; }
  .foh-les { break-inside:avoid; }
}