/* VIEWPORT-FIT OVERRIDES — compact, equal-sized Parent/Child phones.
   Header and footer remain fixed; desktop Bedtime content has no inner scroll.
   Phone shells share the same natural dimensions and are scaled together, so
   their top and bottom edges stay aligned without returning to the oversized layout. */
.project-demo-window {
  top: 10px;
  bottom: 10px;
  height: auto;
  max-height: none;
  min-height: 0;
}
.project-demo-window > .project-demo-header {
  flex: 0 0 auto;
  padding: 12px 20px 10px;
}
.project-demo-heading h2 { margin: 6px 0 3px; font-size: clamp(20px, 1.8vw, 25px); }
.project-demo-heading p { font-size: 12px; line-height: 1.4; }
.project-demo-window > .project-demo-footer {
  flex: 0 0 auto;
  padding: 8px 18px 9px;
}
.project-demo-footer .demo-sample-note { margin: 0 0 6px; font-size: 10px; line-height: 1.3; }
.project-demo-footer .demo-footer-actions a { min-height: 32px; }
.project-demo-footer .demo-link-status { margin-top: 5px; font-size: 9px; line-height: 1.25; }
.project-demo-content.is-bedtime-demo {
  --bedtime-phone-scale: .68;
  --bedtime-phone-stage: 390px;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 20px 42px var(--bedtime-phone-stage) 32px auto;
  align-content: start;
  gap: 5px;
  min-height: 0;
  overflow: hidden;
  padding: 9px 18px 8px;
  scrollbar-width: none;
}
.project-demo-content.is-bedtime-demo::-webkit-scrollbar { display: none; }
.project-demo-content.is-bedtime-demo .demo-app-top { min-height: 0; height: 20px; margin: 0; font-size: 9px; }
.project-demo-content.is-bedtime-demo .bedtime-demo-instruction {
  min-height: 0;
  height: 42px;
  margin: 0;
  padding: 5px 9px;
  gap: 8px;
}
.project-demo-content.is-bedtime-demo .bedtime-instruction-icon { flex-basis: 27px; width: 27px; height: 27px; font-size: 16px; }
.project-demo-content.is-bedtime-demo .bedtime-demo-instruction strong { font-size: 11px; }
.project-demo-content.is-bedtime-demo .bedtime-demo-instruction small { font-size: 9px; line-height: 1.25; }
.project-demo-content.is-bedtime-demo .bedtime-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  height: var(--bedtime-phone-stage);
  min-height: 0;
  margin: 0;
  overflow: visible;
}
.project-demo-content.is-bedtime-demo .bedtime-phone-wrap {
  position: relative;
  display: block;
  height: var(--bedtime-phone-stage);
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.project-demo-content.is-bedtime-demo .bedtime-phone-caption {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 18px;
  min-height: 18px;
  margin: 0;
  font-size: 8px;
  line-height: 18px;
}
.project-demo-content.is-bedtime-demo .bedtime-phone-caption b { padding: 2px 6px; font-size: 7px; }
.project-demo-content.is-bedtime-demo .bedtime-demo-phone {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 440px;
  height: 535px;
  min-height: 535px;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  transform: translateX(-50%) scale(var(--bedtime-phone-scale));
  transform-origin: top center;
}
.project-demo-content.is-bedtime-demo .bedtime-phone-screen {
  width: 100%;
  height: 521px;
  min-height: 521px;
  box-sizing: border-box;
}
.project-demo-content.is-bedtime-demo .bedtime-demo-result {
  min-height: 0;
  height: 32px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 6px 9px;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.project-demo-content.is-bedtime-demo .bedtime-demo-disclaimer {
  min-height: 0;
  margin: 0 1px;
  font-size: 8px;
  line-height: 1.25;
}

/* Short laptops: shrink both phones equally while preserving fixed header/footer. */
@media (max-height: 760px) and (min-width: 701px) {
  .project-demo-window { top: 7px; bottom: 7px; }
  .project-demo-window > .project-demo-header { padding: 9px 17px 7px; }
  .project-demo-heading h2 { font-size: 21px; }
  .project-demo-heading p { font-size: 10px; line-height: 1.3; }
  .project-demo-window > .project-demo-footer { padding: 6px 15px 7px; }
  .project-demo-footer .demo-sample-note { font-size: 9px; margin-bottom: 4px; }
  .project-demo-footer .demo-footer-actions a { min-height: 29px; }
  .project-demo-content.is-bedtime-demo {
    --bedtime-phone-scale: .65;
    --bedtime-phone-stage: 370px;
    grid-template-rows: 18px 38px var(--bedtime-phone-stage) 29px auto;
    gap: 4px;
    padding: 7px 14px 6px;
  }
  .project-demo-content.is-bedtime-demo .demo-app-top { height: 18px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-instruction { height: 38px; padding: 4px 8px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-result { height: 29px; padding: 5px 8px; }
}
@media (max-height: 660px) and (min-width: 701px) {
  .project-demo-content.is-bedtime-demo {
    --bedtime-phone-scale: .56;
    --bedtime-phone-stage: 320px;
    grid-template-rows: 17px 35px var(--bedtime-phone-stage) 27px auto;
    gap: 3px;
    padding-top: 6px;
    padding-bottom: 5px;
  }
  .project-demo-content.is-bedtime-demo .demo-app-top { height: 17px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-instruction { height: 35px; }
  .project-demo-content.is-bedtime-demo .bedtime-phone-caption { height: 16px; line-height: 16px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-phone { top: 18px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-result { height: 27px; }
}

/* Tablet: keep paired phones compact and aligned side by side. */
@media (min-width: 561px) and (max-width: 980px) {
  .project-demo-window { top: 7px; bottom: 7px; left: 9px; right: 9px; width: auto; }
  .project-demo-content.is-bedtime-demo {
    --bedtime-phone-scale: .64;
    --bedtime-phone-stage: 368px;
    grid-template-rows: 18px 38px var(--bedtime-phone-stage) 29px auto;
    padding-left: 11px;
    padding-right: 11px;
  }
  .project-demo-content.is-bedtime-demo .bedtime-demo-phone { width: 440px; }
}

/* Short tablet/laptop viewport: grow phones enough to use the lower blank space,
   while keeping the fixed footer visible and avoiding desktop content scrolling. */
@media (min-width: 561px) and (max-width: 980px) and (max-height: 760px) {
  .project-demo-content.is-bedtime-demo {
    --bedtime-phone-scale: .64;
    --bedtime-phone-stage: 368px;
    grid-template-rows: 18px 38px var(--bedtime-phone-stage) 29px auto;
  }
}
@media (min-width: 561px) and (max-width: 980px) and (max-height: 660px) {
  .project-demo-content.is-bedtime-demo {
    --bedtime-phone-scale: .56;
    --bedtime-phone-stage: 320px;
  }
}

/* Narrow phones: keep the dialog fixed; only the phone stack may scroll. */
@media (max-width: 560px) {
  .project-demo-window { top: 7px; bottom: 7px; left: 7px; right: 7px; width: auto; }
  .project-demo-window > .project-demo-header { padding: 9px 11px 8px; gap: 8px; }
  .project-demo-heading h2 { font-size: 19px; }
  .project-demo-heading p { font-size: 10px; }
  .project-demo-window > .project-demo-footer { padding: 7px 9px; }
  .project-demo-footer .demo-sample-note { font-size: 9px; }
  .project-demo-footer .demo-footer-actions { gap: 6px; }
  .project-demo-footer .demo-footer-actions a { min-height: 29px; padding: 0 8px; font-size: 9px; }
  .project-demo-content.is-bedtime-demo {
    display: block;
    min-height: 0;
    overflow-y: auto;
    padding: 9px 9px 12px;
    scrollbar-color: rgba(0,255,151,.35) rgba(0,0,0,.18);
  }
  .project-demo-content.is-bedtime-demo .demo-app-top { height: auto; min-height: 20px; margin-bottom: 7px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-instruction { height: auto; min-height: 40px; margin-bottom: 10px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 12px;
  }
  .project-demo-content.is-bedtime-demo .bedtime-phone-wrap { height: auto; min-height: 0; }
  .project-demo-content.is-bedtime-demo .bedtime-phone-caption { position: static; height: auto; margin: 0 0 6px; line-height: normal; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-phone {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 330px);
    height: auto;
    min-height: 469px;
    max-width: 330px;
    margin: 0 auto;
    transform: none;
  }
  .project-demo-content.is-bedtime-demo .bedtime-phone-screen { height: auto; min-height: 455px; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-result { height: auto; min-height: 32px; margin-top: 10px; white-space: normal; }
  .project-demo-content.is-bedtime-demo .bedtime-demo-disclaimer { margin-top: 8px; }
}


/* ALWAYS-VISIBLE PROJECT DEMO CLOSE CONTROL — 2026-11-01
   Keep the X pinned to the top-right of every project demo window, above
   the header decoration and independent of heading length or content scroll. */
.project-demo-window {
  isolation: isolate;
}
.project-demo-window > .project-demo-header {
  position: relative;
  z-index: 5;
  padding-right: 66px;
}
.project-demo-window > .project-demo-header .project-demo-heading {
  min-width: 0;
  flex: 1 1 auto;
}
.project-demo-window > .project-demo-header .project-demo-close {
  position: absolute !important;
  z-index: 30 !important;
  top: 11px;
  right: 13px;
  display: grid !important;
  place-items: center;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  min-height: 40px;
  padding: 0 !important;
  margin: 0;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none;
  color: #c8ffe4;
  border: 1px solid rgba(113,255,191,.58);
  border-radius: 11px;
  background: rgba(0,23,13,.96);
  box-shadow: 0 0 0 3px rgba(0,8,4,.65), 0 0 18px rgba(0,255,157,.2);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.project-demo-window > .project-demo-header .project-demo-close:hover,
.project-demo-window > .project-demo-header .project-demo-close:focus-visible {
  color: #03130b;
  border-color: #8affc7;
  background: #67ffb5;
  outline: 2px solid rgba(138,255,199,.45);
  outline-offset: 2px;
  box-shadow: 0 0 24px rgba(0,255,157,.45);
}
@media (max-width: 560px) {
  .project-demo-window > .project-demo-header { padding-right: 49px; }
  .project-demo-window > .project-demo-header .project-demo-close {
    top: 7px; right: 8px; width: 34px !important; min-width: 34px;
    height: 34px !important; min-height: 34px; font-size: 24px;
  }
}


/* MODAL HEADER VISIBILITY FIX — 2026-11-01
   Project demo dialog is moved outside <main> so its z-index is not trapped
   beneath the sticky navigation. Leave a measured gap below the site header. */
.project-demo-backdrop {
  top: 54px;
  z-index: 10020;
}
.project-demo-window {
  top: 64px;
  bottom: 10px;
  max-height: none;
  z-index: 10021;
}
.project-demo-window > .project-demo-header {
  min-height: 72px;
  align-items: center;
  padding: 12px 70px 10px 22px;
}
.project-demo-window > .project-demo-header .project-demo-heading {
  min-width: 0;
  flex: 1 1 auto;
}
.project-demo-window > .project-demo-header .project-demo-heading h2 {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 100%;
}
.project-demo-window > .project-demo-header .project-demo-close {
  top: 50%;
  right: 14px;
  transform: translateY(-50%) !important;
}
@media (max-width: 980px) {
  .project-demo-backdrop { top: 70px; }
  .project-demo-window { top: 80px; left: 14px; right: 14px; width: auto; }
}
@media (max-width: 700px) {
  .project-demo-backdrop { top: 68px; }
  .project-demo-window { top: 78px; left: 7px; right: 7px; }
  .project-demo-window > .project-demo-header {
    min-height: 62px;
    padding: 9px 49px 8px 11px;
    gap: 8px;
  }
  .project-demo-window > .project-demo-header .project-demo-heading h2 {
    font-size: 19px;
  }
  .project-demo-window > .project-demo-header .project-demo-close {
    top: 50%; right: 8px; width: 34px !important; min-width: 34px;
    height: 34px !important; min-height: 34px;
  }
}