/* A viewport workspace: the map gets all space left by navigation and its toolbar. */
html:is(.catalog-active, .make-buy-active, .business-active) { height: 100%; overflow: hidden; scroll-padding-top: 0; }
body:is(.catalog-active, .make-buy-active, .business-active) {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:is(.catalog-active, .make-buy-active, .business-active) > main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:is(.catalog-active, .make-buy-active, .business-active) > .footer { display: none; }
.catalog-page:not([hidden]) {
  width: 100%;
  max-width: none;
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.catalog-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.catalog-header h1 { font-size:27.5px; font-weight: 500; letter-spacing: -.035em; }
.catalog-header .segmented { padding: 3px; border-radius: 10px; width: auto; }
.catalog-header .segmented button { font-size:15px; padding: 8px 15px; flex: none; border-radius: 7px; }
.catalog-map-view:not([hidden]) { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: stretch; }
.catalog-map-view .world-panel {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 44%, #eef4e9 0%, #e9efe4 80%);
}
.catalog-map-view .scene-stage { inset: 64px 8px 54px; }
.catalog-map-view .world-top { inset: 12px 14px auto; gap: 12px; }
.catalog-map-view .world-tabs { width: auto; justify-content: flex-start; background: #ffffffed; }
.catalog-map-view .world-tabs button { flex: none; padding: 9px 14px; font-size:15px; }
.map-tools { display: flex; align-items: center; gap: 12px; }
.map-demo-label { color: #738369; font-size:12.5px; white-space: nowrap; }
#catalog-help {
  width: 36px; height: 36px; flex: none;
  border: 1px solid #d1dcc9; border-radius: 50%;
  background: #ffffffed; color: #4c6542; font-size:20px;
}
#catalog-help:hover { background: #e3edda; }
.catalog-camera { position: absolute; right: 14px; bottom: 12px; z-index: 5; box-shadow: 0 3px 12px #22352e08; }
.catalog-camera button { width: 34px; height: 34px; }
.catalog-list-view:not([hidden]) { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 8px 16px 0; }
.catalog-list-view .catalog-toolbar { margin: 8px 0 16px; }
.catalog-page [hidden] { display: none; }
.map-coach {
  position: absolute; bottom: 14px; left: 14px;
  width: 300px; max-width: calc(100% - 28px);
  z-index: 7; padding: 18px;
  background: #22352ef5; color: #fff;
  border: 1px solid #415b46; border-radius: 14px;
  box-shadow: 0 8px 30px #1f33252b;
}
.coach-close { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; background: transparent; color: #b9c9b8; font-size:28.75px; border-radius: 7px; }
.coach-close:hover { background: #ffffff12; }
.coach-step { display: block; color: #bfd58e; font-size:11.25px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; padding-right: 22px; }
.map-coach h2 { font-size:21.25px; line-height: 1.3; font-weight: 500; letter-spacing: -.025em; padding-right: 10px; }
.coach-description { margin-top: 8px; font-size:15px; line-height: 1.65; color: #c4cec2; }
.coach-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.coach-dots { display: flex; gap: 5px; }
.coach-dots i { width: 5px; height: 5px; border-radius: 50%; background: #637960; }
.coach-dots i.active { width: 16px; border-radius: 3px; background: #d4ec8a; }
.coach-next { display: flex; align-items: center; gap: 18px; min-height: 36px; padding: 7px 12px; border-radius: 7px; background: #d4ec8a; color: #22352e; font-size:15px; }
.catalog-map-view .coach-target { outline: 2px solid #8ca35f; outline-offset: 4px; }
.catalog-map-view .map-pin.coach-target { outline: none; }
.catalog-map-view .map-pin.coach-target .pin-dot { box-shadow: 0 0 0 5px #d4ec8a99, 0 0 0 9px #7c9b5140; }
@media (max-width: 900px) {
  .catalog-page:not([hidden]) { padding-inline: 12px; padding-bottom: 12px; }
}
@media (max-width: 640px) {
  .catalog-page:not([hidden]) { padding: 8px; gap: 8px; }
  .catalog-header { gap: 8px; }
  .catalog-header h1 { font-size:21.25px; }
  .catalog-header .segmented button { padding: 7px 9px; font-size:13.75px; }
  .catalog-map-view .world-panel { border-radius: 13px; }
  .catalog-map-view .world-top { inset: 8px 8px auto; gap: 7px; }
  .catalog-map-view .world-tabs { flex: 1; min-width: 0; padding: 3px; gap: 2px; }
  .catalog-map-view .world-tabs button { padding: 8px 6px; font-size:12.5px; flex: 1; justify-content: center; gap: 5px; }
  .catalog-map-view .world-tabs svg { width: 13px; height: 13px; }
  .map-demo-label { display: none; }
  .map-tools { gap: 0; }
  #catalog-help { width: 32px; height: 32px; }
  .catalog-map-view .scene-stage { inset: 54px 4px 56px; }
  .catalog-camera { right: 8px; bottom: 8px; }
  .catalog-camera button { width: 32px; height: 32px; }
  .map-coach { left: 8px; bottom: 60px; width: 270px; max-width: calc(100% - 16px); padding: 14px; }
  .map-coach h2 { font-size:20px; }
  .coach-description { font-size:13.75px; line-height: 1.55; margin-top: 6px; }
  .coach-actions { margin-top: 10px; }
}
@media (max-height: 500px) {
  .catalog-page:not([hidden]) { padding: 6px 8px; gap: 6px; }
  .catalog-header h1 { font-size:21.25px; }
  .catalog-header .segmented button { padding: 5px 9px; font-size:12.5px; }
  .catalog-map-view .world-top { inset: 8px 10px auto; }
  .catalog-map-view .world-tabs button { padding: 6px 10px; }
  .catalog-map-view .scene-stage { inset: 48px 6px 44px; }
  .catalog-camera { bottom: 6px; }
  .catalog-camera button { width: 28px; height: 28px; }
  .map-coach { padding: 12px; bottom: 8px; width: 260px; }
  .coach-step { margin-bottom: 4px; }
  .coach-description { font-size:13.75px; line-height: 1.5; margin-top: 4px; }
  .coach-actions { margin-top: 8px; }
}