/**
 * Liquid-glass material and hover motion — the two layers of Direction B2
 * (`~/Agent-Workspace/working/console-ui-redesign-v2-20260804/tokens.css`) that never
 * shipped: the palette landed byte-for-byte and this did not. Founder 2026-08-15:
 * "we went for liquid glass last time - add glassiness".
 *
 * Lives in its own file because `styles.css` is already 2.3k lines (AGENTS.md §0c).
 * Every value here comes from a token defined in `styles.css`, in BOTH theme blocks —
 * a literal here is the exact defect this port exists to undo.
 *
 * Posture, 2026-08-31: glass is for CHROME (topbar, drawer, composer), not for cards.
 * `backdrop-filter` composites over whatever is behind it, and the console hosts two
 * decoding avatar videos — the 08-28 lip-sync arc was decoder contention. Cards stay
 * solid `--card` until a founder call says otherwise.
 */

.cui-glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-glass);
  background:
    radial-gradient(28rem 18rem at var(--sx, 50%) var(--sy, -20%), var(--glass-spec), transparent 65%),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.5);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.5);
  box-shadow: var(--shadow-glass);
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* Chroma-fringe edge: a 1px gradient ring, masked so only the border shows. */
.cui-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--glass-edge),
    var(--glass-chroma-a) 30%,
    var(--glass-edge-mid) 55%,
    var(--glass-chroma-b) 80%,
    var(--glass-edge-end)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Top sheen — the thing that makes it read as a pane of glass and not a blur. */
.cui-glass::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--glass-spec-top), transparent);
  pointer-events: none;
  z-index: 1;
}

.cui-glass--strong {
  background:
    radial-gradient(28rem 18rem at var(--sx, 50%) var(--sy, -20%), var(--glass-spec), transparent 65%),
    var(--glass-fill-strong);
}

/* Square glass (topbar) keeps the material and drops the ring — a fringe across the
   full width of the chrome reads as a rendering artefact, not as an edge. */
.cui-glass--flush {
  border-radius: 0;
}

.cui-glass--flush::before,
.cui-glass--flush::after {
  border-radius: 0;
  background: none;
}

/* Motion. The `.cui-btn` transition list has declared `transform` since the kit was
   written and nothing ever set one, so the hook was pre-wired and unused. */
.cui-lift {
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.cui-lift:hover:not(:disabled):not([aria-disabled='true']),
.cui-glass-lift:hover:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(var(--lift-y));
}

.cui-btn:hover:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(-1px);
}

.cui-glass-lift:hover:not(:disabled):not([aria-disabled='true']) {
  box-shadow: var(--shadow-glass-lift);
}

.cui-lift:active:not(:disabled):not([aria-disabled='true']),
.cui-glass-lift:active:not(:disabled):not([aria-disabled='true']),
.cui-btn:active:not(:disabled):not([aria-disabled='true']) {
  transform: none;
}

/* A browser with no backdrop-filter gets an opaque surface, never a see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cui-glass,
  .cui-glass--strong {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .cui-glass,
  .cui-glass--strong {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .cui-glass::before {
    background: var(--ink);
    padding: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cui-glass,
  .cui-lift,
  .cui-glass-lift {
    transition: none;
  }

  .cui-lift:hover,
  .cui-glass-lift:hover,
  .cui-btn:hover,
  .cui-lift:active,
  .cui-glass-lift:active,
  .cui-btn:active {
    transform: none;
  }
}
/*
  Liquid glass — the real thing, not a tinted button.

  Three facts drive every rule below, and the first two are why the earlier
  attempt failed:

  1. GLASS IS NOT A FILL. It has no colour of its own. What you see is the
     background, bent. So the surface is near-transparent and every visible
     line is either the backdrop coming through changed, or light caught on a
     curved edge.

  2. THERE IS NO HARD SHADOW. A neobrutalist offset block says "a flat card
     sits above a flat page". Glass says "a solid body floats above a page" —
     that is an AMBIENT contact shadow, wide and faint, plus a tighter one
     right under the body. Never an offset silhouette.

  3. HEIGHT COMES FROM THE RIM. A thick lozenge shows more of its curved edge
     than a thin one. So `--rim` is the thickness of the lens ring, and the
     pop-up on hover grows it — the glass literally gets taller, which is the
     effect asked for, rather than just moving up the page.

  The stage matters as much as the surface: a grid and a few colour blooms,
  because refraction is invisible over a flat ground. That is also why the
  reference image is shot over a grid.
*/

/* ---------------------------------------------------------------- stage --- */

.lg-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 34px 28px 30px;
  isolation: isolate;

  --grid: rgba(15, 23, 42, 0.2);
  --ink: #0d1424;
  --ink-soft: rgba(13, 20, 36, 0.62);
  --sheen: 255, 255, 255;
  --contact-1: rgba(15, 23, 42, 0.1);
  --contact-2: rgba(15, 23, 42, 0.26);

  background:
    radial-gradient(420px 300px at 12% 6%, rgba(56, 189, 248, 0.4), transparent 62%),
    radial-gradient(380px 280px at 86% 22%, rgba(167, 139, 250, 0.36), transparent 64%),
    radial-gradient(460px 320px at 62% 104%, rgba(45, 212, 191, 0.34), transparent 66%),
    #cdd4de;
}

/* The grid is a separate layer so it stays crisp under the blooms — and it is
   the instrument: if the grid lines do not bend at a rim, that rim is not
   refracting anything. */
.lg-stage::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 21px 21px;
}

/* On a dark ground the outer contour flips: the darkest thing available is
   not darker than the page, so the body is outlined by LIGHT and the shading
   half of the caustic is what disappears. */
[data-theme='dark'] .lg,
[data-theme='dark'] .lg-pane {
  box-shadow:
    inset 0 0 0 0.5px rgba(var(--sheen), 0.26),
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.6),
    inset 0 -1px 1px -0.5px rgba(var(--sheen), 0.28),
    0 1px 2px var(--contact-1),
    0 8px 20px -10px var(--contact-2);
}

[data-theme='dark'] .lg:hover:not(:disabled),
[data-theme='dark'] .lg.is-held {
  box-shadow:
    inset 0 0 0 0.5px rgba(var(--sheen), 0.4),
    inset 0 1px 0 0.5px rgba(var(--sheen), 0.85),
    inset 0 -1.5px 1.5px -0.5px rgba(var(--sheen), 0.42),
    0 2px 4px var(--contact-1),
    0 24px 44px -16px var(--contact-2);
}

[data-theme='dark'] .lg::before,
[data-theme='dark'] .lg-pane::before {
  background: linear-gradient(
    148deg,
    rgba(2, 6, 16, 0.3) 0%,
    rgba(2, 6, 16, 0.04) 28%,
    rgba(var(--sheen), 0.06) 56%,
    rgba(var(--sheen), 0.55) 100%
  );
}

[data-theme='dark'] .lg-stage {
  --grid: rgba(226, 236, 255, 0.16);
  --ink: #eaf0ff;
  --ink-soft: rgba(234, 240, 255, 0.66);
  --contact-1: rgba(2, 6, 16, 0.5);
  --contact-2: rgba(2, 6, 16, 0.66);
  background:
    radial-gradient(420px 300px at 12% 6%, rgba(37, 99, 235, 0.5), transparent 62%),
    radial-gradient(380px 280px at 86% 22%, rgba(129, 74, 200, 0.44), transparent 64%),
    radial-gradient(460px 320px at 62% 104%, rgba(13, 148, 136, 0.4), transparent 66%),
    #070b16;
}

.lg-stage__label {
  margin: 0 0 4px;
  font: 650 11px/1.2 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lg-stage__note {
  margin: 0 0 20px;
  max-width: 46ch;
  font: 400 13px/1.55 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  color: var(--ink-soft);
}

.lg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* -------------------------------------------------------------- surface --- */

.lg {
  --rim: 3.5px;        /* thickness of the curved edge — this IS the height */
  --body-blur: 0.5px;  /* the centre is CLEAR — glass, not frost. Blur is
                          what killed the first attempt: it erased the very
                          detail the lens exists to bend. */
  --lx: 0px;
  --ly: 0px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;

  font: 560 13.5px/1 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.01em;
  color: var(--ink);

  background: rgba(var(--sheen), 0.03);
  /* --lens is an SVG displacement filter built per element by liquid.js. It
     comes first: bend the backdrop, then blur what has been bent. With no
     runtime attached the fallback is empty and the surface degrades to a
     plain blur rather than disappearing. */
  -webkit-backdrop-filter: var(--lens, ) blur(var(--body-blur)) saturate(148%);
  backdrop-filter: var(--lens, ) blur(var(--body-blur)) saturate(148%);

  transform: translate(var(--lx), var(--ly));

  box-shadow:
    /* the hairline where the surface turns over — the outline of the body */
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.12),
    /* light landing on the top of the curve — a hairline, not a glow */
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.7),
    /* light bouncing up off the page through the body */
    inset 0 -1px 1px -0.5px rgba(var(--sheen), 0.34),
    /* contact: tight, then wide. Ambient, never an offset silhouette. */
    0 1px 2px var(--contact-1),
    0 6px 16px -8px var(--contact-2);

  transition:
    transform 300ms cubic-bezier(0.22, 1.1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 300ms ease,
    -webkit-backdrop-filter 300ms ease,
    backdrop-filter 300ms ease,
    border-radius 420ms cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* THE LENS. A ring-masked layer whose own backdrop-filter differs from the
   body's: sharper, brighter, more contrast. That difference is what the eye
   reads as thickness — a real edge compresses and brightens what is behind
   it, while the middle of the pane stays clear. `padding` is the ring width,
   so animating --rim animates the apparent height of the glass. */
.lg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--rim);
  pointer-events: none;

  background: linear-gradient(
    148deg,
    rgba(15, 23, 42, 0.14) 0%,
    rgba(15, 23, 42, 0.02) 28%,
    rgba(var(--sheen), 0.08) 56%,
    rgba(var(--sheen), 0.92) 100%
  );
  -webkit-backdrop-filter: saturate(1.16);
  backdrop-filter: saturate(1.16);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  transition:
    padding 300ms cubic-bezier(0.22, 1.1, 0.36, 1),
    opacity 200ms ease;
}

/* The specular: one soft highlight that follows the pointer, so the body reads
   as curved rather than as a flat pane. It is off until the pointer arrives —
   a still surface should not glow. */
.lg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      90px 46px at var(--mx, 50%) var(--my, 20%),
      rgba(var(--sheen), 0.34),
      rgba(var(--sheen), 0.08) 45%,
      transparent 70%
    );
  transition: opacity 260ms ease;
}

.lg__t {
  position: relative;
  z-index: 3;
}

.lg:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.85);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- pop-up ----- */

.lg:hover:not(:disabled),
.lg.is-held {
  --rim: 6px;          /* the body thickens — but a control is small, so the
                          rim grows modestly and the LIFT plus the refraction
                          carry the rest of the height */
  --body-blur: 1.6px;
  --lx: -5px;
  --ly: -5px;
  background: rgba(var(--sheen), 0.055);
  box-shadow:
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 0.5px rgba(var(--sheen), 0.95),
    inset 0 -1.5px 1.5px -0.5px rgba(var(--sheen), 0.5),
    0 2px 4px var(--contact-1),
    0 22px 40px -16px var(--contact-2);
}

.lg:hover:not(:disabled)::after,
.lg.is-held::after {
  opacity: 1;
}

.lg:active:not(:disabled) {
  --rim: 4.5px;
  /* the press lands the body back INTO its own footprint, which is the
     neobrutalist gesture — the travel is what reads, not the squash */
  --lx: 0px;
  --ly: 0px;
  transform: translate(0, 0) scaleY(0.965) scaleX(1.015);
  transition:
    transform 90ms cubic-bezier(0.3, 0, 0.2, 1),
    box-shadow 90ms ease;
  box-shadow:
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.16),
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.8),
    inset 0 -1px 1px -0.5px rgba(var(--sheen), 0.4),
    0 1px 2px var(--contact-1),
    0 6px 14px -8px var(--contact-2);
}

/* -------------------------------------------------------------- splash ---- */

/* Clear, not white paint: a wave of extra brightness and blur travelling out
   from the point of contact, overshooting the edge before it fades. */
.lg-ripple {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle,
      rgba(var(--sheen), 0.5) 0%,
      rgba(var(--sheen), 0.22) 42%,
      rgba(var(--sheen), 0.5) 68%,
      transparent 72%
    );
  animation: lg-splash 560ms cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
}

@keyframes lg-splash {
  from {
    width: 0;
    height: 0;
    opacity: 0.95;
  }
  60% {
    opacity: 0.6;
  }
  to {
    width: calc(var(--reach, 60px) * 2.5);
    height: calc(var(--reach, 60px) * 2.5);
    opacity: 0;
  }
}

/* Droplets: only on the bead, where the surface reads thick enough to shed
   liquid. They are clear beads with their own rim, not white dots. */
.lg-drop {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(var(--sheen), 0.22);
  box-shadow:
    inset 0 0 0 0.5px rgba(var(--sheen), 0.85),
    inset 0 1px 1px -0.5px rgba(var(--sheen), 1);
  animation: lg-drop 520ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes lg-drop {
  from { transform: translate(0, 0) scale(var(--ds, 1)); opacity: 0.9; }
  to   { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2); opacity: 0; }
}

/* ---------------------------------------------------------------- arms ---- */

/* L1 · LENS — the plain read of the reference. Clear body, honest rim. */
.lg--lens {
  --rim: 5px;
}

/* L2 · BEAD — a thicker body that behaves like a drop of mercury: a heavier
   rim, and on hover the corners breathe, so it reads as liquid held by surface
   tension rather than as a shape with a radius. */
.lg--bead {
  --rim: 7px;
  --body-blur: 0.8px;
  border-radius: 22px;
}

.lg--bead:hover:not(:disabled),
.lg--bead.is-held {
  --rim: 9px;
  --body-blur: 2.2px;
  border-radius: 999px;
  animation: lg-wobble 3.2s ease-in-out 300ms infinite;
}

@keyframes lg-wobble {
  0%, 100% { border-radius: 999px 999px 999px 999px / 999px 999px 999px 999px; }
  33%      { border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%; }
  66%      { border-radius: 54% 46% 47% 53% / 43% 57% 41% 59%; }
}

/* L3 · TINT — the same physics with the brand hue dissolved into the body, for
   a primary action. The tint sits in the FILL only; the rim and the specular
   stay colourless, because a coloured highlight reads as plastic. */
