/* © 2026 Zac Leingang. Cando UI kit: one stylesheet for every Cando web app.
   Order: fonts, tokens (light, then dark), base, then one section per building block.
   Every class starts with cu-, so the kit can sit beside an app's own styles while the app moves over.
   Colours live only in the token block. Nothing here needs an inline style or a data URI. */

/* ---------- fonts: Rubik, SIL Open Font License 1.1, self-hosted (the fonts/ folder sits beside this file) ---------- */
@font-face{font-family:Rubik;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/rubik-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Rubik;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- tokens: light ---------- */
:root{
  color-scheme:light;
  --cu-font:Rubik,Arial,Helvetica,sans-serif;
  --cu-ease:cubic-bezier(.2,.8,.2,1);
  --cu-spring:cubic-bezier(.3,1.45,.5,1);
  --cu-r:22px;
  /* the blur behind cards: set to "none" here to turn it off everywhere */
  --cu-card-blur:blur(24px) saturate(160%);

  --cu-red:#D0202E;
  --cu-red-deep:#a81824;      /* filled red buttons, pressed */
  --cu-red-ink:#a81824;       /* text on a red tint, link hover on tinted rows */
  --cu-red-text:#c01c29;      /* red text on a page or card: a touch deeper than --cu-red so it reads at 4.5:1 on the page gradient */
  --cu-on-red:#fff;
  --cu-ink:#111214;
  --cu-muted:#58595B;
  --cu-mid:#A7A8AA;
  --cu-page:#f4f4f5;
  --cu-line:rgba(0,0,0,.09);
  --cu-hair:rgba(0,0,0,.18);
  --cu-card:rgba(255,255,255,.86);
  --cu-card-edge:#fff;
  --cu-lift:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.09);
  --cu-glow:rgba(208,32,46,.38);
  --cu-field:#fff;
  --cu-field-solid:#fff;      /* the same ground, opaque: for a control that sits over a picture */
  --cu-track:#EFEFEF;
  --cu-spin-track:rgba(128,128,128,.35);   /* the unfilled part of a spinner ring, on any ground */
  --cu-placeholder:#757575;
  --cu-control-edge:#77787b;  /* checkbox, radio and switch outlines */
  --cu-fill:#000;             /* checked boxes, progress fill */
  --cu-fill-ink:#fff;
  --cu-mask:#000;             /* only its transparency is used, for the edge fade */

  --cu-hover-sm:0 0 0 1px var(--cu-red),0 0 14px 2px var(--cu-glow);
  --cu-hover-lg:0 0 0 1px var(--cu-red),0 0 22px 2px var(--cu-glow),var(--cu-lift);

  --cu-page-from:#fafafa;
  --cu-page-to:#ececee;
  --cu-page-glow-a:rgba(208,32,46,.13);
  --cu-page-glow-b:rgba(0,0,0,.09);
  --cu-page-bg:radial-gradient(60vw 60vh at 100% 0%,var(--cu-page-glow-a),transparent 62%),radial-gradient(50vw 60vh at 0% 100%,var(--cu-page-glow-b),transparent 60%),linear-gradient(160deg,var(--cu-page-from),var(--cu-page-to));
  --cu-ground-bg:radial-gradient(60% 60% at 100% 0%,var(--cu-page-glow-a),transparent 62%),radial-gradient(50% 60% at 0% 100%,var(--cu-page-glow-b),transparent 60%),linear-gradient(160deg,var(--cu-page-from),var(--cu-page-to));

  /* the black top bar: black in both modes */
  --cu-bar-bg:#000;
  --cu-bar-ink:#fff;
  --cu-bar-nav-ink:#e7e7e8;
  --cu-bar-tint:rgba(255,255,255,.1);
  --cu-bar-hover:rgba(255,255,255,.12);
  --cu-bar-rule:rgba(255,255,255,.25);
  --cu-bar-edge:transparent;
  --cu-nav-on-bg:#fff;
  --cu-nav-on-ink:#000;

  --cu-btn-bg:#fff;
  --cu-dark-bg:#000;
  --cu-dark-ink:#fff;
  --cu-seg-ground:rgba(0,0,0,.07);
  --cu-seg-on-bg:#fff;
  --cu-seg-on-ink:#000;
  --cu-seg-shadow:0 1px 4px rgba(0,0,0,.14);

  --cu-chip-black-bg:#000;      --cu-chip-black-ink:#fff;
  --cu-chip-red-bg:#D0202E;     --cu-chip-red-ink:#fff;
  --cu-chip-grey-bg:#e6e6e8;    --cu-chip-grey-ink:#3b3c3f;
  --cu-chip-outline-bg:#fff;    --cu-chip-outline-ink:#000;    --cu-chip-outline-ring:#000;
  --cu-chip-soft-bg:rgba(0,0,0,.07);       --cu-chip-soft-ink:#2b2c2f;
  --cu-chip-pale-bg:rgba(208,32,46,.1);    --cu-chip-pale-ink:#a81824;

  --cu-row-hover:rgba(0,0,0,.03);
  --cu-row-selected:rgba(208,32,46,.1);
  --cu-menu:#fff;
  --cu-menu-hover:rgba(0,0,0,.05);
  --cu-menu-shadow:var(--cu-lift);
  --cu-scrim:rgba(0,0,0,.45);
  --cu-toast-bg:#000;
  --cu-toast-ink:#fff;
  --cu-toast-tint:rgba(255,255,255,.16);        /* buttons on the toast colours (selection bar) */
  --cu-toast-tint-hover:rgba(255,255,255,.28);
  --cu-toast-edge:rgba(255,255,255,.28);
  --cu-tip-bg:#fff;
  --cu-tip-ink:#111214;
  --cu-tip-shadow:0 4px 14px rgba(0,0,0,.3);

  --cu-avatar-bg:#000;
  --cu-avatar-grey:#58595B;
  --cu-avatar-light:#c9cacc;
  --cu-avatar-light-ink:#111214;
  --cu-avatar-ring:#fff;
  --cu-bar-avatar-ring:#fff;  /* the ring on the black bar stays white in both modes */
}

