/* Kingdom Advisors Elementor Widgets — Accordion Pills
   A FAQ accordion where each item is a pill sized to its own question. Opening one grows it wider
   and taller to reveal the answer under the question, and the icon either fades out or swaps for a
   chosen Opened Icon.

   Structure:

     .kaw-pills                        row of columns (wraps)
       .kaw-pills__col                 one column, items stacked
         .kaw-pills__item              the pill — background, radius, and the clip
           .kaw-pills__head            h2-h6 or div, wrapping the button
             .kaw-pills__trigger       <button>
               .kaw-pills__q
               .kaw-pills__icons       the icon slot — ONE grid cell, sized to the closed icon
                 .kaw-pills__icon.is--closed   built-in plus (two bars) or the chosen icon
                 .kaw-pills__icon.is--open     only rendered when an Opened Icon is chosen
           .kaw-pills__panel           the collapse — width AND height both matter, see below
             .kaw-pills__panel-inner   fixed width so the answer does not re-wrap mid-animation
               .kaw-pills__answer

   TWO PROPERTIES ANIMATE: the item's WIDTH and the panel's HEIGHT. The item's height is never set —
   it is always auto and simply follows the panel, which means late-loading content inside an open
   pill grows it correctly instead of being clipped by a stale measurement.

   WHY THE PANEL IS `width: 0` WHEN CLOSED, which looks redundant next to `height: 0`. A closed pill
   is `width: max-content`, and max-content measures EVERY child — including a zero-height, clipped
   panel. The panel's inner is deliberately a fixed width, so without this the panel would drag every
   closed pill out to the full open width and the whole design would collapse into a plain accordion.
   `height: 0` alone does not prevent that; a definite `width: 0` does.

   The controls write --kaw-pl-* variables on .kaw-pills and this file reads them, so the JS
   measurements and the styling can never disagree about a number.

   MODES (v1.42.0), each switched on by an attribute on .kaw-pills that is only printed when the mode
   is chosen — so every rule for them is scoped under that attribute and none can reach a widget built
   before they existed (tools/test-accordion-pills.php row L enforces it):

     [data-layout="inline"]          one .kaw-pills__col that wraps into rows
     [data-open-style="popover"]     the panel is an absolutely positioned call-out; the pill never
                                     changes size and nothing writes geometry inline
     [data-trigger="icon"]           the trigger is a disc (--kaw-pl-trig-*); the question is visually
                                     hidden and stays the button's accessible name
     [data-hover="yes"]              a transparent strip from an open call-out to its pill (pointer can cross the gap)
     [data-pill-blur="on"]           the pill surface moves to .kaw-pills__item::before (see below)
     [data-trigger-blur="on"]        backdrop blur on the disc
     [data-pop-blur="on"]            backdrop blur on the call-out

   The only unscoped edits are the four plus-bar rules, which gained default-less variables whose
   fallbacks are exactly the 1.41.2 values. */

.kaw-pills,
.kaw-pills *,
.kaw-pills *::before,
.kaw-pills *::after {
  box-sizing: border-box;
}

.kaw-pills {
  --kaw-pl-cols: 2;
  --kaw-pl-open-w: 400px;
  --kaw-pl-col-gap: 40px;
  --kaw-pl-row-gap: 20px;
  --kaw-pl-pad-top: 20px;
  --kaw-pl-pad-right: 20px;
  --kaw-pl-pad-bottom: 20px;
  --kaw-pl-pad-left: 20px;
  --kaw-pl-bg: #48d597;
  --kaw-pl-q: #051c2c;
  --kaw-pl-a: #051c2c;
  --kaw-pl-icon: #051c2c;
  --kaw-pl-icon-ring: #051c2c;
  --kaw-pl-icon-ring-w: 1.5px;
  --kaw-pl-icon-size: 20px;
  --kaw-pl-icon-gap: 20px;
  --kaw-pl-answer-gap: 20px;
  --kaw-pl-focus: #051c2c;
  --kaw-pl-dur: 0.5s;
  --kaw-pl-ease: cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--kaw-pl-row-gap) var(--kaw-pl-col-gap);
}

