/* ============================================================
   Lesson Review
   Notes built from a lesson transcript.
   Used by CourseNotes/LessonReview and the public share page,
   so both look the same and cannot drift apart.
   ============================================================ */

/* Manrope for the lesson title, the same heading font as the public website.
   Stored on our own server, so it loads in China. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/manrope-800.woff2') format('woff2'); }

.lr-page {
    /* Wide enough for a vocabulary row to fit the word, its meaning and an
       example side by side, each of them on one line */
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    font-family: 'Nunito', sans-serif;
    color: #3A3A3A;
}

/* ── Header ──
   Title and date on the left, in line with the cards below. The homework,
   summary and flashcard buttons sit on the right of the same row. When there
   is not room, the buttons drop onto their own line, lined up on the left. */
.lr-head {
    display: flex;
    /* Buttons line up with the title, not the middle of title and date.
       OLD: align-items: center; */
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
/* OLD CENTRED HEADER - title in the middle, Rebuild pinned to the right.
   Replaced by the left-aligned one above. Preserved for reference. Do not delete.
.lr-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 175px;
    margin-bottom: 26px;
}
*/
/* OLDER LEFT-ALIGNED HEADER - from before the centred one. Preserved for reference. Do not delete.
.lr-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
*/
/* Room between the student strip above and the title, so the page can breathe */
.lr-head { margin-top: 30px; }
/* OLD - centred the title and date:
.lr-headtext { display: flex; flex-direction: column; align-items: center; }
*/
.lr-headtext { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* The buttons on the right. The gap they had under them is not needed up here. */
/* The buttons are about as tall as the 34px title line, so their tops line up
   and no nudge is needed. OLD, for the 32px title: margin: -2px 0 0; */
.lr-head .lr-todo { justify-content: flex-start; margin: 0; }

/* Computers: the title and the buttons always share one row. The title takes
   the space that is left and wraps onto a second line if it is long. The
   buttons never shrink, wrap or drop underneath. Phones stack, see below. */
@media (min-width: 901px) {
    .lr-head { flex-wrap: nowrap; }
    .lr-headtext { flex: 1 1 auto; }
    .lr-head .lr-todo { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* Laptops: slimmer buttons, so the title keeps enough room beside them */
@media (max-width: 1400px) {
    .lr-head .lr-todo { gap: 8px; }
    .lr-head .lr-todobtn { padding: 9px 15px; font-size: 13px; }
}

/* The date, then Rebuild for the tutor, split by a small dot */
.lr-subrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lr-regenform { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.lr-regenform::before { content: "\00B7"; color: #C9BFB2; }

/* NOT SHOWN ANY MORE - the pill above the title. The rule stays in case it
   comes back. A quiet line naming the page, in the amber the buttons use. */
.lr-eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.4px; color: #C9820F;
    background: #FDF3E2; border-radius: 20px; padding: 4px 12px;
    margin-bottom: 10px;
}
/* OLD TITLE - Nunito at 800, which we do not host, so the browser faked the
   extra weight. Kept for reference. Do not delete.
.lr-title {
    font-size: 32px; font-weight: 800; color: #1a1a1a;
    margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.4px;
}
*/
/* The lesson title in Manrope: firmer and tighter, so it reads clean and modern */
.lr-title {
    font-family: 'Manrope', 'Nunito', sans-serif;
    /* A little smaller on smaller screens, 34px at most. OLD: font-size: 34px; */
    font-size: clamp(28px, 2.4vw, 34px); font-weight: 800; color: #141414;
    margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.8px;
}
/* REMOVED - the short amber underline under the title. A clean title with a
   quiet date under it looks more modern. Kept for reference. Do not delete.
.lr-title::after {
    content: ""; display: block;
    width: 46px; height: 3px; border-radius: 3px;
    background: #F5A623;
    margin: 10px 0 0;
}
*/
.lr-sub { font-size: 14px; color: #8A7F72; margin: 0; }
.lr-dot { margin: 0 6px; color: #C9BFB2; }
/* Chips and Rebuild, pinned to the right of the centred title */
.lr-counts { position: absolute; top: 0; right: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.lr-chip {
    font-size: 13px; font-weight: 700; color: #6B6257;
    background: #F1ECE5; border-radius: 20px; padding: 6px 14px;
}
.lr-chip-fix { background: #FBEAE4; color: #A84C33; }
/* The key: the same little C, and what it means */
.lr-chip-key {
    display: inline-flex; align-items: center; gap: 7px;
    background: #FBF6EC; color: #8A7F72; font-weight: 700;
    padding-left: 7px;
}

/* Rebuild from the saved transcript. Tutor only. A quiet link after the date.
   OLD - an outlined pill pinned to the right of the title. Do not delete.
.lr-regen {
    font-size: 13px; font-weight: 700; color: #6B6257;
    background: #fff; border: 1px solid #E3DCD2; border-radius: 20px;
    padding: 6px 14px; cursor: pointer; font-family: inherit;
}
.lr-regen:hover { background: #FFF9F0; border-color: #F5A623; color: #A26E17; }
*/
.lr-regen {
    font-size: 13px; font-weight: 700; color: #A79C8E;
    background: none; border: 0; padding: 0;
    cursor: pointer; font-family: inherit;
    text-decoration: underline; text-underline-offset: 3px;
}
.lr-regen:hover { color: #A26E17; }

.lr-error {
    background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C;
    border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px;
}

/* ── Two columns of sections ── */
/* Kept for the two column layout, not used while sections are one per row */
.lr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
/* Tutor's notes and Things to fix, side by side under the sections */
.lr-bottomrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }

/* ── A section: one card, many rows ── */
.lr-card {
    background: #fff;
    border: 3px solid #E3DCD2;
    border-radius: 16px;
    margin-bottom: 22px;
    overflow: hidden;
}
/* A colour per section, so the two columns are easy to tell apart at a glance.
   The outline takes the pale version, so five cards down the page stay calm.
   The full strength is saved for the line under the head. */
.lr-cat-vocabulary    { border-color: #F6E1C0; }
.lr-cat-grammar       { border-color: #D4E3F5; }
.lr-cat-phrases       { border-color: #E3D7F3; }
.lr-cat-pronunciation { border-color: #CBE6EC; }
.lr-cat-notes         { border-color: #D3EADF; }
.lr-fixcard           { border-color: #F2DAD2; }
.lr-cardhead {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #F3EEE7;
}
.lr-cardtitle { font-size: 15px; font-weight: 800; color: #1a1a1a; }
.lr-count {
    font-size: 12px; font-weight: 700; color: #8A7F72;
    background: #F5F1EB; border-radius: 20px; padding: 2px 9px;
}

/* Every card head is a summary now, so the browser's triangle goes */
summary.lr-cardhead { list-style: none; cursor: pointer; }
summary.lr-cardhead::-webkit-details-marker { display: none; }
/* A section that cannot be closed is a heading, not a control */
.lr-cardhead--static { pointer-events: none; cursor: default; }

/* Section headings: icon, title and count on one centred row */
.lr-cardhead--centre {
    justify-content: center; gap: 11px;
    padding: 12px 20px;
}
.lr-headicon {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 10px;
    background: #F5F1EB; color: #8A7F72;
}
.lr-headicon svg { width: 16px; height: 16px; display: block; }
.lr-headtitle { display: flex; align-items: center; gap: 9px; }
.lr-cardhead--centre .lr-cardtitle { font-size: 17px; }

/* Each icon takes the colour already on that section's edge, and the head
   sits on a faded version of it so it reads as part of the card */
.lr-cat-vocabulary    .lr-headicon { background: #FDF3E2; color: #C9820F; }
.lr-cat-grammar       .lr-headicon { background: #EAF2FC; color: #3C79BD; }
.lr-cat-phrases       .lr-headicon { background: #F2ECFB; color: #7F52BC; }
.lr-cat-pronunciation .lr-headicon { background: #E4F4F7; color: #268595; }
.lr-cat-notes         .lr-headicon { background: #E4F4EC; color: #2F7F5C; }
.lr-fixcard           .lr-headicon { background: #FBEAE4; color: #A84C33; }

/* OLD - a solid colour band across the top of every card. Five of them down
   the page read heavy, so the colour moved to the outline. Kept for
   reference. Do not delete.
.lr-cat-vocabulary    .lr-cardhead--centre { background: #F5A623; }
.lr-cat-grammar       .lr-cardhead--centre { background: #4C8DD8; }
.lr-cat-phrases       .lr-cardhead--centre { background: #9B6FD4; }
.lr-cat-pronunciation .lr-cardhead--centre { background: #2FA4B8; }
.lr-cat-notes         .lr-cardhead--centre { background: #3FAE7E; }
.lr-fixcard           .lr-cardhead--centre { background: #E0A62F; }

.lr-cardhead--centre { border-bottom: 0; }
.lr-cardhead--centre .lr-cardtitle { color: #fff; }
.lr-cardhead--centre .lr-count { background: rgba(255, 255, 255, 0.24); color: #fff; }
.lr-cardhead--centre .lr-headchev { color: rgba(255, 255, 255, 0.85); }
.lr-cardhead--centre .lr-headicon { background: #fff; }
*/

/* WHITE BOX WITH A THICK FRAME - kept for reference. Do not delete.
.lr-cardhead--centre {
    background: #fff;
    border: 3px solid #E3DCD2;
    border-radius: 15px 15px 0 0;
}
.lr-cat-vocabulary    .lr-cardhead--centre { border-color: #F5A623; }
.lr-cat-grammar       .lr-cardhead--centre { border-color: #4C8DD8; }
.lr-cat-phrases       .lr-cardhead--centre { border-color: #9B6FD4; }
.lr-cat-pronunciation .lr-cardhead--centre { border-color: #2FA4B8; }
.lr-cat-notes         .lr-cardhead--centre { border-color: #3FAE7E; }
.lr-fixcard           .lr-cardhead--centre { border-color: #E0A62F; }
.lr-cardhead--centre .lr-cardtitle { color: #1a1a1a; }
.lr-cardhead--centre .lr-count { background: #F5F1EB; color: #8A7F72; }
*/

/* The head is a faint wash of the card's own colour, with the title in the
   deep version of it. Enough to tell the sections apart while scrolling,
   without a strong band across the page five times over. */
/* The card's own border already runs round three sides of the head, so the
   head draws only the line underneath, at the same width as everything else */
.lr-cardhead--centre {
    border: 0;
    border-bottom: 3px solid #E3DCD2;
}
.lr-cat-vocabulary    .lr-cardhead--centre { background: #FDF3E2; border-color: #F5A623; }
.lr-cat-grammar       .lr-cardhead--centre { background: #EAF2FC; border-color: #4C8DD8; }
.lr-cat-phrases       .lr-cardhead--centre { background: #F2ECFB; border-color: #9B6FD4; }
.lr-cat-pronunciation .lr-cardhead--centre { background: #E4F4F7; border-color: #2FA4B8; }
.lr-cat-notes         .lr-cardhead--centre { background: #E7F6F0; border-color: #3FAE7E; }
.lr-fixcard           .lr-cardhead--centre { background: #FDF3E2; border-color: #E0A62F; }

/* The title takes the deep shade of the same colour */
.lr-cat-vocabulary    .lr-cardhead--centre .lr-cardtitle { color: #A26E17; }
.lr-cat-grammar       .lr-cardhead--centre .lr-cardtitle { color: #2F6CA8; }
.lr-cat-phrases       .lr-cardhead--centre .lr-cardtitle { color: #6B45A5; }
.lr-cat-pronunciation .lr-cardhead--centre .lr-cardtitle { color: #1F7C8C; }
.lr-cat-notes         .lr-cardhead--centre .lr-cardtitle { color: #2C7F5C; }
.lr-fixcard           .lr-cardhead--centre .lr-cardtitle { color: #A26E17; }

/* =========================================================
   MATCHED TO THE NOTE PAGE
   These heads now copy .vn2-cardsec-head on CourseNotes/ViewNote:
   a flat wash of the section's colour, a solid 3px line of the full
   strength colour under it, a white icon tile and a white count.
   Only the colours differ, and they stay each section's own.

   TRIED AND DROPPED: a top-to-bottom shade like the buttons carry.
   The note page is flat, and the two sitting side by side did not
   match. Kept here in case it is wanted back:
   background-image: linear-gradient(180deg, rgba(255,255,255,.60), rgba(0,0,0,.06));
   box-shadow: inset 0 1px 0 rgba(255,255,255,.75);

   Whatever goes here must carry the SAME two-class weight as the
   backgrounds above and come after them, or it silently does nothing.
   ========================================================= */
.lr-cat-vocabulary    .lr-cardhead--centre,
.lr-cat-grammar       .lr-cardhead--centre,
.lr-cat-phrases       .lr-cardhead--centre,
.lr-cat-pronunciation .lr-cardhead--centre,
.lr-cat-notes         .lr-cardhead--centre,
.lr-fixcard           .lr-cardhead--centre {
    background-image: none;
    box-shadow: none;
    border-bottom-width: 3px;
}

/* Same weight and size as the note page */
.lr-cardhead--centre .lr-cardtitle { font-size: 17px; font-weight: 800; letter-spacing: 0; }

/* White tile behind the icon, as on the note page, with the section's
   deep shade for the icon itself */
.lr-cardhead--centre .lr-headicon { background: #fff; }

/* The count sits on white too, rather than taking a tint of its own */
.lr-cardhead--centre .lr-count {
    background: #fff; color: #8A7F72;
    font-size: 12px; font-weight: 700;
    border-radius: 20px; padding: 2px 9px;
}

/* A white tile lifts the icon off the wash, and the count and chevron sit
   quietly on it */
.lr-cardhead--centre .lr-headicon { background: #fff; }
.lr-cardhead--centre .lr-count { background: #fff; color: #8A7F72; }
.lr-cardhead--centre .lr-headchev { color: #B5ABA0; }

/* ── One row per thing, opens for the detail ── */
/* A line above each row in a soft version of that card's colour, so an open
   row does not run into the one before it. The first row needs none, the
   head is already above it. */
.lr-row { border-top: 1px solid #F0E7D8; }
.lr-row:first-of-type { border-top: 0; }

.lr-cat-vocabulary    .lr-row { border-top-color: #F6E1C0; }
.lr-cat-grammar       .lr-row { border-top-color: #D4E3F5; }
.lr-cat-phrases       .lr-row { border-top-color: #E3D7F3; }
.lr-cat-pronunciation .lr-row { border-top-color: #CBE6EC; }
.lr-cat-notes         .lr-row { border-top-color: #D2EADE; }
.lr-row > summary {
    display: flex; align-items: baseline; gap: 12px;
    padding: 13px 20px; cursor: pointer; list-style: none;
}
.lr-row > summary::-webkit-details-marker { display: none; }
.lr-row > summary:hover { background: #FFFCF7; }
.lr-row[open] > summary { background: #FFFCF7; }
.lr-term { font-size: 15px; font-weight: 700; color: #1a1a1a; flex: 0 0 auto; }

/* A small arrow at the start of a row, so it is clear the row opens. Drawn in
   CSS, and inside the first column, so the table columns still line up. */
.lr-word::before,
.lr-row > summary > .lr-term:first-child::before {
    content: ""; display: inline-block;
    flex: 0 0 auto; align-self: center;
    width: 5px; height: 5px; margin: 0 9px 2px 0;
    border-right: 1.6px solid #B9AFA1;
    border-bottom: 1.6px solid #B9AFA1;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.lr-row[open] > summary .lr-word::before,
.lr-row[open] > summary > .lr-term:first-child::before { transform: rotate(-135deg); }
/* Pronunciation is a wall of tiles rather than a list of rows, so it has none */
.lr-cat-pronunciation .lr-row > summary > .lr-term:first-child::before { content: none; }

/* A picture of the word, for children and beginners. Kept small so the list
   still reads as a list, and centred because the row lines up on the text. */
.lr-thumb {
    flex: 0 0 auto; align-self: center;
    width: 30px; height: 30px; object-fit: contain;
    border-radius: 6px; background: #fff;
}
.lr-peek {
    font-size: 13.5px; color: #8A7F72; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A grammar structure is a pattern, not a sentence, so it reads darker than
   the explanation lines around it. It starts at the left of its column, like
   every other column on the page. */
.lr-pattern {
    color: #5B5147; font-weight: 600; font-size: 13.5px;
}

/* Once the row is open the full text is right below, so the cut off
   version would just be the same sentence twice. A grammar structure is
   the exception: it is not repeated inside the row, so it stays. */
.lr-row[open] > summary .lr-peek:not(.lr-pattern) { display: none; }
/* OLDEST - a capitals CORRECTED pill. Kept for reference. Do not delete.
.lr-flag {
    flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: #A26E17; background: #FFF3D9;
    border-radius: 20px; padding: 3px 8px;
}
*/
/* A small round C at the end of the word. Hovering it says what it means. */
.lr-flag {
    flex: 0 0 auto; align-self: center;
    width: 19px; height: 19px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; line-height: 1;
    color: #A26E17; background: #FFF3D9;
}
/* REMOVED - a small amber pill saying Corrected. Tried on 11 September 2026
   and taken back out for the round C above. Kept for reference. Do not delete.
.lr-flag {
    flex: 0 0 auto; align-self: center;
    font-size: 11px; font-weight: 800; line-height: 1;
    color: #A26E17; background: #FFF3D9;
    border-radius: 20px; padding: 4px 9px;
    white-space: nowrap;
}
*/

/* ── Vocabulary and phrases read as a table: the word, what it means, an
   example ── Each row is its own little block, so the columns are set widths
   rather than sized by their own text. That is what lines one row up with the
   next. A section laid out this way carries the lr-table class. */
.lr-table .lr-colhead,
.lr-table .lr-row > summary {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 16px;
    align-items: center;
}

/* A phrase is longer than a single word, so it gets a wider first column.
   Vocabulary now uses the same columns, so the meanings and examples in the
   two tables line up down the page. OLD: phrases only, vocabulary used the
   230px / 1fr / 1.05fr columns above. */
.lr-cat-vocabulary .lr-colhead,
.lr-cat-vocabulary .lr-row > summary,
.lr-cat-phrases .lr-colhead,
.lr-cat-phrases .lr-row > summary {
    grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1fr);
}

/* Column titles, so the list reads as a table straight away */
.lr-table .lr-colhead {
    padding: 10px 20px;
    border-bottom: 1px solid #F6E1C0;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; color: #C0A578;
}
/* Each card keeps its own colour, so the titles belong to the head above them */
.lr-cat-phrases .lr-colhead { border-bottom-color: #E3D7F3; color: #A98CD3; }

/* Each title sits over the middle of its own column. The rows underneath
   still read from the left. */
.lr-table .lr-colhead > span { text-align: center; }
.lr-table .lr-colhead > span:first-child { padding-left: 0; }

/* The picture, the play button and the word share the first column */
.lr-word {
    display: flex; align-items: center; flex-wrap: wrap;
    column-gap: 8px; row-gap: 4px; min-width: 0;
}
/* Hovering the C says what it means. The label takes the amber the buttons
   use, so it belongs to this page rather than reading as a system box. */
.lr-flag[data-tip] { position: relative; cursor: default; }
.lr-flag[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: #F5A623; color: #fff;
    font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800;
    padding: 6px 12px; border-radius: 10px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.32);
    z-index: 30; pointer-events: none;
}
/* The little arrow pointing back down at the C */
.lr-flag[data-tip]:hover::before {
    content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #F5A623;
    z-index: 31; pointer-events: none;
}

/* NO LONGER USED - the badge is a small C after the word now, so nothing has
   to be pushed onto a second line. Kept for reference. Do not delete.
   An empty full width item, which pushes the word onto the line below the
   badge. The badge itself stays only as wide as its own text. */
.lr-wordbreak { flex: 0 0 100%; height: 0; }

/* NOT USED IN THE ROWS ANY MORE - kept because the class may still be handy.
   The picture's place in the row, kept whether or not this word has one, so
   every word starts on the same line. Only drawn when the student's notes use
   pictures at all, so nobody else loses the space. */
.lr-picslot {
    flex: 0 0 34px; height: 30px;
    display: flex; align-items: center; justify-content: center;
}
/* NO LONGER USED - the table rows have no pictures now, so the WORD title
   lines up on the play button like every other list.
   Old rule kept for reference. Do not delete.
.lr-haspics .lr-colhead > span:first-child { padding-left: 74px; }
*/
.lr-table .lr-term { min-width: 0; overflow-wrap: anywhere; }

/* Two lines at most, so one long meaning cannot make the row tall. The
   whole thing is there anyway once the row is open. */
.lr-def, .lr-eg {
    font-size: 13.5px; line-height: 1.5; min-width: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
.lr-def { color: #6B6055; }
.lr-eg  { color: #0B7A4B; }

/* Meaning and example start a little further in, under their headings.
   Vocabulary and phrases only, the grammar table is left as it was. */
.lr-cat-vocabulary .lr-def, .lr-cat-vocabulary .lr-eg,
.lr-cat-phrases .lr-def, .lr-cat-phrases .lr-eg { padding-left: 24px; }

/* An open row goes back to one line, because the full text is right below it */
.lr-table .lr-row[open] > summary { display: flex; gap: 12px; }
.lr-row[open] > summary .lr-def,
.lr-row[open] > summary .lr-eg { display: none; }

/* Every other row sits on a faint tint of that card's own colour, so the eye
   follows a long row across the page. Hovering or opening a row still lifts it
   above the stripe, and the even rows need their own hover line or the stripe
   would sit on top of it. */
.lr-cat-vocabulary .lr-row:nth-of-type(even) > summary { background: #FDFAF4; }
.lr-cat-vocabulary .lr-row > summary:hover,
.lr-cat-vocabulary .lr-row:nth-of-type(even) > summary:hover,
.lr-cat-vocabulary .lr-row[open] > summary { background: #FFF7EA; }

.lr-cat-phrases .lr-row:nth-of-type(even) > summary { background: #FBF9FE; }
.lr-cat-phrases .lr-row > summary:hover,
.lr-cat-phrases .lr-row:nth-of-type(even) > summary:hover,
.lr-cat-phrases .lr-row[open] > summary { background: #F6F1FD; }

/* Narrow screens: the buttons drop under the title, lined up on the left.
   OLD - everything centred, for the centred header:
   .lr-head { flex-direction: column; align-items: center; padding: 0; }
   .lr-counts { position: static; justify-content: center; } */
@media (max-width: 900px) {
    .lr-head { flex-direction: column; align-items: flex-start; }
}

/* ── Grammar reads as a table as well: the point, the structure it follows,
   and a sentence that uses it. Three columns of the same width ── */
.lr-gtable .lr-colhead,
.lr-gtable .lr-row > summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* The titles take this card's own colour, like the other tables do */
.lr-gtable .lr-colhead { border-bottom-color: #D4E3F5; color: #8FAFD3; }

/* Narrow screens: the columns stack, so nothing is squeezed */
@media (max-width: 760px) {
    .lr-table .lr-colhead { display: none; }
    .lr-table .lr-row > summary {
        display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    }
    /* Stacked, the nudge would just look like an indent */
    .lr-cat-vocabulary .lr-def, .lr-cat-vocabulary .lr-eg,
    .lr-cat-phrases .lr-def, .lr-cat-phrases .lr-eg { padding-left: 0; }
}

/* ── Pronunciation: square tiles rather than a list. Up to four across,
   centred, so one or two sit in the middle instead of hugging the left ── */
.lr-cat-pronunciation .lr-rows {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px; padding: 18px 20px;
    /* Four tiles (196) plus three gaps (14) is 826, and the 40 of side padding
       counts towards this because everything here is border-box */
    max-width: 866px; margin: 0 auto;
}
.lr-cat-pronunciation .lr-row {
    flex: 0 0 196px;
    border: 1px solid #CBE6EC; border-radius: 14px; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
/* The whole tile opens, so it needs to look like it does */
.lr-cat-pronunciation .lr-row:hover {
    border-color: #2FA4B8; box-shadow: 0 4px 14px rgba(47, 164, 184, 0.12);
}
/* Sized by what is in it, not by a square, or a third of the tile is empty */
.lr-cat-pronunciation .lr-row > summary {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; text-align: center;
    padding: 20px 14px;
}
/* The list rows go warm on hover, which fights the teal here */
.lr-cat-pronunciation .lr-row > summary:hover,
.lr-cat-pronunciation .lr-row[open] > summary { background: #F6FCFD; }
/* The play button is the main action on a pronunciation tile */
.lr-cat-pronunciation .lr-play {
    width: 40px; height: 40px;
    background: #2FA4B8; border-color: #2FA4B8; color: #fff;
}
.lr-cat-pronunciation .lr-play:hover { background: #23808F; border-color: #23808F; }
.lr-cat-pronunciation .lr-say { flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; }
.lr-cat-pronunciation .lr-term { font-size: 16px; }
.lr-cat-pronunciation .lr-detail { padding: 0 14px 16px; text-align: left; }

/* REMOVED WIDE TILES - wide, short tiles laid out from the left, the word and
   how it sounds on the left, the play button on the right. Tried on
   11 September 2026 and taken back out for the square tiles above. The notes
   that were on these rules are kept as plain lines. Do not delete.
.lr-cat-pronunciation .lr-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    (An open tile grows on its own, without stretching its neighbours)
    align-items: start;
    gap: 12px; padding: 16px 20px;
}
("Nothing from this lesson yet" goes across the whole row, not in one tile)
.lr-cat-pronunciation .lr-empty { grid-column: 1 / -1; }
.lr-cat-pronunciation .lr-row {
    border: 1px solid #CBE6EC; border-radius: 14px; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.lr-cat-pronunciation .lr-row:hover {
    border-color: #2FA4B8; box-shadow: 0 4px 14px rgba(47, 164, 184, 0.12);
}
.lr-cat-pronunciation .lr-row > summary {
    align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px;
}
.lr-cat-pronunciation .lr-row > summary:hover,
.lr-cat-pronunciation .lr-row[open] > summary { background: #F6FCFD; }
(The word on top, how it sounds underneath)
.lr-saytext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lr-saytop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lr-cat-pronunciation .lr-say { align-items: baseline; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; }
.lr-cat-pronunciation .lr-play {
    width: 40px; height: 40px;
    background: #2FA4B8; border-color: #2FA4B8; color: #fff;
}
.lr-cat-pronunciation .lr-play:hover { background: #23808F; border-color: #23808F; }
.lr-cat-pronunciation .lr-term { font-size: 16px; }
.lr-cat-pronunciation .lr-detail { padding: 0 16px 16px; text-align: left; }
*/

.lr-detail { padding: 2px 20px 18px; }
.lr-scenario { font-size: 12.5px; color: #A79C8E; margin: 0 0 10px; }
.lr-body { font-size: 14.5px; line-height: 1.65; color: #4A4038; margin: 0 0 12px; }

.lr-quote {
    display: flex; gap: 12px; align-items: baseline;
    padding: 10px 13px; border-radius: 10px; margin-bottom: 8px;
    font-size: 14.5px; line-height: 1.5;
}
.lr-quote:last-child { margin-bottom: 0; }
.lr-qlabel {
    flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; opacity: .8; padding-top: 3px;
}
.lr-quote-said { background: #FFFBEB; color: #92400E; }
.lr-quote-say  { background: #EDFBF3; color: #0B7A4B; font-weight: 700; }

/* ── Pronunciation rows show how the word sounds ── */
.lr-say { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.lr-saylabel { font-size: 12px; color: #A79C8E; }
.lr-sayword { font-size: 16px; font-weight: 700; color: #0E7490; letter-spacing: .3px; }
.lr-play {
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
    border: 1px solid #E6E1DA; background: #fff; border-radius: 50%;
    color: #0891B2; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lr-play:hover { background: #ECFEFF; border-color: #0891B2; }
/* The one that sits in front of a word in a list row */
.lr-play--sm { width: 24px; height: 24px; align-self: center; }

/* ── Pronunciation, two-line card head ── */
.lr-pronhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }

/* ── For you: private advice, tutor only. Opens on click ── */
.lr-advice { border-left-color: #6B7CB8; background: #FBFAFF; }
/* Same centred head as the student's card, so the two read as a pair */
.lr-advice .lr-cardhead--centre { background: #6B7CB8; }
.lr-advice .lr-headicon { background: #fff; color: #5A6BA6; }
.lr-private {
    font-size: 11px; font-weight: 700; color: #fff;
    background: rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 3px 10px;
}
/* The whole head is the button, without the browser's own triangle */
.lr-advice > summary { cursor: pointer; list-style: none; }
.lr-advice > summary::-webkit-details-marker { display: none; }
/* No divider under the head while it is shut */
.lr-advice:not([open]) > summary { border-bottom: 0; }
.lr-advicechev {
    display: flex; align-items: center; color: rgba(255, 255, 255, 0.85);
    transition: transform .15s;
}
.lr-advicechev svg { width: 16px; height: 16px; display: block; }
.lr-advice[open] .lr-advicechev { transform: rotate(90deg); }
/* Two tabs inside the tutor's card: their advice, or what the student is reading */
.lr-hidden { display: none !important; }
.lr-tabs {
    display: flex; gap: 4px; padding: 14px 20px 0;
}
.lr-tab {
    font-family: inherit; font-size: 13px; font-weight: 800;
    color: #6B7CB8; background: #EEF0FA; border: 0;
    border-radius: 20px; padding: 7px 16px; cursor: pointer;
    transition: background .15s, color .15s;
}
.lr-tab:hover { background: #E3E7F7; }
.lr-tab--on { background: #6B7CB8; color: #fff; }
.lr-tab:focus-visible { outline: 2px solid #6B7CB8; outline-offset: 2px; }

/* Four tiles rather than one block of text, so it is easier to take in */
.lr-advicegrid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; padding: 16px 20px 20px;
}
.lr-advicetile {
    background: #fff; border: 1px solid #E9E8F3; border-radius: 14px;
    padding: 15px 16px 17px;
}
.lr-adviceicon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 auto 9px;
    background: #EEF0FA; border-radius: 11px; color: #6B7CB8;
}
.lr-adviceicon svg { width: 17px; height: 17px; display: block; }
/* Headings centred, but the text itself stays left so it reads easily */
.lr-advicelabel {
    display: block; text-align: center;
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; color: #6B7CB8; margin-bottom: 9px;
}
.lr-advicegrid p { margin: 0; font-size: 14px; line-height: 1.6; color: #3E3B4F; }

@media (max-width: 900px) {
    .lr-advicegrid { grid-template-columns: 1fr; }
}

/* ── The student's round-up of the lesson ──
   Always open, unlike the tutor's advice card: this is the first thing the
   student should read, so it is never hidden behind a click. */
.lr-summary { border-color: #D2EADE; margin-bottom: 4px; }
.lr-summary .lr-cardhead--centre { background: #E7F6F0; border-color: #3FAE7E; }
.lr-summary .lr-cardhead--centre .lr-cardtitle { color: #2C7F5C; }
.lr-summary .lr-headicon { background: #fff; color: #2F8B64; }

.lr-summarygrid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; padding: 16px 20px 20px;
}
.lr-summarytile {
    background: #F7FBF9; border: 1px solid #DCEFE6; border-radius: 14px;
    padding: 15px 16px 17px;
}
/* Icon above the heading, both centred, exactly like the tutor's card */
.lr-summaryicon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 auto 9px;
    background: #E7F6F0; border-radius: 11px; color: #2F8B64;
}
.lr-summaryicon svg { width: 17px; height: 17px; display: block; }
/* Headings centred, but the text itself stays left so it reads easily */
.lr-summarylabel {
    display: block; text-align: center;
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; color: #2F8B64; margin-bottom: 9px;
}
.lr-summarygrid p { margin: 0; font-size: 14px; line-height: 1.6; color: #35463F; }

@media (max-width: 900px) {
    .lr-summarygrid { grid-template-columns: 1fr; }
}

/* ── Show more: a long section opens at five rows ── */
.lr-showmore {
    display: block; width: 100%;
    font-family: inherit; font-size: 13px; font-weight: 800;
    color: #8A7F72; background: #FBF8F4;
    border: 0; border-top: 1px solid #F0E7D8;
    padding: 12px 20px; cursor: pointer;
    transition: background .15s, color .15s;
}
.lr-showmore:hover { background: #FFF6E9; color: #A26E17; }
.lr-showmore:focus-visible { outline: 2px solid #F5A623; outline-offset: -2px; }

/* ── Things to fix ── */
.lr-fixcard { margin-top: 4px; }
/* Opens on click, like the advice card */
.lr-fixcard > summary { cursor: pointer; list-style: none; }
.lr-fixcard > summary::-webkit-details-marker { display: none; }
.lr-fixcard:not([open]) > summary { border-bottom: 0; }
.lr-headchev { display: flex; align-items: center; color: #B5ABA0; transition: transform .15s; }
.lr-headchev svg { width: 15px; height: 15px; display: block; }
.lr-card[open] .lr-headchev { transform: rotate(90deg); }
.lr-fixitem { padding: 12px 20px 14px; border-bottom: 1px solid #F6F2EC; }
.lr-fixitem:last-child { border-bottom: 0; }
.lr-fixterm {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: #A79C8E; margin-bottom: 6px;
}
.lr-fixrow {
    display: flex; align-items: baseline; gap: 14px;
    font-size: 14.5px; line-height: 1.5;
}
.lr-fixrow > div { flex: 1; }
.lr-said { color: #92400E; }
.lr-better { color: #0B7A4B; font-weight: 700; }
.lr-arrow { flex: 0 0 auto !important; color: #D8D0C5; }

/* ── Homework popup ── */
.lr-hwbtn {
    font-size: 13px; font-weight: 800; color: #fff;
    background: #F5A623; border: 0; border-radius: 20px;
    padding: 7px 16px; cursor: pointer; font-family: inherit;
}
.lr-hwbtn:hover { background: #E0951C; }

/* The popup's own styles (.qh-...) moved to quick-homework.css on 2026-09-13,
   so the notes page and this page share one copy. This page links both files. */


/* ── Tutor editing. None of this is ever rendered for a student ── */
.lr-empty { margin: 0; padding: 16px 20px; font-size: 13.5px; color: #A79C8E; }

/* Sits at the end of the word's own row, and only once the row is open */
.lr-rowactions { display: none; }
.lr-row[open] > summary .lr-rowactions {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; flex: 0 0 auto;
}
.lr-editbtn, .lr-delbtn, .lr-cancelbtn {
    background: none; border: 1px solid #E6E1DA; border-radius: 8px;
    padding: 5px 12px; font-size: 12.5px; font-weight: 700;
    color: #8A7F72; cursor: pointer; font-family: inherit;
}
.lr-editbtn:hover { border-color: #F5A623; color: #C9820F; }
.lr-delbtn:hover { border-color: #DC8C8C; color: #B4453F; }

/* ── Choosing several rows to remove at once ── */
/* The tick box sits on top of the row rather than in it, so the table
   columns stay lined up while the tutor is choosing. */
.lr-row > summary { position: relative; }
.lr-pickwrap { display: none; }
.lr-card.lr-picking .lr-pickwrap {
    display: inline-flex; align-items: center;
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
}
/* Room at the start of every row for the box */
.lr-card.lr-picking .lr-row > summary { padding-left: 46px; }
/* The clicks belong to the row, so the whole row ticks and unticks */
.lr-pick { width: 16px; height: 16px; margin: 0; accent-color: #F5A623; pointer-events: none; }
/* Edit and Delete would be a second job at once, so they step aside */
.lr-card.lr-picking .lr-row[open] > summary .lr-rowactions { display: none; }
/* A chosen row, in the same amber as the rest of the page */
.lr-card.lr-picking .lr-row.lr-chosen > summary { background: #FFF1D8; }

/* The bar under the list: how many are chosen, and the two buttons */
.lr-pickbar {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 20px 14px; padding: 10px 14px;
    background: #FFF7EA; border: 1px solid #F6E1C0; border-radius: 12px;
}
.lr-pickbar[hidden] { display: none; }
.lr-pickcount { font-size: 13px; font-weight: 800; color: #8A7F72; margin-right: auto; }
.lr-pickdel {
    background: #C5564E; border: 0; border-radius: 20px; color: #fff;
    padding: 7px 16px; font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
}
.lr-pickdel:hover { background: #AE4840; }
.lr-pickdel:disabled { background: #E0D8CE; cursor: default; }
.lr-pickcancel {
    background: none; border: 1px solid #E6E1DA; border-radius: 20px;
    padding: 6px 14px; font-size: 13px; font-weight: 700;
    color: #8A7F72; cursor: pointer; font-family: inherit;
}
.lr-pickcancel:hover { border-color: #C9BFB2; color: #6B6055; }

.lr-editform { margin-top: 12px; padding: 14px; background: #FBF9F5; border-radius: 12px; }
.lr-editlabel {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: #A79C8E; margin: 10px 0 4px;
}
.lr-editlabel:first-child { margin-top: 0; }
.lr-editinput {
    width: 100%; box-sizing: border-box;
    border: 1px solid #E6E1DA; border-radius: 8px; padding: 8px 11px;
    font-size: 14px; font-family: inherit; color: #3A3A3A; background: #fff;
    resize: vertical;
}
.lr-editinput:focus { outline: none; border-color: #F5A623; }
.lr-editactions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.lr-savebtn {
    background: #F5A623; color: #fff; border: 0; border-radius: 8px;
    padding: 8px 18px; font-size: 13.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
}
.lr-savebtn:hover { background: #E0951C; }

/* The add box at the foot of a card */
.lr-addrow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    padding: 13px 20px; border-top: 1px solid #F3EEE7; background: #FCFAF7;
}
.lr-addinput {
    flex: 1 1 180px; min-width: 0;
    border: 1px solid #E6E1DA; border-radius: 8px; padding: 8px 12px;
    font-size: 13.5px; font-family: inherit; color: #3A3A3A; background: #fff;
}
.lr-addinput:focus { outline: none; border-color: #F5A623; }
.lr-addbtn {
    flex: 0 0 auto;
    background: #fff; color: #C9820F; border: 1.5px solid #F5A623; border-radius: 8px;
    padding: 7px 18px; font-size: 13.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
}
.lr-addbtn:hover { background: #FFF7EA; }
.lr-addhint { flex: 0 0 auto; font-size: 12px; color: #A79C8E; }

/* ── Transcript, tutor only ── */
.lr-transcript { margin-top: 8px; font-size: 13px; color: #8A7F72; }
.lr-transcript summary { cursor: pointer; padding: 8px 0; }
.lr-transcript pre {
    white-space: pre-wrap; background: #fff; border: 1px solid #EDE7DF;
    border-radius: 12px; padding: 16px; max-height: 400px; overflow: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7;
}

@media (max-width: 900px) {
    .lr-cols,
    .lr-bottomrow { grid-template-columns: 1fr; gap: 0; }
    .lr-quote { flex-direction: column; gap: 4px; }
    .lr-fixrow { flex-direction: column; gap: 4px; }
    .lr-arrow { display: none; }
}

/* ── Picture cards: the vocabulary card for a young learner ──
   Both layouts are in the page and one is hidden, so switching is instant.
   Cards is the default whenever pictures are on, since that is the point. */
.lr-pgrid { display: none; }
.lr-view-cards .lr-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px; padding: 18px 20px;
}
/* Table parts step aside while the cards are showing */
.lr-view-cards .lr-colhead,
.lr-view-cards .lr-row { display: none; }

.lr-pcard {
    display: flex; flex-direction: column;
    border: 1px solid #F6E1C0; border-radius: 14px;
    background: #fff; overflow: hidden;
}
/* A fixed picture area, so a tall drawing and a wide one leave cards the same */
.lr-pcard-pic {
    height: 118px; background: #FFFCF7;
    border-bottom: 1px solid #F6E1C0;
    display: flex; align-items: center; justify-content: center;
}
.lr-pcard-pic img { max-width: 84%; max-height: 96px; object-fit: contain; display: block; }
/* No picture for this word, so its first letter stands in. Keeps the grid even
   instead of leaving a hole where a drawing should be. */
.lr-pletter {
    width: 56px; height: 56px; border-radius: 16px;
    background: #FBEDD6; color: #C9820F;
    font-size: 26px; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.lr-pcard-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.lr-pcard-word {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: #1a1a1a;
}
.lr-pcard-def { font-size: 13px; line-height: 1.5; color: #6B6055; }
.lr-pcard-eg  { font-size: 13px; line-height: 1.5; color: #0B7A4B; }
/* Meanings in the same row are given the same height by the script in
   _LessonReviewSection, so every example below them starts on the same line. */

/* ── Cards / Table switch, sitting on the card head ── */
.lr-cardhead { position: relative; }
.lr-viewtoggle {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    display: flex; gap: 4px;
    /* The head itself ignores clicks when it cannot be closed, these must not */
    pointer-events: auto;
}
.lr-viewpill {
    font-family: inherit; font-size: 11.5px; font-weight: 800;
    padding: 4px 11px; border: 0; border-radius: 20px; cursor: pointer;
    background: #fff; color: #8A7F72;
}
.lr-viewpill.is-on { background: #F5A623; color: #fff; }

@media (max-width: 560px) {
    .lr-view-cards .lr-pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ===== What the tutor set for this lesson =====
   A row of buttons above the lesson round-up, so the student can start
   their homework or flashcards without going back to My Lessons. */
.lr-todo {
    display: flex; justify-content: center; align-items: center;
    gap: 12px; flex-wrap: wrap;
    margin: 0 0 16px;
}
.lr-todoform { margin: 0; }
.lr-todobtn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; font-family: inherit;
    color: #fff; background: #F5A623;
    border: 0; border-radius: 22px;
    padding: 11px 22px; cursor: pointer; text-decoration: none;
    /* Lifts on hover, so it reads as something you can press */
    transition: background .15s, box-shadow .15s, transform .15s;
}
.lr-todobtn:hover {
    background: #E0951C; color: #fff; text-decoration: none;
    box-shadow: 0 4px 14px rgba(245, 166, 35, .3);
    transform: translateY(-3px);
}
.lr-todobtn:active { transform: translateY(-1px); }
.lr-todobtn svg { width: 16px; height: 16px; display: block; }

/* Someone who has asked for less movement gets none */
@media (prefers-reduced-motion: reduce) {
    .lr-todobtn { transition: background .15s, box-shadow .15s; }
    .lr-todobtn:hover, .lr-todobtn:active { transform: none; }
}

/* The private advice, in the same blue the card used to be. It sits between
   the two amber buttons, so it has to read as a different kind of thing. */
.lr-todobtn--advice { background: #6B7CB8; }
.lr-todobtn--advice:hover {
    background: #5D6DA6; box-shadow: 0 4px 14px rgba(107, 124, 184, .3);
}

/* ── The For you popup. The tiles inside are the card's own, so only the
   shell around them needs anything here ── */
.lr-advicepop .qh-head { background: #6B7CB8; border-bottom: 0; }
.lr-advicepop .qh-head .lr-headicon { background: #fff; color: #5A6BA6; }
.lr-advicepop .qh-head .lr-cardtitle { font-size: 17px; font-weight: 800; color: #fff; }
/* The heading pushes the cross over to the right */
.lr-advicepop .qh-head .lr-headtitle { margin-right: auto; }
.lr-advicepop .qh-close { color: rgba(255, 255, 255, 0.8); }
.lr-advicepop .qh-close:hover { color: #fff; }
/* The tabs and tiles bring their own padding, and the pale background the
   card had, so the popup body adds none of its own */
.lr-advicepop .qh-body { padding: 0; background: #FBFAFF; }

/* The student's lesson round-up, in the green the card used to wear. It sits
   between the two amber buttons, so it has to read as a different kind of thing. */
.lr-todobtn--summary { background: #3FAE7E; }
.lr-todobtn--summary:hover {
    background: #369A6E; box-shadow: 0 4px 14px rgba(63, 174, 126, .3);
}

/* ── The Lesson summary popup. The tiles inside are the card's own, so only the
   shell around them needs anything here ── */
.lr-summarypop .qh-head { background: #3FAE7E; border-bottom: 0; }
.lr-summarypop .qh-head .lr-headicon { background: #fff; color: #2F8B64; }
.lr-summarypop .qh-head .lr-cardtitle { font-size: 17px; font-weight: 800; color: #fff; }
/* The heading pushes the cross over to the right */
.lr-summarypop .qh-head .lr-headtitle { margin-right: auto; }
.lr-summarypop .qh-close { color: rgba(255, 255, 255, 0.8); }
.lr-summarypop .qh-close:hover { color: #fff; }
/* The tiles bring their own padding and the pale background the card had */
.lr-summarypop .qh-body { padding: 0; background: #F7FBF9; }

/* Already finished, so the button steps back and stops competing */
.lr-todobtn--done {
    background: #fff; color: #6B6459; font-weight: 700;
    border: 1px solid #E5DFD5;
}
.lr-todobtn--done:hover {
    background: #FBF8F3; color: #4A443C;
    border-color: #D9D2C6; box-shadow: none;
}

/* The student has actually finished it, so the button goes green.
   Same green as the note page, so the two pages match.

   Two things to keep in mind if you ever edit this:
   1. Named twice on purpose. button-depth.css loads last and shades
      every .lr-todobtn, so a single class here would lose to it.
   2. A solid background-COLOUR, never the "background" shorthand. The
      shorthand puts the colour in background-image, which is the exact
      property that file overwrites, and the green disappears. */
.lr-todobtn.lr-todobtn--complete {
    background-color: #29A870;
    /* The same shade every button on the site gets, sitting over the green */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(0, 0, 0, .07) 100%);
    color: #fff; font-weight: 800;
    border: 1px solid #1F8F5E;
    box-shadow: 0 3px 9px rgba(23, 120, 80, .26), 0 1px 2px rgba(0, 0, 0, .05);
}
.lr-todobtn.lr-todobtn--complete:hover {
    background-color: #1F9163;
    color: #fff; border-color: #1A8355;
    box-shadow: 0 6px 14px rgba(23, 120, 80, .32), 0 1px 2px rgba(0, 0, 0, .05);
}

/* =========================================================
   SOLID CARD HEADS
   ---------------------------------------------------------
   Each card head carries its category colour at full strength
   with white text, matching the note panels on the public
   website. Replaces the faint wash set earlier in this file.

   Sits at the end so it wins on source order. Delete this
   whole block to go back to the wash.
   ========================================================= */
/* The line under the head has to name each category too. Earlier in
   this file each one sets border-color, two classes deep, which was
   still painting the old pale-wash colours along the bottom of the
   solid head. That is where the mustard line under Things to fix
   was coming from. */
.lr-cat-vocabulary    .lr-cardhead--centre,
.lr-cat-grammar       .lr-cardhead--centre,
.lr-cat-phrases       .lr-cardhead--centre,
.lr-cat-pronunciation .lr-cardhead--centre,
.lr-cat-notes         .lr-cardhead--centre,
.lr-fixcard           .lr-cardhead--centre {
    border-bottom: 1px solid rgba(26, 22, 18, .12);
}

/* The shade has to be set on each category, not once on the head.
   Earlier in this file each category sets "background: <colour>" as a
   shorthand, and a shorthand wipes background-image. Those rules are
   two classes deep, so a single class rule here would lose to them
   and the heads would come out flat. */
.lr-cat-vocabulary    .lr-cardhead--centre,
.lr-cat-grammar       .lr-cardhead--centre,
.lr-cat-phrases       .lr-cardhead--centre,
.lr-cat-pronunciation .lr-cardhead--centre,
.lr-cat-notes         .lr-cardhead--centre,
.lr-fixcard           .lr-cardhead--centre {
    /* The same see-through shade the buttons use, for a little depth */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(0, 0, 0, .07) 100%);
}

/* SPARE COLOUR - rose #C2557E, with #EFD3DE for a card outline and
   #FAECF1 / #A33F65 for an icon tile. It is the one strong hue this
   palette does not use, so it is the first place to go for a new
   section. Tried on Vocabulary and on Phrases, both put back. */

.lr-cat-vocabulary    .lr-cardhead--centre { background-color: #F5A623; }
.lr-cat-grammar       .lr-cardhead--centre { background-color: #4A6FB5; }
.lr-cat-phrases       .lr-cardhead--centre { background-color: #8A63C0; }
.lr-cat-pronunciation .lr-cardhead--centre { background-color: #2FA4B8; }
.lr-cat-notes         .lr-cardhead--centre { background-color: #3FA476; }
.lr-fixcard           .lr-cardhead--centre { background-color: #D46A52; }

/* Title and chevron sit straight on the colour.
   Each category is named here on purpose: earlier in this file there
   is a rule per category setting the title to its deep shade, and
   that is three classes deep. Two classes would lose to it however
   far down the file it sat, because specificity beats source order. */
.lr-cat-vocabulary    .lr-cardhead--centre .lr-cardtitle,
.lr-cat-grammar       .lr-cardhead--centre .lr-cardtitle,
.lr-cat-phrases       .lr-cardhead--centre .lr-cardtitle,
.lr-cat-pronunciation .lr-cardhead--centre .lr-cardtitle,
.lr-cat-notes         .lr-cardhead--centre .lr-cardtitle,
.lr-fixcard           .lr-cardhead--centre .lr-cardtitle { color: #fff; }

.lr-cardhead--centre .lr-headchev { color: rgba(255, 255, 255, .85); }

/* The count is a soft white bubble, the icon a solid white tile,
   so both lift off the colour behind them */
.lr-cardhead--centre .lr-count    { background: rgba(255, 255, 255, .26); color: #fff; }
.lr-cardhead--centre .lr-headicon { background: #fff; }

/* The chosen Cards/Table pill is normally amber, which would vanish
   against an amber head, so it becomes white with amber text */
.lr-cardhead .lr-viewpill.is-on { background: #fff; color: #B8740A; }

/* ============================================================
   ONE CARD, FLAT SECTIONS (2026-09-16)
   The same look as the note pages: every section sits flat inside one white
   card, with a pale line between them, a plain heading on the left and row
   bands in the section's own colour. Last in the file on purpose, so it beats
   the coloured heads above. Delete this block to go back to a card per
   section. Things to fix and Tutor's notes keep their own cards below.
   ============================================================ */

.lr-sheet {
    background: #fff;
    border: 1px solid #E7E0D5;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
    padding: 24px;
    margin-bottom: 28px;
}
@media (max-width: 768px) {
    .lr-sheet { padding: 14px; border-radius: 16px; }
}

/* No box round a section any more, just a line between one and the next */
.lr-sheet .lr-card {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
}
.lr-sheet .lr-card ~ .lr-card { margin-top: 26px; }
.lr-sheet .lr-card ~ .lr-card::before {
    content: "";
    display: block;
    width: 100%; height: 1px;
    margin: 0 0 26px;
    background: #EFE8DE;
}

/* Heading: no colour behind it, pushed to the left, with a soft line under */
.lr-sheet .lr-cardhead--centre {
    background-color: transparent;
    background-image: none;
    justify-content: flex-start;
    padding: 4px 2px 12px;
    margin: 0 0 4px;
    border-bottom: 1.5px solid #E7E0D5;
}
.lr-sheet .lr-cat-vocabulary    .lr-cardhead--centre { border-bottom-color: #F6E1C0; }
.lr-sheet .lr-cat-grammar       .lr-cardhead--centre { border-bottom-color: #D4E3F5; }
.lr-sheet .lr-cat-phrases       .lr-cardhead--centre { border-bottom-color: #E3D7F3; }
.lr-sheet .lr-cat-pronunciation .lr-cardhead--centre { border-bottom-color: #CBE6EC; }
.lr-sheet .lr-cat-notes         .lr-cardhead--centre { border-bottom-color: #D3EADF; }

/* Dark title, and the icon keeps its own pale colour instead of going white */
.lr-sheet .lr-cat-vocabulary    .lr-cardhead--centre .lr-cardtitle,
.lr-sheet .lr-cat-grammar       .lr-cardhead--centre .lr-cardtitle,
.lr-sheet .lr-cat-phrases       .lr-cardhead--centre .lr-cardtitle,
.lr-sheet .lr-cat-pronunciation .lr-cardhead--centre .lr-cardtitle,
.lr-sheet .lr-cat-notes         .lr-cardhead--centre .lr-cardtitle { color: #14213D; font-size: 19px; }
.lr-sheet .lr-cat-vocabulary    .lr-cardhead--centre .lr-headicon { background: #FDF3E2; color: #C9820F; }
.lr-sheet .lr-cat-grammar       .lr-cardhead--centre .lr-headicon { background: #EAF2FC; color: #3C79BD; }
.lr-sheet .lr-cat-phrases       .lr-cardhead--centre .lr-headicon { background: #F2ECFB; color: #7F52BC; }
.lr-sheet .lr-cat-pronunciation .lr-cardhead--centre .lr-headicon { background: #E4F4F7; color: #268595; }
.lr-sheet .lr-cat-notes         .lr-cardhead--centre .lr-headicon { background: #E4F4EC; color: #2F7F5C; }
.lr-sheet .lr-cardhead--centre .lr-count {
    background: #F4F0EA; color: #7A7268;
}
.lr-sheet .lr-cardhead--centre .lr-headchev { color: #B5ADA2; }
/* On white the chosen pill can take its colour back */
.lr-sheet .lr-cardhead .lr-viewpill.is-on { background: #F5A623; color: #fff; }

/* Column titles start where their own column's text starts */
.lr-sheet .lr-table .lr-colhead > span { text-align: left; }

/* Two-tone row bands, so no row is plain white. Each section keeps its own
   colour. Hover sits a step stronger again, and is restated last so the band
   rules above cannot beat it. */
.lr-sheet .lr-cat-vocabulary    .lr-row:nth-of-type(odd)  > summary { background: #FCF3E3; }
.lr-sheet .lr-cat-vocabulary    .lr-row:nth-of-type(even) > summary { background: #FEFCF8; }
.lr-sheet .lr-cat-phrases       .lr-row:nth-of-type(odd)  > summary { background: #F5F0FC; }
.lr-sheet .lr-cat-phrases       .lr-row:nth-of-type(even) > summary { background: #FDFCFE; }
.lr-sheet .lr-cat-grammar       .lr-row:nth-of-type(odd)  > summary { background: #EEF3FA; }
.lr-sheet .lr-cat-grammar       .lr-row:nth-of-type(even) > summary { background: #FBFCFE; }
.lr-sheet .lr-cat-pronunciation .lr-row:nth-of-type(odd)  > summary { background: #EAF5F7; }
.lr-sheet .lr-cat-pronunciation .lr-row:nth-of-type(even) > summary { background: #FAFDFD; }
.lr-sheet .lr-cat-notes         .lr-row:nth-of-type(odd)  > summary { background: #EDF6F1; }
.lr-sheet .lr-cat-notes         .lr-row:nth-of-type(even) > summary { background: #FBFDFC; }

.lr-sheet .lr-cat-vocabulary    .lr-row > summary:hover,
.lr-sheet .lr-cat-vocabulary    .lr-row[open] > summary { background: #F8E9CF; }
.lr-sheet .lr-cat-phrases       .lr-row > summary:hover,
.lr-sheet .lr-cat-phrases       .lr-row[open] > summary { background: #ECE3FA; }
.lr-sheet .lr-cat-grammar       .lr-row > summary:hover,
.lr-sheet .lr-cat-grammar       .lr-row[open] > summary { background: #E3EBF8; }
.lr-sheet .lr-cat-pronunciation .lr-row > summary:hover,
.lr-sheet .lr-cat-pronunciation .lr-row[open] > summary { background: #DCEFF3; }
.lr-sheet .lr-cat-notes         .lr-row > summary:hover,
.lr-sheet .lr-cat-notes         .lr-row[open] > summary { background: #DFEFE7; }

/* The same width as the note pages, so a vocabulary row is the same size on
   both. OLD: 1180px, set near the top of this file. */
.lr-page { max-width: 1128px; }

/* The header sits a little higher, and lines up with the section content
   inside the card below it (the card has 24px of its own padding).
   OLD: .lr-head margin-top 30px, no side padding. */
.lr-head { margin-top: 8px; padding: 0 24px; }

/* The other person's circle beside the title: the student for a tutor, the
   tutor for a student. Same size and shape as the note pages. */
.lr-headid { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.lr-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; line-height: 1;
    flex-shrink: 0; margin-top: 3px; text-transform: uppercase;
}

/* Things to fix and the tutor's notes: the same two colours, quieter. The head
   takes the pale tint and the title the deep shade, instead of white on solid.
   OLD: solid #D46A52 and #3FA476 with white text. */
.lr-fixcard   .lr-cardhead--centre { background-color: #FBEAE4; background-image: none; }
.lr-cat-notes .lr-cardhead--centre { background-color: #E8F4EE; background-image: none; }
.lr-fixcard   .lr-cardhead--centre .lr-cardtitle { color: #A84C33; }
.lr-cat-notes .lr-cardhead--centre .lr-cardtitle { color: #2F7F5C; }
.lr-fixcard   .lr-cardhead--centre .lr-count { background: rgba(168, 76, 51, .12); color: #A84C33; }
.lr-cat-notes .lr-cardhead--centre .lr-count { background: rgba(47, 127, 92, .12); color: #2F7F5C; }
.lr-fixcard   .lr-cardhead--centre .lr-headchev { color: rgba(168, 76, 51, .6); }
.lr-cat-notes .lr-cardhead--centre .lr-headchev { color: rgba(47, 127, 92, .6); }
.lr-fixcard   .lr-cardhead--centre .lr-headicon { background: #fff; color: #A84C33; }
.lr-cat-notes .lr-cardhead--centre .lr-headicon { background: #fff; color: #2F7F5C; }

/* Closed, these two are just a label, so they sit slimmer than a section head.
   OLD: the same 12px 20px head and 3px outline as a section card. */
.lr-fixcard, .lr-toprow .lr-cat-notes { border-width: 1.5px; }
.lr-fixcard   .lr-cardhead--centre,
.lr-toprow .lr-cat-notes .lr-cardhead--centre { padding: 7px 16px; }
.lr-fixcard   .lr-cardhead--centre .lr-headicon,
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-headicon {
    width: 24px; height: 24px; border-radius: 8px;
}
.lr-fixcard   .lr-cardhead--centre .lr-headicon svg,
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-headicon svg { width: 13px; height: 13px; }
.lr-fixcard   .lr-cardhead--centre .lr-cardtitle,
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-cardtitle { font-size: 15px; }

/* Tutor's notes is not a kind of language like the sections are, it is the
   tutor talking, so it does not take one of the section colours. It now takes
   the same soft indigo as the Lesson summary button beside it, so the two read
   as a pair. The warm grey before was too close to the cream page, so the bar
   looked washed out.
   OLD: pale green head #E8F4EE with a #2F7F5C title, and a #D3EADF outline.
   OLD: warm grey head #F2EFEA, title #5F5A52, outline #E4DFD7, icon #7A7268,
        count pill rgba(95, 90, 82, .12), chevron rgba(95, 90, 82, .55),
        row line #EDE8E1. */
.lr-toprow .lr-cat-notes { border-color: #D8DEEE; }
.lr-toprow .lr-cat-notes .lr-cardhead--centre { background-color: #EEF1F8; }
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-cardtitle { color: #4A5789; }
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-count { background: rgba(74, 87, 137, .12); color: #4A5789; }
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-headchev { color: rgba(74, 87, 137, .55); }
.lr-toprow .lr-cat-notes .lr-cardhead--centre .lr-headicon { background: #fff; color: #6B7CB8; }
/* The rows inside follow the same soft indigo */
.lr-toprow .lr-cat-notes .lr-row { border-top-color: #E6EAF4; }

/* Things to fix takes the same kind of outline as Tutor's notes beside it: a
   clear step darker than its own fill, so the bar has a visible edge. The pale
   one it had was so close to the fill that the card looked to have no border.
   This page only, so the student page keeps the outline it has.
   OLD: #F2DAD2, from the pale outline every section card uses. */
.lr-toprow .lr-fixcard { border-color: #EED5CB; }

/* NO STUDENT CARD (2026-09-16): this page only. The shared card above the tabs
   is hidden, so the page starts at the tabs and then the title. The student is
   named by the circle beside the title instead. Every other tab keeps the full
   card, because this rule only works inside .lr-studentstrip, which only the
   Lesson Review page has. Delete this rule to get the card back. */
.lr-studentstrip .sd-header { display: none !important; }

/* The top row is a flex line now (2026-09-16), so the Lesson summary button can
   sit between the two cards. The cards share the space that is left.
   OLD: two equal grid columns from .lr-bottomrow. */
.lr-toprow {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.lr-toprow.lr-bottomrow { display: flex; grid-template-columns: none; }
.lr-toprow > .lr-card { flex: 1 1 260px; min-width: 0; margin-bottom: 0; }

/* Small, and the same height as the slim cards either side of it */
.lr-summarybtn {
    flex: 0 0 auto;
    padding: 8px 16px; font-size: 13px; border-radius: 20px;
}
.lr-summarybtn svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
    .lr-summarybtn { order: 3; }
}

/* The same height as the slim cards either side, so the three sit on one line */
.lr-summarybtn { min-height: 42px; }

/* The student's Lesson summary takes the same blue as the tutor's, so the
   button reads the same on both sides. Its popup is still green inside.
   OLD: the green #3FAE7E from .lr-todobtn--summary. */
.lr-summarybtn.lr-todobtn--summary { background: #6B7CB8; }
.lr-summarybtn.lr-todobtn--summary:hover {
    background: #5D6DA6; box-shadow: 0 4px 14px rgba(107, 124, 184, .3);
}

/* Five cards a row, the same as the note page. The 20px the grid had at the
   sides was for the old card edge; flat inside the sheet it only cost a column.
   OLD: padding: 18px 20px. */
.lr-sheet .lr-view-cards .lr-pgrid { padding: 14px 2px 2px; }
@media (max-width: 768px) {
    .lr-sheet .lr-view-cards .lr-pgrid { padding: 12px 0 2px; }
}