/* ---------- tokens: dark ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --cu-red-ink:#ff6b76;
  --cu-red-text:#ff6b76;
  --cu-ink:#f3f3f4;
  --cu-muted:#b6b7ba;
  --cu-page:#08080a;
  --cu-line:rgba(255,255,255,.16);
  --cu-hair:rgba(255,255,255,.22);
  --cu-card:rgba(26,26,29,.78);
  --cu-card-edge:rgba(255,255,255,.16);
  --cu-lift:0 1px 2px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.5);
  --cu-glow:rgba(208,32,46,.6);
  --cu-field:rgba(255,255,255,.06);
  --cu-field-solid:#232326;
  --cu-track:rgba(255,255,255,.1);
  --cu-placeholder:#9a9b9e;
  --cu-control-edge:#8d8e92;
  --cu-fill:#f3f3f4;
  --cu-fill-ink:#111214;

  --cu-page-from:#141416;
  --cu-page-to:#050506;
  --cu-page-glow-a:rgba(208,32,46,.3);
  --cu-page-glow-b:rgba(255,255,255,.05);

  --cu-bar-edge:rgba(255,255,255,.16);

  --cu-btn-bg:rgba(255,255,255,.06);
  --cu-dark-bg:#f3f3f4;
  --cu-dark-ink:#111214;
  --cu-seg-ground:rgba(255,255,255,.1);
  --cu-seg-on-bg:#f3f3f4;
  --cu-seg-on-ink:#111214;
  --cu-seg-shadow:0 1px 4px rgba(0,0,0,.4);

  --cu-chip-black-bg:#f3f3f4;   --cu-chip-black-ink:#111214;
  --cu-chip-grey-bg:rgba(255,255,255,.14); --cu-chip-grey-ink:#dcdcde;
  --cu-chip-outline-bg:transparent; --cu-chip-outline-ink:#f3f3f4; --cu-chip-outline-ring:#f3f3f4;
  --cu-chip-soft-bg:rgba(255,255,255,.1);  --cu-chip-soft-ink:#e7e7e8;
  --cu-chip-pale-bg:rgba(208,32,46,.24);   --cu-chip-pale-ink:#ff8a93;

  --cu-row-hover:rgba(255,255,255,.05);
  --cu-row-selected:rgba(208,32,46,.22);
  --cu-menu:#1a1a1d;
  --cu-menu-hover:rgba(255,255,255,.08);
  --cu-menu-shadow:0 0 0 1px rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.5);
  --cu-scrim:rgba(0,0,0,.6);
  --cu-toast-bg:#f3f3f4;
  --cu-toast-ink:#111214;
  --cu-toast-tint:rgba(17,18,20,.16);
  --cu-toast-tint-hover:rgba(17,18,20,.28);
  --cu-toast-edge:rgba(17,18,20,.28);

  --cu-avatar-bg:#3a3a3e;
  --cu-avatar-ring:#1a1a1d;   /* on a dark card the ring is the card's own colour, so the picture looks cut out */
}

/* ---------- base ---------- */
.cu-root,.cu-root *,[class*="cu-"],[class*="cu-"]::before,[class*="cu-"]::after{box-sizing:border-box}
.cu-root{margin:0;min-height:100vh;font:15px/1.5 var(--cu-font);color:var(--cu-ink);background:var(--cu-page);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.cu-root::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--cu-page-bg)}
.cu-ground{position:relative;background:var(--cu-ground-bg);color:var(--cu-ink)}
[class*="cu-"]:where(button,input,select,textarea){font:inherit;color:inherit}
[class*="cu-"][hidden]{display:none}
.cu-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* one keyboard focus style everywhere: 2px red outline, 2px offset */
[class*="cu-"]:focus{outline:none}
[class*="cu-"]:is(:focus-visible,.is-focus),.cu-root :focus-visible{outline:2px solid var(--cu-red);outline-offset:2px}

/* ---------- page frame and headings ---------- */
.cu-wrap{max-width:1480px;margin:0 auto;padding:0 28px}
.cu-page{padding-block:34px 70px}   /* block padding only, so cu-wrap's side padding survives on <main class="cu-wrap cu-page"> */
.cu-rise{animation:cu-rise .4s var(--cu-ease)}
@keyframes cu-rise{from{opacity:0;transform:translateY(12px)}}
.cu-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cu-h1{margin:0;font-size:34px;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:var(--cu-ink)}
.cu-h1::after{content:"";display:block;width:80px;height:3px;background:var(--cu-red);margin-top:10px;border-radius:2px}
.cu-h1--md{font-size:30px}
.cu-h1--sm{font-size:28px}
.cu-h1--step{font-size:34px}      /* steps down at 600px: --step to 30px (like --md), --step-sm to 28px */
.cu-h1--step-sm{font-size:34px}
@media (max-width:600px){.cu-h1--step{font-size:30px}.cu-h1--step-sm{font-size:28px}}
.cu-h1--plain::after{display:none}
.cu-sub{margin:8px 0 0;color:var(--cu-muted);font-size:14px}
.cu-h2{margin:0;font-size:17px;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--cu-ink)}
.cu-h2::before{content:"";width:3px;height:17px;background:var(--cu-red);border-radius:2px;flex:none}
.cu-lab{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cu-muted)}
.cu-muted{color:var(--cu-muted)}
.cu-link{color:var(--cu-red-text);text-decoration:none}
.cu-link:is(:hover,.is-hover){text-decoration:underline}
.cu-code{font-family:inherit;font-size:12px;background:var(--cu-track);padding:2px 7px;border-radius:6px;word-break:break-all}
.cu-ic{flex:none;vertical-align:-3px}

