/* ============================================================
   Find My Pit — Shared components
   One definition per UI pattern (buttons, form fields, dropdowns,
   chips, status text) so a change here applies to every page that
   uses it. Depends on styles/tokens.css. Load this on every rebuilt
   page, after tokens.css.

   Sodium gold is reserved for keyboard focus and deliberate
   highlight ONLY (per Figma Foundations: "capped at ~5% of a screen").
   No component below uses it as a standing/decorative border —
   if you need to draw attention to something, reach for signal red
   or petrol first.
   ============================================================ */

/* ---- Site nav ----
   Same brand/links/login markup on every page. Change it here once. */
.fmp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-80);
  height: 72px;
  background: rgba(23, 27, 29, 0.5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.fmp-nav-brand {
  font: 400 22px/26px var(--font-display);
  color: var(--color-text-primary);
  text-decoration: none;
}
.fmp-nav-links {
  display: flex;
  gap: var(--space-32);
}
.fmp-nav-links a {
  font: var(--text-label-meta);
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.fmp-nav-links a.active { color: var(--color-text-primary); }
.fmp-nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--size-touch-min);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  font: var(--text-data-base);
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.fmp-nav-login:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }

@media (max-width: 640px) {
  .fmp-nav { padding: 0 var(--space-16); height: 64px; }
  .fmp-nav-links { display: none; }
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--size-touch-comfort); padding: 0 var(--space-24);
  background: var(--fmp-signal-500); border: 2px solid var(--color-text-primary);
  border-radius: var(--radius-control);
  color: var(--color-text-primary); font: var(--text-label-button); letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
}
.btn-primary:hover { background: var(--fmp-signal-700); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--effect-focus-sodium); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--size-touch-comfort); padding: 0 var(--space-20);
  background: transparent; border: 2px solid var(--color-border-default);
  border-radius: var(--radius-control);
  color: var(--color-text-primary); font: var(--text-label-button); letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
}
.btn-outline:hover { border-color: var(--color-border-strong); }
.btn-outline:focus-visible { outline: none; box-shadow: var(--effect-focus-sodium); }

/* ---- Form fields ---- */
.form-group { display: flex; flex-direction: column; gap: var(--space-8); }
.form-group label { font: 600 14px/20px var(--font-body); color: var(--color-text-primary); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group select {
  height: 52px; padding: 0 var(--space-16);
  background: var(--fmp-graphite-800); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control); color: var(--color-text-primary); font: var(--text-body-base);
}
.form-group input:focus-visible, .form-group select:focus-visible {
  outline: none; box-shadow: var(--effect-focus-sodium); border-color: var(--color-border-focus);
}
.form-hint { font: 500 11px/16px var(--font-data); color: var(--color-text-muted); }
.error-message { font: 500 12px/16px var(--font-body); color: var(--fmp-signal-300); display: none; }
.error-message.show { display: block; }
.form-group.error input, .form-group.error select { border-color: var(--fmp-signal-500); }

.checkbox-label { display: flex; align-items: center; gap: var(--space-8); font: 400 14px/20px var(--font-body); color: var(--color-text-primary); cursor: pointer; }
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--fmp-signal-500); }

/* ---- Autocomplete / typeahead dropdown ----
   Standing border is neutral; sodium only appears on the input
   itself, and only via :focus-visible above. */
.autocomplete-wrapper { position: relative; }
.autocomplete-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--fmp-graphite-800); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control); max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.autocomplete-item { padding: 10px 16px; font: var(--text-body-base); color: var(--color-text-primary); cursor: pointer; }
.autocomplete-item:hover { background: var(--fmp-graphite-700); }
.autocomplete-item.new-band { color: var(--color-text-muted); font-style: italic; cursor: default; }
.autocomplete-group-label {
  padding: 10px 16px 4px; font: 600 10px/1 var(--font-data); letter-spacing: 0.06em;
  color: var(--color-text-accent); text-transform: uppercase;
}

/* ---- Chips (genre picker, etc.) ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip-row:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 14px; background: var(--fmp-petrol-700); border-radius: var(--radius-pill);
  font: var(--text-data-base); color: var(--color-text-primary);
}
.chip-remove { background: none; border: none; color: var(--color-text-primary); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.7; padding: 0; }
.chip-remove:hover { opacity: 1; }

/* ---- Status / inline feedback text ----
   Neutral (paper) for in-progress, petrol for success, signal for
   error -- never gold. Gold is a focus/highlight colour, not a
   status colour. */