/* Columns are DEALT IN PHP, so the number of column elements is fixed by the desktop setting; this
   variable only decides how many of them sit on a row. That is why dropping the tablet or mobile
   value stacks the existing groups rather than re-dealing the questions into new ones — re-dealing
   would need different markup per breakpoint, which one server render cannot produce.

   `min()` against the open width is what keeps the columns hugging the left instead of spreading to
   fill a wide container: at 1200px with two columns the arithmetic gives 580px, and the design wants
   400. In a container too narrow for the arithmetic, the column shrinks and the pills follow. */
.kaw-pills__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kaw-pl-row-gap);
  flex: 0 0 auto;
  min-width: 0;
  /* One line on purpose — see the note in split-cards.css. A minifier on the live site turned the
     comma inside a multi-line min() into a close paren and the browser dropped the declaration. This
     one happened to survive the same minifier, but it is the identical construct and the identical
     risk, so it is not left to luck. */
  width: min(var(--kaw-pl-open-w), calc((100% - (var(--kaw-pl-cols) - 1) * var(--kaw-pl-col-gap)) / var(--kaw-pl-cols)));
}

/* ------------------------------------------------------------------------------------ the pill */
.kaw-pills__item {
  position: relative;
  width: max-content;
  max-width: 100%;
  background-color: var(--kaw-pl-bg);
  border-radius: 10px;
  /* Clips the fixed-width panel while the pill is still narrow, which is what produces the
     left-to-right reveal instead of the answer re-wrapping on every frame. */
  overflow: hidden;
}

.kaw-pills__item:hover {
  background-color: var(--kaw-pl-bg-hover, var(--kaw-pl-bg));
}

/* After :hover on purpose — both are (0,2,0), so source order decides, and an open pill should keep
   its open colour while the pointer is over it. */
.kaw-pills__item[data-open="true"] {
  width: 100%;
  background-color: var(--kaw-pl-bg-open, var(--kaw-pl-bg));
}

/* --------------------------------------------------------------------------------- the question
   Hardened: the heading is a bare h2-h6 and every theme on earth sets margins and font-size on
   those. No control writes margin here, so the controls still own every number that matters. */
.kaw-pills .kaw-pills__head {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.kaw-pills .kaw-pills__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kaw-pl-icon-gap);
  width: 100%;
  margin: 0;
  padding: var(--kaw-pl-pad-top) var(--kaw-pl-pad-right) var(--kaw-pl-pad-bottom) var(--kaw-pl-pad-left);
  background: none;
  border: 0;
  border-radius: inherit;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Drawn INSIDE the pill. The pill is `overflow: hidden` so it can clip the growing panel, which
   would also cut a normal outside ring in half — and a focus ring that is only half visible is the
   kind of thing that passes a manual check and fails a real keyboard user. */
.kaw-pills .kaw-pills__trigger:focus-visible {
  outline: 2px solid var(--kaw-pl-focus);
  outline-offset: -4px;
}

.kaw-pills__q {
  color: var(--kaw-pl-q);
  font-weight: 700;
  line-height: 1.2;
  transition: color 0.25s ease;
}

/* Added by the script to any pill whose question fits on one line — see the note in measure().
   It stops the question re-wrapping for a few frames if the pill is ever momentarily narrower than
   the text, which is what a bouncy overshoot on the closing direction used to cause. Only ever
   applied where it changes nothing at rest: a question long enough to wrap does not get this class,
   because such a pill is already at the open width and has no width animation at all. */
.kaw-pills__item--oneline .kaw-pills__q {
  white-space: nowrap;
}

.kaw-pills__item:hover .kaw-pills__q {
  color: var(--kaw-pl-q-hover, var(--kaw-pl-q));
}

