/* ══════════════════════════════════════════════════════════════════════
   LION CREATORS — surface styles.

   Every class is prefixed `lc-`, the same convention Entertainment uses
   with `ent-` and the homepage with `ilh-`, so nothing here can be
   silently overridden by a same-named class in styles.css or
   il-design.css — both of which load BEFORE this file.

   The palette is READ FROM entertainment.css rather than restated. The
   two pages render the same profiles through the same renderer, and a
   creator card that is one shade of gold on Lion Creators and another
   on Entertainment is how a single system starts looking like two.
   ══════════════════════════════════════════════════════════════════════ */

.lc-page {
  --lc-gold: var(--ent-gold, #d4af37);
  --lc-ink: var(--ent-ink, #f4f1e8);
  --lc-muted: var(--ent-muted, #b8b3a6);
  --lc-line: var(--ent-line, rgba(230, 206, 116, .18));
  --lc-bg: var(--ent-bg, #0b0c10);
  --lc-surface: var(--ent-surface, #15171d);
  --lc-raised: var(--ent-raised, #20232b);
  background: var(--lc-bg);
  color: var(--lc-ink);
  color-scheme: dark;
}

.lc-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

.lc-body {
  background: var(--lc-bg);
  /* Room for the fixed bottom navigation, plus the phone's own home
     indicator. Without the inset the last card sits under the bar on
     every iPhone. */
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
  min-height: 55vh;
}

/* ══ HERO ═══════════════════════════════════════════════════════ */
.lc-hero {
  padding: calc(var(--nav-h, 70px) + 48px) 0 40px;
  background:
    radial-gradient(1000px 420px at 50% -8%, rgba(201, 162, 39, .16), transparent 62%),
    var(--lc-bg);
  border-bottom: 1px solid var(--lc-line);
  text-align: center;
}
.lc-brand {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.1; margin: 0 0 10px; letter-spacing: .01em;
}
.lc-brand span { color: var(--lc-gold); }
.lc-tag {
  color: var(--lc-muted); margin: 0 auto 22px;
  max-width: 44ch; font-size: clamp(.95rem, 2.4vw, 1.1rem); line-height: 1.6;
}
.lc-note {
  margin: 20px auto 0; max-width: 52ch; font-size: .85rem;
  color: var(--lc-muted); line-height: 1.65;
}
.lc-note strong { color: var(--lc-ink); }

/* ══ BUTTONS ════════════════════════════════════════════════════
   44px minimum on everything tappable. Below that a thumb misses,
   and the whole page reads as unfinished on a phone. */
.lc-go, .lc-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 20px; border-radius: 50px;
  font-weight: 700; font-size: .88rem; text-decoration: none;
  cursor: pointer; white-space: normal; max-width: 100%;
  border: 1px solid transparent; font-family: inherit;
}
.lc-go { background: var(--lc-gold); color: #14140f; }
.lc-go-ghost { background: transparent; color: var(--lc-ink); border-color: var(--lc-gold); }
.lc-chip { background: var(--lc-raised); color: var(--lc-ink); border-color: var(--lc-line); }
.lc-chip:hover, .lc-go:hover { filter: brightness(1.08); }
.lc-chip.active { background: var(--lc-gold); color: #14140f; border-color: var(--lc-gold); }
.lc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.lc-actions-tight { justify-content: flex-start; margin: 4px 0 18px; }
.lc-page :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--lc-gold); outline-offset: 3px;
}

/* ══ SECTIONS ═══════════════════════════════════════════════════ */
.lc-sec { margin: 40px 0; }
.lc-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.lc-sec-t { font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.3rem, 4vw, 1.9rem); margin: 0; }
.lc-sec-t em { color: var(--lc-gold); font-style: normal; }
.lc-sec-s { color: var(--lc-muted); font-size: .86rem; margin: 6px 0 0; line-height: 1.6; }
.lc-link { color: var(--lc-gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ══ CATEGORY GRID ══════════════════════════════════════════════ */
.lc-catgrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.lc-cat {
  display: flex; align-items: center; gap: 12px; position: relative;
  padding: 16px; border-radius: 14px; text-decoration: none;
  background: var(--lc-surface); border: 1px solid var(--lc-line); color: var(--lc-ink);
}
.lc-cat:hover { background: #29281f; }
.lc-cat-i { font-size: 1.6rem; line-height: 1; flex: none; }
.lc-cat-b { display: grid; gap: 3px; min-width: 0; }
.lc-cat-l { font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
/* The count is EMPTY until it is known, and empty is a legitimate
   final state — a category whose count could not be fetched shows no
   number rather than a zero it cannot stand behind. min-height stops
   the card growing when the number arrives. */
.lc-cat-n { color: var(--lc-muted); font-size: .78rem; min-height: 1.1em; }
/* THE BADGE SITS IN THE FLOW, NOT OVER THE LABEL.
   Absolutely positioned top-right it covered the end of the longest
   names it appears on — "Bands & Groups" and "Dance Groups" are
   exactly the two cards that carry it, so the badge was hiding the
   word it was describing. In the flow it takes its own row and the
   label keeps its full width. */
.lc-gtag {
  justify-self: start; margin-top: 2px;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; background: #342d16; color: #e6ce74;
}
.lc-cat { align-items: flex-start; }
.lc-cat-i { margin-top: 2px; }

/* ══ REGIONS ════════════════════════════════════════════════════ */
.lc-regions { display: flex; flex-wrap: wrap; gap: 9px; }
.lc-region {
  padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: 50px; background: var(--lc-raised); border: 1px solid var(--lc-line);
  color: var(--lc-ink); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.lc-region:hover { background: #29281f; }
/* The region bar inside a category scrolls rather than wrapping to
   five rows and pushing every card below the fold. */
.lc-rbar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  margin-bottom: 14px; scrollbar-width: thin;
}
.lc-rbar .lc-chip { flex: none; }

/* ══ CARDS ══════════════════════════════════════════════════════ */
.lc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.lc-card {
  display: grid; gap: 0; border-radius: 16px; overflow: hidden;
  background: var(--lc-surface); border: 1px solid var(--lc-line);
  color: var(--lc-ink); text-decoration: none;
}
.lc-card:hover { border-color: var(--lc-gold); }
.lc-card-photo {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  font-size: 2.6rem; background: var(--lc-raised);
}
.lc-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.lc-card-b { padding: 13px 14px 15px; display: grid; gap: 4px; min-width: 0; }
.lc-card-type { font-size: .72rem; color: var(--lc-gold); font-weight: 700; letter-spacing: .02em; }
.lc-card-n { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.lc-card-m { font-size: .78rem; color: var(--lc-muted); }
.lc-badge {
  justify-self: start; font-size: .68rem; font-weight: 800;
  padding: 3px 9px; border-radius: 20px; background: #133324; color: #85e7a9;
}

/* ══ EXPLAINER ══════════════════════════════════════════════════ */
.lc-explain { border-top: 1px solid var(--lc-line); padding-top: 34px; }
.lc-three {
  display: grid; gap: 14px; margin: 18px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.lc-kind {
  padding: 20px; border-radius: 16px; display: grid; gap: 10px;
  align-content: start; background: var(--lc-surface); border: 1px solid var(--lc-line);
}
.lc-kind-on { border-color: var(--lc-gold); }
.lc-kind h3 { margin: 0; font-size: 1.02rem; }
.lc-kind p { margin: 0; color: var(--lc-muted); font-size: .85rem; line-height: 1.65; }
.lc-kind .lc-chip { justify-self: start; }
.lc-cta { text-align: center; }

/* ══ WIZARD ═════════════════════════════════════════════════════ */
.lc-wiz { max-width: 680px; margin: 30px auto; }
.lc-kicker {
  text-transform: uppercase; letter-spacing: .14em; font-size: .68rem;
  font-weight: 800; color: var(--lc-gold); margin: 0 0 8px;
}
.lc-wiz h1 { font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 0 0 10px; }
.lc-wiz h2 { font-size: clamp(1.1rem, 3.4vw, 1.4rem); margin: 0 0 6px; }
.lc-wiz-from, .lc-wiz-note {
  font-size: .83rem; line-height: 1.6; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 12px; background: var(--lc-raised); border: 1px solid var(--lc-line);
  color: var(--lc-muted);
}
.lc-wiz-note { border-color: var(--lc-gold); color: var(--lc-ink); }

/* The step rail. It scrolls sideways rather than wrapping, because
   seven steps stacked three-deep on a phone pushes the actual question
   off the screen. */
.lc-steps {
  display: flex; gap: 6px; overflow-x: auto; list-style: none;
  margin: 0 0 22px; padding: 0 0 8px; counter-reset: lcstep; scrollbar-width: thin;
}
.lc-steps li { flex: none; }
.lc-steps button {
  counter-increment: lcstep; background: var(--lc-raised); color: var(--lc-muted);
  border: 1px solid var(--lc-line); border-radius: 50px; padding: 8px 14px;
  min-height: 40px; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.lc-steps button::before { content: counter(lcstep) ' · '; opacity: .7; }
.lc-steps .is-on button { background: var(--lc-gold); color: #14140f; border-color: var(--lc-gold); }
.lc-steps .is-done button { color: var(--lc-ink); border-color: var(--lc-gold); }

.lc-wiz-body { display: grid; gap: 15px; }
.lc-wiz-body label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.lc-wiz-body :is(input, select, textarea) {
  padding: 12px; border-radius: 10px; width: 100%; font: inherit; font-weight: 400;
  background: var(--lc-raised); color: var(--lc-ink); border: 1px solid var(--lc-line);
}
.lc-wiz-body input:disabled { opacity: .6; }
.lc-hint { color: var(--lc-muted); font-weight: 400; font-size: .76rem; }
.lc-check {
  display: flex !important; align-items: flex-start; gap: 10px;
  font-weight: 500; line-height: 1.55;
}
.lc-check input { width: auto; flex: none; margin-top: 2px; min-height: 0; }
.lc-wiz-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.lc-wiz-status { color: var(--lc-gold); font-size: .85rem; margin-top: 12px; min-height: 1.2em; }

.lc-picks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.lc-pick {
  display: grid; gap: 7px; text-align: left; padding: 18px; cursor: pointer;
  border-radius: 16px; background: var(--lc-surface); border: 1px solid var(--lc-line);
  color: var(--lc-ink); font: inherit;
}
.lc-pick.active, .lc-pick:hover { border-color: var(--lc-gold); }
.lc-pick strong { font-size: 1rem; }
.lc-pick span { color: var(--lc-muted); font-size: .83rem; line-height: 1.6; }

.lc-pickh { margin: 16px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lc-muted); }
.lc-catpick { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-cchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 9px 14px; border-radius: 50px; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 600;
  background: var(--lc-raised); color: var(--lc-ink); border: 1px solid var(--lc-line);
}
.lc-cchip.active { background: var(--lc-gold); color: #14140f; border-color: var(--lc-gold); }

.lc-review {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px;
  margin: 0; padding: 18px; border-radius: 14px;
  background: var(--lc-surface); border: 1px solid var(--lc-line);
}
.lc-review dt { color: var(--lc-muted); font-size: .8rem; }
.lc-review dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }

.lc-done { text-align: center; max-width: 620px; margin: 50px auto; display: grid; gap: 14px; }
.lc-done h2 { font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.4rem, 4.6vw, 2rem); margin: 0; }
.lc-done p { color: var(--lc-muted); font-size: .88rem; line-height: 1.65; margin: 0; }
.lc-done strong { color: var(--lc-ink); }

/* ══ STATES ═════════════════════════════════════════════════════ */
.lc-empty {
  text-align: center; padding: 50px 22px; border-radius: 16px; margin: 30px 0;
  background: var(--lc-surface); border: 1px solid var(--lc-line); display: grid; gap: 14px;
}
.lc-empty h2 { margin: 0; font-size: 1.2rem; }
.lc-empty p { margin: 0; color: var(--lc-muted); font-size: .88rem; }
.lc-empty :is(.lc-go, .lc-chip) { justify-self: center; }
.lc-skel {
  height: 220px; border-radius: 16px; margin: 30px 0;
  background: linear-gradient(90deg, #171921 25%, #292c35 50%, #171921 75%);
  background-size: 200% 100%; animation: lc-shimmer 1.3s linear infinite;
}
@keyframes lc-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lc-skel { animation: none; } }

@media (max-width: 560px) {
  .lc-hero { padding: calc(var(--nav-h, 70px) + 30px) 0 30px; }
  .lc-actions { justify-content: stretch; }
  .lc-actions .lc-go { flex: 1 1 100%; }
  .lc-review { grid-template-columns: 1fr; gap: 4px 0; }
  .lc-review dd { margin-bottom: 10px; }
}