/*
 * fcp-hub-v2.css — Fan Club Pro member portal styles.
 *
 * VERSIONED BY FILENAME: the /hub/* edge cache ignores query strings, so a
 * new stylesheet ships as fcp-hub-<v>.css with HUB_ASSET_VERSION bumped in
 * app/lib/hub-shell.server.ts. Never rely on a ?v= buster here.
 *
 * LIGHT-FIRST token architecture (ported from fc-portal.css's --fp-* block,
 * renamed --fcp-*): neutral placeholder palette now, the Phase 7 brand pass
 * is a value edit in the token block below. Org accent colors arrive as
 * --fcp-org-* inline vars set by JS on .fcp-hub ONLY (never body).
 *
 * CASCADE RULES (learned the hard way in the donor):
 *   - single-class selectors + BEM-ish .fcp- prefixes, flat (0,1,0)-(0,2,0)
 *     specificity throughout
 *   - ONE components region, alphabetized by component; NO late override
 *     blocks — new rules go into their component's slot, not the file end
 *   - NO backdrop-filter (documented GPU artifacts)
 *
 * File layout:
 *   1. TOKENS
 *   2. BASE / SHELL
 *   3. COMPONENTS (alphabetical: about, account, ann, banner, button, chat,
 *      chip, community (badge/cat/comm/react/topic), copybtn, error, events, feed,
 *      field/form/input, footer, gallery, giveaways, header/hero/profile,
 *      home, lightbox, lock, lockbadge, member-chip, modal, music, nav/tab,
 *      panel, perks, placeholder, plan/paywall, player, processing, skeleton,
 *      socials, status, toggle, turnstile, video)
 *   4. RESPONSIVE
 *   5. MOTION (reduced-motion)
 */

/* ===== 1. TOKENS ===== */

.fcp-hub {
  /* Brand (Phase 7 swaps these values; keep names stable) */
  --fcp-primary: #0777be;
  --fcp-accent: #0ea0da;
  /* Org override chain: JS sets --fcp-org-* only when the org chose colors.
     The --fcp-seed-* slot is the shell's server-seeded club palette (inline
     on the MOUNT, i.e. this element's parent — BOTH the embed and the hosted
     page emit it, see hub-shell.server.ts mountStyle) so the boot/skeleton
     wave + page floor show CLUB colors whenever the hub (re)boots — frame 1
     on the embed, and every ctx.reload skeleton on the hosted page after the
     #fcp-boot overlay is gone — before the org theme JS runs. Seeding the
     plain names on the mount is not enough: this token block re-declares
     them, which cuts off inheritance. */
  --fcp-brand: var(--fcp-org-primary, var(--fcp-seed-brand, var(--fcp-primary)));
  --fcp-brand-2: var(--fcp-org-secondary, var(--fcp-accent));
  --fcp-on-brand: var(--fcp-org-on-primary, #ffffff);
  /* Accent guaranteed legible on a LIGHT surface: JS darkens a light org accent
     (e.g. gold) toward ink until it reads on white; a dark accent passes
     through unchanged. Falls back to the raw brand (the platform default blue is
     already dark enough on light). Use this for accent text/icons that sit on
     theme-independent light tints. */
  --fcp-accent-on-light: var(--fcp-org-accent-on-light, var(--fcp-brand));
  /* Ink guaranteed legible ON a --fcp-brand-2 fill. JS sets --fcp-org-on-secondary
     by the secondary's luminance (mirrors --fcp-org-on-primary) so a pale club
     color used as a solid fill never carries washed-out light text. Falls back to
     the primary on-brand ink when the org set no distinct secondary. */
  --fcp-on-brand-2: var(--fcp-org-on-secondary, var(--fcp-on-brand));

  /* Surfaces (light-first: white cards on off-white page). bg + border-strong
     chain through the embed seed (see --fcp-brand above) so the skeleton phase
     paints the club floor + muted wave base instead of flashing light/gray;
     applyThemeVars later sets these inline on this element, which wins. */
  --fcp-bg: var(--fcp-seed-bg, #f6f7f9);
  --fcp-card: #ffffff;
  --fcp-card-2: #fafbfc;
  --fcp-border: #e4e7ec;
  --fcp-border-strong: var(--fcp-seed-border-strong, #d3d7df);

  /* Text */
  --fcp-text: #16181d;
  --fcp-text-muted: #5b616c;
  --fcp-text-faint: #6c727d;

  /* Brand tints (pale-blue panels / soft accents; literal so browsers without
     color-mix still get a valid surface — mirrors the static-first pattern
     used across this file). */
  --fcp-primary-tint: #e6f1f8;
  --fcp-primary-tint-border: #cde4f2;

  /* Member status (GREEN is reserved for the active-member badge ONLY). */
  --fcp-member: #1f7a3d;
  --fcp-member-bg: #eaf6ec;
  --fcp-member-border: #cde6d2;

  /* Shape + layout (editorial: wider frame, larger radii) */
  --fcp-radius-lg: 8px;
  --fcp-radius: 8px;
  --fcp-radius-sm: 5px;
  --fcp-page-width: 1560px;
  --fcp-page-pad: clamp(16px, 3vw, 34px);

  /* Elevation (soft, light-theme shadows — no giant black halos) */
  --fcp-shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.05);
  --fcp-shadow: 0 1px 2px rgba(22, 24, 29, 0.05), 0 8px 24px rgba(22, 24, 29, 0.07);
  --fcp-shadow-lg: 0 2px 6px rgba(22, 24, 29, 0.06), 0 18px 44px rgba(22, 24, 29, 0.12);

  /* Type — the platform faces (brand.css), self-hosted. @font-face lives at
     the end of this file with ABSOLUTE fanclubpro.io URLs: the hub renders on
     tenant subdomains and inside merchant sites, where relative /fonts 404s.
     System stack stays as the fallback while the woff2s stream in (swap). */
  --fcp-font:
    "Poppins",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --fcp-font-head:
    "Gotham",
    "Poppins",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* TYPE SCALE (2026-10-03). The public club hub -- the standalone /@handle
     page AND the cross-site embed -- uses these six steps and nothing else,
     the SAME six the signed-in fan surface and the admin chrome use, so the
     whole product shares one scale. Six steps, by role:
       --fs-label   12  meta, captions, timestamps, counts, pills, badges,
                        eyebrows, kickers, micro all-caps labels, legal, hints,
                        table column heads, avatar initials up to a 30px circle
       --fs-body    13  default copy, snippets, buttons, links, nav, menu items,
                        form values, a person's name in a row (by weight, not size)
       --fs-title   14  card + list-item titles, inputs, emphasized body
       --fs-section 16  block/section headings, modal titles, empty-state titles,
                        the chat composer (16 keeps iOS from zooming on focus),
                        avatar initials in a 40-44px circle
       --fs-page    22  the one panel-level heading of a surface
       --fs-stat    24  figures and amounts, avatar initials in a 56-64px circle
       --fs-display     THE HERO, and nothing else. This is the only fluid ramp
                        in the sheet; the music, now-playing and playlist titles
                        used to carry three more and are now --fs-page.
     Weights: 400 body, 600 emphasis, 700 headings and figures. No 500, no 800.
     EVERY call site repeats the literal as a var() fallback on purpose: the
     hub shell links this sheet standalone (the embed links ONLY this file, with
     no admin.css and no landing.css), so a bare var() would resolve to nothing
     there. Verified by RENDERED census, never by reading the classes. */
  --fs-label: 12px;
  --fs-body: 13px;
  --fs-title: 14px;
  --fs-section: 16px;
  --fs-page: 22px;
  --fs-stat: 24px;
  --fs-display: clamp(32px, 4.6vw, 60px);
}

/* ===== 2. BASE / SHELL ===== */

.fcp-hub {
  font-family: var(--fcp-font);
  color: var(--fcp-text);
  background: var(--fcp-bg);
}

/* NATIVE CONTROLS FOLLOW THE CLUB'S THEME.
 *
 * The browser draws parts of a form control itself, and it picks their ink from
 * `color-scheme`, not from our CSS. With none declared, every club rendered
 * those parts in the LIGHT scheme: on a dark club the date field's calendar
 * button was black-on-black and effectively invisible, which is what this
 * fixes. It is not only that button, so this is set at the root rather than
 * filtered onto one icon: the same declaration corrects the date and time
 * pickers, the spin buttons, scrollbars, select menus, and the yellow autofill
 * wash Chrome paints over inputs.
 *
 * Keyed off the theme the hub has already resolved for the club (data-theme is
 * set from the club's floor luminance), so it cannot drift from the palette
 * around it, and it is deliberately NOT `light dark` — that would follow the
 * VIEWER's OS instead of the club, so a dark club viewed on a light laptop
 * would go back to black-on-black. */
.fcp-hub[data-theme="dark"] { color-scheme: dark; }
.fcp-hub[data-theme="light"] { color-scheme: light; }

/* FORM CONTROLS FOLLOW THE BRAND FACE.
 *
 * A <button> does not inherit font-family -- the UA applies
 * `font: -webkit-small-control`, which is Arial. Any control styled without
 * restating the family therefore drops out of Poppins, and a census of this
 * bundle found 23 button classes with that hole (the Photos collection card
 * and its two labels were the visible ones).
 *
 * Fixed once here as a FLOOR instead of class by class, so a new button cannot
 * reintroduce it. :where() contributes zero specificity, so every component
 * rule later in the file still overrides it -- .fcp-perk__code keeps its
 * monospace stack. Only the family is reset; sizes stay with the scale. */
.fcp-hub :where(button, input, select, textarea, optgroup) {
  font-family: inherit;
}

/* Platform heading face (Gotham) across the hub, matching the web app. */
.fcp-hub h1,
.fcp-hub h2,
.fcp-hub h3,
.fcp-hub h4 {
  font-family: var(--fcp-font-head);
}

.fcp-hub {
  width: 100%;
  max-width: var(--fcp-page-width);
  margin: 0 auto;
  padding: 0 var(--fcp-page-pad) 40px;
  box-sizing: border-box;
  min-height: 60vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Edge-to-edge embed (data-fcp-full, emitted by renderHubShell for ?full=1).
   Overriding the page-width VARIABLE drops the cap everywhere it's read: the
   .fcp-hub container, the hero header bar, and the full-bleed section calc
   (whose (100vw - page-width) breakout collapses to zero, so no overflow).
   Inner --fcp-page-pad gutters stay, so content never touches the frame edge. */
.fcp-hub[data-fcp-full="1"] {
  --fcp-page-width: 100vw;
}

/* Embed surface auto-heights to its content: an iframe reports its own height so
   the host frame can size to fit. A viewport-relative floor (60vh here, 72vh on
   the content loader) is 60% of the FRAME's own height inside that iframe, so it
   can never shrink to a short tab's content — the club section keeps dead space.
   Drop the vh floors on the embed (data-fcp-hosted="0") so each tab sizes exactly
   to its content; the loader keeps a fixed px floor so it stays centered. */
.fcp-hub[data-fcp-hosted="0"] { min-height: 0; }
.fcp-hub[data-fcp-hosted="0"] .fcp-bootload { min-height: 340px; }

.fcp-hub *,
.fcp-hub *::before,
.fcp-hub *::after {
  box-sizing: border-box;
}

.fcp-hub img {
  max-width: 100%;
}

.fcp-hub a {
  color: var(--fcp-accent-on-light);
  text-decoration: none;
}

/* Dark-themed clubs: the raw club accent reads on the dark surface, whereas the
   light-darkened accent-on-light would be too dim there. Comes BEFORE the
   anchor-button re-assertions so those still win by later source order. */
.fcp-hub[data-theme="dark"] a { color: var(--fcp-brand-2); }

/* Anchor-buttons: .fcp-hub a (0,1,1) beats .fcp-btn--primary (0,1,0), which
   would paint red buttons with the blue link color. Re-assert per variant. */
.fcp-hub a.fcp-btn--primary { color: var(--fcp-on-brand); }
.fcp-hub a.fcp-btn--ghost { color: var(--fcp-text); }
.fcp-hub a.fcp-btn--danger { color: #a32626; }

.fcp-hub a:hover {
  text-decoration: underline;
}

/* Link-styled BUTTONS never underline — they hover like buttons instead
   (primary darkens via the .fcp-btn brightness filter; ghost tints below). */
.fcp-hub a.fcp-btn:hover {
  text-decoration: none;
}

.fcp-hub .fcp-btn--ghost:hover {
  background: var(--fcp-card-2);
  border-color: var(--fcp-border-strong);
}

/* ===== 3. COMPONENTS (alphabetical) ===== */

/* -- about (Stage 5D: support card, FAQ accordion, legal links) -- */

.fcp-about {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcp-about__card {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  padding: 18px;
}

.fcp-about__cardTitle {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 0 0 10px;
}

.fcp-about__intro {
  color: var(--fcp-text-muted);
  font-size: var(--fs-title, 14px);
  line-height: 1.55;
  margin: 0 0 12px;
  white-space: pre-line;
}

.fcp-hub a.fcp-about__link {
  align-items: center;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text);
  display: flex;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 10px;
  justify-content: space-between;
  padding: 11px 14px;
}

.fcp-about__link:hover {
  background: var(--fcp-card-2);
  text-decoration: none;
}

.fcp-about__link svg {
  color: var(--fcp-text-faint);
  flex: 0 0 auto;
}

.fcp-about__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fcp-about__mail {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  overflow-wrap: anywhere;
}

.fcp-about__mailRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-about__support {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcp-faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fcp-faq__a {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.55;
  padding: 0 12px 12px;
  white-space: pre-line;
}

.fcp-faq__chev {
  color: var(--fcp-text-faint);
  flex: 0 0 auto;
  transition: transform 140ms ease;
}

.fcp-faq__item {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
}

.fcp-faq__item.is-open .fcp-faq__chev {
  transform: rotate(180deg);
}

.fcp-faq__q {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fcp-text);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 10px;
  justify-content: space-between;
  line-height: 1.4;
  padding: 12px;
  text-align: left;
  width: 100%;
}

/* -- account -- */

.fcp-acct {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fcp-acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Escape hatch injected beside a billing-portal error when the server says the
   fan can still cancel (canCancel). Standalone, so it needs its own spacing. */
.fcp-acct-cancelOffer {
  display: inline-flex;
  margin-top: 10px;
}

.fcp-acct-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fcp-acct-avatar__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.fcp-acct-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fcp-acct-avatar__preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  display: grid;
  place-items: center;
  font-size: var(--fs-stat, 24px);
  font-weight: 700;
  /* Theme ink, not the brand accent: this sits on --fcp-card-2, so the letter
     must take its contrast from the surface behind it rather than from the
     club's colour. --fcp-text flips white/near-black with the club theme. */
  color: var(--fcp-text);
  flex: 0 0 auto;
}

.fcp-acct-card {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  padding: 20px 22px;
}

.fcp-acct-card--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.fcp-acct-card__body {
  margin-top: 12px;
}

.fcp-acct-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-acct-card__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 0;
}

.fcp-acct-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--fcp-border);
  font-size: var(--fs-title, 14px);
}

.fcp-acct-fact:last-child {
  border-bottom: 0;
}

.fcp-acct-fact__label {
  color: var(--fcp-text-muted);
  font-weight: 600;
}

.fcp-acct-fact__value {
  font-weight: 700;
  text-align: right;
}

.fcp-acct-facts {
  margin: 2px 0 4px;
}

.fcp-acct-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.fcp-acct-form .fcp-field {
  width: 100%;
}

.fcp-acct-leave {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--fcp-border);
}

.fcp-acct-leave__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-acct-leave__confirm {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  padding: 14px 16px;
}

.fcp-acct-leave__copy,
.fcp-acct-leave__done {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0 0 12px;
}

.fcp-acct-muted {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
}

.fcp-acct-note {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 12px 0 0;
  padding: 10px 14px;
}

.fcp-acct-note--warn {
  background: #fdf6ec;
  border-color: #f2e2c4;
  color: #7a5a1e;
}

/* "Set to end" (canceled but still active): a prominent red bar so the fan
   clearly sees their membership will lapse. Fixed light-red callout (like
   --warn) so it stands out on any club theme, light or dark. */
.fcp-acct-note--danger {
  background: #fdecec;
  border-color: #f2c6c6;
  border-left: 3px solid #d13438;
  color: #9a2222;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.fcp-acct-note__ic {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #d13438;
}

.fcp-acct-prefs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.fcp-acct-socialGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.fcp-acct-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* -- ann (Stage 5D: announcement modal + pin chip) -- */

.fcp-ann__body {
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  line-height: 1.6;
  white-space: pre-line;
}

