/*
 * Style-only preview for the existing shared version template.
 * The HTML order, content, ads, schema, links, and analytics all come directly
 * from downloads/_version_template.html.erb.
 */
.version-style-preview {
  --version-paper: #f5f1e7;
  --version-panel: #fffefa;
  --version-sage: #dfe6da;
  --version-sage-soft: #edf1e9;
  --version-ink: #1f2d23;
  --version-muted: #5e695f;
  --version-line: #aeb7aa;
  --version-green: #315f3b;
  --version-green-dark: #264e31;
  --version-green-alt: #527d5c;
  --version-green-alt-dark: #365f42;
  --version-amber: #9a7424;
  --version-amber-ink: #6b521e;
  --version-amber-soft: #f4ecd8;
  --version-amber-hover: #eadcb8;
  --version-shadow: #c7cec3;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
  background: var(--version-paper);
  color: var(--version-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.version-style-preview > .max-w-4xl {
  width: min(1120px, calc(100% - 2.5rem));
  max-width: none !important;
  padding: 2rem 0 5rem !important;
}

.version-style-preview nav[aria-label="Breadcrumb"] {
  margin-bottom: 1.4rem !important;
  padding: 0.15rem 0 0.75rem;
  border-bottom: 1px solid var(--version-line);
  background: transparent !important;
  backdrop-filter: none;
  color: var(--version-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.version-style-preview nav[aria-label="Breadcrumb"] a {
  color: var(--version-green) !important;
}

.version-style-preview nav[aria-label="Breadcrumb"] > span:not(:last-child) {
  color: var(--version-amber) !important;
}

.version-style-preview nav[aria-label="Breadcrumb"] > span:last-child {
  color: var(--version-muted) !important;
}

.version-style-preview a:not([target="_blank"]) {
  color: var(--version-green);
}

.version-style-preview h1 {
  max-width: 18ch;
  margin: 0 0 1.5rem !important;
  color: var(--version-ink) !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-align: left !important;
}

.version-style-preview h1 > span {
  background: none !important;
  color: var(--version-ink) !important;
  -webkit-text-fill-color: var(--version-ink) !important;
}

.version-style-preview .max-w-3xl {
  max-width: 920px !important;
}

/* The old template's first task remains the first task: download links. */
.version-style-preview .max-w-3xl.my-8 > div {
  border: 1px solid #7f8f81 !important;
  border-radius: 0 !important;
  background: var(--version-panel) !important;
  box-shadow: 8px 8px 0 var(--version-shadow);
}

.version-style-preview .max-w-3xl.my-8 h2 {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--version-line);
  color: var(--version-ink) !important;
  text-align: left !important;
}

.version-style-preview .max-w-3xl.my-8 h2 svg {
  color: var(--version-green);
}

.version-style-preview #pc-download a,
.version-style-preview #apk-download a,
.version-style-preview .max-w-3xl.my-8 .space-y-3 a[target="_blank"] {
  min-height: 3.65rem;
  border: 1px solid var(--version-green) !important;
  border-radius: 0 !important;
  background: var(--version-green) !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
}

.version-style-preview #pc-download a:hover,
.version-style-preview #apk-download a:hover,
.version-style-preview .max-w-3xl.my-8 .space-y-3 a[target="_blank"]:hover {
  background: var(--version-green-dark) !important;
}

/*
 * Platform is the primary decision; mirror host is secondary. The production
 * markup and analytics stay untouched while the preview visually places the
 * higher-volume Android group before Windows.
 */
.version-style-preview .max-w-3xl.my-8 .space-y-3 {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.version-style-preview .max-w-3xl.my-8 .space-y-3 > div {
  margin-top: 0 !important;
}

.version-style-preview .max-w-3xl.my-8 .space-y-3 > div:has(a[data-analytics-platform-param="android"]) {
  order: 1;
}

.version-style-preview .max-w-3xl.my-8 .space-y-3 > div:has(a[data-analytics-platform-param="pc"]) {
  order: 2;
}

.version-style-preview #apk-download,
.version-style-preview #pc-download {
  display: grid;
  gap: 0.65rem;
}

.version-style-preview #apk-download::before,
.version-style-preview #pc-download::before {
  display: block;
  color: var(--version-ink);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}

.version-style-preview #apk-download::before {
  padding-left: 0.7rem;
  border-left: 4px solid var(--version-green);
  content: "Android APK · APK file";
}

.version-style-preview #pc-download {
  margin-top: 0.85rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--version-line);
}

.version-style-preview #pc-download::before {
  padding-left: 0.7rem;
  border-left: 4px solid var(--version-amber);
  content: "Windows PC · ZIP file";
}

.version-style-preview .max-w-3xl.my-8 .space-y-3 > div:not(#apk-download):not(#pc-download) a[target="_blank"] {
  border-color: var(--version-green-alt) !important;
  background: var(--version-green-alt) !important;
  color: #fff !important;
}

.version-style-preview .max-w-3xl.my-8 .space-y-3 > div:not(#apk-download):not(#pc-download) a[target="_blank"]:hover {
  background: var(--version-green-alt-dark) !important;
}

.version-style-preview table {
  color: var(--version-ink);
}

.version-style-preview table tr,
.version-style-preview table td,
.version-style-preview [class*="border-gray"],
.version-style-preview [class*="border-purple"] {
  border-color: var(--version-line) !important;
}

