/* =====================================================================
   ffl-brand.css
   Friends For Life brand layer, version 2.0 (4 October 2026)
   Source: Friends For Life Website Style Guide v2 (ffl-style-guide-v2.docx,
           supplied 4 October 2026) and the site style audit
           (ffl-style-audit-v2.md).
   v2 note: guide v2 changes wording only ("My guests", "End meeting",
           "Finish meeting"). Its colours, fonts, tokens and component
           rules are identical to v1, so no CSS rule in this file has
           changed since fix pack v1; only these comments were updated.

   WHAT THIS FILE DOES
   1. Defines the 11 approved colours, the two font stacks, the radius
      and focus tokens exactly as listed in the guide's
      "Implementation tokens" section, plus readable aliases named
      after the guide's colour names (Obsidian, Onyx, Champagne Gold, ...).
   2. Sets base styles for body text, headings, links, buttons, form
      fields and error messages.
   3. Neutralises the banned items found on the live site:
      - the CSS keyword `gold` (#FFD700), goldenrod, darkgoldenrod,
        palegoldenrod, lightgoldenrodyellow, wheat, darkblue;
      - Bootstrap 5.3.8 blue (#0D6EFD) and default Bootstrap colours;
      - Times New Roman, Lato, DM Sans, Playfair Display and other
        unapproved families;
      - the logo brightness filter, box-shadow and rounded box;
      - glow, gradient text, heavy shadows and long animations.

   HOW TO LOAD IT
   Link it as the LAST stylesheet, after every other <link> and after
   the inline <style> block in <head> (see developer-instructions.md):
   in the shared layout (likely Views/Shared/_Layout.cshtml) and in the
   three stand-alone pages that do not use the layout (About, Become
   a host, Age authorisation).

   SPECIFICITY NOTE
   The live site uses many `!important` rules and inline styles. Where
   this file must beat them it uses `html body ...` prefixes and
   `!important`. Inline styles that themselves carry `!important`
   CANNOT be overridden by any stylesheet; those are listed in
   developer-instructions.md and must be edited in the views.

   UK English is used in comments. Selectors are taken from the live
   HTML/CSS fetched on 4 October 2026.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENS
   `html:root` (specificity 0,1,1) beats the pages' own `:root` blocks
   (0,1,0), so these values win regardless of load order.
   --------------------------------------------------------------------- */
html:root {
  /* Guide "Implementation tokens" (names exactly as in the guide) */
  --ffl-bg: #080604;              /* Obsidian */
  --ffl-surface: #100E0D;         /* Onyx */
  --ffl-gold: #D8AD58;            /* Champagne Gold */
  --ffl-gold-highlight: #F2D58A;  /* Pale Gold */
  --ffl-gold-muted: #B9A16E;      /* Antique Gold */
  --ffl-text: #F5EFE4;            /* Ivory */
  --ffl-text-secondary: #D8D0C3;  /* Warm Stone */
  --ffl-text-muted: #AAA197;      /* Muted Taupe */
  --ffl-success: #3E9B75;         /* Success */
  --ffl-warning: #C6842A;         /* Warning */
  --ffl-danger: #B84452;          /* Danger */
  --ffl-radius-control: 6px;
  --ffl-radius-card: 8px;
  --ffl-focus: 0 0 0 2px #080604, 0 0 0 4px #F2D58A;
  --ffl-font-display: Georgia, "Times New Roman", serif;  /* fallback as given in the guide */
  --ffl-font-ui: Arial, Helvetica, sans-serif;

  /* Aliases named after the guide's colour table */
  --ffl-obsidian: var(--ffl-bg);
  --ffl-onyx: var(--ffl-surface);
  --ffl-champagne-gold: var(--ffl-gold);
  --ffl-pale-gold: var(--ffl-gold-highlight);
  --ffl-antique-gold: var(--ffl-gold-muted);
  --ffl-ivory: var(--ffl-text);
  --ffl-warm-stone: var(--ffl-text-secondary);
  --ffl-muted-taupe: var(--ffl-text-muted);

  /* Derived values (from the guide's own rules, not new colours) */
  --ffl-border-card: 1px solid rgba(216, 173, 88, .22);   /* "Dark card border: 1 px rgba(216,173,88,.22)" */
  --ffl-border-field: 1px solid rgba(216, 173, 88, .35);  /* "1 px subtle gold border" on inputs */
  --ffl-gold-pressed: #C29C4F;   /* Champagne Gold darkened ~10% ("Pressed" state) */
  --ffl-gold-hover: #DCB569;     /* Champagne Gold lightened slightly ("Hover: subtle lightening") */
  --ffl-motion-control: 200ms;   /* 150-220 ms for controls */
  --ffl-motion-panel: 300ms;     /* 250-350 ms for drawers and modals */

  /* Remap the live pages' own variables (homepage, Sign in,
     Become a host, Age authorisation all declare these) */
  --gold: #D8AD58;   /* was #f4c34f (About already uses #d8ad58) */
  --ink: #080604;    /* was #050403 */
  --white: #F5EFE4;  /* was #fff */
  --muted: #D8D0C3;  /* unchanged value, Warm Stone */
  --red: #100E0D;    /* was #64152f (wine glow in gradients) */
  --ok: #3E9B75;     /* was #8fd6a2 */
  /* --gold2 is NOT remapped here because About uses it for Pale Gold
     (#f2d58a, correct) while Become a host / Age authorisation use it
     for #b97813. It is remapped per page in section 9. */

  /* Bootstrap 5.3.8 variables (layout pages) */
  --bs-body-font-family: var(--ffl-font-ui);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: #F5EFE4;
  --bs-body-color-rgb: 245, 239, 228;
  --bs-body-bg: #080604;
  --bs-body-bg-rgb: 8, 6, 4;
  --bs-heading-color: #F5EFE4;
  --bs-emphasis-color: #F5EFE4;
  --bs-secondary-color: #D8D0C3;
  --bs-tertiary-color: #AAA197;
  --bs-link-color: #F2D58A;            /* was #0d6efd */
  --bs-link-color-rgb: 242, 213, 138;
  --bs-link-hover-color: #F5EFE4;
  --bs-link-hover-color-rgb: 245, 239, 228;
  --bs-link-decoration: underline;
  --bs-primary: #D8AD58;               /* was #0d6efd */
  --bs-primary-rgb: 216, 173, 88;
  --bs-primary-text-emphasis: #F2D58A;
  --bs-primary-bg-subtle: #100E0D;
  --bs-primary-border-subtle: rgba(216, 173, 88, .22);
  --bs-info: #B9A16E;                  /* was cyan */
  --bs-info-rgb: 185, 161, 110;
  --bs-success: #3E9B75;
  --bs-success-rgb: 62, 155, 117;
  --bs-warning: #C6842A;
  --bs-warning-rgb: 198, 132, 42;
  --bs-danger: #B84452;
  --bs-danger-rgb: 184, 68, 82;
  --bs-black-rgb: 8, 6, 4;             /* .bg-black becomes Obsidian */
  --bs-dark-rgb: 16, 14, 13;           /* .bg-dark becomes Onyx */
  --bs-white-rgb: 245, 239, 228;       /* .text-white becomes Ivory */
  --bs-light-rgb: 16, 14, 13;          /* .bg-light boxes become Onyx */
  --bs-border-color: rgba(216, 173, 88, .22);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-pill: 50rem;      /* pills only for status chips */
  --bs-box-shadow: none;               /* "Do not add heavy drop shadows" */
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;            /* neutralises .shadow-lg on cards */
  --bs-focus-ring-color: rgba(242, 213, 138, 1);

  color-scheme: dark;
  /* No background on <html>: setting one stops the body background from
     propagating to the canvas and pushes the pages' body:before overlays
     (z-index:-1) behind the photo. Body backgrounds stay as they are. */
  /* View live and host profile set `html { font: 400 15px/1.8 "Lato" }`;
     reset the root size so rem-based sizes stay at 16 px. */
  font: 400 16px/1.5 var(--ffl-font-ui);
}


