/* ============================================================
   JUWEL x HeroUI — juwel-heroui.css (v1, 2026-07-27)
   Packet REV9-HEROUI-CORE-01. A hand-written vanilla port of the
   HeroUI (heroui.com) component API taxonomy — variant/color/size/
   radius + isDisabled/isLoading/isInvalid/startContent/endContent —
   carrying LUXLIQ motion instead of HeroUI's own (bounce is BANNED
   here; every mapped interaction below is grafted onto an EXISTING
   luxliq.css/luxliq-lamp.js primitive, never a new physics system).
   See juwel-heroui-tokens.json §heroui.motion.mapping for the full
   HeroUI-verb -> LuxLiq-verb table.

   Zero build step, by design (juwel-landing/package.json: "nothing
   else in this project needs a build step"). Plain <link>, no
   preprocessor, no PostCSS. Load order (this file depends on both):
     juwel-ds.css -> luxliq.css -> juwel-heroui.css
   JS companion juwel-heroui.js depends on luxliq-lamp.js the same
   way (soft dependency — degrades gracefully if absent).

   NOT a competing design system. Where an equivalent already existed
   in juwel-ds.css/luxliq.css, this file's class is a SUPERSET, not a
   parallel: .hu-btn is compatible with the existing .cbtn (91 call
   sites, untouched); .hu-card is compatible with .pane/.card;
   .hu-chip is compatible with .chip/.chip.signed. See the "UNIFIES"
   comment on each section. No existing selector is edited or broken.

   Naming: root classes are `.hu-*` (HeroUI-bridge) to avoid any
   collision with `.cbtn`/`.chip`/`.card`/etc. Axes are data-attributes
   matching HeroUI's own prop names in kebab case: data-variant,
   data-color, data-size, data-radius. Booleans deliberately reuse
   REAL semantics instead of inventing a parallel vocabulary:
     isDisabled -> native `disabled` (form controls) or
                   `aria-disabled="true"` (custom widgets) — CSS keys
                   off :where([disabled],[aria-disabled="true"])
     isLoading  -> aria-busy="true"
     isInvalid  -> aria-invalid="true"
   This means every component gets correct ARIA state for free AND
   the styling hook comes along with it — no separate data-* needed.

   Focus: no new focus ring anywhere in this file. Every interactive
   element below is either a real <button>/<a>/<input>/<select>/
   <textarea>, or carries role+tabindex, so juwel-ds.css's existing
   global fill-shift :focus-visible rule (T1-W1-RING 2026-07-25)
   already paints it correctly. Do not add a competing outline here.

   prefers-reduced-motion: every animated rule in this file has a
   collapse in the consolidated block at the bottom (§30). Components
   are written so the reduced path is opacity/instant only — never a
   transform, per the brand's existing convention.
   ============================================================ */

/* ============================================================
   §1 — TOKENS (mirrors juwel-heroui-tokens.json 1:1 — hand-kept in
   sync, same convention as juwel-design-tokens.json <-> juwel-ds.css).
   Every value is a var() reference to an EXISTING juwel-ds.css /
   luxliq.css primitive — no new hex color is introduced here. Because
   these are var() aliases (not literals), html[data-theme="dark"]'s
   existing redefinition of --ink/--surface-2/--jade/--topaz/etc. is
   inherited automatically — no separate dark block needed.
   ============================================================ */
:root{
  /* semantic color roles: base / foreground / soft / border / ink(text-safe) */
  --hu-default:var(--surface-2); --hu-default-fg:var(--ink); --hu-default-soft:var(--surface-2); --hu-default-border:var(--line); --hu-default-ink:var(--ink-2);
  --hu-primary:var(--ink); --hu-primary-fg:var(--paper); --hu-primary-soft:var(--surface-2); --hu-primary-border:var(--ink); --hu-primary-ink:var(--ink);
  --hu-secondary:var(--sapphire); --hu-secondary-fg:var(--accent-ink); --hu-secondary-soft:var(--sapphire-soft); --hu-secondary-border:var(--sapphire-deep); --hu-secondary-ink:var(--sapphire-ink);
  --hu-success:var(--jade); --hu-success-fg:var(--accent-ink); --hu-success-soft:var(--jade-soft); --hu-success-border:var(--jade-deep); --hu-success-ink:var(--jade-ink);
  --hu-warning:var(--topaz); --hu-warning-fg:var(--accent-ink); --hu-warning-soft:var(--topaz-soft); --hu-warning-border:var(--topaz-deep); --hu-warning-ink:var(--topaz-ink);
  --hu-danger:var(--garnet); --hu-danger-fg:var(--accent-ink); --hu-danger-soft:var(--garnet-soft); --hu-danger-border:var(--garnet-deep); --hu-danger-ink:var(--garnet-deep);
  /* radius scale */
  --hu-radius-none:0px; --hu-radius-sm:var(--r-sm); --hu-radius-md:var(--r-md); --hu-radius-lg:var(--r-lg); --hu-radius-full:var(--r-full);
  /* size scale (typography + block padding) */
  --hu-fs-sm:var(--fs-small); --hu-gy-sm:6px; --hu-gx-sm:10px; --hu-mh-sm:32px;
  --hu-fs-md:var(--fs-chrome); --hu-gy-md:9px; --hu-gx-md:16px; --hu-mh-md:40px;
  --hu-fs-lg:var(--fs-lede); --hu-gy-lg:12px; --hu-gx-lg:20px; --hu-mh-lg:48px;
  /* floating-surface pop (Dropdown/Popover/Tooltip/enhanced-Select) —
     same curve family as os.html's existing melt-open menu keyframes,
     reimplemented locally so this file has no cross-stylesheet
     dependency on juwel-chrome.css. */
  --hu-pop-dur:var(--visc-bead,.32s);
}

/* ============================================================
   §2 — BASE PLUMBING
   ============================================================ */
.hu-btn,.hu-link,.hu-input,.hu-textarea,.hu-select,.hu-chip,.hu-badge,
.hu-tab,.hu-crumb,.hu-page-item,.hu-dd-item,.hu-navbar,.hu-card{
  font-family:var(--ff);
}
:where(.hu-btn,.hu-link,.hu-chip,.hu-badge,.hu-tab,.hu-crumb,.hu-page-item,
  .hu-dd-item,.hu-checkbox-box,.hu-radio-dot,.hu-switch,.hu-avatar,
  .hu-card,.hu-alert,.hu-toast,.hu-input,.hu-textarea,.hu-select){
  box-sizing:border-box;
}
.hu-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── recipe engine: COLOR picks a tone into local vars once; every
   component that opts in (by appearing in this selector list) gets
   --hu-c/--hu-c-fg/--hu-c-soft/--hu-c-border/--hu-c-ink for free.
   Add a class here, not a new copy of six color rules, when a new
   component needs the standard tone set. ── */
