/* =============================================================================================
   Belén Asin — public site
   Tokens and rules from «Identidad de Marca - Belen Asin v1.pdf», section 10 (web).
   60 % earth / 30 % linen / 10 % lavender — and the 60 % earth is the PHOTOGRAPHY, not the UI.
   Roles, from IDENTIDAD-DE-MARCA.md §5 and §10:
     · Lino: default background.        · Blanco: cards (hairline, no shadow).
     · Lavanda Velo: surface of light plates — hero, highlighted sections, footer.
     · Lavanda Profundo: lavender text on light (kicker, links, lede, active states).
     · Marrón Raíz: the primary button only. Never a surface.
     · Nude / Arena: photo placeholders and separators. Oliva: rare accent, never beside lavender.
   Montserrat only. No shadows. The 1 px rule between headline and lede is the signature.
   ============================================================================================= */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300; font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-600-normal.woff2") format("woff2"); }

:root {
    --ba-lavender:      #878BAE;  /* brand colour: signature, not surface. Plain on white only at 24 px+ */
    /* Lavender text on light backgrounds. The manual's Lavanda Profundo (#6E729A) measures 4.2:1 on
       linen — under WCAG AA (4.5:1) for small text such as kickers and ledes — so the web uses it one
       step darker: 4.7:1 on linen, 5.2:1 on white. Same hue, same role. */
    --ba-lavender-deep: #666A92;
    --ba-lavender-tint: #B3ADC6;  /* Lavanda Velo: light plates, framing surfaces */
    --ba-earth:         #735B43;  /* primary button only — never a surface */
    --ba-sand:          #A88E78;
    --ba-nude:          #BBADA4;
    --ba-olive:         #B8B583;  /* accent, one piece in eight; never next to lavender */
    --ba-quartz:        #E1CFDF;  /* only the «Demanda de Amor» line */
    --ba-linen:         #F5F4F2;  /* default background */
    --ba-night:         #1E1813;  /* text */
    --ba-white:         #FFFFFF;

    --ba-font: "Montserrat", -apple-system, "Segoe UI", sans-serif;
    --ba-radius: 3px;
    --ba-rule: 1px solid rgba(30, 24, 19, .13);

    /* Type scale, ratio ≈ 1.45. No intermediate sizes are invented. */
    --ba-size-title: 2.5rem;      /* 40 px · 600 · -0.025em · 1.08 */
    --ba-size-subtitle: 1.6875rem;/* 27 px · 600 · -0.02em */
    --ba-size-lede: 1.0625rem;    /* 17 px · 300 italic */
    --ba-size-body: .9375rem;     /* 15 px · 400 · 1.6 */
    --ba-size-kicker: .6875rem;   /* 11 px · 500 · +0.20em · uppercase */

    /* Bootstrap, re-pointed at the brand */
    --bs-body-font-family: var(--ba-font);
    --bs-body-font-size: var(--ba-size-body);
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--ba-night);
    --bs-body-bg: var(--ba-linen);
    --bs-emphasis-color: var(--ba-night);
    --bs-secondary-color: rgba(30, 24, 19, .68);
    --bs-border-color: rgba(30, 24, 19, .13);
    --bs-border-radius: var(--ba-radius);
    --bs-border-radius-sm: var(--ba-radius);
    --bs-border-radius-lg: var(--ba-radius);
    --bs-link-color: var(--ba-lavender-deep);
    --bs-link-color-rgb: 102, 106, 146;
    --bs-link-hover-color: var(--ba-night);
    --bs-link-hover-color-rgb: 30, 24, 19;
    --bs-focus-ring-color: rgba(102, 106, 146, .35);
    /* Bootstrap's error red (#dc3545) is 4.1:1 on linen: validation messages get a darker one. */
    --bs-form-invalid-color: #a72834;
    --bs-form-invalid-border-color: #a72834;
}

html { font-size: 16px; }
body { font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--ba-night); }
strong, b { font-weight: 600; }

:focus-visible { outline: 2px solid var(--ba-lavender-deep); outline-offset: 2px; }

.ba-skip {
    position: absolute; left: 1rem; top: .5rem; z-index: 2000;
    padding: .5rem 1rem; background: var(--ba-night); color: var(--ba-linen);
}

/* ---------------------------------------------------------------- type */

.ba-kicker {
    font-size: var(--ba-size-kicker); font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ba-lavender-deep); margin-bottom: .75rem;
}


