/**
 * Synchronized skeleton loader.
 *
 * One custom property animates on the document. Every .gmap-skeleton paints a
 * viewport-fixed gradient from that property, so the shine is one band across
 * the page rather than a separate streak per block.
 *
 * Placement: keep .gmap-skeleton-surface in normal flow. Do not nest it inside
 * overflow:clip / isolation:isolate photo hosts (system/components/cards.css,
 * system/shape.css). Those clip background-attachment:fixed and break the sweep.
 * Do not set a high z-index. Skeletons stay below overlay sheets.
 */

@property --gmap-skel-pos {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -30%;
}

@keyframes gmap-skeleton-sweep {
  to {
    --gmap-skel-pos: 130%;
  }
}

html {
  --gmap-skel-pos: -30%;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    animation: gmap-skeleton-sweep var(--gmap-skeleton-speed, 1.8s) linear infinite;
  }
}

.gmap-skeleton-region {
  position: relative;
}

[data-gmap-skeleton-hidden] {
  display: none !important;
}

.gmap-skeleton-region__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gmap-skeleton-surface {
  display: grid;
  gap: 0.85rem;
}

.gmap-skeleton {
  display: block;
  background-color: var(--gmap-skeleton-base, #efeae3);
  background-image: linear-gradient(
    100deg,
    transparent calc(var(--gmap-skel-pos) - var(--gmap-skeleton-size, 18vw)),
    var(--gmap-skeleton-shine, #f7f4ef) var(--gmap-skel-pos),
    transparent calc(var(--gmap-skel-pos) + var(--gmap-skeleton-size, 18vw))
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  border-radius: 4px;
}

.gmap-skeleton--text,
.gmap-skeleton--line {
  height: 0.72rem;
  border-radius: 4px;
}

.gmap-skeleton--heading {
  height: 1.35rem;
  border-radius: 6px;
}

.gmap-skeleton--display {
  height: clamp(2.15rem, 4.6vw, 3.45rem);
  border-radius: 12px;
}

.gmap-skeleton--lead {
  height: 1.05rem;
}

.gmap-skeleton--rowline {
  height: 2.35rem;
  border-radius: 10px;
}

.gmap-skeleton--image {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--gmap-skeleton-radius, var(--radius-sm));
}

.gmap-skeleton--image-wide {
  aspect-ratio: 16 / 10;
}

.gmap-skeleton--avatar,
.gmap-skeleton--circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  aspect-ratio: 1;
}

.gmap-skeleton--button {
  width: 8.5rem;
  height: var(--gmap-touch, 2.75rem);
  border-radius: var(--radius-pill, 999px);
}

.gmap-skeleton--chip {
  width: 5.5rem;
  height: 1.85rem;
  border-radius: var(--radius-pill, 999px);
}

.gmap-skeleton--w-100 { width: 100%; }
.gmap-skeleton--w-92 { width: 92%; }
.gmap-skeleton--w-88 { width: 88%; }
.gmap-skeleton--w-84 { width: 84%; }
.gmap-skeleton--w-80 { width: 80%; }
.gmap-skeleton--w-78 { width: 78%; }
.gmap-skeleton--w-74 { width: 74%; }
.gmap-skeleton--w-72 { width: 72%; }
.gmap-skeleton--w-70 { width: 70%; }
.gmap-skeleton--w-64 { width: 64%; }
.gmap-skeleton--w-62 { width: 62%; }
.gmap-skeleton--w-60 { width: 60%; }
.gmap-skeleton--w-56 { width: 56%; }
.gmap-skeleton--w-52 { width: 52%; }
.gmap-skeleton--w-48 { width: 48%; }
.gmap-skeleton--w-36 { width: 36%; }
.gmap-skeleton--w-28 { width: 28%; }

.gmap-skeleton-stack {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.gmap-skeleton-card {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.gmap-skeleton-card__body {
  display: grid;
  gap: 0.45rem;
  padding: 0 0.15rem 0.35rem;
}

.gmap-skeleton-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.gmap-skeleton-hero {
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}

.gmap-skeleton-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.gmap-playbooks-grid > .gmap-skeleton-card,
.gmap-skeleton-grid--collection > .gmap-skeleton-card {
  min-height: 0;
}

.gmap-skeleton-grid--collection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.gmap-skeleton-rail {
  display: grid;
  gap: 0.9rem;
}

.gmap-skeleton-rail__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.gmap-skeleton-page {
  display: grid;
  gap: 1.35rem;
}

.gmap-skeleton-stack--hero {
  max-width: 38rem;
  gap: 0.75rem;
}

.gmap-skeleton-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.gmap-skeleton-page .gmap-skeleton--image:not(.gmap-skeleton--hero) {
  min-height: 11rem;
}

.gmap-skeleton-split,
.gmap-skeleton-columns,
.gmap-skeleton-trio,
.gmap-skeleton-directory {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.gmap-skeleton-directory {
  grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
}

.gmap-skeleton-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.gmap-skeleton-trio {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(12rem, 0.7fr);
}

.gmap-skeleton-columns {
  grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 0.7fr);
}

.gmap-skeleton-hero-band {
  display: grid;
  gap: 0.85rem;
}

.gmap-skeleton--hero {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 21 / 8;
  border-radius: 18px;
}

.gmap-skeleton-mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.55rem;
}

.gmap-skeleton-panel {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--gmap-border, #e6ded4);
  border-radius: 16px;
}

.gmap-skeleton-steps {
  display: grid;
  gap: 0.85rem;
}

.gmap-skeleton-step {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

html.gmap-page-skeleton-lock,
html.gmap-page-skeleton-lock body {
  overflow: hidden !important;
}

.gmap-page-skeleton {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--gmap-bg, #fbfaf8);
  padding: 1.25rem 0 3rem;
  box-sizing: border-box;
}

.gmap-page-skeleton .gmap-skeleton-surface {
  width: min(72rem, calc(100% - (var(--gmap-gutter, 1rem) * 2)));
  max-width: 72rem;
  margin-inline: auto;
  box-sizing: border-box;
}

.gmap-skeleton-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--gmap-text-secondary, #6e675f);
}

.gmap-skeleton-error button {
  appearance: none;
  border: 1px solid var(--gmap-border, #e6ded4);
  background: var(--gmap-cta, #181613);
  color: #fff;
  border-radius: var(--radius-pill, 999px);
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .gmap-skeleton-grid--collection,
  .gmap-skeleton-rail__track,
  .gmap-skeleton-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .gmap-skeleton-grid--collection,
  .gmap-skeleton-rail__track,
  .gmap-skeleton-cards,
  .gmap-skeleton-split,
  .gmap-skeleton-trio,
  .gmap-skeleton-columns,
  .gmap-skeleton-directory,
  .gmap-skeleton-mosaic {
    grid-template-columns: 1fr;
  }

  .gmap-skeleton-split .gmap-skeleton--image,
  .gmap-skeleton-hero-band .gmap-skeleton--hero,
  .gmap-skeleton-mosaic {
    order: -1;
  }

  .gmap-skeleton-profile {
    grid-template-columns: 1fr;
  }

  .gmap-skeleton--hero {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    animation: none;
  }

  .gmap-skeleton {
    background-image: none;
  }
}

@supports not (background-attachment: fixed) {
  .gmap-skeleton {
    background-image: none;
    background-color: var(--gmap-skeleton-base, #efeae3);
  }
}