.lg--tint {
  --rim: 5px;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, #2563eb 16%, transparent),
      color-mix(in srgb, #2563eb 26%, transparent)
    );
  color: #0b1e52;
}

.lg--tint:hover:not(:disabled),
.lg--tint.is-held {
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, #2563eb 22%, transparent),
      color-mix(in srgb, #2563eb 34%, transparent)
    );
}

[data-theme='dark'] .lg--tint {
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, #60a5fa 18%, transparent),
      color-mix(in srgb, #3b82f6 30%, transparent)
    );
  color: #eaf2ff;
}

[data-theme='dark'] .lg--tint:hover:not(:disabled),
[data-theme='dark'] .lg--tint.is-held {
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, #60a5fa 26%, transparent),
      color-mix(in srgb, #3b82f6 40%, transparent)
    );
}

/* A pane, to show the same material at panel scale — where the rim lens is
   most legible against the grid. */
.lg-pane {
  --rim: 10px;
  --body-blur: 2.4px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px 20px;
  color: var(--ink);
  background: rgba(var(--sheen), 0.06);
  -webkit-backdrop-filter: var(--lens, ) blur(var(--body-blur)) saturate(150%);
  backdrop-filter: var(--lens, ) blur(var(--body-blur)) saturate(150%);
  box-shadow:
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.12),
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.7),
    inset 0 -1.5px 1.5px -0.5px rgba(var(--sheen), 0.34),
    0 2px 4px var(--contact-1),
    0 20px 40px -18px var(--contact-2);
}

.lg-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--rim);
  pointer-events: none;
  background: linear-gradient(
    148deg,
    rgba(15, 23, 42, 0.12) 0%,
    rgba(15, 23, 42, 0.02) 30%,
    rgba(var(--sheen), 0.06) 58%,
    rgba(var(--sheen), 0.82) 100%
  );
  -webkit-backdrop-filter: saturate(1.14);
  backdrop-filter: saturate(1.14);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.lg-pane > * {
  position: relative;
  z-index: 2;
}

.lg-pane__h {
  margin: 0 0 6px;
  font: 620 14px/1.3 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}

.lg-pane__p {
  margin: 0 0 14px;
  font: 400 12.5px/1.55 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- motion --- */

/* Every moving part lives above this line, so one block covers all of it. The
   surface keeps its material — thickness and specular still change on hover,
   because those are STATE, not animation. */
@media (prefers-reduced-motion: reduce) {
  .lg,
  .lg::before,
  .lg::after,
  .lg:active:not(:disabled) {
    transition-duration: 1ms;
  }

  .lg--bead:hover:not(:disabled),
  .lg--bead.is-held {
    animation: none;
  }

  .lg:active:not(:disabled) {
    transform: translate(var(--lx), var(--ly));
  }

  .lg-ripple,
  .lg-drop {
    display: none;
  }
}


/* -------------------------------------------------------- reference size --- */

/* The same material at the size the reference uses. A control is a hard place
   to judge glass — at 42px the rim, the caustic and the refraction all land
   inside a few pixels. This is the honest look of the material. */
.lg-hero {
  --rim: 16px;
  --body-blur: 0.6px;
  --lx: 0px;
  --ly: 0px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 460px);
  height: 132px;
  border-radius: 66px;
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/1 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.02em;
  background: rgba(var(--sheen), 0.03);
  -webkit-backdrop-filter: var(--lens, ) blur(var(--body-blur)) saturate(1.2);
  backdrop-filter: var(--lens, ) blur(var(--body-blur)) saturate(1.2);
  transform: translate(var(--lx), var(--ly));
  box-shadow:
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.13),
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.75),
    inset 0 -1.5px 1.5px -0.5px rgba(var(--sheen), 0.36),
    0 2px 4px var(--contact-1),
    0 20px 46px -18px var(--contact-2);
  transition:
    transform 320ms cubic-bezier(0.22, 1.1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--rim);
  pointer-events: none;
  background: linear-gradient(
    148deg,
    rgba(15, 23, 42, 0.16) 0%,
    rgba(15, 23, 42, 0.02) 28%,
    rgba(var(--sheen), 0.08) 56%,
    rgba(var(--sheen), 0.95) 100%
  );
  -webkit-backdrop-filter: saturate(1.16);
  backdrop-filter: saturate(1.16);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: padding 320ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

.lg-hero > * {
  position: relative;
  z-index: 2;
}

.lg-hero:hover {
  --rim: 26px;
  --lx: -7px;
  --ly: -7px;
  box-shadow:
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 0.5px rgba(var(--sheen), 0.95),
    inset 0 -2px 2px -0.5px rgba(var(--sheen), 0.5),
    0 3px 6px var(--contact-1),
    0 34px 62px -22px var(--contact-2);
}

[data-theme='dark'] .lg-hero {
  box-shadow:
    inset 0 0 0 0.5px rgba(var(--sheen), 0.26),
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.6),
    inset 0 -1.5px 1.5px -0.5px rgba(var(--sheen), 0.3),
    0 2px 4px var(--contact-1),
    0 22px 48px -18px var(--contact-2);
}

[data-theme='dark'] .lg-hero::before {
  background: linear-gradient(
    148deg,
    rgba(2, 6, 16, 0.34) 0%,
    rgba(2, 6, 16, 0.04) 28%,
    rgba(var(--sheen), 0.06) 56%,
    rgba(var(--sheen), 0.6) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .lg-hero,
  .lg-hero::before {
    transition-duration: 1ms;
  }
}


/* ======================================================================== */
/*  THE TRACE — neobrutalist geometry, glass material                       */
/*                                                                          */
/*  The offset block is what makes a neobrutalist control feel like an       */
/*  object: the body travels diagonally and you can see where it came from.  */
/*  What was wrong was never the geometry, it was that the trace was a hard  */
/*  black silhouette. So the block stays and the MATERIAL changes: the mark  */
/*  left behind is glass too — a wet outline of the footprint, not a shadow. */
/*                                                                          */
/*  The wrapper exists because the body clips its own ripple (overflow:      */
/*  hidden), and the trace has to live outside that clip and behind it.      */
/* ======================================================================== */

.lgw {
  --r: 999px;
  --travel: 7px;
  position: relative;
  display: inline-flex;
  isolation: isolate;
}

.lgw > .lg {
  z-index: 2;
  /* Snappier than the free-floating arms, because this gesture is borrowed
     from a chassis whose whole character is the crispness of the move. */
  transition:
    transform 190ms cubic-bezier(0.2, 1.5, 0.42, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    -webkit-backdrop-filter 220ms ease,
    backdrop-filter 220ms ease,
    border-radius 380ms cubic-bezier(0.34, 1.3, 0.5, 1);
}

.lgw:hover,
.lgw.is-held {
  --lx: calc(var(--travel) * -1);
  --ly: calc(var(--travel) * -1);
}

.lgw:active {
  --lx: 0px;
  --ly: 0px;
}

/* `.lg` declares its own `--lx` at rest, so the inherited value from the
   wrapper loses to it. The body has to be told again, or the button sits
   still while its blob does the travelling — which reads as the trace
   arriving from the wrong side entirely. */
.lgw:hover > .lg,
.lgw.is-held > .lg {
  --lx: calc(var(--travel) * -1);
  --ly: calc(var(--travel) * -1);
}

.lgw:active > .lg {
  --lx: 0px;
  --ly: 0px;
}

/* the footprint itself */
.lgw::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r);
  pointer-events: none;
  opacity: 0;
  transition: opacity 190ms ease;
}

.lgw:hover::before,
.lgw.is-held::before {
  opacity: 1;
}

/* N1 · OUTLINE — the cheapest and the most literal: the rim of the body,
   left behind. In the overlap it reads as a line seen through glass; in the
   crescent the body has uncovered, it reads as the edge it was sitting in. */
.lgw--outline::before {
  box-shadow:
    inset 0 0 0 1.25px rgba(15, 23, 42, 0.32),
    inset 0 1.5px 0 0.5px rgba(var(--sheen), 0.7),
    inset 0 -1.5px 1px -0.5px rgba(var(--sheen), 0.3);
}

/* N2 · POOL — a wet mark. The body did not merely move, it lifted OFF
   something, and what stays is the liquid that did not come with it: a faint
   film, brightest along the edge the body pulled away from. */
.lgw--pool::before {
  background:
    linear-gradient(
      315deg,
      rgba(var(--sheen), 0.5) 0%,
      rgba(var(--sheen), 0.12) 44%,
      rgba(15, 23, 42, 0.07) 100%
    );
  -webkit-backdrop-filter: blur(2px) saturate(1.18);
  backdrop-filter: blur(2px) saturate(1.18);
  box-shadow:
    inset 0 0 0 1.25px rgba(15, 23, 42, 0.28),
    inset 0 1.5px 0 0.5px rgba(var(--sheen), 0.75);
}

/* N3 · STRETCH — surface tension. The trace and the body are still joined,
   so the mark is not a copy of the footprint but a smear spanning both
   positions, thinning as it goes. This is the one that reads as LIQUID
   rather than as two objects. */
.lgw--stretch::before {
  inset: calc(var(--travel) * -1) 0 0 calc(var(--travel) * -1);
  background:
    linear-gradient(
      315deg,
      rgba(var(--sheen), 0.4) 0%,
      rgba(var(--sheen), 0.16) 34%,
      rgba(var(--sheen), 0.05) 62%,
      rgba(15, 23, 42, 0.05) 100%
    );
  -webkit-backdrop-filter: blur(2px) saturate(1.12);
  backdrop-filter: blur(2px) saturate(1.12);
  box-shadow:
    inset 0 0 0 1.25px rgba(15, 23, 42, 0.24),
    inset 0 1.5px 0 0.5px rgba(var(--sheen), 0.6);
}

/* On a dark ground the ink half of every trace disappears — the mark has to be
   drawn in light instead. Same correction as the body's contour. */
[data-theme='dark'] .lgw--outline::before {
  box-shadow:
    inset 0 0 0 1.25px rgba(var(--sheen), 0.42),
    inset 0 1.5px 0 0.5px rgba(var(--sheen), 0.62),
    inset 0 -1.5px 1px -0.5px rgba(2, 6, 16, 0.5);
}

[data-theme='dark'] .lgw--pool::before {
  background:
    linear-gradient(
      315deg,
      rgba(var(--sheen), 0.24) 0%,
      rgba(var(--sheen), 0.06) 42%,
      rgba(2, 6, 16, 0.3) 100%
    );
  box-shadow:
    inset 0 0 0 1.25px rgba(var(--sheen), 0.36),
    inset 0 1.5px 0 0.5px rgba(var(--sheen), 0.62);
}

[data-theme='dark'] .lgw--stretch::before {
  box-shadow:
    inset 0 0 0 1.25px rgba(var(--sheen), 0.3),
    inset 0 1.5px 0 0.5px rgba(var(--sheen), 0.5);
  background:
    linear-gradient(
      315deg,
      rgba(var(--sheen), 0.28) 0%,
      rgba(var(--sheen), 0.1) 34%,
      rgba(var(--sheen), 0.03) 62%,
      rgba(2, 6, 16, 0.28) 100%
    );
}

.lgw--bead { --r: 22px; }

@media (prefers-reduced-motion: reduce) {
  .lgw > .lg,
  .lgw::before {
    transition-duration: 1ms;
  }
}


/* ======================================================================== */
/*  N4 - PULL: not a body and a trace. ONE body, stretched.                  */
/*                                                                          */
/*  Every earlier attempt drew a second shape behind the button and then     */
/*  tried to make the pair look like one thing - first an outline, then a    */
/*  film, then a real metaball merge. All three read as a button on top of   */
/*  another button, because a second contour IS a second object however it   */
/*  is filled.                                                              */
/*                                                                          */
/*  So there is no second shape. The button's own box grows up-left out of   */
/*  its footprint, anchored at the bottom-right corner it came from. What    */
/*  used to be "the trace" is now the part of the same body still covering   */
/*  the rest position. One surface, one rim, one lens, one refraction.       */
/*                                                                          */
/*  The scale factors depend on the control's own size, which CSS cannot     */
/*  compute - liquid.js measures once and writes --sx / --sy.                */
/* ======================================================================== */

.lgw--pull {
  /* Equal travel on both axes READS as sideways-only: 11px is a quarter of
     the button's height but a tenth of its width, and the eye normalises
     each axis against the body's own extent. The lift has to win, and the
     up-left diagonal is told by the ratio, not by equality. */
  --travel-x: 9px;
  --travel-y: 16px;
}

.lgw--pull > .lg {
  transform-origin: 100% 100%;
  transition:
    scale 230ms cubic-bezier(0.2, 1.35, 0.38, 1),
    box-shadow 260ms ease,
    background 260ms ease;
}

.lgw--pull:hover > .lg,
.lgw--pull.is-held > .lg {
  scale: var(--sx, 1) var(--sy, 1);
  /* the body no longer travels: it STRETCHES, and the anchor is the corner */
  --lx: 0px;
  --ly: 0px;
  box-shadow:
    inset 0 0 0 0.5px rgba(15, 23, 42, 0.1),
    inset 0 0.5px 0 0.5px rgba(var(--sheen), 0.72),
    inset 0 -1px 1px -0.5px rgba(var(--sheen), 0.36),
    0 2px 4px var(--contact-1),
    0 18px 34px -16px var(--contact-2);
}

.lgw--pull:active > .lg {
  scale: 1 1;
}

/* The label rides in the HEAD of the stretched body, not in the middle of it,
   and it must not stretch with the glass. The inverse scale cancels the
   parent's exactly; the offset is half the travel, because the box grew by
   the travel and its centre therefore moved by half of it. Individual
   `translate` resolves before `scale`, so this stays true px on screen. */
.lgw--pull > .lg > .lg__t {
  display: inline-block;
  transition:
    scale 230ms cubic-bezier(0.2, 1.35, 0.38, 1),
    translate 230ms cubic-bezier(0.2, 1.35, 0.38, 1);
}

.lgw--pull:hover > .lg > .lg__t,
.lgw--pull.is-held > .lg > .lg__t {
  scale: calc(1 / var(--sx, 1)) calc(1 / var(--sy, 1));
  translate: calc(var(--travel-x, 11px) / -2) calc(var(--travel-y, 11px) / -2);
}

.lgw--pull:active > .lg > .lg__t {
  scale: 1 1;
  translate: 0 0;
}

