/* ── Menu panel: navigation, appearance and language in one place ── */
.panel__scrim {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.panel__scrim.is-open { opacity: 1; }
.panel__scrim[hidden] { display: none; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-menu);
  width: min(380px, 100%);
  background: var(--surface-raised);
  border-left: 1px solid var(--surface-line);
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.panel.is-open { transform: none; }
.panel[hidden] { display: none; }

.panel__head { display: flex; gap: var(--space-3); align-items: center; }
.panel__search {
  flex: 1; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-panel); border: 1px solid var(--surface-line);
  color: var(--steel-400); font-size: var(--size-sm); text-align: left;
  border-radius: var(--radius-sm);
}
.panel__search:hover { border-color: var(--red); color: var(--text-primary); }
.panel__close {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--surface-line); color: var(--steel-300);
  border-radius: var(--radius-sm);
}
.panel__close:hover { border-color: var(--red); color: var(--text-primary); }

.panel__section { display: grid; gap: var(--space-3); }
.panel__title {
  font-size: var(--size-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--red-text);
}

.panel__links { display: grid; }
.panel__link {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--size-lg); letter-spacing: -0.01em;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--surface-line);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.panel__link:hover { color: var(--red-text); padding-left: var(--space-3); }

.panel__choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.panel__choices--lang { grid-template-columns: 1fr 1fr; }

.panel__choice {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--surface-line); border-radius: var(--radius-sm);
  color: var(--steel-300); font-size: var(--size-sm); text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.panel__choice:hover { border-color: var(--steel-500); color: var(--text-primary); }
.panel__choice.is-active {
  border-color: var(--red); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--red-deep);
}

.panel__swatch {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1px solid var(--surface-line);
}
.panel__swatch--dark { background: linear-gradient(135deg, #16191c 50%, #000 50%); }
.panel__swatch--light { background: linear-gradient(135deg, #ffffff 50%, #d5dadd 50%); }

.panel__choice--lang, .panel__choices--lang .panel__choice { flex-direction: column; align-items: flex-start; gap: 2px; }
.panel__native { font-size: var(--size-sm); color: inherit; }
.panel__english { font-size: var(--size-xs); color: var(--text-faint); }

.panel__note {
  margin-top: auto; font-size: var(--size-xs); color: var(--text-faint);
  border-top: 1px solid var(--surface-line); padding-top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .panel, .panel__scrim { transition: none; }
}