@mk-kit/ui 0.34.0

package/styles/mk-kit.css

@@ -0,0 +1,750 @@
+/* =========================================================================
+ * mk-kit — Global theme & design tokens
+ * -------------------------------------------------------------------------
+ * Everything visual in mk-kit is driven by these CSS custom properties.
+ * Override any --mk-* variable on :root (or a scoped element) to re-theme
+ * the entire library. Light is the default; dark applies automatically from
+ * the OS preference, or explicitly via [data-mk-theme="dark"|"light"].
+ *
+ *   import '@mk-kit/ui/styles.css';
+ * ========================================================================= */
+/* -------------------------------------------------------------------------
+ * 1. Theme-independent tokens (geometry, type, motion, layering)
+ * ---------------------------------------------------------------------- */
+:root {
+  /* Font families */
+  --mk-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --mk-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',
+    'Fira Code', Consolas, monospace;
+  /* Type scale (rem, 1rem = 16px base) */
+  --mk-font-size-xs: 0.75rem; /* 12 */
+  --mk-font-size-sm: 0.8125rem; /* 13 */
+  --mk-font-size-md: 0.875rem; /* 14 — default UI text */
+  --mk-font-size-lg: 1rem; /* 16 */
+  --mk-font-size-xl: 1.25rem; /* 20 */
+  --mk-font-size-2xl: 1.5rem; /* 24 */
+  --mk-font-size-3xl: 1.875rem; /* 30 */
+  --mk-font-size-4xl: 2.25rem; /* 36 */
+  --mk-font-weight-normal: 400;
+  --mk-font-weight-medium: 500;
+  --mk-font-weight-semibold: 600;
+  --mk-font-weight-bold: 700;
+  --mk-line-height-tight: 1.2;
+  --mk-line-height-snug: 1.35;
+  --mk-line-height-normal: 1.5;
+  --mk-line-height-relaxed: 1.7;
+  --mk-letter-spacing-tight: -0.01em;
+  --mk-letter-spacing-normal: 0;
+  --mk-letter-spacing-wide: 0.02em;
+  /* Spacing scale (4px base) */
+  --mk-space-0: 0;
+  --mk-space-1: 0.25rem; /* 4  */
+  --mk-space-2: 0.5rem; /* 8  */
+  --mk-space-3: 0.75rem; /* 12 */
+  --mk-space-4: 1rem; /* 16 */
+  --mk-space-5: 1.25rem; /* 20 */
+  --mk-space-6: 1.5rem; /* 24 */
+  --mk-space-8: 2rem; /* 32 */
+  --mk-space-10: 2.5rem; /* 40 */
+  --mk-space-12: 3rem; /* 48 */
+  --mk-space-16: 4rem; /* 64 */
+  /* Radii */
+  --mk-radius-none: 0;
+  --mk-radius-xs: 3px;
+  --mk-radius-sm: 5px;
+  --mk-radius-md: 8px;
+  --mk-radius-lg: 12px;
+  --mk-radius-xl: 16px;
+  --mk-radius-2xl: 24px;
+  --mk-radius-pill: 999px;
+  --mk-radius-circle: 50%;
+  /* Control sizing (heights for inputs/buttons) */
+  --mk-control-height-sm: 30px;
+  --mk-control-height-md: 38px;
+  --mk-control-height-lg: 46px;
+  /* Borders */
+  --mk-border-width: 1px;
+  --mk-border-width-strong: 2px;
+  /* Motion */
+  --mk-duration-instant: 80ms;
+  --mk-duration-fast: 140ms;
+  --mk-duration-normal: 220ms;
+  --mk-duration-slow: 360ms;
+  --mk-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --mk-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --mk-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  /* Z-index layering */
+  --mk-z-base: 0;
+  --mk-z-sticky: 100;
+  --mk-z-drawer: 900;
+  --mk-z-overlay: 1000;
+  --mk-z-dialog: 1100;
+  --mk-z-menu: 1200;
+  --mk-z-tooltip: 1300;
+  --mk-z-toast: 1400;
+  /* Focus ring geometry */
+  --mk-focus-ring-width: 2px;
+  --mk-focus-ring-offset: 2px;
+  /* Layout defaults (admin shell) */
+  --mk-sidebar-width: 260px;
+  --mk-sidebar-width-collapsed: 68px;
+  --mk-header-height: 60px;
+}
+
+/* -------------------------------------------------------------------------
+ * 2. Light theme (default)
+ * ---------------------------------------------------------------------- */
+:root {
+  color-scheme: light;
+  /* Surfaces */
+  --mk-bg: #f5f6f8;
+  --mk-surface: #ffffff;
+  --mk-surface-2: #f1f3f5;
+  --mk-surface-3: #e8ebee;
+  --mk-surface-inverse: #1a1d23;
+  --mk-overlay-scrim: rgba(17, 20, 26, 0.45);
+  /* Text */
+  --mk-text: #1a1d23;
+  --mk-text-muted: #56606e;
+  --mk-text-subtle: #687280;
+  --mk-text-inverse: #ffffff;
+  --mk-text-disabled: #adb5c0;
+  /* Borders / dividers */
+  --mk-border: #e3e6eb;
+  --mk-border-strong: #cbd1d9;
+  --mk-border-subtle: #eef0f3;
+  /* Interaction overlays (layered over any surface) */
+  --mk-hover-overlay: rgba(17, 20, 26, 0.04);
+  --mk-active-overlay: rgba(17, 20, 26, 0.08);
+  --mk-selected-bg: #eef2ff;
+  --mk-selected-text: #3730a3;
+  /* Primary / brand */
+  --mk-primary: #4f46e5;
+  --mk-primary-hover: #4338ca;
+  --mk-primary-active: #3730a3;
+  --mk-primary-contrast: #ffffff;
+  --mk-primary-subtle: #eef2ff;
+  --mk-primary-subtle-hover: #e0e7ff;
+  --mk-primary-subtle-text: #3730a3;
+  /* Semantic — success */
+  --mk-success: #15803d;
+  --mk-success-hover: #166534;
+  --mk-success-contrast: #ffffff;
+  --mk-success-subtle: #e7f6ec;
+  --mk-success-subtle-text: #14622f;
+  /* Semantic — warning */
+  --mk-warning: #b45309;
+  --mk-warning-hover: #92400e;
+  --mk-warning-contrast: #ffffff;
+  --mk-warning-subtle: #fdf1e3;
+  --mk-warning-subtle-text: #92400e;
+  /* Semantic — danger */
+  --mk-danger: #dc2626;
+  --mk-danger-hover: #b91c1c;
+  --mk-danger-contrast: #ffffff;
+  /* Danger as TEXT on surfaces. Same as --mk-danger in light; lighter in dark,
+     where the button-label-safe base falls below 4.5:1 as body text. */
+  --mk-danger-text: #dc2626;
+  --mk-danger-subtle: #fdeaea;
+  --mk-danger-subtle-text: #b3201a;
+  /* Semantic — info */
+  --mk-info: #0369a1;
+  --mk-info-hover: #075985;
+  --mk-info-contrast: #ffffff;
+  --mk-info-subtle: #e5f3fb;
+  --mk-info-subtle-text: #075985;
+  /* Neutral tone (secondary buttons, tags) */
+  --mk-neutral-subtle: #eff1f4;
+  --mk-neutral-subtle-hover: #e5e8ec;
+  --mk-neutral-subtle-text: #3a424e;
+  /* Focus ring color */
+  --mk-focus-ring: #4f46e5;
+  /* Elevation shadows */
+  --mk-shadow-xs: 0 1px 2px rgba(17, 20, 26, 0.06);
+  --mk-shadow-sm: 0 1px 3px rgba(17, 20, 26, 0.08), 0 1px 2px rgba(17, 20, 26, 0.04);
+  --mk-shadow-md: 0 4px 12px rgba(17, 20, 26, 0.1), 0 2px 4px rgba(17, 20, 26, 0.05);
+  --mk-shadow-lg: 0 12px 28px rgba(17, 20, 26, 0.14), 0 4px 8px rgba(17, 20, 26, 0.06);
+  --mk-shadow-xl: 0 24px 48px rgba(17, 20, 26, 0.2), 0 8px 16px rgba(17, 20, 26, 0.08);
+  /* Backdrops / misc */
+  --mk-skeleton-base: #e8ebee;
+  --mk-skeleton-shine: #f4f6f8;
+  --mk-scrollbar-thumb: #cbd1d9;
+  --mk-scrollbar-thumb-hover: #adb5c0;
+  --mk-code-bg: #f1f3f5;
+  /* Categorical chart palette — validated colorblind-safe, fixed order.
+     Assign by series index, never cycle a 9th hue (fold into "Other"). */
+  --mk-chart-1: #4f46e5;
+  --mk-chart-2: #0e9f6e;
+  --mk-chart-3: #c2740f;
+  --mk-chart-4: #e0338a;
+  --mk-chart-5: #2f8bd6;
+  --mk-chart-6: #0d9488;
+  --mk-chart-7: #8b5cf6;
+  --mk-chart-8: #e5484d;
+  /* Recessive chart chrome (alias existing tokens; re-resolves per theme). */
+  --mk-chart-grid: var(--mk-border-subtle);
+  --mk-chart-axis: var(--mk-text-subtle);
+}
+
+/* -------------------------------------------------------------------------
+ * 3. Dark theme values — declared ONCE here, emitted into both dark
+ *    selectors below. (Previously duplicated verbatim in two places.)
+ * ---------------------------------------------------------------------- */
+/* Auto (OS) dark, unless explicitly overridden to light. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-theme=light]) {
+    color-scheme: dark;
+    --mk-bg: #0d1117;
+    --mk-surface: #161b22;
+    --mk-surface-2: #1e252e;
+    --mk-surface-3: #2a323c;
+    --mk-surface-inverse: #e6edf3;
+    --mk-overlay-scrim: rgba(1, 4, 9, 0.6);
+    --mk-text: #e6edf3;
+    --mk-text-muted: #9aa5b1;
+    --mk-text-subtle: #788494;
+    --mk-text-inverse: #0d1117;
+    --mk-text-disabled: #4b545f;
+    --mk-border: #2a323c;
+    --mk-border-strong: #3a444f;
+    --mk-border-subtle: #21272f;
+    --mk-hover-overlay: rgba(255, 255, 255, 0.05);
+    --mk-active-overlay: rgba(255, 255, 255, 0.09);
+    --mk-selected-bg: #1e2540;
+    --mk-selected-text: #c7d2fe;
+    --mk-primary: #6164f0;
+    --mk-primary-hover: #7c7ff4;
+    --mk-primary-active: #9599f7;
+    --mk-primary-contrast: #ffffff;
+    --mk-primary-subtle: #1e2540;
+    --mk-primary-subtle-hover: #262f4f;
+    --mk-primary-subtle-text: #c7d2fe;
+    --mk-success: #22c55e;
+    --mk-success-hover: #4ade80;
+    --mk-success-contrast: #052e13;
+    --mk-success-subtle: #10261a;
+    --mk-success-subtle-text: #6ee7a0;
+    --mk-warning: #f59e0b;
+    --mk-warning-hover: #fbbf24;
+    --mk-warning-contrast: #2a1a02;
+    --mk-warning-subtle: #2a2010;
+    --mk-warning-subtle-text: #fcd34d;
+    --mk-danger: #db3636;
+    --mk-danger-hover: #f56b6b;
+    --mk-danger-contrast: #ffffff;
+    --mk-danger-text: #f56b6b;
+    --mk-danger-subtle: #2c1416;
+    --mk-danger-subtle-text: #fca5a5;
+    --mk-info: #38bdf8;
+    --mk-info-hover: #5cccf9;
+    --mk-info-contrast: #04222e;
+    --mk-info-subtle: #0c2733;
+    --mk-info-subtle-text: #a5e4fb;
+    --mk-neutral-subtle: #232b34;
+    --mk-neutral-subtle-hover: #2c3540;
+    --mk-neutral-subtle-text: #c4ccd6;
+    --mk-focus-ring: #818cf8;
+    --mk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --mk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --mk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
+    --mk-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
+    --mk-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.45);
+    --mk-skeleton-base: #232b34;
+    --mk-skeleton-shine: #2f3945;
+    --mk-scrollbar-thumb: #3a444f;
+    --mk-scrollbar-thumb-hover: #4b545f;
+    --mk-code-bg: #1e252e;
+    --mk-chart-1: #6366f1;
+    --mk-chart-2: #16a34a;
+    --mk-chart-3: #d97706;
+    --mk-chart-4: #db2777;
+    --mk-chart-5: #3b82f6;
+    --mk-chart-6: #0d9488;
+    --mk-chart-7: #8b5cf6;
+    --mk-chart-8: #ef4444;
+  }
+}
+/* Explicit dark. */
+[data-mk-theme=dark] {
+  color-scheme: dark;
+  --mk-bg: #0d1117;
+  --mk-surface: #161b22;
+  --mk-surface-2: #1e252e;
+  --mk-surface-3: #2a323c;
+  --mk-surface-inverse: #e6edf3;
+  --mk-overlay-scrim: rgba(1, 4, 9, 0.6);
+  --mk-text: #e6edf3;
+  --mk-text-muted: #9aa5b1;
+  --mk-text-subtle: #788494;
+  --mk-text-inverse: #0d1117;
+  --mk-text-disabled: #4b545f;
+  --mk-border: #2a323c;
+  --mk-border-strong: #3a444f;
+  --mk-border-subtle: #21272f;
+  --mk-hover-overlay: rgba(255, 255, 255, 0.05);
+  --mk-active-overlay: rgba(255, 255, 255, 0.09);
+  --mk-selected-bg: #1e2540;
+  --mk-selected-text: #c7d2fe;
+  --mk-primary: #6164f0;
+  --mk-primary-hover: #7c7ff4;
+  --mk-primary-active: #9599f7;
+  --mk-primary-contrast: #ffffff;
+  --mk-primary-subtle: #1e2540;
+  --mk-primary-subtle-hover: #262f4f;
+  --mk-primary-subtle-text: #c7d2fe;
+  --mk-success: #22c55e;
+  --mk-success-hover: #4ade80;
+  --mk-success-contrast: #052e13;
+  --mk-success-subtle: #10261a;
+  --mk-success-subtle-text: #6ee7a0;
+  --mk-warning: #f59e0b;
+  --mk-warning-hover: #fbbf24;
+  --mk-warning-contrast: #2a1a02;
+  --mk-warning-subtle: #2a2010;
+  --mk-warning-subtle-text: #fcd34d;
+  --mk-danger: #db3636;
+  --mk-danger-hover: #f56b6b;
+  --mk-danger-contrast: #ffffff;
+  --mk-danger-text: #f56b6b;
+  --mk-danger-subtle: #2c1416;
+  --mk-danger-subtle-text: #fca5a5;
+  --mk-info: #38bdf8;
+  --mk-info-hover: #5cccf9;
+  --mk-info-contrast: #04222e;
+  --mk-info-subtle: #0c2733;
+  --mk-info-subtle-text: #a5e4fb;
+  --mk-neutral-subtle: #232b34;
+  --mk-neutral-subtle-hover: #2c3540;
+  --mk-neutral-subtle-text: #c4ccd6;
+  --mk-focus-ring: #818cf8;
+  --mk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --mk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --mk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
+  --mk-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
+  --mk-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.45);
+  --mk-skeleton-base: #232b34;
+  --mk-skeleton-shine: #2f3945;
+  --mk-scrollbar-thumb: #3a444f;
+  --mk-scrollbar-thumb-hover: #4b545f;
+  --mk-code-bg: #1e252e;
+  --mk-chart-1: #6366f1;
+  --mk-chart-2: #16a34a;
+  --mk-chart-3: #d97706;
+  --mk-chart-4: #db2777;
+  --mk-chart-5: #3b82f6;
+  --mk-chart-6: #0d9488;
+  --mk-chart-7: #8b5cf6;
+  --mk-chart-8: #ef4444;
+}
+
+/* -------------------------------------------------------------------------
+ * 4. Base / reset — opt-in via the `mk-scope` class or applied globally.
+ *    Kept minimal and non-destructive.
+ * ---------------------------------------------------------------------- */
+.mk-app,
+body.mk-app {
+  margin: 0;
+  background: var(--mk-bg);
+  color: var(--mk-text);
+  font-family: var(--mk-font-sans);
+  font-size: var(--mk-font-size-md);
+  line-height: var(--mk-line-height-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Shared box-sizing for all mk components */
+[class^=mk-],
+[class*=" mk-"] {
+  box-sizing: border-box;
+}
+
+/* Accessible focus-visible ring, usable by any interactive element */
+.mk-focus-ring:focus-visible,
+.mk-focusable:focus-visible {
+  outline: var(--mk-focus-ring-width) solid var(--mk-focus-ring);
+  outline-offset: var(--mk-focus-ring-offset);
+}
+
+/* Screen-reader-only utility */
+.mk-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;
+}
+
+/* mk-drag-handle — the grip a pointer drag must start on. MkDragHandle is a
+ * DIRECTIVE (so it composes onto any element, including other components'
+ * hosts like mk-icon), and directives cannot carry styles — hence the global
+ * class, same precedent as the overlay chrome below. */
+.mk-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  /* Stop the browser from treating a press-drag as a scroll/gesture. */
+  touch-action: none;
+  color: var(--mk-text-subtle);
+}
+
+.mk-drag-handle:hover {
+  color: var(--mk-text-muted);
+}
+
+.mk-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Themed scrollbars (progressive enhancement) */
+.mk-app * {
+  scrollbar-color: var(--mk-scrollbar-thumb) transparent;
+  scrollbar-width: thin;
+}
+
+.mk-app *::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.mk-app *::-webkit-scrollbar-thumb {
+  background: var(--mk-scrollbar-thumb);
+  border-radius: var(--mk-radius-pill);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.mk-app *::-webkit-scrollbar-thumb:hover {
+  background: var(--mk-scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+/* Body-level overlay chrome.
+ *
+ * These MUST live in the global sheet rather than a component stylesheet.
+ * MkOverlayService renders an arbitrary component into `.mk-overlay-panel`, so
+ * chrome defined in dialog.scss (which is MkDialog's own stylesheet) only
+ * existed when MkDialog itself happened to be rendered. A component opened with
+ * `MkDialogService.open(MyComponent)` therefore got no surface at all — no
+ * background, no radius, no overflow containment — and its content spilled onto
+ * the scrim. */
+/* The panel receives programmatic focus (`autoFocus: false` hands the focus
+ * trap the panel itself, tabindex="-1") purely for Tab containment — the UA
+ * focus ring there renders as a stray blue outline around the whole sheet or
+ * dialog. Controls inside keep their own rings. */
+.mk-overlay-panel:focus,
+.mk-overlay-panel:focus-visible {
+  outline: none;
+}
+
+.mk-dialog-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(92vw, 32rem);
+  /* vh fallback first; dvh tracks iOS Safari's dynamic toolbar. */
+  max-height: min(90vh, 44rem);
+  max-height: min(90dvh, 44rem);
+  overflow: hidden;
+  background-color: var(--mk-surface);
+  color: var(--mk-text);
+  border: var(--mk-border-width) solid var(--mk-border-subtle);
+  border-radius: var(--mk-radius-lg);
+  box-shadow: var(--mk-shadow-xl);
+  animation: mk-overlay-pop var(--mk-duration-normal) var(--mk-ease-emphasized);
+}
+
+/* Width presets (MkDialogConfig.size). Always `min(target, 92vw)` so a dialog
+ * shrinks to fit a phone and grows to its target on a desktop. */
+.mk-dialog-panel--sm {
+  width: min(92vw, 32rem);
+}
+
+.mk-dialog-panel--md {
+  width: min(92vw, 45rem);
+}
+
+.mk-dialog-panel--lg {
+  width: min(92vw, 56rem);
+}
+
+.mk-dialog-panel--xl {
+  width: min(92vw, 75rem);
+}
+
+/* A bare component (no mk-dialog wrapper) still needs its own padding and a
+ * scroll region, otherwise long content is clipped by `overflow: hidden`. */
+.mk-dialog-panel > :not(.mk-dialog) {
+  min-height: 0;
+  overflow: auto;
+  /* Don't let dialog scroll chain into (rubber-band) the page behind. */
+  overscroll-behavior: contain;
+}
+
+.mk-dialog-panel:not(:has(.mk-dialog)) {
+  padding: var(--mk-space-5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-dialog-panel {
+    animation: none;
+  }
+}
+/* Bottom-sheet panel chrome. Lives here rather than in bottom-sheet.scss so a
+ * BARE component opened through MkBottomSheetService gets a real panel — that
+ * component stylesheet only loads when the `mk-bottom-sheet` layout component
+ * is actually rendered, which apps with a bespoke sheet body never do. Mirrors
+ * how `.mk-dialog-panel` is handled above. */
+.mk-bottom-sheet-panel {
+  align-self: flex-end;
+  /* `width` (not max-width) so the panel's inline max-width:100% can't win. */
+  width: min(100%, 42rem);
+  /* vh fallback first; dvh tracks iOS Safari's dynamic toolbar. */
+  max-height: 90vh;
+  max-height: 90dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  /* Keep sheet content clear of the iOS home indicator. Applied on the panel
+     (not the sheet footer) so bare components and footer-less sheets are
+     covered too; env() falls back to 0px elsewhere. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background-color: var(--mk-surface);
+  color: var(--mk-text);
+  border: var(--mk-border-width) solid var(--mk-border-subtle);
+  border-bottom: none;
+  border-top-left-radius: var(--mk-radius-xl);
+  border-top-right-radius: var(--mk-radius-xl);
+  box-shadow: var(--mk-shadow-xl);
+  animation: mk-bottom-sheet-in var(--mk-duration-normal) var(--mk-ease-emphasized);
+}
+
+/* As with dialogs, a bare component still needs a scroll region and padding. */
+.mk-bottom-sheet-panel > :not(.mk-bottom-sheet) {
+  min-height: 0;
+  overflow: auto;
+  /* Don't let sheet scroll chain into (rubber-band) the page behind. */
+  overscroll-behavior: contain;
+}
+
+.mk-bottom-sheet-panel:not(:has(.mk-bottom-sheet)) {
+  padding: var(--mk-space-5);
+  /* The shorthand above would clobber the panel's safe-area padding-bottom;
+     restate it on top of the bare-component padding. */
+  padding-bottom: calc(var(--mk-space-5) + env(safe-area-inset-bottom, 0px));
+}
+
+@keyframes mk-bottom-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-bottom-sheet-panel {
+    animation: none;
+  }
+}
+/* Body-level overlay animations (dialog / menu / toast live outside components) */
+@keyframes mk-overlay-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes mk-overlay-pop {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes mk-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Respect reduced-motion globally for library animations */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --mk-duration-instant: 0ms;
+    --mk-duration-fast: 0ms;
+    --mk-duration-normal: 0ms;
+    --mk-duration-slow: 0ms;
+  }
+}
+/* ---------------------------------------------------------------------------
+ * Density — `data-mk-density` retunes control heights and the two spacing
+ * steps most controls use for padding. Components need no changes: everything
+ * reads these tokens.
+ *
+ * Set it on <html> for a global mode (MkThemeService.setDensity), or on ANY
+ * element to rescale just that subtree — these are plain custom properties, so
+ * they inherit. That is what makes a touch-sized dialog inside an otherwise
+ * mouse-sized admin possible.
+ *
+ * `compact` tightens for dense data screens. `touch` goes the other way, for
+ * tablets and kiosks: the default 38px control is comfortable under a cursor
+ * and too small for a finger. 48px is the WCAG 2.5.5 / Material target, and
+ * the spacing steps grow with it so controls do not end up shoulder to
+ * shoulder — adjacent targets are as much of a mis-tap problem as small ones.
+ * ------------------------------------------------------------------------- */
+[data-mk-density=compact] {
+  --mk-control-height-sm: 26px;
+  --mk-control-height-md: 32px;
+  --mk-control-height-lg: 38px;
+  --mk-space-3: 0.5rem; /* 8  — was 12 */
+  --mk-space-4: 0.75rem; /* 12 — was 16 */
+}
+
+[data-mk-density=touch] {
+  --mk-control-height-sm: 40px;
+  --mk-control-height-md: 48px;
+  --mk-control-height-lg: 56px;
+  --mk-space-3: 1rem; /* 16 — was 12 */
+  --mk-space-4: 1.25rem; /* 20 — was 16 */
+}
+
+/* ==========================================================================
+   Forced colors (Windows High Contrast / forced-colors: active)
+   --------------------------------------------------------------------------
+   In forced-colors mode the browser overrides author colors with the system
+   palette, which erases background-only state indicators (selection, checked
+   toggles, slider fills, ink bars). The rules below re-express those states
+   with system colors (`Highlight` / `HighlightText`, etc.) — opting out of
+   forcing only where a background IS the state — and add borders where a
+   surface would otherwise vanish. Everything else (text, borders, focus
+   outlines) is left to the system palette on purpose.
+   ========================================================================== */
+@media (forced-colors: active) {
+  /* --- Selection & active states: Highlight on HighlightText -------------- */
+  .mk-select__option--selected,
+  .mk-cmdk__option--active,
+  .mk-pagination__btn--active,
+  .mk-tabs__tab--active,
+  .mk-chip--selected,
+  .mk-button-toggle__btn[aria-pressed=true],
+  .mk-nav-item--active > .mk-nav-item__link,
+  .mk-calendar__day--selected,
+  .mk-calendar__day--range-start,
+  .mk-calendar__day--range-end,
+  .mk-tree__item--selected,
+  .mk-table__row--selected .mk-table__td {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  .mk-calendar__day--in-range {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    opacity: 0.7;
+  }
+  /* Hover/keyboard-active rows where selection is transient: use an outline
+     instead of a background so the underlying text keeps system colors. */
+  .mk-select__option--active,
+  mk-menu-item:hover,
+  mk-menu-item:focus,
+  .mk-tree__item:hover {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  /* --- Toggles: checked state must survive without author backgrounds ----- */
+  .mk-switch__track {
+    border: 1px solid ButtonText;
+  }
+  .mk-switch__thumb {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+  }
+  .mk-switch--checked .mk-switch__track {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+    border-color: Highlight;
+  }
+  .mk-switch--checked .mk-switch__thumb {
+    background-color: HighlightText;
+  }
+  .mk-checkbox--checked .mk-checkbox__box,
+  .mk-checkbox--indeterminate .mk-checkbox__box {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+  }
+  .mk-checkbox--checked .mk-checkbox__check {
+    border-color: HighlightText !important;
+  }
+  .mk-checkbox--indeterminate .mk-checkbox__dash {
+    border-color: HighlightText !important;
+  }
+  .mk-radio--checked .mk-radio__control {
+    forced-color-adjust: none;
+    border-color: Highlight !important;
+    background-color: Canvas;
+  }
+  .mk-radio--checked .mk-radio__dot {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+  }
+  /* --- Value fills: sliders, progress, loading, tabs ink bar --------------- */
+  .mk-slider__fill,
+  .mk-range-slider__fill,
+  .mk-progress-bar__fill,
+  .mk-loading-bar__fill,
+  .mk-tabs__indicator {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+  }
+  .mk-slider__track,
+  .mk-range-slider__track,
+  .mk-progress-bar__track {
+    border: 1px solid ButtonText;
+  }
+  .mk-slider__thumb,
+  .mk-range-slider__thumb {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+    border: 1px solid Canvas;
+  }
+  /* --- Surfaces that rely on shadow/background to read as raised ---------- */
+  .mk-menu__panel,
+  .mk-cmdk__panel,
+  .mk-select__list,
+  .mk-autocomplete__list,
+  .mk-phone-input__panel {
+    border: 1px solid CanvasText;
+  }
+  /* --- Phone input country list (same pattern as select) ------------------- */
+  .mk-phone-input__option--selected {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  .mk-phone-input__option--active {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  /* --- Card brand badge / currency affix: keep their boundary -------------- */
+  .mk-card-number-input__brand,
+  .mk-currency-input__symbol {
+    border: 1px solid ButtonText;
+  }
+}