/* ============================================================================
   ReziDay — lesson page stylesheet.
   Single warm-cream theme. Design tokens come from tokens.css (loaded first);
   use var(--x) throughout, hardcode a hex only when no token fits.
   Visual source of truth: design_import/ReziDay v1.0/Insuficienta cardiaca cronica.dc.html
   Comments/UI are English; the rendered medical content itself is Romanian.
   ========================================================================== */

/* ============================================================================
   1. PAGE LAYOUT
   ========================================================================== */

body.lesson-page {
    margin: 0;
    background: var(--canvas);
    color: var(--ink-warm);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* normal document scroll — NOT an inner scroll container */
}

.lesson {
    display: grid;
    grid-template-columns: 312px minmax(0, 1fr) 340px;
    align-items: start;
}

/* ── Left rail ─────────────────────────────────────────────────────────── */
.lesson-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border);
    background: var(--card);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
}

/* Positioning only — the lockup (mark 30px + 19px wordmark + 10px gap) is defined
   once in components.css as .brand-lockup. Insets match .app-sidebar-brand so the
   logo sits in exactly the same spot as on the app-shell pages. */
.lesson-rail-brand { padding: 4px 12px 18px; }

.lesson-rail-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lesson-rail-navitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}
.lesson-rail-navitem svg { flex: none; }
.lesson-rail-navitem:hover { background: var(--surface); color: var(--ink); }
.lesson-rail-navitem.is-active { background: var(--teal-tint); color: var(--teal-ink); }

.lesson-rail-divider {
    height: 1px;
    background: var(--divider);
    margin: 14px 0;
    border: none;
}

.lesson-rail-back {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}
.lesson-rail-back svg { flex: none; }
.lesson-rail-back:hover { color: var(--ink); }

/* Lesson name, always in view because the rail is sticky. Two lines max. */
.lesson-rail-title {
    margin: 14px 6px 0;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink-warm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-rail-toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 8px;
    padding: 0 6px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--muted-2);
}
.lesson-rail-toc-head .mono {
    font-family: var(--font-mono);
    letter-spacing: 0;
}

.lesson-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lesson-toc-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 12px;
    min-height: 56px;
    border-radius: 12px;
    text-align: left;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}
.lesson-toc-item:hover { background: var(--surface-2); }
/* current section row = teal-tinted pill (matches design) */
.lesson-toc-item.is-active { background: var(--teal-tint-3); }
.lesson-toc-item.is-active:hover { background: var(--teal-tint-3); }

/* circular status badge: todo (grey) · done (filled teal) · current (teal ring) */
.lesson-toc-num {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-2);
    background: #F0EEE9;
    box-sizing: border-box;
}
.lesson-toc-item.is-done .lesson-toc-num {
    background: var(--teal);
    color: #fff;
}
.lesson-toc-item.is-active .lesson-toc-num {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--teal);
    color: var(--teal-ink);
}
.lesson-toc-labelwrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lesson-toc-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lesson-toc-item.is-done .lesson-toc-label { color: var(--ink-warm); }
.lesson-toc-item.is-active .lesson-toc-label { color: var(--teal-ink); font-weight: 600; }
.lesson-toc-meta {
    font-size: 11.5px;
    color: #B9B5AD;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* rail can push a footer (profile) to the bottom */
.lesson-rail-spacer { flex: 1; min-height: 14px; }

/* ── Center column ─────────────────────────────────────────────────────── */
.lesson-main {
    min-width: 0;
}

.lesson-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--canvas);
}
.lesson-readbar {
    height: 3px;
    background: var(--divider);
}
.lesson-readbar-fill {
    height: 100%;
    width: 0;
    background: var(--teal);
    transition: width 0.3s ease;
}
/* Lesson name in the sticky topbar — only where the rail can't show it
   (collapsed rail / phone); see the responsive section. */
.lesson-topbar-title {
    display: none;
    justify-content: center;
    padding: 8px clamp(12px, 4vw, 20px) 0;
}
.lesson-topbar-title span {
    /* min-width:0 or the nowrap title would set the flex item's min-content
       width and widen the whole page on a phone. */
    min-width: 0;
    max-width: min(720px, 100%);
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-warm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lesson-tabs-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 9px;
    border-bottom: 1px solid var(--divider);
}
/* Same box as .lesson-content, so the bar's edges line up with the text column. */
.lesson-tabs-inner {
    position: relative;
    width: 100%;
    max-width: 720px;
    padding: 0 clamp(16px, 4vw, 40px);
    display: flex;
    align-items: center;
}
.lesson-tabs {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 4px;
    background: #F0EEE9;
    border-radius: 16px;
    padding: 5px;
}
.lesson-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.lesson-tab svg { flex: none; }
.lesson-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lesson-tab:hover { color: var(--ink); }
.lesson-tab.is-active {
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.08);
}
/* Mute the inactive tab icons so the active tab leads. */
.lesson-tab:not(.is-active) svg {
    opacity: 0.55;
    filter: saturate(0.4);
}
.lesson-content {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(20px, 5vw, 44px) clamp(16px, 4vw, 40px) 152px;
}

.lesson-h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(30px, 7vw, 42px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-warm);
    overflow-wrap: break-word;
}
.lesson-subtitle {
    margin-top: 10px;
    font-family: var(--font-eyebrow);
    font-size: 16px;
    color: var(--muted);
}

.lesson-pane { display: block; }
.lesson-pane[hidden] { display: none; }
.lesson-pane-head { margin: 0; }
.lesson-pane-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink-warm);
}
.lesson-pane-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
}

/* ── Right column: knowledge sidebar (KSB) ─────────────────────────────── */
.lesson-ksb {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 22px 18px;
    background: var(--canvas);
}
/* No panel header: the cards say what they are, so a "Panou de cunoștințe"
   title + section counter above them was only noise. */
.lesson-ksb-panels { display: block; }

