/* ==========================================================================
   Yoga for Heart — "Gentle Healing" theme
   Soft rose & blush, accessibility-first: large readable type, high contrast,
   big tap targets, generous whitespace. Light + dark mode aware.
   ========================================================================== */

:root {
    /* Palette */
    --ivory:      #FDFBF9;
    --blush:      #F6E7E4;
    --blush-deep: #EFD6D2;
    --rose:       #D69A9A;
    --rose-deep:  #A94E5E;   /* buttons / links — AA contrast on ivory */
    --rose-dark:  #8C3D4C;   /* hover */
    --plum:       #4A343B;   /* headings */
    --heart-red:  #C0392B;   /* logo accent */
    --text:       #3A2F32;
    --muted:      #6B5A5E;
    --line:       #E7D6D2;
    --white:      #ffffff;
    --success-bg: #E4F1E6;
    --success-fg: #2E6B3A;
    --error-bg:   #FBE4E4;
    --error-fg:   #9E2A2A;
    --inactive-bg: #E4D6D3;   /* light tint of the site plum-brown */
    --inactive-fg: #4A343B;   /* site plum-brown (matches headings) */
    --warn-bg:    #FBEFD9;    /* soft amber — "winding down" / cancelling */
    --warn-fg:    #8A5A12;
    --info-bg:    #E1ECF7;    /* soft blue — "invited to join" (set-your-PIN) */
    --info-fg:    #1F5A8A;

    /* CTA band — explicit tokens so contrast is controlled per theme */
    --cta-bg-1:      #A94E5E;   /* gradient start */
    --cta-bg-2:      #8C3D4C;   /* gradient end */
    --cta-fg:        #ffffff;
    --cta-btn-bg:    #ffffff;
    --cta-btn-fg:    #8C3D4C;
    --cta-btn-hover: #F6E7E4;

    /* Primary button — soft pink fill with a brown label so the text reads
       clearly (white on pink was low contrast, especially in dark mode). */
    --btn-bg:        #D69A9A;   /* soft rose */
    --btn-fg:        #4A343B;   /* plum / brown label */
    --btn-hover-bg:  #C98A8A;   /* slightly deeper on hover */

    /* Surfaces */
    --bg:         var(--ivory);
    --surface:    var(--white);
    --header-bg:  rgba(253, 251, 249, 0.92);

    /* Type */
    --font-head: 'Quicksand', system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
    --fs-base: 1.125rem;   /* 18px — larger default for readability */

    /* Shape */
    --radius:    18px;
    --radius-sm: 12px;
    --shadow:    0 10px 30px rgba(74, 52, 59, 0.10);
    --shadow-sm: 0 4px 14px rgba(74, 52, 59, 0.08);
    --container: 1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ivory:      #1a1416;
        --blush:      #241a1d;
        --blush-deep: #2c2024;
        --rose:       #d99ea0;
        --rose-deep:  #e79aa6;
        --rose-dark:  #f2b6c0;
        --plum:       #f4e6e8;
        --text:       #ece0e2;
        --muted:      #c3aeb2;
        --line:       #3a2c30;
        --white:      #241a1d;
        --surface:    #241a1d;
        --header-bg:  rgba(26, 20, 22, 0.92);
        --shadow:     0 10px 30px rgba(0, 0, 0, 0.4);
        --shadow-sm:  0 4px 14px rgba(0, 0, 0, 0.35);
        --success-bg: #1f3324;
        --success-fg: #9fd6a8;
        --error-bg:   #3a2023;
        --error-fg:   #f0a8a8;
        --inactive-bg: #33281f;   /* deep warm brown */
        --inactive-fg: #cbb49c;   /* soft tan */
        --warn-bg:    #3a2e17;    /* deep amber for dark mode */
        --warn-fg:    #f0cf8f;
        --info-bg:    #1b2c3d;    /* deep blue for dark mode */
        --info-fg:    #9ac8ee;

        /* Keep the CTA band a deep, saturated rose in dark mode so white
           text stays readable (the base rose tokens flip to pale pinks). */
        --cta-bg-1:      #8C3D4C;
        --cta-bg-2:      #642835;
        --cta-fg:        #ffffff;
        --cta-btn-bg:    #ffffff;
        --cta-btn-fg:    #8C3D4C;
        --cta-btn-hover: #F6E7E4;

        /* Soft pink fill + dark brown label keeps the button readable when
           the base rose tokens flip to pale pinks in dark mode. */
        --btn-bg:        #e79aa6;
        --btn-fg:        #3a1f25;
        --btn-hover-bg:  #f2b6c0;
    }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Full-height flex column so the footer is pushed to the bottom of the
       viewport even when the page content is short (e.g. the login/paywall
       screens). main grows to fill any leftover space. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--plum);
    line-height: 1.2;
    margin: 0 0 0.5em;
    font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p { margin: 0 0 1.1em; }

a { color: var(--rose-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rose-dark); }

:focus-visible {
    outline: 3px solid var(--rose-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--btn-bg);
    color: var(--btn-fg);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 1000;
}
.skip-link:focus { left: 0; color: var(--btn-fg); }

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--btn-hover-bg); color: var(--btn-fg); transform: translateY(-2px); }
.btn-secondary {
    background: transparent;
    color: var(--rose-deep);
    border-color: var(--rose-deep);
}
.btn-secondary:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
    display: block;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    min-height: 3.6rem;
    box-sizing: border-box;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--plum);
}
.brand-logo { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.9rem; color: var(--plum); }
.brand-name em { color: var(--rose-deep); font-style: italic; font-weight: inherit; }
.brand-tag { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }

.primary-nav ul {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-nav a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
}
.primary-nav a:hover { background: var(--blush); color: var(--plum); }
.primary-nav a[aria-current="page"] { color: var(--rose-deep); background: var(--blush); }
.nav-cta a {
    background: var(--btn-bg);
    color: var(--btn-fg);
    margin-left: 0.35rem;
}
.nav-cta a:hover { background: var(--btn-hover-bg); color: var(--btn-fg); }
/* The rose fill makes Sign out read heavier than the plain text links beside
   it, so carrying their full 0.6rem vertical padding turned it into a visibly
   taller, chunkier box. Type and horizontal padding stay identical to a nav
   link; only the vertical padding is trimmed, which sizes the capsule to the
   link's text instead of to its whole padding box. Scoped to the sign-out CTA
   so the public "Members" button keeps its fuller shape. */
.nav-cta--signout a { padding-block: 0.3rem; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 2px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: var(--plum);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .primary-nav {
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease;
    }
    .primary-nav.open { max-height: 32rem; }
    .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem; }
    .primary-nav a { padding: 0.9rem 1rem; border-radius: var(--radius-sm); font-size: 1.1rem; }
    /* Stacked menu: every row is a full-width block, so the CTA takes the
       same padding as its neighbours again. */
    .nav-cta a { margin: 0.35rem 0 0; text-align: center; }
    .nav-cta--signout a { padding-block: 0.9rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(160deg, var(--blush) 0%, var(--ivory) 70%);
    overflow: hidden;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    color: var(--rose-deep);
    background: var(--surface);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.2rem;
}
.hero h1 { margin-bottom: 0.4rem; }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
.hero-media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 1160 / 588;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .hero-media { order: -1; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section.section-tight-top { padding-top: clamp(1.25rem, 3vw, 2rem); }
.section-alt { background: var(--blush); }
.section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rose-deep);
    display: block;
    margin-bottom: 0.6rem;
}
.lead { font-size: 1.15rem; }

/* Feature cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.card .card-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--blush);
    color: var(--rose-deep);
    margin-bottom: 1rem;
}
.card h3 { margin-bottom: 0.35rem; }
.card p { color: var(--muted); margin: 0; }

/* Step numbers under "How it works": a circular badge instead of the default
   rounded-square icon tile, with the number centered and sized up. The default
   .card-icon fill uses --blush, which equals --surface in dark mode (so the
   circle vanishes into the card). Add a rose ring and a deeper fill so the
   circle stays visible in both light and dark themes. */
.card .card-icon.card-step-num {
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    background: var(--blush-deep);
    border: 2px solid var(--rose);
    color: var(--rose-deep);
}

/* Split (image + text) */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.split.reverse .split-media { order: 2; }
/* Keep the photo pinned to the bottom of its column, no matter how tall the
   text beside it is. The copy column keeps the parent's centering. */
.split-media { align-self: end; }
.split-media img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
@media (max-width: 800px) {
    .split { grid-template-columns: 1fr; }
    .split.reverse .split-media { order: 0; }
}

/* --------------------------------------------------------------------------
   Class schedule cards
   -------------------------------------------------------------------------- */
.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    align-items: stretch;
}
.class-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.9rem 1.6rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.class-card::before {
    /* soft accent bar along the top, matching testimonial cards */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rose), var(--rose-deep));
}
.class-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.class-card h3 { margin: 0 0 0.5rem; color: var(--rose-deep); }
.class-card p {
    color: var(--muted);
    line-height: 1.7;
    flex: 1 1 auto;
    margin: 0;
}
.class-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.class-meta-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--blush);
    color: var(--rose-deep);
}
.class-meta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.class-day {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--plum);
}
.class-time {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.15rem;
}
.badge {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--plum);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    align-self: flex-start;
    margin-top: 1.25rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Weekly schedule — large, high-contrast agenda (built for older eyes)
   -------------------------------------------------------------------------- */
.cal-caption {
    max-width: 48ch;
    margin: 0.9rem auto 0;
    color: var(--muted);
    font-size: 1.15rem;
}

/* Week ribbon — a calm overview of the seven days, class days lit up. */
.cal-ribbon {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
}
.cal-ribbon__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--muted);
}
.cal-ribbon__day.is-class {
    background: var(--rose-deep);
    border-color: var(--rose-deep);
    color: #fff;
}
.cal-ribbon__day.is-today {
    outline: 3px solid var(--rose-deep);
    outline-offset: 3px;
}
.cal-ribbon__dot {
    position: absolute;
    bottom: 0.45rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

/* Agenda cards — one generous, legible card per class day. */
.agenda {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 2.25rem;
}
.agenda-card {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.9rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.agenda-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--blush-deep);
}
.agenda-card--today {
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 2px var(--rose-deep), var(--shadow-sm);
}

