/* Homepage only; loaded by the existing desktop request branch.
   1080p at 150% has a 1280px CSS viewport, with browser chrome reducing height. */
body[data-mobile="false"] {
  --sidebar-width: clamp(150px, 15vw, 240px);
  --main-width: min(47vw, 900px);
  --page-top: clamp(18px, 3dvh, 30px);
  --desktop-bottom-padding: 34px;
  background: #fafafa;
  overflow: auto;
}
body[data-mobile="false"] .tool-page {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-width) var(--main-width) minmax(0, 1fr);
  grid-template-rows: minmax(180px, 1fr) auto;
  gap: 54px 0;
  width: 100%;
  height: 100dvh;
  min-height: 420px;
  padding: var(--page-top) 20px 34px 0;
  border: 0;
  background: #fafafa;
  overflow: visible;
}
body[data-mobile="false"] .topbar {
  position: absolute;
  inset: var(--page-top) auto auto 20px;
  display: block;
  width: calc(var(--sidebar-width) - 40px);
  min-height: 0;
  padding: 0;
}
body[data-mobile="false"] .brand-group { display: flex; align-items: center; gap: 18px; }
body[data-mobile="false"] .brand-name { flex-shrink: 0; }
body[data-mobile="false"] .menu-icon { position: static; color: #aaa; }
body[data-mobile="false"] .menu-icon svg { stroke: currentColor; }
body[data-mobile="false"] .account-pill {
  position: relative;
  margin-top: 48px;
  padding: 0;
  height: 24px;
  gap: 10px;
  background: transparent;
}
body[data-mobile="false"] .account-pill .composer-m09-button {
  position: absolute;
  top: 72px;
  left: 22px;
  margin: 0;
}
body[data-mobile="false"] .workspace {
  grid-column: 2;
  grid-row: 1;
  display: block;
  height: 100%;
  padding: 0;
  min-width: 0;
  overflow: visible;
}
body[data-mobile="false"] .country-stage,
body[data-mobile="false"] .country-map-wrap { height: 100%; }
body[data-mobile="false"] .country-map-wrap { position: static; }
body[data-mobile="false"] .country-map-card {
  height: 100%;
  min-height: 0;
  background: #fff;
}
body[data-mobile="false"] .country-map {
  height: 100% !important;
  max-height: none;
}
body[data-mobile="false"] .country-walk {
  position: absolute;
  right: 8px;
  top: 6px;
  z-index: 2;
  width: auto;
  margin: 0;
}
body[data-mobile="false"] .map-footer { margin: 0; min-height: 0; }
body[data-mobile="false"] .country-population {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  pointer-events: none;
}
body[data-mobile="false"] .map-footer-right {
  position: absolute;
  left: calc(100% + 30px);
  top: 0;
  --action-gap: clamp(12px, 2.5vw, 44px);
  gap: var(--action-gap);
}
/* Population takes the mobile menu's corner; retain menu access in the sidebar. */
body[data-mobile="false"] .country-map-card > .map-menu { display: grid; left: 12px; bottom: 12px; }
body[data-mobile="false"] .country-audio-controls { right: 12px; bottom: 12px; }
body[data-mobile="false"] .bottom-controls {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
  gap: 14px;
  min-width: 0;
}
body[data-mobile="false"] .composer { height: 82px; background: #fff; }
body[data-mobile="false"] .composer-input-wrap {
  top: 10px;
  left: 21.5px;
  right: 16px;
  height: 24px;
}
body[data-mobile="false"] .mode-bar { background: transparent; min-height: 48px; padding: 0; }
body[data-mobile="false"] .mode-demo { display: none; }
body[data-mobile="false"] .mode-bar .previous-button { left: calc(50% - 76.544px); }
body[data-mobile="false"] .mode-bar #countrySpeak { left: calc(50% + 92px); }
body[data-mobile="false"] .mode-pin {
  position: fixed;
  top: calc(var(--page-top) + 194px);
  left: 24px;
  color: #aaa;
  font-size: 14px;
}
body[data-mobile="false"] .mode-pin svg { display: none; }
body[data-mobile="false"] .mode-pin::after { content: attr(aria-label); }
body[data-mobile="false"] .location-candidates {
  position: absolute;
  inset: 40px 0 36px;
  width: 100%;
  max-height: calc(100% - 76px);
  overflow-y: auto;
  z-index: 3;
}
body[data-mobile="false"] .location-status { bottom: 8px; z-index: 4; }
@media (max-width: 1000px) {
  body[data-mobile="false"] { --sidebar-width: 140px; --main-width: calc(100vw - 420px); }
  body[data-mobile="false"] .map-footer-right { left: calc(100% + 10px); --action-gap: 4px; }
}
@media (max-height: 600px) {
  body[data-mobile="false"] { --desktop-bottom-padding: 12px; }
  body[data-mobile="false"] .tool-page { gap: 44px 0; padding-bottom: 12px; }
  body[data-mobile="false"] .account-pill { margin-top: 30px; }
}

/* 1.01: desktop composer expansion and initial/result layout. */
body[data-mobile="false"] .composer.is-editing {
  height: calc(var(--content-height) + 58px);
}
body[data-mobile="false"] .composer.is-editing .composer-input-wrap,
body[data-mobile="false"] .composer.is-focused .composer-input-wrap {
  height: var(--content-height);
}
body[data-mobile="false"] .composer #leaveInput { display: none !important; }
body[data-mobile="false"] .tool-page.is-initial .bottom-controls {
  grid-row: 1 / 3;
  align-self: center;
  position: relative;
  z-index: 2;
}
body[data-mobile="false"] .tool-page.is-initial .workspace {
  grid-row: 1 / 3;
}
body[data-mobile="false"] .tool-page.is-initial .location-candidates {
  inset: 0 0 auto;
  max-height: calc(50% - 110px);
}
body[data-mobile="false"] .tool-page.is-initial .location-status {
  top: calc(50% + 110px);
  bottom: auto;
}
body[data-mobile="false"] .desktop-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  cursor: pointer;
}
body[data-mobile="false"] .account-pill,
body[data-mobile="false"] .mode-pin { color: #777; }
body[data-mobile="false"] .desktop-account .avatar-placeholder {
  display: grid;
  place-items: center;
  background: #fff;
}
body[data-mobile="false"] .desktop-account .avatar-placeholder svg {
  display: none;
  width: 12px;
  height: 12px;
}
body[data-mobile="false"] .desktop-account[aria-pressed="true"] .avatar-placeholder { background: #28a745; }
body[data-mobile="false"] .desktop-account[aria-pressed="true"] .avatar-placeholder svg { display: block; }
body[data-mobile="false"] .map-footer-right .country-walk-link {
  flex: none;
  color: #999;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  margin-right: calc(50px - var(--action-gap));
}

/* Keep mobile action icon sizes after inserting the desktop label. */
body[data-mobile="false"] .map-footer-right button:first-of-type { width: 30px; height: 30px; }
body[data-mobile="false"] .map-footer-right button:first-of-type svg { width: 20px; height: 20px; stroke-width: 1px; }
body[data-mobile="false"] .map-footer-right button:first-of-type svg * { vector-effect: non-scaling-stroke; }
body[data-mobile="false"] .map-footer-right button:nth-of-type(2) svg { width: 26px; height: 26px; }

/* 1.02: hover volume control. The panel meets the mute button without a gap. */
body[data-mobile="false"] .sound-control { position: relative; }
body[data-mobile="false"] .desktop-volume-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  transform: translateX(-50%);
  width: 34px;
  height: 82.8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 5;
}
body[data-mobile="false"] .sound-control:hover .desktop-volume-panel,
body[data-mobile="false"] .sound-control:focus-within .desktop-volume-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body[data-mobile="false"] #countryVolume {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52.8px;
  height: 20px;
  margin: 0;
  padding: 0;
  transform: translate(-50%,-50%) rotate(-90deg);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
body[data-mobile="false"] #countryVolume::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, #993300 0 var(--volume-progress, 100%), #bcbcbc var(--volume-progress, 100%) 100%);
  border-radius: 1px;
}
body[data-mobile="false"] #countryVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0;
  border-radius: 50%;
  background: #999;
}
body[data-mobile="false"] #countryVolume::-moz-range-track { height: 2px; background: linear-gradient(to right, #993300 0 var(--volume-progress, 100%), #bcbcbc var(--volume-progress, 100%) 100%); }
body[data-mobile="false"] #countryVolume::-moz-range-thumb {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: #999;
}
body[data-mobile="false"] #countryVolume:focus-visible { outline: 1px solid #999; outline-offset: 4px; }

