/* ==========================================================================
   SUITE UI — the shared component layer (shared-components plan)
   Version 1.0.0 (2026-09-30). Served live by the hub at
   `http://127.0.0.1:4040/suite-ui.css`, next to `chrome.js` and
   `suite-theme.css`. One `<link>` per application:

     <link rel="stylesheet" href="http://127.0.0.1:4040/suite-ui.css" />

   WHAT THIS FILE IS
   The suite's ONE component stylesheet. Every dialog, context menu, inset
   settings group, segmented control, switch, tooltip, popover and color well
   in every application renders the same structure, geometry, spacing,
   typography, elevation and motion — because every value lives here. A
   structural change is one edit in this file; every application inherits it
   on reload. No vendored copies.

   WHAT THIS FILE IS NOT
   CSS-only, opt-in classes. It ships NO markup, NO logic, NO behavior:
   focus traps, promise-based confirm hosts, menu state stores and positioning
   code stay per-application. Applications keep their component libraries
   (Radix, Headless UI, Chakra, hand-rolled) and attach the `suite-ui-*`
   classes at their existing chokepoints. Accessibility (role="dialog", focus
   trap + return, Escape close, role="menu"/"menuitem" + arrow keys,
   role="switch" + aria-checked, aria-haspopup) stays per-application.

   THE CLASS CONTRACT (v1)
     .suite-ui-dialog-backdrop              fixed dim behind a dialog (opt-in blur via --dialog-backdrop-blur)
     .suite-ui-dialog                       the dialog box (radius, border, shadow, size)
       .suite-ui-dialog-wide                two-column shell variant (row direction + 56rem settings width)
       .suite-ui-dialog-header              42px title bar with hairline bottom
       .suite-ui-dialog-body                scrollable content, pad 16/20 gap 16, min-height floor (CLS)
       .suite-ui-dialog-footer              46px button bar with hairline top
     .suite-ui-menu                         menu / context-menu surface (w-max width behavior)
       .suite-ui-menu-item                  one row (28px), hover/active highlight
         .suite-ui-menu-icon                leading 16px icon slot
         .suite-ui-menu-label               the row text (flex:1, ellipsis)
         .suite-ui-menu-shortcut            right-aligned muted key hint
         .suite-ui-menu-check               leading checkmark slot
       .suite-ui-menu-separator             hairline divider
       .suite-ui-menu-danger                destructive row (danger color)
       .suite-ui-menu-section               section label (11px caps)
       .suite-ui-menu-flyout                submenu flyout (position:fixed; host clamps)
     .suite-ui-group                        inset grouped card (settings)
       .suite-ui-group-title                section label (11px/600 caps)
     .suite-ui-row                          one labeled row (label left, control right)
       .suite-ui-row-label                  primary label column
         .suite-ui-row-hint                 10px muted hint under the label
       .suite-ui-row-control                trailing control slot (flex-shrink-0)
     .suite-ui-segmented                    segmented control track
       .suite-ui-segmented-item             one segment (.is-active = accent pill)
     .suite-ui-switch                       switch track on [role="switch"] (thumb = ::after,
                                            checked = [aria-checked="true"]; CSS-only switch)
     .suite-ui-tooltip                      tooltip surface, pik-measured (max-width 320px)
     .suite-ui-popover                      generic floating surface (host positions it)
     .suite-ui-color-well                   32x22 color swatch around a native color input
     .suite-ui-dense                        density container: rows 22-26px, fonts 11px,
                                            tighter pads — the pro-tool mode (kat/ses/pik)

   RULES (chrome.js + theme-utilities precedents)
   - Light DOM only: no shadow roots, no bare-element selectors, no !important,
     no inline styles in the contract; single-class specificity, unlayered
     rules so component defaults hold their own against host Tailwind
     utilities. Hosts customize through tokens, never by fighting classes.
   - The classes own ONLY their component's box: no resets, no page-level
     rules. Fixed-position surfaces default to z-index 50 (the suite's modal
     layer); a host that must re-stack does it in its own extension layer.
   - Every color binding consumes the canonical theme tokens (--bg-*,
     --text-*, --border-subtle, --accent/--primary, --radius-*, --shadow-*,
     --ease-apple) with chrome.js-style literal fallbacks, so the file renders
     correctly standalone and needs no coordination with the theme rollout.
     Every value is mode-agnostic: dark and light both come from the tokens.
   - Motion is subtle and tokenized: open/close = scale 0.98 -> 1 + opacity
     over 120-160ms with --ease-apple, written as keyframes whose from-state
     is hidden and natural state is visible, so hosts that disable motion
     (pik's global animation kill-switch) simply render everything visible.
     `scale` is the individual transform property, composing safely with
     hosts' own translate centering.
   - Per-app metric overrides are sanctioned ONLY as token overrides in that
     app's extension layer (shared-components plan §7), never as fights
     against these classes.
   ========================================================================== */

