/**
 * Lesson content vocabulary.
 *
 * A small, fixed set of structures a lesson is allowed to use, so writing one
 * stays nearly as fast as writing plain text while the result renders properly
 * and the platform can hook into the parts that mean something.
 *
 *   <h4>                       a section inside the lesson
 *   <p>                        prose
 *   <pre class="lc-term">      a terminal transcript
 *       <strong>               what the student types
 *       <em>                   a dim annotation beside a command
 *   <pre><code class="language-js">   code, highlighted by highlight.js
 *       <span class="lc-add">     a line (or part of one) the student adds to code they already have
 *   <ul class="lc-terms">      term followed by its explanation
 *   <div class="lc-callout lc-new">      something new, worth stopping on
 *   <div class="lc-callout lc-careful">  something that bites
 *   <div class="lc-callout lc-try">      go and do this now
 *   <div class="lc-check">     a checkpoint: what should be true before moving on
 *   <table>                    genuinely tabular reference material
 *       <td class="lc-reveal">   an answer, hidden until the reader hovers or taps it
 *
 * The lc- classes are deliberately unscoped so lesson HTML renders the same
 * wherever it is shown: the student course page, a teacher note, a preview.
 * Element rules that would leak (table, hr) stay scoped to those containers.
 *
 * Everything reads from the platform's theme variables, so light, dark, high
 * contrast and custom accents all follow. The one exception is the terminal
 * block, which stays dark in every theme, because it is a terminal.
 */

/* ── terminal transcripts ───────────────────────────────────────────
   Not a code block. Code is something the student writes; this is a
   recording of a session, prompts and output together, and it reads
   wrong in the same styling. Kept dark so it is recognizable at a
   glance as "this is the terminal, not the page". */
/* The container selectors are carried on every rule that could collide with a
   page's own `.sc-notes pre` styling. Same specificity loses to a later inline
   <style> block, and both host pages have one. */
pre.lc-term,
.sc-notes pre.lc-term,
.nv-body pre.lc-term {
    background: #12151a;
    color: #d9e1ea;
    border: 1px solid #2a303a;
    border-radius: 8px;
    padding: .95rem 1.1rem;
    margin: .7rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .82rem;
    line-height: 1.75;
    /* Long command lines scroll inside the block. The lesson body must never
       scroll sideways because one transcript was wide. */
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}
/* What the student types, so the eye can separate it from the output the
   machine printed back. */
