/*
 * Ready-made lesson styles (Site lessons, docs/site-lessons.md).
 * One file for both places, so the editor shows exactly what the website will show:
 *   - public article body: <div class="article__body lesson-content">
 *   - lesson editor:       <div class="sl-editor lesson-content"> around CKEditor
 *   - CKEditor's Styles dropdown previews (.ck-style-grid__button__preview)
 * The class names are listed in the editor's `style.definitions` and allowed by
 * LessonHtmlService's purifier; add a style in all three places.
 * Labels are emoji only, so they read the same in English and Sinhala.
 */

:is(.lesson-content, .ck-style-grid__button__preview) {
    --ls-ink: #1a1c1a;
    --ls-soft: #4e574f;
    --ls-muted: #6b7268;
    --ls-green: #1b4d2e;
    --ls-green-deep: #123521;
    --ls-green-soft: #eaf1ec;
    --ls-green-line: #b9d3c1;
    --ls-gold: #a87a26;
    --ls-gold-ink: #7a5410;
    --ls-gold-soft: #fbf1dd;
    --ls-gold-line: #ecd6a4;
    --ls-red: #ce2b37;
    --ls-red-soft: #fbe7e5;
    --ls-red-line: #f1b9b4;
    --ls-blue-soft: #eaf2fb;
    --ls-blue-line: #b8d0ec;
}

/* ── Headings (every heading in a lesson, no style needed) ───────────── */
.lesson-content h2 {
    font-family: 'DM Serif Display', 'Noto Serif Sinhala', Georgia, serif;
    font-weight: 400;
    font-size: 1.6em;
    line-height: 1.25;
    color: var(--ls-green-deep);
    margin: 1.6em 0 .6em;
    padding-bottom: .3em;
    border-bottom: 2px solid var(--ls-green-soft);
}
.lesson-content h3 {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ls-green);
    margin: 1.4em 0 .5em;
}
.lesson-content h4 {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ls-gold);
    margin: 1.3em 0 .4em;
}

