@oh-just-another/react-ui 0.57.0

package/src/styles.css

@@ -0,0 +1,1502 @@
+/**
+ * Diagram UI stylesheet. Imported once by the host:
+ *
+ *   import "@oh-just-another/react-ui/styles.css";
+ *
+ * Provides:
+ *   • CSS variables for theme (`:root` + `[data-theme="dark"]`)
+ *   • Utility classes prefixed `du-` ("diagram ui") so they don't
+ *     collide with host's own styles.
+ *   • Per-component blocks (.du-icon-button, .du-top-bar, ...).
+ *
+ * Hosts can override any variable in their own stylesheet for
+ * theming — every component reads colours / sizes through these
+ * variables, never hard-coded.
+ *
+ * Colour values mirror `@oh-just-another/tokens` — CSS can't import
+ * TypeScript, so values are hand-copied with comments pointing
+ * back to the token name. Keep this in sync when you change a
+ * value in `packages/tokens/src/colors.ts`.
+ */
+
+:root {
+  /* --- Surfaces (from UI_SURFACE.light) --- */
+  --du-canvas-bg: #f5f5f5;                              /* UI_SURFACE.light.canvas */
+  --du-ui-bg: rgba(255, 255, 255, 0.95);                /* UI_SURFACE.light.bg */
+  --du-ui-bg-solid: #ffffff;                            /* UI_SURFACE.light.bgSolid */
+  --du-ui-border: rgba(0, 0, 0, 0.08);                  /* UI_SURFACE.light.border */
+  --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+
+  /* --- Text (from UI_SURFACE.light) --- */
+  --du-text: #1a1a1a;                                   /* UI_SURFACE.light.text */
+  --du-text-muted: #6b6b6b;                             /* UI_SURFACE.light.textMuted */
+  --du-text-on-accent: #ffffff;
+
+  /* --- Accent (from UI_ACCENT.light — Radix iris) --- */
+  --du-accent: #5b5bd6;                                 /* UI_ACCENT.light.accent (iris.iris9) */
+  --du-accent-hover: #5151cd;                           /* UI_ACCENT.light.accentHover (iris.iris10) */
+  --du-danger: #e54d2e;                                 /* UI_ACCENT.light.danger (tomato.tomato9) */
+
+  /* --- Selected (tonal, modern-style) --- */
+  /* Active toolbar / icon buttons get a *muted* tonal fill so they
+     read as "this state is selected" without hijacking the eye like
+     a saturated accent fill would. The icon switches to the accent
+     hue, the background stays close to the surface. */
+  --du-selected-bg: #e6e7ff;                            /* UI_ACCENT.light.selectedBg (iris.iris4) */
+  --du-selected-fg: #5753c6;                            /* UI_ACCENT.light.selectedFg (iris.iris11) */
+
+  /* --- Sizing --- */
+  --du-radius: 10px;
+  --du-radius-sm: 6px;
+  --du-radius-lg: 14px;
+  --du-button-size: 36px;
+  --du-button-size-sm: 32px;
+  --du-icon-size: 18px;
+  --du-gap: 8px;
+  --du-gap-sm: 4px;
+  --du-pad: 8px;
+  --du-pad-sm: 4px;
+  --du-hover-overlay: rgba(0, 0, 0, 0.05);
+  --du-bar-inset: 12px;
+  --du-z-canvas: 1;
+  --du-z-ui: 100;
+  --du-z-modal: 1000;
+}
+
+/**
+ * Theme resolution priority (highest wins):
+ *   [data-theme="light"]  — host forced light.
+ *   [data-theme="dark"]   — host forced dark.
+ *   @media prefers-color-scheme: dark → :root — OS-derived dark when
+ *                                       no data-theme is present.
+ *   :root                 — light defaults.
+ *
+ * Hosts set `data-theme` via the Diagram component's `theme` prop
+ * ("light" / "dark" / "system" — "system" omits the attribute so
+ * the media query takes over).
+ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* All values mirror UI_SURFACE.dark + UI_ACCENT.dark from
+       `@oh-just-another/tokens`. */
+    --du-canvas-bg: #121212;                            /* UI_SURFACE.dark.canvas */
+    --du-ui-bg: rgba(35, 35, 35, 0.95);                 /* UI_SURFACE.dark.bg */
+    --du-ui-bg-solid: #252525;                          /* UI_SURFACE.dark.bgSolid */
+    --du-ui-border: rgba(255, 255, 255, 0.08);          /* UI_SURFACE.dark.border */
+    --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+    --du-text: #e8e8e8;                                 /* UI_SURFACE.dark.text */
+    --du-text-muted: #9a9a9a;                           /* UI_SURFACE.dark.textMuted */
+    --du-accent: #5b5bd6;                               /* UI_ACCENT.dark.accent (irisDark.iris9) */
+    --du-accent-hover: #6e6ade;                         /* UI_ACCENT.dark.accentHover (irisDark.iris10) */
+    --du-hover-overlay: rgba(255, 255, 255, 0.06);      /* UI_SURFACE.dark.hoverOverlay */
+    --du-selected-bg: #262a65;                          /* UI_ACCENT.dark.selectedBg (irisDark.iris4) */
+    --du-selected-fg: #b1a9ff;                          /* UI_ACCENT.dark.selectedFg (irisDark.iris11) */
+  }
+}
+
+[data-theme="light"] {
+  /* Same as :root — explicit override so a host that toggles
+     `data-theme` between "light" / "dark" / unset still picks
+     up the light palette under all conditions. Mirrors
+     UI_SURFACE.light + UI_ACCENT.light. */
+  --du-canvas-bg: #f5f5f5;
+  --du-ui-bg: rgba(255, 255, 255, 0.95);
+  --du-ui-bg-solid: #ffffff;
+  --du-ui-border: rgba(0, 0, 0, 0.08);
+  --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  --du-text: #1a1a1a;
+  --du-text-muted: #6b6b6b;
+  --du-accent: #5b5bd6;                                 /* iris.iris9 */
+  --du-accent-hover: #5151cd;                           /* iris.iris10 */
+  --du-hover-overlay: rgba(0, 0, 0, 0.05);
+  --du-selected-bg: #e6e7ff;                            /* iris.iris4 */
+  --du-selected-fg: #5753c6;                            /* iris.iris11 */
+}
+
+/* ------------------------------------------------------------------ */
+/* Legacy variable aliases — kept so the older components (MainMenu,  */
+/* ContextMenu, Modal, HelpDialog) that read `var(--panel)` /         */
+/* `var(--text)` / `var(--button-bg)` etc. still pick up the active   */
+/* theme without being rewritten to the `--du-*` namespace.           */
+/*                                                                    */
+/* Hosts can still override the legacy names individually — these     */
+/* are defaults that *forward* to the unified theme variables.        */
+/* ------------------------------------------------------------------ */
+:root {
+  --bg: var(--du-canvas-bg);
+  --panel: var(--du-ui-bg-solid);
+  --surface: var(--du-ui-bg-solid);
+  --text: var(--du-text);
+  --muted: var(--du-text-muted);
+  --border: var(--du-ui-border);
+  --button-bg: var(--du-ui-bg-solid);
+  --button-hover-bg: var(--du-ui-bg);
+  --accent: var(--du-accent);
+  --menu-bg: var(--du-ui-bg-solid);
+  --menu-text: var(--du-text);
+  --menu-border: var(--du-ui-border);
+  --menu-divider: var(--du-ui-border);
+}
+
+[data-theme="dark"] {
+  /* Mirrors UI_SURFACE.dark + UI_ACCENT.dark from `@oh-just-another/tokens`. */
+  --du-canvas-bg: #121212;
+  --du-ui-bg: rgba(35, 35, 35, 0.95);
+  --du-ui-bg-solid: #252525;
+  --du-ui-border: rgba(255, 255, 255, 0.08);
+  --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+  --du-text: #e8e8e8;
+  --du-text-muted: #9a9a9a;
+  --du-accent: #5b5bd6;                                 /* irisDark.iris9 */
+  --du-accent-hover: #6e6ade;                           /* irisDark.iris10 */
+  --du-hover-overlay: rgba(255, 255, 255, 0.06);
+  --du-selected-bg: #262a65;                            /* irisDark.iris4 */
+  --du-selected-fg: #b1a9ff;                            /* irisDark.iris11 */
+}
+
+/* ------------------------------------------------------------------ */
+/* UI layer — absolute overlay above the canvas surface.              */
+/* pointer-events: none on the wrapper, auto on children, so the      */
+/* canvas keeps receiving pointer events anywhere the UI isn't drawn. */
+/* ------------------------------------------------------------------ */
+.du-ui-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: var(--du-z-ui);
+}
+
+.du-ui-layer > * {
+  pointer-events: auto;
+}
+
+/* ------------------------------------------------------------------ */
+/* Bars — top / bottom 3-zone layout (left / center / right).         */
+/* ------------------------------------------------------------------ */
+.du-bar {
+  position: absolute;
+  left: var(--du-bar-inset);
+  right: var(--du-bar-inset);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--du-gap);
+  pointer-events: none;
+}
+
+.du-bar > * {
+  pointer-events: auto;
+}
+
+.du-bar-top {
+  top: var(--du-bar-inset);
+}
+
+.du-bar-bottom {
+  bottom: var(--du-bar-inset);
+}
+
+.du-bar-zone {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--du-gap);
+}
+
+.du-bar-zone-center {
+  margin: 0 auto;
+}
+
+/* ------------------------------------------------------------------ */
+/* Icon button — square clickable. Two visual modes:                  */
+/*   1. Standalone (outside `du-button-group`): full pill with        */
+/*      surface, border, shadow.                                      */
+/*   2. Inside `du-button-group`: transparent surface, subtle radius, */
+/*      lets the group's pill chrome carry the framing.               */
+/* ------------------------------------------------------------------ */
+.du-icon-button {
+  width: var(--du-button-size);
+  height: var(--du-button-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--du-ui-bg);
+  color: var(--du-text);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  box-shadow: var(--du-ui-shadow);
+  transition: background 0.12s ease, color 0.12s ease, transform 0.05s ease;
+  padding: 0;
+  outline: none;
+  user-select: none;
+}
+
+.du-icon-button:hover:not(:disabled) {
+  background: var(--du-ui-bg-solid);
+}
+
+.du-icon-button:active:not(:disabled) {
+  transform: scale(0.96);
+}
+
+.du-icon-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.du-icon-button:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: 2px;
+}
+
+.du-icon-button[aria-pressed="true"],
+.du-icon-button.is-active {
+  background: var(--du-selected-bg);
+  color: var(--du-selected-fg);
+  border-color: var(--du-selected-bg);
+}
+
+.du-icon-button[aria-pressed="true"]:hover:not(:disabled),
+.du-icon-button.is-active:hover:not(:disabled) {
+  /* Slight tint shift on hover — keeps the "selected" cue but
+     acknowledges the cursor. Same hue family, marginally darker. */
+  background: color-mix(in srgb, var(--du-selected-bg) 90%, var(--du-text) 10%);
+}
+
+.du-icon-button-sm {
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+  font-size: 12px;
+}
+
+/**
+ * Flat modifier — strips the standalone pill chrome (background,
+ * border, shadow) and adopts the same look as an IconButton sitting
+ * inside a `du-button-group`. Use this when a button has to live
+ * inside a container that the descendant selector can't reach (e.g.
+ * the MainMenu trigger, which is wrapped in a positioning <div> so
+ * its dropdown can be `position: absolute`).
+ */
+.du-icon-button-flat {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: var(--du-radius-sm);
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+}
+
+.du-icon-button-flat:hover:not(:disabled) {
+  background: var(--du-hover-overlay);
+}
+
+/* ------------------------------------------------------------------ */
+/* Button group — pill that wraps one or more IconButtons. Group      */
+/* carries the surface, border, shadow; the buttons inside drop       */
+/* their own chrome so the row reads as one cohesive control.         */
+/* Padding + gap match standard's tool bar feel.                    */
+/* ------------------------------------------------------------------ */
+.du-button-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  background: var(--du-ui-bg);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+  padding: var(--du-pad-sm);
+  /* No `overflow: hidden` — a child popup (MainMenu dropdown) must
+     be able to render outside the group's bounds. */
+}
+
+/* Vertical variant — the left creation dock. Stacks buttons in a
+   column; dividers (rendered inline by <Toolbar>) become horizontal. */
+.du-button-group-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.du-button-group > .du-icon-button {
+  border: none;
+  box-shadow: none;
+  border-radius: var(--du-radius-sm);
+  background: transparent;
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+}
+
+/* Vertical dock buttons are square + centred (icon-only tools). */
+.du-button-group-vertical > .du-icon-button {
+  width: var(--du-button-size-sm) !important;
+  min-width: var(--du-button-size-sm) !important;
+  padding: 0 !important;
+}
+
+/* ------------------------------------------------------------------ */
+/* Mobile / coarse-pointer chrome (keep the 640px breakpoint in sync   */
+/* with MOBILE_MAX_WIDTH_PX in constants.ts).                          */
+/* ------------------------------------------------------------------ */
+@media (pointer: coarse), (max-width: 640px) {
+  /* Bars clear the notch / home indicator + rounded corners. */
+  .du-bar-top {
+    top: calc(var(--du-bar-inset) + env(safe-area-inset-top, 0px));
+  }
+  .du-bar-bottom {
+    bottom: calc(var(--du-bar-inset) + env(safe-area-inset-bottom, 0px));
+  }
+  .du-bar {
+    left: calc(var(--du-bar-inset) + env(safe-area-inset-left, 0px));
+    right: calc(var(--du-bar-inset) + env(safe-area-inset-right, 0px));
+  }
+
+  /* Vertical creation dock: ≥44px touch targets; scroll inside the dock
+     when a short screen can't fit every tool. */
+  .du-button-group-vertical {
+    max-height: calc(
+      100vh - 2 * var(--du-bar-inset) - env(safe-area-inset-top, 0px) -
+        env(safe-area-inset-bottom, 0px)
+    );
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+  .du-button-group-vertical::-webkit-scrollbar {
+    display: none;
+  }
+  .du-button-group-vertical > .du-icon-button {
+    width: 44px !important;
+    min-width: 44px !important;
+    height: 44px !important;
+  }
+}
+
+.du-button-group > .du-icon-button:hover:not(:disabled) {
+  background: var(--du-hover-overlay);
+}
+
+.du-button-group > .du-icon-button[aria-pressed="true"],
+.du-button-group > .du-icon-button.is-active {
+  background: var(--du-selected-bg);
+  color: var(--du-selected-fg);
+}
+
+.du-button-group > .du-icon-button[aria-pressed="true"]:hover:not(:disabled),
+.du-button-group > .du-icon-button.is-active:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--du-selected-bg) 90%, var(--du-text) 10%);
+}
+
+/* ------------------------------------------------------------------ */
+/* Floating side panel — used by Library / SelectedShapeActions.      */
+/* Fixed-width, fixed-height-with-scroll, sits flush against the      */
+/* corresponding side of the canvas with a `du-bar-inset` margin.     */
+/* ------------------------------------------------------------------ */
+.du-side-panel {
+  position: absolute;
+  top: calc(var(--du-bar-inset) + var(--du-button-size) + var(--du-gap));
+  bottom: calc(var(--du-bar-inset) + var(--du-button-size) + var(--du-gap));
+  width: 240px;
+  background: var(--du-ui-bg);
+  color: var(--du-text);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.du-side-panel-left {
+  left: var(--du-bar-inset);
+}
+
+.du-side-panel-right {
+  right: var(--du-bar-inset);
+}
+
+/* Sheet mode — fills the parent BottomSheet; the sheet provides the
+   surface, so drop the floating-pill position / border / shadow. */
+.du-side-panel.du-side-panel-sheet {
+  position: static;
+  top: auto;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.du-side-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--du-gap-sm);
+  padding: var(--du-pad-sm) var(--du-pad-sm) var(--du-pad-sm) var(--du-pad);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--du-text-muted);
+}
+
+/* Hide the header when it's empty (no action buttons configured). */
+.du-side-panel-header:empty {
+  display: none;
+}
+
+/* Auto-height variant — content hugs its natural height instead
+   of stretching from top to bottom of the canvas area. Used by
+   the Properties panel so it shrinks to whatever the inspector
+   sections need. The Library panel keeps the default full-height
+   so its long grid can scroll. */
+.du-side-panel-auto-height {
+  bottom: auto;
+  max-height: calc(
+    100% - 2 * var(--du-bar-inset) - 2 * var(--du-button-size) - 2 * var(--du-gap)
+  );
+}
+
+.du-side-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--du-pad);
+}
+
+/* Variant for hosts that lay out their own grid / list inside the
+   panel body (e.g. <Palette>) and would otherwise have to subtract
+   the body's padding from their own paddings. Keeps overflow + flex
+   behaviour. */
+.du-side-panel-body-flush {
+  padding: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Palette (template library content) — sectioned grid of icon tiles. */
+/* No per-tile borders, no per-section dividers — visual structure    */
+/* comes from spacing alone so the panel reads as one calm surface.   */
+/* ------------------------------------------------------------------ */
+.du-palette {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  color: var(--du-text);
+  width: 100%;
+}
+
+.du-palette-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.du-palette-section {
+  padding: 0 var(--du-pad) var(--du-pad-sm);
+}
+
+.du-palette-category {
+  width: 100%;
+  background: transparent;
+  color: var(--du-text-muted);
+  border: none;
+  padding: 10px 0 6px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--du-gap-sm);
+}
+
+.du-palette-category-caret {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.6;
+}
+
+.du-palette-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--du-gap-sm);
+  align-content: start;
+  padding: 0 var(--du-pad) var(--du-pad-sm);
+}
+
+/* `.du-palette-section > .du-palette-grid` already gets padding via
+   .du-palette-section; remove the duplicate to avoid double margin. */
+.du-palette-section > .du-palette-grid {
+  padding: 0;
+}
+
+/* Compact list layout (modern-style templates panel) — single column of
+   icon + name rows. Denser than the grid; the label reads left-aligned
+   beside a small icon. */
+.du-palette-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 var(--du-pad) var(--du-pad-sm);
+}
+.du-palette-section > .du-palette-list {
+  padding: 0;
+}
+.du-palette-list .du-palette-item {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  aspect-ratio: auto;
+  gap: 8px;
+  padding: 5px 8px;
+  text-align: left;
+  font-size: 12px;
+  line-height: 1.2;
+}
+.du-palette-list .du-palette-item-icon {
+  width: 20px !important;
+  height: 20px !important;
+  flex: 0 0 auto;
+}
+.du-palette-list .du-palette-item-label {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.du-palette-empty {
+  padding: 24px 12px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--du-text-muted);
+}
+
+.du-palette-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  aspect-ratio: 1;
+  padding: 6px 4px;
+  background: transparent;
+  color: var(--du-text);
+  border: none;
+  border-radius: var(--du-radius-sm);
+  cursor: grab;
+  text-align: center;
+  font-size: 10px;
+  line-height: 1.1;
+  transition: background 0.12s ease;
+}
+
+.du-palette-item:hover {
+  background: var(--du-hover-overlay);
+}
+
+.du-palette-item:active {
+  cursor: grabbing;
+}
+
+.du-palette-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--du-text);
+}
+
+.du-palette-item-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.du-palette-item-label {
+  /* Two-line clamp so long names don't push the tile out of square. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ------------------------------------------------------------------ */
+/* Property panel — modern-style sectioned inspector.             */
+/* Sections are stacked top-to-bottom; each one has a tiny uppercase  */
+/* label, then a row of controls (color swatches, segmented buttons,  */
+/* slider). No card chrome — visual structure comes from spacing.     */
+/* ------------------------------------------------------------------ */
+.du-prop-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 4px 0;
+  color: var(--du-text);
+  font-size: 12px;
+}
+
+.du-prop-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.du-prop-section-label {
+  margin: 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--du-text-muted);
+}
+
+.du-prop-row {
+  display: flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  flex-wrap: wrap;
+}
+
+.du-prop-row-label {
+  font-size: 11px;
+  color: var(--du-text-muted);
+  min-width: 48px;
+}
+
+.du-prop-empty {
+  font-style: italic;
+  color: var(--du-text-muted);
+  font-size: 12px;
+}
+
+/* modern-style flat segmented control inside the panel:
+   no card chrome on the ButtonGroup wrapper. The buttons still
+   read as a row through their tonal `is-active` fill + hover. */
+.du-prop-panel .du-button-group {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  gap: 2px;
+}
+
+/* Tighter active state inside the panel (smaller buttons, same
+   tonal pair). Keeps the rest of the toolbar unaffected. */
+.du-prop-panel .du-button-group > .du-icon-button {
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+}
+
+/* Checkbox row — small native input + label. Used by Corners
+   "Auto radius" toggle. */
+.du-prop-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--du-text);
+  user-select: none;
+}
+
+.du-prop-checkbox input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--du-selected-fg);
+  cursor: pointer;
+}
+
+/* ------------------------------------------------------------------ */
+/* Colour swatch grid — modern-style fixed 26 × 26 cell with a    */
+/* 24 × 24 fill that grows on hover to fill the cell. Selected cells  */
+/* get a 2 px tonal ring on the OUTER cell so the ring lands beside   */
+/* the colour, not over it.                                           */
+/* ------------------------------------------------------------------ */
+.du-swatch-grid {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: 232px; /* 8 cells (26 × 8 = 208) + 7 gaps × 4 = ~232 */
+}
+
+.du-swatch {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Reserve the ring space so width never changes on selection. */
+  box-shadow: inset 0 0 0 0 transparent;
+  transition: box-shadow 0.12s ease;
+  /* Suppress the UA tap-highlight on iOS so the cell looks clean
+     while the user drags through swatches. */
+  -webkit-tap-highlight-color: transparent;
+}
+
+.du-swatch:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--du-accent);
+}
+
+.du-swatch[aria-checked="true"] {
+  box-shadow: inset 0 0 0 2px var(--du-selected-fg);
+}
+
+.du-swatch-fill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--du-radius-sm);
+  border: 1px solid var(--du-ui-border);
+  box-sizing: border-box;
+  transition: width 0.12s ease, height 0.12s ease, border-color 0.12s ease;
+}
+
+.du-swatch:hover .du-swatch-fill,
+.du-swatch:focus-visible .du-swatch-fill {
+  width: 26px;
+  height: 26px;
+}
+
+/* Clear (×) + custom-picker (+) cells use the same chrome as a
+   regular swatch but with a neutral fill + glyph slot. */
+.du-swatch-fill-blank {
+  background: var(--du-ui-bg-solid);
+  color: var(--du-text-muted);
+}
+
+.du-swatch-custom .du-swatch-fill {
+  background: var(--du-ui-bg-solid);
+  color: var(--du-text-muted);
+}
+
+.du-swatch-color-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Slider — themed native <input type=range> + value badge.           */
+/* ------------------------------------------------------------------ */
+.du-slider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.du-slider-track {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.du-slider-track::-webkit-slider-runnable-track {
+  height: 4px;
+  background: var(--du-selected-bg);
+  border-radius: 2px;
+}
+
+.du-slider-track::-moz-range-track {
+  height: 4px;
+  background: var(--du-selected-bg);
+  border-radius: 2px;
+  border: none;
+}
+
+.du-slider-track::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--du-selected-fg);
+  border-radius: 50%;
+  border: 2px solid var(--du-ui-bg-solid);
+  margin-top: -5px;
+  cursor: grab;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.du-slider-track::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: var(--du-selected-fg);
+  border-radius: 50%;
+  border: 2px solid var(--du-ui-bg-solid);
+  cursor: grab;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.du-slider-track:focus {
+  outline: none;
+}
+
+.du-slider-track:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--du-accent);
+  outline-offset: 2px;
+}
+
+.du-slider-value {
+  min-width: 36px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  color: var(--du-text-muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Number input — small themed `<input type=number>`.                 */
+/* ------------------------------------------------------------------ */
+.du-number-input {
+  width: 64px;
+  height: 24px;
+  box-sizing: border-box;
+  background: var(--du-ui-bg-solid);
+  color: var(--du-text);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-sm);
+  padding: 0 6px;
+  font: inherit;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+}
+
+.du-number-input:focus {
+  border-color: var(--du-accent);
+}
+
+/* Search input row — sits between the header and the body. */
+.du-side-panel-search {
+  position: relative;
+  padding: var(--du-pad-sm) var(--du-pad);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+.du-side-panel-search input[type="search"] {
+  width: 100%;
+  height: 28px;
+  box-sizing: border-box;
+  background: var(--du-ui-bg-solid);
+  color: var(--du-text);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-sm);
+  padding: 0 8px 0 26px;
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+}
+
+.du-side-panel-search input[type="search"]::placeholder {
+  color: var(--du-text-muted);
+}
+
+.du-side-panel-search input[type="search"]:focus {
+  border-color: var(--du-accent);
+}
+
+.du-side-panel-search-icon {
+  position: absolute;
+  left: calc(var(--du-pad) + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--du-text-muted);
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* Toast for reset-to-content visibility hint.                        */
+/* ------------------------------------------------------------------ */
+.du-pill-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  padding: 0 12px;
+  height: var(--du-button-size);
+  background: var(--du-ui-bg);
+  color: var(--du-text);
+  border: 1px solid var(--du-ui-border);
+  border-radius: 999px;
+  box-shadow: var(--du-ui-shadow);
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background 0.15s ease, transform 0.05s ease;
+}
+
+.du-pill-button:hover {
+  background: var(--du-ui-bg-solid);
+}
+
+.du-pill-button:active {
+  transform: scale(0.96);
+}
+
+/* ------------------------------------------------------------------ */
+/* Tooltip — singleton popup rendered via portal by <TooltipProvider>.*/
+/* Pointer-events-none so it never blocks hover on neighbour buttons. */
+/* ------------------------------------------------------------------ */
+.du-tooltip {
+  background: var(--du-text);
+  color: var(--du-ui-bg-solid);
+  padding: 4px 8px;
+  border-radius: var(--du-radius-sm);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  box-shadow: var(--du-ui-shadow);
+  font-family: inherit;
+  max-width: 260px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Help dialog — modern-style hotkey cheatsheet.                  */
+/* Each section is an "island" with bordered rows; each key is its    */
+/* own pill `<kbd>` rendered with the same tonal selected fill as     */
+/* active toolbar buttons so the visual language stays consistent.    */
+/* ------------------------------------------------------------------ */
+.du-help-islands {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.du-help-island {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.du-help-island-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--du-text);
+  letter-spacing: 0.2px;
+}
+
+.du-help-island-rows {
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  overflow: hidden;
+}
+
+.du-help-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--du-text);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+.du-help-row:last-child {
+  border-bottom: none;
+}
+
+.du-help-row-label {
+  /* Label may wrap on narrow viewports; keys stay on a single line. */
+  min-width: 0;
+}
+
+.du-help-keys {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.du-help-keys-separator {
+  font-size: 11px;
+  color: var(--du-text-muted);
+  padding: 0 2px;
+}
+
+.du-help-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  background: var(--du-selected-bg);
+  color: var(--du-selected-fg);
+  border-radius: var(--du-radius-sm);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.du-help-platform-badge {
+  font-size: 11px;
+  color: var(--du-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Selection floating panel — modern-style horizontal toolbar that      */
+/* hovers above the selection bbox. Position is set inline via        */
+/* `transform:translate(...)` by floating-ui — these rules cover only */
+/* the visual chrome (pill background, shadow, animation, layout of   */
+/* inline controls + their popover triggers).                         */
+/* ------------------------------------------------------------------ */
+/* Fade-in is handled inline via the `positioned` state in
+   <SelectionFloatingPanel> — a CSS animation here would override the
+   inline `transform: translate(...)` floating-ui writes, causing
+   the panel to flash at the (0, 0) origin before snapping into
+   place. */
+
+.du-sel-panel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+  padding: var(--du-pad-sm);
+  font-size: 12px;
+  color: var(--du-text);
+  max-width: calc(100vw - 32px);
+  /* Allow horizontal scroll within the pill when too many controls
+     are visible; `shift` middleware clamps the outer position but
+     a panel wider than viewport still needs internal overflow. */
+  overflow-x: auto;
+  overflow-y: visible;
+  scrollbar-width: thin;
+}
+
+/* ---- Mobile bottom-sheet property panel (modern-style) ---- */
+/* Fixed dock at the bottom edge; transparent container so only the
+   panel itself catches touches. Honours the home-indicator safe area. */
+.du-sel-panel-dock {
+  position: fixed;
+  left: 0;
+  right: 0;
+  /* Sit ABOVE the bottom bar (zoom / help) + the home-indicator safe area
+     so the two don't overlap. Mirrors the side-panel top offset. */
+  bottom: calc(
+    var(--du-bar-inset) + var(--du-button-size) + var(--du-gap) +
+      env(safe-area-inset-bottom, 0px)
+  );
+  z-index: 1500;
+  display: flex;
+  justify-content: center;
+  padding: 0 8px;
+  pointer-events: none;
+}
+
+/* Full-width sheet: a primary row + (when ⋮ is tapped) a wrapped
+   overflow grid below. Overrides the floating pill's row/scroll chrome. */
+.du-sel-panel-mobile {
+  pointer-events: auto;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: 560px;
+  overflow: visible;
+  gap: 6px;
+  padding: 8px;
+}
+.du-sel-mobile-row {
+  display: flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  width: 100%;
+}
+/* Primary controls scroll horizontally if they don't fit; the ⋮ button
+   stays pinned to the right, always reachable. */
+.du-sel-mobile-primary {
+  display: flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.du-sel-mobile-primary::-webkit-scrollbar {
+  display: none;
+}
+.du-sel-mobile-expand {
+  flex: 0 0 auto;
+}
+.du-sel-mobile-overflow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  border-top: 1px solid var(--du-ui-border);
+  padding-top: 8px;
+}
+/* ≥44px touch targets on the mobile panel (Apple HIG). Standalone icon
+   buttons + color triggers grow; grouped segmented buttons stay a touch
+   smaller so wide controls (font-size S/M/L/XL) still fit one row. */
+.du-sel-panel-mobile .du-sel-icon-button,
+.du-sel-panel-mobile .du-sel-color-trigger {
+  width: 44px;
+  height: 44px;
+}
+.du-sel-panel-mobile .du-button-group > .du-icon-button {
+  width: 38px;
+  height: 38px;
+}
+
+/* Flat segmented controls inside the floating panel — no group
+   pill chrome (the outer panel already provides it). Reuses the
+   button-group rules from PropertyPanel but with tighter gaps. */
+.du-sel-panel .du-button-group {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  gap: 2px;
+}
+
+.du-sel-panel .du-button-group > .du-icon-button {
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+}
+
+/* Color swatch trigger — 28×28 with 20×20 colored square inside. */
+.du-sel-color-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.du-sel-color-trigger:hover:not(:disabled) {
+  background: var(--du-hover-overlay);
+}
+
+.du-sel-color-trigger:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: 1px;
+}
+
+.du-sel-color-swatch {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid var(--du-ui-border);
+  box-sizing: border-box;
+}
+
+/* Plain icon button used for corners / etc. Same chrome as
+   color-trigger but icon inside. */
+.du-sel-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+  color: var(--du-text);
+}
+
+.du-sel-icon-button:hover:not(:disabled) {
+  background: var(--du-hover-overlay);
+}
+
+/* Pressed / on state for toggle buttons (Bold / Italic / Underline /
+   Strikethrough in the text style popover). Without this the computed
+   `is-active` class had no visual, so toggles never reflected the
+   selection's current style. */
+.du-sel-icon-button.is-active {
+  background: var(--du-accent-soft, rgba(80, 130, 255, 0.22));
+  color: var(--du-accent, #5082ff);
+}
+
+.du-sel-icon-button:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: 1px;
+}
+
+/* Text-label button (opacity badge "75%"). */
+.du-sel-text-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--du-button-size-sm);
+  min-width: var(--du-button-size-sm);
+  padding: 0 8px;
+  background: transparent;
+  border: none;
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+  color: var(--du-text);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.du-sel-text-button:hover:not(:disabled) {
+  background: var(--du-hover-overlay);
+}
+
+.du-sel-text-button:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: 1px;
+}
+
+/* Visual divider between inline groups (z-order, actions). */
+.du-sel-divider {
+  display: inline-block;
+  width: 1px;
+  height: 18px;
+  background: var(--du-ui-border);
+  margin: 0 2px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Popover — generic floating panel used by color picker / corners /  */
+/* opacity slider inside the selection floating panel.                */
+/* ------------------------------------------------------------------ */
+.du-popover {
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+  padding: var(--du-pad);
+  font-size: 12px;
+  color: var(--du-text);
+  min-width: 120px;
+  max-width: 320px;
+}
+
+.du-sel-popover-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.du-sel-popover-label {
+  margin: 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--du-text-muted);
+}
+
+/* Vertical list row inside a selection popover (e.g. font-family
+   picker). One full-width clickable row; `is-active` marks the
+   current value. */
+.du-sel-menu-row {
+  all: unset;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: var(--du-text, #ddd);
+  cursor: pointer;
+}
+
+.du-sel-menu-row:hover {
+  background: var(--du-ui-hover, #2a2a2a);
+}
+
+.du-sel-menu-row.is-active {
+  background: var(--du-accent-soft, rgba(80, 130, 255, 0.2));
+}
+
+/* URL field inside the element-link popover. */
+.du-sel-link-input {
+  width: 220px;
+  max-width: 60vw;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--du-text, #ddd);
+  background: var(--du-ui-bg, #1a1a1a);
+  border: 1px solid var(--du-ui-border, #333);
+  border-radius: 4px;
+  outline: none;
+}
+
+.du-sel-link-input:focus-visible {
+  outline: 2px solid var(--du-accent, #5082ff);
+  outline-offset: -1px;
+}
+
+/* Hover link popup (chip above a linked element). */
+.du-link-popup {
+  z-index: 1400;
+  margin-top: -6px;
+  pointer-events: auto;
+}
+
+.du-link-popup-url {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 280px;
+  padding: 4px 8px;
+  font: 12px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  color: var(--du-accent, #5082ff);
+  text-decoration: none;
+  background: var(--menu-bg, #1a1a1a);
+  border: 1px solid var(--menu-border, #333);
+  border-radius: 6px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+
+.du-link-popup-url:hover {
+  background: var(--du-ui-hover, #2a2a2a);
+}
+
+.du-link-popup-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 240px;
+}
+
+/* Arrowhead picker popover (per-end). */
+.du-arrowhead-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2px;
+  margin-top: 4px;
+}
+.du-arrowhead-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 26px;
+  padding: 2px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  color: var(--du-fg, #1c1c1e);
+}
+.du-arrowhead-option:hover {
+  background: var(--du-hover, #f0f0f3);
+}
+.du-arrowhead-option--active {
+  border-color: var(--du-accent, #5082ff);
+}
+.du-arrowhead-none {
+  font-size: 13px;
+  opacity: 0.6;
+}
+.du-arrowhead-erd-label {
+  font-size: 9px;
+  line-height: 1.05;
+  text-align: center;
+}
+.du-arrowhead-erd-toggle {
+  margin-top: 6px;
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--du-muted, #6b6b70);
+  padding: 2px 0;
+}
+.du-arrowhead-erd-toggle:hover {
+  color: var(--du-fg, #1c1c1e);
+}
+
+/* Inline link caption editor. */
+.du-link-caption-input {
+  min-width: 60px;
+  max-width: 220px;
+  padding: 2px 6px;
+  font: 12px system-ui, sans-serif;
+  text-align: center;
+  color: var(--du-fg, #222);
+  background: var(--du-panel-bg, #fff);
+  border: 1px solid var(--du-accent, #5082ff);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  outline: none;
+}
+
+/* Mini shape-picker shown after a link is dropped on empty canvas. */
+.du-link-drop-menu {
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  background: var(--du-panel-bg, #fff);
+  border: 1px solid var(--du-border, #e3e3e6);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+}
+.du-link-drop-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 4px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  color: var(--du-fg, #1c1c1e);
+}
+.du-link-drop-item:hover {
+  background: var(--du-hover, #f0f0f3);
+}
+.du-link-drop-item svg {
+  width: 100%;
+  height: 100%;
+}
+
+.du-sel-menu-row:focus-visible {
+  outline: 2px solid var(--du-accent, #5082ff);
+  outline-offset: -2px;
+}