/* ------------------------------------------------------------------------------------- the icon
   TWO icons live in one slot: the closed one, and — only when an Opened Icon is chosen — the open
   one stacked on top of it. They cross-fade.

   THE SLOT IS SIZED BY THE CLOSED ICON ONLY, and that is load-bearing rather than tidy. A closed
   pill's width is measured in the script from `max-content` (see measure()), so anything in the
   header that takes layout space sets how wide a closed pill is. If the opened icon were in flow, a
   client who chose a bigger one would silently widen every closed pill on the page — and the whole
   point of the Gap Before Icon control is that a closed pill is exactly as wide as its text. So the
   opened icon is taken out of flow and centred over the slot instead; it can be any size without
   moving anything.

   Its space is NOT collapsed when open: the question is left-aligned and the icon pinned right, so
   removing the space would move nothing and would only risk a reflow mid-width-animation. */
.kaw-pills__icons {
  position: relative;
  flex: none;
  /* A one-cell grid with both icons in that cell: they stack for the cross-fade, and the cell stays
     the CLOSED icon's size.

     THE TRACK MUST BE `minmax(0, 1fr)`, and both halves of that are load-bearing. An implicit track
     is sized `auto` = max-content, so a 44px opened icon stretches the CELL to 44px even though the
     container is 20px — and then both icons centre on that 44px cell rather than on the slot,
     putting the closed icon 12px right of where it belongs. Plain `1fr` does not fix it either:
     `1fr` means `minmax(auto, 1fr)`, and that auto minimum is still the item's min-content, so the
     cell stays 44px. Only a 0 minimum lets the cell resolve to the container's definite 20px and
     leaves an oversized icon to overflow it symmetrically. Both were measured, both were 12px out. */
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: var(--kaw-pl-icon-size);
  height: var(--kaw-pl-icon-size);
}

.kaw-pills__icon {
  position: relative;   /* containing block for the built-in plus/minus bars */
  grid-area: 1 / 1;
  /* place-self, NOT `position:absolute; inset:0; margin:auto`. Auto margins only centre a box that
     FITS: once the opened icon is bigger than the 20px cell the abspos equations are over-constrained,
     `right` is dropped in LTR, and the icon silently left-aligns — measured 12px off centre with a
     44px opened icon. A grid item centres correctly whether it fits or overflows. */
  place-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kaw-pl-icon-size);
  height: var(--kaw-pl-icon-size);
  border-radius: 100em;
  /* The bar thickness is read from here rather than straight off --kaw-pl-icon-ring-w, so the open
     box can redefine it without a self-referential var() cycle. Plus / Minus Stroke (v1.42.0,
     default-less) overrides it for both icons; unset, this is exactly the 1.41.2 value. */
  --kaw-pl-bar-w: var(--kaw-pl-icon-bar-w, var(--kaw-pl-icon-ring-w));
  color: var(--kaw-pl-icon);
  background-color: var(--kaw-pl-icon-bg, transparent);
  box-shadow: inset 0 0 0 var(--kaw-pl-icon-ring-w) var(--kaw-pl-icon-ring);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* THE OPENED ICON INHERITS BY DEFAULT. Every --kaw-pl-icon-open-* control ships with NO default, so
   an untouched one emits no declaration and each var() below falls through to the closed icon's
   value. "Leave it empty and it matches the closed icon" is that fallback, not a copy made in PHP —
   which is why none of those controls may ever be given a default. */
.kaw-pills__icon.is--open {
  width: var(--kaw-pl-icon-open-size, var(--kaw-pl-icon-size));
  height: var(--kaw-pl-icon-open-size, var(--kaw-pl-icon-size));
  --kaw-pl-bar-w: var(--kaw-pl-icon-bar-w, var(--kaw-pl-icon-open-ring-w, var(--kaw-pl-icon-ring-w)));
  color: var(--kaw-pl-icon-open, var(--kaw-pl-icon));
  background-color: var(--kaw-pl-icon-open-bg, var(--kaw-pl-icon-bg, transparent));
  box-shadow: inset 0 0 0 var(--kaw-pl-icon-open-ring-w, var(--kaw-pl-icon-ring-w))
                          var(--kaw-pl-icon-open-ring, var(--kaw-pl-icon-ring));
  opacity: 0;
  transform: scale(0.6);
}

/* Closed pill: show the closed icon, hide the open one (already hidden by the rule above).
   Open pill: swap them. Scoping the fade to .is--closed is what stops the open icon fading out
   along with it — the old rule matched .kaw-pills__icon bare and would now hit both. */
