/* Site-wide layout on top of brand.css's color/font tokens. */

* {
    box-sizing: border-box;
}

.navbar-menu a,
.footer-links a {
    text-decoration: none;
    color: inherit;
}

a {
    color: var(--color-primary);
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text-on-dark);
}

.btn-accent:hover {
    opacity: 0.9;
}

.btn-outline {
    background: var(--color-card-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-surface);
}

.link-arrow {
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.link-remove {
    color: var(--color-rose-wine);
    font-size: 0.85rem;
    display: inline-block;
    margin: 0.5rem 0 1rem;
}

/* ---------- Navbar ---------- */
/* Two rows: a light logo row (logo centered, sized to ~40-50% of the
   header's total height) sitting above a colored menu band — keeps the
   header visually distinct from the champagne page background instead
   of blending into it. */

/* The whole header is sticky, offset upwards by the logo row's height:
   the logo scrolls away and the menu band stays pinned to the top, with
   a soft shadow once it's stuck (.is-stuck, set by base.html, which also
   keeps --nav-height = the band's height). --logo-height sizes the logo
   and that offset together. */
.site-header {
    --logo-height: 7rem; /* the wide logo (emblem + name side by side) */
    position: sticky;
    top: calc(-1 * var(--logo-height));
    z-index: 50;
    /* Frosted glass: the pinned band (translucent once stuck, below) shows
       the page scrolling under it, blurred. Each row paints its own
       background, so the header itself has none. */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Stays still while the page under it changes (see "Page transitions"). */
    view-transition-name: site-header;
}

.navbar-logo-row {
    display: flex;
    justify-content: center;
    padding: 0 2rem; /* no top or bottom padding — logo sits flush in its row */
    background: var(--color-header-bg); /* greyish pastel, distinct from the page background */
}

/* Dark mode: the logo's black lettering and pine "S" would vanish on the
   dark header, so they take the light text and sage colours. */
[data-theme="dark"] .navbar-logo-svg :is(text, .ts-logo-8) {
    fill: var(--color-text);
}

[data-theme="dark"] .navbar-logo-svg .ts-logo-10 {
    fill: var(--color-pine-teal);
}

/* The inline SVG logo (templates/core/_logo.html); "TAALSAGA" is Cinzel. */
.navbar-logo-svg {
    height: var(--logo-height);
    width: auto;
    display: block;
    padding: 0.6rem 0;
    box-sizing: border-box;
}

.navbar-menu-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%; /* full-bleed band, not capped to the 1200px content width */
    padding: 0.6rem 2rem;
    background: var(--color-navbar-bg);
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-stuck .navbar-menu-row {
    background: color-mix(in srgb, var(--color-navbar-bg) 86%, transparent);
    box-shadow: 0 6px 18px rgba(55, 86, 68, 0.12);
}

.navbar-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

.navbar-menu a {
    color: var(--color-pine-teal); /* darker + bold for contrast against the sage band */
    font-weight: 700;
}

.navbar-menu > li {
    position: relative;
}

.navbar-account-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
}

.navbar-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.navbar-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Dropdowns fade and slide in. On the way out they wait a moment first,
   so a pointer slipping off the menu on its way to an item doesn't snap
   it shut. --menu-shift is the slide (0 for "reduce motion"). */
.navbar-menu .dropdown {
    position: absolute;
    top: calc(100% + 0.6rem); /* level with the bottom of the menu band */
    left: -0.75rem;
    min-width: 200px;
    background: var(--color-background);
    border: 1px solid var(--color-surface);
    border-radius: 14px;
    padding: 0.4rem;
    list-style: none;
    margin: 0;
    z-index: 10;
    box-shadow: 0 14px 30px rgba(55, 86, 68, 0.14);
    visibility: hidden;
    opacity: 0;
    translate: 0 var(--menu-shift, -0.4rem);
    transition: opacity 0.18s ease 0.12s, translate 0.18s ease 0.12s, visibility 0s linear 0.3s;
}

/* Bridges the gap between the menu item and its dropdown, so the pointer
   can cross it without leaving :hover. */
.navbar-menu .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.8rem;
}

.navbar-menu .has-dropdown:hover .dropdown,
.navbar-menu .has-dropdown:focus-within .dropdown {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition-delay: 0s;
}

.navbar-menu .dropdown li {
    padding: 0;
}

/* The whole row is the link, not just its text. */
.navbar-menu .dropdown a,
.navbar-menu .dropdown .link-button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 9px;
    color: var(--color-text);
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    white-space: nowrap; /* the dropdown widens to fit instead */
    transition: background-color 0.15s ease;
}

/* The account menu, last in the row, opens leftwards so it can't run off
   the right edge. */
.navbar-menu > li:last-child .dropdown {
    left: auto;
    right: -0.75rem;
}

.navbar-menu .dropdown a:hover,
.navbar-menu .dropdown a:focus-visible,
.navbar-menu .dropdown .link-button:hover,
.navbar-menu .dropdown .link-button:focus-visible {
    background: var(--color-navbar-bg);
}

.navbar-menu .dropdown li.dropdown-divider {
    padding: 0;
    margin: 0.35rem 0.75rem;
    border-top: 1px solid var(--color-surface);
}

/* Hamburger + dropdown carets: both hidden on desktop (below), where the
   full menu is always visible and dropdowns open on hover/focus. */

.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.navbar-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--color-pine-teal);
    transition: translate 0.25s ease, rotate 0.25s ease, opacity 0.2s ease;
}

/* Open: the three bars fold into an ✕ (bars are 2px + 5px gap apart). */
.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(1) {
    translate: 0 7px;
    rotate: 45deg;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(3) {
    translate: 0 -7px;
    rotate: -45deg;
}

.dropdown-caret {
    display: none;
    background: none;
    border: none;
    color: inherit;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

.badge {
    font-size: 0.65rem;
    background: var(--color-background);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.lang-toggle {
    background: var(--color-background);
    color: var(--color-text);
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    white-space: nowrap; /* "БГ / EN" broke onto two lines in a crowded menu */
}

/* БГ and EN are links to this page in each language; the current one is
   underlined and isn't a link-looking target. */
.lang-toggle a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
}

.lang-toggle a:hover,
.lang-toggle a:focus-visible {
    opacity: 1;
}

.lang-toggle a[aria-current="true"] {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* The buttons at the end of the menu band: dark mode, then БГ / EN. */
.navbar-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

/* ☾ in light mode, ☀ in dark (base.html switches data-theme). */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-text);
    cursor: pointer;
}

.theme-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
}

.theme-toggle-moon {
    fill: currentColor;
}

.theme-toggle-sun {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

[data-theme="dark"] .theme-toggle-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle-sun {
    display: block;
}

@media (pointer: coarse) {
    .theme-toggle {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ---------- Hero ---------- */

.hero {
    display: grid;
    /* Image column gets the bigger share of the width. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 3rem;
    width: 100%;
    /* No right padding/max-width here — the image column runs flush to
       the viewport's right edge. Left padding keeps the copy lined up
       with the rest of the site's centered 1200px content. */
    padding: 3rem 0 3rem max(2rem, calc((100vw - 1200px) / 2 + 2rem));
}

.hero-copy {
    max-width: 480px;
}

.hero-copy h1 {
    font-size: 2.75rem;
    line-height: 1.15;
    margin: 0 0 1.5rem;
}

.hero-copy em {
    color: var(--color-accent);
    font-style: normal;
}

.hero-image-wrap {
    position: relative;
    width: 100%;
}

.hero-image {
    position: relative;
    z-index: 1;
    aspect-ratio: 14 / 9;
    width: 100%;
    /* Traced from the reference screenshot: one continuous sweeping curve
       down the left edge, square/flush on the right and bottom-right.
       A smooth bezier path (defined in home.html) instead of the earlier
       straight-line polygon, which looked faceted/"bitten into". */
    clip-path: url(#hero-shape);
    overflow: hidden;
}

/* Photo slideshow (hero_slideshow.js). The photos sit on top of each
   other; the active one fades in and slowly zooms ("Ken Burns"), the one
   leaving keeps its zoom until it has faded out. The zoom freezes with
   the rest of the show when it's paused. Without JavaScript the first
   photo just stands still. */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform-origin: 60% 45%;
    transition: opacity 1.2s ease;
}

.hero-slide:nth-child(even) {
    transform-origin: 35% 60%;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide.is-zooming {
    animation: hero-zoom 8s ease-out forwards;
}

[data-hero-slideshow].is-paused .hero-slide {
    animation-play-state: paused;
}

@keyframes hero-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.07);
    }
}

/* One dot per photo — the active one is a pill that fills up until the
   next photo (its animationend is the slideshow's timer) — and a
   pause/play button. */
.hero-slides-controls {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem 0.2rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 55%, transparent);
    backdrop-filter: blur(6px);
}

.hero-slides-controls[hidden] {
    /* author display: flex would beat the browser's [hidden] rule */
    display: none;
}

.hero-dot {
    position: relative;
    width: 18px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: width 0.35s ease;
}

.hero-dot.is-active {
    width: 42px;
}

.hero-dot::before,
.hero-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    height: 8px;
    margin-top: -4px;
    border-radius: 999px;
}

.hero-dot::before {
    background: color-mix(in srgb, var(--color-text-on-dark) 45%, transparent);
}

.hero-dot:hover::before {
    background: color-mix(in srgb, var(--color-text-on-dark) 75%, transparent);
}

.hero-dot::after {
    background: var(--color-text-on-dark);
    clip-path: inset(0 100% 0 0 round 999px);
}

.hero-dot.is-active::after {
    animation: hero-dot-fill 6s linear forwards;
}

[data-hero-slideshow].is-paused .hero-dot.is-active::after {
    animation-play-state: paused;
}

[data-hero-slideshow].is-stopped .hero-dot.is-active::after {
    animation: none;
    clip-path: inset(0 0 0 0 round 999px);
}

@keyframes hero-dot-fill {
    to {
        clip-path: inset(0 0 0 0 round 999px);
    }
}

.hero-toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: 0.2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-text-on-dark);
    color: var(--color-primary);
    cursor: pointer;
}

.hero-toggle svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.hero-toggle-play,
[data-hero-slideshow].is-stopped .hero-toggle-pause {
    display: none;
}

[data-hero-slideshow].is-stopped .hero-toggle-play {
    display: block;
}

.hero-dot:focus-visible,
.hero-toggle:focus-visible {
    outline: 2px solid var(--color-text-on-dark);
    outline-offset: 1px;
    border-radius: 999px;
}

/* "Reduce motion": no zoom, a quicker fade — and the show starts stopped
   (hero_slideshow.js), so photos only change when the visitor asks. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: opacity 0.5s ease;
    }

    .hero-slide.is-zooming {
        animation: none;
    }

    .hero-dot {
        transition: none;
    }
}

/* Pink circle centred on the photo's curved edge — roughly half of it
   tucks behind the photo, half peeks out, like the reference mockup.
   The tag text sits in the visible half. */
.hero-bubble {
    position: absolute;
    top: -6%;
    left: 9%;
    width: 40%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface);
    opacity: 0.75;
    z-index: 0;
}

/* Centred on the middle of the bubble's visible part (left of the photo's
   curve). The wrap keeps the photo's 14:9 shape, so these percentages
   stay on the same spot of the bubble at every screen width. */
.hero-tag {
    position: absolute;
    top: 20%;
    left: 19.5%;
    width: 16%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: var(--font-handwritten);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--color-primary);
}

/* Narrow laptops: the bubble shrinks with the screen but the text wouldn't,
   so it ran past the circle's edge. (Phones put it under the photo.) */
@media (min-width: 769px) and (max-width: 1200px) {
    .hero-tag {
        font-size: 1.15rem;
    }
}

@media (min-width: 769px) and (max-width: 960px) {
    .hero-tag {
        font-size: 0.9rem;
        width: 15%;
    }
}

/* ---------- Courses ---------- */