/* ---------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   Guide: "Use Georgia for display headings and Arial for UI, forms and
   long text." Kills: `p,.btn{font-family:'Times New Roman'!important}`,
   `.accordion-button{...Times New Roman!important}`, `.h3{...}` (mobile),
   `#welcome-title{font-family:'Times New Roman'}`, Lato on View live /
   host profile, DM Sans eyebrows, "playfairdisplayregular" dropdowns,
   Georgia body text on Become a host / Age authorisation / About.
   --------------------------------------------------------------------- */
html body {
  font-family: var(--ffl-font-ui) !important;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ffl-text) !important;  /* host profile sets body colour to `gold` */
  -webkit-font-smoothing: antialiased;
}

html body p,
html body li,
html body dt,
html body dd,
html body td,
html body th,
html body label,
html body input,
html body select,
html body textarea,
html body button,
html body .btn,
html body .accordion-button,
html body .dropdown-menu .menubuttonv2,
html body .nav-link {
  font-family: var(--ffl-font-ui) !important;
}

/* Body text colours: primary Ivory, secondary Warm Stone. Gold is never
   a paragraph colour. */
html body p { color: inherit; }

/* Headings: Georgia. Sizes follow the guide's type scale
   (desktop / mobile). */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4,
html body .display-1, html body .display-2, html body .display-3, html body .display-4,
html body #welcome-title,
html body #live-title,
html body .modal-title,
html body .offcanvas-title {
  font-family: var(--ffl-font-display) !important;
  color: var(--ffl-text);
  text-shadow: none !important;
  letter-spacing: normal;
}

/* Display 1: 56-72 px desktop, 40-48 px mobile, line-height 1.05 */
html body .display-1,
html body #welcome-title {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  font-weight: 700 !important;  /* inline style sets 900; guide: regular or bold */
}
html body .display-2,
html body .display-3,
html body .display-4,
html body #live-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}
/* Page title: 40-48 px desktop, 32-38 px mobile, bold, 1.1 */
html body h1, html body .h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; font-weight: 700; }
/* Section heading: 28-34 px / 24-28 px, bold, 1.2 */
html body h2, html body .h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 700; }
/* Card heading: 20-24 px / 19-22 px, bold, 1.25 */
html body h3, html body .h3,
html body h4, html body .h4 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; font-weight: 700; }
html body h5, html body h6 { font-size: 18px; line-height: 1.3; font-weight: 700; }

/* Homepage hero: the italic highlight is a "short highlighted word" -> Pale Gold
   (inline style is color:#f5d879) */
html body #welcome-title em { color: var(--ffl-gold-highlight) !important; }

/* Homepage hero intro <p class="intro-copy h3"> is body copy, not a heading:
   Body large, Arial 18-20 px, Warm Stone (inline style is color:lightgray). */
html body p.intro-copy,
html body p.intro-copy.h3 {
  font-family: var(--ffl-font-ui) !important;
  font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ffl-text-secondary) !important;
}
html body .scroll-cue { color: var(--ffl-text-secondary) !important; }

/* Caption */
html body small,
html body .small,
html body .ffl-caption {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ffl-text-secondary);
}

/* Eyebrow: Arial 12 px bold uppercase 0.14 em tracking, max five words.
   Live classes: .eyebrow (homepage, Age authorisation), .slogan (About). */
html body .eyebrow,
html body .ffl-eyebrow,
html body div.page .slogan {
  font-family: var(--ffl-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--ffl-gold);
  text-shadow: none !important;
}
/* Homepage: "Choose a superstar to begin your experience" wrongly uses
   .eyebrow. Its inline font-size has !important and cannot be overridden
   here; remove the class in the view (see instructions). Until then,
   render it as body-large Ivory text without glow or uppercase. */
html body .section-heading > p.eyebrow[data-aos] {
  text-transform: none;
  letter-spacing: normal !important;
  font-weight: 400;
  color: var(--ffl-text) !important;
}


/* ---------------------------------------------------------------------
   3. LINKS
   Guide: "Links in prose use Pale Gold with a visible underline;
   navigation links may omit the underline when hover and focus are
   clear." "Never use ... default purple visited links."
   Overrides these live rules:
     @media (max-width:700px) { a{color:goldenrod!important} a:visited{color:goldenrod!important} }
     @media (min-width:981px) { .navbar a{color:gold!important} a:visited{color:gold!important} }
     @media (max-width:980px) { .nav-link{color:palegoldenrod!important} }
     #mainpanel .nav-link{color:darkslategray!important}
     #mainpages a{color:white!important}
     .jumbotron a:visited{color:darkgoldenrod!important}   (View live)
   --------------------------------------------------------------------- */