.kaw-pills__item[data-open="true"] .kaw-pills__icon.is--closed {
  opacity: 0;
  transform: scale(0.6);
}

.kaw-pills__item[data-open="true"] .kaw-pills__icon.is--open {
  opacity: 1;
  transform: none;
}

/* The built-in plus: two bars, so it stays a crisp 1px cross at any size instead of relying on a
   font glyph or an SVG that would need its own colour plumbing. The built-in minus is the same
   horizontal bar on its own, so one set of rules draws both and the ring width moves them together.
   Plus / Minus Length (v1.42.0) is default-less: unset, the fallback is the original 45%. */
.kaw-pills__bar {
  position: absolute;
  background-color: currentColor;
  width: var(--kaw-pl-bar-w);
  height: var(--kaw-pl-icon-bar-len, 45%);
}

.kaw-pills__bar.is--h {
  width: var(--kaw-pl-icon-bar-len, 45%);
  height: var(--kaw-pl-bar-w);
}

.kaw-pills__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kaw-pills__icon i {
  font-size: var(--kaw-pl-icon-size);
  line-height: 1;
}

.kaw-pills__icon.is--open i {
  font-size: var(--kaw-pl-icon-open-size, var(--kaw-pl-icon-size));
}

/* ------------------------------------------------------------------------------------ the panel */
.kaw-pills__panel {
  width: 0;                 /* load-bearing — see the header note */
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.kaw-pills__item[data-open="true"] .kaw-pills__panel {
  width: 100%;
  height: auto;
  visibility: visible;
}

/* A definite width so the answer wraps exactly as it finally will, from the first frame. Without it
   the text re-flows on every frame of the width animation — visibly juddery, and a full layout pass
   per frame. The JS resolves the open width to pixels and writes it here, because the control also
   accepts a percentage and a percentage of a moving box is a moving target. */
.kaw-pills__panel-inner {
  width: var(--kaw-pl-inner-w, 100%);
  padding:
    max(0px, calc(var(--kaw-pl-answer-gap) - var(--kaw-pl-pad-bottom)))
    var(--kaw-pl-pad-right)
    var(--kaw-pl-pad-bottom)
    var(--kaw-pl-pad-left);
}

.kaw-pills__answer {
  color: var(--kaw-pl-a);
  line-height: 1.35;
}

/* Hardened for the same reason as every other bare tag in this pack: a theme's `p { margin }` on a
   single-class selector would push the copy off the padding the control just set. */
.kaw-pills .kaw-pills__answer > :first-child { margin-top: 0 !important; }
.kaw-pills .kaw-pills__answer > :last-child { margin-bottom: 0 !important; }

.kaw-pills .kaw-pills__answer a {
  color: var(--kaw-pl-a-link, inherit);
}

/* ------------------------------------------------------------------------------------- motion
   Simple mode only. Bouncy is driven by GSAP writing inline styles, and a CSS transition on the
   same properties would fight it frame by frame. */
.kaw-pills[data-motion="simple"] .kaw-pills__item {
  transition: width var(--kaw-pl-dur) var(--kaw-pl-ease), background-color 0.25s ease;
}

.kaw-pills[data-motion="simple"] .kaw-pills__panel {
  transition: height var(--kaw-pl-dur) var(--kaw-pl-ease);
}

.kaw-pills[data-motion="bouncy"] .kaw-pills__item {
  transition: background-color 0.25s ease;
}

/* =================================================================================== v1.42.0 modes
   Everything from here to the setup-frame rules is scoped under a mode attribute. EVERY DECLARATION
   WITH A COMMA INSIDE min()/calc()/var()/translate() STAYS ON ONE LINE: WP Rocket minifies this file
   on the Conference site, and a comma across a newline is what it corrupted in v1.41.1.

   ------------------------------------------------------------------------------ layout: inline
   One column holding every pill, turned into a wrapping row. Column Gap and Row Gap are reused as the
   gaps between pills and between rows. A pill still hugs its text and is still capped by Open Width —
   and by the row, so a long question wraps rather than overflowing a narrow container. */
.kaw-pills[data-layout="inline"] .kaw-pills__col {
  flex: 1 1 100%;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: var(--kaw-pl-inline-justify, flex-start);
  column-gap: var(--kaw-pl-col-gap);
  row-gap: var(--kaw-pl-row-gap);
}

.kaw-pills[data-layout="inline"] .kaw-pills__item {
  max-width: min(100%, var(--kaw-pl-open-w));
}

/* ------------------------------------------------------------------------- open style: pop-over
   THE PILL NEVER CHANGES SIZE, in any state, and it stops clipping: the call-out is its descendant
   and hangs outside it. (The pill must stay the call-out's containing block, which is why the call-out
   is a child of the pill rather than a portal: the insets below are relative to it.) */
.kaw-pills[data-open-style="popover"] .kaw-pills__item,
.kaw-pills[data-open-style="popover"] .kaw-pills__item[data-open="true"] {
  width: max-content;
  overflow: visible;
}

/* The call-out. SPECIFICITY IS CHOSEN SO THAT NO RULE DEPENDS ON FILE ORDER. The expand-mode panel
   rules this has to beat are all 0,3,0 or lower (.kaw-pills__panel 0,1,0; the open panel 0,3,0; the
   Simple-motion height transition 0,3,0). This one is 0,4,0 — the panel is a direct child of the item —
   and the open state below is 0,5,0 and restates the width, so an open call-out can never end up at
   100% of its pill whichever of the two 0,3,0 rules happened to come last.

   Placement arrives as variables from the Placement control (one dictionary string per breakpoint);
   the fallbacks here ARE below-start, so a widget saved without a placement still opens below. The
   script only ever writes --kaw-pl-pop-shift and --kaw-pl-pop-max (keeping the call-out inside its
   container) and never a width, height or inset. */
.kaw-pills[data-open-style="popover"] .kaw-pills__item > .kaw-pills__panel {
  position: absolute;
  z-index: 20;
  top: var(--kaw-pl-pop-t, calc(100% + var(--kaw-pl-pop-gap, 10px)));
  bottom: var(--kaw-pl-pop-b, auto);
  inset-inline-start: var(--kaw-pl-pop-s, 0px);
  inset-inline-end: var(--kaw-pl-pop-e, auto);
  width: var(--kaw-pl-pop-w, 320px);
  max-width: var(--kaw-pl-pop-max, none);
  height: auto;
  overflow: visible;
  background-color: var(--kaw-pl-pop-bg, var(--kaw-pl-bg-open, var(--kaw-pl-bg)));
  border-radius: var(--kaw-pl-pop-radius, 10px);
  visibility: hidden;
  opacity: 0;
  transform: translate(calc(var(--kaw-pl-pop-shift, 0px) + var(--kaw-pl-pop-dx, 0px)), var(--kaw-pl-pop-dy, -6px));
  /* Closing: fade, then hide — visibility waits for the fade. */
  transition: opacity calc(var(--kaw-pl-dur) * 0.6) ease, transform var(--kaw-pl-dur) var(--kaw-pl-ease), visibility 0s linear calc(var(--kaw-pl-dur) * 0.6);
}

.kaw-pills[data-open-style="popover"] .kaw-pills__item[data-open="true"] > .kaw-pills__panel {
  width: var(--kaw-pl-pop-w, 320px);
  height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  transform: translate(var(--kaw-pl-pop-shift, 0px), 0px);
  /* Opening: visible at once, then fade and settle. */
  transition: opacity calc(var(--kaw-pl-dur) * 0.6) ease, transform var(--kaw-pl-dur) var(--kaw-pl-ease), visibility 0s linear 0s;
}

/* Bouncy, without GSAP: a springy curve on the OPENING transform only. Closing keeps the plain ease —
   the same asymmetry the expand mode uses, for the same reason (an overshoot on the way out reads as
   a glitch, not a bounce). The script no longer downgrades a pop-over's data-motion when GSAP is
   absent, which it never loads. */
.kaw-pills[data-open-style="popover"][data-motion="bouncy"] .kaw-pills__item[data-open="true"] > .kaw-pills__panel {
  transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1), linear;
}