/* KSB close button (drawer mode) */
.lesson-ksb-close {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #F0EEE9;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--muted);
}

/* Floating action button that opens the KSB drawer on narrow viewports */
.lesson-ksb-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 70;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-pop);
}
.lesson-ksb-fab svg { flex: none; }

/* Optional dim backdrop behind the drawer */
.lesson-ksb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(28, 27, 25, 0.4);
}
.lesson-ksb-backdrop.is-open { display: block; }

/* ============================================================================
   2. CONTENT BLOCKS  (prefix lb-) — inside .lesson-pane[data-pane="lectie"]
   ========================================================================== */

/* ── Block rhythm ──────────────────────────────────────────────────────────
   One gap for every boundary between two blocks, whatever they are: text,
   callout card, table, comparison, list, figure, calculator, quiz, flashcard
   grid, matching. The blocks themselves carry NO vertical margin — the gap is
   set once, here, by the adjacent-sibling rules below. That is what keeps it
   equal everywhere and stops two heavy neighbours (a table under a quiz, say)
   from stacking their own margins into a double gap. */
.lesson {
    --lb-gap: 24px;       /* between any two sibling blocks */
    --lb-sec-gap: 34px;   /* before a new section — a heading gets a bit more air */
    --lb-head-gap: 14px;  /* a heading -> its own first block, tighter than above it */
    /* ONE horizontal inset for every card block (table, comparison, quiz): the
       header bar, the body text and any inner cards all start on this line, so
       stacked cards read as one column instead of drifting a few px apart.
       Phones shrink it once, in the ≤767px block at the end of the file. */
    --lb-card-pad-x: 24px;
}

/* Reset: nothing that sits directly in a pane or a section body brings its own
   vertical margin. Every selector here is deliberately two classes deep, so it
   outranks a block's own single-class `margin` and the rhythm can't be undone
   by accident from the rules further down. */
.lesson-content .lesson-pane > *,
.lesson-content .lb-body > * {
    margin-top: 0;
    margin-bottom: 0;
}
.lesson-content .lesson-pane > * + *,
.lesson-content .lb-body > * + * { margin-top: var(--lb-gap); }

/* Section boundaries + the title/heading -> body pairs. */
.lesson-content > .lesson-pane { margin-top: var(--lb-gap); }
.lesson-content .lesson-pane > * + .lb-section { margin-top: var(--lb-sec-gap); }
.lesson-content .lb-section > .lb-h2 + .lb-body { margin-top: var(--lb-head-gap); }
.lesson-content .lesson-pane > .lesson-pane-head + * { margin-top: var(--lb-head-gap); }

/* ── Prose ─────────────────────────────────────────────────────────────── */
.lb-prose p {
    margin: 14px 0 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--body-warm);
}
.lb-prose > :first-child { margin-top: 0; }
.lb-prose > :last-child { margin-bottom: 0; }
/* A table / comparison card lifted out of a paragraph (raw HTML tables live
   inside a text block) is a block in its own right, so it takes the block gap
   from its prose neighbours — but not at the edges, where the sibling rule
   above already spaces it. */
.lb-prose > .lb-tbl,
.lb-prose > .lb-cmp { margin: var(--lb-gap) 0; }
.lb-prose > .lb-tbl:first-child,
.lb-prose > .lb-cmp:first-child { margin-top: 0; }
.lb-prose > .lb-tbl:last-child,
.lb-prose > .lb-cmp:last-child { margin-bottom: 0; }
.lb-prose strong { color: var(--ink-warm); font-weight: 600; }
.lb-prose a { color: var(--teal); text-decoration: none; }
.lb-prose a:hover { color: var(--teal-hover); }
.lb-prose ul,
.lb-prose ol {
    margin: 12px 0;
    padding-left: 22px;
}
.lb-prose li { margin: 6px 0; }

/* ── Section ───────────────────────────────────────────────────────────── */
.lb-section {
    /* Spacing comes from the block-rhythm rules above. */
    scroll-margin-top: 90px;
}
.lb-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 15px;
    font-weight: 600;
    color: var(--teal);
}
.lb-h2 {
    /* First child of .lb-section now that the numbered eyebrow is gone — the
       block-rhythm rules space it above and below (--lb-sec-gap / --lb-head-gap). */
    margin: 0;
    font-family: var(--font-serif);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink-warm);
}
.lb-body { display: block; }

/* ── Callout cards: De ce contează / Perlă / Memorare / Capcană ────────── */
.lb-card {
    border-radius: var(--r-md);
    padding: 15px 18px 14px;
    border-bottom: 4px solid transparent;
    color: #fff;
}
.lb-card--why   { background: var(--why);   border-bottom-color: var(--why-deep);   }
.lb-card--pearl { background: var(--pearl); border-bottom-color: var(--pearl-deep); }
.lb-card--memo  { background: var(--memo);  border-bottom-color: var(--memo-deep);  }
.lb-card--trap  { background: var(--trap);  border-bottom-color: var(--trap-deep);  }

.lb-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.lb-card-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--font-eyebrow);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
/* The card title now shares the top row with the icon (the type pill that used
   to sit there is gone — the icon and colour say what kind of card it is). */
.lb-card-title {
    flex: 1;
    min-width: 0;
    align-self: center;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}