html body a:not(.btn):not(.cta),
html body a:not(.btn):not(.cta):visited,
html body #mainpages a:not(.btn):not(.cta),
html body #mainpages a:not(.btn):not(.cta):visited,
html body .jumbotron a:not(.btn):visited {
  color: var(--ffl-gold-highlight) !important;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  font-family: inherit !important;
}
html body a:not(.btn):not(.cta):hover {
  color: var(--ffl-text) !important;
}

/* Navigation links and image links: no underline, Ivory, Pale Gold on hover */
/* (Selectors carry :not(.btn):not(.cta) so they out-rank the prose-link rule above.) */
html body .navbar a:not(.btn):not(.cta),
html body .navbar a:not(.btn):not(.cta):visited,
html body a.nav-link:not(.btn):not(.cta),
html body #mainpages a.nav-link:not(.btn):not(.cta),
html body #mainpanel a.nav-link:not(.btn):not(.cta),
html body a.navbar-brand:not(.btn):not(.cta),
html body .menubuttonv2,
html body .menubuttonv2 a:not(.btn):not(.cta),
html body .ffl-host-card > a:not(.btn):not(.cta),
html body a:not(.btn):not(.cta):has(> img),
html body a:not(.btn):not(.cta):has(> button) {
  color: var(--ffl-text) !important;
  text-decoration: none !important;
}
html body .navbar a:not(.btn):not(.cta):hover,
html body a.nav-link:not(.btn):not(.cta):hover { color: var(--ffl-gold-highlight) !important; }

/* Active destination: gold underline, not a different font or glow */
html body .navbar .active,
html body a.nav-link.active:not(.btn):not(.cta),
html body a.nav-link[aria-current="page"]:not(.btn):not(.cta),
html body nav a.active:not(.btn):not(.cta) {
  box-shadow: inset 0 -2px 0 var(--ffl-gold);
  text-shadow: none !important;
  color: var(--ffl-text) !important;
}

/* Visible keyboard focus everywhere: 2 px Pale Gold ring, 2 px offset */
html body a:focus-visible,
html body button:focus-visible,
html body .btn:focus-visible,
html body [tabindex]:focus-visible {
  outline: 2px solid var(--ffl-gold-highlight) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------------------
   4. BUTTONS
   Primary: Champagne Gold fill, Obsidian text, 48 px.
   Secondary: transparent, Gold border, Ivory text, 48 px.
   Tertiary: text only, Pale Gold, underline on hover.
   Danger: transparent, Danger border + label (always with an icon).
     Guide v2 uses: "End meeting", remove, blacklist or delete.
   Disabled: Onyx fill, Taupe text, no shadow.
   Radius 6 px. Hover: subtle lightening, never glow. Pressed: ~10% darker.
   Live classes mapped:
     primary   -> .btn-primary, .next (Become a host), .continue (Age authorisation),
                  .cta.primary (About), .join, #host-form input[type=submit],
                  .loginform input[type=submit] (Sign in, inline darkgoldenrod)
     secondary -> .btn-secondary, .btn-info, .btn-outline-success, .back
                  (About / Become a host / Age authorisation), .cta (About),
                  .actionbtn, .bookslot
     tertiary  -> .policylinks .btn-light (footer policy list)
   --------------------------------------------------------------------- */
html body .ffl-btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-info,
html body .btn-outline-success,
html body .next,
html body .continue,
html body .back,
html body .cta,
html body .join,
html body #host-form input[type="submit"],
html body .loginform input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px !important;
  border-radius: var(--ffl-radius-control) !important;
  font-family: var(--ffl-font-ui) !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal !important;
  text-transform: none;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none;
  transition: background-color var(--ffl-motion-control) ease-out,
              border-color var(--ffl-motion-control) ease-out,
              color var(--ffl-motion-control) ease-out,
              transform var(--ffl-motion-control) ease-out;
  cursor: pointer;
}

/* Primary */
html body .ffl-btn-primary,
html body .btn-primary,
html body .next,
html body .continue,
html body a.cta.primary,
html body .join,
html body #host-form input[type="submit"],
html body .loginform input[type="submit"] {
  --bs-btn-bg: #D8AD58;
  --bs-btn-border-color: #D8AD58;
  --bs-btn-color: #080604;
  --bs-btn-hover-bg: #DCB569;
  --bs-btn-hover-border-color: #DCB569;
  --bs-btn-hover-color: #080604;
  --bs-btn-active-bg: #C29C4F;
  --bs-btn-active-border-color: #C29C4F;
  --bs-btn-active-color: #080604;
  --bs-btn-focus-box-shadow: var(--ffl-focus);
  background: var(--ffl-gold) !important;          /* removes gold gradients */
  border: 1px solid var(--ffl-gold) !important;
  color: var(--ffl-bg) !important;
}
html body .ffl-btn-primary:hover,
html body .btn-primary:hover,
html body .next:hover,
html body .continue:hover:not(:disabled),
html body a.cta.primary:hover,
html body .join:hover,
html body #host-form input[type="submit"]:hover,
html body .loginform input[type="submit"]:hover {
  background: var(--ffl-gold-hover) !important;
  border-color: var(--ffl-gold-hover) !important;
  color: var(--ffl-bg) !important;
  transform: translateY(-1px);
}
html body .ffl-btn-primary:active,
html body .btn-primary:active,
html body .next:active,
html body .continue:active,
html body a.cta.primary:active,
html body #host-form input[type="submit"]:active,
html body .loginform input[type="submit"]:active {
  background: var(--ffl-gold-pressed) !important;
  border-color: var(--ffl-gold-pressed) !important;
  transform: none;
}

/* Secondary */
html body .ffl-btn-secondary,
html body .btn-secondary,
html body .btn-info,
html body .btn-outline-success,
html body .back,
html body a.cta:not(.primary),
html body .actionbtn,
html body .bookslot {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #D8AD58;
  --bs-btn-color: #F5EFE4;
  --bs-btn-hover-bg: rgba(216, 173, 88, .08);
  --bs-btn-hover-border-color: #F2D58A;
  --bs-btn-hover-color: #F5EFE4;
  --bs-btn-active-bg: rgba(216, 173, 88, .16);
  --bs-btn-active-border-color: #D8AD58;
  --bs-btn-active-color: #F5EFE4;
  --bs-btn-focus-box-shadow: var(--ffl-focus);
  background: transparent !important;
  border: 1px solid var(--ffl-gold) !important;
  color: var(--ffl-text) !important;
}
html body .ffl-btn-secondary:hover,
html body .btn-secondary:hover,
html body .btn-info:hover,
html body .btn-outline-success:hover,
html body .back:hover,
html body a.cta:not(.primary):hover,
html body .actionbtn:hover,
html body .bookslot:hover {
  background: rgba(216, 173, 88, .08) !important;
  border-color: var(--ffl-gold-highlight) !important;  /* was `gold` (#FFD700) on .actionbtn:hover */
  color: var(--ffl-text) !important;
}
/* Small table/list actions keep their compact size */
html body .actionbtn,
html body .bookslot {
  min-height: 44px;           /* icon/compact touch target minimum */
  font-size: 14px !important;
  padding: 0 16px !important;
  border-radius: var(--ffl-radius-control) !important;
}