/* The answer inside a call-out: its own padding (falling back to the pill's), full call-out width. */
.kaw-pills[data-open-style="popover"] .kaw-pills__panel-inner {
  width: 100%;
  padding: var(--kaw-pl-pop-pad-t, var(--kaw-pl-pad-top)) var(--kaw-pl-pop-pad-r, var(--kaw-pl-pad-right)) var(--kaw-pl-pop-pad-b, var(--kaw-pl-pad-bottom)) var(--kaw-pl-pop-pad-l, var(--kaw-pl-pad-left));
}

/* NO 0px FALLBACK ON ANY OF THE THREE BLURS, on purpose. A value set on only one breakpoint leaves
   the variable undefined elsewhere, so the declaration is invalid at computed-value time and falls
   back to `none`: no compositing layer and no Backdrop Root where no blur was asked for. */
.kaw-pills[data-pop-blur="on"] .kaw-pills__panel {
  -webkit-backdrop-filter: blur(var(--kaw-pl-pop-blur));
  backdrop-filter: blur(var(--kaw-pl-pop-blur));
}

/* Hover bridge (WCAG 1.4.13 "hoverable"): a transparent strip across the gap between an OPEN call-out
   and ITS PILL ONLY, as deep as the distance from the pill, so the pointer can cross that gap without
   leaving the pill. It belongs to the call-out, so it paints at the call-out's z-index, above the
   neighbouring pills. A strip on the other three sides would sit over them and swallow their clicks,
   because a press on it lands inside the open item. Which side faces the pill comes from the
   Placement control (--kaw-pl-pop-bridge-block / -inline, logical, so RTL follows). The fallbacks
   here are below-start: a strip above the call-out. Fine pointers only, and only while open. */
