/* Shared theme system for the catalog and detailed app guides. */
:root {
  color-scheme: light dark;
}

body[data-guide] {
  font-family: Manrope, Inter, "Segoe UI", Arial, sans-serif;
  transition: background-color 180ms ease, color 180ms ease;
}

/* Keep the global header above guide content as static app navigation scrolls past it. */
body[data-guide] .site-header {
  z-index: 30;
}

body[data-guide][data-theme="dark"] .site-header {
  background: #080c14;
}

body[data-guide] .app-mini-guide-next.is-terminal,
body[data-guide] .app-listing-next:disabled {
  color: #f8fafc;
  background: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}

body[data-guide][data-theme="dark"] .app-listing-status.is-locked {
  color: #fde68a;
  background: rgba(180, 83, 9, 0.18);
}

body[data-guide][data-theme="dark"] .step-marker.is-locked {
  color: #fde68a;
  background: rgba(180, 83, 9, 0.22);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.34);
}

body[data-guide][data-theme="dark"] .app-listing-next.is-guide-locked:disabled {
  border-color: rgba(251, 191, 36, 0.34);
  color: #fde68a;
  background: rgba(180, 83, 9, 0.22);
}

body[data-guide][data-theme="dark"] .app-listing-content-lock {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(120, 79, 12, 0.16);
}

body[data-guide][data-theme="dark"] .app-listing-content-lock h3 {
  color: #fde68a;
}

body[data-guide][data-theme="dark"] .app-listing-content-lock p {
  color: #e2cf9f;
}

body[data-guide][data-theme="dark"] .app-listing-not-supported {
  border-color: rgba(251, 113, 133, 0.32);
  background: rgba(13, 20, 34, 0.78);
}

body[data-guide][data-theme="dark"] .app-listing-not-supported-icon {
  color: #fda4af;
  background: rgba(251, 113, 133, 0.14);
}

body[data-guide][data-theme="dark"] .app-listing-not-supported h3,
body[data-guide][data-theme="dark"] .app-listing-not-supported-alternative strong {
  color: #fecdd3;
}

body[data-guide][data-theme="dark"] .app-listing-not-supported > p,
body[data-guide][data-theme="dark"] .app-listing-not-supported-alternative p {
  color: #f9c6ce;
}

body[data-guide][data-theme="dark"] .app-listing-not-supported-alternative {
  border-color: rgba(251, 113, 133, 0.2);
  background: rgba(13, 20, 34, 0.42);
}

/* Light is the default shared experience, including all detailed guide routes. */
body[data-guide][data-theme="light"] {
  --ds-bg: #f6f9fd;
  --ds-surface: #ffffff;
  --ds-surface-raised: #ffffff;
  --ds-line: #dce8f8;
  --ds-text: #121927;
  --ds-muted: #536078;
  --ds-subtle: #667084;
  --ds-sky: #2387bf;
  --ds-cyan: #38a9de;
  --ds-green: #0f7a4d;
  color: var(--ds-text);
  background: #f6f9fd;
}

body[data-guide][data-theme="light"]::before {
  display: none;
}

body[data-guide][data-theme="light"] .site-header {
  border-bottom-color: #dce8f8;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(32, 47, 82, 0.08);
}

body[data-guide][data-theme="light"] .brand,
body[data-guide][data-theme="light"] .brand-copy,
body[data-guide][data-theme="light"] .site-nav a {
  color: #121927;
}

body[data-guide][data-theme="light"] .brand-copy strong {
  color: #2387bf;
}

body[data-guide][data-theme="light"] .brand-copy small,
body[data-guide][data-theme="light"] .site-nav a:not(:hover):not(:focus-visible) {
  color: #667084;
}

body[data-guide][data-theme="light"] .site-nav a:hover,
body[data-guide][data-theme="light"] .site-nav a:focus-visible {
  color: #0d5f8f;
}