:where(.hu-btn,.hu-btn-group,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,
  .hu-crumb,.hu-page-item,.hu-dd-item,.hu-checkbox,.hu-radio,.hu-switch,
  .hu-slider,.hu-progress,.hu-spinner,.hu-avatar,.hu-link,.hu-card,
  .hu-field){
  --hu-c:var(--hu-default); --hu-c-fg:var(--hu-default-fg); --hu-c-soft:var(--hu-default-soft);
  --hu-c-border:var(--hu-default-border); --hu-c-ink:var(--hu-default-ink);
}
:where(.hu-btn,.hu-btn-group,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,
  .hu-crumb,.hu-page-item,.hu-dd-item,.hu-checkbox,.hu-radio,.hu-switch,
  .hu-slider,.hu-progress,.hu-spinner,.hu-avatar,.hu-link,.hu-card,
  .hu-field)[data-color="primary"]{
  --hu-c:var(--hu-primary); --hu-c-fg:var(--hu-primary-fg); --hu-c-soft:var(--hu-primary-soft);
  --hu-c-border:var(--hu-primary-border); --hu-c-ink:var(--hu-primary-ink);
}
:where(.hu-btn,.hu-btn-group,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,
  .hu-crumb,.hu-page-item,.hu-dd-item,.hu-checkbox,.hu-radio,.hu-switch,
  .hu-slider,.hu-progress,.hu-spinner,.hu-avatar,.hu-link,.hu-card,
  .hu-field)[data-color="secondary"]{
  --hu-c:var(--hu-secondary); --hu-c-fg:var(--hu-secondary-fg); --hu-c-soft:var(--hu-secondary-soft);
  --hu-c-border:var(--hu-secondary-border); --hu-c-ink:var(--hu-secondary-ink);
}
:where(.hu-btn,.hu-btn-group,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,
  .hu-crumb,.hu-page-item,.hu-dd-item,.hu-checkbox,.hu-radio,.hu-switch,
  .hu-slider,.hu-progress,.hu-spinner,.hu-avatar,.hu-link,.hu-card,
  .hu-field)[data-color="success"]{
  --hu-c:var(--hu-success); --hu-c-fg:var(--hu-success-fg); --hu-c-soft:var(--hu-success-soft);
  --hu-c-border:var(--hu-success-border); --hu-c-ink:var(--hu-success-ink);
}
:where(.hu-btn,.hu-btn-group,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,
  .hu-crumb,.hu-page-item,.hu-dd-item,.hu-checkbox,.hu-radio,.hu-switch,
  .hu-slider,.hu-progress,.hu-spinner,.hu-avatar,.hu-link,.hu-card,
  .hu-field)[data-color="warning"]{
  --hu-c:var(--hu-warning); --hu-c-fg:var(--hu-warning-fg); --hu-c-soft:var(--hu-warning-soft);
  --hu-c-border:var(--hu-warning-border); --hu-c-ink:var(--hu-warning-ink);
}
:where(.hu-btn,.hu-btn-group,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,
  .hu-crumb,.hu-page-item,.hu-dd-item,.hu-checkbox,.hu-radio,.hu-switch,
  .hu-slider,.hu-progress,.hu-spinner,.hu-avatar,.hu-link,.hu-card,
  .hu-field)[data-color="danger"]{
  --hu-c:var(--hu-danger); --hu-c-fg:var(--hu-danger-fg); --hu-c-soft:var(--hu-danger-soft);
  --hu-c-border:var(--hu-danger-border); --hu-c-ink:var(--hu-danger-ink);
}

/* ── recipe engine: VARIANT reads --hu-c/etc set above. One set of
   7 rules, shared by every component with a variant axis. ── */
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="solid"]{
  background:var(--hu-c); color:var(--hu-c-fg); border-color:transparent;
}
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="bordered"]{
  background:transparent; color:var(--hu-c-ink); border:1px solid var(--hu-c-border);
}
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="light"]{
  background:color-mix(in srgb,var(--hu-c) 14%,var(--surface)); color:var(--hu-c-ink); border-color:transparent;
}
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="flat"],
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item):not([data-variant]){
  background:var(--hu-c-soft); color:var(--hu-c-ink); border-color:transparent;
}
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="faded"]{
  background:var(--surface-2); color:var(--hu-c-ink); border:1px solid var(--hu-c-border);
}
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="shadow"]{
  background:var(--hu-c); color:var(--hu-c-fg); border-color:transparent;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--hu-c) 45%,transparent),var(--shadow-1);
}
:where(.hu-btn,.hu-chip,.hu-badge,.hu-tab,.hu-alert,.hu-toast,.hu-crumb,
  .hu-page-item,.hu-dd-item)[data-variant="ghost"]{
  background:transparent; color:var(--hu-c-ink); border:1px solid var(--hu-c-border);
}
@media (hover:hover) and (pointer:fine){
  :where(.hu-btn,.hu-chip,.hu-crumb,.hu-page-item,.hu-dd-item)[data-variant="ghost"]:hover{
    background:var(--hu-c); color:var(--hu-c-fg);
  }
}
/* .hu-btn defaults to `solid` (its own visual identity, matching .cbtn),
   NOT the shared `flat` fallback above — the :not([data-variant]) rule
   intentionally excludes it via specificity order below (§7). */

/* ── radius axis: shared by every component with rounded corners ── */
:where(.hu-btn,.hu-chip,.hu-badge,.hu-card,.hu-input,.hu-textarea,.hu-select,
  .hu-modal-dialog,.hu-drawer-panel,.hu-dropdown-menu,.hu-popover,.hu-avatar,
  .hu-crumb,.hu-page-item)[data-radius="none"]{ border-radius:var(--hu-radius-none); }
:where(.hu-btn,.hu-chip,.hu-badge,.hu-card,.hu-input,.hu-textarea,.hu-select,
  .hu-modal-dialog,.hu-drawer-panel,.hu-dropdown-menu,.hu-popover,.hu-avatar,
  .hu-crumb,.hu-page-item)[data-radius="sm"]{ border-radius:var(--hu-radius-sm); }
:where(.hu-btn,.hu-chip,.hu-badge,.hu-card,.hu-input,.hu-textarea,.hu-select,
  .hu-modal-dialog,.hu-drawer-panel,.hu-dropdown-menu,.hu-popover,.hu-avatar,
  .hu-crumb,.hu-page-item)[data-radius="lg"]{ border-radius:var(--hu-radius-lg); }
:where(.hu-btn,.hu-chip,.hu-badge,.hu-card,.hu-input,.hu-textarea,.hu-select,
  .hu-modal-dialog,.hu-drawer-panel,.hu-dropdown-menu,.hu-popover,.hu-avatar,
  .hu-crumb,.hu-page-item)[data-radius="full"]{ border-radius:var(--hu-radius-full); }

/* ── size axis: typography + gap, shared by pill/text components ── */
:where(.hu-btn,.hu-chip,.hu-crumb,.hu-page-item)[data-size="sm"]{ font-size:var(--hu-fs-sm); }
:where(.hu-btn,.hu-chip,.hu-crumb,.hu-page-item):not([data-size]),
:where(.hu-btn,.hu-chip,.hu-crumb,.hu-page-item)[data-size="md"]{ font-size:var(--hu-fs-md); }
:where(.hu-btn,.hu-chip,.hu-crumb,.hu-page-item)[data-size="lg"]{ font-size:var(--hu-fs-lg); }

/* ── disabled + loading + invalid: real semantics, shared paint ── */
:where(.hu-btn,.hu-chip,.hu-input,.hu-textarea,.hu-select,.hu-checkbox,
  .hu-radio,.hu-switch,.hu-slider,.hu-tab,.hu-crumb,.hu-page-item,
  .hu-dd-item,.hu-link)[disabled],
:where(.hu-btn,.hu-chip,.hu-input,.hu-textarea,.hu-select,.hu-checkbox,
  .hu-radio,.hu-switch,.hu-slider,.hu-tab,.hu-crumb,.hu-page-item,
  .hu-dd-item,.hu-link)[aria-disabled="true"]{
  opacity:.46; cursor:not-allowed; pointer-events:none;
}
:where(.hu-btn)[aria-busy="true"]{ cursor:progress; pointer-events:none; }
:where(.hu-btn)[aria-busy="true"] .hu-btn-label{ opacity:.55; }
:where(.hu-input,.hu-textarea,.hu-select)[aria-invalid="true"]{
  border-color:var(--garnet-deep)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--garnet) 30%,transparent);
}

