/* =========================================================================
   FunLida - HARMONY LAYER (Stage 7)
   Loads on EVERY route, after funlida-craft.css and before funlida-premium.css.

   WHY THIS WORKS WITHOUT FIGHTING THE CASCADE
   Stage 1 tokenised all four legacy stylesheets to zero raw hex: every legacy
   rule already reads a --fl-* custom property. Redefining those VALUES in a
   later :root reharmonises the whole site by inheritance. Custom properties
   resolve at use time, so a `!important` declaration consuming var(--fl-x)
   still picks up the new value. This is the one route to site-wide restyling
   that the 326 load-bearing !important declarations cannot block - and the
   reason the two failed !important-stripping attempts were the wrong tool.

   DELIBERATELY NOT TOUCHED: every --fl-space-* token. Stages 2 and 3 measured
   those heights to the byte (8697 / 10464 / 14531). Remapping colour cannot
   move layout; remapping spacing would invalidate that baseline.

   REVERT: novamira/disable-file on this file. Nothing else depends on it.
   ========================================================================= */

:root {

  /* --- Stage 6 palette, now global ------------------------------------ */
  --brand-50:  #FFF1F5;
  --brand-100: #FFE0EA;
  --brand-200: #FFC2D6;
  --brand-300: #F995B6;
  --brand-400: #EE6A97;
  --brand-500: #D9407A;
  --brand-600: #B92E63;
  --brand-700: #93214C;
  --brand-800: #6B1737;

  --ink-900: #171114;
  --ink-700: #3D3339;
  --ink-500: #6B5E65;
  --ink-300: #A99BA2;
  --ink-200: #E4DDE0;
  --ink-100: #F4F1F2;
  --white:   #FFFFFF;

  --cream:    #FFF8F2;
  --peach:    #FFE9DC;
  --lilac:    #F0ECFB;
  --sage:     #E9F3EE;
  --gold-500: #F2B01E;

  --danger:    #C0392B;
  --danger-bg: #FDECEA;

  --radius-sm: 8px;  --radius-md: 14px;  --radius-lg: 20px;
  --radius-xl: 28px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23,17,20,0.05);
  --shadow-md: 0 4px 16px rgba(23,17,20,0.07);
  --shadow-lg: 0 14px 40px rgba(23,17,20,0.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;  --dur: 240ms;  --dur-slow: 420ms;

  /* =======================================================================
     LEGACY TOKEN REMAP - this is what reharmonises the other 7 routes.
     Lightness order is preserved inside every ramp so contrast relationships
     that Stages 1-4 verified do not invert.
     ======================================================================= */

  /* Primary ramp: magenta #E4487A -> the Stage 6 brand ramp. */
  --fl-primary-50:  var(--brand-50);
  --fl-primary-100: var(--brand-100);
  --fl-primary-150: var(--brand-100);
  --fl-primary-200: var(--brand-200);
  --fl-primary-250: var(--brand-200);
  --fl-primary-300: var(--brand-300);
  --fl-primary-350: var(--brand-300);
  --fl-primary-400: var(--brand-400);
  --fl-primary-500: var(--brand-500);
  --fl-primary-600: var(--brand-600);
  --fl-primary-700: var(--brand-700);
  --fl-primary-750: var(--brand-700);
  --fl-primary-800: var(--brand-800);
  --fl-primary-900: var(--brand-800);

  /* Violet: kept as a hue but desaturated toward the lilac support colour so
     it stops competing with brand pink. Lightness held, chroma reduced. */
  --fl-violet-50:  var(--lilac);
  --fl-violet-100: #DED6F0;
  --fl-violet-200: #CFC4E6;
  --fl-violet-300: #B3A6D6;
  --fl-violet-500: #6E5F9C;
  --fl-violet-700: #5B4F85;
  --fl-violet-900: #46356E;

  /* Ink: warm-grey ramp -> Stage 6 ink. */
  --fl-ink-950: var(--ink-900);
  --fl-ink-900: var(--ink-900);
  --fl-ink-850: #2A2226;
  --fl-ink-700: var(--ink-700);
  --fl-ink-650: #514550;
  --fl-ink-600: var(--ink-500);
  --fl-ink-550: var(--ink-500);
  --fl-ink-500: #8A7C83;
  --fl-ink-300: var(--ink-300);
  --fl-ink-200: #D6CDD1;   /* midway: was #CFC7CC, kept darker than --ink-200
                              in case it is ever used as a hairline on white */

  /* Surfaces. The single highest-impact line in this file is surface-page:
     the whole site currently sits on a pink wash (#FDF1F4). The spec is
     explicit - the page background is white, and brand tint is never a full
     page wash. */
  --fl-surface-card:  var(--white);
  --fl-surface-page:  var(--white);
  --fl-surface-alt:   var(--ink-100);
  --fl-tint-50:       var(--cream);
  --fl-tint-75:       var(--ink-100);
  --fl-tint-100:      var(--brand-50);
  --fl-tint-150:      var(--peach);
  --fl-tint-200:      var(--ink-100);
  --fl-tint-250:      var(--ink-100);
  --fl-tint-300:      var(--brand-100);

  /* Borders are never pink (spec 1.1). */
  --fl-border-soft:   var(--ink-200);
  --fl-border:        var(--ink-200);
  --fl-border-strong: var(--brand-200);

  /* Semantic. --fl-error was already #C0392B, identical to --danger. */
  --fl-success: #1F8A5B;
  --fl-error:   var(--danger);
  --fl-star:    var(--gold-500);   /* was #FFD84D yellow; ratings are gold */

  /* Alpha primitives drive every shadow. Retinting them from pink to ink is
     what removes the magenta glow under every card on every route. */
  --fl-a-primary-06: rgba(23,17,20,.04);
  --fl-a-primary-08: rgba(23,17,20,.05);
  --fl-a-primary-10: rgba(23,17,20,.06);
  --fl-a-primary-12: rgba(23,17,20,.07);
  --fl-a-primary-15: rgba(23,17,20,.08);
  --fl-a-primary-16: rgba(23,17,20,.08);
  --fl-a-primary-18: rgba(23,17,20,.09);
  --fl-a-primary-20: rgba(23,17,20,.10);
  --fl-a-primary-22: rgba(23,17,20,.11);
  --fl-a-violet-22:  rgba(23,17,20,.10);

  /* Radius: align the control token with the Stage 6 scale. */
  --fl-radius-control: var(--radius-md);
  --fl-radius-card:    var(--radius-lg);

  /* Type. Fluid H1/H2 also closes the outstanding "mobile H2 split" item -
     39px vs 32px was a media query fighting a fixed value. */
  --fl-text-3xl: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --fl-text-4xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  /* Focus: 3px brand-300 at 2px offset, matching the redesigned homepage. */
  --fl-focus-ring: 3px solid var(--brand-300);
  --fl-focus-offset: 2px;
}