/* ==========================================================================
   1. Component tokens
   Defined once. Metrics are mode-agnostic; color bindings carry fallbacks.
   ========================================================================== */

:root {
  /* ---- Dialog (pik-measured: these are pik's own --dialog-* values) ---- */
  --dialog-bg: var(--bg-surface, #2c2c2c);
  --dialog-border: var(--border-subtle, rgba(255, 255, 255, 0.12));
  --dialog-border-strong: var(--border-strong, color-mix(in srgb, var(--foreground, #d4d4d4) 16%, transparent));
  --dialog-radius: 14px;
  --dialog-shadow: var(--shadow-dialog, var(--shadow-panel, 0 32px 64px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08)));
  --dialog-header-height: 42px;
  --dialog-footer-height: 46px;
  --dialog-body-pad: 16px 20px;
  --dialog-body-gap: 16px;
  --dialog-body-min-height: 48px;
  /* Width tokens — individual dialogs override via their own CSS class */
  --dialog-width: auto;
  --dialog-max-width: min(calc(100vw - 2rem), 32rem);
  --dialog-max-height: min(calc(100dvh - 2rem), 85dvh);
  /* Backdrop: plain dim (pik's perf decision). Blur re-enables via
     --dialog-backdrop-blur (e.g. blur(8px)) in a host's extension layer. */
  --dialog-backdrop: var(--bg-overlay, rgba(0, 0, 0, 0.45));
  --dialog-backdrop-blur: none;
  --dialog-motion: 140ms;

  /* ---- Menu / context menu (chrome.js-measured) ---- */
  --menu-bg: var(--bg-popover, #2c2c2c);
  --menu-border: var(--border-subtle, rgba(255, 255, 255, 0.12));
  --menu-radius: 10px;
  --menu-shadow: var(--shadow-popover, 0 8px 32px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1));
  --menu-pad: 5px;
  --menu-item-height: 28px;
  --menu-font-size: 13px;
  --menu-icon-size: 16px;
  --menu-min-width: 16rem;
  --menu-max-width: 22rem;
  --menu-max-height: min(calc(100dvh - 2rem), 40rem);
  --menu-hover: var(--bg-hover, color-mix(in srgb, var(--foreground, #d4d4d4) 7%, transparent));
  --menu-danger: var(--danger, #ff453a);
  --menu-motion: 120ms;

  /* ---- Inset grouped list (settings) ---- */
  --group-bg: var(--bg-inset, color-mix(in srgb, var(--foreground, #d4d4d4) 4%, transparent));
  --group-border: var(--border-subtle, rgba(255, 255, 255, 0.12));
  --group-radius: 10px;
  --group-title-size: 11px;
  --group-row-min-height: 32px;
  --group-row-pad: 8px 14px;
  --group-row-gap: 16px;
  --group-label-size: 13px;
  --group-hint-size: 10px;

  /* ---- Segmented control (pik-measured) ---- */
  --seg-bg: var(--bg-inset, color-mix(in srgb, var(--foreground, #d4d4d4) 4%, transparent));
  --seg-border: var(--border-subtle, rgba(255, 255, 255, 0.12));
  --seg-radius: 7px;
  --seg-item-radius: 5px;
  --seg-pad: 2px;
  --seg-gap: 2px;
  --seg-item-pad: 4px 12px;
  --seg-font-size: 11px;
  /* Active pill: --primary is the canonical sheet's alias of --accent; the
     --accent binding covers hosts that only speak the Tier-2 names. */
  --seg-active-bg: var(--primary, var(--accent, #007aff));
  --seg-active-text: var(--accent-contrast, var(--primary-foreground, #ffffff));

  /* ---- Switch ---- */
  --switch-track-w: 40px;
  --switch-track-h: 24px;
  --switch-thumb: 20px;
  --switch-inset: 2px;
  --switch-off: var(--bg-active, color-mix(in srgb, var(--foreground, #d4d4d4) 12%, transparent));
  --switch-on: var(--primary, var(--accent, #007aff));
  --switch-thumb-bg: var(--bg-popover, #2c2c2c);
  --switch-duration: 160ms;

  /* ---- Tooltip (pik-measured reference: .tooltip-content) ----
     Apps define shadcn-style --popover/--foreground/--border/--radius, so
     those win where present (pik, register apps); the hub falls through to
     its own --bg-popover/--text-primary family, then to literals. Retune
     every tooltip in the suite from this one token block. */
  --tooltip-bg: var(--popover, var(--bg-popover, #2c2c2c));
  --tooltip-text: var(--foreground, var(--text-primary, #d4d4d4));
  --tooltip-border: var(--border, var(--border-subtle, rgba(255, 255, 255, 0.12)));
  --tooltip-radius: var(--radius, 6px);
  --tooltip-shadow: 0 2px 10px var(--shadow-medium, rgba(0, 0, 0, 0.2));
  --tooltip-max-width: 320px;
  --tooltip-font-size: 0.875rem;
  --tooltip-padding: 0.2rem 0.5rem;
  --tooltip-motion: var(--menu-motion, 120ms);

  /* ---- Popover base ---- */
  --popover-bg: var(--bg-popover, #2c2c2c);
  --popover-border: var(--border-subtle, rgba(255, 255, 255, 0.12));
  --popover-radius: 10px;
  --popover-shadow: var(--shadow-popover, 0 8px 32px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1));
  --popover-pad: 6px;

  /* ---- Color well (pik-measured) ---- */
  --color-well-w: 32px;
  --color-well-h: 22px;
  --color-well-radius: 5px;

  /* ---- Shared motion ---- */
  --suite-ui-ease: var(--ease-apple, cubic-bezier(0.25, 0.1, 0.25, 1));
  --suite-ui-surface-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
}

/* Open/close motion: from-state hidden, natural state visible — a host that
   kills animations (animation: none) renders components immediately. */
@keyframes suite-ui-fade-in {
  from { opacity: 0; }
}
@keyframes suite-ui-pop-in {
  from {
    opacity: 0;
    scale: 0.98;
  }
}

/* ==========================================================================
   2. Density — .suite-ui-dense (the pro-tool mode: kat/ses/pik panels)
   Rows 22-26px, fonts 11px, tighter pads. Re-points the component tokens;
   nothing else about the components changes.
   ========================================================================== */

.suite-ui-dense {
  --dialog-header-height: 34px;
  --dialog-footer-height: 38px;
  --dialog-body-pad: 10px 12px;
  --dialog-body-gap: 10px;
  --dialog-body-min-height: 36px;
  --menu-pad: 4px;
  --menu-radius: 8px;
  --menu-item-height: 22px;
  --menu-font-size: 11px;
  --menu-icon-size: 14px;
  --menu-min-width: 12rem;
  --group-radius: 8px;
  --group-row-min-height: 24px;
  --group-row-pad: 4px 10px;
  --group-row-gap: 10px;
  --group-label-size: 11px;
  --group-hint-size: 10px;
  --group-title-size: 10px;
  --seg-item-pad: 2px 10px;
  --switch-track-w: 34px;
  --switch-track-h: 20px;
  --switch-thumb: 16px;
  --popover-pad: 4px;
}

/* ==========================================================================
   3. Dialog
   ========================================================================== */

.suite-ui-dialog-backdrop {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dialog-backdrop);
  -webkit-backdrop-filter: var(--dialog-backdrop-blur);
  backdrop-filter: var(--dialog-backdrop-blur);
  animation: suite-ui-fade-in var(--dialog-motion) var(--suite-ui-ease);
}

.suite-ui-dialog {
  box-sizing: border-box;
  /* Sizing — per-dialog CSS classes override ONLY via the --dialog-* tokens */
  width: var(--dialog-width);
  max-width: var(--dialog-max-width);
  max-height: var(--dialog-max-height);
  /* Layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
  padding: 0;
  /* Apple HIG aesthetics */
  background-color: var(--dialog-bg);
  border: 1px solid var(--dialog-border-strong);
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  color: var(--text-primary, var(--foreground, #d4d4d4));
  font-family: var(--suite-ui-surface-font);
  -webkit-font-smoothing: antialiased;
  animation: suite-ui-pop-in var(--dialog-motion) var(--suite-ui-ease);
}

.suite-ui-dialog-header {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--dialog-header-height);
  padding: 0 20px;
  border-bottom: 1px solid var(--dialog-border);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.suite-ui-dialog-body {
  box-sizing: border-box;
  flex: 1 1 auto;
  /* Reserve the box while async content loads (anti-CLS) */
  min-height: var(--dialog-body-min-height);
  overflow-y: auto;
  padding: var(--dialog-body-pad);
  display: flex;
  flex-direction: column;
  gap: var(--dialog-body-gap);
}

.suite-ui-dialog-footer {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--dialog-footer-height);
  padding: 0 20px;
  border-top: 1px solid var(--dialog-border);
}

/* Two-column shell variant (settings-scale dialogs: sidebar nav + content).
   The base box is a column stack sized for header/body/footer shells; a
   sidebar dialog needs the row direction and the 56rem settings width, so
   this sanctioned variant re-points the size tokens and flips the axis
   (plan §7) instead of hosts fighting the base box with utilities. */
.suite-ui-dialog-wide {
  --dialog-width: 100%;
  --dialog-max-width: min(calc(100vw - 2rem), 56rem);
  --dialog-max-height: min(calc(100dvh - 3rem), 85dvh);
  flex-direction: row;
}

/* ==========================================================================
   4. Menu / context menu
   The visual surface only: hosts position the root menu (fixed + clamped)
   and run the state store, outside-click, Escape and keyboard navigation.
   Width follows content (w-max behavior) within min/max bounds.
   ========================================================================== */

.suite-ui-menu {
  box-sizing: border-box;
  min-width: var(--menu-min-width);
  width: max-content;
  max-width: var(--menu-max-width);
  max-height: var(--menu-max-height);
  overflow-y: auto;
  padding: var(--menu-pad);
  background-color: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  color: var(--text-primary, var(--foreground, #d4d4d4));
  font-family: var(--suite-ui-surface-font);
  font-size: var(--menu-font-size);
  z-index: 50;
  animation: suite-ui-pop-in var(--menu-motion) var(--suite-ui-ease);
}

.suite-ui-menu-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--menu-item-height);
  padding: 0 10px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 100ms ease, color 100ms ease;
}

.suite-ui-menu-item:hover,
.suite-ui-menu-item:focus-visible,
.suite-ui-menu-item.is-active {
  background: var(--menu-hover);
  outline: none;
}

.suite-ui-menu-item:disabled,
.suite-ui-menu-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

.suite-ui-menu-icon,
.suite-ui-menu-check {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  color: var(--text-secondary, var(--text-muted, #a1a1a1));
}

.suite-ui-menu-icon > svg,
.suite-ui-menu-check > svg {
  width: 100%;
  height: 100%;
}

.suite-ui-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.suite-ui-menu-shortcut {
  flex: none;
  margin-left: auto;
  padding-left: 16px;
  font-size: calc(var(--menu-font-size) - 1px);
  color: var(--text-tertiary, var(--text-muted, #a1a1a1));
}

.suite-ui-menu-danger,
.suite-ui-menu-danger .suite-ui-menu-icon {
  color: var(--menu-danger);
}

.suite-ui-menu-separator {
  box-sizing: border-box;
  height: 1px;
  margin: 4px 8px;
  flex: none;
  background: var(--menu-border);
}

.suite-ui-menu-section {
  box-sizing: border-box;
  padding: 6px 10px 2px;
  font-size: calc(var(--menu-font-size) - 2px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--text-muted, #a1a1a1));
  white-space: nowrap;
}

/* Submenu flyout: the host clamps it into the viewport; position: fixed
   keeps it unclipped by the root menu's overflow scrolling. Pair it with
   .suite-ui-menu for the surface. */
.suite-ui-menu-flyout {
  position: fixed;
  min-width: 12rem;
  max-width: 20rem;
}

/* ==========================================================================
   5. Inset grouped list (settings)
   ========================================================================== */

.suite-ui-group {
  box-sizing: border-box;
  background-color: var(--group-bg);
  border: 1px solid var(--group-border);
  border-radius: var(--group-radius);
  overflow: hidden;
}

.suite-ui-group-title {
  box-sizing: border-box;
  font-size: var(--group-title-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, var(--text-muted, #a1a1a1));
  padding: 6px 14px 2px;
}

.suite-ui-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--group-row-gap);
  padding: var(--group-row-pad);
  min-height: var(--group-row-min-height);
}

.suite-ui-row + .suite-ui-row {
  border-top: 1px solid var(--group-border);
}

.suite-ui-row-label {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--group-label-size);
  color: var(--text-primary, var(--foreground, #d4d4d4));
}

.suite-ui-row-hint {
  box-sizing: border-box;
  font-size: var(--group-hint-size);
  line-height: 1.3;
  color: var(--text-tertiary, var(--text-muted, #a1a1a1));
}

.suite-ui-row-control {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   6. Segmented control
   ========================================================================== */

.suite-ui-segmented {
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  background-color: var(--seg-bg);
  border: 1px solid var(--seg-border);
  border-radius: var(--seg-radius);
  padding: var(--seg-pad);
  gap: var(--seg-gap);
  user-select: none;
  -webkit-user-select: none;
}

.suite-ui-segmented-item {
  box-sizing: border-box;
  border: none;
  background: none;
  padding: var(--seg-item-pad);
  border-radius: var(--seg-item-radius);
  font: inherit;
  font-size: var(--seg-font-size);
  font-weight: 500;
  color: var(--text-secondary, var(--text-muted, #a1a1a1));
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 100ms ease, color 100ms ease;
}

.suite-ui-segmented-item:hover {
  color: var(--text-primary, var(--foreground, #d4d4d4));
}

.suite-ui-segmented-item.is-active {
  background-color: var(--seg-active-bg);
  color: var(--seg-active-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.suite-ui-segmented-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   7. Switch (CSS-only: track + ::after thumb on [role="switch"])
   Behavior (aria-checked, click handling) stays per-application.
   ========================================================================== */

.suite-ui-switch {
  box-sizing: border-box;
  position: relative;
  flex: none;
  width: var(--switch-track-w);
  height: var(--switch-track-h);
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: var(--switch-off);
  cursor: pointer;
  transition: background-color var(--switch-duration) var(--suite-ui-ease);
}

.suite-ui-switch::after {
  content: "";
  position: absolute;
  top: var(--switch-inset);
  left: var(--switch-inset);
  width: var(--switch-thumb);
  height: var(--switch-thumb);
  border-radius: 50%;
  background-color: var(--switch-thumb-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--switch-duration) var(--suite-ui-ease);
}

.suite-ui-switch[aria-checked="true"] {
  background-color: var(--switch-on);
}

.suite-ui-switch[aria-checked="true"]::after {
  transform: translateX(calc(var(--switch-track-w) - var(--switch-thumb) - 2 * var(--switch-inset)));
}

.suite-ui-switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.suite-ui-switch:focus-visible {
  outline: 2px solid var(--border-focus, var(--ring, var(--seg-active-bg)));
  outline-offset: 2px;
}

/* ==========================================================================
   8. Tooltip
   ========================================================================== */

.suite-ui-tooltip {
  box-sizing: border-box;
  width: auto;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding);
  background-color: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
  border-radius: var(--tooltip-radius);
  box-shadow: var(--tooltip-shadow);
  color: var(--tooltip-text);
  font-family: var(--suite-ui-surface-font);
  font-size: var(--tooltip-font-size);
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  z-index: 50;
  animation: suite-ui-fade-in var(--tooltip-motion) var(--suite-ui-ease);
}

/* Keyboard-shortcut hint beside the tooltip label (e.g. "Send  ⌘⏎") */
.suite-ui-tooltip-shortcut {
  margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78em;
  color: color-mix(in srgb, var(--tooltip-text) 65%, transparent);
}

/* ==========================================================================
   9. Popover base — the shared floating surface; the host positions it
   ========================================================================== */

.suite-ui-popover {
  box-sizing: border-box;
  padding: var(--popover-pad);
  background-color: var(--popover-bg);
  border: 1px solid var(--popover-border);
  border-radius: var(--popover-radius);
  box-shadow: var(--popover-shadow);
  color: var(--text-primary, var(--foreground, #d4d4d4));
  font-family: var(--suite-ui-surface-font);
  z-index: 50;
  animation: suite-ui-pop-in var(--menu-motion) var(--suite-ui-ease);
}

/* ==========================================================================
   10. Color well (pik-measured)
   ========================================================================== */

.suite-ui-color-well {
  box-sizing: border-box;
  position: relative;
  flex: none;
  width: var(--color-well-w);
  height: var(--color-well-h);
  border: 1px solid var(--group-border);
  border-radius: var(--color-well-radius);
  overflow: hidden;
  cursor: pointer;
}

.suite-ui-color-well input[type="color"] {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: none;
  padding: 0;
  cursor: pointer;
}