/* ---------- top bar ---------- */
.cu-top-host{display:contents}
.cu-top{position:sticky;top:0;z-index:20;background:var(--cu-bar-bg);color:var(--cu-bar-ink);box-shadow:inset 0 -1px 0 var(--cu-bar-edge);font:15px/1.5 var(--cu-font)}
.cu-top__wrap{max-width:1480px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:22px;height:76px}
.cu-top__logo-link{display:block;flex:none;border-radius:8px}
.cu-top__logo{height:56px;width:auto;display:block}
.cu-top__app{font-weight:500;font-size:18px;letter-spacing:.01em;padding-left:22px;border-left:1px solid var(--cu-bar-rule);white-space:nowrap}
.cu-nav{display:flex;gap:4px;margin-left:auto;padding:4px;border-radius:999px;background:var(--cu-bar-tint);min-width:0;overflow-x:auto;scrollbar-width:none}
.cu-nav::-webkit-scrollbar{display:none}
.cu-nav--fade-end{-webkit-mask-image:linear-gradient(90deg,var(--cu-mask) calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,var(--cu-mask) calc(100% - 26px),transparent)}
.cu-nav--fade-start{-webkit-mask-image:linear-gradient(270deg,var(--cu-mask) calc(100% - 26px),transparent);mask-image:linear-gradient(270deg,var(--cu-mask) calc(100% - 26px),transparent)}
.cu-nav--fade-start.cu-nav--fade-end{-webkit-mask-image:linear-gradient(90deg,transparent,var(--cu-mask) 26px,var(--cu-mask) calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,var(--cu-mask) 26px,var(--cu-mask) calc(100% - 26px),transparent)}
.cu-nav__item{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--cu-bar-nav-ink);font:inherit;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.cu-nav__item:is(:hover,.is-hover){background:var(--cu-bar-hover)}
.cu-nav__item[aria-current=page]{background:var(--cu-nav-on-bg);color:var(--cu-nav-on-ink)}
.cu-nav__item--icon{padding:0 12px}
.cu-top__actions{display:flex;gap:8px;align-items:center}
/* with no tabs, the first group after the name still sits at the right */
.cu-top__logo-link+.cu-top__actions,.cu-top__app+.cu-top__actions,.cu-top__logo-link+.cu-top__end,.cu-top__app+.cu-top__end{margin-left:auto}
.cu-top__action{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--cu-bar-rule);background:var(--cu-bar-tint);color:var(--cu-bar-ink);font:inherit;font-size:13px;font-weight:400;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s,box-shadow .2s,border-color .2s}
.cu-top__action:is(:hover,.is-hover){border-color:var(--cu-red);box-shadow:var(--cu-hover-sm)}
.cu-top__action--icon{width:32px;padding:0;justify-content:center}
.cu-top__end{display:flex;align-items:center;gap:14px}
.cu-top .cu-avatar{--cu-avatar-ring:var(--cu-bar-avatar-ring)}

/* the account button and its menu */
.cu-me{display:flex;align-items:center;font-size:14px;white-space:nowrap;position:relative}
.cu-me__btn{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--cu-bar-ink);cursor:pointer;padding:4px;border-radius:999px;font:inherit;font-size:14px;transition:background-color .2s}
.cu-me__btn:is(:hover,.is-hover),.cu-me__btn[aria-expanded=true]{background:var(--cu-bar-hover)}
.cu-me__name{font-size:14px;font-weight:400}
.cu-me .cu-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30}
/* the account menu's open animation and closing state (switched on by the motion option; transform and opacity only) */
.cu-menu--motion{transform-origin:100% 0;animation:cu-menu-in .2s var(--cu-ease)}
.cu-menu--motion.cu-menu--closing{animation:cu-menu-out .15s var(--cu-ease) forwards;pointer-events:none}
@keyframes cu-menu-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes cu-menu-out{to{opacity:0;transform:translateY(-6px) scale(.97)}}

/* the light / dark toggle: three round parts in one pill */
.cu-toggle{display:inline-flex;height:28px;padding:2px;gap:2px;border-radius:999px;background:var(--cu-bar-tint)}
.cu-toggle__part{position:relative;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--cu-bar-nav-ink);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.cu-toggle__part:is(:hover,.is-hover){box-shadow:var(--cu-hover-sm)}
.cu-toggle__part[aria-pressed=true]{background:var(--cu-nav-on-bg);color:var(--cu-nav-on-ink)}
/* on a light (or dark) page instead of the black bar: the colours follow the page's mode (mountThemeToggle uses this by default) */
.cu-toggle--on-light{background:var(--cu-seg-ground)}
.cu-toggle--on-light .cu-toggle__part{color:var(--cu-muted)}
.cu-toggle--on-light .cu-toggle__part:is(:hover,.is-hover){color:var(--cu-ink)}
.cu-toggle--on-light .cu-toggle__part[aria-pressed=true]{background:var(--cu-seg-on-bg);color:var(--cu-seg-on-ink);box-shadow:var(--cu-seg-shadow)}
.cu-toggle--on-light .cu-toggle__part[aria-pressed=true]:is(:hover,.is-hover){box-shadow:var(--cu-seg-shadow),var(--cu-hover-sm)}
/* a finger: each part gets a 40px hit area, the drawn size stays 24px */
@media (pointer:coarse){
  .cu-toggle__part::before{content:"";position:absolute;inset:-8px}
}

