/* =====================================================================
   WhoNeedsAGig.com — Design System
   Dark charcoal · deep navy · electric blue accents · white content cards
   One stylesheet for the whole site. Edit colors in :root to re-theme.
   ===================================================================== */

:root {
  /* ===== Design System 2.0 — deep navy · bright blue · gold ===== */
  /* Brand palette */
  --charcoal:      #0B1220;   /* deepest page background */
  --charcoal-2:    #0F1B2E;   /* raised surface on dark */
  --navy:          #0F1B2E;   /* deep navy — primary background */
  --navy-2:        #16263F;   /* navy surface / cards on dark */
  --blue:          #2563EB;   /* bright blue — primary action / interactive */
  --blue-bright:   #4F86F7;
  --blue-deep:     #1D4ED8;   /* link blue on light surfaces */

  /* Gold — premium / Founding Member / opportunity (use sparingly) */
  --gold:          #F4B000;
  --gold-soft:     #FBD24B;
  --gold-deep:     #B9820A;

  /* Theater accent — scoped to the cast / residency / show-manager side only.
     Off the core navy/blue/gold palette on purpose: it flags "the theater side." */
  --theater:       #7C5CFF;
  --theater-soft:  #EFEAFF;
  --theater-deep:  #5B3FD6;

  /* Neutrals */
  --ink:           #0F172A;   /* text on white cards */
  --ink-soft:      #4A5568;
  --line:          #E4E9F0;   /* card borders */
  --line-dark:     rgba(255,255,255,.09);
  --white:         #ffffff;
  --paper:         #F5F7FA;   /* light section bg */

  /* Text on dark */
  --on-dark:       #E5E7EB;
  --on-dark-soft:  #94A3B8;

  /* Status / feedback — semantic color language */
  --green:         #22C55E;   /* confirmed · paid · available · good to go */
  --amber:         #F59E0B;   /* hold · awaiting confirmation · attention */
  --red:           #EF4444;   /* conflict · cancellation · overdue */
  --success:       #22C55E;
  --warning:       #F59E0B;
  --danger:        #EF4444;
  --info:          #2563EB;

  /* Shape */
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     20px;
  --radius-pill:   999px;

  /* Elevation */
  --shadow-sm:     0 2px 6px rgba(9,15,30,.10);
  --shadow-md:     0 6px 16px rgba(9,15,30,.14);
  --shadow-lg:     0 12px 30px rgba(9,15,30,.20);
  --shadow-xl:     0 20px 50px rgba(9,15,30,.26);
  --shadow:        var(--shadow-md);

  /* Gradients */
  --gradient:      linear-gradient(140deg, #0F1B2E 0%, #0B1220 60%, #16263F 100%);
  --gradient-blue: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --gradient-gold: linear-gradient(135deg, #F4B000 0%, #B9820A 100%);

  /* Type */
  --font-sans:     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display:  "Bricolage Grotesque", "Poppins", -apple-system, "Segoe UI", sans-serif;

  --maxw:          1180px;
  --ease:          cubic-bezier(.4,.14,.3,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-deep); margin-bottom: .8rem;
}
.eyebrow.on-dark { color: var(--blue-bright); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-weight: 700; font-size: .95rem; padding: .8rem 1.4rem; border-radius: 999px;
  border: 1px solid transparent; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--gradient-blue); color: #fff; box-shadow: 0 8px 22px rgba(46,155,255,.35); }
.btn-ghost   { background: rgba(255,255,255,.06); color: var(--on-dark); border-color: rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-light   { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--blue-deep); border-color: var(--blue); }
.btn-sm { padding: .5rem .9rem; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Top navigation ---------- */
/* The nav lives inside the [data-nav] mount; make the WRAPPER the sticky element so it
   sticks to the whole page (a sticky child can only stick within its own short parent). */
[data-nav] { position: sticky; top: 0; z-index: 50; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,16,21,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.nav-inner { display: flex; align-items: center; gap: 1.4rem; height: 66px; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--on-dark); font-size: 1.06rem; letter-spacing: -.02em; white-space: nowrap; }
.brand .logo { flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--gradient-blue);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .95rem;
  box-shadow: 0 4px 14px rgba(46,155,255,.45);
}
.brand .accent { color: var(--blue-bright); }
.nav-links { display: flex; align-items: center; gap: .5rem; margin-left: .6rem; }
.nav-links a {
  color: var(--on-dark-soft); font-weight: 600; font-size: .92rem; padding: .5rem .7rem;
  border-radius: 8px; transition: color .15s, background .15s; white-space: nowrap;
}
.nav-links a:hover { color: var(--on-dark); background: rgba(255,255,255,.06); text-decoration: none; }
.nav-links a.active { color: #fff; background: rgba(46,155,255,.16); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

/* Header search — routes to the global results page (search.html). */
.nav-search { display: flex; align-items: center; margin-left: auto; }
.nav-search input { height: 34px; width: 168px; border: 1px solid rgba(255,255,255,.18); border-right: none; border-radius: 999px 0 0 999px; padding: 0 .85rem; font: inherit; font-size: .86rem; background: rgba(255,255,255,.08); color: var(--on-dark, #fff); outline: none; }
.nav-search input::placeholder { color: var(--on-dark-soft, #9fb0c6); }
.nav-search input:focus { border-color: var(--blue-bright, #2e9bff); background: rgba(255,255,255,.12); }
.nav-search button { height: 34px; border: 1px solid rgba(255,255,255,.18); border-left: none; border-radius: 0 999px 999px 0; background: rgba(255,255,255,.08); color: var(--on-dark, #fff); cursor: pointer; padding: 0 .7rem; font-size: .95rem; }
.nav-search button:hover { background: rgba(255,255,255,.16); }
/* Account dropdown section labels (Your tools / Account). */
.usermenu-pop .um-label { padding: .55rem .9rem .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #8a97a8); border-top: 1px solid var(--line, #eef2f6); margin-top: .2rem; }
.usermenu-pop .um-label:first-of-type { border-top: none; margin-top: 0; }
/* "← Dashboard" cue on dashboard tool pages (calendar, library, finances, etc.). */
.toolback { display: inline-block; max-width: 1120px; width: 100%; margin: 1rem auto 0; padding: 0 1.25rem; box-sizing: border-box; font-size: .85rem; font-weight: 700; color: var(--blue, #2563EB); text-decoration: none; }
.toolback:hover { text-decoration: underline; }
/* Dashboard "Your tools" quick-access row — light chips so it never competes with the launcher doors. */
.tools-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.tool-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 1px solid var(--line, #e6eaf0); border-radius: 999px; background: var(--surface, #fff); color: var(--navy, #0f2233); font-weight: 700; font-size: .88rem; text-decoration: none; }
.tool-chip:hover { border-color: var(--blue, #2563EB); background: var(--paper, #f6f8fb); text-decoration: none; }

/* user menu */
.usermenu { position: relative; }
.usermenu-btn {
  display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: var(--on-dark); font: inherit; font-weight: 700; font-size: .88rem; padding: .3rem .7rem .3rem .35rem; border-radius: 999px; cursor: pointer;
}
.usermenu-btn:hover { background: rgba(255,255,255,.12); }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60;
  /* Long account menus (esp. on phones) must scroll so the bottom items — like Sign out — stay reachable. */
  max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.usermenu-pop.open { display: block; }
.usermenu-pop .um-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.usermenu-pop a { display: block; color: var(--ink); padding: .55rem .7rem; border-radius: 8px; font-weight: 600; font-size: .9rem; }
.usermenu-pop a:hover { background: var(--paper); text-decoration: none; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: .4rem;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--on-dark); margin: 4px 0; border-radius: 2px; }

/* Mobile dropdown menu is hidden by default everywhere; only the hamburger reveals it on small screens. */
.nav-mobile { display: none; }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links, .nav-cta, .nav-search { display: none; }
  .nav-inner.open + .nav-mobile { display: block; }
  .nav-mobile {
    display: none; background: var(--charcoal-2); border-bottom: 1px solid var(--line-dark); padding: .6rem 0 1rem;
    /* The nav is sticky, so a long menu would be trapped in the viewport — let it scroll on its own.
       Fill the viewport below the bar so the page never shows through underneath the open menu. */
    min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px);
    max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* Freeze the page behind the open menu (no scroll, no peek-through). */
  body.nav-open { overflow: hidden; }
  .nav-mobile a { display: block; color: var(--on-dark-soft); padding: .7rem 22px; font-weight: 600; }
  .nav-mobile a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
  .nav-mobile .btn { margin: .6rem 22px 0; }
}

/* ---------- Section pager (prev/next at the bottom of browse pages) ---------- */
.section-pager {
  display: flex; gap: .8rem; margin: 2.4rem 0 .5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line, #e7ebf0);
}
.section-pager .sp-link {
  flex: 1; display: flex; align-items: center; gap: .7rem; text-decoration: none;
  border: 1px solid var(--line, #e7ebf0); border-radius: 12px; padding: .7rem 1rem;
  color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.section-pager .sp-link:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(0,0,0,.06); text-decoration: none; }
.section-pager .sp-next { justify-content: flex-end; }
.section-pager .sp-arrow { font-size: 1.3rem; font-weight: 800; color: var(--blue-deep, #1666c0); }
.section-pager .sp-txt { display: flex; flex-direction: column; line-height: 1.2; }
.section-pager .sp-right { text-align: right; }
.section-pager .sp-cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667); font-weight: 700; }
.section-pager .sp-lab { font-weight: 800; font-size: .98rem; }
@media (max-width: 480px) { .section-pager .sp-lab { font-size: .9rem; } }

/* ---------- Dark hero / sections ---------- */
.section { padding: 72px 0; }
.section.tight { padding: 48px 0; }
.section.dark { background: var(--gradient); color: var(--on-dark); }
.section.dark h1, .section.dark h2, .section.dark h3 { color: #fff; }
.section.navy { background: var(--navy); color: var(--on-dark); }
.section.paper { background: var(--paper); }
.section.white { background: #fff; }
.section-head { max-width: 680px; margin: 0 auto 2.6rem; }
.section.dark .muted, .section.navy .muted { color: var(--on-dark-soft); }

.hero {
  color: var(--on-dark); position: relative; overflow: hidden; padding: 86px 0 96px;
  background:
    linear-gradient(105deg, rgba(8,15,26,.94) 0%, rgba(8,15,26,.88) 42%, rgba(8,15,26,.55) 74%, rgba(8,15,26,.7) 100%),
    url("../img/hero-desktop.jpg") center right / cover no-repeat,
    var(--gradient);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 78% -8%, rgba(46,155,255,.22), transparent 60%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(8,15,26,.92) 0%, rgba(8,15,26,.7) 30%, rgba(8,15,26,.8) 100%),
      url("../img/hero-mobile.jpg") center top / cover no-repeat,
      var(--gradient);
  }
}
.hero .wrap { position: relative; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero .lede { font-size: 1.22rem; color: var(--on-dark-soft); max-width: 52ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }

/* Phone mockup for the homepage workspace section */
.phone {
  max-width: 300px; margin: 0 auto;
  background: linear-gradient(160deg, #1c2942, #111c30);
  border-radius: 40px; padding: 12px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 70px rgba(46,155,255,.18);
}
.phone-screen { background: #fff; border-radius: 28px; overflow: hidden; }

/* Directory page banner — a slim cinematic strip above the page heading */
.page-banner {
  position: relative; height: 190px; border-radius: 16px; overflow: hidden;
  margin: 0 0 1.4rem; background-size: cover; background-position: center 22%;
}
.page-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,15,26,.72), rgba(8,15,26,.28) 60%, rgba(8,15,26,.5));
}
.page-banner .pb-title {
  position: absolute; left: 20px; bottom: 16px; z-index: 1;
  color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
@media (max-width: 700px) { .page-banner { height: 140px; } .page-banner .pb-title { font-size: 1.2rem; } }

.kpis { display: flex; gap: 2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.kpi .num { font-size: 1.7rem; font-weight: 800; color: #fff; }
.kpi .lbl { font-size: .82rem; color: var(--on-dark-soft); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(46,155,255,.12); color: var(--blue-deep); font-size: 1.3rem; margin-bottom: 1rem;
}
.feature-card h3 { margin-bottom: .35rem; }
.feature-card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700;
  padding: .25rem .6rem; border-radius: 999px; background: rgba(37,99,235,.12); color: var(--blue-deep);
}
.badge.green { background: rgba(34,197,94,.15);  color: #15803d; }
.badge.amber { background: rgba(245,158,11,.16); color: #92610a; }
.badge.red   { background: rgba(239,68,68,.14);  color: #b91c1c; }
.badge.gold  { background: rgba(244,176,0,.18);  color: #8a6200; }
.badge.gray  { background: #eef1f5; color: var(--ink-soft); }
.badge.solid { background: var(--gradient-blue); color: #fff; }

/* ===== Status language — one vocabulary across the whole platform =====
   blue = interactive/open · green = confirmed/paid · amber = hold ·
   red = conflict · gold = founding/premium. Dot + label, read at a glance. */
.status {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .02em; padding: .28rem .62rem .28rem .5rem; border-radius: 999px; line-height: 1;
  background: #eef1f5; color: var(--ink-soft); white-space: nowrap;
}
.status .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.is-confirmed { background: rgba(34,197,94,.14);  color: #15803d; }
.status.is-hold      { background: rgba(245,158,11,.16); color: #92610a; }
.status.is-conflict  { background: rgba(239,68,68,.14);  color: #b91c1c; }
.status.is-info,
.status.is-open      { background: rgba(37,99,235,.12);  color: var(--blue-deep); }
.status.is-open .dot { background: transparent; border: 1.5px solid currentColor; }
.status.is-founding  { background: rgba(244,176,0,.18);  color: #8a6200; }
.status.is-neutral   { background: #eef1f5; color: var(--ink-soft); }

/* ===== Signature Gig Card — the visual nucleus of the platform ===== */
.gigcard {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 0; overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.gigcard.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gigcard .gc-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.gigcard .gc-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.15; margin: 0;
}
.gigcard .gc-meta { color: var(--ink-soft); font-size: .82rem; margin-top: .15rem; }
.gigcard .gc-body { padding: 13px 18px; }
.gigcard .gc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--paper); flex-wrap: wrap;
}
.gc-chair { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink); padding: .26rem 0; }
.gc-chair .cdot { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; background: var(--ink-soft); }
.gc-chair.filled .cdot { background: var(--green); }
.gc-chair.open { color: var(--ink-soft); }
.gc-chair.open .cdot { background: transparent; border: 1.6px solid var(--blue); }
.gc-next { font-size: .82rem; color: var(--ink-soft); }
.gc-next strong { color: var(--ink); }

.pill {
  display: inline-block; font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  background: #eef1f5; border-radius: 999px; padding: .3rem .7rem; margin: 0 .3rem .4rem 0;
}
.pill.on { background: rgba(46,155,255,.14); color: var(--blue-deep); }
.pill-click { cursor: pointer; }
.pill-click:hover { background: rgba(46,155,255,.16); color: var(--blue-deep); }

/* genre browse chips */
.chip-g {
  display: inline-block; cursor: pointer; user-select: none; font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .32rem .7rem; margin: 0 .35rem .4rem 0; transition: all .12s;
}
.chip-g:hover { border-color: var(--blue); color: var(--blue-deep); }
.chip-g.on { background: var(--gradient-blue); color: #fff; border-color: transparent; }

/* ---------- How-it-works audience toggle ---------- */
.how-toggle { display: inline-flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.how-toggle button {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink-soft);
  padding: .55rem 1.2rem; border-radius: 999px; cursor: pointer; transition: all .15s;
}
.how-toggle button.on { background: var(--gradient-blue); color: #fff; box-shadow: 0 6px 16px rgba(46,155,255,.32); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 64px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--gradient-blue); color: #fff; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(46,155,255,.35);
}

/* ---------- App shell (interior screens) ---------- */
/* Single top-nav site-wide; the old left sidebar was removed to avoid two menus. */
.app { background: var(--paper); min-height: calc(100vh - 66px); }
.side { display: none; }   /* deprecated — kept hidden so older markup is harmless */
.main { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 30px 22px 60px; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page-head h1 { font-size: 1.7rem; margin: 0; }
.page-head .sub { color: var(--ink-soft); margin: .2rem 0 0; }
@media (max-width: 860px) {
  .main { padding: 22px 18px 50px; }
}

/* ---------- Search / filters ---------- */
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.input, .select {
  font: inherit; font-size: .92rem; padding: .62rem .85rem; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); min-width: 0;
}
.input:focus, .select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* Textareas had NO width rule anywhere in this stylesheet, so every one that didn't
   carry an inline width fell back to the browser default of roughly 20 columns — a
   cramped little slot no matter how wide its container was. That hit bios, gig
   descriptions, band notes, rider fields and every notes box on the site.
   One rule fixes all of them. The handful with an explicit inline width still win,
   since inline styles beat the stylesheet. */
textarea.input {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 5.5rem; line-height: 1.45;
  resize: vertical;   /* vertical only — horizontal dragging breaks the card layout */
}
.search-box { flex: 1 1 240px; display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 .85rem; }
.search-box input { border: 0; outline: 0; padding: .62rem 0; flex: 1; font: inherit; background: transparent; }

/* ---------- Musician cards ---------- */
.mcard { display: flex; flex-direction: column; }
.mcard .top { display: flex; gap: 14px; align-items: center; }
.avatar {
  width: 60px; height: 60px; border-radius: 14px; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.25rem; background: var(--gradient-blue);
}
.avatar.lg { width: 92px; height: 92px; font-size: 1.9rem; border-radius: 20px; }
.mcard .name { font-weight: 800; font-size: 1.05rem; }
.mcard .role { color: var(--blue-deep); font-weight: 600; font-size: .9rem; }
.mcard .loc { color: var(--ink-soft); font-size: .85rem; }
.stars { color: var(--amber); font-size: .9rem; letter-spacing: 1px; }
.rate { font-weight: 800; color: var(--ink); }
.mcard .tags { margin-top: .8rem; }
.divline { height: 1px; background: var(--line); margin: 1rem 0; }

/* ---------- Tabs (workspace) ---------- */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; overflow-x: auto; }
.tab {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink-soft);
  padding: .8rem 1rem; border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--blue-deep); border-bottom-color: var(--blue); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Lists / rows ---------- */
.row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 10px;
}
.row .grow { flex: 1; min-width: 0; }
.row .ttl { font-weight: 700; }
.row .meta { color: var(--ink-soft); font-size: .85rem; }
/* On phones, let a row wrap: the title/label takes the full first line and any controls
   (buttons, selects) drop onto the next line instead of squeezing the text to one word per line. */
@media (max-width: 560px) {
  .row { flex-wrap: wrap; align-items: flex-start; }
  .row .grow { flex-basis: 100%; }
}
.filetype {
  width: 42px; height: 42px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; color: #fff; letter-spacing: .03em;
}
.ft-pdf { background: #e0556a; } .ft-mp3 { background: #6c5ce7; } .ft-vid { background: #0984e3; }
.ft-doc { background: #00b894; } .ft-img { background: #fdaa3c; } .ft-zip { background: #636e72; }

/* ---------- Info grid (logistics) ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* Fields in a grid must fill their cell, or a text box keeps its default intrinsic
   width, overflows the column, and runs into the next field. */
.info-grid .input, .info-grid .select { width: 100%; }
.info {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.info .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 700; }
.info .v { font-weight: 700; margin-top: .25rem; }

/* ---------- Chat ---------- */
.chat { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.chat-feed { padding: 18px; display: flex; flex-direction: column; gap: 14px; max-height: 420px; overflow-y: auto; }
.msg { display: flex; gap: 10px; max-width: 78%; }
.msg .bub { background: var(--paper); border: 1px solid var(--line); padding: .6rem .85rem; border-radius: 12px; }
.msg .who { font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .15rem; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .bub { background: var(--gradient-blue); color: #fff; border-color: transparent; }
.msg.me .who { text-align: right; }
.chat-input { display: flex; gap: .5rem; border-top: 1px solid var(--line); padding: 12px; }
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; font: inherit; }

/* ---------- Timeline ---------- */
.timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 22px; }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item::before { content: ""; position: absolute; left: -29px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.tl-item .time { font-weight: 800; color: var(--blue-deep); }

/* ---------- Stat cards ---------- */
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.stat .num { font-size: 1.7rem; font-weight: 800; }
.stat .lbl { color: var(--ink-soft); font-size: .85rem; }
.stat .ico { margin-bottom: .6rem; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); position: relative; }
.plan.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-lg); }
.plan .tag { position: absolute; top: -13px; left: 30px; }
.plan .price { font-size: 2.4rem; font-weight: 800; margin: .4rem 0; }
.plan .price small { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0; }
.plan li { padding: .42rem 0 .42rem 28px; position: relative; color: var(--ink); font-size: .95rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* ---------- Footer ---------- */
.footer { background: var(--charcoal); color: var(--on-dark-soft); padding: 56px 0 28px; }
.foot-cta { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-bottom: 1.6rem; margin-bottom: 1.8rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-cta-tag { font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.4rem; color: #fff; letter-spacing: -.01em; }
.foot-cta-sub { color: var(--on-dark-soft); font-size: .92rem; margin-top: .2rem; }
.foot-cta-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.foot-cta-btns .btn { white-space: nowrap; padding: .55rem 1.25rem; width: auto; min-width: 0; flex: 0 0 auto; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: .8rem; }
.footer a { color: var(--on-dark-soft); display: block; padding: .25rem 0; font-size: .9rem; }
.footer a:hover { color: #fff; text-decoration: none; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
/* Footer columns: normal on desktop; tap-to-open accordions on phones (kept expanded on desktop via JS). */
/* Collapsible sections: a small hint so users know the row opens on tap. Footer columns opt out. */
details:not(.foot-col) > summary { cursor: pointer; }
details:not(.foot-col) > summary::after {
  content: "tap to expand"; font-size: .68rem; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--muted, #8a97a8); margin-left: .5rem; white-space: nowrap; opacity: .85; font-family: var(--font-sans, inherit);
}
details[open]:not(.foot-col) > summary::after { content: "tap to collapse"; }
@media print { details > summary::after { content: "" !important; } }

.foot-col > summary { list-style: none; cursor: pointer; }
.foot-col > summary::-webkit-details-marker { display: none; }
.foot-col > summary h4 { display: inline-block; margin-bottom: .8rem; }
.foot-col .foot-tog { display: none; }
@media (min-width: 641px) { .foot-col > summary { pointer-events: none; } }
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr; gap: 4px; }
  .foot-col > summary { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-top: 1px solid var(--line-dark); }
  .foot-col > summary h4 { margin: 0; }
  .foot-col .foot-tog { display: inline-block; transition: transform .2s; opacity: .6; }
  .foot-col[open] .foot-tog { transform: rotate(180deg); }
  .foot-col .foot-links { padding: .1rem 0 .55rem; }
}
.foot-bottom { border-top: 1px solid var(--line-dark); margin-top: 36px; padding-top: 20px; font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.foot-bottom a { display: inline; padding: 0; }
.foot-bottom a:hover { color: #fff; }

/* ---------- Misc ---------- */
.disclaimer { font-size: .82rem; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; }
.notice { background: rgba(46,155,255,.08); border: 1px solid rgba(46,155,255,.25); border-radius: 12px; padding: 14px 16px; color: var(--navy); font-size: .9rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.list-plain li:last-child { border-bottom: 0; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { width: 34px; height: 34px; font-size: .8rem; border-radius: 9px; border: 2px solid #fff; margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Nav dropdown (Resources → Guides) ---------- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-btn {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--on-dark-soft); font-weight: 600; font-size: .92rem; padding: .5rem .7rem;
  border-radius: 8px; display: inline-flex; align-items: center; gap: .25rem;
  transition: color .15s, background .15s; white-space: nowrap;
}
.nav-dd-btn:hover { color: var(--on-dark); background: rgba(255,255,255,.06); }
.nav-dd-btn.active { color: #fff; background: rgba(46,155,255,.16); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20,22,27,.18); padding: .4rem; display: none; z-index: 80;
}
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-menu a { display: block; color: var(--ink); padding: .55rem .7rem; border-radius: 8px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.nav-dd-menu a:hover { background: var(--paper); text-decoration: none; }
.nav-mobile .nav-msub a { padding-left: 44px; font-size: .9rem; opacity: .92; }
/* Collapsible submenu groups in the phone menu (tap the label to open/close). */
.nav-mobile .nav-msub-btn { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--on-dark-soft); padding: .7rem 22px; font-weight: 600; font-size: 1rem; cursor: pointer; }
.nav-mobile .nav-msub-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-mobile .nav-msub-btn.active { color: #fff; }
.nav-mobile .nav-msub-caret { float: right; transition: transform .2s; }
.nav-mobile .nav-mgroup.open .nav-msub-caret { transform: rotate(180deg); }
.nav-mobile .nav-msub { display: none; }
.nav-mobile .nav-mgroup.open .nav-msub { display: block; }
/* Who's signed in — header at the top of the phone menu (the desktop chip is hidden here). */
.nav-mobile .nav-mhead { display: flex; align-items: center; gap: .6rem; padding: .85rem 22px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .3rem; }
.nav-mobile .nav-mhead strong { color: #fff; }

/* ---------- Guide articles (public, SEO) ---------- */
.article-body { max-width: 760px; margin: 0 auto; font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.article-body > p:first-child { font-size: 1.12rem; color: var(--navy); }
.article-body h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.01em; margin: 2.2rem 0 .6rem; color: var(--navy); }
.article-body h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 1.5rem 0 .3rem; color: var(--navy); }
.article-body p { margin: 0 0 1rem; }
.article-body ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.article-body li { margin: .3rem 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .95rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.article-body th { background: var(--paper); font-weight: 700; color: var(--navy); }
.article-body .disclaimer { margin: 1.6rem 0 0; }
.article-cta { max-width: 760px; margin: 1.8rem auto 0; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.20); border-radius: 14px; padding: 18px 20px; }
.article-cta h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--navy); }
.article-cta p { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .92rem; }
.article-related { max-width: 760px; margin: 2rem auto 0; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.article-related h4 { margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.related-list { list-style: none; padding: 0; margin: .2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .1rem .9rem; }
.related-list li { padding: .3rem 0; font-size: .93rem; }
.related-list li a::before { content: "→ "; color: var(--blue); font-weight: 700; }
.crumbs { max-width: 760px; margin: 0 auto 1rem; font-size: .84rem; color: var(--ink-soft); }
.crumbs a { color: var(--blue-deep); }
.crumbs.on-dark { max-width: none; margin: 0 0 .35rem; color: var(--on-dark-soft); }
.crumbs.on-dark a { color: #fff; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.guide-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,22,27,.12); text-decoration: none; }
.guide-card .gc-cat { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
.guide-card h3 { margin: .35rem 0 .3rem; font-size: 1.08rem; color: var(--navy); }
.guide-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- "How this page works" helper strip ---------- */
.pagehelp { margin: 0 0 1.5rem; }
.pagehelp-panel {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(46,155,255,.07);
  border: 1px solid rgba(46,155,255,.22);
  border-radius: 14px; padding: 14px 16px;
}
.pagehelp-panel .ph-ico { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.pagehelp-panel .ph-body { flex: 1; min-width: 0; }
.pagehelp-panel h4 { margin: 0 0 .2rem; font-size: 1rem; color: var(--navy); }
.pagehelp-panel p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.pagehelp-panel ul { margin: .45rem 0 0; padding-left: 1.15rem; }
.pagehelp-panel li { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; margin: .15rem 0; }
.pagehelp-panel li strong { color: var(--navy); }
.ph-dismiss {
  background: none; border: 0; color: var(--blue-deep); font-weight: 700;
  font-size: .82rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; padding: .1rem .2rem;
}
.ph-dismiss:hover { text-decoration: underline; }
.pagehelp-reopen {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; color: var(--blue-deep); font-weight: 700;
  font-size: .84rem; cursor: pointer; padding: 0;
}
.pagehelp-reopen:hover { text-decoration: underline; }
.pagehelp.collapsed .pagehelp-panel { display: none; }
.pagehelp:not(.collapsed) .pagehelp-reopen { display: none; }
@media (max-width: 560px) { .pagehelp-panel { flex-wrap: wrap; } .ph-dismiss { order: 3; margin-left: auto; } }

/* ---------- Accessibility & responsive polish ---------- */
/* Visible keyboard focus everywhere (was missing on links, buttons, tabs, chips). */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
.tab:focus-visible,
.chip-g:focus-visible,
.pill-click:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Roomier touch targets on compact buttons (was ~34px; 40px min for thumbs). */
.btn-sm { min-height: 40px; }
/* Wrapper to keep wide tables from overflowing the page on phones. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Keyboard-actionable chips/day-cells read as buttons — kill default button chrome. */
button.chip-g, button.pill-click { font: inherit; }
/* Directory info grid should stack, not crush, on small phones. */
@media (max-width: 480px) { .info-grid { grid-template-columns: 1fr !important; } }