/* PestaDuel! theme switcher pill, plus the fonts of both themes (each page only ships its own). */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@500;700;800;900&family=Orbitron:wght@600;800;900&family=Exo+2:wght@400;500;600;700;800&display=swap');

.pd-switch {
  --sw-bg: rgba(20, 12, 50, .72);
  --sw-line: rgba(255, 244, 220, .28);
  --sw-on: #ffc93c;
  --sw-on-ink: #2a1846;
  --sw-text: #fff4dc;
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--sw-bg); border: 1px solid var(--sw-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 800 13px/1 system-ui, sans-serif; vertical-align: middle;
}
.pd-switch button {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 7px 11px;
  display: inline-flex; align-items: center; gap: 6px; font: inherit; color: var(--sw-text); background: transparent;
  transition: background .2s, color .2s, box-shadow .2s;
}
.pd-switch button span { font-size: 15px; line-height: 1; }
.pd-switch button:hover { background: rgba(255, 255, 255, .1); }
.pd-switch button[aria-pressed="true"] { background: var(--sw-on); color: var(--sw-on-ink); }
.pd-switch button:focus-visible { outline: 2px solid var(--sw-on); outline-offset: 2px; }

html[data-theme="carnival"] .pd-switch { font-family: 'Nunito', system-ui, sans-serif; }
html[data-theme="carnival"] .pd-switch button[aria-pressed="true"] { box-shadow: 0 3px 0 #f29e02; }
html[data-theme="space"] .pd-switch {
  --sw-bg: rgba(6, 10, 30, .72); --sw-line: rgba(120, 220, 255, .4); --sw-on: #3ef2ff; --sw-on-ink: #04050d; --sw-text: #e8f1ff;
  font-family: 'Orbitron', system-ui, sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
html[data-theme="space"] .pd-switch button[aria-pressed="true"] { box-shadow: 0 0 16px rgba(62, 242, 255, .6); }

/* Floating in a corner on pages without a slot for it; faded until used so it stays out of the show. */
.pd-switch.floating { position: fixed; left: 12px; bottom: 12px; z-index: 900; opacity: .55; transition: opacity .2s; }
.pd-switch.floating:hover, .pd-switch.floating:focus-within { opacity: 1; }
.pd-switch.floating button b { display: none; }
@media (max-width: 600px) { .pd-switch button b { display: none; } }

/* Slots inside a page's own toolbar: icons only, so the bar keeps its layout. */
.pd-slot { display: inline-flex; flex: none; }
.topbar .pd-switch button b, .tools .pd-switch button b { display: none; }
.topbar .pd-switch button, .tools .pd-switch button { padding: 7px 9px; }

/* Breadcrumb from a mode's hub back to the mode picker (/): 🏠 Choose a mode › 📱 Self-Enroll */
.pd-crumbs {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 3px; border-radius: 999px;
  background: var(--sw-bg, rgba(20, 12, 50, .72)); border: 1px solid var(--sw-line, rgba(255, 244, 220, .28));
  font: 800 13px/1 system-ui, sans-serif; color: var(--sw-text, #fff4dc);
}
.pd-crumbs a, .pd-crumbs [aria-current] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; }
.pd-crumbs a { color: inherit; text-decoration: none; opacity: .85; transition: background .2s, opacity .2s; }
.pd-crumbs a:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
.pd-crumbs a:focus-visible { outline: 2px solid var(--sw-on, #ffc93c); outline-offset: 2px; }
.pd-crumbs .sep { opacity: .5; }
.pd-crumbs [aria-current] { background: var(--sw-on, #ffc93c); color: var(--sw-on-ink, #2a1846); }
html[data-theme="carnival"] .pd-crumbs { font-family: 'Nunito', system-ui, sans-serif; }
html[data-theme="space"] .pd-crumbs {
  --sw-bg: rgba(6, 10, 30, .72); --sw-line: rgba(120, 220, 255, .4); --sw-on: #3ef2ff; --sw-on-ink: #04050d; --sw-text: #e8f1ff;
  font-family: 'Orbitron', system-ui, sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}