/* slop-ok: SLOP-16 - the label stays at round 14's 14.4 px (12.8 under 992 px), Omar's "20% smaller" of round 13's 18 and 16 */
/* slop-ok: SLOP-25 - leading as the live site sets its pills and buttons (150 %), inside fixed 36 px pills */
/* slop-ok: SLOP-18 - rem steps: 36 px pills, 4 px inside the capsule, 1 px ring, 8 px between the two capsules */
/* slop-ok: SLOP-07 - the site's own radius tokens, concentric: every pill is --border-radius--xsmall (8 px) and every capsule and the menu --border-radius--small (12 px), the pill's radius plus the 4 px gutter; under 992 px 6 and 10 px, because the site's phone tokens (4 and 8) fall under the 6 to 8 asked; the dot is a circle because it is a dot */
/* slop-ok: SLOP-06 - one 1 px ring per capsule in Biege at 18 %: over a dark cover a dark capsule has no edge */
/* slop-ok: SLOP-27 - 991 px is Webflow's tablet breakpoint and 599 px the narrow phone row, not text measures */
/* slop-ok: SLOP-08 - the backdrop blur is the frost Omar asked for ("something more frosted", 17 Oct 22:3x), 20 px, no saturate, with a solid fallback */
/* slop-ok: SLOP-01 - Navy, Dark Navy and Light Navy are iklipse's own Webflow swatches (docs/webflow/2026-10-16-iklipse-swatches.md), read through their variables */
/* Works E, J-264 (17 Oct): the filter menu in 3 to 4 columns, in blues, the capsules and the menu frosted.
   Nabil, 17 Oct, verbatim: "make it 3-4 columns, and when you click and select one, it should not close the menu, cz then to
   select 3 you have to open the menu 3 times / Also the colors can be different iklipse colors (on the blue spectrum) for a
   more friendly approach for this section"
   Omar, 17 Oct 22:3x, verbatim: "And change the black background (of the filters) to something more frosted, just make
   sure it's not off-brand"
     ground   the flat Anti-biege of round 16 to a frost: Dark Navy #040238 at 72 % with a 20 px backdrop blur and a 1 px Biege
              hairline at 20 % (dark theme); Biege #faf6f5 at 82 % (74 read grey over the dark tiles), the same blur, a Navy hairline at 18 % (Lights On). The
              two capsules and the menu share it. Where backdrop-filter is missing the ground is the solid swatch.
     menu     4 columns where every label fits on one line, else 3, else 2 (bar.js, fitCols, measures the labels). Unpicked
              pills Biege at 9 % on the frost (Navy at 7 % in Lights On); picked Cyan #29abe2 with Dark Navy type (Light
              Navy #2e3192 with Biege type in Lights On); hover Light Navy (Light Navy at 16 % in Lights On); focus a 2 px
              ring in the pill's own type colour. No orange in the menu; the filter button takes the pick's blue when a
              category is picked or the menu is open, and its focus ring is Cyan (Light Navy in Lights On).
     kept     the switch's Orange thumb and Exit's Orange door, the sizes, the radii, the positions.
   Works E, round 16 (J-241): the bottom bar, dark with orange (bar.js builds it and says how it mounts).
   Omar, 17 Oct 01:2x, verbatim: "change the picker so it looks more like iklipse's Idenity. When I said apply vibe I meant
   that it's floating, not for it to have those rounded ass corners. I do like the finish however, so let's do the
   following: 1. Revert to a mostly dark theme, with orange accents. 2. Make the pills shorter and have less rounded corners
   3. Show me an option where the two pills are side-by-side"

   Round 15 to round 16:
     colour   Light Navy and Navy capsules with a Cyan pick, to the site's dark ground with Iklipse Orange accents, the same
              in both themes. Anti-biege #0b0f0f capsules and menu; unpicked menu rows Biege at 10 % on it; Biege type
              (18.6:1 on the capsule). Orange #f95338 marks the current view, the picked filter and the open filter button
              (Anti-biege type on it, 5.8:1: Biege on Orange is 3.1:1, under 4.5), the focus ring and Exit's door (5.8:1).
     shape    full stadiums (radius 22.4 px pills, 27.4 px capsules) to the site's tokens: pills xsmall, 8 px (6 px under
              992 px); capsules and the menu small, 12 px (10 px).
     height   pills 44.8 px to 36 px, capsules 54.8 to 46. On touch, every bar button's hit area still runs 44 px tall:
              its ::before reaches into the capsule's 4 px gutter above and below. Menu rows are 36 px with a pointer and
              44 px on touch.
     kept     the finish: floating, the 1 px light ring, the pills sitting in a 4 px gutter inside their capsule, the
              switch and the capsule as two separate floating pieces; 48 px off the bottom on a desktop, 32 px under
              992 px; centred.
     option   ?bar=row (bar.js sets html[data-ib-layout="row"]): the switch and the capsule side by side on one row,
              8 px either side of the centre line (16b); the menu opens over the whole row. Under 600 px the switch
              drops its two icons and sits 20 px in from the left so the row fits 390. The default stays stacked.
     16b      the switch never moves when the view changes, in either layout (see the rules after the menu).
   Every selector starts html[data-ib-bar="mounted"] main[data-works-root], so it outranks works.css, grid.css, help.css and
   world.css; it never sets opacity, visibility or translate on the two hosts, which works.js, help.js, grid.js and
   world.css keep animating. */