.courses-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.course-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.course-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, scale 0.12s ease;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(55, 86, 68, 0.16);
}

.course-card-image {
    aspect-ratio: 4 / 3;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
}

.course-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    /* The card's own box-shadow now carries the edge — a border here
       just doubled up on it. */
    border-radius: 0 0 18px 18px;
    font-family: var(--font-heading);
}

.course-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-on-dark);
}

/* ---------- About (kои сме ние) ---------- */

.about-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 2rem 3rem;
    text-align: center;
}

.about-content h2 {
    margin: 0 0 1rem;
}

.about-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text);
}

/* ---------- Testimonials ---------- */

.testimonials-section {
    background: var(--color-muted);
    padding: 3.5rem 2rem; /* a touch more breathing room around the cards */
}

/* No reviews yet: just the heading, centred in the band. */
.testimonials-section--empty .testimonials-inner {
    justify-content: center;
    text-align: center;
}

/* Dark mode: the sage band would be a light stripe under light text —
   a deep olive keeps the same family. */
[data-theme="dark"] .testimonials-section {
    background: color-mix(in srgb, var(--color-dry-sage) 16%, var(--color-background));
}

.testimonials-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonials-heading {
    flex: 0 0 auto;
}

.testimonials-heading h2 {
    margin: 0;
    /* Pine Teal instead of the light on-dark text — reads better against
       the mid-tone sage band, and the palette needs the dark green
       showing up in more places than just body text. */
    color: var(--color-primary);
}

.testimonials-list {
    display: flex;
    flex: 1 1 auto;
    gap: 2rem;
}

.testimonial-item {
    flex: 1;
    padding-left: 2rem;
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    display: flex;
    flex-direction: column;
    /* A fixed floor instead of sizing purely to content — otherwise a
       long review makes the whole section taller/shorter depending on
       which pair of reviews happens to be showing (see .testimonial-quote's
       line-clamp below, which handles the "too long" side of the same
       problem). */
    min-height: 11rem;
}

/* The rule above sets display:flex unconditionally, which — being an
   author style — overrides the browser's own built-in "[hidden] {
   display: none }" rule (author CSS always wins over user-agent
   defaults). Without this, every review the JS marks [hidden] would
   still render, all at once, ignoring the one-at-a-time paging. */
.testimonial-item[hidden] {
    display: none;
}

/* Which item is "first" shifts as the JS pages through reviews, so this
   is a class the script maintains rather than a :first-child selector —
   :first-child would always mean the first item in the DOM, not the
   first one currently visible. */
.testimonial-item--first {
    padding-left: 0;
    border-left: none;
}

.testimonials-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.testimonials-nav .carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-primary);
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
}

.testimonials-nav .carousel-arrow:hover {
    background: var(--color-card-bg);
}

.testimonial-stars {
    color: var(--color-accent);
    letter-spacing: 0.15rem;
}

.testimonial-quote {
    margin: 0.5rem 0;
    line-height: 1.5;
    /* Clamp long quotes to 4 lines with an ellipsis instead of letting
       them grow the card — pairs with .testimonial-item's min-height so
       the section's height stays the same no matter which reviews are
       currently showing. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-author {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin: 0;
}

.testimonial-author-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto; /* sits at the card's bottom whether the quote is short or clamped to 4 lines */
    padding-top: 0.5rem;
}

.testimonial-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ---------- Newsletter ---------- */

.newsletter-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem 0;
    text-align: center;
    border-top: 3px solid var(--color-surface); /* another divider, same treatment as the footer's */
}

.newsletter-content h2 {
    margin: 0 0 0.75rem;
}

.newsletter-content p {
    margin: 0 0 1.5rem;
    color: var(--color-text);
}

.newsletter-form {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.newsletter-input {
    flex: 1 1 260px;
    max-width: 320px;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--color-surface);
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
}

.newsletter-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* After subscribing (NewsletterSubscribeView) the form gives way to this */
.newsletter-content .newsletter-thanks {
    display: inline-block;
    margin: 0;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    background: rgba(182, 181, 127, 0.2); /* as .site-message--success */
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.newsletter-content .newsletter-error {
    margin: 0.75rem 0 0;
    color: var(--color-rose-wine);
    font-size: 0.9rem;
}

.newsletter-content .newsletter-note {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text);
}

/* ---------- Courses page ---------- */

.courses-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.courses-hero-copy .kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-family: var(--font-heading);
    color: var(--color-muted);
    margin-bottom: 0.75rem;
}

.courses-hero-copy h1,
.courses-hero-copy h2 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.courses-hero-copy h1 em,
.courses-hero-copy h2 em {
    color: var(--color-accent);
    font-style: italic;
}

.courses-hero-copy p {
    margin: 0;
    color: var(--color-text);
}

.courses-hero-visual {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.courses-hero-note {
    flex: 0 0 auto;
    margin-top: 1rem;
    font-family: var(--font-handwritten);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    line-height: 1.3;
}

.courses-hero-image-wrap {
    position: relative;
    flex: 1 1 auto;
}

.courses-hero-blob {
    position: absolute;
    top: -1.25rem;
    left: -1.5rem;
    width: 32%;
    height: 32%;
    background: var(--color-muted);
    opacity: 0.6;
    /* A leaf, not a circle: two opposite corners square, two rounded
       fully — the classic pure-CSS leaf shape — then tilted. */
    border-radius: 0 100% 0 100%;
    transform: rotate(-8deg);
    z-index: 0;
}

.courses-hero-image {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    /* Organic blob, not a plain rounded rectangle. */
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
}

.courses-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Per-language pages: theme overrides ---------- */
/* Each dedicated language page (courses:language) is wrapped in one of
   these classes. They only remap existing brand custom properties
   (brand.css) — no new colors — so every rule that already reads
   var(--color-accent/muted/primary/...) (kicker, blob, hero note,
   badge, price) picks up the language's tint automatically. Scoped to
   a div inside <main>, so the shared header/footer are unaffected. */

.lang-theme-danish {
    --color-accent: var(--color-rose-wine);
    --color-primary: var(--color-rose-wine);
    --color-muted: var(--color-cotton-rose);
}

.lang-theme-swedish {
    --color-accent: var(--color-dry-sage);
    --color-primary: var(--color-pine-teal);
    --color-muted: var(--color-dry-sage);
}

.lang-theme-dutch {
    --color-accent: var(--color-pine-teal);
    --color-primary: var(--color-pine-teal);
    --color-muted: var(--color-cotton-rose);
}

/* Dark mode: cotton rose turns dark (it's a background colour there), but
   the Danish and Dutch pages also use it as their muted text and leaf —
   a dusty rose keeps those readable. */
[data-theme="dark"] :is(.lang-theme-danish, .lang-theme-dutch) {
    --color-muted: #C98A98;
}

/* Fallback for a language slug without a LANGUAGE_CONTENT entry yet —
   just the site defaults, no tint. */
.lang-theme-default {
    --color-accent: var(--color-accent);
    --color-primary: var(--color-primary);
    --color-muted: var(--color-muted);
}

.course-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.course-card-title {
    font-weight: 700;
}

.course-card-levels {
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--color-muted);
}

.upcoming-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
}

/* A language page with nothing advertised right now */
.courses-none {
    max-width: 640px;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: var(--color-card-bg);
    color: var(--color-text);
}

.courses-none a {
    color: var(--color-accent);
    font-weight: 600;
}

.upcoming-description {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.upcoming-price {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-accent);
}

/* ---------- Upcoming courses (rich cards + "Coming soon" hero band) ---------- */

/* Full-bleed pale-green wash, same reasoning/token as the resources hub —
   a distinct section of the page, not just another block on the peach
   background everything else sits on. */
.upcoming-hero {
    background: var(--color-mint-mist);
    padding: 1.75rem 0;
    margin-bottom: 2.5rem;
}

/* Reuses .courses-hero's copy/visual grid + blob-image treatment, but
   scaled well down from the page's main hero — this is a small "by the
   way, here's what's coming" intro line for the card grid below it, not
   a second full-size hero competing with the real one above it. */
.upcoming-hero-inner {
    grid-template-columns: 1fr auto;
    padding: 0 2rem 1.5rem;
    gap: 1.5rem;
}

.upcoming-hero-inner .courses-hero-copy h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.upcoming-hero-inner .courses-hero-copy .kicker {
    margin-bottom: 0.4rem;
}

.upcoming-hero-inner .courses-hero-image-wrap {
    flex: 0 0 auto;
    width: 160px;
}

.upcoming-hero-inner .courses-hero-note {
    font-size: 1.1rem;
    margin-top: 0;
}

/* No self-centering here on purpose — always placed inside .upcoming-section,
   which already provides the max-width/margin/padding (in course_list.html's
   .upcoming-hero band as much as in language_detail.html's plain section). */
/* minmax(_, 1fr) with auto-fit would let a lone card (e.g. a language
   page with only one upcoming course) stretch across the entire row —
   capping the track's max width instead of using 1fr keeps every card a
   sane size no matter how many share the row. */
.upcoming-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
    gap: 1.5rem;
}

.upcoming-course-card {
    background: var(--color-card-bg);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
    display: flex;
    flex-direction: column;
}

.upcoming-course-image {
    aspect-ratio: 4 / 3;
}

.upcoming-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upcoming-course-body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.upcoming-course-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.upcoming-course-heading h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    color: var(--color-primary);
}

.upcoming-course-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upcoming-course-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* The language stickers (_language_icon.html) are a whole bubble of their
   own, so they replace the plain circle instead of sitting inside it. */
.upcoming-course-icon:has(.language-sticker) {
    width: 3.25rem;
    height: 3.25rem;
    background: none;
}

.language-sticker {
    display: block;
    width: 100%;
    height: 100%;
}

.upcoming-course-start {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-surface);
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.upcoming-course-start svg {
    flex-shrink: 0;
}

.upcoming-course-start strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
}

.upcoming-course-notify {
    text-align: center;
    margin-top: 0.25rem;
}

.courses-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 1.5rem 2rem;
    background: var(--color-background);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.courses-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
}

.courses-feature:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--color-surface);
}

.courses-feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent);
}

.courses-feature-label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

/* ---------- Site-wide messages (django.contrib.messages) ---------- */

.site-messages {
    list-style: none;
    max-width: 1200px;
    margin: 1.5rem auto 0;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-message {
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.9rem;
}

.site-message--success {
    background: rgba(182, 181, 127, 0.2);
}

.site-message--error {
    background: rgba(207, 75, 115, 0.12);
    color: var(--color-rose-wine);
}

/* ---------- Auth pages (login / register / password reset) ---------- */

.auth-page {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
    display: flex;
    justify-content: center;
}

.auth-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    background: var(--color-card-bg);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 24px rgba(55, 86, 68, 0.1);
    text-align: center;
}

.auth-card .kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-family: var(--font-heading);
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}

.auth-card h1 {
    margin: 0 0 1.75rem;
    font-size: 2rem;
}

.auth-card p {
    color: var(--color-text);
}

.profile-avatar-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.profile-avatar-preview img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
}

.profile-avatar-placeholder {
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
}

.auth-form {
    text-align: left;
}

.form-field {
    margin-bottom: 1.1rem;
}

/* :first-of-type only, not every label in the field — an existing
   ImageField/FileField renders "Currently: <a>...</a> <input
   type=checkbox> <label>Clear</label>" right after our own label, and
   this used to force THAT label onto its own line too, making the
   clear-checkbox look like a stray, disconnected, unlabeled box. */
.form-field label:first-of-type {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

/* Excludes the same clear-checkbox — it doesn't want the full-width,
   padded, bordered treatment meant for text/textarea/select inputs.
   <select> is included here too — without it, a dropdown (e.g. "Вид
   ресурс"/"Вид упражнение") falls back to the bare, unstyled native
   control and looks jarringly out of place next to its styled siblings. */
.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-surface);
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
}

.form-field input[type="checkbox"] {
    margin-right: 0.4rem;
}