/* 1.05 desktop refinements */
body[data-mobile="false"] .workspace { transform: translateY(-5px); }
body[data-mobile="false"] .country-map { transform: translateY(-10px) scale(.9); }
body[data-mobile="false"] .country-population {
  left: 52.2px;
  bottom: 14.6px;
  transform: none;
  font-size: 12px;
  color: #ccc;
}
body[data-mobile="false"] .mode-pin {
  top: auto;
  bottom: calc(var(--desktop-bottom-padding) + 48px + 14px + 5px);
  font-size: 12px;
  transform: none;
}
body[data-mobile="false"] .account-pill .composer-m09-button {
  position: fixed;
  top: calc(100dvh - var(--desktop-bottom-padding) - 48px - 14px - 82px + 12px);
  font-size: 12px;
  left: 24px;
  transform: none;
}
body[data-mobile="false"] #copyLocation {
  position: absolute;
  right: 56px;
  bottom: 11px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  visibility: hidden;
}
body[data-mobile="false"] #copyLocation svg { width: 22px; height: 22px; }
body[data-mobile="false"] .composer:not(.is-focused):hover #copyLocation,
body[data-mobile="false"] #copyLocation:focus-visible { visibility: visible; }
body[data-mobile="false"] #copyLocation[hidden],
body[data-mobile="false"] .composer.is-focused #copyLocation { display: none; }