html[data-ib-bar="mounted"] main[data-works-root] .ib-bar {
  --ib-h: 2.25rem;
  --ib-p: .25rem;
  --ib-b: 1px;
  --ib-gap: .5rem;
  --ib-fs: .9rem;
  --ib-ic: 1.2rem;
  --ib-cap-r: var(--border-radius--small, .75rem);
  --ib-r: var(--border-radius--xsmall, .5rem);
  --ib-cyan: var(--_colors---brand-colors--iklipse-cyan, #29abe2);
  --ib-lnavy: var(--_colors---brand-colors--iklipse-light-navy, #2e3192);
  --ib-navy: var(--_colors---brand-colors--iklipse-navy, #1b1464);
  --ib-dnavy: var(--_colors---brand-colors--iklipse-dark-navy, #040238);
  --ib-biege: var(--_colors---primary--biege, #faf6f5);
  /* the theme (J-264): the site's own switch. Lights On and Off tween --_theme---zero-dark from 100 % (light) to 0 % (dark)
     on html and keep html's u-theme-light class, so no class selector can follow it; every colour below is a mix by this
     share and tweens with the page. Missing, it is 0 %: the dark bar */
  --ib-l: var(--_theme---zero-dark, 0%);
  /* the frost: Dark Navy at 72 % in the dark, Biege at 82 % in Lights On */
  --ib-solid: color-mix(in srgb, var(--ib-biege) var(--ib-l), var(--ib-dnavy));
  --ib-frost: calc(72% + var(--ib-l) / 10);
  --ib-ground: color-mix(in srgb, var(--ib-solid) var(--ib-frost), transparent);
  --ib-blur: 1.25rem;
  --ib-ink: color-mix(in srgb, var(--ib-dnavy) var(--ib-l), var(--ib-biege));
  /* the overlays: Biege on the dark frost (9, 14, 20 %), Navy on the light one (7, 12, 18 %) */
  --ib-tone: color-mix(in srgb, var(--ib-navy) var(--ib-l), var(--ib-biege));
  --ib-track: color-mix(in srgb, var(--ib-tone) calc(9% - var(--ib-l) / 50), transparent);
  --ib-hover: color-mix(in srgb, var(--ib-tone) calc(14% - var(--ib-l) / 50), transparent);
  --ib-ring: color-mix(in srgb, var(--ib-tone) calc(20% - var(--ib-l) / 50), transparent);
  /* J-264b (Omar, 17 Oct 23:4x: "remove all oranges from the bars (use our blues)"): the switch's thumb, Exit's door and
     the focus ring take the pick's blue: Cyan #29abe2 with Dark Navy type (7.49:1) in the dark theme, Light Navy #2e3192
     with Biege type (9.93:1) in Lights On; the door in Cyan on the Dark Navy frost 7.49:1, Light Navy on Biege 9.93:1 */
  --ib-on: var(--ib-pick);
  --ib-on-ink: var(--ib-pick-ink);
  --ib-accent: var(--ib-pick);
  /* J-264b (Omar: "make the background of ONLY the specific container ... (that contains the categories) to ~10-20% darker
     blue"): the menu's ground only, its swatch 15 % darker in Oklab lightness, same hue, same frost and blur: Dark Navy
     #040238 (L 0.164) to #02012b (L 0.139) in the dark theme, Biege #faf6f5 (L 0.976) to #c9c6c5 (L 0.830) in Lights On.
     Its type: Biege on it 18.78:1 (solid). The capsules keep --ib-ground. J-264c: the menu's ground and the colours on it
     are set on .ib-menu itself, the same darker blue in both themes (see there) */
  /* the filter's blues: Cyan with Dark Navy type in the dark, Light Navy with Biege type in Lights On; the hover Light
     Navy (at 16 % in Lights On); the filter button's focus ring the pick's blue */
  --ib-pick: color-mix(in srgb, var(--ib-lnavy) var(--ib-l), var(--ib-cyan));
  --ib-pick-ink: color-mix(in srgb, var(--ib-biege) var(--ib-l), var(--ib-dnavy));
  --ib-pick-hover: color-mix(in srgb, var(--ib-navy) var(--ib-l), color-mix(in srgb, var(--ib-cyan) 84%, var(--ib-biege)));
  --ib-row-hover: color-mix(in srgb, var(--ib-lnavy) calc(100% - var(--ib-l) * .84), transparent);
  --ib-row-hover-ink: var(--ib-ink);
  --ib-focus: var(--ib-pick);
  --ib-bottom: 3rem;
  /* --ib-lift (bar.js): the height the cookie banner takes from the bottom edge while it shows, 0 after */
  left: 0; right: 0; top: auto; bottom: max(calc(var(--ib-bottom) + env(safe-area-inset-bottom, 0px)), var(--ib-lift, 0px));
  width: auto; max-width: none; margin: 0; padding: 0 .5rem; border: 0; border-radius: 0; background: none; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--ib-gap); flex-wrap: nowrap;
  pointer-events: none; color: var(--ib-ink); cursor: default;
}
/* where the blur is missing: the solid swatch, never a see-through panel without the blur */
/* slop-ok: SLOP-12 - the field behind is what the filter changes: a pick greys tiles out behind the menu, and Omar asked for the frost */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ib-bar="mounted"] main[data-works-root] .ib-bar { --ib-frost: 100%; }
}
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar::before,
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar::after { content: none; display: none; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar > .ib-blk { pointer-events: auto; }
/* the round 9 to 12 pieces: still in the page, driven from bar.js, never drawn */
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar > .wg-switch,
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar > .wh-q,
html[data-ib-bar="mounted"] main[data-works-root] .we-stage > .we-exit:not(.ib-exit),
html[data-ib-bar="mounted"] main[data-works-root] > .wg-exit { display: none !important; }

/* ---------- the two capsules ---------- */
html[data-ib-bar="mounted"] main[data-works-root] .ib-blk {
  position: relative; box-sizing: border-box; margin: 0; min-width: 0; max-width: 100%;
  display: flex; align-items: center; gap: .25rem;
  padding: var(--ib-p); border: var(--ib-b) solid transparent; border-radius: var(--ib-cap-r);
  background-color: transparent; color: var(--ib-ink); isolation: isolate;
  /* slop-ok: SLOP-35 - inherit carries the site's declared stack (Excon, Arial, sans-serif) */
  font-family: inherit; font-size: var(--ib-fs); font-weight: var(--_typography---font-weight--medium, 500); line-height: 1.5; letter-spacing: 0;
  text-transform: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
/* the capsule's frost and hairline are a layer under its pills, not the capsule's own background: a backdrop-filter on the
   capsule would make it the backdrop root of the menu inside it, and the menu would frost nothing */
html[data-ib-bar="mounted"] main[data-works-root] .ib-blk::after {
  content: ""; position: absolute; z-index: -2; inset: calc(-1 * var(--ib-b)); box-sizing: border-box; pointer-events: none;
  border: var(--ib-b) solid var(--ib-ring); border-radius: inherit; background-color: var(--ib-ground);
  /* slop-ok: SLOP-12 - the field behind is what the filter changes: a pick greys tiles out behind the menu, and Omar asked for the frost */
  -webkit-backdrop-filter: blur(var(--ib-blur)); backdrop-filter: blur(var(--ib-blur));
}
html[data-ib-bar="mounted"] main[data-works-root] .ib-blk svg { display: block; flex: none; width: var(--ib-ic); height: var(--ib-ic); }
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar button:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 2px; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar button {
  position: relative; display: inline-flex; align-items: center; gap: .5rem; height: var(--ib-h); margin: 0; padding: 0 1.125rem 0 1rem;
  border: 0; border-radius: var(--ib-r); background: transparent; color: var(--ib-ink);
  font: inherit; white-space: nowrap; cursor: pointer; transition: color .45s cubic-bezier(.65, 0, .35, 1), background-color .2s ease;
}
/* the hit area: a bar button answers across its capsule's gutter too, so a 36 px pill is a 44 px target */
html[data-ib-bar="mounted"] main[data-works-root] .ib-blk > button::before,
html[data-ib-bar="mounted"] main[data-works-root] .ib-sw > .ib-seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * (var(--ib-p) + var(--ib-b))); bottom: calc(-1 * (var(--ib-p) + var(--ib-b)));
}

/* the switch: Simple | Immersive; the blue thumb (--ib-on, the pick blue since J-264b) under the current one */
html[data-ib-bar="mounted"] main[data-works-root] .ib-sw { isolation: isolate; gap: 0; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-thumb {
  position: absolute; z-index: -1; top: var(--ib-p); left: 0; height: var(--ib-h); width: var(--ib-tw, 0);
  border-radius: var(--ib-r); background-color: var(--ib-on);
  transform: translateX(var(--ib-tx, 0)); transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .45s cubic-bezier(.65, 0, .35, 1);
}
html[data-ib-bar="mounted"] main[data-works-root] .ib-seg[aria-pressed="true"] { color: var(--ib-on-ink); cursor: default; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-sw.ib-now .ib-thumb,
html[data-ib-bar="mounted"] main[data-works-root] .ib-sw.ib-now .ib-seg { transition: none; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-sw:not(.is-placed) .ib-seg[aria-pressed="true"] { background-color: var(--ib-on); }

/* the filter button: the funnel, the word or the pick, a caret that turns when the menu is open */
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-fbtn { padding: 0 .875rem 0 1rem; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-fbtn .ib-caret { width: calc(var(--ib-ic) * .7); height: calc(var(--ib-ic) * .7); transform: rotate(180deg); transition: transform .3s cubic-bezier(.65, 0, .35, 1); }
html[data-ib-bar="mounted"] main[data-works-root] .ib-cap.is-open .ib-fbtn .ib-caret { transform: none; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-fbtn .ib-flabel { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-fbtn.has-pick,
html[data-ib-bar="mounted"] main[data-works-root] .ib-cap.is-open .ib-fbtn { background-color: var(--ib-pick); color: var(--ib-pick-ink); }
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-fbtn:focus-visible { outline-color: var(--ib-focus); }

/* Exit: the open door in the pick blue (J-264b) and the word */
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-exit { padding: 0 1.25rem 0 1.125rem; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-exit svg { color: var(--ib-accent); }
html[data-ib-bar="mounted"] main[data-works-root] .ib-exit.is-off { visibility: hidden; pointer-events: none; }

/* the pop-up menu: above the capsule, centred on it, every category a pill in 4, 3 or 2 equal columns (bar.js sets
   --ib-cols and --ib-colw from the widest label); it covers the switch while it is open. The strip is works.js's own node
   (.we-filters), laid out here as a grid instead of a row. Frosted like the capsules, its blur its own */
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu {
  position: absolute; z-index: 2; left: 50%; bottom: calc(100% + var(--ib-gap)); width: max-content; max-width: calc(100vw - 1rem); box-sizing: border-box;
  padding: var(--ib-p); border: var(--ib-b) solid var(--ib-ring); border-radius: var(--ib-cap-r); background-color: var(--ib-menu-ground);
  /* slop-ok: SLOP-12 - the field behind is what the filter changes: a pick greys tiles out behind the menu, and Omar asked for the frost */
  -webkit-backdrop-filter: blur(var(--ib-blur)); backdrop-filter: blur(var(--ib-blur));
  opacity: 0; visibility: hidden; transform: translate(-50%, .5rem);
  /* J-264c (coordinator 4, 17 Oct): the category container stays the darker blue in Lights On too (it went Biege-grey
     #c9c6c5). Its swatch is #02012b (Dark Navy 15 % darker in Oklab L) in both themes, read through --_theme---zero-dark
     like the rest of the bar, so it tweens with the site's Lights toggle. Its frost: 72 % in Lights Off as before, 92 % in
     Lights On (at 72 % over the white page it paints #474664, a grey violet; at 92 % #16153c, the blue). On it the rows keep
     the dark theme's Biege type, Biege 9 % track, Biege 20 % ring and Light Navy hover in both themes; the picks keep their
     themed blues (Cyan with Dark Navy type in Lights Off, Light Navy with Biege type in Lights On). */
  --ib-menu-solid: color-mix(in oklab, var(--ib-dnavy) 85%, #000);
  --ib-menu-frost: calc(72% + var(--ib-l) / 5);
  --ib-menu-ground: color-mix(in srgb, var(--ib-menu-solid) var(--ib-menu-frost), transparent);
  --ib-ink: var(--ib-biege);
  --ib-track: color-mix(in srgb, var(--ib-biege) 9%, transparent);
  --ib-ring: color-mix(in srgb, var(--ib-biege) 20%, transparent);
  --ib-row-hover: var(--ib-lnavy);
  --ib-row-hover-ink: var(--ib-biege);
  color: var(--ib-ink);
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s;
}
/* where the blur is missing the menu is its solid swatch (after the rule above, so it wins) */
/* slop-ok: SLOP-12 - this is the fallback for browsers without the blur: it turns the frost off, it adds none */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ib-bar="mounted"] main[data-works-root] .ib-menu { --ib-menu-frost: 100%; }
}
/* J-264: the frosted menu would show the switch it covers (stacked layout) as a blurred orange smear, so the switch steps
   away while the menu is open and comes back when it closes */
html[data-ib-bar="mounted"][data-ib-menu="open"]:not([data-ib-layout="row"]) main[data-works-root] .ib-bar--field > .ib-sw { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-cap.is-open .ib-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters {
  display: grid; grid-template-columns: repeat(var(--ib-cols, 2), minmax(var(--ib-colw, 0px), 1fr)); gap: .25rem; width: auto; max-width: none; margin: 0; padding: 0;
  overflow: visible; flex-wrap: nowrap; border-radius: 0; -webkit-mask-image: none; mask-image: none;
}
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button {
  justify-content: space-between; width: 100%; min-width: 0; padding: 0 .75rem 0 .875rem; background-color: var(--ib-track); color: var(--ib-ink); text-align: left;
  overflow: hidden; text-overflow: ellipsis;
}
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button::before { content: none; }
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button.slctd { background-color: var(--ib-pick); color: var(--ib-pick-ink); cursor: pointer; }
/* the tick on a picked row: Phosphor check, bold, as a mask in the row's own colour */
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button.slctd::after {
  content: ""; flex: none; width: 1rem; height: 1rem; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* on touch the menu's rows stand 44 px tall: there is no gutter round them to borrow */
@media (pointer: coarse) {
  html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button { height: 2.75rem; }
}

@media (hover: hover) and (pointer: fine) {
  html[data-ib-bar="mounted"] main[data-works-root] .ib-seg[aria-pressed="false"]:hover,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-exit:hover,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-fbtn:not(.has-pick):hover { background-color: var(--ib-hover); }
  html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button:not(.slctd):hover { background-color: var(--ib-row-hover); color: var(--ib-row-hover-ink); }
  html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button.slctd:hover,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-fbtn.has-pick:hover,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-cap.is-open .ib-fbtn:hover { background-color: var(--ib-pick-hover); }
}

/* Exit folds the bar into its door while the page glides on (bar.js removes the class once the bar is out of view) */
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar.is-leaving > .ib-sw { opacity: 0; transform: scale(.9); }
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar.is-leaving .ib-fbtn { opacity: 0; transition: opacity .3s ease; }

/* ---------- round 16b: the switch never moves when the view changes ----------
   Stacked: Simple has no capsule under the switch, so its bar keeps the capsule's height plus the gap as bottom padding
   (36 + 2 x (4 + 1) + 8 = 54 px) and the switch stays 102 px off the bottom at 1920, 86 at 390, as in Immersive. */
html[data-ib-bar="mounted"] main[data-works-root] .ib-bar.ib-bar--grid { padding-bottom: calc(var(--ib-h) + 2 * (var(--ib-p) + var(--ib-b)) + var(--ib-gap)); }

/* ---------- ?bar=row: the switch and the capsule side by side, the menu over the whole row ----------
   Round 16b: two equal columns split on the screen's centre line, the switch's right edge 4 px left of it and the capsule's
   left edge 4 px right of it, so the switch sits in one place whatever the capsule holds ("Filter", a picked name, or no
   capsule at all in Simple). Under 600 px the switch sits 20 px in from the left and the capsule takes the rest. */
html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--ib-gap);
}
html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar.ib-bar--grid { padding-bottom: 0; }
html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar > .ib-sw { grid-row: 1; grid-column: 1; justify-self: end; }
html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar > .ib-cap { grid-row: 1; grid-column: 2; justify-self: start; position: static; }
/* a long pick ellipsises inside the filter button instead of pushing the capsule off the screen */
html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-fbtn { min-width: 0; flex: 0 1 auto; }
html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-fbtn .ib-flabel { min-width: 0; }

@media screen and (max-width: 991px) {
  /* the site's phone tokens are 4 and 8 px; Omar's ask lands at 6 and 10 (6 plus the 4 px gutter) */
  html[data-ib-bar="mounted"] main[data-works-root] .ib-bar { --ib-fs: .8rem; --ib-ic: 1.1rem; --ib-bottom: 2rem; --ib-r: .375rem; --ib-cap-r: .625rem; }
  html[data-ib-bar="mounted"] main[data-works-root] .ib-bar button { gap: .4rem; padding: 0 1rem 0 .875rem; }
  html[data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-fbtn { padding: 0 .75rem 0 .875rem; }
  html[data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-exit { padding: 0 1.125rem 0 1rem; }
  html[data-ib-bar="mounted"] main[data-works-root] .ib-menu .we-filters button { padding: 0 .75rem 0 .875rem; }
}
/* the row at 390: the switch keeps its words and drops its icons, the pills their extra side room */
@media screen and (max-width: 599px) {
  /* the switch 20 px in from the left, which centres the row while the capsule reads "Filter" (164 + 6 + 181 = 351 of 390) */
  html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar { grid-template-columns: auto minmax(0, 1fr); column-gap: .375rem; padding: 0 .375rem 0 1.25rem; }
  html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar > .ib-sw { justify-self: start; }
  html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-sw .ib-seg svg { display: none; }
  html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar button { padding: 0 .75rem; }
  html[data-ib-layout="row"][data-ib-bar="mounted"] main[data-works-root] .ib-bar .ib-fbtn { padding: 0 .625rem 0 .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ib-bar="mounted"] main[data-works-root] .ib-blk,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-thumb,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-bar button,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-fbtn .ib-caret,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-menu,
  html[data-ib-bar="mounted"] main[data-works-root] .ib-cap.is-open .ib-menu { transition: none; }
}