/* a small tooltip from data-tip, for controls that have no visible text */
.cu-tip,:where([data-tip]){position:relative}
.cu-tip::after,[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--cu-tip-bg);color:var(--cu-tip-ink);font-size:12px;font-weight:500;line-height:1.5;padding:4px 9px;border-radius:8px;white-space:nowrap;box-shadow:var(--cu-tip-shadow);z-index:40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s}
.cu-tip:is(:hover,:focus-visible,.is-hover,.is-focus)::after{opacity:1;visibility:visible}
/* a tooltip on any element: not drawn at all until shown, so it never widens the page */
[data-tip]:not(.cu-tip)::after{display:none;opacity:1;visibility:visible;transition:none}
[data-tip]:not(.cu-tip):is(:hover,:focus-visible,.is-hover,.is-focus)::after{display:block;animation:cu-fade .15s}
[data-tip=""]::after{display:none}
[data-tip-pos=top]::after{top:auto;bottom:calc(100% + 8px)}
[data-tip-pos=right]::after{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}
[data-tip-pos=left]::after{top:50%;left:auto;right:calc(100% + 8px);transform:translateY(-50%)}

/* the same bar at smaller widths (the Tracker's own steps: name at 1100, labels at 900, phone at 560) */
.cu-menu__item.cu-menu__item--phone,.cu-menu__sep--phone{display:none}
@media (max-width:1100px){
  .cu-top__app,.cu-me__name{display:none}
}
@media (max-width:900px){
  .cu-nav__label{display:none}
  .cu-nav__item{padding:0 12px}
}
@media (max-width:560px){
  .cu-top__wrap{gap:8px;padding:0 10px}
  .cu-top__logo{height:38px}
  .cu-nav{padding:3px;gap:0}
  .cu-nav__item{height:34px;padding:0 8px}
  .cu-nav__item:is(:focus-visible,.is-focus){outline-offset:-2px}
  .cu-top__end{gap:8px}
  .cu-me__btn{padding:0}
  .cu-top__actions{display:none}
  .cu-menu__item.cu-menu__item--phone{display:flex}
  .cu-menu__sep--phone{display:block}
  /* with no account menu the actions have nowhere to go: they stay on the bar as icon buttons */
  .cu-top:not(:has(.cu-me)) .cu-top__actions{display:flex;gap:6px}
  .cu-top:not(:has(.cu-me)) .cu-top__action:has(.cu-ic){width:32px;padding:0;gap:0;font-size:0;justify-content:center}
}

/* ---------- the optional sliding indicator (data-indicator + enhance(), or the bar's indicator option) ----------
   The current item's own fill is handed to a mark that slides to it (transform only). */
.cu-ind{position:relative}
.cu-ind__mark{position:absolute;left:0;top:0;border-radius:999px;pointer-events:none;z-index:0;transform-origin:0 0;background:var(--cu-seg-on-bg);box-shadow:var(--cu-seg-shadow)}
.cu-ind__mark--anim{transition:transform .32s var(--cu-spring)}
.cu-ind>:not(.cu-ind__mark){position:relative;z-index:1}
.cu-nav.cu-ind .cu-ind__mark{background:var(--cu-nav-on-bg);box-shadow:none}
.cu-nav.cu-ind .cu-nav__item[aria-current=page]{background:none}
.cu-seg.cu-ind .cu-seg__item:is([aria-pressed=true],.is-on),.cu-tabs.cu-ind .cu-tabs__item:is([aria-selected=true],[aria-current=page],.is-on){background:none;box-shadow:none}

/* ---------- buttons ---------- */
.cu-btn{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--cu-line);background:var(--cu-btn-bg);color:var(--cu-ink);font:inherit;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;transition:transform .2s var(--cu-spring),background-color .2s,border-color .2s,box-shadow .2s}
.cu-btn:is(:hover,.is-hover){transform:scale(1.03);border-color:var(--cu-red);box-shadow:var(--cu-hover-sm)}
.cu-btn:is(:active,.is-active){transform:scale(.98)}
.cu-btn--red{background:var(--cu-red);border-color:var(--cu-red);color:var(--cu-on-red)}
.cu-btn--red:is(:hover,.is-hover){background:var(--cu-red-deep);border-color:var(--cu-red-deep);box-shadow:none}
.cu-btn--dark{background:var(--cu-dark-bg);border-color:var(--cu-dark-bg);color:var(--cu-dark-ink)}
.cu-btn--dark:is(:hover,.is-hover){border-color:var(--cu-red)}
.cu-btn--danger{border-color:var(--cu-red);color:var(--cu-red-text)}
.cu-btn--sm{height:32px;padding:0 13px;font-size:13px}
.cu-btn--icon{width:40px;padding:0}
.cu-btn--icon.cu-btn--sm{width:32px}
.cu-btn:disabled,.cu-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
/* waiting for the server: aria-busy="true" (or .cu-btn--busy) puts a small spinner, in the colour of the text, before the label */
.cu-btn:is([aria-busy=true],.cu-btn--busy){cursor:progress;pointer-events:none}
.cu-btn:is([aria-busy=true],.cu-btn--busy)::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--cu-spin-track);border-top-color:currentColor;animation:cu-spin .7s linear infinite}
.cu-btn--sm:is([aria-busy=true],.cu-btn--busy)::before{width:13px;height:13px}
.cu-btn--icon:is([aria-busy=true],.cu-btn--busy)>.cu-ic{display:none}
@keyframes cu-spin{to{transform:rotate(1turn)}}