/* Tick boxes, site-wide: a rounded box in the brand colours with a drawn
   check mark (a clip-path shape, so it can take the colour tokens)
   instead of the browser's own. The pill toggles (.staff-access-check)
   hide theirs and style the label instead. */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    display: inline-grid;
    place-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    border: 1.5px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-card-bg);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    background: var(--color-text-on-dark);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
}

input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--color-accent);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: default;
}

.form-field textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Tick boxes (_form_fields.html): box first, label text beside it —
   overrides the block/uppercase-ish treatment that .form-field's first
   label gets for text inputs. */
.form-field--checkbox .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
}

.form-field--checkbox .form-check input[type="checkbox"] {
    margin: 0.1rem 0 0;
}

.form-field--checkbox .form-check a {
    color: var(--color-accent);
}

.form-privacy-note {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 0 0 1rem;
}

.form-privacy-note a {
    color: var(--color-accent);
}

/* Contact page: the phone number under the form. */
.contact-phone {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-surface);
}

.contact-phone p {
    margin: 0;
}

.contact-phone-number {
    display: inline-block;
    margin: 0.5rem 0 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.contact-phone-number:hover,
.contact-phone-number:focus-visible {
    text-decoration: underline;
}

.auth-card .contact-phone-hours {
    font-size: 0.9rem;
    color: var(--color-muted);
}

.auth-card .contact-after-hours {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.contact-after-hours a {
    color: var(--color-accent);
    font-weight: 700;
}

.btn-danger {
    background-color: var(--color-rose-wine);
    color: var(--color-text-on-dark);
}

.btn-danger:hover {
    opacity: 0.9;
}

.account-delete-list {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.form-field small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.form-field .errorlist {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    color: var(--color-rose-wine);
    font-size: 0.8rem;
}

.auth-card .btn {
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
}

.auth-links {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.auth-links p {
    margin: 0.4rem 0;
}

.auth-links a {
    font-weight: 700;
}

/* The three language stickers scattered around the login card (the same
   ones as on the course cards) — purely decorative. */

.auth-mascots {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.auth-mascot {
    position: absolute;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    filter: drop-shadow(0 4px 10px rgba(55, 86, 68, 0.12));
}

.auth-mascot--danish {
    top: 4%;
    left: 6%;
    transform: rotate(-8deg);
}

.auth-mascot--swedish {
    top: 58%;
    right: 4%;
    transform: rotate(6deg);
}

.auth-mascot--dutch {
    bottom: 2%;
    left: 20%;
    transform: rotate(4deg);
}

/* ---------- Staff: student course-access pages ---------- */

.staff-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.staff-student-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.staff-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-card-bg);
    border-radius: 14px;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.staff-student-email {
    font-weight: 700;
    color: var(--color-primary);
}

.staff-student-avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.staff-student-count {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.staff-saved-note {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.85rem;
}

.staff-access-form {
    margin-top: 1.5rem;
}

.staff-access-intro {
    max-width: 640px;
    margin: 0.5rem 0 0;
    color: var(--color-text);
    font-size: 0.95rem;
}

/* The search box above the student pills (resource form) gets its own row */
.staff-access-search {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
}

.staff-access-no-match {
    margin: 0.4rem 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.staff-access-group {
    border: 1px solid var(--color-surface);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
}

.staff-access-group legend {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    padding: 0 0.5rem;
}

/* Same fix for the student rows and pills show_more.js collapses. */
[data-show-more-item][hidden] {
    display: none;
}

/* "Покажи всички (N)" under a collapsed student list (show_more.js). */
.show-more-toggle {
    display: block;
    margin-top: 0.6rem;
    padding: 0.25rem 0;
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
}

.show-more-toggle:hover,
.show-more-toggle:focus-visible {
    text-decoration: underline;
}

.show-more-toggle[hidden] {
    display: none;
}

.staff-access-check[hidden] {
    /* Author CSS setting display unconditionally (below, and in the
       mobile override further down) always beats the browser's own
       "[hidden] { display: none }" rule — without this, the search box's
       JS toggling the hidden attribute would have no visible effect.
       Same bug, same fix, as .testimonial-item[hidden] elsewhere. */
    display: none;
}

/* Pill toggles for picking levels, categories and students (student
   access page, exercise and material forms). The real checkbox stays in
   the form — focusable and submitted — but visually hidden; the pill
   shows its state: outlined with an empty circle when off, filled with a
   ✓ when on. */
.staff-access-check {
    display: inline-flex;
    margin: 0.3rem 0.45rem 0.3rem 0;
    cursor: pointer;
}

.staff-access-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.staff-access-check > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem 0.4rem 0.5rem;
    border: 1px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-card-bg);
    color: var(--color-primary);
    font-size: 0.92rem;
    line-height: 1.25;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* the circle… */
.staff-access-check > span::before {
    content: "";
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid var(--color-muted);
    border-radius: 50%;
    background: var(--color-card-bg);
    box-sizing: border-box;
}

/* …and the check mark drawn into it (same shape as the tick boxes) */
.staff-access-check > span::after {
    content: "";
    position: absolute;
    left: calc(0.5rem + 1px + 0.25rem);
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: -0.275rem;
    background: var(--color-primary);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
}

.staff-access-check:hover > span {
    border-color: var(--color-primary);
}

.staff-access-check input:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

.staff-access-check input:checked + span::before {
    border-color: var(--color-text-on-dark);
    background: var(--color-text-on-dark);
}

.staff-access-check input:checked + span::after {
    transform: scale(1);
}

.staff-access-check input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.staff-access-check input:disabled + span {
    opacity: 0.5;
    cursor: default;
}

.staff-access-subgroup {
    margin: 0 0 0.75rem;
}

.staff-access-subgroup:last-child {
    margin-bottom: 0;
}

.staff-access-subgroup-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin: 0 0 0.25rem;
}

.staff-access-subgroup-options {
    display: flex;
    flex-wrap: wrap;
}

.resource-attachment-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.resource-attachment-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-surface);
    font-size: 0.9rem;
}

.resource-attachment-item:last-child {
    border-bottom: none;
}

.resource-attachment-ext {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-surface);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.resource-attachment-item a:first-of-type {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-attachment-remove {
    flex-shrink: 0;
    color: var(--color-rose-wine);
    font-size: 0.85rem;
}

/* Branded stand-in for the browser's own unstyled "Choose Files" button —
   the real <input type="file"> stays in the document (so it's still
   keyboard-accessible and posts normally) but is visually hidden; a
   <label for=...> styled as a .btn triggers its file picker instead, and
   JS mirrors the chosen filenames into the status text next to it. */
.file-picker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

/* ".form-field input.…" so it outranks the generic .form-field input
   rule (width: 100%), which otherwise stretched this hidden input across
   the page and gave the form a sideways scrollbar. */
.form-field input.file-picker-input,
.file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-picker-btn:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.file-picker-status {
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* ---------- Resources (student-facing) ---------- */

.resources-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.resources-empty-state {
    color: var(--color-muted);
    margin-top: 1.5rem;
}

.resources-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 1.5rem 0;
}

.resources-filters select,
.staff-search-input {
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-surface);
    background: var(--color-background);
    font-family: var(--font-body);
    color: var(--color-text);
}

.staff-search-input {
    flex: 1 1 260px;
    max-width: 320px;
}

/* Dropdowns: the browser's own arrow swapped for a small chevron in the
   brand colour — two gradient triangles, so it can use the tokens.
   After the .form-field / .resources-filters rules, whose background
   shorthand would otherwise wipe it. */
.form-field select,
.resources-filters select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
        linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 52%, calc(100% - 0.95rem) 52%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.resource-list {
    display: grid;
    /* auto-fill (not auto-fit): auto-fit collapses unused tracks, so a
       row with only 1-2 cards stretches them to fill the whole width.
       auto-fill keeps the empty tracks instead, so cards stay their
       intended size no matter how many there are. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.resource-card {
    background: var(--color-card-bg);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.resource-card h3 {
    margin: 0.5rem 0 0.5rem;
    font-size: 1.05rem;
}

.resource-description {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.resource-categories {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.exercise-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.exercise-dd-sentence {
    font-size: 1rem;
}

.dd-instructions {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.dd-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: 14px;
    min-height: 3rem;
    /* Dragging (and quick repeated clicking) on the chips below would
       otherwise trigger the browser's own text-selection highlight,
       which visually competes with the drag/selection state and can
       swallow a tap on mobile. */
    user-select: none;
    -webkit-user-select: none;
}

.dd-chip {
    cursor: grab;
    background: var(--color-card-bg);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-primary);
}

.dd-chip:active {
    cursor: grabbing;
}

.dd-chip--selected {
    background: var(--color-primary);
    color: var(--color-background);
}

.dd-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    min-height: 1.6rem;
    padding: 0.2rem 0.6rem;
    margin: 0 0.3rem;
    border: 2px dashed var(--color-muted);
    border-radius: 10px;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.dd-blank:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.dd-blank--filled {
    border-style: solid;
    border-color: var(--color-primary);
    background: var(--color-background);
}

.dd-blank--dragover {
    background: var(--color-surface);
    border-color: var(--color-primary);
}

/* ---------- Exercise player (exercise_take.html + exercise_player.js) ---------- */
/* One-question-at-a-time player with a feedback bar along the bottom
   that turns sage green / rose for right / wrong — the pattern learners
   know from language apps. Without JS (.is-enhanced missing) it falls
   back to a plain form with every question visible. */

.exercise-player {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
}

.exercise-player-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.exercise-player-exit {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 1.1rem;
}

.exercise-player-exit:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

.exercise-progress {
    flex: 1 1 auto;
    height: 0.65rem;
    background: var(--color-surface);
    border-radius: 999px;
    overflow: hidden;
}

.exercise-progress-fill {
    width: 0;
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
    transition: width 0.35s ease;
}

.exercise-progress-label {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--color-muted);
    min-width: 4.5rem;
    text-align: right;
}

.exercise-player-title {
    font-size: 1.6rem;
    margin: 0 0 1.25rem;
}