.lc-term strong { color: #ffffff; font-weight: 600; }
/* A note beside a command ("up one level"). Dim, upright, never italic:
   italic monospace is hard to read and these sit inside command lines. */
.lc-term em { color: #7e8894; font-style: normal; }
/* A cue the reader should act on: a key to press, a prompt to answer. */
.lc-term u { color: #7fb6d9; text-decoration: none; }

/* ── callouts ───────────────────────────────────────────────────────
   Three kinds, because three is what a lesson actually needs: here is a
   new idea, here is where people get hurt, here is something to go and
   try. Anything more and the page becomes boxes. */
.lc-callout {
    border: 1px solid var(--border, #d2d2d7);
    border-left-width: 3px;
    border-radius: 6px;
    padding: .8rem 1rem;
    margin: .8rem 0;
    max-width: 72ch;
    background: var(--bg-tertiary, #e8e8ed);
}
.lc-callout > p:first-child { margin-top: 0; }
.lc-callout > p:last-child { margin-bottom: 0; }
.lc-tag {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.lc-callout.lc-new     { border-left-color: var(--success, #22c55e); }
.lc-new .lc-tag        { color: var(--success, #22c55e); }
.lc-callout.lc-careful { border-left-color: var(--warning, #eab308); }
.lc-careful .lc-tag    { color: var(--warning, #eab308); }
.lc-callout.lc-try     { border-left-color: var(--accent, #0ea5e9); }
.lc-try .lc-tag        { color: var(--accent, #0ea5e9); }

/* ── checkpoint ─────────────────────────────────────────────────────
   What should be true before the student moves on. Structural rather
   than decorative: it is the one part of a lesson the platform can
   later turn into a real check, so it is marked even though today it
   only renders. */
.lc-check {
    border: 1px dashed var(--border, #d2d2d7);
    border-radius: 6px;
    padding: .8rem 1rem;
    margin: 1rem 0;
    max-width: 72ch;
}
.lc-check::before {
    content: "Before you move on";
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7084);
    margin-bottom: .35rem;
}
.lc-check ul, .lc-check ol,
.sc-notes .lc-check ul, .sc-notes .lc-check ol,
.nv-body .lc-check ul, .nv-body .lc-check ol { margin: 0; padding-left: 1.3em; }

/* ── term lists ─────────────────────────────────────────────────────
   "set number: show line numbers down the left". The term is the thing
   being defined, so it gets the weight; the explanation stays quiet. */
ul.lc-terms,
.sc-notes ul.lc-terms,
.nv-body ul.lc-terms { list-style: none; padding-left: 0; max-width: 70ch; }
ul.lc-terms > li,
.sc-notes ul.lc-terms > li,
.nv-body ul.lc-terms > li { margin: .3rem 0; padding-left: 1.1em; text-indent: -1.1em; }
ul.lc-terms > li::before { content: "· "; color: var(--text-muted, #6b7084); }
ul.lc-terms > li > strong,
ul.lc-terms > li > code:first-child { color: var(--text-primary, #e4e6f0); }

/* ── tables ─────────────────────────────────────────────────────────
   Scoped to the lesson containers so this cannot reach page furniture.
   The wrapper scrolls, not the page. */
.sc-notes table,
.nv-body table {
    border-collapse: collapse;
    margin: .7rem 0;
    font-size: .9rem;
    /* A narrow reference table should not stretch to the full workspace
       width, so it stays readable next to the prose it explains. */
    min-width: min(100%, 26rem);
}
.sc-notes thead th,
.nv-body thead th {
    text-align: left;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7084);
    background: var(--bg-tertiary, #e8e8ed);
    padding: .45rem .8rem;
    border-bottom: 1px solid var(--border, #d2d2d7);
}
.sc-notes td, .sc-notes th,
.nv-body td, .nv-body th {
    padding: .4rem .8rem;
    border-bottom: 1px solid var(--border, #d2d2d7);
    vertical-align: top;
}
/* Codes and counts line up in columns, so they get tabular figures and
   the monospace face. */
.sc-notes td:first-child, .nv-body td:first-child { font-variant-numeric: tabular-nums; }
.sc-notes tbody tr:last-child td,
.nv-body tbody tr:last-child td { border-bottom: none; }
/* A cell holding literal machine text (a permission string, a flag, an exit
   code) is code, and reads wrong in the body face. Not wrapped in <code>
   because a chip in every row of a table is noise. */
.sc-notes td.lc-mono, .nv-body td.lc-mono,
.sc-notes th.lc-mono, .nv-body th.lc-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .95em;
    color: var(--text-primary, #e4e6f0);
}
.sc-notes caption, .nv-body caption {
    caption-side: bottom;
    text-align: left;
    font-size: .82rem;
    color: var(--text-muted, #6b7084);
    padding-top: .4rem;
}

.sc-notes hr, .nv-body hr {
    border: 0;
    border-top: 1px solid var(--border, #d2d2d7);
    margin: 1.6rem 0;
}

/* ── headings inside a lesson ───────────────────────────────────────
   The page already prints the lesson title, so a lesson body starts at
   the section level. Give sections enough space above to read as a
   break, which the platform's generic .6rem does not. */
.sc-notes h4, .nv-body h4 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 1.5rem 0 .4rem;
}
.sc-notes h3, .nv-body h3 { margin: 1.8rem 0 .4rem; }
.sc-notes h4:first-child, .nv-body h4:first-child,
.sc-notes h3:first-child, .nv-body h3:first-child { margin-top: 0; }

/* Prose keeps a reading measure; the transcripts and tables above do not,
   because their line length is data, not typography. */
.sc-notes .lc-callout p, .nv-body .lc-callout p { max-width: none; }

/* ── paragraph rhythm, hand-written lessons only ────────────────────
   The platform resets paragraph margins to zero, and it has to: Quill
   emits one <p> per line and an empty <p> for every blank line, so a
   margin there would space rich-text notes out absurdly. Authored HTML
   has real paragraphs and reads as a wall without the gap, so the rule
   is keyed to the format rather than applied to every lesson.
   .sc-notes-html is set by the student page from notes_format. */
.sc-notes-html p + p,
.sc-notes-html p + ul,
.sc-notes-html p + ol,
.sc-notes-html ul + p,
.sc-notes-html ol + p { margin-top: .85rem; }
.sc-notes-html .lc-callout p + p,
.sc-notes-html .lc-check p + p { margin-top: .5rem; }

/* Inline code sits inside sentences here, so it takes the tighter padding a
   run of prose wants, and never breaks: `rm -r` split across two lines reads
   as two different commands. */
.sc-notes-html :not(pre) > code,
.nv-body :not(pre) > code { padding: .08em .28em; white-space: nowrap; }

/* ── lines added to existing code ───────────────────────────────────
   When a lesson shows a function the student already has with new lines
   in it, the new lines are marked so the eye lands on them. Bold, and a
   blue that reads on the dark highlight.js block in every theme. The
   highlighter colors each token inside the mark, so the tokens are
   forced back to the one color: a new line should look like one thing.
   lesson-code.js keeps the marks through the highlight pass on the
   student page; the teacher preview runs no script and keeps them as is. */
.lc-add,
.sc-notes pre code .lc-add,
.nv-body pre code .lc-add {
    font-weight: 700;
    color: #8ecbff;
    background: rgba(120, 190, 255, .10);
    border-radius: 3px;
    padding: 0 .15em;
    margin: 0 -.15em;
}
.lc-add span { color: inherit; font-weight: inherit; }

/* ── hidden answers ─────────────────────────────────────────────────
   A cell in a worked-example table that the reader is meant to fill in
   themselves first. The value is in the DOM the whole time, just not
   readable: a blank you can check yourself against, not a blank you have
   to be given. Hover reveals on a pointer; lesson-code.js adds tap for
   everyone else, so a tablet is not locked out of the answer key. */
.lc-reveal {
    color: transparent;
    background: var(--bg-tertiary, #e6e8ef);
    /* Paint only the content box, so two blanks side by side stay two blanks
       instead of merging into one wide grey bar across the row. */
    background-clip: content-box;
    border-radius: 4px;
    cursor: help;
    user-select: none;
    transition: color .12s ease, background-color .12s ease;
}
.lc-reveal:hover,
.lc-reveal:focus,
.lc-reveal.is-shown {
    color: inherit;
    background: transparent;
    user-select: auto;
}

/* ── more on this ───────────────────────────────────────────────────
   Depth for after the live lesson. The core of a section stays short
   enough to teach from; the detail that makes it make sense later sits
   in a native <details>, so it opens and closes with no script, in the
   builder preview as well as on the student page. */
.lc-more {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    margin: 1rem 0;
    padding: 0 .9rem;
}
.lc-more > summary {
    cursor: pointer;
    list-style: none;
    padding: .6rem 0;
    font-weight: 600;
    color: var(--accent, #0ea5e9);
}
.lc-more > summary::-webkit-details-marker { display: none; }
.lc-more > summary::before { content: '+'; display: inline-block; width: 1.1em; }
.lc-more[open] > summary::before { content: '\2212'; }
.lc-more[open] { padding-bottom: .5rem; }
.lc-more[open] > summary { border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: .6rem; }
.sc-notes .lc-more > :last-child, .nv-body .lc-more > :last-child { margin-bottom: .4rem; }

/* ── copy button on code blocks ─────────────────────────────────────
   lesson-code.js wraps each <pre> (not terminal transcripts) in .lc-code
   and adds the button. The wrapper takes the margin so the button stays
   put while a long line scrolls sideways inside the block. The right
   padding goes on whichever element scrolls (code.hljs, or a bare pre)
   so an ordinary line ends before the button instead of under it. */
.lc-code { position: relative; margin: .6rem 0; }
.lc-code > pre,
.sc-notes .lc-code > pre,
.nv-body .lc-code > pre { margin: 0; }
.lc-code > pre > code,
.sc-notes .lc-code > pre > code.hljs,
.nv-body .lc-code > pre > code.hljs { padding-right: 3rem; }
.lc-code-bare > pre,
.sc-notes .lc-code-bare > pre,
.nv-body .lc-code-bare > pre { padding-right: 3rem; }
.lc-copy {
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    background: rgba(22, 24, 29, .94);
    color: #e8eaed;
    cursor: pointer;
    opacity: .8;
}
.lc-copy svg { width: 15px; height: 15px; }
.lc-code:hover .lc-copy,
.lc-copy:focus-visible { opacity: 1; }
.lc-copy:focus-visible { outline: 2px solid var(--accent, #0ea5e9); outline-offset: 2px; }
.lc-copy.is-done { background: #16a34a; border-color: #16a34a; color: #fff; opacity: 1; }

/* ── scrollbars inside code blocks ──────────────────────────────────
   The element that scrolls is code.hljs (highlight.js sets overflow-x on
   it), or the pre itself for transcripts and blocks with no code element.
   Those blocks are dark in every theme, so the bar is a fixed dark thumb
   rather than --border, which is near-white in light mode. Same 6px shape
   as the site's other scrollbars. Firefox gets the standard properties
   only: Chrome stops honouring ::-webkit-scrollbar once it sees them (see
   asset-manager.css). */
@supports not selector(::-webkit-scrollbar) {
    pre code.hljs,
    pre.lc-term,
    .lc-code > pre {
        scrollbar-width: thin;
        scrollbar-color: #4b5263 transparent;
    }
}
pre code.hljs::-webkit-scrollbar,
pre.lc-term::-webkit-scrollbar,
.lc-code > pre::-webkit-scrollbar { width: 6px; height: 6px; }
pre code.hljs::-webkit-scrollbar-track,
pre.lc-term::-webkit-scrollbar-track,
.lc-code > pre::-webkit-scrollbar-track,
pre code.hljs::-webkit-scrollbar-corner,
pre.lc-term::-webkit-scrollbar-corner,
.lc-code > pre::-webkit-scrollbar-corner { background: transparent; }
pre code.hljs::-webkit-scrollbar-thumb,
pre.lc-term::-webkit-scrollbar-thumb,
.lc-code > pre::-webkit-scrollbar-thumb { background: #4b5263; border-radius: 3px; }
pre code.hljs::-webkit-scrollbar-thumb:hover,
pre.lc-term::-webkit-scrollbar-thumb:hover,
.lc-code > pre::-webkit-scrollbar-thumb:hover { background: #6b7385; }