@media (hover: hover) and (pointer: fine) {
  .kaw-pills[data-hover="yes"] .kaw-pills__item[data-open="true"] > .kaw-pills__panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: var(--kaw-pl-pop-bridge-block, calc(-1 * var(--kaw-pl-pop-gap, 10px)) 100%);
    inset-inline: var(--kaw-pl-pop-bridge-inline, 0px 0px);
  }
}

/* Label trigger: the call-out is inside the item, so pointing at it would otherwise light the question
   up in Question Color (Hover) through `.kaw-pills__item:hover`. Only the pill itself is the hover
   target. The icon trigger already hovers the disc, not the item. A browser without :has() drops this
   rule and keeps the 1.41.2 behaviour. */
.kaw-pills[data-open-style="popover"] .kaw-pills__item:has(> .kaw-pills__panel:hover) .kaw-pills__q {
  color: var(--kaw-pl-q);
}

/* ------------------------------------------------------------------------ trigger: icon only
   The pill surface goes transparent and unpadded (0,3,0 beats the item's :hover and [data-open] at
   0,2,0); the DISC is the button, styled by the Trigger section. The glyph on it is still the icon
   slot, styled by Style → Icon. The item follows the disc's shape so a Border or Box Shadow set under
   Style → Pill outlines the disc rather than a square. */
.kaw-pills[data-trigger="icon"] .kaw-pills__item,
.kaw-pills[data-trigger="icon"] .kaw-pills__item:hover,
.kaw-pills[data-trigger="icon"] .kaw-pills__item[data-open="true"] {
  background-color: transparent;
  border-radius: var(--kaw-pl-trig-radius, 50%);
}

.kaw-pills[data-trigger="icon"] .kaw-pills__trigger {
  width: var(--kaw-pl-trig-size, 40px);
  height: var(--kaw-pl-trig-size, 40px);
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: var(--kaw-pl-trig-radius, 50%);
  background-color: var(--kaw-pl-trig-bg, transparent);
  transition: background-color 0.25s ease;
}

/* On the button, not the item: the call-out is inside the item, and hovering the call-out must not
   light up the disc. */
.kaw-pills[data-trigger="icon"] .kaw-pills__trigger:hover {
  background-color: var(--kaw-pl-trig-bg-hover, var(--kaw-pl-trig-bg, transparent));
}