/* The press: the body snaps back into its footprint and the mass settles.
   Written on `scale`... except `scale` is the property doing the stretch, so
   the jiggle rides `transform` instead and the two compose. */
@keyframes lq-jiggle {
  0%   { transform: scale(1, 1); }
  18%  { transform: scale(1.05, 0.912); }
  42%  { transform: scale(0.976, 1.044); }
  64%  { transform: scale(1.017, 0.989); }
  83%  { transform: scale(0.996, 1.004); }
  100% { transform: scale(1, 1); }
}

.lgw.is-splash > .lg {
  animation: lq-jiggle 560ms cubic-bezier(0.3, 0.9, 0.35, 1);
}

/* This arm draws no trace of its own — the body IS the trace. */
.lgw--pull::before {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .lgw--pull > .lg,
  .lgw--pull > .lg > .lg__t {
    transition-duration: 1ms;
    animation: none !important;
  }
}


/* ======================================================================== */
/*  N5 - DROP: the layers the JS silhouette drives                          */
/*                                                                          */
/*  liquid.js computes ONE silhouette (two drops + neck) per frame and       */
/*  hands it to three layers as a clip-path: the glass, the ground shadow,   */
/*  and an SVG inner stroke for the rim. The button itself stops painting    */
/*  entirely on this arm - it is the hit target and the label carrier, and   */
/*  the silhouette is the only body on screen.                               */
/* ======================================================================== */

/*
  `--lgr-*` is the rim gradient, and it had NO default anywhere — it was
  declared on `.lgw--drop` and `.lgw--choice` only. A third arm
  (`[data-liquid-thumb]`, the travelling selection) therefore resolved
  `stop-color: var(--lgr-a)` to nothing, and an invalid stop-color in SVG
  falls back to OPAQUE BLACK: the bubble shipped with a hard black outline in
  both themes, measured 2026-09-02 at 2.6× on `Chrome/Topbar`. Any new arm
  must be added to this selector list and to its dark twin below.
*/
.lgw--drop,
[data-liquid-thumb] {
  /* rim gradient: dark where the curve turns from the light, bright toward */
  --lgr-a: rgba(15, 23, 42, 0.22);
  --lgr-m: rgba(255, 255, 255, 0.28);
  --lgr-b: rgba(255, 255, 255, 0.95);
}

/*
  Founder, 2026-09-03: «можна забрати цей ефект де вона прям сильно випирає —
  можна лишити тільки як вона змінюється без випуклості в бік / можна десь це
  зберегти бо напрацювання хороші».

  So the escape is subtracted, not the material. What stays is everything the
  body DOES: the pointer-tracked specular, the live water displacement, the
  press wave and the settle jiggle. What goes is the mass leaving the
  footprint — 13px sideways and 27% of the height upward, which is the
  protrusion in his screenshot.

  2px is a LEAN, not a travel: the body acknowledges the pointer's side
  without growing a second contour. The same reading he asked for on the
  toggle («легенько в ту сторону»), applied here first because Button is the
  arm every other liquid control was tuned against.

  The loud arm is kept whole, one class away — `lgw--drop-swell` restores the
  original numbers, and Experiments/Liquid glass mounts both side by side so
  the tuning is judgeable rather than remembered. Nothing was deleted.

  Zeroing these knobs only works because ensureDrop reads them with a finite
  check (liquid.js ~457); with the old `|| 13` a 0 here would have restored
  the full travel and looked like the knob did nothing.
*/
.lgw--drop {
  --drop-x: 2px;
  --drop-y: 2px;
}

/* The 2026-09-01 escape, preserved verbatim. y unset = 0.27 of the height. */
.lgw--drop-swell {
  --drop-x: 13px;
  --drop-y: initial;
}

.lgw--drop::before {
  content: none;
}

/* Every state, not just rest: `.lg:hover` is (0,3,0) and OUTSPECIFIES a
   (0,2,0) rest-only override, so on hover the button quietly repainted its
   own rim box-shadow and fill at the footprint — a full-width ghost pill
   under the silhouette (the founder's screenshot). The body must paint
   NOTHING itself in the drop arm; the silhouette layers are the render. */
.lgw--drop > .lg,
.lgw--drop > .lg:hover:not(:disabled),
.lgw--drop > .lg:active:not(:disabled),
.lgw--drop > .lg.is-held {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
  --lx: 0px;
  --ly: 0px;
}

.lgw--drop > .lg:focus-visible {
  outline: none;
}

.lgw--drop > .lg::before,
.lgw--drop > .lg::after {
  content: none;
}

.lgw--drop .lg__t {
  display: inline-block;
  /* driven per animation frame from renderDrop - no CSS transition */
  translate: var(--px, 0px) var(--py, 0px);
  position: relative;
  z-index: 2;
}

/* the glass: real backdrop bending, cut to the silhouette. NO blur in the
   rest fallback — the settle used to swap the crisp interactive water for a
   1.1px frost, and that one-frame material change was the founder's
   «за секунду зʼявляється матовий фініш». Glass, not frost, in BOTH states. */
.lgdg {
  background:
    radial-gradient(
      86px 40px at var(--hx, 50%) var(--hy, 30%),
      rgba(var(--lg-hlc, 255, 255, 255), var(--lg-hl, 0.32)),
      rgba(var(--lg-hlc, 255, 255, 255), 0) 72%
    ),
    rgba(var(--sheen), 0.08);
  -webkit-backdrop-filter: saturate(150%) brightness(var(--lg-tint-dim));
  backdrop-filter: saturate(150%) brightness(var(--lg-tint-dim));
}

/* the ground shadow: the same silhouette, blurred and dropped - this is the
   half that puts the pair into 3d space, because the shadow stays with the
   BASE drop while the risen one leaves it */
.lgds {
  background: rgba(15, 23, 42, 0.2);
  filter: blur(7px);
  transform: translateY(7px) scale(0.99);
}

.lgdr {
  z-index: 1;
}

/*
  THE STANDING BREATH — founder 2026-09-02: «має бути більше живості статичної
  (без сильних винесень)». Before this, a button nobody was touching was a
  still SHAPE: the spring had settled and the turbulence was paused, so the
  only living material on the page was whatever a hand happened to be on.

  It is an area-conserving swell — the mass widens as it flattens — on the
  `scale` property rather than `transform`, so it can never collide with the
  press jiggle or with the label's own `translate`. Per-instance phase comes
  from `--lg-breath`, a NEGATIVE delay seeded in `ensureDrop`: a row that
  breathes in unison reads as a progress indicator, not as material.

  Deliberately a compositor animation and not a JS clock. A JS clock has to be
  told when it is visible, and every channel that could tell it — rAF,
  IntersectionObserver, ResizeObserver — is frame-tied and mute in an occluded
  window; measured on this very component, a button below the fold never
  breathed at all. Ungating it instead costs a full silhouette re-march per
  visible button per tick, which is the cost the visibility gate exists to
  bound. This has neither problem.
*/
@keyframes lg-breathe {
  0%,
  100% {
    scale: 1 1;
  }
  50% {
    scale: 1.014 0.982;
  }
}

.lgw--drop,
.lgw--choice {
  animation: lg-breathe 5.6s ease-in-out infinite;
  animation-delay: var(--lg-breath, 0s);
}

/* the press owns the body while it lasts: two motions on one mass read as a
   wobble, so the breath stands down rather than adding to the jiggle */
.lgw--drop.is-splash,
.lgw--choice.is-splash {
  animation-play-state: paused;
}

/* the press: the reunited mass settles - anchored where the base drop sits */
.lgw--drop.is-splash .lgdg,
.lgw--drop.is-splash .lgdr {
  animation: lq-jiggle 560ms cubic-bezier(0.3, 0.9, 0.35, 1);
  transform-origin: 72% 86%;
}

/* the same press on a chooser — the overlay spans source AND options, so it
   settles around its own centre rather than around a single pill's corner */
.lgw--choice.is-splash .lgdg,
.lgw--choice.is-splash .lgdr {
  animation: lq-jiggle 560ms cubic-bezier(0.3, 0.9, 0.35, 1);
  transform-origin: 50% 50%;
}

[data-theme='dark'] .lgw--drop,
[data-theme='dark'] .lgw--choice,
[data-theme='dark'] [data-liquid-thumb] {
  --lgr-a: rgba(2, 6, 16, 0.4);
  --lgr-m: rgba(198, 220, 255, 0.24);
  --lgr-b: rgba(226, 240, 255, 0.85);
  --lg-hlc: 214, 232, 255;
  --lg-hl: 0.2;
}

[data-theme='dark'] .lgdg {
  background: rgba(var(--sheen), 0.06);
}

[data-theme='dark'] .lgds {
  background: rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .lgw--drop.is-splash .lgdg,
  .lgw--drop.is-splash .lgdr {
    animation: none !important;
  }

  .lgw--drop,
  .lgw--choice {
    animation: none !important;
  }
}

/* ============================================================
   Sizes — the same liquid on smaller controls. The silhouette
   pipeline reads the element's own box, so height scales the
   travel and the wobble by construction; only the sidestep is
   too big for a 32–36px control and is re-pinned here.
   ============================================================ */