/* ============================================================
   §7 — BUTTON  (UNIFIES .cbtn juwel-ds.css — .hu-btn is a superset;
   `.cbtn.hu-btn` combines cleanly: .cbtn supplies proven geometry,
   .hu-btn supplies the variant/color recipe on top. Standalone
   .hu-btn (no .cbtn) carries the same geometry independently.)
   Motion: press = the SAME scale(.975) gel-compress .cbtn already
   uses — no new keyframe. Loading spinner collapses to a static
   pulsing ring under reduced motion (see §30).
   ============================================================ */
.hu-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; letter-spacing:-.01em; text-decoration:none; border:1px solid transparent;
  cursor:pointer; user-select:none; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  border-radius:var(--hu-radius-md);
  padding:var(--hu-gy-md) var(--hu-gx-md); min-height:var(--hu-mh-md);
  transition:transform var(--dur-1) var(--ease-out),background-color .18s ease,
    border-color .18s ease,color .18s ease,box-shadow var(--dur-2) var(--ease-out);
}
.hu-btn:not([data-variant]){ background:var(--hu-c); color:var(--hu-c-fg); border-color:transparent; } /* default = solid */
.hu-btn:active:not([disabled]):not([aria-disabled="true"]){ transform:scale(.975); } /* gel compress, never bounce */
.hu-btn[data-size="sm"]{ padding:var(--hu-gy-sm) var(--hu-gx-sm); min-height:var(--hu-mh-sm); gap:6px; }
.hu-btn[data-size="lg"]{ padding:var(--hu-gy-lg) var(--hu-gx-lg); min-height:var(--hu-mh-lg); gap:10px; }
.hu-btn[data-full-width]{ display:flex; width:100%; }
.hu-btn[data-icon-only]{ padding:0; width:var(--hu-mh-md); aspect-ratio:1; }
.hu-btn[data-icon-only][data-size="sm"]{ width:var(--hu-mh-sm); }
.hu-btn[data-icon-only][data-size="lg"]{ width:var(--hu-mh-lg); }
.hu-btn > svg{ width:1.15em; height:1.15em; flex:none; }
.hu-btn .hu-start,.hu-btn .hu-end{ display:inline-flex; align-items:center; }
/* loading spinner: injected by juwel-heroui.js as the first child when aria-busy flips true */
.hu-btn .hu-btn-spin{ width:1em; height:1em; border-radius:50%; border:2px solid currentColor;
  border-right-color:transparent; flex:none; }
@media (prefers-reduced-motion:no-preference){ .hu-btn .hu-btn-spin{ animation:hu-spin .8s linear infinite; } }

/* ── BUTTON GROUP — role=group, connects radii, one shared border ── */
.hu-btn-group{ display:inline-flex; border-radius:var(--hu-radius-md); }
.hu-btn-group .hu-btn{ border-radius:0; }
.hu-btn-group .hu-btn:not(:first-child){ margin-inline-start:-1px; }
.hu-btn-group .hu-btn:first-child{ border-start-start-radius:inherit; border-end-start-radius:inherit; }
.hu-btn-group .hu-btn:last-child{ border-start-end-radius:inherit; border-end-end-radius:inherit; }
.hu-btn-group .hu-btn{ position:relative; }
.hu-btn-group .hu-btn:focus-visible{ z-index:1; }

/* ============================================================
   §9 — LINK
   ============================================================ */
.hu-link{
  color:var(--hu-c-ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  font-weight:600; border-radius:var(--r-xs);
}
.hu-link:not([data-color]){ color:var(--ink); }
.hu-link[data-underline="hover"]{ text-decoration:none; }
.hu-link[data-underline="hover"]:hover{ text-decoration:underline; text-underline-offset:3px; }
.hu-link[data-underline="always"]{ text-decoration:underline; text-underline-offset:3px; }
.hu-link[data-underline="active"]:active{ text-decoration:underline; }
.hu-link[data-size="sm"]{ font-size:var(--hu-fs-sm); }
.hu-link[data-size="lg"]{ font-size:var(--hu-fs-lg); }
.hu-link[data-block]{ display:flex; }
.hu-link .hu-ext-icon{ width:.85em; height:.85em; opacity:.7; }

/* ============================================================
   §10 — CARD  (UNIFIES .pane/.card juwel-ds.css — same recipe;
   .hu-card is a drop-in superset with a shadow/radius axis and
   optional header/body/footer slots that .card never had.)
   ============================================================ */
.hu-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--hu-radius-lg); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);
  transition:box-shadow var(--dur-3) var(--ease-out),transform var(--dur-2) var(--ease-out);
  overflow:hidden;
}
.hu-card[data-shadow="none"]{ box-shadow:inset 0 1px 0 var(--edge); }
.hu-card[data-shadow="sm"]{ box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1); }
.hu-card[data-shadow="md"]{ box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); }
.hu-card[data-shadow="lg"]{ box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3); }
.hu-card[data-hoverable]{ cursor:pointer; }
@media (hover:hover) and (pointer:fine){
  .hu-card[data-hoverable]:hover,.hu-card[data-pressable]:hover{ box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2); }
}
.hu-card[data-pressable]{ cursor:pointer; text-align:inherit; border:1px solid var(--line); width:100%; font-family:inherit; }
.hu-card[data-pressable]:active{ transform:scale(.99); }
.hu-card-header{ display:flex; align-items:center; gap:12px; padding:var(--s5) var(--s5) 0; }
.hu-card-body{ padding:var(--s5); flex:1; }
.hu-card-footer{ display:flex; align-items:center; gap:10px; padding:0 var(--s5) var(--s5); }
.hu-card[data-blurred]{ background:color-mix(in srgb,var(--surface) 84%,transparent); backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25); }

/* ============================================================
   §11 — INPUT / TEXTAREA  (.hu-field wrapper: label + control +
   description + error. Focus uses .lx-meniscus wet-surface tension
   on the wrapper in addition to the global :focus-visible rule,
   since the visible "input" here is often the wrapper, not always
   the bare <input>.)
   ============================================================ */
.hu-field{ display:flex; flex-direction:column; gap:6px; width:100%; }
.hu-field[data-label-placement="outside-left"]{ flex-direction:row; align-items:center; gap:12px; }
.hu-field-label{ font-size:var(--fs-small); font-weight:600; color:var(--ink-2); }
.hu-field-label[data-required]::after{ content:" *"; color:var(--garnet-deep); }
.hu-input-wrap{ position:relative; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--hu-radius-md);
  padding:0 var(--hu-gx-md); min-height:var(--hu-mh-md);
  transition:border-color var(--visc-bead,.3s) var(--ease-viscous,var(--ease-out)),box-shadow var(--visc-bead,.3s) var(--ease-viscous,var(--ease-out));
}
.hu-input-wrap[data-variant="bordered"]{ background:transparent; }
.hu-input-wrap[data-variant="faded"]{ background:var(--surface-2); border-color:var(--line); }
.hu-input-wrap[data-variant="underlined"]{ background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; padding-inline:2px; }
.hu-input-wrap[data-size="sm"]{ min-height:var(--hu-mh-sm); padding-inline:var(--hu-gx-sm); }
.hu-input-wrap[data-size="lg"]{ min-height:var(--hu-mh-lg); padding-inline:var(--hu-gx-lg); }
.hu-input-wrap:focus-within{ outline:none; border-color:var(--focus-edge);
  box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge); }