/* Day panel — a big blush block with the weekday spelled out in full. */
.agenda-card__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 1.15rem 0.75rem;
    background: linear-gradient(160deg, var(--blush) 0%, var(--blush-deep) 100%);
    border-radius: var(--radius-sm);
    text-align: center;
}
.agenda-card__dow {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rose-deep);
}
.agenda-card__full {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--plum);
}
.agenda-card__today {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--rose-deep);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    line-height: 1;
}

/* Class info */
.agenda-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}
.agenda-card__name {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--plum);
}
.agenda-card__badge {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rose-deep);
    background: var(--blush);
    border: 1px solid var(--blush-deep);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    line-height: 1;
}

/* When / where */
.agenda-card__when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    text-align: right;
}
.agenda-card__time {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--plum);
    white-space: nowrap;
}
.agenda-card__time svg { color: var(--rose-deep); flex-shrink: 0; }
.agenda-card__zoom {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rose-deep);
}

.cal-cta {
    text-align: center;
    margin-top: 2.25rem;
}

/* Stack the card cleanly on smaller screens. */
@media (max-width: 780px) {
    .agenda-card {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1.3rem 1.3rem 1.5rem;
        text-align: center;
    }
    .agenda-card__day { padding: 1rem 0.75rem; }
    .agenda-card__body { align-items: center; }
    .agenda-card__when {
        align-items: center;
        text-align: center;
    }
    .agenda-card:hover { transform: none; }
}
@media (max-width: 420px) {
    .cal-ribbon__day { width: 2.9rem; height: 2.9rem; font-size: 0.85rem; }
    .agenda-card__full { font-size: 1.5rem; }
    .agenda-card__name { font-size: 1.45rem; }
}

.info-band {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

/* Membership status band on the admin Payments screen/drawer: current state on
   the left, the "Cancel membership" action on the right. */
.billing-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.billing-status__text h3 {
    font-family: var(--font-head);
    color: var(--plum);
    margin: 0 0 0.2rem;
}
.billing-status__text p { margin: 0; color: var(--muted); }
.billing-status form { margin: 0; }

/* --------------------------------------------------------------------------
   Benefits articles + gallery
   -------------------------------------------------------------------------- */
/* Two columns on wider screens, collapsing to one on narrow screens. */
.article-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 640px) {
    .article-list { grid-template-columns: 1fr; }
}
.article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--rose);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-sm);
}
.article h3 { margin-bottom: 0.2rem; }
.article .byline { color: var(--rose-deep); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; }
.article p { color: var(--muted); margin-bottom: 0.8rem; }
.article .btn { margin-top: auto; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.gallery figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4 / 3;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery figure:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    align-items: stretch;
}
.quote {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.5rem 1.9rem 1.75rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.quote::before {
    /* soft accent bar along the top */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rose), var(--rose-deep));
}
.quote:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.quote-mark {
    font-family: Georgia, serif;
    font-size: 4.5rem;
    line-height: 0.8;
    color: var(--rose);
    opacity: 0.45;
    display: block;
    margin-bottom: 0.25rem;
}
.quote blockquote {
    margin: 0;
    flex: 1 1 auto;
}
.quote blockquote p {
    margin: 0;
    color: var(--plum);
    font-size: 1.02rem;
    line-height: 1.7;
}
.quote-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.quote-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rose-deep);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}
.quote-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.quote-meta cite {
    font-style: normal;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--plum);
}
.quote-role {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-sm);
}
.membership-card__title {
    font-family: var(--font-head);
    color: var(--plum);
    margin: 0 0 1rem;
}
.membership-card__note {
    color: var(--muted);
    margin: 0 0 1.1rem;
    line-height: 1.6;
}

/* Checkbox rows on the member health-intake form: checkbox + inline label. */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: 500 !important;
    color: var(--text) !important;
}
.check-row input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--rose-deep);
}

/* Admin read-only health intake (drawer + full page). */
.health-intake {
    margin: 0 0 1rem;
    padding: 0;
}
.health-intake__row {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
}
.health-intake__row:first-child { padding-top: 0; }
.health-intake__row:last-child { border-bottom: none; }
.health-intake dt {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--plum);
    margin: 0 0 0.3rem;
}
.health-intake dd {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}
.health-intake__none { color: var(--muted); font-style: italic; }
.health-intake__meta { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Client notes (admin/notes.php, shown in the Clients drawer) */
.client-notes__add { margin: 0 0 0.5rem; }
.client-notes__add textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1.02rem;
    padding: 0.8rem 0.95rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    min-height: 90px;
    resize: vertical;
}
.client-notes__add textarea:focus { border-color: var(--rose-deep); outline: none; }
.client-notes__add-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}
.client-notes__list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.client-notes__item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
}
.client-notes__item:last-child { border-bottom: none; }
.client-notes__body {
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.client-notes__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.45rem;
}
.client-notes__meta { color: var(--muted); font-size: 0.85rem; }
.client-notes__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.client-notes__delete:hover { background: var(--line); color: var(--heart-red); }
.client-notes__delete:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

.field { margin-bottom: 1.25rem; }
.field label {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--plum);
    margin-bottom: 0.4rem;
}
.field .req { color: var(--heart-red); }
.field input,
.field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1.05rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--rose-deep); outline: none; }
.field .hint { font-size: 0.9rem; color: var(--muted); margin-top: 0.35rem; }
.field-error { color: var(--error-fg); font-size: 0.92rem; margin-top: 0.35rem; font-weight: 600; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field.two { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Custom date picker (assets/js/datepicker.js) — on-brand, accessible
   -------------------------------------------------------------------------- */
.dp {
    position: relative;
}
.dp__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1.1rem;
    text-align: left;
    color: var(--text);
    background: var(--bg);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dp__trigger:hover { border-color: var(--rose); }
.dp__trigger:focus-visible,
.dp.is-open .dp__trigger {
    outline: none;
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-deep) 22%, transparent);
}
.dp__value--empty { color: var(--muted); }
.dp__icon {
    display: inline-flex;
    color: var(--rose-deep);
    flex-shrink: 0;
}

/* Popup panel */
.dp__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.6rem);
    left: 0;
    width: min(25rem, calc(100vw - 2.5rem));
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: dp-pop 0.16s ease-out;
}
@keyframes dp-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header: nav arrows + month / year selects */
.dp__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.dp__selects {
    display: flex;
    flex: 1 1 auto;
    gap: 0.5rem;
}
.dp__select {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--plum);
    background: var(--bg);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.dp__select--year { flex: 0 0 7rem; }
.dp__select:focus-visible {
    outline: none;
    border-color: var(--rose-deep);
}
.dp__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--rose-deep);
    background: var(--blush);
    border: 1px solid var(--blush-deep);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.dp__nav:hover:not(:disabled) { background: var(--blush-deep); }
.dp__nav:active:not(:disabled) { transform: scale(0.94); }
.dp__nav:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-deep) 25%, transparent);
}
.dp__nav:disabled { opacity: 0.35; cursor: default; }

/* Weekday header */
.dp__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.35rem;
}
.dp__dow span {
    text-align: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Day grid */
.dp__grid { display: flex; flex-direction: column; gap: 0.2rem; }
.dp__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
.dp__cell { display: flex; align-items: center; justify-content: center; }
.dp__day {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dp__day:hover:not(:disabled):not(.is-selected) { background: var(--blush); }
.dp__day:focus-visible {
    outline: none;
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-deep) 22%, transparent);
}
.dp__day.is-today:not(.is-selected) { border-color: var(--rose); color: var(--rose-deep); }
.dp__day.is-selected {
    background: var(--rose-deep);
    border-color: var(--rose-deep);
    color: #fff;
}
.dp__day:disabled {
    color: var(--muted);
    opacity: 0.35;
    cursor: default;
}

/* Footer */
.dp__foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}
.dp__foot-btn {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--rose-deep);
    background: var(--blush);
    border: 1px solid var(--blush-deep);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.dp__foot-btn:hover { background: var(--blush-deep); }
.dp__foot-btn--ghost {
    color: var(--muted);
    background: transparent;
    border-color: var(--line);
}
.dp__foot-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-deep) 22%, transparent);
}