/*
  A size arm MUST re-pin `min-height`. `.lg` sets `min-height: 42px` as the
  default control, and min-height beats height at any specificity — so
  `height: 32px` alone did nothing and `lg--sm` shipped at 42px, while
  `lg--icon` was a 36×42 OVAL rather than a circle. Found 2026-09-01 by
  measuring a topbar tab (59px bar, 42px pill) instead of reading the rule.
*/
.lg--sm {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: 16px;
}
.lg--icon {
  width: 36px;
  min-height: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 18px;
}
.lg--icon .lg__t {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.lg--icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.lgw--sm {
  --drop-x: 7px;
}

/* ============================================================
   Feedback states — sent / saved / processing / error.
   Driven by playLiquidState(); every animation self-clears.
   ============================================================ */
.lgw--drop.is-sent > .lg .lg__t,
.lgw--drop.is-saved > .lg .lg__t {
  opacity: 0;
  transition: opacity 0.12s;
}
.lgck {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  z-index: 3;
  transform: translate(var(--px, 0px), var(--py, 0px));
  animation: lgck-in 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes lgck-in {
  from { opacity: 0; scale: 0.4; }
  to { opacity: 1; scale: 1; }
}
/* sent: one droplet of the mass carries on up and away */
.lgfly {
  position: absolute;
  left: 58%;
  top: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  backdrop-filter: blur(1px) saturate(160%);
  -webkit-backdrop-filter: blur(1px) saturate(160%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 -2px 3px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.18);
  animation: lgfly 0.62s cubic-bezier(0.3, 0.6, 0.4, 1) both;
}
@keyframes lgfly {
  /* an ARC with squash-and-stretch, not a straight fade-out ray: the drop
     stretches along its launch, rounds at the apex, shrinks as it falls
     away — the founder's «прям кастомні анімації… чи надсилання» */
  from { transform: translate(0, 0) scale(1, 1); opacity: 1; }
  28% { transform: translate(9px, -30px) scale(0.8, 1.3) rotate(6deg); opacity: 1; }
  60% { transform: translate(30px, -52px) scale(0.72, 0.8); opacity: 1; }
  to { transform: translate(58px, -46px) scale(0.28); opacity: 0; }
}
/* the trailing satellite: smaller, later, shorter-lived */
.lgfly--2 {
  width: 7px;
  height: 7px;
  left: 48%;
  top: 0;
  animation-duration: 0.56s;
  animation-delay: 80ms;
}
/* added: the same droplet, falling IN — it lands and the mass swallows it */
.lgfly--in {
  left: 34%;
  top: -6px;
  animation: lgflyin 0.4s cubic-bezier(0.45, 0.05, 0.8, 0.5) both;
}
@keyframes lgflyin {
  from { transform: translate(-30px, -36px) scale(0.45); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translate(0, 12px) scale(0.9, 0.7); opacity: 1; }
}
/* saved: a ring contracting INTO the glass, and the tint answers green */
.lgring {
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  z-index: 4;
  pointer-events: none;
  border: 2px solid rgba(16, 185, 129, 0.6);
  animation: lgring 0.5s ease-out both;
}
@keyframes lgring {
  from { transform: scale(1.28); opacity: 0; }
  40% { opacity: 1; }
  to { transform: scale(0.94); opacity: 0; }
}
.lgw--drop.is-saved > .lgdg {
  background:
    radial-gradient(
      86px 40px at var(--hx, 50%) var(--hy, 30%),
      rgba(255, 255, 255, var(--lg-hl, 0.4)),
      rgba(255, 255, 255, 0) 72%
    ),
    rgba(16, 185, 129, 0.44) !important;
  transition: background 0.18s;
}
.lgw--drop.is-saved {
  --lg-hl: 0.4;
}
/* recording: the mic is LIVE — the mass breathes on a heartbeat (driven by
   playLiquidState), rings leave the glass on every beat, the rim answers */
.lgw--drop.is-rec .lgdr path {
  stroke: rgba(239, 68, 68, 0.85);
}
.lgring--live {
  border-color: rgba(239, 68, 68, 0.55);
  animation: lgring-live 1.05s ease-out both;
}
@keyframes lgring-live {
  from { transform: scale(0.88); opacity: 0.9; }
  to { transform: scale(1.5); opacity: 0; }
}
/* processing: a specular band sweeps the cap until cleared */
.lgw--drop.is-proc > .lgdg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  animation: lgproc 1.15s linear infinite;
}
@keyframes lgproc {
  from { background-position: 160% 0; }
  to { background-position: -60% 0; }
}
/* error: the mass stays low and shakes; the rim flashes red */
.lgw--drop.is-error {
  animation: lgshake 0.42s cubic-bezier(0.3, 0.1, 0.3, 1) both;
}
@keyframes lgshake {
  10% { transform: translateX(-4px); }
  30% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  70% { transform: translateX(1.5px); }
}
.lgw--drop.is-error > .lgdg {
  background:
    radial-gradient(
      86px 40px at var(--hx, 50%) var(--hy, 30%),
      rgba(255, 255, 255, var(--lg-hl, 0.35)),
      rgba(255, 255, 255, 0) 72%
    ),
    rgba(239, 68, 68, 0.4) !important;
  transition: background 0.15s;
}
.lgw--drop.is-error {
  --lg-hl: 0.35;
}
.lgw--drop.is-error .lgdr path {
  stroke: rgba(239, 68, 68, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .lgck,
  .lgfly,
  .lgfly--2,
  .lgfly--in,
  .lgring,
  .lgring--live,
  .lgw--drop.is-error,
  .lgw--drop.is-proc > .lgdg::after {
    animation: none !important;
  }
}

/* icon buttons want a LIGHTER liquid — the same engine, small knobs:
   a nudge of travel, a whisper of rise, barely a neck */
.lgw--lite {
  --drop-amp: 0.38;
  --drop-x: 2px;
  --drop-neck: 0.1;
}

/* ============================================================
   Text treatments — «текст ніби наклали зверху». The label is a
   flat sticker on a curved body; these make it belong to the
   glass WITHOUT a layer above it (that experiment cost a second
   masked backdrop pass per button, washed the label out and
   spoiled the animation — reverted the same day). Opt in per
   button with one class on the wrapper.

   Both selectors are (0,3,0) ON PURPOSE: a tint declares
   `.tint-cta .lg__t{color:#fff}` at (0,2,0) and sits LATER in
   the consuming sheet, so a (0,2,0) treatment loses the cascade
   silently — measured, and the same collision this kit has hit
   before. Neither treatment sets `color`, so whatever the tint
   chose still wins; they work with the ink they are given.
   ============================================================ */

/* etched: the letters are pressed INTO the surface — a dark bite
   along the top of each stroke, a lit lip below, exactly how a
   groove catches light on a body lit from above */
.lgw--drop.lgt--etch .lg__t,
.lgw--choice.lgt--etch .lg__t {
  text-shadow:
    0 -0.5px 0 rgba(15, 23, 42, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.62);
}
[data-theme='dark'] .lgw--drop.lgt--etch .lg__t,
[data-theme='dark'] .lgw--choice.lgt--etch .lg__t {
  text-shadow:
    0 -0.5px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(214, 232, 255, 0.26);
}

/* wet: the letters lie UNDER the liquid — a light bloom around
   them and a soft diffuse fall below, the way something reads
   through a film of water. Contrast drops a touch, because depth
   costs contrast; the colour itself is untouched. */
.lgw--drop.lgt--wet .lg__t,
.lgw--choice.lgt--wet .lg__t {
  opacity: 0.94;
  text-shadow:
    0 0 7px rgba(255, 255, 255, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 5px rgba(15, 23, 42, 0.24);
}
[data-theme='dark'] .lgw--drop.lgt--wet .lg__t,
[data-theme='dark'] .lgw--choice.lgt--wet .lg__t {
  text-shadow:
    0 0 8px rgba(150, 190, 255, 0.3),
    0 1px 0 rgba(214, 232, 255, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   THE SPLIT-CHOICE ARM, and the glass tints.

   Both lived only in the throwaway review sheet until 2026-09-01 — a week of
   the founder's decisions expressed in CSS the kit could not speak. Promoted
   here so Storybook (and any consumer) can render the same thing, and so the
   sheet stops being the only place the design exists.
   ========================================================================= */

.lgw--choice {
  position: relative;
  display: inline-flex;
  --lgr-a: rgba(15, 23, 42, 0.5);
  --lgr-m: rgba(255, 255, 255, 0.34);
  --lgr-b: rgba(255, 255, 255, 0.95);
}

/* the bodies are stripped in EVERY state — all the glass comes from the
   overlay silhouette. Miss one state and the button quietly redraws its own
   rim on top of the liquid (the scar that produced a full-width ghost pill). */
.lgw--choice .lg,
.lgw--choice .lg:hover:not(:disabled),
.lgw--choice .lg:active:not(:disabled),
.lgw--choice .lg:focus-visible {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.lgw--choice .lg::before,
.lgw--choice .lg::after {
  content: none;
}

.lgw--choice .lg__t {
  position: relative;
  z-index: 2;
}

/* the options are laid out at opacity 0 so their boxes are REAL — the drops
   fly to measured rects, never to guessed ones */
.lgw--choice .lgsp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

.lgw--choice .lgsp .lg .lg__t {
  transition: transform 0.16s ease;
}

.lgw--choice .lgsp .lg:hover .lg__t {
  transform: scale(1.07);
}

.lgw--choice .lgsp--danger .lg__t {
  color: #ffc2c2;
}

.lgw--choice:not([class*='tint']) .lgsp--danger .lg__t {
  color: #dc2626;
}

/* ---- the four tints ------------------------------------------------------
   Colour lives in the FILL, transparency in the alpha: the grid must stay
   readable through a tinted body or it is paint, not glass. */
:root {
  /*
    See-through of a tinted lens, and the dimming that pays for it.

    Founder: «можна так щоб лишився такий гарний контраст але і була
    прозорість» — yes, and the two do not trade off, because the label's
    contrast does not have to come from opacity. It comes from DARKENING THE
    BACKDROP under the lens, which is what this material does in the first
    place. So 30% of the page still reads through the control, dimmed, while
    the white label sits on a composite that clears AA.

    Both numbers are computed, not tuned. Worst case for a white label is a
    pure white ground: brightness(.55) takes it to 140, the fill composites at
    70%, and white on the result measures 4.74:1. On our dark ground the same
    pair measures 8.20:1. `tint-tokens.test.ts` recomputes this from these very
    tokens, so moving either one without re-checking turns it red.

    Only `brightness` is in the guard's arithmetic. `saturate` is on the layer
    too and is deliberately NOT modelled — a guard that pretended to account
    for it would be arithmetic dressed as a proof.
  */
  --lg-tint-a: 70%;
  /*
    Default is 1 — a no-op — so an untinted lens is untouched and the dim is
    a property of the TINT, inherited down to .lgdg from the wrapper class.
    One variable, so the static CSS rule and the runtime's WATER() string
    cannot drift apart; see liquid.js WATER.
  */
  --lg-tint-dim: 1;
}

.tint-cta {
  --lg-hl: 0.42;
  --lg-tint-dim: 0.55;
}
/*
  TRANSLUCENT, AND FROM THE TOKEN — both halves matter, and each was got wrong
  once.

  It started as `rgba(37, 99, 235, 0.5)`: the right blue (#2563eb IS our --cta)
  but a RE-TYPED HEX, so it could not follow the palette — dark theme's --cta
  is #7da9ff and this stayed light-theme blue. Founder: «тільки наш A треба
  зробити з таким синім як в С та D».

  I then made it opaque `var(--cta)` and he overruled that immediately, and
  correctly: «ідея цих кнопок така що видно те що ззаду них». Opacity is not a
  detail of this material, it IS the material — a tinted lens you see the page
  through. So the fix is the token AT an alpha, never a literal at an alpha.

  `--lg-tint-a` is the see-through, kept as a token so a ground experiment can
  sweep it without touching a colour. The value is chosen by MEASUREMENT, not
  taste: it is the lowest alpha at which a white label still clears 4.5:1
  against the composite over our own ruled ground, in both themes. Raise the
  ground contrast and this can come down; a bench that sweeps it is the only
  honest way to move it.
*/
.tint-cta .lgdg {
  background: color-mix(in srgb, var(--cta-fill) var(--lg-tint-a), transparent);
}
.tint-cta .lg__t {
  color: #fff;
}

.tint-accent {
  --lg-hl: 0.4;
  --lg-tint-dim: 0.55;
}
.tint-accent .lgdg {
  background: color-mix(in srgb, var(--accent-fill) var(--lg-tint-a), transparent);
}
.tint-accent .lg__t {
  color: #fff;
}

.tint-ink {
  --lg-hl: 0.28;
}
.tint-ink .lgdg {
  background: rgba(15, 23, 42, 0.52);
}
.tint-ink .lg__t {
  color: #f1f5f9;
}

/* frost is the ONE tint that keeps a blur: it is meant to read as frosted */
.tint-frost {
  --lg-hl: 0.55;
}
.tint-frost .lgdg {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(3px) saturate(150%);
  backdrop-filter: blur(3px) saturate(150%);
}
.tint-frost .lg__t {
  color: #0f172a;
}

[data-theme='dark'] .tint-cta {
  --lg-hlc: 255, 255, 255;
  --lg-hl: 0.32;
}
[data-theme='dark'] .tint-accent {
  --lg-hlc: 255, 255, 255;
  --lg-hl: 0.28;
}
[data-theme='dark'] .tint-ink {
  --lg-hlc: 255, 255, 255;
  --lg-hl: 0.18;
}
/*
  No `[data-theme='dark']` override for `.tint-cta` / `.tint-accent` on purpose:
  those tints ARE `var(--cta)` / `var(--accent)`, and those tokens already
  redeclare per theme (light --cta #2563eb, dark #7da9ff). A dark override here
  would defeat the token, which is exactly the bug it used to be — it painted
  `rgba(59,130,246,.45)` while the token said #7da9ff, so the brand blue in
  dark was neither the light blue nor the dark one.

  `.tint-ink` and `.tint-frost` DO keep literals below, and that is not the
  same defect: they are glass MATERIALS (a translucent near-black, a
  translucent near-white), not brand colours, so they have no token to follow
  and their alpha is the whole point.
*/
[data-theme='dark'] .tint-ink .lgdg {
  background: rgba(2, 6, 23, 0.5);
}
[data-theme='dark'] .tint-frost {
  --lg-hlc: 255, 255, 255;
  --lg-hl: 0.3;
}
[data-theme='dark'] .tint-frost .lgdg {
  background: rgba(226, 232, 240, 0.3);
}
[data-theme='dark'] .tint-frost .lg__t {
  color: #0f172a;
}

/* the variation grid the review passes are read on: a specimen with its own
   caption, so a row of candidates can be compared without a legend */
.lg-vrow {
  display: flex;
  flex-wrap: wrap;
  gap: 44px 56px;
  align-items: flex-end;
}

.lg-var {
  display: grid;
  justify-items: center;
  gap: 30px;
}

.lg-var b {
  font: 600 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink, #0f172a);
  opacity: 0.75;
  letter-spacing: 0.02em;
}

[data-theme='dark'] .lg-var b {
  color: #e2e8f0;
}

/* ------------------------------------------------------------- inert ---- */

/*
  Disabled and busy keep the MATERIAL and lose the gesture — the old answer
  was to fall back to the flat kit body, which meant two buttons on one screen
  claiming to be the same control. One material, two readings instead: the
  glass goes thin and desaturated, the rim loses its caustic, the label greys.
  The gesture is refused in JS (`inertCtl`), not by CSS alone, so nothing rises
  and no water starts.
*/
.lgw--off {
  cursor: not-allowed;
}
.lgw--off > .lgds {
  opacity: 0.35;
}
.lgw--off > .lgdg {
  opacity: 0.55;
  filter: saturate(0.35);
}
.lgw--off > .lgdr {
  opacity: 0.4;
}
.lgw--off .lg__t {
  opacity: 0.5;
}
.lgw--off > .lg {
  pointer-events: none;
}

/*
  There is NO `.lgw--busy` here on purpose. It existed for one day as an opacity
  pulse whose own comment read "same shape as `is-proc`, minus the pointer-driven
  part" — i.e. a lesser copy standing next to the real performance, which is what
  `playLiquidState(el, 'processing')` has done since 2026-09-01: the button is
  held DOWN for the duration, the held mass simmers on a jittered beat, and the
  specular band sweeps the cap. It also set `filter: none`, so the one state that
  most needs to look alive was the one state with the water switched off.
  `busy` on the kit Button drives the real thing; see Button.tsx.
*/
@import './material.css';
@import './liquid.css';

/**
 * @concierge-widgets/console-ui kit styles.
 * B2 tokens live here so the kit does not depend on apps/console/styles.css.
 * Light #f6f8f6 / #1c2e26. Dark #070b14 navy, not the green field.
 */

/* ── B2 tokens (self-contained) ───────────────────────────────────── */

:root,
[data-theme='light'] {
  color-scheme: light;
  --field: #f6f8f6;
  /*
    THE GROUND IS RULED, not flat. Founder 2026-09-02: «фон з сіткою прикольно
    - бо він інтерактиться з цими бульками нашими / а простий то не дуже».
    That is the literal condition for this material: a lens over one flat
    colour bends nothing a viewer can SEE, so on a plain ground every piece of
    glass we ship is doing invisible work. The grid gives refraction something
    to break.
    Set `--field-grid: transparent` to go back to a plain ground — one token,
    no code change, because this is still an open question for him.
  */
  /*
    THE GROUND IS DOTS, AND THE DOT IS OUR TEAL. Founder 2026-09-02, after the
    seven-ground bench: «ніби точки найкраще», then «ніби то бірюзові найбільш
    органічніше виглядають». The weight is the one he judged (30% of --accent),
    not a quieter number I substituted afterwards.

    A ground is not decoration here — it is the instrument the glass is read
    against. A lens over one flat colour bends nothing you can see, so the dots
    are what make the material legible; that is why this lives in the tokens and
    not in a page.

    Three tokens, so a variant is those three and never a new rule, and
    `--field-grid: transparent` still removes the ground completely in one word.
    Measured: this moves the ground by dL 0.297 against the plain surface, where
    the old hairline rules moved it 0.080.
  */
  --field-grid: color-mix(in srgb, var(--accent) 30%, transparent);
  --field-grid-size: 18px;
  --field-dot-r: 1.4px;
  --surface: #ffffff;
  --card: #ffffff;
  --chrome: #eef2ef;
  --border: rgba(28, 46, 38, 0.1);
  --border-strong: rgba(28, 46, 38, 0.18);
  --ink: #1c2e26;
  --ink-soft: #475952;
  --ink-faint: #5a6b63;
  --ink-mid: #3c5148;
  --accent: #0d9488;
  /*
    THE FILL BEHIND A WHITE LABEL — deliberately theme-invariant, and that is
    the point rather than an oversight. `--cta` and `--accent` flip light/dark
    (dark --cta is #7da9ff), which is right for text and borders and WRONG for
    a surface that has to carry white type: measured, white on #7da9ff is
    2.34:1 and white on #14b8a6 is 2.49:1, both far under AA. A brand fill is
    the same brand colour in both themes; the theme changes what surrounds it.
    These are literals because a token definition is exactly where a literal
    belongs — every consumer reads the token, never the hex.
  */
  --cta-fill: #2563eb;
  --accent-fill: #0f766e;
  --accent-strong: #0f766e;
  --accent-soft: #ccfbf1;
  --agent: #2e6cff;
  --agent-soft: rgba(46, 108, 255, 0.1);
  --cta: #2563eb;
  --cta-strong: #1d4ed8;
  --on-fill: #ffffff;
  --ok: #067647;
  --ok-soft: #d3f8df;
  --danger: #b42318;
  --danger-soft: #fee4e2;
  --warn: #b54708;
  --warn-soft: #fef0c7;
  --shadow-sm: 0 1px 2px rgb(20 32 28 / 0.06);
  --shadow-md: 0 2px 6px rgb(20 32 28 / 0.08), 0 8px 24px -10px rgb(20 32 28 / 0.18);
  --shadow-lg: 0 4px 12px rgb(20 32 28 / 0.1), 0 24px 60px -16px rgb(20 32 28 / 0.3);
  --shadow: var(--shadow-lg);
  --shadow-glass: 0 1px 3px rgb(20 32 28 / 0.1), 0 12px 40px -12px rgb(20 32 28 / 0.28);
  --shadow-glass-lift: 0 2px 6px rgb(20 32 28 / 0.1), 0 20px 56px -16px rgb(20 32 28 / 0.34);
  --glass-fill: rgba(255, 255, 255, 0.82);
  --glass-fill-strong: rgba(255, 255, 255, 0.94);
  /* the header alone: see `.cui-topbar` — the one surface whose job is to let
     the material read, so it is the one surface that must not be a sheet */
  --topbar-fill: rgba(255, 255, 255, 0.72);
  --glass-spec: rgba(255, 255, 255, 0.3);
  --glass-spec-top: rgba(255, 255, 255, 0.28);
  /*
    A WELL'S TWO EDGES, and WHICH ONE CARRIES IS A PROPERTY OF THE GROUND.

    Not color-mix(var(--ink)): in dark --ink is light, so a mix off it would
    LIGHTEN the hole. Same reason --glass-spec is an explicit rgba per theme.

    And the sink cannot carry the dark theme at all — measured, not guessed:
    over #070b14 a black bite reaches ΔL +0.0034 at alpha 1.0, i.e. pure black
    is 25x too weak, because there is nowhere darker to go. So in dark the
    recession is carried by the LIT LIP and in light by the BITE, both weighed
    to ΔL ~0.085 — the weight already agreed on the dotted ground.

    Its own token and NOT --glass-spec-top: that one is the pills' raised top
    lip, and a well's lip is on the opposite edge doing the opposite job.
  */
  --field-sink: rgba(28, 46, 38, 0.05);
  --field-lip: rgba(255, 255, 255, 0.28);
  --glass-chroma-a: rgba(28, 46, 38, 0.05);
  --glass-chroma-b: rgba(28, 46, 38, 0.05);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-edge-mid: rgba(255, 255, 255, 0.25);
  --glass-edge-end: rgba(255, 255, 255, 0.1);
  --blur-glass: 14px;
  --lift-y: -2px;
  --disabled-alpha: 0.55;
  --rail: 220px;
  --rail-compact: 64px;
  --topbar-h: 60px;
  /* The brand mark, and also the topbar's left-track floor: under pressure the
     name truncates but the mark is the last thing to go. One token, so the floor
     and the square it protects cannot drift apart. */
  --brand-mark: 32px;
  /* Control height. B2 draws its `.btn` at 32px; holding 36 here keeps every page
     that was laid out against it stable — moving to 32 is a wave-3 call, one token. */
  --control-h: 32px;
  --control-px: 14px;
  --radius-xs: 10px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --type-3xs: 10px;
  --type-2xs: 11px;
  --type-xs: 12px;
  --type-sm: 13px;
  --type-base: 14px;
  --type-md: 15px;
  --type-lg: 17px;
  --type-xl: 22px;
  --leading: 1.5;
  --leading-tight: 1.2;
  --tracking-tight: -0.03em;
  --tracking-wide: 0.08em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --radius-glass: 1.25rem;
  --warn-border: rgba(181, 71, 8, 0.24);
  --field-tint: color-mix(in srgb, var(--ink) 5%, transparent);
  --ink-pressed: color-mix(in srgb, var(--ink) 8%, transparent);
  --cta-strong-pressed: color-mix(in srgb, var(--cta-strong) 80%, var(--ink));
  --cta-hover: #1d4ed8;
  --cta-active: #1b45b8;
  --cta-disabled: rgba(37, 99, 235, 0.24);
  --cta-disabled-ink: rgba(28, 46, 38, 0.46);
  --accent-hover: #0f766e;
  --accent-active: #0b5d57;
  --accent-disabled: rgba(13, 148, 136, 0.24);
  --empty-bg: #f3f6f4;
  --empty-border: rgba(28, 46, 38, 0.18);
  --scrim: rgba(28, 46, 38, 0.4);
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
  --bg-0: var(--field);
  --bg-1: var(--surface);
  --bg-2: var(--card);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-faint: var(--ink-faint);
}

[data-theme='dark'] {
  color-scheme: dark;
  --field: #070b14;
  /* same three tokens; dark's --accent is #14b8a6, so the dot follows the theme */
  --field-grid: color-mix(in srgb, var(--accent) 30%, transparent);
  --field-grid-size: 18px;
  --field-dot-r: 1.4px;
  --surface: #0b1220;
  --card: #0f172a;
  --chrome: #152033;
  --border: rgba(148, 163, 184, 0.1);
  --border-strong: rgba(148, 163, 184, 0.2);
  --ink: #e8eef8;
  --ink-soft: #94a3b8;
  --ink-faint: #8698ae;
  --ink-mid: #b8c4d6;
  --agent: #2e6cff;
  --agent-soft: rgba(46, 108, 255, 0.14);
  --accent: #14b8a6;
  --accent-strong: #2dd4bf;
  --accent-soft: rgba(20, 184, 166, 0.12);
  --cta: #7da9ff;
  --cta-strong: #2563eb;
  --on-fill: #ffffff;
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.12);
  --danger: #f5837a;
  --danger-soft: rgba(245, 131, 122, 0.12);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35), 0 12px 32px -16px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.55);
  --shadow: var(--shadow-lg);
  --shadow-glass: 0 1px 3px rgb(0 0 0 / 0.35), 0 12px 40px -12px rgb(0 0 0 / 0.5);
  --shadow-glass-lift: 0 2px 6px rgb(0 0 0 / 0.4), 0 20px 56px -16px rgb(0 0 0 / 0.55);
  --glass-fill: rgba(15, 23, 42, 0.78);
  --glass-fill-strong: rgba(15, 23, 42, 0.92);
  --topbar-fill: rgba(11, 18, 32, 0.72);
  --glass-spec: rgba(148, 180, 255, 0.07);
  --glass-spec-top: rgba(255, 255, 255, 0.05);
  /* the bite is at its physical ceiling here and still invisible; the lip carries */
  --field-sink: rgba(0, 0, 0, 0.5);
  --field-lip: rgba(255, 255, 255, 0.3);
  --glass-chroma-a: rgba(148, 180, 255, 0.1);
  --glass-chroma-b: rgba(56, 189, 248, 0.04);
  --glass-edge: rgba(148, 180, 255, 0.08);
  --glass-edge-mid: rgba(255, 255, 255, 0.25);
  --glass-edge-end: rgba(148, 180, 255, 0.1);
  --blur-glass: 16px;
  --lift-y: -2px;
  --rail-compact: 64px;
  --accent-hover: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-active: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --cta-disabled: color-mix(in srgb, var(--cta-strong) 38%, var(--surface));
  --type-lg: 17px;
  --type-xl: 22px;
  --space-7: 28px;
  --accent-focus-ring: rgba(45, 212, 191, 0.62);
  --accent-disabled: rgba(20, 184, 166, 0.3);
  --cta-hover: #3b82f6;
  --cta-active: #1d4ed8;
  --cta-focus-ring: rgba(147, 174, 255, 0.78);
  --cta-disabled-bg: rgba(37, 99, 235, 0.32);
  --cta-disabled-ink: rgba(232, 238, 248, 0.45);
  --empty-bg: rgba(148, 163, 184, 0.04);
  --scrim: rgba(4, 6, 10, 0.55);
  --empty-border: rgba(148, 163, 184, 0.24);
  --field-bloom-1: transparent;
  --field-bloom-2: transparent;
  --field-bloom-3: transparent;
  --bg-0: var(--field);
  --bg-1: var(--surface);
  --bg-2: var(--card);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-faint: var(--ink-faint);
}

@media (prefers-contrast: more) {
  :root,
  [data-theme='light'] {
    --ink-faint: #475952;
    --border: rgba(28, 46, 38, 0.5);
    --border-strong: rgba(28, 46, 38, 0.72);
  }
  [data-theme='dark'] {
    --cta: #b7ccff;
    --accent: #2dd4bf;
  }
}

/* ── Page ─────────────────────────────────────────────────────────── */

.cui-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5) var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.cui-page--wide {
  max-width: 1600px;
}

.cui-page--surface {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.cui-page--dashboard .cui-empty {
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  margin-top: var(--space-4);
  padding: var(--space-6) var(--space-5);
}

.cui-page--dashboard .cui-empty__title {
  font-size: var(--type-sm);
  font-weight: 600;
}

/* Gate identity on the denied/checking page wrapper. Hosts wrap OperatorGate
   around <Page>, so the denied branch keeps .cui-page for scroll + padding. */
.cui-gate {
  border-top: 2px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

.cui-gate--checking {
  border-top: none;
}

.cui-page:focus,
.cui-page-header__title:focus {
  outline: none;
}

.cui-gate:focus {
  outline: 2px solid var(--cta);
  outline-offset: -2px;
}

.cui-page-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-1);
}

.cui-page-header__text {
  flex: 1 1 auto;
  min-width: 0;
}

.cui-page-header__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--type-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cui-page-header__title {
  margin: 0;
  font-size: var(--type-xl);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Dark: light-on-navy strokes read thinner at 22px/650 — relax tracking only. */
[data-theme='dark'] .cui-page-header__title {
  letter-spacing: -0.015em;
}

.cui-page-header__lede {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  font-size: var(--type-sm);
  max-width: 52ch;
  line-height: var(--leading);
}

.cui-page-header__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-left: auto;
}

.cui-page-header--hello {
  padding-bottom: var(--space-4);
  align-items: flex-end;
}

.cui-page-header--hello .cui-page-header__title {
  font-size: 1.55rem;
  letter-spacing: -0.035em;
}

.cui-page-header--hello .cui-page-header__lede {
  max-width: 60ch;
  font-size: 14px;
}

.cui-page__note {
  margin: 0;
  font-size: var(--type-xs);
  color: var(--ink-faint);
  line-height: var(--leading);
}

/* ── Toast / error body ───────────────────────────────────────────── */

.cui-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-sm);
  line-height: var(--leading);
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.cui-toast__msg {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cui-toast--ok {
  background: var(--ok-soft);
  border-bottom-color: color-mix(in srgb, var(--ok) 26%, transparent);
}

.cui-toast--error {
  background: var(--danger-soft);
  border-bottom-color: color-mix(in srgb, var(--danger) 26%, transparent);
}

[data-theme='dark'] .cui-toast--ok {
  border-bottom-color: color-mix(in srgb, var(--ok) 38%, transparent);
}

[data-theme='dark'] .cui-toast--error {
  border-bottom-color: color-mix(in srgb, var(--danger) 44%, transparent);
}

.cui-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  border-radius: var(--radius-lg);
  background: var(--danger-soft);
  color: var(--ink);
}

.cui-error__icon {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  font-size: var(--type-xs);
  font-weight: 650;
  line-height: 1;
}

.cui-error-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.cui-error-body strong {
  font-size: var(--type-base);
  font-weight: 650;
  color: var(--ink);
}

.cui-error-body > span {
  font-size: var(--type-sm);
  line-height: var(--leading);
  color: var(--ink-soft);
}

.cui-error-body__retry {
  align-self: flex-start;
  margin-top: var(--space-1);
}

/* ── Empty / loading ──────────────────────────────────────────────── */

.cui-empty {
  border: 1px dashed var(--empty-border, var(--border-strong));
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  background: var(--empty-bg);
}

.cui-empty--loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-style: solid;
}