.fcp-ann__date {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-ann__img {
  border-radius: var(--fcp-radius-sm);
  display: block;
  max-height: 320px;
  object-fit: cover;
  width: 100%;
}

/* DETERRENT ONLY (pairs with deterMediaGrab in the JS) — casual-copy friction,
   NOT security. Disables drag-to-desktop and text/image selection on the
   members-only media surfaces (player audio/video, lightbox + announcement
   image, and the gallery cover tiles). Scoped to media so post/announcement
   COPY stays selectable. Trivially bypassed; do not rely on it. */
.fcp-nograb,
.fcp-mplayer__audio,
.fcp-vid__video,
.fcp-lb__img,
.fcp-ann__img,
.fcp-phototile,
.fcp-vidtile,
.fcp-vidtile__thumb {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.fcp-ann__metaRow {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fcp-ann__pin {
  background: #fdf6ec;
  border: 1px solid #f2e2c4;
  border-radius: 5px;
  color: #7a5a1e;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  text-transform: uppercase;
}

/* -- announcements archive (View all modal: list <-> detail) -- */

.fcp-annarch {
  display: flex;
  flex-direction: column;
}

.fcp-annarch__loading {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  margin: 0;
}

.fcp-annarch__row {
  appearance: none;
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fcp-border);
  color: var(--fcp-text);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 14px;
  padding: 12px 4px;
  text-align: left;
  width: 100%;
}

.fcp-annarch__row:first-child {
  border-top: 0;
}

.fcp-annarch__row:hover {
  background: var(--fcp-card-2);
}

.fcp-annarch__thumb {
  align-items: center;
  background: var(--fcp-card-2) center / cover no-repeat;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-brand);
  display: inline-flex;
  flex: 0 0 auto;
  height: 56px;
  justify-content: center;
  overflow: hidden;
  width: 88px;
}

.fcp-annarch__thumb svg {
  height: 22px;
  width: 22px;
}

.fcp-annarch__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fcp-annarch__meta {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fcp-annarch__date {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-annarch__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.fcp-annarch__snippet {
  color: var(--fcp-text-muted);
  display: -webkit-box;
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fcp-annarch__back {
  align-items: center;
  align-self: flex-start;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fcp-brand);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.08em;
  padding: 2px 0;
  text-transform: uppercase;
}

/* The shared arrow glyph points right; back points left. */
.fcp-annarch__back svg {
  transform: rotate(180deg);
}

.fcp-hub[data-theme="light"] .fcp-annarch__back {
  color: var(--fcp-accent-on-light);
}

/* -- banner (status area) -- */

.fcp-banner {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 13px 16px;
}

/* Theme-aware success tint: mix the green into the org's own card colour so the
   banner is pale-green on a light theme and dark-green on a dark theme, keeping
   the theme's --fcp-text readable in both (was a hardcoded light bg, which left
   near-white text invisible under a dark org theme). */
.fcp-banner--celebrate {
  border-color: color-mix(in srgb, #2e9a4d 38%, var(--fcp-border));
  background: color-mix(in srgb, #2e9a4d 13%, var(--fcp-card));
}

.fcp-banner--quiet {
  color: var(--fcp-text-muted);
}

.fcp-banner--warn {
  border-color: color-mix(in srgb, #d98a00 38%, var(--fcp-border));
  background: color-mix(in srgb, #d98a00 13%, var(--fcp-card));
}

.fcp-banner__check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2e7d3b;
  color: #ffffff;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  animation: fcp-pop 360ms cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

.fcp-banner__dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fcp-text-faint);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  padding: 6px;
}

.fcp-banner__dismiss:hover {
  color: var(--fcp-text);
}

.fcp-banner__text {
  color: var(--fcp-text);
  flex: 1 1 240px;
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
}

.fcp-banner__text strong {
  font-weight: 700;
}

/* Membership-gift claim banner (Home, claimable state only): the celebrate
   banner's shape tinted with the CLUB ACCENT instead of success green, so it
   reads as a claim prompt. Same color-mix-into-card trick keeps --fcp-text
   readable on light AND dark org themes. */
.fcp-giftbanner {
  border-color: color-mix(in srgb, var(--fcp-brand) 38%, var(--fcp-border));
  background: color-mix(in srgb, var(--fcp-brand) 11%, var(--fcp-card));
}

/* Bare accent gift glyph — no framed badge (the no-icon-frame rule). Only
   shown when the offer has no product image. */
.fcp-giftbanner__badge {
  width: 24px;
  height: 24px;
  color: var(--fcp-brand);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  animation: fcp-pop 360ms cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

/* Product photo shown in place of the glyph when the offer has an image. */
.fcp-giftbanner__thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex: 0 0 auto;
  animation: fcp-pop 360ms cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

/* Perks "My offers": the member's claimed membership offers (in progress +
   redeemed). One stacked row each, matching the perk-row feel. */
.fcp-myoffers { display: grid; gap: 10px; }
.fcp-myoffer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--fcp-border);
  border-radius: 12px;
  background: var(--fcp-card);
}
.fcp-myoffer__thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex: 0 0 auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.fcp-myoffer__badge { color: var(--fcp-brand); flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; }
.fcp-myoffer__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fcp-myoffer__title { font-size: var(--fs-title, 14px); font-weight: 700; line-height: 1.3; }
.fcp-myoffer__meta { margin-top: 2px; font-size: var(--fs-label, 12px); color: var(--fcp-text-muted, #5b616c); }
.fcp-myoffer__pill {
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--fcp-text-muted, #5b616c);
  background: color-mix(in srgb, var(--fcp-text-muted, #5b616c) 12%, transparent);
}
.fcp-myoffer__pill.is-redeemed {
  color: #1a8f52;
  background: rgba(26, 143, 82, 0.12);
}

@keyframes fcp-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* -- button -- */

.fcp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.fcp-btn:hover {
  filter: brightness(0.94);
  text-decoration: none;
}

.fcp-btn:active {
  transform: translateY(1px);
}

.fcp-btn:focus-visible {
  outline: 2px solid var(--fcp-brand);
  outline-offset: 2px;
}

.fcp-btn:disabled {
  cursor: default;
  filter: none;
  opacity: 0.55;
  transform: none;
}

.fcp-btn.is-busy {
  opacity: 0.7;
}

.fcp-btn--block {
  display: flex;
  width: 100%;
}

.fcp-btn--danger {
  background: transparent;
  border-color: #e5b9b9;
  color: #a32626;
}

.fcp-btn--danger:hover {
  background: #fbf0f0;
  filter: none;
}

.fcp-btn--ghost {
  background: transparent;
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-btn--primary {
  background: var(--fcp-brand);
  color: var(--fcp-on-brand);
}

.fcp-btn--sm {
  font-size: var(--fs-body, 13px);
  padding: 8px 16px;
}

/* -- chat (Stage 6: live chat over WebSocket; Stage 6B channel layout) --
   Channel-style room: header (title + bell/search/menu), separator-row
   message list with reaction chips + photo attachments, pill composer with
   attach button, and a right-hand presence sidebar (Online now roster +
   member count). All colors ride the theme tokens so dark and custom-themed
   clubs render the reference look with their own accent automatically. */

.fcp-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ONE unit: the members panel is an attached drawer of the chat box
   (border-left divider, no gap), expanded by default and collapsible via the
   header people toggle (.is-sideClosed, remembered per club). */
.fcp-chat__layout {
  align-items: stretch;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-lg);
  box-shadow: var(--fcp-shadow-sm);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 250px;
  overflow: hidden;
}

.fcp-chat__layout.is-sideClosed {
  grid-template-columns: minmax(0, 1fr);
}

.fcp-chat__layout.is-sideClosed .fcp-chat__side {
  display: none;
}

.fcp-chat__main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  /* Anchors the drag-and-drop overlay. */
  position: relative;
}

/* ---- drag-and-drop overlay (iMessage-style photo drop) ---- */

.fcp-chat__dropOverlay {
  align-items: center;
  /* static theme-correct fallback first, then the translucent color-mix */
  background: var(--fcp-card);
  background: color-mix(in srgb, var(--fcp-card) 82%, transparent);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
  position: absolute;
  z-index: 25;
}

.fcp-chat__main.is-dragging .fcp-chat__dropOverlay {
  display: flex;
}

.fcp-chat__dropInner {
  align-items: center;
  border: 2px dashed var(--fcp-brand);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.fcp-chat__dropTitle {
  color: var(--fcp-text);
  font-size: var(--fs-section, 16px);
  font-weight: 700;
}

.fcp-chat__dropSub {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
}

/* ---- channel header ---- */

.fcp-chat__head {
  align-items: flex-start;
  border-bottom: 1px solid var(--fcp-border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 18px 12px;
}

.fcp-chat__headText {
  min-width: 0;
}

.fcp-chat__title {
  /* block (not flex) so text-overflow: ellipsis actually applies to the title
     text — on a flex container the anonymous text item hard-clips instead. */
  display: block;
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-chat__sub {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  margin: 2px 0 0;
}

.fcp-chat__tools {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.fcp-chat__toolBtn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.fcp-chat__toolBtn:hover {
  background: var(--fcp-card-2);
  color: var(--fcp-text);
}

.fcp-chat__toolBtn.is-on {
  color: var(--fcp-accent-on-light);
}

.fcp-chat__toolBtn svg {
  display: block;
}

.fcp-chat__menuWrap {
  position: relative;
}

.fcp-chat__menu {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border-strong);
  border-radius: var(--fcp-radius-sm);
  box-shadow: var(--fcp-shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}

.fcp-chat__menuItem {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fcp-text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  padding: 9px 10px;
  text-align: left;
}

.fcp-chat__menuItem:hover {
  background: var(--fcp-card-2);
}

/* ---- status / presence ---- */

.fcp-chat__status {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.fcp-chat__dot {
  background: var(--fcp-text-faint);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.fcp-chat__dot.is-online {
  background: var(--fcp-member);
}

.fcp-chat__dot.is-connecting {
  animation: fcp-chat-pulse 1.2s ease-in-out infinite;
  background: var(--fcp-text-faint);
}
@media (prefers-reduced-motion: reduce) {
  .fcp-chat__dot.is-connecting { animation: none; }
}

.fcp-chat__dot.is-off {
  background: #a32626;
}

.fcp-chat__onlinePill {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  white-space: nowrap;
  /* Tappable: opens the "who's online" drawer (the only roster affordance on
     mobile, where the sidebar is hidden). */
  cursor: pointer;
  border-radius: 999px;
  padding: 3px 8px;
  margin: -3px -2px;
  transition: background 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.fcp-chat__onlinePill:hover {
  background: var(--fcp-card-2);
  color: var(--fcp-text);
}
.fcp-chat__onlinePill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fcp-brand) 60%, transparent);
  outline-offset: 1px;
}

.fcp-chat__notice {
  background: var(--fcp-card-2);
  border-bottom: 1px solid var(--fcp-border);
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  padding: 10px 18px;
}

/* ---- message list ---- */

.fcp-chat__listWrap {
  position: relative;
}

.fcp-chat__scroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: min(58vh, 560px);
  /* Scroll-back prepends compensate scrollTop manually; the browser's own
     scroll anchoring would double-adjust on top of that. */
  overflow-anchor: none;
  overflow-y: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}

.fcp-chat__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding: 8px 0;
}

.fcp-chat__loading,
.fcp-chat__empty {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  padding: 28px 12px;
  text-align: center;
}

.fcp-chat__older {
  align-self: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  margin: 8px auto 10px;
  padding: 6px 14px;
}

.fcp-chat__older:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-chat__older:disabled {
  cursor: default;
  opacity: 0.55;
}

.fcp-chat__jump {
  background: var(--fcp-brand);
  border: 0;
  border-radius: 8px;
  bottom: 14px;
  box-shadow: var(--fcp-shadow);
  color: var(--fcp-on-brand);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  left: 50%;
  padding: 8px 16px;
  position: absolute;
  transform: translateX(-50%);
}

/* ---- message rows (separator style, reference layout) ---- */

/* iMessage-style bubbles: your OWN messages align right with an accent bubble
   (avatar hidden, like iMessage); everyone else aligns left with a neutral
   bubble + avatar. Consecutive same-author messages group tighter. */
.fcp-chat__msg {
  align-items: flex-end;
  display: flex;
  gap: 10px;
  padding: 5px 18px;
  position: relative;
}

.fcp-chat__msg.is-own {
  flex-direction: row-reverse;
}

.fcp-chat__msg.is-pending {
  opacity: 0.6;
}

.fcp-chat__msg.is-failed .fcp-chat__body,
.fcp-chat__msg.is-held .fcp-chat__body {
  color: var(--fcp-text-faint);
}

/* Grouped (same author within 5 min): tighten the gap, drop the repeated
   name/time header, and keep the avatar column aligned without repeating it. */
.fcp-chat__msg.is-compact {
  margin-top: -4px;
}

.fcp-chat__msg.is-compact .fcp-chat__avatar {
  visibility: hidden;
}

.fcp-chat__msg.is-compact .fcp-chat__meta {
  display: none;
}

.fcp-chat__avatar {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  flex: 0 0 auto;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  height: 32px;
  overflow: hidden;
  place-items: center;
  width: 32px;
}

/* iMessage hides your OWN avatar — the right-aligned accent bubble is enough. */
.fcp-chat__msg.is-own .fcp-chat__avatar {
  display: none;
}

/* Hide the INITIALS only (first child) when a photo is set — the roster's
   presence dot is also a child span and must stay visible. */
.fcp-chat__avatar.has-photo > span:first-child {
  visibility: hidden;
}

/* Org-logo avatars (the club chatting as itself): the mark floats inside the
   circle instead of being cover-zoomed edge to edge. */
.fcp-hub .fcp-chat__avatar.is-logo {
  background-color: var(--fcp-card-2);
  background-size: 88%;
}

.fcp-chat__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 74%;
  min-width: 0;
}

.fcp-chat__msg.is-own .fcp-chat__content {
  align-items: flex-end;
  margin-left: auto;
}

.fcp-chat__meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px;
}

.fcp-chat__msg.is-own .fcp-chat__meta {
  flex-direction: row-reverse;
}

.fcp-chat__name {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}

.fcp-chat__adminBadge {
  border-radius: 5px;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  text-transform: uppercase;
  /* static brand tint fallback first, then color-mix (house idiom) */
  color: var(--fcp-accent-on-light);
  background: var(--fcp-primary-tint);
  border: 1px solid var(--fcp-primary-tint-border);
  background: color-mix(in srgb, var(--fcp-brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--fcp-brand) 22%, transparent);
}

.fcp-chat__time {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

/* The message bubble. */
.fcp-chat__body {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 8px 13px;
  white-space: pre-wrap;
  width: fit-content;
}

/* Own bubble: the club's brand accent, right-aligned (the iMessage-blue slot). */
.fcp-chat__msg.is-own .fcp-chat__body {
  background: var(--fcp-brand);
  border-color: transparent;
  color: var(--fcp-on-brand);
  margin-left: auto;
}

.fcp-chat__msgNote {
  color: #a03030;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  margin-top: 2px;
}

.fcp-chat__msg.is-held .fcp-chat__msgNote {
  color: var(--fcp-text-muted);
}

/* ---- photo attachments in bubbles ---- */

.fcp-chat__imgBtn {
  background: transparent;
  border: 0;
  cursor: zoom-in;
  margin-top: 4px;
  padding: 0;
  text-align: left;
  width: fit-content;
}

.fcp-hub img.fcp-chat__img {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: block;
  max-height: 320px;
  max-width: min(100%, 380px);
  object-fit: cover;
}

.fcp-chat__lightImg {
  border-radius: var(--fcp-radius-sm);
  display: block;
  max-height: 74vh;
  max-width: 100%;
}

/* ---- reactions ---- */

.fcp-chat__reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}

/* Own reactions hang under the right-aligned bubble. */
.fcp-chat__msg.is-own .fcp-chat__reacts {
  justify-content: flex-end;
}

.fcp-chat__reacts:empty {
  display: none;
}

.fcp-chat__reactChip {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 999px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 9px 3px 6px;
}

.fcp-chat__reactChip:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-chat__reactChip.is-mine {
  /* static brand tint fallback first, then color-mix */
  background: var(--fcp-primary-tint);
  border-color: var(--fcp-primary-tint-border);
  background: color-mix(in srgb, var(--fcp-brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--fcp-brand) 26%, transparent);
  color: var(--fcp-accent-on-light);
}

.fcp-chat__reactIc {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 15px;
  width: 15px;
}

.fcp-chat__reactChip[data-reaction="LIKE"] .fcp-chat__reactIc,
.fcp-chat__pickerItem[data-reaction="LIKE"]::before {
  background-image: url("./community-like-reaction.svg");
}

.fcp-chat__reactChip[data-reaction="FIRE"] .fcp-chat__reactIc,
.fcp-chat__pickerItem[data-reaction="FIRE"]::before {
  background-image: url("./community-fire-reaction.svg");
}

.fcp-chat__reactChip[data-reaction="LOL"] .fcp-chat__reactIc,
.fcp-chat__pickerItem[data-reaction="LOL"]::before {
  background-image: url("./community-lol-reaction.svg");
}

.fcp-chat__reactChip[data-reaction="WOW"] .fcp-chat__reactIc,
.fcp-chat__pickerItem[data-reaction="WOW"]::before {
  background-image: url("./community-wow-reaction.svg");
}

.fcp-chat__reactChip[data-reaction="HEART"] .fcp-chat__reactIc,
.fcp-chat__pickerItem[data-reaction="HEART"]::before {
  background-image: url("./community-heart-reaction.svg");
}

.fcp-chat__rowTools {
  opacity: 0;
  position: absolute;
  right: 14px;
  top: 8px;
  transition: opacity 120ms ease;
}

/* Own bubble is on the right, so its react-add affordance sits on the LEFT. */
.fcp-chat__msg.is-own .fcp-chat__rowTools {
  left: 14px;
  right: auto;
}

.fcp-chat__msg.is-own .fcp-chat__picker {
  left: 0;
  right: auto;
}

.fcp-chat__msg:hover .fcp-chat__rowTools,
.fcp-chat__msg:focus-within .fcp-chat__rowTools {
  opacity: 1;
}

.fcp-chat__rowToolBtn {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: 999px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.fcp-chat__rowToolBtn:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-chat__picker {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border-strong);
  border-radius: 999px;
  /* Opens ABOVE the hover toolbar: the most-reacted-to message is the newest
     one at the bottom of a bottom-pinned scroller, where a downward popover
     would land clipped below the fold. */
  bottom: calc(100% + 6px);
  box-shadow: var(--fcp-shadow);
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  position: absolute;
  right: 0;
  z-index: 15;
}

.fcp-chat__pickerItem {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  cursor: pointer;
  height: 30px;
  position: relative;
  width: 30px;
}

.fcp-chat__pickerItem:hover {
  border-color: var(--fcp-border-strong);
  transform: translateY(-1px);
}

.fcp-chat__pickerItem::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inset: 5px;
  position: absolute;
}

/* ---- composer ---- */

.fcp-chat__attachRow {
  border-top: 1px solid var(--fcp-border);
  padding: 10px 18px 0;
}

.fcp-chat__attachBusy {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-chat__attachChip {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: inline-flex;
  gap: 10px;
  padding: 6px 10px 6px 6px;
}

.fcp-chat__attachThumb {
  border-radius: 8px;
  height: 40px;
  object-fit: cover;
  width: 40px;
}

.fcp-chat__attachLabel {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-chat__attachRemove {
  background: transparent;
  border: 0;
  color: var(--fcp-text-faint);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  text-decoration: underline;
}

.fcp-chat__attachRemove:hover {
  color: var(--fcp-text);
}

.fcp-chat__composer {
  align-items: flex-end;
  border-top: 1px solid var(--fcp-border);
  display: flex;
  gap: 10px;
  padding: 12px 18px 14px;
}

.fcp-chat__attachBtn {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.fcp-chat__attachBtn:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-chat__attachBtn:disabled {
  cursor: default;
  opacity: 0.55;
}

.fcp-chat__input {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--fcp-text);
  display: block;
  flex: 1;
  font-family: inherit;
  /* 16px so iOS Safari never zooms the viewport on focus (its threshold) —
     a zoom would shove the composer around and worsen the keyboard overlap. */
  font-size: var(--fs-section, 16px);
  line-height: 1.5;
  max-height: 120px;
  min-height: 40px;
  outline: none;
  padding: 9px 16px;
  resize: none;
  width: 100%;
}

.fcp-chat__input::placeholder {
  color: var(--fcp-text-faint);
}

.fcp-chat__input:focus {
  border-color: var(--fcp-brand-2);
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
  outline: none;
}

.fcp-chat__input:disabled {
  cursor: default;
  opacity: 0.55;
}

.fcp-chat__send {
  flex: 0 0 auto;
}

.fcp-chat__hint {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  padding: 0 6px;
}

.fcp-chat__closed {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  padding: 44px 24px;
  text-align: center;
}

/* ---- sidebar ---- */

.fcp-chat__side {
  border-left: 1px solid var(--fcp-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.fcp-chat__sideHead {
  align-items: center;
  display: flex;
  gap: 7px;
}

.fcp-chat__sideHead--members {
  border-top: 1px solid var(--fcp-border);
  margin-top: 6px;
  padding-top: 14px;
}

.fcp-chat__sideTitle {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
}

.fcp-chat__sideDot {
  background: var(--fcp-member);
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.fcp-chat__sideCount {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-chat__sideCount--muted {
  color: var(--fcp-text-faint);
}

.fcp-chat__sideNote {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  line-height: 1.5;
  margin: 0;
}

.fcp-chat__roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fcp-chat__rosterRow {
  align-items: center;
  display: flex;
  gap: 9px;
  min-width: 0;
}

.fcp-chat__avatar--roster {
  height: 30px;
  /* Let the edge presence dot sit outside the circle without being clipped by
     the avatar's overflow:hidden (the round photo is still clipped by the
     border-radius, so this is safe). */
  overflow: visible;
  position: relative;
  width: 30px;
}

.fcp-chat__presenceDot {
  background: var(--fcp-member);
  border: 2px solid var(--fcp-card);
  border-radius: 50%;
  bottom: -1px;
  height: 9px;
  position: absolute;
  right: -1px;
  width: 9px;
}

.fcp-chat__rosterName {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Who's online" drawer (opened by tapping the online pill). Reuses the roster
   rows; a centered dialog on desktop, a bottom sheet on mobile. */
.fcp-chat__roster--sheet {
  gap: 2px;
  margin-top: 6px;
}
.fcp-chat__roster--sheet .fcp-chat__rosterRow {
  padding: 8px 6px;
  border-radius: 10px;
}
.fcp-chat__roster--sheet .fcp-chat__rosterRow:hover {
  background: var(--fcp-card-2);
}
.fcp-chat__roster--sheet .fcp-chat__rosterName {
  font-size: var(--fs-body, 13px);
}
@media (max-width: 520px) {
  .fcp-modal:has(.fcp-modal__card--sheet) {
    align-items: flex-end;
    padding: 0;
  }
  .fcp-modal__card--sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(var(--fcp-modal-h, 100dvh) * 0.8);
    border-radius: 18px 18px 0 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    animation: fcp-sheet-up 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* Grab-handle affordance at the top of the sheet. */
  .fcp-modal__card--sheet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--fcp-border-strong, var(--fcp-border));
  }
}
@keyframes fcp-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ---- search + report modals ---- */

.fcp-chat__search,
.fcp-chat__report {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fcp-chat__searchResults {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.fcp-chat__searchHit {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}

.fcp-chat__searchBody {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fcp-chat__reportError {
  color: #a03030;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
}

.fcp-chat__reportDone {
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* Terminal success state: bare green check centered above the confirmation
   line (no chip/frame per the icon rules), Close underneath. Green follows the
   bundle's success vocabulary (.fcp-plan__benefitIc pair, dark lift below). */
.fcp-chat__reportDoneWrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 6px;
}

.fcp-chat__reportDoneIc {
  color: #2e7d3b;
  display: grid;
  place-items: center;
}

.fcp-chat__reportDoneIc svg {
  height: 32px;
  width: 32px;
}

/* ---- responsive (component-local, music-module precedent) ---- */

@media (min-width: 901px) {
  /* The drawer carries the online count on wide screens; the pill returns
     when the drawer is collapsed so the count never disappears. */
  .fcp-chat__onlinePill {
    display: none;
  }

  .fcp-chat__layout.is-sideClosed .fcp-chat__onlinePill {
    display: inline;
  }
}

@media (max-width: 900px) {
  .fcp-chat__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fcp-chat__side,
  .fcp-chat__sideBtn {
    display: none;
  }

  /* Smaller title on mobile so a name like "Boston Live Chat" fits beside the
     online pill + tools instead of clipping; longer names still ellipsize. */
  .fcp-chat__title {
    font-size: var(--fs-title, 14px);
  }

  .fcp-chat__scroll {
    height: min(62vh, 520px);
  }

  .fcp-chat__rowTools {
    opacity: 1;
  }
}

@keyframes fcp-chat-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* -- chip -- */
/* Base doubles as a clickable filter chip (Stage 5D group/segment filters
   render <button class="fcp-chip"> with an is-on state); the status
   modifiers below override the neutral look for static chips. Pointer +
   hover live on button.fcp-chip only, so a static status <span> chip
   ("Not a member", "Expired") never reads as tappable. */

.fcp-chip {
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: 5px;
  color: var(--fcp-text-muted);
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 6px 12px;
}

button.fcp-chip {
  cursor: pointer;
}

button.fcp-chip:hover {
  background: var(--fcp-card-2);
  color: var(--fcp-text);
}

.fcp-chip.is-on {
  background: var(--fcp-brand);
  border-color: var(--fcp-brand);
  color: var(--fcp-on-brand);
}

/* The element-qualified hover above outranks .is-on — pin the active look. */
button.fcp-chip.is-on:hover {
  background: var(--fcp-brand);
  color: var(--fcp-on-brand);
}

.fcp-chip--muted {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  color: var(--fcp-text-muted);
}

.fcp-chip--ok {
  background: #eaf6ec;
  border: 1px solid #cde6d2;
  color: #256b31;
}

.fcp-chip--warn {
  background: #fdf6ec;
  border: 1px solid #f2e2c4;
  color: #7a5a1e;
}

/* -- community (Stage 5C: feed, thread detail, composers, reactions) --
   Light-first restyle of the donor's community blocks. Flat specificity:
   single classes, attribute-qualified state rules stay at (0,2,0). The
   reaction SVGs are the shared public/hub community-*-reaction.svg assets
   (same directory as this stylesheet). */

.fcp-badge {
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 4px 8px;
  text-transform: uppercase;
}

.fcp-badge--mod {
  background: #eef2fb;
  border: 1px solid #d4ddf2;
  color: var(--fcp-brand-2);
}

.fcp-cat {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 5px;
  color: var(--fcp-text-muted);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 10px;
  white-space: nowrap;
}

.fcp-cat--btn {
  cursor: pointer;
}

.fcp-cat--btn:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-cat[data-tone="gold"] {
  background: #fdf6e6;
  border-color: #f0e2ba;
  color: #7a5a1e;
}

.fcp-cat[data-tone="green"] {
  background: #eaf6ec;
  border-color: #cde6d2;
  color: #256b31;
}

.fcp-cat[data-tone="purple"] {
  background: #f3effa;
  border-color: #e0d7f0;
  color: #5b3d94;
}

.fcp-cat[data-tone="blue"] {
  background: #ebf1fb;
  border-color: #d2def2;
  color: #29538f;
}

.fcp-cat[data-tone="violet"] {
  background: #f4eefa;
  border-color: #e4d6f0;
  color: #6b3d94;
}

.fcp-cat[data-tone="gray"] {
  background: var(--fcp-card-2);
  border-color: var(--fcp-border);
  color: var(--fcp-text-muted);
}

.fcp-comm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcp-comm__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: start;
}

.fcp-comm__chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fcp-comm__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.fcp-comm__edited {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-style: italic;
  margin-top: 2px;
}

.fcp-comm__empty,
.fcp-comm__errorBox {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
}

.fcp-comm[data-comm-state="empty"] .fcp-comm__empty {
  display: flex;
}

.fcp-comm[data-comm-state="error"] .fcp-comm__errorBox {
  display: flex;
}

.fcp-comm[data-comm-state="empty"] .fcp-comm__body,
.fcp-comm[data-comm-state="empty"] .fcp-comm__controls,
.fcp-comm[data-comm-state="error"] .fcp-comm__body,
.fcp-comm[data-comm-state="error"] .fcp-comm__controls,
.fcp-comm[data-comm-state="loading"] .fcp-comm__body,
.fcp-comm[data-comm-state="loading"] .fcp-comm__controls {
  display: none;
}

.fcp-comm__emptyCopy {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
}

.fcp-comm__emptyTitle {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
}

.fcp-comm__feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.fcp-comm__guideFull {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.fcp-comm-railCard.is-expanded .fcp-comm__guideFull {
  display: flex;
}

.fcp-comm__guideItem {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  line-height: 1.45;
  padding-left: 10px;
  border-left: 2px solid var(--fcp-border);
}

.fcp-comm__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-comm__heroText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fcp-comm__new svg {
  margin-right: 6px;
}

.fcp-comm__noMatch {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  padding: 24px 0;
  text-align: center;
}

.fcp-comm__notice {
  background: #eef2fb;
  border: 1px solid #d4ddf2;
  border-radius: var(--fcp-radius-sm);
  color: #2b3d63;
  font-size: var(--fs-body, 13px);
  padding: 10px 14px;
}

.fcp-comm__ownerNote {
  /* Its own line under the heading row, not a sentence hanging off the right
     edge of it: the hero is a wrapping flex row, so a full basis drops it. */
  flex-basis: 100%;
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  max-width: 60ch;
}

.fcp-comm__reactionCount {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  min-width: 14px;
}

.fcp-comm__search {
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
}

.fcp-comm__searchInput {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text);
  font-family: inherit;
  font-size: var(--fs-title, 14px);
  padding: 9px 12px;
  width: 100%;
}

.fcp-comm__searchInput:focus {
  border-color: var(--fcp-brand-2);
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
  outline: none;
}

/* The native select reserved far more room for its own arrow than the label
   needed, which left a wide dead gap between "Oldest first" and the chevron.
   Same answer as .fcp-merch__select: draw our own chevron so the right inset is
   ours to set, and balance it against the left padding. */
.fcp-comm__select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--fcp-card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888f9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text);
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  padding: 8px 30px 8px 12px;
}

.fcp-comm__skeleton {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.fcp-comm[data-comm-state="loading"] .fcp-comm__skeleton {
  display: flex;
}

.fcp-comm__skelRow {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.fcp-comm__subtitle {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  margin: 0;
}

.fcp-comm__title {
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  margin: 0;
}

/* community: action buttons (Reply / Edit / Delete) */

.fcp-comm-act {
  background: transparent;
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  padding: 6px 12px;
}

.fcp-comm-act:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-comm-act--danger:hover {
  border-color: #e5b9b9;
  color: #a03030;
}

.fcp-comm-act--sm {
  font-size: var(--fs-label, 12px);
  padding: 4px 9px;
}

/* community: comment + reply rows */

.fcp-comm-comment {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.fcp-comm-comment__author {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}

.fcp-comm-comment__authorRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fcp-comm-comment__avatar {
  background: var(--fcp-card);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 28px;
  width: 28px;
  overflow: hidden;
}

.fcp-comm-comment__avatar.has-photo span,
.fcp-comm-post__avatar.has-photo span,
.fcp-comm-reply__avatar.has-photo span,
.fcp-comm-form__avatar.has-photo span,
.fcp-comm-detail__reactorAvatar.has-photo span,
.fcp-comm-reactors__avatar.has-photo span,
.fcp-topic__authorAvatar.has-photo span {
  visibility: hidden;
}

.fcp-comm-comment__body {
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.fcp-comm-comment__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcp-comm-comment__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-comm-comment__headerActions {
  display: flex;
  gap: 6px;
}

.fcp-comm-comment__image {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  max-height: 320px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.fcp-comm-comment__replies {
  border-left: 2px solid var(--fcp-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 12px;
  padding-left: 12px;
}

.fcp-comm-comment__replies:empty {
  display: none;
}

.fcp-comm-comment__time {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

/* community: thread detail */

.fcp-comm-detail {
  display: none;
}

.fcp-comm.is-detail-open .fcp-comm-detail {
  display: block;
}

.fcp-comm.is-detail-open .fcp-comm__body,
.fcp-comm.is-detail-open .fcp-comm__controls,
.fcp-comm.is-detail-open .fcp-comm__hero,
.fcp-comm.is-detail-open .fcp-comm__skeleton,
.fcp-comm.is-detail-open .fcp-comm__empty,
.fcp-comm.is-detail-open .fcp-comm__errorBox {
  display: none;
}

.fcp-comm-detail__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-comm-detail__back {
  background: transparent;
  border: 0;
  color: var(--fcp-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  padding: 4px 0;
}

.fcp-comm-detail__back::before {
  content: "← ";
}

.fcp-comm-detail__back:hover {
  color: var(--fcp-text);
}

.fcp-comm-detail__backRow {
  display: flex;
  margin-bottom: 10px;
}

.fcp-comm-detail__card {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
}

.fcp-comm-detail__comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcp-comm-detail__empty {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
}

.fcp-comm-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: start;
}

.fcp-comm-detail__loading {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}

.fcp-comm-detail__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fcp-comm-detail__reactorAvatar {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid var(--fcp-card);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 24px;
  width: 24px;
  overflow: hidden;
}

.fcp-comm-detail__reactorAvatar + .fcp-comm-detail__reactorAvatar {
  margin-left: -8px;
}

.fcp-comm-detail__reactorStack {
  display: inline-flex;
}

.fcp-comm-detail__reactorStack.is-empty {
  display: none;
}

.fcp-comm-detail__summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fcp-comm-detail__summaryText {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

/* community: create/reply composer forms */

.fcp-comm-file {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fcp-comm-file__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.fcp-comm-file__name {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
}

.fcp-comm-file__preview {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  flex: 0 0 auto;
  height: 56px;
  width: 56px;
}

.fcp-comm-file__preview.is-video::after {
  content: "▶";
  color: var(--fcp-text-muted);
  display: grid;
  place-items: center;
  font-size: var(--fs-section, 16px);
  height: 100%;
  width: 100%;
}

.fcp-comm-form {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  background: var(--fcp-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.fcp-comm-form.has-attachment .fcp-comm-form__file {
  display: block;
}

.fcp-comm-form.is-uploading {
  opacity: 0.7;
  pointer-events: none;
}

.fcp-comm-form__actions {
  display: none;
  gap: 8px;
}

.fcp-comm-form.is-expanded .fcp-comm-form__actions {
  display: flex;
}

.fcp-comm-form__avatar {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 26px;
  width: 26px;
  overflow: hidden;
}

.fcp-comm-form__error {
  color: #a03030;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
}

.fcp-comm-form__file {
  display: none;
}

.fcp-comm-form__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcp-comm-form__label {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-comm-toolbar {
  display: none;
  gap: 4px;
}

.fcp-comm-form.is-expanded .fcp-comm-toolbar {
  display: flex;
}

.fcp-comm-toolbar button {
  background: transparent;
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  height: 28px;
  width: 28px;
  display: inline-grid;
  place-items: center;
}

.fcp-comm-toolbar button:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-comm-toolIcon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

.fcp-comm-toolIcon--link {
  background-image: url("./community-link.svg");
}

.fcp-comm-toolIcon--photo {
  background-image: url("./community-photo.svg");
}

/* community: markdown preview overlays a transparent-text textarea (donor
   mechanic) — identical font metrics on both layers keep the caret aligned */

.fcp-comm-composer {
  position: relative;
  width: 100%;
}

.fcp-comm-composer__input {
  background: transparent;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  box-sizing: border-box;
  caret-color: var(--fcp-text);
  color: transparent;
  cursor: text;
  display: block;
  font-family: inherit;
  font-size: var(--fs-title, 14px);
  line-height: 1.5;
  min-height: 44px;
  outline: none;
  padding: 9px 12px;
  position: relative;
  resize: none;
  width: 100%;
  z-index: 1;
}

.fcp-comm-form.is-expanded .fcp-comm-composer__input {
  min-height: 84px;
}

.fcp-comm-composer__input::placeholder {
  color: var(--fcp-text-faint);
}

.fcp-comm-composer__input:focus {
  border-color: var(--fcp-brand-2);
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
  outline: none;
}

.fcp-comm-composer__preview {
  border: 1px solid transparent;
  border-radius: var(--fcp-radius-sm);
  box-sizing: border-box;
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  inset: 0;
  line-height: 1.5;
  overflow: hidden;
  padding: 9px 12px;
  pointer-events: none;
  position: absolute;
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 0;
}

.fcp-comm-composer__preview ul {
  margin: 0;
  padding-left: 18px;
}

/* community: thread info + reactors rail */

.fcp-comm-info {
  display: flex;
  flex-direction: column;
}

.fcp-comm-info__label {
  color: var(--fcp-text-muted);
  font-weight: 600;
}

.fcp-comm-info__row {
  border-bottom: 1px solid var(--fcp-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-label, 12px);
  gap: 10px;
  padding: 6px 0;
}

.fcp-comm-info__row:last-child {
  border-bottom: 0;
}

.fcp-comm-info__value {
  font-weight: 700;
  text-align: right;
}

.fcp-comm-lockNote {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  padding: 12px 14px;
}

/* community: post card inside the detail view */

.fcp-comm-post {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
}

.fcp-comm-post.no-media {
  grid-template-columns: minmax(0, 1fr);
}

.fcp-comm-post.no-media .fcp-comm-post__media {
  display: none;
}

.fcp-comm-post__authorRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-comm-post__authorName {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}

.fcp-comm-post__avatar {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 30px;
  width: 30px;
  overflow: hidden;
}

.fcp-comm-post__body {
  font-size: var(--fs-body, 13px);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.fcp-comm-post__body ul {
  margin: 6px 0;
  padding-left: 20px;
}

.fcp-comm-post__image {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: block;
  max-height: 260px;
  object-fit: cover;
  width: 100%;
}

.fcp-comm-post__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.fcp-comm-post__media {
  min-width: 0;
}

.fcp-comm-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fcp-comm-post__time {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

.fcp-comm-post__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.fcp-comm-post__video {
  background: #000;
  border-radius: var(--fcp-radius-sm);
  display: block;
  max-height: 260px;
  width: 100%;
}

/* community: rail cards (shared by feed + detail rails) */

.fcp-comm-railCard {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.fcp-comm-railCard__copy {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
}

.fcp-comm-railCard__more {
  background: transparent;
  border: 0;
  color: var(--fcp-brand-2);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  padding: 2px 0 0;
  text-align: left;
}

.fcp-comm-railCard__title {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fcp-text-muted);
}

.fcp-comm-reactors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fcp-comm-reactors__avatar {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 22px;
  width: 22px;
  overflow: hidden;
}

.fcp-comm-reactors__count {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-comm-reactors__name {
  flex: 1;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-comm-reactors__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* community: threaded reply rows */

.fcp-comm-reply {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fcp-comm-reply__actions {
  display: flex;
  gap: 6px;
}

.fcp-comm-reply__author {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}

.fcp-comm-reply__authorRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fcp-comm-reply__avatar {
  background: var(--fcp-card);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 22px;
  width: 22px;
  overflow: hidden;
}

.fcp-comm-reply__body {
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.fcp-comm-reply__image {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  max-height: 240px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

/* community: replies list header */

.fcp-comm-replies__count {
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-comm-replies__head {
  border-top: 1px solid var(--fcp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
}

/* community: markdown marker (composer preview keeps markers visible) */

.fcp-md-marker {
  color: var(--fcp-text-faint);
}

/* community: reaction trigger + picker (shared community-*-reaction.svg) */

.fcp-react-picker {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border-strong);
  border-radius: 999px;
  box-shadow: var(--fcp-shadow);
  display: none;
  gap: 6px;
  left: 0;
  padding: 6px;
  position: fixed;
  top: 0;
  z-index: 1000;
}

.fcp-react-picker.is-open {
  display: inline-flex;
}

.fcp-react-picker__item {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  cursor: pointer;
  height: 30px;
  position: relative;
  text-indent: -9999px;
  width: 30px;
}

.fcp-react-picker__item:hover {
  border-color: var(--fcp-border-strong);
  transform: translateY(-1px);
}

.fcp-react-picker__item::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inset: 5px;
  position: absolute;
}

.fcp-react-picker__item[data-reaction="LIKE"]::before {
  background-image: url("./community-like-reaction.svg");
}

.fcp-react-picker__item[data-reaction="FIRE"]::before {
  background-image: url("./community-fire-reaction.svg");
}

.fcp-react-picker__item[data-reaction="LOL"]::before {
  background-image: url("./community-lol-reaction.svg");
}

.fcp-react-picker__item[data-reaction="WOW"]::before {
  background-image: url("./community-wow-reaction.svg");
}

.fcp-react-picker__item[data-reaction="HEART"]::before {
  background-image: url("./community-heart-reaction.svg");
}

/* A circular chip, sized by the emoji rather than by text padding: it sits in a
   row of reaction pills, so it should read as one of them and not as a third
   text button beside Reply and Report. Fixed square + 50% radius, because a
   padding-driven circle goes oval the moment the glyph metrics change. */
.fcp-react-trigger {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.fcp-react-trigger:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-react-trigger:disabled {
  cursor: default;
  opacity: 0.55;
}

.fcp-react-trigger[data-reacted="1"] {
  background: #eef2fb;
  border-color: #d4ddf2;
  font-size: var(--fs-body, 13px);
  line-height: 1;
  padding: 5px 11px;
}

.fcp-react-trigger--sm {
  font-size: var(--fs-label, 12px);
  padding: 4px 10px;
}

.fcp-react-wrap {
  display: inline-flex;
  position: relative;
}

/* community: topic rows (feed list) */

.fcp-topic {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  color: inherit;
  display: grid;
  gap: 14px;
  grid-template-columns: 96px minmax(0, 1fr);
  padding: 14px;
  text-decoration: none;
}

/* Outranks the global .fcp-hub a:hover underline — a topic row is a CARD
   link; it hovers like a card (border + shadow step), never underlined. */
.fcp-hub a.fcp-topic,
.fcp-hub a.fcp-topic:hover {
  color: inherit;
  text-decoration: none;
}

.fcp-hub a.fcp-topic:hover {
  border-color: var(--fcp-border-strong);
  box-shadow: var(--fcp-shadow);
}

.fcp-topic.is-featured {
  border-color: var(--fcp-brand);
  box-shadow: var(--fcp-shadow);
}

/* Org wordmark logos in avatar slots render contained (never cover-zoomed).
   Shape-specific rules (chat/home thumbs) outrank this via .fcp-hub prefix. */
.fcp-hub .is-logo {
  background-color: var(--fcp-card-2);
  background-size: 72%;
}

.fcp-topic__authorAvatar {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  height: 22px;
  width: 22px;
  overflow: hidden;
}

.fcp-topic__authorName {
  color: var(--fcp-brand);
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}

.fcp-hub[data-theme="light"] .fcp-topic__authorName {
  color: var(--fcp-accent-on-light);
}

.fcp-topic__authorRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fcp-topic__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fcp-topic__dot {
  color: var(--fcp-text-faint);
}

.fcp-topic__hot {
  color: #b0501f;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  gap: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fcp-topic__pinned {
  background: #fdf6e6;
  border: 1px solid #f0e2ba;
  border-radius: 5px;
  color: #7a5a1e;
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  text-transform: uppercase;
}

.fcp-topic__snippet {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.fcp-topic__stat {
  color: var(--fcp-text-muted);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label, 12px);
  font-weight: 600;
  gap: 4px;
}

.fcp-topic__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.fcp-topic__thumb {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  height: 72px;
  overflow: hidden;
  width: 96px;
}

/* No image on the post: a speech-bubble mark rather than an empty bordered
   square, which reads as a picture that failed to load. Drawn in CSS so it
   costs no request and inherits the hub's own muted colour. */
.fcp-topic__thumb.is-empty {
  align-items: center;
  display: flex;
  justify-content: center;
}
.fcp-topic__thumbMark {
  border: 2px solid var(--fcp-text-muted);
  border-radius: 6px;
  display: block;
  height: 18px;
  opacity: 0.35;
  position: relative;
  width: 22px;
}
/* The bubble's tail. */
.fcp-topic__thumbMark::after {
  border-left: 2px solid var(--fcp-text-muted);
  border-bottom: 2px solid var(--fcp-text-muted);
  border-bottom-left-radius: 2px;
  bottom: -6px;
  content: "";
  height: 6px;
  left: 4px;
  position: absolute;
  transform: skewX(-20deg);
  width: 6px;
}

.fcp-topic__thumbVideo {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.fcp-topic__time {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

.fcp-topic__title {
  color: var(--fcp-brand);
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.fcp-hub[data-theme="light"] .fcp-topic__title {
  color: var(--fcp-accent-on-light);
}

.fcp-topic__titleRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-topic__videoTag {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 5px;
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  text-transform: uppercase;
}

/* -- copybtn (Stage 5D copy-to-clipboard button state) -- */

/* Solid green with white text. The outlined version read as a disabled button
   on a dark hub, which is the opposite of the confirmation it is meant to be. */
/* Scoped under .fcp-hub and repeated for :hover so it outranks
   `.fcp-hub .fcp-btn--ghost:hover`, which would otherwise take the green back
   the moment the cursor stayed on the button it had just been clicked with. */
.fcp-hub .fcp-copybtn.is-copied,
.fcp-hub .fcp-copybtn.is-copied:hover {
  background: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
}

/* -- error -- */

.fcp-error {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  color: var(--fcp-text-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body, 13px);
  gap: 12px;
  margin: 24px 0;
  padding: 28px 24px;
  text-align: center;
}

.fcp-error__text {
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}

/* -- events (Stage 5D: date badge, card, on-sale line) -- */

.fcp-ev {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}

.fcp-ev.is-past {
  opacity: 0.72;
}

.fcp-ev__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: 16px;
}

.fcp-ev__date {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.fcp-ev__dateDay {
  font-size: var(--fs-stat, 24px);
  font-weight: 700;
  line-height: 1.1;
}

.fcp-ev__dateMon {
  color: var(--fcp-brand);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fcp-ev__desc {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 8px 0 0;
}

.fcp-ev__early {
  background: #eaf6ec;
  border: 1px solid #cde6d2;
  border-radius: 5px;
  color: #256b31;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The right-hand column: holds the text + actions so the media/date tile stays
   on the left. Desktop = a row (text fills, actions pinned right), reproducing
   the previous 3-across card. Mobile stacks it (see @media 520). */
.fcp-ev__col {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.fcp-ev__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.fcp-ev__onsale {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
}

.fcp-ev__place {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  margin-top: 4px;
}

.fcp-ev__media {
  align-self: stretch;
  background-color: var(--fcp-card-2);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: grid;
  flex: 0 0 auto;
  min-height: 96px;
  overflow: hidden;
  place-items: center;
  width: 104px;
}

/* Over a real image the badge becomes a dark glass chip (white day, accent
   month) so it reads on any artwork, in both themes. */
.fcp-ev__media.has-img .fcp-ev__date {
  background: rgba(10, 11, 14, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
}

.fcp-ev__media.has-img .fcp-ev__dateDay {
  color: #ffffff;
}

.fcp-ev__when {
  color: var(--fcp-text-faint);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  margin-top: 3px;
}

.fcp-ev__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}

.fcp-ev__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-ev__type {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 5px;
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}

.fcp-events__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fcp-events__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-events__list {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* Home Events teaser: same 2-col grid of premium event cards. */
.fcp-home__events {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* -- feed (Stage 5D shared: head, skeleton, empty, error) -- */

.fcp-feed-empty {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 44px 24px;
  text-align: center;
}

.fcp-feed-empty__copy {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

.fcp-feed-empty__icon {
  align-items: center;
  border-radius: 8px;
  color: var(--fcp-brand);
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
  /* static fallbacks first: browsers without color-mix keep a valid tint */
  background: #e6f1f8;
  border: 1px solid #cde4f2;
  background: color-mix(in srgb, var(--fcp-brand) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--fcp-brand) 18%, #ffffff);
}

.fcp-feed-empty__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 2px 0 0;
}

.fcp-feed-error {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
}

.fcp-feed-error__copy {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  margin: 0;
}

.fcp-feed-error__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
}

.fcp-feed-head {
  margin: 0 0 16px;
}

.fcp-feed-head__row {
  align-items: center;
  display: flex;
  gap: 11px;
}

.fcp-feed-head__right {
  margin-left: auto;
}

.fcp-feed-search {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  box-shadow: var(--fcp-shadow-sm);
  color: var(--fcp-text-muted);
  display: inline-flex;
  gap: 8px;
  padding: 8px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fcp-feed-search:focus-within {
  border-color: var(--fcp-brand);
  box-shadow: 0 0 0 3px rgba(7, 119, 190, 0.14);
}

.fcp-feed-search__ico {
  flex: 0 0 auto;
}

.fcp-feed-search__input {
  background: transparent;
  border: 0;
  color: var(--fcp-text);
  font: inherit;
  font-size: var(--fs-title, 14px);
  outline: none;
  width: 190px;
  max-width: 44vw;
}

.fcp-feed-search__input::placeholder {
  color: var(--fcp-text-muted);
}

.fcp-feed-search__input::-webkit-search-decoration,
.fcp-feed-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

@media (max-width: 560px) {
  .fcp-feed-head__row {
    flex-wrap: wrap;
  }
  .fcp-feed-head__right {
    width: 100%;
    margin: 10px 0 0;
  }
  .fcp-feed-search {
    width: 100%;
  }
  .fcp-feed-search__input {
    width: 100%;
    max-width: none;
  }
}

.fcp-feed-head__icon {
  align-items: center;
  border-radius: 8px;
  color: var(--fcp-brand);
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
  /* static pale-blue fallback first, then color-mix tint */
  background: var(--fcp-primary-tint);
  border: 1px solid var(--fcp-primary-tint-border);
  background: color-mix(in srgb, var(--fcp-brand) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--fcp-brand) 18%, #ffffff);
}

.fcp-feed-head__icon svg {
  height: 21px;
  width: 21px;
}

.fcp-feed-head__sub {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  margin: 7px 0 0;
}

.fcp-feed-head__title {
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

.fcp-feed-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcp-feed-skel--grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.fcp-feed-skel__card {
  border-radius: var(--fcp-radius);
  height: 150px;
}

.fcp-feed-skel__row {
  border-radius: var(--fcp-radius-sm);
  height: 56px;
}

/* -- field / form / input -- */

.fcp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fcp-field__hint {
  font-size: var(--fs-label, 12px);
  font-weight: 600;
  color: var(--fcp-text-faint);
  min-height: 14px;
}

.fcp-field__hint--bad {
  color: #a32626;
}

.fcp-field__hint--ok {
  color: #256b31;
}

.fcp-field__label {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.fcp-form-error {
  background: #fbf0f0;
  border: 1px solid #eed3d3;
  border-radius: var(--fcp-radius-sm);
  color: #a32626;
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  margin: 4px 0;
  padding: 9px 12px;
}

.fcp-form-error:empty {
  display: none;
}

.fcp-form-notice {
  background: #eef3fb;
  border: 1px solid #d5e1f3;
  border-radius: var(--fcp-radius-sm);
  color: #2c4d80;
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  margin: 4px 0;
  padding: 9px 12px;
}

.fcp-input {
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border-strong);
  border-radius: var(--fcp-radius-sm);
  box-sizing: border-box;
  color: var(--fcp-text);
  font-family: inherit;
  font-size: var(--fs-title, 14px);
  line-height: 1.3;
  padding: 10px 12px;
  width: 100%;
}

.fcp-input:focus {
  border-color: var(--fcp-brand-2);
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
  outline: none;
}

.fcp-input--area {
  min-height: 76px;
  resize: vertical;
}

.fcp-input--code {
  font-size: var(--fs-stat, 24px);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
}

/* -- footer -- */

.fcp-footer {
  margin-top: 44px;
  padding: 26px 4px 8px;
  border-top: 1px solid var(--fcp-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fcp-hub img.fcp-footer__logo {
  display: block;
  height: 34px;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.92;
}

.fcp-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}

.fcp-footer__links a {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-footer__links a:hover {
  color: var(--fcp-text);
}

.fcp-footer__links a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--fcp-brand);
  outline-offset: 3px;
}

.fcp-footer__meta {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  text-align: center;
}

/* -- gallery (Stage 5D: album cards, browse, album view, photo/video tiles) -- */

.fcp-galbrowse__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.fcp-galbrowse__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

.fcp-galcard {
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.fcp-galcard:hover {
  box-shadow: var(--fcp-shadow);
  transform: translateY(-1px);
}

.fcp-galcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}

.fcp-galcard__count {
  background: rgba(22, 24, 29, 0.62);
  border-radius: 5px;
  bottom: 8px;
  color: #fff;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  left: 8px;
  padding: 4px 9px;
  position: absolute;
}

.fcp-galcard__cover {
  aspect-ratio: 16 / 10;
  background-color: var(--fcp-card-2);
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--fcp-border);
  display: grid;
  place-items: center;
  position: relative;
}

.fcp-galcard__cover.is-locked {
  color: var(--fcp-text-faint);
}

.fcp-galcard__flag {
  background: #fdf6ec;
  border: 1px solid #f2e2c4;
  border-radius: 5px;
  color: #7a5a1e;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  text-transform: uppercase;
}

.fcp-galcard__meta {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

/* -- "New" badge (auto: content published within the last 30 days) --
   Blue/club accent, no purple. Reads on light card bodies and over dark media:
   the contrast-adjusted accent fill keeps a light org accent from washing out,
   the white text stays legible on it, and the light ring + shadow keep the pill
   visible over a bright or dark photo. */
.fcp-newbadge {
  align-items: center;
  background: var(--fcp-accent-on-light);
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 3px rgba(22, 24, 29, 0.32);
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 3px 7px;
  text-transform: uppercase;
}

/* Overlay variant pinned to a media tile's top-left corner. */
.fcp-newbadge--corner {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.fcp-galcard__title {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fcp-galcard__titleRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-galtab__body {
  display: block;
}

.fcp-galview__back {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-brand-2);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 6px;
  padding: 6px 8px 6px 0;
}

.fcp-galview__back:hover {
  text-decoration: underline;
}

.fcp-galview__count {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-galview__empty {
  background: var(--fcp-card);
  border: 1px dashed var(--fcp-border-strong);
  border-radius: var(--fcp-radius);
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  padding: 26px 18px;
  text-align: center;
}

/* Album lazy-load: loading placeholder + "Load more" pager. */
.fcp-galview__loading {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  padding: 22px 18px;
  text-align: center;
}
.fcp-galview__more {
  display: block;
  margin: 16px auto 4px;
  padding: 10px 22px;
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  background: var(--fcp-card);
  color: var(--fcp-text);
  font: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  cursor: pointer;
}
.fcp-galview__more:hover { border-color: var(--fcp-brand-2); }
.fcp-galview__more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
  border-color: var(--fcp-brand-2);
}
.fcp-galview__more:disabled { opacity: 0.6; cursor: default; }

.fcp-galview__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.fcp-galview__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 0;
}

.fcp-photogrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.fcp-phototile {
  appearance: none;
  aspect-ratio: 1 / 1;
  background-color: var(--fcp-card-2);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  cursor: pointer;
  display: grid;
  gap: 6px;
  overflow: hidden;
  padding: 0;
  place-content: center;
  position: relative;
  transition: transform 140ms ease;
}

.fcp-phototile:hover {
  transform: scale(1.02);
}

.fcp-phototile.is-locked {
  color: var(--fcp-text-faint);
  place-items: center;
}

.fcp-playglyph {
  align-items: center;
  background: rgba(22, 24, 29, 0.6);
  border-radius: 999px;
  color: #fff;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.fcp-tile__locktext {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  padding: 0 8px;
  text-align: center;
}

.fcp-vidgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

.fcp-vidtile {
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.fcp-vidtile:hover {
  box-shadow: var(--fcp-shadow);
  transform: translateY(-1px);
}

.fcp-vidtile.is-locked {
  align-items: center;
  aspect-ratio: 16 / 10;
  color: var(--fcp-text-faint);
  gap: 6px;
  justify-content: center;
}

.fcp-vidtile__date {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-vidtile__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
}

.fcp-vidtile__thumb {
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: #1c1f26;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  position: relative;
}

.fcp-vidtile__title {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* -- giveaways (Stage 5D: cards, entry area, rules, side rail) -- */

.fcp-gv {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  overflow: hidden;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.fcp-gv:hover {
  border-color: var(--fcp-border-strong);
  box-shadow: var(--fcp-shadow);
}

.fcp-gv__go {
  align-items: center;
  align-self: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  color: var(--fcp-brand);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 7px;
  height: 40px;
  justify-content: center;
  margin: 0 16px;
  padding: 0 16px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  white-space: nowrap;
}
.fcp-gv__go svg {
  height: 16px;
  width: 16px;
}

.fcp-gv__go:hover {
  border-color: var(--fcp-brand);
  transform: translateX(2px);
}

.fcp-gv__go svg {
  height: 18px;
  width: 18px;
}

.fcp-gv__ack {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-body, 13px);
  gap: 8px;
  line-height: 1.45;
}

.fcp-gv__ack.is-locked {
  color: var(--fcp-text-faint);
  cursor: not-allowed;
}

.fcp-gv__ackBox {
  accent-color: var(--fcp-brand);
  flex: 0 0 auto;
  height: 16px;
  margin-top: 2px;
  width: 16px;
}

.fcp-gv__ackHint {
  color: var(--fcp-text-faint);
  display: block;
  font-size: var(--fs-label, 12px);
  margin-top: 4px;
}

.fcp-gv__ackWrap {
  margin: 2px 0;
}

.fcp-gv__banner {
  aspect-ratio: 16 / 7;
  background-color: var(--fcp-card-2);
  background-position: center;
  background-size: cover;
  border-radius: var(--fcp-radius-sm);
}

.fcp-gv__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
}

.fcp-gv__count {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-gv__desc {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
}

.fcp-gv__embed {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  height: 420px;
  width: 100%;
}

.fcp-gv__entered {
  align-items: center;
  background: #eaf6ec;
  border: 1px solid #cde6d2;
  border-radius: var(--fcp-radius-sm);
  color: #256b31;
  display: flex;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  gap: 8px;
  padding: 10px 12px;
}

.fcp-gv__enteredIc {
  display: inline-grid;
  place-items: center;
}

.fcp-gv__enterBtn {
  align-self: flex-start;
}

/* Primary action + "View details" share one row: action left, details right. */
.fcp-gv__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fcp-gv__actions .fcp-gv__enterBtn {
  align-self: center;
}
.fcp-gv__actions .fcp-gv__go {
  align-self: center;
  margin: 0;
}

.fcp-gv__entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.fcp-gv__fullBody {
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  line-height: 1.6;
  white-space: pre-line;
}

/* Fixed 1:1 tile (owner call): the artwork never stretches with the card;
   the date picker / rules accept / enter controls fill the right side. */
.fcp-gv__media {
  align-self: flex-start;
  aspect-ratio: 1 / 1;
  background-color: var(--fcp-card-2);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text-faint);
  display: grid;
  flex: 0 0 148px;
  margin: 14px 0 14px 14px;
  overflow: hidden;
  place-items: center;
}

/* Safety net: a media tile with no image never reserves space (blank grey box,
   full-width banner on mobile). The card JS also skips rendering it. */
.fcp-gv__media:not(.has-img) {
  display: none;
}

.fcp-gv__metaLine {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-gv__muted {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  margin: 0;
}

.fcp-gv__optLabel {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-gv__optSel {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border-strong);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text);
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  padding: 9px 10px;
}

.fcp-gv__optWrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 340px;
}

/* Ship-to at entry. Asked up front for physical prizes so a winner never has to
   be chased; prefilled from the member's saved address, so this is a confirm. */
.fcp-gv__ship {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  background: var(--fcp-card-2);
}
.fcp-gv__shipHead { font-weight: 700; font-size: var(--fs-body, 13px); }
/* The saved address, shown to confirm rather than retype. Editing happens in
   the account, where the single copy actually lives. */
.fcp-gv__shipRead {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  background: var(--fcp-card);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
}
.fcp-gv__shipNote { font-size: var(--fs-label, 12px); color: var(--fcp-muted); margin-top: 2px; }
.fcp-gv__shipGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fcp-gv__shipField { display: grid; gap: 3px; min-width: 0; }
.fcp-gv__shipField.is-wide { grid-column: 1 / -1; }
.fcp-gv__shipLabel { font-size: var(--fs-label, 12px); color: var(--fcp-muted); }
.fcp-gv__shipAcct { margin-top: 10px; }
.fcp-gv__shipInput {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  background: var(--fcp-card);
  color: var(--fcp-text);
  font: inherit;
  font-size: var(--fs-title, 14px);
}
@media (max-width: 520px) {
  .fcp-gv__shipGrid { grid-template-columns: 1fr; }
}

.fcp-gv__ownerNote {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

.fcp-gv__pill {
  border-radius: 5px;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  text-transform: uppercase;
}

.fcp-gv__pill[data-status="active"] {
  background: #eaf6ec;
  border: 1px solid #cde6d2;
  color: #256b31;
}

/* Ended reads as CLOSED, matching the artist console's red Ended badge. Fixed
   tints rather than the club accent, exactly like the active/upcoming states
   above, so it stays legible whatever colour the club runs. */
.fcp-gv__pill[data-status="ended"] {
  background: #fdeceb;
  border: 1px solid #f4cfcc;
  color: #a3312a;
}
.fcp-hub[data-theme="dark"] .fcp-gv__pill[data-status="ended"] {
  background: rgba(204, 49, 49, 0.16);
  border-color: rgba(204, 49, 49, 0.34);
  color: #f2a8a3;
}

.fcp-gv__pill[data-status="upcoming"] {
  background: #eef2fb;
  border: 1px solid #d7e0f4;
  color: #2c4d90;
}

.fcp-gv__rulesFoot {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.fcp-gv__rulesLink {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fcp-brand-2);
  cursor: pointer;
  display: inline;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.fcp-gv__rulesNote {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

.fcp-gv__rulesScroll {
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  max-height: 300px;
  overflow-y: auto;
  padding: 14px;
}

.fcp-gv__rulesText {
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  line-height: 1.6;
  white-space: pre-line;
}

.fcp-gv__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}

.fcp-gv__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-gv__winners {
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  padding: 12px 14px;
}

.fcp-gv__winnersList {
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  line-height: 1.7;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fcp-gv__winnersTitle {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  margin: 0 0 6px;
}

.fcp-gvtab__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fcp-gvtab__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Full-width list (like the Events tab); the side cards run as a compact
   row underneath instead of reserving a right-hand column. */
/* 2026-08-28 prize fulfilment: the tab is now list + RIGHT SIDEBAR (the
   fan's own giveaways tracker). Single column again under 760px (the media
   override below), where the sidebar stacks under the list. */
.fcp-gvtab__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 14px;
}

/* No sidebar cards (owner preview with no recent winners): full-width list. */
.fcp-gvtab__layout--nosides {
  grid-template-columns: minmax(0, 1fr);
}

.fcp-gvtab__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Date-dropdown giveaways: the card body splits into two columns — text
   left, entry form (Choose a date / rules accept / Enter) right. */
.fcp-gv__body--split {
  display: grid;
  /* Wider form column + tighter gap pulls the entry form (Choose a date /
     rules / Enter) leftward toward the text. */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 540px);
  column-gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.fcp-gv__body--split > * {
  grid-column: 1;
}

.fcp-gv__body--split > .fcp-gv__entry {
  grid-column: 2;
  grid-row: 1 / span 5;
}

@media (max-width: 900px) {
  .fcp-gv__body--split {
    display: flex;
    flex-direction: column;
  }
}

.fcp-gvtab__side {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fcp-gvtab__sideCard {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  padding: 14px 16px;
}

.fcp-gvtab__sideCard h4 {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  margin: 0 0 8px;
}

.fcp-gvtab__sideWinners {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fcp-gvtab__winner {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-label, 12px);
}

.fcp-gvtab__winner span {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

/* -- header / hero / profile (editorial: cinematic banner + overlapping
   rounded-square avatar, identity bottom-left, membership + actions right) -- */

.fcp-header {
  position: relative;
  margin: 0 0 0 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.fcp-hero {
  position: relative;
  height: var(--fcp-hero-h, clamp(360px, 34vw, 450px));
  border-radius: 0;
  background-color: var(--fcp-card-2);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow: hidden;
}

.fcp-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 15, 19, 0) 28%,
    rgba(13, 15, 19, 0.42) 64%,
    rgba(13, 15, 19, 0.82) 100%
  );
  pointer-events: none;
}

/* Profile overlays the bottom of the hero (constrained to the content column,
   even though the hero is full-bleed) so the identity + actions sit over the
   dark gradient with white text. */
.fcp-profile {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--fcp-page-width);
  display: flex;
  /* Identity column is tall (logo + title + tagline); actions anchor to the
     bottom edge beside it. */
  align-items: flex-end;
  gap: 22px;
  padding: 0 clamp(16px, 3vw, 34px) 16px;
}

/* Logo slot sits ABOVE the title (editorial): height-based so a wide wordmark
   renders at natural aspect over the hero, transparent, left-aligned. */
.fcp-profile__avatar {
  display: flex;
  align-items: flex-end;
  height: 64px;
  margin-bottom: 10px;
  font-size: var(--fs-stat, 24px);
  font-weight: 700;
  color: var(--fcp-brand);
}
/* Only the initials fallback (no logo uploaded) keeps a card surface so the
   letters stay legible over the hero. */
.fcp-profile__avatar.is-fallback {
  display: grid;
  place-items: center;
  width: 64px;
  border-radius: 8px;
  background: var(--fcp-card);
  box-shadow: var(--fcp-shadow-lg);
}

/* Selector includes `.fcp-hub img` so it outranks the base `.fcp-hub img{max-width:100%}`
   reset (0,1,1) — without the extra class this cap (0,1,0) LOSES the cascade and a
   wide wordmark sprawls to full width. */
.fcp-hub img.fcp-profile__avatarImg {
  /* Dual cap, natural aspect: whichever limit bites first wins. A stacked
     mark fills the 64px slot; a wide wordmark stops at the width cap instead
     of sprawling to 300px. The element box now equals the drawn logo, so the
     verified badge rides the logo's real corner. Transparent PNGs keep their
     transparency straight over the hero. */
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: min(240px, 72vw);
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

.fcp-profile__bio {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-body, 13px);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 640px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.fcp-profile__main {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 6px;
}

.fcp-profile__members {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.fcp-profile__membersLabel {
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Overlapping recent-member avatar stack next to the count. */
.fcp-profile__avStack {
  display: inline-flex;
  align-items: center;
}

.fcp-profile__avStackImg {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(13, 15, 19, 0.75);
  object-fit: cover;
  background: var(--fcp-card-2);
  display: block;
}

.fcp-profile__avStackImg + .fcp-profile__avStackImg {
  margin-left: -9px;
}

/* Share sits over the dark hero: glass/outline instead of a second red button. */
.fcp-hub .fcp-profile__signin {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.44);
  color: #fff;
}
.fcp-hub .fcp-profile__signin:hover {
  background: rgba(255, 255, 255, 0.26);
  filter: none;
}
/* Share is a BARE icon (no background, no border) — hosted + embed. */
.fcp-hub .fcp-profile__share {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  padding: 0;
  width: 38px;
  min-width: 38px;
  justify-content: center;
}
.fcp-hub .fcp-profile__share:hover {
  background: transparent;
  filter: none;
  opacity: 0.82;
}
.fcp-profile__share svg { margin: 0; }

.fcp-profile__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
}

.fcp-profile__name {
  font-size: var(--fs-display, clamp(32px, 4.6vw, 60px));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.fcp-profile__nameRow {
  display: flex;
  /* The verified check anchors to the TOP-right of the wordmark (owner,
     2026-08-12), not the vertical center. */
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

/* A rendered logo image IS the identity — the text title hides so the club
   name never doubles (the logo img alt still carries it for readers). */
.fcp-profile__nameRow--hidden {
  display: none;
}

.fcp-profile__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 8px;
}

.fcp-profile__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* No real CTA (an active member, or the informational "open soon" chip), so
   the side column becomes ONE row: socials on the left, share at the right
   edge. row-REVERSE because share precedes socials in the DOM and the socials
   list fans out leftward from its toggle. Wrap is the safety valve for a
   narrow embed where the chip plus both icons will not fit. */
.fcp-profile__side--noCta {
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Hero CTAs read editorial: compact uppercase labels. */
.fcp-profile__actions .fcp-btn {
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fcp-profile__verified {
  color: var(--fcp-brand-2);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  /* Sit on the identity's top-right corner, slightly raised. */
  transform: translateY(-22%);
}

/* Logo-image identity: the badge trails the logo at its BASELINE (bottom-right),
   not the empty top-right corner — logos vary wildly in shape (tall stacked,
   wide wordmark, image), and a corner anchor floats in dead space for most of
   them. Bottom-aligning to the logo edge keeps the badge visually attached to
   the end of the wordmark for every shape. */
.fcp-profile__avatar .fcp-profile__verified {
  align-self: flex-end;
  margin-left: 8px;
  margin-bottom: 6px;
  transform: none;
}

/* -- home (Stage 5D: join strip, news, teaser rows) -- */

.fcp-home {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fcp-home__album {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  gap: 6px;
  padding: 0;
  text-align: left;
}

.fcp-home__albumCover {
  aspect-ratio: 16 / 10;
  background-color: var(--fcp-card-2);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  display: grid;
  place-items: center;
  transition: transform 140ms ease;
  width: 100%;
}

.fcp-home__album:hover .fcp-home__albumCover {
  transform: scale(1.02);
}

.fcp-home__albumCover.is-locked {
  color: var(--fcp-text-faint);
}

.fcp-home__albums {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

.fcp-home__albumTitle {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Giveaways teaser: large featured card (media + body + circular red arrow) */
.fcp-home__gvcard {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  cursor: pointer;
  display: flex;
  gap: 16px;
  overflow: hidden;
  padding: 14px;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.fcp-home__gvcard:hover {
  border-color: var(--fcp-border-strong);
  box-shadow: var(--fcp-shadow);
}

.fcp-home__gvMedia {
  align-items: center;
  background-position: center;
  background-size: cover;
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-brand);
  display: flex;
  flex: 0 0 auto;
  height: 96px;
  justify-content: center;
  width: 96px;
  /* pale-blue fallback panel for giveaways with no image */
  background-color: var(--fcp-primary-tint);
  border: 1px solid var(--fcp-primary-tint-border);
}

.fcp-home__gvMedia.has-img {
  background-color: var(--fcp-card-2);
  border-color: var(--fcp-border);
}

.fcp-home__gvMedia svg {
  height: 34px;
  width: 34px;
}

.fcp-home__gvBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fcp-home__gvTitle {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.fcp-home__gvMeta {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-home__gvDesc {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 2px 0 0;
}

.fcp-home__gvGo {
  align-items: center;
  appearance: none;
  background: var(--fcp-brand);
  border: 0;
  border-radius: 8px;
  color: var(--fcp-on-brand);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  transition: transform 140ms ease, filter 140ms ease;
  width: 44px;
}

.fcp-home__gvGo:hover {
  transform: translateX(2px);
}

.fcp-home__gvGo svg {
  height: 18px;
  width: 18px;
}

.fcp-home__join {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-left: 3px solid var(--fcp-brand);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.fcp-home__joinText {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  min-width: 200px;
}

.fcp-home__joinText strong {
  color: var(--fcp-text);
}

/* Home layout: 2-col rows (welcome | news, giveaways | music). Stacks at 900px
   (see the max-width: 900px block below). align-items:start so paired cells
   size independently instead of stretching to the taller one. */
.fcp-home__grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.fcp-home__grid > * {
  min-width: 0;
}

/* Welcome card (row 1, left): white card, red left accent, charcoal text. */
/* ---- Campaign promo banner (top of Home) ----
   Full-width launch banner served from a live, gate-aware activeCampaign.
   Media (landscape) on the left, brand eyebrow + headline + brand CTA pill on
   the right, with a brand accent rail. All colors ride the org/theme tokens so
   it adapts to light + dark and per-org brand without a repaint (no FOUC: it's
   built in JS after the render-blocking stylesheet). No purple by construction. */
.fcp-hub a.fcp-home__campaign {
  align-items: stretch;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  color: var(--fcp-text);
  display: flex;
  gap: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

/* Brand accent rail down the left edge (top edge when stacked on mobile). */
.fcp-home__campaign::before {
  background: var(--fcp-brand);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
  z-index: 1;
}

a.fcp-home__campaign:hover {
  box-shadow: var(--fcp-shadow);
  transform: translateY(-1px);
}

.fcp-home__campaignMedia {
  align-self: stretch;
  background: center / cover no-repeat var(--fcp-card-2);
  flex: 0 0 clamp(150px, 30%, 260px);
  min-height: 132px;
}

.fcp-home__campaignBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 0;
  padding: 22px 24px;
}

.fcp-home__campaignEyebrow {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fcp-home__campaignDot {
  background: var(--fcp-brand);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

.fcp-home__campaignKicker {
  color: var(--fcp-brand);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fcp-home__campaignTitle {
  color: var(--fcp-text);
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.fcp-home__campaignCta {
  align-items: center;
  align-self: flex-start;
  background: var(--fcp-brand);
  border-radius: 8px;
  color: var(--fcp-on-brand);
  display: inline-flex;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 7px;
  margin-top: 2px;
  padding: 9px 16px;
  transition: filter 140ms ease;
}

a.fcp-home__campaign:hover .fcp-home__campaignCta {
  filter: brightness(1.06);
}

.fcp-home__campaignCta svg {
  height: 15px;
  width: 15px;
}

.fcp-home__campaignLock {
  align-items: center;
  display: inline-flex;
}

.fcp-home__campaignLock svg {
  height: 14px;
  width: 14px;
}

.fcp-home__campaignArrow {
  align-items: center;
  display: inline-flex;
  transition: transform 140ms ease;
}

a.fcp-home__campaign:hover .fcp-home__campaignArrow {
  transform: translateX(2px);
}

@media (max-width: 560px) {
  .fcp-home__campaign {
    flex-direction: column;
  }
  .fcp-home__campaign::before {
    bottom: auto;
    height: 4px;
    right: 0;
    width: auto;
  }
  .fcp-home__campaignMedia {
    aspect-ratio: 16 / 9;
    flex-basis: auto;
    min-height: 0;
    width: 100%;
  }
  .fcp-home__campaignBody {
    padding: 18px 20px;
  }
}

.fcp-home__welcome {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-left: 3px solid var(--fcp-brand);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
  padding: 20px;
}

.fcp-home__welcomeMain {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fcp-home__welcomeTitle {
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}

.fcp-home__welcomeSub {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
}

.fcp-home__welcomeMeta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-home__welcomeStat {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-home__welcomeCta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-home__welcomeHead {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.fcp-home__welcomeText {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fcp-home__welcomeAv {
  align-items: center;
  background: var(--fcp-brand-soft, rgba(7, 119, 190, 0.1));
  border: 2px solid var(--fcp-card);
  border-radius: 50%;
  box-shadow: var(--fcp-shadow-sm);
  /* Same rule as the other initial fallbacks: theme ink, never the accent. */
  color: var(--fcp-text);
  display: flex;
  flex: 0 0 auto;
  font-size: var(--fs-stat, 24px);
  font-weight: 700;
  height: 56px;
  justify-content: center;
  overflow: hidden;
  width: 56px;
}

.fcp-home__welcomeAvImg {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.fcp-home__welcomeRule {
  background: var(--fcp-border);
  height: 1px;
  width: 100%;
}

.fcp-home__welcomeDetail {
  align-items: center;
  display: flex;
  gap: 12px;
}

.fcp-home__welcomeGem {
  align-items: center;
  background: var(--fcp-brand-soft, rgba(7, 119, 190, 0.1));
  border-radius: 8px;
  color: var(--fcp-brand);
  display: flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.fcp-home__welcomeDmain {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fcp-home__welcomePlanRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-home__welcomePlan {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
}

.fcp-home__welcomeState {
  align-items: center;
  display: inline-flex;
  font-size: var(--fs-label, 12px);
  font-weight: 600;
  gap: 5px;
}

.fcp-home__welcomeState::before {
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.fcp-home__welcomeState--ok {
  color: #1f9d55;
}
.fcp-home__welcomeState--ok::before {
  background: #1f9d55;
}
.fcp-home__welcomeState--warn {
  color: #c07500;
}
.fcp-home__welcomeState--warn::before {
  background: #c07500;
}
.fcp-home__welcomeState--muted {
  color: var(--fcp-text-muted);
}
.fcp-home__welcomeState--muted::before {
  background: var(--fcp-text-muted);
}

.fcp-home__welcomeSince {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
}

.fcp-home__welcomeActs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-home__ownerPill {
  align-self: flex-start;
  background: var(--fcp-brand-soft, rgba(7, 119, 190, 0.1));
  border-radius: 5px;
  color: var(--fcp-brand);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  text-transform: uppercase;
}

.fcp-home__lockStrip {
  align-items: center;
  appearance: none;
  background: var(--fcp-card);
  border: 1px dashed var(--fcp-border-strong);
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.fcp-home__lockStrip:hover {
  background: var(--fcp-card-2);
}

.fcp-home__lockText {
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-home__news {
  align-items: stretch;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  gap: 0;
  overflow: hidden;
  transition: box-shadow 140ms ease;
  width: 100%;
}

.fcp-home__news:hover {
  box-shadow: var(--fcp-shadow);
}

.fcp-home__newsIcon.has-img {
  background: center / cover no-repeat var(--fcp-card-2);
  border-right: 0;
  /* Fill the row height so the thumbnail defines the card height (no black gap
     below it). The row is kept short by the 2-line snippet clamp + the action
     moved to the right, so the card is never taller than this thumbnail. */
}
.fcp-home__newsIcon {
  align-items: center;
  color: var(--fcp-brand);
  display: flex;
  flex: 0 0 clamp(160px, 26%, 240px);
  justify-content: center;
  /* static pale-blue fallback first, then color-mix tint */
  background: var(--fcp-primary-tint);
  border-right: 1px solid var(--fcp-primary-tint-border);
  background: color-mix(in srgb, var(--fcp-brand) 9%, #ffffff);
  border-right-color: color-mix(in srgb, var(--fcp-brand) 16%, #ffffff);
}

.fcp-home__newsIcon svg {
  height: 34px;
  width: 34px;
}

.fcp-home__newsBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 18px;
  min-width: 0;
}

.fcp-home__newsCta {
  align-self: center;
  flex: none;
  margin: 0 18px 0 4px;
  white-space: nowrap;
}

.fcp-home__newsDate {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-home__newsMeta {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fcp-home__newsRow {
  align-items: center;
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  padding: 11px 14px;
  text-align: left;
  width: 100%;
}

.fcp-home__newsRow:hover {
  background: var(--fcp-card-2);
}

.fcp-home__newsRowTitle {
  color: var(--fcp-text);
  flex: 1 1 auto;
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fcp-home__newsSnippet {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fcp-home__newsTitle {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fcp-home__quiet {
  color: var(--fcp-text-faint);
  font-size: var(--fs-body, 13px);
  padding: 6px 2px;
}

/* -- Home Community teaser (compact recent-post rows) -- */

/* Home live-chat preview: ONE cohesive box (a mini chat window) with recent
   messages stacked inside, divided by thin rules — not separate cards. */
.fcp-home__chat {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fcp-home__chatRow {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fcp-border);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  transition: background 140ms ease;
  width: 100%;
}

.fcp-home__chatRow:last-child {
  border-bottom: 0;
}

.fcp-home__chatRow:hover {
  background: var(--fcp-card-2);
}

.fcp-home__chatAv {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 50%;
  color: var(--fcp-text-muted);
  display: inline-grid;
  flex: 0 0 auto;
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  height: 40px;
  overflow: hidden;
  place-items: center;
  width: 40px;
}

.fcp-home__chatAv.has-photo .fcp-home__chatIni {
  visibility: hidden;
}

/* Org-logo avatars float contained inside the circle instead of being
   cover-zoomed edge to edge (which blows the wordmark out). */
.fcp-hub .fcp-home__chatAv.is-logo {
  background-color: var(--fcp-card-2);
  background-size: 88%;
}

.fcp-home__chatBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fcp-home__chatName {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fcp-home__chatText {
  color: var(--fcp-text-muted);
  display: -webkit-box;
  font-size: var(--fs-body, 13px);
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fcp-home__community {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcp-home__commRow {
  align-items: center;
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  transition: box-shadow 140ms ease, border-color 140ms ease;
  width: 100%;
}

.fcp-home__commRow:hover {
  border-color: var(--fcp-border-strong);
  box-shadow: var(--fcp-shadow-sm);
}

.fcp-home__commAv {
  background: var(--fcp-card-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  /* Landscape thumbnail for community posts (post image reads better wide than
     in a circle); initials fallback still centers in the rectangle. */
  border-radius: var(--fcp-radius-sm);
  color: var(--fcp-text-muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  height: 75px;
  width: 120px;
  overflow: hidden;
}

.fcp-home__commAv.has-photo .fcp-home__commIni {
  visibility: hidden;
}

/* Org-logo thumbnails render contained, not cover-cropped, in the landscape tile. */
.fcp-hub .fcp-home__commAv.is-logo {
  background-color: var(--fcp-card-2);
  background-size: contain;
}

.fcp-home__commBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fcp-home__commTitle {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fcp-home__commSnippet {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fcp-home__commMeta {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

/* Comment count pinned to the right of each row (STP layout). */
.fcp-home__commCount {
  align-items: center;
  color: var(--fcp-text-faint);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fcp-home__commCountIc {
  align-items: center;
  display: inline-flex;
}
.fcp-home__commCountIc svg {
  height: 15px;
  width: 15px;
}
@media (max-width: 560px) {
  .fcp-home__commCountN {
    display: none;
  }
}

.fcp-home__sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcp-home__secBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcp-home__secHead {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.fcp-home__secTitleWrap {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.fcp-home__secIcon {
  align-items: center;
  border-radius: 8px;
  color: var(--fcp-brand);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
  /* static pale-blue fallback first, then color-mix tint */
  background: var(--fcp-primary-tint);
  border: 1px solid var(--fcp-primary-tint-border);
  background: color-mix(in srgb, var(--fcp-brand) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--fcp-brand) 18%, #ffffff);
}

.fcp-home__secIcon svg {
  height: 19px;
  width: 19px;
}

/* Section titles: proper-case headings in the theme text color (owner call)
   — the accent stays on the View-all links. */
.fcp-home__secTitle {
  color: var(--fcp-text);
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.fcp-home__viewAll {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fcp-brand);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.08em;
  padding: 4px 0;
  text-transform: uppercase;
}

.fcp-home__viewAll:hover {
  text-decoration: underline;
}

/* On a light hub the section header is a light surface, so a light org accent
   would wash out — use the contrast-adjusted accent. On a dark hub the raw
   brand already reads on the dark page bg, so leave it. */
.fcp-hub[data-theme="light"] .fcp-home__viewAll {
  color: var(--fcp-accent-on-light);
}

/* -- Home Photos teaser (landscape cards + collection card) -- */

.fcp-home__photos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.fcp-photocard {
  align-items: center;
  appearance: none;
  /* Wider + shorter than the old 4:3 — a photo STRIP, not hero tiles. */
  aspect-ratio: 16 / 10;
  background-color: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

/* The photo layer fades in once the image has decoded (no pop-in). */
.fcp-photocard__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 240ms ease;
}

.fcp-photocard__img.is-loaded {
  opacity: 1;
}

.fcp-photocard:hover {
  box-shadow: var(--fcp-shadow);
  transform: translateY(-1px);
}

.fcp-photocard.is-empty,
.fcp-photocard.is-locked {
  color: var(--fcp-text-faint);
}

.fcp-photocard--coll {
  background: var(--fcp-card-2);
  border-color: var(--fcp-border);
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  text-align: center;
}

.fcp-photocard__collIc {
  align-items: center;
  border-radius: 8px;
  color: var(--fcp-on-brand);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
  background: var(--fcp-brand);
}

.fcp-photocard__collIc svg {
  height: 20px;
  width: 20px;
}

.fcp-photocard__collTitle {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fcp-photocard__collSub {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-hub[data-theme="light"] .fcp-photocard__collSub {
  color: var(--fcp-accent-on-light);
}

/* -- Home Videos teaser (featured card + stacked rail) -- */

.fcp-home__videos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
}

/* 2-3 videos: a uniform strip of equal cards (no featured/rail split). */
.fcp-home__videosRow {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Right rail: compact horizontal mini-cards (small thumb + text beside it) so
   the rail stays consistent with the featured card instead of blowing out. */
.fcp-home__videoRail .fcp-vcard {
  display: grid;
  grid-template-columns: 128px 1fr;
  align-items: stretch;
}
.fcp-home__videoRail .fcp-vcard__thumb {
  aspect-ratio: auto;
  width: 128px;
  height: 100%;
  min-height: 78px;
}
.fcp-home__videoRail .fcp-vcard__body {
  justify-content: center;
}

.fcp-home__videos.is-solo {
  grid-template-columns: minmax(0, 1fr);
}

.fcp-home__videoRail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcp-vcard {
  appearance: none;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.fcp-vcard:hover {
  box-shadow: var(--fcp-shadow);
  transform: translateY(-1px);
}

.fcp-vcard.is-locked {
  color: var(--fcp-text-faint);
}

.fcp-vcard__thumb {
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: #1c1f26;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  position: relative;
}

.fcp-vcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}

.fcp-vcard__title {
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fcp-vcard--feat .fcp-vcard__title {
  font-size: var(--fs-title, 14px);
  letter-spacing: -0.01em;
}

.fcp-vcard__meta {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-vcard__tag {
  align-self: flex-start;
  background: var(--fcp-primary-tint);
  border: 1px solid var(--fcp-primary-tint-border);
  border-radius: 5px;
  /* On the fixed light blush pill: contrast-adjusted accent (a light org accent
     would wash out as raw brand). */
  color: var(--fcp-accent-on-light);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 2px;
  padding: 3px 9px;
  text-transform: uppercase;
}

.fcp-vcard__flag {
  background: rgba(22, 24, 29, 0.72);
  border-radius: 5px;
  color: #fff;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  left: 10px;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  position: absolute;
  text-transform: uppercase;
  top: 10px;
}

.fcp-vcard__watch {
  align-items: center;
  color: var(--fcp-brand);
  display: inline-flex;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 6px;
  margin-top: 6px;
}

.fcp-vcard__watch svg {
  height: 13px;
  width: 13px;
}

/* -- lightbox (Stage 5D photo viewer inside the shared modal) -- */

.fcp-lb {
  position: relative;
}

.fcp-lb__cap {
  color: #c9cdd6;
  font-size: var(--fs-body, 13px);
  margin-top: 10px;
  text-align: center;
}

.fcp-lb__count {
  color: #9aa0ab;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  margin-top: 6px;
  text-align: center;
}

.fcp-lb__fig {
  margin: 0;
}

/* Non-invasive loading spinner for next/prev in the photo viewer. It sits
   centered over the image and is INVISIBLE by default; the .is-loading state
   fades it in only after a ~180ms delay, so a fast or cached photo never
   flashes a spinner, while a slow high-res fetch gets a clear "it's coming"
   cue instead of feeling like the swipe/click didn't register. */
.fcp-lb__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.26);
  border-top-color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 4;
}

.fcp-lb.is-loading .fcp-lb__spinner {
  opacity: 1;
  transition-delay: 0.18s;
  animation: fcp-lb-spin 0.7s linear infinite;
}

@keyframes fcp-lb-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcp-lb.is-loading .fcp-lb__spinner {
    animation: none;
  }
}

.fcp-lb__img {
  border-radius: var(--fcp-radius-sm);
  display: block;
  margin: 0 auto;
  max-height: 72vh;
  max-width: 100%;
  object-fit: contain;
}

.fcp-lb__nav {
  align-items: center;
  appearance: none;
  background: rgba(22, 24, 29, 0.55);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-stat, 24px);
  height: 42px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
}

.fcp-lb__nav:hover {
  background: rgba(22, 24, 29, 0.8);
}

/* Kept just inside the body box (was -6px): the modal body is now an internal
   scroll container, so anything bleeding past its edge would be clipped. These
   sit on the dark chrome over the photo edges, which is the intended look. */
.fcp-lb__nav--next {
  right: 6px;
}

.fcp-lb__nav--prev {
  left: 6px;
}

/* -- lock (locked-content / paywall teaser panel) -- */

.fcp-lock {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 24px;
  text-align: center;
}

.fcp-lock__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.fcp-lock__body {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

.fcp-lock__icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  /* Glyph sits on a fixed light brand tint; contrast-adjusted accent keeps a
     light org accent legible. */
  color: var(--fcp-accent-on-light);
  /* static fallbacks first: browsers without color-mix keep a valid tint */
  background: #e6f1f8;
  border: 1px solid #cde4f2;
  background: color-mix(in srgb, var(--fcp-brand) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--fcp-brand) 18%, #ffffff);
}

.fcp-lock__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 4px 0 0;
}

/* Secondary line under .fcp-lock__body — used by the plan-gate panel, where an
   already-paying member needs the "how do I change plans" caveat spelled out
   without it competing with the main sentence. */
.fcp-lock__note {
  color: var(--fcp-text-faint);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: -2px 0 0;
  max-width: 420px;
}

/* -- lockbadge (Stage 5D inline lock chip on teaser tiles/rows) -- */

.fcp-lockbadge {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 5px;
  color: var(--fcp-text-faint);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.fcp-lockbadge svg {
  height: 18px;
  width: 18px;
}

/* -- member-chip (header join slot, active state) -- */

.fcp-member-chip {
  appearance: none;
  background: var(--fcp-member-bg);
  border: 1px solid var(--fcp-member-border);
  border-radius: 8px;
  color: var(--fcp-member);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  line-height: 1;
  padding: 10px 16px;
}

.fcp-member-chip:hover {
  border-color: #a9d4b1;
}

.fcp-member-chip__ic {
  display: inline-grid;
  place-items: center;
}

.fcp-member-chip__ic svg {
  width: 13px;
  height: 13px;
}

/* -- soonchip (header join slot when the club has nothing purchasable yet) --
   Deliberately NOT a button: a brand-new club (billing live, no published
   plans) must not show a "Join the club" CTA that opens an empty plans modal. */
.fcp-soonchip {
  align-items: center;
  background: var(--fcp-card-2);
  border: 1px dashed var(--fcp-border-strong);
  border-radius: 8px;
  color: var(--fcp-text-faint);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  line-height: 1;
  padding: 10px 16px;
  white-space: nowrap;
}

/* -- modal -- */

.fcp-modal {
  position: fixed;
  inset: 0;
  /* Constrain the centering box to the VISIBLE viewport. 100vh on iOS includes
     the area behind the URL/tab bars, so centering a tall card in it pushed the
     top (the close X) up behind the browser chrome. 100dvh tracks the visible
     area, so the card + X always land on-screen. vh first as an old-browser
     fallback. */
  height: 100vh;
  height: 100dvh;
  /* THE ONE HEIGHT EVERYTHING INSIDE CAPS AGAINST. In the top window it is the
     viewport; inside an embed, positionModalOverlay overwrites it with the
     slice of the iframe the fan can actually see. Children must use this and
     never dvh directly: an auto-height iframe's own viewport is the whole
     frame, so a dvh cap there is thousands of pixels and never applies, which
     left tall modals overflowing past the top of the fan's view with no way to
     scroll back up to them. */
  --fcp-modal-h: 100vh;
  --fcp-modal-h: 100dvh;
  z-index: 60;
  background: rgba(22, 24, 29, 0.45);
  display: flex;
  /* True center on BOTH axes. The card is height-capped (below) so it never
     exceeds the viewport, which keeps flex centering from clipping the top of
     tall content — the body scrolls internally instead. */
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Confirm / prompt dialogs (hubConfirm / hubPrompt) — replace native
   confirm()/prompt(), which are inert inside sandboxed embeds. */
.fcp-confirm { display: flex; flex-direction: column; gap: 12px; }
.fcp-confirm__title { margin: 0; font-size: var(--fs-section, 16px); font-weight: 700; color: var(--fcp-text); }
.fcp-confirm__body { margin: 0; font-size: var(--fs-body, 13px); line-height: 1.5; color: var(--fcp-text-muted); }
.fcp-confirm__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  background: var(--fcp-card);
  color: var(--fcp-text);
  font: inherit;
  font-size: var(--fs-title, 14px);
}
.fcp-confirm__input:focus {
  outline: none;
  border-color: var(--fcp-brand-2);
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
}
.fcp-confirm__row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.fcp-confirm__btn {
  padding: 9px 18px;
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  background: var(--fcp-card);
  color: var(--fcp-text);
  font: inherit;
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  cursor: pointer;
}
.fcp-confirm__btn:hover { border-color: var(--fcp-brand-2); }
.fcp-confirm__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
  border-color: var(--fcp-brand-2);
}
.fcp-confirm__btn--primary { background: var(--fcp-brand-2); border-color: var(--fcp-brand-2); color: var(--fcp-on-brand-2); }
.fcp-confirm__btn--primary.is-danger { background: #d64545; border-color: #d64545; }
.fcp-confirm__btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* Structured report-reason picker (v176): radio rows shared by the post,
   comment, and chat report dialogs. 8px corners (never pills). */
.fcp-confirm__choices { display: flex; flex-direction: column; gap: 6px; }
.fcp-confirm__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  background: var(--fcp-card);
  color: var(--fcp-text);
  font-size: var(--fs-title, 14px);
  line-height: 1.35;
  cursor: pointer;
}
.fcp-confirm__choice:hover { border-color: var(--fcp-brand-2); }
.fcp-confirm__choice input {
  margin: 0;
  flex: none;
  accent-color: var(--fcp-brand-2);
}
.fcp-confirm__choice:has(input:checked) {
  border-color: var(--fcp-brand-2);
  box-shadow: 0 0 0 3px rgba(14, 160, 218, 0.14);
}

.fcp-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Tall modals scroll here, not the whole overlay, so the card stays centered
     and the close (X) stays pinned + visible. min-height:0 lets this flex child
     actually shrink and scroll. */
  overflow-y: auto;
  min-height: 0;
  /* Scrollbar tinted with the club's primary accent (not default black). */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fcp-brand) 55%, transparent) transparent;
}

.fcp-modal__body::-webkit-scrollbar {
  width: 8px;
}

.fcp-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.fcp-modal__body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fcp-brand) 45%, transparent);
  border-radius: 999px;
}

.fcp-modal__body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--fcp-brand) 68%, transparent);
}

.fcp-modal__card {
  position: relative;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: 0 12px 40px rgba(22, 24, 29, 0.22);
  width: 100%;
  max-width: 520px;
  max-height: calc(var(--fcp-modal-h, 100vh) - 32px);
  max-height: calc(var(--fcp-modal-h, 100dvh) - 32px);
  display: flex;
  flex-direction: column;
  /* Extra top room so the close X (top-right chip) never overlaps the first
     content — full-width images or title-less body text both start below it. */
  padding: 46px 24px 22px;
  animation: fcp-modal-in 180ms ease-out both;
}

.fcp-modal__card:focus {
  outline: none;
}

.fcp-modal__card--wide {
  /* Wider on big screens so three plan cards get real column width instead of
     breaking every benefit line in two. Shrinks with the viewport, so narrow
     windows and phones are unaffected. */
  max-width: min(1040px, calc(100vw - 32px));
}

/* Stage 5D card variants (kept in the modal slot — they are modal cards) */

.fcp-modal__card--ann {
  max-width: 660px;
}

.fcp-modal__card--gv {
  max-width: 640px;
}

.fcp-modal__card--lightbox {
  background: #14161b;
  border-color: #262a33;
  max-width: 880px;
}

/* The lightbox image fills the card width, so the X sits on dark chrome with a
   solid backing pill — it must read (and stay clickable) over any bright photo
   and never hide behind the media. */
.fcp-modal__card--lightbox .fcp-modal__close {
  color: #ffffff;
  background: rgba(22, 24, 29, 0.62);
}

/* (0,3,0) on purpose: the generic close hover would paint near-black on the
   dark lightbox card */
.fcp-modal__card--lightbox .fcp-modal__close:hover {
  color: #ffffff;
  background: rgba(22, 24, 29, 0.85);
}

.fcp-modal__card--player {
  max-width: 460px;
}

.fcp-modal__card--rules {
  max-width: 560px;
}

.fcp-modal__card--video {
  max-width: 880px;
}

.fcp-modal__close {
  appearance: none;
  position: absolute;
  top: 12px;
  right: 12px;
  /* Above the body so the X is never covered by modal content (e.g. the
     lightbox image, which fills the card). A solid chip keeps it legible +
     clickable over any content that sits behind the top-right corner. */
  z-index: 2;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: 999px;
  color: var(--fcp-text-muted);
  cursor: pointer;
  display: grid;
  height: 32px;
  place-items: center;
  width: 32px;
}

.fcp-modal__close:hover {
  border-color: var(--fcp-border-strong);
  color: var(--fcp-text);
}

.fcp-modal__close:hover {
  color: var(--fcp-text);
}

/* Sign-in consent fine print. Lived as an inline style attribute on the <p>
   (11.5px), which is why no read of this sheet could find it and only a
   rendered census did. The links inside inherit the step. */
.fcp-modal__consent {
  color: var(--fcp-text-muted, #9aa0ab);
  font-size: var(--fs-label, 12px);
  line-height: 1.5;
  margin: 12px 0 0;
  text-align: center;
}

.fcp-modal__foot {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  margin: 6px 0 0;
  text-align: center;
}

.fcp-modal__sub {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
}

.fcp-modal__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  padding-right: 24px;
}

/* Opt-in visible header (openModal opts.title): the reduced top padding moves
   the title row up into the same 12-44px band the absolute close X occupies,
   so the title reads left-aligned on the X's row. */
.fcp-modal__card--titled {
  padding-top: 12px;
}

.fcp-modal__titleRow {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  margin: 0 0 12px;
  /* Match the 32px close chip so the title centers on its row. */
  min-height: 32px;
  /* Keep a long title clear of the absolute X (32px chip + 12px inset). */
  padding-right: 20px;
}

@keyframes fcp-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== MUSIC TAB (redesign: one persistent player + gated library) ===== */
/*
 * A self-contained DARK, blue-accent module. Local custom properties keep the
 * dark surfaces scoped to .fcp-music so the rest of the (light) hub is
 * unaffected. Accent is pure blue — no purple anywhere. The content width and
 * outer margins are the tab panel's; this card only styles its interior.
 */

.fcp-music {
  /* Player accent follows the club's own brand color (falls back to the default). */
  --m-accent: var(--fcp-brand, #4f83f5);
  --m-accent-strong: color-mix(in srgb, var(--fcp-brand, #4f83f5) 82%, #ffffff);
  --m-accent-ink: var(--fcp-org-on-primary, #ffffff);
  --m-accent-soft: color-mix(in srgb, var(--fcp-brand, #4f83f5) 16%, transparent);
  --m-accent-border: color-mix(in srgb, var(--fcp-brand, #4f83f5) 42%, transparent);
  /* Fixed near-theme shades (owner-tuned): #151515 base on dark clubs, the
     off-white mirror on light (override below). Close to the surrounding
     cards, one recognizable step apart. */
  --m-bg: #151515;
  --m-surface: #151515;
  --m-surface-2: #1b1b1b;
  --m-surface-3: #2a2a2a;
  --m-border: rgba(255, 255, 255, 0.09);
  --m-border-strong: rgba(255, 255, 255, 0.17);
  --m-text: #f0f0f2;
  --m-muted: #9c9ca6;
  --m-faint: #8790a0;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--fcp-radius-lg);
  color: var(--m-text);
  padding: clamp(14px, 2.2vw, 24px);
}

/* Home: keep the var/theme scope but drop the panel chrome so the player card
   (.fcp-mplayer, which has its own stroke) is the ONLY container — no box-in-a-box. */
.fcp-hub[data-theme="light"] .fcp-mplayer {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0.2) 100%),
    var(--m-surface);
  border-color: rgba(16, 18, 24, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px rgba(22, 24, 29, 0.1);
}

.fcp-hub[data-theme="light"] .fcp-mplayer__btn--sub,
.fcp-hub[data-theme="light"] .fcp-mplayer__btn--step {
  background: rgba(16, 18, 24, 0.05);
  border-color: rgba(16, 18, 24, 0.12);
}

.fcp-hub[data-theme="light"] .fcp-music {
  --m-bg: #f7f7f7;
  --m-surface: #f7f7f7;
  --m-surface-2: #fcfcfc;
  --m-surface-3: #e3e3e3;
  --m-border: rgba(16, 18, 24, 0.1);
  --m-border-strong: rgba(16, 18, 24, 0.18);
  --m-text: #16181d;
  --m-muted: #5b616c;
  --m-faint: #6c727d;
}

.fcp-music--bare {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/*
 * LIGHT-club override. The hub root carries data-theme="light|dark"
 * (set from org.colorBg/colorText/themeMode, same signal as the FOUC floor),
 * so a light club repaints the player on light surfaces with dark, legible
 * text. Higher specificity than the base .fcp-music block wins. The --m-accent
 * group is intentionally left untouched: it resolves to --fcp-brand in both
 * themes.
 */
.fcp-music__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 22px);
}

/* Hidden <audio> for the single engine. */
.fcp-mplayer__audio {
  display: none;
}

/* -- Compact header -- */

.fcp-music__head {
  align-items: center;
  display: flex;
  gap: 12px;
}

.fcp-music__headIc {
  align-items: center;
  background: var(--m-accent-soft);
  border: 1px solid var(--m-accent-border);
  border-radius: 8px;
  color: var(--m-accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.fcp-music__headIc svg {
  height: 22px;
  width: 22px;
}

.fcp-music__headText {
  flex: 1 1 auto;
  min-width: 0;
}

.fcp-music__title {
  color: var(--m-text);
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.fcp-music__sub {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.4;
  margin: 3px 0 0;
}

.fcp-music__mfbadge {
  align-items: center;
  background: var(--m-accent-soft);
  border: 1px solid var(--m-accent-border);
  border-radius: 5px;
  color: var(--m-accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.01em;
  padding: 6px 12px 6px 10px;
  white-space: nowrap;
}

.fcp-music__mfbadgeIc {
  align-items: center;
  display: inline-flex;
}

.fcp-music__mfbadgeIc svg {
  height: 14px;
  width: 14px;
}

/* =========================================================
 * The one persistent player card
 * ========================================================= */

.fcp-mplayer {
  /* Glass: a white sheen layered over the surface + hairline border + inner
     top highlight. Translucency only — backdrop-filter is banned here. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 100%),
    var(--m-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--fcp-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.3);
  display: grid;
  gap: clamp(16px, 2.6vw, 26px);
  grid-template-columns: clamp(116px, 17vw, 184px) minmax(0, 1fr);
  padding: clamp(16px, 2vw, 22px);
  position: relative;
}

.fcp-mplayer.is-playing {
  border-color: var(--m-accent-border);
}

/* -- artwork -- */

.fcp-mplayer__art {
  align-self: start;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Placeholder artwork (no cover): brand-derived, follows the theme surfaces
     so it is neutral on a light club and deep on a dark club. No hardcoded blue. */
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--m-accent) 20%, var(--m-surface-2)) 0%,
    var(--m-surface) 58%,
    color-mix(in srgb, var(--m-accent) 45%, var(--m-surface-3)) 140%
  );
  box-shadow: var(--fcp-shadow);
}

.fcp-mplayer__artImg {
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms ease;
}

.fcp-mplayer__art.has-img .fcp-mplayer__artImg {
  opacity: 1;
}

.fcp-mplayer__artGlyph {
  align-items: center;
  /* Legible over the placeholder art in both themes (follows --m-text). */
  color: color-mix(in srgb, var(--m-text) 45%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.fcp-mplayer__art.has-img .fcp-mplayer__artGlyph {
  display: none;
}

.fcp-mplayer__artGlyph svg {
  height: 40%;
  width: 40%;
}

.fcp-mplayer__eq {
  align-items: center;
  background: rgba(9, 12, 18, 0.62);
  border-radius: 999px;
  bottom: 10px;
  color: var(--m-accent-strong);
  display: none;
  height: 30px;
  justify-content: center;
  left: 10px;
  position: absolute;
  width: 30px;
}

.fcp-mplayer.is-playing .fcp-mplayer__eq {
  display: inline-flex;
}

.fcp-mplayer__eq svg {
  height: 16px;
  width: 16px;
}

/* -- main column -- */

.fcp-mplayer__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 0;
}

.fcp-mplayer__nowRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-mplayer__now {
  color: var(--m-accent-strong);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--m-accent) 45%, transparent);
  background: color-mix(in srgb, var(--m-accent) 12%, transparent);
  width: fit-content;
}

.fcp-mplayer__now[hidden] {
  display: none;
}

.fcp-mplayer__badges {
  display: inline-flex;
  gap: 6px;
}

.fcp-mplayer__title {
  color: var(--m-text);
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-mplayer__sub {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- waveform -- */

.fcp-mplayer__wave {
  cursor: pointer;
  margin-top: 2px;
  height: 65px;
  position: relative;
}

/* Faint midline showing through the quiet stretches (behind the wave). */
.fcp-mplayer__wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--m-border-strong);
}

.fcp-mplayer__waveSvg {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.fcp-mplayer__waveSvg .fcp-waveSvg__base {
  fill: var(--m-surface-3);
}

.fcp-mplayer__waveSvg .fcp-waveSvg__played {
  fill: var(--m-accent);
}

.fcp-mplayer__wave[hidden] {
  display: none;
}

/* -- scrubber -- */

.fcp-mplayer__scrub {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fcp-mplayer__times {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

.fcp-mplayer__scrub[hidden] {
  display: none;
}

.fcp-mplayer__cur,
.fcp-mplayer__total {
  color: var(--m-muted);
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 38px;
}

.fcp-mplayer__total {
  text-align: right;
}

.fcp-mplayer__bar {
  background: var(--m-surface-3);
  border-radius: 999px;
  cursor: pointer;
  flex: 1 1 auto;
  height: 6px;
  outline: none;
  position: relative;
}

.fcp-mplayer__bar:focus-visible {
  box-shadow: 0 0 0 3px var(--m-accent-soft);
}

.fcp-mplayer__barFill {
  background: var(--m-accent);
  border-radius: 999px;
  display: block;
  height: 100%;
  position: relative;
  width: 0%;
}

.fcp-mplayer__barFill::after {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  content: "";
  height: 12px;
  opacity: 0;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
  width: 12px;
}

.fcp-mplayer__bar:hover .fcp-mplayer__barFill::after,
.fcp-mplayer__bar:focus-visible .fcp-mplayer__barFill::after {
  opacity: 1;
}

/* -- controls -- */

.fcp-mplayer__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: space-between;
  margin-top: 4px;
}

.fcp-mplayer__transport {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fcp-mplayer__right {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fcp-mplayer__btn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--m-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  transition: color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.fcp-mplayer__btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.fcp-mplayer__btn--sub {
  height: 40px;
  width: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.fcp-mplayer__btn--sub:not(:disabled):hover {
  background: var(--m-surface-3);
  color: var(--m-text);
}

.fcp-mplayer__btn--sub.is-on {
  color: var(--m-accent-strong);
}

.fcp-mplayer__btn--step {
  color: var(--m-text);
  height: 44px;
  width: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.fcp-mplayer__btn--step:not(:disabled):hover {
  background: var(--m-surface-3);
  transform: scale(1.05);
}

.fcp-mplayer__btn--play {
  background: var(--m-accent);
  color: var(--m-accent-ink);
  height: 58px;
  width: 58px;
}

.fcp-mplayer__btn--play svg {
  height: 24px;
  width: 24px;
}

.fcp-mplayer__btn--play:not(.is-playing):not(.is-locked) svg {
  margin-left: 3px;
}

.fcp-mplayer__btn--play:not(:disabled):hover {
  background: var(--m-accent-strong);
  transform: scale(1.05);
}

.fcp-mplayer__btn--play.is-locked {
  background: var(--m-surface-3);
  box-shadow: none;
  color: var(--m-accent-strong);
}

/* Repeat-one indicator dot. */
.fcp-mplayer__repeatOne {
  background: var(--m-accent);
  border-radius: 999px;
  color: var(--m-accent-ink);
  display: none;
  font-size: 9px;
  font-weight: 700;
  height: 13px;
  line-height: 13px;
  position: absolute;
  right: 2px;
  text-align: center;
  top: 2px;
  width: 13px;
}

.fcp-mplayer__btn--sub {
  position: relative;
}

.fcp-mplayer__btn--sub.is-one .fcp-mplayer__repeatOne {
  display: block;
}

/* -- volume -- */

.fcp-mplayer__vol {
  align-items: center;
  display: flex;
  gap: 6px;
}

.fcp-mplayer__volPct {
  color: var(--m-muted);
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 34px;
  text-align: right;
}

.fcp-mplayer__volRange {
  appearance: none;
  -webkit-appearance: none;
  background: var(--m-surface-3);
  border-radius: 999px;
  cursor: pointer;
  height: 4px;
  outline: none;
  width: clamp(110px, 14vw, 190px);
}

.fcp-mplayer__volRange::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  background: var(--m-accent);
  border: 0;
  border-radius: 999px;
  height: 13px;
  width: 13px;
}

.fcp-mplayer__volRange::-moz-range-thumb {
  background: var(--m-accent);
  border: 0;
  border-radius: 999px;
  height: 13px;
  width: 13px;
}

.fcp-mplayer__volRange:focus-visible {
  box-shadow: 0 0 0 3px var(--m-accent-soft);
}

.fcp-mplayer__volRange:disabled {
  opacity: 0.4;
}

/* Download slot in the player's right cluster. Collapses entirely when the
   current track has no allowed download (no phantom flex-gap column). */
.fcp-mplayer__dl {
  align-items: center;
  display: inline-flex;
}

.fcp-mplayer__dl:empty {
  display: none;
}

/* The player's download button wears the sub-control chrome (same classes as
   queue/mute); re-assert the 40px sub size over the 34px .fcp-dlbtn base. */
.fcp-hub .fcp-mplayer__dl a.fcp-dlbtn {
  height: 40px;
  width: 40px;
}

/* -- queue popover -- */

.fcp-mplayer__queuePop {
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--fcp-radius);
  bottom: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  max-height: 320px;
  overflow: auto;
  position: absolute;
  right: 14px;
  width: min(340px, calc(100% - 28px));
  z-index: 6;
}

.fcp-mplayer__queuePop[hidden] {
  display: none;
}

.fcp-mplayer__queueHead {
  align-items: baseline;
  border-bottom: 1px solid var(--m-border);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 12px 14px;
  position: sticky;
  top: 0;
  background: var(--m-surface-2);
}

.fcp-mplayer__queueTitle {
  color: var(--m-text);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fcp-mplayer__queueMeta {
  color: var(--m-faint);
  font-size: var(--fs-label, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-mplayer__queueList {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.fcp-mplayer__queueItem {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
}

.fcp-mplayer__queueItem:hover {
  background: var(--m-surface-3);
}

.fcp-mplayer__queueItem.is-current {
  background: var(--m-accent-soft);
}

.fcp-mplayer__queueNum {
  color: var(--m-faint);
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
}

.fcp-mplayer__queueItem.is-current .fcp-mplayer__queueNum {
  color: var(--m-accent-strong);
}

.fcp-mplayer__queueName {
  color: var(--m-text);
  flex: 1 1 auto;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-mplayer__queueDur {
  color: var(--m-faint);
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
}

.fcp-mplayer__queueEmpty {
  color: var(--m-faint);
  font-size: var(--fs-body, 13px);
  padding: 10px;
  text-align: center;
}

/* =========================================================
 * Library (toolbar + Tracks / Playlists)
 * ========================================================= */

.fcp-lib {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcp-lib__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.fcp-lib__seg {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
}

.fcp-lib__segBtn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--m-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 7px;
  padding: 8px 16px;
  transition: background-color 120ms ease, color 120ms ease;
}

.fcp-lib__segBtn:hover {
  color: var(--m-text);
}

.fcp-lib__segBtn.is-active {
  background: var(--m-accent);
  color: var(--m-accent-ink);
}

.fcp-lib__segCount {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  min-width: 18px;
  padding: 1px 6px;
  text-align: center;
}

.fcp-lib__segBtn.is-active .fcp-lib__segCount {
  background: rgba(255, 255, 255, 0.24);
}

.fcp-lib__tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-lib__sort {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.fcp-lib__sortLabel {
  color: var(--m-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fcp-lib__sortSel {
  appearance: none;
  background: var(--m-surface);
  border: 1px solid var(--m-border-strong);
  border-radius: 8px;
  color: var(--m-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 600;
  padding: 7px 30px 7px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4b4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
}

.fcp-lib__sortSel:focus-visible {
  border-color: var(--m-accent-border);
  outline: none;
}

/* Dark search box (overrides the shared light .fcp-feed-search). */
.fcp-lib .fcp-feed-search {
  background: var(--m-surface);
  border-color: var(--m-border-strong);
}

.fcp-lib .fcp-feed-search__ico {
  color: var(--m-faint);
}

.fcp-lib .fcp-feed-search__input {
  color: var(--m-text);
}

.fcp-lib .fcp-feed-search__input::placeholder {
  color: var(--m-faint);
}

/* -- Tracks table -- */

.fcp-tracks {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--fcp-radius);
  overflow: hidden;
}

.fcp-tracks__head {
  align-items: center;
  border-bottom: 1px solid var(--m-border);
  color: var(--m-faint);
  display: grid;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  gap: 14px;
  grid-template-columns: 30px 44px minmax(0, 1fr) minmax(0, 0.62fr) 54px 38px;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  text-transform: uppercase;
}

.fcp-tracks__h--idx {
  text-align: center;
}

.fcp-tracks__h--dur {
  text-align: right;
}

.fcp-trk {
  align-items: center;
  border-top: 1px solid var(--m-border);
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 30px 44px minmax(0, 1fr) minmax(0, 0.62fr) 54px 38px;
  padding: 10px 16px;
  transition: background-color 120ms ease;
}

.fcp-trk:first-of-type {
  border-top: 0;
}

.fcp-trk:hover {
  background: var(--m-surface-2);
}

.fcp-trk.is-active {
  background: var(--m-accent-soft);
}

.fcp-trk.is-locked {
  cursor: pointer;
}

.fcp-trk__idx {
  align-items: center;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  position: relative;
}

.fcp-trk__num {
  color: var(--m-faint);
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
}

.fcp-trk__playIc,
.fcp-trk__eq {
  align-items: center;
  color: var(--m-text);
  display: none;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.fcp-trk__playIc svg {
  height: 15px;
  width: 15px;
}

.fcp-trk__eq {
  color: var(--m-accent-strong);
}

.fcp-trk__eq svg {
  height: 15px;
  width: 15px;
}

.fcp-trk:hover .fcp-trk__num {
  display: none;
}

.fcp-trk:hover .fcp-trk__playIc {
  display: inline-flex;
}

/* Active row (current track): a blue play glyph replaces the number. */
.fcp-trk.is-active .fcp-trk__num {
  display: none;
}

.fcp-trk.is-active .fcp-trk__playIc {
  color: var(--m-accent-strong);
  display: inline-flex;
}

/* Only when it is actually playing does the animated equalizer take over. */
.fcp-trk.is-active.is-playing .fcp-trk__playIc {
  display: none;
}

.fcp-trk.is-active.is-playing .fcp-trk__eq {
  display: inline-flex;
}

.fcp-trk.is-locked .fcp-trk__num {
  display: none;
}

.fcp-trk.is-locked .fcp-trk__playIc {
  color: var(--m-faint);
  display: inline-flex;
}

.fcp-trk__art {
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: var(--m-surface-3);
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  display: inline-flex;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.fcp-trk__art.has-img {
  color: transparent;
}

.fcp-trk__art svg {
  height: 20px;
  width: 20px;
}

.fcp-trk__art.is-locked {
  opacity: 0.7;
}

.fcp-trk__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fcp-trk__titleRow {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}

.fcp-trk__title {
  color: var(--m-text);
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-trk.is-active .fcp-trk__title {
  color: var(--m-accent-strong);
}

.fcp-trk__sub {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-trk__album {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-trk__dur {
  color: var(--m-faint);
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fcp-trk__actions {
  align-items: center;
  display: inline-flex;
  justify-content: flex-end;
}

/* Row download button: a bare icon, quiet until the row (or it) is hovered.
   .fcp-hub-prefixed to outrank the a.fcp-dlbtn base below. */
.fcp-hub .fcp-trk__actions a.fcp-dlbtn {
  color: var(--m-faint);
  height: 32px;
  width: 32px;
}

.fcp-hub .fcp-trk:hover .fcp-trk__actions a.fcp-dlbtn,
.fcp-hub .fcp-trk__actions a.fcp-dlbtn:hover {
  color: var(--m-text);
}

/* -- Playlists grid -- */

.fcp-plists {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.fcp-plcard {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease;
}

.fcp-plcard:hover {
  border-color: var(--m-border-strong);
  transform: translateY(-2px);
}

.fcp-plcard.is-featured {
  border-color: var(--m-accent-border);
}

.fcp-plcard__art {
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: var(--m-surface-3);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  position: relative;
}

.fcp-plcard__art.is-gen {
  background: linear-gradient(150deg, #1f2a44 0%, #2a3c66 60%, var(--m-accent) 150%);
  padding: 22px;
}

.fcp-plcard__artWave {
  align-items: flex-end;
  display: flex;
  gap: 3px;
  height: 46%;
  width: 76%;
}

.fcp-plcard__artWave .fcp-wave__bar {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  flex: 1 1 0;
  min-width: 0;
}

.fcp-plcard__play {
  align-items: center;
  appearance: none;
  background: var(--m-accent);
  border: 0;
  border-radius: 999px;
  bottom: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  color: var(--m-accent-ink);
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  position: absolute;
  right: 12px;
  transition: transform 120ms ease, background-color 120ms ease;
  width: 48px;
}

.fcp-plcard__play svg {
  height: 20px;
  width: 20px;
}

.fcp-plcard__play:not(.is-locked) svg {
  margin-left: 2px;
}

.fcp-plcard__play:hover {
  background: var(--m-accent-strong);
  transform: scale(1.06);
}

.fcp-plcard__play.is-locked {
  background: rgba(9, 12, 18, 0.72);
  color: #fff;
}

.fcp-plcard__play.is-locked svg {
  height: 18px;
  width: 18px;
}

.fcp-plcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.fcp-plcard__eyebrow {
  color: var(--m-accent-strong);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fcp-plcard__titleRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fcp-plcard__title {
  color: var(--m-text);
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.fcp-plcard__meta {
  color: var(--m-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-plcard__desc {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.45;
  margin: 2px 0 0;
}

.fcp-plcard__footer {
  margin-top: auto;
  padding-top: 10px;
}

.fcp-plcard__open {
  align-items: center;
  appearance: none;
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  border-radius: 8px;
  color: var(--m-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 6px;
  padding: 7px 14px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.fcp-plcard__open:hover {
  background: var(--m-surface-3);
  border-color: var(--m-accent-border);
}

.fcp-plcard__openChev {
  align-items: center;
  display: inline-flex;
}

.fcp-plcard__openChev svg {
  height: 14px;
  width: 14px;
}

/* -- Playlist detail (read-only) -- */

.fcp-pldetail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fcp-pldetail__back {
  align-items: center;
  appearance: none;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--m-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 6px;
  padding: 4px 2px;
}

.fcp-pldetail__back:hover {
  color: var(--m-text);
}

.fcp-pldetail__head {
  align-items: center;
  display: flex;
  gap: 18px;
}

.fcp-pldetail__art {
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: var(--m-surface-3);
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
  width: clamp(96px, 15vw, 148px);
}

.fcp-pldetail__art.is-gen {
  background: linear-gradient(150deg, #1f2a44 0%, #2a3c66 60%, var(--m-accent) 150%);
  padding: 16px;
}

.fcp-pldetail__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fcp-pldetail__eyebrow {
  color: var(--m-accent-strong);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fcp-pldetail__titleRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-pldetail__title {
  color: var(--m-text);
  font-size: var(--fs-page, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.fcp-pldetail__meta {
  color: var(--m-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 600;
}

.fcp-pldetail__desc {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 2px 0 0;
  max-width: 60ch;
}

.fcp-pldetail__playAll {
  align-items: center;
  appearance: none;
  align-self: flex-start;
  background: var(--m-accent);
  border: 0;
  border-radius: 8px;
  color: var(--m-accent-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 18px;
  transition: background-color 120ms ease, transform 120ms ease;
}

.fcp-pldetail__playAll svg {
  height: 17px;
  width: 17px;
}

.fcp-pldetail__playAll:not(.is-disabled):hover {
  background: var(--m-accent-strong);
  transform: translateY(-1px);
}

.fcp-pldetail__playAll.is-disabled {
  background: var(--m-surface-3);
  color: var(--m-muted);
  cursor: default;
}

.fcp-pldetail__list {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--fcp-radius);
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.fcp-pldetail__row {
  align-items: center;
  border-top: 1px solid var(--m-border);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 11px 16px;
  transition: background-color 120ms ease;
}

.fcp-pldetail__row:first-child {
  border-top: 0;
}

.fcp-pldetail__row:hover {
  background: var(--m-surface-2);
}

.fcp-pldetail__row.is-active {
  background: var(--m-accent-soft);
}

.fcp-pldetail__num {
  color: var(--m-faint);
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
}

.fcp-pldetail__eq {
  align-items: center;
  color: var(--m-accent-strong);
  display: none;
  flex: 0 0 auto;
  justify-content: center;
  width: 20px;
}

.fcp-pldetail__eq svg {
  height: 15px;
  width: 15px;
}

.fcp-pldetail__row.is-active.is-playing .fcp-pldetail__num {
  display: none;
}

.fcp-pldetail__row.is-active.is-playing .fcp-pldetail__eq {
  display: inline-flex;
}

.fcp-pldetail__mid {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
}

.fcp-pldetail__rtitle {
  color: var(--m-text);
  font-size: var(--fs-title, 14px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-pldetail__row.is-active .fcp-pldetail__rtitle {
  color: var(--m-accent-strong);
}

.fcp-pldetail__rdur {
  color: var(--m-faint);
  flex: 0 0 auto;
  font-size: var(--fs-body, 13px);
  font-variant-numeric: tabular-nums;
}

.fcp-pldetail__lock {
  align-items: center;
  color: var(--m-faint);
  display: inline-flex;
  flex: 0 0 auto;
}

.fcp-pldetail__lock svg {
  height: 15px;
  width: 15px;
}

.fcp-pldetail__empty {
  color: var(--m-faint);
  font-size: var(--fs-label, 12px);
  padding: 16px;
  text-align: center;
}

/* -- Library empty states -- */

.fcp-lib__empty {
  align-items: center;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--fcp-radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 44px 20px;
  text-align: center;
}

.fcp-lib__emptyIc {
  align-items: center;
  background: var(--m-surface-3);
  border-radius: 8px;
  color: var(--m-accent-strong);
  display: inline-flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.fcp-lib__emptyIc svg {
  height: 26px;
  width: 26px;
}

.fcp-lib__emptyTitle {
  color: var(--m-text);
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 0;
}

.fcp-lib__emptyCopy {
  color: var(--m-muted);
  font-size: var(--fs-body, 13px);
  margin: 0;
  max-width: 42ch;
}

/* -- Music tags + overflow menu (base structure; reused by makeMusicTag +
 *    buildRowMenu, which now render only inside the dark Music module) -- */

.fcp-mtag {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 3px 7px;
  text-transform: uppercase;
}

/* Direct download button (buildDownloadButton) — replaced the Download-only
   overflow menu (owner ask 2026-08-28). Rendered ONLY when the artist allows
   the download, so it never appears disabled. .fcp-hub-a-qualified so the
   global link color / underline (and the dark-theme link override) never
   bleed in; the player variant additionally wears the sub-control chrome
   (.fcp-mplayer__btn--sub) and its 40px size override above. */
.fcp-hub a.fcp-dlbtn {
  align-items: center;
  border-radius: 8px;
  color: var(--m-muted, #9aa4b4);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  text-decoration: none;
  width: 34px;
}

.fcp-hub a.fcp-dlbtn:hover {
  color: var(--m-text, #eef1f6);
  text-decoration: none;
}

/* -- Music tags (Exclusive / New) in the dark module -- */

.fcp-music .fcp-mtag--excl {
  background: var(--m-accent-soft);
  border: 1px solid var(--m-accent-border);
  color: var(--m-accent-strong);
}

.fcp-music .fcp-mtag--new {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--m-border-strong);
  color: var(--m-text);
}

/* -- Equalizer animation -- */

.fcp-eqbar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: fcp-eq 900ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fcp-eqbar { animation: none; }
}

.fcp-eqbar--a {
  animation-delay: 0ms;
}

.fcp-eqbar--b {
  animation-delay: 220ms;
}

.fcp-eqbar--c {
  animation-delay: 440ms;
}

@keyframes fcp-eq {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

/* -- Skeleton on the dark module -- */

.fcp-music .fcp-skel {
  background: linear-gradient(
    100deg,
    var(--m-surface) 30%,
    var(--m-surface-3) 50%,
    var(--m-surface) 70%
  );
  background-size: 200% 100%;
}

/* -- Empty-panel state (buildEmptyState) inside the dark module -- */

.fcp-music .fcp-feed-empty {
  background: var(--m-surface);
  border-color: var(--m-border);
}

.fcp-music .fcp-feed-empty__icon {
  background: var(--m-surface-3);
  color: var(--m-accent-strong);
}

.fcp-music .fcp-feed-empty__title {
  color: var(--m-text);
}

.fcp-music .fcp-feed-empty__copy {
  color: var(--m-muted);
}

/* -- Responsive -- */

@media (max-width: 860px) {
  .fcp-mplayer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .fcp-mplayer__art {
    max-width: 240px;
  }

  .fcp-mplayer__main {
    align-items: center;
    width: 100%;
  }

  .fcp-mplayer__nowRow {
    justify-content: center;
  }

  .fcp-mplayer__title,
  .fcp-mplayer__sub {
    max-width: 100%;
  }

  .fcp-mplayer__controls {
    flex-direction: column;
    gap: 14px;
  }

  .fcp-mplayer__transport {
    justify-content: center;
    width: 100%;
  }

  .fcp-mplayer__right {
    justify-content: center;
    width: 100%;
  }

  .fcp-lib__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .fcp-lib__seg {
    justify-content: center;
    width: 100%;
  }

  .fcp-lib__segBtn {
    flex: 1 1 0;
    justify-content: center;
  }

  .fcp-lib__tools {
    justify-content: space-between;
  }

  .fcp-lib .fcp-feed-search {
    flex: 1 1 auto;
  }

  /* Collapse the album column on the tracks table. */
  .fcp-tracks__head,
  .fcp-trk {
    grid-template-columns: 28px 40px minmax(0, 1fr) 48px 34px;
  }

  .fcp-tracks__h--album,
  .fcp-trk__album {
    display: none;
  }

  .fcp-pldetail__head {
    flex-direction: column;
    text-align: center;
  }

  .fcp-pldetail__text {
    align-items: center;
  }
}

@media (max-width: 520px) {
  .fcp-tracks__head,
  .fcp-trk {
    gap: 10px;
    grid-template-columns: 26px minmax(0, 1fr) 46px 30px;
  }

  .fcp-tracks__h--art,
  .fcp-trk__art {
    display: none;
  }

  .fcp-mplayer__volRange {
    width: 64px;
  }
}

/* -- Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  .fcp-mplayer__btn,
  .fcp-plcard,
  .fcp-plcard__play,
  .fcp-trk,
  .fcp-mplayer__waveInner .fcp-wave__bar {
    transition: none;
  }

  .fcp-mplayer__btn--play:hover,
  .fcp-mplayer__btn--step:hover,
  .fcp-plcard__play:hover,
  .fcp-plcard:hover {
    transform: none;
  }

  .fcp-eqbar {
    animation: none;
    transform: scaleY(0.7);
  }
}

/* -- nav / tab -- */

/* Full-bleed tab bar glued to the hero's bottom edge (same 100vw trick as
   .fcp-header): a viewport-wide strip, no gap, tabs aligned to the content
   column. Overflows to horizontal scroll when a club shows many tabs. */
.fcp-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 2px;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0
    max(
      var(--fcp-page-pad),
      calc((100vw - var(--fcp-page-width)) / 2 + var(--fcp-page-pad))
    );
  box-sizing: border-box;
  background: var(--fcp-card);
  border: 0;
  border-bottom: 1px solid var(--fcp-border);
  border-radius: 0;
  box-shadow: var(--fcp-shadow-sm);
  position: relative;
  z-index: 3;
  overflow-x: auto;
  scrollbar-width: none;
}
.fcp-nav::-webkit-scrollbar { display: none; }

.fcp-tab {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 15px;
  background: transparent;
  border: 0;
  border-radius: 8px 8px 0 0;
  color: var(--fcp-text-muted);
  font-family: inherit;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease;
}

.fcp-tab:hover {
  background: transparent;
  color: var(--fcp-text);
}

/* A tab the member's plan does not unlock: still in the bar (it opens the
   upgrade door), marked with a bare lock glyph after the label. */
.fcp-tab__lock {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  opacity: 0.7;
}
.fcp-tab__lock svg {
  width: 12px;
  height: 12px;
}

/* Active tab reads as a raised cell: a faint brand-tinted block with the
   underline flush along the bar's bottom edge (static tint first, then
   color-mix — the file-wide fallback idiom). */
.fcp-tab.is-active {
  background: rgba(7, 119, 190, 0.08);
  background: color-mix(in srgb, var(--fcp-brand) 8%, transparent);
  color: var(--fcp-brand);
  box-shadow: none;
}

.fcp-tab.is-active:hover {
  background: rgba(7, 119, 190, 0.08);
  background: color-mix(in srgb, var(--fcp-brand) 8%, transparent);
  color: var(--fcp-brand);
}

/* Light theme: a light org accent (e.g. gold) needs the darkened variant to
   read as text on white; the underline stays the raw brand color. */
.fcp-hub[data-theme="light"] .fcp-tab.is-active,
.fcp-hub[data-theme="light"] .fcp-tab.is-active:hover {
  color: var(--fcp-accent-on-light);
}

.fcp-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--fcp-brand);
}

.fcp-tab:focus-visible {
  outline: 2px solid var(--fcp-brand);
  outline-offset: 2px;
}

.fcp-tab__ic {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.fcp-tab__icon {
  display: block;
}

/* -- panel -- */

.fcp-panel {
  display: block;
  margin: 18px 0 0;
  min-height: 240px;
}

/* -- merch (v121: members-only exclusive products on the Perks tab). Cards
   ride on the .fcp-perk base (bg/border/radius/padding via the shared class);
   these classes add the media frame, price, variant select, and Buy CTA. -- */

.fcp-merch__buy {
  margin-top: auto;
}

.fcp-merch__media {
  aspect-ratio: 1 / 1;
  background: var(--fcp-card-2);
  border-radius: var(--fcp-radius-sm);
  overflow: hidden;
}

.fcp-merch__img {
  display: block;
  width: 100%;
  height: 100%;
  /* CONTAIN, not cover. Merchant product shots are not square: cover cropped
     the top and bottom off anything tall (a snowboard became a stripe). The
     square frame is kept so the grid stays aligned; the image letterboxes
     inside it against the card colour. */
  object-fit: contain;
}

.fcp-merch__price {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
}

.fcp-merch__select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--fcp-card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888f9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
  border: 1px solid var(--fcp-border-strong);
  border-radius: var(--fcp-radius-sm);
  color: inherit;
  font: inherit;
  font-size: var(--fs-body, 13px);
  padding: 9px 34px 9px 12px;
  width: 100%;
}

/* -- perks (Stage 5D: perk cards, code reveal) -- */

.fcp-perk {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.fcp-perk.is-locked {
  background: var(--fcp-card-2);
}

.fcp-perk__code {
  background: var(--fcp-card-2);
  border: 1px dashed var(--fcp-border-strong);
  border-radius: var(--fcp-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  padding: 9px 12px;
}

.fcp-perk__codeRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-perk__desc {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
}

.fcp-perk__lockRow {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fcp-perk__lockText {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-perk__note {
  color: var(--fcp-text-faint);
  font-size: var(--fs-body, 13px);
  margin: 0;
}

.fcp-perk__err {
  color: var(--fcp-danger, #d13438);
  font-size: var(--fs-body, 13px);
  margin-top: 8px;
}

.fcp-perk .fcp-btn[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.fcp-perk__storeLink {
  align-items: center;
  color: var(--fcp-brand-2);
  display: inline-flex;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 6px;
}

/* The offer itself, so it wears the club colour at full strength rather than a
   9% wash of it. --fcp-on-brand is the ink the hub already computes per club for
   the primary button, so it stays legible whether the club runs a pale or a dark
   accent; the old pale-tint version put brand-coloured text on a brand-coloured
   tint, which on a light accent read as barely there. */
.fcp-perk__summary {
  align-self: flex-start;
  border-radius: 8px;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  padding: 4px 11px;
  background: var(--fcp-brand);
  color: var(--fcp-on-brand);
  border: 1px solid transparent;
}

.fcp-perk__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 0;
}

/* 260px was tight enough that a single trailing word wrapped on its own line.
   320 gives the code copy room to sit on one line at the common sizes without
   stretching a lone card across a wide screen. */
.fcp-perks__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Sub-section titles when discounts AND merch share the tab (v121). */
.fcp-perks__sectionTitle {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 26px 0 12px;
  text-transform: uppercase;
}

.fcp-perks__sectionTitle:first-child {
  margin-top: 0;
}

/* -- placeholder (empty tab body, stage 5A) -- */

.fcp-placeholder {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
}

.fcp-placeholder__body {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

.fcp-placeholder__icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  /* Glyph sits on a fixed light brand tint; contrast-adjusted accent keeps a
     light org accent legible. */
  color: var(--fcp-accent-on-light);
  /* static fallbacks first: browsers without color-mix keep a valid tint */
  background: #e6f1f8;
  border: 1px solid #cde4f2;
  background: color-mix(in srgb, var(--fcp-brand) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--fcp-brand) 18%, #ffffff);
}

.fcp-placeholder__icon svg {
  width: 26px;
  height: 26px;
}

.fcp-placeholder__link {
  color: var(--fcp-brand-2);
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}

.fcp-placeholder__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 8px;
}

.fcp-placeholder__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 4px 0 0;
}

/* -- plan / paywall -- */

.fcp-plan {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  /* A card never outgrows the screen. Clubs write long pitches, and without a
     ceiling the tallest card set the row height and pushed the Join button off
     the bottom: you could not see what the plan was called and how to buy it at
     the same time. The floor keeps it usable on short screens, where the modal
     body still scrolls as the outer fallback. dvh (not vh) so iOS browser
     chrome is excluded. */
  /* var() FALLBACK IS LOAD-BEARING, not decoration. --fcp-modal-h is declared on
     .fcp-modal, and plan cards also render OUTSIDE one (the Account tab shows
     them to a fan with no membership). With the variable unset the calc is
     invalid at computed-value time and the WHOLE declaration is dropped, so
     those cards had no cap at all and the inner scroller never engaged. */
  max-height: min(560px, max(420px, calc(var(--fcp-modal-h, 100vh) - 260px)));
  max-height: min(560px, max(420px, calc(var(--fcp-modal-h, 100dvh) - 260px)));
}

/* Only the scroller gives. Everything else on a height-capped card is fixed
   furniture, and a column flex container shrinks children by default. */
.fcp-plan > *:not(.fcp-plan__scroll) {
  flex-shrink: 0;
}

/* The one part of a plan card that scrolls: description, benefits and the
   offer line. Name, price and CTA sit outside it and stay put. */
.fcp-plan__scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  /* min-height:0 is what actually lets a flex child shrink below its content
     and scroll; without it the card just grows again. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Matches the modal body's tinted thin scrollbar rather than default black. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fcp-brand) 55%, transparent) transparent;
}

.fcp-plan__scroll::-webkit-scrollbar {
  width: 6px;
}

.fcp-plan__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.fcp-plan__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fcp-brand) 45%, transparent);
  border-radius: 3px;
}

/* PHONES KEEP ONE SCROLLER, NOT TWO. The cards are a single column here, so the
   reason for the cap (a tall card pushing its own CTA off screen while the row
   stretches to match) does not apply: the modal body scrolls and the whole card
   including its button comes with it. Nesting a second scroller inside it only
   makes a touch drag ambiguous. */
@media (max-width: 560px) {
  .fcp-plan {
    max-height: none;
  }
  .fcp-plan__scroll {
    overflow-y: visible;
    min-height: auto;
    flex: 0 0 auto;
  }
}

.fcp-plan.is-dim {
  opacity: 0.62;
}

.fcp-plan.is-highlight {
  border-color: var(--fcp-brand);
  box-shadow: 0 0 0 1px var(--fcp-brand), var(--fcp-shadow);
}

.fcp-plan__amount {
  font-size: var(--fs-stat, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Plan appearance glyph: icon key (tinted by the plan accent) or a custom
   uploaded image. color is set inline to the plan's accent hex. */
.fcp-plan__ic {
  width: 46px;
  height: 46px;
  /* NEVER let the column flex squash it. The card is height-capped, so a flex
     child with flex-shrink:1 (the default) gives up height when the content
     above the scroller does not fit — which turned a 46px square into a
     rectangle, and did it MORE on the fuller cards, so one plan's icon looked
     right and its neighbour's did not. */
  flex: 0 0 auto;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--fcp-brand);
  background: rgba(0, 0, 0, 0.05);
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.fcp-plan__ic svg {
  width: 26px;
  height: 26px;
}

.fcp-plan__ic--img {
  background: none;
}

.fcp-plan__icImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fcp-plan__benefit {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--fcp-text-muted);
  /* A notch smaller than the description bullets above: the pitch leads, this
     is the supporting detail. */
  font-size: var(--fs-body, 13px);
  line-height: 1.4;
}

.fcp-plan__benefitIc {
  color: #2e7d3b;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 1px;
  opacity: 0.85;
}

/* THE UNLOCKS BLOCK. Separated from the club's own pitch by a hairline and a
   quiet label, because the two lists make different claims: the description is
   what the club promises, this is the content the plan actually opens. Rendered
   identically they read as one repetitive list saying similar things twice. */
.fcp-plan__unlocks {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--fcp-border);
}

.fcp-plan__unlocksHd {
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  color: var(--fcp-muted);
  margin-bottom: 7px;
}

.fcp-plan__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 5px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fcp-plan__cta {
  margin-top: auto;
  width: 100%;
}

.fcp-plan__desc {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 0;
}

.fcp-plan__flag {
  background: var(--fcp-brand);
  border-radius: 5px;
  color: var(--fcp-on-brand);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  /* Sentence case: the JS already writes "Most popular". The tracking that went
     with the uppercase goes too, since it only existed to open caps up. */
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 5px 10px;
}

.fcp-plan__flag--unlocks {
  background: var(--fcp-brand-2);
  color: var(--fcp-on-brand-2);
}

.fcp-plan__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Membership-gift marketing line on a plan card (v121). */
.fcp-plan__gift {
  align-items: center;
  color: var(--fcp-text-muted);
  display: flex;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  gap: 8px;
}

.fcp-plan__giftIc {
  color: var(--fcp-brand);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.fcp-plan__giftImg {
  border: 1px solid var(--fcp-border);
  border-radius: 6px;
  flex: 0 0 auto;
  height: 26px;
  object-fit: cover;
  width: 26px;
}

.fcp-plan__interval {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
}

.fcp-plan__name {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  margin: 0;
}

.fcp-plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.fcp-plan__trial {
  color: #256b31;
  font-size: var(--fs-body, 13px);
  font-weight: 700;
}
/* Dark-theme legibility: the success/danger colors above are hardcoded for the
   light default (they sit on --fcp-card/--fcp-text, which flip on a dark club),
   so lift them to lighter tints when the club runs a dark theme. */
.fcp-hub[data-theme="dark"] .fcp-plan__benefitIc { color: #4ade80; }
.fcp-hub[data-theme="dark"] .fcp-chat__reportDoneIc { color: #4ade80; }
.fcp-hub[data-theme="dark"] .fcp-plan__trial { color: #6ee7a0; }

/* Annual nudge: the monthly equivalent sits directly under the price as quiet
   context, and the saving reads as an earned badge. 8px radius, never a pill. */
.fcp-plan__equiv {
  margin-top: 2px;
  font-size: var(--fs-body, 13px);
  color: var(--fcp-muted);
}
.fcp-plan__save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fcp-accent) 12%, transparent);
  font-size: var(--fs-body, 13px);
}
.fcp-plan__savePct { font-weight: 700; color: var(--fcp-accent); }
.fcp-plan__saveAmt { color: var(--fcp-muted); }
.fcp-hub[data-theme="dark"] .fcp-plan__saveAmt { color: var(--fcp-muted); }
.fcp-hub[data-theme="dark"] .fcp-field__hint--ok { color: #6ee7a0; }
.fcp-hub[data-theme="dark"] .fcp-field__hint--bad { color: #f4a3a3; }
.fcp-hub[data-theme="dark"] .fcp-btn--danger { color: #f4a3a3; }

.fcp-plans__empty,
.fcp-plans__note {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  line-height: 1.5;
  margin: 10px 0 0;
  text-align: center;
}

/* Owner-only nudge under the empty plans state (fans never see it). The
   .fcp-plans wrapper is a plain block, so center via an auto-margin flex box. */
.fcp-plans__ownerCta {
  display: flex;
  margin: 12px auto 0;
  width: fit-content;
}

/* EU withdrawal acknowledgment under the plan grid (v143). */
.fcp-plans__legal {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  line-height: 1.55;
  margin: 12px auto 0;
  max-width: 560px;
  text-align: center;
}
.fcp-plans__legal a {
  color: inherit;
  text-decoration: underline;
}

.fcp-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* A club with ONE plan stretched that card across the whole wide modal: a
   1000px CTA, 150-character description lines, and the Includes grid fanned out
   to seven columns. Centre it at a sane width instead. */
.fcp-plans__grid:has(> :only-child) {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}

/* -- player (Stage 5D audio player modal) -- */

.fcp-player__audio {
  display: block;
  margin-top: 6px;
  width: 100%;
}

.fcp-player__dl {
  align-self: flex-start;
}

.fcp-player__dl svg {
  margin-right: 6px;
}

.fcp-player__meta {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  margin: 0;
}

.fcp-player__note {
  color: var(--fcp-text-faint);
  font-size: var(--fs-body, 13px);
  margin: 0;
}

.fcp-player__title {
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  padding-right: 24px;
}

/* -- processing (checkout-return poll panel) -- */

.fcp-processing {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  padding: 16px 18px;
}

.fcp-processing--failed {
  background: #fdf6ec;
  border-color: #f2e2c4;
  color: #9a3f12;
}

.fcp-processing__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--fcp-border);
  border-top-color: var(--fcp-brand);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: fcp-spin 800ms linear infinite;
}

.fcp-processing__text {
  color: var(--fcp-text);
  flex: 1 1 240px;
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
}

.fcp-processing__text strong {
  font-weight: 700;
}

@keyframes fcp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -- skeleton (boot state) -- */

.fcp-skel {
  /* Theme-derived shimmer (NOT literal platform grays): on a full-theme club
     --fcp-border / --fcp-card-2 are org-derived (bg mixed toward text), so the
     community skeleton lines read as the club's own palette on a dark hub
     instead of glowing platform-light. Platform-light values match the old
     #eceef2 / #f5f6f8 literals. (.fcp-music .fcp-skel overrides with the
     music module's own --m-surface shades.) */
  background: linear-gradient(
    100deg,
    var(--fcp-border) 40%,
    var(--fcp-card-2) 50%,
    var(--fcp-border) 60%
  );
  background-size: 200% 100%;
  border-radius: var(--fcp-radius);
  animation: fcp-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fcp-skel { animation: none; }
}

.fcp-skel--avatar {
  width: 144px;
  height: 144px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.fcp-skel--hero {
  height: 372px;
  margin-top: 18px;
}

.fcp-skel--line {
  height: 14px;
  border-radius: 7px;
}

.fcp-skel--nav {
  height: 54px;
  margin-top: 20px;
}

.fcp-skel--panel {
  height: 240px;
  margin-top: 18px;
}

.fcp-skel-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  padding-bottom: 12px;
}

.fcp-skel-row {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-top: -72px;
  padding: 0 clamp(12px, 2vw, 28px);
  position: relative;
}

@keyframes fcp-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* -- socials -- */

/* The social row is a COLLAPSED STACK: one toggle, and the club's links fan out
   to its LEFT on click. Nine links used to wrap into a second row of icons that
   shoved the hero CTA around; now the row is always one toggle wide until asked.
   No max-width any more — the open list is what sets the width. */
.fcp-socials {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

/* Normal row: the merchant's first link stays leftmost so the open row reads
   left-to-right in their chosen order. Growth is leftward because the whole
   .fcp-socials row is right-aligned in .fcp-profile__side, so widening the list
   pushes its left edge out while the toggle stays put. */
.fcp-socials__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Closed: zero-width and inert. max-width (not width) so the open state can
     animate without measuring, and pointer-events so the collapsed icons can
     never be clicked through. */
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fcp-socials.is-open .fcp-socials__list {
  /* Comfortably past 9 links at 34px + 8px gap; the flex items cap the real
     width, so an over-large ceiling costs nothing. */
  max-width: 460px;
  pointer-events: auto;
}

/* Each link slides out of the toggle and fades in, staggered by an inline
   transition-delay set at render time. */
.fcp-socials__list > .fcp-socials__link {
  opacity: 0;
  transform: translateX(10px) scale(0.86);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 140ms ease, border-color 140ms ease;
}

.fcp-socials.is-open .fcp-socials__list > .fcp-socials__link {
  opacity: 1;
  transform: none;
}

/* CLOSING. The stagger is an inline transition-delay set at render time, and it
   applies in BOTH directions — it was authored for the fan-out (last chip 0ms,
   first chip up to 234ms). On the way back in those same delays hold each chip
   fully opaque while the list is already collapsing, so `overflow: hidden`
   slices the still-visible circles against a hard vertical edge as they pass
   behind the toggle. That straight-edged dark sliver is the "black box".
   Opening never shows it because the chips fade IN from nothing and are clear
   of the clip by the time they are visible.
   !important is required: it is the only way to beat the inline delay. */
.fcp-socials:not(.is-open) .fcp-socials__list > .fcp-socials__link {
  transition-delay: 0s !important;
  /* Well inside the 260ms width collapse, so every chip is invisible before the
     clip edge ever reaches it. */
  transition-duration: 110ms, 140ms, 140ms, 140ms;
}

/* The toggle wears the same glass chip as the links, so closed it reads as one
   more icon rather than a button bolted on. */
.fcp-socials__toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.fcp-socials__toggle:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

.fcp-socials__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.fcp-socials__toggle svg {
  display: block;
}

/* Reduced motion: still collapses, just without the slide/stagger. */
@media (prefers-reduced-motion: reduce) {
  .fcp-socials__list,
  .fcp-socials__list > .fcp-socials__link {
    transition: none;
  }
  .fcp-socials__list > .fcp-socials__link {
    transform: none;
  }
}

.fcp-socials__icon {
  width: 18px;
  height: 18px;
  display: block;
  /* The social row renders ONLY in the profile hero (buildSocialRow →
     .fcp-profile__side), which sits over the dark hero gradient (0.82 at the
     bottom) with white profile text + a white share button by design. So the
     monochrome icons take WHITE ink regardless of the club's light/dark theme.
     (The old [data-theme="dark"] toggle left them dark + near-invisible on a
     LIGHT-themed club whose hero is still a dark photo.) */
  filter: brightness(0) invert(1);
}

.fcp-socials__link {
  /* Never shrink: on a narrow phone the open list is width-capped and SCROLLS.
     Without this the flex default squeezes nine chips down to a few px each
     rather than overflowing. */
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  /* Glass chip over the hero (matches the transparent white share button),
     not an opaque theme card that clashed with the dark hero. */
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.fcp-socials__link:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

/* -- status (banner slot below the nav, clear of the floating pill) -- */

.fcp-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcp-status:not(:empty) {
  margin-top: 16px;
  margin-bottom: 2px;
}

/* -- toggle (email prefs; disabled placeholders until Phase 6) -- */

.fcp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.fcp-toggle.is-disabled {
  cursor: default;
  opacity: 0.55;
}

.fcp-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fcp-toggle__label {
  color: var(--fcp-text);
  font-size: var(--fs-body, 13px);
  font-weight: 600;
}

.fcp-toggle__track {
  width: 36px;
  height: 21px;
  border-radius: 999px;
  background: var(--fcp-border-strong);
  position: relative;
  flex: 0 0 auto;
  transition: background 140ms ease;
}

.fcp-toggle__track::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--fcp-shadow-sm);
  transition: transform 140ms ease;
}

.fcp-toggle input:checked + .fcp-toggle__track {
  background: var(--fcp-brand);
}

.fcp-toggle input:checked + .fcp-toggle__track::after {
  transform: translateX(15px);
}

/* -- turnstile -- */

.fcp-turnstile {
  display: flex;
  justify-content: center;
  min-height: 66px;
}

.fcp-turnstile--failed {
  align-items: center;
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  min-height: 0;
  text-align: center;
}

/* -- video (Stage 5D video player modal) -- */

.fcp-vid__frame {
  aspect-ratio: 16 / 9;
  background: #0d0f13;
  border-radius: var(--fcp-radius-sm);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.fcp-vid__frame iframe,
.fcp-vid__frame video {
  border: 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.fcp-vid__meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-vid__meta span {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
}

.fcp-vid__meta strong {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
}

/* Playback status / failure line under the player (stream-token refresh). */
.fcp-vid__status {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  margin: 10px 0 0;
}

.fcp-vid__status.is-error {
  color: var(--fcp-danger, #b4232a);
  font-weight: 700;
}

.fcp-vid__noplay {
  align-items: center;
  color: #9aa0ab;
  display: flex;
  font-size: var(--fs-title, 14px);
  height: 100%;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

/* ===== 4. RESPONSIVE ===== */

/* Events cards: one column once the horizontal card would get cramped. */
@media (max-width: 900px) {
  .fcp-events__list,
  .fcp-home__events {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Home 2-col rows (welcome | news, giveaways | music) collapse to one col. */
  .fcp-home__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Videos teaser stacks the featured card above the rail. */
  .fcp-home__videos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The video rail becomes side-by-side smaller cards under the feature. */
  .fcp-home__videoRail {
    flex-direction: row;
  }

  .fcp-home__videoRail > .fcp-vcard {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  /* Taller than the old 240px: the identity column now stacks logo above the
     title, so the overlay needs the extra room to stay inside the hero. */
  .fcp-hero {
    height: 300px;
  }

  .fcp-profile {
    gap: 16px;
    padding: 0 14px 12px;
  }

  .fcp-profile__avatar {
    height: 44px;
    margin-bottom: 8px;
    font-size: var(--fs-section, 16px);
  }

  .fcp-profile__avatar.is-fallback {
    width: 44px;
    border-radius: 8px;
  }

  .fcp-profile__name {
    font-size: var(--fs-display, clamp(32px, 4.6vw, 60px));
  }

  /* No bio on mobile (owner call) — the hero keeps logo, members, actions.
     Full text lives on the About tab. */
  .fcp-profile__bio {
    display: none;
  }

  .fcp-profile__meta {
    margin-top: 8px;
  }

  /* Community: rails stack under the feed / thread on small screens. */
  .fcp-comm__body,
  .fcp-comm-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fcp-comm-post {
    grid-template-columns: minmax(0, 1fr);
  }

  .fcp-comm-post__image,
  .fcp-comm-post__video {
    max-height: 320px;
  }

  .fcp-topic {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .fcp-topic__thumb {
    height: 56px;
    width: 72px;
  }

  /* Nav becomes a horizontally scrolling chip row (donor pattern). */
  .fcp-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fcp-nav::-webkit-scrollbar {
    display: none;
  }

  .fcp-tab {
    flex: 0 0 auto;
  }

  /* Stage 5D: side rails stack under the giveaway list. */
  .fcp-gvtab__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fcp-gvrow__meta {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  /* Two-column card: the date-on-image tile stays a small square on the LEFT,
     with ALL the info (title, badges, place, date, buttons) stacked in the
     column on the RIGHT. align-items:flex-start tops the tile with the text. */
  .fcp-ev {
    align-items: flex-start;
  }

  /* align-self:flex-start (was stretch) keeps the tile a fixed square instead
     of stretching to the full, tall card height — that stretch is what blew the
     image out into a tall strip. */
  .fcp-ev__media {
    align-self: flex-start;
    height: 84px;
    min-height: 84px;
    width: 84px;
  }

  /* Right column stacks: info over buttons (instead of a desktop row). */
  .fcp-ev__col {
    flex-direction: column;
    align-items: stretch;
  }

  /* Buttons sit below the info within the right column (not pinned right). */
  .fcp-ev__actions {
    margin-left: 0;
    margin-top: 12px;
  }

  .fcp-ev__date {
    height: 50px;
    width: 50px;
  }

  .fcp-ev__dateDay {
    font-size: var(--fs-section, 16px);
  }

  .fcp-gv {
    flex-direction: column;
  }

  .fcp-gv__media {
    aspect-ratio: 16 / 7;
    /* Full-width banner across the top of the card (matches the detail modal).
       The base rule's align-self:flex-start + left/right margin collapsed the
       banner to blank in this column layout, so reset both and stretch it. */
    align-self: stretch;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--fcp-border);
    border-radius: 0;
    flex: 0 0 auto;
  }

  .fcp-home__albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fcp-photogrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Video rail stacks its two cards on a phone. */
  .fcp-home__videoRail {
    flex-direction: column;
  }

  .fcp-hub {
    padding-left: 10px;
    padding-right: 10px;
  }

  .fcp-acct-card {
    padding: 16px;
  }

  .fcp-acct-fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .fcp-acct-fact__value {
    text-align: left;
  }

  .fcp-acct-socialGrid {
    grid-template-columns: 1fr;
  }

  .fcp-modal {
    padding: 10px;
  }

  .fcp-modal__card {
    max-height: calc(var(--fcp-modal-h, 100dvh) - 20px);
    padding: 22px 16px 18px;
  }

  /* Keep the visible title on the close X's row on phones too: the compact
     card padding above (22px top) would otherwise drop the title below the
     X band, and the tighter side padding needs more clearance from the X. */
  .fcp-modal__card--titled {
    padding-top: 12px;
  }

  .fcp-modal__titleRow {
    padding-right: 28px;
  }

  /* iOS Safari zooms the whole viewport when a focused field is under 16px, and
     the zoom then clips whatever modal the field sits in (reported on the chat
     report dialog). The chat composer already pins 16px for exactly this
     reason; every other field gets it too, on phones only. */
  .fcp-input,
  .fcp-input--area,
  .fcp-select,
  input.fcp-input,
  select.fcp-input,
  textarea.fcp-input {
    font-size: var(--fs-section, 16px);
  }

  /* The side column stays BESIDE the identity instead of dropping below it.
     Share and socials sit ABOVE the join CTA in that column, which frees the
     bottom-left corner so the logo and member count sit at the foot of the
     hero rather than being pushed up by a full-width action row. */
  .fcp-profile {
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  /* Phone only: the 44px cap drew Merci's wordmark ~55% of the screen, which
     crowded the CTA column. 34px lands it around the "C" (owner reference),
     ~42%. 521-760px keeps 44px -- there is room for it there. */
  .fcp-profile__avatar {
    height: 34px;
  }

  .fcp-profile__avatar.is-fallback {
    width: 34px;
  }

  .fcp-profile__main {
    /* min-width:0 is what lets the identity column shrink instead of shoving
       the join button off the right edge. */
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
  }

  .fcp-profile__side {
    flex: 0 0 auto;
    width: auto;
    /* Socials render after actions in the DOM; column-REVERSE lifts them above
       the join CTA without reordering the markup, so focus order still reaches
       the CTA first. */
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 0;
  }

  .fcp-profile__actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .fcp-profile__side--noCta {
    flex-direction: row-reverse;
    align-items: center;
  }

  .fcp-profile__actions .fcp-btn,
  .fcp-member-chip,
  .fcp-soonchip,
  .fcp-profile__share {
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
  }

  /* Share leads the action row, left of the join CTA. */
  .fcp-hub .fcp-profile__share {
    order: -1;
  }

  /* Share collapses to its icon; the label costs the row too much width. */
  .fcp-profile__share span {
    display: none;
  }

  .fcp-hub .fcp-profile__share {
    padding: 10px 12px;
  }

  /* The socials row now sits at the TOP-RIGHT of the side column, so it has the
     whole hero width to its left and fans out leftward exactly like desktop.
     (The previous rules mirrored it rightward and gave the open list its own
     full-width line, both of which existed only because the row used to sit at
     the bottom-LEFT.) */
  .fcp-socials {
    order: 0;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    position: relative;
  }

  .fcp-socials.is-open {
    flex: 0 0 auto;
    order: 0;
  }

  /* Open list OVERLAYS the hero to the left of the toggle rather than widening
     the side column. Widening it would squeeze the identity column and visibly
     shrink the logo the instant the toggle is tapped. */
  .fcp-socials.is-open .fcp-socials__list {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    max-width: 62vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fcp-socials.is-open .fcp-socials__list::-webkit-scrollbar {
    display: none;
  }

  .fcp-socials__link,
  .fcp-socials__toggle {
    width: 32px;
    height: 32px;
  }

  .fcp-socials__icon {
    width: 15px;
    height: 15px;
  }

  .fcp-profile__actions .fcp-btn {
    font-size: var(--fs-body, 13px);
    letter-spacing: 0.03em;
    padding: 9px 11px;
  }

  .fcp-socials__link,
  .fcp-socials__toggle {
    width: 30px;
    height: 30px;
  }

  .fcp-socials__icon {
    width: 15px;
    height: 15px;
  }

  .fcp-home__news {
    flex-direction: column;
  }

  .fcp-home__newsIcon {
    aspect-ratio: auto;
    border-bottom: 1px solid var(--fcp-primary-tint-border);
    border-right: 0;
    flex: 0 0 auto;
    padding: 14px 0;
  }

  /* The image variant becomes a full-width landscape banner atop the card;
     the glyph-only fallback above stays a compact centered bar. */
  .fcp-home__newsIcon.has-img {
    aspect-ratio: 16 / 9;
    padding: 0;
    width: 100%;
  }

  /* Stacked layout: the action sits under the text, left-aligned. */
  .fcp-home__newsCta {
    align-self: flex-start;
    margin: 4px 18px 16px;
  }
}

/* ===== 5. MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .fcp-btn,
  .fcp-galcard,
  .fcp-home__albumCover,
  .fcp-home__gvGo,
  .fcp-home__gvcard,
  .fcp-phototile,
  .fcp-photocard,
  .fcp-socials__link,
  .fcp-tab,
  .fcp-toggle__track,
  .fcp-toggle__track::after,
  .fcp-track__play,
  .fcp-vcard,
  .fcp-vidtile {
    transition: none;
  }

  .fcp-galcard:hover,
  .fcp-home__album:hover .fcp-home__albumCover,
  .fcp-home__gvGo:hover,
  .fcp-phototile:hover,
  .fcp-photocard:hover,
  .fcp-react-picker__item:hover,
  .fcp-track__play:hover,
  .fcp-vcard:hover,
  .fcp-vidtile:hover {
    transform: none;
  }

  .fcp-banner__check,
  .fcp-giftbanner__badge,
  .fcp-modal__card,
  .fcp-skel {
    animation: none;
  }

  /* Keep the spinner (it carries meaning) but slow it down. */
  .fcp-processing__spinner {
    animation-duration: 2400ms;
  }
}


/* Mobile: the Photos strip and the Videos strip are swipe CAROUSELS (smaller
   tiles, horizontal scroll, snap) instead of a stacked column of full-width
   cards. Same treatment for both — they are sibling sections. */
@media (max-width: 640px) {
  .fcp-home__photos,
  .fcp-home__videosRow {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .fcp-home__photos::-webkit-scrollbar,
  .fcp-home__videosRow::-webkit-scrollbar {
    display: none;
  }

  .fcp-home__photos > *,
  .fcp-home__videosRow > * {
    flex: 0 0 64%;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Featured-plus-rail videos layout stacks into one column on mobile. */
  .fcp-home__videos {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* -- signature motion: the wave sweep loader -- */

.fcp-wavesweep {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 120px;
  padding: 28px 0;
}

.fcp-wavesweep__svg {
  display: block;
  height: 44px;
  width: min(420px, 82%);
  opacity: 0.9;
}

.fcp-wavesweep__svg .fcp-waveSvg__base {
  fill: var(--fcp-border-strong);
}

.fcp-wavesweep__svg .fcp-waveSvg__played {
  fill: var(--fcp-brand);
  /* The accent copy is revealed as a band sweeping left -> right. */
  animation: fcp-wave-sweep 1.4s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

@keyframes fcp-wave-sweep {
  0% { clip-path: inset(0 100% 0 0); }
  55% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .fcp-wavesweep__svg .fcp-waveSvg__played {
    animation: none;
    clip-path: none;
    opacity: 0.35;
  }
}


/* -- full-page boot loader (wave sweep splash) -- */

.fcp-bootload {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  min-height: 72vh;
  padding: 40px 20px;
  text-align: center;
}

.fcp-bootload__mark {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  animation: fcp-boot-pulse 1.6s ease-in-out infinite;
}

.fcp-wavesweep--boot {
  min-height: 0;
  padding: 0;
  width: min(540px, 80%);
}

.fcp-wavesweep--boot .fcp-wavesweep__svg {
  height: 64px;
  width: 100%;
}

@keyframes fcp-boot-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fcp-bootload__mark { animation: none; opacity: 0.7; }
}


/* -- server boot overlay (full-screen wave loader) -- */

.fcp-boot {
  /* Outside .fcp-hub, so it re-declares the scale it needs rather than
     inheriting one. Same values, same names. */
  --fs-body: 13px;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--fcp-bg, #f6f7f9);
  transition: opacity 340ms ease;
}

.fcp-boot.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.fcp-boot__wave {
  /* Full-width flex so the (smaller) waveload centers in the viewport instead
     of left-aligning inside a fixed-width wrapper. */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* -- soundwave loader (Soundwave.svg mask; muted base + accent sweep) -- */

.fcp-waveload {
  position: relative;
  width: min(230px, 56%);
  aspect-ratio: 826.689 / 320.989;
}

.fcp-waveload__base,
.fcp-waveload__played {
  position: absolute;
  inset: 0;
  -webkit-mask: url("/branding/soundwave.svg") no-repeat center / contain;
  mask: url("/branding/soundwave.svg") no-repeat center / contain;
}

.fcp-waveload__base {
  background: var(--fcp-border-strong);
}

.fcp-waveload__played {
  background: var(--fcp-brand);
  animation: fcp-wave-sweep 1.4s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

/* Boot overlay: a larger loader. */
.fcp-boot .fcp-waveload,
.fcp-wavesweep--boot .fcp-waveload {
  width: min(338px, 53%);
}

@media (prefers-reduced-motion: reduce) {
  .fcp-waveload__played {
    animation: none;
    clip-path: none;
    opacity: 0.4;
  }
}

/* -- member offer (claim a Shopify product at the plan's member price) -- */
.fcp-giftcard {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fcp-giftcard__head { display: flex; gap: 14px; align-items: center; }
.fcp-giftcard__img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--fcp-card-2); }
.fcp-giftcard__htxt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fcp-giftcard__eyebrow { font-size: var(--fs-label, 12px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fcp-brand); }
.fcp-giftcard__title { margin: 0; font-size: var(--fs-section, 16px); font-weight: 700; color: var(--fcp-text); }
.fcp-giftcard__note { margin: 0; font-size: var(--fs-body, 13px); color: var(--fcp-text-muted); line-height: 1.5; }
.fcp-giftcard__done { margin: 0; font-size: var(--fs-body, 13px); color: var(--fcp-text); }
.fcp-giftcard__cta { align-self: flex-start; }
.fcp-giftform { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.fcp-giftform__field { display: flex; flex-direction: column; gap: 5px; }
.fcp-giftform__label { font-size: var(--fs-label, 12px); font-weight: 600; color: var(--fcp-text-muted); }
.fcp-giftform__input {
  font: inherit; font-size: var(--fs-title, 14px); padding: 10px 12px;
  border: 1px solid var(--fcp-border); border-radius: 8px;
  background: var(--fcp-card); color: var(--fcp-text); width: 100%;
}
.fcp-giftform__input:focus { outline: 2px solid var(--fcp-brand); outline-offset: -1px; border-color: transparent; }
.fcp-giftform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fcp-giftform__submit { margin-top: 4px; }
/* v125: claimed-offer code + checkout link (shares the perk code chip). */
.fcp-giftcard .fcp-perk__codeRow { margin: 2px 0 0; }
.fcp-giftcard__checkout { align-self: flex-start; }
.fcp-modal__body .fcp-perk__codeRow { margin: 14px 0 12px; }
.fcp-giftcard__doneBtn { align-self: flex-start; margin-top: 10px; }
@media (max-width: 480px) { .fcp-giftform__grid { grid-template-columns: 1fr; } }

/* v131: chip-tab style sliding indicator — the brand tint + underline slide
   between club-section tabs instead of snapping. Positioned in JS (slideNavInd)
   to the active tab's offset; animated here. Text sits above via z-index. */
.fcp-nav__ind {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(7, 119, 190, 0.08);
  background: color-mix(in srgb, var(--fcp-brand) 8%, transparent);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, width;
}
.fcp-nav__ind::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 2px 2px 0 0; background: var(--fcp-brand);
}
.fcp-tab { z-index: 1; }
.fcp-tab.is-active, .fcp-tab.is-active:hover { background: transparent; }
.fcp-tab.is-active::after { display: none; }
@media (prefers-reduced-motion: reduce) { .fcp-nav__ind { transition: none; } }

/* ===== NEWS TAB (v133): blog-style announcements + grid/list toggle ===== */
.fcp-hub .fcp-news__bar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.fcp-hub .fcp-news__toggle { position: relative; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--fcp-border); border-radius: 999px; background: var(--fcp-card-2); }
.fcp-hub .fcp-news__toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4px); border-radius: 999px; background: var(--fcp-brand); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.fcp-hub .fcp-news__toggle.is-list::before { transform: translateX(calc(100% + 2px)); }
.fcp-hub .fcp-news__viewBtn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 13px; border-radius: 999px; font: inherit; font-size: var(--fs-body, 13px); font-weight: 700; color: var(--fcp-text-muted); cursor: pointer; transition: color 0.2s ease; }
.fcp-hub .fcp-news__viewBtn.is-on { color: var(--fcp-on-brand); }
.fcp-hub .fcp-news__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .fcp-hub .fcp-news__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 840px) { .fcp-hub .fcp-news__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fcp-hub .fcp-news__items { grid-template-columns: 1fr; } }
.fcp-hub .fcp-news__card { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--fcp-border); border-radius: 12px; background: var(--fcp-card); padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.fcp-hub .fcp-news__card:hover { border-color: var(--fcp-border-strong); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(22, 24, 29, 0.1); }
.fcp-hub .fcp-news__card:focus-visible { outline: 2px solid var(--fcp-brand); outline-offset: 2px; }
.fcp-hub .fcp-news__thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background-color: var(--fcp-card-2); }
.fcp-hub .fcp-news__thumbBg { position: absolute; inset: -8%; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(18px) saturate(1.05); opacity: 0.55; }
.fcp-hub .fcp-news__thumbImg { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.fcp-hub .fcp-news__main { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; min-width: 0; }
.fcp-hub .fcp-news__meta { display: flex; align-items: center; gap: 8px; }
.fcp-hub .fcp-news__date { font-size: var(--fs-label, 12px); color: var(--fcp-text-faint); }
.fcp-hub .fcp-news__title { font-size: var(--fs-section, 16px); font-weight: 700; line-height: 1.3; color: var(--fcp-text); }
.fcp-hub .fcp-news__snippet { font-size: var(--fs-body, 13px); line-height: 1.5; color: var(--fcp-text-muted); }
.fcp-hub .fcp-news__items.is-list { grid-template-columns: 1fr; gap: 10px; }
.fcp-hub .fcp-news__items.is-list .fcp-news__card { flex-direction: row; align-items: stretch; }
.fcp-hub .fcp-news__items.is-list .fcp-news__thumb { width: 132px; min-width: 132px; aspect-ratio: auto; }
/* list rows: small thumb reads better as a straight cover crop (focal point applies) */
.fcp-hub .fcp-news__items.is-list .fcp-news__thumbBg { display: none; }
.fcp-hub .fcp-news__items.is-list .fcp-news__thumbImg { background-size: cover; background-position: var(--fcp-news-focus, center); }
.fcp-hub .fcp-news__items.is-list .fcp-news__main { padding: 12px 14px; }
@media (max-width: 700px) {
  .fcp-hub .fcp-news__items.is-list .fcp-news__thumb { width: 104px; min-width: 104px; }
}
/* About sections appended inside the Membership tab: breathing room above. */
.fcp-hub .fcp-about--inAccount { margin-top: 22px; }


/* ===== v136: layered modal images + rich news bodies ===== */
/* flex:none — the modal body is a height-capped COLUMN FLEXBOX; without it,
   long post text makes this wrap (absolute-only children = zero min-content)
   absorb all the shrink and crush to a sliver or nothing. */
.fcp-ann__imgWrap { position: relative; overflow: hidden; flex: none; border-radius: var(--fcp-radius-sm, 10px); width: 100%; aspect-ratio: 16 / 9; max-height: 340px; }
.fcp-ann__imgBg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(18px) saturate(1.05); opacity: 0.55; max-height: none; }
.fcp-ann__imgWrap .fcp-ann__img--contain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-height: none; border-radius: 0; }
.fcp-gv__banner { position: relative; overflow: hidden; flex: none; }
.fcp-gv__bannerBg { position: absolute; inset: -8%; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(18px) saturate(1.05); opacity: 0.55; }
.fcp-gv__bannerImg { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.fcp-ann__body--rich { white-space: normal; }
.fcp-ann__body--rich p { margin: 0 0 12px; }
.fcp-ann__body--rich p:last-child { margin-bottom: 0; }
.fcp-ann__body--rich h1, .fcp-ann__body--rich h2, .fcp-ann__body--rich h3 { margin: 18px 0 8px; line-height: 1.25; color: var(--fcp-text); }
.fcp-ann__body--rich h1 { font-size: var(--fs-page, 22px); }
.fcp-ann__body--rich h2 { font-size: var(--fs-section, 16px); }
.fcp-ann__body--rich h3 { font-size: var(--fs-title, 14px); }
.fcp-ann__body--rich ul, .fcp-ann__body--rich ol { margin: 0 0 12px; padding-left: 22px; }
.fcp-ann__body--rich li { margin: 4px 0; }
.fcp-ann__body--rich blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid var(--fcp-brand); color: var(--fcp-text-muted); }
.fcp-ann__body--rich a { color: var(--fcp-brand); text-decoration: underline; }
.fcp-ann__body--rich img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 12px auto; }

/* ===== v137: allowlisted embeds inside rich news bodies ===== */
.fcp-ann__body--rich iframe.fcp-embed { display: block; width: 100%; border: 0; border-radius: 10px; margin: 12px 0; background: var(--fcp-card-2); }
.fcp-ann__body--rich iframe.fcp-embed--video { aspect-ratio: 16 / 9; height: auto; }
.fcp-ann__body--rich iframe.fcp-embed--audio:not([height]) { height: 152px; }

/* ===== v141: rich plan descriptions (formatting + links) ===== */
.fcp-hub .fcp-plan__desc--rich p { margin: 0 0 8px; }
.fcp-hub .fcp-plan__desc--rich p:last-child { margin-bottom: 0; }
.fcp-hub .fcp-plan__desc--rich ul, .fcp-hub .fcp-plan__desc--rich ol { margin: 6px 0; padding-left: 18px; }
.fcp-hub .fcp-plan__desc--rich li { margin: 3px 0; }
.fcp-hub .fcp-plan__desc--rich a { color: var(--fcp-brand); text-decoration: underline; }
.fcp-hub .fcp-plan__desc--rich strong { color: var(--fcp-text); }

/* ===== Platform faces (v143) — self-hosted, ABSOLUTE URLs (the hub renders
   on tenant subdomains + merchant sites; /fonts/* serves with CORS *). ===== */
@font-face { font-family: "Gotham"; src: url("https://fanclubpro.com/fonts/Gotham/Gotham-Book.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("https://fanclubpro.com/fonts/Gotham/Gotham-Medium.woff2?v=1") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("https://fanclubpro.com/fonts/Gotham/Gotham-Bold.woff2?v=1") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("https://fanclubpro.com/fonts/Gotham/Gotham-Black.woff2?v=1") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://fanclubpro.com/fonts/Poppins/Poppins-Regular.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://fanclubpro.com/fonts/Poppins/Poppins-Medium.woff2?v=1") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://fanclubpro.com/fonts/Poppins/Poppins-SemiBold.woff2?v=1") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://fanclubpro.com/fonts/Poppins/Poppins-Bold.woff2?v=1") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://fanclubpro.com/fonts/Poppins/Poppins-ExtraBold.woff2?v=1") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ===== Member profile popover (v144) ===== */
.fcp-memcard {
  position: fixed;
  z-index: 2147483000;
  width: 260px;
  background: var(--fcp-card, #fff);
  color: var(--fcp-text, #16181d);
  border: 1px solid var(--fcp-border, #e4e7ec);
  border-radius: 8px;
  box-shadow: var(--fcp-shadow-lg, 0 2px 6px rgba(22, 24, 29, 0.06), 0 18px 44px rgba(22, 24, 29, 0.12));
  padding: 14px;
  font-family: var(--fcp-font);
}
.fcp-memcard__loading { font-size: var(--fs-label, 12px); color: var(--fcp-text-muted, #6b7280); }
.fcp-memcard__head { display: flex; align-items: center; gap: 10px; }
.fcp-memcard__avatar {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fcp-card-2) center/cover no-repeat;
  font-size: var(--fs-section, 16px); font-weight: 700; color: var(--fcp-text-muted, #6b7280);
  overflow: hidden;
}
.fcp-memcard__avatar.has-photo > span { visibility: hidden; }
.fcp-memcard__id { min-width: 0; }
.fcp-memcard__name { font-size: var(--fs-title, 14px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcp-memcard__user { font-size: var(--fs-label, 12px); color: var(--fcp-text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcp-memcard__mod {
  display: inline-block; margin-top: 8px;
  font-size: var(--fs-label, 12px); font-weight: 700; letter-spacing: 0.06em;
  color: var(--fcp-accent, #0777be);
  border: 1px solid currentColor; border-radius: 5px; padding: 2px 6px;
}
.fcp-memcard__bio { margin: 10px 0 0; font-size: var(--fs-body, 13px); line-height: 1.5; color: var(--fcp-text, #16181d); }
.fcp-memcard__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: var(--fs-label, 12px); color: var(--fcp-text-muted, #6b7280); }
.fcp-memcard__trigger { cursor: pointer; }
.fcp-memcard__trigger:hover { text-decoration: underline; }
span.fcp-memcard__trigger.fcp-comm-post__avatar:hover,
span.fcp-memcard__trigger.fcp-comm-comment__avatar:hover { text-decoration: none; filter: brightness(0.95); }

/* ===================== Membership tab, condensed (2026-10-03) ===============
   Header + status, then two INDEPENDENT column stacks (2026-10-04): left is
   Plan and billing, Shipping address, Email preferences; right is Personal
   information, Account actions. Then one legal footer line. Four type sizes
   only: 12 labels, 13 notes, 14 values and rows, 16 titles and stat values.
   8px corners, never pills; hover raises contrast, nothing moves. Colours are
   theme tokens so dark clubs get the same layout. */
.fcp-acct--v2{gap:14px}
.fcp-acct2__head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:2px 0 0}
.fcp-acct2__headText{min-width:0;flex:1 1 260px}
.fcp-acct2__title{font-size: var(--fs-section, 16px);font-weight:700;margin:0 0 2px;line-height:1.3}
/* Status STACKED and right aligned (owner, 2026-10-04): the chip on top,
   "Member since" under it, both flush to the right edge the card columns
   below share (the head has no side padding for that reason). margin-left:
   auto keeps the block at the right edge when a phone wraps it onto its own
   line under the title, instead of leaving it at the left or centred. The
   chip never wraps, so a longer status word (Payment issue, Not a member)
   grows the chip leftward and the date under it stays on the same right edge. */
.fcp-acct2__status{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;text-align:right}
.fcp-acct2__status>.fcp-chip{white-space:nowrap}
.fcp-acct2__since{font-size: var(--fs-label, 12px);font-weight:600;color:var(--fcp-text-muted)}
.fcp-acct2__notices{display:flex;flex-direction:column;gap:10px}
.fcp-acct2__notices .fcp-acct-note{margin:0}
.fcp-acct2__notices .fcp-acct-actions{margin-top:0}

/* Plan and billing: ONE card, two facts, one action. The facts keep the stat
   anatomy (tinted round icon, label, value, line) but drop the card chrome
   (.fcp-stat--bare), since the card around them has it. Side by side when the
   card is wide enough, stacked when it is not: a CONTAINER query on the card
   BODY (named, set by a class the JS adds, per the merch-modal lesson below),
   because the left column is half the hub on a desktop and the whole hub on a
   phone, and the window width says nothing about which. */
.fcp-acct2__billingBody{container-type:inline-size;container-name:fcpbilling}
.fcp-acct2__billing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.fcp-acct2__billingActions{margin-top:12px}
@container fcpbilling (max-width:439px){
  .fcp-acct2__billing{grid-template-columns:minmax(0,1fr)}
}
.fcp-stat{display:flex;align-items:flex-start;gap:12px;min-width:0;background:var(--fcp-card);border:1px solid var(--fcp-border);border-radius:var(--fcp-radius);box-shadow:var(--fcp-shadow-sm);padding:16px}
.fcp-stat--bare{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
/* The ONE place a framed icon is allowed: the owner's mockup shows tinted
   round badges on the stat cards. Icons everywhere else on the hub stay bare. */
.fcp-stat__ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--fcp-brand) 14%,var(--fcp-card));color:var(--fcp-accent-on-light)}
.fcp-hub[data-theme="dark"] .fcp-stat__ic{color:var(--fcp-brand-2)}
.fcp-stat__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:2px}
.fcp-stat__label{font-size: var(--fs-label, 12px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--fcp-text-muted)}
.fcp-stat__value{font-size: var(--fs-section, 16px);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.fcp-stat__sub{font-size: var(--fs-body, 13px);line-height:1.4;color:var(--fcp-text-muted)}
.fcp-stat__text>.fcp-btn{margin-top:8px}

/* Two INDEPENDENT column stacks. A row-locked 2-up grid left dead space under
   the shorter card of each pair (Shipping address under Personal information);
   each column stacking on its own lets the right side rise to meet the
   content above it. */
.fcp-acct2__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.fcp-acct2__col{display:flex;flex-direction:column;gap:12px;min-width:0}
.fcp-acct2__card{min-width:0}
.fcp-acct2__cardHead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
.fcp-acct2__card .fcp-acct-card__body{margin-top:10px}
.fcp-acct-fact__value.is-empty{font-weight:600;color:var(--fcp-text-faint)}
.fcp-acct2__address{display:flex;flex-direction:column;gap:2px;font-style:normal;font-size: var(--fs-title, 14px);line-height:1.45}
.fcp-acct2__empty{margin:0;font-size: var(--fs-label, 12px)}
.fcp-acct2__hint{margin-top:10px}
.fcp-przform__note{margin-top:-4px}
/* The read-only email in the Personal information modal must not look editable. */
.fcp-przform__input[readonly]{background:var(--fcp-card-2);color:var(--fcp-text-muted);cursor:default}

/* Account actions list */
.fcp-actlist{display:flex;flex-direction:column}
.fcp-actrow{appearance:none;display:flex;align-items:center;gap:12px;width:100%;padding:11px 4px;background:none;border:0;border-bottom:1px solid var(--fcp-border);border-radius:0;color:var(--fcp-text);font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background 140ms ease}
.fcp-actlist>.fcp-actrow:last-child{border-bottom:0}
.fcp-actrow:hover{background:var(--fcp-card-2)}
.fcp-actrow:focus-visible{outline:2px solid var(--fcp-brand-2);outline-offset:-2px;border-radius:var(--fcp-radius-sm)}
.fcp-actrow.is-busy{opacity:.6;pointer-events:none}
.fcp-actrow.is-disabled{cursor:default;color:var(--fcp-text-muted)}
.fcp-actrow.is-disabled:hover{background:none}
.fcp-actrow__ic{flex:0 0 auto;display:inline-flex;color:var(--fcp-accent-on-light)}
.fcp-hub[data-theme="dark"] .fcp-actrow__ic{color:var(--fcp-brand-2)}
.fcp-actrow--danger .fcp-actrow__ic{color:#d13438}
.fcp-actrow__text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:1px}
.fcp-actrow__title{font-size: var(--fs-title, 14px);font-weight:700;line-height:1.3}
.fcp-actrow__desc{font-size: var(--fs-body, 13px);line-height:1.4;color:var(--fcp-text-muted)}
.fcp-actrow__chev{flex:0 0 auto;display:inline-flex;color:var(--fcp-text-faint)}
/* The hub's own `.fcp-hub a` colour reset is (0,1,1); these rows are text ink. */
.fcp-hub a.fcp-actrow{color:var(--fcp-text)}

/* Legal footer line (member view); the logged-out view keeps the card. */
.fcp-acct2__legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:2px 2px 0;font-size: var(--fs-label, 12px)}
.fcp-acct2__legalLabel{font-weight:600;color:var(--fcp-text-muted)}
.fcp-hub a.fcp-acct2__legalLink{color:var(--fcp-text-muted);text-decoration:underline;text-underline-offset:2px}
.fcp-hub a.fcp-acct2__legalLink:hover{color:var(--fcp-text)}
.fcp-about--inAccount.is-compact{gap:12px}

@media (max-width:720px){
  /* One column. The column wrappers dissolve so every card is a grid item of
     .fcp-acct2__cols and takes the order below: billing first, then the
     identity card, then the rest. */
  .fcp-acct2__cols{grid-template-columns:minmax(0,1fr)}
  .fcp-acct2__col{display:contents}
  .fcp-acct2__card--billing{order:1}
  .fcp-acct2__card--personal{order:2}
  .fcp-acct2__card--shipping{order:3}
  .fcp-acct2__card--email{order:4}
  .fcp-acct2__card--actions{order:5}
  .fcp-acct2__head{padding:0}
}


/* ===================== Giveaways: compact rows (2026-08-28) =================
   Owner decision: "just a menu size bar". Entry controls live in the detail
   modal; the row is thumb + title/status + meta + one action. 8px corners,
   never pills (except the existing status pill vocabulary). */

.fcp-gvrow {
  align-items: center;
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius);
  box-shadow: var(--fcp-shadow-sm);
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.fcp-gvrow:hover {
  border-color: var(--fcp-border-strong);
  box-shadow: var(--fcp-shadow);
}

.fcp-gvrow__thumb {
  appearance: none;
  align-items: center;
  background: var(--fcp-surface, rgba(0, 0, 0, 0.04));
  background-position: center;
  background-size: cover;
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  color: var(--fcp-text-faint);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 52px;
  justify-content: center;
  padding: 0;
  width: 52px;
}

.fcp-gvrow__thumb svg {
  height: 24px;
  width: 24px;
}

.fcp-gvrow__main {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.fcp-gvrow__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-gvrow__title {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-gvrow__won,
.fcp-gvrow__entered {
  border-radius: 8px;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  text-transform: uppercase;
}

.fcp-gvrow__won {
  background: color-mix(in srgb, var(--fcp-brand) 14%, transparent);
  color: var(--fcp-brand);
}

.fcp-gvrow__entered {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.fcp-gvrow__meta {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-gvrow__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.fcp-gvrow__go {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  color: var(--fcp-brand);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition: border-color 140ms ease, transform 140ms ease;
  width: 34px;
}

.fcp-gvrow__go svg {
  height: 16px;
  width: 16px;
}

.fcp-gvrow__go:hover {
  border-color: var(--fcp-brand);
  transform: translateX(2px);
}

@media (max-width: 520px) {
  .fcp-gvrow {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fcp-gvrow__actions {
    margin-left: 64px;
  }
}

/* ===================== "Your giveaways" sidebar tracker ===================== */

.fcp-gvside__head {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 10px 0 6px;
  text-transform: uppercase;
}

.fcp-gvside__row {
  align-items: center;
  border-top: 1px solid var(--fcp-border);
  display: flex;
  gap: 8px;
  padding: 8px 0;
}

.fcp-gvside__row:first-of-type {
  border-top: 0;
}

.fcp-gvside__txt {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.fcp-gvside__name {
  font-size: var(--fs-body, 13px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-gvside__state {
  color: var(--fcp-text-faint);
  font-size: var(--fs-label, 12px);
}

.fcp-gvside__act {
  flex: 0 0 auto;
}

.fcp-gvside__past summary {
  color: var(--fcp-text-faint);
  cursor: pointer;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  margin-top: 10px;
}

/* ===================== Winner claim area + claim modal ====================== */

.fcp-prz {
  background: color-mix(in srgb, var(--fcp-brand) 6%, var(--fcp-card));
  border: 1px solid color-mix(in srgb, var(--fcp-brand) 30%, var(--fcp-border));
  border-radius: var(--fcp-radius);
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
}

.fcp-prz__title {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  margin: 0;
}

.fcp-prz__state {
  color: var(--fcp-text-muted);
  font-size: var(--fs-label, 12px);
  margin: 0;
}

.fcp-prz__note {
  color: var(--fcp-text-faint);
  font-size: var(--fs-body, 13px);
  margin: 6px 0 0;
}

.fcp-prz__addr {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border);
  border-radius: 8px;
  font-size: var(--fs-body, 13px);
  line-height: 1.5;
  padding: 10px 12px;
}

.fcp-przform {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.fcp-przform__field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.fcp-przform__label {
  font-size: var(--fs-label, 12px);
  font-weight: 700;
}

.fcp-przform__input {
  background: var(--fcp-card);
  border: 1px solid var(--fcp-border-strong);
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs-title, 14px);
  min-width: 0;
  padding: 9px 11px;
  width: 100%;
}

.fcp-przform__input:focus {
  border-color: var(--fcp-brand);
  outline: none;
}

.fcp-przform__row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Two fields, half each. The base row above is sized for the THREE-field
   city/state/zip row, so a two-field row inherited its first two tracks and
   left the third one empty: first and last name sat in the left two thirds
   with dead space beside them while every other field in the form ran full
   width. */
.fcp-przform__row--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 520px) {
  .fcp-przform__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fcp-przform__save {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-body, 13px);
  gap: 8px;
}

.fcp-przform__submit {
  justify-self: start;
}


/* "You won" banner at the top of Home. Uses the club accent rather than a
   generic success green: it is club news, and the accent already has a computed
   readable ink. It persists until the prize is claimed, not until dismissed. */
.fcp-home__win {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fcp-brand);
  color: var(--fcp-on-brand);
}
.fcp-home__winTxt { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.fcp-home__winTitle { font-size: var(--fs-section, 16px); font-weight: 700; }
.fcp-home__winSub { font-size: var(--fs-body, 13px); opacity: 0.85; }
/* The CTA sits ON the accent, so it inverts rather than disappearing into it. */
.fcp-home__win .fcp-btn--primary {
  background: var(--fcp-on-brand);
  color: var(--fcp-brand);
  border-color: transparent;
}

/* --- Members-only merch: image + title open the product ------------------- */
/* v198 moved the destination: image and title now open the product INFO MODAL
   (the store is one click further in, from the modal's own link), while the
   card's button still goes straight to the store. Locked teasers never get
   either — the server omits the gallery, the variants and the product URL, so
   the markup stays inert. */
.fcp-merch__media.is-clickable { cursor: pointer; }
.fcp-merch__media.is-clickable:focus-visible {
  outline: 2px solid var(--fcp-accent);
  outline-offset: 2px;
}
.fcp-merch__titleLink {
  color: inherit;
  text-decoration: none;
}
.fcp-merch__titleLink:hover { text-decoration: underline; }
.fcp-merch__titleLink:focus-visible {
  outline: 2px solid var(--fcp-accent);
  outline-offset: 2px;
}

/* ===================== Hero-region ink ==================================
   Controls that sit INSIDE the hero (the owner's "Publish membership plans"
   and "Open your dashboard", the suspended-membership button, the fans'
   "Memberships open soon" chip) were inheriting --fcp-text, the PAGE ink. Over
   a hero photo — where .fcp-hero__shade lays a near-black scrim — that is dark
   on dark, and the owner's own CTA was unreadable.

   --fcp-hero-ink is set in applyThemeVars from the club's surface, and
   overridden to white on the header whenever a hero photo is present. The
   element+class selectors below are what it takes to beat
   `.fcp-hub a.fcp-btn--ghost`, which sets the page ink at (0,2,1). */
.fcp-hub .fcp-profile__actions a.fcp-btn--ghost,
.fcp-hub .fcp-profile__actions button.fcp-btn--ghost {
  color: var(--fcp-hero-ink, var(--fcp-text));
  border-color: color-mix(in srgb, var(--fcp-hero-ink, var(--fcp-text)) 45%, transparent);
}
.fcp-hub .fcp-profile__actions a.fcp-btn--ghost:hover,
.fcp-hub .fcp-profile__actions button.fcp-btn--ghost:hover {
  border-color: color-mix(in srgb, var(--fcp-hero-ink, var(--fcp-text)) 75%, transparent);
  background: color-mix(in srgb, var(--fcp-hero-ink, var(--fcp-text)) 12%, transparent);
}
.fcp-hub .fcp-profile__side .fcp-soonchip {
  color: color-mix(in srgb, var(--fcp-hero-ink, var(--fcp-text)) 82%, transparent);
  border-color: color-mix(in srgb, var(--fcp-hero-ink, var(--fcp-text)) 40%, transparent);
  background: color-mix(in srgb, var(--fcp-hero-ink, var(--fcp-text)) 10%, transparent);
}

/* ===================== Line breaking, everywhere ========================
   A single word wrapping onto a line of its own ("...where to reach / you.")
   reads as a mistake. `balance` evens out a heading's lines; `pretty` is the
   orphan fix — it pulls a word back so the last line is never alone. Both are
   pure line-breaking hints: no box, no size, no layout changes, and an older
   browser simply wraps as it did before.

   Scoped to .fcp-hub so an embedding merchant's page is never re-broken by us. */
.fcp-hub h1, .fcp-hub h2, .fcp-hub h3, .fcp-hub h4, .fcp-hub h5, .fcp-hub h6 {
  text-wrap: balance;
}
.fcp-hub p, .fcp-hub li, .fcp-hub dd, .fcp-hub figcaption, .fcp-hub label {
  text-wrap: pretty;
}

/* ============ v198: members-only merch — hover swap + product modal ========
   Two additions to the Perks tab's Shopify feed: the card shows the product's
   SECOND photo while the pointer is over it, and clicking the card opens an
   informational product modal (gallery, description, price, options) that
   ends in a link out to the store. No cart, no checkout: the store owns that.
   ========================================================================= */

/* -- Second image on hover ------------------------------------------------
   The alt image is stacked ON the first inside the frame and cross-fades,
   rather than one <img> swapping its src: a src swap blanks the element while
   the new file decodes. The frame already carries aspect-ratio 1 / 1 and both
   frame is a fixed 1/1 aspect-ratio box, so NOTHING here can shift the layout
   regardless of the image's own proportions. Guarded
   by (hover: hover) so a tap on a phone does not leave the second photo stuck
   on. Cards with one image never get the second <img> at all. */
.fcp-merch__media {
  position: relative;
}

.fcp-merch__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (hover: hover) {
  .fcp-merch__img--alt {
    transition: opacity 180ms ease;
  }
  .fcp-merch__media:hover .fcp-merch__img--alt,
  .fcp-merch__media:focus-visible .fcp-merch__img--alt {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcp-merch__img--alt { transition: none; }
}

/* -- Product info modal --------------------------------------------------- */



.fcp-merchModal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Fixed-ratio frame with a CONTAINED image: mixed-shape product photos never
   crop, and (the point) the frame's height does not change when a thumbnail
   swaps the hero, so nothing below it moves. Square on a phone, taller in the
   two-column layout above. `flex: none` keeps the column from squashing it
   inside the scrolling modal body. */
.fcp-merchModal__media {
  flex: none;
  aspect-ratio: 1 / 1;
  background: var(--fcp-card-2);
  border-radius: var(--fcp-radius);
  overflow: hidden;
}

.fcp-merchModal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fcp-merchModal__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcp-merchModal__thumb {
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 140ms ease, opacity 140ms ease;
}

.fcp-merchModal__thumb:hover { opacity: 0.82; }

.fcp-merchModal__thumb.is-active {
  border-color: var(--fcp-brand);
}

.fcp-merchModal__thumb:focus-visible {
  outline: 2px solid var(--fcp-brand);
  outline-offset: 2px;
}

.fcp-merchModal__thumbImg {
  display: block;
  width: 100%;
  height: 100%;
  /* Contain here too, and more so: a 60px square crop of a tall product is an
     unidentifiable stripe, which is useless as a gallery picker. */
  object-fit: contain;
}

.fcp-merchModal__title {
  margin: 0;
  font-size: var(--fs-section, 16px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fcp-text);
}

.fcp-merchModal__price {
  font-size: var(--fs-title, 14px);
  font-weight: 700;
  color: var(--fcp-text);
}

.fcp-merchModal__desc {
  color: var(--fcp-text-muted);
  font-size: var(--fs-title, 14px);
  line-height: 1.6;
}

.fcp-merchModal__optionsTitle {
  margin: 0;
  font-size: var(--fs-label, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fcp-text-faint);
}

.fcp-merchModal__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fcp-merchModal__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--fcp-card-2);
  border: 1px solid var(--fcp-border);
  border-radius: var(--fcp-radius-sm);
  font-size: var(--fs-body, 13px);
}

.fcp-merchModal__optionName {
  font-weight: 600;
  color: var(--fcp-text);
}

.fcp-merchModal__optionState {
  color: var(--fcp-text-muted);
  font-size: var(--fs-body, 13px);
  font-weight: 700;
  white-space: nowrap;
}

.fcp-merchModal__optionState.is-out {
  color: var(--fcp-text-faint);
}

.fcp-merchModal__go {
  align-self: flex-start;
}

@media (max-width: 560px) {
  .fcp-merchModal__go { align-self: stretch; }
}

/* NOT nested in a media query. These were accidentally inserted INSIDE the
   @media (max-width: 560px) block above, so the card only widened on screens
   UNDER 560px and never on a desktop, which is why max-width stayed 520px and
   container-type stayed `normal` no matter what else was fixed. */
/* MUST STAY AFTER the base .fcp-merchModal rules. A media query adds NO
   specificity, so when this block sat above `.fcp-merchModal { display: flex }`
   the later flex rule simply won and nothing applied.
   CONTAINER query, not a viewport one. The previous attempt keyed off
   `min-width: 760px` of the VIEWPORT, which is the wrong question: the modal
   card is capped at 900px and sits inside its own overlay, so whether two
   columns fit depends on how wide the CARD is, not how wide the window is. A
   tall or narrow window left the card plenty wide while the viewport query
   said no, and the modal stayed stacked.
   Above tablet the modal is laid out like a product page: media on the left,
   everything you read on the right. Narrower and the two columns simply stack,
   which is the single-column layout it already had. */
/* Set by the merch modal itself, NOT matched with :has(). The :has() version
   never applied, and because container-type lived in the same rule, the
   container vanished with it and the query below could never match. A class
   the JS adds has no such failure mode. */
.fcp-modal__card--merch {
  max-width: 900px;
  container-type: inline-size;
  container-name: fcpmerch;
}
@container fcpmerch (min-width: 600px) {
  .fcp-merchModal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .fcp-merchModal__title { font-size: var(--fs-page, 22px); }
  .fcp-merchModal__price { font-size: var(--fs-section, 16px); }
}
/* Fallback for a browser without container queries: the card is 900px max, so
   a viewport comfortably past that means the card is wide enough for two
   columns. Only applies where @container is unsupported, so it can never
   fight the query above. */
@supports not (container-type: inline-size) {
  @media (min-width: 1000px) {
    .fcp-merchModal {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 28px;
      align-items: start;
    }
    .fcp-merchModal__title { font-size: var(--fs-page, 22px); }
    .fcp-merchModal__price { font-size: var(--fs-section, 16px); }
  }
}
/* The columns themselves stack their own contents at every width. */
.fcp-merchModal__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}


/* -- SSO provider row in the sign-in modal --
   Mirrors .sso / .sso__btn in app/styles/fan/auth.css so the club page and
   fanclubpro.io's own sign-in page read as the same product. Logo-only tiles:
   the marks carry the recognition, and three labelled buttons would dominate a
   modal whose primary path is the email field above them. */
.fcp-sso {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fcp-sso__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0;
  border: 1px solid var(--fcp-border);
  /* 8px, never a pill, and no growth on hover (owner rule). */
  border-radius: 8px;
  background: var(--fcp-card);
  cursor: pointer;
  font: inherit;
  color: var(--fcp-text);
}

.fcp-sso__btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.fcp-sso__btn:hover {
  border-color: var(--fcp-border-strong, var(--fcp-border));
}

.fcp-sso__btn:active {
  transform: translateY(1px);
}

/* Apple's mark must be solid black or white, never tinted (Apple's own
   guidelines), so it takes the surface's text colour rather than the accent. */
.fcp-sso__btn[data-p="apple"] svg {
  color: var(--fcp-text);
}

/* ===== HOSTED/EMBED PARITY (v229) =====
   These rules used to live in app/styles/landing.css, which loads AFTER this
   sheet on the hosted surface, so they won the cascade "without a hub bump".
   But hub-shell.server.ts links landing.css ONLY when hosted, so none of them
   reached the cross-site iframe embed: blank link/photo toolbar buttons, no
   iOS composer focus-zoom guard (an iOS fan got permanently zoomed), a caret
   that drifted because the input and its preview were a step apart, and a
   share control that still showed its text label at desktop width.
   They live here now so BOTH surfaces get them. Position is load-bearing:
   keep this block LAST so it still outranks the base + responsive rules it
   is overriding. ===== */
/* Club profile (.fcp-hub): make the share control icon-ONLY — no box, border,
   or label, at EVERY width. Overrides both the bare-share base rule and the
   responsive block above (which hides the label on narrow widths only). */
.fcp-hub .fcp-profile__share { background: none; border-color: transparent; box-shadow: none; padding: 8px; }
.fcp-hub .fcp-profile__share:hover { background: rgba(255, 255, 255, 0.12); filter: none; }
.fcp-hub .fcp-profile__share span { display: none; }

/* Play button: optically center the triangle in the circle (owner-tuned values). */
.fcp-hub .fcp-mplayer__btn--play:not(.is-playing):not(.is-locked) svg { margin-left: 8px; transform: translateX(-4px); }

/* Community reply composer (.fcp-comm-*).
   BUG: the link + photo toolbar buttons rendered empty — the base
   `.fcp-comm-toolbar button { background: transparent }` (specificity 0-1-1,
   shorthand) reset background-image to none, beating `.fcp-comm-toolIcon--*`
   (0-1-0). Fix: draw all three icons on a ::before with a CSS mask tinted by
   currentColor, so they (a) can't be reset by the base bg, (b) adapt to the
   org's light/dark theme, and (c) match the B/I/U ink + hover. The bullet
   button gets a real bullet-list glyph the same way; it carries no text
   content at all now (aria-label is its accessible name), so the sheet needs
   no zero-size trick to hide a decorative "•" and the hub keeps exactly one
   off-scale type literal (the music repeat-one dot). */
.fcp-hub .fcp-comm-toolbar button[data-command="insertUnorderedList"],
.fcp-hub .fcp-comm-toolbar button.fcp-comm-toolIcon--link,
.fcp-hub .fcp-comm-toolbar button.fcp-comm-toolIcon--photo { position: relative; background-image: none; }
.fcp-hub .fcp-comm-toolbar button[data-command="insertUnorderedList"]::before,
.fcp-hub .fcp-comm-toolbar button.fcp-comm-toolIcon--link::before,
.fcp-hub .fcp-comm-toolbar button.fcp-comm-toolIcon--photo::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 15px 15px; mask-size: 15px 15px;
}
.fcp-hub .fcp-comm-toolbar button[data-command="insertUnorderedList"]::before { -webkit-mask-image: url("./community-bullet.svg"); mask-image: url("./community-bullet.svg"); }
.fcp-hub .fcp-comm-toolbar button.fcp-comm-toolIcon--link::before { -webkit-mask-image: url("./community-add-link.svg"); mask-image: url("./community-add-link.svg"); }
.fcp-hub .fcp-comm-toolbar button.fcp-comm-toolIcon--photo::before { -webkit-mask-image: url("./community-photo.svg"); mask-image: url("./community-photo.svg"); }

/* iOS focus-zoom: any input under 16px triggers an auto-zoom iOS never restores
   (stays zoomed after reload/nav). The textarea + its transparent-text preview
   must keep identical metrics (donor mechanic), so bump both together.
   --fs-section is the step that IS 16px, and hub-type-scale.test.mjs pins it at
   16px, so this guard cannot be broken by a later token edit without that test
   failing. The literal fallback is load-bearing: the embed links only this
   sheet, so a bare var() would resolve to nothing and iOS would zoom again. */
.fcp-hub .fcp-comm-composer__input,
.fcp-hub .fcp-comm-composer__preview { font-size: var(--fs-section, 16px); }