@media (max-width: 480px) {
    .dp__panel { left: 50%; transform: translateX(-50%); }
    @keyframes dp-pop {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .dp__panel { animation: none; }
}

/* Honeypot — visually and programmatically hidden from humans */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.alert {
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: currentColor; }
.alert.is-dismissing {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.alert-error   { background: var(--error-bg);   color: var(--error-fg);   border-color: currentColor; }

.captcha-q { font-weight: 700; color: var(--plum); }

/* 6-box PIN input (progressive enhancement of a single PIN field) */
.pin-boxes { display: flex; gap: 0.5rem; }
.pin-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    height: 56px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    caret-color: var(--rose-deep);
}
.pin-box:focus { border-color: var(--rose-deep); outline: none; }
.pin-box.is-filled { border-color: var(--rose-deep); }
/* Real input is kept in the DOM (submission + password managers) but hidden. */
.pin-hidden-input {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    padding: 0; border: 0; overflow: hidden;
    opacity: 0;
}
@media (max-width: 400px) {
    .pin-boxes { gap: 0.35rem; }
    .pin-box { height: 52px; font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
    background: linear-gradient(160deg, var(--blush) 0%, var(--ivory) 100%);
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.page-hero p { color: var(--muted); max-width: 60ch; margin-inline: auto; font-size: 1.15rem; }
.page-hero .hero-actions { margin-top: 1.5rem; display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(135deg, var(--cta-bg-1), var(--cta-bg-2));
    color: var(--cta-fg);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    margin-top: 2.5rem;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-band:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(74, 52, 59, 0.18); }
.cta-band h2 { color: var(--cta-fg); }
.cta-band p { color: color-mix(in srgb, var(--cta-fg) 90%, transparent); max-width: 52ch; margin-inline: auto 1.5rem; }
.cta-band .btn-primary {
    background: var(--cta-btn-bg);
    color: var(--cta-btn-fg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-band .btn-primary:hover {
    background: var(--cta-btn-hover);
    color: var(--cta-btn-fg);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}
.cta-band .btn-primary:focus-visible {
    outline: 3px solid var(--cta-btn-bg);
    outline-offset: 3px;
}
.cta-band .btn-secondary {
    background: transparent;
    color: var(--cta-fg);
    border-color: var(--cta-fg);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cta-band .btn-secondary:hover {
    background: var(--cta-btn-bg);
    color: var(--cta-btn-fg);
    border-color: var(--cta-btn-bg);
    transform: translateY(-2px);
}
.cta-band .btn-secondary:focus-visible {
    outline: 3px solid var(--cta-btn-bg);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cta-band, .cta-band:hover,
    .cta-band .btn-primary, .cta-band .btn-primary:hover {
        transform: none;
        transition: none;
    }
}

/* Members / sessions */
.session-list { display: grid; gap: 1.25rem; }
.session-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.session-item .meta h3 { margin-bottom: 0.2rem; }
.session-item .meta .date { color: var(--muted); font-weight: 600; }

/* Admin lesson cards — compact 3-up grid, member name pinned to the foot. */
.lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.lesson-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem 1.6rem 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.lesson-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--blush-deep);
}
.lesson-card-body { flex: 1 1 auto; }
.lesson-card-title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    min-width: 0;
    letter-spacing: -0.01em;
}
/* Title row: lesson name on the left, quiet clip-count chip on the right. */
.lesson-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
/* A soft, low-contrast chip so the count/duration reads as calm metadata,
   not a loud badge competing with the lesson title. */
.lesson-count-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--blush);
    color: var(--rose-deep);
    border: 0;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: 0.15rem;
}
/* Practice status under the lesson head: how many times the client has
   practised the lesson through to the end. */
.lesson-practice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}
.lesson-practice svg {
    flex: 0 0 auto;
}
.lesson-practice.is-practiced {
    color: #2e7d46;
}
.lesson-practice.is-unpracticed {
    color: var(--muted);
}
.lesson-practice.is-unpracticed svg {
    opacity: 0.5;
}
/* Lesson description: show the full text in the card, no truncation. */
.lesson-card-desc {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.lesson-card-clips {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Clip names as a calm numbered list, one line per clip. Long lessons show the
   first three, then a "+N more" toggle reveals the rest. The extra rows collapse
   to zero height by default and animate open/closed via .is-open on the list. */
.lesson-clips {
    list-style: none;
    counter-reset: clip;
    margin: 1rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--line);
}
.lesson-clip {
    counter-increment: clip;
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.55;
}
.lesson-clip + .lesson-clip {
    margin-top: 0.35rem;
}
.lesson-clip::before {
    content: counter(clip) ".";
    flex: none;
    min-width: 1.3rem;
    text-align: right;
    color: var(--plum);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}
/* Hidden extras: collapsed to nothing, then eased open when the list opens. */
.lesson-clip.is-extra {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}
.lesson-clips.is-open .lesson-clip.is-extra {
    max-height: 5rem;
    margin-top: 0.2rem;
    opacity: 1;
}
.lesson-clips-toggle {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--plum);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.lesson-clips-toggle:hover {
    text-decoration: underline;
}
/* Foot row: member name on the left, three-dots menu across on the right.
   Kept light: a hairline top rule instead of a filled bar, so the card breathes. */
.lesson-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    padding: 0.85rem 0 0.9rem;
    border-top: 1px solid var(--line);
    background: transparent;
}
.lesson-card-member {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    color: var(--plum);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
}
.lesson-card-member svg { flex: 0 0 auto; opacity: 0.75; }
.lesson-card-member-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.lesson-card-member-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lesson-card-date {
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
}
/* Three-dots (kebab) actions menu. */
.lesson-menu { position: relative; flex: 0 0 auto; }
.lesson-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rose-deep);
    cursor: pointer;
    transition: background 0.15s ease;
}
.lesson-menu-toggle:hover,
.lesson-menu-toggle[aria-expanded="true"] { background: var(--blush-deep); }
.lesson-menu-toggle:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }
.lesson-menu-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.4rem);
    min-width: 150px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 0.35rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
/* Respect the `hidden` attribute: without this the `display: flex` above
   overrides the browser's built-in `[hidden] { display: none }`, so the
   panel would be stuck open and impossible to dismiss. */
.lesson-menu-panel[hidden] { display: none; }
.lesson-menu-panel form { margin: 0; }

/* Same guard for the grid cards: `.lesson-card`/`.client-card` set
   `display: flex`, which overrides the browser's `[hidden] { display: none }`.
   Without this the live search sets `card.hidden = true` but the cards stay
   visible, so none of the admin search fields appear to filter. */
.lesson-card[hidden],
.client-card[hidden] { display: none; }

/* Live-search match highlight injected by search-highlight.js. Uses a warm
   golden-amber yellow that shares the red undertone of the site plum-brown
   (--plum #4A343B), so matched terms pop without clashing with the palette. */
mark.search-hl {
    background: #f2c14e;
    color: #3A2F32;
    border-radius: 3px;
    padding: 0 2px;
}
.lesson-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    text-decoration: none;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lesson-menu-item:hover { background: var(--blush); }
.lesson-menu-item-danger { color: var(--error-fg); }
.lesson-menu-item-danger:hover { background: var(--error-bg); }
.lesson-menu-item-muted {
    color: var(--muted, #8a8a8a);
    cursor: default;
    font-weight: 500;
}
.lesson-menu-item-muted:hover { background: transparent; }

/* Clip cards reuse the lesson-card shell (kebab menu in the foot). */
/* Inline clip preview, sits between the card head and the file-size foot. */
.clip-card-preview {
    margin: 0.9rem 0 0;
    border-radius: calc(var(--radius) - 6px);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.clip-card-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background: #000;
    object-fit: contain;
}

@media (max-width: 900px) {
    .lesson-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .lesson-grid { grid-template-columns: 1fr; }
}
.logout-row { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.logout-row form { margin: 0; }
.logout-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rose);
    border-radius: 999px;
    color: var(--rose-deep);
    font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
    line-height: 1; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.logout-btn:hover {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
    transform: translateY(-1px);
}
.logout-btn:focus-visible {
    outline: 2px solid var(--rose-deep);
    outline-offset: 2px;
}

.login-wrap { max-width: 460px; margin-inline: auto; }

/* Wider variant for form-heavy pages (e.g. the health intake questionnaire),
   which has several textareas and reads better with more horizontal room than
   the narrow login/register card. */
.login-wrap--wide { max-width: 680px; }

/* Extra-wide variant for long-form legal reading (e.g. the liability waiver),
   where dense paragraphs benefit from much more horizontal room. */
.login-wrap--legal { max-width: 960px; }

/* Member settings: lay the cards (Change PIN, Health details, Membership) out
   in three columns on desktop, dropping to two then one as the viewport
   narrows. The .login-wrap override lets each card fill its grid cell instead
   of staying capped at its standalone 460px width. */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
    /* Break out of the 1120px .container to a wider centered width so the three
       cards get more room. margin-inline recentres the wider grid on the
       parent's midpoint (50% of the container) minus half the grid's own width,
       so it stays centred on the page. */
    width: min(100vw - 2.5rem, 1320px);
    margin-inline: calc(50% - min(100vw - 2.5rem, 1320px) / 2);
}
.settings-grid .login-wrap { max-width: none; margin-inline: 0; height: 100%; }
/* Make each card a flex column so its CTA can be pinned to the bottom, lining
   up the Update PIN / Update health details / Manage membership buttons across
   cards even when the text above them is a different length. The CTA lives at a
   different nesting level per card (inside a form for PIN and Membership, a bare
   link for Health), so margin-top: auto is applied at both levels. */
.settings-grid .form-card { height: 100%; display: flex; flex-direction: column; }
.settings-grid .form-card > form { display: flex; flex-direction: column; flex: 1 1 auto; }
.settings-grid .form-card > .btn,
.settings-grid .form-card > form > .btn { margin-top: auto; }
/* The .btn is an inline-flex that stretches to full card width inside the flex
   column, so without a horizontal justification its label sits on the left.
   Center it so all three CTAs read centered. */
.settings-grid .form-card .btn { justify-content: center; }
@media (max-width: 1024px) {
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .settings-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Admin area
   -------------------------------------------------------------------------- */
.admin-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.admin-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.admin-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0;
}
.admin-nav a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--plum);
    text-decoration: none;
}
.admin-nav a:hover { background: var(--blush); }
.admin-nav a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); }
.admin-nav-signout { margin: 0; }
/* NOTE: includes/admin_nav.php is not included by any page; the admin tabs and
   Sign out that actually render come from includes/header.php (.primary-nav /
   .nav-cta--signout). Style those, not these. */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.stat-num {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--rose-deep);
    line-height: 1;
}
/* For stats whose value is text (a lesson or video title) rather than a
   number: smaller, wraps neatly, and doesn't overflow the card. */
.stat-num--sm {
    font-size: 1.15rem;
    line-height: 1.25;
    word-break: break-word;
}
.stat-label {
    display: block;
    margin-top: 0.4rem;
    color: var(--muted);
    font-weight: 600;
}

/* Tappable stat card: turns a stat into a link to My Lessons. Keeps the same
   footprint as a regular card but lifts on hover and reveals a CTA line. */
.stat-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.stat-card--link:hover,
.stat-card--link:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 20px rgba(74, 52, 59, 0.14));
    border-color: var(--rose);
}
.stat-card-cta {
    display: block;
    margin-top: 0.6rem;
    color: var(--rose-deep);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Dashboard uses a fixed 3-column grid so the six stat cards form a tidy
   3x2 block on desktop, collapsing to 2 then 1 column on smaller screens. */
.stat-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
    .stat-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .stat-grid--3 { grid-template-columns: 1fr; }
}