/* Tertiary: footer policy list (JS adds .btn .btn-light .btnpolicies) */
html body .policylinks a.btn-light,
html body .ffl-btn-tertiary {
  display: block;
  width: auto !important;          /* .btnpolicies sets 300px !important */
  min-height: 0;
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ffl-gold-highlight) !important;
  font-family: var(--ffl-font-ui) !important;
  font-size: 14px !important;
  font-weight: 400;
  text-align: left;
  text-decoration: none !important;
}
html body .policylinks a.btn-light:hover,
html body .ffl-btn-tertiary:hover { text-decoration: underline !important; color: var(--ffl-text) !important; }
/* The "View Policy Documents" toggle is a.btn.btn-primary inside .policylinks
   and also receives .btn-light from script; show it as a secondary button. */
html body .policylinks a.btn-primary[data-bs-toggle="collapse"] {
  display: inline-flex;
  width: auto !important;
  min-height: 48px;
  padding: 0 24px !important;
  background: transparent !important;
  border: 1px solid var(--ffl-gold) !important;
  border-radius: var(--ffl-radius-control) !important;
  color: var(--ffl-text) !important;
  font-weight: 700;
}

/* Danger */
html body .ffl-btn-danger,
html body .btn-danger,
html body .btn-outline-danger {
  background: rgba(184, 68, 82, .12) !important;
  border: 1px solid var(--ffl-danger) !important;
  color: var(--ffl-text) !important;
  border-radius: var(--ffl-radius-control) !important;
}

/* Disabled */
html body .btn:disabled,
html body .btn.disabled,
html body button:disabled,
html body .continue:disabled,
html body input[type="submit"]:disabled {
  background: var(--ffl-surface) !important;
  border: 1px solid rgba(170, 161, 151, .4) !important;
  color: var(--ffl-text-muted) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
  transform: none !important;
}

/* Icon buttons: 44 x 44 minimum */
html body .btn-close {
  width: 44px;
  height: 44px;
  padding: 0;
  filter: invert(1) grayscale(1) brightness(1.6);  /* Bootstrap's dark X, made light on Onyx */
  opacity: .85;
}

/* Delete-candidate: .button-73 (white/blue/orange pill) is defined in the
   layout but should not be used. Neutralised to secondary style. */
html body .button-73 {
  background: transparent !important;
  border: 1px solid var(--ffl-gold) !important;
  border-radius: var(--ffl-radius-control) !important;
  box-shadow: none !important;
  color: var(--ffl-text) !important;
  font-family: var(--ffl-font-ui) !important;
  transform: none !important;
}


/* ---------------------------------------------------------------------
   5. FORM FIELDS
   Label above the control, Arial 14 px semibold. Input 48 px min height,
   Onyx surface, Ivory text, 1 px subtle gold border, 6 px radius.
   Placeholder Muted Taupe. Helper text 12-13 px Warm Stone.
   Select: same dimensions, custom chevron, no native blue focus.
   Checkbox/radio: 20-24 px target.
   --------------------------------------------------------------------- */
html body label,
html body .form-label,
html body .control-label,
html body .ffl-label,
html body section.shell .field label,
html body section.shell .group-label {
  font-family: var(--ffl-font-ui) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ffl-text);
}

html body .form-control,
html body .form-select,
html body .ffl-input,
html body section.shell input[type="text"],
html body section.shell input[type="email"],
html body section.shell input[type="tel"],
html body section.shell input[type="date"],
html body section.shell select,
html body section.shell textarea,
html body #floatingReward {
  min-height: 48px;
  padding: 12px 14px;
  background-color: var(--ffl-surface) !important;
  border: var(--ffl-border-field) !important;
  border-radius: var(--ffl-radius-control) !important;
  color: var(--ffl-text) !important;
  font-family: var(--ffl-font-ui) !important;
  font-size: 16px;
  box-shadow: none !important;
  outline: 0;
}
html body .form-control::placeholder,
html body section.shell input::placeholder,
html body section.shell textarea::placeholder {
  color: var(--ffl-text-muted);
  opacity: 1;
}
html body .form-control:focus,
html body .form-select:focus,
html body .ffl-input:focus,
html body section.shell input:focus,
html body section.shell select:focus,
html body section.shell textarea:focus {
  border-color: var(--ffl-gold) !important;
  box-shadow: var(--ffl-focus) !important;  /* replaces Bootstrap blue glow and the gold glow */
  background-color: var(--ffl-surface) !important;
  color: var(--ffl-text) !important;
}
/* Custom chevron (Warm Stone) for selects */
html body .form-select,
html body select.form-control,
html body section.shell select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23D8D0C3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m3 6 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
}
/* Bootstrap floating labels (Sign in, rating modal): keep readable.
   Guide prefers static labels above the field; see instructions. */
html body .form-floating > label { color: var(--ffl-text-secondary); font-weight: 400; }
html body .form-floating > .form-control:focus ~ label,
html body .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--ffl-text-secondary); }
html body .form-floating > .form-control:focus ~ label::after,
html body .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent !important; }

/* Helper text */
html body .form-text,
html body .ffl-helper,
html body section.shell .hint {
  font-size: 13px !important;
  line-height: 1.4;
  color: var(--ffl-text-secondary) !important;
}
/* Required marker follows the label */
html body section.shell .required { color: var(--ffl-gold); }

