/* =============================================================================
   wave6-spine.css — Wave 6 (Weddings/Vendors/NRI/Matchmaker) shared shells.
   Additive, fleet-safe, dual-mode aware. Authored by DEV-1.

   Provides the four reusable, procurement-honest components the spec calls out:
     1. Timeline Stage Rail  (.stage-rail / .stage-chip)         — member spine
        (the Destination + Cultural hubs reuse the same tablist contract).
     2. "local draft — not saved to your account" badge (.local-draft-badge)
        — net-new SHARED component; shows on any tool that falls to localStorage.
     3. Shared browse-only / inquiry-only band (.browse-only-band).
     4. Skeleton cards (.w6-skeleton) for the marketplace skeleton-first load.

   Colours come from tokens.css; text/borders use the AA-safe --marriage-gold-700.
   The rail is offset-aware (sticky under #shared-header) and collapses its
   sticky behaviour under html.page-mode-embedded so it never double-chromes.
   ============================================================================ */

/* ---- 1. Timeline Stage Rail --------------------------------------------- */
.stage-rail {
  position: sticky;
  top: var(--app-header-offset, 4rem);
  z-index: 30;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1rem;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .stage-rail,
:root.dark .stage-rail { background: #1f2937; border-bottom-color: rgba(255, 255, 255, 0.08); }

/* Under the embedded dashboard the outer shell already supplies sticky chrome;
   keep the rail in-flow so it never floats over content (mirrors main.css). */
html.page-mode-embedded .stage-rail { position: static; top: auto; }

.stage-chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.stage-chip:hover { background: rgba(212, 175, 55, 0.10); }
.dark .stage-chip { border-color: rgba(255, 255, 255, 0.15); }

/* active stage: gold→love-pink gradient pill (brand) */
.stage-chip[aria-selected="true"],
.stage-chip.is-active {
  background: linear-gradient(90deg, var(--love-pink, #ec4899), var(--marriage-gold, #d4af37));
  border-color: transparent;
  color: #ffffff;
}
.stage-chip .stage-chip-icon { font-size: 0.9rem; }

/* dimmed / gated stage chip (procurement-honest) */
.stage-chip[data-gated="true"] { opacity: 0.6; }
.stage-chip[data-gated="true"]::after {
  content: "Coming soon";
  margin-left: 0.35rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.35rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .stage-rail { scroll-behavior: auto; }
  .stage-chip { transition: none; }
}

/* ---- 2. Local-draft badge ------------------------------------------------ */
.local-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #fef3c7;            /* amber-100 */
  color: #92400e;                /* amber-800 — AA on amber-100 */
  border: 1px solid #fcd34d;     /* amber-300 */
}
.dark .local-draft-badge,
:root.dark .local-draft-badge { background: rgba(146, 64, 14, 0.25); color: #fde68a; border-color: rgba(252, 211, 77, 0.4); }
.local-draft-badge i { font-size: 0.75rem; }

/* ---- 3. Browse-only / inquiry-only band --------------------------------- */
.browse-only-band {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #eff6ff;           /* blue-50 */
  color: #1e40af;                /* blue-800 */
  border: 1px solid #bfdbfe;     /* blue-200 */
  font-size: 0.85rem;
}
.dark .browse-only-band,
:root.dark .browse-only-band { background: rgba(30, 64, 175, 0.18); color: #bfdbfe; border-color: rgba(59, 130, 246, 0.35); }
.browse-only-band i { margin-top: 0.1rem; }

/* ---- 4. Skeleton cards --------------------------------------------------- */
.w6-skeleton {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 0.5rem;
}
.dark .w6-skeleton,
:root.dark .w6-skeleton { background: #374151; }
.w6-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: w6-shimmer 1.4s infinite;
}
.dark .w6-skeleton::after,
:root.dark .w6-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
@keyframes w6-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .w6-skeleton::after { animation: none; }
}

/* =============================================================================
   DEV-2 — Role-Console dual-mode sidebar migration (vendor + matchmaker).

   The vendor back-office and matchmaker CRM pages ship hand-rolled in-page
   `w-64` (Tailwind) or `.vendor-sidebar` / `.sidebar` (bespoke) sidebars with a
   `ml-64`/`.vendor-main` content offset and a hard-coded `top-16`/`6.25rem`
   anchor sized for an OLD bespoke header. Now that they render `#shared-header`
   + page-mode.js, two things must hold in BOTH modes:

     STANDALONE: the in-page sidebar sits *below* #shared-header (offset token),
                 not under a stale hard-coded 6.25rem.
     EMBEDDED:   the shell's iframe already owns the left rail + top chrome, so
                 the page's own fixed sidebar must collapse and the content
                 offset must zero out — otherwise it double-chromes.

   This is the structural successor to the per-page `html.dashboard-embedded
   .vendor-layout > aside` rules (which only fired on the shell's legacy class).
   We key on BOTH `html.page-mode-embedded` (page-mode.js, the authoritative
   signal) AND the legacy `html.dashboard-embedded` / `html.hh-embedded` (still
   stamped by the shell content-loader) so the collapse is correct regardless of
   which signal lands first. Pages opt in with `w6-console-aside` on the sidebar
   and `w6-console-main` on the content wrapper (added in the per-page diff).
   ========================================================================== */

/* --- standalone: park the fixed sidebar just under #shared-header ---------- */
html.page-mode-standalone .w6-console-aside {
  top: var(--app-header-offset, 4rem);
  /* a 4rem header replaces whatever 6.25rem/top-16 the page hard-coded */
  height: calc(100vh - var(--app-header-offset, 4rem));
}

/* --- embedded: the shell owns nav + header → collapse the in-page sidebar -- */
html.page-mode-embedded .w6-console-aside,
html.dashboard-embedded .w6-console-aside,
html.hh-embedded        .w6-console-aside {
  display: none !important;
}
html.page-mode-embedded .w6-console-main,
html.dashboard-embedded .w6-console-main,
html.hh-embedded        .w6-console-main {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* the mobile slide-in drawer + its hamburger are likewise the page's own nav
   chrome; hide them embedded so only the shell's controls remain. */
html.page-mode-embedded .w6-console-mobile,
html.dashboard-embedded .w6-console-mobile,
html.hh-embedded        .w6-console-mobile {
  display: none !important;
}

/* --- standalone: park the console's inner sticky sub-header under #shared-header.
   The matchmaker CRM content wrapper ships an in-flow `<header class="sticky
   top-0">` toolbar. Standalone it must sit BELOW the 4rem #shared-header, not at
   viewport top (where it overlaps it). Embedded it is already hidden by the
   main.css subtractive block (header.sticky.top-0). Pin it to the offset token. */
html.page-mode-standalone .w6-console-main > header.sticky {
  top: var(--app-header-offset, 4rem);
}

/* --- rbac-guard.js pre-paint FOUC hide (matchmaker CRM) ------------------- *
   The vendor pages style `.rbac-pending` in their per-page CSS; the matchmaker
   CRM pages had no such rule. rbac-guard.js stamps `rbac-pending` on <html>
   before the role verdict and removes it on grant — without this rule the
   protected CRM content would flash for unauthorised users. Mirrors the vendor
   reference (hide body + a neutral "Verifying access…" overlay). ----------- */
html.rbac-pending body { visibility: hidden; }
html.rbac-pending::before {
  content: "Verifying access…";
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--marriage-gold-700, #b8860b);
  background: #ffffff;
  z-index: 99999;
}
:root.dark.rbac-pending::before,
html.dark.rbac-pending::before { background: #111827; color: var(--marriage-gold-300, #fbbf24); }

/* --- §2 density: keep the KPI/identity strip + first table page above the fold.
   After chrome migration the bespoke header is gone, but the page bodies still
   ship generous mb-8 / p-6 / gap-6 rhythm that pushes the first table row past
   1440×900. Opt-in `.w6-dense` (added on the migrated vendor queues) compresses
   the leading header + KPI grid + the first table block ONLY on wide viewports,
   so the queue is usable at a glance without a tall scroll. Mobile keeps the
   original roomy spacing. Additive + page-scoped — no fleet regression. ------ */
@media (min-width: 1024px) {
  .w6-console-main.w6-dense > .p-6,
  .w6-console-main.w6-dense > .p-8 { padding-top: 1rem; padding-bottom: 1rem; }
  /* leading page-header block */
  .w6-console-main.w6-dense .mb-8:first-child { margin-bottom: 1rem; }
  /* KPI card grid: tighter gaps + card padding so 4 cards + the table fit */
  .w6-console-main.w6-dense .grid.gap-6 { gap: 1rem; }
  .w6-console-main.w6-dense .stats-card,
  .w6-console-main.w6-dense .grid.gap-6 > div { padding: 1rem; }
  .w6-console-main.w6-dense .grid.mb-8 { margin-bottom: 1.25rem; }
}