.cui-empty__title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--text);
}

.cui-empty__sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-faint);
}

.cui-empty__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.cui-empty__spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--ink-soft);
  border-radius: var(--radius-pill);
  animation: cui-spin 0.7s linear infinite;
}

@keyframes cui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Data table ───────────────────────────────────────────────────── */

.cui-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
}

.cui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.cui-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.cui-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.cui-table tr:last-child td {
  border-bottom: none;
}

.cui-table__row--selected td {
  background: color-mix(in srgb, var(--cta) 9%, transparent);
}

.cui-table tbody tr.cui-table__row--interactive:not(.cui-table__row--selected) {
  cursor: pointer;
}

.cui-table tbody tr.cui-table__row--interactive:not(.cui-table__row--selected):hover td {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.cui-table tbody tr:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: -2px;
}

.cui-table__link[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--ink-faint);
  text-decoration: none;
}

.cui-table__link {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent-strong);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.cui-table__link:hover {
  text-decoration: underline;
}

.cui-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cui-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cui-stack__meta {
  font-size: 11.5px;
  color: var(--text-faint);
}

.cui-muted {
  color: var(--text-faint);
}

/* ── Status pill ──────────────────────────────────────────────────── */

/*
  A chip is glass, not a wash. Same laws as the button, at a scale that does
  not pay for them: no silhouette, no displacement, no JS, no backdrop-filter
  (a page of these next to a decoding avatar cannot afford one filter each).
  Colour is the TONE token at an alpha — never a re-typed hex, never a theme
  fork that paints --agent where the label said info.

  Two families share this paint: Pill (a label, always dotted) and StatusPill
  (an outcome). danger and error are two names for one colour; running shares
  warn's pigment and spends its difference on the breathing dot.
*/

.cui-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 6px;
  border: 0;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 16%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

.cui-pill--sm {
  height: 18px;
  font-size: 10px;
  margin-left: 8px;
}

.cui-pill--dot {
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 0;
}

.cui-pill--dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.cui-pill--ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--ok) 34%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

.cui-pill--warn,
.cui-pill--running {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--warn) 34%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

.cui-pill--danger,
.cui-pill--error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--danger) 34%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