/* Four-column variant: the four practice-insight cards sit in a single row on
   desktop, collapsing to 2 then 1 column on smaller screens. */
.stat-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
    .stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .stat-grid--4 { grid-template-columns: 1fr; }
}

/* Five-column variant: the five practice-insight cards sit in a single row on
   desktop, collapsing to 3 then 2 then 1 column on smaller screens. */
.stat-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 940px) {
    .stat-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .stat-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .stat-grid--5 { grid-template-columns: 1fr; }
}

/* Intro copy above the insights preview grid. */
.insights-intro {
    max-width: 52ch;
    margin: -0.25rem 0 1.5rem;
    color: var(--muted);
    line-height: 1.6;
}

/* Preview grid: coming-soon insight ideas. Extra breathing room so the six
   cards sit as a clean, well-spaced 3x2 block rather than crowding together. */
.stat-grid--preview {
    gap: 1.75rem;
}
.stat-card--preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    min-height: 96px;
    border-style: dashed;
    border-color: var(--rose);
    background: var(--blush);
    box-shadow: none;
}
.stat-card--preview .stat-label {
    margin-top: 0;
    color: var(--plum);
    font-size: 1rem;
}
.stat-card--preview .stat-note {
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--rose-deep);
}

/* Revenue card: same footprint, gently tinted so the money figure stands out. */
.stat-card--revenue {
    background: linear-gradient(135deg, var(--blush), var(--surface));
    border-color: var(--rose);
}
.stat-note {
    display: block;
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.admin-cards-title {
    margin: 2rem 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}
.admin-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--rose);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.admin-card h3 { margin-bottom: 0.4rem; }
.admin-card p { color: var(--muted); margin-bottom: 0.8rem; }
.admin-card-cta { color: var(--rose-deep); font-weight: 700; font-family: var(--font-head); }

/* Data table (clients) */
.table-wrap { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.data-table th,
.data-table td {
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.data-table th {
    font-family: var(--font-head);
    color: var(--plum);
    background: var(--blush);
}
.data-table tr:last-child td { border-bottom: none; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.row-actions form { margin: 0; }

.badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.badge-active   { background: var(--success-bg); color: var(--success-fg); }
/* Plain "Invited" fallback for old rows that predate last_invite_kind. */
.badge-invited  { background: var(--blush-deep); color: var(--plum); }
/* Two invite stages, distinguished at a glance:
   "explore" (public membership nudge) reads as yellow/amber;
   "join" (the stronger, set-your-PIN invite) reads as blue, so it looks
   further along the funnel. Both dark-mode variants come from the --warn/
   --info tokens, so no extra @media override is needed here. */
.badge-invited--explore { background: var(--warn-bg); color: var(--warn-fg); }
.badge-invited--join    { background: var(--info-bg); color: var(--info-fg); }
/* Once the invitee actually opens their email link they've engaged, so the
   pill keeps the same hue as its invite stage but gains a solid ring to read
   as a step further along than a plain "sent" invite:
   "Explored" (opened the explore nudge) and "Opened invite" (opened the
   set-your-PIN invite). */
.badge-invited--explored    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); }
.badge-invited--join-opened { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-fg); }
/* "Added" (created but not yet contacted): a clean white pill. Text and
   border are pinned to fixed light-mode values so the label stays dark and
   readable on the white fill in both light and dark mode. */
.badge-added    { background: rgba(255, 255, 255, 0.6); color: #4A343B; border-color: #e0cdc9; }
.badge-inactive { background: var(--inactive-bg); color: var(--inactive-fg); }
/* Disabled / revoked (terminal "expired") access reads as red. */
.badge-disabled { background: var(--error-bg); color: var(--error-fg); }
.badge-ending   { background: var(--warn-bg); color: var(--warn-fg); }

.btn-small {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rose-deep);
    background: var(--surface);
    color: var(--rose-deep);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn-small:hover { background: var(--btn-bg); color: var(--btn-fg); }
.btn-danger { border-color: var(--error-fg); color: var(--error-fg); }
.btn-danger:hover { background: var(--error-fg); color: #fff; }

.select-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1.05rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    min-height: 48px;
}
.select-input:focus { border-color: var(--rose-deep); outline: none; }

.client-group-title {
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--line);
}

/* Client-facing private video list */
.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.video-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.video-item h3 { margin-bottom: 0.3rem; }
.video-desc { color: var(--muted); margin-bottom: 1rem; }
.video-item video {
    width: 100%;
    border-radius: var(--radius-sm);
    background: #000;
    display: block;
}

@media (max-width: 640px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    .data-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--line);
    }
    .data-table td::before {
        content: attr(data-label);
        font-family: var(--font-head);
        font-weight: 700;
        color: var(--plum);
    }
    .data-table td.row-actions { display: flex; justify-content: flex-start; }
    .data-table td.row-actions::before { content: ""; }
}

/* --------------------------------------------------------------------------
   Client cards (admin)
   -------------------------------------------------------------------------- */
/* Client roster is split into groups (Paid members, Complimentary). Each group
   carries its own heading + count, with breathing room between sections. */
.client-group + .client-group {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}
.client-group__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.client-group__title {
    margin: 0;
    font-size: 1.35rem;
    color: var(--plum);
}
.client-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--blush);
    border: 1px solid var(--blush-deep);
    color: var(--rose-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.client-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 1.75rem;
    row-gap: 3.25rem;   /* extra room so the avatar can hang over the card top */
    padding-top: 42px;  /* room for the first row's overhanging avatar */
}

.client-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.client-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

/* Banner removed: the avatar now hangs halfway over the card's own top edge. */

.client-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0 1.5rem 1.5rem;
    text-align: center;
}

.client-card__avatar {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-top: -38px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-dark));
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sm);
}
/* Circle interior tinted per account status so the color cue lives on the
   overhanging avatar (warm undertones to match the rose/plum palette). */
