/* Shared portal theme presentation. Behavior and persistence remain in portal.js. */
.portal-theme-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
}

.portal-theme-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mp-blue) 24%, #fff);
  border: 1px solid color-mix(in srgb, var(--mp-blue) 32%, #fff);
  padding: 2px;
  display: inline-flex;
  align-items: center;
}

.portal-theme-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transform: translateX(0);
  transition: transform .18s ease;
}

html[data-theme="dark"] .portal-theme-track {
  background: color-mix(in srgb, var(--today-primary) 72%, #fff);
  border-color: color-mix(in srgb, var(--today-primary) 56%, #fff);
}

html[data-theme="dark"] .portal-theme-thumb {
  transform: translateX(18px);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --mp-ink: #f2edf6;
  --mp-muted: #c7bdcf;
  --mp-blue: #c99bea;
  --mp-blue-dark: #ead7f8;
  --mp-blue-light: #2f213b;
  --mp-sky: #33233f;
  --mp-gold: #f2c14e;
  --mp-gold-dark: #f4d477;
  --mp-gold-soft: #3a311d;
  --mp-cream: #17131c;
  --mp-paper: #231b2a;
  --mp-border: #4a3d53;
  --mp-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] body {
  background: var(--mp-cream);
  color: var(--mp-ink);
}

html[data-theme="dark"] .portal-header {
  background: rgba(27, 20, 33, .96);
  border-bottom-color: color-mix(in srgb, var(--mp-gold) 20%, transparent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .menu-button {
  background: #241b2c;
  color: var(--mp-blue-dark);
  border-color: var(--mp-border);
}

html[data-theme="dark"] .discovery-band {
  background: color-mix(in srgb, var(--mp-blue-light) 30%, #17131c);
  border-color: color-mix(in srgb, var(--mp-blue) 20%, #17131c);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .story-card,
html[data-theme="dark"] .park-card,
html[data-theme="dark"] .fact-panel,
html[data-theme="dark"] .table-wrap {
  background-color: var(--mp-paper);
  border-color: var(--mp-border);
  color: var(--mp-ink);
}

html[data-theme="dark"] .local-table th,
html[data-theme="dark"] .local-table td {
  border-color: var(--mp-border);
}

html[data-theme="dark"] .local-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .025);
}

@media (max-width: 860px) {
  .portal-theme-toggle {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    padding: 16px 8px 8px;
    border-top: 1px solid var(--mp-border);
  }

  html[data-theme="dark"] .primary-nav {
    background: #231b2a;
  }
}