/* ============================================================================
   Theme switcher — neutral chrome, theme-invariant.

   The switcher renders in its OWN dark pill regardless of active theme so
   visitors always see it the same way. Nothing here is affected by
   [data-theme] attributes.

   Mobile: fixed bottom-right (thumb zone). Panel opens as a bottom sheet.
   Desktop (hover-capable): fixed top-right. Panel opens as a right-anchored
   floating card.

   Tap targets are all ≥44×44 per Apple HIG.
   ========================================================================= */

/* ─── CSS custom properties local to the switcher. Intentionally NOT
       inherited from any theme — prefixed --ts- to avoid collisions. */
#theme-switcher {
  --ts-bg:       #0A0A0A;
  --ts-fg:       #FAFAF9;
  --ts-muted:    #9A9A96;
  --ts-line:     rgba(250, 250, 249, 0.14);
  --ts-accent:   #E3342F;  /* same hue as Swiss accent — matches the mark */
  --ts-radius:   10px;
  --ts-ease:     cubic-bezier(.2, .7, .2, 1);
  --ts-dur:      200ms;
  --ts-z:        9000;

  position: fixed;
  z-index: var(--ts-z);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-fg);

  /* Mobile default: bottom-right. */
  inset-block-end: max(16px, env(safe-area-inset-bottom, 0px));
  inset-inline-end: 16px;
}

/* Desktop: stay bottom-right (same corner as mobile). The panel opens
   upward from the pill in both form factors, which keeps the mental
   model consistent. */
@media (hover: hover) and (min-width: 960px) {
  #theme-switcher {
    inset-block-end: 16px;
    inset-block-start: auto;
    inset-inline-end: 16px;
  }
}

/* ─── Collapsed pill ──────────────────────────────────────────────────
   Compact by default: two small 40x40 icon buttons (dot + shuffle).
   Hovering the expand button on desktop slides in the theme name as
   a reveal affordance; the button itself stays small until hovered. */

.ts-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--ts-bg);
  color: var(--ts-fg);
  border-radius: 999px; /* fully rounded pill — reads as a control, not a banner */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
  border: 1px solid var(--ts-line);
  /* overflow stays clipped on the pill content so the label slide-in
     reveal still works; the first-visit halo lives on a sibling so
     it isn't clipped. */
  overflow: hidden;
  position: relative;
}

/* ─── First-visit pulse onboarding ───────────────────────────────────
   Soft outwards halo to draw attention to the pill on first visit.
   Set/cleared by switcher.js (sessionStorage flag, dismissed on
   first interaction or after a timeout). Animation is suppressed
   under prefers-reduced-motion. */
.ts-pill.is-first-visit::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(227, 52, 47, 0.55);
  animation: ts-onboard-pulse 1800ms cubic-bezier(.2, .7, .2, 1) infinite;
}
@keyframes ts-onboard-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(227, 52, 47, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(227, 52, 47, 0); }
  100% { box-shadow: 0 0 0 0   rgba(227, 52, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-pill.is-first-visit::after { animation: none; }
}

.ts-pill button {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* label uses margin-inline-start so the dot stays perfectly centered when collapsed */
  transition: background var(--ts-dur) var(--ts-ease),
              inline-size var(--ts-dur) var(--ts-ease);
}

.ts-pill button:hover,
.ts-pill button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Just the accent dot in the collapsed state. */
.ts-expand {
  /* keep centered */
}

.ts-dot {
  inline-size: 8px;
  block-size: 8px;
  background: var(--ts-accent);
  border-radius: 50%;
  flex: none;
}

/* Hide the label by default. Slide it in on hover on desktop so the
   pill is unobtrusive at rest but labelled when the user reaches
   for it. On touch devices (no :hover), the label stays hidden —
   the user can tap to open the full panel to see theme names. */
.ts-label {
  inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: inline-size var(--ts-dur) var(--ts-ease),
              opacity var(--ts-dur) var(--ts-ease),
              margin-inline-start var(--ts-dur) var(--ts-ease);
  margin-inline-start: 0;
}

@media (hover: hover) {
  .ts-pill:hover .ts-expand,
  .ts-pill:focus-within .ts-expand {
    inline-size: auto;
    padding-inline: 14px 16px;
  }
  .ts-pill:hover .ts-label,
  .ts-pill:focus-within .ts-label {
    inline-size: auto;
    opacity: 1;
    margin-inline-start: 6px;
  }
}


/* ─── Scrim (mobile only) ─────────────────────────────────────────────── */

.ts-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: calc(var(--ts-z) - 1);
  opacity: 0;
  transition: opacity var(--ts-dur) var(--ts-ease);
  pointer-events: none;
}
.ts-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) and (min-width: 960px) {
  /* On desktop the panel is a small floating card, no scrim. */
  .ts-scrim { display: none; }
}

/* ─── Panel ───────────────────────────────────────────────────────────── */