/* =========================================================================
   GROUND
   Some legacy rules paint the page background directly rather than through
   the surface token. Scoped to body so it cannot outrank section bands.
   ========================================================================= */
body { background-color: var(--white); }

/* =========================================================================
   HEADER / NAV (spec 6)
   Sticky, translucent, hairline only after scroll. The active item becomes an
   underline rather than a filled pink pill.
   ========================================================================= */
/* Selectors below are the REAL ones, read off the live DOM. The theme builder
   is Xpro (header.xpro-theme-builder-header) and the footer is a bare
   <footer> wrapping .elementor-157 - not the Elementor Pro location classes
   an earlier pass assumed. */
header.xpro-theme-builder-header {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.fl-scrolled header.xpro-theme-builder-header {
  border-bottom-color: var(--ink-200);
  box-shadow: var(--shadow-sm);
}

/* Active nav item: 2px underline, not a filled pill (spec §6). */
.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.mega-menu-item.mega-current_page_item > a.mega-menu-link,
.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  background: transparent !important;
  color: var(--brand-600) !important;
  box-shadow: inset 0 -2px 0 0 var(--brand-500);
  border-radius: 0;
}
.mega-menu-item > a.mega-menu-link:hover {
  background: transparent !important;
  color: var(--brand-600) !important;
}

/* Page hero H1. Every route paints exactly one, in brand pink on what used to
   be the pink band. Headings are --ink-900 (spec §1.1); the audit confirmed no
   heading anywhere sits on a dark ground, so this cannot invert contrast. */
.elementor h1.elementor-heading-title { color: var(--ink-900); }

/* =========================================================================
   FOOTER (spec 6)
   Links go neutral, the pink chevron glyphs go, and the bottom bar stops
   being pink text on a pink field.
   ========================================================================= */
body > footer a,
body > footer .elementor-icon-list-text {
  color: var(--ink-500);
  transition: color var(--dur) var(--ease);
}
body > footer a:hover,
body > footer a:hover .elementor-icon-list-text { color: var(--ink-900); }