/* ---------- segmented control and tabs: the same 40px pill ---------- */
.cu-seg,.cu-tabs{display:inline-flex;padding:4px;border-radius:999px;background:var(--cu-seg-ground);gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.cu-seg::-webkit-scrollbar,.cu-tabs::-webkit-scrollbar{display:none}
.cu-seg__item,.cu-tabs__item{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-weight:500;font-size:13px;color:var(--cu-muted);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .2s,color .2s}
.cu-seg__item:is(:hover,.is-hover),.cu-tabs__item:is(:hover,.is-hover){color:var(--cu-ink)}
.cu-seg__item:is([aria-pressed=true],.is-on),.cu-tabs__item:is([aria-selected=true],[aria-current=page],.is-on){background:var(--cu-seg-on-bg);color:var(--cu-seg-on-ink);box-shadow:var(--cu-seg-shadow)}
.cu-seg__item:disabled,.cu-tabs__item:disabled{opacity:.5;cursor:not-allowed}
/* tabs that scroll sideways inside their pill on a phone, with an edge fade where there is more (enhance() adds cu-fade-*) */
@media (max-width:560px){
  .cu-tabs--scroll{display:flex;width:100%;scroll-snap-type:x proximity}
  .cu-tabs--scroll .cu-tabs__item{scroll-snap-align:center}
}
.cu-tabs--scroll.cu-fade-end{-webkit-mask-image:linear-gradient(90deg,var(--cu-mask) calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,var(--cu-mask) calc(100% - 26px),transparent)}
.cu-tabs--scroll.cu-fade-start{-webkit-mask-image:linear-gradient(270deg,var(--cu-mask) calc(100% - 26px),transparent);mask-image:linear-gradient(270deg,var(--cu-mask) calc(100% - 26px),transparent)}
.cu-tabs--scroll.cu-fade-start.cu-fade-end{-webkit-mask-image:linear-gradient(90deg,transparent,var(--cu-mask) 26px,var(--cu-mask) calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,var(--cu-mask) 26px,var(--cu-mask) calc(100% - 26px),transparent)}

/* ---------- chips and status pills ---------- */
.cu-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;border:0;font:inherit;font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none;background:var(--cu-chip-soft-bg);color:var(--cu-chip-soft-ink)}
.cu-chip--black{background:var(--cu-chip-black-bg);color:var(--cu-chip-black-ink)}
.cu-chip--red{background:var(--cu-chip-red-bg);color:var(--cu-chip-red-ink)}
.cu-chip--grey{background:var(--cu-chip-grey-bg);color:var(--cu-chip-grey-ink)}
.cu-chip--outline{background:var(--cu-chip-outline-bg);color:var(--cu-chip-outline-ink);box-shadow:inset 0 0 0 1.5px var(--cu-chip-outline-ring)}
.cu-chip--soft{background:var(--cu-chip-soft-bg);color:var(--cu-chip-soft-ink)}
.cu-chip--pale{background:var(--cu-chip-pale-bg);color:var(--cu-chip-pale-ink)}
.cu-chip--btn{cursor:pointer;transition:box-shadow .2s}
.cu-chip--btn:is(:hover,.is-hover){box-shadow:var(--cu-hover-sm)}
.cu-chip--outline.cu-chip--btn:is(:hover,.is-hover){box-shadow:var(--cu-hover-sm),inset 0 0 0 1.5px var(--cu-chip-outline-ring)}
.cu-chip--btn[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--cu-ink)}
.cu-chip:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* the small dot that tells one record type from another without adding a colour family */
.cu-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--cu-ink)}
.cu-dot--red{background:var(--cu-red)}
.cu-dot--grey{background:var(--cu-muted)}
.cu-dot--mid{background:var(--cu-mid)}
.cu-dot--ring{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cu-ink)}
.cu-dot--ring-red{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cu-red)}
.cu-dot--sq{border-radius:2px}
.cu-dot--sq-red{border-radius:2px;background:var(--cu-red)}

/* a removable token (a chosen filter): the whole chip is the button; build it as <button class="cu-token"><span class="cu-token__label">Site: North</span><span class="cu-token__x">icon x</span></button> */
.cu-token{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 4px 0 10px;border-radius:12px;border:0;background:var(--cu-chip-soft-bg);color:var(--cu-chip-soft-ink);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:box-shadow .2s;animation:cu-pop .28s var(--cu-spring) backwards}
.cu-token:is(:hover,.is-hover){box-shadow:var(--cu-hover-sm)}
.cu-token__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cu-token__x{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-content:center;background:var(--cu-line)}
@keyframes cu-pop{from{opacity:0;transform:scale(.85)}}
@media (pointer:coarse){.cu-token{height:34px}}