.version-style-preview table td:first-child {
  color: var(--version-muted) !important;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.version-style-preview table td:last-child {
  color: var(--version-ink) !important;
}

/* Restyle existing content boxes without moving or rewriting any section. */
.version-style-preview [class*="bg-gray-800"],
.version-style-preview [class*="bg-blue-900"],
.version-style-preview [class*="bg-indigo-900"],
.version-style-preview [class*="from-purple-900"],
.version-style-preview [class*="from-indigo-900"] {
  border: 1px solid var(--version-line);
  border-radius: 0 !important;
  background: var(--version-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.version-style-preview [class*="bg-yellow-50"] {
  border-color: var(--version-amber) !important;
  background: #f4ecd8 !important;
}

.version-style-preview [class*="bg-green-600"],
.version-style-preview [class*="bg-purple-600"],
.version-style-preview [class*="bg-red-600"] {
  border-color: var(--version-line) !important;
  border-radius: 0 !important;
  background: var(--version-sage-soft) !important;
}

.version-style-preview [class*="bg-blue-800"] {
  border: 1px solid var(--version-line);
  border-radius: 0 !important;
  background: var(--version-sage-soft) !important;
}

.version-style-preview [class*="rounded-"] {
  border-radius: 0 !important;
}

.version-style-preview h2,
.version-style-preview h3,
.version-style-preview h4 {
  color: var(--version-ink) !important;
  letter-spacing: -0.02em;
}

.version-style-preview p,
.version-style-preview li,
.version-style-preview [class*="text-gray-2"],
.version-style-preview [class*="text-gray-3"],
.version-style-preview [class*="text-gray-4"] {
  color: var(--version-muted) !important;
  overflow-wrap: anywhere;
}

.version-style-preview [class*="text-yellow"],
.version-style-preview [class*="text-purple"],
.version-style-preview [class*="text-blue"],
.version-style-preview [class*="text-indigo"],
.version-style-preview [class*="text-cyan"],
.version-style-preview [class*="text-green"] {
  color: var(--version-green) !important;
}

/* Group footer navigation by intent; color supports the labels rather than replacing them. */
.version-style-preview .version-related-links {
  border: 1px solid var(--version-line);
  background: var(--version-panel) !important;
}

.version-style-preview .version-related-links > h3 {
  margin-bottom: 1.35rem !important;
}

.version-style-preview .version-related-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.version-style-preview .version-related-group {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--version-line);
}

.version-style-preview .version-related-group--release {
  border-top: 3px solid var(--version-amber);
  background: #fbf7ed;
}

.version-style-preview .version-related-group--platform {
  border-top: 3px solid var(--version-green);
  background: #f1f5ee;
}

.version-style-preview .version-related-group--resource {
  border-top: 3px solid #73827a;
  background: #f2f4f2;
}

.version-style-preview .version-related-group-title {
  margin: 0 0 0.75rem;
  color: var(--version-muted) !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-transform: uppercase;
}

.version-style-preview .version-related-group-links {
  display: grid;
  gap: 0.6rem;
}

.version-style-preview .version-related-links .version-related-link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  border: 1px solid var(--version-line) !important;
  background: var(--version-panel) !important;
  color: var(--version-green) !important;
  font-weight: 620;
  line-height: 1.3;
}

.version-style-preview .version-related-links .version-related-link:hover {
  border-color: var(--version-green) !important;
  background: var(--version-sage-soft) !important;
  color: var(--version-ink) !important;
}

.version-style-preview .version-related-links .version-related-link--primary {
  border-color: var(--version-amber) !important;
  background: var(--version-amber-soft) !important;
  color: var(--version-amber-ink) !important;
}

.version-style-preview .version-related-links .version-related-link--primary:hover {
  border-color: var(--version-amber) !important;
  background: var(--version-amber-hover) !important;
  color: var(--version-amber-ink) !important;
}

.version-style-preview .version-related-links .version-related-link--release {
  border-color: #c7b98e !important;
  background: #fffdf8 !important;
  color: var(--version-amber-ink) !important;
}

.version-style-preview .version-related-links .version-related-link--platform {
  border-color: #98aa98 !important;
  background: #e7eee5 !important;
  color: var(--version-green) !important;
}

.version-style-preview .version-related-links .version-related-link--resource {
  border-color: #b3bbb6 !important;
  background: #eef1ef !important;
  color: #465a4e !important;
}

.version-style-preview .version-related-home {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.15rem;
  color: var(--version-green) !important;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.version-style-preview .version-related-home:hover {
  color: var(--version-green-dark) !important;
}

.version-style-preview a[target="_blank"] span,
.version-style-preview a[target="_blank"] svg {
  color: inherit !important;
}

.version-style-preview code {
  color: var(--version-ink) !important;
  overflow-wrap: anywhere;
}

.version-style-preview [data-ad-region="manual"] {
  color: var(--version-muted);
}

.version-style-preview a:focus-visible {
  outline: 2px solid var(--version-green);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .version-style-preview {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .version-style-preview > .max-w-4xl {
    width: min(calc(100% - 1.25rem), 1120px);
    padding-top: 1.25rem !important;
  }

  .version-style-preview h1 {
    margin-bottom: 1rem !important;
    font-size: clamp(2.35rem, 12vw, 3.1rem) !important;
  }

  .version-style-preview .max-w-3xl.my-8 > div,
  .version-style-preview [class*="bg-gray-800"],
  .version-style-preview [class*="bg-blue-900"],
  .version-style-preview [class*="bg-indigo-900"],
  .version-style-preview [class*="from-purple-900"],
  .version-style-preview [class*="from-indigo-900"] {
    padding: 1.1rem !important;
  }

  .version-style-preview #pc-download a,
  .version-style-preview #apk-download a,
  .version-style-preview .max-w-3xl.my-8 .space-y-3 a[target="_blank"] {
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem;
  }

  .version-style-preview .version-related-groups {
    grid-template-columns: 1fr;
  }

  .version-style-preview .version-related-group {
    padding: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .version-style-preview *,
  .version-style-preview *::before,
  .version-style-preview *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}