@shift-css/core 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components/badge.css +162 -0
  2. package/dist/components/button.css +39 -41
  3. package/dist/components/card.css +28 -3
  4. package/dist/components/input.css +39 -0
  5. package/dist/components/menu.css +195 -0
  6. package/dist/components/modal.css +22 -2
  7. package/dist/components/surface.css +6 -1
  8. package/dist/components/tooltip.css +153 -0
  9. package/dist/shift.css +647 -47
  10. package/dist/shift.css.map +1 -1
  11. package/dist/shift.min.css +1 -1
  12. package/package.json +12 -2
  13. package/types/attributes.d.ts +234 -0
  14. package/types/index.d.ts +44 -0
  15. package/types/react.d.ts +23 -0
  16. package/types/vue.d.ts +29 -0
package/dist/shift.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AAcA;EEJA;;;;EAOA;;;;EAKA;;;;IAQE;MAAgD;;;IAKzB;;;;;EAMzB;;;;;;;;EASA;;;;;;EAWA;;;;;EASA;;;;;;;EAQA;;;;EAWA;;;;;EAWA;;;;EAKA;;;;;EAOA;;;;IAIE;;;;;EAMF;;;;;EAMA;;;;EAKA;;;;;EAQA;;;;;EAMA;;;;EAKA;;;;EAKA;IACE;;;;;;;;EAWF;IACE;;;;;EAMF;IACE;;;;;;;IASA;;;;IAKA;;;;IAIA;;;;IAIA;;;;;;AFzLF;EIRA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AJOF;EGAA;;;;;;;;;;IA0BE;MAA0C;;;IAU1C;MAAwC;;;;EAU1C;;;;EAKA;;;;;EAMA;;;;;EAMA;;;;;EAUA;;;;EAKA;;;;IAME;;;;;IAKA;;;;;IAKA;;;;;;EAYF;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAaA;;;;;;;;EAQA;;;;;;;;EAQA;;;;;;;;EAYA;IACE;;;;;EAKF;IACE;;;;;EIxKF;;;;;;;;;;;;;;;;;;IAuBE;MAA0C;;;IAM1C;MAAwC;;;IAK7B;;;;IASX;;;;IAKA;;;;;IAMA;;;;;IAMA;;;;;;;EAYF;;;;IAIE;;;;IAIA;;;;;EAMF;;;;;;IAQE;;;;;EAMF;;;;;IAOE;;;;;EAMF;;;;;;;;IASE;;;;;;EAOF;;;;;;IAOE;;;;;;;EAYF;;;IAGE;;;;IAIA;;;;;EAMF;;;IAGE;;;;IAIA;;;;;EAMF;;;IAGE;;;;IAIA;;;;;EASF;;;;;EAKA;;;;;EAKA;;;;;EAUA;;;;;EAMA;;;;EAKA;;;;;IAKE;;;;;;;;;;;;;;EAcF;;;;;;EAUA;;;IAGE;;;MAGE;;;;MAIA;;;;MAIA;;;;;;EIzQJ;;;;;;;;;;;;;;;;IAsBE;MAA0C;;;;EAW5C;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;IAIE;;;;;;;EAQF;;;;;;;EAQA;;;;;EAUA;;;;;EAMA;;;;;EAOA;;;;;EAMA;;;;;;EAWA;;;;IAME;;;;;IAKA;;;;IAIA;;;;;;EAOF;;;IAGE;;;;;;;EAQF;;;IAGE;;;;;;;EAQF;IACE;;;MAGE;;;;;;;EAWJ;;;;;EAKA;;;;EAKA;;;;;EAKA;;;;;EAUA;;;;;;EAOA;;;;;;EGxMA;;;;;;;;;;;;;;;;;;IAwBE;;;;IAKA;;;;IAKA;;;;;;IAOA;;;;;;IAOA;;;MAIE;;;;;;EAUJ;;;;;EAKA;;;;;EAUA;;;;;EAMA;;;;;;;EAWA;;;IAGE;;;;;MAKE;;;;MAIA;;;;;IAKF;;;;;;;;;;MAUE;;;;;MAKA;;;;;;;EAWJ;;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;;EASA;;;;;;IAOE;;;;;;;;;MAYE;;;;;MAKA;;;;;MAKA;;;;;;;EAOJ;;;IAGE;;;;;;;;EAQF;;;IAGE;;;;;;;EAWF;;;;;;IAME;;;;;;;;;;MAWE;;;;;;;;;;;;;MAcA;;;QAGE;;;;;MAKF;;;;;MAKA;;;;;;;EbjQJ;;;;EAKA;;;;;;;;;;;;;;;;;IAyBE;;;;;IAMM;;;EAIR;;;;EAKA;;;;;EAKA;;;;;;;;;;;;EAeA;;;;;;EAMA;;;;;;;;;;EAcA;;;;EAKA;;;;EAKA;;;;;;;;EAaA;;;;;EAMA;;;;;EAMA;;;;;EAMA;;;;;EAUA;;;;;;;;IASE;;;;;;;;;EAYF;;;;;;;EAQA;;;;;;;;;EAUA;;;;;;;;;;;;;;;;IAyBE;;;;;IAKA;;;;;IAKA;;;;;EAUF;IACE;;;;IAIA;;;;;IAKA;;;;IAKA;;;;;EKjPF;;;;;;;;;;;;;;;;;;;EAwBA;;;;EAQA;;;;;;;;EAQA;;;;;EAKA;;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;EASA;;;;EAIA;;;;;EAKA;;;;EAIA;;;;EAQA;;;;;;IAOE;;;;;EASF;;;;;EAKA;;;;EAIA;;;;EAIA;;;IAGE;;;;;EAKF;;;;;EAMA;;;;EAIA;;;;;EAKA;;;;;EASA;;;;;;;;;IASE;;;;;EASF;;;;;;;;;EASA;;;;;;;;;;IAWE;;;;;;;;;EAUF;;;;;;;;;;;EAeA;;;;;;EAUA;;;;;;EAMA;;;;EAIA;;;;;;;EAWA;;;;;;;EAOA;;;;EAIA;;;;;;;EAOA;;;;;EAKA;;;;EAQA;;;;EAIA;;;;EAQA;IACE;;;;;;;;;IASA;;;;;;;EAQF;;;;;;;;;EEnTA;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA;;;;;;;EAiBA;;;;;;;;;;;;;EAeA;;;;;;;EAOA;;;;EAUA;;;;EAKA;;;;;EASA;IACE;;;;;EASF;IACE;;;;IAIA;;;;;EAUF;;;;;ARnIA;EYMA;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;;;EAMA;;;;;;EAOA;;;;EAIA;;;;EASA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;;EAKA;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;;;;EAOA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EP1XA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;;;;;;;;;EAaA;;;;;;;;;;;EAqDA;;;;;;EAMA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAWA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAMF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EASF;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EI7PA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;ECrdA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EGrRA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAQA;;;;;IAKE;;;;;EASF;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA","sources":["home/runner/work/shift-css/shift-css/packages/core/src/index.css","home/runner/work/shift-css/shift-css/packages/core/src/base/reset.css","home/runner/work/shift-css/shift-css/packages/core/src/components/modal.css","home/runner/work/shift-css/shift-css/packages/core/src/components/surface.css","home/runner/work/shift-css/shift-css/packages/core/src/tokens/tokens.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/visibility.css","home/runner/work/shift-css/shift-css/packages/core/src/components/prose.css","home/runner/work/shift-css/shift-css/packages/core/src/components/button.css","home/runner/work/shift-css/shift-css/packages/core/src/components/skip-link.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/spacing.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/flex.css","home/runner/work/shift-css/shift-css/packages/core/src/components/card.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/layout.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/typography.css","home/runner/work/shift-css/shift-css/packages/core/src/components/input.css"],"sourcesContent":["/**\n * Shift CSS\n * Zero-runtime, OKLCH-native CSS framework\n *\n * Layer order (lowest → highest specificity):\n * 1. shift.reset - Modern browser reset, fluid typography, accessibility\n * 2. shift.tokens - CSS custom properties (generated from JSON)\n * 3. shift.core - UI components (Buttons, Cards, Surface)\n * 4. shift.utils - Atomic utility classes\n *\n * User CSS automatically overrides framework styles (no !important needed)\n */\n\n/* Declare layer order FIRST - establishes specificity */\n@layer shift.reset, shift.tokens, shift.core, shift.utils;\n\n/* Import layer contents */\n@import \"./base/reset.css\" layer(shift.reset);\n@import \"./tokens/tokens.css\" layer(shift.tokens);\n@import \"./components/surface.css\" layer(shift.core);\n@import \"./components/button.css\" layer(shift.core);\n@import \"./components/card.css\" layer(shift.core);\n@import \"./components/input.css\" layer(shift.core);\n@import \"./components/modal.css\" layer(shift.core);\n@import \"./components/prose.css\" layer(shift.core);\n@import \"./components/skip-link.css\" layer(shift.core);\n@import \"./utils/layout.css\" layer(shift.utils);\n@import \"./utils/visibility.css\" layer(shift.utils);\n@import \"./utils/spacing.css\" layer(shift.utils);\n@import \"./utils/flex.css\" layer(shift.utils);\n@import \"./utils/typography.css\" layer(shift.utils);\n","/**\n * Shift CSS - Modern Reset\n *\n * A modern CSS reset optimized for:\n * - Accessibility\n * - Fluid typography\n * - Sensible defaults\n */\n\n/* Box sizing */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Remove default margins */\n* {\n margin: 0;\n}\n\n/* Fluid typography and smooth scrolling */\nhtml {\n /* Enable light-dark() function for automatic theming */\n color-scheme: light dark;\n\n /* Fluid base font size: 15px at 320px → 16px at 1280px */\n font-size: clamp(0.9375rem, 0.875rem + 0.25vi, 1rem);\n\n /* Smooth scrolling for users who haven't disabled it */\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n\n /* Better text rendering */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n/* Body defaults */\nbody {\n line-height: 1.5;\n min-height: 100dvh;\n font-family: var(--s-font-sans, ui-sans-serif, system-ui, sans-serif);\n background-color: var(--s-surface-base);\n color: var(--s-text-primary);\n}\n\n/* Improved media defaults */\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n/* Inherit fonts for form controls */\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n color: inherit;\n}\n\n/* Remove built-in button styles */\nbutton {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n/* Text overflow handling */\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n}\n\n/* Heading line heights */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n line-height: 1.2;\n text-wrap: balance;\n}\n\n/* Paragraph text wrapping */\np {\n text-wrap: pretty;\n}\n\n/* Remove list styles */\nul,\nol {\n list-style: none;\n padding: 0;\n}\n\n/* Links */\na {\n color: var(--s-interactive-primary);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n/* Focus styles for accessibility */\n:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n}\n\n/* Remove focus outline for mouse users */\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* Stacking context for app root */\n#root,\n#__next,\n#app {\n isolation: isolate;\n min-height: 100dvh;\n}\n\n/* Table defaults */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/* Pre/code defaults */\npre,\ncode {\n font-family: var(--s-font-mono, ui-monospace, monospace);\n}\n\npre {\n overflow-x: auto;\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: more) {\n * {\n border-color: currentColor !important;\n }\n}\n\n/* Print styles */\n@media print {\n *,\n *::before,\n *::after {\n background: transparent !important;\n color: #000 !important;\n box-shadow: none !important;\n text-shadow: none !important;\n }\n\n a,\n a:visited {\n text-decoration: underline;\n }\n\n a[href]::after {\n content: \" (\" attr(href) \")\";\n }\n\n pre {\n white-space: pre-wrap !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n","/**\n * Shift CSS - Modal Component\n *\n * CSS-only modal using native <dialog> element with backdrop styling,\n * size variants, and entrance animations.\n *\n * Usage:\n * <dialog s-modal>\n * <header s-modal-header>\n * <h2>Title</h2>\n * <button s-modal-close aria-label=\"Close\">&times;</button>\n * </header>\n * <div s-modal-body>Content</div>\n * <footer s-modal-footer>\n * <button s-btn formmethod=\"dialog\">Cancel</button>\n * <button s-btn=\"primary\">Confirm</button>\n * </footer>\n * </dialog>\n *\n * JavaScript:\n * document.querySelector('[s-modal]').showModal();\n */\n\n/* Ensure closed dialogs are hidden */\ndialog[s-modal]:not([open]) {\n display: none;\n}\n\n/* Base modal - zero specificity for easy overrides */\n:where(dialog[s-modal]) {\n /* Modal CSS properties (customization points) */\n --_modal-bg: var(--s-surface-raised);\n --_modal-border: var(--s-border-muted);\n --_modal-radius: var(--s-radius-xl);\n --_modal-shadow: var(--s-shadow-2xl);\n --_modal-padding: var(--s-space-4);\n --_modal-max-width: 32rem;\n\n /* Reset dialog defaults */\n border: none;\n padding: 0;\n margin: auto; /* Center by default */\n\n /* Size and positioning */\n width: min(var(--_modal-max-width), calc(100vw - var(--s-space-4) * 2));\n max-height: calc(100vh - var(--s-space-4) * 2);\n max-width: var(--_modal-max-width);\n\n /* Visual styling */\n background-color: var(--_modal-bg);\n border-radius: var(--_modal-radius);\n box-shadow: var(--_modal-shadow);\n\n /* Layout - only when open (preserve native display:none when closed) */\n &[open] {\n display: flex;\n flex-direction: column;\n }\n\n /* Text color - use semantic token for reliable light/dark mode support */\n color: var(--s-text-primary);\n}\n\n/* Open state animation */\ndialog[s-modal][open] {\n animation: s-modal-scale-in var(--s-duration-200) var(--s-ease-out);\n}\n\n/* Focus visible state for keyboard navigation */\ndialog[s-modal]:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n}\n\n@keyframes s-modal-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* =============================================================================\n BACKDROP STYLING\n ============================================================================= */\n\ndialog[s-modal]::backdrop {\n background: oklch(0 0 0 / 0.5);\n backdrop-filter: blur(4px);\n animation: s-modal-backdrop-in var(--s-duration-200) var(--s-ease-out);\n}\n\n@keyframes s-modal-backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* =============================================================================\n SIZE VARIANTS\n ============================================================================= */\n\n/* Small - confirmations, simple alerts */\ndialog[s-modal][s-size=\"sm\"] {\n --_modal-max-width: 25rem;\n}\n\n/* Large - forms, detailed content */\ndialog[s-modal][s-size=\"lg\"] {\n --_modal-max-width: 43.75rem;\n}\n\n/* Full screen */\ndialog[s-modal][s-size=\"full\"] {\n --_modal-max-width: 100vw;\n --_modal-radius: 0;\n width: 100vw;\n height: 100vh;\n max-height: 100vh;\n}\n\n/* =============================================================================\n POSITION VARIANTS\n ============================================================================= */\n\n/* Top - anchored to top of viewport */\ndialog[s-modal][s-position=\"top\"] {\n margin-top: var(--s-space-8);\n margin-bottom: auto;\n}\n\n/* Bottom - anchored to bottom of viewport */\ndialog[s-modal][s-position=\"bottom\"] {\n margin-top: auto;\n margin-bottom: var(--s-space-8);\n}\n\n/* Left - anchored to left side */\ndialog[s-modal][s-position=\"left\"] {\n margin-left: var(--s-space-8);\n margin-right: auto;\n}\n\n/* Right - anchored to right side */\ndialog[s-modal][s-position=\"right\"] {\n margin-left: auto;\n margin-right: var(--s-space-8);\n}\n\n/* =============================================================================\n SUB-COMPONENTS\n ============================================================================= */\n\n/* Header - title and close button */\n:where([s-modal-header]) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--s-space-4);\n padding: var(--_modal-padding, var(--s-space-4));\n border-bottom: 1px solid var(--s-border-muted);\n\n /* Typography for title */\n & > h1,\n & > h2,\n & > h3 {\n margin: 0;\n font-size: var(--s-text-lg);\n font-weight: var(--s-font-semibold);\n line-height: 1.25;\n color: inherit;\n }\n}\n\n/* Body - scrollable content area */\n:where([s-modal-body]) {\n flex: 1;\n padding: var(--_modal-padding, var(--s-space-4));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n/* Footer - action buttons */\n:where([s-modal-footer]) {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--s-space-3);\n padding: var(--_modal-padding, var(--s-space-4));\n border-top: 1px solid var(--s-border-muted);\n}\n\n/* Close button */\n:where([s-modal-close]) {\n /* Reset button styles */\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n\n /* Size and shape - minimum 44x44px for WCAG 2.1 touch target */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 2.75rem;\n min-height: 2.75rem;\n border-radius: var(--s-radius-full);\n\n /* Typography */\n font-size: var(--s-text-xl);\n line-height: 1;\n color: var(--s-text-secondary);\n\n /* Transitions */\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n color var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n background-color: var(--s-surface-sunken);\n color: var(--s-text-primary);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:active {\n background-color: var(--s-border-default);\n }\n}\n\n/* =============================================================================\n ACCESSIBILITY & HIGH CONTRAST\n ============================================================================= */\n\n/* High contrast mode support */\n@media (forced-colors: active) {\n dialog[s-modal] {\n border: 2px solid CanvasText;\n }\n\n dialog[s-modal]::backdrop {\n background: rgba(0, 0, 0, 0.75);\n backdrop-filter: none;\n }\n\n [s-modal-header],\n [s-modal-footer] {\n border-color: CanvasText;\n }\n\n [s-modal-close] {\n border: 1px solid ButtonText;\n }\n}\n","/**\n * Shift CSS - Surface Component\n *\n * Adaptive surface with automatic contrast text color.\n * Uses semantic attribute selectors for depth/layering.\n *\n * Usage:\n * <section s-surface>Default flat surface</section>\n * <section s-surface=\"raised\">Elevated card-like surface</section>\n * <section s-surface=\"sunken\">Recessed input-like surface</section>\n * <section s-surface=\"floating\">High elevation overlay</section>\n */\n\n/* Base surface - zero specificity for easy overrides */\n:where([s-surface]) {\n /* Enable container queries */\n container-type: inline-size;\n\n /* Surface CSS properties (customization points) */\n --_surface-bg: var(--s-surface-base);\n --_surface-padding: var(--s-space-4);\n --_surface-radius: var(--s-radius-lg);\n\n background-color: var(--_surface-bg);\n padding: var(--_surface-padding);\n border-radius: var(--_surface-radius);\n\n /**\n * AUTO-CONTRAST TEXT COLOR\n *\n * Strategy (best to fallback):\n * 1. contrast-color() - CSS Color Level 6 (Chrome Canary, Safari TP)\n * 2. Relative color syntax - Extract lightness, threshold at L=0.6\n * 3. Semantic token fallback - Pre-defined light-dark() value\n */\n\n /* FALLBACK 1: Semantic token (works everywhere) */\n color: var(--s-text-primary);\n\n /* FALLBACK 2: Relative color syntax (2024+ browsers) */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_surface-bg)\n /* If L < 0.55, use light text (0.95); otherwise dark text (0.15)\n Threshold 0.55 ensures 4.5:1 contrast per WCAG 2.1 AA */\n clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n /* PRIMARY: contrast-color() (CSS Color Level 6 - 2025+ browsers) */\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_surface-bg));\n }\n}\n\n/* =============================================================================\n SURFACE DEPTH VARIANTS\n ============================================================================= */\n\n/* Flat - default, explicit declaration */\n[s-surface=\"flat\"] {\n --_surface-bg: var(--s-surface-base);\n}\n\n/* Sunken - recessed appearance */\n[s-surface=\"sunken\"] {\n --_surface-bg: var(--s-surface-sunken);\n box-shadow: var(--s-shadow-inner);\n}\n\n/* Raised - elevated card-like appearance */\n[s-surface=\"raised\"] {\n --_surface-bg: var(--s-surface-raised);\n box-shadow: var(--s-shadow-md);\n}\n\n/* Floating - high elevation, for overlays and modals */\n[s-surface=\"floating\"] {\n --_surface-bg: var(--s-surface-raised);\n box-shadow: var(--s-shadow-xl);\n}\n\n/* =============================================================================\n SURFACE MODIFIERS\n ============================================================================= */\n\n/* Bordered surface */\n[s-surface][s-bordered] {\n border: 1px solid var(--s-border-default);\n}\n\n/* Interactive surface (hoverable, focusable) */\n[s-surface][s-interactive] {\n cursor: pointer;\n transition:\n transform var(--s-duration-150) var(--s-ease-out),\n box-shadow var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: var(--s-shadow-lg);\n }\n\n &:active {\n transform: translateY(0);\n box-shadow: var(--s-shadow-sm);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n}\n\n/* =============================================================================\n COLOR VARIANTS\n ============================================================================= */\n\n/* Brand color surfaces - use 700 shade (L≈0.47) for WCAG 4.5:1 with white text */\n/* Hex fallbacks for a11y tools that can't parse OKLCH */\n[s-surface=\"primary\"] {\n --_surface-bg: var(--s-primary-700);\n background-color: #0066aa; /* Fallback for OKLCH */\n background-color: var(--_surface-bg);\n color: #fff;\n}\n\n[s-surface=\"secondary\"] {\n --_surface-bg: var(--s-secondary-700);\n background-color: #6644aa; /* Fallback for OKLCH */\n background-color: var(--_surface-bg);\n color: #fff;\n}\n\n[s-surface=\"accent\"] {\n --_surface-bg: var(--s-accent-700);\n background-color: #aa4466; /* Fallback for OKLCH */\n background-color: var(--_surface-bg);\n color: #fff;\n}\n\n/* =============================================================================\n STATE SURFACES (for alerts, notifications)\n ============================================================================= */\n\n/* State surfaces use light backgrounds with dark text for notification-style alerts */\n/* Hex fallbacks for a11y tools that can't parse OKLCH/light-dark() */\n[s-surface=\"success\"] {\n --_surface-bg: var(--s-state-success-bg);\n background-color: #d4edda; /* Light green fallback */\n background-color: var(--_surface-bg);\n border-left: 4px solid var(--s-state-success);\n color: #1a1a1a;\n}\n\n[s-surface=\"warning\"] {\n --_surface-bg: var(--s-state-warning-bg);\n background-color: #fff3cd; /* Light yellow fallback */\n background-color: var(--_surface-bg);\n border-left: 4px solid var(--s-state-warning);\n color: #1a1a1a;\n}\n\n[s-surface=\"danger\"] {\n --_surface-bg: var(--s-state-danger-bg);\n background-color: #f8d7da; /* Light red fallback */\n background-color: var(--_surface-bg);\n border-left: 4px solid var(--s-state-danger);\n color: #1a1a1a;\n}\n\n/* =============================================================================\n CONTAINER QUERY RESPONSIVE PADDING\n ============================================================================= */\n\n@container (max-width: 20rem) {\n :where([s-surface]) {\n --_surface-padding: var(--s-space-3);\n }\n}\n\n@container (min-width: 40rem) {\n :where([s-surface]) {\n --_surface-padding: var(--s-space-6);\n }\n}\n","/**\n * Shift CSS - Design Tokens\n * Auto-generated from tokens/*.json\n * DO NOT EDIT DIRECTLY\n */\n\n@layer shift.tokens {\n :root {\n color-scheme: light dark;\n\n /* SEED HUE CUSTOMIZATION POINTS */\n --shift-hue-primary: 250;\n --shift-hue-secondary: 180;\n --shift-hue-accent: 30;\n --shift-hue-success: 145;\n --shift-hue-warning: 45;\n --shift-hue-danger: 25;\n --shift-hue-neutral: 250;\n\n /* PRIMARY SCALE */\n --s-primary-50: oklch(0.9778 0.0108 var(--shift-hue-primary));\n --s-primary-100: oklch(0.9356 0.0321 var(--shift-hue-primary));\n --s-primary-200: oklch(0.8811 0.0636 var(--shift-hue-primary));\n --s-primary-300: oklch(0.8267 0.0951 var(--shift-hue-primary));\n --s-primary-400: oklch(0.7422 0.1211 var(--shift-hue-primary));\n --s-primary-500: oklch(0.6478 0.1472 var(--shift-hue-primary));\n --s-primary-600: oklch(0.5733 0.1383 var(--shift-hue-primary));\n --s-primary-700: oklch(0.4689 0.1178 var(--shift-hue-primary));\n --s-primary-800: oklch(0.3944 0.0894 var(--shift-hue-primary));\n --s-primary-900: oklch(0.3200 0.0720 var(--shift-hue-primary));\n --s-primary-950: oklch(0.2378 0.0540 var(--shift-hue-primary));\n\n /* SECONDARY SCALE */\n --s-secondary-50: oklch(0.9778 0.0108 var(--shift-hue-secondary));\n --s-secondary-100: oklch(0.9356 0.0321 var(--shift-hue-secondary));\n --s-secondary-200: oklch(0.8811 0.0636 var(--shift-hue-secondary));\n --s-secondary-300: oklch(0.8267 0.0951 var(--shift-hue-secondary));\n --s-secondary-400: oklch(0.7422 0.1211 var(--shift-hue-secondary));\n --s-secondary-500: oklch(0.6478 0.1472 var(--shift-hue-secondary));\n --s-secondary-600: oklch(0.5733 0.1383 var(--shift-hue-secondary));\n --s-secondary-700: oklch(0.4689 0.1178 var(--shift-hue-secondary));\n --s-secondary-800: oklch(0.3944 0.0894 var(--shift-hue-secondary));\n --s-secondary-900: oklch(0.3200 0.0720 var(--shift-hue-secondary));\n --s-secondary-950: oklch(0.2378 0.0540 var(--shift-hue-secondary));\n\n /* ACCENT SCALE */\n --s-accent-50: oklch(0.9778 0.0108 var(--shift-hue-accent));\n --s-accent-100: oklch(0.9356 0.0321 var(--shift-hue-accent));\n --s-accent-200: oklch(0.8811 0.0636 var(--shift-hue-accent));\n --s-accent-300: oklch(0.8267 0.0951 var(--shift-hue-accent));\n --s-accent-400: oklch(0.7422 0.1211 var(--shift-hue-accent));\n --s-accent-500: oklch(0.6478 0.1472 var(--shift-hue-accent));\n --s-accent-600: oklch(0.5733 0.1383 var(--shift-hue-accent));\n --s-accent-700: oklch(0.4689 0.1178 var(--shift-hue-accent));\n --s-accent-800: oklch(0.3944 0.0894 var(--shift-hue-accent));\n --s-accent-900: oklch(0.3200 0.0720 var(--shift-hue-accent));\n --s-accent-950: oklch(0.2378 0.0540 var(--shift-hue-accent));\n\n /* SUCCESS SCALE */\n --s-success-50: oklch(0.9778 0.0108 var(--shift-hue-success));\n --s-success-100: oklch(0.9356 0.0321 var(--shift-hue-success));\n --s-success-200: oklch(0.8811 0.0636 var(--shift-hue-success));\n --s-success-300: oklch(0.8267 0.0951 var(--shift-hue-success));\n --s-success-400: oklch(0.7422 0.1211 var(--shift-hue-success));\n --s-success-500: oklch(0.6478 0.1472 var(--shift-hue-success));\n --s-success-600: oklch(0.5733 0.1383 var(--shift-hue-success));\n --s-success-700: oklch(0.4689 0.1178 var(--shift-hue-success));\n --s-success-800: oklch(0.3944 0.0894 var(--shift-hue-success));\n --s-success-900: oklch(0.3200 0.0720 var(--shift-hue-success));\n --s-success-950: oklch(0.2378 0.0540 var(--shift-hue-success));\n\n /* WARNING SCALE */\n --s-warning-50: oklch(0.9778 0.0108 var(--shift-hue-warning));\n --s-warning-100: oklch(0.9356 0.0321 var(--shift-hue-warning));\n --s-warning-200: oklch(0.8811 0.0636 var(--shift-hue-warning));\n --s-warning-300: oklch(0.8267 0.0951 var(--shift-hue-warning));\n --s-warning-400: oklch(0.7422 0.1211 var(--shift-hue-warning));\n --s-warning-500: oklch(0.6478 0.1472 var(--shift-hue-warning));\n --s-warning-600: oklch(0.5733 0.1383 var(--shift-hue-warning));\n --s-warning-700: oklch(0.4689 0.1178 var(--shift-hue-warning));\n --s-warning-800: oklch(0.3944 0.0894 var(--shift-hue-warning));\n --s-warning-900: oklch(0.3200 0.0720 var(--shift-hue-warning));\n --s-warning-950: oklch(0.2378 0.0540 var(--shift-hue-warning));\n\n /* DANGER SCALE */\n --s-danger-50: oklch(0.9778 0.0108 var(--shift-hue-danger));\n --s-danger-100: oklch(0.9356 0.0321 var(--shift-hue-danger));\n --s-danger-200: oklch(0.8811 0.0636 var(--shift-hue-danger));\n --s-danger-300: oklch(0.8267 0.0951 var(--shift-hue-danger));\n --s-danger-400: oklch(0.7422 0.1211 var(--shift-hue-danger));\n --s-danger-500: oklch(0.6478 0.1472 var(--shift-hue-danger));\n --s-danger-600: oklch(0.5733 0.1383 var(--shift-hue-danger));\n --s-danger-700: oklch(0.4689 0.1178 var(--shift-hue-danger));\n --s-danger-800: oklch(0.3944 0.0894 var(--shift-hue-danger));\n --s-danger-900: oklch(0.3200 0.0720 var(--shift-hue-danger));\n --s-danger-950: oklch(0.2378 0.0540 var(--shift-hue-danger));\n\n /* NEUTRAL SCALE */\n --s-neutral-50: oklch(0.9778 0.0054 var(--shift-hue-neutral));\n --s-neutral-100: oklch(0.9356 0.0072 var(--shift-hue-neutral));\n --s-neutral-200: oklch(0.8811 0.0090 var(--shift-hue-neutral));\n --s-neutral-300: oklch(0.8267 0.0099 var(--shift-hue-neutral));\n --s-neutral-400: oklch(0.7422 0.0108 var(--shift-hue-neutral));\n --s-neutral-500: oklch(0.6478 0.0118 var(--shift-hue-neutral));\n --s-neutral-600: oklch(0.5733 0.0108 var(--shift-hue-neutral));\n --s-neutral-700: oklch(0.4689 0.0099 var(--shift-hue-neutral));\n --s-neutral-800: oklch(0.3944 0.0090 var(--shift-hue-neutral));\n --s-neutral-900: oklch(0.3200 0.0081 var(--shift-hue-neutral));\n --s-neutral-950: oklch(0.2378 0.0072 var(--shift-hue-neutral));\n\n /* SEMANTIC TOKENS with light-dark() */\n\n /* SURFACE */\n --s-surface-base: light-dark(var(--s-neutral-50), var(--s-neutral-950));\n --s-surface-raised: light-dark(var(--s-neutral-100), var(--s-neutral-900));\n --s-surface-sunken: light-dark(var(--s-neutral-200), var(--s-neutral-800));\n --s-surface-overlay: light-dark(var(--s-neutral-900), var(--s-neutral-100));\n\n /* TEXT */\n --s-text-primary: light-dark(var(--s-neutral-900), var(--s-neutral-50));\n --s-text-secondary: light-dark(var(--s-neutral-700), var(--s-neutral-300));\n --s-text-tertiary: light-dark(var(--s-neutral-500), var(--s-neutral-500));\n --s-text-inverse: light-dark(var(--s-neutral-50), var(--s-neutral-900));\n\n /* BORDER */\n --s-border-default: light-dark(var(--s-neutral-200), var(--s-neutral-800));\n --s-border-muted: light-dark(var(--s-neutral-100), var(--s-neutral-900));\n --s-border-strong: light-dark(var(--s-neutral-400), var(--s-neutral-600));\n\n /* INTERACTIVE */\n --s-interactive-primary: light-dark(var(--s-primary-700), var(--s-primary-300));\n --s-interactive-primary-hover: light-dark(var(--s-primary-800), var(--s-primary-200));\n --s-interactive-primary-active: light-dark(var(--s-primary-900), var(--s-primary-100));\n --s-interactive-secondary: light-dark(var(--s-secondary-700), var(--s-secondary-300));\n\n /* STATE */\n --s-state-success: light-dark(var(--s-success-700), var(--s-success-300));\n --s-state-success-bg: light-dark(var(--s-success-100), var(--s-success-900));\n --s-state-warning: light-dark(var(--s-warning-700), var(--s-warning-300));\n --s-state-warning-bg: light-dark(var(--s-warning-100), var(--s-warning-900));\n --s-state-danger: light-dark(var(--s-danger-700), var(--s-danger-300));\n --s-state-danger-bg: light-dark(var(--s-danger-100), var(--s-danger-900));\n\n /* FOCUS */\n --s-focus-ring: light-dark(var(--s-primary-500), var(--s-primary-400));\n --s-focus-ring-offset: light-dark(var(--s-neutral-50), var(--s-neutral-950));\n\n /* SPACING SCALE */\n --s-space-0: 0;\n --s-space-1: 0.25rem;\n --s-space-2: 0.5rem;\n --s-space-3: 0.75rem;\n --s-space-4: 1rem;\n --s-space-5: 1.25rem;\n --s-space-6: 1.5rem;\n --s-space-7: 1.75rem;\n --s-space-8: 2rem;\n --s-space-9: 2.25rem;\n --s-space-10: 2.5rem;\n --s-space-11: 2.75rem;\n --s-space-12: 3rem;\n --s-space-14: 3.5rem;\n --s-space-16: 4rem;\n --s-space-20: 5rem;\n --s-space-24: 6rem;\n --s-space-28: 7rem;\n --s-space-32: 8rem;\n --s-space-36: 9rem;\n --s-space-40: 10rem;\n --s-space-44: 11rem;\n --s-space-48: 12rem;\n --s-space-52: 13rem;\n --s-space-56: 14rem;\n --s-space-60: 15rem;\n --s-space-64: 16rem;\n --s-space-72: 18rem;\n --s-space-80: 20rem;\n --s-space-96: 24rem;\n --s-space-px: 1px;\n --s-space-0_5: 0.125rem;\n --s-space-1_5: 0.375rem;\n --s-space-2_5: 0.625rem;\n --s-space-3_5: 0.875rem;\n\n /* BORDER RADIUS */\n --s-radius-none: 0;\n --s-radius-sm: 0.125rem;\n --s-radius-base: 0.25rem;\n --s-radius-md: 0.375rem;\n --s-radius-lg: 0.5rem;\n --s-radius-xl: 0.75rem;\n --s-radius-2xl: 1rem;\n --s-radius-3xl: 1.5rem;\n --s-radius-full: 9999px;\n\n /* TYPOGRAPHY */\n --s-font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --s-font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --s-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n\n /* FONT SIZES (fluid) */\n --s-text-xs: clamp(0.6875rem, 0.625rem + 0.25vi, 0.75rem);\n --s-text-sm: clamp(0.8125rem, 0.75rem + 0.25vi, 0.875rem);\n --s-text-base: clamp(0.9375rem, 0.875rem + 0.25vi, 1rem);\n --s-text-lg: clamp(1.0625rem, 1rem + 0.25vi, 1.125rem);\n --s-text-xl: clamp(1.1875rem, 1.0625rem + 0.5vi, 1.25rem);\n --s-text-2xl: clamp(1.4375rem, 1.25rem + 0.75vi, 1.5rem);\n --s-text-3xl: clamp(1.75rem, 1.5rem + 1vi, 1.875rem);\n --s-text-4xl: clamp(2.125rem, 1.75rem + 1.5vi, 2.25rem);\n --s-text-5xl: clamp(2.75rem, 2.25rem + 2vi, 3rem);\n\n /* LINE HEIGHTS */\n --s-leading-none: 1;\n --s-leading-tight: 1.25;\n --s-leading-snug: 1.375;\n --s-leading-normal: 1.5;\n --s-leading-relaxed: 1.625;\n --s-leading-loose: 2;\n\n /* FONT WEIGHTS */\n --s-font-thin: 100;\n --s-font-extralight: 200;\n --s-font-light: 300;\n --s-font-normal: 400;\n --s-font-medium: 500;\n --s-font-semibold: 600;\n --s-font-bold: 700;\n --s-font-extrabold: 800;\n --s-font-black: 900;\n\n /* LETTER SPACING */\n --s-tracking-tighter: -0.05em;\n --s-tracking-tight: -0.025em;\n --s-tracking-normal: 0;\n --s-tracking-wide: 0.025em;\n --s-tracking-wider: 0.05em;\n --s-tracking-widest: 0.1em;\n\n /* TRANSITIONS */\n --s-duration-75: 75ms;\n --s-duration-100: 100ms;\n --s-duration-150: 150ms;\n --s-duration-200: 200ms;\n --s-duration-300: 300ms;\n --s-duration-500: 500ms;\n --s-duration-700: 700ms;\n --s-duration-1000: 1000ms;\n\n /* EASING */\n --s-ease-linear: linear;\n --s-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --s-ease-out: cubic-bezier(0, 0, 0.2, 1);\n --s-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --s-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n\n /* SHADOWS */\n --s-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --s-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --s-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --s-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --s-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --s-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --s-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --s-shadow-none: 0 0 #0000;\n }\n}\n","/**\n * Shift CSS - Visibility & State Utilities (Thematic)\n *\n * Semantic attribute selectors for visibility states.\n * These define the \"state\" of elements.\n *\n * Usage:\n * <div s-hidden>Hidden element</div>\n * <span s-sr-only>Screen reader only</span>\n * <a s-sr-only s-focus:not-sr-only href=\"#main\">Skip to content</a>\n * <div s-hide-on=\"sm\">Hide on small screens</div>\n * <div s-truncate>Truncated text...</div>\n */\n\n/* =============================================================================\n VISIBILITY STATES\n ============================================================================= */\n\n[s-hidden] {\n display: none;\n}\n\n[s-visible] {\n visibility: visible;\n}\n\n[s-invisible] {\n visibility: hidden;\n}\n\n[s-collapse] {\n visibility: collapse;\n}\n\n/* =============================================================================\n SCREEN READER UTILITIES\n ============================================================================= */\n\n/* Visually hidden but accessible to screen readers */\n[s-sr-only] {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* Remove sr-only (for focus states) - legacy attribute value syntax */\n[s-sr-only=\"focusable\"]:focus,\n[s-sr-only=\"focusable\"]:focus-within {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* Undo sr-only - standalone utility */\n[s-not-sr-only] {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* Focus variant: visible when focused (for skip links) */\n[s-focus\\:not-sr-only]:focus,\n[s-focus\\:not-sr-only]:focus-visible {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* Focus-within variant: visible when child is focused */\n[s-focus-within\\:not-sr-only]:focus-within {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* =============================================================================\n TEXT OVERFLOW\n ============================================================================= */\n\n[s-truncate] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n[s-truncate=\"2\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n[s-truncate=\"3\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n}\n\n[s-truncate=\"4\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n overflow: hidden;\n}\n\n/* =============================================================================\n OVERFLOW CONTROL\n ============================================================================= */\n\n[s-overflow=\"auto\"] {\n overflow: auto;\n}\n\n[s-overflow=\"hidden\"] {\n overflow: hidden;\n}\n\n[s-overflow=\"visible\"] {\n overflow: visible;\n}\n\n[s-overflow=\"scroll\"] {\n overflow: scroll;\n}\n\n[s-overflow-x=\"auto\"] {\n overflow-x: auto;\n}\n\n[s-overflow-x=\"hidden\"] {\n overflow-x: hidden;\n}\n\n[s-overflow-y=\"auto\"] {\n overflow-y: auto;\n}\n\n[s-overflow-y=\"hidden\"] {\n overflow-y: hidden;\n}\n\n/* =============================================================================\n RESPONSIVE VISIBILITY\n ============================================================================= */\n\n/* Hide on breakpoints */\n@media (width < 640px) {\n [s-hide-on~=\"sm\"] {\n display: none;\n }\n}\n\n@media (width >= 640px) and (width < 768px) {\n [s-hide-on~=\"md\"] {\n display: none;\n }\n}\n\n@media (width >= 768px) and (width < 1024px) {\n [s-hide-on~=\"lg\"] {\n display: none;\n }\n}\n\n@media (width >= 1024px) {\n [s-hide-on~=\"xl\"] {\n display: none;\n }\n}\n\n/* Show only on breakpoints */\n@media (width >= 640px) {\n [s-show-on~=\"sm\"] {\n display: none;\n }\n}\n\n@media (width < 640px), (width >= 768px) {\n [s-show-on~=\"md\"] {\n display: none;\n }\n}\n\n@media (width < 768px), (width >= 1024px) {\n [s-show-on~=\"lg\"] {\n display: none;\n }\n}\n\n@media (width < 1024px) {\n [s-show-on~=\"xl\"] {\n display: none;\n }\n}\n\n/* =============================================================================\n POINTER EVENTS\n ============================================================================= */\n\n[s-pointer=\"none\"] {\n pointer-events: none;\n}\n\n[s-pointer=\"auto\"] {\n pointer-events: auto;\n}\n\n/* =============================================================================\n USER SELECT\n ============================================================================= */\n\n[s-select=\"none\"] {\n user-select: none;\n}\n\n[s-select=\"text\"] {\n user-select: text;\n}\n\n[s-select=\"all\"] {\n user-select: all;\n}\n\n[s-select=\"auto\"] {\n user-select: auto;\n}\n\n/* =============================================================================\n ISOLATION (for stacking contexts)\n ============================================================================= */\n\n[s-isolate] {\n isolation: isolate;\n}\n\n[s-isolate=\"auto\"] {\n isolation: auto;\n}\n","/**\n * Shift CSS - Prose Component\n *\n * Typography styles for long-form content like articles, blog posts,\n * and markdown-rendered content. Applies sensible defaults to child\n * elements without requiring classes on each element.\n *\n * Usage:\n * <article s-prose>\n * <h1>Title</h1>\n * <p>Content with <a href=\"#\">links</a> and <code>code</code>.</p>\n * </article>\n */\n\n/* =============================================================================\n BASE PROSE CONTAINER\n ============================================================================= */\n\n:where([s-prose]) {\n /* Prose CSS properties (customization points) */\n --_prose-body: var(--s-text-base);\n --_prose-body-weight: var(--s-font-normal);\n --_prose-leading: var(--s-leading-relaxed);\n --_prose-link-color: var(--s-primary-600);\n --_prose-link-hover: var(--s-primary-700);\n --_prose-code-bg: var(--s-neutral-100);\n --_prose-code-color: var(--s-danger-600);\n --_prose-pre-bg: var(--s-neutral-900);\n --_prose-pre-color: var(--s-neutral-100);\n --_prose-border-color: var(--s-border-default);\n --_prose-quote-border: var(--s-primary-500);\n\n font-size: var(--_prose-body);\n font-weight: var(--_prose-body-weight);\n line-height: var(--_prose-leading);\n color: var(--s-text-primary);\n\n /* Limit line length for readability */\n max-width: 65ch;\n}\n\n/* Full width variant */\n[s-prose=\"full\"] {\n max-width: none;\n}\n\n/* =============================================================================\n HEADINGS\n ============================================================================= */\n\n:where([s-prose]) :where(h1, h2, h3, h4, h5, h6) {\n color: var(--s-text-primary);\n font-weight: var(--s-font-bold);\n line-height: var(--s-leading-tight);\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n}\n\n:where([s-prose]) :where(h1) {\n font-size: var(--s-text-4xl);\n margin-top: 0;\n}\n\n:where([s-prose]) :where(h2) {\n font-size: var(--s-text-3xl);\n padding-bottom: 0.25em;\n border-bottom: 1px solid var(--_prose-border-color);\n}\n\n:where([s-prose]) :where(h3) {\n font-size: var(--s-text-2xl);\n}\n\n:where([s-prose]) :where(h4) {\n font-size: var(--s-text-xl);\n}\n\n:where([s-prose]) :where(h5) {\n font-size: var(--s-text-lg);\n}\n\n:where([s-prose]) :where(h6) {\n font-size: var(--s-text-base);\n color: var(--s-text-secondary);\n}\n\n/* =============================================================================\n PARAGRAPHS & BASIC TEXT\n ============================================================================= */\n\n:where([s-prose]) :where(p) {\n margin-bottom: 1.25em;\n}\n\n:where([s-prose]) :where(strong, b) {\n font-weight: var(--s-font-semibold);\n color: var(--s-text-primary);\n}\n\n:where([s-prose]) :where(em, i) {\n font-style: italic;\n}\n\n:where([s-prose]) :where(small) {\n font-size: var(--s-text-sm);\n}\n\n/* =============================================================================\n LINKS\n ============================================================================= */\n\n:where([s-prose]) :where(a) {\n color: var(--_prose-link-color);\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n transition: color var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n color: var(--_prose-link-hover);\n }\n}\n\n/* =============================================================================\n LISTS\n ============================================================================= */\n\n:where([s-prose]) :where(ul, ol) {\n margin-bottom: 1.25em;\n padding-left: 1.5em;\n}\n\n:where([s-prose]) :where(ul) {\n list-style-type: disc;\n}\n\n:where([s-prose]) :where(ol) {\n list-style-type: decimal;\n}\n\n:where([s-prose]) :where(li) {\n margin-bottom: 0.5em;\n\n &::marker {\n color: var(--s-text-tertiary);\n }\n}\n\n:where([s-prose]) :where(li > ul, li > ol) {\n margin-top: 0.5em;\n margin-bottom: 0;\n}\n\n/* Definition lists */\n:where([s-prose]) :where(dl) {\n margin-bottom: 1.25em;\n}\n\n:where([s-prose]) :where(dt) {\n font-weight: var(--s-font-semibold);\n margin-top: 1em;\n}\n\n:where([s-prose]) :where(dd) {\n margin-left: 1.5em;\n margin-bottom: 0.5em;\n}\n\n/* =============================================================================\n BLOCKQUOTES\n ============================================================================= */\n\n:where([s-prose]) :where(blockquote) {\n margin: 1.5em 0;\n padding: 0.5em 1em;\n border-left: 4px solid var(--_prose-quote-border);\n background-color: var(--s-surface-sunken);\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n font-style: italic;\n color: var(--s-text-secondary);\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* =============================================================================\n CODE & PREFORMATTED\n ============================================================================= */\n\n:where([s-prose]) :where(code) {\n font-family: var(--s-font-mono);\n font-size: 0.875em;\n background-color: var(--_prose-code-bg);\n color: var(--_prose-code-color);\n padding: 0.125em 0.375em;\n border-radius: var(--s-radius-sm);\n}\n\n:where([s-prose]) :where(pre) {\n margin: 1.5em 0;\n padding: 1em;\n background-color: var(--_prose-pre-bg);\n color: var(--_prose-pre-color);\n border-radius: var(--s-radius-lg);\n overflow-x: auto;\n font-size: var(--s-text-sm);\n line-height: var(--s-leading-normal);\n\n /* Reset code styles inside pre */\n & code {\n background: none;\n color: inherit;\n padding: 0;\n border-radius: 0;\n font-size: inherit;\n }\n}\n\n/* Keyboard input */\n:where([s-prose]) :where(kbd) {\n font-family: var(--s-font-mono);\n font-size: 0.875em;\n background-color: var(--s-neutral-200);\n color: var(--s-text-primary);\n padding: 0.125em 0.375em;\n border-radius: var(--s-radius-sm);\n border: 1px solid var(--s-neutral-300);\n box-shadow: 0 1px 0 var(--s-neutral-400);\n}\n\n/* =============================================================================\n HORIZONTAL RULE\n ============================================================================= */\n\n:where([s-prose]) :where(hr) {\n margin: 2em 0;\n border: none;\n border-top: 1px solid var(--_prose-border-color);\n}\n\n/* =============================================================================\n IMAGES & FIGURES\n ============================================================================= */\n\n:where([s-prose]) :where(img) {\n max-width: 100%;\n height: auto;\n border-radius: var(--s-radius-lg);\n}\n\n:where([s-prose]) :where(figure) {\n margin: 1.5em 0;\n}\n\n:where([s-prose]) :where(figcaption) {\n margin-top: 0.75em;\n font-size: var(--s-text-sm);\n color: var(--s-text-secondary);\n text-align: center;\n}\n\n/* =============================================================================\n TABLES\n ============================================================================= */\n\n:where([s-prose]) :where(table) {\n width: 100%;\n margin: 1.5em 0;\n border-collapse: collapse;\n font-size: var(--s-text-sm);\n}\n\n:where([s-prose]) :where(thead) {\n border-bottom: 2px solid var(--_prose-border-color);\n}\n\n:where([s-prose]) :where(th) {\n font-weight: var(--s-font-semibold);\n text-align: left;\n padding: 0.75em 1em;\n background-color: var(--s-surface-sunken);\n}\n\n:where([s-prose]) :where(td) {\n padding: 0.75em 1em;\n border-bottom: 1px solid var(--_prose-border-color);\n}\n\n:where([s-prose]) :where(tbody tr:hover) {\n background-color: var(--s-surface-sunken);\n}\n\n/* =============================================================================\n SIZE VARIANTS\n ============================================================================= */\n\n[s-prose][s-size=\"sm\"] {\n --_prose-body: var(--s-text-sm);\n}\n\n[s-prose][s-size=\"lg\"] {\n --_prose-body: var(--s-text-lg);\n}\n\n/* =============================================================================\n DARK MODE ADJUSTMENTS\n ============================================================================= */\n\n@media (prefers-color-scheme: dark) {\n :where([s-prose]) {\n --_prose-link-color: var(--s-primary-400);\n --_prose-link-hover: var(--s-primary-300);\n --_prose-code-bg: var(--s-neutral-800);\n --_prose-code-color: var(--s-danger-400);\n --_prose-pre-bg: var(--s-neutral-950);\n --_prose-pre-color: var(--s-neutral-200);\n }\n\n :where([s-prose]) :where(kbd) {\n background-color: var(--s-neutral-700);\n border-color: var(--s-neutral-600);\n box-shadow: 0 1px 0 var(--s-neutral-500);\n }\n}\n\n/* Also support explicit dark mode via color-scheme */\n:root[style*=\"color-scheme: dark\"] :where([s-prose]),\n:root[style*=\"color-scheme:dark\"] :where([s-prose]) {\n --_prose-link-color: var(--s-primary-400);\n --_prose-link-hover: var(--s-primary-300);\n --_prose-code-bg: var(--s-neutral-800);\n --_prose-code-color: var(--s-danger-400);\n --_prose-pre-bg: var(--s-neutral-950);\n --_prose-pre-color: var(--s-neutral-200);\n}\n","/**\n * Shift CSS - Button Component\n *\n * Accessible button styles using semantic attribute selectors.\n * Uses s-btn attribute for variants and s-size for scaling.\n *\n * Usage:\n * <button s-btn=\"primary\">Primary</button>\n * <button s-btn=\"secondary\">Secondary</button>\n * <button s-btn=\"ghost\">Ghost</button>\n * <button s-btn=\"primary\" s-size=\"lg\">Large Primary</button>\n */\n\n/* Base button - zero specificity for easy overrides */\n:where([s-btn]) {\n /* Button CSS properties (customization points) */\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n --_btn-border: transparent;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--s-space-2);\n\n padding: var(--s-space-2) var(--s-space-4);\n border-radius: var(--s-radius-md);\n font-weight: var(--s-font-semibold);\n font-size: var(--s-text-sm);\n line-height: 1;\n white-space: nowrap;\n\n background-color: var(--_btn-bg);\n color: var(--_btn-text);\n border: 1px solid var(--_btn-border);\n\n /* Auto-contrast for custom backgrounds (0.55 threshold for WCAG 4.5:1) */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_btn-bg) clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_btn-bg));\n }\n\n /* Transitions */\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n border-color var(--s-duration-150) var(--s-ease-out),\n transform var(--s-duration-100) var(--s-ease-out);\n\n cursor: pointer;\n user-select: none;\n\n /* Hover state */\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-hover);\n }\n\n /* Active state */\n &:active:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-active);\n transform: scale(0.98);\n }\n\n /* Focus state */\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n /* Disabled state */\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n\n/* =============================================================================\n BUTTON VARIANTS (0,1,0 specificity - slightly sticky)\n ============================================================================= */\n\n/* Primary - default, explicit declaration */\n[s-btn=\"primary\"] {\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-hover);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary-active);\n }\n}\n\n/* Secondary */\n[s-btn=\"secondary\"] {\n --_btn-bg: var(--s-surface-raised);\n --_btn-text: var(--s-text-primary);\n --_btn-border: var(--s-border-default);\n\n /* Override auto-contrast */\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-surface-sunken);\n }\n}\n\n/* Ghost - transparent background */\n[s-btn=\"ghost\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n\n /* Override auto-contrast for transparent bg */\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-surface-sunken);\n }\n}\n\n/* Link - looks like a link */\n[s-btn=\"link\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n --_btn-border: transparent;\n\n color: var(--_btn-text);\n text-decoration: underline;\n text-underline-offset: 2px;\n\n &:hover:not(:disabled) {\n --_btn-text: var(--s-interactive-primary-hover);\n color: var(--_btn-text);\n }\n}\n\n/* Outline */\n[s-btn=\"outline\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n --_btn-border: var(--s-interactive-primary);\n\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n color: var(--_btn-text);\n }\n}\n\n/* =============================================================================\n STATE VARIANTS\n ============================================================================= */\n\n/* Danger */\n[s-btn=\"danger\"] {\n --_btn-bg: var(--s-state-danger);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-danger-800);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-danger-900);\n }\n}\n\n/* Success */\n[s-btn=\"success\"] {\n --_btn-bg: var(--s-state-success);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-success-800);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-success-900);\n }\n}\n\n/* Warning */\n[s-btn=\"warning\"] {\n --_btn-bg: var(--s-state-warning);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-warning-800);\n }\n\n &:active:not(:disabled) {\n --_btn-bg: var(--s-warning-900);\n }\n}\n\n/* =============================================================================\n SIZE MODIFIERS (composable via s-size attribute)\n ============================================================================= */\n\n[s-btn][s-size=\"sm\"] {\n padding: var(--s-space-1) var(--s-space-3);\n font-size: var(--s-text-xs);\n}\n\n[s-btn][s-size=\"lg\"] {\n padding: var(--s-space-3) var(--s-space-6);\n font-size: var(--s-text-base);\n}\n\n[s-btn][s-size=\"xl\"] {\n padding: var(--s-space-4) var(--s-space-8);\n font-size: var(--s-text-lg);\n}\n\n/* =============================================================================\n SPECIAL STATES\n ============================================================================= */\n\n/* Icon-only button */\n[s-btn][s-icon] {\n padding: var(--s-space-2);\n aspect-ratio: 1;\n}\n\n/* Full-width button */\n[s-btn][s-block] {\n width: 100%;\n}\n\n/* Loading state */\n[s-btn][s-loading] {\n position: relative;\n color: transparent;\n pointer-events: none;\n\n &::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 1em;\n height: 1em;\n border: 2px solid var(--s-text-inverse);\n border-right-color: transparent;\n border-radius: 50%;\n animation: s-btn-spin 0.6s linear infinite;\n }\n}\n\n@keyframes s-btn-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* =============================================================================\n BUTTON GROUP\n ============================================================================= */\n\n[s-btn-group] {\n display: inline-flex;\n\n & > [s-btn] {\n border-radius: 0;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n }\n\n &:not(:last-child) {\n border-right: none;\n }\n }\n}\n","/**\n * Shift CSS - Skip Link Component\n *\n * Accessible skip links for keyboard navigation (WCAG 2.1 Level A - 2.4.1).\n * Hidden by default, appears prominently when focused via keyboard.\n *\n * Usage:\n * <a href=\"#main-content\" s-skip-link>Skip to main content</a>\n *\n * Multiple skip links:\n * <div s-skip-link-group>\n * <a href=\"#main\" s-skip-link>Skip to content</a>\n * <a href=\"#nav\" s-skip-link>Skip to navigation</a>\n * </div>\n */\n\n/* =============================================================================\n BASE SKIP LINK\n ============================================================================= */\n\n:where([s-skip-link]) {\n /* Skip link CSS properties (customization points) */\n --_skip-bg: var(--s-primary-600);\n --_skip-color: white;\n --_skip-radius: var(--s-radius-md);\n --_skip-shadow: var(--s-shadow-lg);\n --_skip-z: 9999;\n\n /* Hidden state - positioned off-screen */\n position: fixed;\n top: -100%;\n left: 50%;\n transform: translateX(-50%);\n z-index: var(--_skip-z);\n\n /* Styling */\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n padding: var(--s-space-3) var(--s-space-6);\n background-color: var(--_skip-bg);\n color: var(--_skip-color);\n font-size: var(--s-text-sm);\n font-weight: var(--s-font-semibold);\n text-decoration: none;\n border-radius: var(--_skip-radius);\n box-shadow: var(--_skip-shadow);\n white-space: nowrap;\n\n /* Transition for smooth appearance */\n transition:\n top var(--s-duration-200) var(--s-ease-out),\n opacity var(--s-duration-200) var(--s-ease-out);\n opacity: 0;\n}\n\n/* Visible state on focus */\n[s-skip-link]:focus,\n[s-skip-link]:focus-visible {\n top: var(--s-space-4);\n opacity: 1;\n outline: none;\n\n /* Double ring focus indicator for high visibility */\n box-shadow:\n var(--_skip-shadow),\n 0 0 0 3px white,\n 0 0 0 5px var(--_skip-bg);\n}\n\n/* =============================================================================\n SKIP LINK GROUP\n ============================================================================= */\n\n[s-skip-link-group] {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 9999;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--s-space-2);\n padding: var(--s-space-2);\n}\n\n/* Adjust skip links within group */\n[s-skip-link-group] [s-skip-link] {\n position: relative;\n top: -200%;\n left: 0;\n transform: none;\n}\n\n[s-skip-link-group] [s-skip-link]:focus,\n[s-skip-link-group] [s-skip-link]:focus-visible {\n top: 0;\n}\n\n/* =============================================================================\n SKIP LINK VARIANTS\n ============================================================================= */\n\n/* Secondary/subtle variant */\n[s-skip-link=\"secondary\"] {\n --_skip-bg: var(--s-neutral-800);\n}\n\n/* High contrast variant */\n[s-skip-link=\"contrast\"] {\n --_skip-bg: var(--s-neutral-950);\n --_skip-color: var(--s-neutral-50);\n}\n\n/* =============================================================================\n REDUCED MOTION\n ============================================================================= */\n\n@media (prefers-reduced-motion: reduce) {\n [s-skip-link] {\n transition: none;\n }\n}\n\n/* =============================================================================\n DARK MODE ADJUSTMENTS\n ============================================================================= */\n\n@media (prefers-color-scheme: dark) {\n :where([s-skip-link]:not([s-skip-link=\"secondary\"]):not([s-skip-link=\"contrast\"])) {\n --_skip-bg: var(--s-primary-500);\n }\n\n [s-skip-link]:focus,\n [s-skip-link]:focus-visible {\n box-shadow:\n var(--_skip-shadow),\n 0 0 0 3px var(--s-neutral-900),\n 0 0 0 5px var(--_skip-bg);\n }\n}\n\n/* Also support explicit dark mode */\n:root[style*=\"color-scheme: dark\"] :where([s-skip-link]:not([s-skip-link=\"secondary\"]):not([s-skip-link=\"contrast\"])),\n:root[style*=\"color-scheme:dark\"] :where([s-skip-link]:not([s-skip-link=\"secondary\"]):not([s-skip-link=\"contrast\"])) {\n --_skip-bg: var(--s-primary-500);\n}\n","/**\n * Shift CSS - Spacing Utilities\n *\n * Margin, padding, and gap utility classes.\n * Uses spacing tokens for consistency.\n * Namespaced with `s-` prefix.\n */\n\n/* Margin utilities */\n.s-m-0 {\n margin: 0;\n}\n.s-m-1 {\n margin: var(--s-space-1);\n}\n.s-m-2 {\n margin: var(--s-space-2);\n}\n.s-m-3 {\n margin: var(--s-space-3);\n}\n.s-m-4 {\n margin: var(--s-space-4);\n}\n.s-m-5 {\n margin: var(--s-space-5);\n}\n.s-m-6 {\n margin: var(--s-space-6);\n}\n.s-m-8 {\n margin: var(--s-space-8);\n}\n.s-m-10 {\n margin: var(--s-space-10);\n}\n.s-m-12 {\n margin: var(--s-space-12);\n}\n.s-m-auto {\n margin: auto;\n}\n\n/* Margin X (horizontal) */\n.s-mx-0 {\n margin-inline: 0;\n}\n.s-mx-1 {\n margin-inline: var(--s-space-1);\n}\n.s-mx-2 {\n margin-inline: var(--s-space-2);\n}\n.s-mx-3 {\n margin-inline: var(--s-space-3);\n}\n.s-mx-4 {\n margin-inline: var(--s-space-4);\n}\n.s-mx-5 {\n margin-inline: var(--s-space-5);\n}\n.s-mx-6 {\n margin-inline: var(--s-space-6);\n}\n.s-mx-8 {\n margin-inline: var(--s-space-8);\n}\n.s-mx-auto {\n margin-inline: auto;\n}\n\n/* Margin Y (vertical) */\n.s-my-0 {\n margin-block: 0;\n}\n.s-my-1 {\n margin-block: var(--s-space-1);\n}\n.s-my-2 {\n margin-block: var(--s-space-2);\n}\n.s-my-3 {\n margin-block: var(--s-space-3);\n}\n.s-my-4 {\n margin-block: var(--s-space-4);\n}\n.s-my-5 {\n margin-block: var(--s-space-5);\n}\n.s-my-6 {\n margin-block: var(--s-space-6);\n}\n.s-my-8 {\n margin-block: var(--s-space-8);\n}\n.s-my-auto {\n margin-block: auto;\n}\n\n/* Margin top */\n.s-mt-0 {\n margin-top: 0;\n}\n.s-mt-1 {\n margin-top: var(--s-space-1);\n}\n.s-mt-2 {\n margin-top: var(--s-space-2);\n}\n.s-mt-3 {\n margin-top: var(--s-space-3);\n}\n.s-mt-4 {\n margin-top: var(--s-space-4);\n}\n.s-mt-5 {\n margin-top: var(--s-space-5);\n}\n.s-mt-6 {\n margin-top: var(--s-space-6);\n}\n.s-mt-8 {\n margin-top: var(--s-space-8);\n}\n.s-mt-auto {\n margin-top: auto;\n}\n\n/* Margin bottom */\n.s-mb-0 {\n margin-bottom: 0;\n}\n.s-mb-1 {\n margin-bottom: var(--s-space-1);\n}\n.s-mb-2 {\n margin-bottom: var(--s-space-2);\n}\n.s-mb-3 {\n margin-bottom: var(--s-space-3);\n}\n.s-mb-4 {\n margin-bottom: var(--s-space-4);\n}\n.s-mb-5 {\n margin-bottom: var(--s-space-5);\n}\n.s-mb-6 {\n margin-bottom: var(--s-space-6);\n}\n.s-mb-8 {\n margin-bottom: var(--s-space-8);\n}\n.s-mb-auto {\n margin-bottom: auto;\n}\n\n/* Margin left */\n.s-ml-0 {\n margin-left: 0;\n}\n.s-ml-1 {\n margin-left: var(--s-space-1);\n}\n.s-ml-2 {\n margin-left: var(--s-space-2);\n}\n.s-ml-3 {\n margin-left: var(--s-space-3);\n}\n.s-ml-4 {\n margin-left: var(--s-space-4);\n}\n.s-ml-auto {\n margin-left: auto;\n}\n\n/* Margin right */\n.s-mr-0 {\n margin-right: 0;\n}\n.s-mr-1 {\n margin-right: var(--s-space-1);\n}\n.s-mr-2 {\n margin-right: var(--s-space-2);\n}\n.s-mr-3 {\n margin-right: var(--s-space-3);\n}\n.s-mr-4 {\n margin-right: var(--s-space-4);\n}\n.s-mr-auto {\n margin-right: auto;\n}\n\n/* Padding utilities */\n.s-p-0 {\n padding: 0;\n}\n.s-p-1 {\n padding: var(--s-space-1);\n}\n.s-p-2 {\n padding: var(--s-space-2);\n}\n.s-p-3 {\n padding: var(--s-space-3);\n}\n.s-p-4 {\n padding: var(--s-space-4);\n}\n.s-p-5 {\n padding: var(--s-space-5);\n}\n.s-p-6 {\n padding: var(--s-space-6);\n}\n.s-p-8 {\n padding: var(--s-space-8);\n}\n.s-p-10 {\n padding: var(--s-space-10);\n}\n.s-p-12 {\n padding: var(--s-space-12);\n}\n\n/* Padding X (horizontal) */\n.s-px-0 {\n padding-inline: 0;\n}\n.s-px-1 {\n padding-inline: var(--s-space-1);\n}\n.s-px-2 {\n padding-inline: var(--s-space-2);\n}\n.s-px-3 {\n padding-inline: var(--s-space-3);\n}\n.s-px-4 {\n padding-inline: var(--s-space-4);\n}\n.s-px-5 {\n padding-inline: var(--s-space-5);\n}\n.s-px-6 {\n padding-inline: var(--s-space-6);\n}\n.s-px-8 {\n padding-inline: var(--s-space-8);\n}\n\n/* Padding Y (vertical) */\n.s-py-0 {\n padding-block: 0;\n}\n.s-py-1 {\n padding-block: var(--s-space-1);\n}\n.s-py-2 {\n padding-block: var(--s-space-2);\n}\n.s-py-3 {\n padding-block: var(--s-space-3);\n}\n.s-py-4 {\n padding-block: var(--s-space-4);\n}\n.s-py-5 {\n padding-block: var(--s-space-5);\n}\n.s-py-6 {\n padding-block: var(--s-space-6);\n}\n.s-py-8 {\n padding-block: var(--s-space-8);\n}\n\n/* Padding top */\n.s-pt-0 {\n padding-top: 0;\n}\n.s-pt-1 {\n padding-top: var(--s-space-1);\n}\n.s-pt-2 {\n padding-top: var(--s-space-2);\n}\n.s-pt-3 {\n padding-top: var(--s-space-3);\n}\n.s-pt-4 {\n padding-top: var(--s-space-4);\n}\n.s-pt-5 {\n padding-top: var(--s-space-5);\n}\n.s-pt-6 {\n padding-top: var(--s-space-6);\n}\n.s-pt-8 {\n padding-top: var(--s-space-8);\n}\n\n/* Padding bottom */\n.s-pb-0 {\n padding-bottom: 0;\n}\n.s-pb-1 {\n padding-bottom: var(--s-space-1);\n}\n.s-pb-2 {\n padding-bottom: var(--s-space-2);\n}\n.s-pb-3 {\n padding-bottom: var(--s-space-3);\n}\n.s-pb-4 {\n padding-bottom: var(--s-space-4);\n}\n.s-pb-5 {\n padding-bottom: var(--s-space-5);\n}\n.s-pb-6 {\n padding-bottom: var(--s-space-6);\n}\n.s-pb-8 {\n padding-bottom: var(--s-space-8);\n}\n\n/* Padding left */\n.s-pl-0 {\n padding-left: 0;\n}\n.s-pl-1 {\n padding-left: var(--s-space-1);\n}\n.s-pl-2 {\n padding-left: var(--s-space-2);\n}\n.s-pl-3 {\n padding-left: var(--s-space-3);\n}\n.s-pl-4 {\n padding-left: var(--s-space-4);\n}\n\n/* Padding right */\n.s-pr-0 {\n padding-right: 0;\n}\n.s-pr-1 {\n padding-right: var(--s-space-1);\n}\n.s-pr-2 {\n padding-right: var(--s-space-2);\n}\n.s-pr-3 {\n padding-right: var(--s-space-3);\n}\n.s-pr-4 {\n padding-right: var(--s-space-4);\n}\n\n/* Gap utilities */\n.s-gap-0 {\n gap: 0;\n}\n.s-gap-1 {\n gap: var(--s-space-1);\n}\n.s-gap-2 {\n gap: var(--s-space-2);\n}\n.s-gap-3 {\n gap: var(--s-space-3);\n}\n.s-gap-4 {\n gap: var(--s-space-4);\n}\n.s-gap-5 {\n gap: var(--s-space-5);\n}\n.s-gap-6 {\n gap: var(--s-space-6);\n}\n.s-gap-8 {\n gap: var(--s-space-8);\n}\n.s-gap-10 {\n gap: var(--s-space-10);\n}\n.s-gap-12 {\n gap: var(--s-space-12);\n}\n\n/* Column gap */\n.s-gap-x-0 {\n column-gap: 0;\n}\n.s-gap-x-1 {\n column-gap: var(--s-space-1);\n}\n.s-gap-x-2 {\n column-gap: var(--s-space-2);\n}\n.s-gap-x-3 {\n column-gap: var(--s-space-3);\n}\n.s-gap-x-4 {\n column-gap: var(--s-space-4);\n}\n.s-gap-x-6 {\n column-gap: var(--s-space-6);\n}\n.s-gap-x-8 {\n column-gap: var(--s-space-8);\n}\n\n/* Row gap */\n.s-gap-y-0 {\n row-gap: 0;\n}\n.s-gap-y-1 {\n row-gap: var(--s-space-1);\n}\n.s-gap-y-2 {\n row-gap: var(--s-space-2);\n}\n.s-gap-y-3 {\n row-gap: var(--s-space-3);\n}\n.s-gap-y-4 {\n row-gap: var(--s-space-4);\n}\n.s-gap-y-6 {\n row-gap: var(--s-space-6);\n}\n.s-gap-y-8 {\n row-gap: var(--s-space-8);\n}\n\n/* Space between children (using gap in flex/grid context) */\n.s-space-y-1 > * + * {\n margin-top: var(--s-space-1);\n}\n.s-space-y-2 > * + * {\n margin-top: var(--s-space-2);\n}\n.s-space-y-3 > * + * {\n margin-top: var(--s-space-3);\n}\n.s-space-y-4 > * + * {\n margin-top: var(--s-space-4);\n}\n.s-space-y-6 > * + * {\n margin-top: var(--s-space-6);\n}\n.s-space-y-8 > * + * {\n margin-top: var(--s-space-8);\n}\n\n.s-space-x-1 > * + * {\n margin-left: var(--s-space-1);\n}\n.s-space-x-2 > * + * {\n margin-left: var(--s-space-2);\n}\n.s-space-x-3 > * + * {\n margin-left: var(--s-space-3);\n}\n.s-space-x-4 > * + * {\n margin-left: var(--s-space-4);\n}\n.s-space-x-6 > * + * {\n margin-left: var(--s-space-6);\n}\n.s-space-x-8 > * + * {\n margin-left: var(--s-space-8);\n}\n","/**\n * Shift CSS - Flex/Grid Atomic Utilities\n *\n * Atomic utilities for flex/grid children and sizing.\n * Structural layout patterns are in layout.css (attributes).\n * Namespaced with `s-` prefix.\n */\n\n/* =============================================================================\n FLEX ITEM UTILITIES\n ============================================================================= */\n\n/* Flex shorthand */\n.s-flex-1 {\n flex: 1 1 0%;\n}\n.s-flex-auto {\n flex: 1 1 auto;\n}\n.s-flex-initial {\n flex: 0 1 auto;\n}\n.s-flex-none {\n flex: none;\n}\n\n/* Flex grow */\n.s-grow {\n flex-grow: 1;\n}\n.s-grow-0 {\n flex-grow: 0;\n}\n\n/* Flex shrink */\n.s-shrink {\n flex-shrink: 1;\n}\n.s-shrink-0 {\n flex-shrink: 0;\n}\n\n/* =============================================================================\n ALIGN SELF (for flex/grid children)\n ============================================================================= */\n\n.s-self-auto {\n align-self: auto;\n}\n.s-self-start {\n align-self: flex-start;\n}\n.s-self-end {\n align-self: flex-end;\n}\n.s-self-center {\n align-self: center;\n}\n.s-self-stretch {\n align-self: stretch;\n}\n.s-self-baseline {\n align-self: baseline;\n}\n\n/* =============================================================================\n PLACE UTILITIES (shorthand for align + justify)\n ============================================================================= */\n\n.s-place-items-start {\n place-items: start;\n}\n.s-place-items-end {\n place-items: end;\n}\n.s-place-items-center {\n place-items: center;\n}\n.s-place-items-stretch {\n place-items: stretch;\n}\n\n.s-place-content-start {\n place-content: start;\n}\n.s-place-content-end {\n place-content: end;\n}\n.s-place-content-center {\n place-content: center;\n}\n.s-place-content-between {\n place-content: space-between;\n}\n.s-place-content-around {\n place-content: space-around;\n}\n.s-place-content-evenly {\n place-content: space-evenly;\n}\n\n/* =============================================================================\n ORDER\n ============================================================================= */\n\n.s-order-first {\n order: -9999;\n}\n.s-order-last {\n order: 9999;\n}\n.s-order-none {\n order: 0;\n}\n.s-order-1 {\n order: 1;\n}\n.s-order-2 {\n order: 2;\n}\n.s-order-3 {\n order: 3;\n}\n\n/* =============================================================================\n WIDTH\n ============================================================================= */\n\n.s-w-full {\n width: 100%;\n}\n.s-w-screen {\n width: 100vw;\n}\n.s-w-min {\n width: min-content;\n}\n.s-w-max {\n width: max-content;\n}\n.s-w-fit {\n width: fit-content;\n}\n.s-w-auto {\n width: auto;\n}\n\n/* =============================================================================\n HEIGHT\n ============================================================================= */\n\n.s-h-full {\n height: 100%;\n}\n.s-h-screen {\n height: 100vh;\n}\n.s-h-screen-dvh {\n height: 100dvh;\n}\n.s-h-min {\n height: min-content;\n}\n.s-h-max {\n height: max-content;\n}\n.s-h-fit {\n height: fit-content;\n}\n.s-h-auto {\n height: auto;\n}\n\n/* =============================================================================\n MIN/MAX WIDTH\n ============================================================================= */\n\n.s-min-w-0 {\n min-width: 0;\n}\n.s-min-w-full {\n min-width: 100%;\n}\n.s-max-w-none {\n max-width: none;\n}\n.s-max-w-xs {\n max-width: 20rem;\n}\n.s-max-w-sm {\n max-width: 24rem;\n}\n.s-max-w-md {\n max-width: 28rem;\n}\n.s-max-w-lg {\n max-width: 32rem;\n}\n.s-max-w-xl {\n max-width: 36rem;\n}\n.s-max-w-2xl {\n max-width: 42rem;\n}\n.s-max-w-3xl {\n max-width: 48rem;\n}\n.s-max-w-4xl {\n max-width: 56rem;\n}\n.s-max-w-5xl {\n max-width: 64rem;\n}\n.s-max-w-6xl {\n max-width: 72rem;\n}\n.s-max-w-7xl {\n max-width: 80rem;\n}\n.s-max-w-full {\n max-width: 100%;\n}\n.s-max-w-prose {\n max-width: 65ch;\n}\n\n/* =============================================================================\n MIN/MAX HEIGHT\n ============================================================================= */\n\n.s-min-h-0 {\n min-height: 0;\n}\n.s-min-h-full {\n min-height: 100%;\n}\n.s-min-h-screen {\n min-height: 100vh;\n}\n.s-min-h-screen-dvh {\n min-height: 100dvh;\n}\n.s-max-h-full {\n max-height: 100%;\n}\n.s-max-h-screen {\n max-height: 100vh;\n}\n\n/* =============================================================================\n ASPECT RATIO\n ============================================================================= */\n\n.s-aspect-auto {\n aspect-ratio: auto;\n}\n.s-aspect-square {\n aspect-ratio: 1 / 1;\n}\n.s-aspect-video {\n aspect-ratio: 16 / 9;\n}\n.s-aspect-4-3 {\n aspect-ratio: 4 / 3;\n}\n\n/* =============================================================================\n Z-INDEX\n ============================================================================= */\n\n.s-z-0 {\n z-index: 0;\n}\n.s-z-10 {\n z-index: 10;\n}\n.s-z-20 {\n z-index: 20;\n}\n.s-z-30 {\n z-index: 30;\n}\n.s-z-40 {\n z-index: 40;\n}\n.s-z-50 {\n z-index: 50;\n}\n.s-z-auto {\n z-index: auto;\n}\n","/**\n * Shift CSS - Card Component\n *\n * Flexible card component with header, body, footer sections.\n * Uses semantic attribute selectors and supports container queries.\n *\n * Usage:\n * <article s-card>Basic card content</article>\n * <article s-card s-surface=\"raised\">Elevated card</article>\n * <article s-card s-interactive>Clickable card</article>\n */\n\n/* Base card - zero specificity for easy overrides */\n:where([s-card]) {\n /* Card CSS properties (customization points) */\n --_card-bg: var(--s-surface-raised);\n --_card-border: var(--s-border-muted);\n --_card-radius: var(--s-radius-xl);\n --_card-shadow: var(--s-shadow-base);\n --_card-padding: var(--s-space-4);\n\n container-type: inline-size;\n\n display: flex;\n flex-direction: column;\n\n background-color: var(--_card-bg);\n border: 1px solid var(--_card-border);\n border-radius: var(--_card-radius);\n box-shadow: var(--_card-shadow);\n overflow: hidden;\n\n /* Auto-contrast text (0.55 threshold for WCAG 4.5:1) */\n color: var(--s-text-primary);\n\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_card-bg) clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n}\n\n/* =============================================================================\n CARD SECTIONS\n ============================================================================= */\n\n[s-card-header] {\n padding: var(--_card-padding, var(--s-space-4));\n border-bottom: 1px solid var(--_card-border, var(--s-border-muted));\n}\n\n[s-card-body] {\n padding: var(--_card-padding, var(--s-space-4));\n flex: 1;\n}\n\n[s-card-footer] {\n padding: var(--_card-padding, var(--s-space-4));\n border-top: 1px solid var(--_card-border, var(--s-border-muted));\n}\n\n/* Card media (image at top) */\n[s-card-media] {\n aspect-ratio: 16 / 9;\n overflow: hidden;\n\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n/* Card title */\n[s-card-title] {\n font-size: var(--s-text-lg);\n font-weight: var(--s-font-semibold);\n line-height: var(--s-leading-tight);\n margin-bottom: var(--s-space-1);\n}\n\n/* Card subtitle/description */\n[s-card-subtitle] {\n font-size: var(--s-text-sm);\n color: var(--s-text-secondary);\n}\n\n/* =============================================================================\n CARD VARIANTS\n ============================================================================= */\n\n/* Flat card (no shadow) */\n[s-card=\"flat\"] {\n --_card-shadow: none;\n --_card-border: var(--s-border-default);\n}\n\n/* Elevated card */\n[s-card=\"elevated\"],\n[s-card][s-surface=\"raised\"] {\n --_card-shadow: var(--s-shadow-lg);\n --_card-border: transparent;\n}\n\n/* Floating card (high elevation) */\n[s-card][s-surface=\"floating\"] {\n --_card-shadow: var(--s-shadow-xl);\n --_card-border: transparent;\n}\n\n/* Outline card */\n[s-card=\"outline\"] {\n --_card-shadow: none;\n --_card-border: var(--s-border-strong);\n --_card-bg: transparent;\n}\n\n/* =============================================================================\n CARD MODIFIERS\n ============================================================================= */\n\n/* Interactive card */\n[s-card][s-interactive] {\n cursor: pointer;\n transition:\n transform var(--s-duration-200) var(--s-ease-out),\n box-shadow var(--s-duration-200) var(--s-ease-out);\n\n &:hover {\n transform: translateY(-4px);\n --_card-shadow: var(--s-shadow-xl);\n }\n\n &:active {\n transform: translateY(-2px);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n}\n\n/* Card with link overlay */\n[s-card][s-link] {\n position: relative;\n\n & a::after {\n content: \"\";\n position: absolute;\n inset: 0;\n }\n}\n\n/* Horizontal card layout */\n[s-card][s-horizontal] {\n flex-direction: row;\n\n & [s-card-media] {\n aspect-ratio: 1;\n width: 33%;\n flex-shrink: 0;\n }\n}\n\n/* Container query: Stack horizontal cards on small containers */\n@container (max-width: 24rem) {\n [s-card][s-horizontal] {\n flex-direction: column;\n\n & [s-card-media] {\n width: 100%;\n aspect-ratio: 16 / 9;\n }\n }\n}\n\n/* =============================================================================\n CARD SIZE VARIANTS\n ============================================================================= */\n\n[s-card][s-size=\"sm\"] {\n --_card-padding: var(--s-space-3);\n --_card-radius: var(--s-radius-lg);\n}\n\n[s-card][s-size=\"lg\"] {\n --_card-padding: var(--s-space-6);\n}\n\n/* Feature card (centered, larger padding) */\n[s-card=\"feature\"] {\n text-align: center;\n --_card-padding: var(--s-space-6);\n}\n\n[s-card-icon] {\n font-size: var(--s-text-4xl);\n margin-bottom: var(--s-space-4);\n}\n\n/* =============================================================================\n CARD LAYOUTS\n ============================================================================= */\n\n/* Card grid */\n[s-card-grid] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));\n gap: var(--s-space-4);\n}\n\n/* Card stack (vertical list) */\n[s-card-stack] {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-4);\n}\n","/**\n * Shift CSS - Layout Utilities (Structural)\n *\n * Semantic attribute selectors for layout patterns.\n * These define the \"skeleton\" of your UI.\n *\n * Usage:\n * <div s-flex>Flex container</div>\n * <div s-flex=\"col\">Vertical stack</div>\n * <div s-flex=\"center\">Centered content</div>\n * <div s-grid=\"3\">3-column grid</div>\n * <div s-gap=\"md\">Consistent spacing</div>\n * <div s-container>Centered container</div>\n */\n\n/* =============================================================================\n FLEX LAYOUT\n ============================================================================= */\n\n/* Base flex - just enables flexbox */\n[s-flex] {\n display: flex;\n}\n\n/* Flex direction variants */\n[s-flex=\"row\"] {\n display: flex;\n flex-direction: row;\n}\n\n[s-flex=\"col\"] {\n display: flex;\n flex-direction: column;\n}\n\n[s-flex=\"row-reverse\"] {\n display: flex;\n flex-direction: row-reverse;\n}\n\n[s-flex=\"col-reverse\"] {\n display: flex;\n flex-direction: column-reverse;\n}\n\n/* Common flex patterns */\n[s-flex=\"center\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n[s-flex=\"stack\"] {\n display: flex;\n flex-direction: column;\n}\n\n[s-flex=\"between\"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n[s-flex=\"end\"] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n/* Flex wrap */\n[s-flex~=\"wrap\"] {\n flex-wrap: wrap;\n}\n\n[s-flex~=\"nowrap\"] {\n flex-wrap: nowrap;\n}\n\n/* =============================================================================\n FLEX ALIGNMENT (composable modifiers)\n ============================================================================= */\n\n/* Justify content */\n[s-justify=\"start\"] {\n justify-content: flex-start;\n}\n\n[s-justify=\"end\"] {\n justify-content: flex-end;\n}\n\n[s-justify=\"center\"] {\n justify-content: center;\n}\n\n[s-justify=\"between\"] {\n justify-content: space-between;\n}\n\n[s-justify=\"around\"] {\n justify-content: space-around;\n}\n\n[s-justify=\"evenly\"] {\n justify-content: space-evenly;\n}\n\n/* Align items */\n[s-items=\"start\"] {\n align-items: flex-start;\n}\n\n[s-items=\"end\"] {\n align-items: flex-end;\n}\n\n[s-items=\"center\"] {\n align-items: center;\n}\n\n[s-items=\"baseline\"] {\n align-items: baseline;\n}\n\n[s-items=\"stretch\"] {\n align-items: stretch;\n}\n\n/* Align content (for wrapped flex) */\n[s-content=\"start\"] {\n align-content: flex-start;\n}\n\n[s-content=\"end\"] {\n align-content: flex-end;\n}\n\n[s-content=\"center\"] {\n align-content: center;\n}\n\n[s-content=\"between\"] {\n align-content: space-between;\n}\n\n[s-content=\"around\"] {\n align-content: space-around;\n}\n\n/* =============================================================================\n GRID LAYOUT\n ============================================================================= */\n\n/* Base grid - just enables grid */\n[s-grid] {\n display: grid;\n}\n\n/* Grid column variants */\n[s-grid=\"1\"] {\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n[s-grid=\"2\"] {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n[s-grid=\"3\"] {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n[s-grid=\"4\"] {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n[s-grid=\"5\"] {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n\n[s-grid=\"6\"] {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n\n[s-grid=\"12\"] {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n/* Auto-fit grid - responsive without media queries */\n[s-grid=\"auto-fit\"] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n}\n\n[s-grid=\"auto-fill\"] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));\n}\n\n/* Grid rows */\n[s-grid-rows=\"1\"] {\n grid-template-rows: repeat(1, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"2\"] {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"3\"] {\n grid-template-rows: repeat(3, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"4\"] {\n grid-template-rows: repeat(4, minmax(0, 1fr));\n}\n\n/* =============================================================================\n GRID SPAN (for children)\n ============================================================================= */\n\n[s-col-span=\"1\"] {\n grid-column: span 1 / span 1;\n}\n\n[s-col-span=\"2\"] {\n grid-column: span 2 / span 2;\n}\n\n[s-col-span=\"3\"] {\n grid-column: span 3 / span 3;\n}\n\n[s-col-span=\"4\"] {\n grid-column: span 4 / span 4;\n}\n\n[s-col-span=\"6\"] {\n grid-column: span 6 / span 6;\n}\n\n[s-col-span=\"12\"] {\n grid-column: span 12 / span 12;\n}\n\n[s-col-span=\"full\"] {\n grid-column: 1 / -1;\n}\n\n[s-row-span=\"1\"] {\n grid-row: span 1 / span 1;\n}\n\n[s-row-span=\"2\"] {\n grid-row: span 2 / span 2;\n}\n\n[s-row-span=\"3\"] {\n grid-row: span 3 / span 3;\n}\n\n[s-row-span=\"full\"] {\n grid-row: 1 / -1;\n}\n\n/* =============================================================================\n GAP (Designer's Tool - semantic spacing)\n ============================================================================= */\n\n/* Base gap - applies default medium spacing */\n[s-gap] {\n gap: var(--s-space-4);\n}\n\n/* Gap size variants */\n[s-gap=\"xs\"] {\n gap: var(--s-space-1);\n}\n\n[s-gap=\"sm\"] {\n gap: var(--s-space-2);\n}\n\n[s-gap=\"md\"] {\n gap: var(--s-space-4);\n}\n\n[s-gap=\"lg\"] {\n gap: var(--s-space-6);\n}\n\n[s-gap=\"xl\"] {\n gap: var(--s-space-8);\n}\n\n[s-gap=\"none\"] {\n gap: 0;\n}\n\n/* =============================================================================\n CONTAINER\n ============================================================================= */\n\n[s-container] {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--s-space-4);\n max-width: var(--s-container-max, 80rem);\n}\n\n[s-container=\"sm\"] {\n max-width: 40rem;\n}\n\n[s-container=\"md\"] {\n max-width: 48rem;\n}\n\n[s-container=\"lg\"] {\n max-width: 64rem;\n}\n\n[s-container=\"xl\"] {\n max-width: 80rem;\n}\n\n[s-container=\"full\"] {\n max-width: 100%;\n}\n\n[s-container=\"prose\"] {\n max-width: 65ch;\n}\n\n/* =============================================================================\n POSITION\n ============================================================================= */\n\n[s-position=\"static\"] {\n position: static;\n}\n\n[s-position=\"relative\"] {\n position: relative;\n}\n\n[s-position=\"absolute\"] {\n position: absolute;\n}\n\n[s-position=\"fixed\"] {\n position: fixed;\n}\n\n[s-position=\"sticky\"] {\n position: sticky;\n}\n\n/* Common position patterns */\n[s-inset=\"0\"] {\n inset: 0;\n}\n\n[s-inset=\"auto\"] {\n inset: auto;\n}\n\n/* =============================================================================\n DISPLAY (for non-flex/grid cases)\n ============================================================================= */\n\n[s-display=\"block\"] {\n display: block;\n}\n\n[s-display=\"inline\"] {\n display: inline;\n}\n\n[s-display=\"inline-block\"] {\n display: inline-block;\n}\n\n[s-display=\"contents\"] {\n display: contents;\n}\n\n[s-display=\"inline-flex\"] {\n display: inline-flex;\n}\n\n[s-display=\"inline-grid\"] {\n display: inline-grid;\n}\n","/**\n * Shift CSS - Typography Utilities\n *\n * Text styling, alignment, and color utilities.\n * Namespaced with `s-` prefix.\n */\n\n/* =============================================================================\n FONT FAMILY\n ============================================================================= */\n\n.s-font-sans {\n font-family: var(--s-font-sans);\n}\n.s-font-serif {\n font-family: var(--s-font-serif);\n}\n.s-font-mono {\n font-family: var(--s-font-mono);\n}\n\n/* =============================================================================\n FONT SIZE\n ============================================================================= */\n\n.s-text-xs {\n font-size: var(--s-text-xs);\n}\n.s-text-sm {\n font-size: var(--s-text-sm);\n}\n.s-text-base {\n font-size: var(--s-text-base);\n}\n.s-text-lg {\n font-size: var(--s-text-lg);\n}\n.s-text-xl {\n font-size: var(--s-text-xl);\n}\n.s-text-2xl {\n font-size: var(--s-text-2xl);\n}\n.s-text-3xl {\n font-size: var(--s-text-3xl);\n}\n.s-text-4xl {\n font-size: var(--s-text-4xl);\n}\n.s-text-5xl {\n font-size: var(--s-text-5xl);\n}\n\n/* =============================================================================\n FONT WEIGHT\n ============================================================================= */\n\n.s-font-thin {\n font-weight: var(--s-font-thin);\n}\n.s-font-extralight {\n font-weight: var(--s-font-extralight);\n}\n.s-font-light {\n font-weight: var(--s-font-light);\n}\n.s-font-normal {\n font-weight: var(--s-font-normal);\n}\n.s-font-medium {\n font-weight: var(--s-font-medium);\n}\n.s-font-semibold {\n font-weight: var(--s-font-semibold);\n}\n.s-font-bold {\n font-weight: var(--s-font-bold);\n}\n.s-font-extrabold {\n font-weight: var(--s-font-extrabold);\n}\n.s-font-black {\n font-weight: var(--s-font-black);\n}\n\n/* =============================================================================\n LINE HEIGHT\n ============================================================================= */\n\n.s-leading-none {\n line-height: var(--s-leading-none);\n}\n.s-leading-tight {\n line-height: var(--s-leading-tight);\n}\n.s-leading-snug {\n line-height: var(--s-leading-snug);\n}\n.s-leading-normal {\n line-height: var(--s-leading-normal);\n}\n.s-leading-relaxed {\n line-height: var(--s-leading-relaxed);\n}\n.s-leading-loose {\n line-height: var(--s-leading-loose);\n}\n\n/* =============================================================================\n LETTER SPACING\n ============================================================================= */\n\n.s-tracking-tighter {\n letter-spacing: var(--s-tracking-tighter);\n}\n.s-tracking-tight {\n letter-spacing: var(--s-tracking-tight);\n}\n.s-tracking-normal {\n letter-spacing: var(--s-tracking-normal);\n}\n.s-tracking-wide {\n letter-spacing: var(--s-tracking-wide);\n}\n.s-tracking-wider {\n letter-spacing: var(--s-tracking-wider);\n}\n.s-tracking-widest {\n letter-spacing: var(--s-tracking-widest);\n}\n\n/* =============================================================================\n TEXT ALIGNMENT\n ============================================================================= */\n\n.s-text-left {\n text-align: left;\n}\n.s-text-center {\n text-align: center;\n}\n.s-text-right {\n text-align: right;\n}\n.s-text-justify {\n text-align: justify;\n}\n.s-text-start {\n text-align: start;\n}\n.s-text-end {\n text-align: end;\n}\n\n/* =============================================================================\n VERTICAL ALIGNMENT\n ============================================================================= */\n\n.s-align-baseline {\n vertical-align: baseline;\n}\n.s-align-top {\n vertical-align: top;\n}\n.s-align-middle {\n vertical-align: middle;\n}\n.s-align-bottom {\n vertical-align: bottom;\n}\n.s-align-text-top {\n vertical-align: text-top;\n}\n.s-align-text-bottom {\n vertical-align: text-bottom;\n}\n.s-align-sub {\n vertical-align: sub;\n}\n.s-align-super {\n vertical-align: super;\n}\n\n/* =============================================================================\n TEXT DECORATION\n ============================================================================= */\n\n.s-underline {\n text-decoration-line: underline;\n}\n.s-overline {\n text-decoration-line: overline;\n}\n.s-line-through {\n text-decoration-line: line-through;\n}\n.s-no-underline {\n text-decoration-line: none;\n}\n\n/* Text decoration style */\n.s-decoration-solid {\n text-decoration-style: solid;\n}\n.s-decoration-double {\n text-decoration-style: double;\n}\n.s-decoration-dotted {\n text-decoration-style: dotted;\n}\n.s-decoration-dashed {\n text-decoration-style: dashed;\n}\n.s-decoration-wavy {\n text-decoration-style: wavy;\n}\n\n/* =============================================================================\n TEXT TRANSFORM\n ============================================================================= */\n\n.s-uppercase {\n text-transform: uppercase;\n}\n.s-lowercase {\n text-transform: lowercase;\n}\n.s-capitalize {\n text-transform: capitalize;\n}\n.s-normal-case {\n text-transform: none;\n}\n\n/* =============================================================================\n TEXT OVERFLOW\n ============================================================================= */\n\n.s-text-ellipsis {\n text-overflow: ellipsis;\n}\n.s-text-clip {\n text-overflow: clip;\n}\n\n/* =============================================================================\n TEXT WRAP\n ============================================================================= */\n\n.s-text-wrap {\n text-wrap: wrap;\n}\n.s-text-nowrap {\n text-wrap: nowrap;\n}\n.s-text-balance {\n text-wrap: balance;\n}\n.s-text-pretty {\n text-wrap: pretty;\n}\n\n/* =============================================================================\n WHITESPACE\n ============================================================================= */\n\n.s-whitespace-normal {\n white-space: normal;\n}\n.s-whitespace-nowrap {\n white-space: nowrap;\n}\n.s-whitespace-pre {\n white-space: pre;\n}\n.s-whitespace-pre-line {\n white-space: pre-line;\n}\n.s-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.s-whitespace-break-spaces {\n white-space: break-spaces;\n}\n\n/* =============================================================================\n WORD BREAK\n ============================================================================= */\n\n.s-break-normal {\n overflow-wrap: normal;\n word-break: normal;\n}\n.s-break-words {\n overflow-wrap: break-word;\n}\n.s-break-all {\n word-break: break-all;\n}\n.s-break-keep {\n word-break: keep-all;\n}\n\n/* =============================================================================\n HYPHENS\n ============================================================================= */\n\n.s-hyphens-none {\n hyphens: none;\n}\n.s-hyphens-manual {\n hyphens: manual;\n}\n.s-hyphens-auto {\n hyphens: auto;\n}\n\n/* =============================================================================\n TEXT COLOR (semantic)\n ============================================================================= */\n\n.s-text-primary {\n color: var(--s-text-primary);\n}\n.s-text-secondary {\n color: var(--s-text-secondary);\n}\n.s-text-tertiary {\n color: var(--s-text-tertiary);\n}\n.s-text-inverse {\n color: var(--s-text-inverse);\n}\n\n/* Text color (status) */\n.s-text-success {\n color: var(--s-state-success);\n}\n.s-text-warning {\n color: var(--s-state-warning);\n}\n.s-text-danger {\n color: var(--s-state-danger);\n}\n\n/* =============================================================================\n LINK STYLING\n ============================================================================= */\n\n.s-link {\n color: var(--s-interactive-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n\n &:hover {\n color: var(--s-interactive-primary-hover);\n }\n}\n\n/* =============================================================================\n LIST STYLES\n ============================================================================= */\n\n.s-list-none {\n list-style-type: none;\n}\n.s-list-disc {\n list-style-type: disc;\n}\n.s-list-decimal {\n list-style-type: decimal;\n}\n.s-list-inside {\n list-style-position: inside;\n}\n.s-list-outside {\n list-style-position: outside;\n}\n\n/* =============================================================================\n OPACITY\n ============================================================================= */\n\n.s-opacity-0 {\n opacity: 0;\n}\n.s-opacity-5 {\n opacity: 0.05;\n}\n.s-opacity-10 {\n opacity: 0.1;\n}\n.s-opacity-20 {\n opacity: 0.2;\n}\n.s-opacity-25 {\n opacity: 0.25;\n}\n.s-opacity-30 {\n opacity: 0.3;\n}\n.s-opacity-40 {\n opacity: 0.4;\n}\n.s-opacity-50 {\n opacity: 0.5;\n}\n.s-opacity-60 {\n opacity: 0.6;\n}\n.s-opacity-70 {\n opacity: 0.7;\n}\n.s-opacity-75 {\n opacity: 0.75;\n}\n.s-opacity-80 {\n opacity: 0.8;\n}\n.s-opacity-90 {\n opacity: 0.9;\n}\n.s-opacity-95 {\n opacity: 0.95;\n}\n.s-opacity-100 {\n opacity: 1;\n}\n","/**\n * Shift CSS - Input Component\n *\n * Form input styles using semantic attribute selectors.\n *\n * Usage:\n * <input s-input type=\"text\" placeholder=\"Enter text\">\n * <input s-input s-size=\"lg\" type=\"email\">\n * <textarea s-input>Content</textarea>\n * <select s-input><option>Choose...</option></select>\n */\n\n/* Base input - zero specificity for easy overrides */\n:where([s-input]) {\n /* Input CSS properties (customization points) */\n --_input-bg: var(--s-surface-base);\n --_input-border: var(--s-border-default);\n --_input-text: var(--s-text-primary);\n --_input-placeholder: var(--s-text-tertiary);\n --_input-radius: var(--s-radius-md);\n\n appearance: none;\n display: block;\n width: 100%;\n\n padding: var(--s-space-2) var(--s-space-3);\n background-color: var(--_input-bg);\n border: 2px solid var(--_input-border);\n border-radius: var(--_input-radius);\n color: var(--_input-text);\n font-size: var(--s-text-sm);\n line-height: var(--s-leading-normal);\n\n transition:\n border-color var(--s-duration-150) var(--s-ease-out),\n box-shadow var(--s-duration-150) var(--s-ease-out);\n\n &::placeholder {\n color: var(--_input-placeholder);\n }\n\n /* Hover state */\n &:hover:not(:disabled):not(:focus-visible) {\n --_input-border: var(--s-border-strong);\n }\n\n /* Focus state - use :focus-visible to avoid showing ring on mouse click */\n &:focus-visible {\n --_input-border: var(--s-interactive-primary);\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n /* Disabled state */\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--s-surface-sunken);\n }\n\n /* Invalid state */\n &:invalid:not(:placeholder-shown),\n &[aria-invalid=\"true\"] {\n --_input-border: var(--s-state-danger);\n\n &:focus-visible {\n outline-color: var(--s-state-danger);\n }\n }\n}\n\n/* =============================================================================\n INPUT SIZE VARIANTS\n ============================================================================= */\n\n[s-input][s-size=\"sm\"] {\n padding: var(--s-space-1) var(--s-space-2);\n font-size: var(--s-text-xs);\n}\n\n[s-input][s-size=\"lg\"] {\n padding: var(--s-space-3) var(--s-space-4);\n font-size: var(--s-text-base);\n}\n\n/* =============================================================================\n SPECIFIC INPUT TYPES\n ============================================================================= */\n\n/* Textarea */\ntextarea[s-input] {\n min-height: 6rem;\n resize: vertical;\n}\n\n/* Select */\nselect[s-input] {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--s-space-3) center;\n padding-right: var(--s-space-10);\n}\n\n/* =============================================================================\n INPUT GROUP (with addons)\n ============================================================================= */\n\n[s-input-group] {\n display: flex;\n\n & > [s-input] {\n flex: 1;\n min-width: 0;\n border-radius: 0;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n }\n }\n\n & > [s-input-addon] {\n display: flex;\n align-items: center;\n padding: var(--s-space-2) var(--s-space-3);\n background-color: var(--s-surface-sunken);\n border: 2px solid var(--s-border-default);\n color: var(--s-text-secondary);\n font-size: var(--s-text-sm);\n white-space: nowrap;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n border-right: none;\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n border-left: none;\n }\n }\n}\n\n/* =============================================================================\n FORM FIELD WRAPPER\n ============================================================================= */\n\n[s-field] {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-1);\n}\n\n[s-field-label] {\n font-size: var(--s-text-sm);\n font-weight: var(--s-font-medium);\n color: var(--s-text-primary);\n}\n\n[s-field-hint] {\n font-size: var(--s-text-xs);\n color: var(--s-text-secondary);\n}\n\n[s-field-error] {\n font-size: var(--s-text-xs);\n color: var(--s-state-danger);\n}\n\n/* =============================================================================\n CHECKBOX / RADIO\n ============================================================================= */\n\n[s-checkbox],\n[s-radio] {\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n cursor: pointer;\n\n & input {\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--s-border-default);\n background-color: var(--s-surface-base);\n cursor: pointer;\n\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n border-color var(--s-duration-150) var(--s-ease-out);\n\n &:checked {\n background-color: var(--s-interactive-primary);\n border-color: var(--s-interactive-primary);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n\n[s-checkbox] input {\n border-radius: var(--s-radius-sm);\n\n &:checked {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0.75rem;\n }\n}\n\n[s-radio] input {\n border-radius: 50%;\n\n &:checked {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n }\n}\n\n/* =============================================================================\n TOGGLE SWITCH\n ============================================================================= */\n\n[s-toggle] {\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n cursor: pointer;\n\n & input {\n appearance: none;\n width: 2.5rem;\n height: 1.5rem;\n border-radius: 9999px;\n background-color: var(--s-border-default);\n cursor: pointer;\n position: relative;\n\n transition: background-color var(--s-duration-200) var(--s-ease-out);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: calc(1.5rem - 4px);\n height: calc(1.5rem - 4px);\n border-radius: 50%;\n background-color: var(--s-surface-base);\n box-shadow: var(--s-shadow-sm);\n\n transition: transform var(--s-duration-200) var(--s-ease-out);\n }\n\n &:checked {\n background-color: var(--s-interactive-primary);\n\n &::after {\n transform: translateX(1rem);\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AAcA;ECJA;;;;EAOA;;;;EAKA;;;;IAQE;MAAgD;;;IAKzB;;;;;EAMzB;;;;;;;;EASA;;;;;;EAWA;;;;;EASA;;;;;;;EAQA;;;;EAWA;;;;;EAWA;;;;EAKA;;;;;EAOA;;;;IAIE;;;;;EAMF;;;;;EAMA;;;;EAKA;;;;;EAQA;;;;;EAMA;;;;EAKA;;;;EAKA;IACE;;;;;;;;EAWF;IACE;;;;;EAMF;IACE;;;;;;;IASA;;;;IAKA;;;;IAIA;;;;IAIA;;;;;;ADzLF;EKRA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ALOF;ESAA;;;;;;;;;;;IA8BE;MAA0C;;;IAU1C;MAAwC;;;;EAU1C;;;;;EAMA;;;;;;EAOA;;;;;;EAOA;;;;;;EAWA;;;;EAKA;;;;IAME;;;;;IAKA;;;;;IAKA;;;;;;EAYF;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAaA;;;;;;;;EAQA;;;;;;;;EAQA;;;;;;;;EAYA;IACE;;;;;EAKF;IACE;;;;;EIhLF;;;;;;;;;;;;;;;;;;IAuBE;MAA0C;;;IAM1C;MAAwC;;;IAK7B;;;;IASX;;;MAME;QAA6E;;;;IAS/E;;;MAME;QAA6E;;;MAOnE;;;IAIZ;;;;;IAMA;;;;;;;EAYF;;;;;EAMA;;;;;;;EAUA;;;;;IAOE;;;;;EAMF;;;;;;;;IASE;;;;;;EAOF;;;;;;IAOE;;;;;;;EAaF;;;;EAKA;;;;EAKA;;;;EAQA;;;;;EAKA;;;;;EAKA;;;;;EAUA;;;;;EAMA;;;;EAKA;;;;;IAKE;;;;;;;;;;;;;;EAcF;;;;;;EAUA;;;IAGE;;;MAGE;;;;MAIA;;;;MAIA;;;;;;EAWJ;IAKE;MACE;;;;;IASF;MACE;;;;;MAKA;;;;;IASF;MACE;;;;;;EGrSJ;;;;;;;;;;;;;;;;IAsBE;MAA0C;;;;EAW5C;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;IAIE;;;;;;;EAQF;;;;;;;EAQA;;;;;EAUA;;;;;EAMA;;;;;EAQA;;;;;EAOA;;;;;;EAWA;;;;IAOE;;;;MAKE;QAA0C;;;;IAK5C;;;;IAIA;;;;;;EAOF;;;IAGE;;;;;;;EAQF;;;IAGE;;;;;;;EAQF;IACE;;;MAGE;;;;;;;EAWJ;;;;;EAKA;;;;EAKA;;;;;EAKA;;;;;EAUA;;;;;;EAOA;;;;;;EAWA;IAKE;MACE;;;;;IASF;MACE;;;;;;IAUF;MACE;;;;;;EFtPJ;;;;;;;;;;;;;;;;;;IAwBE;;;;IAKA;;;;IAKA;;;;;MAME;QAA0C;;;;IAM5C;;;;;;IAOA;;;MAIE;;;;;;EAUJ;;;;;EAKA;;;;;EAUA;;;;;EAMA;;;;;;;EAWA;;;IAGE;;;;;MAKE;;;;MAIA;;;;;IAKF;;;;;;;;;;MAUE;;;;;MAKA;;;;;;;EAWJ;;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;;EASA;;;;;;IAOE;;;;;;;;;MAYE;;;;;MAKA;;;;;MAKA;;;;;;;EAOJ;;;IAGE;;;;;;;;EAQF;;;IAGE;;;;;;;EAWF;;;;;;IAME;;;;;;;;;;MAWE;;;;;;;;;;;;;MAcA;;;QAGE;;;;;MAKF;;;;;MAKA;;;;;;;EAYJ;IAKE;MACE;;;;MAIA;;;;;IAUF;MACE;;;;;MAKA;;;;;;IAWF;MACE;;;;;MAKA;;;;;;EC7TJ;;;;EAKA;;;;;;;;;;;;;;;;;IAyBE;;;;;IAMM;;;EAIR;;;;EAKA;;;;;EAKA;;;;;;;;;;;;EAeA;;;;;IAME;MAA0C;;;;EAK5C;;;;;;;;;;EAcA;;;;EAKA;;;;EAKA;;;;;;;;EAaA;;;;;EAMA;;;;;EAMA;;;;;;EAMA;IACE;;;;;;EAOF;;;;;;EAMA;IACE;;;;;;EAWF;;;;;;;;IASE;;;;;;;;;EAYF;;;;;;;EAQA;;;;;;;;;EAUA;;;;;;;;;;;;;;;;IAyBE;;;;;IAKA;;;;;IAKA;;;;;EAUF;IACE;;;;IAIA;;;;;IAKA;;;;IAKA;;;;;EEtQF;;;;;;;;;;;;;;;;;;;EAwBA;;;;EAQA;;;;;;;;EAQA;;;;;EAKA;;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;EASA;;;;EAIA;;;;;EAKA;;;;EAIA;;;;EAQA;;;;;;IAOE;;;;;EASF;;;;;EAKA;;;;EAIA;;;;EAIA;;;IAGE;;;;;EAKF;;;;;EAMA;;;;EAIA;;;;;EAKA;;;;;EASA;;;;;;;;;IASE;;;;;EASF;;;;;;;;;EASA;;;;;;;;;;IAWE;;;;;;;;;EAUF;;;;;;;;;;;EAeA;;;;;;EAUA;;;;;;EAMA;;;;EAIA;;;;;;;EAWA;;;;;;;EAOA;;;;EAIA;;;;;;;EAOA;;;;;EAKA;;;;EAQA;;;;EAIA;;;;EAQA;IACE;;;;;;;;;IASA;;;;;;;EAQF;;;;;;;;;EfnTA;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA;;;;;;;EAiBA;;;;;;;;;;;;;EAeA;;;;;;;EAOA;;;;EAUA;;;;EAKA;;;;;EASA;IACE;;;;;EASF;IACE;;;;IAIA;;;;;EAUF;;;;EIhIA;;;;;;;;;;;;;;;;;IAsBE;MAA0C;;;IAM1C;MAAwC;;;;EAY1C;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;;EAWA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAYA;;;;;EAMA;;;;;EAUA;;;;EAKA;;;;;;;EAOA;;;;;EAKA;;;;;EASA;IACE;;;;;EAWF;IAEE;MACE;;;;MAGA;;;;;IAMF;MACE;;;;;MAIA;;;;;IAMF;MACE;;;;;;EIpMJ;;;;;;;;;;;;EAgBA;;;;;;;;;;;;;;;;IAyBE;MAA0C;;;IAKhC;;;;;;;;;;;EAmBZ;;;;;;;;;;;;;;;;;EAoCA;;;;;;EAcA;;;;;;;;EAQA;;;;;;;;;;EAYA;;;;EAQA;;;;;;;EAUA;;;;;;;;;;;EAgBA;;;;EAQA;;;;;;;;;EASA;;;;;;;;;;;;;EAeA;;;;EAYA;IACE;;;;;EAOF;IACE;;;;;;IAMA;;;;;EC5NF;;;;;;;;;;EAUA;;;;;;EASA;;;;EAAA;;;;EASA;;;;;;EAQA;;;;EAQA;;;;;;;;;;;;;;;;;;;;;;EAmCA;;;;;;EAWA;;;;;EAMA;;;;;;;;EAQA;;;;EAKA;;;;;;;EAUA;;;;EAQA;IACE;;;;;;;;;;;IAsBA;;;;;IAMA;;;;;;;IAQA;;;;;;;;;;EAcF;;;;;;;;;;;;;;;;EAkBA;;;;EAIA;;;;;EAKA;;;;;EAMA;;;;EAIA;;;;EAQA;;;;;;;EAWA;;;;;;;;;;EAcA;IACE;;;;;EAKF;IACE;;;;IAIA;;;;;;;AXtRF;EGMA;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;;;EAMA;;;;;;EAOA;;;;EAIA;;;;EASA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAMA;;;;;EAKA;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;;;;EAOA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EI1XA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;;;;;;;;;;;;EAaA;;;;;;;;;;;EAqDA;;;;;;EAMA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAWA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EASA;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAMF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EAKF;IACE;;;;;EASF;;;;EAIA;;;;EAQA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAQA;;;;EAIA;;;;EH7PA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EIrdA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EIrRA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;;EAIA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAKA;;;;EAGA;;;;EAGA;;;;EAQA;;;;;IAKE;;;;;EASF;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAQA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA;;;;EAGA","sources":["home/runner/work/shift-css/shift-css/packages/core/src/index.css","home/runner/work/shift-css/shift-css/packages/core/src/base/reset.css","home/runner/work/shift-css/shift-css/packages/core/src/components/skip-link.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/layout.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/spacing.css","home/runner/work/shift-css/shift-css/packages/core/src/tokens/tokens.css","home/runner/work/shift-css/shift-css/packages/core/src/components/badge.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/visibility.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/flex.css","home/runner/work/shift-css/shift-css/packages/core/src/components/surface.css","home/runner/work/shift-css/shift-css/packages/core/src/components/tooltip.css","home/runner/work/shift-css/shift-css/packages/core/src/components/menu.css","home/runner/work/shift-css/shift-css/packages/core/src/utils/typography.css","home/runner/work/shift-css/shift-css/packages/core/src/components/button.css","home/runner/work/shift-css/shift-css/packages/core/src/components/input.css","home/runner/work/shift-css/shift-css/packages/core/src/components/modal.css","home/runner/work/shift-css/shift-css/packages/core/src/components/card.css","home/runner/work/shift-css/shift-css/packages/core/src/components/prose.css"],"sourcesContent":["/**\n * Shift CSS\n * Zero-runtime, OKLCH-native CSS framework\n *\n * Layer order (lowest → highest specificity):\n * 1. shift.reset - Modern browser reset, fluid typography, accessibility\n * 2. shift.tokens - CSS custom properties (generated from JSON)\n * 3. shift.core - UI components (Buttons, Cards, Surface)\n * 4. shift.utils - Atomic utility classes\n *\n * User CSS automatically overrides framework styles (no !important needed)\n */\n\n/* Declare layer order FIRST - establishes specificity */\n@layer shift.reset, shift.tokens, shift.core, shift.utils;\n\n/* Import layer contents */\n@import \"./base/reset.css\" layer(shift.reset);\n@import \"./tokens/tokens.css\" layer(shift.tokens);\n@import \"./components/surface.css\" layer(shift.core);\n@import \"./components/button.css\" layer(shift.core);\n@import \"./components/card.css\" layer(shift.core);\n@import \"./components/input.css\" layer(shift.core);\n@import \"./components/modal.css\" layer(shift.core);\n@import \"./components/prose.css\" layer(shift.core);\n@import \"./components/skip-link.css\" layer(shift.core);\n@import \"./components/badge.css\" layer(shift.core);\n@import \"./components/tooltip.css\" layer(shift.core);\n@import \"./components/menu.css\" layer(shift.core);\n@import \"./utils/layout.css\" layer(shift.utils);\n@import \"./utils/visibility.css\" layer(shift.utils);\n@import \"./utils/spacing.css\" layer(shift.utils);\n@import \"./utils/flex.css\" layer(shift.utils);\n@import \"./utils/typography.css\" layer(shift.utils);\n","/**\n * Shift CSS - Modern Reset\n *\n * A modern CSS reset optimized for:\n * - Accessibility\n * - Fluid typography\n * - Sensible defaults\n */\n\n/* Box sizing */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Remove default margins */\n* {\n margin: 0;\n}\n\n/* Fluid typography and smooth scrolling */\nhtml {\n /* Enable light-dark() function for automatic theming */\n color-scheme: light dark;\n\n /* Fluid base font size: 15px at 320px → 16px at 1280px */\n font-size: clamp(0.9375rem, 0.875rem + 0.25vi, 1rem);\n\n /* Smooth scrolling for users who haven't disabled it */\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n\n /* Better text rendering */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n/* Body defaults */\nbody {\n line-height: 1.5;\n min-height: 100dvh;\n font-family: var(--s-font-sans, ui-sans-serif, system-ui, sans-serif);\n background-color: var(--s-surface-base);\n color: var(--s-text-primary);\n}\n\n/* Improved media defaults */\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n/* Inherit fonts for form controls */\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n color: inherit;\n}\n\n/* Remove built-in button styles */\nbutton {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n/* Text overflow handling */\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n}\n\n/* Heading line heights */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n line-height: 1.2;\n text-wrap: balance;\n}\n\n/* Paragraph text wrapping */\np {\n text-wrap: pretty;\n}\n\n/* Remove list styles */\nul,\nol {\n list-style: none;\n padding: 0;\n}\n\n/* Links */\na {\n color: var(--s-interactive-primary);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n/* Focus styles for accessibility */\n:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n}\n\n/* Remove focus outline for mouse users */\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* Stacking context for app root */\n#root,\n#__next,\n#app {\n isolation: isolate;\n min-height: 100dvh;\n}\n\n/* Table defaults */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/* Pre/code defaults */\npre,\ncode {\n font-family: var(--s-font-mono, ui-monospace, monospace);\n}\n\npre {\n overflow-x: auto;\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: more) {\n * {\n border-color: currentColor !important;\n }\n}\n\n/* Print styles */\n@media print {\n *,\n *::before,\n *::after {\n background: transparent !important;\n color: #000 !important;\n box-shadow: none !important;\n text-shadow: none !important;\n }\n\n a,\n a:visited {\n text-decoration: underline;\n }\n\n a[href]::after {\n content: \" (\" attr(href) \")\";\n }\n\n pre {\n white-space: pre-wrap !important;\n }\n\n @page {\n margin: 2cm;\n }\n}\n","/**\n * Shift CSS - Skip Link Component\n *\n * Accessible skip links for keyboard navigation (WCAG 2.1 Level A - 2.4.1).\n * Hidden by default, appears prominently when focused via keyboard.\n *\n * Usage:\n * <a href=\"#main-content\" s-skip-link>Skip to main content</a>\n *\n * Multiple skip links:\n * <div s-skip-link-group>\n * <a href=\"#main\" s-skip-link>Skip to content</a>\n * <a href=\"#nav\" s-skip-link>Skip to navigation</a>\n * </div>\n */\n\n/* =============================================================================\n BASE SKIP LINK\n ============================================================================= */\n\n:where([s-skip-link]) {\n /* Skip link CSS properties (customization points) */\n --_skip-bg: var(--s-primary-600);\n --_skip-color: white;\n --_skip-radius: var(--s-radius-md);\n --_skip-shadow: var(--s-shadow-lg);\n --_skip-z: 9999;\n\n /* Hidden state - positioned off-screen */\n position: fixed;\n top: -100%;\n left: 50%;\n transform: translateX(-50%);\n z-index: var(--_skip-z);\n\n /* Styling */\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n padding: var(--s-space-3) var(--s-space-6);\n background-color: var(--_skip-bg);\n color: var(--_skip-color);\n font-size: var(--s-text-sm);\n font-weight: var(--s-font-semibold);\n text-decoration: none;\n border-radius: var(--_skip-radius);\n box-shadow: var(--_skip-shadow);\n white-space: nowrap;\n\n /* Transition for smooth appearance */\n transition:\n top var(--s-duration-200) var(--s-ease-out),\n opacity var(--s-duration-200) var(--s-ease-out);\n opacity: 0;\n}\n\n/* Visible state on focus */\n[s-skip-link]:focus,\n[s-skip-link]:focus-visible {\n top: var(--s-space-4);\n opacity: 1;\n outline: none;\n\n /* Double ring focus indicator for high visibility */\n box-shadow:\n var(--_skip-shadow),\n 0 0 0 3px white,\n 0 0 0 5px var(--_skip-bg);\n}\n\n/* =============================================================================\n SKIP LINK GROUP\n ============================================================================= */\n\n[s-skip-link-group] {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 9999;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--s-space-2);\n padding: var(--s-space-2);\n}\n\n/* Adjust skip links within group */\n[s-skip-link-group] [s-skip-link] {\n position: relative;\n top: -200%;\n left: 0;\n transform: none;\n}\n\n[s-skip-link-group] [s-skip-link]:focus,\n[s-skip-link-group] [s-skip-link]:focus-visible {\n top: 0;\n}\n\n/* =============================================================================\n SKIP LINK VARIANTS\n ============================================================================= */\n\n/* Secondary/subtle variant */\n[s-skip-link=\"secondary\"] {\n --_skip-bg: var(--s-neutral-800);\n}\n\n/* High contrast variant */\n[s-skip-link=\"contrast\"] {\n --_skip-bg: var(--s-neutral-950);\n --_skip-color: var(--s-neutral-50);\n}\n\n/* =============================================================================\n REDUCED MOTION\n ============================================================================= */\n\n@media (prefers-reduced-motion: reduce) {\n [s-skip-link] {\n transition: none;\n }\n}\n\n/* =============================================================================\n DARK MODE ADJUSTMENTS\n ============================================================================= */\n\n@media (prefers-color-scheme: dark) {\n :where([s-skip-link]:not([s-skip-link=\"secondary\"]):not([s-skip-link=\"contrast\"])) {\n --_skip-bg: var(--s-primary-500);\n }\n\n [s-skip-link]:focus,\n [s-skip-link]:focus-visible {\n box-shadow:\n var(--_skip-shadow),\n 0 0 0 3px var(--s-neutral-900),\n 0 0 0 5px var(--_skip-bg);\n }\n}\n\n/* Also support explicit dark mode */\n:root[style*=\"color-scheme: dark\"] :where([s-skip-link]:not([s-skip-link=\"secondary\"]):not([s-skip-link=\"contrast\"])),\n:root[style*=\"color-scheme:dark\"] :where([s-skip-link]:not([s-skip-link=\"secondary\"]):not([s-skip-link=\"contrast\"])) {\n --_skip-bg: var(--s-primary-500);\n}\n","/**\n * Shift CSS - Layout Utilities (Structural)\n *\n * Semantic attribute selectors for layout patterns.\n * These define the \"skeleton\" of your UI.\n *\n * Usage:\n * <div s-flex>Flex container</div>\n * <div s-flex=\"col\">Vertical stack</div>\n * <div s-flex=\"center\">Centered content</div>\n * <div s-grid=\"3\">3-column grid</div>\n * <div s-gap=\"md\">Consistent spacing</div>\n * <div s-container>Centered container</div>\n */\n\n/* =============================================================================\n FLEX LAYOUT\n ============================================================================= */\n\n/* Base flex - just enables flexbox */\n[s-flex] {\n display: flex;\n}\n\n/* Flex direction variants */\n[s-flex=\"row\"] {\n display: flex;\n flex-direction: row;\n}\n\n[s-flex=\"col\"] {\n display: flex;\n flex-direction: column;\n}\n\n[s-flex=\"row-reverse\"] {\n display: flex;\n flex-direction: row-reverse;\n}\n\n[s-flex=\"col-reverse\"] {\n display: flex;\n flex-direction: column-reverse;\n}\n\n/* Common flex patterns */\n[s-flex=\"center\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n[s-flex=\"stack\"] {\n display: flex;\n flex-direction: column;\n}\n\n[s-flex=\"between\"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n[s-flex=\"end\"] {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n/* Flex wrap */\n[s-flex~=\"wrap\"] {\n flex-wrap: wrap;\n}\n\n[s-flex~=\"nowrap\"] {\n flex-wrap: nowrap;\n}\n\n/* =============================================================================\n FLEX ALIGNMENT (composable modifiers)\n ============================================================================= */\n\n/* Justify content */\n[s-justify=\"start\"] {\n justify-content: flex-start;\n}\n\n[s-justify=\"end\"] {\n justify-content: flex-end;\n}\n\n[s-justify=\"center\"] {\n justify-content: center;\n}\n\n[s-justify=\"between\"] {\n justify-content: space-between;\n}\n\n[s-justify=\"around\"] {\n justify-content: space-around;\n}\n\n[s-justify=\"evenly\"] {\n justify-content: space-evenly;\n}\n\n/* Align items */\n[s-items=\"start\"] {\n align-items: flex-start;\n}\n\n[s-items=\"end\"] {\n align-items: flex-end;\n}\n\n[s-items=\"center\"] {\n align-items: center;\n}\n\n[s-items=\"baseline\"] {\n align-items: baseline;\n}\n\n[s-items=\"stretch\"] {\n align-items: stretch;\n}\n\n/* Align content (for wrapped flex) */\n[s-content=\"start\"] {\n align-content: flex-start;\n}\n\n[s-content=\"end\"] {\n align-content: flex-end;\n}\n\n[s-content=\"center\"] {\n align-content: center;\n}\n\n[s-content=\"between\"] {\n align-content: space-between;\n}\n\n[s-content=\"around\"] {\n align-content: space-around;\n}\n\n/* =============================================================================\n GRID LAYOUT\n ============================================================================= */\n\n/* Base grid - just enables grid */\n[s-grid] {\n display: grid;\n}\n\n/* Grid column variants */\n[s-grid=\"1\"] {\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n[s-grid=\"2\"] {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n[s-grid=\"3\"] {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n[s-grid=\"4\"] {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n[s-grid=\"5\"] {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n\n[s-grid=\"6\"] {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n\n[s-grid=\"12\"] {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n/* Auto-fit grid - responsive without media queries */\n[s-grid=\"auto-fit\"] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n}\n\n[s-grid=\"auto-fill\"] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));\n}\n\n/* Grid rows */\n[s-grid-rows=\"1\"] {\n grid-template-rows: repeat(1, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"2\"] {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"3\"] {\n grid-template-rows: repeat(3, minmax(0, 1fr));\n}\n\n[s-grid-rows=\"4\"] {\n grid-template-rows: repeat(4, minmax(0, 1fr));\n}\n\n/* =============================================================================\n GRID SPAN (for children)\n ============================================================================= */\n\n[s-col-span=\"1\"] {\n grid-column: span 1 / span 1;\n}\n\n[s-col-span=\"2\"] {\n grid-column: span 2 / span 2;\n}\n\n[s-col-span=\"3\"] {\n grid-column: span 3 / span 3;\n}\n\n[s-col-span=\"4\"] {\n grid-column: span 4 / span 4;\n}\n\n[s-col-span=\"6\"] {\n grid-column: span 6 / span 6;\n}\n\n[s-col-span=\"12\"] {\n grid-column: span 12 / span 12;\n}\n\n[s-col-span=\"full\"] {\n grid-column: 1 / -1;\n}\n\n[s-row-span=\"1\"] {\n grid-row: span 1 / span 1;\n}\n\n[s-row-span=\"2\"] {\n grid-row: span 2 / span 2;\n}\n\n[s-row-span=\"3\"] {\n grid-row: span 3 / span 3;\n}\n\n[s-row-span=\"full\"] {\n grid-row: 1 / -1;\n}\n\n/* =============================================================================\n GAP (Designer's Tool - semantic spacing)\n ============================================================================= */\n\n/* Base gap - applies default medium spacing */\n[s-gap] {\n gap: var(--s-space-4);\n}\n\n/* Gap size variants */\n[s-gap=\"xs\"] {\n gap: var(--s-space-1);\n}\n\n[s-gap=\"sm\"] {\n gap: var(--s-space-2);\n}\n\n[s-gap=\"md\"] {\n gap: var(--s-space-4);\n}\n\n[s-gap=\"lg\"] {\n gap: var(--s-space-6);\n}\n\n[s-gap=\"xl\"] {\n gap: var(--s-space-8);\n}\n\n[s-gap=\"none\"] {\n gap: 0;\n}\n\n/* =============================================================================\n CONTAINER\n ============================================================================= */\n\n[s-container] {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--s-space-4);\n max-width: var(--s-container-max, 80rem);\n}\n\n[s-container=\"sm\"] {\n max-width: 40rem;\n}\n\n[s-container=\"md\"] {\n max-width: 48rem;\n}\n\n[s-container=\"lg\"] {\n max-width: 64rem;\n}\n\n[s-container=\"xl\"] {\n max-width: 80rem;\n}\n\n[s-container=\"full\"] {\n max-width: 100%;\n}\n\n[s-container=\"prose\"] {\n max-width: 65ch;\n}\n\n/* =============================================================================\n POSITION\n ============================================================================= */\n\n[s-position=\"static\"] {\n position: static;\n}\n\n[s-position=\"relative\"] {\n position: relative;\n}\n\n[s-position=\"absolute\"] {\n position: absolute;\n}\n\n[s-position=\"fixed\"] {\n position: fixed;\n}\n\n[s-position=\"sticky\"] {\n position: sticky;\n}\n\n/* Common position patterns */\n[s-inset=\"0\"] {\n inset: 0;\n}\n\n[s-inset=\"auto\"] {\n inset: auto;\n}\n\n/* =============================================================================\n DISPLAY (for non-flex/grid cases)\n ============================================================================= */\n\n[s-display=\"block\"] {\n display: block;\n}\n\n[s-display=\"inline\"] {\n display: inline;\n}\n\n[s-display=\"inline-block\"] {\n display: inline-block;\n}\n\n[s-display=\"contents\"] {\n display: contents;\n}\n\n[s-display=\"inline-flex\"] {\n display: inline-flex;\n}\n\n[s-display=\"inline-grid\"] {\n display: inline-grid;\n}\n","/**\n * Shift CSS - Spacing Utilities\n *\n * Margin, padding, and gap utility classes.\n * Uses spacing tokens for consistency.\n * Namespaced with `s-` prefix.\n */\n\n/* Margin utilities */\n.s-m-0 {\n margin: 0;\n}\n.s-m-1 {\n margin: var(--s-space-1);\n}\n.s-m-2 {\n margin: var(--s-space-2);\n}\n.s-m-3 {\n margin: var(--s-space-3);\n}\n.s-m-4 {\n margin: var(--s-space-4);\n}\n.s-m-5 {\n margin: var(--s-space-5);\n}\n.s-m-6 {\n margin: var(--s-space-6);\n}\n.s-m-8 {\n margin: var(--s-space-8);\n}\n.s-m-10 {\n margin: var(--s-space-10);\n}\n.s-m-12 {\n margin: var(--s-space-12);\n}\n.s-m-auto {\n margin: auto;\n}\n\n/* Margin X (horizontal) */\n.s-mx-0 {\n margin-inline: 0;\n}\n.s-mx-1 {\n margin-inline: var(--s-space-1);\n}\n.s-mx-2 {\n margin-inline: var(--s-space-2);\n}\n.s-mx-3 {\n margin-inline: var(--s-space-3);\n}\n.s-mx-4 {\n margin-inline: var(--s-space-4);\n}\n.s-mx-5 {\n margin-inline: var(--s-space-5);\n}\n.s-mx-6 {\n margin-inline: var(--s-space-6);\n}\n.s-mx-8 {\n margin-inline: var(--s-space-8);\n}\n.s-mx-auto {\n margin-inline: auto;\n}\n\n/* Margin Y (vertical) */\n.s-my-0 {\n margin-block: 0;\n}\n.s-my-1 {\n margin-block: var(--s-space-1);\n}\n.s-my-2 {\n margin-block: var(--s-space-2);\n}\n.s-my-3 {\n margin-block: var(--s-space-3);\n}\n.s-my-4 {\n margin-block: var(--s-space-4);\n}\n.s-my-5 {\n margin-block: var(--s-space-5);\n}\n.s-my-6 {\n margin-block: var(--s-space-6);\n}\n.s-my-8 {\n margin-block: var(--s-space-8);\n}\n.s-my-auto {\n margin-block: auto;\n}\n\n/* Margin top */\n.s-mt-0 {\n margin-top: 0;\n}\n.s-mt-1 {\n margin-top: var(--s-space-1);\n}\n.s-mt-2 {\n margin-top: var(--s-space-2);\n}\n.s-mt-3 {\n margin-top: var(--s-space-3);\n}\n.s-mt-4 {\n margin-top: var(--s-space-4);\n}\n.s-mt-5 {\n margin-top: var(--s-space-5);\n}\n.s-mt-6 {\n margin-top: var(--s-space-6);\n}\n.s-mt-8 {\n margin-top: var(--s-space-8);\n}\n.s-mt-auto {\n margin-top: auto;\n}\n\n/* Margin bottom */\n.s-mb-0 {\n margin-bottom: 0;\n}\n.s-mb-1 {\n margin-bottom: var(--s-space-1);\n}\n.s-mb-2 {\n margin-bottom: var(--s-space-2);\n}\n.s-mb-3 {\n margin-bottom: var(--s-space-3);\n}\n.s-mb-4 {\n margin-bottom: var(--s-space-4);\n}\n.s-mb-5 {\n margin-bottom: var(--s-space-5);\n}\n.s-mb-6 {\n margin-bottom: var(--s-space-6);\n}\n.s-mb-8 {\n margin-bottom: var(--s-space-8);\n}\n.s-mb-auto {\n margin-bottom: auto;\n}\n\n/* Margin left */\n.s-ml-0 {\n margin-left: 0;\n}\n.s-ml-1 {\n margin-left: var(--s-space-1);\n}\n.s-ml-2 {\n margin-left: var(--s-space-2);\n}\n.s-ml-3 {\n margin-left: var(--s-space-3);\n}\n.s-ml-4 {\n margin-left: var(--s-space-4);\n}\n.s-ml-auto {\n margin-left: auto;\n}\n\n/* Margin right */\n.s-mr-0 {\n margin-right: 0;\n}\n.s-mr-1 {\n margin-right: var(--s-space-1);\n}\n.s-mr-2 {\n margin-right: var(--s-space-2);\n}\n.s-mr-3 {\n margin-right: var(--s-space-3);\n}\n.s-mr-4 {\n margin-right: var(--s-space-4);\n}\n.s-mr-auto {\n margin-right: auto;\n}\n\n/* Padding utilities */\n.s-p-0 {\n padding: 0;\n}\n.s-p-1 {\n padding: var(--s-space-1);\n}\n.s-p-2 {\n padding: var(--s-space-2);\n}\n.s-p-3 {\n padding: var(--s-space-3);\n}\n.s-p-4 {\n padding: var(--s-space-4);\n}\n.s-p-5 {\n padding: var(--s-space-5);\n}\n.s-p-6 {\n padding: var(--s-space-6);\n}\n.s-p-8 {\n padding: var(--s-space-8);\n}\n.s-p-10 {\n padding: var(--s-space-10);\n}\n.s-p-12 {\n padding: var(--s-space-12);\n}\n\n/* Padding X (horizontal) */\n.s-px-0 {\n padding-inline: 0;\n}\n.s-px-1 {\n padding-inline: var(--s-space-1);\n}\n.s-px-2 {\n padding-inline: var(--s-space-2);\n}\n.s-px-3 {\n padding-inline: var(--s-space-3);\n}\n.s-px-4 {\n padding-inline: var(--s-space-4);\n}\n.s-px-5 {\n padding-inline: var(--s-space-5);\n}\n.s-px-6 {\n padding-inline: var(--s-space-6);\n}\n.s-px-8 {\n padding-inline: var(--s-space-8);\n}\n\n/* Padding Y (vertical) */\n.s-py-0 {\n padding-block: 0;\n}\n.s-py-1 {\n padding-block: var(--s-space-1);\n}\n.s-py-2 {\n padding-block: var(--s-space-2);\n}\n.s-py-3 {\n padding-block: var(--s-space-3);\n}\n.s-py-4 {\n padding-block: var(--s-space-4);\n}\n.s-py-5 {\n padding-block: var(--s-space-5);\n}\n.s-py-6 {\n padding-block: var(--s-space-6);\n}\n.s-py-8 {\n padding-block: var(--s-space-8);\n}\n\n/* Padding top */\n.s-pt-0 {\n padding-top: 0;\n}\n.s-pt-1 {\n padding-top: var(--s-space-1);\n}\n.s-pt-2 {\n padding-top: var(--s-space-2);\n}\n.s-pt-3 {\n padding-top: var(--s-space-3);\n}\n.s-pt-4 {\n padding-top: var(--s-space-4);\n}\n.s-pt-5 {\n padding-top: var(--s-space-5);\n}\n.s-pt-6 {\n padding-top: var(--s-space-6);\n}\n.s-pt-8 {\n padding-top: var(--s-space-8);\n}\n\n/* Padding bottom */\n.s-pb-0 {\n padding-bottom: 0;\n}\n.s-pb-1 {\n padding-bottom: var(--s-space-1);\n}\n.s-pb-2 {\n padding-bottom: var(--s-space-2);\n}\n.s-pb-3 {\n padding-bottom: var(--s-space-3);\n}\n.s-pb-4 {\n padding-bottom: var(--s-space-4);\n}\n.s-pb-5 {\n padding-bottom: var(--s-space-5);\n}\n.s-pb-6 {\n padding-bottom: var(--s-space-6);\n}\n.s-pb-8 {\n padding-bottom: var(--s-space-8);\n}\n\n/* Padding left */\n.s-pl-0 {\n padding-left: 0;\n}\n.s-pl-1 {\n padding-left: var(--s-space-1);\n}\n.s-pl-2 {\n padding-left: var(--s-space-2);\n}\n.s-pl-3 {\n padding-left: var(--s-space-3);\n}\n.s-pl-4 {\n padding-left: var(--s-space-4);\n}\n\n/* Padding right */\n.s-pr-0 {\n padding-right: 0;\n}\n.s-pr-1 {\n padding-right: var(--s-space-1);\n}\n.s-pr-2 {\n padding-right: var(--s-space-2);\n}\n.s-pr-3 {\n padding-right: var(--s-space-3);\n}\n.s-pr-4 {\n padding-right: var(--s-space-4);\n}\n\n/* Gap utilities */\n.s-gap-0 {\n gap: 0;\n}\n.s-gap-1 {\n gap: var(--s-space-1);\n}\n.s-gap-2 {\n gap: var(--s-space-2);\n}\n.s-gap-3 {\n gap: var(--s-space-3);\n}\n.s-gap-4 {\n gap: var(--s-space-4);\n}\n.s-gap-5 {\n gap: var(--s-space-5);\n}\n.s-gap-6 {\n gap: var(--s-space-6);\n}\n.s-gap-8 {\n gap: var(--s-space-8);\n}\n.s-gap-10 {\n gap: var(--s-space-10);\n}\n.s-gap-12 {\n gap: var(--s-space-12);\n}\n\n/* Column gap */\n.s-gap-x-0 {\n column-gap: 0;\n}\n.s-gap-x-1 {\n column-gap: var(--s-space-1);\n}\n.s-gap-x-2 {\n column-gap: var(--s-space-2);\n}\n.s-gap-x-3 {\n column-gap: var(--s-space-3);\n}\n.s-gap-x-4 {\n column-gap: var(--s-space-4);\n}\n.s-gap-x-6 {\n column-gap: var(--s-space-6);\n}\n.s-gap-x-8 {\n column-gap: var(--s-space-8);\n}\n\n/* Row gap */\n.s-gap-y-0 {\n row-gap: 0;\n}\n.s-gap-y-1 {\n row-gap: var(--s-space-1);\n}\n.s-gap-y-2 {\n row-gap: var(--s-space-2);\n}\n.s-gap-y-3 {\n row-gap: var(--s-space-3);\n}\n.s-gap-y-4 {\n row-gap: var(--s-space-4);\n}\n.s-gap-y-6 {\n row-gap: var(--s-space-6);\n}\n.s-gap-y-8 {\n row-gap: var(--s-space-8);\n}\n\n/* Space between children (using gap in flex/grid context) */\n.s-space-y-1 > * + * {\n margin-top: var(--s-space-1);\n}\n.s-space-y-2 > * + * {\n margin-top: var(--s-space-2);\n}\n.s-space-y-3 > * + * {\n margin-top: var(--s-space-3);\n}\n.s-space-y-4 > * + * {\n margin-top: var(--s-space-4);\n}\n.s-space-y-6 > * + * {\n margin-top: var(--s-space-6);\n}\n.s-space-y-8 > * + * {\n margin-top: var(--s-space-8);\n}\n\n.s-space-x-1 > * + * {\n margin-left: var(--s-space-1);\n}\n.s-space-x-2 > * + * {\n margin-left: var(--s-space-2);\n}\n.s-space-x-3 > * + * {\n margin-left: var(--s-space-3);\n}\n.s-space-x-4 > * + * {\n margin-left: var(--s-space-4);\n}\n.s-space-x-6 > * + * {\n margin-left: var(--s-space-6);\n}\n.s-space-x-8 > * + * {\n margin-left: var(--s-space-8);\n}\n","/**\n * Shift CSS - Design Tokens\n * Auto-generated from tokens/*.json\n * DO NOT EDIT DIRECTLY\n */\n\n@layer shift.tokens {\n :root {\n color-scheme: light dark;\n\n /* SEED HUE CUSTOMIZATION POINTS */\n --shift-hue-primary: 250;\n --shift-hue-secondary: 180;\n --shift-hue-accent: 30;\n --shift-hue-success: 145;\n --shift-hue-warning: 45;\n --shift-hue-danger: 25;\n --shift-hue-neutral: 250;\n\n /* PRIMARY SCALE */\n --s-primary-50: oklch(0.9778 0.0108 var(--shift-hue-primary));\n --s-primary-100: oklch(0.9356 0.0321 var(--shift-hue-primary));\n --s-primary-200: oklch(0.8811 0.0636 var(--shift-hue-primary));\n --s-primary-300: oklch(0.8267 0.0951 var(--shift-hue-primary));\n --s-primary-400: oklch(0.7422 0.1211 var(--shift-hue-primary));\n --s-primary-500: oklch(0.6478 0.1472 var(--shift-hue-primary));\n --s-primary-600: oklch(0.5733 0.1383 var(--shift-hue-primary));\n --s-primary-700: oklch(0.4689 0.1178 var(--shift-hue-primary));\n --s-primary-800: oklch(0.3944 0.0894 var(--shift-hue-primary));\n --s-primary-900: oklch(0.3200 0.0720 var(--shift-hue-primary));\n --s-primary-950: oklch(0.2378 0.0540 var(--shift-hue-primary));\n\n /* SECONDARY SCALE */\n --s-secondary-50: oklch(0.9778 0.0108 var(--shift-hue-secondary));\n --s-secondary-100: oklch(0.9356 0.0321 var(--shift-hue-secondary));\n --s-secondary-200: oklch(0.8811 0.0636 var(--shift-hue-secondary));\n --s-secondary-300: oklch(0.8267 0.0951 var(--shift-hue-secondary));\n --s-secondary-400: oklch(0.7422 0.1211 var(--shift-hue-secondary));\n --s-secondary-500: oklch(0.6478 0.1472 var(--shift-hue-secondary));\n --s-secondary-600: oklch(0.5733 0.1383 var(--shift-hue-secondary));\n --s-secondary-700: oklch(0.4689 0.1178 var(--shift-hue-secondary));\n --s-secondary-800: oklch(0.3944 0.0894 var(--shift-hue-secondary));\n --s-secondary-900: oklch(0.3200 0.0720 var(--shift-hue-secondary));\n --s-secondary-950: oklch(0.2378 0.0540 var(--shift-hue-secondary));\n\n /* ACCENT SCALE */\n --s-accent-50: oklch(0.9778 0.0108 var(--shift-hue-accent));\n --s-accent-100: oklch(0.9356 0.0321 var(--shift-hue-accent));\n --s-accent-200: oklch(0.8811 0.0636 var(--shift-hue-accent));\n --s-accent-300: oklch(0.8267 0.0951 var(--shift-hue-accent));\n --s-accent-400: oklch(0.7422 0.1211 var(--shift-hue-accent));\n --s-accent-500: oklch(0.6478 0.1472 var(--shift-hue-accent));\n --s-accent-600: oklch(0.5733 0.1383 var(--shift-hue-accent));\n --s-accent-700: oklch(0.4689 0.1178 var(--shift-hue-accent));\n --s-accent-800: oklch(0.3944 0.0894 var(--shift-hue-accent));\n --s-accent-900: oklch(0.3200 0.0720 var(--shift-hue-accent));\n --s-accent-950: oklch(0.2378 0.0540 var(--shift-hue-accent));\n\n /* SUCCESS SCALE */\n --s-success-50: oklch(0.9778 0.0108 var(--shift-hue-success));\n --s-success-100: oklch(0.9356 0.0321 var(--shift-hue-success));\n --s-success-200: oklch(0.8811 0.0636 var(--shift-hue-success));\n --s-success-300: oklch(0.8267 0.0951 var(--shift-hue-success));\n --s-success-400: oklch(0.7422 0.1211 var(--shift-hue-success));\n --s-success-500: oklch(0.6478 0.1472 var(--shift-hue-success));\n --s-success-600: oklch(0.5733 0.1383 var(--shift-hue-success));\n --s-success-700: oklch(0.4689 0.1178 var(--shift-hue-success));\n --s-success-800: oklch(0.3944 0.0894 var(--shift-hue-success));\n --s-success-900: oklch(0.3200 0.0720 var(--shift-hue-success));\n --s-success-950: oklch(0.2378 0.0540 var(--shift-hue-success));\n\n /* WARNING SCALE */\n --s-warning-50: oklch(0.9778 0.0108 var(--shift-hue-warning));\n --s-warning-100: oklch(0.9356 0.0321 var(--shift-hue-warning));\n --s-warning-200: oklch(0.8811 0.0636 var(--shift-hue-warning));\n --s-warning-300: oklch(0.8267 0.0951 var(--shift-hue-warning));\n --s-warning-400: oklch(0.7422 0.1211 var(--shift-hue-warning));\n --s-warning-500: oklch(0.6478 0.1472 var(--shift-hue-warning));\n --s-warning-600: oklch(0.5733 0.1383 var(--shift-hue-warning));\n --s-warning-700: oklch(0.4689 0.1178 var(--shift-hue-warning));\n --s-warning-800: oklch(0.3944 0.0894 var(--shift-hue-warning));\n --s-warning-900: oklch(0.3200 0.0720 var(--shift-hue-warning));\n --s-warning-950: oklch(0.2378 0.0540 var(--shift-hue-warning));\n\n /* DANGER SCALE */\n --s-danger-50: oklch(0.9778 0.0108 var(--shift-hue-danger));\n --s-danger-100: oklch(0.9356 0.0321 var(--shift-hue-danger));\n --s-danger-200: oklch(0.8811 0.0636 var(--shift-hue-danger));\n --s-danger-300: oklch(0.8267 0.0951 var(--shift-hue-danger));\n --s-danger-400: oklch(0.7422 0.1211 var(--shift-hue-danger));\n --s-danger-500: oklch(0.6478 0.1472 var(--shift-hue-danger));\n --s-danger-600: oklch(0.5733 0.1383 var(--shift-hue-danger));\n --s-danger-700: oklch(0.4689 0.1178 var(--shift-hue-danger));\n --s-danger-800: oklch(0.3944 0.0894 var(--shift-hue-danger));\n --s-danger-900: oklch(0.3200 0.0720 var(--shift-hue-danger));\n --s-danger-950: oklch(0.2378 0.0540 var(--shift-hue-danger));\n\n /* NEUTRAL SCALE */\n --s-neutral-50: oklch(0.9778 0.0054 var(--shift-hue-neutral));\n --s-neutral-100: oklch(0.9356 0.0072 var(--shift-hue-neutral));\n --s-neutral-200: oklch(0.8811 0.0090 var(--shift-hue-neutral));\n --s-neutral-300: oklch(0.8267 0.0099 var(--shift-hue-neutral));\n --s-neutral-400: oklch(0.7422 0.0108 var(--shift-hue-neutral));\n --s-neutral-500: oklch(0.6478 0.0118 var(--shift-hue-neutral));\n --s-neutral-600: oklch(0.5733 0.0108 var(--shift-hue-neutral));\n --s-neutral-700: oklch(0.4689 0.0099 var(--shift-hue-neutral));\n --s-neutral-800: oklch(0.3944 0.0090 var(--shift-hue-neutral));\n --s-neutral-900: oklch(0.3200 0.0081 var(--shift-hue-neutral));\n --s-neutral-950: oklch(0.2378 0.0072 var(--shift-hue-neutral));\n\n /* SEMANTIC TOKENS with light-dark() */\n\n /* SURFACE */\n --s-surface-base: light-dark(var(--s-neutral-50), var(--s-neutral-950));\n --s-surface-raised: light-dark(var(--s-neutral-100), var(--s-neutral-900));\n --s-surface-sunken: light-dark(var(--s-neutral-200), var(--s-neutral-800));\n --s-surface-overlay: light-dark(var(--s-neutral-900), var(--s-neutral-100));\n\n /* TEXT */\n --s-text-primary: light-dark(var(--s-neutral-900), var(--s-neutral-50));\n --s-text-secondary: light-dark(var(--s-neutral-700), var(--s-neutral-300));\n --s-text-tertiary: light-dark(var(--s-neutral-500), var(--s-neutral-500));\n --s-text-inverse: light-dark(var(--s-neutral-50), var(--s-neutral-900));\n\n /* BORDER */\n --s-border-default: light-dark(var(--s-neutral-200), var(--s-neutral-800));\n --s-border-muted: light-dark(var(--s-neutral-100), var(--s-neutral-900));\n --s-border-strong: light-dark(var(--s-neutral-400), var(--s-neutral-600));\n\n /* INTERACTIVE */\n --s-interactive-primary: light-dark(var(--s-primary-700), var(--s-primary-300));\n --s-interactive-primary-hover: light-dark(var(--s-primary-800), var(--s-primary-200));\n --s-interactive-primary-active: light-dark(var(--s-primary-900), var(--s-primary-100));\n --s-interactive-secondary: light-dark(var(--s-secondary-700), var(--s-secondary-300));\n\n /* STATE */\n --s-state-success: light-dark(var(--s-success-700), var(--s-success-300));\n --s-state-success-bg: light-dark(var(--s-success-100), var(--s-success-900));\n --s-state-warning: light-dark(var(--s-warning-700), var(--s-warning-300));\n --s-state-warning-bg: light-dark(var(--s-warning-100), var(--s-warning-900));\n --s-state-danger: light-dark(var(--s-danger-700), var(--s-danger-300));\n --s-state-danger-bg: light-dark(var(--s-danger-100), var(--s-danger-900));\n\n /* FOCUS */\n --s-focus-ring: light-dark(var(--s-primary-500), var(--s-primary-400));\n --s-focus-ring-offset: light-dark(var(--s-neutral-50), var(--s-neutral-950));\n\n /* SPACING SCALE */\n --s-space-0: 0;\n --s-space-1: 0.25rem;\n --s-space-2: 0.5rem;\n --s-space-3: 0.75rem;\n --s-space-4: 1rem;\n --s-space-5: 1.25rem;\n --s-space-6: 1.5rem;\n --s-space-7: 1.75rem;\n --s-space-8: 2rem;\n --s-space-9: 2.25rem;\n --s-space-10: 2.5rem;\n --s-space-11: 2.75rem;\n --s-space-12: 3rem;\n --s-space-14: 3.5rem;\n --s-space-16: 4rem;\n --s-space-20: 5rem;\n --s-space-24: 6rem;\n --s-space-28: 7rem;\n --s-space-32: 8rem;\n --s-space-36: 9rem;\n --s-space-40: 10rem;\n --s-space-44: 11rem;\n --s-space-48: 12rem;\n --s-space-52: 13rem;\n --s-space-56: 14rem;\n --s-space-60: 15rem;\n --s-space-64: 16rem;\n --s-space-72: 18rem;\n --s-space-80: 20rem;\n --s-space-96: 24rem;\n --s-space-px: 1px;\n --s-space-0_5: 0.125rem;\n --s-space-1_5: 0.375rem;\n --s-space-2_5: 0.625rem;\n --s-space-3_5: 0.875rem;\n\n /* BORDER RADIUS */\n --s-radius-none: 0;\n --s-radius-sm: 0.125rem;\n --s-radius-base: 0.25rem;\n --s-radius-md: 0.375rem;\n --s-radius-lg: 0.5rem;\n --s-radius-xl: 0.75rem;\n --s-radius-2xl: 1rem;\n --s-radius-3xl: 1.5rem;\n --s-radius-full: 9999px;\n\n /* TYPOGRAPHY */\n --s-font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --s-font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --s-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n\n /* FONT SIZES (fluid) */\n --s-text-xs: clamp(0.6875rem, 0.625rem + 0.25vi, 0.75rem);\n --s-text-sm: clamp(0.8125rem, 0.75rem + 0.25vi, 0.875rem);\n --s-text-base: clamp(0.9375rem, 0.875rem + 0.25vi, 1rem);\n --s-text-lg: clamp(1.0625rem, 1rem + 0.25vi, 1.125rem);\n --s-text-xl: clamp(1.1875rem, 1.0625rem + 0.5vi, 1.25rem);\n --s-text-2xl: clamp(1.4375rem, 1.25rem + 0.75vi, 1.5rem);\n --s-text-3xl: clamp(1.75rem, 1.5rem + 1vi, 1.875rem);\n --s-text-4xl: clamp(2.125rem, 1.75rem + 1.5vi, 2.25rem);\n --s-text-5xl: clamp(2.75rem, 2.25rem + 2vi, 3rem);\n\n /* LINE HEIGHTS */\n --s-leading-none: 1;\n --s-leading-tight: 1.25;\n --s-leading-snug: 1.375;\n --s-leading-normal: 1.5;\n --s-leading-relaxed: 1.625;\n --s-leading-loose: 2;\n\n /* FONT WEIGHTS */\n --s-font-thin: 100;\n --s-font-extralight: 200;\n --s-font-light: 300;\n --s-font-normal: 400;\n --s-font-medium: 500;\n --s-font-semibold: 600;\n --s-font-bold: 700;\n --s-font-extrabold: 800;\n --s-font-black: 900;\n\n /* LETTER SPACING */\n --s-tracking-tighter: -0.05em;\n --s-tracking-tight: -0.025em;\n --s-tracking-normal: 0;\n --s-tracking-wide: 0.025em;\n --s-tracking-wider: 0.05em;\n --s-tracking-widest: 0.1em;\n\n /* TRANSITIONS */\n --s-duration-75: 75ms;\n --s-duration-100: 100ms;\n --s-duration-150: 150ms;\n --s-duration-200: 200ms;\n --s-duration-300: 300ms;\n --s-duration-500: 500ms;\n --s-duration-700: 700ms;\n --s-duration-1000: 1000ms;\n\n /* EASING */\n --s-ease-linear: linear;\n --s-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --s-ease-out: cubic-bezier(0, 0, 0.2, 1);\n --s-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --s-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n\n /* SHADOWS */\n --s-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --s-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --s-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --s-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --s-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --s-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --s-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --s-shadow-none: 0 0 #0000;\n }\n}\n","/**\n * Shift CSS - Badge Component\n *\n * Inline status indicators, counts, labels, and tags.\n * Uses s-badge attribute for variants and s-size for scaling.\n *\n * Usage:\n * <span s-badge>Default</span>\n * <span s-badge=\"primary\">Primary</span>\n * <span s-badge=\"success\">Active</span>\n * <span s-badge=\"warning\">Pending</span>\n * <span s-badge=\"danger\">Failed</span>\n * <span s-badge=\"primary\" s-size=\"sm\">Small</span>\n * <span s-badge=\"primary\" s-pill>Rounded</span>\n */\n\n/* Base badge - zero specificity for easy overrides */\n:where([s-badge]) {\n /* Badge CSS properties (customization points) */\n --_badge-bg: var(--s-neutral-200);\n --_badge-text: var(--s-text-primary);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--s-space-1);\n\n padding: var(--s-space-1) var(--s-space-2);\n border-radius: var(--s-radius-sm);\n font-weight: var(--s-font-medium);\n font-size: var(--s-text-xs);\n line-height: 1.25;\n white-space: nowrap;\n vertical-align: middle;\n\n background-color: var(--_badge-bg);\n color: var(--_badge-text);\n\n /* Auto-contrast for custom backgrounds */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_badge-bg) clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_badge-bg));\n }\n}\n\n/* =============================================================================\n COLOR VARIANTS\n ============================================================================= */\n\n/* Color variants need explicit color to override auto-contrast */\n\n/* Primary */\n[s-badge=\"primary\"] {\n --_badge-bg: var(--s-primary-700);\n background-color: var(--s-primary-700);\n color: #fff;\n}\n\n/* Secondary */\n[s-badge=\"secondary\"] {\n --_badge-bg: var(--s-neutral-700);\n background-color: var(--s-neutral-700);\n color: #fff;\n}\n\n/* Success */\n[s-badge=\"success\"] {\n --_badge-bg: var(--s-success-700);\n background-color: var(--s-success-700);\n color: #fff;\n}\n\n/* Warning - needs dark text for contrast */\n[s-badge=\"warning\"] {\n --_badge-bg: var(--s-warning-400);\n background-color: var(--s-warning-400);\n color: var(--s-warning-950);\n}\n\n/* Danger */\n[s-badge=\"danger\"] {\n --_badge-bg: var(--s-danger-700);\n background-color: var(--s-danger-700);\n color: #fff;\n}\n\n/* Accent */\n[s-badge=\"accent\"] {\n --_badge-bg: var(--s-accent-700);\n background-color: var(--s-accent-700);\n color: #fff;\n}\n\n/* =============================================================================\n OUTLINE VARIANTS\n ============================================================================= */\n\n/* Outline variants need explicit color to override auto-contrast */\n[s-badge=\"outline\"] {\n --_badge-bg: transparent;\n background-color: transparent;\n color: var(--s-text-primary);\n box-shadow: inset 0 0 0 1px var(--s-border-default);\n}\n\n[s-badge=\"outline-primary\"] {\n --_badge-bg: transparent;\n background-color: oklch(from var(--s-primary-500) l c h / 0.1);\n color: light-dark(var(--s-primary-700), var(--s-primary-300));\n box-shadow: inset 0 0 0 1px light-dark(var(--s-primary-500), var(--s-primary-400));\n}\n\n[s-badge=\"outline-success\"] {\n --_badge-bg: transparent;\n background-color: oklch(from var(--s-success-500) l c h / 0.1);\n color: light-dark(var(--s-success-700), var(--s-success-300));\n box-shadow: inset 0 0 0 1px light-dark(var(--s-success-500), var(--s-success-400));\n}\n\n[s-badge=\"outline-warning\"] {\n --_badge-bg: transparent;\n background-color: oklch(from var(--s-warning-500) l c h / 0.1);\n color: light-dark(var(--s-warning-800), var(--s-warning-300));\n box-shadow: inset 0 0 0 1px light-dark(var(--s-warning-500), var(--s-warning-400));\n}\n\n[s-badge=\"outline-danger\"] {\n --_badge-bg: transparent;\n background-color: oklch(from var(--s-danger-500) l c h / 0.1);\n color: light-dark(var(--s-danger-800), var(--s-danger-300));\n box-shadow: inset 0 0 0 1px light-dark(var(--s-danger-500), var(--s-danger-400));\n}\n\n/* =============================================================================\n SIZE VARIANTS\n ============================================================================= */\n\n/* Small */\n[s-badge][s-size=\"sm\"] {\n padding: 0.125rem 0.375rem;\n font-size: 0.625rem;\n}\n\n/* Large */\n[s-badge][s-size=\"lg\"] {\n padding: var(--s-space-2) var(--s-space-4);\n font-size: var(--s-text-sm);\n}\n\n/* =============================================================================\n MODIFIERS\n ============================================================================= */\n\n/* Pill - fully rounded */\n[s-badge][s-pill] {\n border-radius: var(--s-radius-full);\n}\n\n/* Dot - small indicator without text */\n[s-badge][s-dot] {\n width: 0.5rem;\n height: 0.5rem;\n padding: 0;\n border-radius: var(--s-radius-full);\n}\n\n[s-badge][s-dot][s-size=\"sm\"] {\n width: 0.375rem;\n height: 0.375rem;\n}\n\n[s-badge][s-dot][s-size=\"lg\"] {\n width: 0.75rem;\n height: 0.75rem;\n}\n\n/* =============================================================================\n ACCESSIBILITY & HIGH CONTRAST\n ============================================================================= */\n\n@media (forced-colors: active) {\n [s-badge] {\n border: 1px solid CanvasText;\n }\n}\n\n/* =============================================================================\n STYLE QUERIES - Depth-Aware Adaptation\n Badges automatically adapt when nested inside surfaces of different depths.\n Only affects default (neutral) and outline badges.\n ============================================================================= */\n\n@supports (container-type: inline-size) {\n /* Inside raised surface (depth: 1) */\n @container surface style(--_surface-depth: 1) {\n :where([s-badge=\"\"]) {\n --_badge-bg: var(--s-neutral-300);\n }\n :where([s-badge=\"outline\"]) {\n box-shadow: inset 0 0 0 1px var(--s-border-strong);\n }\n }\n\n /* Inside floating surface (depth: 2) */\n @container surface style(--_surface-depth: 2) {\n :where([s-badge=\"\"]) {\n --_badge-bg: var(--s-neutral-300);\n box-shadow: var(--s-shadow-sm);\n }\n :where([s-badge=\"outline\"]) {\n box-shadow: inset 0 0 0 1px var(--s-border-strong);\n }\n }\n\n /* Inside sunken surface (depth: -1) */\n @container surface style(--_surface-depth: -1) {\n :where([s-badge=\"\"]) {\n --_badge-bg: var(--s-neutral-100);\n }\n }\n}\n","/**\n * Shift CSS - Visibility & State Utilities (Thematic)\n *\n * Semantic attribute selectors for visibility states.\n * These define the \"state\" of elements.\n *\n * Usage:\n * <div s-hidden>Hidden element</div>\n * <span s-sr-only>Screen reader only</span>\n * <a s-sr-only s-focus:not-sr-only href=\"#main\">Skip to content</a>\n * <div s-hide-on=\"sm\">Hide on small screens</div>\n * <div s-truncate>Truncated text...</div>\n */\n\n/* =============================================================================\n VISIBILITY STATES\n ============================================================================= */\n\n[s-hidden] {\n display: none;\n}\n\n[s-visible] {\n visibility: visible;\n}\n\n[s-invisible] {\n visibility: hidden;\n}\n\n[s-collapse] {\n visibility: collapse;\n}\n\n/* =============================================================================\n SCREEN READER UTILITIES\n ============================================================================= */\n\n/* Visually hidden but accessible to screen readers */\n[s-sr-only] {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* Remove sr-only (for focus states) - legacy attribute value syntax */\n[s-sr-only=\"focusable\"]:focus,\n[s-sr-only=\"focusable\"]:focus-within {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* Undo sr-only - standalone utility */\n[s-not-sr-only] {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* Focus variant: visible when focused (for skip links) */\n[s-focus\\:not-sr-only]:focus,\n[s-focus\\:not-sr-only]:focus-visible {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* Focus-within variant: visible when child is focused */\n[s-focus-within\\:not-sr-only]:focus-within {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n/* =============================================================================\n TEXT OVERFLOW\n ============================================================================= */\n\n[s-truncate] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n[s-truncate=\"2\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n[s-truncate=\"3\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n}\n\n[s-truncate=\"4\"] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n overflow: hidden;\n}\n\n/* =============================================================================\n OVERFLOW CONTROL\n ============================================================================= */\n\n[s-overflow=\"auto\"] {\n overflow: auto;\n}\n\n[s-overflow=\"hidden\"] {\n overflow: hidden;\n}\n\n[s-overflow=\"visible\"] {\n overflow: visible;\n}\n\n[s-overflow=\"scroll\"] {\n overflow: scroll;\n}\n\n[s-overflow-x=\"auto\"] {\n overflow-x: auto;\n}\n\n[s-overflow-x=\"hidden\"] {\n overflow-x: hidden;\n}\n\n[s-overflow-y=\"auto\"] {\n overflow-y: auto;\n}\n\n[s-overflow-y=\"hidden\"] {\n overflow-y: hidden;\n}\n\n/* =============================================================================\n RESPONSIVE VISIBILITY\n ============================================================================= */\n\n/* Hide on breakpoints */\n@media (width < 640px) {\n [s-hide-on~=\"sm\"] {\n display: none;\n }\n}\n\n@media (width >= 640px) and (width < 768px) {\n [s-hide-on~=\"md\"] {\n display: none;\n }\n}\n\n@media (width >= 768px) and (width < 1024px) {\n [s-hide-on~=\"lg\"] {\n display: none;\n }\n}\n\n@media (width >= 1024px) {\n [s-hide-on~=\"xl\"] {\n display: none;\n }\n}\n\n/* Show only on breakpoints */\n@media (width >= 640px) {\n [s-show-on~=\"sm\"] {\n display: none;\n }\n}\n\n@media (width < 640px), (width >= 768px) {\n [s-show-on~=\"md\"] {\n display: none;\n }\n}\n\n@media (width < 768px), (width >= 1024px) {\n [s-show-on~=\"lg\"] {\n display: none;\n }\n}\n\n@media (width < 1024px) {\n [s-show-on~=\"xl\"] {\n display: none;\n }\n}\n\n/* =============================================================================\n POINTER EVENTS\n ============================================================================= */\n\n[s-pointer=\"none\"] {\n pointer-events: none;\n}\n\n[s-pointer=\"auto\"] {\n pointer-events: auto;\n}\n\n/* =============================================================================\n USER SELECT\n ============================================================================= */\n\n[s-select=\"none\"] {\n user-select: none;\n}\n\n[s-select=\"text\"] {\n user-select: text;\n}\n\n[s-select=\"all\"] {\n user-select: all;\n}\n\n[s-select=\"auto\"] {\n user-select: auto;\n}\n\n/* =============================================================================\n ISOLATION (for stacking contexts)\n ============================================================================= */\n\n[s-isolate] {\n isolation: isolate;\n}\n\n[s-isolate=\"auto\"] {\n isolation: auto;\n}\n","/**\n * Shift CSS - Flex/Grid Atomic Utilities\n *\n * Atomic utilities for flex/grid children and sizing.\n * Structural layout patterns are in layout.css (attributes).\n * Namespaced with `s-` prefix.\n */\n\n/* =============================================================================\n FLEX ITEM UTILITIES\n ============================================================================= */\n\n/* Flex shorthand */\n.s-flex-1 {\n flex: 1 1 0%;\n}\n.s-flex-auto {\n flex: 1 1 auto;\n}\n.s-flex-initial {\n flex: 0 1 auto;\n}\n.s-flex-none {\n flex: none;\n}\n\n/* Flex grow */\n.s-grow {\n flex-grow: 1;\n}\n.s-grow-0 {\n flex-grow: 0;\n}\n\n/* Flex shrink */\n.s-shrink {\n flex-shrink: 1;\n}\n.s-shrink-0 {\n flex-shrink: 0;\n}\n\n/* =============================================================================\n ALIGN SELF (for flex/grid children)\n ============================================================================= */\n\n.s-self-auto {\n align-self: auto;\n}\n.s-self-start {\n align-self: flex-start;\n}\n.s-self-end {\n align-self: flex-end;\n}\n.s-self-center {\n align-self: center;\n}\n.s-self-stretch {\n align-self: stretch;\n}\n.s-self-baseline {\n align-self: baseline;\n}\n\n/* =============================================================================\n PLACE UTILITIES (shorthand for align + justify)\n ============================================================================= */\n\n.s-place-items-start {\n place-items: start;\n}\n.s-place-items-end {\n place-items: end;\n}\n.s-place-items-center {\n place-items: center;\n}\n.s-place-items-stretch {\n place-items: stretch;\n}\n\n.s-place-content-start {\n place-content: start;\n}\n.s-place-content-end {\n place-content: end;\n}\n.s-place-content-center {\n place-content: center;\n}\n.s-place-content-between {\n place-content: space-between;\n}\n.s-place-content-around {\n place-content: space-around;\n}\n.s-place-content-evenly {\n place-content: space-evenly;\n}\n\n/* =============================================================================\n ORDER\n ============================================================================= */\n\n.s-order-first {\n order: -9999;\n}\n.s-order-last {\n order: 9999;\n}\n.s-order-none {\n order: 0;\n}\n.s-order-1 {\n order: 1;\n}\n.s-order-2 {\n order: 2;\n}\n.s-order-3 {\n order: 3;\n}\n\n/* =============================================================================\n WIDTH\n ============================================================================= */\n\n.s-w-full {\n width: 100%;\n}\n.s-w-screen {\n width: 100vw;\n}\n.s-w-min {\n width: min-content;\n}\n.s-w-max {\n width: max-content;\n}\n.s-w-fit {\n width: fit-content;\n}\n.s-w-auto {\n width: auto;\n}\n\n/* =============================================================================\n HEIGHT\n ============================================================================= */\n\n.s-h-full {\n height: 100%;\n}\n.s-h-screen {\n height: 100vh;\n}\n.s-h-screen-dvh {\n height: 100dvh;\n}\n.s-h-min {\n height: min-content;\n}\n.s-h-max {\n height: max-content;\n}\n.s-h-fit {\n height: fit-content;\n}\n.s-h-auto {\n height: auto;\n}\n\n/* =============================================================================\n MIN/MAX WIDTH\n ============================================================================= */\n\n.s-min-w-0 {\n min-width: 0;\n}\n.s-min-w-full {\n min-width: 100%;\n}\n.s-max-w-none {\n max-width: none;\n}\n.s-max-w-xs {\n max-width: 20rem;\n}\n.s-max-w-sm {\n max-width: 24rem;\n}\n.s-max-w-md {\n max-width: 28rem;\n}\n.s-max-w-lg {\n max-width: 32rem;\n}\n.s-max-w-xl {\n max-width: 36rem;\n}\n.s-max-w-2xl {\n max-width: 42rem;\n}\n.s-max-w-3xl {\n max-width: 48rem;\n}\n.s-max-w-4xl {\n max-width: 56rem;\n}\n.s-max-w-5xl {\n max-width: 64rem;\n}\n.s-max-w-6xl {\n max-width: 72rem;\n}\n.s-max-w-7xl {\n max-width: 80rem;\n}\n.s-max-w-full {\n max-width: 100%;\n}\n.s-max-w-prose {\n max-width: 65ch;\n}\n\n/* =============================================================================\n MIN/MAX HEIGHT\n ============================================================================= */\n\n.s-min-h-0 {\n min-height: 0;\n}\n.s-min-h-full {\n min-height: 100%;\n}\n.s-min-h-screen {\n min-height: 100vh;\n}\n.s-min-h-screen-dvh {\n min-height: 100dvh;\n}\n.s-max-h-full {\n max-height: 100%;\n}\n.s-max-h-screen {\n max-height: 100vh;\n}\n\n/* =============================================================================\n ASPECT RATIO\n ============================================================================= */\n\n.s-aspect-auto {\n aspect-ratio: auto;\n}\n.s-aspect-square {\n aspect-ratio: 1 / 1;\n}\n.s-aspect-video {\n aspect-ratio: 16 / 9;\n}\n.s-aspect-4-3 {\n aspect-ratio: 4 / 3;\n}\n\n/* =============================================================================\n Z-INDEX\n ============================================================================= */\n\n.s-z-0 {\n z-index: 0;\n}\n.s-z-10 {\n z-index: 10;\n}\n.s-z-20 {\n z-index: 20;\n}\n.s-z-30 {\n z-index: 30;\n}\n.s-z-40 {\n z-index: 40;\n}\n.s-z-50 {\n z-index: 50;\n}\n.s-z-auto {\n z-index: auto;\n}\n","/**\n * Shift CSS - Surface Component\n *\n * Adaptive surface with automatic contrast text color.\n * Uses semantic attribute selectors for depth/layering.\n *\n * Usage:\n * <section s-surface>Default flat surface</section>\n * <section s-surface=\"raised\">Elevated card-like surface</section>\n * <section s-surface=\"sunken\">Recessed input-like surface</section>\n * <section s-surface=\"floating\">High elevation overlay</section>\n */\n\n/* Base surface - zero specificity for easy overrides */\n:where([s-surface]) {\n /* Enable container queries (size + style) */\n container-type: inline-size;\n container-name: surface;\n\n /* Surface CSS properties (customization points) */\n --_surface-bg: var(--s-surface-base);\n --_surface-padding: var(--s-space-4);\n --_surface-radius: var(--s-radius-lg);\n\n /* Depth indicator for style queries (flat=0, sunken=-1, raised=1, floating=2) */\n --_surface-depth: 0;\n\n background-color: var(--_surface-bg);\n padding: var(--_surface-padding);\n border-radius: var(--_surface-radius);\n\n /**\n * AUTO-CONTRAST TEXT COLOR\n *\n * Strategy (best to fallback):\n * 1. contrast-color() - CSS Color Level 6 (Chrome Canary, Safari TP)\n * 2. Relative color syntax - Extract lightness, threshold at L=0.6\n * 3. Semantic token fallback - Pre-defined light-dark() value\n */\n\n /* FALLBACK 1: Semantic token (works everywhere) */\n color: var(--s-text-primary);\n\n /* FALLBACK 2: Relative color syntax (2024+ browsers) */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_surface-bg)\n /* If L < 0.55, use light text (0.95); otherwise dark text (0.15)\n Threshold 0.55 ensures 4.5:1 contrast per WCAG 2.1 AA */\n clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n /* PRIMARY: contrast-color() (CSS Color Level 6 - 2025+ browsers) */\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_surface-bg));\n }\n}\n\n/* =============================================================================\n SURFACE DEPTH VARIANTS\n ============================================================================= */\n\n/* Flat - default, explicit declaration */\n[s-surface=\"flat\"] {\n --_surface-bg: var(--s-surface-base);\n --_surface-depth: 0;\n}\n\n/* Sunken - recessed appearance */\n[s-surface=\"sunken\"] {\n --_surface-bg: var(--s-surface-sunken);\n --_surface-depth: -1;\n box-shadow: var(--s-shadow-inner);\n}\n\n/* Raised - elevated card-like appearance */\n[s-surface=\"raised\"] {\n --_surface-bg: var(--s-surface-raised);\n --_surface-depth: 1;\n box-shadow: var(--s-shadow-md);\n}\n\n/* Floating - high elevation, for overlays and modals */\n[s-surface=\"floating\"] {\n --_surface-bg: var(--s-surface-raised);\n --_surface-depth: 2;\n box-shadow: var(--s-shadow-xl);\n}\n\n/* =============================================================================\n SURFACE MODIFIERS\n ============================================================================= */\n\n/* Bordered surface */\n[s-surface][s-bordered] {\n border: 1px solid var(--s-border-default);\n}\n\n/* Interactive surface (hoverable, focusable) */\n[s-surface][s-interactive] {\n cursor: pointer;\n transition:\n transform var(--s-duration-150) var(--s-ease-out),\n box-shadow var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: var(--s-shadow-lg);\n }\n\n &:active {\n transform: translateY(0);\n box-shadow: var(--s-shadow-sm);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n}\n\n/* =============================================================================\n COLOR VARIANTS\n ============================================================================= */\n\n/* Brand color surfaces - use 700 shade (L≈0.47) for WCAG 4.5:1 with white text */\n/* Hex fallbacks for a11y tools that can't parse OKLCH */\n[s-surface=\"primary\"] {\n --_surface-bg: var(--s-primary-700);\n background-color: #0066aa; /* Fallback for OKLCH */\n background-color: var(--_surface-bg);\n color: #fff;\n}\n\n[s-surface=\"secondary\"] {\n --_surface-bg: var(--s-secondary-700);\n background-color: #6644aa; /* Fallback for OKLCH */\n background-color: var(--_surface-bg);\n color: #fff;\n}\n\n[s-surface=\"accent\"] {\n --_surface-bg: var(--s-accent-700);\n background-color: #aa4466; /* Fallback for OKLCH */\n background-color: var(--_surface-bg);\n color: #fff;\n}\n\n/* =============================================================================\n STATE SURFACES (for alerts, notifications)\n ============================================================================= */\n\n/* State surfaces use light backgrounds with dark text for notification-style alerts */\n/* Hex fallbacks for a11y tools that can't parse OKLCH/light-dark() */\n[s-surface=\"success\"] {\n --_surface-bg: var(--s-state-success-bg);\n background-color: #d4edda; /* Light green fallback */\n background-color: var(--_surface-bg);\n border-left: 4px solid var(--s-state-success);\n color: #1a1a1a;\n}\n\n[s-surface=\"warning\"] {\n --_surface-bg: var(--s-state-warning-bg);\n background-color: #fff3cd; /* Light yellow fallback */\n background-color: var(--_surface-bg);\n border-left: 4px solid var(--s-state-warning);\n color: #1a1a1a;\n}\n\n[s-surface=\"danger\"] {\n --_surface-bg: var(--s-state-danger-bg);\n background-color: #f8d7da; /* Light red fallback */\n background-color: var(--_surface-bg);\n border-left: 4px solid var(--s-state-danger);\n color: #1a1a1a;\n}\n\n/* =============================================================================\n CONTAINER QUERY RESPONSIVE PADDING\n ============================================================================= */\n\n@container (max-width: 20rem) {\n :where([s-surface]) {\n --_surface-padding: var(--s-space-3);\n }\n}\n\n@container (min-width: 40rem) {\n :where([s-surface]) {\n --_surface-padding: var(--s-space-6);\n }\n}\n","/**\n * Shift CSS - Tooltip Component\n *\n * CSS-only tooltip using ::after pseudo-element with attr() for content.\n * Supports top, bottom, left, right positions with arrow indicators.\n *\n * Usage:\n * <button s-tooltip=\"Save your changes\">Save</button>\n * <button s-tooltip=\"Bottom\" s-tooltip-pos=\"bottom\">Bottom</button>\n *\n * Customization:\n * [s-tooltip] {\n * --_tooltip-bg: var(--s-primary-700);\n * --_tooltip-max-width: 300px;\n * }\n *\n * Accessibility Note:\n * Pseudo-element tooltips are not announced by screen readers.\n * For critical information, use aria-describedby with a visible element.\n */\n\n/* =============================================================================\n BASE TOOLTIP STYLES\n ============================================================================= */\n\n:where([s-tooltip]) {\n /* Tooltip CSS properties (customization points) */\n --_tooltip-bg: var(--s-surface-overlay);\n --_tooltip-text: var(--s-text-inverse);\n --_tooltip-radius: var(--s-radius-md);\n --_tooltip-padding-x: var(--s-space-3);\n --_tooltip-padding-y: var(--s-space-1_5);\n --_tooltip-offset: var(--s-space-2);\n --_tooltip-max-width: 200px;\n --_tooltip-arrow-size: 6px;\n\n /* Required for tooltip positioning */\n position: relative;\n}\n\n/* Tooltip content via ::after */\n:where([s-tooltip])::after {\n content: attr(s-tooltip);\n\n /* Hidden by default */\n visibility: hidden;\n opacity: 0;\n\n /* Positioning */\n position: absolute;\n z-index: 9999;\n\n /* Default position: top - centered above element */\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(4px);\n margin-bottom: var(--_tooltip-offset);\n\n /* Visual styling */\n background-color: var(--_tooltip-bg);\n color: var(--_tooltip-text);\n padding: var(--_tooltip-padding-y) var(--_tooltip-padding-x);\n border-radius: var(--_tooltip-radius);\n box-shadow: var(--s-shadow-md);\n\n /* RCS: tethered tinting - derive border from tooltip background */\n @supports (color: oklch(from red l c h)) {\n border: 1px solid oklch(from var(--_tooltip-bg) max(calc(l - 0.1), 0.05) c h);\n }\n\n /* Typography */\n font-size: var(--s-text-xs);\n font-weight: var(--s-font-medium);\n line-height: var(--s-leading-tight);\n text-align: center;\n text-wrap: balance;\n min-width: min(100%, var(--_tooltip-max-width)); /* At least as wide as trigger, capped at max */\n max-width: var(--_tooltip-max-width);\n\n /* Prevent tooltip from blocking interactions */\n pointer-events: none;\n\n /* Animation - fade + translate */\n transition:\n opacity var(--s-duration-150) var(--s-ease-out),\n visibility var(--s-duration-150) var(--s-ease-out),\n transform var(--s-duration-150) var(--s-ease-out);\n}\n\n/* Arrow via ::before - points toward trigger */\n:where([s-tooltip])::before {\n content: \"\";\n\n /* Hidden by default */\n visibility: hidden;\n opacity: 0;\n\n /* Positioning */\n position: absolute;\n z-index: 9999;\n\n /* Default position: top - arrow points down at trigger */\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(4px);\n margin-bottom: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));\n\n /* Arrow shape - points down */\n border-left: var(--_tooltip-arrow-size) solid transparent;\n border-right: var(--_tooltip-arrow-size) solid transparent;\n border-top: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);\n\n /* Prevent blocking interactions */\n pointer-events: none;\n\n /* Animation - fade + translate */\n transition:\n opacity var(--s-duration-150) var(--s-ease-out),\n visibility var(--s-duration-150) var(--s-ease-out),\n transform var(--s-duration-150) var(--s-ease-out);\n}\n\n/* =============================================================================\n SHOW STATES - Hover and Focus\n ============================================================================= */\n\n[s-tooltip]:hover::after,\n[s-tooltip]:hover::before,\n[s-tooltip]:focus-visible::after,\n[s-tooltip]:focus-visible::before {\n visibility: visible;\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n}\n\n/* =============================================================================\n POSITION VARIANTS\n ============================================================================= */\n\n/* Bottom position */\n[s-tooltip-pos=\"bottom\"]::after {\n bottom: auto;\n top: 100%;\n transform: translateX(-50%) translateY(-4px);\n margin-bottom: 0;\n margin-top: var(--_tooltip-offset);\n}\n\n[s-tooltip-pos=\"bottom\"]::before {\n bottom: auto;\n top: 100%;\n transform: translateX(-50%) translateY(-4px);\n margin-bottom: 0;\n margin-top: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));\n\n /* Flip arrow to point up */\n border-top: none;\n border-bottom: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);\n}\n\n[s-tooltip-pos=\"bottom\"]:hover::after,\n[s-tooltip-pos=\"bottom\"]:hover::before,\n[s-tooltip-pos=\"bottom\"]:focus-visible::after,\n[s-tooltip-pos=\"bottom\"]:focus-visible::before {\n transform: translateX(-50%) translateY(0);\n}\n\n/* Left position */\n[s-tooltip-pos=\"left\"]::after {\n bottom: auto;\n left: auto;\n top: 50%;\n right: 100%;\n transform: translateY(-50%) translateX(4px);\n margin-bottom: 0;\n margin-right: var(--_tooltip-offset);\n}\n\n[s-tooltip-pos=\"left\"]::before {\n bottom: auto;\n left: auto;\n top: 50%;\n right: 100%;\n transform: translateY(-50%) translateX(4px);\n margin-bottom: 0;\n margin-right: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));\n\n /* Arrow points right */\n border-top: var(--_tooltip-arrow-size) solid transparent;\n border-bottom: var(--_tooltip-arrow-size) solid transparent;\n border-left: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);\n border-right: none;\n}\n\n[s-tooltip-pos=\"left\"]:hover::after,\n[s-tooltip-pos=\"left\"]:hover::before,\n[s-tooltip-pos=\"left\"]:focus-visible::after,\n[s-tooltip-pos=\"left\"]:focus-visible::before {\n transform: translateY(-50%) translateX(0);\n}\n\n/* Right position */\n[s-tooltip-pos=\"right\"]::after {\n bottom: auto;\n left: 100%;\n top: 50%;\n transform: translateY(-50%) translateX(-4px);\n margin-bottom: 0;\n margin-left: var(--_tooltip-offset);\n}\n\n[s-tooltip-pos=\"right\"]::before {\n bottom: auto;\n left: 100%;\n top: 50%;\n transform: translateY(-50%) translateX(-4px);\n margin-bottom: 0;\n margin-left: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));\n\n /* Arrow points left */\n border-top: var(--_tooltip-arrow-size) solid transparent;\n border-bottom: var(--_tooltip-arrow-size) solid transparent;\n border-right: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);\n border-left: none;\n}\n\n[s-tooltip-pos=\"right\"]:hover::after,\n[s-tooltip-pos=\"right\"]:hover::before,\n[s-tooltip-pos=\"right\"]:focus-visible::after,\n[s-tooltip-pos=\"right\"]:focus-visible::before {\n transform: translateY(-50%) translateX(0);\n}\n\n/* =============================================================================\n ACCESSIBILITY\n ============================================================================= */\n\n/* Respect reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n [s-tooltip]::after,\n [s-tooltip]::before {\n transition: none;\n }\n}\n\n/* High contrast mode support */\n@media (forced-colors: active) {\n [s-tooltip]::after {\n background-color: Canvas;\n color: CanvasText;\n border: 1px solid CanvasText;\n }\n\n [s-tooltip]::before {\n /* Hide arrow in high contrast - borders don't render reliably */\n display: none;\n }\n}\n","/**\n * Shift CSS - Menu Component\n *\n * Dropdown menu using CSS Anchor Positioning with anchor-scope for isolation.\n * Uses details/summary for native disclosure, progressively enhanced with\n * anchor positioning for auto-flipping in supported browsers.\n *\n * Usage:\n * <details s-menu>\n * <summary s-menu-trigger>Options ▾</summary>\n * <div s-menu-items>\n * <button s-menu-item>Edit</button>\n * <button s-menu-item>Duplicate</button>\n * <hr s-menu-divider>\n * <button s-menu-item s-danger>Delete</button>\n * </div>\n * </details>\n *\n * Position variants:\n * <details s-menu=\"end\"> <!-- Align to end (right in LTR) -->\n * <details s-menu=\"top\"> <!-- Open above trigger -->\n * <details s-menu=\"top-end\"> <!-- Open above, align end -->\n *\n * Browser Support:\n * - All browsers: Basic absolute positioning fallback\n * - Chrome 131+, Edge 131+: Full anchor positioning with auto-flip\n * - Firefox 147+: Full anchor positioning with auto-flip\n */\n\n/* =============================================================================\n BASE MENU STYLES\n ============================================================================= */\n\n:where([s-menu]) {\n --_menu-bg: var(--s-surface-raised);\n --_menu-border: var(--s-border-muted);\n --_menu-radius: var(--s-radius-lg);\n --_menu-shadow: var(--s-shadow-lg);\n --_menu-min-width: 10rem;\n --_menu-padding: var(--s-space-1);\n --_menu-offset: var(--s-space-1);\n}\n\n[s-menu] {\n position: relative;\n display: inline-block;\n\n /* Scope anchor names to this menu's subtree */\n anchor-scope: --menu-trigger;\n}\n\n/* Hide default marker */\n[s-menu]::marker,\n[s-menu] ::-webkit-details-marker {\n display: none;\n}\n\n/* =============================================================================\n MENU TRIGGER (summary element)\n ============================================================================= */\n\n[s-menu-trigger] {\n cursor: pointer;\n list-style: none;\n\n /* Register as anchor */\n anchor-name: --menu-trigger;\n}\n\n[s-menu-trigger]::-webkit-details-marker {\n display: none;\n}\n\n/* =============================================================================\n MENU ITEMS CONTAINER\n ============================================================================= */\n\n[s-menu-items] {\n /* === FALLBACK: Absolute positioning for browsers without anchor support === */\n position: absolute;\n z-index: 9999;\n top: 100%;\n left: 0;\n margin-top: var(--_menu-offset);\n\n /* Visual styling */\n background-color: var(--_menu-bg);\n border: 1px solid var(--_menu-border);\n border-radius: var(--_menu-radius);\n box-shadow: var(--_menu-shadow);\n min-width: var(--_menu-min-width);\n padding: var(--_menu-padding);\n\n /* Layout */\n display: flex;\n flex-direction: column;\n\n /* Typography */\n font-size: var(--s-text-sm);\n color: var(--s-text-primary);\n\n /* Hidden by default */\n opacity: 0;\n transform: scale(0.95) translateY(-4px);\n visibility: hidden;\n transition:\n opacity var(--s-duration-150) var(--s-ease-out),\n transform var(--s-duration-150) var(--s-ease-out),\n visibility var(--s-duration-150);\n}\n\n/* Open state */\n[s-menu][open] > [s-menu-items] {\n opacity: 1;\n transform: scale(1) translateY(0);\n visibility: visible;\n}\n\n/* =============================================================================\n POSITION VARIANTS (Fallback)\n ============================================================================= */\n\n/* End-aligned (right in LTR) */\n[s-menu=\"end\"] > [s-menu-items] {\n left: auto;\n right: 0;\n}\n\n/* Top position (opens above) */\n[s-menu=\"top\"] > [s-menu-items] {\n top: auto;\n bottom: 100%;\n margin-top: 0;\n margin-bottom: var(--_menu-offset);\n transform: scale(0.95) translateY(4px);\n}\n\n[s-menu=\"top\"][open] > [s-menu-items] {\n transform: scale(1) translateY(0);\n}\n\n/* Top-end position */\n[s-menu=\"top-end\"] > [s-menu-items] {\n top: auto;\n bottom: 100%;\n left: auto;\n right: 0;\n margin-top: 0;\n margin-bottom: var(--_menu-offset);\n transform: scale(0.95) translateY(4px);\n}\n\n[s-menu=\"top-end\"][open] > [s-menu-items] {\n transform: scale(1) translateY(0);\n}\n\n/* =============================================================================\n CSS ANCHOR POSITIONING (Progressive Enhancement)\n ============================================================================= */\n\n@supports (anchor-scope: all) {\n [s-menu-items] {\n /* Anchor positioning (still needs position: absolute as base) */\n position: absolute;\n position-anchor: --menu-trigger;\n\n /* Reset fallback positioning */\n top: auto;\n left: auto;\n right: auto;\n bottom: auto;\n margin: 0;\n\n /* Default position: bottom-start */\n inset-block-start: anchor(end);\n inset-inline-start: anchor(start);\n margin-block-start: var(--_menu-offset);\n\n /* Auto-flip when hitting viewport edges */\n position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;\n }\n\n /* End-aligned with anchor */\n [s-menu=\"end\"] > [s-menu-items] {\n inset-inline-start: auto;\n inset-inline-end: anchor(end);\n }\n\n /* Top position with anchor */\n [s-menu=\"top\"] > [s-menu-items] {\n inset-block-start: auto;\n inset-block-end: anchor(start);\n margin-block-start: 0;\n margin-block-end: var(--_menu-offset);\n }\n\n /* Top-end position with anchor */\n [s-menu=\"top-end\"] > [s-menu-items] {\n inset-block-start: auto;\n inset-block-end: anchor(start);\n inset-inline-start: auto;\n inset-inline-end: anchor(end);\n margin-block-start: 0;\n margin-block-end: var(--_menu-offset);\n }\n}\n\n/* =============================================================================\n MENU ITEMS\n ============================================================================= */\n\n[s-menu-item] {\n display: flex;\n align-items: center;\n gap: var(--s-space-2);\n\n width: 100%;\n padding: var(--s-space-2) var(--s-space-3);\n border: none;\n border-radius: var(--s-radius-md);\n background: transparent;\n color: var(--s-text-primary);\n font-size: inherit;\n text-align: start;\n cursor: pointer;\n\n transition: background-color var(--s-duration-100) var(--s-ease-out);\n}\n\n[s-menu-item]:hover {\n background-color: var(--s-surface-sunken);\n}\n\n[s-menu-item]:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: -2px;\n}\n\n[s-menu-item]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Danger item variant */\n[s-menu-item][s-danger] {\n color: var(--s-state-danger);\n}\n\n[s-menu-item][s-danger]:hover {\n background-color: var(--s-state-danger-bg);\n}\n\n/* =============================================================================\n MENU DIVIDER\n ============================================================================= */\n\n[s-menu-divider] {\n height: 1px;\n margin: var(--s-space-1) 0;\n background-color: var(--s-border-muted);\n border: none;\n}\n\n/* =============================================================================\n MENU LABEL (for grouped sections)\n ============================================================================= */\n\n[s-menu-label] {\n display: block;\n padding: var(--s-space-2) var(--s-space-3);\n font-size: var(--s-text-xs);\n font-weight: var(--s-font-semibold);\n color: var(--s-text-secondary);\n text-transform: uppercase;\n letter-spacing: var(--s-tracking-wide);\n}\n\n/* =============================================================================\n ACCESSIBILITY\n ============================================================================= */\n\n@media (prefers-reduced-motion: reduce) {\n [s-menu-items] {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n [s-menu-items] {\n border: 2px solid CanvasText;\n }\n\n [s-menu-item]:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n}\n","/**\n * Shift CSS - Typography Utilities\n *\n * Text styling, alignment, and color utilities.\n * Namespaced with `s-` prefix.\n */\n\n/* =============================================================================\n FONT FAMILY\n ============================================================================= */\n\n.s-font-sans {\n font-family: var(--s-font-sans);\n}\n.s-font-serif {\n font-family: var(--s-font-serif);\n}\n.s-font-mono {\n font-family: var(--s-font-mono);\n}\n\n/* =============================================================================\n FONT SIZE\n ============================================================================= */\n\n.s-text-xs {\n font-size: var(--s-text-xs);\n}\n.s-text-sm {\n font-size: var(--s-text-sm);\n}\n.s-text-base {\n font-size: var(--s-text-base);\n}\n.s-text-lg {\n font-size: var(--s-text-lg);\n}\n.s-text-xl {\n font-size: var(--s-text-xl);\n}\n.s-text-2xl {\n font-size: var(--s-text-2xl);\n}\n.s-text-3xl {\n font-size: var(--s-text-3xl);\n}\n.s-text-4xl {\n font-size: var(--s-text-4xl);\n}\n.s-text-5xl {\n font-size: var(--s-text-5xl);\n}\n\n/* =============================================================================\n FONT WEIGHT\n ============================================================================= */\n\n.s-font-thin {\n font-weight: var(--s-font-thin);\n}\n.s-font-extralight {\n font-weight: var(--s-font-extralight);\n}\n.s-font-light {\n font-weight: var(--s-font-light);\n}\n.s-font-normal {\n font-weight: var(--s-font-normal);\n}\n.s-font-medium {\n font-weight: var(--s-font-medium);\n}\n.s-font-semibold {\n font-weight: var(--s-font-semibold);\n}\n.s-font-bold {\n font-weight: var(--s-font-bold);\n}\n.s-font-extrabold {\n font-weight: var(--s-font-extrabold);\n}\n.s-font-black {\n font-weight: var(--s-font-black);\n}\n\n/* =============================================================================\n LINE HEIGHT\n ============================================================================= */\n\n.s-leading-none {\n line-height: var(--s-leading-none);\n}\n.s-leading-tight {\n line-height: var(--s-leading-tight);\n}\n.s-leading-snug {\n line-height: var(--s-leading-snug);\n}\n.s-leading-normal {\n line-height: var(--s-leading-normal);\n}\n.s-leading-relaxed {\n line-height: var(--s-leading-relaxed);\n}\n.s-leading-loose {\n line-height: var(--s-leading-loose);\n}\n\n/* =============================================================================\n LETTER SPACING\n ============================================================================= */\n\n.s-tracking-tighter {\n letter-spacing: var(--s-tracking-tighter);\n}\n.s-tracking-tight {\n letter-spacing: var(--s-tracking-tight);\n}\n.s-tracking-normal {\n letter-spacing: var(--s-tracking-normal);\n}\n.s-tracking-wide {\n letter-spacing: var(--s-tracking-wide);\n}\n.s-tracking-wider {\n letter-spacing: var(--s-tracking-wider);\n}\n.s-tracking-widest {\n letter-spacing: var(--s-tracking-widest);\n}\n\n/* =============================================================================\n TEXT ALIGNMENT\n ============================================================================= */\n\n.s-text-left {\n text-align: left;\n}\n.s-text-center {\n text-align: center;\n}\n.s-text-right {\n text-align: right;\n}\n.s-text-justify {\n text-align: justify;\n}\n.s-text-start {\n text-align: start;\n}\n.s-text-end {\n text-align: end;\n}\n\n/* =============================================================================\n VERTICAL ALIGNMENT\n ============================================================================= */\n\n.s-align-baseline {\n vertical-align: baseline;\n}\n.s-align-top {\n vertical-align: top;\n}\n.s-align-middle {\n vertical-align: middle;\n}\n.s-align-bottom {\n vertical-align: bottom;\n}\n.s-align-text-top {\n vertical-align: text-top;\n}\n.s-align-text-bottom {\n vertical-align: text-bottom;\n}\n.s-align-sub {\n vertical-align: sub;\n}\n.s-align-super {\n vertical-align: super;\n}\n\n/* =============================================================================\n TEXT DECORATION\n ============================================================================= */\n\n.s-underline {\n text-decoration-line: underline;\n}\n.s-overline {\n text-decoration-line: overline;\n}\n.s-line-through {\n text-decoration-line: line-through;\n}\n.s-no-underline {\n text-decoration-line: none;\n}\n\n/* Text decoration style */\n.s-decoration-solid {\n text-decoration-style: solid;\n}\n.s-decoration-double {\n text-decoration-style: double;\n}\n.s-decoration-dotted {\n text-decoration-style: dotted;\n}\n.s-decoration-dashed {\n text-decoration-style: dashed;\n}\n.s-decoration-wavy {\n text-decoration-style: wavy;\n}\n\n/* =============================================================================\n TEXT TRANSFORM\n ============================================================================= */\n\n.s-uppercase {\n text-transform: uppercase;\n}\n.s-lowercase {\n text-transform: lowercase;\n}\n.s-capitalize {\n text-transform: capitalize;\n}\n.s-normal-case {\n text-transform: none;\n}\n\n/* =============================================================================\n TEXT OVERFLOW\n ============================================================================= */\n\n.s-text-ellipsis {\n text-overflow: ellipsis;\n}\n.s-text-clip {\n text-overflow: clip;\n}\n\n/* =============================================================================\n TEXT WRAP\n ============================================================================= */\n\n.s-text-wrap {\n text-wrap: wrap;\n}\n.s-text-nowrap {\n text-wrap: nowrap;\n}\n.s-text-balance {\n text-wrap: balance;\n}\n.s-text-pretty {\n text-wrap: pretty;\n}\n\n/* =============================================================================\n WHITESPACE\n ============================================================================= */\n\n.s-whitespace-normal {\n white-space: normal;\n}\n.s-whitespace-nowrap {\n white-space: nowrap;\n}\n.s-whitespace-pre {\n white-space: pre;\n}\n.s-whitespace-pre-line {\n white-space: pre-line;\n}\n.s-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.s-whitespace-break-spaces {\n white-space: break-spaces;\n}\n\n/* =============================================================================\n WORD BREAK\n ============================================================================= */\n\n.s-break-normal {\n overflow-wrap: normal;\n word-break: normal;\n}\n.s-break-words {\n overflow-wrap: break-word;\n}\n.s-break-all {\n word-break: break-all;\n}\n.s-break-keep {\n word-break: keep-all;\n}\n\n/* =============================================================================\n HYPHENS\n ============================================================================= */\n\n.s-hyphens-none {\n hyphens: none;\n}\n.s-hyphens-manual {\n hyphens: manual;\n}\n.s-hyphens-auto {\n hyphens: auto;\n}\n\n/* =============================================================================\n TEXT COLOR (semantic)\n ============================================================================= */\n\n.s-text-primary {\n color: var(--s-text-primary);\n}\n.s-text-secondary {\n color: var(--s-text-secondary);\n}\n.s-text-tertiary {\n color: var(--s-text-tertiary);\n}\n.s-text-inverse {\n color: var(--s-text-inverse);\n}\n\n/* Text color (status) */\n.s-text-success {\n color: var(--s-state-success);\n}\n.s-text-warning {\n color: var(--s-state-warning);\n}\n.s-text-danger {\n color: var(--s-state-danger);\n}\n\n/* =============================================================================\n LINK STYLING\n ============================================================================= */\n\n.s-link {\n color: var(--s-interactive-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n\n &:hover {\n color: var(--s-interactive-primary-hover);\n }\n}\n\n/* =============================================================================\n LIST STYLES\n ============================================================================= */\n\n.s-list-none {\n list-style-type: none;\n}\n.s-list-disc {\n list-style-type: disc;\n}\n.s-list-decimal {\n list-style-type: decimal;\n}\n.s-list-inside {\n list-style-position: inside;\n}\n.s-list-outside {\n list-style-position: outside;\n}\n\n/* =============================================================================\n OPACITY\n ============================================================================= */\n\n.s-opacity-0 {\n opacity: 0;\n}\n.s-opacity-5 {\n opacity: 0.05;\n}\n.s-opacity-10 {\n opacity: 0.1;\n}\n.s-opacity-20 {\n opacity: 0.2;\n}\n.s-opacity-25 {\n opacity: 0.25;\n}\n.s-opacity-30 {\n opacity: 0.3;\n}\n.s-opacity-40 {\n opacity: 0.4;\n}\n.s-opacity-50 {\n opacity: 0.5;\n}\n.s-opacity-60 {\n opacity: 0.6;\n}\n.s-opacity-70 {\n opacity: 0.7;\n}\n.s-opacity-75 {\n opacity: 0.75;\n}\n.s-opacity-80 {\n opacity: 0.8;\n}\n.s-opacity-90 {\n opacity: 0.9;\n}\n.s-opacity-95 {\n opacity: 0.95;\n}\n.s-opacity-100 {\n opacity: 1;\n}\n","/**\n * Shift CSS - Button Component\n *\n * Accessible button styles using semantic attribute selectors.\n * Uses s-btn attribute for variants and s-size for scaling.\n *\n * Usage:\n * <button s-btn=\"primary\">Primary</button>\n * <button s-btn=\"secondary\">Secondary</button>\n * <button s-btn=\"ghost\">Ghost</button>\n * <button s-btn=\"primary\" s-size=\"lg\">Large Primary</button>\n */\n\n/* Base button - zero specificity for easy overrides */\n:where([s-btn]) {\n /* Button CSS properties (customization points) */\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n --_btn-border: transparent;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--s-space-2);\n\n padding: var(--s-space-2) var(--s-space-4);\n border-radius: var(--s-radius-md);\n font-weight: var(--s-font-semibold);\n font-size: var(--s-text-sm);\n line-height: 1;\n white-space: nowrap;\n\n background-color: var(--_btn-bg);\n color: var(--_btn-text);\n border: 1px solid var(--_btn-border);\n\n /* Auto-contrast for custom backgrounds (0.55 threshold for WCAG 4.5:1) */\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_btn-bg) clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n\n @supports (color: contrast-color(red)) {\n color: contrast-color(var(--_btn-bg));\n }\n\n /* Transitions */\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n border-color var(--s-duration-150) var(--s-ease-out),\n transform var(--s-duration-100) var(--s-ease-out);\n\n cursor: pointer;\n user-select: none;\n\n /* Hover state */\n &:hover:not(:disabled) {\n /* Fallback: semantic token */\n background-color: var(--s-interactive-primary-hover);\n\n /* RCS: derive hover from base color (works with custom colors)\n Light mode: darken (l * 0.92), Dark mode: lighten (l * 1.1, capped at 0.95) */\n @supports (color: oklch(from red l c h)) and (color: light-dark(red, blue)) {\n background-color: light-dark(\n oklch(from var(--_btn-bg) calc(l * 0.92) c h),\n oklch(from var(--_btn-bg) min(calc(l * 1.1), 0.95) c h)\n );\n }\n }\n\n /* Active state */\n &:active:not(:disabled) {\n /* Fallback: semantic token */\n background-color: var(--s-interactive-primary-active);\n\n /* RCS: derive active from base color\n Light mode: darken more, Dark mode: lighten more */\n @supports (color: oklch(from red l c h)) and (color: light-dark(red, blue)) {\n background-color: light-dark(\n oklch(from var(--_btn-bg) calc(l * 0.85) c h),\n oklch(from var(--_btn-bg) min(calc(l * 1.2), 0.98) c h)\n );\n }\n\n transform: scale(0.98);\n }\n\n /* Focus state */\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n /* Disabled state */\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n\n/* =============================================================================\n BUTTON VARIANTS (0,1,0 specificity - slightly sticky)\n ============================================================================= */\n\n/* Primary - default, explicit declaration */\n[s-btn=\"primary\"] {\n --_btn-bg: var(--s-interactive-primary);\n --_btn-text: var(--s-text-inverse);\n}\n\n/* Secondary */\n[s-btn=\"secondary\"] {\n --_btn-bg: var(--s-surface-raised);\n --_btn-text: var(--s-text-primary);\n --_btn-border: var(--s-border-default);\n\n /* Override auto-contrast */\n color: var(--_btn-text);\n}\n\n/* Ghost - transparent background */\n[s-btn=\"ghost\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n\n /* Override auto-contrast for transparent bg */\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n --_btn-bg: var(--s-surface-sunken);\n }\n}\n\n/* Link - looks like a link */\n[s-btn=\"link\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n --_btn-border: transparent;\n\n color: var(--_btn-text);\n text-decoration: underline;\n text-underline-offset: 2px;\n\n &:hover:not(:disabled) {\n --_btn-text: var(--s-interactive-primary-hover);\n color: var(--_btn-text);\n }\n}\n\n/* Outline - inverts on hover (special behavior, explicit override) */\n[s-btn=\"outline\"] {\n --_btn-bg: transparent;\n --_btn-text: var(--s-interactive-primary);\n --_btn-border: var(--s-interactive-primary);\n\n color: var(--_btn-text);\n\n &:hover:not(:disabled) {\n /* Update --_btn-bg so auto-contrast calculates correctly */\n --_btn-bg: var(--s-interactive-primary);\n background-color: var(--s-interactive-primary);\n color: var(--s-text-inverse);\n }\n}\n\n/* =============================================================================\n STATE VARIANTS\n ============================================================================= */\n\n/* Danger - hover/active derived via RCS */\n[s-btn=\"danger\"] {\n --_btn-bg: var(--s-state-danger);\n}\n\n/* Success - hover/active derived via RCS */\n[s-btn=\"success\"] {\n --_btn-bg: var(--s-state-success);\n}\n\n/* Warning - hover/active derived via RCS */\n[s-btn=\"warning\"] {\n --_btn-bg: var(--s-state-warning);\n}\n\n/* =============================================================================\n SIZE MODIFIERS (composable via s-size attribute)\n ============================================================================= */\n\n[s-btn][s-size=\"sm\"] {\n padding: var(--s-space-1) var(--s-space-3);\n font-size: var(--s-text-xs);\n}\n\n[s-btn][s-size=\"lg\"] {\n padding: var(--s-space-3) var(--s-space-6);\n font-size: var(--s-text-base);\n}\n\n[s-btn][s-size=\"xl\"] {\n padding: var(--s-space-4) var(--s-space-8);\n font-size: var(--s-text-lg);\n}\n\n/* =============================================================================\n SPECIAL STATES\n ============================================================================= */\n\n/* Icon-only button */\n[s-btn][s-icon] {\n padding: var(--s-space-2);\n aspect-ratio: 1;\n}\n\n/* Full-width button */\n[s-btn][s-block] {\n width: 100%;\n}\n\n/* Loading state - use bg color for text to pass a11y contrast checks */\n[s-btn][s-loading] {\n position: relative;\n color: var(--_btn-bg);\n pointer-events: none;\n\n &::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 1em;\n height: 1em;\n border: 2px solid var(--s-text-inverse);\n border-right-color: transparent;\n border-radius: 50%;\n animation: s-btn-spin 0.6s linear infinite;\n }\n}\n\n@keyframes s-btn-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* =============================================================================\n BUTTON GROUP\n ============================================================================= */\n\n[s-btn-group] {\n display: inline-flex;\n\n & > [s-btn] {\n border-radius: 0;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n }\n\n &:not(:last-child) {\n border-right: none;\n }\n }\n}\n\n/* =============================================================================\n STYLE QUERIES - Depth-Aware Adaptation\n Buttons automatically adapt when nested inside surfaces of different depths.\n ============================================================================= */\n\n@supports (container-type: inline-size) {\n /**\n * Inside raised surface (depth: 1)\n * Secondary buttons need stronger border for definition\n */\n @container surface style(--_surface-depth: 1) {\n :where([s-btn=\"secondary\"]) {\n --_btn-border: var(--s-border-strong);\n }\n }\n\n /**\n * Inside floating surface (depth: 2)\n * All buttons get stronger borders for definition against elevated bg\n */\n @container surface style(--_surface-depth: 2) {\n :where([s-btn=\"secondary\"]) {\n --_btn-border: var(--s-border-strong);\n --_btn-bg: var(--s-surface-base);\n }\n\n :where([s-btn=\"ghost\"]) {\n --_btn-border: var(--s-border-muted);\n }\n }\n\n /**\n * Inside sunken surface (depth: -1)\n * Buttons use base surface bg to stand out from recessed area\n */\n @container surface style(--_surface-depth: -1) {\n :where([s-btn=\"secondary\"]) {\n --_btn-bg: var(--s-surface-base);\n }\n }\n}\n","/**\n * Shift CSS - Input Component\n *\n * Form input styles using semantic attribute selectors.\n *\n * Usage:\n * <input s-input type=\"text\" placeholder=\"Enter text\">\n * <input s-input s-size=\"lg\" type=\"email\">\n * <textarea s-input>Content</textarea>\n * <select s-input><option>Choose...</option></select>\n */\n\n/* Base input - zero specificity for easy overrides */\n:where([s-input]) {\n /* Input CSS properties (customization points) */\n --_input-bg: var(--s-surface-base);\n --_input-border: var(--s-border-default);\n --_input-text: var(--s-text-primary);\n --_input-placeholder: var(--s-text-tertiary);\n --_input-radius: var(--s-radius-md);\n\n appearance: none;\n display: block;\n width: 100%;\n\n padding: var(--s-space-2) var(--s-space-3);\n background-color: var(--_input-bg);\n border: 2px solid var(--_input-border);\n border-radius: var(--_input-radius);\n color: var(--_input-text);\n font-size: var(--s-text-sm);\n line-height: var(--s-leading-normal);\n\n transition:\n border-color var(--s-duration-150) var(--s-ease-out),\n box-shadow var(--s-duration-150) var(--s-ease-out);\n\n &::placeholder {\n color: var(--_input-placeholder);\n }\n\n /* Hover state */\n &:hover:not(:disabled):not(:focus-visible) {\n --_input-border: var(--s-border-strong);\n }\n\n /* Focus state - use :focus-visible to avoid showing ring on mouse click */\n &:focus-visible {\n --_input-border: var(--s-interactive-primary);\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n\n /* RCS: contextual focus ring - 30% alpha of primary color */\n @supports (color: oklch(from red l c h)) {\n outline-color: oklch(from var(--s-interactive-primary) l c h / 0.3);\n }\n }\n\n /* Disabled state */\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--s-surface-sunken);\n }\n\n /* Invalid state */\n &:invalid:not(:placeholder-shown),\n &[aria-invalid=\"true\"] {\n --_input-border: var(--s-state-danger);\n\n &:focus-visible {\n outline-color: var(--s-state-danger);\n }\n }\n}\n\n/* =============================================================================\n INPUT SIZE VARIANTS\n ============================================================================= */\n\n[s-input][s-size=\"sm\"] {\n padding: var(--s-space-1) var(--s-space-2);\n font-size: var(--s-text-xs);\n}\n\n[s-input][s-size=\"lg\"] {\n padding: var(--s-space-3) var(--s-space-4);\n font-size: var(--s-text-base);\n}\n\n/* =============================================================================\n SPECIFIC INPUT TYPES\n ============================================================================= */\n\n/* Textarea */\ntextarea[s-input] {\n min-height: 6rem;\n resize: vertical;\n}\n\n/* Select */\nselect[s-input] {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--s-space-3) center;\n padding-right: var(--s-space-10);\n}\n\n/* =============================================================================\n INPUT GROUP (with addons)\n ============================================================================= */\n\n[s-input-group] {\n display: flex;\n\n & > [s-input] {\n flex: 1;\n min-width: 0;\n border-radius: 0;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n }\n }\n\n & > [s-input-addon] {\n display: flex;\n align-items: center;\n padding: var(--s-space-2) var(--s-space-3);\n background-color: var(--s-surface-sunken);\n border: 2px solid var(--s-border-default);\n color: var(--s-text-secondary);\n font-size: var(--s-text-sm);\n white-space: nowrap;\n\n &:first-child {\n border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);\n border-right: none;\n }\n\n &:last-child {\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n border-left: none;\n }\n }\n}\n\n/* =============================================================================\n FORM FIELD WRAPPER\n ============================================================================= */\n\n[s-field] {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-1);\n}\n\n[s-field-label] {\n font-size: var(--s-text-sm);\n font-weight: var(--s-font-medium);\n color: var(--s-text-primary);\n}\n\n[s-field-hint] {\n font-size: var(--s-text-xs);\n color: var(--s-text-secondary);\n}\n\n[s-field-error] {\n font-size: var(--s-text-xs);\n color: var(--s-state-danger);\n}\n\n/* =============================================================================\n CHECKBOX / RADIO\n ============================================================================= */\n\n[s-checkbox],\n[s-radio] {\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n cursor: pointer;\n\n & input {\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--s-border-default);\n background-color: var(--s-surface-base);\n cursor: pointer;\n\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n border-color var(--s-duration-150) var(--s-ease-out);\n\n &:checked {\n background-color: var(--s-interactive-primary);\n border-color: var(--s-interactive-primary);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n\n[s-checkbox] input {\n border-radius: var(--s-radius-sm);\n\n &:checked {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: 0.75rem;\n }\n}\n\n[s-radio] input {\n border-radius: 50%;\n\n &:checked {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n }\n}\n\n/* =============================================================================\n TOGGLE SWITCH\n ============================================================================= */\n\n[s-toggle] {\n display: inline-flex;\n align-items: center;\n gap: var(--s-space-2);\n cursor: pointer;\n\n & input {\n appearance: none;\n width: 2.5rem;\n height: 1.5rem;\n border-radius: 9999px;\n background-color: var(--s-border-default);\n cursor: pointer;\n position: relative;\n\n transition: background-color var(--s-duration-200) var(--s-ease-out);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: calc(1.5rem - 4px);\n height: calc(1.5rem - 4px);\n border-radius: 50%;\n background-color: var(--s-surface-base);\n box-shadow: var(--s-shadow-sm);\n\n transition: transform var(--s-duration-200) var(--s-ease-out);\n }\n\n &:checked {\n background-color: var(--s-interactive-primary);\n\n &::after {\n transform: translateX(1rem);\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n\n/* =============================================================================\n STYLE QUERIES - Depth-Aware Adaptation\n Inputs automatically adapt when nested inside surfaces of different depths.\n ============================================================================= */\n\n@supports (container-type: inline-size) {\n /**\n * Inside raised surface (depth: 1)\n * Use sunken background to create visual depth contrast\n */\n @container surface style(--_surface-depth: 1) {\n :where([s-input]) {\n --_input-bg: var(--s-surface-sunken);\n }\n\n :where([s-checkbox]) input,\n :where([s-radio]) input {\n background-color: var(--s-surface-sunken);\n }\n }\n\n /**\n * Inside floating surface (depth: 2)\n * Stronger sunken appearance with visible border\n */\n @container surface style(--_surface-depth: 2) {\n :where([s-input]) {\n --_input-bg: var(--s-surface-sunken);\n --_input-border: var(--s-border-strong);\n }\n\n :where([s-checkbox]) input,\n :where([s-radio]) input {\n background-color: var(--s-surface-sunken);\n border-color: var(--s-border-strong);\n }\n }\n\n /**\n * Inside sunken surface (depth: -1)\n * Use base background to stand out from recessed area\n */\n @container surface style(--_surface-depth: -1) {\n :where([s-input]) {\n --_input-bg: var(--s-surface-raised);\n --_input-border: var(--s-border-muted);\n }\n\n :where([s-checkbox]) input,\n :where([s-radio]) input {\n background-color: var(--s-surface-raised);\n }\n }\n}\n","/**\n * Shift CSS - Modal Component\n *\n * CSS-only modal using native <dialog> element with backdrop styling,\n * size variants, and entrance animations.\n *\n * Usage:\n * <dialog s-modal>\n * <header s-modal-header>\n * <h2>Title</h2>\n * <button s-modal-close aria-label=\"Close\">&times;</button>\n * </header>\n * <div s-modal-body>Content</div>\n * <footer s-modal-footer>\n * <button s-btn formmethod=\"dialog\">Cancel</button>\n * <button s-btn=\"primary\">Confirm</button>\n * </footer>\n * </dialog>\n *\n * JavaScript:\n * document.querySelector('[s-modal]').showModal();\n */\n\n/* Ensure closed dialogs are hidden */\ndialog[s-modal]:not([open]) {\n display: none;\n}\n\n/* Base modal - zero specificity for easy overrides */\n:where(dialog[s-modal]) {\n /* Modal CSS properties (customization points) */\n --_modal-bg: var(--s-surface-raised);\n --_modal-border: var(--s-border-muted);\n --_modal-radius: var(--s-radius-xl);\n --_modal-shadow: var(--s-shadow-2xl);\n --_modal-padding: var(--s-space-4);\n --_modal-max-width: 32rem;\n\n /* Reset dialog defaults */\n border: none;\n padding: 0;\n margin: auto; /* Center by default */\n\n /* Size and positioning */\n width: min(var(--_modal-max-width), calc(100vw - var(--s-space-4) * 2));\n max-height: calc(100vh - var(--s-space-4) * 2);\n max-width: var(--_modal-max-width);\n\n /* Visual styling */\n background-color: var(--_modal-bg);\n border-radius: var(--_modal-radius);\n box-shadow: var(--_modal-shadow);\n\n /* Layout - only when open (preserve native display:none when closed) */\n &[open] {\n display: flex;\n flex-direction: column;\n }\n\n /* Text color - use semantic token for reliable light/dark mode support */\n color: var(--s-text-primary);\n}\n\n/* Open state animation */\ndialog[s-modal][open] {\n animation: s-modal-scale-in var(--s-duration-200) var(--s-ease-out);\n}\n\n/* Focus visible state for keyboard navigation */\ndialog[s-modal]:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n}\n\n@keyframes s-modal-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* =============================================================================\n BACKDROP STYLING\n ============================================================================= */\n\ndialog[s-modal]::backdrop {\n background: oklch(0 0 0 / 0.5);\n backdrop-filter: blur(4px);\n animation: s-modal-backdrop-in var(--s-duration-200) var(--s-ease-out);\n\n /* RCS: adaptive backdrop - tinted with brand hue */\n @supports (color: oklch(from red l c h)) {\n background: oklch(from var(--s-primary-500) 0.1 0.02 h / 0.5);\n }\n}\n\n@keyframes s-modal-backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* =============================================================================\n SIZE VARIANTS\n ============================================================================= */\n\n/* Small - confirmations, simple alerts */\ndialog[s-modal][s-size=\"sm\"] {\n --_modal-max-width: 25rem;\n}\n\n/* Large - forms, detailed content */\ndialog[s-modal][s-size=\"lg\"] {\n --_modal-max-width: 43.75rem;\n}\n\n/* Full screen */\ndialog[s-modal][s-size=\"full\"] {\n --_modal-max-width: 100vw;\n --_modal-radius: 0;\n width: 100vw;\n height: 100vh;\n max-height: 100vh;\n}\n\n/* =============================================================================\n POSITION VARIANTS\n ============================================================================= */\n\n/* Top - anchored to top of viewport */\ndialog[s-modal][s-position=\"top\"] {\n margin-top: var(--s-space-8);\n margin-bottom: auto;\n}\n\n/* Bottom - anchored to bottom of viewport */\ndialog[s-modal][s-position=\"bottom\"] {\n margin-top: auto;\n margin-bottom: var(--s-space-8);\n}\n\n/* Left - anchored to left side */\ndialog[s-modal][s-position=\"left\"] {\n margin-left: 0;\n margin-right: auto;\n border-radius: 0 var(--_modal-radius) var(--_modal-radius) 0;\n}\n\n@media (min-width: 640px) {\n dialog[s-modal][s-position=\"left\"] {\n margin-left: var(--s-space-8);\n border-radius: var(--_modal-radius);\n }\n}\n\n/* Right - anchored to right side */\ndialog[s-modal][s-position=\"right\"] {\n margin-left: auto;\n margin-right: 0;\n border-radius: var(--_modal-radius) 0 0 var(--_modal-radius);\n}\n\n@media (min-width: 640px) {\n dialog[s-modal][s-position=\"right\"] {\n margin-right: var(--s-space-8);\n border-radius: var(--_modal-radius);\n }\n}\n\n/* =============================================================================\n SUB-COMPONENTS\n ============================================================================= */\n\n/* Header - title and close button */\n:where([s-modal-header]) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--s-space-4);\n padding: var(--_modal-padding, var(--s-space-4));\n border-bottom: 1px solid var(--s-border-muted);\n\n /* Typography for title */\n & > h1,\n & > h2,\n & > h3 {\n margin: 0;\n font-size: var(--s-text-lg);\n font-weight: var(--s-font-semibold);\n line-height: 1.25;\n color: inherit;\n }\n}\n\n/* Body - scrollable content area */\n:where([s-modal-body]) {\n flex: 1;\n padding: var(--_modal-padding, var(--s-space-4));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n/* Footer - action buttons */\n:where([s-modal-footer]) {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--s-space-3);\n padding: var(--_modal-padding, var(--s-space-4));\n border-top: 1px solid var(--s-border-muted);\n}\n\n/* Close button */\n:where([s-modal-close]) {\n /* Reset button styles */\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n\n /* Size and shape - minimum 44x44px for WCAG 2.1 touch target */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 2.75rem;\n min-height: 2.75rem;\n border-radius: var(--s-radius-full);\n\n /* Typography */\n font-size: var(--s-text-xl);\n line-height: 1;\n color: var(--s-text-secondary);\n\n /* Transitions */\n transition:\n background-color var(--s-duration-150) var(--s-ease-out),\n color var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n background-color: var(--s-surface-sunken);\n color: var(--s-text-primary);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n\n &:active {\n background-color: var(--s-border-default);\n }\n}\n\n/* =============================================================================\n ACCESSIBILITY & HIGH CONTRAST\n ============================================================================= */\n\n/* High contrast mode support */\n@media (forced-colors: active) {\n dialog[s-modal] {\n border: 2px solid CanvasText;\n }\n\n dialog[s-modal]::backdrop {\n background: rgba(0, 0, 0, 0.75);\n backdrop-filter: none;\n }\n\n [s-modal-header],\n [s-modal-footer] {\n border-color: CanvasText;\n }\n\n [s-modal-close] {\n border: 1px solid ButtonText;\n }\n}\n","/**\n * Shift CSS - Card Component\n *\n * Flexible card component with header, body, footer sections.\n * Uses semantic attribute selectors and supports container queries.\n *\n * Usage:\n * <article s-card>Basic card content</article>\n * <article s-card s-surface=\"raised\">Elevated card</article>\n * <article s-card s-interactive>Clickable card</article>\n */\n\n/* Base card - zero specificity for easy overrides */\n:where([s-card]) {\n /* Card CSS properties (customization points) */\n --_card-bg: var(--s-surface-raised);\n --_card-border: var(--s-border-muted);\n --_card-radius: var(--s-radius-xl);\n --_card-shadow: var(--s-shadow-base);\n --_card-padding: var(--s-space-4);\n\n container-type: inline-size;\n\n display: flex;\n flex-direction: column;\n\n background-color: var(--_card-bg);\n border: 1px solid var(--_card-border);\n border-radius: var(--_card-radius);\n box-shadow: var(--_card-shadow);\n overflow: hidden;\n\n /* Auto-contrast text (0.55 threshold for WCAG 4.5:1) */\n color: var(--s-text-primary);\n\n @supports (color: oklch(from red l c h)) {\n color: oklch(\n from var(--_card-bg) clamp(0.15, calc((0.55 - l) * 1000 + 0.15), 0.95) 0 0\n );\n }\n}\n\n/* =============================================================================\n CARD SECTIONS\n ============================================================================= */\n\n[s-card-header] {\n padding: var(--_card-padding, var(--s-space-4));\n border-bottom: 1px solid var(--_card-border, var(--s-border-muted));\n}\n\n[s-card-body] {\n padding: var(--_card-padding, var(--s-space-4));\n flex: 1;\n}\n\n[s-card-footer] {\n padding: var(--_card-padding, var(--s-space-4));\n border-top: 1px solid var(--_card-border, var(--s-border-muted));\n}\n\n/* Card media (image at top) */\n[s-card-media] {\n aspect-ratio: 16 / 9;\n overflow: hidden;\n\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n/* Card title */\n[s-card-title] {\n font-size: var(--s-text-lg);\n font-weight: var(--s-font-semibold);\n line-height: var(--s-leading-tight);\n margin-bottom: var(--s-space-1);\n}\n\n/* Card subtitle/description */\n[s-card-subtitle] {\n font-size: var(--s-text-sm);\n color: var(--s-text-secondary);\n}\n\n/* =============================================================================\n CARD VARIANTS\n ============================================================================= */\n\n/* Flat card (no shadow) */\n[s-card=\"flat\"] {\n --_card-shadow: none;\n --_card-border: var(--s-border-default);\n}\n\n/* Elevated card */\n[s-card=\"elevated\"],\n[s-card][s-surface=\"raised\"] {\n --_card-shadow: var(--s-shadow-lg);\n /* Use oklch transparent for RCS compatibility */\n --_card-border: oklch(0% 0 0 / 0);\n}\n\n/* Floating card (high elevation) */\n[s-card][s-surface=\"floating\"] {\n --_card-shadow: var(--s-shadow-xl);\n /* Use oklch transparent for RCS compatibility */\n --_card-border: oklch(0% 0 0 / 0);\n}\n\n/* Outline card */\n[s-card=\"outline\"] {\n --_card-shadow: none;\n --_card-border: var(--s-border-strong);\n --_card-bg: transparent;\n}\n\n/* =============================================================================\n CARD MODIFIERS\n ============================================================================= */\n\n/* Interactive card */\n[s-card][s-interactive] {\n cursor: pointer;\n transition:\n transform var(--s-duration-200) var(--s-ease-out),\n box-shadow var(--s-duration-200) var(--s-ease-out),\n border-color var(--s-duration-200) var(--s-ease-out);\n\n &:hover {\n transform: translateY(-4px);\n --_card-shadow: var(--s-shadow-xl);\n\n /* RCS: interactive depth - border darkens 10% on hover */\n @supports (color: oklch(from red l c h)) {\n border-color: oklch(from var(--_card-border) max(calc(l - 0.1), 0.05) c h);\n }\n }\n\n &:active {\n transform: translateY(-2px);\n }\n\n &:focus-visible {\n outline: 2px solid var(--s-focus-ring);\n outline-offset: 2px;\n }\n}\n\n/* Card with link overlay */\n[s-card][s-link] {\n position: relative;\n\n & a::after {\n content: \"\";\n position: absolute;\n inset: 0;\n }\n}\n\n/* Horizontal card layout */\n[s-card][s-horizontal] {\n flex-direction: row;\n\n & [s-card-media] {\n aspect-ratio: 1;\n width: 33%;\n flex-shrink: 0;\n }\n}\n\n/* Container query: Stack horizontal cards on small containers */\n@container (max-width: 24rem) {\n [s-card][s-horizontal] {\n flex-direction: column;\n\n & [s-card-media] {\n width: 100%;\n aspect-ratio: 16 / 9;\n }\n }\n}\n\n/* =============================================================================\n CARD SIZE VARIANTS\n ============================================================================= */\n\n[s-card][s-size=\"sm\"] {\n --_card-padding: var(--s-space-3);\n --_card-radius: var(--s-radius-lg);\n}\n\n[s-card][s-size=\"lg\"] {\n --_card-padding: var(--s-space-6);\n}\n\n/* Feature card (centered, larger padding) */\n[s-card=\"feature\"] {\n text-align: center;\n --_card-padding: var(--s-space-6);\n}\n\n[s-card-icon] {\n font-size: var(--s-text-4xl);\n margin-bottom: var(--s-space-4);\n}\n\n/* =============================================================================\n CARD LAYOUTS\n ============================================================================= */\n\n/* Card grid */\n[s-card-grid] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));\n gap: var(--s-space-4);\n}\n\n/* Card stack (vertical list) */\n[s-card-stack] {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-4);\n}\n\n/* =============================================================================\n STYLE QUERIES - Depth-Aware Adaptation\n Cards automatically adapt when nested inside surfaces of different depths.\n ============================================================================= */\n\n@supports (container-type: inline-size) {\n /**\n * Inside raised surface (depth: 1)\n * Reduce shadow to avoid visual \"shadow stacking\"\n */\n @container surface style(--_surface-depth: 1) {\n :where([s-card]) {\n --_card-shadow: var(--s-shadow-sm);\n }\n }\n\n /**\n * Inside floating surface (depth: 2)\n * Remove shadow entirely, use subtle border for definition\n */\n @container surface style(--_surface-depth: 2) {\n :where([s-card]) {\n --_card-shadow: none;\n --_card-border: var(--s-border-default);\n }\n }\n\n /**\n * Inside sunken surface (depth: -1)\n * Increase shadow for better lift appearance\n */\n @container surface style(--_surface-depth: -1) {\n :where([s-card]) {\n --_card-shadow: var(--s-shadow-md);\n }\n }\n}\n","/**\n * Shift CSS - Prose Component\n *\n * Typography styles for long-form content like articles, blog posts,\n * and markdown-rendered content. Applies sensible defaults to child\n * elements without requiring classes on each element.\n *\n * Usage:\n * <article s-prose>\n * <h1>Title</h1>\n * <p>Content with <a href=\"#\">links</a> and <code>code</code>.</p>\n * </article>\n */\n\n/* =============================================================================\n BASE PROSE CONTAINER\n ============================================================================= */\n\n:where([s-prose]) {\n /* Prose CSS properties (customization points) */\n --_prose-body: var(--s-text-base);\n --_prose-body-weight: var(--s-font-normal);\n --_prose-leading: var(--s-leading-relaxed);\n --_prose-link-color: var(--s-primary-600);\n --_prose-link-hover: var(--s-primary-700);\n --_prose-code-bg: var(--s-neutral-100);\n --_prose-code-color: var(--s-danger-600);\n --_prose-pre-bg: var(--s-neutral-900);\n --_prose-pre-color: var(--s-neutral-100);\n --_prose-border-color: var(--s-border-default);\n --_prose-quote-border: var(--s-primary-500);\n\n font-size: var(--_prose-body);\n font-weight: var(--_prose-body-weight);\n line-height: var(--_prose-leading);\n color: var(--s-text-primary);\n\n /* Limit line length for readability */\n max-width: 65ch;\n}\n\n/* Full width variant */\n[s-prose=\"full\"] {\n max-width: none;\n}\n\n/* =============================================================================\n HEADINGS\n ============================================================================= */\n\n:where([s-prose]) :where(h1, h2, h3, h4, h5, h6) {\n color: var(--s-text-primary);\n font-weight: var(--s-font-bold);\n line-height: var(--s-leading-tight);\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n}\n\n:where([s-prose]) :where(h1) {\n font-size: var(--s-text-4xl);\n margin-top: 0;\n}\n\n:where([s-prose]) :where(h2) {\n font-size: var(--s-text-3xl);\n padding-bottom: 0.25em;\n border-bottom: 1px solid var(--_prose-border-color);\n}\n\n:where([s-prose]) :where(h3) {\n font-size: var(--s-text-2xl);\n}\n\n:where([s-prose]) :where(h4) {\n font-size: var(--s-text-xl);\n}\n\n:where([s-prose]) :where(h5) {\n font-size: var(--s-text-lg);\n}\n\n:where([s-prose]) :where(h6) {\n font-size: var(--s-text-base);\n color: var(--s-text-secondary);\n}\n\n/* =============================================================================\n PARAGRAPHS & BASIC TEXT\n ============================================================================= */\n\n:where([s-prose]) :where(p) {\n margin-bottom: 1.25em;\n}\n\n:where([s-prose]) :where(strong, b) {\n font-weight: var(--s-font-semibold);\n color: var(--s-text-primary);\n}\n\n:where([s-prose]) :where(em, i) {\n font-style: italic;\n}\n\n:where([s-prose]) :where(small) {\n font-size: var(--s-text-sm);\n}\n\n/* =============================================================================\n LINKS\n ============================================================================= */\n\n:where([s-prose]) :where(a) {\n color: var(--_prose-link-color);\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n transition: color var(--s-duration-150) var(--s-ease-out);\n\n &:hover {\n color: var(--_prose-link-hover);\n }\n}\n\n/* =============================================================================\n LISTS\n ============================================================================= */\n\n:where([s-prose]) :where(ul, ol) {\n margin-bottom: 1.25em;\n padding-left: 1.5em;\n}\n\n:where([s-prose]) :where(ul) {\n list-style-type: disc;\n}\n\n:where([s-prose]) :where(ol) {\n list-style-type: decimal;\n}\n\n:where([s-prose]) :where(li) {\n margin-bottom: 0.5em;\n\n &::marker {\n color: var(--s-text-tertiary);\n }\n}\n\n:where([s-prose]) :where(li > ul, li > ol) {\n margin-top: 0.5em;\n margin-bottom: 0;\n}\n\n/* Definition lists */\n:where([s-prose]) :where(dl) {\n margin-bottom: 1.25em;\n}\n\n:where([s-prose]) :where(dt) {\n font-weight: var(--s-font-semibold);\n margin-top: 1em;\n}\n\n:where([s-prose]) :where(dd) {\n margin-left: 1.5em;\n margin-bottom: 0.5em;\n}\n\n/* =============================================================================\n BLOCKQUOTES\n ============================================================================= */\n\n:where([s-prose]) :where(blockquote) {\n margin: 1.5em 0;\n padding: 0.5em 1em;\n border-left: 4px solid var(--_prose-quote-border);\n background-color: var(--s-surface-sunken);\n border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;\n font-style: italic;\n color: var(--s-text-secondary);\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* =============================================================================\n CODE & PREFORMATTED\n ============================================================================= */\n\n:where([s-prose]) :where(code) {\n font-family: var(--s-font-mono);\n font-size: 0.875em;\n background-color: var(--_prose-code-bg);\n color: var(--_prose-code-color);\n padding: 0.125em 0.375em;\n border-radius: var(--s-radius-sm);\n}\n\n:where([s-prose]) :where(pre) {\n margin: 1.5em 0;\n padding: 1em;\n background-color: var(--_prose-pre-bg);\n color: var(--_prose-pre-color);\n border-radius: var(--s-radius-lg);\n overflow-x: auto;\n font-size: var(--s-text-sm);\n line-height: var(--s-leading-normal);\n\n /* Reset code styles inside pre */\n & code {\n background: none;\n color: inherit;\n padding: 0;\n border-radius: 0;\n font-size: inherit;\n }\n}\n\n/* Keyboard input */\n:where([s-prose]) :where(kbd) {\n font-family: var(--s-font-mono);\n font-size: 0.875em;\n background-color: var(--s-neutral-200);\n color: var(--s-text-primary);\n padding: 0.125em 0.375em;\n border-radius: var(--s-radius-sm);\n border: 1px solid var(--s-neutral-300);\n box-shadow: 0 1px 0 var(--s-neutral-400);\n}\n\n/* =============================================================================\n HORIZONTAL RULE\n ============================================================================= */\n\n:where([s-prose]) :where(hr) {\n margin: 2em 0;\n border: none;\n border-top: 1px solid var(--_prose-border-color);\n}\n\n/* =============================================================================\n IMAGES & FIGURES\n ============================================================================= */\n\n:where([s-prose]) :where(img) {\n max-width: 100%;\n height: auto;\n border-radius: var(--s-radius-lg);\n}\n\n:where([s-prose]) :where(figure) {\n margin: 1.5em 0;\n}\n\n:where([s-prose]) :where(figcaption) {\n margin-top: 0.75em;\n font-size: var(--s-text-sm);\n color: var(--s-text-secondary);\n text-align: center;\n}\n\n/* =============================================================================\n TABLES\n ============================================================================= */\n\n:where([s-prose]) :where(table) {\n width: 100%;\n margin: 1.5em 0;\n border-collapse: collapse;\n font-size: var(--s-text-sm);\n}\n\n:where([s-prose]) :where(thead) {\n border-bottom: 2px solid var(--_prose-border-color);\n}\n\n:where([s-prose]) :where(th) {\n font-weight: var(--s-font-semibold);\n text-align: left;\n padding: 0.75em 1em;\n background-color: var(--s-surface-sunken);\n}\n\n:where([s-prose]) :where(td) {\n padding: 0.75em 1em;\n border-bottom: 1px solid var(--_prose-border-color);\n}\n\n:where([s-prose]) :where(tbody tr:hover) {\n background-color: var(--s-surface-sunken);\n}\n\n/* =============================================================================\n SIZE VARIANTS\n ============================================================================= */\n\n[s-prose][s-size=\"sm\"] {\n --_prose-body: var(--s-text-sm);\n}\n\n[s-prose][s-size=\"lg\"] {\n --_prose-body: var(--s-text-lg);\n}\n\n/* =============================================================================\n DARK MODE ADJUSTMENTS\n ============================================================================= */\n\n@media (prefers-color-scheme: dark) {\n :where([s-prose]) {\n --_prose-link-color: var(--s-primary-400);\n --_prose-link-hover: var(--s-primary-300);\n --_prose-code-bg: var(--s-neutral-800);\n --_prose-code-color: var(--s-danger-400);\n --_prose-pre-bg: var(--s-neutral-950);\n --_prose-pre-color: var(--s-neutral-200);\n }\n\n :where([s-prose]) :where(kbd) {\n background-color: var(--s-neutral-700);\n border-color: var(--s-neutral-600);\n box-shadow: 0 1px 0 var(--s-neutral-500);\n }\n}\n\n/* Also support explicit dark mode via color-scheme */\n:root[style*=\"color-scheme: dark\"] :where([s-prose]),\n:root[style*=\"color-scheme:dark\"] :where([s-prose]) {\n --_prose-link-color: var(--s-primary-400);\n --_prose-link-hover: var(--s-primary-300);\n --_prose-code-bg: var(--s-neutral-800);\n --_prose-code-color: var(--s-danger-400);\n --_prose-pre-bg: var(--s-neutral-950);\n --_prose-pre-color: var(--s-neutral-200);\n}\n"],"names":[]}