/* Lesson design system v2 — calmer, step-based, clearer separation.
   Loaded by rebuilt day pages after portal.css; scoped under .lesson-v2 */

/* Agentic Engineering track accent (cobalt) — day pages don't inherit it from the course page */
:root { --acc: #2342e0; --acc-deep: #1b35b8; }

/* rhythm: consistent vertical spacing */
.lesson-v2 > * { margin-top: 0; margin-bottom: 28px; }
.lesson-v2 .sec { margin: 0 0 14px; }
.lesson-v2 p { margin: 0 0 16px; }

/* goal card — the first thing on the page */
.ls-goal { border: 2px solid var(--ink, #111); border-radius: 6px; padding: 22px 26px; background: var(--paper, #fff); }
.ls-goal > .mono { display: block; margin-bottom: 12px; font-size: 15px !important; font-weight: 700; letter-spacing: .14em; color: var(--acc, #2342e0); }
.ls-goal .g-main { font-size: 19px; line-height: 1.55; font-weight: 600; margin: 0 0 12px; }
.ls-goal .g-need { font-size: 14.5px; color: var(--muted, #666); margin: 0; }
.ls-goal .g-need b { color: inherit; }

/* block separation — a real visual break */
.ls-blockhead { margin: 56px 0 26px; padding: 18px 22px; border-radius: 6px; background: rgba(35, 66, 224, .06); border-left: 4px solid var(--acc, #2342e0); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ls-blockhead .bh-idx { font-family: var(--mono, monospace); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc, #2342e0); }
.ls-blockhead .bh-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ls-blockhead .bh-sub { flex-basis: 100%; font-size: 14.5px; color: var(--muted, #666); }

/* step unit — instruction + code + trouble + check, one card per step */
.ls-step { position: relative; border: 1px solid var(--line-2, #ddd); border-radius: 6px; padding: 20px 22px 16px 64px; margin-bottom: 18px; background: var(--paper, #fff); }
.ls-step .st-num { position: absolute; left: 16px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink, #111); color: var(--paper, #fff); font: 700 14px/32px var(--mono, monospace); text-align: center; }
.ls-step .st-title { font-weight: 700; font-size: 16.5px; margin: 0 0 8px; padding-top: 4px; }
.ls-step p { font-size: 15.5px; line-height: 1.6; }
.ls-step .ls-prompt, .ls-step .ls-term, .ls-step .ls-ui { margin: 12px 0; }
.ls-step details { margin: 10px 0; }
.ls-step ol { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; padding-left: 20px; }
.ls-step ol li { margin-bottom: 7px; }
.ls-step .st-check { font-size: 14.5px; margin: 12px 0 2px; padding-top: 10px; border-top: 1px dashed var(--line-2, #ddd); color: #2E6B4F; }
.ls-step .st-check::before { content: "✓ "; font-weight: 700; }

/* mock app/browser window (for app-based walkthroughs) */
.ls-ui { border: 1px solid var(--line-2, #ccc); border-radius: 8px; overflow: hidden; background: var(--paper, #fff); }
.ls-ui .ui-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(120,120,140,.12); font-family: var(--mono, monospace); font-size: 12px; color: var(--muted, #666); }
.ls-ui .ui-bar::before { content: "● ● ●"; letter-spacing: 2px; font-size: 9px; color: rgba(120,120,140,.7); }
.ls-ui .ui-body { padding: 14px 16px; font-size: 14.5px; line-height: 1.6; }
.ls-ui .ui-body .hint { color: var(--muted, #777); font-size: 13px; }
.ls-ui .ui-btn { display: inline-block; padding: 5px 14px; border-radius: 5px; background: var(--ink, #111); color: var(--paper, #fff); font-size: 13px; font-weight: 600; margin: 4px 6px 4px 0; }

/* good-dialogue chat variant */
.ls-chat.good { border-left: 3px solid #2E6B4F; }
.ls-chat.good .ls-chat-meta { color: #2E6B4F; }

/* homework band — unmissable */
.ls-hwband { margin: 56px 0 20px; padding: 20px 24px; border-radius: 6px; background: #14141c; color: #e8e4da; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ls-hwband .hw-word { font-family: var(--mono, monospace); font-size: 20px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.ls-hwband .hw-time { font-family: var(--mono, monospace); font-size: 13px; color: #C24444; letter-spacing: .1em; }

/* classify mini-game: click a card to reveal */
.ls-sort { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ls-sort .sort-card { border: 1px solid var(--line-2, #ddd); border-radius: 6px; padding: 14px 16px; cursor: pointer; font-size: 14.5px; line-height: 1.5; transition: border-color .15s, background .15s; user-select: none; }
.ls-sort .sort-card .ans { display: none; margin-top: 8px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ls-sort .sort-card.flipped .ans { display: block; }
.ls-sort .sort-card.flipped.is-agent { border-color: #2E6B4F; background: rgba(46,107,79,.07); }
.ls-sort .sort-card.flipped.is-agent .ans { color: #2E6B4F; }
.ls-sort .sort-card.flipped.is-chat { border-color: #A07820; background: rgba(160,120,32,.07); }
.ls-sort .sort-card.flipped.is-chat .ans { color: #A07820; }
.ls-sort .sort-card.flipped.is-info { border-color: var(--acc, #2342e0); background: rgba(35,66,224,.06); }
.ls-sort .sort-card.flipped.is-info .ans { color: var(--acc, #2342e0); text-transform: none; letter-spacing: 0; font-weight: 600; }
.ls-sort-lead { font-size: 17px; line-height: 1.6; margin: 0 0 14px; padding: 12px 16px; background: rgba(35, 66, 224, .06); border-left: 3px solid var(--acc, #2342e0); border-radius: 0 6px 6px 0; }

/* screenshot placeholder — owner replaces with real captures */
.ls-shot { border: 2px dashed var(--line-2, #bbb); border-radius: 8px; padding: 26px 18px; margin: 12px 0; text-align: center; font: 14px/1.5 var(--mono, monospace); color: var(--muted, #888); background: rgba(120, 120, 140, .05); }

/* homework link that lives OUTSIDE the checkbox label — clicking it must not toggle the step.
   Aligned with the label text (checkbox width + gap), not with the list numbers. */
.ls-hw-link { display: inline-block; margin: 8px 0 0 27px; font-size: 15.5px; font-weight: 700; color: var(--acc, #2342e0); }

/* breathing room inside expandable troubleshooting / macOS boxes */
.lesson-v2 details.ls-trouble .ls-fix,
.lesson-v2 details.ls-os .ls-os-body { padding: 12px 20px 16px; }
.lesson-v2 details.ls-trouble .ls-fix > :first-child,
.lesson-v2 details.ls-os .ls-os-body > :first-child { margin-top: 4px; }

/* "stronger prompt" expander — the pro version under a simple prompt */
details.ls-pro { margin: 10px 0 18px; border-left: 3px solid #A07820; background: rgba(160,120,32,.06); border-radius: 0 6px 6px 0; }
details.ls-pro summary { cursor: pointer; padding: 10px 16px; font-size: 14px; font-weight: 600; color: #8a6a14; list-style: none; }
details.ls-pro summary::-webkit-details-marker { display: none; }
details.ls-pro .ls-pro-body { padding: 2px 16px 12px; }
html[data-theme="dark"] details.ls-pro summary { color: #d9b45e; }

/* dark theme (site flips --ink/--paper; cobalt needs a lighter shade on dark) */
html[data-theme="dark"] .ls-goal > .mono,
html[data-theme="dark"] .ls-blockhead .bh-idx,
html[data-theme="dark"] .ls-hw-link { color: #8ea2ff; }
html[data-theme="dark"] .ls-blockhead,
html[data-theme="dark"] .ls-sort-lead { background: rgba(142, 162, 255, .10); border-left-color: #8ea2ff; }
html[data-theme="dark"] .ls-sort .sort-card.flipped.is-info { border-color: #8ea2ff; background: rgba(142, 162, 255, .10); }
html[data-theme="dark"] .ls-sort .sort-card.flipped.is-info .ans { color: #8ea2ff; }

@media (max-width: 640px) {
  .ls-step { padding-left: 20px; padding-top: 56px; }
  .ls-step .st-num { top: 14px; left: 18px; }
}