/* Shared theme toggle + static page theme overrides */

/* Topbar + brand — matches homepage (App.svelte) */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(22px, env(safe-area-inset-right, 0px))
    16px
    max(22px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  background: var(--glass-bg-strong, rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--hairline, rgba(20, 22, 40, 0.08));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  pointer-events: auto;
  text-decoration: none;
}

.logo {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 660;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #1c1d28;
}

.brand-r {
  color: #5b5bd6;
}

.theme-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(20, 22, 40, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #5a5c6e;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  color: #1c1d28;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(20, 22, 40, 0.12);
}

.theme-toggle:focus-visible {
  outline: 2px solid rgba(91, 91, 214, 0.65);
  outline-offset: 1px;
}

/* ---- Dark mode ---- */
[data-theme='dark'] body {
  color: #eceef6;
  background: #14151f;
  background-image: linear-gradient(180deg, #181a26 0%, #14151f 100%);
  background-attachment: fixed;
}

[data-theme='dark'] .brand-name,
[data-theme='dark'] .step-title,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] .edu h2 {
  color: #eceef6;
}

[data-theme='dark'] .topbar {
  background: rgba(46, 48, 66, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .card {
  background: rgba(34, 36, 50, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .step {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme='dark'] .edu {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme='dark'] .edu p,
[data-theme='dark'] .edu li {
  color: #c8cadf;
}

[data-theme='dark'] .edu strong {
  color: #eceef6;
}

[data-theme='dark'] .edu code {
  background: rgba(139, 139, 240, 0.16);
  color: #c4c4f8;
}

[data-theme='dark'] .section-label {
  color: #9094a8;
}

[data-theme='dark'] .step-desc,
[data-theme='dark'] .subtitle,
[data-theme='dark'] p {
  color: #c8cadf;
}

[data-theme='dark'] .step-desc strong {
  color: #eceef6;
}

[data-theme='dark'] .updated {
  color: #9094a8;
}

[data-theme='dark'] .badge,
[data-theme='dark'] .step-icon {
  background: rgba(139, 139, 240, 0.14);
  color: #b8b8f5;
}

[data-theme='dark'] .step-desc code,
[data-theme='dark'] p code {
  background: rgba(139, 139, 240, 0.16);
  color: #c4c4f8;
}

[data-theme='dark'] .tip {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #8b8bf0;
  color: #c8cadf;
}

[data-theme='dark'] .callout {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #8b8bf0;
  color: #c8cadf;
}

[data-theme='dark'] .callout strong {
  color: #eceef6;
}

[data-theme='dark'] .card a {
  color: #a3a3f5;
}

[data-theme='dark'] .card a:hover {
  color: #c4c4f8;
}

[data-theme='dark'] .text-link {
  color: #a3a3f5;
}

[data-theme='dark'] .text-link:hover {
  color: #c4c4f8;
}

[data-theme='dark'] .licence-list,
[data-theme='dark'] .licence-list li,
[data-theme='dark'] .policy-list,
[data-theme='dark'] .policy-list li {
  color: #c8cadf;
}

[data-theme='dark'] .policy-list code,
[data-theme='dark'] .licence-list code {
  background: rgba(139, 139, 240, 0.16);
  color: #c4c4f8;
}

[data-theme='dark'] .modal-panel h2 {
  color: #eceef6;
}

[data-theme='dark'] .modal-panel p,
[data-theme='dark'] .modal-panel .licence-list,
[data-theme='dark'] .modal-panel .licence-list li {
  color: #c8cadf;
}

[data-theme='dark'] .modal-panel a {
  color: #a3a3f5;
}

[data-theme='dark'] .modal-panel a:hover {
  color: #c4c4f8;
}

[data-theme='dark'] .home-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #c8cadf;
}

[data-theme='dark'] .home-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #eceef6;
}

[data-theme='dark'] footer {
  background: #0e1322;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme='dark'] .f-links a {
  color: rgba(255, 255, 255, 0.68);
}

[data-theme='dark'] .f-copy,
[data-theme='dark'] .copy {
  color: rgba(255, 255, 255, 0.42);
}

[data-theme='dark'] .theme-toggle {
  color: #a9acbe;
  background: rgba(46, 48, 66, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme='dark'] .theme-toggle:hover {
  color: #eceef6;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ---- Mobile (≤640px) — static pages ---- */
@media (max-width: 640px) {
  .topbar {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  .logo {
    width: 36px;
    height: 36px;
  }

  .brand-name {
    font-size: 20px;
  }

  main {
    padding-top: calc(88px + env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    /* Footer stacks vertically on mobile — needs more clearance than desktop */
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
  }

  .card {
    padding: clamp(24px, 4vw, 36px) clamp(18px, 4vw, 28px);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  .home-btn span {
    display: none;
  }

  footer .footer-inner,
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding:
      20px
      max(20px, env(safe-area-inset-right, 0px))
      max(20px, env(safe-area-inset-bottom, 0px))
      max(20px, env(safe-area-inset-left, 0px));
  }

  .f-brand {
    margin-right: 0;
  }

  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  .f-copy,
  .copy {
    white-space: normal;
  }
}