.hu-input-wrap[data-variant="underlined"]:focus-within{ box-shadow:none; border-color:var(--focus-edge); border-bottom-width:2px; }
.hu-input-wrap[aria-invalid="true"],.hu-input-wrap:has(.hu-input[aria-invalid="true"]){ border-color:var(--garnet-deep); }
.hu-input,.hu-textarea{
  flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--ink);
  font-family:var(--ff); font-size:var(--fs-body); padding:var(--hu-gy-md) 0;
}
.hu-input-wrap[data-size="sm"] .hu-input{ font-size:var(--hu-fs-sm); padding-block:var(--hu-gy-sm); }
.hu-input-wrap[data-size="lg"] .hu-input{ font-size:var(--hu-fs-lg); padding-block:var(--hu-gy-lg); }
.hu-textarea{ padding:var(--hu-gy-md) var(--hu-gx-md); resize:vertical; min-height:88px; line-height:1.5; }
.hu-textarea[data-autosize]{ resize:none; overflow:hidden; }
.hu-input::placeholder,.hu-textarea::placeholder{ color:var(--ink-3); }
.hu-field-clear{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; border:none; background:transparent; color:var(--ink-3); cursor:pointer; flex:none; }
.hu-field-clear:hover{ background:var(--surface-2); color:var(--ink); }
.hu-field-desc{ font-size:var(--fs-small); color:var(--ink-3); }
.hu-field-error{ font-size:var(--fs-small); color:var(--garnet-deep); display:none; }
.hu-field:has(.hu-input[aria-invalid="true"]) .hu-field-error,
.hu-field:has(.hu-textarea[aria-invalid="true"]) .hu-field-error{ display:block; }
.hu-field:has(.hu-input[aria-invalid="true"]) .hu-field-desc{ display:none; }

/* ============================================================
   §13 — SELECT  (native <select> skinned by default: full a11y for
   free, zero new keyboard surface. data-enhanced="true" additionally
   builds a custom single-select listbox popover on top via
   juwel-heroui.js, reusing the Dropdown positioning engine.)
   ============================================================ */
.hu-select-wrap{ position:relative; }
.hu-select{
  appearance:none; -webkit-appearance:none; width:100%; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--hu-radius-md);
  padding:var(--hu-gy-md) 36px var(--hu-gy-md) var(--hu-gx-md); min-height:var(--hu-mh-md);
  font-family:var(--ff); font-size:var(--fs-body); color:var(--ink);
  transition:border-color var(--visc-bead,.3s) var(--ease-viscous,var(--ease-out));
}
.hu-select[data-variant="bordered"]{ background:transparent; }
.hu-select[data-variant="faded"]{ background:var(--surface-2); }
.hu-select[data-variant="underlined"]{ background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; }
.hu-select[data-size="sm"]{ min-height:var(--hu-mh-sm); font-size:var(--hu-fs-sm); }
.hu-select[data-size="lg"]{ min-height:var(--hu-mh-lg); font-size:var(--hu-fs-lg); }
.hu-select-chevron{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px;
  color:var(--ink-3); pointer-events:none; }
.hu-select[aria-invalid="true"]{ border-color:var(--garnet-deep); }
/* enhanced (custom listbox) trigger button re-skins as the same look, real button */
.hu-select-trigger{ width:100%; justify-content:space-between; text-align:left; font-weight:500; }
.hu-select-trigger[data-placeholder]{ color:var(--ink-3); }
.hu-listbox{ list-style:none; margin:0; padding:6px; max-height:280px; overflow:auto; }
.hu-listbox-option{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
  cursor:pointer; font-size:var(--fs-body); color:var(--ink); }
.hu-listbox-option[data-hover="true"]{ background:var(--surface-2); }
.hu-listbox-option[aria-selected="true"]{ color:var(--hu-primary-ink); font-weight:600; }
.hu-listbox-option[aria-selected="true"]::after{ content:""; margin-inline-start:auto; width:8px; height:8px; border-radius:50%; background:var(--topaz); }
.hu-listbox-option[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }

/* ============================================================
   §14 — CHECKBOX  (UNIFIES .lx-drop luxliq.css — the checkbox IS a
   skinned .lx-drop, extended with a color axis. Real <input
   type=checkbox>, visually replaced, so keyboard + AT semantics are
   100% native.)
   ============================================================ */
.hu-checkbox{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.hu-checkbox-input{ position:absolute; opacity:0; width:1px; height:1px; }
.hu-checkbox-box{ appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none;
  border-radius:7px; border:1px solid var(--line); background:var(--surface-2); position:relative;
  transition:background var(--visc-bead,.32s) var(--ease-viscous,var(--ease-out)),border-color var(--visc-bead,.32s) var(--ease-viscous,var(--ease-out));
}
.hu-checkbox-input:checked + .hu-checkbox-box{ background:var(--hu-c); border-color:transparent; }
.hu-checkbox-input:checked + .hu-checkbox-box::after{ content:""; position:absolute; left:6px; top:2.5px; width:5px; height:10px;
  border:solid var(--hu-c-fg); border-width:0 2px 2px 0; transform:rotate(45deg); }
.hu-checkbox-box[data-indeterminate="true"]{ background:var(--hu-c); border-color:transparent; }
.hu-checkbox-box[data-indeterminate="true"]::after{ content:""; position:absolute; left:4px; top:8.5px; width:10px; height:2px; background:var(--hu-c-fg); border:none; transform:none; }
.hu-checkbox-input:focus-visible + .hu-checkbox-box{ outline:none; border-color:var(--focus-edge); box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge); }
.hu-checkbox[data-size="sm"] .hu-checkbox-box{ width:16px; height:16px; border-radius:5px; }
.hu-checkbox[data-size="lg"] .hu-checkbox-box{ width:24px; height:24px; border-radius:8px; }
.hu-checkbox-label{ font-size:var(--fs-body); color:var(--ink); }
.hu-checkbox-label[data-line-through] { text-decoration:line-through; opacity:.6; }
.hu-checkbox-input:disabled ~ .hu-checkbox-box,.hu-checkbox-input:disabled ~ .hu-checkbox-label{ opacity:.46; }
.hu-checkbox:has(.hu-checkbox-input:disabled){ cursor:not-allowed; }

/* ============================================================
   §15 — RADIO
   ============================================================ */
.hu-radio-group{ display:flex; flex-direction:column; gap:10px; }
.hu-radio-group[data-orientation="horizontal"]{ flex-direction:row; gap:18px; flex-wrap:wrap; }
.hu-radio{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.hu-radio-input{ position:absolute; opacity:0; width:1px; height:1px; }
.hu-radio-dot{ appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none; border-radius:50%;
  border:1.5px solid var(--line); background:var(--surface); position:relative;
  transition:border-color var(--visc-bead,.32s) var(--ease-viscous,var(--ease-out)); }
.hu-radio-input:checked + .hu-radio-dot{ border-color:var(--hu-c); }
.hu-radio-input:checked + .hu-radio-dot::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--hu-c); }
.hu-radio-input:focus-visible + .hu-radio-dot{ outline:none; border-color:var(--focus-edge); box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge); }
.hu-radio[data-size="sm"] .hu-radio-dot{ width:16px; height:16px; }
.hu-radio[data-size="lg"] .hu-radio-dot{ width:24px; height:24px; }
.hu-radio-label{ font-size:var(--fs-body); color:var(--ink); }
.hu-radio-input:disabled ~ .hu-radio-dot,.hu-radio-input:disabled ~ .hu-radio-label{ opacity:.46; }

/* ============================================================
   §16 — SWITCH  (UNIFIES .lx-toggle luxliq.css — the switch IS a
   skinned .lx-toggle. Real <input type=checkbox role=switch>.)
   ============================================================ */
.hu-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.hu-switch-input{ position:absolute; opacity:0; width:1px; height:1px; }
.hu-switch-track{ --lv:0%; position:relative; width:46px; height:26px; flex:none; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); overflow:hidden;
  transition:border-color var(--visc-pour,.52s) var(--ease-flow); }
.hu-switch-track::before{ content:""; position:absolute; inset:0; background:var(--hu-c);
  transform:translateY(calc(100% - var(--lv))); transition:transform var(--visc-pour,.52s) var(--ease-flow); }
.hu-switch-track::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(20,14,8,.28),inset 0 1px 0 #fff; display:flex; align-items:center; justify-content:center;
  transition:transform var(--visc-pour,.52s) var(--ease-viscous,var(--ease-out)); }
