/* ============================================================
   directory.css — Self: Prime Practitioner Directory
   Prefix: .dir-*
   Tokens: var(--*) from css/tokens.css
   ============================================================ */

/* ── Page layout ──────────────────────────────────────────── */

.dir-page {
  min-height: 100vh;
  background: var(--color-neutral-950, #05091a);
  color: var(--text-primary, #f5f0ff);

  /* #948 / #1218 follow-up — foreground text island.
     This surface is authored dark-only: #1218 pinned the *backgrounds* to the
     raw navy palette (--color-neutral-950/900/850), which never flips with the
     theme. The foreground text tokens, however, still followed the document
     theme — in light mode --text-primary flips to #1a1610 (near-black) and
     --text-muted to #665d4f, rendering dark-on-navy (the filter <select> text
     measured ~1.1:1). Re-pin the flipping text tokens to their dark-surface
     values here — exactly as the header/footer literals above already do — so
     the whole subtree stays legible in both light- and dark-theme browsers.
     Dark theme is unchanged (these are its existing values); light theme now
     matches it. --text-cream does not flip and is left alone. */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text: #f0eff5;
  --text-strong: #f6efdc;
  --text-dim: #d8d5e8;
  --text-muted: #c0bbd4;

  /* Surface + border tokens used inside this subtree also flip to
     cream/parchment in light mode. #1218 pinned the main .dir-page / .dir-card
     surfaces to the raw navy palette but not these secondary ones — the
     .dir-waitlist card (--bg-secondary) and its email input (--bg) are the
     common empty state (shown while the directory has <5 listings). Without
     pinning them, the light text above would land on a flipped-cream card.
     Pin them to their dark-surface values so the whole island is
     theme-independent. */
  --bg: var(--color-neutral-950);
  --bg-secondary: var(--color-neutral-900);
  --border: #1d2f52;
  --border-default: var(--color-neutral-800);
  --border-subtle: #3a3a3f;

  /* Secondary-button surface tokens flip too — in light mode
     --interactive-secondary becomes parchment (#e6dfd5). The .dir-error
     "Retry" button (.btn-secondary) then paints its pinned-white label
     (--text-primary, above) on that near-white fill → ~1.2:1, invisible.
     Re-pin the trio to their dark-surface (navy) values so the button stays
     legible on this always-navy island in both themes. Dark theme unchanged. */
  --interactive-secondary:        var(--color-neutral-850);
  --interactive-secondary-hover:  var(--color-neutral-800);
  --interactive-secondary-active: var(--color-neutral-700);
}

/* Cosmic shell header — the .dir-* surface is authored dark-only (its hero, page,
   and cards all hardcode the deep cosmic field, e.g. #0e0b1a / #05091a). The
   theme tokens flip to a light "metallic" cream in light mode, which clashed
   harshly above that fixed dark field. Pin the header to the same cosmic literals
   so it always reads as one premium dark surface, with a subtle gold underline. */
.dir-header-wrap {
  background: linear-gradient(180deg, #090e20 0%, #05091a 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}

.dir-header {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dir-header .logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.dir-header .logo-link span {
  /* Fixed light-on-dark — the header is pinned to the cosmic surface, so the
     label must not follow the theme token (which flips dark in light mode). */
  color: #f5f0ff;
  font-size: 1rem;
  font-weight: 700;
}

.dir-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Keep the ghost nav link legible on the pinned dark header (its theme token
   would otherwise flip dark-on-dark in light mode). */
.dir-header__nav .btn-ghost {
  color: #e8e3f5;
}

/* Footer sits below the dark .dir-page main — pin it to the same cosmic literals
   as the header so it matches and never falls back to the light theme body band. */
.dir-page ~ footer {
  background: #05091a;
  border-top: 1px solid rgba(201, 168, 76, 0.16);
  color: #b3aec8;
  margin-top: 0; /* remove the light body sliver between main and footer */
}
.dir-page ~ footer a {
  color: #c8c0e0;
}
.dir-page ~ footer .prac-footer > a {
  color: #e6d6a0;
}

/* ── Hero ─────────────────────────────────────────────────── */

.dir-hero {
  text-align: center;
  padding: 4rem 1.5rem 2.5rem;
  background: linear-gradient(
    160deg,
    var(--color-neutral-900, #0b1226) 0%,
    var(--color-neutral-950, #05091a) 60%
  );
}

.dir-hero h1 {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text-cream, #f6efdc);
  margin: 0 0 0.75rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.dir-hero-sub {
  font-size: 1.05rem;
  color: var(--text-muted, #b3aec8);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Filters ──────────────────────────────────────────────── */

.dir-filters {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-neutral-850, #111d38);
  border-bottom: 1px solid var(--border-subtle, #2a2042);
  padding: 0.875rem 1.5rem;
}

.dir-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: flex-end;
  max-width: 960px;
  margin: 0 auto;
}

.dir-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 160px;
}

.dir-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #b3aec8);
}

.dir-filter-select {
  appearance: none;
  background: var(--color-neutral-900, #0b1226) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b3aec8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px;
  border: 1px solid var(--border-default, #3a3055);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary, #f5f0ff);
  font-size: 0.875rem;
  height: 36px;
  padding: 0 32px 0 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.dir-filter-select:focus {
  outline: 2px solid var(--color-accent, #c9a84c);
  outline-offset: 1px;
  border-color: var(--color-accent, #c9a84c);
}

.dir-filter-select:hover {
  border-color: var(--color-gold-700, #7a6030);
}

.dir-filter-btn {
  align-self: flex-end;
  height: 36px;
}

/* ── Status bar ───────────────────────────────────────────── */

.dir-status {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted, #b3aec8);
  padding: 0.5rem 1.5rem 0;
  min-height: 1.5rem;
}

/* ── Results section ──────────────────────────────────────── */

.dir-results-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}

/* ── Grid ─────────────────────────────────────────────────── */

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

/* ── Card ─────────────────────────────────────────────────── */

.dir-card {
  background: var(--color-neutral-850, #111d38);
  border: 1px solid var(--border-subtle, #2a2042);
  border-radius: var(--radius-md, 12px);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.dir-card:hover {
  border-color: var(--color-gold-700, #7a6030);
  box-shadow: 0 4px 24px rgba(201, 168, 76, 0.1);
  transform: translateY(-2px);
}

.dir-card:focus-within {
  border-color: var(--color-accent, #c9a84c);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}

/* Card header: photo + name/tags */
.dir-card__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.dir-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-subtle, #2a2042);
}

.dir-card__photo--placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-neutral-900, #0b1226);
  border: 2px solid var(--border-subtle, #2a2042);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-accent, #c9a84c);
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
}

.dir-card__meta {
  flex: 1;
  min-width: 0;
}

.dir-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-cream, #f6efdc);
  margin: 0 0 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dir-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Bio */
.dir-card__bio {
  font-size: 0.875rem;
  color: var(--text-secondary, #c8c0e0);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges row */
.dir-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Card footer: CTA */
.dir-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle, #2a2042);
}

.dir-card__cta {
  width: 100%;
  justify-content: center;
}

/* ── Badges ───────────────────────────────────────────────── */

.dir-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--color-neutral-900, #0b1226);
  color: var(--color-gold-200, #fae6af);
  border: 1px solid var(--color-gold-700, #7a6030);
  white-space: nowrap;
}

.dir-badge--cert {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border-color: rgba(217, 119, 6, 0.35);
}

/* WS3a: admin-verified badge (directory_status='approved' only). */
.dir-badge--verified {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.35);
}

/* WS3c: declared-modality label. */
.dir-badge--modality {
  background: rgba(168, 85, 247, 0.15);
  color: #c4b5fd;
  border-color: rgba(168, 85, 247, 0.3);
}

.dir-badge--format {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
}

.dir-badge--more {
  background: var(--color-neutral-950, #05091a);
  color: var(--text-muted, #b3aec8);
  border-color: var(--border-subtle, #2a2042);
}

/* Track 3.3: match badge */
.dir-badge--match {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
  font-size: 0.68rem;
}

.dir-card__match {
  margin-bottom: 0.5rem;
}

/* ── Skeleton cards ───────────────────────────────────────── */

@keyframes dir-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.dir-card--skeleton {
  background: var(--color-neutral-850, #111d38);
  border: 1px solid var(--border-subtle, #2a2042);
  border-radius: var(--radius-md, 12px);
  height: 220px;
  background-image: linear-gradient(
    90deg,
    var(--color-neutral-850, #111d38) 0%,
    rgba(255,255,255,0.04) 50%,
    var(--color-neutral-850, #111d38) 100%
  );
  background-size: 200% 100%;
  animation: dir-shimmer 1.5s ease-in-out infinite;
}

/* ── Empty / Error states ─────────────────────────────────── */

.dir-empty,
.dir-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.dir-empty {
  background: var(--color-neutral-850, #111d38);
  border: 1px dashed var(--border-subtle, #2a2042);
  color: var(--text-muted, #b3aec8);
}

.dir-empty p,
.dir-error p {
  margin: 0;
  font-size: 0.95rem;
}

.dir-error {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* ── Load more ────────────────────────────────────────────── */

.dir-load-more-wrap {
  text-align: center;
  margin-top: 2rem;
}

.dir-load-more {
  min-width: 160px;
}

/* ── Email verification banner (Phase 2A, ps-home__verify-banner) ── */

.ps-home__verify-banner {
  background: var(--color-warning-subtle, rgba(217, 119, 6, 0.1));
  border: 1px solid var(--color-warning, #d97706);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.ps-home__verify-banner-message {
  flex: 1;
  color: var(--text-primary, #f5f0ff);
  font-size: 0.9rem;
  line-height: 1.5;
  min-width: 0;
}

.ps-home__verify-banner-message strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

.ps-home__verify-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 640px) {
  .dir-header {
    padding: 0.875rem 1rem 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .dir-header__nav {
    width: 100%;
    justify-content: flex-start;
  }

  .dir-hero {
    padding: 2.25rem 1rem 1.5rem;
    text-align: left;
  }

  .dir-filters {
    padding: 0.75rem 1rem;
  }

  .dir-filter-form {
    flex-direction: column;
    gap: 0.75rem;
  }

  .dir-filter-group {
    min-width: 0;
    width: 100%;
  }

  .dir-filter-btn {
    width: 100%;
    align-self: stretch;
    height: 40px;
  }

  .dir-results-section {
    padding: 1rem 1rem 3rem;
  }

  .dir-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dir-card--skeleton {
    height: 180px;
  }

  .dir-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .dir-card__header {
    align-items: flex-start;
  }

  .dir-card__name {
    white-space: normal;
    line-height: 1.3;
  }
}

/* ── Waitlist (Phase 3.3 — shown while directory has <5 listings) ── */
.dir-waitlist {
  grid-column: 1 / -1;
  max-width: 520px;
  margin: 32px auto;
  padding: 36px 28px;
  text-align: center;
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
}
.dir-waitlist__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text, #f0eff5);
  margin: 0 0 10px;
}
.dir-waitlist__sub {
  font-size: 0.95rem;
  color: var(--text-dim, #d8d5e8);
  line-height: 1.6;
  margin: 0 0 24px;
}
.dir-waitlist__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.dir-waitlist__input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  background: var(--bg, #131318);
  color: var(--text, #f0eff5);
  font-size: 1rem;
}
.dir-waitlist__role {
  font-size: 0.85rem;
  color: var(--text-muted, #b3aec8);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.dir-waitlist__msg {
  font-size: 0.88rem;
  color: var(--text-dim, #d8d5e8);
  min-height: 1.2em;
  margin: 0;
}