/* ==========================================================================
   Kit pill — floating kit control on demo pages.
   Markup: partials/kit-pill.html · Behaviour: assets/js/components/kit-pill.js

   Position is set per page through two custom properties on the element:
   --kit-pill-bottom (desktop) and --kit-pill-bottom-mobile (< 960px).
   ========================================================================== */

.kit-pill {
  position: fixed;
  left: 16px;
  right: auto;
  bottom: var(--kit-pill-bottom, 20px);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--graphite-900);
  box-shadow: 0 12px 32px -12px rgba(10, 18, 22, .5);
}

.kit-pill__home {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  color: var(--graphite-50);
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
.kit-pill__home:hover {
  background: var(--graphite-800);
  color: var(--graphite-50);
}

.kit-pill__mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--scrub-300);
  box-shadow: inset 0 0 0 2.5px var(--graphite-900), inset 0 0 0 4px var(--scrub-300);
}

.kit-pill__toggle {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-mist);
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
}
.kit-pill__toggle[aria-pressed="true"] {
  background: var(--scrub-300);
  color: var(--graphite-900);
}

/* Label states */
.kit-pill__label-narrow,
.kit-pill__state-on { display: none; }
.kit-pill__toggle[aria-pressed="true"] .kit-pill__state-on { display: inline; }
.kit-pill__toggle[aria-pressed="true"] .kit-pill__state-off { display: none; }

@media (max-width: 959.98px) {
  .kit-pill {
    left: auto;
    right: 12px;
    bottom: var(--kit-pill-bottom-mobile, 84px);
  }
  .kit-pill__home-label,
  .kit-pill__label-wide { display: none; }
  .kit-pill__label-narrow { display: inline; }
}