.exercise-card {
    border: none;
    margin: 0 0 1.25rem;
    padding: 1.75rem;
    background: var(--color-card-bg);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.exercise-card[hidden] {
    display: none;
}

.exercise-card-kicker {
    float: left; /* lets the legend sit inside the card's padding like normal text */
    width: 100%;
    padding: 0;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

.exercise-prompt {
    clear: both;
    font-size: 1.35rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.exercise-gap {
    display: inline-block;
    min-width: 5rem;
    margin: 0 0.25rem;
    padding: 0 0.35rem;
    border-bottom: 2px solid var(--color-primary);
    text-align: center;
    color: var(--color-primary);
    font-weight: 600;
}

.exercise-gap.is-correct {
    border-color: var(--color-primary);
    background: rgba(182, 181, 127, 0.25);
    border-radius: 6px 6px 0 0;
}

.exercise-gap.is-wrong {
    border-color: var(--color-rose-wine);
    color: var(--color-rose-wine);
    text-decoration: line-through;
}

/* Empty gap: muted, and numbered when a question has several gaps. */
.exercise-gap.is-empty {
    color: var(--color-muted);
    font-size: 0.8em;
    font-weight: 400;
}

/* One group of choices per gap (several on a multi-gap question). */
.exercise-choice-group + .exercise-choice-group {
    margin-top: 1.1rem;
}

.exercise-group-label {
    margin: 0 0 0.45rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.exercise-choices {
    display: grid;
    gap: 0.65rem;
}

.exercise-choice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-surface);
    border-radius: 14px;
    background: var(--color-background);
    cursor: pointer;
    font-size: 1.05rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.exercise-choice:hover {
    border-color: var(--color-primary);
}

.exercise-choice:active {
    transform: scale(0.99);
}

/* The native radio stays for keyboard + screen readers, visually replaced
   by the numbered key badge. */
.exercise-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.exercise-choice-key {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1.5px solid var(--color-surface);
    font-size: 0.8rem;
    color: var(--color-muted);
    background: var(--color-card-bg);
}

.exercise-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-card-bg);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.exercise-choice:has(input:checked) .exercise-choice-key {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
}

.exercise-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.exercise-card.is-answered .exercise-choice {
    cursor: default;
    transform: none;
}

.exercise-card.is-answered .exercise-choice:not(.is-correct):not(.is-wrong) {
    opacity: 0.55;
}

/* Prefixed with .is-answered so they outrank the ":has(input:checked)"
   selected look above — a selected WRONG answer must turn rose. */
.exercise-card.is-answered .exercise-choice.is-correct {
    border-color: var(--color-primary);
    background: rgba(182, 181, 127, 0.22);
    box-shadow: none;
}

.exercise-card.is-answered .exercise-choice.is-correct .exercise-choice-key {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
}

.exercise-card.is-answered .exercise-choice.is-wrong {
    border-color: var(--color-rose-wine);
    background: rgba(207, 75, 115, 0.08);
    box-shadow: none;
}

.exercise-card.is-answered .exercise-choice.is-wrong .exercise-choice-key {
    background: var(--color-rose-wine);
    border-color: var(--color-rose-wine);
    color: var(--color-background);
}

.exercise-retry-intro {
    text-align: center;
}

.exercise-retry-intro-icon {
    display: block;
    font-size: 2.25rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* Feedback / action bar — sticks to the bottom of the screen so the
   check / continue button is always under the thumb on a phone. */
.exercise-bar {
    display: none;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1.5rem -2rem 0;
    padding: 1rem 2rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--color-background);
    border-top: 2px solid var(--color-surface);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.is-enhanced .exercise-bar {
    display: block;
}

.is-enhanced .exercise-fallback-submit {
    display: none;
}

.exercise-bar[data-state="correct"] {
    background: color-mix(in srgb, var(--color-dry-sage) 22%, var(--color-card-bg));
    border-color: var(--color-dry-sage);
}

.exercise-bar[data-state="wrong"] {
    background: color-mix(in srgb, var(--color-rose-wine) 13%, var(--color-card-bg));
    border-color: var(--color-rose-wine);
}

.exercise-bar[data-state="info"] {
    background: var(--color-card-bg);
}

.exercise-bar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.exercise-bar-message {
    flex: 1 1 auto;
    min-height: 1.5rem;
}

.exercise-bar-message p {
    margin: 0;
}

.exercise-bar-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.exercise-bar[data-state="correct"] .exercise-bar-title {
    color: var(--color-primary);
}

.exercise-bar[data-state="wrong"] .exercise-bar-title,
.exercise-bar[data-state="wrong"] .exercise-bar-detail {
    color: var(--color-rose-wine);
}

.exercise-bar-detail {
    font-size: 0.95rem;
}

.exercise-bar-explanation {
    margin-top: 0.35rem !important;
    font-size: 0.9rem;
    color: var(--color-text);
}

.exercise-bar-explanation::before {
    content: "💡 ";
}

.exercise-bar-button {
    flex: 0 0 auto;
    min-width: 9rem;
    background: var(--color-accent);
    color: var(--color-text-on-dark);
}

.exercise-bar[data-state="correct"] .exercise-bar-button {
    background: var(--color-primary);
}

.exercise-bar-button:disabled {
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: not-allowed;
}

.exercise-bar-hint {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    color: var(--color-muted);
}

/* Drag-and-drop board inside the player */

.exercise-player .dd-word-bank {
    position: sticky;
    top: calc(var(--nav-height, 3.5rem) + 0.5rem); /* just under the pinned menu band */
    z-index: 4;
    box-shadow: 0 4px 14px rgba(55, 86, 68, 0.12);
}

.exercise-player .dd-word-bank.is-done {
    position: static;
    box-shadow: none;
    opacity: 0.6;
}

.exercise-player .dd-chip {
    min-height: 2.5rem;
    padding: 0.45rem 1.1rem;
    font-size: 1rem;
}

.dd-sentences {
    list-style: none;
    counter-reset: dd-sentence;
    margin: 0;
    padding: 0;
}

.dd-sentence {
    counter-increment: dd-sentence;
    position: relative;
    margin: 0 0 0.85rem;
    padding: 1rem 1.25rem 1rem 3rem;
    background: var(--color-card-bg);
    border: 2px solid transparent;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dd-sentence::before {
    content: counter(dd-sentence);
    position: absolute;
    left: 1.1rem;
    top: 1.15rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.dd-sentence .exercise-dd-sentence {
    margin: 0;
    font-size: 1.1rem;
    line-height: 2.2;
}

.dd-sentence.is-correct {
    border-color: var(--color-dry-sage);
    background: rgba(182, 181, 127, 0.22);
}

.dd-sentence.is-correct::before {
    content: "✓";
    font-weight: 700;
    color: var(--color-primary);
}

.dd-sentence.is-wrong {
    border-color: var(--color-rose-wine);
}

/* Per-gap states (a sentence can have several gaps). */
.dd-blank.dd-blank--wrong {
    border-color: var(--color-rose-wine);
    border-style: dashed;
    background: rgba(207, 75, 115, 0.06);
}

.dd-blank.dd-blank--correct {
    border-color: var(--color-dry-sage);
    background: rgba(182, 181, 127, 0.18);
}

.dd-blank.dd-blank--revealed {
    border-color: var(--color-rose-wine);
}

.dd-sentence.is-revealed {
    border-color: var(--color-rose-wine);
    background: rgba(207, 75, 115, 0.06);
}

.dd-sentence.is-revealed::before {
    content: "✗";
    color: var(--color-rose-wine);
}

.dd-blank.is-locked {
    cursor: default;
}

.dd-blank.is-locked .dd-chip {
    cursor: default;
    opacity: 1;
}

.dd-chip--wrong {
    text-decoration: line-through;
    border-color: var(--color-rose-wine) !important;
    color: var(--color-rose-wine) !important;
}

.dd-correction {
    margin-left: 0.4rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-background);
    font-size: 0.95rem;
}

.dd-sentence-feedback {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.dd-sentence-feedback::before {
    content: "💡 ";
}

.dd-sentence-feedback[hidden] {
    display: none;
}

/* ---------- Exercise results (student result page + teacher pages) ---------- */

.exercise-result {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}

.exercise-result-staff-note {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-card-bg);
    border-radius: 12px;
    font-size: 0.9rem;
}

.exercise-result-hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--color-card-bg);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
    margin-bottom: 2.5rem;
}

.exercise-result-hero h1 {
    font-size: 2rem;
    margin: 0.25rem 0 0.5rem;
}

.exercise-result-hero p {
    margin: 0 0 0.75rem;
}

.exercise-result-hero .kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

.exercise-result-tip {
    font-size: 0.9rem;
    color: var(--color-muted);
}

.exercise-result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
}

/* Donut chart of the score: a conic gradient with the middle masked out. */
.score-ring {
    --percent: 0;
    flex: 0 0 auto;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) calc(var(--percent) * 1%), var(--color-surface) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.score-ring::before {
    content: "";
    position: absolute;
    inset: 0.85rem;
    border-radius: 50%;
    background: var(--color-card-bg);
}

.score-ring span {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--color-primary);
}

.exercise-result h2 {
    font-size: 1.3rem;
    margin: 0 0 1rem;
}

.exercise-review {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
}

.exercise-review-item {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.65rem;
    background: var(--color-card-bg);
    border-left: 4px solid var(--color-dry-sage);
    border-radius: 12px;
}

.exercise-review-item.is-wrong {
    border-left-color: var(--color-rose-wine);
}

.exercise-review-icon {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--color-primary);
}

.exercise-review-item.is-wrong .exercise-review-icon {
    color: var(--color-rose-wine);
}

.exercise-review-item p {
    margin: 0;
}

.exercise-review-answer {
    font-weight: 600;
    color: var(--color-primary);
}

.exercise-review-item s {
    color: var(--color-rose-wine);
}

.exercise-review-meta {
    margin-top: 0.3rem !important;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.exercise-review-explanation {
    margin-top: 0.4rem !important;
    font-size: 0.9rem;
}

.exercise-review-explanation::before {
    content: "💡 ";
}

.exercise-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exercise-history li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-surface);
    font-size: 0.95rem;
}

.exercise-history li.is-current {
    font-weight: 600;
}

/* Status chips on the student's exercise list */
.exercise-status {
    display: inline-block;
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--color-background);
    color: var(--color-muted);
}

.exercise-status--review {
    background: rgba(207, 75, 115, 0.12);
    color: var(--color-rose-wine);
}

.exercise-status--mastered {
    background: rgba(182, 181, 127, 0.28);
    color: var(--color-primary);
}

/* An exercise students can't see yet (teacher pages only) */
.exercise-status--draft {
    background: var(--color-card-bg);
    border: 1px dashed var(--color-muted);
    color: var(--color-primary);
}

.exercise-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.exercise-card-tags .badge {
    margin-left: 0;
}

/* Teacher results pages */
.results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
}

.results-stat {
    background: var(--color-card-bg);
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.results-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-primary);
}

.results-stat-label {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.results-table-wrap {
    overflow-x: auto;
    margin: 0 0 2.5rem;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card-bg);
    border-radius: 14px;
    overflow: hidden;
    font-size: 0.92rem;
}

.results-table th,
.results-table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-surface);
    white-space: nowrap;
}

.results-table th {
    font-family: var(--font-heading);
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--color-muted);
    background: var(--color-background);
}

.results-table td:first-child {
    white-space: normal;
}

.results-table a {
    color: var(--color-primary);
}

.staff-page h2 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

.results-note {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0 0 1rem;
}

.results-items {
    margin: 0;
    padding-left: 1.4rem;
}

.results-item {
    margin-bottom: 1rem;
}

.results-item-text {
    margin-bottom: 0.35rem;
}

.results-item-gap {
    margin-right: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.results-item-other {
    color: var(--color-muted);
}

.results-item-bar {
    height: 0.5rem;
    background: var(--color-surface);
    border-radius: 999px;
    overflow: hidden;
    max-width: 420px;
}

.results-item-bar span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
}

.results-item.is-hard .results-item-bar span {
    background: var(--color-rose-wine);
}

.results-item-meta {
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--color-muted);
}

/* ---------- Exercise builder (teacher side) ---------- */
/* Builder pages (mc_question_list / dd_sentence_list), the question and
   sentence editors with live preview, and the exercise tiles. Cards echo
   the student's player so a teacher sees what students will see. */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.builder-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.builder-back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.builder-muted {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Header card */
.builder-header {
    margin-bottom: 1.75rem;
}

.builder-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.builder-header-text h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0.4rem 0 0.5rem;
}

.builder-type {
    margin-left: 0;
    font-size: 0.7rem;
}

.builder-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.builder-course {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-surface);
    color: var(--color-primary);
}

a.builder-course {
    text-decoration: none;
}

a.builder-course:hover {
    border-color: var(--color-primary);
}

.builder-tile-score {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.builder-meta-count {
    margin-left: 0.25rem;
}

.builder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.builder-warning {
    margin: 1.25rem 0 0;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-rose-wine) 13%, var(--color-card-bg));
    color: var(--color-rose-wine);
    font-size: 0.92rem;
}

.builder-warning a {
    color: var(--color-rose-wine);
    font-weight: 600;
}

/* Draft banner under the builder header, with the "Публикувай" button */
.builder-draft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px dashed var(--color-muted);
    background: var(--color-card-bg);
    font-size: 0.92rem;
}

.builder-draft p {
    margin: 0;
}

.builder-draft form {
    margin: 0;
}

/* "Върни в чернова": a quiet link-looking button among the header actions */
.builder-unpublish {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.builder-unpublish:hover {
    color: var(--color-primary);
}

.builder-actions form {
    margin: 0;
}

.builder-tip {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: var(--color-card-bg);
    font-size: 0.88rem;
    color: var(--color-text);
}

/* Toolbar above the cards: "+ Нов въпрос" */
.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Item cards */
.builder-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.builder-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: var(--color-card-bg);
    border: 2px solid transparent;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.07);
    scroll-margin-top: 1.5rem;
}