/* Checkboxes and radios */
html body .form-check-input,
html body .loginform input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ffl-gold);
  background-color: var(--ffl-surface);
  border: 1px solid var(--ffl-text-secondary);
}
html body .form-check-input:checked {
  background-color: var(--ffl-gold);
  border-color: var(--ffl-gold);
}
/* Sign in: "Remember me?" sits in .checkbox.bg-light (white box) */
html body .loginform .checkbox.bg-light {
  background-color: transparent !important;
  padding: 0 !important;
  color: var(--ffl-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
html body .loginform .checkbox label { font-weight: 400; margin: 0; }

/* Become a host / Age authorisation custom checkboxes (.choice/.box) */
html body section.shell .choice,
html body main.page .choice {
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-control) !important;
  background: rgba(16, 14, 13, .6) !important;
  font-family: var(--ffl-font-ui) !important;
  color: var(--ffl-text);
}
html body section.shell .choice:hover,
html body main.page .choice:hover { border-color: rgba(216, 173, 88, .6) !important; }
html body section.shell .choice:has(input:checked),
html body main.page .choice:has(input:checked) {
  border-color: var(--ffl-gold) !important;
  background: rgba(216, 173, 88, .10) !important;   /* was gold-to-wine gradient */
}
html body section.shell .choice:has(input:focus-visible),
html body main.page .choice:has(input:focus-visible) {
  outline: 2px solid var(--ffl-gold-highlight) !important;  /* was white */
  outline-offset: 2px;
}
html body section.shell .box,
html body main.page .box {
  border: 1px solid var(--ffl-text-secondary) !important;
  border-radius: 4px;
  background: var(--ffl-surface) !important;
  color: var(--ffl-bg) !important;
}
html body section.shell .choice input:checked + .box,
html body main.page .choice input:checked + .box {
  background: var(--ffl-gold) !important;
  border-color: var(--ffl-gold) !important;
  box-shadow: none !important;   /* removes glow */
}


/* ---------------------------------------------------------------------
   6. ERROR, SUCCESS AND STATUS MESSAGES
   Guide: "Danger icon and plain-language message directly below the
   field." "Status colours must always be paired with an icon and text
   label." Danger #B84452 on Obsidian is only 3.84:1, below the 4.5:1
   WCAG AA target for normal text, so message TEXT is Ivory and the
   Danger colour is used for the icon and rule.
   Live classes: .field-validation-error, .validation-summary-errors
   (ASP.NET MVC), .text-danger, section.shell .error (#error, Become a host).
   --------------------------------------------------------------------- */
html body .ffl-error,
html body .field-validation-error,
html body .field-validation-error.text-danger,
html body .validation-summary-errors,
html body .validation-summary-errors.text-danger,
html body section.shell .error:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--ffl-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.4;
  color: var(--ffl-text) !important;
}
html body .ffl-error::before,
html body .field-validation-error::before,
html body .validation-summary-errors::before,
html body section.shell .error:not(:empty)::before {
  content: "!";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ffl-danger);
  color: var(--ffl-text);
  font: 700 12px/18px var(--ffl-font-ui);
  text-align: center;
}
html body .validation-summary-errors ul { margin: 0; padding-left: 16px; }
html body .input-validation-error,
html body .form-control.input-validation-error {
  border-color: var(--ffl-danger) !important;
}
/* Generic text-danger (outside validation) keeps Danger only as a rule colour */
html body .text-danger:not(.field-validation-error):not(.field-validation-valid):not(.validation-summary-valid):not(.validation-summary-errors) {
  color: var(--ffl-text) !important;
}

html body .ffl-success {
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--ffl-text);
  border-left: 3px solid var(--ffl-success);
  padding-left: 12px;
}
html body .ffl-warning {
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--ffl-text);
  border-left: 3px solid var(--ffl-warning);
  padding-left: 12px;
}


/* ---------------------------------------------------------------------
   7. LAYOUT-WIDE OVERRIDES OF BANNED COLOURS AND EFFECTS
   (shared layout <style> block, homepage, View live, host profile)
   --------------------------------------------------------------------- */

/* Catch-all for banned named colours set in inline style attributes
   (e.g. Sign in: <p style="color:palegoldenrod">; host profile cards).
   Works only where the inline declaration is NOT !important. */
html body [style*="color:gold"], html body [style*="color: gold"],
html body [style*="color:goldenrod"], html body [style*="color: goldenrod"],
html body [style*="color:darkgoldenrod"], html body [style*="color: darkgoldenrod"],
html body [style*="color:palegoldenrod"], html body [style*="color: palegoldenrod"],
html body [style*="color:lightgoldenrodyellow"], html body [style*="color: lightgoldenrodyellow"],
html body [style*="color:wheat"], html body [style*="color: wheat"],
html body [style*="color:lightgray"], html body [style*="color: lightgray"] {
  color: var(--ffl-text-secondary) !important;
}

/* .menuicon{color:gold}  .hostlive{color:gold!important; spin-3d 4s infinite} */
html body .menuicon { color: var(--ffl-gold) !important; }
html body .hostlive {
  color: var(--ffl-gold) !important;
  animation: none !important;   /* constant 3D spin is a "loud or playful UI pattern" */
  transform: none !important;
}
html body .livelink { filter: none !important; }

/* .menubuttonv2{color:goldenrod!important} (+ wheat on mobile) */
html body .menubuttonv2 { color: var(--ffl-text) !important; background-color: transparent !important; }

/* .actionbtn{border-color:goldenrod; background:black!important} */
html body .actionbtn { background-color: transparent !important; }

/* .standardborder1{border-color:darkgoldenrod!important; border-radius:16px!important} */
html body .standardborder1 {
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-card) !important;
}

/* .stdsmall{color:lightgray!important; letter-spacing:2px} */
html body .stdsmall { color: var(--ffl-text-secondary) !important; letter-spacing: normal; }

/* Navbar: was rgba(0,0,0,.6) + .bg-black. Kept pure black (#000) here, not
   Obsidian, because fflogo.png and the tab PNGs have a solid #000 background
   baked in; on Obsidian they show as visible boxes. The guide allows
   "Gold logo on an obsidian or black background". Switch to var(--ffl-bg)
   once a transparent PNG/SVG lock-up is supplied. */