.client-card--active   .client-card__avatar { background: linear-gradient(135deg, #8F9A63, #566B34); } /* warm olive green */
.client-card--invited  .client-card__avatar { background: linear-gradient(135deg, #C9B7A6, #8B7460); } /* warm taupe */
.client-card--added    .client-card__avatar { background: linear-gradient(135deg, #B8AFA6, #7E756B); } /* neutral stone */
.client-card--inactive .client-card__avatar { background: linear-gradient(135deg, #6B4A52, #3A2F32); } /* site plum-brown */
.client-card--disabled .client-card__avatar { background: linear-gradient(135deg, #C96A5C, #8E2F2A); } /* warm red */

/* Complimentary (comped) members get a gold avatar instead of the green
   "active" one, so their card reads as a gifted membership at a glance and
   pairs with the gold "Free" stamp. This override must come after the
   status rules above, since comped members are also .client-card--active. */
.client-card--comped .client-card__avatar { background: linear-gradient(135deg, #B08D57, #7A5A34); } /* antique bronze-gold, matches the Free stamp + site brown */

.client-card__name {
    margin: 0.85rem 0 0.15rem;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--plum);
}
.client-card__email {
    display: inline-block;
    max-width: 100%;
    color: var(--muted);
    font-size: 0.92rem;
    text-decoration: none;
    word-break: break-word;
}
.client-card__email:hover { color: var(--rose-deep); text-decoration: underline; }

.client-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

/* "Active until mm/dd/yyyy" line: for a paying member who has cancelled but is
   still inside their paid period, this spells out the exact date their access
   ends, right under the status badge. Amber "winding down" palette to match the
   Canceled corner stamp. */
.client-card__active-until {
    margin: 0.5rem 0 0;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #8A5A12;
}

/* "Free" stamp: comped members get full access without paying, called out with
   a rotated, inked-rubber-stamp badge in the card's top-left corner. The card
   is position:relative, so this anchors to it. The slight rotation + double
   ring + star gives the hand-stamped look. */
.client-card__free-stamp {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border: 2px solid #8C6A3F;
    border-radius: 999px;
    background: color-mix(in srgb, #8C6A3F 10%, var(--surface));
    color: #6E4E2A;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transform: rotate(-11deg);
    box-shadow: 0 1px 3px rgba(74, 52, 59, 0.12), inset 0 0 0 1px color-mix(in srgb, #8C6A3F 25%, transparent);
}

/* "Canceled" stamp: a paying member who has cancelled but is still inside their
   paid period keeps access until it lapses. Mirrors the Free stamp's look but
   in an amber "winding down" palette (--warn tokens). Angled 45deg and pulled
   up/out of the top-LEFT corner so roughly half of it sits outside the card,
   like a corner ribbon. The card is position:relative with no overflow clip, so
   the overhang is visible. Cancel and Free are mutually exclusive states, so
   sharing the left corner is fine. The end date is in its tooltip. */
.client-card__cancel-stamp {
    position: absolute;
    top: 0.3rem;
    left: -0.7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border: 2px solid #B0791F;
    border-radius: 999px;
    background: color-mix(in srgb, #B0791F 10%, var(--surface));
    color: #8A5A12;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transform: rotate(-30deg);
    transform-origin: center;
    box-shadow: 0 1px 3px rgba(74, 52, 59, 0.12), inset 0 0 0 1px color-mix(in srgb, #B0791F 25%, transparent);
}
@media (prefers-color-scheme: dark) {
    .client-card__cancel-stamp {
        border-color: #E0B45F;
        background: color-mix(in srgb, #E0B45F 14%, var(--surface));
        color: #F0CF8F;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px color-mix(in srgb, #E0B45F 22%, transparent);
    }
}

/* Age chip: the single most useful number for the instructor scanning the
   list, so it gets a prominent, high-contrast band of its own right under the
   status badges. Big number + unit; a muted variant when no DOB is on file. */
.client-card__age {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--blush);
    border: 1px solid var(--blush-deep);
    color: var(--rose-deep);
}
.client-card__age-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rose-dark);
}
.client-card__age-unit {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}
.client-card__age--none {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
}

/* Info list: icon + label on the left, value aligned right. Reads well for
   mixed value types (a count, a phone number, a date) unlike big stat numbers. */
.client-card__meta {
    list-style: none;
    width: 100%;
    margin: 1.1rem 0;
    padding: 0.4rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.client-card__meta-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.1rem;
}
.client-card__meta-row + .client-card__meta-row {
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.client-card__meta-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--rose-deep);
}
.client-card__meta-label {
    font-size: 0.82rem;
    color: var(--muted);
}
.client-card__meta-value {
    margin-left: auto;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--plum);
    text-decoration: none;
    text-align: right;
}
a.client-card__meta-value:hover { color: var(--rose-deep); text-decoration: underline; }

.client-card__foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: auto;
}

/* Filled primary CTA */
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 1;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.cc-btn--primary {
    background: linear-gradient(135deg, var(--btn-bg), var(--btn-hover-bg));
    color: var(--btn-fg);
}
.cc-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.02); color: var(--btn-fg); }

/* --- Kebab menu --- */
.cc-menu { position: relative; flex: 0 0 auto; }
.cc-menu__toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cc-menu__toggle:hover,
.cc-menu.is-open .cc-menu__toggle {
    background: var(--blush);
    color: var(--rose-deep);
    border-color: var(--rose);
}

.cc-menu__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 40;
    min-width: 210px;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.cc-menu.is-open .cc-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
/* Little pointer at the bottom edge, aligned to the toggle. */
.cc-menu__panel::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}
.cc-menu__panel form { margin: 0; }

.cc-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.cc-menu__item svg { flex: 0 0 auto; color: var(--muted); transition: color 0.12s ease; }
.cc-menu__item:hover,
.cc-menu__item:focus-visible {
    background: var(--blush);
    color: var(--rose-deep);
    outline: none;
}
.cc-menu__item:hover svg,
.cc-menu__item:focus-visible svg { color: var(--rose-deep); }

.cc-menu__item--warn:hover,
.cc-menu__item--warn:focus-visible { background: #fbeee0; color: #a05a12; }
.cc-menu__item--warn:hover svg,
.cc-menu__item--warn:focus-visible svg { color: #a05a12; }

.cc-menu__item--danger { color: var(--error-fg); }
.cc-menu__item--danger svg { color: var(--error-fg); }
.cc-menu__item--danger:hover,
.cc-menu__item--danger:focus-visible { background: var(--error-bg); color: var(--error-fg); }
.cc-menu__item--danger:hover svg,
.cc-menu__item--danger:focus-visible svg { color: var(--error-fg); }

.cc-menu__sep {
    height: 1px;
    margin: 0.35rem 0.4rem;
    background: var(--line);
}

@media (max-width: 420px) {
    .client-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--plum);
    color: #f3e7e9;
    margin-top: 4rem;
}
@media (prefers-color-scheme: dark) {
    .site-footer { background: #14090c; }
}
.footer-inner {
    padding: 3rem 0 2rem;
}
.footer-nav { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: center; }
.footer-cols {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr;
    gap: 2.5rem;
}
.footer-brand { display: flex; align-items: center; gap: 1.25rem; }
.footer-brand img { margin-bottom: 1rem; background: #fff; border-radius: 12px; padding: 6px; }
.footer-brand .footer-logo { width: 96px; height: auto; margin: 0; flex-shrink: 0; background: none; border-radius: 0; padding: 0; filter: brightness(0) invert(1); display: block; }
.footer-brand-text { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-brand-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.9rem; line-height: 1.1; color: #fff; }
.footer-brand-name em { color: var(--rose-deep); font-style: italic; font-weight: inherit; }
.footer-brand p { color: #d8c4c8; max-width: 34ch; margin: 0; }
.site-footer h2 { color: #fff; font-size: 1.15rem; margin-bottom: 0.9rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; }
.footer-nav a, .footer-connect a { color: #e8d6d9; text-decoration: none; }
.footer-nav a:hover, .footer-connect a:hover { color: #fff; text-decoration: underline; }
.footer-connect p { color: #d8c4c8; }
.social-links { display: flex; gap: 0.75rem; margin-top: 1rem; }
.social-links a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    padding: 0.6rem 1rem; border-radius: 999px;
    font-family: var(--font-head); font-weight: 600;
}
.social-links a:hover { background: rgba(255,255,255,0.2); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 1.25rem 0;
}
.footer-bottom p { margin: 0; color: #c9b3b7; font-size: 0.9rem; text-align: center; }
@media (max-width: 800px) {
    .footer-cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   Video feature
   -------------------------------------------------------------------------- */
.video-feature {
    max-width: 900px;
    margin-inline: auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #000;
    aspect-ratio: 16 / 9;
}
.video-feature video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Utility spacing */
.mt-2 { margin-top: 2rem; }
.stack > * + * { margin-top: 1rem; }
.prose { max-width: 68ch; }
.prose p { color: var(--text); }

/* ==========================================================================
   Admin — video upload form (client picker, AI buttons, dropzone)
   ========================================================================== */

.upload-card { position: relative; }

/* --- Searchable client picker ------------------------------------------- */
.client-picker { position: relative; }

.cp-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 60px;
    padding: 0.6rem 1rem;
    background: var(--bg);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp-trigger:hover { border-color: var(--rose); }
.client-picker.is-open .cp-trigger,
.cp-trigger:focus-visible {
    border-color: var(--rose-deep);
    outline: none;
    box-shadow: 0 0 0 4px rgba(169, 78, 94, 0.14);
}
.cp-trigger-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}
.cp-placeholder { color: var(--muted); font-size: 1.05rem; }
.cp-trigger-meta { display: flex; flex-direction: column; min-width: 0; }
.cp-trigger-name {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--plum);
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-trigger-email {
    font-size: 0.88rem;
    color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-chevron {
    color: var(--muted);
    display: inline-flex;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.client-picker.is-open .cp-chevron { transform: rotate(180deg); color: var(--rose-deep); }

/* Avatar chips */
.cp-avatar {
    --cp-hue: 346;
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    background: hsl(var(--cp-hue) 52% 90%);
    color: hsl(var(--cp-hue) 42% 34%);
    box-shadow: inset 0 0 0 1px hsl(var(--cp-hue) 40% 80%);
}
.cp-avatar-sm { width: 38px; height: 38px; font-size: 0.92rem; }

/* Dropdown panel */
.cp-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 0.6rem;
    animation: cp-pop 0.14s ease;
}
@keyframes cp-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cp-search { position: relative; margin-bottom: 0.5rem; }
.cp-search-icon {
    position: absolute;
    left: 0.75rem; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    display: inline-flex;
    pointer-events: none;
}
.cp-search-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.6rem 0.8rem 0.6rem 2.3rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    min-height: 44px;
}
.cp-search-input:focus { border-color: var(--rose-deep); outline: none; }

.cp-list {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 288px;
    overflow-y: auto;
}
.cp-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.cp-option:hover,
.cp-option.is-active { background: var(--blush); }
.cp-option.is-selected { background: var(--blush-deep); }
.cp-option-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cp-option-name {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--plum);
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-option-email {
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rose-deep);
    background: rgba(169, 78, 94, 0.10);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}
.cp-empty {
    list-style: none;
    padding: 1rem 0.6rem;
    color: var(--muted);
    text-align: center;
    font-size: 0.95rem;
}

/* --- AI buttons --------------------------------------------------------- */
.input-with-ai {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}
.input-with-ai input {
    flex: 1;
    min-width: 0;
}
.input-with-ai .ai-btn {
    flex-shrink: 0;
    align-self: stretch;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.label-row label { margin-bottom: 0; }

.ai-cta-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--btn-fg);
    background: linear-gradient(135deg, var(--btn-bg), #c9b8f0);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}
.ai-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ai-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(123, 111, 176, 0.30); }
.ai-btn:disabled { cursor: default; opacity: 0.75; transform: none; }

.ai-btn-ghost {
    color: var(--rose-deep);
    background: transparent;
    border-color: var(--rose);
    box-shadow: none;
}
.ai-btn-ghost:hover { background: rgba(169, 78, 94, 0.08); box-shadow: none; }

.ai-note {
    font-size: 0.88rem;
    margin: 0.5rem 0 0;
    font-weight: 600;
}
.ai-note-ok    { color: var(--success-fg); }
.ai-note-error { color: var(--error-fg); }
.ai-note-busy  { color: var(--muted); }

@keyframes ai-glow {
    0%   { box-shadow: 0 0 0 0 rgba(123, 111, 176, 0.0); }
    30%  { box-shadow: 0 0 0 4px rgba(123, 111, 176, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(123, 111, 176, 0.0); }
}
.ai-filled { animation: ai-glow 0.9s ease; border-color: #7b6fb0 !important; }

@media (max-width: 560px) {
    .input-with-ai { flex-direction: column; align-items: stretch; }
    .input-with-ai .ai-btn { align-self: flex-start; }
}

/* --- File dropzone ------------------------------------------------------ */
.dropzone {
    position: relative;
    border: 2px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dropzone.is-enhanced { cursor: pointer; }
.dropzone.is-enhanced:hover { border-color: var(--rose); }
.dropzone.is-dragging {
    border-color: var(--rose-deep);
    background: var(--blush);
}
.dropzone.has-file { border-style: solid; cursor: default; }

.dropzone-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1.25rem;
    pointer-events: none;
}
.dz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--rose-deep);
    margin-bottom: 0.85rem;
    transition: transform 0.15s ease;
}
.dropzone.is-dragging .dz-icon { transform: scale(1.08); }
.dz-title {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--plum);
    margin: 0 0 0.15rem;
    font-size: 1.1rem;
}
.dz-sub { color: var(--muted); margin: 0 0 0.5rem; }
.dz-link { color: var(--rose-deep); font-weight: 700; text-decoration: underline; }
.dropzone-face .hint { margin-top: 0.25rem; }

.dropzone-file {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
}
.dz-file-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--blush);
    color: var(--rose-deep);
}
.dz-file-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dz-file-name {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--plum);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-file-size { font-size: 0.85rem; color: var(--muted); }
.dz-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.dz-remove:hover { background: var(--error-bg); color: var(--error-fg); }
.dz-remove:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(169, 78, 94, 0.25); }

/* --------------------------------------------------------------------------
   Membership paywall (dashboard "Become a member today" gate)
   -------------------------------------------------------------------------- */
.btn-lg {
    min-height: 56px;
    padding: 0.95rem 2.4rem;
    font-size: 1.15rem;
}

.paywall {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-sm);
}
.paywall .eyebrow { justify-content: center; }
.paywall-title { margin: 0.5rem 0 0.75rem; }
.paywall-lead {
    color: var(--muted);
    max-width: 46ch;
    margin: 0 auto 1.5rem;
}
.paywall-price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2rem;
    color: var(--plum);
    margin-bottom: 1.5rem;
}
.paywall-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.75rem;
    max-width: 56ch;
    text-align: left;
    display: grid;
    gap: 0.65rem;
}
.paywall-list li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--text);
}
.paywall-list li::before {
    content: "\2713"; /* check mark */
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    background: var(--rose-deep);
    border-radius: 50%;
}
.paywall-cta { margin: 0; }
.paywall-cta .btn { width: 100%; justify-content: center; }
/* When the paywall form also carries the waiver box + signature fields, stack
   its children with breathing room instead of just holding the button. */
.paywall-cta--stacked {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
}
.paywall-note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Liability waiver: the inline acceptance box on the paywall and the standalone
   /waiver.php document share the .legal-doc typography. */
.waiver-consent { text-align: left; }
.waiver-consent__intro {
    margin: 0 0 0.75rem;
    color: var(--muted);
    line-height: 1.6;
}
/* Scrollable full-text box so the whole waiver is on screen (e-signature best
   practice) without dominating the paywall. */
.waiver-consent__scroll {
    max-height: 18rem;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.waiver-consent__scroll:focus-visible {
    outline: 2px solid var(--rose-deep);
    outline-offset: 2px;
}
.waiver-accepted {
    margin: 0;
    text-align: left;
    color: var(--text);
    font-weight: 500;
}

/* Shared legal-document typography (waiver box + /waiver.php). */
.legal-doc { line-height: 1.65; }
.legal-doc .legal-intro { color: var(--muted); }
.legal-doc h2 {
    font-size: 1.05rem;
    margin: 1.4rem 0 0.5rem;
}
.legal-doc h2:first-of-type { margin-top: 0.5rem; }
.legal-doc p { margin: 0 0 0.85rem; }
.legal-doc ul {
    margin: 0 0 0.85rem;
    padding-left: 1.25rem;
}
.legal-doc li { margin: 0 0 0.4rem; }
.legal-version {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

/* ==========================================================================
   My Lessons — practice menu list
   ========================================================================== */
/* Section heading above the insights grid and the lesson list. The second
   instance ("My lessons") gets extra top space to breathe below the stats. */
.insights-title {
    font-family: var(--font-head);
    font-size: 1.35rem;
    color: var(--text);
    margin: 0 0 1rem;
}
.insights-title + .practice-list {
    margin-top: 0;
}
.stat-grid + .insights-title {
    margin-top: 2.5rem;
}

.practice-list {
    list-style: none;
    margin: 0;
    padding: 34px 0 0;  /* top room for the first row's overhanging badge */
    display: grid;
    /* Fixed three-column layout so each card is larger and fills a third of the
       page width. Reflows to two columns on tablets and one on phones below. */
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 2.75rem;   /* extra room so each badge can hang over the card top */
}
@media (max-width: 820px) {
    .practice-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .practice-list { grid-template-columns: 1fr; }
}

.practice-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0.5rem;
    height: 100%;
    min-height: 210px;
    padding: 0 1.5rem 1.5rem;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--blush-deep);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.practice-row:hover,
.practice-row:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--rose);
}

/* Numbered badge marking each lesson in creation order (oldest = 1). Styled
   like the admin client-card avatar: a circle that hangs halfway over the
   card's top edge. */
.practice-num {
    display: grid;
    place-items: center;
    align-self: center;
    width: 56px;
    height: 56px;
    margin-top: -28px;   /* hang halfway over the card top */
    margin-bottom: 0.15rem;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-dark));
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease;
}
.practice-row:hover .practice-num,
.practice-row:focus-visible .practice-num {
    transform: scale(1.05);
}

/* Header row: lesson title on the left, movement count on the right so the
   two sit across from one another. */
.practice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.practice-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--plum);
}
.practice-desc {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
    /* Show the full description, no line clamping. */
    margin-bottom: 1.25rem;
}
/* Movement count as a rounded pill chip, sitting across from the title. */
.practice-count {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--blush-deep);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rose-deep);
    white-space: nowrap;
}
/* "Completed" pill shown when a member has finished a whole lesson. Green to
   echo the clip check in the player. Sits under the description, left-aligned. */
