/**
 * Embed child contract — shared rules for pages loaded inside microapp iframes.
 * Import via embed-shell.css or link directly from child apps.
 */

/* ── Base viewport ── */
html.vinar-embed,
html.vinar-embed body {
  min-height: 100%;
  height: 100%;
}

html.vinar-embed body {
  overflow-x: hidden;
}

/* ── Wallet (Neuro-Wallet game) ── */
html.vinar-embed[data-brand="wallet"],
html.vinar-embed body.wallet-gamify {
  background: var(--bg-void, #0f0a1f);
}

html.vinar-embed {
  --top-nav-h: 0px;
  --month-bar-h: 0px;
}

html.vinar-embed .top-nav,
html.vinar-embed .month-bar {
  display: none !important;
}

/* wallet-gamify.css demotes #app to position:relative — restore full-viewport shell */
html.vinar-embed body.wallet-gamify {
  overflow: hidden;
}

html.vinar-embed body.wallet-gamify #app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

html.vinar-embed .wallet-gamify-hud {
  display: none !important;
}

html.vinar-embed body.wallet-gamify .bottom-nav {
  display: none !important;
}

/* ── VELA (BloomBook / Wisdom pages) ── */
html.vinar-embed[data-brand="vela"] body {
  background: var(--bg, #0D1117);
}

html.vinar-embed .garden-header,
html.vinar-embed .navbar,
html.vinar-embed .page-header,
html.vinar-embed .vela-page-header {
  display: none !important;
}

html.vinar-embed .page {
  max-width: none;
  padding-top: 8px;
}

html.vinar-embed .line-main,
html.vinar-embed .mood-page-main,
html.vinar-embed .checkin-main {
  padding-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html.vinar-embed * {
    scroll-behavior: auto;
  }
}

/* ── Content tier progressive disclosure (function rearrangement IA) ── */
[data-content-tier="secondary"]:not(.is-tier-expanded),
[data-content-tier="tertiary"]:not(.is-tier-expanded) {
  display: none;
}

[data-content-tier="secondary"].is-tier-expanded,
[data-content-tier="tertiary"].is-tier-expanded {
  animation: contentTierReveal 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes contentTierReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.content-tier-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px);
  margin: 12px 20px 0;
  padding: 12px 14px;
  background: var(--surface, #161B26);
  border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 14px;
  font: 600 13px/1.3 "Noto Sans Thai", sans-serif;
  color: var(--text, #EDE8E3);
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms ease,
    border-color 160ms ease;
}

.content-tier-toggle:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .content-tier-toggle:hover {
    background: var(--surface2, #1C2333);
    border-color: rgba(155,127,232,.28);
  }
}

.content-tier-toggle-arrow {
  color: var(--muted, rgba(237,232,227,.45));
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 15px;
  line-height: 1;
}

.content-tier-toggle[aria-expanded="true"] .content-tier-toggle-arrow {
  transform: rotate(90deg);
}

[data-content-tier="hero"] .today-card,
[data-content-tier="hero"] .chapter-hero {
  position: relative;
}

.hd-strip.content-tier-pill:not(.is-tier-expanded) .hd-body {
  display: none;
}

.hd-strip.content-tier-pill:not(.is-tier-expanded) {
  cursor: pointer;
  padding: 10px 14px;
  margin: 0 20px;
  border-radius: 12px;
  border: 1px dashed var(--border, rgba(255,255,255,.12));
  display: flex;
  align-items: center;
  gap: 10px;
}

.hd-strip.content-tier-pill.is-tier-expanded {
  margin: 0 20px;
  border-radius: 14px;
}

.hd-strip.content-tier-pill .hd-expand-hint {
  font-size: 11px;
  color: var(--muted, rgba(237,232,227,.45));
  margin-left: auto;
  white-space: nowrap;
}

.hd-strip.content-tier-pill.is-tier-expanded .hd-expand-hint {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-content-tier="secondary"].is-tier-expanded,
  [data-content-tier="tertiary"].is-tier-expanded {
    animation: none;
  }

  .content-tier-toggle,
  .content-tier-toggle-arrow {
    transition: none;
  }
}

/* ============================================================
   VELA — Warm Elegant Foundation (scoped to [data-brand="vela"])
   Applies only to VELA's embedded pages (garden, check-in,
   bloom-detail, weekly-story). Wallet and other brands unaffected.
   ============================================================ */

/* Editorial serif titles read better with balanced wrapping. */
[data-brand="vela"] .greeting-title,
[data-brand="vela"] .chapter-title,
[data-brand="vela"] .question-title,
[data-brand="vela"] .section-title,
[data-brand="vela"] .empty-title {
  text-wrap: balance;
  letter-spacing: -0.01em;
}

/* Gentle, warm-tinted depth on the primary "collectible" surfaces
   so the day's bloom and the weekly chapter feel like the hero. */
[data-brand="vela"] .today-card,
[data-brand="vela"] .weekly-card,
[data-brand="vela"] .chapter-hero {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}
html.bloom-light[data-brand="vela"] .today-card,
html.bloom-light[data-brand="vela"] .weekly-card,
html.bloom-light[data-brand="vela"] .chapter-hero {
  box-shadow: 0 10px 26px rgba(42, 31, 26, 0.08);
}

/* ── Snap-collect: physical tap feedback on capture surfaces ── */
[data-brand="vela"] .today-card,
[data-brand="vela"] .weekly-card,
[data-brand="vela"] .header-cta,
[data-brand="vela"] .submit-btn,
[data-brand="vela"] .btn-primary,
[data-brand="vela"] .btn-secondary,
[data-brand="vela"] .garden-cell,
[data-brand="vela"] .bloom-day-dot.logged {
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 200ms ease,
    background 200ms ease,
    border-color 160ms ease;
}

[data-brand="vela"] .today-card:not(.done):active,
[data-brand="vela"] .weekly-card:active,
[data-brand="vela"] .header-cta:active,
[data-brand="vela"] .submit-btn:not(:disabled):active,
[data-brand="vela"] .btn-primary:active,
[data-brand="vela"] .btn-secondary:active {
  transform: scale(0.975);
}

/* Blooms "snap" up slightly when tapped — collectible feel. */
[data-brand="vela"] .garden-cell:not(.future):not(.empty):active,
[data-brand="vela"] .bloom-day-dot.logged:active {
  transform: scale(1.06);
}

/* ── Scrolly reveal for the Weekly Story (native scroll-driven) ──
   Progressive enhancement: only where supported and motion allowed;
   content renders normally everywhere else. Works on JS-injected DOM. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-brand="vela"] #main-content .card,
    [data-brand="vela"] #main-content .stats-grid,
    [data-brand="vela"] #main-content .bloom-row-wrap,
    [data-brand="vela"] #main-content .week-nav,
    [data-brand="vela"] #main-content .cta-row {
      animation: velaEmbedRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes velaEmbedRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-brand="vela"] .today-card,
  [data-brand="vela"] .weekly-card,
  [data-brand="vela"] .garden-cell,
  [data-brand="vela"] .bloom-day-dot.logged,
  [data-brand="vela"] .header-cta,
  [data-brand="vela"] .submit-btn,
  [data-brand="vela"] .btn-primary,
  [data-brand="vela"] .btn-secondary {
    transition: none;
  }
}