/* Chevron glyphs before footer links: removed outright per spec §6. */
body > footer .elementor-icon-list-icon { display: none !important; }
body > footer .elementor-icon-list-item > a { padding-left: 0; }

/* Newsletter: input and button share one rounded container. */
.fl-newsletter form,
.mailpoet_form form,
.fl-footer .mailpoet_paragraph {
  display: flex; align-items: center; gap: 0;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
  padding: 0;
}
.fl-newsletter input[type="email"],
.mailpoet_form input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; box-shadow: none;
  min-height: 48px; padding-inline: var(--space-4, 16px);
  color: var(--ink-900);
}
.fl-newsletter input[type="email"]:focus,
.mailpoet_form input[type="email"]:focus { outline: none; box-shadow: none; }
.fl-newsletter button,
.mailpoet_form input[type="submit"],
.mailpoet_form button {
  flex: none; border: 0; min-height: 48px; padding-inline: 24px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: var(--white); font-weight: 600; cursor: pointer;
}

/* =========================================================================
   STAR RATINGS - gold everywhere, never pink, never yellow-on-pink.
   ========================================================================= */
.fl-stars, .fl-star, .fl-rating { color: var(--gold-500); }

/* =========================================================================
   FOCUS - one visible treatment across every route.
   The pointer branch is :focus:not(:focus-visible) because a bare
   `:focus { outline: none }` silently kills :focus-visible (trap #7).
   ========================================================================= */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--fl-focus-ring);
  outline-offset: var(--fl-focus-offset);
}

/* =========================================================================
   NAV ACTIVE STATE - specificity floor, measured not assumed.
   funlida-design.css wins with
     #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link
   at (2,3,1) AND !important. A (0,2,1) rule with !important still loses:
   !important ties are broken by specificity, not source order. Matching the
   id chain and adding one more class is the only way through.
   ========================================================================= */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  background: transparent !important;
  color: var(--brand-600) !important;
  box-shadow: inset 0 -2px 0 0 var(--brand-500) !important;
  border-radius: 0 !important;
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover {
  background: transparent !important;
  color: var(--brand-600) !important;
}

/* =========================================================================
   /booking/ STEP NUMERALS - regression stopgap (2026-08-10)
   Stage 7 remapped pink50 -> #FFFFFF and pink100 -> #F4F1F2. These three
   numerals were baked as WHITE text on one of those pink chips, so they
   became white on near-white: measured 1.00:1 by contrast audit. They are
   the only occurrence site-wide (audited /, /teachers/, /booking/,
   /contact/, /terms/).

   Targeted by Elementor element id because the baked markup gives them no
   semantic class. These ids die when /booking/ is rebuilt, at which point
   this block becomes inert and should be deleted. It is a stopgap for a live
   invisible-text defect, not the fix for that page - see STATE.md Stage 8.
   ========================================================================= */
.elementor-element-7bf8c93 .elementor-heading-title,
.elementor-element-efa9b5b .elementor-heading-title,
.elementor-element-2c91128 .elementor-heading-title {
  color: var(--brand-600) !important;
}

/* =========================================================================
   BOOKING CALENDAR CONTRAST (2026-08-10)
   Surfaced when /booking/ was rebuilt onto the interactive app. Both values
   came from the legacy ink ramp and only became visible now that the
   calendar actually renders.
     - Sun/Mon/Tue day labels were --ink-300 on white: 2.66:1. These are
       informational text, not decoration, so they need 4.5:1.
     - Past dates were 1.55:1. Disabled controls are exempt from WCAG 1.4.3,
       but that is faint enough to read as a rendering fault rather than a
       disabled state.
   ========================================================================= */
.fl-cal-dow span { color: var(--ink-500); }
.fl-cal-cell.fl-past { color: var(--ink-300); }

/* =========================================================================
   BOOKING APP (Stage 9). Global, because /booking/ is not the premium page.
   Consumes the Stage 6 tokens defined at the top of this file.
   ========================================================================= */
.fl-bk { display: flex; flex-direction: column; gap: var(--space-5, 24px); max-width: 1100px; margin-inline: auto; }

.fl-bk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  background: var(--white);
}
.fl-bk-bal { display: flex; align-items: baseline; gap: 8px; }
.fl-bk-bal-n { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); }
.fl-bk-bal-l { color: var(--ink-500); font-size: 0.875rem; }
.fl-bk-chip { background: var(--peach); color: var(--brand-700); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; }
.fl-bk-buy { color: var(--brand-600); font-weight: 600; font-size: 0.875rem; min-height: 44px; display: inline-flex; align-items: center; }