.hu-switch-input:checked + .hu-switch-track{ --lv:100%; border-color:transparent; }
.hu-switch-input:checked + .hu-switch-track::after{ transform:translateX(20px); }
.hu-switch-input:focus-visible + .hu-switch-track{ outline:none; border-color:var(--focus-edge); box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge); }
.hu-switch[data-size="sm"] .hu-switch-track{ width:38px; height:22px; }
.hu-switch[data-size="sm"] .hu-switch-track::after{ width:16px; height:16px; }
.hu-switch[data-size="sm"] .hu-switch-input:checked + .hu-switch-track::after{ transform:translateX(16px); }
.hu-switch[data-size="lg"] .hu-switch-track{ width:54px; height:30px; }
.hu-switch[data-size="lg"] .hu-switch-track::after{ width:24px; height:24px; }
.hu-switch[data-size="lg"] .hu-switch-input:checked + .hu-switch-track::after{ transform:translateX(24px); }
.hu-switch-track .hu-switch-icon{ width:11px; height:11px; opacity:.55; color:var(--ink-3); }
.hu-switch-input:disabled ~ .hu-switch-track{ opacity:.46; cursor:not-allowed; }
.hu-switch-label{ font-size:var(--fs-body); color:var(--ink); }

/* ============================================================
   §17 — SLIDER  (UNIFIES .lx-channel luxliq.css — the slider IS a
   skinned .lx-channel. Real <input type=range>: native keyboard
   (arrows/Home/End/PageUp/PageDown) and AT value reporting for free.
   Single-thumb only this pass — see report for the honest scope note
   on dual-thumb range.)
   ============================================================ */
.hu-slider{ display:flex; flex-direction:column; gap:8px; width:100%; }
.hu-slider-head{ display:flex; justify-content:space-between; font-size:var(--fs-small); color:var(--ink-2); }
.hu-slider-track{ position:relative; }
.hu-range{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:linear-gradient(to right,var(--hu-c) var(--hu-slider-fill,50%),var(--surface-2) var(--hu-slider-fill,50%));
  outline:none; cursor:pointer; margin:6px 0; }
.hu-range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff,var(--foam) 60%,#EFE4D2); border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(20,14,8,.22); transition:transform .15s var(--ease-out); }
.hu-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  background:radial-gradient(circle at 32% 28%,#fff,var(--foam) 60%,#EFE4D2); box-shadow:0 2px 6px rgba(20,14,8,.22); }
.hu-range::-moz-range-track{ height:8px; border-radius:999px; background:var(--surface-2); }
.hu-range:active::-webkit-slider-thumb{ transform:scale(1.08); }
.hu-range:focus-visible{ outline:none; }
.hu-range:focus-visible::-webkit-slider-thumb{ border-color:var(--focus-edge); box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge); }
.hu-range:focus-visible::-moz-range-thumb{ border-color:var(--focus-edge); box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge); }
.hu-slider[data-size="sm"] .hu-range{ height:6px; }
.hu-slider[data-size="lg"] .hu-range{ height:10px; }
.hu-slider-bubble{ position:absolute; bottom:100%; transform:translateX(-50%); margin-bottom:8px;
  background:var(--receipt-bg); color:var(--receipt-ink); font-family:var(--mono); font-size:11px;
  padding:4px 8px; border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s ease; }
.hu-slider-track:hover .hu-slider-bubble,.hu-slider-track[data-dragging] .hu-slider-bubble{ opacity:1; }
.hu-range:disabled{ opacity:.46; cursor:not-allowed; }

/* ============================================================
   §18 — CHIP  (UNIFIES .chip/.chip.signed juwel-ds.css — flat variant
   with color="success" reproduces .chip.signed exactly.)
   ============================================================ */
.hu-chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--hu-radius-full);
  padding:4px 12px; font-weight:500; line-height:1.4; border:1px solid transparent;
}
.hu-chip:not([data-size]){ font-size:12px; }
.hu-chip[data-size="sm"]{ padding:2px 9px; font-size:11px; }
.hu-chip[data-size="lg"]{ padding:6px 14px; font-size:13.5px; }
.hu-chip-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.hu-chip .hu-avatar{ margin-inline-start:-4px; }
.hu-chip-close{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; border:none; background:transparent; color:currentColor; opacity:.6; cursor:pointer; margin-inline-end:-4px; flex:none; }
.hu-chip-close:hover{ opacity:1; background:color-mix(in srgb,currentColor 16%,transparent); }
.hu-chip-close svg{ width:10px; height:10px; }
.hu-chip[data-closing]{ animation:hu-recoil-out .2s var(--ease-viscous,var(--ease-out)) forwards; }

/* ============================================================
   §19 — BADGE
   ============================================================ */
.hu-badge-wrap{ position:relative; display:inline-flex; }
.hu-badge{
  position:absolute; display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:10.5px; font-weight:700;
  border:2px solid var(--surface); line-height:1;
}
.hu-badge[data-shape="rectangle"]{ border-radius:var(--r-xs); }
.hu-badge[data-placement="top-right"]{ top:0; right:0; transform:translate(35%,-35%); }
.hu-badge[data-placement="top-left"]{ top:0; left:0; transform:translate(-35%,-35%); }
.hu-badge[data-placement="bottom-right"]{ bottom:0; right:0; transform:translate(35%,35%); }
.hu-badge[data-placement="bottom-left"]{ bottom:0; left:0; transform:translate(-35%,35%); }
.hu-badge[data-variant="dot"],.hu-badge[data-dot]{ min-width:10px; width:10px; height:10px; padding:0; }
.hu-badge[data-invisible]{ display:none; }
.hu-badge[data-outline="false"]{ border-color:transparent; }

/* ============================================================
   §20 — AVATAR
   ============================================================ */
.hu-avatar{
  position:relative; display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
  width:40px; height:40px; border-radius:var(--hu-radius-full); background:var(--surface-2); color:var(--ink-2);
  font-weight:600; font-size:14px; flex:none;
}
.hu-avatar img{ width:100%; height:100%; object-fit:cover; }
.hu-avatar[data-size="sm"]{ width:32px; height:32px; font-size:12px; }
.hu-avatar[data-size="lg"]{ width:56px; height:56px; font-size:18px; }
.hu-avatar[data-bordered]{ box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--hu-c); }
.hu-avatar-group{ display:flex; }
.hu-avatar-group .hu-avatar{ margin-inline-start:-10px; box-shadow:0 0 0 2px var(--surface); }
.hu-avatar-group .hu-avatar:first-child{ margin-inline-start:0; }
.hu-avatar-group .hu-avatar-more{ background:var(--surface-3); font-size:12px; }

/* ============================================================
   §21 — TABS  (UNIFIES .lx-tab luxliq.css — every trigger IS a
   .lx-tab; the nectar meniscus that already exists is the entire
   active-indicator animation, reused verbatim, no new keyframe.)
   ============================================================ */
.hu-tabs{ display:flex; flex-direction:column; gap:0; }
.hu-tablist{ display:flex; gap:4px; border-bottom:1px solid var(--line); position:relative; }
.hu-tablist[data-variant="solid"],.hu-tablist[data-variant="bordered"],.hu-tablist[data-variant="light"]{ border-bottom:none;
  background:var(--surface-2); padding:4px; border-radius:var(--hu-radius-md); display:inline-flex; }
