/**
 * Profile Layout Studio + Profile Vibes
 * Phase 32 extension — scoped to #page-profile only (never site chrome).
 */

/* User-hidden cards (separate from code-driven .hidden) */
#page-profile [data-uc-card-id].uc-profile-layout-user-hidden {
  display: none !important;
}

#page-profile #profile-porch-list .uc-profile-porch-item {
  border-bottom: 1px solid var(--uc-border);
}

#page-profile #profile-porch-list .uc-profile-porch-title {
  color: var(--uc-text);
}

#page-profile #profile-porch-list .uc-profile-porch-meta {
  color: var(--uc-text-muted);
}

#page-profile.uc-profile-layout-studio-active [data-uc-card-id].is-dragging {
  opacity: 0.7;
  outline: 2px solid var(--uc-primary, var(--uc-primary));
}

#page-profile.uc-profile-layout-studio-active {
  /* Live preview stays interactive for drag; pad bottom for sheet */
  padding-bottom: min(52vh, 420px);
}

#page-profile .uc-profile-layout-drag-source {
  cursor: grab;
}

#page-profile .uc-profile-layout-drag-source:active {
  cursor: grabbing;
}

.uc-profile-layout-open-wrap {
  display: flex;
  justify-content: stretch;
  margin-top: 0.4rem;
  width: 100%;
}

.uc-profile-avatar-tools .uc-profile-layout-open-wrap {
  margin-bottom: 0;
}

/* ── Overlay shell (dock — profile stays interactive for drag) ── */
.uc-profile-layout-studio {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.uc-profile-layout-studio.hidden {
  display: none !important;
}

.uc-profile-layout-studio__sheet {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(52vh, 440px);
  display: flex;
  flex-direction: column;
  border: 2px solid var(--uc-border-strong, var(--uc-border-strong));
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--uc-surface, var(--uc-surface));
  box-shadow: 0 -8px 28px var(--uc-shadow-ink-strong);
  pointer-events: auto;
}

@media (min-width: 900px) {
  .uc-profile-layout-studio {
    inset: 0 0 0 auto;
    align-items: stretch;
    justify-content: flex-end;
    width: min(380px, 42vw);
  }

  .uc-profile-layout-studio__sheet {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: 2px solid var(--uc-border-strong, var(--uc-border-strong));
    border-right: 0;
    box-shadow: -8px 0 28px var(--uc-shadow-ink-strong);
  }

  #page-profile.uc-profile-layout-studio-active {
    padding-bottom: 0;
    padding-right: min(380px, 42vw);
  }
}

.uc-profile-layout-studio__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--uc-dna-header-red, var(--uc-primary, var(--uc-primary)));
  color: var(--uc-text-on-primary);
  flex-shrink: 0;
}

.uc-profile-layout-studio__kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uc-profile-layout-studio__status {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.9;
}

.uc-profile-layout-studio__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.uc-profile-layout-studio__panel {
  padding: 0.75rem;
  display: grid;
  gap: 0.85rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.uc-profile-layout-studio__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uc-text-muted, var(--uc-text-muted));
  margin-bottom: 0.4rem;
}

.uc-profile-layout-studio__hint {
  margin: 0.45rem 0 0;
  font-size: 10px;
  color: var(--uc-text-secondary, var(--uc-text-secondary));
}

.uc-profile-layout-vibe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

@media (min-width: 640px) {
  .uc-profile-layout-vibe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.uc-profile-layout-vibe-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.4rem;
  border: 2px solid var(--uc-border-strong, var(--uc-border-strong));
  background: var(--uc-surface-soft, var(--uc-surface-soft));
  text-align: left;
  cursor: pointer;
}

.uc-profile-layout-vibe-card.is-selected {
  box-shadow: 3px 3px 0 var(--uc-shadow-ink-strong);
  background: var(--uc-surface);
}