/* ---------- fields ---------- */
.cu-field{display:grid;gap:6px;min-width:0}
.cu-field__label{font-size:12px;font-weight:600;color:var(--cu-muted)}
.cu-field__help{margin:0;font-size:13px;color:var(--cu-muted)}
.cu-field__error{margin:0;font-size:13px;color:var(--cu-red-text)}
.cu-input,.cu-select,.cu-textarea,.cu-search__input{border:1px solid var(--cu-line);background:var(--cu-field);color:var(--cu-ink);font:inherit;transition:border-color .2s,box-shadow .2s}
.cu-input,.cu-textarea{height:40px;border-radius:12px;padding:0 14px;width:100%;min-width:0}
.cu-textarea{height:auto;padding:10px 14px;min-height:76px;resize:vertical}
.cu-select{height:40px;border-radius:12px;padding:0 12px;max-width:100%}
.cu-search{position:relative;display:inline-flex;align-items:center}
.cu-search>.cu-ic{position:absolute;left:14px;color:var(--cu-muted);pointer-events:none}
.cu-search__input{height:40px;border-radius:999px;padding:0 16px 0 40px;min-width:240px;-webkit-appearance:none;appearance:none}
.cu-input:is(:hover,.is-hover),.cu-select:is(:hover,.is-hover),.cu-textarea:is(:hover,.is-hover),.cu-search__input:is(:hover,.is-hover){border-color:var(--cu-red);box-shadow:var(--cu-hover-sm)}
.cu-input::placeholder,.cu-textarea::placeholder,.cu-search__input::placeholder{color:var(--cu-placeholder);opacity:1}
.cu-input:is([aria-invalid=true],.is-invalid),.cu-select:is([aria-invalid=true],.is-invalid),.cu-textarea:is([aria-invalid=true],.is-invalid),.cu-search__input:is([aria-invalid=true],.is-invalid){border-color:var(--cu-red)}
.cu-input:disabled,.cu-select:disabled,.cu-textarea:disabled,.cu-search__input:disabled{opacity:.55;cursor:not-allowed;background:var(--cu-track);box-shadow:none;border-color:var(--cu-line)}
/* a control over a picture: the same look on an opaque ground (--cu-field-solid) */
:is(.cu-input,.cu-select,.cu-textarea,.cu-search__input,.cu-card).cu-solid:not(:disabled),.cu-btn.cu-solid:not(.cu-btn--red,.cu-btn--dark):not(:disabled){background:var(--cu-field-solid)}

/* checkbox, radio, switch: a label around a real input */
.cu-check{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.cu-check input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--cu-control-edge);background:var(--cu-field);cursor:pointer;display:grid;place-content:center;transition:border-color .2s,box-shadow .2s,background-color .2s}
.cu-check input[type=checkbox]{border-radius:7px}
.cu-check input[type=radio]{border-radius:50%}
.cu-check input:is(:hover,.is-hover){border-color:var(--cu-red);box-shadow:var(--cu-hover-sm)}
.cu-check input[type=checkbox]:checked{background:var(--cu-fill);border-color:var(--cu-fill)}
.cu-check input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:2px solid var(--cu-fill-ink);border-top:0;border-right:0;transform:rotate(-45deg);margin-top:-2px}
.cu-check input[type=radio]:checked{border-color:var(--cu-fill);background:radial-gradient(circle,var(--cu-fill) 0 40%,transparent 44%)}
.cu-check input[role=switch]{width:40px;height:24px;border-radius:999px;place-content:center start;padding:0 3px}
.cu-check input[role=switch]::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--cu-control-edge);transition:transform .2s var(--cu-ease),background-color .2s}
.cu-check input[role=switch]:checked{background:var(--cu-fill);border-color:var(--cu-fill)}
.cu-check input[role=switch]:checked::after{background:var(--cu-fill-ink);transform:translateX(16px)}
.cu-check input:is([aria-invalid=true],.is-invalid){border-color:var(--cu-red)}
.cu-check:has(input:disabled){opacity:.55;cursor:not-allowed}
.cu-check input:disabled{cursor:not-allowed;box-shadow:none}