.practice-done-badge {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(63, 174, 90, 0.14);
    color: #2f8f47;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Pull up to sit just under the description rather than drifting down
       toward the separator (counteracts the description's bottom margin), and
       leave breathing room below the pill before the separator. */
    margin-top: -1rem;
    margin-bottom: 0.9rem;
}
.practice-done-badge svg { flex: 0 0 auto; }
/* Hairline divider separating the title/description from the CTA. Sits flush
   to the card edges via negative margins so it reads as a true separator, and
   pushes the CTA down to the bottom of the card. */
.practice-sep {
    display: block;
    width: calc(100% + 3rem);
    margin: auto -1.5rem 0;
    padding-top: 0;
    /* Soft, low-opacity hairline so the divider is subtle, not bright. */
    border-top: 1px solid rgba(214, 154, 154, 0.3);
}
/* Card footer: creation date on the left, CTA on the right, sitting across
   from one another below the separator. */
.practice-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.practice-date {
    flex: 1 1 auto;
    min-width: 0;
    align-self: flex-end;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}
/* Plain text CTA (no pill): a simple rose link with an arrow that nudges on
   hover. Sits at the right edge of the card, below the separator. */
.practice-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--rose-deep);
}
.practice-arrow svg {
    transition: transform 0.15s ease;
}
.practice-row:hover .practice-arrow,
.practice-row:focus-visible .practice-arrow {
    color: var(--rose-dark);
}
.practice-row:hover .practice-arrow svg,
.practice-row:focus-visible .practice-arrow svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .practice-row,
    .practice-num,
    .practice-arrow,
    .practice-arrow svg { transition: none; }
}

/* ==========================================================================
   Lesson player — filmstrip stage + transport controls
   ========================================================================== */
.lesson-hero {
    background: var(--blush);
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--line);
}
.lesson-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem 0.4rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg, #fff);
    color: var(--rose-deep);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lesson-back:hover,
.lesson-back:focus-visible {
    background: var(--rose-deep);
    border-color: var(--rose-deep);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(169, 78, 94, 0.22);
}
.lesson-back-icon {
    flex: none;
    transition: transform 0.15s ease;
}
.lesson-back:hover .lesson-back-icon,
.lesson-back:focus-visible .lesson-back-icon {
    transform: translateX(-3px);
}
.lesson-hero h1 { margin: 0.2rem 0; }
.lesson-hero p { color: var(--muted); margin: 0; max-width: 60ch; }

/* Break the player out of the 1120px container so the video can span almost the
   full viewport width. We subtract 3rem (1.5rem each side) rather than using a
   raw 100vw so the gutter always clears the scrollbar and never triggers a
   horizontal scroll. The thumbnail rail keeps its fixed width, so all the extra
   space goes to the video's main column. */
.lesson-player {
    --lp-strip-w: 220px;
    --lp-gap: 1.25rem;
    /* The video's height is capped so it never outgrows the viewport; its width
       follows from the 16:9 ratio. Both the strip beside it and the controls
       under it key off these so everything lines up. */
    --lp-video-max: calc((100vh - 13rem) * 16 / 9);
    position: relative;
    width: calc(100vw - 3rem);
    margin-left: calc(50% - 50vw + 1.5rem);
    margin-right: calc(50% - 50vw + 1.5rem);
}

.lp-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    /* Match the video's width so the label stays tied to the stage; the layout's
       flex gap handles the spacing below it. */
    width: calc(100% - var(--lp-gap) - var(--lp-strip-w));
    max-width: var(--lp-video-max);
}
.lp-progress-label {
    font-weight: 700;
    color: var(--rose-deep);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}
.lp-progress-title { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--plum); }

/* Two-column layout: video + controls on the left, thumbnail rail on the right. */
/* Two-row layout: the stage video and the thumbnail strip share a top row, the
   transport controls and completion CTA sit in the rows below. The whole group
   is capped to the video-plus-strip width and centred on screen. */
.lp-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lp-gap);
    max-width: calc(var(--lp-video-max) + var(--lp-gap) + var(--lp-strip-w));
    margin-inline: auto;
}

/* Top row: video on the left, thumbnail rail on the right, equal height. */
.lp-stage-row {
    display: flex;
    align-items: stretch;
    gap: var(--lp-gap);
}

/* Centre stage: one large video. Takes the row's remaining width up to the
   16:9 height cap; its rendered height drives the rail beside it. */
.lp-stage {
    position: relative;
    flex: 1 1 auto;
    align-self: flex-start;
    min-width: 0;
    max-width: var(--lp-video-max);
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;
}
.lp-main {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    cursor: pointer;
}

/* On-video caption: a glass title card in the top-left corner, floating over a
   soft scrim so the movement number and name stay readable against any frame.
   It eases up and fades away while the clip plays, then returns when paused. */