.uc-profile-layout-vibe-card__swatch {
  display: block;
  height: 28px;
  border: 1px solid var(--uc-scrim-soft);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="classic-block"] {
  background: linear-gradient(90deg, var(--uc-primary) 0 55%, var(--uc-gold) 55% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="night-wire"] {
  background: linear-gradient(90deg, #1a0505 0 60%, var(--uc-primary) 60% 85%, var(--uc-gold) 85% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="flyer-stack"] {
  background: linear-gradient(135deg, var(--uc-primary), var(--uc-chrome) 45%, var(--uc-gold));
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="clean-cut"] {
  background: linear-gradient(90deg, var(--uc-surface-muted) 0 70%, var(--uc-primary) 70% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="pink-porch"] {
  background: linear-gradient(90deg, #ec4899 0 55%, #fce7f3 55% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="baby-blue"] {
  background: linear-gradient(90deg, #7dd3fc 0 55%, var(--uc-surface-sunken) 55% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="park-green"] {
  background: linear-gradient(90deg, var(--uc-success) 0 55%, #dcfce7 55% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="sunset-orange"] {
  background: linear-gradient(90deg, #f97316 0 55%, #ffedd5 55% 100%);
}

.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="sun-yellow"] {
  background: linear-gradient(90deg, var(--uc-gold-dim) 0 55%, #fef9c3 55% 100%);
}

.uc-profile-layout-vibe-card__label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.uc-profile-layout-visibility {
  display: grid;
  gap: 0.25rem;
}

.uc-profile-layout-vis-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 700;
  padding: 0.25rem 0;
}

.uc-profile-layout-vis-row.is-locked {
  opacity: 0.7;
}

.uc-profile-layout-vis-lock {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uc-text-muted, var(--uc-text-muted));
}

/* ── Profile Vibes (token remaps on #page-profile only) ──
   Section headers use --uc-dna-header-red / --uc-primary — remap those
   so vibe accent IS the profile primary (pink bars, blue bars, etc.).
*/

#page-profile[data-uc-profile-vibe="classic-block"] {
  --uc-profile-vibe-surface: var(--uc-surface, #fff);
  --uc-profile-vibe-ink: var(--uc-border-strong, var(--uc-border-strong));
  --uc-profile-vibe-accent: var(--uc-primary, var(--uc-primary));
  --uc-profile-vibe-gold: var(--uc-gold, var(--uc-gold));
  --uc-profile-vibe-wash: transparent;
}

#page-profile[data-uc-profile-vibe="night-wire"] {
  --uc-profile-vibe-surface: #140808;
  /* Dark island: chrome-text stays light on Classic and Heat.
     --uc-surface-raised / --uc-text-inverse invert on Heat and vanish. */
  --uc-profile-vibe-ink: var(--uc-chrome-text);
  --uc-profile-vibe-accent: #e11d48;
  --uc-profile-vibe-gold: var(--uc-gold);
  --uc-profile-vibe-wash: radial-gradient(ellipse at top, rgba(178, 34, 34, 0.28), transparent 55%);
  --uc-dna-header-red: #e11d48;
  --uc-primary: #e11d48;
  --uc-primary-dark: #be123c;
  --uc-primary-darker: #9f1239;
  --urban-red: #e11d48;
  --urban-dark-red: #be123c;
}

#page-profile[data-uc-profile-vibe="flyer-stack"] {
  --uc-profile-vibe-surface: #fff7ed;
  --uc-profile-vibe-ink: var(--uc-border-strong);
  --uc-profile-vibe-accent: var(--uc-primary);
  --uc-profile-vibe-gold: var(--uc-warning);
  --uc-profile-vibe-wash: repeating-linear-gradient(
    -12deg,
    var(--uc-primary-wash),
    var(--uc-primary-wash) 12px,
    transparent 12px,
    transparent 24px
  );
  --uc-dna-header-red: var(--uc-primary);
  --uc-primary: var(--uc-primary);
  --uc-primary-dark: var(--uc-primary-dark);
  --uc-primary-darker: var(--uc-primary-darker);
  --urban-red: var(--uc-primary);
  --urban-dark-red: var(--uc-primary-dark);
}

#page-profile[data-uc-profile-vibe="clean-cut"] {
  --uc-profile-vibe-surface: #ffffff;
  --uc-profile-vibe-ink: var(--uc-slate-900);
  --uc-profile-vibe-accent: var(--uc-slate-900);
  --uc-profile-vibe-gold: #ca8a04;
  --uc-profile-vibe-wash: linear-gradient(180deg, var(--uc-surface-raised), transparent 180px);
  --uc-dna-header-red: var(--uc-slate-900);
  --uc-primary: var(--uc-slate-900);
  --uc-primary-dark: #020617;
  --uc-primary-darker: #020617;
  --urban-red: var(--uc-slate-900);
  --urban-dark-red: #020617;
}

#page-profile[data-uc-profile-vibe="pink-porch"] {
  --uc-profile-vibe-surface: #fff5f9;
  --uc-profile-vibe-ink: #831843;
  --uc-profile-vibe-accent: #ec4899;
  --uc-profile-vibe-gold: #f9a8d4;
  --uc-profile-vibe-wash: linear-gradient(180deg, rgba(236, 72, 153, 0.18), transparent 160px);
  --uc-dna-header-red: #ec4899;
  --uc-primary: #ec4899;
  --uc-primary-dark: #db2777;
  --uc-primary-darker: #be185d;
  --urban-red: #ec4899;
  --urban-dark-red: #db2777;
}

#page-profile[data-uc-profile-vibe="baby-blue"] {
  --uc-profile-vibe-surface: #f0f9ff;
  --uc-profile-vibe-ink: #0c4a6e;
  --uc-profile-vibe-accent: #38bdf8;
  --uc-profile-vibe-gold: #7dd3fc;
  --uc-profile-vibe-wash: linear-gradient(180deg, rgba(125, 211, 252, 0.28), transparent 160px);
  --uc-dna-header-red: #38bdf8;
  --uc-primary: #38bdf8;
  --uc-primary-dark: #0ea5e9;
  --uc-primary-darker: #0284c7;
  --urban-red: #38bdf8;
  --urban-dark-red: #0ea5e9;
}