.ba-title {
    font-size: clamp(1.9rem, 4.5vw, var(--ba-size-title)); font-weight: 600;
    letter-spacing: -.025em; line-height: 1.08; text-transform: none;
}
.ba-subtitle {
    font-size: clamp(1.4rem, 3vw, var(--ba-size-subtitle)); font-weight: 600;
    letter-spacing: -.02em; line-height: 1.2;
}
.ba-lede {
    font-size: var(--ba-size-lede); font-weight: 300; font-style: italic; letter-spacing: 0;
    color: var(--ba-lavender-deep);
}

/* The signature rule: 1 px, separates headline from lede. Never omitted, never thickened. */
.ba-headline-rule { border-top: var(--ba-rule); margin: 1rem 0; max-width: 32rem; }

.ba-quote { font-weight: 300; font-style: italic; color: var(--ba-lavender-deep); }

.ba-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.ba-link:hover { color: var(--ba-night); }

.ba-narrow { max-width: 34rem; }

/* ---------------------------------------------------------------- buttons */

.btn { font-weight: 500; border-radius: var(--ba-radius); box-shadow: none !important; padding: .6rem 1.4rem; }

.btn-ba-primary {
    --bs-btn-color: var(--ba-linen); --bs-btn-bg: var(--ba-earth); --bs-btn-border-color: var(--ba-earth);
    --bs-btn-hover-color: var(--ba-linen); --bs-btn-hover-bg: #5f4a36; --bs-btn-hover-border-color: #5f4a36;
    --bs-btn-active-color: var(--ba-linen); --bs-btn-active-bg: #533f2d; --bs-btn-active-border-color: #533f2d;
    --bs-btn-disabled-color: var(--ba-linen); --bs-btn-disabled-bg: var(--ba-sand); --bs-btn-disabled-border-color: var(--ba-sand);
}

.btn-ba-secondary {
    --bs-btn-color: var(--ba-lavender-deep); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ba-lavender);
    --bs-btn-hover-color: var(--ba-linen); --bs-btn-hover-bg: var(--ba-lavender-deep); --bs-btn-hover-border-color: var(--ba-lavender-deep);
    --bs-btn-active-color: var(--ba-linen); --bs-btn-active-bg: var(--ba-lavender-deep); --bs-btn-active-border-color: var(--ba-lavender-deep);
}

/* ---------------------------------------------------------------- forms */

.form-control, .form-select { border-radius: var(--ba-radius); border-color: rgba(30, 24, 19, .2); background-color: var(--ba-white); }
.form-control:focus, .form-select:focus { border-color: var(--ba-lavender-deep); box-shadow: 0 0 0 .2rem rgba(102, 106, 146, .2); }
.form-label { font-weight: 500; }
.form-check-input:checked { background-color: var(--ba-lavender-deep); border-color: var(--ba-lavender-deep); }

/* ---------------------------------------------------------------- header and footer */

.ba-header { background: var(--ba-linen); border-bottom: var(--ba-rule); }
.ba-header .navbar { padding-block: 1rem; }
.ba-header .navbar-brand img { display: block; height: 32px; width: auto; }
.ba-header .nav-link { color: var(--ba-night); font-weight: 500; padding-inline: .9rem !important; }
.ba-header .nav-link:hover, .ba-header .nav-link.active { color: var(--ba-lavender-deep); }
.ba-header .navbar-toggler { border: 0; font-size: 1.6rem; color: var(--ba-night); }

/* Footer on Lavanda Velo. Lavender-deep text doesn't reach AA on it, so text stays Noche Tierra. */
.ba-footer { background: var(--ba-lavender-tint); color: var(--ba-night); padding-block: 3.5rem 2rem; margin-top: 0; }
.ba-footer a { color: var(--ba-night); text-decoration: none; }
.ba-footer a:hover { text-decoration: underline; }
.ba-footer .ba-kicker { color: rgba(30, 24, 19, .75); }
.ba-footer__name { font-size: 1.25rem; font-weight: 300; letter-spacing: .02em; margin-bottom: .25rem; }
.ba-footer__tagline { font-weight: 300; font-style: italic; color: rgba(30, 24, 19, .8); }
.ba-footer__links li { margin-bottom: .4rem; }
.ba-footer__rule { border-color: rgba(30, 24, 19, .2); opacity: 1; margin-block: 2rem 1.25rem; }

/* ---------------------------------------------------------------- sections and cards */

.ba-section { padding-block: 4.5rem; }
.ba-section--white { background: var(--ba-white); }

/* A light plate: Lavanda Velo. Lavender-deep text falls under AA here, so kicker and lede
   switch to Noche Tierra. Never two Velo blocks in a row. */
