/* ============================================================
   MIND MATTER — Buyer landing + creator studio shell
   Route presentation only. The production editor keeps its existing
   markup and CSS; this file controls what each audience sees first.
   ============================================================ */

/* ---------- Route visibility ---------- */
body[data-mm-route="buyer"] .studio-dashboard,
body[data-mm-route="buyer"] .stage,
body[data-mm-route="buyer"] #sell,
body[data-mm-route="buyer"] .ticker {
  display: none;
}

/* The Wall is the first landing surface. The rest of the buyer-facing
   discovery sections remain reachable from the persistent header navigation;
   Sell still routes into the protected creator experience. */
body[data-mm-route="buyer"] .app-bottom-nav .app-nav-btn[data-nav="studio"] {
  display: none;
}

body[data-mm-route="studio"] .buyer-landing,
body[data-mm-route="studio"] #gallery,
body[data-mm-route="studio"] #sell,
body[data-mm-route="studio"] #artists,
body[data-mm-route="studio"] #about,
body[data-mm-route="studio"] .ticker,
body[data-mm-route="studio"] footer {
  display: none;
}

/* Profile page: hide marketplace main sections, KEEP site header + nav + bottom nav */
body[data-mm-route="profile"] main > *:not(#artistProfileRoot) {
  display: none !important;
}
body[data-mm-route="profile"] main {
  display: block;
  min-height: 0;
}
body[data-mm-route="profile"] footer {
  display: none;
}
/* Always show primary navigation on profile (desktop + mobile) */
body[data-mm-route="profile"] #siteHeader {
  display: flex !important;
  background: rgba(7, 12, 23, 0.92);
  border-color: var(--hair);
  backdrop-filter: blur(12px);
}
body[data-mm-route="profile"] #siteHeader nav {
  display: flex !important;
}
body[data-mm-route="profile"] #siteHeader .head-right,
body[data-mm-route="profile"] #siteHeader .nav-profile,
body[data-mm-route="profile"] #siteHeader .cart-btn {
  display: flex !important;
  visibility: visible !important;
}
body[data-mm-route="profile"] .app-bottom-nav {
  display: block !important;
}
body[data-mm-route="profile"] #artistProfileRoot {
  display: block;
  min-height: 100vh;
  padding-top: 92px;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 1366px) {
  body[data-mm-route="profile"] #siteHeader {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body[data-mm-route="profile"] #siteHeader nav {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    padding: 2px 2px 4px;
  }
  body[data-mm-route="profile"] #siteHeader .cart-btn {
    display: none !important; /* bottom nav owns cart on phone */
  }
}

/* ---------- Buyer landing ---------- */
.buyer-landing {
  min-height: min(860px, 100vh);
  padding: 132px clamp(24px, 6vw, 92px) 44px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 580px at 76% 42%, rgba(80, 140, 210, 0.13), transparent 64%),
    radial-gradient(600px 520px at 6% 20%, rgba(255, 45, 111, 0.14), transparent 65%),
    linear-gradient(135deg, rgba(10, 16, 30, 0.96), rgba(5, 10, 20, 0.78));
}
.buyer-landing::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.25;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(234,227,210,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,227,210,.04) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, black, transparent 88%);
}
.buyer-landing-inner {
  max-width: 1380px;
  min-height: 650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
  align-items: center;
  gap: clamp(42px, 8vw, 150px);
  position: relative;
  z-index: 1;
}
.buyer-copy { max-width: 520px; }
.buyer-index {
  margin: 34px 0 10px;
  color: var(--gold);
  font: 700 10px var(--mono);
  letter-spacing: .2em;
}
.buyer-title {
  font: 900 clamp(3rem, 7vw, 6.8rem)/.95 var(--serif);
  letter-spacing: .015em;
  color: var(--ivory);
  text-wrap: balance;
}
.buyer-role {
  margin-top: 16px;
  color: var(--star);
  font: 700 11px var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.buyer-statement {
  max-width: 37ch;
  margin-top: 24px;
  color: var(--ivory-dim);
  font: 300 clamp(1rem, 1.5vw, 1.25rem)/1.65 var(--sans);
}
.buyer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.buyer-note {
  margin-top: 26px;
  color: rgba(234,227,210,.56);
  font: 400 9px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.buyer-art-panel { width: min(100%, 700px); justify-self: end; }
.buyer-art-frame {
  position: relative;
  aspect-ratio: 1.18 / 1;
  padding: clamp(14px, 2vw, 26px);
  background: linear-gradient(145deg, rgba(234,227,210,.18), rgba(234,227,210,.04));
  border: 1px solid rgba(234,227,210,.28);
  box-shadow: 24px 30px 80px rgba(0,0,0,.44), 0 0 80px rgba(255,45,111,.1);
  transform: rotate(1.2deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s;
}
.buyer-art-frame::before,
.buyer-art-frame::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}
.buyer-art-frame::before { inset: -1px auto auto -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.buyer-art-frame::after { inset: auto -1px -1px auto; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.buyer-art-frame:hover { transform: rotate(0) translateY(-5px); box-shadow: 24px 38px 92px rgba(0,0,0,.5), 0 0 90px rgba(255,45,111,.17); }
.buyer-art-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.04);
}
.buyer-art-glow {
  position: absolute;
  inset: 11% 12%;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(255,45,111,.18);
  mix-blend-mode: screen;
}
.buyer-art-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px 0;
}
.buyer-art-meta > div { display: flex; flex-direction: column; gap: 5px; }
.buyer-meta-label {
  color: rgba(234,227,210,.55);
  font: 700 9px var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.buyer-art-meta strong { color: var(--ivory); font: 700 clamp(1rem, 2vw, 1.35rem) var(--serif); }
.buyer-art-price { text-align: right; }
.buyer-art-price strong { color: var(--gold); font-family: var(--sans); }
.buyer-rotation-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}
.buyer-rotation-controls > button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
}
.buyer-rotation-controls > button:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.buyer-dots { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
.buyer-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hair-strong);
  cursor: pointer;
  transition: width .25s, background .25s, box-shadow .25s;
}
.buyer-dot.on { width: 28px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 14px rgba(255,45,111,.6); }
.buyer-artist-strip {
  max-width: 1380px;
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}
.buyer-artist-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  background: rgba(12,21,38,.45);
  color: var(--ivory-dim);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.buyer-artist-card:hover,
