/* ============================================================================
   Lesson content — the typography of a course, wherever a course is shown.

   Global on purpose. These rules used to live in Lesson.razor.css (scoped), which meant the
   learner page was the only place that could draw a lesson properly: the public /learn twin
   re-declared them under a different prefix, the admin queue had none and showed raw type
   labels, and the authoring desk could not style an editable textarea to look like the
   paragraph it will become. One global sheet lets the shared LessonBlocks component and the
   desk's editable surfaces read from the same classes, which is what makes "the editor is the
   preview" true rather than approximate.

   Everything is `ls-` prefixed and lives under `.ls-content`, so it cannot leak. Values are the
   design tokens; nothing here invents a colour or a size.
   ============================================================================ */

.ls-content { font-size: 1.0625rem; }

.ls-p {
    line-height: 1.75;
    color: var(--color-text);
    margin: 0 0 var(--space-5);
    /* The author's line breaks are the author's. Without this, a step typed on three lines
       reads as one, and a paragraph with a deliberate pause loses it. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ls-p a,
.ls-callout a,
.ls-list a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

.ls-h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: var(--space-8) 0 var(--space-3);
    overflow-wrap: anywhere;
}

.ls-content > .ls-h2:first-child { margin-top: 0; }

.ls-empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ---- Images --------------------------------------------------------------- */
.ls-figure { margin: var(--space-6) 0; }

.ls-figure img {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-md);
    display: block;
    box-shadow: var(--shadow-sm);
}

.ls-figure figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- Callouts ------------------------------------------------------------- */
.ls-callout {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    margin: var(--space-6) 0;
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.ls-callout > i {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1.5;
}

.ls-callout > div { min-width: 0; flex: 1 1 auto; }

.ls-callout strong {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: 4px;
}

.ls-callout p {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ls-callout.tip { background: var(--brand-50); border-left-color: var(--brand-600); }
.ls-callout.tip > i,
.ls-callout.tip strong { color: var(--brand-700); }

.ls-callout.warning { background: var(--warning-50); border-left-color: var(--warning-600); }
.ls-callout.warning > i,
.ls-callout.warning strong { color: var(--warning-600); }

/* Safety is not a stronger "watch out". A watch-out is a mistake that costs time; safety is a
   mistake that costs a hand. It gets its own colour so the two never blur on a fast read. */
.ls-callout.safety { background: var(--danger-50); border-left-color: var(--danger-600); }
.ls-callout.safety > i,
.ls-callout.safety strong { color: var(--danger-800); }

/* A standard or manual reference: quiet, because it is a citation, not a shout. */
.ls-callout.standard { background: var(--color-surface-2); border-left-color: var(--neutral-400); }
/* A clause number read as "AS/NZS 3000 CLAUSE 1.5.4 SAYS" is harder to scan than the citation
   itself, and this callout is meant to be quiet. */
.ls-callout.standard strong { text-transform: none; letter-spacing: normal; }
.ls-callout.standard > i,
.ls-callout.standard strong { color: var(--neutral-700); }

/* ---- Lists ---------------------------------------------------------------- */
.ls-list {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ls-list h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.ls-list ul,
.ls-list ol {
    margin: 0;
    padding-left: 1.35rem;
}

.ls-list li {
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 6px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ls-list li:last-child { margin-bottom: 0; }

.ls-list.steps ol {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.ls-list.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: var(--space-3);
}

.ls-list.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* A recap is what to remember; a checklist is what to tick. Both are lists a learner scans, so
   they share the list chrome and differ only in their marker. */
.ls-list.recap { background: var(--success-50); border-color: var(--success-200); }
.ls-list.recap h3 { color: var(--success-700); }

.ls-list.checklist ul { list-style: none; padding-left: 0; }
.ls-list.checklist li { position: relative; padding-left: 1.9rem; }
.ls-list.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--neutral-400);
    border-radius: 5px;
    background: var(--color-surface);
}

/* ---- Phones ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .ls-content { font-size: 1rem; }
    .ls-callout { padding: var(--space-3); gap: var(--space-2); }
    .ls-list { padding: var(--space-3) var(--space-4); }
}