.hu-tablist[data-placement="vertical"]{ flex-direction:column; border-bottom:none; border-inline-end:1px solid var(--line); align-items:stretch; }
.hu-tab{
  appearance:none; background:transparent; border:none; cursor:pointer; padding:10px 16px;
  font-weight:600; font-size:var(--fs-chrome); color:var(--ink-2); border-radius:var(--r-sm);
  transition:color .18s ease,background-color var(--visc-bead,.3s) var(--ease-viscous,var(--ease-out));
}
.hu-tab[aria-selected="true"]{ color:var(--ink); }
.hu-tablist[data-variant="solid"] .hu-tab[aria-selected="true"]{ background:var(--surface); box-shadow:var(--shadow-1); }
.hu-tab[data-size="sm"]{ padding:7px 12px; font-size:var(--hu-fs-sm); }
.hu-tab[data-size="lg"]{ padding:13px 20px; font-size:var(--hu-fs-lg); }
.hu-tab:disabled{ opacity:.4; cursor:not-allowed; }
.hu-tabpanel{ padding:20px 4px; }
.hu-tabpanel:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--focus-edge); border-radius:var(--r-sm); }

/* ============================================================
   §22 — ACCORDION  (panel reveal reuses the bloom/diffusion feel of
   .lx-bloom: blur+opacity on content mount, height animated by JS
   between measured 0 and scrollHeight since CSS auto-height cannot
   transition natively.)
   ============================================================ */
.hu-accordion{ display:flex; flex-direction:column; }
.hu-accordion[data-variant="bordered"]{ border:1px solid var(--line); border-radius:var(--hu-radius-lg); overflow:hidden; }
.hu-accordion[data-variant="splitted"]{ gap:10px; }
.hu-accordion-item{ border-bottom:1px solid var(--line); }
.hu-accordion[data-variant="splitted"] .hu-accordion-item{ border:1px solid var(--line); border-radius:var(--hu-radius-lg); background:var(--surface); box-shadow:var(--shadow-1); }
.hu-accordion-item:last-child{ border-bottom:none; }
.hu-accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:transparent; border:none; cursor:pointer; padding:16px 4px; text-align:left;
  font-weight:600; font-size:var(--fs-body); color:var(--ink);
}
.hu-accordion[data-variant="splitted"] .hu-accordion-trigger{ padding:16px 18px; }
.hu-accordion-chevron{ width:16px; height:16px; color:var(--ink-3); flex:none; transition:transform var(--dur-2) var(--ease-out); }
.hu-accordion-trigger[aria-expanded="true"] .hu-accordion-chevron{ transform:rotate(180deg); }
.hu-accordion-panel{ overflow:hidden; height:0; transition:height var(--visc-settle,.5s) var(--ease-viscous,var(--ease-out)); }
.hu-accordion-panel-inner{ padding:0 4px 18px; color:var(--ink-2); font-size:var(--fs-body); line-height:1.6; }
.hu-accordion[data-variant="splitted"] .hu-accordion-panel-inner{ padding:0 18px 18px; }
.hu-accordion-trigger:disabled{ opacity:.4; cursor:not-allowed; }
.hu-accordion-trigger[data-hide-indicator] .hu-accordion-chevron{ display:none; }

/* ============================================================
   §23 — MODAL  (focus-trap + scroll-lock + Escape via
   juwel-heroui.js. Enter/exit = .lx-bloom / .lx-drain-out, applied
   by JS the same way luxliq-lamp.js's own pour()/drain() helpers
   already work — no new keyframe.)
   ============================================================ */
.hu-modal-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:color-mix(in srgb,#000 45%,transparent);
}
.hu-modal-overlay[hidden]{ display:none; } /* author `display:flex` above otherwise beats the UA [hidden]{display:none}
  rule on origin precedence alone (specificity is irrelevant across origins), so the hidden attribute the JS toggles
  would silently do nothing without this explicit override — real bug, caught by rendering the showcase page. */
.hu-modal-overlay[data-backdrop="transparent"]{ background:transparent; }
.hu-modal-overlay[data-backdrop="blur"]{ background:color-mix(in srgb,#000 28%,transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hu-modal-overlay[data-placement="top"]{ align-items:flex-start; padding-top:64px; }
.hu-modal-overlay[data-placement="bottom"]{ align-items:flex-end; padding-bottom:64px; }
.hu-modal-dialog{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--hu-radius-lg);
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3); width:100%; max-width:480px; max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
}
.hu-modal-dialog[data-size="xs"]{ max-width:320px; } .hu-modal-dialog[data-size="sm"]{ max-width:400px; }
.hu-modal-dialog[data-size="md"]{ max-width:480px; } .hu-modal-dialog[data-size="lg"]{ max-width:620px; }
.hu-modal-dialog[data-size="xl"]{ max-width:760px; } .hu-modal-dialog[data-size="2xl"]{ max-width:900px; }
.hu-modal-dialog[data-size="3xl"]{ max-width:1040px; } .hu-modal-dialog[data-size="4xl"]{ max-width:1180px; }
.hu-modal-dialog[data-size="5xl"]{ max-width:1320px; } .hu-modal-dialog[data-size="full"]{ max-width:none; height:calc(100vh - 48px); }
.hu-modal-dialog[data-scroll="inside"] .hu-modal-body{ overflow:auto; }
.hu-modal-dialog[data-scroll="outside"]{ max-height:none; }
.hu-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 0; }
.hu-modal-title{ font-size:19px; font-weight:650; letter-spacing:-.015em; margin:0; }
.hu-modal-body{ padding:16px 22px; color:var(--ink-2); line-height:1.6; flex:1; }
.hu-modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:0 22px 20px; }
.hu-modal-close{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; border:none; background:transparent; color:var(--ink-3); cursor:pointer; flex:none; }
.hu-modal-close:hover{ background:var(--surface-2); color:var(--ink); }
body[data-hu-scroll-lock]{ overflow:hidden; }

/* ============================================================
   §24 — DRAWER  (same behavior contract as Modal; slides from an
   edge with a clip-path/translate pour, directional variant of
   .lx-pour-in.)
   ============================================================ */