.ba-section--velo { background: var(--ba-lavender-tint); }
.ba-section--velo .ba-kicker, .ba-hero-placeholder .ba-kicker { color: rgba(30, 24, 19, .75); }
.ba-section--velo .ba-lede, .ba-hero-placeholder .ba-lede { color: var(--ba-night); }
.ba-section--velo .ba-headline-rule, .ba-hero-placeholder .ba-headline-rule { border-top-color: rgba(30, 24, 19, .25); }

/* Card: white, hairline border, no shadow. */
.ba-card { background: var(--ba-white); border: var(--ba-rule); border-radius: var(--ba-radius); overflow: hidden; }
.ba-card__body { padding: 1.5rem; }
.ba-card__title { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }

/* ---------------------------------------------------------------- hero placeholder */

.ba-hero-placeholder {
    background: var(--ba-lavender-tint); min-height: 70vh; display: flex; align-items: flex-end;
    padding-block: 4rem;
}
.ba-hero-placeholder__title { max-width: 18ch; margin-bottom: 2rem; }

/* ---------------------------------------------------------------- photos */

.ba-photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--ba-radius); }

/* A photo that doesn't exist yet: nude block with the prompt describing the picture to come. */
.ba-photo-placeholder {
    display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
    width: 100%; margin: 0; padding: 1.25rem; border-radius: var(--ba-radius);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 12px, transparent 12px 24px),
        var(--ph-tone, var(--ba-nude));
    color: var(--ba-night);
}
/* Tone of a placeholder: a stand-in for the photo's dominant colour. Adjacent ones differ. */
.ba-photo-placeholder--velo { --ph-tone: var(--ba-lavender-tint); }
.ba-photo-placeholder--nude { --ph-tone: var(--ba-nude); }
.ba-photo-placeholder--sand { --ph-tone: var(--ba-sand); }
.ba-photo-placeholder--olive { --ph-tone: var(--ba-olive); }
.ba-card .ba-photo-placeholder, .ba-card .ba-photo { border-radius: 0; }
.ba-photo-placeholder__key {
    font-size: var(--ba-size-kicker); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(30, 24, 19, .85);   /* .7 falls under AA on Arena */
}
.ba-photo-placeholder__prompt { font-size: .875rem; font-weight: 300; font-style: italic; line-height: 1.45; }

/* ---------------------------------------------------------------- alerts */

.alert { border-radius: var(--ba-radius); }

/* The validation summary is always rendered; without errors it must not show as an empty alert. */
.validation-summary-valid { display: none; }

/* ---------------------------------------------------------------- player */

.ba-player-body { background: var(--ba-linen); }
.ba-player__header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
    padding: .9rem 1.5rem; background: var(--ba-white); border-bottom: var(--ba-rule);
}
.ba-player__back { color: var(--ba-night); text-decoration: none; font-weight: 500; }
.ba-player__back:hover { color: var(--ba-lavender-deep); }
.ba-player__course { flex: 1 1 auto; min-width: 0; }
.ba-player__course-title { font-weight: 600; }
.ba-player__code { margin-left: .5rem; font-size: var(--ba-size-kicker); letter-spacing: .15em; color: var(--ba-lavender-deep); }
.ba-player__progress { display: flex; align-items: center; gap: .5rem; min-width: 12rem; font-size: .8125rem; }
.ba-player__progress .progress { flex: 1; height: 6px; }
.progress-bar { background-color: var(--ba-lavender-deep); }

.ba-player { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; min-height: calc(100vh - 4rem); }
.ba-player__curriculum { background: var(--ba-white); border-right: var(--ba-rule); overflow-y: auto; max-height: calc(100vh - 4rem); position: sticky; top: 0; }
.ba-player__lesson {
    display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; color: var(--ba-night);
    text-decoration: none; font-size: .875rem; border-left: 3px solid transparent;
}
.ba-player__lesson:hover { background: var(--ba-linen); }
.ba-player__lesson.is-current { background: var(--ba-linen); border-left-color: var(--ba-lavender-deep); font-weight: 500; }
.ba-done { color: var(--ba-lavender-deep); }
.ba-player__stage { padding: 1.5rem clamp(1rem, 3vw, 3rem) 3rem; max-width: 72rem; }
.ba-player__video { width: 100%; max-height: 72vh; background: var(--ba-night); border-radius: var(--ba-radius); }
.ba-player__meta { margin-top: 1.5rem; max-width: 48rem; }
.ba-player__empty { padding: 4rem 0; max-width: 34rem; }
.ba-rich { margin-top: 1rem; }
.ba-rich h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.ba-rich h3 { font-size: 1.0625rem; margin-top: 1.25rem; }
.ba-rich blockquote { border-left: 1px solid var(--ba-lavender); padding-left: 1rem; font-weight: 300; font-style: italic; color: var(--ba-lavender-deep); }