.ts-panel {
  position: fixed;
  background: var(--ts-bg);
  color: var(--ts-fg);
  border: 1px solid var(--ts-line);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  padding: 16px;
  z-index: var(--ts-z);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ts-dur) var(--ts-ease),
              transform var(--ts-dur) var(--ts-ease);
  pointer-events: none;
}
.ts-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Mobile: bottom sheet pinned to bottom, full-ish width. */
@media (max-width: 959px), (hover: none), (pointer: coarse) {
  .ts-panel {
    inset-inline: 12px;
    inset-block-end: max(12px, env(safe-area-inset-bottom, 0px));
    max-block-size: min(80vh, 560px);
    overflow-y: auto;
  }
}

/* Desktop: anchored near the pill (bottom-right), opens upward. */
@media (hover: hover) and (min-width: 960px) {
  .ts-panel {
    inset-block-end: 68px;
    inset-block-start: auto;
    inset-inline-end: 16px;
    inline-size: 340px;
    max-block-size: min(72vh, 620px);
    overflow-y: auto;
  }
}

/* ─── Panel header ─── */

.ts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--ts-line);
}
.ts-title { color: var(--ts-muted); letter-spacing: 0.14em; }
.ts-close {
  background: transparent;
  color: var(--ts-fg);
  border: 0;
  font: inherit;
  letter-spacing: 0;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ts-dur) var(--ts-ease);
}
.ts-close:hover,
.ts-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* ─── Theme list ─── */

.ts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-item {
  /* Button wraps the whole row so the entire surface is tappable. */
  display: block;
}

.ts-item button {
  inline-size: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-block-size: 56px;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 8px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none; /* theme names in title case */
  text-align: start;
  cursor: pointer;
  transition: background var(--ts-dur) var(--ts-ease);
}
.ts-item button:hover,
.ts-item button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.ts-item.is-active button {
  background: rgba(255, 255, 255, 0.10);
}

.ts-preview {
  display: inline-flex;
  gap: 4px;
  flex: none;
}
.ts-preview span {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.ts-item-body {
  min-inline-size: 0;
}
.ts-item-name {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ts-fg);
  text-transform: none;
}
.ts-item-desc {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ts-muted);
  text-transform: none;
  margin-block-start: 2px;
  line-height: 1.4;
  /* Clamp to 2 lines on mobile to keep the row tidy. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-item-active {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ts-accent);
}

/* ─── Footer actions ─── */

.ts-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--ts-line);
}
.ts-actions button {
  background: transparent;
  color: var(--ts-fg);
  border: 1px solid var(--ts-line);
  border-radius: 8px;
  padding: 12px 14px;
  min-block-size: 44px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background var(--ts-dur) var(--ts-ease),
              border-color var(--ts-dur) var(--ts-ease);
}
.ts-actions button:hover,
.ts-actions button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}
.ts-pin-toggle[aria-pressed="true"] {
  background: rgba(227, 52, 47, 0.16);
  border-color: var(--ts-accent);
  color: var(--ts-accent);
}

/* ─── View-full-gallery link ─── */

.ts-gallery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  margin-block-start: 4px;
  border: 1px solid var(--ts-line);
  border-radius: 8px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ts-fg);
  text-decoration: none;
  min-block-size: 44px;
  transition: background var(--ts-dur) var(--ts-ease),
              border-color var(--ts-dur) var(--ts-ease);
}
.ts-gallery:hover,
.ts-gallery:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}
.ts-gallery .ts-gallery-arr {
  color: var(--ts-muted);
  transition: transform var(--ts-dur) var(--ts-ease),
              color var(--ts-dur) var(--ts-ease);
}
.ts-gallery:hover .ts-gallery-arr,
.ts-gallery:focus-visible .ts-gallery-arr {
  color: var(--ts-fg);
  transform: translateX(3px);
}

/* ─── Footer note / share link ─── */

.ts-note {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ts-muted);
  text-transform: none;
}
.ts-note a {
  color: var(--ts-fg);
  text-decoration: underline;
  text-decoration-color: var(--ts-line);
  text-underline-offset: 3px;
}
.ts-note a:hover { text-decoration-color: var(--ts-fg); }

/* ─── Focus visibility ────────────────────────────────────────────────
   The rules above clear the UA outline and lean on a background shift
   alone, which is too faint a cue for keyboard users (WCAG 2.4.7).
   Draw an explicit 2px accent ring on :focus-visible — keyboard-driven
   focus only, so taps and clicks stay clean — and keep the background
   change as a redundant signal. Declared last so it wins the cascade
   against the equal-specificity `outline: none` rules above. */
.ts-pill button:focus-visible,
.ts-close:focus-visible,
.ts-item button:focus-visible,
.ts-actions button:focus-visible,
.ts-gallery:focus-visible,
.ts-note a:focus-visible {
  outline: 2px solid var(--ts-accent);
  outline-offset: 2px;
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
  .ts-pill button,
  .ts-panel,
  .ts-scrim,
  .ts-close,
  .ts-item button,
  .ts-actions button {
    transition: none !important;
  }
  .ts-panel { transform: none !important; }
}