/* B077PT Academy keyboard geometry audit.
   The construction keyboard predates the generic application-family aspect-ratio
   rule. Keep its two-octave keybed and its teaching overlays in separate zones. */

html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .keyboard {
  width: 100% !important;
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  aspect-ratio: auto !important;
  padding: 0 9px 50px !important;
  overflow: hidden !important;
  position: relative !important;
}

html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .whiteRow {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .white {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 2px 10px !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .blackKey {
  top: 0 !important;
  width: clamp(24px, 4.2%, 36px) !important;
  height: 98px !important;
  max-height: 98px !important;
  overflow: hidden !important;
}

/* White-key role advisers live below the black-key boundary. Black-key advisers
   remain inside the black key. Both use the same visible badge treatment. */
html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .white > small,
html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .blackKey > small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 22px !important;
  padding: 2px 7px !important;
  border: 1px solid #dcecff !important;
  border-radius: 7px !important;
  background: #07101f !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 7px #0009 !important;
  text-shadow: none !important;
  z-index: 20 !important;
}

html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .white > small {
  top: 104px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .blackKey > small {
  top: 7px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Geometry and Trapped B/B-flat use the same adviser contract while retaining
   their deeper lower rail for the measured fifth/tritone explanation. */
html.cwChordFamily body.cwConstructionCompact #geoKeyboard,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  aspect-ratio: auto !important;
  padding: 0 9px 58px !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .whiteRow,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .whiteRow {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .white,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .white {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 2px 4px !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .blackKey,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .blackKey {
  top: 0 !important;
  width: clamp(24px, 4.2%, 36px) !important;
  height: 98px !important;
  max-height: 98px !important;
  overflow: hidden !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .white > small,
html.cwChordFamily body.cwConstructionCompact #geoKeyboard .blackKey > small,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .white > small,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .blackKey > small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 22px !important;
  padding: 2px 7px !important;
  border: 1px solid #dcecff !important;
  border-radius: 7px !important;
  background: #07101f !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 7px #0009 !important;
  text-shadow: none !important;
  z-index: 20 !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .white > small,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .white > small {
  top: 112px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .blackKey > small,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .blackKey > small {
  top: 7px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .geometryCountBadge,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .geometryCountBadge {
  bottom: 26px !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .cwExactIntervalBracket,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .cwExactIntervalBracket {
  bottom: 38px !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .cwExactIntervalAnchor,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .cwExactIntervalAnchor {
  bottom: 55px !important;
}

html.cwChordFamily body.cwConstructionCompact #geoKeyboard .cwExactIntervalLabel,
html.cwChordFamily body.cwConstructionCompact #trapKeyboard .cwExactIntervalLabel {
  bottom: 3px !important;
}

@media (max-width: 640px) {
  html.cwChordFamily body.cwConstructionCompact .cwConstructionBuild .keyboard {
    width: 620px !important;
    min-width: 620px !important;
    height: 232px !important;
    min-height: 232px !important;
    max-height: 232px !important;
  }
}

/* Resolution Preview uses one stationary two-octave keybed.  The sounding
   harmony is painted by crossfading overlays; fixed key identities never move. */
html.cwChordFamily body.cwConstructionCompact #progKeyboard {
  width: 100% !important;
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  aspect-ratio: auto !important;
  padding: 0 9px 9px !important;
  overflow: hidden !important;
  position: relative !important;
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .whiteRow {
  height: 100% !important;
  overflow: hidden !important;
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .white {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .blackKey {
  top: 0 !important;
  width: clamp(24px, 4.2%, 36px) !important;
  height: 98px !important;
  max-height: 98px !important;
  overflow: hidden !important;
  isolation: isolate;
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwFixedKeyLabel {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 6;
  transform: translateX(-50%);
  color: #06101e;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .blackKey .cwFixedKeyLabel {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 9px;
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwResolutionFill {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.42, 0, .22, 1);
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwResolutionFill.role-root { background: rgba(255, 227, 109, .58); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwResolutionFill.role-3rd { background: rgba(118, 228, 133, .52); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwResolutionFill.role-5th { background: rgba(255, 175, 77, .52); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwResolutionFill.role-7th { background: rgba(205, 160, 255, .56); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .blackKey .cwResolutionFill.role-root { background: linear-gradient(#ffe36d, #9f7d00); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .blackKey .cwResolutionFill.role-3rd { background: linear-gradient(#76e485, #1e6b32); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .blackKey .cwResolutionFill.role-5th { background: linear-gradient(#ffaf4d, #8a4400); }
html.cwChordFamily body.cwConstructionCompact #progKeyboard .blackKey .cwResolutionFill.role-7th { background: linear-gradient(#cda0ff, #6b35a8); }

html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionPrepared .cwResolutionSource,
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionTransition .cwResolutionDestination,
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionSettled .cwResolutionDestination { opacity: 1; }
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionPrepared .cwResolutionDestination,
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionTransition .cwResolutionSource,
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionSettled .cwResolutionSource { opacity: 0; }

html.cwChordFamily body.cwConstructionCompact #progKeyboard .cwResolutionRole {
  position: absolute;
  top: 116px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 2px 5px;
  transform: translateX(-50%);
  border: 1px solid #dcecff;
  border-radius: 7px;
  background: #07101f;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 2px 7px #0009;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.42, 0, .22, 1);
}

html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionPrepared .cwResolutionSource,
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionTransition .cwResolutionDestination,
html.cwChordFamily body.cwConstructionCompact #progKeyboard.resolutionSettled .cwResolutionDestination { opacity: 1; }

@media (max-width: 640px) {
  html.cwChordFamily body.cwConstructionCompact #progKeyboard {
    width: 620px !important;
    min-width: 620px !important;
  }
}