.builder-card:target {
    border-color: var(--color-dry-sage);
}

.builder-card--problem {
    border-color: var(--color-rose-wine);
}

.builder-card-number {
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-background);
    font-size: 0.8rem;
    color: var(--color-muted);
}

.builder-card-body p {
    margin: 0;
}

.builder-prompt {
    font-size: 1.12rem;
    line-height: 1.7;
}

.builder-gap {
    display: inline-block;
    min-width: 3rem;
    margin: 0 0.2rem;
    padding: 0 0.4rem;
    border-bottom: 2px solid var(--color-primary);
    background: rgba(182, 181, 127, 0.22);
    border-radius: 6px 6px 0 0;
    color: var(--color-primary);
    font-weight: 600;
    text-align: center;
}

.builder-gap--chip {
    border: none;
    border-radius: 999px;
    padding: 0.1rem 0.8rem;
    background: var(--color-primary);
    color: var(--color-background);
    font-weight: 500;
}

.builder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.builder-gap-number {
    margin-right: 0.2rem;
    font-size: 0.65em;
    color: var(--color-muted);
}

.builder-options-label {
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-background);
    font-size: 0.72rem;
    color: var(--color-muted);
}

.builder-option {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-surface);
    font-size: 0.88rem;
    color: var(--color-text);
}

.builder-option--correct {
    border-color: var(--color-primary);
    background: rgba(182, 181, 127, 0.22);
    color: var(--color-primary);
    font-weight: 600;
}

.builder-explanation {
    margin-top: 0.55rem !important;
    font-size: 0.88rem;
    color: var(--color-text);
}

.builder-problem {
    margin-top: 0.55rem !important;
    font-size: 0.88rem;
    color: var(--color-rose-wine);
    font-weight: 600;
}

.builder-card-tools {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.builder-card-tools form {
    margin: 0;
}

.builder-tool {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-surface);
    background: var(--color-card-bg);
    color: var(--color-primary);
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

.builder-tool:hover {
    border-color: var(--color-primary);
}

.builder-tool:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: var(--color-surface);
}

.builder-tool--danger:hover {
    border-color: var(--color-rose-wine);
    color: var(--color-rose-wine);
}

.builder-add-more {
    margin-top: 0.25rem;
}

/* Empty state */
.builder-empty {
    padding: 2rem;
    text-align: center;
    background: var(--color-card-bg);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.07);
}

.builder-empty h2 {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
}

.builder-empty p {
    margin: 0 auto 1rem;
    max-width: 520px;
    color: var(--color-text);
}

/* DD builder sections */
.builder-section {
    margin-bottom: 2.25rem;
}

.builder-section-heading h2 {
    font-size: 1.3rem;
    margin: 0 0 0.35rem;
}

.builder-section-heading p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    max-width: 640px;
}

.builder-section-heading--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.builder-section-heading--row h2 {
    margin: 0;
}

.builder-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--color-surface);
    border-radius: 14px;
}

.builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background: var(--color-card-bg);
}

.builder-chip a {
    color: var(--color-primary);
    text-decoration: none;
}

.builder-chip small {
    font-size: 0.72rem;
    color: var(--color-muted);
}

.builder-chip--decoy {
    border-style: dashed;
    border-color: var(--color-muted);
}

.builder-chip-remove {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
}

.builder-chip-remove:hover {
    background: color-mix(in srgb, var(--color-rose-wine) 13%, var(--color-card-bg));
    color: var(--color-rose-wine) !important;
}

.builder-inline-add {
    display: flex;
    gap: 0.5rem;
    max-width: 420px;
    margin-bottom: 0.75rem;
}

.builder-inline-add input {
    flex: 1 1 auto;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-surface);
    background: var(--color-card-bg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}

/* Editors: form + live preview side by side */
.builder-editor-title {
    font-size: 1.8rem;
    margin: 0 0 1.25rem;
}

.builder-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.builder-form {
    padding: 1.5rem;
    background: var(--color-card-bg);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.07);
}

.builder-input-row {
    display: flex;
    gap: 0.5rem;
}

.builder-input-row input {
    flex: 1 1 auto;
}

.builder-blank-button {
    flex: 0 0 auto;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.builder-answers {
    border: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.builder-answers legend {
    padding: 0;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-primary);
}

.builder-answers > small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.builder-answer-list {
    display: grid;
    gap: 0.5rem;
}

.builder-answer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.builder-answer input[type="text"] {
    flex: 1 1 auto;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--color-surface);
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
}

.builder-answer.is-correct input[type="text"] {
    border-color: var(--color-primary);
    background: rgba(182, 181, 127, 0.18);
}

/* The "correct" tick: a round button standing in for the radio. */
.builder-answer-correct {
    position: relative;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
    color: transparent;
    cursor: pointer;
    font-weight: 700;
}

.builder-answer-correct input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.builder-answer-correct:hover {
    border-color: var(--color-primary);
    color: var(--color-muted);
}

.builder-answer-correct:has(input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
}

.builder-answer-correct:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.builder-answer-remove {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.builder-answer-remove:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-rose-wine) 13%, var(--color-card-bg));
    color: var(--color-rose-wine);
}

.builder-answer-remove:disabled {
    opacity: 0.3;
    cursor: default;
}

.builder-add-answer {
    margin-top: 0.6rem;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
}

.builder-add-answer[hidden] {
    display: none;
}

/* One answer group / word picker per gap (several on a multi-gap sentence). */
.builder-answer-groups .builder-answers + .builder-answers {
    padding-top: 1.1rem;
    border-top: 1px dashed var(--color-surface);
}

/* "Празно място 2" — its own line above the group's instructions. */
.builder-group-title {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
    color: var(--color-accent);
}

.builder-group-title[hidden] {
    display: none;
}

.builder-groups-note {
    display: block;
    margin: -0.5rem 0 1.25rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.builder-new-word {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.builder-new-word input {
    max-width: 280px;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--color-surface);
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
}

.builder-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Live preview — only once the script is running (the form works without it) */
.builder-preview {
    display: none;
    position: sticky;
    top: calc(var(--nav-height, 3.5rem) + 1.5rem); /* under the pinned menu band */
}

.is-enhanced .builder-preview {
    display: block;
}

.builder-preview-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

.builder-preview-card {
    margin: 0;
}

.builder-preview-card .exercise-prompt {
    margin-bottom: 1rem;
}

.builder-preview-card .exercise-choice {
    cursor: default;
}

.builder-preview-note {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* Exercise tiles on the manage list */
.builder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
}

.builder-grid .builder-empty {
    grid-column: 1 / -1;
}

.builder-tile {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.25rem;
    background: var(--color-card-bg);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.07);
}

.builder-tile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.builder-tile-tags .badge {
    margin-left: 0;
}

.builder-tile h3 {
    margin: 0.2rem 0 0;
    font-size: 1.1rem;
}

.builder-tile h3 a {
    color: var(--color-primary);
    text-decoration: none;
}

.builder-tile-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.builder-tile-warning {
    color: var(--color-rose-wine);
}

.builder-tile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.6rem;
}

.builder-tile-icons {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: auto;
}

/* Teachers trying an exercise in the player */
.exercise-staff-note {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: var(--color-card-bg);
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ---------- Resources hub (landing page) ---------- */

.resources-hub-page {
    /* Full-bleed pale-green wash behind the hero/tabs/cards, distinct
       from the site's usual peach page background — matches the
       reference design rather than the champagne-mist used elsewhere. */
    background: var(--color-mint-mist);
}

.resources-hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
}

.resources-hub-hero-copy .kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.resources-hub-hero-copy h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.resources-hub-hero-copy h1 em {
    color: var(--color-accent);
    font-style: italic;
}

.resources-hub-hero-copy p {
    margin: 0;
    color: var(--color-text);
    max-width: 32rem;
}

.resources-hub-hero-image-wrap {
    position: relative;
}

.resources-hub-hero-blob {
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
    width: 26%;
    height: 26%;
    background: var(--color-dry-sage);
    opacity: 0.55;
    border-radius: 100% 0 100% 0;
    transform: rotate(10deg);
    z-index: 0;
}

.resources-hub-hero-image {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    background: var(--color-primary);
    /* Curved ellipse on the side facing the copy, flush/straight on the
       outer edge — an almost-full ellipse anchored at the box's own
       right edge, so only its left portion (where it cuts across the
       box) actually shows. */
    clip-path: ellipse(90% 85% at 100% 50%);
}

.resources-hub-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.resources-hub-tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 1rem;
}

.resources-hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    text-decoration: none;
    background: var(--color-card-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-surface);
}

.resources-hub-tab--active {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border-color: var(--color-primary);
}

.resources-hub-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 3.5rem;
}

.resources-hub-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.resources-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--color-card-bg);
    border-radius: 20px;
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.resources-hub-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.resources-hub-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.resources-hub-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
    flex: 1;
}

/* ---------- Vocabulary (student-facing) ---------- */

.vocabulary-course-group {
    margin-bottom: 2.5rem;
}

.vocabulary-course-group h2 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: var(--color-primary);
}

/* ---------- Staff: resource management ---------- */

.staff-resource-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

/* Used in a heading_action block when there's more than one link/button
   next to an <h1> — .section-heading itself only expects two children
   (the heading and this one), so a "+ New" button and a "back" link both
   need to sit inside a single wrapper like this to lay out correctly. */
.section-heading-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* ---------- Staff: resource management overview (3 languages x 6 levels) ---------- */

.resource-manage-language-group {
    margin-bottom: 2.5rem;
}

.resource-manage-language-group h2 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: var(--color-primary);
}

.resource-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
}

.resource-manage-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-card-bg);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-decoration: none;
    color: inherit;
    text-align: center;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.resource-manage-tile:hover {
    box-shadow: 0 4px 16px rgba(55, 86, 68, 0.14);
}

.resource-manage-tile-level {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-primary);
}

.resource-manage-tile-count {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* ---------- Staff: one course's resources, as compact file tiles ---------- */
/* Used to be a full-width row per resource — way too much space for just
   a title and two links, and hard to scan a level with a lot of files.
   ~4 tiles per row at .staff-page's 900px width (auto-fit keeps it
   responsive rather than a hard-coded 4 that would break on mobile). A
   tile only shows the type icon + title; everything else (description,
   current file/download link, sharing checkboxes) lives on the edit page
   the tile opens into — a deliberate preview-then-detail split. */

.resource-file-grid {
    display: grid;
    /* Same auto-fill fix as .resource-list — see comment there. */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.resource-file-tile {
    position: relative;
    background: var(--color-card-bg);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.resource-file-tile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.25rem 1rem 1rem;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.resource-file-tile-link svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.resource-file-tile-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-primary);
    /* Clamp long titles to 2 lines so every tile stays the same height,
       same trick used for the home page review quotes. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resource-file-tile-note {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.resource-file-tile-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.65rem;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1;
}

.resource-file-tile-delete:hover {
    color: var(--color-rose-wine);
}

/* A RadioSelect rendered as a row of pill buttons instead of a plain
   <select> or bare radio list — used for "pick the correct word" on the
   drag-and-drop sentence form, echoing the look of the word chips a
   student actually drags in the exercise itself. The real <input
   type="radio"> stays in the document (visually hidden, not display:none)
   so it's still keyboard-focusable and included in the form submit. */
.chip-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.chip-radio {
    cursor: pointer;
}

.chip-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chip-radio span {
    display: inline-flex;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-primary);
    background: var(--color-card-bg);
}

.chip-radio input:checked + span {
    background: var(--color-primary);
    color: var(--color-background);
}

.chip-radio input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Collapsed-by-default <details> box offering a paste-many-lines-at-once
   alternative to the one-item-per-page create forms above it (DD word
   bank, DD sentences, vocabulary). Plain <details>/<summary> — no JS
   needed to toggle it open/closed. */
.bulk-import {
    margin: 0 0 1.5rem;
    padding: 1rem 1.2rem;
    background: var(--color-surface);
    border-radius: 14px;
}

.bulk-import summary {
    cursor: pointer;
    font-family: var(--font-heading);
    color: var(--color-primary);
}

.bulk-import[open] summary {
    margin-bottom: 0.8rem;
}

.bulk-import .form-field {
    margin-bottom: 0.6rem;
}

/* ---------- Footer ---------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 2rem;
    border-top: 3px solid var(--color-surface); /* thicker — more distinct */
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-family: var(--font-heading);
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.7rem;
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--color-card-bg);
}