body[data-guide][data-theme="light"] .site-action-secondary {
  border-color: #c8d9ee;
  color: #30415b;
  background: #ffffff;
}

body[data-guide][data-theme="light"] .site-action-secondary:hover,
body[data-guide][data-theme="light"] .site-action-secondary:focus-visible {
  border-color: #8bbce1;
  color: #0d5f8f;
  background: #f0f8ff;
}

body[data-guide][data-theme="light"] .guide-sidebar {
  border-bottom-color: #dce8f8;
}

/* App guides can list up to twenty apps. Keep this navigation in the page flow
   so its multi-row desktop layout never masks the guide content while scrolling. */
body[data-guide] .guide-layout[data-step-id^="apps."] .guide-sidebar {
  position: static;
  z-index: auto;
}

body[data-guide][data-theme="light"] .step-list li {
  border-color: #dce8f8;
  color: #536078;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(32, 47, 82, 0.045);
}

body[data-guide][data-theme="light"] .step-list li:hover {
  border-color: #a8d0f1;
  color: #121927;
}

body[data-guide][data-theme="light"] .step-list li.is-active,
body[data-guide][data-theme="light"] .step-list li.is-separated-step.is-active {
  color: #ffffff;
  background: linear-gradient(90deg, #2387bf, #38a9de);
  box-shadow: 0 10px 22px rgba(35, 135, 191, 0.22);
}

body[data-guide][data-theme="light"] .step-marker {
  color: #667084;
  background: #edf4fb;
}

body[data-guide][data-theme="light"] .step-marker.is-locked {
  color: #8a6510;
  background: #fff4cf;
  box-shadow: inset 0 0 0 1px #ead8a4;
}

body[data-guide][data-theme="light"] .app-listing-next.is-guide-locked:disabled {
  border-color: #ead8a4;
  color: #6b4f10;
  background: #fff4cf;
}

body[data-guide][data-theme="light"] .step-list li.is-active .step-marker,
body[data-guide][data-theme="light"] .step-list li.is-complete .step-marker {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
}

body[data-guide][data-theme] .step-list li.is-active .step-marker.is-locked {
  color: #fde68a;
  background: rgba(120, 79, 12, 0.34);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.46);
}

body[data-guide][data-theme="light"] .step-list li.is-separated-step,
body[data-guide][data-theme="light"] .step-phase-kicker {
  border-color: #c8e7f8;
  color: #0c719f;
  background: #eefaff;
}

body[data-guide][data-theme="light"] .step-card h2,
body[data-guide][data-theme="light"] .app-listing-title-row h2,
body[data-guide][data-theme="light"] .app-listing-preview > h3,
body[data-guide][data-theme="light"] .app-listing-related h3,
body[data-guide][data-theme="light"] .app-howto-panel h4,
body[data-guide][data-theme="light"] .app-mini-guide-card h4,
body[data-guide][data-theme="light"] .app-listing-related-body h4,
body[data-guide][data-theme="light"] .info-copy h3,
body[data-guide][data-theme="light"] .section-copy h3,
body[data-guide][data-theme="light"] .equipment-copy h3,
body[data-guide][data-theme="light"] .app-listing-fact strong {
  color: #121927;
}

body[data-guide][data-theme="light"] .lead,
body[data-guide][data-theme="light"] .app-listing-lead,
body[data-guide][data-theme="light"] .app-howto-intro,
body[data-guide][data-theme="light"] .app-howto-panel p,
body[data-guide][data-theme="light"] .app-listing-section p,
body[data-guide][data-theme="light"] .app-mini-guide-card p,
body[data-guide][data-theme="light"] .app-listing-related-body p,
body[data-guide][data-theme="light"] .info-copy p,
body[data-guide][data-theme="light"] .section-copy p,
body[data-guide][data-theme="light"] .step-media figcaption,
body[data-guide][data-theme="light"] .section-media figcaption,
body[data-guide][data-theme="light"] .equipment-main-copy,
body[data-guide][data-theme="light"] .check-intro,
body[data-guide][data-theme="light"] .app-listing-fact,
body[data-guide][data-theme="light"] .app-listing-fact span {
  color: #536078;
}

