/* =========================================================================
   THE LESSON EXERCISE (render/exercise.ts, script exercise.js). One component,
   on a lesson page (S1) and on Foundations. Moved here from lesson-page.css
   unchanged, plus the disclosure the reveal now is (2026-10-08).
   Without JS: a worksheet, the suggestion behind a native disclosure.
   House tokens only. Prefix lsn-ex.
   ========================================================================= */
.lsn-ex { padding: var(--s7) var(--s6); background: var(--paper-deep); border-top: 2px solid var(--brand); }
.lsn-ex__scenario { margin: 0 0 var(--s6); max-width: 46ch; font: 650 var(--t-md)/1.4 var(--ui); color: var(--ink); }
.lsn-ex__steps { list-style: none; margin: 0; padding: 0; counter-reset: ex; display: grid; gap: var(--s6); }
.lsn-ex__step { position: relative; padding-left: var(--s7); counter-increment: ex; max-width: 46rem; }
.lsn-ex__step::before { content: counter(ex); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--brand); color: var(--brand); font: 500 var(--t-xs)/1 var(--mono); }
.lsn-ex__label { display: block; margin: 0 0 var(--s2); font: 600 var(--t-base)/1.4 var(--ui); color: var(--ink); }
.lsn-ex textarea { display: block; width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: var(--s3); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-firm); font: var(--t-base)/1.5 var(--ui); resize: vertical; }
.lsn-ex textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.lsn-ex textarea::placeholder { color: var(--ink-3); }
.lsn-ex__btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s5); list-style: none; background: var(--brand); color: var(--paper); border: 0; font: 650 var(--t-base)/1 var(--ui); cursor: pointer; }
.lsn-ex__btn:hover { background: var(--brand-lift); }
.lsn-ex__btn:focus-visible, .lsn-ex__reset:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lsn-ex__ai { display: grid; gap: var(--s4); }
.lsn-ex__ai.has-yours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lsn-ex__ai:focus { outline: none; }
.lsn-ex__ai:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.lsn-ex__yours, .lsn-ex__theirs { padding: var(--s4); }
.lsn-ex__yours { background: var(--paper); border-left: 2px solid var(--brand); }
.lsn-ex__yours p:last-child { margin: 0; font: var(--t-base)/1.5 var(--ui); color: var(--ink); white-space: pre-wrap; }
.lsn-ex__theirs { background: var(--paper-3); color: var(--ink); }
.lsn-ex__theirs p:last-child { margin: 0; font: var(--t-sm)/1.55 var(--mono); }
.lsn-ex__k { margin: 0 0 var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.lsn-ex__theirs .lsn-ex__k { color: var(--ink-2); }
.lsn-ex__qs { margin: 0 0 var(--s5); padding-left: var(--s5); font: var(--t-base)/1.5 var(--ui); color: var(--ink-2); }
.lsn-ex__qs li { margin-bottom: var(--s2); }
.lsn-ex__reset { margin-top: var(--s4); padding: var(--s2) 0; background: none; border: 0; color: var(--ink-2); font: var(--t-sm)/1 var(--ui); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.lsn-ex__privacy { margin: var(--s6) 0 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
/* the reveal is a <details>; its <summary> looks like the button it was */
.lsn-ex__btn::-webkit-details-marker { display: none; }
.lsn-ex__reveal[open] > .lsn-ex__btn { margin-bottom: var(--s4); }
/* a heading for a page that frames the exercise itself (Foundations' "Your turn") */
.lsn-ex__h { margin: 0 0 var(--s3); font: 750 var(--t-lg)/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.lsn-ex__lead { margin: 0 0 var(--s5); max-width: 58ch; font: var(--t-base)/1.5 var(--ui); color: var(--ink-2); }
.lsn-ex__lead a { color: var(--ink); }

@media (max-width: 56rem) {
  .lsn-ex { padding: var(--s6) var(--s4); }
  .lsn-ex__ai.has-yours { grid-template-columns: 1fr; }
  .lsn-ex__step { padding-left: var(--s6); }
}
.lsn-ex [hidden] { display: none !important; }