.lb-card-ico {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-card-ico svg { stroke: currentColor; }
.lb-card--why   .lb-card-ico { color: var(--why);   }
.lb-card--pearl .lb-card-ico { color: var(--pearl); }
.lb-card--memo  .lb-card-ico { color: var(--memo);  }
.lb-card--trap  .lb-card-ico { color: var(--trap);  }

.lb-card-body {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}
.lb-card-body strong { color: #fff; }
.lb-card--why .lb-card-body,
.lb-card--why .lb-prose p { font-size: 14.5px; line-height: 1.6; }
.lb-card-body a { color: #fff; text-decoration: underline; }

/* Highlighted key-fact strip at the bottom of a callout card. */
.lb-card-key {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}
.lb-card-key strong { color: #fff; }
.lb-card-key-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none; }

/* prose nested inside a white-on-color card must invert its colors */
.lb-card .lb-prose p { color: rgba(255, 255, 255, 0.92); font-size: 13.5px; line-height: 1.55; }
.lb-card .lb-prose strong { color: #fff; }
.lb-card .lb-prose a { color: #fff; text-decoration: underline; }

/* highlighted takeaway strip inside a card */
.lb-card-note {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}
.lb-card-note::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* ── Comparison cards · redesign ("Carduri comparative redesign.dc.html") ──
   Sibling of the table card below: same teal header bar + white bordered
   container, holding two tone-coloured columns of bullets. */
.lb-cmp {
    /* Spacing comes from the block-rhythm rules at the top of section 2 — the
       one exception is a card sitting inside a .lb-prose wrapper (see there). */
    margin: 0;
    background: var(--card);
    border: 1.5px solid var(--teal-3);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(14, 124, 123, .10);
    /* Like tables: the columns fold on the CARD's width, not the viewport —
       the lesson rails decide how much room the block really gets. */
    container: lbcmp / inline-size;
}
.lb-cmp-head {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px var(--lb-card-pad-x, 24px);
    background: var(--teal-3);
}
.lb-cmp-ico {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Same faces as .lb-tbl-eyebrow / .lb-tbl-title so the two cards read as one
   family (the design's Geist Mono kicker was already retuned for tables). */
.lb-cmp-eyebrow {
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.lb-cmp-title {
    margin-top: 2px;
    font-family: var(--font-eyebrow);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
}
.lb-cmp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Same inset as the header above and as the quiz options — the tone cards
       start exactly where the table's first column does. */
    padding: 18px var(--lb-card-pad-x, 24px);
    background: var(--card);
}
.lb-cmp-card {
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lb-cmp-card-title {
    font-family: var(--font-eyebrow);
    font-size: 17.5px;
    font-weight: 800;
    line-height: 1.25;
}
/* .lb-prose's own list rules (0,1,1) would otherwise indent and re-bullet
   these — reset before the tone variants paint them. */
.lb-cmp ul.lb-cmp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.lb-cmp .lb-cmp-list li {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-warm);
}
.lb-cmp .lb-cmp-list li > span { min-width: 0; }
.lb-cmp .lb-cmp-list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--muted-2);
}
.lb-cmp p { margin: 0; font: inherit; color: inherit; }
/* Tone variants — the tone keyword is normalised in the renderer. */
.lb-cmp-card[data-tone="teal"] { background: #DCEEEA; }
.lb-cmp-card[data-tone="teal"] .lb-cmp-card-title { color: var(--teal-ink); }
.lb-cmp-card[data-tone="teal"] li::before { background: var(--teal); }
.lb-cmp-card[data-tone="coral"] { background: #FAECE6; }
.lb-cmp-card[data-tone="coral"] .lb-cmp-card-title { color: #A8452F; }
.lb-cmp-card[data-tone="coral"] li::before { background: #D96A4A; }
.lb-cmp-card[data-tone="amber"] { background: #FBF1DC; }
.lb-cmp-card[data-tone="amber"] .lb-cmp-card-title { color: var(--warn-ink); }
.lb-cmp-card[data-tone="amber"] li::before { background: #D9A03C; }
.lb-cmp-card[data-tone="neutral"] { background: var(--surface); }
.lb-cmp-card[data-tone="neutral"] .lb-cmp-card-title { color: var(--ink-warm); }
@container lbcmp (max-width: 560px) {
    /* Narrow card: only the vertical rhythm tightens — the horizontal inset
       stays on --lb-card-pad-x so the columns keep the shared edge. */
    .lb-cmp-body { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
    .lb-cmp-card { padding: 16px 18px; gap: 12px; }
    .lb-cmp-card-title { font-size: 16.5px; }
    .lb-cmp .lb-cmp-list li { font-size: 14px; }
    .lb-cmp-head { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
    .lb-cmp-ico { width: 44px; height: 44px; }
    .lb-cmp-ico svg { width: 27px; height: 27px; }
    .lb-cmp-title { font-size: 17px; }
}

/* ── Tables · redesign ("Tabel redesign.dc.html") ──────────────────────────
   Card with a teal header bar, a beige column-header row and rows whose first
   cell is a dotted label; the other cells are bullet lists. Markup is a real
   <table> so it stays semantic and can scroll sideways on narrow screens. */
.lb-tbl {
    /* Spacing comes from the block-rhythm rules at the top of section 2 — the
       one exception is a table inside a .lb-prose wrapper (see there). */
    margin: 0;
    background: var(--card);
    border: 1.5px solid var(--teal-3);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(14, 124, 123, .10);
    /* Density follows the CARD's width, not the viewport: the sidebars decide
       how much room a table really gets (≈637px at 1440, but only ≈366px at
       1101 where both rails are still in flow — a viewport query would miss
       exactly the tightest case). */
    container: lbtbl / inline-size;
    --tbl-fs: 13.5px;
    --tbl-label-fs: 14.5px;
    --tbl-pad-y: 14px;
    --tbl-pad-x: 16px;
    /* Left/right edge of the grid = the card inset, so the first column lines
       up with the header icon above it and with every other card block. */
    --tbl-edge: var(--lb-card-pad-x, 24px);
    --tbl-gap: 6px;
    --tbl-col-w: 112px;
    --tbl-label-w: 168px;
    /* Row tones live in the COOL (teal) family, not the warm cream one: the page
       canvas is cream, so a cream zebra row read as "the background showing
       through" and the stripe disappeared. White + a pale teal wash both sit
       clearly above the canvas, like the quiz and callout cards. */
    --tbl-row: var(--card);
    --tbl-row-alt: #EFF7F6;
    --tbl-head-bg: #E3F2F0;
    --tbl-subhead-bg: #F1F8F7;
    --tbl-line: #DCEBEA;
    --tbl-line-soft: #E9F3F2;
}
@container lbtbl (max-width: 620px) {
    .lb-tbl-grid {
        --tbl-fs: 13px;
        --tbl-label-fs: 14px;
        --tbl-pad-y: 12px;
        --tbl-pad-x: 13px;
        --tbl-col-w: 118px;
        --tbl-label-w: 148px;
    }
}
@container lbtbl (max-width: 420px) {
    .lb-tbl-grid {
        --tbl-fs: 12.5px;
        --tbl-label-fs: 13.5px;
        --tbl-pad-y: 11px;
        --tbl-pad-x: 11px;
        --tbl-col-w: 108px;
        --tbl-label-w: 128px;
    }
}
.lb-tbl-head {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px var(--lb-card-pad-x, 24px);
    background: var(--teal-3);
}
.lb-tbl-ico {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Same face as the dashboard greeting (h1 → --font-serif) */
.lb-tbl-eyebrow {
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.lb-tbl-title {
    margin-top: 2px;
    font-family: var(--font-eyebrow);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
}
/* Almost every table renders inside a .lb-prose block, whose list/paragraph
   rules would otherwise win on specificity (`.lb-prose ul` = 0,1,1) and push
   the bullets 22px in with 6px margins around each item. Reset that first — the
   contextual variants (callout / KSB / why-box / quiz) need the extra class. */
.lb-tbl ul,
.lb-tbl ol { margin: 0; padding: 0; list-style: none; }
.lb-tbl li { margin: 0; }
.lb-tbl p,
.lb-card .lb-tbl p,
.ksb-card-body .lb-tbl p,
.quiz-question .lb-tbl p {
    margin: 0;
    font: inherit;
    color: inherit;
}
.lb-tbl p + p { margin-top: 6px; }

/* Scroll area. Rows are opaque, so the edge fade cannot live on the scroller
   itself — it sits on the wrapper, above the scrolled content. */
.lb-tbl-scrollwrap { position: relative; }
.lb-tbl-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.lb-tbl[data-wide] .lb-tbl-scrollwrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(28, 27, 25, .13), rgba(28, 27, 25, 0));
}
/* "swipe sideways" chip — only where a wide table really cannot fit */
.lb-tbl-hint {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

table.lb-tbl-grid {
    width: 100%;
    /* separate + per-cell borders: with `collapse`, a sticky cell loses its
       borders in Chrome/Safari because they belong to the table, not the cell */
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    font-size: var(--tbl-fs);
    /* Columns never squeeze below a readable floor — past that the table
       scrolls instead. `width:100%` still fills the card when it fits. */
    min-width: calc(var(--tbl-label-w) + (var(--cols, 2) - 1) * var(--tbl-col-w));
}
table.lb-tbl-grid[data-cols="1"],
table.lb-tbl-grid[data-cols="2"] { min-width: 0; }
/* 7+ columns (percentile grids): every column has to give up some width, and
   the label column most of all, or the data is pushed off screen. */
table.lb-tbl-grid[data-dense] {
    --tbl-fs: 12.5px;
    --tbl-label-fs: 13px;
    --tbl-pad-x: 12px;
    --tbl-col-w: 84px;
    --tbl-label-w: 112px;
}
/* Column headers */
table.lb-tbl-grid thead th {
    padding: 12px calc(var(--tbl-pad-x) / 2);
    background: var(--tbl-head-bg);
    text-align: left;
    vertical-align: top;
    font-family: var(--font-eyebrow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal-ink);
}
table.lb-tbl-grid thead tr:last-child > * { border-bottom: 1px solid var(--tbl-line); }
table.lb-tbl-grid thead tr + tr > * { border-top: 1px solid var(--tbl-line-soft); }
/* A second header level written mid-table (matrix tables) */
table.lb-tbl-grid tbody tr.lb-tbl-subhead > th {
    padding: 9px calc(var(--tbl-pad-x) / 2);
    background: var(--tbl-subhead-bg);
    text-align: left;
    vertical-align: bottom;
    font-family: var(--font-eyebrow);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--teal-ink);
}
/* Body cells */
table.lb-tbl-grid tbody th,
table.lb-tbl-grid tbody td {
    /* half the gap on each side of a column boundary, so a cell that follows
       the sticky label column is not flush against it */
    padding: var(--tbl-pad-y) calc(var(--tbl-pad-x) / 2);
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    line-height: 1.5;
    color: var(--body-warm);
}
/* Edge padding keys off the real grid column, never :first-child — after a
   rowspan the first cell of a row can sit in the middle of the table. */
table.lb-tbl-grid .lb-tbl-c0 { padding-left: var(--tbl-edge); }
table.lb-tbl-grid tr > *:last-child { padding-right: var(--tbl-edge); }
table.lb-tbl-grid tbody tr:nth-child(even) { background: var(--tbl-row-alt); }
table.lb-tbl-grid tbody tr:nth-child(odd) { background: var(--tbl-row); }
table.lb-tbl-grid tbody tr + tr > * { border-top: 1px solid var(--tbl-line-soft); }

/* Row label — display face, no marker. Marked by the renderer (never by
   :first-child) so a cell that only *looks* first, because a rowspan above
   occupies column 1, is not mistaken for a label. */
.lb-tbl-label {
    font-family: var(--font-eyebrow);
    font-size: var(--tbl-label-fs);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink-warm);
    min-width: var(--tbl-label-w);
}
/* On a wide table the label column must shrink to fit so the data columns keep
   their room; on a 2-3 column table there is space, so let it breathe. */
table.lb-tbl-grid:not([data-cols="1"]):not([data-cols="2"]):not([data-cols="3"]) .lb-tbl-label {
    width: 1%;
}
table.lb-tbl-grid[data-cols="2"] .lb-tbl-label,
table.lb-tbl-grid[data-cols="3"] .lb-tbl-label { width: 26%; }
.lb-tbl-label strong { font-weight: 700; }
table.lb-tbl-grid[data-cols="2"] .lb-tbl-label,
table.lb-tbl-grid[data-cols="3"] .lb-tbl-label { max-width: 34%; }

/* The label column stays put while the rest scrolls sideways. 1-2 column
   tables never overflow, so they keep a plain column. */
table.lb-tbl-grid .lb-tbl-c0 {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: inherit;
}
table.lb-tbl-grid thead .lb-tbl-c0 { background-color: var(--tbl-head-bg); z-index: 3; }
table.lb-tbl-grid tbody tr.lb-tbl-subhead > .lb-tbl-c0 { background-color: var(--tbl-subhead-bg); }
.lb-tbl[data-wide] table.lb-tbl-grid .lb-tbl-c0 {
    box-shadow: 1px 0 0 var(--tbl-line), 10px 0 12px -10px rgba(15, 34, 48, .14);
}
table.lb-tbl-grid[data-cols="1"] .lb-tbl-c0,
table.lb-tbl-grid[data-cols="2"] .lb-tbl-c0 { position: static; box-shadow: none; }

/* Bullet items inside the remaining cells */
.lb-tbl-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tbl-gap);
}
.lb-tbl-items > li {
    position: relative;
    padding-left: 13px;
    line-height: 1.5;
    color: var(--body-warm);
}
.lb-tbl-items > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /* Cool dot: on the new teal-washed rows a sand-coloured bullet went muddy. */
    background: #9FCAC8;
}
/* Numbered items keep their own numbering (the order carries meaning). */
.lb-tbl-items--num > li { padding-left: 0; }
.lb-tbl-items--num > li::before { content: none; }
/* Extra lines of a row label — a sub-note under the label */
.lb-tbl-rowsub {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
}
.lb-tbl-label .lb-tbl-items { margin-top: 5px; }
.lb-tbl-label .lb-tbl-items > li {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--muted);
}
/* Empty cell — the design's em dash (never on header/group bands) */
table.lb-tbl-grid tbody tr:not(.lb-tbl-subhead) td:empty::after {
    content: "—";
    font-size: 14px;
    color: #C6C0B4;
}
table.lb-tbl-grid strong { color: var(--ink-warm); }

/* The swipe hint only makes sense once the card is too narrow for the grid. */
@container lbtbl (max-width: 620px) {
    .lb-tbl[data-wide] .lb-tbl-hint { display: inline-flex; }
}

/* Group band (a row the source marked as one — a bold, full-width label) */
table.lb-tbl-grid tbody tr.lb-tbl-grp > td {
    padding: 10px var(--tbl-edge);
    /* One step darker than the header row so a band still reads as a divider. */
    background: #D7EBE9;
    font-family: var(--font-eyebrow);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--teal-ink);
}

/* Card chrome shrinks with the viewport (the header bar is not part of the
   scrollable grid, so it does not need the container query). */
@media (max-width: 767px) {
    /* One step down for EVERY card block at once (header, table edge, quiz,
       comparison) — they must keep sharing one inset on phones too. */
    .lesson { --lb-card-pad-x: 16px; }
    .lb-tbl { border-radius: 18px; }
    .lb-tbl-head { gap: 12px; padding-top: 13px; padding-bottom: 13px; }
    .lb-tbl-ico { width: 42px; height: 42px; }
    .lb-tbl-ico svg { width: 27px; height: 27px; }
    .lb-tbl-title { font-size: 16.5px; }
    table.lb-tbl-grid thead th { font-size: 11.5px; }
}

/* ── Lists (numbered / check / dot) ────────────────────────────────────── */
.lb-list { display: block; }
.lb-list-title {
    font-family: var(--font-eyebrow);
    font-size: 13px;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: 8px;
}
.lb-list-body {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lb-list-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.lb-list-content {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--body-warm);
}
.lb-list-badge {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}
/* numbered → teal circle */
.lb-list--num .lb-list-badge,
.lb-list-badge.lb-list-num {
    background: var(--teal);
    color: #fff;
    border-radius: 999px;
}
/* check → green glyph, no background */
.lb-list-check { color: var(--success); }
.lb-list-check svg { stroke: currentColor; }
/* dot → 6px ink dot centered in the badge box */
.lb-list-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
}

/* ── Figure / image ────────────────────────────────────────────────────── */
.lb-figure { margin: 0; }
.lb-figure-stage {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}
.lb-image {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}
/* Clickable image → lightbox */
.lb-image-btn {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 8px;
}
.lb-image-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}
.lb-image-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(15, 34, 48, .62);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.lb-image-btn:hover .lb-image-zoom,
.lb-image-btn:focus-visible .lb-image-zoom { opacity: 1; }
.lb-image-ph {
    border: 1px dashed var(--border-2);
    border-radius: 8px;
    color: var(--muted);
    padding: 40px;
    text-align: center;
    font-size: 13.5px;
}
.lb-figure-cap { margin-top: 10px; }
.lb-figure-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-warm);
}
/* Sits inside the stage, directly under the image */
.lb-figure-src {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal);
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
}
.lb-figure-src:hover { text-decoration: underline; }

/* ── Image lightbox ────────────────────────────────────────────────────── */
.lb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px;
    background: rgba(15, 34, 48, .58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .18s ease;
    cursor: zoom-out;
}
.lb-lightbox.is-open { opacity: 1; }
.lb-lightbox img {
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    transform: scale(.97);
    transition: transform .18s ease;
    cursor: default;
}
.lb-lightbox.is-open img { transform: scale(1); }
.lb-lightbox-cap {
    max-width: min(1100px, 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.lb-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.lb-lightbox-close:hover { background: rgba(255, 255, 255, .3); }
body.lb-lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
    .lb-lightbox { padding: 16px; }
    .lb-lightbox img { max-height: calc(100vh - 120px); }
}

/* ── Complete / end-of-lesson block ────────────────────────────────────── */
.lb-complete {
    background: var(--teal-tint-3);
    border: 1px solid var(--teal-border);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.lb-complete-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--teal-ink);
}
.lb-complete-sub {
    font-size: 14px;
    color: var(--muted);
}

/* ── Calculator ────────────────────────────────────────────────────────── */
.lb-calc {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--teal-border);
}
.lb-calc-head {
    background: var(--teal);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lb-calc-head .lb-card-pill { background: rgba(255, 255, 255, 0.18); }
.lb-calc-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.lb-calc-body {
    padding: 16px;
    background: #fff;
}
.lb-calc-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}
.lb-calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lb-calc-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
}
.lb-calc-input {
    height: 36px;
    border: 1px solid var(--border-2);
    border-radius: 9px;
    padding: 0 11px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    color: var(--ink-warm);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.lb-calc-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.12);
}
.lb-calc-seg {
    display: inline-flex;
    background: var(--surface);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.lb-calc-seg-btn {
    padding: 6px 12px;
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
}
.lb-calc-seg-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.08);
}
.lb-calc-seg--wrap { flex-wrap: wrap; }
/* Score calculators: stack the (many, longer-labelled) items vertically. */
.lb-calc-inputs--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
}
.lb-calc-inputs--stack .lb-calc-field { width: 100%; }
/* Checkbox item (point-scored yes/no criterion): checkbox + label on one row. */
.lb-calc-field--check {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}
.lb-calc-check {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--teal);
    cursor: pointer;
}
.lb-calc-field--check .lb-calc-label { font-weight: 500; }
/* Select item (graded option with per-answer points). */
.lb-calc-select {
    height: 36px;
    max-width: 320px;
    border: 1px solid var(--border-2);
    border-radius: 9px;
    padding: 0 11px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--ink-warm);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}