.hu-drawer-overlay{ position:fixed; inset:0; z-index:1000; background:color-mix(in srgb,#000 45%,transparent); }
.hu-drawer-panel{
  position:fixed; background:var(--surface); box-shadow:var(--shadow-3); display:flex; flex-direction:column;
  border-radius:0;
}
.hu-drawer-panel[data-placement="right"]{ top:0; right:0; bottom:0; width:min(420px,92vw); border-inline-start:1px solid var(--line); }
.hu-drawer-panel[data-placement="left"]{ top:0; left:0; bottom:0; width:min(420px,92vw); border-inline-end:1px solid var(--line); }
.hu-drawer-panel[data-placement="top"]{ top:0; left:0; right:0; height:min(360px,86vh); border-bottom:1px solid var(--line); }
.hu-drawer-panel[data-placement="bottom"]{ bottom:0; left:0; right:0; height:min(360px,86vh); border-top:1px solid var(--line); }
.hu-drawer-panel[data-size="sm"]{ width:min(320px,92vw); } .hu-drawer-panel[data-size="lg"]{ width:min(560px,94vw); }
.hu-drawer-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 0; }
.hu-drawer-body{ padding:16px 22px; overflow:auto; flex:1; color:var(--ink-2); line-height:1.6; }
.hu-drawer-footer{ display:flex; justify-content:flex-end; gap:10px; padding:0 22px 20px; }

/* ============================================================
   §25 — DROPDOWN / §26 POPOVER / SELECT listbox popover (shared
   floating-surface plumbing: visibility+opacity+transform so the
   surface leaves the a11y tree and tab order while closed, per the
   documented technique — never `display` alone, which can't
   transition.)
   ============================================================ */
.hu-dropdown{ position:relative; display:inline-block; }
.hu-dropdown-menu,.hu-popover,.hu-select-popover,.hu-tooltip{
  position:absolute; z-index:900; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-4px) scale(.97); filter:blur(2px);
  transition:opacity var(--hu-pop-dur) var(--ease-viscous,var(--ease-out)),
    transform var(--hu-pop-dur) var(--ease-viscous,var(--ease-out)),
    filter var(--hu-pop-dur) var(--ease-viscous,var(--ease-out)),
    visibility 0s linear var(--hu-pop-dur);
}
.hu-dropdown-menu[data-open="true"],.hu-popover[data-open="true"],
.hu-select-popover[data-open="true"],.hu-tooltip[data-open="true"]{
  opacity:1; visibility:visible; pointer-events:auto; transform:none; filter:none; transition-delay:0s;
}
.hu-dropdown-menu,.hu-popover,.hu-select-popover{
  min-width:200px; background:var(--surface); border-radius:var(--hu-radius-lg); padding:6px;
  box-shadow:var(--shadow-lg),inset 0 0 0 1.5px var(--line-2);
}
.hu-dropdown-menu[role="listbox"],.hu-select-popover{ padding:6px; }
.hu-dd-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:var(--r-sm);
  background:transparent; border:none; cursor:pointer; text-align:left; font-size:14px; font-weight:600; color:var(--ink);
}
.hu-dd-item[data-hover="true"]{ background:var(--surface-2); }
.hu-dd-item[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.hu-dd-item .hu-dd-icon{ width:16px; height:16px; color:var(--hu-c-ink); flex:none; }
.hu-dd-item small{ display:block; font-weight:500; font-size:12px; color:var(--ink-3); }
.hu-dd-item .hu-dd-shortcut{ margin-inline-start:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.hu-dd-divider{ height:1px; background:var(--line-2); margin:6px 4px; }
.hu-popover-arrow{ position:absolute; width:10px; height:10px; background:var(--surface); transform:rotate(45deg);
  box-shadow:inset 0 0 0 1.5px var(--line-2); }

/* ============================================================
   §27 — TOOLTIP  (smaller pop surface, hover/focus + delay via JS)
   ============================================================ */
.hu-tooltip{
  background:var(--receipt-bg); color:var(--receipt-ink); font-size:12px; font-weight:500;
  padding:6px 10px; border-radius:var(--r-sm); box-shadow:var(--shadow-2); max-width:240px; text-align:center;
}
.hu-tooltip[data-color="primary"]{ background:var(--ink); }
.hu-tooltip-arrow{ position:absolute; width:8px; height:8px; background:inherit; transform:rotate(45deg); }

/* ============================================================
   §28 — ALERT / TOAST  (Alert = static inline; Toast = queued into
   a fixed region by juwel-heroui.js. Both share the variant/color
   recipe engine above. "Sealed"/success states may additionally get
   .lx-seal treatment — see juwel-heroui.js toast() success path.)
   ============================================================ */
.hu-alert{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--hu-radius-md);
  border:1px solid transparent; font-size:var(--fs-body); line-height:1.5;
}
.hu-alert-icon{ width:20px; height:20px; flex:none; margin-top:1px; }
.hu-alert-body{ flex:1; }
.hu-alert-title{ font-weight:650; margin:0 0 2px; }
.hu-alert-close{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; border:none; background:transparent; color:currentColor; opacity:.6; cursor:pointer; }
.hu-alert-close:hover{ opacity:1; background:color-mix(in srgb,currentColor 14%,transparent); }

.hu-toast-region{ position:fixed; z-index:1200; display:flex; flex-direction:column; gap:10px; padding:20px; pointer-events:none; }
.hu-toast-region[data-placement="top-right"]{ top:0; right:0; align-items:flex-end; }
.hu-toast-region[data-placement="top-left"]{ top:0; left:0; align-items:flex-start; }
.hu-toast-region[data-placement="bottom-right"]{ bottom:0; right:0; align-items:flex-end; }
.hu-toast-region[data-placement="bottom-left"]{ bottom:0; left:0; align-items:flex-start; }
.hu-toast-region[data-placement="top-center"]{ top:0; left:50%; transform:translateX(-50%); align-items:center; }
.hu-toast-region[data-placement="bottom-center"]{ bottom:0; left:50%; transform:translateX(-50%); align-items:center; }
.hu-toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:10px; min-width:280px; max-width:360px;
  padding:14px 14px; border-radius:var(--hu-radius-md); border:1px solid transparent; box-shadow:var(--shadow-2);
}
.hu-toast-body{ flex:1; font-size:13.5px; line-height:1.5; }
.hu-toast-title{ font-weight:650; margin:0 0 2px; }
.hu-toast-close{ flex:none; width:22px; height:22px; border-radius:50%; border:none; background:transparent;
  color:currentColor; opacity:.55; cursor:pointer; }
.hu-toast-close:hover{ opacity:1; }
.hu-toast[data-leaving]{ animation:hu-toast-out .22s var(--ease-viscous,var(--ease-out)) forwards; }

/* ============================================================
   §29 — PROGRESS  (UNIFIES .lx-pool luxliq.css — determinate fill IS
   a skinned .lx-pool.) / SPINNER / SKELETON
   ============================================================ */
.hu-progress{ display:flex; flex-direction:column; gap:6px; width:100%; }
.hu-progress-head{ display:flex; justify-content:space-between; font-size:var(--fs-small); color:var(--ink-2); }
.hu-progress-track{ position:relative; overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; height:8px; }
.hu-progress[data-size="sm"] .hu-progress-track{ height:5px; }
.hu-progress[data-size="lg"] .hu-progress-track{ height:12px; }
.hu-progress-fill{ position:absolute; inset:0; width:var(--hu-progress-value,0%); background:var(--hu-c);
  border-radius:inherit; transition:width var(--visc-pour,.52s) var(--ease-flow); }
.hu-progress[data-radius="none"] .hu-progress-track,.hu-progress[data-radius="none"] .hu-progress-fill{ border-radius:0; }
.hu-progress[data-striped] .hu-progress-fill{ background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%,transparent);
  background-size:14px 14px; }
.hu-progress[data-indeterminate] .hu-progress-fill{ width:40%!important; }
@media (prefers-reduced-motion:no-preference){
  .hu-progress[data-indeterminate] .hu-progress-fill{ animation:hu-progress-indeterminate 1.4s var(--ease-flow) infinite; }
  .hu-progress[data-striped] .hu-progress-fill{ animation:hu-progress-stripe 1s linear infinite; }
}

.hu-spinner{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--hu-c); }
.hu-spinner[data-size="sm"]{ width:20px; height:20px; }
.hu-spinner[data-size="lg"]{ width:40px; height:40px; }
.hu-spinner svg{ width:100%; height:100%; }
.hu-spinner circle{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-dasharray:80,200; }
@media (prefers-reduced-motion:no-preference){ .hu-spinner svg{ animation:hu-spin 1s linear infinite; } }

.hu-skeleton{ position:relative; overflow:hidden; border-radius:var(--r-sm); background:var(--surface-2); }
.hu-skeleton::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 6%,transparent),transparent);
  transform:translateX(-100%); }
@media (prefers-reduced-motion:no-preference){ .hu-skeleton::after{ animation:hu-shimmer 1.6s ease-in-out infinite; } }
.hu-skeleton[data-loaded="true"]{ background:none; border-radius:0; }
.hu-skeleton[data-loaded="true"]::after{ display:none; }

/* ============================================================
   §32 — DIVIDER
   ============================================================ */
.hu-divider{ background:var(--line); border:none; flex:none; }
.hu-divider[data-orientation="horizontal"],.hu-divider:not([data-orientation]){ width:100%; height:1px; margin:8px 0; }
.hu-divider[data-orientation="vertical"]{ width:1px; height:100%; margin:0 8px; align-self:stretch; }

/* ============================================================
   §33 — BREADCRUMBS
   ============================================================ */