.cui-pill--info {
  color: var(--cta-strong);
  background: color-mix(in srgb, var(--cta) 14%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--cta) 32%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

/*
  Unscoped text is --cta-strong (the 4.5:1 ink). In dark the roles invert
  (--cta is the light tint, --cta-strong is the fill), so only the LABEL
  colour is re-pointed. The wash still mixes --cta. A background override
  here is how info used to paint --agent.
*/
[data-theme='dark'] .cui-pill--info {
  color: var(--cta);
}

.cui-pill--muted {
  color: var(--ink-mid);
}

/* running is the one chip that is ABOUT time — the dot breathes. A pulse on
   the whole body would look like a notification; the light is the signal. */
.cui-pill--running.cui-pill--dot::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 28%, transparent);
  animation: cui-pill-live 1.8s ease-in-out infinite;
}

@keyframes cui-pill-live {
  0%,
  100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}

@media (prefers-reduced-motion: reduce) {
  .cui-pill--running.cui-pill--dot::before {
    animation: none;
  }
}

.cui-pill:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.cui-pill:disabled,
.cui-pill[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cui-pill--warn:disabled,
.cui-pill--danger:disabled,
.cui-pill--error:disabled,
.cui-pill--running:disabled {
  opacity: 0.55;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow:
    inset 0 0 0 0.5px var(--border),
    0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* ── Drawer ───────────────────────────────────────────────────────── */

.cui-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  animation: fade-in var(--dur) var(--ease);
}

.cui-drawer {
  width: min(420px, 100%);
  height: 100%;
  background: var(--bg-1);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  padding: var(--space-4) var(--space-4) var(--space-7);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cui-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.cui-drawer__title {
  margin: 0;
  font-size: var(--type-lg);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
}

.cui-drawer__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--type-xs);
  color: var(--text-muted);
  line-height: var(--leading);
}

.cui-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cui-drawer__section {
  margin: var(--space-2) 0 0;
  font-size: var(--type-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── SID observe (Logs / Day, waiting-on-you, Allow-once) ─────────── */

.cui-waiting__seats {
  margin-left: var(--space-1);
  padding-left: 7px;
  border-left: 1px solid var(--border-strong);
  font-weight: 500;
  color: color-mix(in srgb, var(--warn) 78%, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20ch;
  min-width: 0;
}

.cui-allow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
  border-radius: var(--radius);
  background: var(--warn-soft);
}

.cui-allow__title {
  display: block;
  font-size: var(--type-base);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

.cui-allow__reason,
.cui-allow__meta,
.cui-allow__status {
  margin: var(--space-1) 0 0;
  font-size: var(--type-xs);
  color: var(--text-muted);
  line-height: var(--leading);
}

.cui-allow__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cui-allow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cui-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cui-day__title {
  margin: 0;
  font-size: var(--type-xl);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
}

.cui-day__meta,
.cui-day__gaps {
  margin: var(--space-1) 0 0;
  font-size: var(--type-xs);
  color: var(--text-muted);
}

.cui-day__gaps {
  color: var(--warn);
}

.cui-day__providers,
.cui-day__list,
.cui-day__events {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.cui-day__list--nums,
.cui-day__events [data-ts] {
  font-variant-numeric: tabular-nums;
}

.cui-day__providers {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.cui-day__h {
  margin: 0 0 var(--space-1);
  font-size: var(--type-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.cui-day__block {
  min-width: 0;
}

/* ── B2 chrome: app / topbar / rail / buttons / ops / story ───────── */

/*
  THE GROUND, DEFINED ONCE. A dot field, not an image: no request, it scales
  with the tokens, and `--field-grid: transparent` removes it completely. Round
  edges refract as displacement rather than as a kink, which is why dots beat
  the hairline rules on the bench.

  Two selectors rather than two rules, and that is the point. Storybook's
  preview decorator had its own copy of the old ground with a comment promising
  it was "kept in sync by using the kit's own tokens" — and it drifted the hour
  the ground changed shape, because only the COLOUR was a variable and the SHAPE
  was copied. A duplicate is in sync exactly for the parts that are tokens.
*/
.cui-app,
.cui-field {
  background-color: var(--field);
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--field-grid) var(--field-dot-r),
    transparent calc(var(--field-dot-r) + 0.1px)
  );
  background-size: var(--field-grid-size) var(--field-grid-size);
}

.cui-app {
  position: relative;
  height: 100%;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  /* the ground itself is `.cui-field`, one rule below — see the note there */
  color: var(--ink);
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--type-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cui-topbar-shell {
  flex: 0 0 auto;
}

.cui-shell-body {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.cui-app .cui-shell-body {
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

.cui-app.cui-app--rail-compact .cui-shell-body {
  grid-template-columns: var(--rail-compact) minmax(0, 1fr);
}

.cui-shell-body--solo,
.cui-app .cui-shell-body--solo,
.cui-app.cui-app--rail-compact .cui-shell-body--solo {
  grid-template-columns: minmax(0, 1fr);
}

.cui-main {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cui-app[data-route='chat'] .cui-main,
.cui-app:not([data-route]) .cui-main {
  background: transparent;
}

.cui-main:focus {
  outline: none;
}

.cui-skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  text-decoration: underline;
}

.cui-skip:focus-visible {
  top: 12px;
}

/*
  Visually hidden, still announced. One rule, every user — this was two
  hand-rolled copies before the topbar needed a third.

  It lost its DECLARATIONS for an hour on 2026-09-01: folding the two copies
  into one selector list left a trailing comma and no block, so both selectors
  glued onto the next rule and every sr-only string in the product was plain
  visible text (caught on the `Chrome/Topbar` LiveTab story, where the tab read
  "Inbox3 conversations waiting"). A dangling comma is valid CSS — nothing in
  the build could have told us.
*/
.cui-sr-only,
.cui-route-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cui-app[data-state='warn'] .cui-topbar-shell {
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

/* The topbar is the one full-width surface a visitor's eye crosses on every page, so
   it is where the material earns the most and costs the least (nothing decodes behind
   it). `.cui-glass--flush` keeps the blur and drops the chroma ring. */
.cui-topbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 18px;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  /*
    THE BAR HAD TO GIVE WAY FIRST. Founder 2026-09-02: «треба щось думати з
    фоном - щоб як найкраще бралося». `--glass-fill-strong` is 94% opaque, so
    every glass control in the header was refracting a flat sheet of white —
    the material cannot show what is not behind it, and no amount of work on
    the controls fixes that. The bar keeps its blur (which is what keeps its
    own text legible) and gives up a third of its opacity, so the page moving
    underneath is what the nav bubble and the toggle actually bend.
  */
  background:
    radial-gradient(28rem 18rem at var(--sx, 50%) var(--sy, -20%), var(--glass-spec), transparent 65%),
    var(--topbar-fill, var(--glass-fill-strong));
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.15);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.15);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cui-topbar {
    background: var(--surface);
  }
}

/*
  WHICH TRACK GIVES WAY, measured 2026-09-01. This read `auto minmax(0,1fr) auto`,
  which hands the brand and the actions their full content width and makes the NAV
  absorb every deficit: on a 556px bar the columns resolved to 232.7 / 40 / 217.3 —
  a 40px window onto a 190px nav, i.e. the primary navigation clipped to one
  half-legible pill while a breadcrumb that says the same thing kept its width.
  A viewport media query cannot see this; the bar was inside a 1280px viewport.

  So the nav is sized by its content and the LEFT is the one that gives way — the
  breadcrumb is the one thing on the bar the nav already tells you. The right's
  floor is stated as `max-content` rather than left to `auto`, because `auto` does
  not hold it: measured on the 8-tab story it gave `0px 506px 0px` and the theme
  toggle and the avatar crushed into each other on the bar's right edge. A track's
  automatic minimum is defeated by the `min-width: 0` its own contents carry, so
  the side that must never overlap says so literally.

  `min-content` was tried on the left and is WRONG: the brand block's min-content
  includes the breadcrumb's words, which measured 232.7px and pushed the nav back
  into a 56px scroller — the very bug above. Below `720px` of BAR the answer is
  not a cleverer track list at all; it is the two-row reflow in the container
  query further down.
*/
.cui-topbar--nav {
  grid-template-columns: minmax(var(--brand-mark), 1fr) auto minmax(max-content, 1fr);
}

/* The scroll lives on the MID, never on the track: a scroll container clips
   its children's box-shadow, and the raised active pill IS a box-shadow. Put
   `overflow-x` on the track and the one thing that lifts the pill off the
   groove is cut away on exactly the screens that need the nav most. */
/*
  ...but `overflow-x: auto` makes this a scroll container in BOTH axes: CSS
  computes a `visible` sibling axis to `auto`, so the mid silently became a
  VERTICAL scroller too. The travelling body's silhouette layers are 80px
  tall around a 40px track, so `scrollHeight` was 68 against a 40 clientHeight
  and the browser scrolled the header's own nav by 27.5px the first time a tab
  took focus — measured 2026-09-02, and it reads exactly like a clipped,
  mispositioned nav.

  The fix is padding, not a taller row: `padding-block` grows the SCROLLPORT
  (overflow clips to the padding box) while the negative margin gives the
  layout its 40px back, so the glass fits, scrollHeight == clientHeight, and
  nothing can scroll. `box-sizing` is stated because this kit sets no global
  border-box and the row is a fixed 40px.
*/
.cui-topbar__mid {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* Asymmetric, and measured on the live story rather than guessed: the glass
     and rim reach 19px above the 40px track, while the ground shadow — which
     is translated 7px DOWN — reaches 27.6 below it. Two symmetric passes at
     22 and 26 each left a few px of silent scroll, which is the same defect
     in a quieter voice. */
  padding-block: 20px 30px;
  margin-block: -20px -30px;
}

.cui-topbar__mid::-webkit-scrollbar {
  display: none;
}

/*
  A SEGMENTED CONTROL, not three loose buttons — this is the header defect the
  founder has named since 2026-08-15. The mock (B2 `.mode-tabs`) grooves the
  track into the bar and raises the active pill out of it, so the group reads
  as one object with one selected face. Shipped, the track did not exist at
  all: 8 of its 11 declarations were missing and 15 of the item's 16 differed.

  Deliberately NOT glass. The topbar is already a backdrop pass; a second one
  per item would both mud the read (glass over glass has nothing left to
  refract) and multiply the pass count on the one surface that is on screen on
  every page. The groove is a flat tint; only the raised pill gets a shadow.
*/
/*
  The track HOSTS the travelling body: `attachLiquidThumb` inserts `.lgds`,
  `.lgdg` and `svg.lgdr` as its first children, so it needs a positioning
  context and its own stacking context — without `isolation` the glass
  composites against the page instead of against the bar.
*/
.cui-topbar__nav {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 2px;
  /* 3px around a 32px option: the groove is the recess the body is lifted
     OUT of, not a border drawn around it. */
  padding: 3px;
  /*
    A GRADIENT, not a flat fill. Founder 2026-09-02: «треба щось думати з
    фоном - щоб як найкраще бралося». A lens over one flat colour bends
    nothing a viewer can see, so the glass read as paint — the same finding as
    the review sheet's «якщо лінії не гнуться на канті — цей кант нічого не
    заломлює». The recess now has a top-to-bottom ramp and an inner shadow,
    and the travelling body visibly kinks both as it passes.
  */
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.1),
    rgba(15, 23, 42, 0.02) 46%,
    rgba(255, 255, 255, 0.5)
  );
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.13),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

[data-theme='dark'] .cui-topbar__nav {
  background: linear-gradient(
    180deg,
    rgba(2, 6, 16, 0.6),
    rgba(2, 6, 16, 0.22) 46%,
    rgba(148, 163, 184, 0.14)
  );
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

/* The avatar is a single control, not a member of a set, so it keeps the drop.
   Its hand stays SMALL: a header control that leaps at the cursor turns the
   one surface present on every page into the loudest thing on screen. */
.cui-topbar__actions .lgw {
  --drop-amp: 0.3;
  --drop-x: 2px;
}

/*
  ONE material, here too — founder, 2026-09-01: «це хоч трошки нагадує наші
  кнопки???» It did not: the tab was a flat pill painted here, while every
  other control in the product is the liquid drop. The tab now renders the
  same body as `Button` (`lgw--drop` > `.lg.lg--lens.lg--sm`) and this class
  paints NOTHING the material owns.

  That is not tidiness, it is the `.cui-btn` scar: `.cui-topbar__nav-item:hover`
  and `.lgw--drop > .lg:hover` are both (0,2,0), so keeping both would have let
  stylesheet ORDER decide the paint. Selection is the TINT on the wrapper
  (`tint-cta`) — the layer built for exactly that.

  What stays is what the material has no opinion about: the label's colour
  ladder, and the gap the live dot needs inside the label.
*/
/*
  A resting tab is a LABEL, not a body — founder, 2026-09-01: «можливо
  неактивні не будуть мати бульки і вона буде перетаскуватися». So this paints
  no ground, no rim and no shadow: the one mass on the track IS the selection,
  and it travels. `z-index` puts every label above that mass; the selected one
  reads on the tinted fill.
*/
.cui-topbar__nav-item {
  position: relative;
  z-index: 2;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur) var(--ease);
}

/*
  Hover moves the INK. The affordance a resting tab gets is the LEAN — the
  body tilts toward the pointer — and that is the material's job, not this
  sheet's. A resting tab that fills on hover reads as half-selected, which is
  the whole reason the raised-per-tab version had to go.
*/
.cui-topbar__nav-item:hover {
  color: var(--ink-soft);
}

.cui-topbar__nav-item--on,
.cui-topbar__nav-item--on:hover {
  color: var(--on-fill);
}

/* Live state belongs IN the tab it describes — a count in the corner makes the
   reader join two things by memory. */
.cui-topbar__nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  animation: cui-breathe 2s ease-in-out infinite;
}

@keyframes cui-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cui-topbar__nav-item {
    transition: none;
  }
  .cui-topbar__nav-dot {
    animation: none;
  }
}

.cui-topbar__nav-item:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

/* `overflow: hidden` is the no-overlap guarantee, and it is the whole point:
   with eight tabs on a 572px bar the left track resolves to its floor and the
   brand — being `flex-shrink: 0` — kept its full 113px and painted 97px across
   the scrolling nav. Under pressure this must degrade to TRUNCATION, which is
   legible, never to overlap, which is a bug. */
.cui-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
}

.cui-brand__hit {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 6px 4px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cui-brand__hit:hover {
  background: var(--field-tint);
}

.cui-brand__hit:focus-visible,
.cui-avatar:focus-visible,
.cui-breadcrumb__link:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.cui-brand__mark {
  width: var(--brand-mark);
  height: var(--brand-mark);
  border-radius: 10px;
  background: var(--accent-strong);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 12px;
  color: #fff;
  /* the ring is what makes a filled square read as a MARK and not a swatch */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
  flex-shrink: 0;
}

[data-theme='dark'] .cui-brand__mark {
  background: var(--accent);
  color: var(--field);
  /* a white ring on a light-teal mark over a near-black bar is a halo, not an
     edge — the dark theme rings with shadow, same as the mock */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 22%, transparent);
}

.cui-brand__text {
  min-width: 0;
}

.cui-brand__text strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.03em;
  display: block;
}