/* Title banner — a big coloured band for the lesson's main topic. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-banner,
.ck-style-grid__button__preview h2.ls-banner {
    background: var(--ls-green-deep);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: .7em .9em;
    text-align: center;
}

/* Numbered step heading: "1  Before a country name". */
/* Reset on the text itself: the Styles dropdown previews live inside the editor wrapper too. */
:is(.article__body, .ck-content) { counter-reset: ls-step; }
:is(.lesson-content, .ck-style-grid__button__preview) .ls-step {
    counter-increment: ls-step;
    display: flex;
    align-items: baseline;
    gap: .55em;
    border: 0;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-step::before {
    content: counter(ls-step);
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 1.6em;
    height: 1.6em;
    border-radius: 999px;
    background: var(--ls-gold);
    color: #fff;
    font: 700 .75em/1 'DM Sans', 'Noto Sans Sinhala', sans-serif;
    transform: translateY(-.1em);
}

/* ── Boxes (paragraph styles) ────────────────────────────────────────── */
/* Two boxes of the same kind in a row join into one box. */
:is(.lesson-content, .ck-style-grid__button__preview) :is(.ls-example, .ls-rule, .ls-tip, .ls-warning, .ls-key, .ls-exercise, .ls-dialogue) {
    position: relative;
    margin: 1em 0;
    padding: .7em 1em .7em 2.6em;
    border-radius: 10px;
    border: 1px solid transparent;
    line-height: 1.55;
}
:is(.lesson-content, .ck-style-grid__button__preview) :is(.ls-example, .ls-rule, .ls-tip, .ls-warning, .ls-key, .ls-exercise, .ls-dialogue)::before {
    position: absolute;
    left: .75em;
    top: .62em;
    font-size: 1.05em;
    line-height: 1.5;
}

.lesson-content .ls-example + .ls-example,
.lesson-content .ls-rule + .ls-rule,
.lesson-content .ls-tip + .ls-tip,
.lesson-content .ls-warning + .ls-warning,
.lesson-content .ls-key + .ls-key,
.lesson-content .ls-exercise + .ls-exercise,
.lesson-content .ls-dialogue + .ls-dialogue {
    margin-top: -1em;
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: .15em;
}
.lesson-content :is(.ls-example + .ls-example, .ls-rule + .ls-rule, .ls-tip + .ls-tip, .ls-warning + .ls-warning, .ls-key + .ls-key, .ls-exercise + .ls-exercise)::before {
    content: none;
}
/* The box above loses its bottom corners when one joins under it. */
.lesson-content .ls-example:has(+ .ls-example),
.lesson-content .ls-rule:has(+ .ls-rule),
.lesson-content .ls-tip:has(+ .ls-tip),
.lesson-content .ls-warning:has(+ .ls-warning),
.lesson-content .ls-key:has(+ .ls-key),
.lesson-content .ls-exercise:has(+ .ls-exercise),
.lesson-content .ls-dialogue:has(+ .ls-dialogue) {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: .15em;
}

/* 🇮🇹 Italian example — the sentence to learn, a little bigger. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-example {
    background: var(--ls-green-soft);
    border-color: var(--ls-green-line);
    font-size: 1.08em;
    font-weight: 500;
    color: var(--ls-green-deep);
}
/* A drawn tricolour: Windows has no flag emoji (it shows the letters IT). */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-example::before {
    content: '';
    top: .95em;
    width: 1.15em;
    height: .78em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    background: linear-gradient(90deg, #1b8a4b 0 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%);
}

/* Meaning — sits under an example as its translation. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-translation {
    margin: -.6em 0 1em;
    padding: .1em 1em .6em 2.6em;
    color: var(--ls-soft);
    font-style: italic;
    font-size: .95em;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-translation::before { content: '→ '; font-style: normal; color: var(--ls-muted); }
.lesson-content .ls-example + .ls-translation {
    margin-top: -1em;
    background: var(--ls-green-soft);
    border: 1px solid var(--ls-green-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
.lesson-content .ls-example:has(+ .ls-translation) {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: .2em;
}

/* 📌 Rule — the grammar rule to remember. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-rule {
    background: var(--ls-gold-soft);
    border-color: var(--ls-gold-line);
    color: var(--ls-gold-ink);
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-rule::before { content: '📌'; }

/* 💡 Tip. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-tip {
    background: var(--ls-blue-soft);
    border-color: var(--ls-blue-line);
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-tip::before { content: '💡'; }

/* ⚠️ Watch out — common mistake. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-warning {
    background: var(--ls-red-soft);
    border-color: var(--ls-red-line);
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-warning::before { content: '⚠️'; }

/* ⭐ Key point — the one thing to take away. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-key {
    background: #fff;
    border: 2px solid var(--ls-gold);
    font-weight: 600;
    font-size: 1.05em;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-key::before { content: '⭐'; }

/* ✏️ Try it — a small exercise for the reader. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-exercise {
    background: #fff;
    border: 2px dashed var(--ls-green-line);
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-exercise::before { content: '✏️'; }

/* 💬 Dialogue line — "— Ciao, come stai?". */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-dialogue {
    background: #fff;
    border-color: #ebe8e0;
    border-left: 4px solid var(--ls-green);
    border-radius: 4px 10px 10px 4px;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-dialogue::before { content: '💬'; }

/* ── Words (inline styles) ───────────────────────────────────────────── */
/* Italian word or phrase. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-it {
    color: var(--ls-green);
    font-weight: 700;
}
/* Correct form ✓. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-correct {
    background: #dff2e5;
    color: #1d6b3d;
    border-radius: 4px;
    padding: 0 .3em;
    font-weight: 600;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-correct::after { content: ' ✓'; }
/* Wrong form ✗. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-wrong {
    background: var(--ls-red-soft);
    color: #a51f2a;
    border-radius: 4px;
    padding: 0 .3em;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-wrong::after { content: ' ✗'; display: inline-block; text-decoration: none; }
/* Grammar term — articolo, verbo, femminile… */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-term {
    background: var(--ls-gold-soft);
    color: var(--ls-gold-ink);
    border: 1px solid var(--ls-gold-line);
    border-radius: 999px;
    padding: 0 .5em;
    font-size: .88em;
    font-weight: 600;
    white-space: nowrap;
}
/* Meaning, quietly after a word: buongiorno (good morning). */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-meaning {
    color: var(--ls-muted);
    font-style: italic;
}

/* ── Exercises (word styles) ─────────────────────────────────────────────
   As written in the editor; on the website lesson-interactive.js turns them into boxes to type
   in, buttons to choose, and "Show answer" (docs/site-lessons.md, "Exercises"). */
/* Gap: the answer the reader types. Several accepted answers: "tra / fra". */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-gap {
    background: var(--ls-gold-soft);
    border-bottom: 2px dashed var(--ls-gold);
    border-radius: 4px 4px 0 0;
    padding: 0 .35em;
    font-weight: 600;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-gap::before { content: '✍ '; font-weight: 400; }
/* Choice: options to tap, the right one(s) marked with *: "a* / al". */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-choice {
    background: var(--ls-blue-soft);
    border-bottom: 2px dashed #5b8fd0;
    border-radius: 4px 4px 0 0;
    padding: 0 .35em;
    font-weight: 600;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-choice::before { content: '☑ '; font-weight: 400; }
/* Reason: shown after the reader checks (or opens the answer). */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-why {
    color: var(--ls-muted);
    font-style: italic;
    font-size: .88em;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-why::before { content: '💬 '; font-style: normal; }
/* Hidden answer: behind a "Show answer" button. */
:is(.lesson-content, .ck-style-grid__button__preview) .ls-reveal {
    border: 1px dotted var(--ls-green);
    border-radius: 4px;
    padding: 0 .35em;
    color: var(--ls-green);
    font-weight: 600;
}
:is(.lesson-content, .ck-style-grid__button__preview) .ls-reveal::before { content: '👁 '; font-weight: 400; }

/* Website only: the interactive versions (lesson-interactive.js). */
.article__body .ls-why { display: none; }
.article__body .ls-why.is-shown { display: inline; }
.lsx-gap {
    font: inherit;
    font-weight: 600;
    color: var(--ls-green-deep);
    min-width: 4ch;
    max-width: 100%;
    padding: .05em .35em;
    margin: 0 .1em;
    border: 0;
    border-bottom: 2px solid var(--ls-gold);
    background: var(--ls-gold-soft);
    border-radius: 4px 4px 0 0;
}
.lsx-gap:focus { outline: 2px solid var(--ls-gold); outline-offset: 1px; }
.lsx-gap.is-right, .lsx-opt.is-right { background: #dff2e5; border-color: #2e8b57; color: #1d6b3d; }
.lsx-gap.is-wrong, .lsx-opt.is-wrong { background: var(--ls-red-soft); border-color: var(--ls-red); color: #a51f2a; }
.lsx-gap.is-shown { background: var(--ls-blue-soft); border-color: #5b8fd0; }
.lsx-choice { display: inline-flex; flex-wrap: wrap; gap: .3em; vertical-align: baseline; margin: 0 .15em; }
.lsx-opt {
    font: inherit;
    font-size: .92em;
    font-weight: 600;
    padding: .05em .65em;
    border: 1.5px solid #b8d0ec;
    border-radius: 999px;
    background: #fff;
    color: var(--ls-ink);
    cursor: pointer;
}
.lsx-opt:hover { border-color: #5b8fd0; }
.lsx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: .4em 0 1.4em; font-size: .92em; }
.lsx-btn {
    font: inherit;
    font-weight: 600;
    padding: .4em .95em;
    border-radius: 999px;
    border: 1.5px solid var(--ls-green);
    background: #fff;
    color: var(--ls-green);
    cursor: pointer;
}
.lsx-btn--main { background: var(--ls-green); color: #fff; }
.lsx-btn--small { padding: .15em .7em; font-size: .9em; }
.lsx-score { font-weight: 700; color: var(--ls-green-deep); }
.lsx-write { font: inherit; width: 100%; max-width: 28em; display: block; margin: .35em 0; padding: .35em .6em; border: 1px solid #d9d5cb; border-radius: 8px; }
.lsx-answer { display: block; margin-top: .3em; color: var(--ls-green); font-weight: 600; }
.lsx-answer[hidden] { display: none; }
.lsx-say {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: 0 .3em 0 0;
    vertical-align: baseline;
}
.lsx-tools { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.2em; }
.lsx-test .ls-translation { filter: blur(5px); cursor: pointer; user-select: none; }
.lsx-test .ls-translation.is-peek { filter: none; user-select: auto; }
.lsx-toc { background: #fff; border: 1px solid #e6e2d8; border-radius: 12px; padding: .7em 1em; margin: 0 0 1.2em; }
.lsx-toc summary { cursor: pointer; font-weight: 700; color: var(--ls-green-deep); }
.lsx-toc ol { margin: .6em 0 0; padding-left: 1.4em; columns: 2 16em; column-gap: 2em; }
.lsx-toc li { margin: .15em 0; break-inside: avoid; }
.lsx-toc a { color: var(--ls-green); text-decoration: none; }
.lsx-toc a:hover { text-decoration: underline; }

/* ── Tables and quotes (no style needed) ─────────────────────────────── */
.lesson-content table {
    border-collapse: collapse;
    margin: 1em 0;
    font-size: .95em;
}
.lesson-content table :is(td, th) {
    border: 1px solid #d9d5cb;
    padding: .45em .7em;
    vertical-align: top;
}
.lesson-content table th,
.lesson-content table tr:first-child td:has(strong:only-child) {
    background: var(--ls-green-soft);
    color: var(--ls-green-deep);
    font-weight: 700;
}
.lesson-content table tr:nth-child(even) td { background: #faf9f6; }
.lesson-content blockquote {
    margin: 1em 0;
    padding: .2em 1em;
    border-left: 4px solid var(--ls-gold-line);
    color: var(--ls-soft);
    font-style: italic;
}
.lesson-content hr {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, #1b4d2e 0 33%, #fff 33% 66%, #ce2b37 66%);
    margin: 2em 0;
    opacity: .7;
}

/* Editor only: style previews in CKEditor's Styles dropdown stay compact. */
.ck-style-grid__button__preview :is(p, h2, span) { margin: 0 !important; font-size: 12px !important; padding-top: .3em !important; padding-bottom: .3em !important; }
.ck-style-grid__button__preview :is(.ls-example, .ls-rule, .ls-tip, .ls-warning, .ls-key, .ls-exercise, .ls-dialogue) { padding-left: 2.2em !important; }
.ck-style-grid__button__preview .ls-banner { padding: .25em .5em !important; color: #fff !important; background: #123521 !important; border-radius: 6px !important; }