@media (max-width: 767.98px) {
    .ba-player { grid-template-columns: 1fr; }
    .ba-player__curriculum { order: 2; position: static; max-height: none; border-right: 0; border-top: var(--ba-rule); }
}

/* Honeypot field: off-screen for people, visible to bots that parse the form. */
.ba-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- page heads and shared bits */

.ba-page-head { background: var(--ba-white); border-bottom: var(--ba-rule); padding-block: 3.5rem 2.75rem; }
.ba-page-head__img { aspect-ratio: 16 / 10; }
.ba-meta { font-size: .875rem; color: var(--bs-secondary-color); }
.ba-pre { white-space: pre-line; }
.ba-empty { padding: 3rem 1.5rem; text-align: center; background: var(--ba-white); border: var(--ba-rule); border-radius: var(--ba-radius); }
.ba-badge { background: var(--ba-linen); color: var(--ba-night); border: var(--ba-rule); font-weight: 500; }
.ba-aside { position: sticky; top: 1.5rem; }
.ba-checklist { list-style: none; padding-left: 0; }
.ba-checklist li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.ba-checklist li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--ba-lavender-deep); }

/* ---------------------------------------------------------------- filters */

.ba-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin-bottom: 2rem; }
.ba-filters .form-select { min-width: 12rem; }

/* ---------------------------------------------------------------- product cards and prices */

.ba-product-card { position: relative; transition: border-color .15s; }
.ba-product-card:hover { border-color: var(--ba-lavender); }
.ba-product-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ba-product-card__img--cover { aspect-ratio: 3 / 4; }
/* No image uploaded yet: a quiet Velo plate instead of a broken frame. */
.ba-product-card__img--empty {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 12px, transparent 12px 24px), var(--ba-lavender-tint);
}
.ba-product-card .ba-card__title a { color: var(--ba-night); text-decoration: none; }
.ba-product-card:hover .ba-card__title a { color: var(--ba-lavender-deep); }

.ba-price strong { font-size: 1.125rem; font-weight: 600; }
.ba-price__alt { display: block; font-size: .8125rem; color: var(--bs-secondary-color); }
.ba-price__was { font-size: .8125rem; color: var(--bs-secondary-color); margin-left: .4rem; }

/* ---------------------------------------------------------------- programme and run pages */

.ba-run-summary {
    display: block; padding: .9rem 0; color: var(--ba-night); text-decoration: none; border-bottom: var(--ba-rule);
}
.ba-run-summary:last-child { border-bottom: 0; padding-bottom: 0; }
.ba-card .ba-run-summary { border-bottom: 0; padding: 0; }
.ba-run-summary:hover .fw-semibold { color: var(--ba-lavender-deep); }
.ba-run-summary__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }

.ba-agenda { list-style: none; padding: 0; margin: 0; border-top: var(--ba-rule); }
.ba-agenda li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem 1rem; padding: 1rem 0; border-bottom: var(--ba-rule); }
.ba-agenda__num { font-size: 1.5rem; font-weight: 300; line-height: 1.2; color: var(--ba-lavender-deep); }
.ba-agenda__local { font-size: .8125rem; color: var(--bs-secondary-color); font-style: italic; }
.ba-agenda li.is-cancelled p { text-decoration: line-through; }
.ba-agenda li.is-cancelled .badge { text-decoration: none; }

.ba-curriculum__title { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .25rem; }
.ba-curriculum__lesson { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: var(--ba-rule); }