.hu-breadcrumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.hu-breadcrumbs li{ display:flex; align-items:center; gap:6px; }
.hu-breadcrumbs .hu-crumb-sep{ color:var(--ink-3); font-size:12px; }
.hu-crumb{ text-decoration:none; font-size:var(--fs-chrome); font-weight:600; color:var(--ink-2); border-radius:var(--r-xs); padding:2px 4px; }
.hu-crumb[aria-current="page"]{ color:var(--ink); cursor:default; }
.hu-crumb-collapse{ background:transparent; border:none; color:var(--ink-3); cursor:pointer; padding:2px 6px; border-radius:var(--r-xs); font-size:13px; }
.hu-crumb-collapse:hover{ background:var(--surface-2); color:var(--ink); }
.hu-breadcrumbs li[data-collapsed="true"]{ display:none; }
.hu-breadcrumbs[data-expanded] li[data-collapsed="true"]{ display:flex; }

/* ============================================================
   §34 — PAGINATION
   ============================================================ */
.hu-pagination{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.hu-page-item{
  min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--hu-radius-md); background:transparent; border:none; cursor:pointer; font-weight:600; color:var(--ink-2);
}
.hu-page-item[aria-current="true"]{ background:var(--hu-c); color:var(--hu-c-fg); }
.hu-page-item[data-size="sm"]{ min-width:30px; height:30px; font-size:13px; }
.hu-page-item[data-size="lg"]{ min-width:42px; height:42px; font-size:16px; }
.hu-page-item[data-ellipsis]{ cursor:default; color:var(--ink-3); }
.hu-page-item:disabled{ opacity:.4; cursor:not-allowed; }
.hu-pagination[data-compact] .hu-page-item:not([aria-current="true"]):not([data-nav]){ display:none; }

/* ============================================================
   §35 — TABLE  (real <table> for correct semantics; sortable
   headers use aria-sort, never a decorative-only icon.)
   ============================================================ */
.hu-table-wrap{ overflow-x:auto; border-radius:var(--hu-radius-lg); border:1px solid var(--line); }
.hu-table{ width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.hu-table[data-layout="fixed"]{ table-layout:fixed; }
.hu-table thead th{ text-align:left; font-size:var(--fs-small); font-weight:650; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); background:var(--surface-2); padding:12px 16px; border-bottom:1px solid var(--line); }
.hu-table th[aria-sort]{ cursor:pointer; user-select:none; }
.hu-table th[aria-sort] .hu-sort-icon{ display:inline-flex; width:12px; height:12px; margin-inline-start:4px; vertical-align:-1px; opacity:.5; }
.hu-table th[aria-sort="ascending"] .hu-sort-icon,.hu-table th[aria-sort="descending"] .hu-sort-icon{ opacity:1; }
.hu-table th[aria-sort="descending"] .hu-sort-icon{ transform:rotate(180deg); }
.hu-table tbody td{ padding:12px 16px; border-bottom:1px solid var(--line-2); color:var(--ink); }
.hu-table tbody tr:last-child td{ border-bottom:none; }
.hu-table[data-striped] tbody tr:nth-child(odd){ background:color-mix(in srgb,var(--surface-2) 55%,transparent); }
.hu-table[data-compact] th,.hu-table[data-compact] td{ padding:7px 12px; }
.hu-table tbody tr[data-selected="true"]{ background:var(--hu-primary-soft); }
.hu-table[data-header-sticky] thead th{ position:sticky; top:0; z-index:1; }
.hu-table tbody tr:focus-visible,.hu-table tbody tr[tabindex]:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--focus-edge); }
.hu-table .hu-table-checkbox{ width:36px; }

/* ============================================================
   §36 — NAVBAR  (reuses .chrome-glass tokens for isBlurred, never a
   new translucent material.)
   ============================================================ */
.hu-navbar{ position:sticky; top:0; z-index:80; display:flex; align-items:center; gap:16px;
  height:var(--nav-h,72px); padding:0 clamp(18px,3.5vw,44px); background:var(--paper); }
.hu-navbar[data-bordered]{ border-bottom:1px solid var(--line); }
.hu-navbar[data-blurred]{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); }
.hu-navbar-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--ink); text-decoration:none; }
.hu-navbar-content{ display:flex; align-items:center; gap:6px; }
.hu-navbar-content[data-justify="end"]{ margin-inline-start:auto; }
.hu-navbar-content[data-justify="center"]{ margin-inline:auto; }
.hu-navbar-item{ font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none; padding:10px 14px; border-radius:var(--r-full); }
.hu-navbar-item:hover{ color:var(--ink); background:var(--surface-2); }
.hu-navbar-item[aria-current="page"]{ color:var(--ink); }
.hu-navbar-toggle{ display:none; }
.hu-navbar-menu{ position:fixed; inset:var(--nav-h,72px) 0 0 0; background:var(--paper); z-index:79;
  padding:20px clamp(18px,3.5vw,44px); overflow:auto; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--visc-settle,.5s) var(--ease-viscous,var(--ease-out)),transform var(--visc-settle,.5s) var(--ease-viscous,var(--ease-out)),visibility 0s linear var(--visc-settle,.5s); }
.hu-navbar-menu[data-open="true"]{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (max-width:840px){
  .hu-navbar-toggle{ display:inline-flex; }
  .hu-navbar-content[data-collapse-mobile]{ display:none; }
}

/* ============================================================
   §37 — KEYFRAMES (all namespaced hu-*, none duplicate an existing
   name in luxliq.css/juwel-ds.css; components above that already
   HAVE an lx-* equivalent use the lx-* keyframe directly instead of
   duplicating one here — see §-comments per component.)
   ============================================================ */
@keyframes hu-spin{ to{ transform:rotate(360deg); } }
@keyframes hu-shimmer{ to{ transform:translateX(100%); } }
@keyframes hu-progress-indeterminate{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(250%); } }
@keyframes hu-progress-stripe{ to{ background-position:14px 0; } }
@keyframes hu-recoil-out{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(.85); } }
@keyframes hu-toast-out{ from{ opacity:1; transform:translateY(0) scale(1); } to{ opacity:0; transform:translateY(-6px) scale(.96); } }

/* ============================================================
   §38 — REDUCED MOTION (consolidated safety net — every animation
   declared anywhere above is neutralized here too, belt-and-
   suspenders with the per-component reduced-motion rules that
   already exist in luxliq.css/juwel-ds.css for the primitives this
   file reuses).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hu-btn:active{ transform:none; }
  .hu-btn-spin,.hu-spinner svg{ animation:none!important; opacity:.7; }
  .hu-skeleton::after{ animation:none!important; opacity:.5; transform:none; }
  .hu-progress[data-indeterminate] .hu-progress-fill,.hu-progress[data-striped] .hu-progress-fill{ animation:none!important; }
  .hu-progress-fill{ transition:none; }
  .hu-toast[data-leaving]{ animation:none!important; opacity:0; transition:opacity .12s ease; }
  .hu-chip[data-closing]{ animation:none!important; opacity:0; transition:opacity .12s ease; }
  .hu-dropdown-menu,.hu-popover,.hu-select-popover,.hu-tooltip,.hu-navbar-menu{ transition:opacity .12s ease,visibility 0s linear .12s!important; transform:none!important; filter:none!important; }
  .hu-accordion-panel{ transition:height .12s ease!important; }
  .hu-card[data-pressable]:active{ transform:none; }
  .hu-switch-track::before,.hu-switch-track::after,.hu-checkbox-box,.hu-radio-dot{ transition-duration:.05s!important; }
}

/* ============================================================
   §39 — RESPONSIVE (comfortable tap targets, matching the 44px rule
   juwel-chrome.css already applies elsewhere)
   ============================================================ */
@media (max-width:640px){
  .hu-btn:not([data-icon-only]){ min-height:44px; }
  .hu-checkbox-box,.hu-radio-dot{ width:22px; height:22px; }
  .hu-modal-overlay{ padding:14px; }
  .hu-modal-dialog{ max-height:calc(100vh - 28px); }
}