#page-profile[data-uc-profile-vibe="park-green"] {
  --uc-profile-vibe-surface: #f0fdf4;
  --uc-profile-vibe-ink: #14532d;
  --uc-profile-vibe-accent: var(--uc-success);
  --uc-profile-vibe-gold: #86efac;
  --uc-profile-vibe-wash: linear-gradient(180deg, rgba(34, 197, 94, 0.16), transparent 160px);
  --uc-dna-header-red: var(--uc-success);
  --uc-primary: var(--uc-success);
  --uc-primary-dark: #16a34a;
  --uc-primary-darker: #15803d;
  --urban-red: var(--uc-success);
  --urban-dark-red: #16a34a;
}

#page-profile[data-uc-profile-vibe="sunset-orange"] {
  --uc-profile-vibe-surface: #fff7ed;
  --uc-profile-vibe-ink: #9a3412;
  --uc-profile-vibe-accent: #f97316;
  --uc-profile-vibe-gold: #fdba74;
  --uc-profile-vibe-wash: linear-gradient(180deg, rgba(249, 115, 22, 0.18), transparent 160px);
  --uc-dna-header-red: #f97316;
  --uc-primary: #f97316;
  --uc-primary-dark: #ea580c;
  --uc-primary-darker: #c2410c;
  --urban-red: #f97316;
  --urban-dark-red: #ea580c;
}

#page-profile[data-uc-profile-vibe="sun-yellow"] {
  --uc-profile-vibe-surface: #fefce8;
  --uc-profile-vibe-ink: #713f12;
  --uc-profile-vibe-accent: #eab308;
  --uc-profile-vibe-gold: #fde047;
  --uc-profile-vibe-wash: linear-gradient(180deg, var(--uc-accent-wash), transparent 160px);
  --uc-dna-header-red: #eab308;
  --uc-primary: #eab308;
  --uc-primary-dark: #ca8a04;
  --uc-primary-darker: #a16207;
  --urban-red: #eab308;
  --urban-dark-red: #ca8a04;
}

#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) > main.container {
  position: relative;
}

#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) > main.container::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.25rem auto;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  background: var(--uc-profile-vibe-wash);
  border-radius: 8px;
}

#page-profile[data-uc-profile-vibe] .uc-profile-main-layout,
#page-profile[data-uc-profile-vibe] .uc-profile-layout-open-wrap {
  position: relative;
  z-index: 1;
}

#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]):not([data-uc-profile-vibe=""]) .main-card {
  background: var(--uc-profile-vibe-surface);
  border-color: var(--uc-profile-vibe-ink);
  /* Body copy is theme ink — vibe-ink is border/accent only (Heat darkens pastel plates). */
  color: var(--uc-text);
}

/* Hero used a fixed light wash — that made WHO'S THIS look off vs other vibe cards. */
#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .uc-profile-hero-body {
  background: var(--uc-profile-vibe-surface) !important;
  color: var(--uc-text);
}