.lb-calc-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.12);
}
.lb-calc-result {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.lb-calc-value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.lb-calc-unit {
    font-size: 12px;
    color: var(--muted-2);
    margin-left: 6px;
}
.lb-calc-badge {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    /* background set inline by JS */
}
.lb-calc--soon { border-style: dashed; }
.lb-calc-soon-msg {
    padding: 16px;
    color: var(--muted);
    font-size: 14px;
}

/* ============================================================================
   3. QUIZ CARDS  (Lecție inline + Grile tab)
   ========================================================================== */

/* Quiz (grilă) — "Quiz header redesign" (5a): teal header with a drawn check-square
   icon; inline answers — correct fills teal, your wrong pick fills strong red, the
   other wrongs tint pink; each reveals a "CORECT/GREȘIT — …" explanation. */
.quiz {
    margin: 0;
    background: #fff;
    border: 1.5px solid #3D9694;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(14, 124, 123, .10);
    overflow: hidden;
}

.quiz-head {
    background: #3D9694;
    padding: 16px var(--lb-card-pad-x, 24px);
    display: flex;
    align-items: center;
    gap: 15px;
}
.quiz-head-ico {
    flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.quiz-head-main { flex: 1; min-width: 0; }
.quiz-head-label { font-family: var(--font-eyebrow); font-size: 19px; font-weight: 700; color: #fff; }
.quiz-head-sub { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.quiz-head-counter {
    flex: none; align-self: flex-start; background: rgba(255, 255, 255, .2); border-radius: var(--r-pill);
    padding: 3px 12px; font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: #fff;
}

.quiz-question { padding: 22px var(--lb-card-pad-x, 24px) 0; }
.quiz-question .lb-prose p,
.quiz-question p { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--ink-warm); }

.quiz-opts { padding: 18px var(--lb-card-pad-x, 24px) 24px; display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
    width: 100%; text-align: left; display: block;
    border: 1px solid #ECE7DB; border-radius: 13px; padding: 13px 15px; background: #fff;
    cursor: pointer; transition: all .18s ease;
}
.quiz:not(.is-answered) .quiz-opt:hover { border-color: #2FA8A6; background: #FBF6E8; }
.quiz-opt-top { display: flex; align-items: center; gap: 14px; }
.quiz-opt-letter {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-eyebrow); font-weight: 700; font-size: 13px;
    background: #F0EEE9; color: #8A867E;
}
.quiz-opt-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.quiz-opt-text p { margin: 0; }
.quiz-opt-fb { display: none; margin: 8px 0 0 44px; font-size: 13.5px; line-height: 1.55; color: #6F6C66; }
.quiz-opt-fb p { margin: 0; display: inline; }
.quiz-opt-fb.is-shown { display: block; animation: quizFade .35s ease both; }
.quiz-v { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

/* multi-answer: a picked (pre-verify) option */
.quiz-opt.is-chosen { border-color: var(--teal); background: var(--teal-tint); }
.quiz-opt.is-chosen .quiz-opt-letter { background: var(--teal); color: #fff; }

/* answered */
.quiz.is-answered .quiz-opt { cursor: default; }
.quiz-opt.is-correct { background: linear-gradient(130deg, #3D9694, #0E7C7B); border-color: #0A6362; }
.quiz-opt.is-correct .quiz-opt-letter { background: #fff; color: #0B5F5E; }
.quiz-opt.is-correct .quiz-opt-text { color: #fff; font-weight: 600; }
.quiz-opt.is-correct .quiz-opt-fb { color: rgba(255, 255, 255, .92); }
.quiz-opt.is-mine-wrong { background: #BF5B49; border-color: #A84A38; }
.quiz-opt.is-mine-wrong .quiz-opt-letter { background: #fff; color: #B24C3C; }
.quiz-opt.is-mine-wrong .quiz-opt-text { color: #fff; font-weight: 600; }
.quiz-opt.is-mine-wrong .quiz-opt-fb { color: rgba(255, 255, 255, .92); }
.quiz-opt.is-other-wrong { background: #F2E1DC; border-color: #E7CFC7; }
.quiz-opt.is-other-wrong .quiz-opt-letter { background: #fff; color: #A84A38; }
.quiz-opt.is-other-wrong .quiz-opt-text { color: #47251C; }
.quiz-opt.is-other-wrong .quiz-opt-fb { color: #593228; }

.quiz-submit {
    margin: 0 var(--lb-card-pad-x, 24px) 24px; height: 42px; padding: 0 22px;
    background: var(--teal); color: #fff; border: none; border-radius: var(--r-pill);
    font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.quiz-submit:hover { background: var(--teal-hover); }

@keyframes quizFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz-opt-fb.is-shown { animation: none; } }

/* ============================================================================
   4. FLASHCARDS
   ========================================================================== */

.flashcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.flashcard {
    perspective: 1200px;
    height: 180px;
    cursor: pointer;
}
.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.flashcard-front {
    border: 1px solid var(--border);
    background: #fff;
}
.flashcard-back {
    border: 1px solid var(--teal-border);
    background: var(--teal-tint-3);
    transform: rotateY(180deg);
}
.flashcard-q {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-warm);
}
.flashcard-hint {
    font-size: 11px;
    color: var(--muted-2);
    margin-top: 10px;
}
.flashcard-a {
    font-size: 13.5px;
    line-height: 1.55;
    color: #22443F;
}
/* Rating row (Nu știu / Știu) on the answer side — POSTs to the FSRS backend (lesson.js). */
.flashcard-back { justify-content: space-between; gap: 10px; }
.flashcard-back .flashcard-a { flex: 1 1 auto; overflow: auto; min-height: 0; }
.flashcard-rate { display: flex; gap: 8px; flex: none; }
.flashcard-rate-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--teal-border);
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.flashcard-rate-yes { color: #2E7D6B; }
.flashcard-rate-no { color: #B4552F; }
.flashcard-rate-btn:hover { background: var(--teal-tint-2, #eaf5f4); }
.flashcard.is-rated .flashcard-rate-btn { opacity: .45; pointer-events: none; }
.flashcard.is-rated[data-rated="stiu"] .flashcard-rate-yes {
    opacity: 1; background: #2E7D6B; color: #fff; border-color: #2E7D6B;
}
.flashcard.is-rated[data-rated="nu_stiu"] .flashcard-rate-no {
    opacity: 1; background: #B4552F; color: #fff; border-color: #B4552F;
}

/* ============================================================================
   5. MATCHING
   ========================================================================== */

.match {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 20px;
}
.match-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ink-warm);
}
.match-instructions {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 12px;
}
.match-counter {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted-2);
    margin-bottom: 12px;
}
.match-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.match-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.match-cell {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}
.match-cell:hover { border-color: var(--teal-border); }
.match-cell.is-sel { border-color: var(--teal); background: var(--teal-tint); }
.match-cell.is-matched {
    border-color: var(--success);
    background: var(--success-tint);
    color: var(--success-ink, #4C7A46);
    cursor: default;
    opacity: 0.8;
}
.match-cell.is-shake { animation: rz-shake 0.4s; }

@keyframes rz-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ============================================================================
   6. VARIANT TOGGLE (adult / copil segmented control)
   ========================================================================== */

.variant-toggle {
    display: inline-flex;
    background: var(--surface);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 16px;
}
.variant-toggle-btn {
    padding: 7px 16px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.variant-toggle-btn:hover { color: var(--ink); }
.variant-toggle-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.08);
}

/* ============================================================================
   7. KSB PANELS  (right "Panou de cunoștințe")
   ========================================================================== */

.ksb-panel { margin-bottom: 18px; }
.ksb-panel[hidden] { display: none; }
/* the sources panel is always visible regardless of active section */
.ksb-panel--sources[data-ksb-persistent] { display: block; }

.ksb-panel-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-2);
    margin-bottom: 12px;
}

.ksb-card {
    background: var(--ksb-bg, #fff);
    border: 1px solid var(--ksb-bd, var(--border-2));
    border-radius: 14px;
    padding: 14px 15px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(28, 27, 25, .05);
}
/* Card head: rounded illustration tile + heading (matches design). */
.ksb-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ksb-card-ico {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ksb-tile, var(--teal-tint));
}
.ksb-card-ico svg { display: block; }
.ksb-card-heading {
    font-family: var(--font-eyebrow);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
    color: var(--ksb-ink, var(--ink-warm));
}
.ksb-card-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ksb-body, var(--body-warm));
}
.ksb-card-body .lb-prose p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ksb-body, var(--body-warm));
}
.ksb-card-body strong { color: var(--ksb-ink, var(--ink-warm)); }

/* Per-type card: one set of variables per family — fill, border, icon tile,
   heading, body and bullet accent. The tints sit deep enough to read as their
   own surface on the cream canvas; the earlier pastel ones dissolved into it.
   Fiziopatologie moved off beige (it was invisible) and Lecții cheie off the
   yellow family (it collided with Știați că? / Fun fact). */
.ksb-card--rezumat,
.ksb-card--sources {
    --ksb-bg: #fff;
    --ksb-bd: #D4CDBE;
    --ksb-tile: #D5EBE9;
    --ksb-ink: #1C1B19;
    --ksb-accent: #0E7C7B;
}
.ksb-card--physio {
    --ksb-bg: #EDEFF1;
    --ksb-bd: #C9D1D7;
    --ksb-tile: #DDE3E8;
    --ksb-ink: #35485A;
    --ksb-body: #46545F;
    --ksb-accent: #4A5D6D;
}
.ksb-card--pearl,
.ksb-card--mnemonic {
    --ksb-bg: #D9EEEC;
    --ksb-bd: #9CD1CE;
    --ksb-tile: #FFFFFF;
    --ksb-ink: #0A4F4E;
    --ksb-body: #1F4744;
    --ksb-accent: #0E7C7B;
}
.ksb-card--conduita,
.ksb-card--warning {
    --ksb-bg: #FBE2D9;
    --ksb-bd: #ECB49F;
    --ksb-tile: #FFFFFF;
    --ksb-ink: #8E3B22;
    --ksb-body: #4A2A22;
    --ksb-accent: #C05336;
}
.ksb-card--stiati,
.ksb-card--funfact {
    --ksb-bg: #FBEDD0;
    --ksb-bd: #E4C88C;
    --ksb-tile: #FFFFFF;
    --ksb-ink: #7E611B;
    --ksb-body: #4A3C1E;
    --ksb-accent: #D9922B;
}
.ksb-card--lectii {
    --ksb-bg: #E4F0DF;
    --ksb-bd: #AECFA4;
    --ksb-tile: #FFFFFF;
    --ksb-ink: #3B6635;
    --ksb-body: #33452F;
    --ksb-accent: #5C9A54;
}

.ksb-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ksb-bullets li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ksb-body, var(--body-warm));
}
/* bullet dots take the card accent */
.ksb-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ksb-accent, var(--teal));
}
.ksb-bullets strong { color: var(--ksb-ink, var(--ink-warm)); }

.ksb-mnemonic-acronym {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--ksb-ink, var(--teal-ink));
    margin-bottom: 6px;
}

.ksb-card-ref {
    font-size: 11.5px;
    color: var(--muted-2);
    margin-top: 8px;
}
.ksb-card-ref a { color: var(--teal); text-decoration: none; }
.ksb-card-ref a:hover { color: var(--teal-hover); }
.ksb-card-ref--panel { margin-top: -4px; }

.ksb-empty {
    font-size: 12.5px;
    color: var(--muted-2);
    padding: 8px;
}

.ksb-sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ksb-source {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ksb-source-ico {
    flex: none;
    margin-top: 2px;
    color: var(--muted-2);
}
.ksb-source-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ksb-source-title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}
.ksb-source-book {
    font-size: 11.5px;
    color: var(--muted-2);
}
.ksb-source-variant {
    align-self: flex-start;
    margin-top: 2px;
    background: var(--teal-tint);
    color: var(--teal-ink);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: capitalize;
}

/* ============================================================================
   8. MOBILE BOTTOM TABBAR  (learn-world nav)
   Self-contained copy of the shell tabbar (detail.html doesn't load shell.css),
   shown only ≤767px. The mobile brand header from the shared partial is not used
   on the lesson page — it has its own sticky topbar — so it stays hidden.
   ========================================================================== */

.m-header { display: none; }

.m-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 55;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(28, 27, 25, 0.07);
}
.m-tabbar-row {
    display: flex;
    align-items: stretch;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
}
.m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 2px 3px;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}
.m-tab:hover { color: var(--muted-2); }
.m-tab.is-active { color: var(--teal-ink); }
.m-tab-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 31px;
    border-radius: var(--r-pill);
}
.m-tab.is-active .m-tab-pill { background: var(--teal-tint); }
.m-tab-world {
    flex: none;
    width: 62px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
}
.m-tab-world-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-top: -7px;
    border-radius: var(--r-pill);
    background: var(--ink);
    border: 3px solid var(--canvas);
    box-shadow: 0 8px 20px rgba(15, 34, 48, 0.28);
}

/* ============================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Tablet: 768–1100px — rail collapses to a 76px icon strip, KSB → drawer */
@media (max-width: 1100px) {
    .lesson {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    /* rail: icons only */
    .lesson-rail { padding: 20px 10px; align-items: stretch; }
    .brand-word,
    .lesson-rail-navitem span,
    .lesson-rail-back span,
    .lesson-rail-toc-head span,
    .lesson-rail-title,
    .lesson-toc-labelwrap {
        display: none;
    }
    /* the rail can no longer show it — the topbar takes over */
    .lesson-topbar-title { display: flex; }
    .lesson-rail-brand { justify-content: center; padding: 0 0 4px; }
    .lesson-rail-navitem { justify-content: center; padding: 10px; gap: 0; }
    .lesson-rail-back { justify-content: center; padding: 6px; }
    .lesson-rail-toc-head { justify-content: center; padding: 0; }
    .lesson-toc-item { justify-content: center; padding: 7px 0; }

    /* KSB becomes a right-side drawer. Hidden with display:none (NOT an
       off-screen translateX) so the closed panel can't widen the layout
       viewport / cause horizontal page scroll on tablet + phone. */
    .lesson-ksb {
        position: fixed;
        top: 0;
        right: 0;
        width: 340px;
        max-width: 90vw;
        height: 100vh;
        z-index: 80;
        box-shadow: var(--shadow-pop);
        border-left: 1px solid var(--border);
        display: none;
    }
    .lesson-ksb.is-open { display: block; }
    .lesson-ksb-close { display: inline-flex; }

    /* FAB to open the drawer */
    .lesson-ksb-fab { display: inline-flex; }
}

/* Phone: ≤767px — single column, rail hidden, reduced padding */
@media (max-width: 767px) {
    .lesson {
        grid-template-columns: minmax(0, 1fr);
    }
    .lesson-rail { display: none; }

    .lesson-content {
        padding: clamp(16px, 5vw, 28px) clamp(12px, 4vw, 20px) 150px;
    }

    /* shrink + wrap the title so long variant names don't overflow */
    .lesson-h1 { font-size: 26px; }

    /* Tab bar stays full width with five equal, icon-only tabs — no button
       grows or shrinks relative to its neighbours. */
    .lesson-tabs { border-radius: 14px; gap: 3px; padding: 4px; }
    .lesson-tab { padding: 8px 4px; }
    .lesson-tab-label { display: none; }
    .lesson-topbar-title { padding-top: 7px; }
    .lesson-topbar-title span { font-size: 13px; }

    /* learn-world bottom tabbar appears; lift the Panou FAB clear of it */
    .m-tabbar { display: block; }
    .lesson-ksb-fab { bottom: 84px; }

    .lb-compare { grid-template-columns: 1fr; }
    .match-cols { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .lb-compare { grid-template-columns: 1fr; }
}