body[data-guide][data-theme="light"] .step-heading-icon,
body[data-guide][data-theme="light"] .app-listing-icon.has-image,
body[data-guide][data-theme="light"] .app-listing-facts,
body[data-guide][data-theme="light"] .app-howto-tab,
body[data-guide][data-theme="light"] .app-mini-guide,
body[data-guide][data-theme="light"] .app-listing-related-card,
body[data-guide][data-theme="light"] .info-card,
body[data-guide][data-theme="light"] .equipment-card,
body[data-guide][data-theme="light"] .guide-loading,
body[data-guide][data-theme="light"] .fallback-card,
body[data-guide][data-theme="light"] .status-card {
  border-color: #dce8f8;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(32, 47, 82, 0.08);
}

body[data-guide][data-theme="light"] .app-listing-hero,
body[data-guide][data-theme="light"] .app-listing-fact + .app-listing-fact {
  border-color: #dce8f8;
}

body[data-guide][data-theme="light"] .app-listing-meta,
body[data-guide][data-theme="light"] .app-listing-status.is-supported {
  color: #0f7a4d;
}

body[data-guide][data-theme="light"] .app-listing-internet-label {
  border-color: #a8dfc6;
  color: #0f6b43;
  background: #e8f8ef;
}

body[data-guide][data-theme="light"] .app-listing-status.is-blocked,
body[data-guide][data-theme="light"] .app-listing-action.is-disabled {
  color: #9b1c2b;
  background: #fff0f2;
}

body[data-guide][data-theme="light"] .app-listing-action,
body[data-guide][data-theme="light"] .app-listing-related-link,
body[data-guide][data-theme="light"] .btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, #2387bf, #38a9de);
  box-shadow: 0 12px 26px rgba(35, 135, 191, 0.22);
}

body[data-guide][data-theme="light"] .app-listing-tab:hover,
body[data-guide][data-theme="light"] .app-listing-tab:focus-visible,
body[data-guide][data-theme="light"] .app-listing-tab.is-active,
body[data-guide][data-theme="light"] .app-howto-tab:hover,
body[data-guide][data-theme="light"] .app-howto-tab:focus-visible,
body[data-guide][data-theme="light"] .app-howto-tab.is-active {
  border-color: #a8d0f1;
  color: #0d5f8f;
  background: #edf8ff;
}

body[data-guide][data-theme="light"] .app-listing-tab.is-active {
  box-shadow: inset 0 -3px 0 #38a9de;
}