.kaw-pills[data-trigger="icon"] .kaw-pills__item[data-open="true"] .kaw-pills__trigger {
  background-color: var(--kaw-pl-trig-bg-open, var(--kaw-pl-trig-bg, transparent));
}

/* The question stays in the button — it is the button's accessible name, translatable and in the DOM
   — but out of sight. The standard visually-hidden pattern; NOT display:none, which would drop the
   name. */
.kaw-pills[data-trigger="icon"] .kaw-pills__q {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The disc blurs itself: nothing inside it paints outside its box. */
.kaw-pills[data-trigger-blur="on"] .kaw-pills__trigger {
  -webkit-backdrop-filter: blur(var(--kaw-pl-trig-blur));
  backdrop-filter: blur(var(--kaw-pl-trig-blur));
}

/* ------------------------------------------------------------------------------ pill blur layer
   WHY THE PILL'S BLUR IS ON ::before AND NOT ON THE PILL. In pop-over mode the call-out is a
   DESCENDANT of the pill, and a backdrop-filter on the pill would do two things wrong:
     - WebKit clips a backdrop-filter element's descendants to its border box, so the call-out would
       be cut off at the pill's edge (the same reason Button blurs its leaf __bg, rundown §8b);
     - the pill would become a Backdrop Root, so the call-out's own blur would sample only the pill
       instead of the photo behind it.
   So while a pill blur is set (in either open style) the pill's surface — its Normal / Hover / Open
   background and the blur — paints on this childless layer, the pill itself goes transparent, and
   the head (and, in expand mode, the panel) sit above it. Pixel-identical, and it only exists when a
   blur is set. With a Border set, the frosted surface sits inside the border. */
.kaw-pills[data-pill-blur="on"] .kaw-pills__item,
.kaw-pills[data-pill-blur="on"] .kaw-pills__item:hover,
.kaw-pills[data-pill-blur="on"] .kaw-pills__item[data-open="true"] {
  background-color: transparent;
}

.kaw-pills[data-pill-blur="on"] .kaw-pills__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-color: var(--kaw-pl-bg);
  -webkit-backdrop-filter: blur(var(--kaw-pl-blur));
  backdrop-filter: blur(var(--kaw-pl-blur));
  transition: background-color 0.25s ease;
}

.kaw-pills[data-pill-blur="on"] .kaw-pills__item:hover::before {
  background-color: var(--kaw-pl-bg-hover, var(--kaw-pl-bg));
}

/* After :hover on purpose, as in the base rules: an open pill keeps its open colour under the pointer. */
.kaw-pills[data-pill-blur="on"] .kaw-pills__item[data-open="true"]::before {
  background-color: var(--kaw-pl-bg-open, var(--kaw-pl-bg));
}

.kaw-pills[data-pill-blur="on"] .kaw-pills__head {
  position: relative;
  z-index: 1;
}

/* Never in pop-over: this would override the call-out's position:absolute. */
.kaw-pills[data-pill-blur="on"]:not([data-open-style="popover"]) .kaw-pills__panel {
  position: relative;
  z-index: 1;
}

/* The new transitions obey the same setup-frame and reduced-motion rules as the old ones below. */
.kaw-pills[data-trigger="icon"].is-init .kaw-pills__trigger,
.kaw-pills[data-pill-blur="on"].is-init .kaw-pills__item::before {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .kaw-pills[data-trigger="icon"] .kaw-pills__trigger,
  .kaw-pills[data-pill-blur="on"] .kaw-pills__item::before {
    transition: none !important;
  }
}

/* Setup frame: the script measures every pill and writes its resting size. None of that may
   animate, or the whole widget visibly assembles itself on load. */
.kaw-pills.is-init .kaw-pills__item,
.kaw-pills.is-init .kaw-pills__panel,
.kaw-pills.is-init .kaw-pills__icon,
.kaw-pills.is-init .kaw-pills__q {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .kaw-pills .kaw-pills__item,
  .kaw-pills .kaw-pills__panel,
  .kaw-pills .kaw-pills__icon,
  .kaw-pills .kaw-pills__q {
    transition: none !important;
  }
}