/* Keep the evolving podcast preview docked to the browser bottom instead of interrupting the wizard. */
:root{
  --sticky-shelf-height:116px;
}

body{
  padding-bottom:calc(var(--sticky-shelf-height) + env(safe-area-inset-bottom));
}

/* A fixed descendant should be viewport-bound, not card-bound. */
.wizard-card{
  overflow:visible;
  backdrop-filter:none;
}

/* Use almost all available vertical space above the fixed show shelf. */
.step-viewport{
  height:clamp(360px,calc(100dvh - var(--sticky-shelf-height) - 165px),680px);
  border-radius:19px 19px 0 0;
}

.wizard-actions{
  border-radius:0 0 19px 19px;
}

.show-shelf{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(884px,calc(100vw - 24px));
  z-index:80;
  border:1px solid #2b3948;
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,rgba(12,18,25,.96),rgba(7,11,16,.985));
  box-shadow:0 -16px 44px rgba(0,0,0,.34),0 -1px 0 rgba(66,232,245,.04);
  backdrop-filter:blur(18px) saturate(120%);
  padding:7px 13px max(9px,env(safe-area-inset-bottom));
}

.show-shelf .preview-top{
  padding:0 2px 5px;
}

.show-shelf .show-profile{
  grid-template-columns:84px 1fr;
  gap:12px;
  min-height:84px;
}

.show-shelf .cover-preview{
  width:84px;
  border-radius:11px;
  padding:9px;
}

.show-shelf .cover-preview h2{
  font-size:14px;
  margin:3px 0 4px;
}

.show-shelf .cover-preview p{
  font-size:7px;
}

.show-shelf .cover-category{
  font-size:6px;
}

.show-shelf .profile-copy h2{
  font-size:22px;
  margin:2px 0 5px;
}

.show-shelf .profile-copy p{
  margin-bottom:7px;
  font-size:11px;
}

.show-shelf .profile-meta span{
  padding:4px 7px;
  font-size:8px;
}

@media(max-width:720px){
  :root{--sticky-shelf-height:96px}

  body{
    padding-bottom:calc(var(--sticky-shelf-height) + env(safe-area-inset-bottom));
  }

  /* The old 520px cap left a large dead band between the wizard and shelf on tall iPhones.
     Size the question stage from the dynamic viewport instead, while preserving a safe minimum. */
  .step-viewport{
    height:clamp(390px,calc(100dvh - var(--sticky-shelf-height) - 150px),700px);
    min-height:390px;
    max-height:none;
  }

  /* Brand direction uses the same stable square-card language as topics and tones.
     Avoid the clipped horizontal carousel in mobile browsers. */
  .theme-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-width:560px;
    overflow:visible;
    padding:0;
    scroll-snap-type:none;
  }

  .theme{
    min-width:0;
    min-height:150px;
    padding:12px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    scroll-snap-align:none;
  }

  .theme-visual{
    grid-row:auto;
    width:76px;
    height:76px;
    border-radius:14px;
    padding:9px;
  }

  .theme-visual:after{
    width:56px;
    height:56px;
    right:-17px;
    bottom:-17px;
  }

  .theme-visual b{
    font-size:9px;
  }

  .theme strong{
    font-size:16px;
    line-height:1.05;
  }

  .theme small{
    margin-top:0;
    font-size:11px;
  }

  .customize-look{
    margin-top:14px;
  }

  .show-shelf{
    width:calc(100vw - 20px);
    border-radius:15px 15px 0 0;
    padding:6px 9px max(7px,env(safe-area-inset-bottom));
  }

  .show-shelf .preview-top{
    padding-bottom:4px;
  }

  .show-shelf .show-profile{
    grid-template-columns:62px 1fr;
    gap:9px;
    min-height:62px;
  }

  .show-shelf .cover-preview{
    width:62px;
    padding:7px;
    border-radius:9px;
  }

  .show-shelf .cover-preview h2{
    font-size:11px;
  }

  .show-shelf .cover-preview p,
  .show-shelf .cover-category{
    display:none;
  }

  .show-shelf .profile-kicker{
    font-size:7px;
  }

  .show-shelf .profile-copy h2{
    font-size:16px;
    margin:1px 0 4px;
  }

  .show-shelf .profile-copy p{
    display:none;
  }

  .show-shelf .profile-meta{
    gap:4px;
  }

  .show-shelf .profile-meta span{
    font-size:7px;
    padding:3px 5px;
    max-width:49%;
  }

  .show-shelf .profile-meta span:nth-child(n+3){
    display:none;
  }
}

@media(max-width:460px){
  :root{--sticky-shelf-height:92px}

  .step-viewport{
    height:clamp(380px,calc(100dvh - var(--sticky-shelf-height) - 146px),680px);
    min-height:380px;
    max-height:none;
  }

  .theme-grid{
    gap:8px;
  }

  .theme{
    min-height:136px;
    padding:10px 8px;
    gap:6px;
  }

  .theme-visual{
    width:66px;
    height:66px;
    border-radius:12px;
    padding:8px;
  }

  .theme strong{
    font-size:15px;
  }

  .theme small{
    font-size:10px;
  }

  .show-shelf{
    width:calc(100vw - 16px);
  }
}

/* Very short viewports should still stay usable without pushing navigation under the shelf. */
@media(max-height:650px) and (max-width:720px){
  .step-viewport{
    height:clamp(330px,calc(100dvh - var(--sticky-shelf-height) - 135px),500px);
    min-height:330px;
  }

  .theme{
    min-height:124px;
  }

  .theme-visual{
    width:60px;
    height:60px;
  }
}

/* The brand builder is still part of the launch wizard. Keep the same shell contract on
   Step 3 instead of letting brand-specific CSS hide the shelf or consume the shelf space. */
body.brand-mode{
  padding-bottom:calc(var(--sticky-shelf-height) + env(safe-area-inset-bottom)) !important;
}

body.brand-mode .show-shelf{
  display:block !important;
}

body.brand-mode .step-viewport{
  height:clamp(360px,calc(100dvh - var(--sticky-shelf-height) - 165px),680px) !important;
}

body.brand-mode .brand-builder{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

body.brand-mode .brand-stage{
  width:100%;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr);
}

@media(max-width:720px){
  body.brand-mode .step-viewport{
    height:clamp(390px,calc(100dvh - var(--sticky-shelf-height) - 150px),700px) !important;
    min-height:390px !important;
    max-height:none !important;
  }

  body.brand-mode .brand-builder{
    width:100% !important;
  }
}

@media(max-width:460px){
  body.brand-mode .step-viewport{
    height:clamp(380px,calc(100dvh - var(--sticky-shelf-height) - 146px),680px) !important;
    min-height:380px !important;
    max-height:none !important;
  }
}

@media(max-height:650px) and (max-width:720px){
  body.brand-mode .step-viewport{
    height:clamp(330px,calc(100dvh - var(--sticky-shelf-height) - 135px),500px) !important;
    min-height:330px !important;
  }
}