/* Mobile review layout. Keep warnings, controls and downloads available without
   changing viewer geometry, motion definitions or source assets. */

@media (max-width: 900px) {
  .app-nav {
    gap: 3px;
    padding-inline: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .app-nav button { scroll-snap-align: start; }

  .model-workspace {
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(380px, 54svh) auto;
    overflow: visible;
  }

  .model-workspace #view {
    min-height: 0;
    border-radius: 12px 12px 0 0;
  }

  .review-controls {
    min-height: 0;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    border-top: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 0 12px 12px;
  }

  .model-modebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px 12px;
  }

  .model-modebar select { width: 100%; min-width: 0; }
  .model-modebar span { grid-column: 1 / -1; }
  .quick-downloads { align-items: stretch; }

  .quick-downloads .button {
    flex: 1 1 190px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .bw02-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .app-header {
    height: auto;
    min-height: calc(66px + env(safe-area-inset-top, 0px));
    padding: calc(7px + env(safe-area-inset-top, 0px))
      calc(12px + env(safe-area-inset-right, 0px)) 7px
      calc(12px + env(safe-area-inset-left, 0px));
    gap: 8px;
  }

  .brand img { width: clamp(124px, 42vw, 155px); max-height: 42px; }
  .quiet { padding: 7px 9px; min-height: 42px; font-size: 12px; }

  .app-nav {
    padding: 5px calc(9px + env(safe-area-inset-left, 0px))
      5px calc(9px + env(safe-area-inset-right, 0px));
    scroll-padding-inline: 10px;
  }

  .app-nav button { min-height: 44px; padding: 8px 11px; font-size: 12px; }

  .page,
  .bw02-page {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    padding-top: 20px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }

  .hero { padding: clamp(17px, 5vw, 24px); gap: 19px; }
  .hero h1 { font-size: clamp(33px, 10vw, 39px); }

  .hero .button-row button {
    flex: 1 1 145px;
    min-width: 0;
    white-space: normal;
  }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats > div { min-width: 0; padding-left: 8px; }
  .stats b { font-size: 25px; }
  .stats span { display: block; overflow-wrap: anywhere; }
  .quick-downloads { gap: 7px; }

  .quick-downloads .button {
    flex: 1 1 138px;
    min-height: 46px;
    padding: 9px 8px;
    font-size: 11px;
  }

  .model-workspace { grid-template-rows: minmax(280px, 50svh) auto; gap: 0; }
  .review-controls { padding: 15px 13px; }

  .model-page .section-heading > div:last-child {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .model-page .section-heading > div:last-child .status-pill {
    max-width: 100%;
    white-space: normal;
  }

  .concept-controls { padding: 13px; }
  .concept-controls input[type="range"] { min-height: 44px; touch-action: pan-y; }
  .bw02-viewport { height: min(62svh, 560px); min-height: 280px; }
  .bw02-modelbar button { min-width: 0; overflow-wrap: anywhere; }
  .bw02-view-tools button { min-height: 44px; }
}

@media (max-width: 360px) {
  .page,
  .bw02-page {
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }

  .hero .button-row button { flex-basis: 100%; }
  .quick-downloads .button { flex-basis: 128px; font-size: 10.5px; }
  .review-controls { padding-inline: 11px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .model-workspace { grid-template-rows: minmax(260px, 62svh) auto; }
  .bw02-viewport { height: 66svh; min-height: 260px; max-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

/* CC15: put the four common destinations first and expose the rest through More. */
.app-nav {
  position: sticky;
  overflow: visible;
  flex-wrap: wrap;
  align-items: center;
}

.app-nav .nav-primary {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.app-nav .nav-primary button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.app-nav .nav-more-toggle {
  flex: 0 0 auto;
  min-width: 62px;
  border: 1px solid #c7d2d8;
  font-weight: 700;
}

.app-nav .nav-more-toggle.has-current { border-color: var(--gold); }
.app-nav .nav-more-toggle.has-current::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}

.app-nav .nav-more-items {
  position: absolute;
  top: calc(100% + 4px);
  right: max(12px, calc((100vw - 1400px) / 2));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  box-shadow: 0 14px 36px #1730472e;
}

.app-nav .nav-more-items[hidden] { display: none !important; }
.app-nav .nav-more-items button {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  white-space: normal;
  text-align: left;
}

.model-stage {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
}

.model-stage #view {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  border-radius: 10px;
}

.model-stage .model-modebar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.review-controls-heading { margin: 0 0 12px; }
.model-review-heading .status-pill { white-space: normal; }
.model-downloads { max-width: 1600px; margin: 14px auto 0; }
.model-downloads > summary { cursor: pointer; font-weight: 700; }
.model-downloads .quick-downloads { margin-top: 12px; }

@media (max-width: 1000px) {
  .model-workspace {
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .model-stage #view {
    flex: 0 0 auto;
    height: min(56dvh, 680px);
    min-height: 320px;
  }
}

@media (max-width: 900px) {
  .app-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 4px;
    padding: 5px calc(9px + env(safe-area-inset-left, 0px))
      5px calc(9px + env(safe-area-inset-right, 0px));
    overflow: visible;
  }

  .app-nav .nav-primary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .app-nav .nav-primary button,
  .app-nav .nav-more-toggle {
    min-height: 48px;
    padding: 6px 3px;
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.12;
    overflow-wrap: normal;
    text-align: center;
  }

  .app-nav .nav-more-toggle { width: 100%; }
  .app-nav .nav-more-items {
    right: calc(9px + env(safe-area-inset-right, 0px));
    width: min(360px, calc(100vw - 18px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  .model-workspace { grid-template-rows: auto auto; }
  .model-stage { gap: 8px; padding: 8px; }
  .model-stage #view {
    height: min(54svh, 560px);
    min-height: 300px;
    max-height: 620px;
    border-radius: 12px;
  }
}

@media (max-width: 520px) {
  .model-stage #view { height: min(50svh, 560px); min-height: 280px; }
  .model-stage .model-modebar { padding: 10px; }
  .model-review-heading { gap: 12px; }
  .model-review-heading h1 { font-size: clamp(27px, 8vw, 36px); }
  .model-downloads { margin-top: 10px; }
}

@media (max-width: 360px) {
  .app-nav { grid-template-columns: minmax(0, 1fr) 58px; }
  .app-nav .nav-more-toggle { min-width: 0; }
  .app-nav .nav-primary button { padding-inline: 2px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .model-stage #view { height: 62svh; min-height: 260px; max-height: 500px; }
}

/* Bill's review starts with the actual model and its three common actions. */
.bw02-page{padding-top:22px}
.bw02-heading{margin-bottom:16px;gap:12px}
.bw02-heading h1{font-size:clamp(25px,3vw,36px);margin:4px 0 8px}
.bw02-heading p:not(.eyebrow){margin:0;font-size:13px}
.bw02-heading .eyebrow{font-size:10px}
.bw02-inspection{scroll-margin-top:72px}
.bill-review-actions{display:grid;gap:8px;margin-bottom:22px}
.bill-review-actions button{width:100%;min-height:44px;font-size:14px}
.bill-model-details{margin:14px 0;font-size:12px}
.bill-model-details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650}
.bill-model-details .bw02-facts{margin-top:6px}
.live-review-guide{position:relative;clear:both;padding:12px 16px;background:#f5f8fa;border-top:1px solid var(--line);color:var(--navy);text-align:left}
.live-review-guide[hidden]{display:none!important}
.live-review-guide .dialog-close{float:right;position:static;min-width:44px;min-height:44px;padding:4px;font-size:22px}
.live-review-guide h2{font-size:18px;margin:3px 0 7px}
.live-review-guide p{font-size:12px;line-height:1.5;margin:6px 0}
.live-review-guide .eyebrow{font-size:10px;margin-top:0}
.live-review-guide .check-label{font-size:11px;margin:8px 0;min-height:32px}
.live-review-guide .button-row{margin:8px 0 0;gap:8px}
.live-review-guide .button-row button{min-height:44px;font-size:12px;padding:8px 15px}
.live-review-guide>p:last-child{display:none}
.review-tour-focus{outline:2px solid var(--gold,#b68b50);outline-offset:-2px;border-radius:7px}
@media(min-width:901px){.bw02-review-panel{position:sticky;top:76px}.bw02-viewport{height:clamp(370px,58dvh,720px)}}
@media(max-width:900px){.bw02-inspection{scroll-margin-top:65px}.bw02-workspace{gap:12px}.bill-review-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bill-review-actions button{font-size:12px;padding:8px 6px}.bw02-review-panel{padding:16px}.live-review-guide{padding:10px 12px}.live-review-guide h2{font-size:17px}.live-review-guide .check-label{margin:4px 0}.bw02-heading .status-pill{font-size:10px}.bw02-viewport{height:48svh;min-height:280px}}

/* Original clocktower illustration from the existing Fredericksburg presentation.
   The tiled mark uses the site's unchanged official GO3D logo. */
.bw02-viewport,#view{isolation:isolate;background-color:#d4dedf;background-image:linear-gradient(90deg,#152f3d25,#152f3d0d),url('/review/clocktower-project-illustration.jpg');background-size:cover,auto 100%;background-position:center,72% center;background-repeat:no-repeat}
.bw02-viewport::after,#view::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url('/dashboard/go3d-studio-clean.svg');background-repeat:repeat;background-size:170px auto;opacity:.045}
.bw02-viewport canvas,#view canvas{background:transparent}
.clocktower-credit{position:absolute;bottom:6px;left:10px;z-index:2;pointer-events:none;font-size:9px;color:#294653;background:#ffffffb8;padding:3px 5px;border-radius:3px}
@media(max-width:520px){.bw02-viewport::after,#view::after{background-size:130px auto}.clocktower-credit{font-size:8px}.bw02-canvas-hint{bottom:28px}}

/* Reserve space for the inline guide, so reviewing never turns into a cover screen. */
.guide-open .bw02-viewport{height:clamp(240px,calc(100svh - 490px),510px);min-height:240px}
@media(max-width:900px){.guide-open .bw02-viewport{height:calc(100svh - 560px);min-height:200px}.guide-open .bw02-view-tools{display:flex;flex-wrap:nowrap;gap:4px;padding:8px}.guide-open .bw02-view-tools button{flex:1 1 44px;min-width:0;min-height:44px;padding:5px 3px;font-size:10px;white-space:normal}.guide-open .bw02-view-tools button[data-bw02-action=rotate]{margin:0}}
@media(min-width:700px) and (max-height:550px){.bw02-inspection.guide-open{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:start}.guide-open .bw02-modelbar,.guide-open .bw02-viewport,.guide-open .bw02-statusbar,.guide-open .bw02-view-tools{grid-column:1}.guide-open .live-review-guide{grid-column:2;grid-row:1 / 5;align-self:stretch;border-top:0;border-left:1px solid var(--line)}.guide-open .bw02-viewport{height:calc(100svh - 210px);min-height:170px}.guide-open .bw02-modelbar button{min-height:44px;padding:6px 9px}.guide-open .bw02-statusbar{min-height:32px;padding:6px 10px}.guide-open .bw02-statusbar p{font-size:10px}.guide-open .bw02-view-tools{padding:5px}.guide-open .bw02-view-tools button{min-height:44px}}