.fl-bk-card { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg, 20px); padding: 20px; }
.fl-bk-step { font-weight: 700; color: var(--ink-900); margin-bottom: 14px; }

.fl-bk-lessons { display: flex; flex-wrap: wrap; gap: 12px; }
.fl-bk-lesson {
  flex: 1 1 160px; text-align: left; cursor: pointer;
  border: 1px solid var(--ink-200); border-radius: var(--radius-md, 14px);
  background: var(--white); padding: 12px 16px; min-height: 64px;
}
.fl-bk-lesson b { display: block; color: var(--ink-900); }
.fl-bk-lesson span { font-size: 0.875rem; color: var(--ink-500); }
.fl-bk-lesson.is-on { border-color: var(--brand-500); box-shadow: inset 0 0 0 1px var(--brand-500); }

.fl-bk-teachers { display: flex; flex-wrap: wrap; gap: 14px; }
.fl-bk-t {
  width: 84px; border: 0; background: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fl-bk-t img, .fl-bk-ini {
  width: 64px; height: 64px; border-radius: 999px; object-fit: cover;
  border: 2px solid transparent; background: var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--ink-500);
}
.fl-bk-t.is-on img, .fl-bk-t.is-on .fl-bk-ini { border-color: var(--brand-500); }
.fl-bk-tn { font-size: 0.8125rem; color: var(--ink-700); }
.fl-bk-t.is-on .fl-bk-tn { color: var(--brand-600); font-weight: 600; }

.fl-bk-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5, 24px); align-items: start; }
.fl-bk-calhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fl-bk-nav { display: flex; align-items: center; gap: 8px; color: var(--ink-900); font-weight: 600; }
.fl-bk-prev, .fl-bk-next {
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink-200); background: var(--white); color: var(--ink-900);
}
.fl-bk-dow, .fl-bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fl-bk-dow { margin: 14px 0 6px; }
.fl-bk-dow span { text-align: center; font-size: 0.75rem; color: var(--ink-500); }
.fl-bk-day {
  aspect-ratio: 1; min-height: 44px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm, 8px); color: var(--ink-900); font-size: 0.9375rem;
}
.fl-bk-day:hover:not(:disabled) { background: var(--ink-100); }
.fl-bk-day.is-closed, .fl-bk-day:disabled { color: var(--ink-300); cursor: default; }
.fl-bk-day.is-empty { pointer-events: none; }
.fl-bk-day.is-on { background: var(--brand-500); color: var(--white); font-weight: 700; }
.fl-bk-tz { margin-top: 12px; font-size: 0.75rem; color: var(--ink-500); }

.fl-bk-right { display: flex; flex-direction: column; gap: var(--space-5, 24px); }
.fl-bk-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.fl-bk-slot {
  min-width: 84px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill, 999px);
  background: var(--white); color: var(--ink-900); font-weight: 600;
}
.fl-bk-slot:hover { background: var(--ink-100); }
.fl-bk-slot.is-on { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.fl-bk-hint { color: var(--ink-500); font-size: 0.875rem; margin: 0; }

.fl-bk-summary { background: var(--cream); border-radius: var(--radius-lg, 20px); padding: 20px; }
.fl-bk-sum-t { font-weight: 700; color: var(--ink-900); margin-bottom: 12px; }
.fl-bk-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ink-200); font-size: 0.9375rem; }
.fl-bk-row span { color: var(--ink-500); }
.fl-bk-row b { color: var(--ink-900); text-align: right; }
.fl-bk-confirm {
  width: 100%; min-height: 52px; margin-top: 16px; cursor: pointer; border: 0;
  border-radius: var(--radius-pill, 999px); font-weight: 600; font-size: 1rem;
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: var(--white);
}
.fl-bk-confirm:disabled { background-image: none; background: var(--ink-200); color: var(--ink-500); cursor: default; }
.fl-bk-msg { margin: 12px 0 0; font-size: 0.875rem; min-height: 1.2em; }
.fl-bk-msg.is-ok { color: #1F8A5B; font-weight: 600; }
.fl-bk-msg.is-err { color: var(--danger); font-weight: 600; }
.fl-bk-fine { margin: 10px 0 0; font-size: 0.75rem; color: var(--ink-500); }

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

/* =========================================================================
   TEACHER DASHBOARD + APPLICATION (Stage 10)
   ========================================================================= */
.fl-td, .fl-ap { max-width: 900px; margin: 0 auto; padding: 32px 20px 64px; display: flex; flex-direction: column; gap: 24px; }
.fl-td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fl-td-head h2 { margin: 0; color: var(--ink-900); }
.fl-td-head p { margin: 4px 0 0; color: var(--ink-500); font-size: 0.875rem; }
.fl-td-pick { min-height: 44px; border: 1px solid var(--ink-200); border-radius: var(--radius-md, 14px); padding: 0 12px; background: var(--white); }

.fl-td-card { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg, 20px); padding: 24px; }
.fl-td-card h3 { margin: 0 0 6px; color: var(--ink-900); }
.fl-td-hint { color: var(--ink-500); font-size: 0.875rem; margin: 0 0 16px; }