html body .navbar,
html body .navbar .navbar-collapse { background-color: #000 !important; }
html body .navbar { border-bottom: var(--ffl-border-card); }
html body .navbar-toggler,
html body .navbar-toggler.bg-light-subtle {
  background-color: transparent !important;
  border: 1px solid var(--ffl-gold) !important;
  border-radius: var(--ffl-radius-control);
  width: 44px; height: 44px; padding: 0;
}
html body .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F5EFE4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
/* Desktop: #mainpanel li{background-color:white} */
html body #mainpanel li { background-color: transparent !important; font-size: 16px; }
html body .dropdown-menu {
  --bs-dropdown-bg: #100E0D;
  --bs-dropdown-color: #F5EFE4;
  --bs-dropdown-border-color: rgba(216, 173, 88, .22);
  --bs-dropdown-link-color: #F5EFE4;
  --bs-dropdown-link-hover-bg: rgba(216, 173, 88, .08);
  --bs-dropdown-link-hover-color: #F2D58A;
  letter-spacing: normal !important;   /* was 4px !important */
}
html body .dropdown-menu .menubuttonv2 { background-color: transparent !important; color: var(--ffl-text) !important; }

/* LOGO
   Guide: "Do not stretch, recolour, add glow, place inside a gold box".
   Live: <a href="/"><img src="/img/fflogo.png" style="height:175px;
   filter:brightness(150%);position:fixed;...;border-radius:16px;
   box-shadow:3px 3px 15px black;"></a> as the first child of <body>,
   plus the navbar copy with filter:brightness(150%) and .rounded,
   plus the footer copy at width:20vw. */
html body > a[href="/"] > img[src*="fflogo"] {
  display: none !important;   /* duplicate fixed overlay logo: remove from the layout */
}
html body img[src*="fflogo"],
html body .ffl-logo {
  filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  object-fit: contain;
}
html body .navbar-brand  {
  width: auto !important;
  /* height is forced by inline `height:13vh!important;min-height:100px!important`;
     remove those in the layout so the 88 px header can be achieved. */
}
html body footer img[src*="fflogo"] {
  width: 200px !important;   /* was 20vw; >= 140 px minimum */
  max-width: 100%;
  height: auto;
}
html body .ffl-logo { width: 140px; height: auto; }   /* class for the logo <img> to add on stand-alone pages */
@media (max-width: 767px) {
  html body .ffl-logo { width: 112px; }
}

/* Cards (homepage placeholders, View live, host profile) */
html body .card {
  --bs-card-bg: #100E0D;
  --bs-card-color: #F5EFE4;
  --bs-card-border-color: rgba(216, 173, 88, .22);
  --bs-card-border-radius: 8px;
  --bs-card-inner-border-radius: 7px;
  --bs-card-cap-bg: #100E0D;
  border: var(--ffl-border-card);
  border-radius: var(--ffl-radius-card);
  box-shadow: none !important;   /* `.card{box-shadow:3px 3px 10px black!important}` on host profile */
}
html body #viewhosts .card-footer h4 {          /* inline color:#f5d879 */
  color: var(--ffl-text) !important;
  font-family: var(--ffl-font-display) !important;
  font-size: clamp(19px, 1.6vw, 22px);
}
html body .hostcard { border-radius: var(--ffl-radius-card); }
html body .hostimage {
  border-radius: var(--ffl-radius-card) !important;
  filter: brightness(70%) !important;            /* removes drop-shadow(darkslategray) */
  transition: filter var(--ffl-motion-control) ease-out,
              transform var(--ffl-motion-control) ease-out !important;
}
html body .hostimage:hover {
  filter: brightness(85%) !important;
  transform: translateY(-2px) !important;        /* was scale(1.25) over 1 s */
}
/* Host names on live cards: inline font-family:'Times New Roman'; font-weight:900 */
html body #fetchlive .h3,
html body #fetchlive .nickname {
  font-family: var(--ffl-font-display) !important;
  font-weight: 700 !important;
  color: var(--ffl-text) !important;
}
/* "Live" / "In Private Meeting" pill: was gold gradient, uppercase, 99px */
html body .live-pill {
  background: var(--ffl-gold) !important;
  color: var(--ffl-bg) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--ffl-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 50rem !important;               /* pill allowed for status chips */
  padding: 4px 10px !important;
}
/* Rating badge: .badge.bg-warning.text-black (Bootstrap yellow #ffc107) */
html body .badge.bg-warning {
  background-color: var(--ffl-surface) !important;
  color: var(--ffl-text) !important;
  border: 1px solid var(--ffl-gold);
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
/* .hostdetail{background-color:darkblue} */
html body .hostdetail {
  background-color: var(--ffl-surface) !important;
  border: var(--ffl-border-card);
  border-radius: var(--ffl-radius-control) !important;
  color: var(--ffl-text-secondary);
}
/* "Live now" pulse dot: inline color:#45e590 -> Success */
html body #live-title .pulse { color: var(--ffl-success) !important; }

/* Badges used as category chips (FAQ: .badge.text-bg-info) */
html body .badge.text-bg-info,
html body .badge.text-bg-primary {
  background-color: transparent !important;
  color: var(--ffl-gold-muted) !important;
  border: 1px solid rgba(185, 161, 110, .5);
  font-family: var(--ffl-font-ui) !important;
  font-weight: 700;
}

/* Alerts (FAQ banner .alert-primary, article titles .alert-dark,
   host profile .alert) */
html body .alert,
html body .alert-primary,
html body .alert-dark {
  --bs-alert-bg: #100E0D;
  --bs-alert-color: #F5EFE4;
  --bs-alert-border-color: rgba(216, 173, 88, .22);
  --bs-alert-link-color: #F2D58A;
  border-radius: var(--ffl-radius-card);
  box-shadow: none !important;
}
/* Host profile Rates heading: inline color:goldenrod */
html body #cardrates .alert { color: var(--ffl-text) !important; }
/* Host profile card: inline color:palegoldenrod / text-white */
html body #cardprofile { color: var(--ffl-text-secondary) !important; }
html body #hostdetails .field {
  box-shadow: none !important;
  border: var(--ffl-border-card);
  border-radius: var(--ffl-radius-control);
}
html body #hostdetails .field dt { font-size: 14px; font-weight: 600; color: var(--ffl-text-muted); }
html body #hostdetails .field dd { color: var(--ffl-text); margin: 0; }
/* Empty profile attributes (e.g. Chest_Size with no value) cannot be hidden
   reliably in CSS because the <dd> contains whitespace, so `:empty` does not
   match. Hide them server-side in the view (see instructions). */
html body #hostdetails .nav-item { box-shadow: none !important; border-radius: var(--ffl-radius-control); }