.ba-instructor { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.ba-instructor__photo { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; flex: none; }

.ba-faq details { border-bottom: var(--ba-rule); padding: .9rem 0; }
.ba-faq summary { font-weight: 500; cursor: pointer; }

/* ---------------------------------------------------------------- sessions */

.ba-slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.ba-slot {
    display: inline-block; padding: .45rem .9rem; border: 1px solid var(--ba-lavender); border-radius: var(--ba-radius);
    color: var(--ba-lavender-deep); background: var(--ba-white); text-decoration: none; font-weight: 500;
}
.ba-slot:hover, .ba-slot:focus-visible { background: var(--ba-lavender-deep); border-color: var(--ba-lavender-deep); color: var(--ba-linen); }
.ba-slot-day { padding: 1rem 0; border-bottom: var(--ba-rule); }

/* ---------------------------------------------------------------- blog and testimonials */

.ba-post-card .ba-card__title a { color: var(--ba-night); text-decoration: none; }
.ba-post-card:hover .ba-card__title a { color: var(--ba-lavender-deep); }
.ba-article { max-width: 44rem; }
.ba-article .ba-rich { font-size: 1rem; }
.ba-testimonial { background: var(--ba-white); border: var(--ba-rule); border-radius: var(--ba-radius); padding: 1.75rem; height: 100%; margin: 0; }
.ba-testimonial blockquote { font-weight: 300; font-style: italic; font-size: 1.0625rem; margin-bottom: 1rem; }
.ba-testimonial figcaption { font-size: .875rem; font-weight: 500; }
.ba-testimonial__photo { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; margin-right: .6rem; }

.ba-pagination .page-link { color: var(--ba-lavender-deep); border-color: rgba(30, 24, 19, .13); }
.ba-pagination .active > .page-link { background: var(--ba-lavender-deep); border-color: var(--ba-lavender-deep); color: var(--ba-linen); }

/* ---------------------------------------------------------------- cart, checkout and receipt */

.ba-cart-link { position: relative; }
.ba-cart-count {
    display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .15rem; border-radius: 1rem;
    background: var(--ba-lavender-deep); color: var(--ba-linen); font-size: .6875rem; font-weight: 600; line-height: 1.25rem; text-align: center;
}
.ba-cart { border-top: var(--ba-rule); }
.ba-cart__line { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: var(--ba-rule); }
.ba-cart--compact { border-top: 0; }
.ba-cart--compact .ba-cart__line { padding: .5rem 0; font-size: .875rem; }
.ba-cart__line.has-problem { opacity: .85; }
.ba-cart__problem { color: #a72834; font-size: .875rem; }
.ba-link-muted { color: var(--bs-secondary-color); text-decoration: underline; font-size: .8125rem; }
.ba-link-muted:hover { color: var(--ba-night); }

.ba-totals { display: grid; grid-template-columns: 1fr auto; row-gap: .35rem; margin: 1rem 0; }
.ba-totals dt { font-weight: 400; }
.ba-totals dd { margin: 0; padding-left: 1rem; text-align: right; white-space: nowrap; }
.ba-card .table { --bs-table-bg: transparent; }
.ba-totals__total { font-weight: 600; font-size: 1.125rem; padding-top: .5rem; border-top: var(--ba-rule); }

.ba-hold { padding: .9rem 1.1rem; background: var(--ba-white); border: 1px solid var(--ba-lavender); border-radius: var(--ba-radius); }
.ba-hold.is-expired { border-color: #a72834; }
.ba-bank { padding: .75rem 0; border-bottom: var(--ba-rule); }
.ba-bank:last-child { border-bottom: 0; }
.ba-bank.form-check { padding-left: 1.75rem; }

.ba-receipt__site { font-size: 1.25rem; font-weight: 300; letter-spacing: .02em; }
@media print {
    .ba-header, .ba-footer, .ba-skip, .d-print-none { display: none !important; }
    body, .ba-section { background: #fff !important; }
    .ba-section { padding: 0 !important; }
    .ba-receipt { border: 0 !important; }
}

/* ---------------------------------------------------------------- reviews */

.ba-stars { color: var(--ba-lavender-deep); letter-spacing: .1em; }
.ba-review { padding: .9rem 0; border-bottom: var(--ba-rule); }
/* Stars picked right to left: the radios are in reverse order so :checked ~ lights the lower ones. */
.ba-rating { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.ba-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ba-rating label { font-size: 1.5rem; color: rgba(30, 24, 19, .25); cursor: pointer; }
.ba-rating input:checked ~ label, .ba-rating label:hover, .ba-rating label:hover ~ label { color: var(--ba-lavender-deep); }
.ba-rating input:focus-visible + label { outline: 2px solid var(--ba-lavender-deep); outline-offset: 2px; }

/* ---------------------------------------------------------------- student area */

.ba-my-nav { margin: 1.5rem 0 2rem; border-bottom: var(--ba-rule); overflow-x: auto; }
.ba-my-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.ba-my-nav a { display: block; padding: .5rem 0; color: var(--ba-night); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; }
.ba-my-nav a:hover { color: var(--ba-lavender-deep); }
.ba-my-nav a.active { color: var(--ba-lavender-deep); border-bottom-color: var(--ba-lavender-deep); }
.ba-next-class { padding: .9rem 1rem; background: var(--ba-linen); border-radius: var(--ba-radius); }
.ba-agenda li.is-past { opacity: .7; }