/* ---------- cards and number tiles ---------- */
.cu-card{background:var(--cu-card);-webkit-backdrop-filter:var(--cu-card-blur);backdrop-filter:var(--cu-card-blur);border:1px solid var(--cu-card-edge);border-radius:var(--cu-r);box-shadow:var(--cu-lift);color:var(--cu-ink)}
.cu-card .cu-card{-webkit-backdrop-filter:none;backdrop-filter:none}   /* a card inside a card does not stack a second blur */
.cu-pad{padding:20px 22px}
.cu-card--link{cursor:pointer;text-decoration:none;font:inherit;text-align:left;transition:border-color .2s var(--cu-ease),box-shadow .2s var(--cu-ease)}
.cu-card--link:is(:hover,.is-hover){border-color:var(--cu-red);box-shadow:var(--cu-hover-lg)}
.cu-card:is([aria-selected=true],.is-selected){border-color:var(--cu-red);box-shadow:0 0 0 1px var(--cu-red),var(--cu-lift)}
.cu-kpi{position:relative;padding:18px 20px}
.cu-kpi .cu-lab{display:block}
.cu-kpi__icon{position:absolute;top:18px;right:18px;color:var(--cu-mid)}
.cu-kpi__value{display:block;font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cu-kpi__label{display:block;color:var(--cu-muted);font-size:13px;margin-top:4px}
.cu-kpi--alert .cu-kpi__value{color:var(--cu-red-text)}
.cu-kpi--alert .cu-kpi__icon{color:var(--cu-red-text)}

/* ---------- progress bar: a <progress class="cu-bar"> or a span with a fill ---------- */
.cu-bar{display:block;width:100%;height:8px;border:0;border-radius:4px;background:var(--cu-track);overflow:hidden;-webkit-appearance:none;appearance:none}
.cu-bar::-webkit-progress-bar{background:var(--cu-track)}
.cu-bar::-webkit-progress-value{background:var(--cu-fill);border-radius:4px;transition:width .6s var(--cu-ease)}
.cu-bar::-moz-progress-bar{background:var(--cu-fill);border-radius:4px}
.cu-bar--red::-webkit-progress-value{background:var(--cu-red)}
.cu-bar--red::-moz-progress-bar{background:var(--cu-red)}
.cu-bar__fill{display:block;height:100%;border-radius:4px;background:var(--cu-fill);transition:width .6s var(--cu-ease)}
.cu-bar--red .cu-bar__fill{background:var(--cu-red)}

/* ---------- tables ---------- */
.cu-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--cu-ink)}
.cu-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cu-muted);padding:14px 16px;border-bottom:1px solid var(--cu-line)}
.cu-table td{padding:13px 16px;border-bottom:1px solid var(--cu-line);vertical-align:middle;white-space:nowrap}
.cu-table tbody tr{transition:background-color .15s}
.cu-table tbody tr:is(:hover,.is-hover){background:var(--cu-row-hover)}
.cu-table tbody tr:last-child td{border-bottom:0}
.cu-table--click tbody tr{cursor:pointer}
.cu-table tbody tr:is([aria-selected=true],.is-selected){background:var(--cu-row-selected)}
.cu-table .cu-table__num{text-align:right;font-variant-numeric:tabular-nums}
/* a sortable column header: <th aria-sort="ascending|descending"><button class="cu-table__sort">Name<span class="cu-table__sort-ic">icon chevron-up</span></button></th> */
.cu-table__sort{display:flex;align-items:center;gap:6px;width:calc(100% + 32px);margin:-14px -16px;padding:14px 16px;border:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;transition:background-color .15s,color .15s}
.cu-table__sort:is(:hover,.is-hover){background:var(--cu-row-hover);color:var(--cu-ink)}
.cu-table__sort:focus-visible{outline-offset:-3px}
.cu-table__sort-ic{display:inline-flex;flex:none;width:12px;height:12px;opacity:0;color:var(--cu-ink);transition:opacity .18s,transform .28s var(--cu-spring)}
.cu-table__sort-ic .cu-ic{width:12px;height:12px;vertical-align:baseline}
.cu-table__sort:is(:hover,:focus-visible,.is-hover) .cu-table__sort-ic{opacity:.45}
.cu-table th:is([aria-sort=ascending],[aria-sort=descending]) .cu-table__sort-ic{opacity:1}
.cu-table th[aria-sort=descending] .cu-table__sort-ic{transform:rotate(180deg)}
.cu-table th.cu-table__num .cu-table__sort{justify-content:flex-end}
.cu-table-wrap{overflow-x:auto}
@media (max-width:900px){
  .cu-table--stack,.cu-table--stack thead,.cu-table--stack tbody,.cu-table--stack tr,.cu-table--stack th,.cu-table--stack td{display:block}
  .cu-table--stack thead{display:none}
  .cu-table--stack tr{padding:14px;border:1px solid var(--cu-line);border-radius:16px;margin-bottom:12px;background:var(--cu-field)}
  .cu-table--stack td{padding:6px 0;border:0;white-space:normal;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .cu-table--stack td::before{content:attr(data-label);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cu-muted);text-align:left}
}

/* ---------- dialogs and sheets (a native <dialog>) ---------- */
.cu-dialog{border:0;padding:0;background:transparent;color:var(--cu-ink);font:15px/1.5 var(--cu-font);width:480px;max-width:calc(100vw - 32px);border-radius:22px}
.cu-dialog::backdrop{background:var(--cu-scrim)}
.cu-dialog--md{width:600px}
.cu-dialog--lg{width:700px}
.cu-dialog--inline{position:static;margin:0;display:block}
.cu-dialog__box{background:var(--cu-menu);border-radius:22px;padding:24px;box-shadow:var(--cu-menu-shadow);max-height:calc(100vh - 64px);overflow:auto}
.cu-dialog__title{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:19px;font-weight:600;color:var(--cu-ink)}
.cu-dialog__title::before{content:"";width:3px;height:17px;background:var(--cu-red);border-radius:2px;flex:none}
.cu-dialog__body{color:var(--cu-muted);font-size:14px;margin:0 0 16px}
.cu-dialog__form{display:grid;gap:14px}
.cu-dialog__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cu-dialog__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
@media (max-width:600px){
  .cu-dialog__row{grid-template-columns:1fr}
  .cu-dialog--sheet{width:100vw;max-width:100vw;margin:auto 0 0}
  .cu-dialog--sheet .cu-dialog__box{border-radius:22px 22px 0 0}
}

/* ---------- menus ---------- */
.cu-menu{background:var(--cu-menu);color:var(--cu-ink);border-radius:16px;box-shadow:var(--cu-menu-shadow);min-width:210px;padding:6px;text-align:left;font:14px/1.5 var(--cu-font)}
.cu-menu__head{padding:8px 12px 6px;display:flex;flex-direction:column}
.cu-menu__name{font-size:14px;font-weight:500}
.cu-menu__role{font-size:12px;color:var(--cu-muted)}
.cu-menu__sep{height:1px;background:var(--cu-line);margin:6px 0}
.cu-menu__item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;border-radius:10px;font:inherit;font-size:14px;text-align:left;color:inherit;text-decoration:none;cursor:pointer}
.cu-menu__item:is(:hover,.is-hover){background:var(--cu-menu-hover)}
.cu-menu__item:disabled{opacity:.5;cursor:not-allowed}