.footer-social svg {
    width: 1.05rem;
    height: 1.05rem;
}

.footer-tagline {
    font-family: var(--font-heading);
    color: var(--color-muted);
    margin: 0;
}

/* ---------- About us ---------- */

.about-story {
    max-width: 800px;
    margin: 0 auto;
    padding: 3.5rem 2rem 1rem;
}

.about-story-inner p {
    line-height: 1.7;
    color: var(--color-text);
}

.team-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem 4rem;
}

.team-photo {
    aspect-ratio: 2 / 1;
    margin-bottom: 1.5rem;
    border-radius: 18px;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.team-card {
    min-height: 12rem;
    background: var(--color-card-bg);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
}

.team-card h3 {
    margin: 0 0 0.25rem;
}

.team-role {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-family: var(--font-heading);
    color: var(--color-accent);
}

.team-bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text);
}

.team-bio p {
    margin: 0 0 0.85rem;
}

.team-bio p:last-child {
    margin-bottom: 0;
}

.about-story-inner .about-story-closing {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}

/* ---------- Responsive ---------- */

/* ---------- Offering pages (Групови / Индивидуални / Допълнителни) ---------- */

.offering-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.offering-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ---------- Site pages (privacy policy, terms — core.SitePage) ---------- */

.site-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    line-height: 1.7;
}

.site-page .kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}

.site-page h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.site-page-body h2 {
    font-size: 1.25rem;
    margin: 2rem 0 0.5rem;
}

.site-page-body h3 {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.4rem;
}

.site-page-body p,
.site-page-body ul {
    margin: 0 0 1rem;
}

.site-page-body ul {
    padding-left: 1.25rem;
}

/* ---------- Библиотека (library app: article list + article page) ---------- */

.library-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 4rem;
}

.article-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.article-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .article-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 22px rgba(55, 86, 68, 0.14);
    }
}

.article-card-image {
    aspect-ratio: 16 / 10;
    background: var(--color-surface);
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No cover photo: a soft pink-to-sage wash instead of an empty box. */
.article-card-image--empty {
    background: linear-gradient(135deg, var(--color-surface), var(--color-mint-mist));
}

.article-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 1.4rem 1.5rem 1.6rem;
}

.article-card-body h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
}

.article-card-excerpt {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.article-card-body .link-arrow {
    margin-top: auto;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.article-meta .badge {
    margin-left: 0;
    font-size: 0.75rem;
    padding: 0.15rem 0.65rem;
    background: var(--color-surface);
    text-decoration: none;
}

.library-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 0;
}

.library-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.article-back {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.article-page h1 {
    margin: 0.75rem 0 1rem;
}

.article-lead {
    font-size: 1.1rem;
    line-height: 1.6;
}

.article-cover {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 18px;
    margin: 1.5rem 0 2rem;
}

.article-draft-note {
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: var(--color-surface);
    font-size: 0.9rem;
}

/* Teachers' side of the library (/library/manage/) */

.library-staff-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 1.25rem;
}

.article-top-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.article-top-links .article-back {
    margin-bottom: 0;
}

.staff-page:has(.library-manage-layout, .split-form, .course-manage) {
    max-width: 1200px;
}

.library-manage-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 560px;
    margin: 1rem 0 1.5rem;
}

.library-manage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    align-items: start;
}

.library-manage-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.library-manage-filter .builder-course.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

/* A row on a staff list with a thumbnail (articles, course ads) */
.manage-row {
    flex-wrap: nowrap;
}

.manage-thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 3.25rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
}

.manage-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.manage-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

/* .mail-list-subject's flex-basis is for a row; in this column it would
   become a 240px-tall title. */
.manage-row-text .mail-list-subject {
    flex: none;
}

.manage-row-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.status-pill {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-pill--draft {
    background: var(--color-surface);
    color: var(--color-primary);
}

.status-pill--scheduled {
    background: var(--color-background);
    color: var(--color-accent);
    border: 1px solid var(--color-surface);
}

.status-pill--published {
    background: var(--color-mint-mist);
    color: var(--color-primary);
}

.library-manage-side {
    padding: 0.25rem 1.25rem 1.25rem;
    border-radius: 18px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.library-category-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.library-category-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-background);
}

.library-category-list li > a:first-child {
    flex: 1;
    color: var(--color-primary);
    font-family: var(--font-heading);
    text-decoration: none;
}

.library-category-remove {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--color-muted);
}

.library-category-remove:hover {
    background: var(--color-surface);
    color: var(--color-accent);
}

.library-category-add {
    display: flex;
    gap: 0.5rem;
}

.library-category-add input {
    flex: 1;
    min-width: 0;
}

.library-category-form {
    max-width: 420px;
}

/* Two-column staff form (articles, course ads): writing on the left,
   settings panels on the right */
.split-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem 2rem;
    align-items: start;
    margin-top: 1rem;
}

.split-form-main {
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--color-card-bg);
    box-shadow: 0 6px 24px rgba(55, 86, 68, 0.08);
}

.split-form-main .form-field:last-child {
    margin-bottom: 0;
}

.split-form .article-body-input {
    min-height: 26rem;
    line-height: 1.7;
}

.library-format-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.library-format-hint code {
    padding: 0 0.35rem;
    border-radius: 6px;
    background: var(--color-background);
    color: var(--color-primary);
}

.split-form-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.split-form-panel {
    padding: 1.1rem 1.25rem;
    border-radius: 18px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.split-form-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.split-form-panel .form-field:last-child {
    margin-bottom: 0;
}

.split-form-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.split-form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

@media (max-width: 900px) {
    .library-manage-layout,
    .split-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .manage-row {
        flex-wrap: wrap;
    }

    .library-staff-bar {
        padding: 0 1.25rem 1rem;
    }
}

/* ---------- Staff: Управление hub, courses, course ads, reviews ---------- */

.staff-hub-grid {
    margin-bottom: 1rem;
}

.staff-hub .resources-hub-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.staff-hub-note {
    margin-top: 2rem;
}

.course-manage-language {
    margin: 2rem 0 0;
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.course-manage-language h2 {
    margin: 0 0 1rem;
}

/* The level tiles sit on a white card here, so they get the page tint. */
.course-manage-language .resource-manage-tile {
    background: var(--color-background);
    box-shadow: none;
}

.course-manage-extras {
    margin-top: 1.5rem;
}

.course-manage-extras h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

.course-manage-extras .mail-list-item {
    background: var(--color-background);
}

.course-manage-add {
    display: inline-block;
    margin-top: 0.75rem;
}

.course-manage-ended {
    margin-top: 2rem;
}

.course-manage-ended summary {
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}

.course-manage-ended .mail-list {
    margin-top: 0.75rem;
}

.course-manage-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 1.25rem;
}

.course-manage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.course-manage-links {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.course-manage-links li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-background);
}

.course-manage-links a {
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.course-manage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0 0 0.75rem;
}

.course-manage-actions form {
    margin: 0;
}

.course-manage-form {
    max-width: 520px;
}

.review-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.review-manage-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.review-manage-card.is-hidden {
    opacity: 0.6;
}

.review-manage-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-manage-head > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--color-primary);
}

.review-manage-stars {
    color: var(--color-accent);
    letter-spacing: 0.1em;
}

.review-manage-quote {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.review-manage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: auto;
}

.review-manage-actions form {
    margin: 0;
}

.review-form-photo {
    width: 7rem;
    aspect-ratio: 1;
    border-radius: 50%;
}

@media (max-width: 600px) {
    .course-manage-language {
        padding: 1.1rem;
    }
}

/* ---------- Honeypot form field (spam trap, see core/forms.py) ---------- */
/* Moved off-screen rather than display:none — some bots skip fields
   they can tell are display:none. */

.form-field--hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- 404 page ("no vikings spotted") ---------- */

.notfound {
    max-width: 640px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
    text-align: center;
}

.notfound-scene {
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.notfound-ship {
    /* Rocks around its own bottom centre, like it's sitting on the waves. */
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: notfound-bob 3.2s ease-in-out infinite;
}

.notfound-mast,
.notfound-outline,
.notfound-prow {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notfound-sail-a { fill: var(--color-background); }
.notfound-sail-b { fill: var(--color-accent); }
.notfound-hull { fill: var(--color-primary); }

.notfound-shield-a,
.notfound-shield-b {
    stroke: var(--color-background);
    stroke-width: 2;
}
.notfound-shield-a { fill: var(--color-accent); }
.notfound-shield-b { fill: var(--color-muted); }

.notfound-wave {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    animation: notfound-waves 2.4s linear infinite;
}

.notfound-wave--back {
    stroke: var(--color-muted);
    opacity: 0.6;
    animation-duration: 3.6s;
    animation-direction: reverse;
}

.notfound-wave--front {
    stroke: var(--color-primary);
}

.notfound-kicker {
    margin: 0 0 0.5rem;
    font-family: var(--font-handwritten);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent);
}

.notfound h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.notfound h1 em {
    color: var(--color-accent);
    font-style: normal;
}

.notfound-text {
    margin: 0 auto 2rem;
    max-width: 480px;
    line-height: 1.6;
}

.notfound-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Button: a soft pulsing ring while idle; on hover it lifts and the
   little boat sails off to the right. */
.notfound-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.05rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: notfound-pulse 2.4s ease-out infinite;
}

.notfound-btn:hover,
.notfound-btn:focus-visible {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(207, 75, 115, 0.35);
    animation: none;
}

.notfound-btn-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

.notfound-btn:hover .notfound-btn-icon,
.notfound-btn:focus-visible .notfound-btn-icon {
    animation: notfound-sail-away 0.9s ease-in-out infinite;
}

@keyframes notfound-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(5px) rotate(3deg); }
}

@keyframes notfound-waves {
    from { transform: translateX(0); }
    to { transform: translateX(-40px); }
}

@keyframes notfound-pulse {
    0% { box-shadow: 0 0 0 0 rgba(207, 75, 115, 0.45); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(207, 75, 115, 0); }
}