.status-text { font: var(--text-body-small); }
.status-text.loading { color: var(--fmp-paper-100); }
.status-text.success { color: var(--fmp-paper-100); }
.status-text.success::before { content: "\2713  "; color: var(--fmp-petrol-300); }
.status-text.failed { color: var(--fmp-signal-300); }

/* ---- Cards ---- */
.panel {
  background: var(--fmp-graphite-700);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
}

/* ---- Modal ---- */
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(8,10,10,0.8); align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-content {
  position: relative; width: 100%; max-width: 590px; margin: var(--space-16);
  background: var(--fmp-graphite-700); border: 1px solid var(--color-text-primary); border-radius: var(--radius-card);
  padding: 36px 40px; display: flex; flex-direction: column; gap: var(--space-16);
}
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: var(--color-text-muted); font-size: 24px; cursor: pointer; line-height: 1; }

/* ---- Bottom sheet (mobile action/filter panel) ----
   Figma's own mobile frames only ever show this pattern below 640px
   (e.g. the Homepage's Discovery/Mobile filter trigger) -- above that
   width, .sheet-panel is inert and the page using it should keep its
   trigger button + backdrop hidden and render the content inline
   instead. Toggle open/closed with the .open class on both
   .sheet-backdrop and .sheet-panel together. */
.sheet-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 105;
  background: rgba(8, 10, 10, 0.6);
}
.sheet-backdrop.open { display: block; }

@media (max-width: 640px) {
  .sheet-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    max-height: 80vh; overflow-y: auto;
    background: var(--fmp-graphite-800);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .sheet-panel.open { transform: translateY(0); }
}

.sheet-done { display: none; }
@media (max-width: 640px) {
  .sheet-done { display: inline-flex; width: 100%; margin-top: var(--space-8); }
}

/* ---- Gig Card (Figma component set 52:18) ----
   Poster-wall look: light card on dark canvas. Shared by Homepage's
   listings and Band Profile's Upcoming Gigs -- same Figma component
   reused on a second page, so it lives here now. */
.gig-card {
  display: flex;
  position: relative;
  background: var(--color-bg-inverse);
  border-radius: var(--radius-control);
  overflow: hidden;
  margin-bottom: var(--space-16);
}
.gig-card.signal::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  background: var(--fmp-signal-500);
}

.gig-poster {
  flex: 0 0 40%;
  aspect-ratio: 16 / 9;
  background: var(--fmp-ink-1000);
}
.gig-poster img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gig-poster.placeholder {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--fmp-graphite-800) 0, var(--fmp-graphite-800) 2px,
      var(--fmp-ink-1000) 2px, var(--fmp-ink-1000) 16px
    );
}

.gig-card-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.gig-meta { font: var(--text-data-large); color: var(--color-text-inverse); opacity: 0.72; }
.gig-eyebrow { font: var(--text-data-small); color: var(--fmp-signal-300); }
.event-title {
  font: var(--text-display-card);
  color: var(--color-text-inverse);
  line-height: 1.05;
}
.headliner {
  font: var(--text-body-strong);
  color: var(--fmp-graphite-700);
}
.supporting-bands { font: var(--text-body-small); color: var(--fmp-graphite-700); }
.supporting-bands .label { font-weight: 600; }
.venue { font: var(--text-body-strong); color: var(--fmp-black-1000); }

.genres-section { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-12); }
.genre-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--fmp-petrol-700);
  border-radius: var(--radius-pill);
  font: var(--text-data-large);
  color: var(--color-text-primary);
  opacity: 0.9;
}
.event-tag {
  font: var(--text-body-base);
  color: var(--fmp-black-1000);
}

.gig-action {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8);
  background: var(--fmp-graphite-900);
  border-radius: var(--radius-control);
}
.ticket-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--size-touch-min);
  padding: 0 var(--space-20);
  background: var(--fmp-signal-500);
  border-radius: var(--radius-control);
  font: var(--text-label-button);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  flex: 1 1 auto;
}
.ticket-button:hover { background: var(--fmp-signal-700); }

.gig-details { display: none; } /* legacy detail grid superseded by genre-row + venue above */

@media (max-width: 640px) {
  .gig-card { flex-direction: column; }
  .gig-poster { flex: none; width: 100%; aspect-ratio: 16 / 9; }
}

/* ---- Empty state (Figma "10 — Utility, Legal & About" / Empty States) ---- */
.fmp-empty-state {
  padding: var(--space-40);
  background: var(--fmp-graphite-700);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--color-text-secondary);
  font: var(--text-body-base);
}
.fmp-empty-state a { color: var(--fmp-sodium-500); }