.lp-caption {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    max-width: calc(100% - 6rem);
    padding: 0.8rem 1.5rem 0.8rem 0.8rem;
    border-radius: 999px;
    /* Frosted glass panel with a hairline highlight and a lifted shadow. */
    background: linear-gradient(135deg, rgba(24, 12, 24, 0.62), rgba(24, 12, 24, 0.42));
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
/* Number chip: a rose gradient disc with the two-digit movement number. */
.lp-caption-num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(140deg, var(--rose, #e0779b), var(--rose-deep, #b23a68));
    box-shadow: 0 4px 12px rgba(178, 58, 104, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lp-caption-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.lp-caption-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.72);
}
.lp-caption-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    /* Keep long titles to a single tidy line inside the pill. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Keep the caption visible the whole time the movement plays. */
.lesson-player.is-playing .lp-caption {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .lp-caption { transition: opacity 0.2s ease; transform: none; }
    .lesson-player.is-playing .lp-caption { transform: none; }
}
/* Scale the caption up in fullscreen so it stays legible on a large screen.
   The stage gets .is-fullscreen from the player JS on fullscreen enter/exit. */
.lp-stage.is-fullscreen .lp-caption {
    left: 2.25rem;
    top: calc(2.25rem + 50px);
    gap: 1.5rem;
    max-width: calc(100% - 8rem);
    padding: 1rem 2rem 1rem 1rem;
    border-radius: 999px;
}
.lp-stage.is-fullscreen .lp-caption-num {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;
}
.lp-stage.is-fullscreen .lp-caption-eyebrow {
    font-size: 1rem;
    letter-spacing: 0.16em;
}
.lp-stage.is-fullscreen .lp-caption-title {
    font-size: 2.1rem;
}
/* Big tap-to-play overlay (visible only while paused). */
.lp-stage-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.lp-stage-play svg { margin-left: 4px; } /* optically centre the triangle */
.lp-stage-play:hover { background: rgba(0, 0, 0, 0.6); }
.lp-stage-play:active { transform: scale(0.94); }
.lp-stage-play[hidden] { display: none; }

/* Fullscreen toggle, pinned to the top-right corner of the stage. */
.lp-fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, opacity 0.2s ease;
}
.lp-fullscreen:hover { background: rgba(0, 0, 0, 0.65); }
.lp-fullscreen:active { transform: scale(0.94); }
/* Show the "enter" glyph normally and swap to "exit" while fullscreen. */
.lp-fullscreen .lp-icon-exit { display: none; }
.lp-stage.is-fullscreen .lp-fullscreen .lp-icon-enter { display: none; }
.lp-stage.is-fullscreen .lp-fullscreen .lp-icon-exit { display: inline; }
/* When the stage itself is the fullscreen element, fill the screen. */
.lp-stage:fullscreen { max-width: none; width: 100%; height: 100%; border-radius: 0; }
.lp-stage:-webkit-full-screen { max-width: none; width: 100%; height: 100%; border-radius: 0; }

/* Rail holder: a fixed-width column beside the video that, thanks to the row's
   align-items: stretch, takes exactly the video's height. */
.lp-side {
    flex: 0 0 var(--lp-strip-w);
    position: relative;
    min-width: 0;
}

/* Thumbnail rail: fills its holder (so its height matches the video) and scrolls
   internally when there are more clips than fit. Absolutely positioned so its
   own content never stretches the row taller than the video. */
.lp-filmstrip {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.lp-filmstrip::-webkit-scrollbar { width: 6px; }
.lp-filmstrip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.lp-thumb {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    opacity: 0.5; /* dim every clip that isn't active */
    transition: opacity 0.25s ease, transform 0.15s ease;
}
.lp-thumb:hover { opacity: 0.85; }
.lp-thumb.is-active { opacity: 1; }

.lp-thumb-media {
    position: relative;
    display: block;
    border-radius: var(--radius-sm, 10px);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-thumb.is-active .lp-thumb-media {
    border-color: var(--rose-deep);
    box-shadow: var(--shadow-sm);
}
.lp-thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.lp-thumb-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Green check, centred, shown only once a clip is completed. */
.lp-thumb-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.lp-thumb.is-done .lp-thumb-check { opacity: 1; }

.lp-thumb-name {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--plum);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Transport controls, sitting directly under the video and matching its width. */
.lp-controls {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-sm);
    align-self: flex-start;
    width: calc(100% - var(--lp-gap) - var(--lp-strip-w));
    max-width: var(--lp-video-max);
}
.lp-seek {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.lp-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; min-width: 3.2ch; text-align: center; }
.lp-seek-bar { flex: 1 1 auto; accent-color: var(--rose-deep); height: 6px; cursor: pointer; }

.lp-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.lp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--plum);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.lp-btn:hover { background: var(--blush); border-color: var(--rose); }
.lp-btn:active { transform: scale(0.94); }
.lp-btn-play {
    width: 64px;
    height: 64px;
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
}
.lp-btn-play:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); }

/* Lesson completion confirmation. Sits in the lesson hero card, left-aligned
   under the description; shown once the member finishes the lesson. */
.lp-complete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.25rem;
}
/* "Mark lesson practiced" CTA under the video. Hidden until every movement has
   played through, then centred beneath the transport controls. */
.lp-complete-cta {
    display: flex;
    justify-content: center;
    align-self: flex-start;
    width: calc(100% - var(--lp-gap) - var(--lp-strip-w));
    max-width: var(--lp-video-max);
    margin-top: 1.25rem;
}
.lp-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--btn-bg);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.lp-complete-btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); }
.lp-complete-btn:active { transform: scale(0.97); }
/* The CTA always ships with the HTML `hidden` attribute, and the confirmation
   message ships hidden only for a never-practiced lesson. Their explicit
   `display` above would otherwise override the attribute and show them from
   page load, so keep `hidden` authoritative here. */
.lp-complete-btn[hidden],
.lp-complete-msg[hidden] { display: none; }
.lp-complete-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.6rem 0;
    color: #2f7d43;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
}

/* Play/pause: exactly one icon is ever visible. */
.lp-btn-play .lp-icon-pause { display: none; }
.lp-btn-play.is-playing .lp-icon-play { display: none; }
.lp-btn-play.is-playing .lp-icon-pause { display: inline; }

/* Tablet / phone: stack the rail below the video and lay it out horizontally. */
@media (max-width: 820px) {
    .lp-layout { max-width: none; }
    .lp-stage-row { flex-direction: column; }
    .lp-stage { max-width: none; }
    .lp-side {
        flex: 0 0 auto;
        width: 100%;
    }
    .lp-filmstrip {
        /* Back into the normal flow, laid out as a horizontal strip. Relative
           (not static) so it stays the offset parent for scroll positioning. */
        position: relative;
        inset: auto;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.25rem 0.25rem 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }
    .lp-filmstrip::-webkit-scrollbar { height: 6px; width: auto; }
    .lp-thumb { width: 140px; scroll-snap-align: center; }
    .lp-controls,
    .lp-complete-cta,
    .lp-progress {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .lp-btn { width: 44px; height: 44px; }
    .lp-btn-play { width: 56px; height: 56px; }
    .lp-stage-play { width: 68px; height: 68px; }
    .lp-thumb { width: 120px; }
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .lp-thumb, .lp-thumb-check, .lp-thumb-media { transition: none; }
}

/* ==========================================================================
   Admin — lesson builder / composer
   ========================================================================== */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
}
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--rose-deep); }

.lesson-builder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}
/* Cancel sits directly next to Save lesson inside the drawer footer.
   Both use .btn so they share the same height. */

/* --- Lessons toolbar: client filter (left) + New lesson (right) ---------- */
.lesson-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
/* Search box that sits centered in the page hero, directly under the primary
   CTA (New lesson / New client / New clip). Shared by lessons, clients and
   library. */
.hero-search {
    margin-top: 1.1rem;
    display: flex;
    justify-content: center;
}
.hero-search .lesson-filter {
    min-width: 0;
    width: 100%;
    max-width: 460px;
}
.lesson-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 640px;
    max-width: 100%;
}
.lesson-filter-icon {
    position: absolute;
    left: 0.85rem;
    display: inline-flex;
    color: var(--rose-deep);
    pointer-events: none;
}
.lesson-filter .select-input {
    padding-left: 2.5rem;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
/* Keep the native clear (x) on the search field from crowding the text. */
.lesson-filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-left: 0.5rem;
    cursor: pointer;
    background: var(--rose-deep);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="black" stroke-width="2.5" stroke-linecap="round"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="black" stroke-width="2.5" stroke-linecap="round"/></svg>') center / contain no-repeat;
}
.lesson-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lesson-new-btn svg { flex: 0 0 auto; }
@media (max-width: 560px) {
    .lesson-filter { min-width: 0; flex: 1 1 auto; }
    .lesson-new-btn { flex: 0 0 auto; }
}

/* --- Slide-in drawer that houses the lesson builder ---------------------- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;   /* above the sticky header (z-index: 100) */
}
.drawer[hidden] { display: none; }
.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(74, 52, 59, 0.45);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: clamp(320px, 82vw, 1080px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: -12px 0 40px rgba(74, 52, 59, 0.22);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Reset the .lesson-builder / .form-card padding; the drawer owns spacing. */
    padding: 0;
    border-radius: 0;
}
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.drawer-head h2 { margin: 0; font-size: 1.5rem; }
.drawer-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--blush);
    color: var(--plum);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.drawer-close:hover,
.drawer-close:focus-visible { background: var(--blush-deep); color: var(--rose-dark); }
.drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(1.25rem, 3vw, 2rem);
}
/* Lock background scroll while the drawer is open. */
body.drawer-open { overflow: hidden; }
@media (max-width: 640px) {
    .drawer-panel { width: 100%; border-left: none; }
}
@media (prefers-reduced-motion: reduce) {
    .drawer-backdrop,
    .drawer-panel { transition: none; }
}

.lesson-composer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 720px) {
    .lesson-composer { grid-template-columns: 1fr; }
}
.composer-title { margin: 0 0 0.6rem; font-family: var(--font-head); color: var(--plum); }
.composer-count { color: var(--muted); font-weight: 600; }