@keyframes notfound-sail-away {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(3px, -2px) rotate(-8deg); }
    75% { transform: translate(6px, 1px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .notfound-ship,
    .notfound-wave,
    .notfound-btn,
    .notfound-btn:hover .notfound-btn-icon {
        animation: none;
    }
}

@media (max-width: 768px) {
    /* Collapse the always-on desktop menu into a hamburger: the toggle
       button appears, and the menu becomes a panel under the pinned bar,
       shown while ".is-open" (the script in base.html) and scrolling on
       its own when it's taller than the screen. Each dropdown becomes an
       inline, tap-to-expand list instead of a hover overlay — hover
       doesn't really exist on touch. Rows are at least 44px tall, the
       usual minimum for something meant to be tapped. */

    .site-header {
        --logo-height: 4.75rem; /* keeps the wide logo inside a phone's width */
    }

    .navbar-menu-row {
        position: relative;
        justify-content: space-between;
        padding: 0.35rem 1.25rem;
    }

    .navbar-toggle {
        display: flex;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0 0.55rem;
        margin-left: -0.55rem; /* bars line up with the page's left edge */
    }

    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap; /* with a max-height, wrapping would start a second column off-screen */
        align-items: stretch;
        gap: 0;
        /* Down to the bottom of the screen from wherever the band is
           (--menu-top, set on opening — lower while the logo is still in view). */
        max-height: calc(100vh - var(--menu-top, var(--nav-height, 3.5rem)));
        max-height: calc(100dvh - var(--menu-top, var(--nav-height, 3.5rem)));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.25rem 1.25rem 1rem;
        background: var(--color-navbar-bg);
        box-shadow: 0 18px 30px rgba(55, 86, 68, 0.16);
        opacity: 0;
        translate: 0 var(--menu-shift, -0.4rem);
        /* Fades in and out where the browser can animate display (the
           second line); elsewhere it just appears. */
        transition: opacity 0.22s ease, translate 0.22s ease;
        transition: opacity 0.22s ease, translate 0.22s ease, display 0.22s allow-discrete;
    }

    .navbar-menu-row.is-open .navbar-menu {
        display: flex;
        opacity: 1;
        translate: 0 0;
    }

    @starting-style {
        .navbar-menu-row.is-open .navbar-menu {
            opacity: 0;
            translate: 0 var(--menu-shift, -0.4rem);
        }
    }

    .navbar-menu > li {
        width: 100%;
        padding: 0;
        border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
    }

    .navbar-menu > li:first-child {
        border-top: none;
    }

    .navbar-menu > li > a {
        display: inline-block;
        padding: 0.8rem 0;
    }

    .has-dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .has-dropdown > a {
        flex: 1;
    }

    .dropdown-caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-right: -0.75rem;
        font-size: 1rem;
        transition: rotate 0.2s ease;
    }

    .has-dropdown.dropdown-open .dropdown-caret {
        rotate: 180deg;
    }

    .navbar-menu .dropdown {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0 0 0.6rem;
        padding: 0 0 0 0.75rem;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        visibility: visible;
        opacity: 1;
        translate: none;
        transition: none;
    }

    .navbar-menu .dropdown::before {
        display: none;
    }

    .has-dropdown.dropdown-open .dropdown {
        display: block;
        animation: ts-fade-in 0.2s ease-out;
    }

    .navbar-menu .dropdown a,
    .navbar-menu .dropdown .link-button {
        padding: 0.65rem 0.75rem;
        white-space: normal;
    }

    .navbar-account-trigger {
        flex: 1;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.75rem 1.25rem 2.5rem;
    }

    .hero-copy {
        max-width: none;
    }

    /* The fancy traced shape and overlapping tag are desktop flourishes —
       on a small screen they just get in the way. Fall back to a plain
       rounded photo with the tag sitting underneath it, like a normal
       image + text block. */
    .hero-image {
        clip-path: none;
        border-radius: 16px;
    }

    .hero-bubble {
        display: none;
    }

    .hero-tag {
        position: static;
        display: inline-block;
        width: auto;
        transform: none;
        margin-top: 0.75rem;
        color: var(--color-accent);
    }

    .testimonials-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .testimonials-list {
        flex-direction: column;
        gap: 1.5rem;
    }

    .testimonial-item {
        padding-left: 0;
        border-left: none;
        padding-top: 1.5rem;
        border-top: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    }

    .testimonial-item--first {
        padding-top: 0;
        border-top: none;
    }

    .testimonials-nav {
        align-self: center;
    }

    .courses-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .courses-hero-visual {
        flex-direction: column-reverse;
    }

    .courses-hero-note {
        margin-top: 0;
    }

    .courses-hero-image {
        border-radius: 16px; /* the organic blob shape doesn't read well this small either */
    }

    .courses-hero-blob {
        display: none;
    }

    .courses-features {
        flex-direction: column;
    }

    .courses-feature:not(:last-child)::after {
        display: none;
    }

    .site-footer {
        flex-direction: column;
        text-align: center;
    }

    /* Six links don't fit one row on a phone — wrap instead of making
       the whole page wider than the screen. */
    .footer-links {
        justify-content: center;
    }

    .auth-page {
        padding: 2.5rem 1.25rem 3rem;
    }

    .auth-mascots {
        display: none;
    }

    .resources-hub-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 1.25rem 1.5rem;
    }

    .resources-hub-hero-image {
        clip-path: none; /* the ellipse cut doesn't read well this small */
        border-radius: 16px;
    }

    .resources-hub-hero-blob {
        display: none;
    }

    .resources-hub-tabs {
        padding: 0 1.25rem 1rem;
    }

    .resources-hub-section {
        padding: 1rem 1.25rem 3rem;
    }

    .notfound h1 {
        font-size: 1.9rem;
    }

    .exercise-player {
        padding: 1.25rem 1.25rem 0;
    }

    .exercise-bar {
        margin: 1.25rem -1.25rem 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .exercise-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .exercise-bar-button {
        width: 100%;
    }

    .exercise-bar-hint {
        display: none;
    }

    .exercise-card {
        padding: 1.25rem;
    }

    .exercise-prompt {
        font-size: 1.15rem;
    }

    .exercise-result {
        padding: 2rem 1.25rem 3rem;
    }

    .exercise-result-hero {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .exercise-result-actions {
        justify-content: center;
    }

    .builder-page {
        padding: 1.75rem 1.25rem 3rem;
    }

    .builder-editor {
        grid-template-columns: 1fr;
    }

    .builder-preview {
        position: static;
    }

    .builder-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .builder-card-tools {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .builder-section-heading--row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Newsletter (staff "Бюлетин" pages, profile toggle) ---------- */

.mail-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin: 1rem 0 2rem;
}

.mail-stats-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.mail-list-heading {
    font-size: 1.2rem;
    margin: 1.5rem 0 0.75rem;
}

/* .staff-page h2 would otherwise zero the space above these list headings. */
.staff-page .mail-list-heading {
    margin-top: 1.75rem;
}

.mail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mail-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.9rem 1.2rem;
    border-radius: 16px;
    background: var(--color-card-bg);
}

.mail-list-subject {
    flex: 1 1 240px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.mail-list-meta {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Compose: one white card like a mail client's "new message" window */
.mail-compose {
    max-width: 860px;
    margin-top: 1rem;
    padding: 0.5rem 1.5rem 1.5rem;
    border-radius: 20px;
    background: var(--color-card-bg);
    box-shadow: 0 6px 24px rgba(55, 86, 68, 0.08);
}

.mail-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-surface);
}

.mail-row-label {
    flex: 0 0 3.5rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-muted);
}

.mail-to {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-primary);
    font-size: 0.9rem;
}

.mail-subject {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--color-text);
}

.mail-subject:focus {
    outline: none;
}

.mail-row:focus-within {
    border-bottom-color: var(--color-accent);
}

.mail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin: 0.9rem 0 0;
    padding: 0.3rem;
    border-radius: 999px;
    background: var(--color-background);
}

.mail-toolbar[hidden] {
    display: none;
}

.mail-toolbar button {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    cursor: pointer;
}

.mail-toolbar button:hover {
    background: var(--color-card-bg);
}

.mail-toolbar button.is-active {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}

.mail-toolbar button small {
    font-size: 0.6rem;
}

.mail-toolbar-divider {
    width: 1px;
    height: 1.3rem;
    margin: 0 0.25rem;
    background: var(--color-surface);
}

.mail-editor {
    min-height: 16rem;
    margin-top: 0.6rem;
    padding: 0.9rem 0.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    outline: none;
}

.mail-editor.is-empty::before {
    content: attr(data-placeholder);
    color: var(--color-muted);
    pointer-events: none;
}

.mail-editor h2,
.mail-preview-body h2 {
    font-size: 1.3rem;
    margin: 0.8rem 0 0.4rem;
}

.mail-editor p,
.mail-preview-body p {
    margin: 0 0 0.8rem;
}

.mail-editor blockquote,
.mail-preview-body blockquote {
    margin: 0 0 0.8rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--color-surface);
    color: var(--color-primary);
}

.mail-editor a,
.mail-preview-body a {
    color: var(--color-accent);
}

/* Without JavaScript the textarea is the editor */
.mail-body-source {
    width: 100%;
    min-height: 16rem;
    margin-top: 0.9rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-surface);
    border-radius: 12px;
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
}

.mail-body-source[hidden] {
    display: none;
}

.mail-attachments {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-surface);
}

.mail-attachment-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.8rem;
    padding: 0;
}

.mail-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    border: 1px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-background);
    font-size: 0.9rem;
}

.mail-attachment a {
    color: var(--color-primary);
    text-decoration: none;
}

.mail-attachment small {
    color: var(--color-muted);
}

.mail-attachment-remove {
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-rose-wine);
    cursor: pointer;
}

.mail-attachment-remove:hover {
    background: var(--color-card-bg);
}

.mail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.mail-delete {
    margin: 0 0 0 auto;
}

/* Send confirmation / sent record + the email preview */
.mail-send-summary {
    max-width: 860px;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: rgba(182, 181, 127, 0.2); /* as .site-message--success */
}

.mail-send-summary p {
    margin: 0 0 0.75rem;
}

.mail-send-summary form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.mail-preview {
    max-width: 640px;
    border-radius: 16px;
    background: var(--color-card-bg);
    box-shadow: 0 6px 24px rgba(55, 86, 68, 0.08);
    overflow: hidden;
}

.mail-preview-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 3px solid var(--color-accent);
}

.mail-preview-brand {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
}

.mail-preview-header h2 {
    margin: 0.2rem 0 0;
    font-size: 1.3rem;
}

.mail-preview-body {
    padding: 1.25rem 1.5rem;
    line-height: 1.6;
}

.mail-preview-files {
    padding: 0 1.5rem;
}

.mail-preview-footer {
    padding: 1rem 1.5rem 1.25rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* Profile: subscribe / unsubscribe */
.profile-newsletter {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: var(--color-background);
    font-size: 0.92rem;
}

.profile-newsletter p {
    margin: 0 0 0.75rem;
}

.profile-newsletter form {
    margin: 0;
}

/* ---------- Dictionary (vocabulary.js) ---------- */

/* Level tabs */
.vocab-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.vocab-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-card-bg);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-decoration: none;
}

.vocab-tab small {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--color-background);
    font-size: 0.75rem;
}

.vocab-tab:hover {
    border-color: var(--color-primary);
}

.vocab-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

.vocab-tab.is-active small {
    background: color-mix(in srgb, var(--color-text-on-dark) 20%, transparent);
}

.vocab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 1.5rem;
}

.vocab-search {
    flex: 1 1 260px;
    max-width: 380px;
}

.vocab-count {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.vocabulary-course-group[hidden],
.vocab-manage-item[hidden],
.vocab-entry[hidden] {
    display: none;
}

.vocabulary-course-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    color: var(--color-primary);
}

.vocabulary-course-title small {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-muted);
}

/* Dictionary columns: words run DOWN each column, then across — the way
   a printed dictionary reads; left-aligned bold words make the column
   quick to scan. As many ~15rem columns as fit: 3 on a laptop, 1 on a
   phone. An entry never splits across two columns. */
.vocab-columns {
    columns: 15rem;
    column-gap: 2.25rem;
    column-rule: 1px solid var(--color-surface);
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.vocab-entry {
    break-inside: avoid;
    padding: 0.35rem 0;
    line-height: 1.35;
}

.vocab-entry-word {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}

.vocab-entry-word::after {
    content: " —";
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-muted);
}

.vocab-entry-translation {
    color: var(--color-text);
}

.vocab-entry-note {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-muted);
}

/* Teacher: quick-add row + list */
.vocab-manage-summary {
    margin: 0.25rem 0 1rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.vocab-quick-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
    gap: 0.6rem;
    padding: 0.75rem;
    border-radius: 18px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
    scroll-margin-top: 6rem;
}

.vocab-quick-add input {
    min-width: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}

.vocab-quick-add input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.vocab-quick-add + .results-note {
    margin: 0.5rem 0 1.25rem 0.25rem;
}

.vocab-manage-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 1.1rem;
    border-radius: 14px;
    background: var(--color-card-bg);
    box-shadow: 0 2px 10px rgba(55, 86, 68, 0.06);
}

.vocab-manage-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-surface);
    scroll-margin-top: 6rem;
}

.vocab-manage-item:last-child {
    border-bottom: none;
}