/* ---------- toasts ---------- */
.cu-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;background:var(--cu-toast-bg);color:var(--cu-toast-ink);padding:10px 18px;border-radius:999px;font:500 13px/1.5 var(--cu-font);box-shadow:var(--cu-lift);max-width:calc(100vw - 40px);animation:cu-fade .2s var(--cu-ease)}
.cu-toast--error{background:var(--cu-red);color:var(--cu-on-red)}
.cu-toast--static{position:static;transform:none;display:inline-block}
@keyframes cu-fade{from{opacity:0}}

/* ---------- selection bar: fixed at the bottom while something is selected (.is-on shows it) ---------- */
.cu-selbar{position:fixed;left:50%;bottom:20px;z-index:55;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 24px);padding:8px 8px 8px 18px;border-radius:28px;color:var(--cu-toast-ink);font-size:14px;background:var(--cu-toast-bg);box-shadow:var(--cu-lift);transform:translate(-50%,calc(100% + 32px));opacity:0;visibility:hidden;transition:transform .42s var(--cu-spring),opacity .24s var(--cu-ease),visibility 0s .42s}
.cu-selbar.is-on{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}
.cu-selbar__count{font-weight:600;margin-right:6px;white-space:nowrap}
.cu-selbar .cu-btn{background:var(--cu-toast-tint);border-color:var(--cu-toast-edge);color:var(--cu-toast-ink);box-shadow:none}
.cu-selbar .cu-btn:is(:hover,.is-hover){background:var(--cu-toast-tint-hover);border-color:var(--cu-red);box-shadow:var(--cu-hover-sm)}
.cu-selbar .cu-btn--red{background:var(--cu-red);border-color:var(--cu-red);color:var(--cu-on-red)}
.cu-selbar .cu-btn--red:is(:hover,.is-hover){background:var(--cu-red-deep);border-color:var(--cu-red-deep);box-shadow:none}
.cu-selbar .cu-btn:focus-visible{outline-color:var(--cu-toast-ink)}
@media (pointer:coarse){.cu-selbar .cu-btn--sm{height:42px}}

/* ---------- drop zone (.is-over while a file is dragged over it) ---------- */
.cu-drop{border:2px dashed var(--cu-hair);border-radius:var(--cu-r);padding:26px 20px;text-align:center;color:var(--cu-ink);background:var(--cu-row-hover);transition:background-color .2s,border-color .2s,transform .28s var(--cu-spring)}
.cu-drop:is(.is-over,.is-hover){background:var(--cu-row-selected);border-color:var(--cu-red)}
.cu-drop.is-over{transform:scale(1.015)}
.cu-drop__title{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.cu-drop__text{margin:0;font-size:14px;color:var(--cu-muted)}
.cu-drop__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}

/* ---------- avatars ---------- */
.cu-avatar{--s:36px;position:relative;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:inline-grid;place-items:center;font-weight:600;font-size:calc(var(--s) * .36);line-height:1;color:var(--cu-on-red);background:var(--cu-avatar-bg);box-shadow:0 0 0 2px var(--cu-avatar-ring);overflow:visible}
.cu-avatar__img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.cu-avatar--grey{background:var(--cu-avatar-grey)}
.cu-avatar--red{background:var(--cu-red)}
.cu-avatar--light{background:var(--cu-avatar-light);color:var(--cu-avatar-light-ink)}
.cu-avatar--person .cu-ic{width:56%;height:56%;vertical-align:baseline}
.cu-avatar--26{--s:26px}.cu-avatar--28{--s:28px}.cu-avatar--30{--s:30px}.cu-avatar--34{--s:34px}.cu-avatar--38{--s:38px}
.cu-avatar--56{--s:56px}.cu-avatar--60{--s:60px}.cu-avatar--64{--s:64px}.cu-avatar--72{--s:72px}.cu-avatar--88{--s:88px}
.cu-avatar-stack{display:flex}
.cu-avatar-stack .cu-avatar{margin-left:-9px}
.cu-avatar-stack .cu-avatar:first-child{margin-left:0}

/* ---------- empty state ---------- */
.cu-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 24px;text-align:center;color:var(--cu-muted)}
.cu-empty__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cu-track);color:var(--cu-muted);margin-bottom:6px}
.cu-empty__title{margin:0;font-size:17px;font-weight:600;color:var(--cu-ink)}
.cu-empty__text{margin:0;font-size:14px;max-width:40ch}
.cu-empty--line{display:block;padding:8px 0;text-align:left}

/* ---------- reduced motion: stops the kit's own transitions and animations, listed here, and nothing else ----------
   An app's own motion on an element that happens to carry one of these classes (a .cu-card that slides in, say) is its own business.
   The busy spinner keeps turning: it tells the person something is happening. */
@media (prefers-reduced-motion:reduce){
  :is(.cu-rise,.cu-nav__item,.cu-top__action,.cu-me__btn,.cu-toggle__part,.cu-tip,.cu-btn,.cu-seg__item,.cu-tabs__item,.cu-chip--btn,.cu-token,
      .cu-input,.cu-select,.cu-textarea,.cu-search__input,.cu-check input,.cu-card--link,.cu-bar__fill,.cu-table tbody tr,.cu-table__sort,.cu-table__sort-ic,
      .cu-toast,.cu-selbar,.cu-drop):not(.cu-motion-always),
  :is(.cu-tip,.cu-check input)::after,[data-tip]::after{animation:none;transition:none}
  .cu-btn:is([aria-busy=true],.cu-btn--busy){transition:none}
  .cu-menu--motion:not(.cu-motion-always),.cu-ind__mark:not(.cu-motion-always){animation:none;transition:none}
  .cu-bar::-webkit-progress-value{transition:none}
}