.cui-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-top: 2px;
  white-space: nowrap;
  /* The breadcrumb is the first casualty when the bar runs short, and `overflow`
     is what lets it actually reach zero: a clipping box contributes no width of
     its own to the flex row, so the brand keeps its space and the nav keeps its
     track. It is not here for the ellipsis. */
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}

.cui-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cui-breadcrumb__sep {
  color: var(--ink-faint);
}

.cui-breadcrumb__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cui-breadcrumb__link:hover {
  color: var(--ink);
}

.cui-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.cui-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/*
  A status number is a control when it can go somewhere, and it must not change
  size or position when it becomes one — the header is on all fourteen pages, so
  a chip that shifts by a pixel between two states shifts on every screen.
  The rim is an inset 0.5px hairline (same glass as `.cui-pill`), never a 1px
  border. Span and button share padding/radius/font; the button adds only
  cursor + hover wash. Dense chrome chips, not lenses: no backdrop-filter.
*/
.cui-status__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 7px;
  border: 0;
  border-radius: 7px;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
  /* live stays this quiet ink glass — never a CTA, never --warn */
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 16%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

button.cui-status__item {
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

button.cui-status__item:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
}

button.cui-status__item:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 1px;
}

/* Earned tones. `warn` is "a person is waiting on a human", `bad` is "the
   fleet is broken" — neither is decoration, and neither appears at zero.
   Pigment is the TONE token at an alpha, same mix as `.cui-pill--warn`. */
.cui-status__item--warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--warn) 34%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

button.cui-status__item--warn:hover {
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn);
}

.cui-status__item--bad {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--danger) 34%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

button.cui-status__item--bad:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

/* The avatar is a round control, so it is `lg--icon` in the same material.
   All that is left here is the typography of the initials and the fact that
   they are not text you select. Size, ground, rim and hand: the drop. */
.cui-avatar {
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-soft);
  user-select: none;
}

.cui-table tr[tabindex='0'] {
  cursor: pointer;
}

.cui-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--chrome);
}

.cui-switcher__item {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--type-xs);
  font-weight: 600;
  height: 26px;
  padding: 0 var(--space-3);
  max-width: 24ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.cui-switcher__item:hover:not(.cui-switcher__item--active):not(:disabled) {
  background: var(--field-tint);
  color: var(--ink);
}

.cui-switcher__item:active:not(:disabled) {
  background: var(--ink-pressed);
}

.cui-switcher__item--active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}

.cui-switcher__item:disabled,
.cui-switcher__item[aria-disabled='true'] {
  opacity: var(--disabled-alpha);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.cui-switcher__item:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 0;
}

[data-theme='dark'] .cui-switcher__item--active {
  background: color-mix(in srgb, var(--ink) 8%, var(--chrome));
}

.cui-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}

.cui-tabs__tab {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--type-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.cui-tabs__tab:hover:not(.cui-tabs__tab--active):not(:disabled) {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
}

[data-theme='dark'] .cui-tabs__tab:disabled {
  opacity: 0.42;
}

.cui-tabs__tab--active {
  color: var(--ink);
  border-bottom-color: var(--cta);
}

.cui-tabs__tab:disabled {
  opacity: var(--disabled-alpha);
  cursor: not-allowed;
}

.cui-tabs__tab:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: -2px;
}

/*
  Pills are a grooved TRACK, not a row of chips. Same family as `.cui-pill`
  (inset 0.5px rim, color-mix, no backdrop-filter) and the same body as
  ThemeToggle / Topbar nav: `attachLiquidThumb` inserts the silhouette, so
  a tab that also paints `--chrome` is a second body on the selected one.
*/
.cui-tabs--pills {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: 2px;
  border-bottom: 0;
  flex-wrap: wrap;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 16%, transparent),
    inset 0 0.5px 0 0.5px var(--glass-spec-top),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

.cui-tabs--pills .cui-tabs__tab {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-pill);
  background: none;
  padding: 8px 14px;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: none;
}

.cui-tabs--pills .cui-tabs__tab:hover:not(.cui-tabs__tab--active):not(:disabled) {
  background: none;
  box-shadow: none;
  color: var(--ink);
}

.cui-tabs--pills .cui-tabs__tab--active {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink);
}

.cui-field {
  display: grid;
  gap: var(--space-1);
}

.cui-field__label {
  font-size: var(--type-xs);
  font-weight: 650;
  color: var(--ink-mid);
}

.cui-field__hint,
.cui-field__error {
  margin: 0;
  font-size: var(--type-xs);
  color: var(--ink-faint);
}

.cui-field__error {
  color: var(--danger);
}

/*
  Recessed well — Field descendants AND the Input/Textarea/Select classes, so
  the paint works outside Field. Select belongs in the error rule: a red
  wrapper around a grey native control is a lie.

  AND IT IS NOW ACTUALLY RECESSED. This said "recessed well" over a flat box —
  `background: var(--field)` plus a 1px border, zero insets — so beside the
  glass pills and the status chips it read as a grey rectangle, and the guard
  named "carries the well class" asserted the CLASS, never the paint.

  The physics is the mirror of every raised body in this kit, and the kit
  already speaks it: `lgt--etch` presses letters in with a dark bite along the
  top of the stroke and a lit lip below. A hole is that, at box scale — bite
  under the top edge, lit lower lip, and NO drop shadow, because a hole does
  not cast one.

  The rim is an inset hairline and not a 1px border, for the reason the status
  chip already carries: a border changes geometry, so a state that swaps it
  moves the control by a pixel. `box-sizing: border-box` is set below, so
  dropping the border keeps the 36px and gives the text the 2px back.
*/
.cui-field__control input,
.cui-field__control textarea,
.cui-field__control select,
.cui-input,
.cui-textarea,
.cui-select {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow:
    inset 0 0 0 0.5px var(--border-strong),
    inset 0 1.5px 2px var(--field-sink),
    inset 0 -0.5px 0 var(--field-lip);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-sm);
}

.cui-input,
.cui-textarea,
.cui-select {
  box-sizing: border-box;
}

.cui-textarea {
  resize: vertical;
}

.cui-select,
.cui-field__control select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-mid) 50%),
    linear-gradient(-45deg, var(--ink-mid) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 1px),
    calc(100% - 13px) calc(50% - 1px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.cui-input--sm,
.cui-select--sm {
  min-height: var(--control-h);
  height: var(--control-h);
  padding-top: 4px;
  padding-bottom: 4px;
}

.cui-field--error .cui-field__control input,
.cui-field--error .cui-field__control textarea,
.cui-field--error .cui-field__control select,
.cui-input[aria-invalid='true'],
.cui-textarea[aria-invalid='true'],
.cui-select[aria-invalid='true'] {
  /*
    The rim moved from `border` to an inset, so the error had to move with it:
    `border-color` on a border-0 box paints NOTHING, and this would have gone
    silently invisible. Two rings, not one — the danger hairline plus a soft
    halo, so the state survives on the dotted ground where a 0.5px line alone
    is easy to miss. The sink stays: it is still a hole, just an angry one.
  */
  box-shadow:
    inset 0 0 0 1px var(--danger),
    inset 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent),
    inset 0 1.5px 2px var(--field-sink);
}

.cui-input:disabled,
.cui-textarea:disabled,
.cui-select:disabled {
  opacity: var(--disabled-alpha);
  cursor: not-allowed;
}

.cui-input:focus-visible,
.cui-textarea:focus-visible,
.cui-select:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

/*
  THE THEME TOGGLE IS A TINY SKY. Founder 2026-09-02: «це має бути тогл ... там
  ж і місяць і ніч і має бути класно». Two icons in a grey groove is a
  segmented control that happens to hold a sun; the ground now says DAY on the
  left and NIGHT on the right, which does the affordance work AND gives the
  travelling body something real to refract.
*/
/*
  The SECOND control with the same geometry, and it was one measurement away
  from being missed. Same day, same instrument: two stations 32px apart in a
  70px track, so the reach takes the mass from 46% to 75% of the groove — the
  toggle's 44% -> 81% one size up. Off here too.

  Nothing replaces it, unlike on `.cui-toggle`: this control already says
  where a click lands, with a sun and a moon and a per-side highlight on
  `.lgdg::before` / `::after` further down this file. The reach was pure
  excess on top of an affordance that was already there.
*/
.cui-theme-toggle {
  --thumb-reach: 0;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.26),
    rgba(251, 191, 36, 0.06) 40%,
    rgba(30, 41, 59, 0.12) 60%,
    rgba(30, 41, 59, 0.44)
  );
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* two stars, in the night half only — the cheapest thing that makes a ground
   read as a sky rather than as a darker end of a gradient */
.cui-theme-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 32%, rgba(255, 255, 255, 0.85) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 88% 64%, rgba(255, 255, 255, 0.6) 0 0.6px, transparent 1.2px);
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease);
}
.cui-theme-toggle[data-side='dark']::after {
  opacity: 1;
}

[data-theme='dark'] .cui-theme-toggle {
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.2),
    rgba(251, 191, 36, 0.04) 40%,
    rgba(2, 6, 16, 0.35) 60%,
    rgba(2, 6, 16, 0.6)
  );
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

/* the body takes the colour of the sky it is standing in */
.cui-theme-toggle[data-side='light'] .lgdg {
  background: rgba(245, 158, 11, 0.5);
}
.cui-theme-toggle[data-side='dark'] .lgdg {
  background: rgba(49, 46, 129, 0.56);
}

/*
  THE BODY ANSWERS BEFORE THE CLICK. Founder 2026-09-02: «коли ми ховеримо на
  світлу тему або на темну треба щоб потрошки зявлявся засвіт або затемнення
  самої бульки з тої сторони». Dawn bleeds in from the sun edge, night pools
  in from the moon edge — a preview of the choice, on the mass itself.

  Two layers rather than one whose gradient swaps: `background-image` is not
  animatable, so a single layer would cut from warm to cold the moment the
  hand crossed the middle. Each side fades on its own opacity instead, and
  sliding across reads as one washing out under the other.

  They live on `.lgdg` because that layer already carries the silhouette mask
  — a wash on the wrapper would be a rectangle. The drop arm's own
  `.lgdg::after` (the `processing` band) never lands here: a theme toggle is
  not a `lgw--drop`, so the two cannot collide.
*/
.cui-theme-toggle .lgdg::before,
.cui-theme-toggle .lgdg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.cui-theme-toggle .lgdg::before {
  background: linear-gradient(
    90deg,
    rgba(255, 244, 214, 0.85),
    rgba(255, 236, 179, 0.28) 46%,
    rgba(255, 236, 179, 0) 78%
  );
}
.cui-theme-toggle .lgdg::after {
  background: linear-gradient(
    270deg,
    rgba(2, 6, 23, 0.62),
    rgba(2, 6, 23, 0.22) 46%,
    rgba(2, 6, 23, 0) 78%
  );
}
.cui-theme-toggle:has([data-theme-set='light']:hover) .lgdg::before {
  opacity: 1;
}
.cui-theme-toggle:has([data-theme-set='dark']:hover) .lgdg::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cui-theme-toggle .lgdg::before,
  .cui-theme-toggle .lgdg::after {
    transition: none;
  }
}

/* THE SUN OPENS. Rays are the difference between a disc and a sun, so they
   retract when the sun is not the one selected — the icon itself carries the
   state, not only the body under it. */
.cui-theme-toggle .cui-sun-rays {
  transform-origin: 12px 12px;
  transform: scale(0.45) rotate(-35deg);
  opacity: 0;
  transition:
    transform 320ms var(--ease),
    opacity 220ms var(--ease);
}
.cui-theme-toggle [aria-pressed='true'] .cui-sun-rays {
  transform: none;
  opacity: 1;
}
/* and the moon lights up rather than merely changing colour */
.cui-theme-toggle [data-theme-set='dark'] svg {
  transition: filter var(--dur) var(--ease);
}
.cui-theme-toggle [data-theme-set='dark'][aria-pressed='true'] svg {
  filter: drop-shadow(0 0 4px rgba(224, 231, 255, 0.75));
}

@media (prefers-reduced-motion: reduce) {
  .cui-theme-toggle .cui-sun-rays {
    transition: none;
  }
}

/* Same segmented idea as the topbar nav, and the same one travelling body. */
.cui-theme-toggle [data-theme-set] {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  /* `--ink-faint` disappeared against the warm/night ground — a retracted sun
     read as a stray `o`. The unselected icon is an affordance, not a whisper. */
  color: var(--ink-soft);
  background: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.cui-theme-toggle [data-theme-set]:hover {
  color: var(--ink);
}

.cui-theme-toggle [data-theme-set][aria-pressed='true'] {
  color: var(--on-fill);
}

.cui-theme-toggle [data-theme-set]:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.cui-theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 var(--control-px);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--type-sm);
  font-weight: 550;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.cui-btn:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.cui-btn--primary:focus-visible {
  outline-color: var(--ink);
  box-shadow: 0 0 0 2px var(--field);
}

.cui-btn--teal:focus-visible {
  outline-color: var(--accent-strong);
}

.cui-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: var(--type-xs);
}

.cui-btn--md {
  height: 36px;
}

.cui-btn:disabled,
.cui-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}

[data-theme='dark'] .cui-btn:disabled,
[data-theme='dark'] .cui-btn[aria-disabled='true'] {
  opacity: 0.42;
}

.cui-btn--primary {
  background: var(--cta-strong);
  color: var(--on-fill);
}

.cui-btn--primary:hover:not(:disabled):not([aria-disabled='true']),
.cui-btn--primary.cui-force-hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--cta-strong) 92%, var(--ink));
  box-shadow: var(--shadow-md);
}

.cui-btn--primary:active:not(:disabled):not([aria-disabled='true']),
.cui-btn--primary.cui-force-active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--cta-strong) 82%, var(--ink));
  box-shadow: none;
}