/* Tables (FAQ article list, any data tables) */
html body .table {
  --bs-table-bg: transparent;
  --bs-table-color: #F5EFE4;
  --bs-table-border-color: rgba(216, 173, 88, .22);
  --bs-table-striped-bg: rgba(245, 239, 228, .03);
  --bs-table-striped-color: #F5EFE4;
  --bs-table-hover-bg: rgba(216, 173, 88, .06);
  --bs-table-hover-color: #F5EFE4;
  font-variant-numeric: tabular-nums;
}
html body .articletitle { color: var(--ffl-gold-highlight) !important; }   /* inline color:#E0B296 */

/* List groups (footer policy list) */
html body .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: #F5EFE4;
  --bs-list-group-border-color: rgba(216, 173, 88, .22);
}
html body footer .list-group-item {
  color: var(--ffl-text) !important;
  background-color: transparent !important;    /* JS adds .bg-dark */
}

/* Accordion (host booking slots) */
html body .accordion {
  --bs-accordion-bg: #100E0D;
  --bs-accordion-color: #F5EFE4;
  --bs-accordion-border-color: rgba(216, 173, 88, .22);
  --bs-accordion-border-radius: 8px;
  --bs-accordion-inner-border-radius: 7px;
  --bs-accordion-btn-bg: #100E0D;
  --bs-accordion-btn-color: #F5EFE4;
  --bs-accordion-active-bg: rgba(216, 173, 88, .10);
  --bs-accordion-active-color: #F5EFE4;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 2px #080604, 0 0 0 4px #F2D58A;
}

/* Modals and offcanvas (message, meeting request, rating, FAQ list) */
html body .modal {
  --bs-modal-bg: #100E0D;
  --bs-modal-color: #F5EFE4;
  --bs-modal-border-color: rgba(216, 173, 88, .22);
  --bs-modal-border-radius: 8px;
  --bs-modal-inner-border-radius: 7px;
  --bs-modal-header-border-color: rgba(216, 173, 88, .22);
  --bs-modal-footer-border-color: rgba(216, 173, 88, .22);
  --bs-modal-box-shadow: none;
}
html body .modal-content { box-shadow: none !important; }
html body .offcanvas {
  --bs-offcanvas-bg: #100E0D;
  --bs-offcanvas-color: #F5EFE4;
  --bs-offcanvas-border-color: rgba(216, 173, 88, .22);
}
/* Tip toast: #tipmsg.bg-light with inline color:darkred */
html body #tipmsg { background-color: var(--ffl-surface) !important; color: var(--ffl-text) !important; border: var(--ffl-border-card); }
html body #showtips,
html body #showmessages { box-shadow: none !important; }

/* Footer */
html body footer.footer { background-color: #000 !important;  /* black for the same logo-asset reason as the navbar */
  border-top: var(--ffl-border-card); color: var(--ffl-text-secondary); }
html body footer.footer p { color: var(--ffl-text-secondary); }

/* Error page: inline `opacity:0.9; background-color:#ffffff;` */
html body #mainpages > .container-fluid[style*="background-color:#ffffff"] {
  background-color: var(--ffl-surface) !important;
  opacity: 1 !important;
  color: var(--ffl-text);
  border: var(--ffl-border-card);
  border-radius: var(--ffl-radius-card);
  padding: 32px;
}

/* DataTables default controls on the FAQ list ("Show 10 entries",
   search, info, paging). Interim hide; better to remove the
   DataTable() call (see instructions). Class names cover
   DataTables 1.x and 2.x+. */
html body #tabletitles_wrapper .dataTables_length,
html body #tabletitles_wrapper .dataTables_filter,
html body #tabletitles_wrapper .dataTables_info,
html body #tabletitles_wrapper .dataTables_paginate,
html body #tabletitles_wrapper .dt-length,
html body #tabletitles_wrapper .dt-search,
html body #tabletitles_wrapper .dt-info,
html body #tabletitles_wrapper .dt-paging {
  display: none !important;
}


/* ---------------------------------------------------------------------
   8. MOTION
   Guide: 150-220 ms for controls, 250-350 ms for drawers and modals;
   ease-out entrances, ease-in exits; respect reduced motion; hover never
   adds glow. The site uses AOS with 1500-3000 ms flip/zoom/fade.
   --------------------------------------------------------------------- */
html body [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html body .modal.fade .modal-dialog { transition: transform var(--ffl-motion-panel) ease-out; }
html body .collapsing { transition-duration: var(--ffl-motion-panel); }

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------
   9. STAND-ALONE PAGES (not using the shared layout)
   Scopes used (from the live HTML):
     About            -> div.page        (/Home/About)
     Become a host    -> section.shell   (/Home/HostJoin)
     Age authorisation-> main.page       (/Home/YotiNotification)
   --------------------------------------------------------------------- */

/* Remap --gold2 (#b97813) on Become a host and Age authorisation only */
html body section.shell,
html body main.page {
  --gold2: #B9A16E;   /* Antique Gold: fine rules and secondary detail */
}

/* Become a host: page wine glow (body:before uses --red, remapped to Onyx) */
html body section.shell,
html body main.page section.panel {
  background: rgba(16, 14, 13, .94) !important;   /* Onyx, was gradient */
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-card) !important;  /* was 24px */
  box-shadow: none !important;                      /* was 0 24px 80px #000 */
}

/* H1 on Become a host / Age authorisation: was gradient text with
   drop-shadow. Pale Gold matches the About page heading. */
html body section.shell h1,
html body main.page h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor;
  color: var(--ffl-gold-highlight) !important;
  filter: none !important;
  font-family: var(--ffl-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
}
html body section.shell h2,
html body main.page h2 { font-family: var(--ffl-font-display) !important; }

/* Become a host: aside, steps, progress */
html body section.shell .aside {
  background: rgba(16, 14, 13, .6) !important;
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-card) !important;
}
html body section.shell .secure { color: var(--ffl-text-secondary) !important; border-left-color: var(--ffl-gold) !important; }
html body section.shell .step-indicator {
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-control) !important;
  color: var(--ffl-text-secondary) !important;
  background: transparent !important;
}
html body section.shell .step-indicator.active {
  background: var(--ffl-gold) !important;   /* was gradient #b97813 -> #f4d675 */
  border-color: var(--ffl-gold) !important;
  color: var(--ffl-bg) !important;
}
html body section.shell .step-indicator.done { color: var(--ffl-gold) !important; background: rgba(216, 173, 88, .08) !important; }
html body section.shell .progress span { background: var(--ffl-gold) !important; }
html body section.shell .summary div {
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-card) !important;
}
/* Hide the live-text "♛ FFL ♛" crest once the approved logo <img class="ffl-logo">
   has been added to the page (guide: do not recreate the lettering as live text) */