.composer-library,
.composer-sequence {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
}
.composer-clip,
.composer-seq-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 0.4rem;
}
.composer-clip:last-child,
.composer-seq-item:last-child { margin-bottom: 0; }
.composer-clip-name,
.seq-name { flex: 1 1 auto; font-weight: 600; color: var(--text); }

.composer-empty {
    color: var(--muted);
    padding: 1rem 0.6rem;
    text-align: center;
    font-size: 0.95rem;
}

.composer-seq-item { cursor: grab; }
.composer-seq-item.is-dragging { opacity: 0.5; }
.seq-handle { color: var(--rose); cursor: grab; user-select: none; }
.seq-num {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--rose-deep);
    font-weight: 800;
    font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.seq-controls { display: inline-flex; gap: 0.25rem; }
.seq-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--plum);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.seq-btn:hover:not(:disabled) { background: var(--blush); border-color: var(--rose); }
.seq-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.seq-remove { color: var(--error-fg); }

/* ==========================================================================
   Admin — upload progress bar
   ========================================================================== */
.upload-progress {
    margin-top: 1rem;
}
.upload-progress-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--blush);
    overflow: hidden;
    border: 1px solid var(--line);
}
.upload-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rose), var(--rose-deep));
    transition: width 0.25s ease;
}
.upload-progress-text {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rose-deep);
}

/* While the server saves the uploaded file, animate the bar so it reads as busy
   rather than stalled at 100%. */
.upload-progress.is-processing .upload-progress-fill {
    background: linear-gradient(
        90deg,
        var(--rose) 25%,
        var(--rose-deep) 50%,
        var(--rose) 75%
    );
    background-size: 200% 100%;
    animation: upload-stripes 1.1s linear infinite;
}
@keyframes upload-stripes {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.upload-progress.is-done .upload-progress-fill {
    background: var(--success-fg, #2e7d32);
    animation: none;
}
.upload-progress.is-done .upload-progress-text { color: var(--success-fg, #2e7d32); }

.upload-progress.has-error .upload-progress-fill {
    background: var(--error-fg, #c62828);
    animation: none;
}
.upload-progress.has-error .upload-progress-text { color: var(--error-fg, #c62828); }

/* Dim the submit button while an upload is in flight. */
.upload-form.is-uploading button[type="submit"] {
    opacity: 0.6;
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .upload-progress .upload-progress-fill { transition: none; }
    .upload-progress.is-processing .upload-progress-fill { animation: none; }
}

/* -------------------------------------------------------------------------
 * Admin — client payments / invoices table (admin/payments.php).
 * A responsive "table": a real grid on wider screens, and stacked label/value
 * cards on phones (each cell carries its header via data-label).
 * ---------------------------------------------------------------------- */
.invoice-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.invoice-row {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 1fr 1fr 0.9fr;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.invoice-row--head {
    background: transparent;
    border: none;
    padding: 0 1.1rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.invoice-cell { min-width: 0; }
.invoice-cell a { color: var(--rose-deep); font-weight: 600; }
/* Neutralize the stray margin/align the shared .badge rule carries over from
   the class-card context, so the status pill sits on the row's center line. */
.invoice-cell .badge {
    margin-top: 0;
    align-self: center;
    vertical-align: middle;
}
.invoice-cell--actions { display: flex; justify-content: flex-end; }
.invoice-cell--actions form { margin: 0; }
/* Pill-shaped Refund CTA so it reads as a status-style action, in keeping
   with the rounded status pill in the same row. Tighter vertical padding and
   line-height keep it compact so it sits neatly on the row's center line. */
.invoice-cell--actions .btn {
    border-radius: 999px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    line-height: 1.1;
}
.invoice-refunded-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.invoice-noaction { color: var(--muted); }

/* Placeholder shown in the payments drawer while the fragment loads. */
.drawer-loading {
    padding: 1.5rem 0;
    color: var(--muted);
    text-align: center;
    font-weight: 600;
}

@media (max-width: 720px) {
    .invoice-row--head { display: none; }
    .invoice-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .invoice-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .invoice-cell::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--muted);
        font-size: 0.85rem;
    }
    .invoice-cell--actions { justify-content: flex-end; }
    .invoice-cell--actions::before { content: none; }
}


/* ==========================================================================
   Admin: membership packages (admin/packages.php) + paywall packages
   ========================================================================== */

/* Small / ghost / icon button variants reused on the packages screen. */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--rose-deep);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn-ghost:hover { background: var(--blush); }
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.btn-icon:hover { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-fg); }

/* Status pills on package cards. */
.pill {
    display: inline-block;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid transparent;
}
.pill-accent { background: var(--blush-deep); color: var(--plum); }
.pill-ok     { background: var(--success-bg); color: var(--success-fg); }
.pill-muted  { background: var(--inactive-bg); color: var(--inactive-fg); }

/* Editor form layout. */
.package-editor {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-sm);
}
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.field-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Price input: a leading "$" sits inside the field so the admin types only the
   number. The label members see is generated from it (see the field hint). */
.price-input-wrap { position: relative; }
.price-input-prefix {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-weight: 600;
}
.price-input-wrap .price-input-amount { padding-left: 2.1rem; }

/* Paired fields in the editor: two columns that collapse on narrow screens.
   The name row keeps the display-order field slim; the price row is even. */
.field-row {
    display: grid;
    gap: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.field-row .field { margin-bottom: 0; }
.field-row--name  { grid-template-columns: 1fr 8rem; }
.field-row--price { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
    .field-row--name,
    .field-row--price { grid-template-columns: 1fr; }
}

/* Stripe connection: an informational callout, not a form field. */
.stripe-note {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    background: var(--blush);
    border: 1px solid var(--blush-deep);
    border-radius: var(--radius-sm);
}
.stripe-note-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--rose-deep);
}
.stripe-note-body { flex: 1 1 auto; min-width: 0; }
.stripe-note-body strong {
    display: block;
    font-family: var(--font-head);
    color: var(--plum);
    margin-bottom: 0.2rem;
}
.stripe-note-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.field-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin: 1.25rem 0;
}
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.checkbox-inline input { width: 20px; height: 20px; }

/* Toggle switches for the boolean package flags (Active / Default). */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem 0;
}
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-weight: 600;
    color: var(--text);
}
.toggle-text small {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--muted);
}
.toggle-switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}
.toggle-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.toggle-track {
    display: inline-block;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--line);
    transition: background 0.2s ease;
}
.toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.toggle-switch input:checked ~ .toggle-track {
    background: var(--rose-deep);
}
.toggle-switch input:checked ~ .toggle-track::after {
    transform: translateX(20px);
}
.toggle-switch input:focus-visible ~ .toggle-track {
    outline: 2px solid var(--plum);
    outline-offset: 2px;
}

/* Benefit ("checkmark") rows in the editor. */
.package-benefits-field {
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.5rem;
}
.package-benefits-field legend {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--plum);
    padding: 0 0.4rem;
}
.benefit-rows { display: flex; flex-direction: column; gap: 0.65rem; margin: 0.5rem 0 0.9rem; }
.benefit-row { display: flex; align-items: center; gap: 0.6rem; }
.benefit-row-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success-fg);
    flex: 0 0 auto;
}
.benefit-input { flex: 1 1 auto; }
.benefit-add { margin-top: 0.25rem; }

.package-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Package cards grid (admin list). */
.package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 640px) {
    .package-grid { grid-template-columns: 1fr; }
}
.package-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.package-card--default { border-color: var(--rose-deep); box-shadow: 0 0 0 2px var(--blush-deep); }
.package-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.package-card-name { margin: 0; }
.package-card-price { margin: 0.2rem 0 0; color: var(--rose-deep); font-weight: 700; }
.package-card-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.package-card-desc { color: var(--muted); margin: 0 0 0.9rem; }
.package-card-benefits { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.package-card-benefits li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--text); }
.package-card-benefits svg { color: var(--success-fg); flex: 0 0 auto; margin-top: 0.15rem; }
.package-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.75rem; }
.package-card-foot form { margin: 0; }

/* Drag-to-reorder: a hint above the grid, a grab handle on each card, and a
   lifted look on the card being dragged. The whole card is draggable; the
   handle just signals it and gives a comfortable grab target. */
.package-grid-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.package-grid-hint svg { flex: 0 0 auto; }
.package-reorder-status { margin-left: 0.25rem; font-weight: 600; }
.package-reorder-status.is-ok { color: var(--success-fg); }
.package-reorder-status.is-error { color: var(--danger-fg, #b3261e); }
.package-card[draggable="true"] { cursor: grab; }
.package-card.is-dragging { opacity: 0.55; cursor: grabbing; box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,0.18)); }
.package-card-heading { display: flex; align-items: flex-start; gap: 0.6rem; }
.package-drag-handle {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    cursor: grab;
    margin-top: 0.1rem;
    flex: 0 0 auto;
    touch-action: none;
}
.package-drag-handle:active { cursor: grabbing; }

/* Paywall: package selection on sessions.php. */
.paywall-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
    text-align: left;
}
.paywall-package {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.paywall-package--default { border-color: var(--rose-deep); box-shadow: 0 0 0 2px var(--blush-deep); }
.paywall-package-flag {
    position: absolute;
    top: -0.7rem;
    left: 1.25rem;
    background: var(--rose-deep);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.paywall-package-name { margin: 0 0 0.25rem; }
.paywall-package-price { font-size: 1.4rem; font-weight: 800; color: var(--rose-deep); margin-bottom: 0.5rem; }
.paywall-package-desc { color: var(--muted); margin: 0 0 0.9rem; }
.paywall-package-benefits { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.paywall-package-benefits li { display: flex; align-items: flex-start; gap: 0.55rem; }
.paywall-package-benefits svg { color: var(--success-fg); flex: 0 0 auto; margin-top: 0.15rem; }
.paywall-package-cta { margin-top: auto; width: 100%; justify-content: center; }

/* Read-only Stripe link status shown in the package editor. */
.stripe-link-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
}
.stripe-link-ids {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--muted);
    word-break: break-all;
}