.cui-btn--primary:disabled,
.cui-btn--primary[aria-disabled='true'] {
  opacity: 1;
  background: color-mix(in srgb, var(--cta-strong) 12%, var(--surface));
  color: color-mix(in srgb, var(--ink) 52%, var(--surface));
  border-color: var(--border);
}

[data-theme='dark'] .cui-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--cta-strong) 82%, var(--field));
}

[data-theme='dark'] .cui-btn--primary:active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--cta-strong) 72%, var(--field));
}

[data-theme='dark'] .cui-btn--primary:disabled,
[data-theme='dark'] .cui-btn--primary[aria-disabled='true'] {
  opacity: 1;
  background: color-mix(in srgb, var(--cta-strong) 38%, var(--surface));
  color: color-mix(in srgb, var(--on-fill) 55%, var(--ink-faint));
  border-color: transparent;
}

.cui-btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-soft);
}

.cui-btn--ghost:hover:not(:disabled):not([aria-disabled='true']),
.cui-btn--ghost.cui-force-hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.cui-btn--ghost:active:not(:disabled):not([aria-disabled='true']),
.cui-btn--ghost.cui-force-active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: none;
}

.cui-btn--ghost:disabled,
.cui-btn--ghost[aria-disabled='true'] {
  opacity: 0.55;
  border-color: var(--border);
  color: var(--ink-faint);
}

.cui-btn--ghost:empty {
  min-width: 32px;
  padding: 0;
}

[data-theme='dark'] .cui-btn--ghost {
  border-color: var(--border-strong);
  color: var(--ink-soft);
}

[data-theme='dark'] .cui-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--ink) 24%, var(--border-strong));
  color: var(--ink);
}

[data-theme='dark'] .cui-btn--ghost:active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--ink) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--ink) 34%, var(--border-strong));
  color: var(--ink);
}

[data-theme='dark'] .cui-btn--ghost:disabled,
[data-theme='dark'] .cui-btn--ghost[aria-disabled='true'] {
  opacity: 0.4;
  border-color: var(--border);
  color: var(--ink-faint);
}

.cui-btn--teal {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-strong);
}

.cui-btn--teal:hover:not(:disabled):not([aria-disabled='true']),
.cui-btn--teal.cui-force-hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: var(--shadow-sm);
}

.cui-btn--teal:active:not(:disabled):not([aria-disabled='true']),
.cui-btn--teal.cui-force-active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  box-shadow: none;
}

.cui-btn--teal:disabled,
.cui-btn--teal[aria-disabled='true'] {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink-faint);
}

.cui-btn--teal:empty {
  min-width: 32px;
  padding: 0;
}

[data-theme='dark'] .cui-btn--teal {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-strong);
}

[data-theme='dark'] .cui-btn--teal:hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

[data-theme='dark'] .cui-btn--teal:active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}

[data-theme='dark'] .cui-btn--teal:disabled,
[data-theme='dark'] .cui-btn--teal[aria-disabled='true'] {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: color-mix(in srgb, var(--accent-strong) 58%, var(--ink-faint));
  border-color: var(--border);
}

.cui-btn--icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  color: var(--ink-faint);
  border-color: transparent;
}

.cui-btn--icon.cui-btn--md {
  width: 36px;
  height: 36px;
  min-width: 36px;
}

.cui-btn--icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cui-btn--icon:hover:not(:disabled):not([aria-disabled='true']),
.cui-btn--icon.cui-force-hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: var(--border-strong);
  color: var(--ink);
}

.cui-btn--icon:active:not(:disabled):not([aria-disabled='true']),
.cui-btn--icon.cui-force-active:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
}

.cui-btn--icon:disabled,
.cui-btn--icon[aria-disabled='true'] {
  opacity: 0.4;
  background: none;
  color: var(--ink-faint);
}

.cui-btn--icon:empty {
  display: none;
}

[data-theme='dark'] .cui-btn--icon {
  color: var(--ink-soft);
}

[data-theme='dark'] .cui-btn--icon:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: var(--border-strong);
}

[data-theme='dark'] .cui-btn--icon:active:not(:disabled):not([aria-disabled='true']) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: var(--border-strong);
}

[data-theme='dark'] .cui-btn--icon:disabled,
[data-theme='dark'] .cui-btn--icon[aria-disabled='true'] {
  opacity: 0.55;
  color: var(--ink-soft);
}

.cui-btn:disabled:focus-visible,
.cui-btn[aria-disabled='true']:focus-visible {
  outline: none;
  box-shadow: none;
}

.cui-rail-mount {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cui-rail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.cui-rail__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.cui-rail__label {
  margin: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--type-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-mid);
}

.cui-rail__group:first-child .cui-rail__label {
  margin-top: 2px;
}

.cui-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  font-size: var(--type-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
  text-align: left;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.cui-rail__item:hover:not(.cui-rail__item--active) {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.cui-rail__item:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: -2px;
}

.cui-rail__item--active {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.cui-rail__item--active::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent-strong);
}

.cui-rail__icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cui-rail__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cui-rail__item--active .cui-rail__icon svg {
  stroke: var(--accent-strong);
}

.cui-rail--compact .cui-rail__label {
  height: 1px;
  margin: 8px 12px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  background: var(--border);
}

.cui-rail--compact .cui-rail__item {
  justify-content: center;
  padding: 0;
}

.cui-rail--compact .cui-rail__item--active::before {
  display: none;
}

.cui-rail--compact .cui-rail__text {
  display: none;
}

.cui-ops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cui-ops-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.cui-ops-chip__k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.cui-ops-chip--warn .cui-ops-chip__k::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}

.cui-ops-chip__v {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.cui-ops-chip__d {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-faint);
}

.cui-ops-chip--claim {
  gap: 6px;
  border-color: var(--border-strong);
}

.cui-ops-chip--claim .cui-ops-chip__d {
  margin-top: 0;
}

.cui-ops-chip--claim .cui-btn {
  margin-top: auto;
  width: 100%;
}

.cui-story-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cui-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius);
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.cui-story__hit {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cui-story__hit:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.cui-story:hover {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  border-color: var(--border-strong);
}

.cui-story:active {
  background: color-mix(in srgb, var(--ink) 9%, var(--surface));
  border-color: var(--border-strong);
  box-shadow: none;
}

.cui-story--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}

[data-theme='dark'] .cui-story--disabled {
  opacity: 0.42;
}

.cui-story__mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: var(--chrome);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  display: grid;
  place-items: center;
}

.cui-story__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cui-story__detail {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cui-story__side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .cui-ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    The header REFLOWS to two rows, it does not compress. Measured at 375px
    before this existed: `grid-template-columns` resolved to `124.5px 0px
    124.5px` — the mid column collapsed to ZERO while the 190px nav track
    inside it kept its width and painted straight across the brand on one side
    and the actions on the other. A collapsed track is not a narrow track; the
    nav needs its own row or it needs to be gone.
  */
  .cui-app,
  .cui-app[data-state] {
    grid-template-rows: auto 1fr;
  }

  .cui-topbar,
  .cui-topbar--nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .cui-topbar__mid {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  /* with no nav there is no second row to hold open */
  .cui-topbar:not(.cui-topbar--nav) {
    grid-template-rows: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .cui-topbar:not(.cui-topbar--nav) .cui-topbar__mid {
    display: none;
  }

  /* the count belongs to the desk, not to a 375px header */
  .cui-status {
    display: none;
  }

  /*
    Two location cues in a 375px bar is worse than one, and the selected tab
    already IS the location — so where a nav exists the breadcrumb goes. It
    stays wherever there is no nav, because then it is the only cue there is.
    (Measured before this: the breadcrumb kept its width, the product name
    truncated to "C…", and the last crumb was cut off anyway — the wrong half
    of the pair survived.)
  */
  .cui-topbar--nav .cui-breadcrumb {
    display: none;
  }
}

/* The product name is the identity: it gives way LAST. The breadcrumb is the
   shrinkable half of this pair. */
.cui-brand__hit {
  flex-shrink: 0;
}


/*
  Truncate, never overrun. The brand block is a row flex, so without an
  explicit `min-width: 0` on the shrinkable children the product name and the
  breadcrumb both refuse to shrink below their content and overlap instead —
  which is what the 375px measurement showed on top of the collapsed track.
*/
.cui-brand__text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cui-shell-body,
  .cui-app .cui-shell-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .cui-rail,
  .cui-rail-mount {
    display: none;
  }
  .cui-ops {
    grid-template-columns: 1fr;
  }
  .cui-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

[data-theme='dark'] .cui-table__row--selected td {
  background: color-mix(in srgb, var(--cta) 14%, var(--card));
}

[data-theme='dark'] .cui-table tbody tr.cui-table__row--interactive:not(.cui-table__row--selected):hover td {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

[data-theme='dark'] .cui-table__link[aria-disabled='true'] {
  opacity: 0.42;
}

[data-theme='dark'] .cui-empty:hover {
  border-color: var(--empty-border);
  background: rgba(148, 163, 184, 0.08);
}

[data-theme='dark'] .cui-rail__item--active {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}

[data-theme='dark'] .cui-ops-chip__k,
[data-theme='dark'] .cui-rail__label {
  color: var(--ink-faint);
}

.cui-table__link:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.cui-ops:empty {
  display: none;
}

.cui-ops-chip__flag {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cui-ops--empty {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.cui-ops__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  min-height: 52px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.cui-ops-chip--claim:focus-within {
  border-color: var(--border-strong);
}

:root:not([data-theme='dark']) .cui-ops-chip--warn,
[data-theme='light'] .cui-ops-chip--warn {
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}

[data-theme='dark'] .cui-ops-chip--warn {
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
}

/* ── Command-center primitives (V1 harvest) ──────────────────────── */

.cui-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.cui-card--tint {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.cui-card--console {
  background: color-mix(in srgb, #dbeafe 70%, var(--card));
  border-color: color-mix(in srgb, #93c5fd 45%, var(--border));
}

[data-theme='dark'] .cui-card--console {
  background: color-mix(in srgb, #1e3a5f 55%, var(--card));
  border-color: color-mix(in srgb, #3b82f6 28%, var(--border));
}

.cui-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 0;
}

.cui-card__titles {
  min-width: 0;
}

.cui-card__title {
  margin: 0;
  font-size: var(--type-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.cui-card__lede {
  margin: 6px 0 0;
  font-size: var(--type-sm);
  color: var(--ink-faint);
  line-height: var(--leading);
}

.cui-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cui-card__body {
  padding: 16px 20px 20px;
}

.cui-list-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.cui-list-row + .cui-list-row {
  margin-top: 10px;
}

.cui-list-row__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--chrome);
  color: var(--ink-soft);
}

.cui-list-row__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cui-list-row__body {
  flex: 1;
  min-width: 0;
}

.cui-list-row__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cui-list-row__title {
  font-size: var(--type-sm);
  font-weight: 650;
  color: var(--ink);
}

.cui-list-row__badges {
  display: inline-flex;
  gap: 6px;
}

.cui-list-row__desc {
  margin: 4px 0 0;
  font-size: var(--type-xs);
  color: var(--ink-faint);
  line-height: 1.45;
}

.cui-list-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/*
  ONE travelling liquid body, same arm as ThemeToggle / the topbar nav.
  `attachLiquidThumb` inserts `.lgds` / `.lgdg` / `svg.lgdr` as first
  children, so this needs a positioning context and its own stacking
  context — without `isolation` the glass composites against the page.
  There is no `.cui-toggle__thumb`: a painted disc next to the silhouette
  is two thumbs, and they fight.
*/
.cui-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  width: 40px;
  height: 22px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, var(--surface));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--dur) var(--ease);
  /*
    Founder, 2026-09-03: «зараз неінтуїтивно що треба клікати і якось занадто /
    може просто типу легенько в тусторону тогл направляється».

    The «занадто» is the REACH, and it is a scale problem rather than a taste
    one. Measured on this control the same day: stations sit 18px apart, so a
    reach tuned on the tab bar grows the mass from 17.8px to 32.3px inside a
    40px groove — 81% of the track, edge to edge in height. At that size it
    cannot read as one liquid stretching toward an option; it reads as the
    thumb inflating. Off here, kept on the wider arms (liquid.js ~2410).

    What stays is the LEAN, which is what he asked for and which already
    existed: 2.88px toward the hovered side, 16% of the travel.
  */
  --thumb-reach: 0;
}

/*
  Subtracting the reach also subtracts the only thing that said "this is
  clickable", and he complained about BOTH halves in one sentence. So the
  affordance moves off the mass and onto the GROOVE: the half you would send
  the switch to warms under the pointer. A track paint cannot inflate into a
  blob — that is the whole reason it is here rather than a second body.

  `z-index: -1` inside the toggle's own isolated stacking context puts it
  above the groove's background and below the travelling mass. A generated
  ::after is the LAST child in tree order, so at equal z it would paint over
  the glass; negative z is what keeps the hint underneath without touching
  the liquid layers, which are shared with three other arms.
*/
.cui-toggle::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  width: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 42%, transparent);
  opacity: 0;
  transition: opacity 160ms var(--ease), left 200ms var(--ease);
  left: 2px;
}

.cui-toggle:has([data-pad='on']:hover)::after {
  left: 20px;
  opacity: 1;
}

.cui-toggle:has([data-pad='off']:hover)::after {
  left: 2px;
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}

/* the hint promises a CHANGE, so it must not appear under the side the
   switch is already on — there it would promise nothing and read as noise */
.cui-toggle[aria-checked='true']:has([data-pad='on']:hover)::after,
.cui-toggle[aria-checked='false']:has([data-pad='off']:hover)::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cui-toggle::after {
    transition-duration: 1ms;
  }
}

.cui-toggle--on,
.cui-toggle[aria-checked='true'] {
  background: color-mix(in srgb, var(--ok) 38%, var(--surface));
}

.cui-toggle [data-thumb] {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
  background: none;
}

.cui-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cui-toggle:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.cui-tooltip {
  position: relative;
  display: inline-flex;
}

.cui-tooltip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

.cui-tooltip:hover .cui-tooltip__bubble,
.cui-tooltip:focus-within .cui-tooltip__bubble {
  opacity: 1;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cui-btn,
  .cui-toggle,
  .cui-theme-toggle [data-theme-set],
  .cui-rail__item,
  .cui-story,
  .cui-ops-chip .cui-btn {
    transition: none;
  }
  .cui-drawer-backdrop,
  .pill.pulse::before {
    animation: none;
  }
}