/* Galok Reading Progress — shared bottom capsule navigation.
   Mirrors the compact expandable progress capsule used across long-form pages. */

.gwn {
  --gwn-accent: #b52d27;
  --gwn-ink: #1c1a17;
  --gwn-paper: #f7f4ef;
  --gwn-muted: #77736b;
  --gwn-collapsed-width: 168px;
  --gwn-open-width: 280px;
  --gwn-open-height: 228px;
  position: fixed !important;
  left: 50% !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  top: auto !important;
  right: auto !important;
  z-index: 880 !important;
  width: var(--gwn-collapsed-width) !important;
  height: 44px !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) translateY(10px) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), height 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms !important;
}

.gwn--data {
  --gwn-accent: var(--data-red, #b52d27);
  --gwn-ink: var(--data-ink, #1c1a17);
  --gwn-paper: var(--data-paper, #f7f4ef);
  --gwn-muted: var(--data-muted, #77736b);
}

.gwn--essay {
  --gwn-accent: var(--ra-color-accent, var(--accent, #9e2a2b));
  --gwn-ink: var(--ra-color-fg, #101214);
  --gwn-paper: var(--ra-color-bg, #f4f4f1);
  --gwn-muted: var(--ra-color-muted, #62696d);
}

.gwn--city {
  --gwn-accent: var(--gwn-city-accent, #b52d27);
  --gwn-ink: var(--gwn-city-ink, #1c1a17);
  --gwn-paper: var(--gwn-city-paper, #f7f4ef);
  --gwn-muted: var(--gwn-city-muted, #77736b);
}

.gwn--research {
  --gwn-accent: var(--research-red, #b23a32);
  --gwn-ink: var(--research-ink, #102124);
  --gwn-paper: var(--research-paper, #f2efe5);
  --gwn-muted: var(--research-muted, #737a78);
}

.gwn.is-visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gwn.is-open {
  width: var(--gwn-open-width) !important;
  height: var(--gwn-open-height) !important;
}

.gwn > a,
.gwn > i,
.gwn > .data-chapter-scrubber {
  display: none !important;
}

.gwn-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--gwn-ink);
  border: 1px solid color-mix(in srgb, var(--gwn-ink) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gwn-paper) 76%, transparent);
  box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--gwn-ink) 36%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: border-radius 500ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease, box-shadow 220ms ease;
}

.gwn.is-open .gwn-surface {
  border-radius: 26px;
  background: color-mix(in srgb, var(--gwn-paper) 88%, transparent);
  box-shadow: 0 18px 48px -24px color-mix(in srgb, var(--gwn-ink) 44%, transparent);
}

.gwn-collapsed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: max-content;
  height: 44px;
  padding: 6px 16px 6px 8px;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  opacity: 1;
  filter: blur(0);
  transition: opacity 240ms cubic-bezier(0.65, 0, 0.35, 1), filter 240ms cubic-bezier(0.65, 0, 0.35, 1);
}

.gwn.is-open .gwn-collapsed {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

.gwn-ring {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transform: rotate(-90deg);
  overflow: visible;
}

.gwn-ring-track,
.gwn-ring-value {
  fill: none;
  stroke-width: 2.5;
}

.gwn-ring-track {
  stroke: color-mix(in srgb, var(--gwn-ink) 15%, transparent);
}

.gwn-ring-value {
  stroke: var(--gwn-ink);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 80ms linear;
}

.gwn-current-label {
  display: block;
  min-width: 0;
  max-width: min(42vw, 270px);
  overflow: hidden;
  color: var(--gwn-ink);
  font-family: var(--font-sans, var(--ra-font-utility, "Helvetica Neue", Arial, sans-serif));
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gwn-list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  scrollbar-width: none;
  transition: opacity 240ms cubic-bezier(0.65, 0, 0.35, 1), filter 240ms cubic-bezier(0.65, 0, 0.35, 1);
}

.gwn-list::-webkit-scrollbar {
  display: none;
}

.gwn.is-open .gwn-list {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}

.gwn-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  overflow: hidden;
  color: color-mix(in srgb, var(--gwn-ink) 55%, transparent);
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-family: var(--font-sans, var(--ra-font-utility, "Helvetica Neue", Arial, sans-serif));
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease-out;
}

.gwn-item:hover,
.gwn-item:focus-visible,
.gwn-item.is-active {
  color: var(--gwn-ink);
}

.gwn-item:focus-visible,
.gwn-collapsed:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gwn-accent) 72%, transparent);
  outline-offset: -2px;
}

.gwn-item-bg {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gwn-ink) 10%, transparent);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 220ms ease-out, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gwn-item.is-active .gwn-item-bg {
  opacity: 1;
  transform: scale(1);
}

.gwn-dot {
  position: relative;
  z-index: 1;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gwn-ink) 30%, transparent);
}

.gwn-item.is-active .gwn-dot {
  background: var(--gwn-ink);
}

.gwn-item-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Retire the legacy top hairline whenever the capsule system is present. */
.article-read-progress {
  display: none !important;
}

/* Long-form editorial imagery must preserve its native aspect ratio. */
.article-content figure img,
.article-content figure picture,
.article-content figure picture > img {
  max-width: 100% !important;
}

.article-content figure img,
.article-content figure picture > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 640px) {
  .gwn {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .gwn-current-label {
    max-width: min(58vw, 230px);
    font-size: 13px;
  }

  .gwn-item {
    min-height: 38px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gwn,
  .gwn-surface,
  .gwn-collapsed,
  .gwn-list,
  .gwn-item-bg,
  .gwn-ring-value {
    transition: none !important;
  }
}

/* Older article templates create a static chapter strip in script.js. */
.legacy-chapter-nav:not(.gwn) {
  display: none !important;
}