/* Mobile C12AW uses the same page context and isolated viewer as W221A. */
#wedge-open-model { display: none; }
body.wedgeviewer-open {
  position: fixed;
  top: var(--wedgeviewer-scroll, 0);
  left: 0;
  right: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body.wedgeviewer-open > :not(#wedgeviewer-dialog) { visibility: hidden; }
body.wedgeviewer-open .stage-smoke { display: none !important; }
#wedgeviewer-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #eee;
  background: linear-gradient(90deg,#03040535,#030405ab 35%,#030405b5 65%,#03040535),url('assets/hex-metal-mobile.webp') left center/auto 100% no-repeat #050607;
  overflow: hidden;
  overscroll-behavior: none;
  isolation: isolate;
}
#wedgeviewer-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0,1fr); }
#wedgeviewer-dialog::backdrop { background: #08090b; }
#wedgeviewer-dialog > .header { grid-row: 1; min-height: 60px; z-index: 0 !important; }
.wedgeviewer-page-context { grid-row: 2; min-width: 0; position: relative; z-index: 0; }
#wedgeviewer-dialog .subwoofer-heading { padding: 8px 5% 0; margin: 0; }
#wedgeviewer-dialog .subwoofer-heading h1 { margin: 0; }
#wedgeviewer-dialog .wedge-stage {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 1 !important;
}
#wedgeviewer-dialog .model-view {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  background: transparent !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: none !important;
  z-index: 0 !important;
}
#wedgeviewer-dialog canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none !important; pointer-events: auto !important; }
#wedgeviewer-dialog figcaption,
#wedgeviewer-dialog #wedge-open-model { display: none !important; }
.wedgeviewer-toolbar {
  position: absolute;
  inset: auto auto calc(14px + env(safe-area-inset-bottom, 0px)) 18px;
  z-index: 3;
}
.wedgeviewer-toolbar button,
#wedgeviewer-dialog .viewer-actions button {
  position: static !important;
  transform: none !important;
  width: auto;
  min-height: 44px;
  margin: 0;
  border: 1px solid #4a4d55;
  padding: 10px 14px;
  color: #eee;
  background: #101114;
  box-shadow: none;
  font: 500 12px system-ui, sans-serif !important;
  cursor: pointer;
}
#wedgeviewer-dialog .viewer-actions {
  position: absolute !important;
  inset: auto 18px calc(14px + env(safe-area-inset-bottom, 0px)) auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transform: none !important;
  z-index: 2;
  pointer-events: none;
}
#wedgeviewer-dialog .viewer-actions button { pointer-events: auto; }
#wedgeviewer-dialog #feature-toggle { display: block !important; order: -2; }
#wedgeviewer-dialog #model-features { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#wedgeviewer-dialog #mount-tripod { order: -1; }
#wedgeviewer-dialog #view-3d { position: absolute; bottom: 120px; }
@media(max-width:760px) {
  body.floating-wedge { height: 100dvh; min-height: 0; display: grid; grid-template-rows: 60px minmax(0,1fr) 26px; }
  body.floating-wedge > .header { min-height: 60px; }
  .floating-wedge #wedge { display: flex; flex-direction: column; min-height: 0; gap: 0; padding: 6px 5% 0; }
  .floating-wedge .subwoofer-heading { display: block; }
  .floating-wedge .subwoofer-heading h1 { font-size: clamp(30px,8vw,38px); line-height: .98; margin: 0; }
  .floating-wedge .subwoofer-heading .eyebrow { margin-bottom: 5px; }
  .floating-wedge .subwoofer-heading .wedge-metrics { margin-top: 7px; gap: 20px; }
  .floating-wedge .subwoofer-heading .wedge-metrics strong { font-size: 20px; margin-bottom: 2px; }
  .floating-wedge .subwoofer-heading .wedge-metrics > span { font-size: 7px; }
  body.floating-wedge #wedge .wedge-stage.mobile-inline-3d { flex: 1; height: auto !important; min-height: 60px !important; margin: 0 0 6px !important; }
  .floating-wedge .mobile-inline-3d .model-view { width: 100%; height: 100%; opacity: 1; z-index: 0; }
  .floating-wedge #wedge-open-model { display: block; position: absolute; bottom: 0; right: 0; z-index: 1; min-height: 44px; padding: 10px 14px; border: 1px solid #4a4d55; background: #101114; color: #eee; font-size: 12px; }
  .floating-wedge .wedge-info { position: relative; inset: auto; flex: none; width: 90%; margin: 0 auto 6px; padding: 0; background: transparent; gap: 8px; z-index: auto; }
  .floating-wedge .wedge-info > .eyebrow,
  .floating-wedge #w-info-toggle { display: none; }
  .floating-wedge .wedge-info .point-tabs { gap: 22px; }
  .floating-wedge .wedge-info .point-tabs button { font-size: 12px; }
  .floating-wedge .wedge-info .point-tabs button { padding: 8px 0; }
  /* Stack chapters in one grid cell so the longest chapter reserves the
     same space even when another chapter is selected. This also keeps the
     flexible model preview above the panel from resizing on every turn. */
  .floating-wedge .wedge-info #w-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .floating-wedge .wedge-info #w-features > .wedge-chapter {
    grid-area: 1 / 1;
    min-width: 0;
  }
  .floating-wedge .wedge-info #w-features > .wedge-chapter[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
  }
  .floating-wedge .wedge-info #w-features > .wedge-chapter-nav {
    grid-area: 2 / 1;
  }
  .floating-wedge .wedge-chapter h2 { font-size: 20px; margin-bottom: 6px; }
  .floating-wedge .wedge-chapter p,
  .floating-wedge .wedge-chapter li,
  .floating-wedge .wedge-chapter dd { font-size: 12px; line-height: 1.35; }
  .floating-wedge .wedge-chapter p+p { margin-top: 6px; }
  .floating-wedge .wedge-chapter li { margin-bottom: 3px; }
  .floating-wedge .wedge-chapter dt { font-size: 12px; margin-top: 6px; }
  .floating-wedge .wedge-info th,
  .floating-wedge .wedge-info td { padding: 4px; font-size: 11px; line-height: 1.25; }
  .floating-wedge .wedge-chapter-nav button { min-height: 32px; padding: 6px 14px; }
  .floating-wedge footer { margin-top: 0; padding: 4px 0; }
}