body[data-guide][data-theme="light"] .app-mini-guide {
  border-color: #c8e7f8;
  background: linear-gradient(145deg, #ffffff, #f3faff);
}

body[data-guide][data-theme="light"] .app-mini-guide-progress,
body[data-guide][data-theme="light"] .app-mini-guide-substeps-title,
body[data-guide][data-theme="light"] .section-anchor-link {
  color: #0c719f;
}

body[data-guide][data-theme="light"] .app-mini-guide-step-label,
body[data-guide][data-theme="light"] .app-mini-guide-card,
body[data-guide][data-theme="light"] .app-mini-guide-substeps,
body[data-guide][data-theme="light"] .btn-secondary,
body[data-guide][data-theme="light"] .btn-subtle,
body[data-guide][data-theme="light"] .section-anchor-link {
  border-color: #dce8f8;
  color: #30415b;
  background: #ffffff;
  box-shadow: none;
}

body[data-guide][data-theme="light"] .app-mini-guide-step-label:hover,
body[data-guide][data-theme="light"] .app-mini-guide-step-label:focus-visible,
body[data-guide][data-theme="light"] .app-mini-guide-step-label.is-active,
body[data-guide][data-theme="light"] .section-anchor-link:hover,
body[data-guide][data-theme="light"] .section-anchor-link:focus-visible {
  border-color: #8bc9ed;
  color: #0d5f8f;
  background: #edf8ff;
}

body[data-guide][data-theme="light"] .app-mini-guide-step-label span,
body[data-guide][data-theme="light"] .app-mini-guide-substep-index {
  color: #0d5f8f;
  background: #eaf6ff;
}

body[data-guide][data-theme="light"] .app-mini-guide-step-label.is-active span,
body[data-guide][data-theme="light"] .app-mini-guide-index,
body[data-guide][data-theme="light"] .info-badge,
body[data-guide][data-theme="light"] .section-number {
  color: #ffffff;
  background: linear-gradient(135deg, #2387bf, #38a9de);
  box-shadow: 0 10px 20px rgba(35, 135, 191, 0.2);
}

body[data-guide][data-theme="light"] .step-media,
body[data-guide][data-theme="light"] .section-media,
body[data-guide][data-theme="light"] .app-listing-media,
body[data-guide][data-theme="light"] .app-howto-media,
body[data-guide][data-theme="light"] .app-mini-guide-media,
body[data-guide][data-theme="light"] .app-mini-guide-substep-media {
  border-color: #dce8f8;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(32, 47, 82, 0.1);
}

/* The detailed guides use the same public-site header and footer chrome as the home page. */
body[data-guide] .brand-copy {
  font-size: 1.125rem;
  font-weight: 700;
}

body[data-guide] .contact-support-cta {
  animation: guide-contact-support-pulse 2.8s ease-in-out infinite;
}

body[data-guide] .site-header .contact-support-cta,
body[data-guide] .site-header .contact-support-cta:hover,
body[data-guide] .site-header .contact-support-cta:focus-visible {
  animation: none;
  box-shadow: none;
}

body[data-guide] .get-started-cta {
  animation: guide-get-started-pulse 3.6s ease-in-out infinite;
}

body[data-guide] .get-started-cta:hover,
body[data-guide] .get-started-cta:focus-visible {
  animation-play-state: paused;
}

body[data-guide] .site-footer {
  width: 100vw;
  margin: 48px calc(50% - 50vw) -64px;
  padding: 40px 24px;
  color: #fff;
  background: #080c14;
}

body[data-guide] .site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1280px, 100%);
  margin: 0 auto;
  gap: 20px;
  text-align: center;
}

body[data-guide] .site-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-guide] .site-footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.28);
}

body[data-guide] .site-footer-brand-copy {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

body[data-guide] .site-footer-brand-copy strong {
  color: #38bdf8;
}

body[data-guide] .site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

body[data-guide] .site-footer-nav a {
  color: #4b5563;
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 160ms ease;
}

body[data-guide] .site-footer-nav a:hover,
body[data-guide] .site-footer-nav a:focus-visible {
  color: #9ca3af;
}

body[data-guide] .site-footer-divider {
  color: #1f2937;
}

body[data-guide] .site-footer-copyright {
  margin: 0;
  color: #374151;
  font-size: 0.75rem;
}

@keyframes guide-contact-support-pulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }
  50% {
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.18);
  }
}

@keyframes guide-get-started-pulse {
  0%, 100% {
    box-shadow: 0 7px 18px rgba(14, 165, 233, 0.24);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.07), 0 10px 28px rgba(14, 165, 233, 0.42);
  }
}

@media (max-width: 640px) {
  body[data-guide] .site-footer {
    margin-top: 32px;
    padding: 32px 20px;
  }

  body[data-guide] .site-footer-nav {
    gap: 14px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-guide] .contact-support-cta,
  body[data-guide] .get-started-cta {
    animation: none;
  }
}

body[data-guide] .app-guide-shell {
  padding-top: 92px;
}

body[data-guide][data-app-view="catalog"] .app-guide-shell {
  width: 100%;
  min-height: calc(100vh - 64px);
  margin: 0;
  padding: 64px 0 0;
}