/* Concept switcher — a presentation control that rides on top of both concepts.
   Deliberately neutral-dark so it reads as "ours" rather than fighting either
   design's palette (01 uses --fire orange, 02 uses --red/--acid).

   Collision avoidance is the fiddly part. Both concepts put a fixed bar along
   the bottom at <=1050px:
     future01  .mobile-quickbar  z-index 40, bottom .65rem, min-height 58px
     future02  .mobile-dock      z-index 50, bottom .65rem, min-height 56px
   Above 1050px both are display:none, so the switcher takes the bottom-right
   corner. At or below it, the switcher lifts clear of that bar instead. z-index
   60 puts it over both, and under each concept's .skip-link (z 100). */

.dg-switch,
.dg-switch * { box-sizing: border-box; }

.dg-switch {
  position: fixed;
  z-index: 60;
  right: .65rem;
  bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(10, 12, 16, .92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1;
}

/* Lift above each concept's own bottom bar on the breakpoints where it appears.
   .65rem bar offset + 58px bar + .55rem breathing room. */
@media (max-width: 1050px) {
  .dg-switch {
    right: .65rem;
    left: .65rem;
    bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    /* Shrink to the pill's contents rather than spanning the viewport, so the
       rounded edge always sits around the buttons instead of the children
       spilling past it. */
    width: fit-content;
    max-width: calc(100vw - 1.3rem);
    margin: 0 auto;
  }
}


.dg-switch-label {
  display: flex;
  align-items: center;
  padding: 0 .6rem 0 .75rem;
  color: rgba(255, 255, 255, .42);
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dg-switch a {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px; /* touch target — matches the 44px floor both concepts hold */
  padding: 0 .85rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .16s, color .16s;
}

.dg-switch a b {
  font-size: .55rem;
  font-weight: 800;
  opacity: .6;
}

.dg-switch a:hover,
.dg-switch a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }

.dg-switch a[aria-current="page"] {
  background: #fff;
  color: #0a0c10;
}
.dg-switch a[aria-current="page"] b { opacity: .55; }

.dg-switch .dg-switch-compare {
  color: rgba(255, 255, 255, .55);
  font-size: .6rem;
  padding: 0 .8rem;
}
.dg-switch .dg-switch-compare:hover,
.dg-switch .dg-switch-compare:focus-visible { color: #fff; }

/* The concepts' bottom bars are hidden on wide screens, so on narrow ones the
   switcher is the second fixed thing on screen. Keep the page's own content
   scrollable past both. */
@media (max-width: 1050px) {
  body { padding-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dg-switch a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Narrow-phone sizing. These MUST stay at the end of the file: they override
   .dg-switch-label's own `display: flex` at equal specificity, so source order
   is what decides. Placed above that rule they silently lose — which is exactly
   what happened first time round, and it looked like the media query wasn't
   firing at all.

   Measured at 390px: the four children wanted 381px against 344px of usable
   width, so the label and both end buttons were clipped by the pill's own
   rounded edge. The word "Concept" is the most droppable thing in there — the
   01/02 numerals already say what the control is.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .dg-switch-label { display: none; }
}

@media (max-width: 420px) {
  .dg-switch a { padding: 0 .62rem; font-size: .63rem; letter-spacing: .04em; }
  .dg-switch .dg-switch-compare { padding: 0 .58rem; font-size: .56rem; }
}