.vocab-manage-item.is-new {
    margin: 0 -0.6rem;
    padding: 0.7rem 0.6rem;
    border-radius: 10px;
    background: rgba(182, 181, 127, 0.2);
}

.vocab-manage-text {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr);
    gap: 0.15rem 1rem;
    min-width: 0;
}

.vocab-manage-word {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}

.vocab-manage-note {
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.vocab-manage-tools {
    display: inline-flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .vocab-quick-add {
        grid-template-columns: 1fr;
    }

    .vocab-manage-text {
        grid-template-columns: 1fr;
    }

    .vocab-manage-note {
        grid-column: 1;
    }
}

/* ---------- Exercise types: "Напиши думата" (TY) and "Подреди изречението" (WO) ---------- */

/* TY: the text boxes sit in the sentence, like gaps you write into. */
.exercise-type-input {
    width: 7ch;
    min-width: 5ch;
    max-width: 100%;
    margin: 0 0.25rem;
    padding: 0.05rem 0.35rem;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 6px 6px 0 0;
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: inherit;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
}

.exercise-type-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.exercise-type-input.is-correct {
    background: rgba(182, 181, 127, 0.25);
}

.exercise-type-input.is-wrong {
    border-color: var(--color-rose-wine);
    color: var(--color-rose-wine);
    text-decoration: line-through;
}

.exercise-type-input:disabled {
    opacity: 1;
    -webkit-text-fill-color: currentColor;
}

/* The right answer, written next to a wrong one */
.exercise-type-correction {
    display: inline-block;
    margin-right: 0.25rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    background: rgba(182, 181, 127, 0.25);
    color: var(--color-primary);
    font-weight: 600;
}

.exercise-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.exercise-letter {
    min-width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-card-bg);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    cursor: pointer;
}

.exercise-letter:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.exercise-letter:disabled {
    opacity: 0.4;
    cursor: default;
}

/* WO: the answer line fills with tiles; the bank holds the rest. */
.word-order-hint {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-text);
}

.word-order-line {
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
}

.word-order-answer {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.4rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 2px solid var(--color-primary);
}

.word-order-answer.is-correct {
    border-color: var(--color-primary);
    background: rgba(182, 181, 127, 0.18);
    border-radius: 12px 12px 0 0;
}

.word-order-answer.is-wrong {
    border-color: var(--color-rose-wine);
}

.word-order-answer.is-wrong .word-tile {
    border-color: var(--color-rose-wine);
    color: var(--color-rose-wine);
}

.word-order-placeholder {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.word-order-placeholder[hidden] {
    display: none;
}

.word-order-end {
    padding-bottom: 0.7rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
}

.word-order-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 3rem;
}

.word-tile {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-card-bg);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(55, 86, 68, 0.15);
    transition: transform 0.1s ease;
}

.word-tile:hover:not(:disabled) {
    transform: translateY(-1px);
}

.word-tile:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}

.word-tile:disabled {
    cursor: default;
}

.word-tile--static {
    display: inline-block;
    margin: 0.15rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.95rem;
    cursor: default;
}

.word-order-correction {
    margin: -0.5rem 0 1rem;
    padding: 0.5rem 0.9rem;
    border-radius: 12px;
    background: rgba(182, 181, 127, 0.25);
    color: var(--color-primary);
    font-weight: 600;
}

/* With the script the tiles post the answer; without it, type it here. */
.word-order-fallback {
    width: 100%;
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-surface);
    border-radius: 12px;
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 1rem;
}

.is-enhanced .word-order-fallback {
    display: none;
}

/* Builder cards / previews for the two types */
.builder-gap--typed {
    background: var(--color-card-bg);
    border-bottom-style: dashed;
}

.builder-also {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.builder-also .builder-option {
    margin-left: 0.25rem;
}

.builder-hint {
    margin: 0 0 0.4rem;
    font-style: italic;
    color: var(--color-text);
}

.builder-tiles {
    margin: 0;
}

.word-order-answer--preview {
    margin-bottom: 1rem;
}

/* ---------- Page motion ----------
   Entrance: on every page the kicker and title rise in; the home hero's
   lines slide up out of a mask, then the button, photo, pink circle and
   tag follow. Scroll: [data-reveal] blocks and the children of
   [data-reveal-stagger] fade up once as they come into view (base.html
   marks them .is-revealed). Only the opacity/translate/scale properties
   move — never transform — so hover lifts (.course-card) keep working.
   "Reduce motion" turns all of it off: the media query below, and
   base.html doesn't set .reveal-ready, so nothing starts hidden. */

@keyframes ts-rise {
    from {
        opacity: 0;
        translate: 0 18px;
    }
}

@keyframes ts-line-up {
    from {
        translate: 0 110%;
    }
}

@keyframes ts-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes ts-pop {
    from {
        opacity: 0;
        scale: 0.6;
    }
}

@keyframes ts-draw {
    from {
        scale: 0 1;
    }
}

/* The hero title's lines: each is its own mask the text slides up out of.
   The padding keeps descenders (у, д, щ) from being clipped. */
.hero-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

.hero-line > span {
    display: inline-block;
}

.hero-copy em {
    position: relative;
    z-index: 0; /* its own layer, so the highlight sits under the word, not under the page */
}

/* A soft highlight drawn under "истории" once the lines are in. */
.hero-copy em::after {
    content: "";
    position: absolute;
    left: -0.05em;
    right: -0.05em;
    bottom: 0.06em;
    height: 0.22em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    transform-origin: left center;
    z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-line > span {
        animation: ts-line-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .hero-line + .hero-line > span {
        animation-delay: 0.12s;
    }

    .hero-copy em::after {
        animation: ts-draw 0.6s 0.85s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    }

    .hero-copy .btn {
        animation: ts-rise 0.7s 0.4s ease-out both;
    }

    .hero-image-wrap {
        animation: ts-fade-in 1.1s 0.1s ease-out both;
    }

    .hero-bubble {
        animation: ts-pop 0.8s 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
    }

    .hero-tag {
        animation: ts-rise 0.7s 0.8s ease-out both;
    }

    /* Every other page: kicker, then title, then the hero paragraph. */
    main .kicker {
        animation: ts-rise 0.6s ease-out both;
    }

    main h1:not(:has(.hero-line)) {
        animation: ts-rise 0.7s 0.08s ease-out both;
    }

    :is(.courses-hero-copy, .about-story-inner) > p {
        animation: ts-rise 0.7s 0.18s ease-out both;
    }

    .courses-hero > .courses-hero-visual {
        animation: ts-rise 0.9s 0.15s ease-out both;
    }

    /* Reviews fade in when the arrows switch them (and on first show). */
    .testimonial-item:not([hidden]) {
        animation: ts-fade-in 0.45s ease-out both;
    }
}

.reveal-ready [data-reveal]:not(.is-revealed),
.reveal-ready [data-reveal-stagger]:not(.is-revealed) > * {
    opacity: 0;
}

[data-reveal].is-revealed {
    animation: ts-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-reveal-stagger].is-revealed > * {
    animation: ts-rise 0.7s calc(var(--reveal-i, 0) * 90ms) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --menu-shift: 0px; /* menus fade without sliding */
    }
}

/* ---------- Page transitions ----------
   Going from page to page crossfades instead of jumping, in browsers
   with cross-document view transitions (Chrome, Edge, Safari — the rest
   load pages as before). The header keeps still: it has its own
   view-transition-name (see "Navbar"). A language's photo glides between
   its course card and the language page: that page's photo always has
   the name "lang-photo" ([data-lang-photo]); base.html gives it to a
   card's photo only for the moment you leave by that card or come back
   to it. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

[data-lang-photo] {
    view-transition-name: lang-photo;
}

::view-transition-group(lang-photo) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
    border-radius: 18px;
    overflow: hidden;
}

::view-transition-old(lang-photo),
::view-transition-new(lang-photo) {
    height: 100%;
    object-fit: cover;
}

/* Arrived through a transition: the photo is already flying in, so its
   frame doesn't also fade up (see "Page motion"), and a card the photo
   flies back into is shown at once. */
.vt-arrived .courses-hero-visual:has([data-lang-photo]) {
    animation: none;
}

.reveal-instant.is-revealed > * {
    animation: none;
}

/* Links to a spot on the same page glide there, and stop clear of the
   pinned menu band (keyboard focus scrolls clear of it too). */
html {
    scroll-padding-top: calc(var(--nav-height, 3.5rem) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------- Touch ----------
   Buttons and cards press in when tapped or clicked, instead of the
   phone's grey tap flash; hover lifts only where there's a real pointer
   (on a phone a tap leaves :hover stuck on). */
.btn,
.course-card,
.carousel-arrow,
.navbar-toggle,
.dropdown-caret,
.navbar-menu a,
.hero-dot,
.hero-toggle {
    -webkit-tap-highlight-color: transparent;
}

.btn {
    transition: scale 0.12s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.btn:active:not(:disabled) {
    scale: 0.97;
}

.course-card:active {
    scale: 0.985;
}

.carousel-arrow:active,
.navbar-toggle:active,
.dropdown-caret:active {
    scale: 0.92;
}

@media (hover: none) {
    .course-card:hover {
        transform: none;
        box-shadow: 0 2px 10px rgba(55, 86, 68, 0.08);
    }
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
    /* A 20px gutter instead of 32px gives the content back an eighth of
       the screen width. */
    .courses-section,
    .about-section,
    .testimonials-section,
    .newsletter-section,
    .courses-hero,
    .upcoming-section,
    .courses-features,
    .site-messages,
    .staff-page,
    .resources-page,
    .about-story,
    .team-section,
    .library-section,
    .offering-body,
    .offering-cta,
    .site-page,
    .notfound,
    .site-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hero-copy h1 {
        font-size: 2.3rem;
    }

    .courses-hero-copy h1,
    .courses-hero-copy h2 {
        font-size: 2rem;
    }

    /* "Нашите курсове … Всички курсове →": the link drops under
       the heading instead of squeezing it. */
    .section-heading {
        flex-wrap: wrap;
        gap: 0.35rem 1rem;
    }

    .section-heading .link-arrow {
        white-space: nowrap;
    }

    .resources-hub-hero-copy h1 {
        font-size: 2rem;
    }

    .staff-student-row {
        padding: 0.9rem 1.1rem;
    }
}

/* Long unbroken text — an email as a page title, in a list row — wraps
   instead of pushing the page wider than a phone screen. */
h1,
h2,
h3 {
    overflow-wrap: break-word;
}

.section-heading > *,
.staff-student-row .staff-resource-info {
    min-width: 0;
}

.staff-student-email {
    overflow-wrap: anywhere;
}

.course-card-arrow {
    flex-shrink: 0;
}

/* Phones keep the text size we set when turned sideways. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------- Touch screens ----------
   An iPhone zooms the page in when you tap a text box whose text is
   smaller than 16px — these were the browser's default 13px. */
@media (max-width: 768px), (pointer: coarse) {
    .resources-filters select,
    .staff-search-input {
        font-size: 1rem;
    }
}

/* Small links and buttons get a bigger invisible tap area (padding the
   negative margin cancels out, so nothing moves); the drag-and-drop gaps
   and the photo slideshow's dots grow a little. */
@media (pointer: coarse) {
    .link-arrow,
    .builder-unpublish,
    .resource-attachment-remove {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        margin-top: -0.6rem;
        margin-bottom: -0.6rem;
    }

    .resource-file-tile-delete {
        top: -0.1rem;
        right: 0.05rem;
        padding: 0.6rem;
    }

    .dd-blank {
        min-height: 2.25rem;
        padding: 0.3rem 0.7rem;
    }

    .hero-dot {
        width: 24px;
        height: 36px;
    }

    .hero-dot.is-active {
        width: 48px;
    }

    .hero-toggle {
        width: 36px;
        height: 36px;
    }
}

/* Swiping the hero photos or the reviews sideways changes them (the
   scripts); vertical swipes still scroll the page. */
.hero-image,
.testimonials-list {
    touch-action: pan-y;
}