html body section.shell:has(.ffl-logo) .crest { display: none !important; }

/* Age authorisation */
html body main.page .lead { color: var(--ffl-text) !important; font-family: var(--ffl-font-ui) !important; }
html body main.page .step,
html body main.page .method {
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-card) !important;
  background: rgba(16, 14, 13, .6) !important;
}
html body main.page .method strong { color: var(--ffl-text) !important; }
html body main.page .method span,
html body main.page .step p { color: var(--ffl-text-secondary) !important; }
html body main.page .powered { color: var(--ffl-text-secondary) !important; }
html body main.page .powered strong { color: var(--ffl-text) !important; }
html body main.page .small { color: var(--ffl-text-muted) !important; font-size: 13px !important; }
html body main.page .number { border-color: var(--ffl-gold-muted) !important; }
html body main.page .btn { min-height: 48px; border-radius: var(--ffl-radius-control) !important; }
html body main.page .continue { min-width: 0; }
/* Hide the live-text "FFL" circle + uppercase name once the approved
   logo <img class="ffl-logo"> has been added */
html body main.page:has(.ffl-logo) .brand { display: none !important; }

/* About (largely compliant; tidy-ups) */
html body div.page .hero h1 {
  letter-spacing: .02em !important;   /* was 8px tracking on uppercase text */
}
html body div.page .hero .lead {
  font-family: var(--ffl-font-ui) !important;   /* Body large is Arial, was Georgia */
  font-size: clamp(17px, 1.6vw, 20px) !important;
  line-height: 1.55 !important;
  color: var(--ffl-text-secondary) !important;  /* was #e3d8c4 */
}
html body div.page .cards > .card {
  border: var(--ffl-border-card) !important;
  border-radius: var(--ffl-radius-card) !important;   /* was 14px */
  background: var(--ffl-surface) !important;           /* was gradient */
}
html body div.page .cards > .card h2 { letter-spacing: normal !important; }
html body div.page .cards > .card p { color: var(--ffl-text-secondary) !important; }   /* was #bdb09a */
html body div.page .statement { color: var(--ffl-gold-highlight) !important; }       /* was #dfc889 */
html body div.page .value strong { color: var(--ffl-gold) !important; }
html body div.page .value span { color: var(--ffl-text-secondary) !important; font-size: 13px !important; }  /* was #8f8575 12px */
html body div.page .footer {
  color: var(--ffl-text-muted) !important;   /* was #776e5e at 10px (about 4.0:1, fails AA) */
  font-size: 12px !important;
  letter-spacing: .14em !important;
}
html body div.page .icon { border-color: var(--ffl-gold-muted) !important; }
html body div.page .divider::before,
html body div.page .divider::after { background: rgba(185, 161, 110, .6) !important; }  /* was #80622e gradients */

/* ---------------------------------------------------------------------
   10. NEW COMPONENTS (for the markup in developer-instructions.md)
   Host card per guide: 4:5 image, stage name lower left, rating lower
   right, "Live now" compact chip, offline = reduced saturation,
   max two attributes, 8 px radius, no heavy shadow.
   --------------------------------------------------------------------- */
.ffl-host-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1200px;           /* content capped at 1200 px */
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 767px) {
  .ffl-host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px; }
}
.ffl-host-card {
  position: relative;
  overflow: hidden;
  border: var(--ffl-border-card);
  border-radius: var(--ffl-radius-card);
  background: var(--ffl-surface);
  transition: transform var(--ffl-motion-control) ease-out;
}
.ffl-host-card:hover { transform: translateY(-2px); }
.ffl-host-card > a { display: block; color: var(--ffl-text) !important; text-decoration: none !important; }
.ffl-host-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ffl-host-card::after {         /* 35-60% dark overlay behind text */
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(transparent, rgba(8, 6, 4, .6));
  pointer-events: none;
}
.ffl-host-card .ffl-chip { position: absolute; top: 12px; left: 12px; z-index: 1; }
.ffl-host-name {
  position: absolute;
  left: 12px;
  top: 42px;
  right: 64px;
  z-index: 1;
  margin: 0;
  font-family: var(--ffl-font-display) !important;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ffl-text);
  text-shadow:1px 1px 3px black!important;
}
.ffl-host-rating {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--ffl-font-ui);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ffl-text);
}
.ffl-host-card.is-offline img { filter: saturate(.35); }
.ffl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50rem;
  background: var(--ffl-gold);
  color: var(--ffl-bg);
  font: 700 12px/1.3 var(--ffl-font-ui);
}
.ffl-chip::before {             /* status colour paired with a text label */
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ffl-bg);
}
.ffl-empty-state {
  max-width: 680px;
  margin: 32px auto;
  padding: 24px;
  border: var(--ffl-border-card);
  border-radius: var(--ffl-radius-card);
  background: var(--ffl-surface);
  color: var(--ffl-text-secondary);
  text-align: center;
}
/* Header text navigation (replacement for the image tabs) */
.ffl-nav .nav-link {
  padding: 8px 16px !important;
  font: 600 16px/1.3 var(--ffl-font-ui) !important;
  color: var(--ffl-text) !important;
}
.ffl-nav .nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ffl-gold); }

/* ---------------------------------------------------------------------
   11. OPTIONAL INTERIM (commented out)
   CSS-only replacement of the image nav tabs with live text, for use
   only if the layout HTML cannot be changed immediately. The proper fix
   is HTML text links (see instructions). Uncomment to use.
   ---------------------------------------------------------------------
html body .menubuttonv2 a > img[src*="tab.png"] { display: none !important; }
html body .menubuttonv2 a[href="/Home/About"]::after { content: "About"; }
html body .menubuttonv2 a[href="/Home/HostJoin"]::after { content: "Become a host"; }
html body .menubuttonv2 a[href="/Home/YotiNotification"]::after { content: "Become a guest"; }
html body .menubuttonv2 a[href="/Account/Login"]::after { content: "Sign in"; }
html body .menubuttonv2 a::after {
  display: inline-block; padding: 12px 16px;
  font: 600 16px/1.3 Arial, Helvetica, sans-serif; color: #F5EFE4;
}
*/
/* End of ffl-brand.css */