.buyer-artist-card.on { border-color: rgba(255,45,111,.45); background: rgba(255,45,111,.08); color: var(--ivory); }
.buyer-artist-card img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hair-strong); }
.buyer-artist-card strong { display: block; font: 700 11px var(--serif); }
.buyer-artist-card span { display: block; margin-top: 2px; font: 400 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Creator studio shell ---------- */
.studio-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 128px clamp(18px, 4vw, 56px) 34px;
  position: relative;
  z-index: 3;
}
.studio-dashboard-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hair);
}
.studio-dashboard-top .lede { max-width: 58ch; margin-top: 16px; }
.studio-dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.studio-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.studio-stat-card {
  min-height: 104px;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  background: rgba(12,21,38,.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.studio-stat-card span,
.studio-stat-card small { color: var(--ivory-dim); font: 400 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.studio-stat-card strong { color: var(--ivory); font: 700 1rem var(--serif); }
.studio-stat-card:first-child strong { color: #7dcea0; }

/* In studio, the original editor hero gets a quiet divider rather than competing with the dashboard. */
body[data-mm-route="studio"] .stage-hero { padding-top: 28px; }
body[data-mm-route="studio"] #siteHeader { background: rgba(7, 12, 23, .86); border-color: var(--hair); backdrop-filter: blur(12px); }
body[data-mm-route="buyer"] #siteHeader { background: linear-gradient(180deg, rgba(7,12,23,.7), transparent); }
body[data-mm-route="buyer"] .g-view { display: none; }

/* Seller access sequence: keep the studio hero visible, but do not expose
   the production editor until Google/demo access has completed. The gate
   adds this class before the editor modules are initialized. */
body[data-mm-route="studio"].studio-access-pending .stage {
  display: none;
}

@media (max-width: 900px) {
  /* Keep the requested buyer navigation available on smaller screens too.
     It becomes a compact second row instead of disappearing with the global
     editor/mobile chrome rule. */
  body[data-mm-route="buyer"] #siteHeader {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body[data-mm-route="buyer"] #siteHeader nav {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: none;
  }
  body[data-mm-route="buyer"] #siteHeader nav::-webkit-scrollbar { display: none; }
  body[data-mm-route="buyer"] #siteHeader nav a { flex: 0 0 auto; }
  .buyer-landing { padding: 142px 20px 30px; }
  .buyer-landing-inner { grid-template-columns: 1fr; min-height: 0; gap: 42px; }
  .buyer-copy { max-width: 680px; }
  .buyer-art-panel { justify-self: stretch; width: 100%; }
  .buyer-title { font-size: clamp(3rem, 15vw, 5.4rem); }
  .buyer-artist-strip { grid-template-columns: repeat(2, 1fr); }
  .studio-dashboard { padding-top: 104px; }
  .studio-dashboard-top { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  body[data-mm-route="buyer"] #siteHeader { padding-inline: 14px; }
  body[data-mm-route="buyer"] #siteHeader nav { gap: 18px; }
  body[data-mm-route="buyer"] #siteHeader nav a { font-size: 8.5px; letter-spacing: .18em; }
  .buyer-artist-strip { grid-template-columns: 1fr; }
  .buyer-actions .btn { flex: 1 1 100%; }
  .buyer-art-meta { padding-top: 16px; }
  .studio-stat-grid { grid-template-columns: 1fr; }
  .studio-dashboard-actions { width: 100%; }
  .studio-dashboard-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .buyer-art-frame,
  .buyer-rotation-controls > button,
  .buyer-dot,
  .buyer-artist-card { transition: none; }
}