/* EchoShift V0.4.6 — mobile-only demonstration player.
   The approved hero stage artwork, timing and phase logic remain untouched. */

.hero-demo__control--minimise,
.mobile-demo-inline-placeholder,
.mobile-demo-mini { display: none; }

@media (max-width: 820px) {
  body.has-mobile-demo-mini { padding-bottom: calc(var(--mobile-demo-mini-height, 86px) + env(safe-area-inset-bottom, 0px) + 18px); }

  .hero__copy > .hero__demo-column {
    width: 100%;
    max-width: 100%;
    margin: 1.65rem 0 1.3rem;
  }

  .hero__copy > .hero__demo-column .hero-machine-demo {
    width: 100%;
    max-width: 100%;
  }

  .hero__copy > .hero__demo-column .section-handoff--demo { display: none; }

  .hero-demo__control--minimise { display: inline-flex; }

  .hero__copy > .hero__demo-column .hero-demo__viewport {
    min-height: clamp(390px, 52svh, 500px);
  }

  .hero__copy > .hero__demo-column .hero-demo__header {
    gap: .55rem;
  }

  .hero__copy > .hero__demo-column .hero-demo__controls {
    margin-left: auto;
  }

  .hero__copy > .hero__demo-column.is-minimised .hero-machine-demo,
  .hero__copy > .hero__demo-column.is-closed .hero-machine-demo,
  .hero__copy > .hero__demo-column.is-minimised .section-handoff--demo,
  .hero__copy > .hero__demo-column.is-closed .section-handoff--demo { display: none; }

  .mobile-demo-inline-placeholder {
    width: 100%;
    min-height: 64px;
    align-items: center;
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(107,136,173,.32);
    border-radius: 14px;
    color: #dbe6ef;
    background: rgba(11,28,49,.82);
    text-align: left;
    cursor: pointer;
  }

  .hero__copy > .hero__demo-column.is-minimised .mobile-demo-inline-placeholder { display: grid; }
  .hero__copy > .hero__demo-column.is-closed .mobile-demo-inline-placeholder { display: none; }

  .mobile-demo-inline-placeholder span {
    color: #7890a8;
    font: 500 .55rem/1.2 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .mobile-demo-inline-placeholder strong {
    grid-column: 1;
    font-size: .84rem;
    font-weight: 600;
  }

  .mobile-demo-inline-placeholder i {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-style: normal;
    color: var(--signal-gold);
  }

  .mobile-demo-mini {
    position: fixed;
    z-index: 96;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    min-height: 78px;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .78rem .85rem;
    border: 1px solid rgba(107,136,173,.48);
    border-radius: 16px;
    color: #dbe6ef;
    background: rgba(7,18,33,.96);
    box-shadow: 0 18px 52px rgba(0,5,14,.5), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px) saturate(125%);
  }

  .mobile-demo-mini:not([hidden]) { display: grid; }
  .mobile-demo-mini.is-suppressed { display: none; }

  .mobile-demo-mini__status { min-width: 0; display: grid; gap: .2rem; }
  .mobile-demo-mini__status span {
    overflow: hidden;
    color: var(--signal-gold);
    font: 600 .52rem/1.2 var(--font-mono);
    letter-spacing: .05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mobile-demo-mini__status strong {
    overflow: hidden;
    font-size: .72rem;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-demo-mini__actions { display: flex; align-items: center; gap: .3rem; }
  .mobile-demo-mini__actions button {
    min-height: 38px;
    padding: .55rem .62rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #c5d2df;
    background: rgba(255,255,255,.025);
    font: 500 .5rem/1 var(--font-mono);
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .mobile-demo-mini__actions button:first-child {
    border-color: rgba(212,160,55,.6);
    color: #171207;
    background: var(--signal-gold);
  }

  .mobile-demo-mini.is-complete [data-demo-mini-resume]::before { content: "View "; }
}

@media (max-width: 430px) {
  .hero__copy > .hero__demo-column .hero-demo__viewport { min-height: clamp(370px, 50svh, 455px); }
  .hero-demo__phase-title strong { max-width: 112px; }
  .hero-demo__control { padding-inline: .36rem; font-size: .46rem; }
  .mobile-demo-mini { grid-template-columns: 1fr; }
  .mobile-demo-mini__actions { justify-content: stretch; }
  .mobile-demo-mini__actions button { flex: 1; }
}

@media (max-width: 375px) {
  .hero__copy > .hero__demo-column .hero-demo__viewport { min-height: 360px; }
  .hero-demo__phase-title strong { max-width: 92px; }
  .hero-demo__controls { gap: .22rem; }
  .hero-demo__control { min-height: 25px; padding-inline: .31rem; font-size: .43rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-demo-mini { transition: none !important; }
}