.fl-td-week { display: flex; flex-direction: column; gap: 10px; }
.fl-td-day { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-md, 14px); }
.fl-td-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.fl-td-toggle span { font-weight: 600; color: var(--ink-900); }
.fl-td-times { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: 0.875rem; }
.fl-td-times input { min-height: 44px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm, 8px); padding: 0 10px; color: var(--ink-900); }

.fl-td-save, .fl-ap-submit {
  margin-top: 18px; min-height: 52px; padding-inline: 28px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill, 999px); font-weight: 600; font-size: 1rem; color: var(--white);
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
}
.fl-td-btn { min-height: 44px; padding-inline: 16px; cursor: pointer; font-weight: 600; font-size: 0.875rem;
  border-radius: var(--radius-pill, 999px); border: 1px solid var(--brand-500); background: var(--brand-500); color: var(--white); }
.fl-td-ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-200); }
.fl-td-exc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fl-td-exc input { min-height: 44px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm, 8px); padding: 0 10px; }

.fl-td-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fl-td-list li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill, 999px); padding: 6px 14px; font-size: 0.875rem; }

.fl-td-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600;
  background: var(--ink-100); color: var(--ink-700); text-transform: capitalize; }
.fl-td-tag.is-confirmed { background: var(--sage); color: #1F6B47; }
.fl-td-tag.is-completed { background: var(--ink-100); color: var(--ink-700); }
.fl-td-tag.is-cancelled { background: var(--peach); color: var(--brand-700); }
.fl-td-tag.is-no_show, .fl-td-tag.is-off { background: var(--danger-bg); color: var(--danger); }

.fl-td-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fl-td-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); padding: 8px 10px; border-bottom: 1px solid var(--ink-200); }
.fl-td-table td { padding: 12px 10px; border-bottom: 1px solid var(--ink-200); color: var(--ink-700); vertical-align: middle; }
.fl-td-table small { color: var(--ink-300); }
.fl-td-msg { margin: 12px 0 0; font-size: 0.875rem; min-height: 1.2em; }
.fl-td-msg.is-ok { color: #1F8A5B; font-weight: 600; }
.fl-td-msg.is-err { color: var(--danger); font-weight: 600; }
.fl-td-gate { text-align: center; }

/* --- application form --- */
.fl-ap-form, .fl-ap-done { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg, 20px); padding: 28px; }
.fl-ap-form h3, .fl-ap-done h3 { margin: 0 0 6px; color: var(--ink-900); }
.fl-ap-lede { color: var(--ink-500); margin: 0 0 20px; }
.fl-ap-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.fl-ap-row label { font-size: 0.875rem; font-weight: 600; color: var(--ink-700); }
.fl-ap-req { color: var(--brand-600); }
.fl-ap-row input, .fl-ap-row textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; color: var(--ink-900);
  border: 1px solid var(--ink-200); border-radius: var(--radius-md, 14px); background: var(--white);
}
.fl-ap-row textarea { min-height: 90px; }
.fl-ap-row input:focus, .fl-ap-row textarea:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); outline: none; }
.fl-ap-err { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-md, 14px); padding: 12px 16px; margin-bottom: 16px; font-size: 0.875rem; }
.fl-ap-fine { color: var(--ink-500); font-size: 0.75rem; margin: 12px 0 0; }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.fl-ap-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Teacher entry point on the account/login page */
.fl-teach-cta { max-width: 480px; margin: 20px auto 0; text-align: center; font-size: 0.875rem; color: var(--ink-500); }
.fl-teach-cta a { color: var(--brand-600); font-weight: 600; }

@media (max-width: 600px) {
  .fl-td-day { flex-direction: column; align-items: flex-start; }
  .fl-td-table thead { display: none; }
  .fl-td-table td { display: block; border: 0; padding: 4px 0; }
  .fl-td-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--ink-200); }
}