/* ky-exp.css — Experiences group inside the theme switcher panel.
   ===========================================================================
   The group (#ky-exp-group, built by ky/ky-exp.js) lives as the FIRST child
   of #ky-sw-panel and copies the panel's visual grammar. Its rows are
   .kyexp-row on purpose — .ky-row is indexed positionally against THEMES by
   the inline apply() and must never gain extra members (ky-exp.js header).
   The inner chip/name classes (.ky-chips/.ky-name) ARE reused: the inline
   style#ky-switch block that defines them ships statically in the head and
   is never removed, and no script queries them.

   The panel is a fixed dark glass surface with literal colors in the inline
   CSS, so literals are matched here rather than theme vars — the panel does
   not re-skin per theme and neither do we.

   THEME PACK HOOKS (documented contract, written by ky-exp.js):
     html[data-exp="<key>"]     scope ALL pack CSS under this
     html[data-exp-axis="h|v"]  layout axis, read by ky-show
   Module vars a pack (or future theme) may override:
     --kyexp-badge-ink          badge ink (default a cool counterpoint to the
                                inline .ky-badge's honey #E3AC33)
   ============================================================ */

.kyexp-group{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-bottom:3px;
  margin-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* row grammar mirrors .ky-row exactly (padding/radius/type ride the same
   numbers so the two groups read as one list) */
.kyexp-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 9px;
  border-radius:8px;
  cursor:pointer;
  color:#eee;
  font-size:11px;
  transition:background .18s;
}
.kyexp-row:hover{ background:rgba(255,255,255,.09); }
.kyexp-row.on{ background:rgba(255,255,255,.14); }

.kyexp-badge{
  margin-left:auto;
  font-size:8px;
  letter-spacing:.1em;
  color:var(--kyexp-badge-ink,#9EC1FF);
  border:1px solid color-mix(in srgb, var(--kyexp-badge-ink,#9EC1FF) 50%, transparent);
  border-radius:4px;
  padding:1px 4px;
}

/* the fade-through on swapped hero lines is driven inline by the engine
   (opacity only); under reduced motion the engine swaps instantly, so no
   motion rules are needed here */