/* 1.06: prevent text selection on desktop map labels, including descendants. */
body[data-mobile="false"] #locationLabel,
body[data-mobile="false"] #locationLabel *,
body[data-mobile="false"] #countryPopulation,
body[data-mobile="false"] #countryPopulation * {
  -webkit-user-select: none;
  user-select: none;
}

/* 1.08: map marker and label replay the current pronunciation. */
body[data-mobile="false"] #locationMarker,
body[data-mobile="false"] #locationLabel {
  pointer-events: auto;
  cursor: pointer;
}

/* 1.11: double the desktop random country name / code spacing. */
body[data-mobile="false"] .composer .random-placeholder { gap: 16px; }

/* 1.15: align navigation with the menu strokes and composer text row. */
body[data-mobile="false"] .account-name { font-size: 12px; }
/* Move only the label; preserve the share actions' layout coordinates. */
body[data-mobile="false"] .map-footer-right .country-walk-link { transform: translateX(-15px); }
@media (max-width: 1000px) {
  body[data-mobile="false"] .map-footer-right .country-walk-link { transform: translateX(-5px); }
}

/* 1.16: desktop card close icon. */
body[data-mobile="false"] #closeCountry,
body[data-mobile="false"] #closeCountry svg { color: #ccc; }

/* 1.17: independent copy feedback below the card. */
body[data-mobile="false"] .copy-notice {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  margin: 0;
  color: #ccc;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
body[data-mobile="false"] .copy-notice[hidden],
body[data-mobile="false"] .tool-page.is-initial .copy-notice { display: none; }