#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .uc-profile-contact-panel {
  background: var(--uc-profile-vibe-surface) !important;
  border-top-color: color-mix(in srgb, var(--uc-profile-vibe-ink) 22%, transparent);
}

#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .uc-profile-status-chip {
  border-color: color-mix(in srgb, var(--uc-profile-vibe-accent) 35%, transparent);
  background: color-mix(in srgb, var(--uc-profile-vibe-accent) 14%, transparent);
  color: var(--uc-profile-vibe-accent);
}

#page-profile[data-uc-profile-vibe="night-wire"] .uc-profile-hero-name,
#page-profile[data-uc-profile-vibe="night-wire"] .uc-profile-meta-chip {
  color: var(--uc-text-muted);
}

/* Force card headers to vibe primary (retro-chrome uses --uc-dna-header-red). */
#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .main-card > .section-header,
#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .uc-card-trippy > .section-header,
#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .section-header,
#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .uc-profile-section-header {
  background-color: var(--uc-dna-header-red, var(--uc-profile-vibe-accent)) !important;
  background-image: none !important;
  color: var(--uc-text-on-primary) !important;
}

#page-profile[data-uc-profile-vibe="flyer-stack"] .section-header,
#page-profile[data-uc-profile-vibe="flyer-stack"] .uc-profile-section-header {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-profile[data-uc-profile-vibe="sun-yellow"] .main-card > .section-header,
#page-profile[data-uc-profile-vibe="sun-yellow"] .section-header,
#page-profile[data-uc-profile-vibe="sun-yellow"] .uc-profile-section-header,
#page-profile[data-uc-profile-vibe="baby-blue"] .main-card > .section-header,
#page-profile[data-uc-profile-vibe="baby-blue"] .section-header,
#page-profile[data-uc-profile-vibe="baby-blue"] .uc-profile-section-header {
  color: var(--uc-border-strong) !important;
}

#page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]) .uc-link-gold {
  color: var(--uc-profile-vibe-gold) !important;
}

#page-profile[data-uc-profile-vibe="night-wire"] {
  color: var(--uc-chrome-text);
}

#page-profile[data-uc-profile-vibe="night-wire"] .main-card,
#page-profile[data-uc-profile-vibe="night-wire"] .uc-profile-hero-body,
#page-profile[data-uc-profile-vibe="night-wire"] .uc-profile-contact-panel {
  color: var(--uc-chrome-text);
}

#page-profile[data-uc-profile-vibe="night-wire"] .text-gray-700,
#page-profile[data-uc-profile-vibe="night-wire"] .text-gray-800,
#page-profile[data-uc-profile-vibe="night-wire"] .text-gray-500,
#page-profile[data-uc-profile-vibe="night-wire"] .text-slate-900 {
  color: var(--uc-text-muted) !important;
}

/*
 * Heat: pure pastel paper vibes (#fff5f9, #f0f9ff, …) blow out on dark chrome.
 * Keep accent identity, composite vibe surface into Heat --uc-surface.
 * Body copy is always --uc-text (never Classic paper vibe-ink / surface-raised).
 */
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]):not([data-uc-profile-vibe="night-wire"]):not([data-uc-profile-vibe=""]) {
  --uc-profile-vibe-surface: color-mix(
    in srgb,
    var(--uc-profile-vibe-accent, var(--uc-primary)) 16%,
    var(--uc-surface)
  );
}

body[data-uc-theme="heat"] #page-profile .main-card,
body[data-uc-theme="heat"] #page-profile .uc-profile-hero-body,
body[data-uc-theme="heat"] #page-profile .uc-profile-contact-panel {
  color: var(--uc-text) !important;
}

body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]):not([data-uc-profile-vibe="night-wire"]) .main-card,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]):not([data-uc-profile-vibe="night-wire"]) .uc-profile-hero-body,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe]:not([data-uc-profile-vibe="classic-block"]):not([data-uc-profile-vibe="night-wire"]) .uc-profile-contact-panel {
  border-color: var(--uc-dna-border-strong, var(--uc-border-strong)) !important;
}

body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe="sun-yellow"] .main-card > .section-header,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe="sun-yellow"] .section-header,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe="sun-yellow"] .uc-profile-section-header,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe="baby-blue"] .main-card > .section-header,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe="baby-blue"] .section-header,
body[data-uc-theme="heat"] #page-profile[data-uc-profile-vibe="baby-blue"] .uc-profile-section-header {
  color: var(--uc-text-on-primary) !important;
}