/* SPEC §2.1 Buttons: aliases are local; no global Bootstrap variable mapping. */
:where(.sky-ds) :is(.sky-btn,.btn) {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; gap: var(--sky-space-inline); height: var(--sky-btn-md);
  --sky-btn-pad: var(--sky-space-4);
  padding-block: 0; padding-inline: var(--sky-btn-pad); margin: 0;
  border: 1px solid var(--sky-border-strong); border-radius: var(--sky-radius-md);
  color: var(--sky-text); background: var(--sky-surface); box-shadow: var(--sky-shadow-0);
  font-size: var(--sky-font-md); font-weight: var(--sky-weight-medium); line-height: var(--sky-line-md);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--sky-duration-fast); transition-timing-function: var(--sky-ease-standard);
}
:where(.sky-ds) :is(.sky-btn-secondary,.btn.btn-secondary) { color: var(--sky-text); background: var(--sky-surface); border-color: var(--sky-border-strong); }
:where(.sky-ds) :is(.sky-btn,.btn):is(:hover,.is-hover) { background: var(--sky-fill); text-decoration: none; }
:where(.sky-ds) :is(.sky-btn,.btn):is(:active,.is-active) { background: var(--sky-fill-active); transition-duration: var(--sky-duration-instant); }
:where(.sky-ds) :is(.sky-btn-primary,.btn.btn-primary) { color: var(--sky-primary-ink); background: var(--sky-primary); border-color: var(--sky-primary); }
:where(.sky-ds) :is(.sky-btn-primary,.btn.btn-primary):is(:hover,.is-hover) { background: var(--sky-primary-hover); border-color: var(--sky-primary-hover); }
:where(.sky-ds) :is(.sky-btn-primary,.btn.btn-primary):is(:active,.is-active) { background: var(--sky-primary-active); border-color: var(--sky-primary-active); }
:where(.sky-ds) :is(.sky-btn-tertiary,.btn.btn-tertiary,.sky-btn-link,.btn.btn-link) { color: var(--sky-link); background: transparent; border-color: transparent; }
:where(.sky-ds) :is(.sky-btn-tertiary,.btn.btn-tertiary):is(:hover,.is-hover) { background: var(--sky-brand-50); }
:where(.sky-ds) :is(.sky-btn-tertiary,.btn.btn-tertiary):is(:active,.is-active) { background: var(--sky-brand-100); }
:where(.sky-ds) :is(.sky-btn-link,.btn.btn-link):is(:hover,.is-hover,:active,.is-active) { background: transparent; text-decoration: underline; }
:where(.sky-ds) :is(.sky-btn-danger,.btn.btn-danger) { color: var(--sky-danger-ink); background: var(--sky-danger-solid); border-color: var(--sky-danger-solid); }
:where(.sky-ds) :is(.sky-btn-danger,.btn.btn-danger):is(:hover,.is-hover) { background: var(--sky-danger-hover); border-color: var(--sky-danger-hover); }
:where(.sky-ds) :is(.sky-btn-danger,.btn.btn-danger):is(:active,.is-active) { background: var(--sky-danger-active); border-color: var(--sky-danger-active); }
:where(.sky-ds) :is(.sky-btn-danger-secondary,.btn.btn-danger-secondary) { color: var(--sky-danger-700); background: var(--sky-surface); border-color: var(--sky-danger-200); }
:where(.sky-ds) :is(.sky-btn-danger-secondary,.btn.btn-danger-secondary):is(:hover,.is-hover) { background: var(--sky-danger-50); }
:where(.sky-ds) :is(.sky-btn-danger-secondary,.btn.btn-danger-secondary):is(:active,.is-active) { background: var(--sky-danger-100); }
:where(.sky-ds) :is(.sky-btn,.btn):is(:disabled,.is-disabled):not([aria-busy="true"]) { color: var(--sky-text-3); background: var(--sky-fill); border-color: transparent; box-shadow: var(--sky-shadow-0); cursor: not-allowed; }
:where(.sky-ds) :is(.sky-btn,.btn):is(:disabled,.is-disabled) { opacity: var(--sky-disabled-opacity); }
:where(.sky-ds) :is(.sky-btn-tertiary,.sky-btn-link,.btn.btn-tertiary,.btn.btn-link):is(:disabled,.is-disabled):not([aria-busy="true"]) { background: transparent; }
:where(.sky-ds) :is(.sky-btn,.btn)[aria-busy="true"] { cursor: wait; }
/* Text-only busy state trades 12px padding on each side for a 16px spinner + 8px gap. Width stays unchanged. */
:where(.sky-ds) :is(.sky-btn,.btn)[aria-busy="true"]:not(.sky-btn-has-icon) { padding-inline: calc(var(--sky-btn-pad) - var(--sky-space-3)); }
:where(.sky-ds) .sky-btn-leading { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--sky-icon-md); }
:where(.sky-ds) :is(.sky-btn-sm,.btn-sm) { --sky-btn-pad: var(--sky-space-3); height: var(--sky-btn-sm); border-radius: var(--sky-radius-sm); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
:where(.sky-ds) :is(.sky-btn-lg,.btn-lg) { --sky-btn-pad: var(--sky-space-5); height: var(--sky-btn-lg); font-size: var(--sky-font-lg); line-height: var(--sky-line-lg); }
:where(.sky-ds) .sky-btn-icon { width: var(--sky-btn-md); padding: 0; }
:where(.sky-ds) .sky-btn-icon.sky-btn-sm { width: var(--sky-btn-sm); }
:where(.sky-ds) .sky-btn .sky-icon { width: var(--sky-icon-sm); height: var(--sky-icon-sm); font-size: var(--sky-font-lg); }
:where(.sky-ds) .sky-btn-sm:not(.sky-btn-icon) .sky-icon { width: var(--sky-icon-xs); height: var(--sky-icon-xs); font-size: var(--sky-font-md); }
:where(.sky-ds) .sky-btn-lg .sky-icon { width: var(--sky-icon-md); height: var(--sky-icon-md); font-size: var(--sky-font-xl); }
:where(.sky-ds) .sky-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--sky-space-2); }
:where(.sky-ds) :is(.sky-card-footer,.sky-dialog > footer).sky-actions { justify-content: flex-end; }
:where(.sky-ds) .sky-spinner { display: inline-block; flex-shrink: 0; width: var(--sky-icon-sm); height: var(--sky-icon-sm); border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: var(--sky-radius-pill); animation: sky-ds-spin var(--sky-duration-spin) var(--sky-ease-linear) infinite; }
@keyframes sky-ds-spin { to { transform: rotate(var(--sky-motion-full-turn)); } }
/* SPEC §2.2 Client imports: presentation samples have no executable client URLs. */
:where(.sky-ds) .sky-client-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sky-space-2); }
:where(.sky-ds) .sky-client-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
:where(.sky-ds) .sky-client-grid .sky-btn { width: 100%; }
:where(.sky-ds) .sky-client-grid .sky-btn-leading { font-size: var(--sky-font-xl); }
:where(.sky-ds) .sky-split { display: flex; min-width: 0; }
:where(.sky-ds) .sky-split > :first-child { flex: 1; border-start-end-radius: 0; border-end-end-radius: 0; }
:where(.sky-ds) .sky-split > :last-child { width: var(--sky-btn-md); border-start-start-radius: 0; border-end-start-radius: 0; }
/* SPEC §2.3 Cards and §2.4 statistic cards. */
:where(.sky-ds) :is(.sky-card,.card) { display: flex; flex-direction: column; min-width: 0; padding: var(--sky-space-card); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-lg); background: var(--sky-surface); box-shadow: var(--sky-shadow-0); gap: var(--sky-space-4); }
:where(.sky-ds) .sky-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sky-space-3); }
:where(.sky-ds) .sky-card-subtitle { margin-block-start: var(--sky-space-1); color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
:where(.sky-ds) .sky-card-footer { margin-block-start: auto; padding-block-start: var(--sky-space-4); border-block-start: 1px solid var(--sky-divider); }
:where(.sky-ds) .sky-card-data { padding: 0; overflow: hidden; }
:where(.sky-ds) .sky-card-data > .sky-card-header { padding: var(--sky-space-card); border-block-end: 1px solid var(--sky-divider); }
:where(.sky-ds) .sky-icon-block { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--sky-icon-block); height: var(--sky-icon-block); border-radius: var(--sky-radius-md); color: var(--sky-link); background: var(--sky-brand-50); }
:where(.sky-ds) .sky-card-clickable { transition: transform var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard), border-color var(--sky-duration-fast) var(--sky-ease-standard); }
:where(.sky-ds) .sky-card-clickable:is(:hover,.is-hover) { transform: translateY(var(--sky-motion-lift)); border-color: var(--sky-brand-300); box-shadow: var(--sky-shadow-1); }
:where(.sky-ds) .sky-card-selected { border-color: var(--sky-primary); box-shadow: var(--sky-shadow-selected); }
:where(.sky-ds) .sky-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sky-space-4); }
:where(.sky-ds) .sky-stat-label { color: var(--sky-text-2); font-size: var(--sky-font-sm); font-weight: var(--sky-weight-medium); line-height: var(--sky-line-sm); }
:where(.sky-ds) .sky-stat-value { font-size: var(--sky-font-3xl); line-height: var(--sky-line-3xl); font-weight: var(--sky-weight-semibold); font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { :where(.sky-ds) .sky-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sky-space-6); } }
/* SPEC §2.5 callouts and §2.6 badges. */
:where(.sky-ds) .sky-tone-info { --sky-tone-bg: var(--sky-info-50); --sky-tone-border: var(--sky-info-200); --sky-tone-ink: var(--sky-info-700); }
:where(.sky-ds) .sky-tone-success { --sky-tone-bg: var(--sky-success-50); --sky-tone-border: var(--sky-success-200); --sky-tone-ink: var(--sky-success-700); }
:where(.sky-ds) .sky-tone-warning { --sky-tone-bg: var(--sky-warning-50); --sky-tone-border: var(--sky-warning-200); --sky-tone-ink: var(--sky-warning-700); }
:where(.sky-ds) .sky-tone-danger { --sky-tone-bg: var(--sky-danger-50); --sky-tone-border: var(--sky-danger-200); --sky-tone-ink: var(--sky-danger-700); }
:where(.sky-ds) .sky-tone-neutral { --sky-tone-bg: var(--sky-fill); --sky-tone-border: var(--sky-border); --sky-tone-ink: var(--sky-text-2); }
:where(.sky-ds) .sky-callout { display: flex; align-items: flex-start; gap: var(--sky-space-3); padding-block: var(--sky-space-3); padding-inline: var(--sky-space-4); border: 1px solid var(--sky-tone-border); border-radius: var(--sky-radius-md); background: var(--sky-tone-bg); color: var(--sky-text); }
:where(.sky-ds) .sky-callout > .sky-icon { color: var(--sky-tone-ink); }
:where(.sky-ds) .sky-callout > [data-dismiss-callout] { margin-inline-start: auto; }
:where(.sky-ds) .sky-badge { display: inline-flex; align-items: center; gap: var(--sky-space-1); min-height: 1.375rem; padding-inline: var(--sky-space-2); border-radius: var(--sky-radius-sm); background: var(--sky-tone-bg); color: var(--sky-tone-ink); font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); font-weight: var(--sky-weight-medium); white-space: nowrap; }
:where(.sky-ds) .sky-status { border-radius: var(--sky-radius-pill); }
:where(.sky-ds) .sky-status::before { content: ""; width: 0.375rem; height: 0.375rem; background: currentColor; border-radius: var(--sky-radius-pill); }
/* SPEC §2.7 Form fields; real controls and native keyboard behavior. */
:where(.sky-ds) .sky-field { display: grid; gap: var(--sky-space-label); min-width: 0; }
:where(.sky-ds) .sky-label { font-size: var(--sky-font-md); line-height: var(--sky-line-md); font-weight: var(--sky-weight-medium); margin: 0; }
:where(.sky-ds) :is(.sky-input,.form-control,.form-select) { min-width: 0; width: 100%; height: var(--sky-btn-md); padding-block: 0; padding-inline: var(--sky-space-3); color: var(--sky-text); background: var(--sky-surface); border: 1px solid var(--sky-border-strong); border-radius: var(--sky-radius-md); font-size: var(--sky-font-md); line-height: var(--sky-line-md); box-shadow: var(--sky-shadow-0); transition: border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard); }
:where(.sky-ds) .sky-input::placeholder { color: var(--sky-text-3); }
:where(.sky-ds) .sky-input:focus { border-color: var(--sky-primary); }
:where(.sky-ds) .sky-input-sm { height: var(--sky-btn-sm); }
:where(.sky-ds) .sky-input-lg { height: var(--sky-btn-lg); }
:where(.sky-ds) .sky-input:disabled { background: var(--sky-fill); color: var(--sky-text-3); }
:where(.sky-ds) .sky-input[aria-invalid="true"] { border-color: var(--sky-danger-600); }
@media (max-width: 1199.98px), (pointer: coarse) {
  :where(.sky-ds) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select,[contenteditable]:not([contenteditable="false"])) { font-size: var(--sky-font-input-mobile); }
}
:where(.sky-ds) .sky-field-error { display: flex; align-items: flex-start; gap: var(--sky-space-1); color: var(--sky-danger-700); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
:where(.sky-ds) .sky-input-group { display: flex; align-items: stretch; min-width: 0; }
:where(.sky-ds) .sky-input-group > :first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
:where(.sky-ds) .sky-input-group > :last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
:where(.sky-ds) .sky-input-affix { display: flex; align-items: center; padding-inline: var(--sky-space-3); background: var(--sky-fill); border: 1px solid var(--sky-border-strong); border-radius: var(--sky-radius-md); }
:where(.sky-ds) .sky-password { display: flex; align-items: center; min-width: 0; height: var(--sky-btn-md); gap: var(--sky-space-1); background: var(--sky-surface); outline: 1px solid var(--sky-border-strong); outline-offset: -1px; border-radius: var(--sky-radius-md); }
:where(.sky-ds) .sky-password > input { border: 0; background: transparent; }
:where(.sky-ds) .sky-password > button { margin-inline-end: var(--sky-space-1); }
:where(.sky-ds) .sky-check { display: inline-flex; align-items: center; min-width: var(--sky-touch-min); min-height: var(--sky-touch-min); gap: var(--sky-space-2); cursor: pointer; }
:where(.sky-ds) .sky-check input:not(.sky-switch) { width: 1rem; height: 1rem; accent-color: var(--sky-primary); margin: 0; }
:where(.sky-ds) .sky-switch { position: relative; appearance: none; width: 2.25rem; height: 1.25rem; border: 1px solid var(--sky-border-strong); border-radius: var(--sky-radius-pill); background: var(--sky-fill); transition: background-color var(--sky-duration-fast) var(--sky-ease-standard); }
:where(.sky-ds) .sky-switch::before { content: ""; position: absolute; inset-block-start: var(--sky-space-pixel); inset-inline-start: var(--sky-space-pixel); width: 1rem; height: 1rem; background: var(--sky-text-2); border-radius: var(--sky-radius-pill); transition: transform var(--sky-duration-fast) var(--sky-ease-standard); }
:where(.sky-ds) .sky-switch:checked { background: var(--sky-primary); border-color: var(--sky-primary); }
:where(.sky-ds) .sky-switch:checked::before { transform: translateX(1rem); background: var(--sky-white); }
:where(.sky-ds)[dir="rtl"] .sky-switch:checked::before { transform: translateX(-1rem); }
/* SPEC §2.8 native radio options. */
:where(.sky-ds) .sky-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sky-space-2); border: 0; padding: 0; margin: 0; }
:where(.sky-ds) .sky-option { position: relative; display: grid; place-content: center; min-height: 3rem; padding: var(--sky-space-2); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-md); text-align: center; cursor: pointer; }
:where(.sky-ds) .sky-option input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
:where(.sky-ds) .sky-option:has(input:checked) { border-color: var(--sky-primary); box-shadow: var(--sky-shadow-selected); background: var(--sky-brand-50); }
:where(.sky-ds) .sky-option:has(input:focus-visible) { outline: 2px solid var(--sky-focus-color); outline-offset: 2px; box-shadow: var(--sky-focus-ring); }
:where(.sky-ds) .sky-option:not(:has(input:checked)):is(:hover,:has(input.is-hover)) { border-color: var(--sky-brand-300); }
:where(.sky-ds) .sky-option:is(:active,:has(input.is-active)) { background: var(--sky-brand-100); }
:where(.sky-ds) .sky-option:is(:active,:has(input.is-active)) .sky-caption { color: var(--sky-text); }
:where(.sky-ds) .sky-option:has(input:disabled) { background: var(--sky-fill); color: var(--sky-text-3); cursor: not-allowed; }
:where(.sky-ds) .sky-option:has(input.is-focus) { outline: 2px solid var(--sky-focus-color); outline-offset: 2px; box-shadow: var(--sky-focus-ring); }
:where(.sky-ds) .sky-option-double { min-height: 3.5rem; }
/* SPEC §2.9 table / mobile list. */
:where(.sky-ds) .sky-table { width: 100%; border-collapse: collapse; font-size: var(--sky-font-md); line-height: var(--sky-line-md); }
:where(.sky-ds) .sky-table th { height: 2.75rem; padding-block: var(--sky-space-3); padding-inline: var(--sky-space-4); background: var(--sky-fill); color: var(--sky-text-2); text-align: start; font-size: var(--sky-font-sm); font-weight: var(--sky-weight-medium); line-height: var(--sky-line-sm); }
:where(.sky-ds) .sky-table td { height: 3.25rem; padding-block: var(--sky-space-2); padding-inline: var(--sky-space-4); border-block-end: 1px solid var(--sky-divider); }
:where(.sky-ds) .sky-table :is(th,td):last-child { text-align: end; }
:where(.sky-ds) .sky-table tr:hover td { background: var(--sky-fill-hover); }
:where(.sky-ds) .sky-table .sky-number { text-align: end; font-variant-numeric: tabular-nums; }
:where(.sky-ds) .sky-mobile-list { display: none; }
:where(.sky-ds) .sky-list-item { padding: var(--sky-space-4); border-block-end: 1px solid var(--sky-divider); display: grid; gap: var(--sky-space-2); }
:where(.sky-ds) .sky-kv { display: flex; justify-content: space-between; gap: var(--sky-space-3); color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
:where(.sky-ds) .sky-pagination { display: flex; justify-content: flex-end; gap: var(--sky-space-2); padding: var(--sky-space-4); }
/* SPEC §2.10 empty states. */
:where(.sky-ds) .sky-empty { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: var(--sky-space-3); padding-block: var(--sky-space-8); padding-inline: var(--sky-space-4); min-height: 15rem; }
:where(.sky-ds) .sky-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--sky-radius-pill); background: var(--sky-fill); color: var(--sky-text-3); }
:where(.sky-ds) .sky-empty-icon .sky-icon { width: var(--sky-icon-xl); height: var(--sky-icon-xl); font-size: var(--sky-font-3xl); }
:where(.sky-ds) .sky-empty p { max-width: 18em; color: var(--sky-text-2); }
:where(.sky-ds) :is(.sky-dialog-body,.sky-empty,.sky-callout) p { text-wrap: balance; text-wrap: pretty; overflow-wrap: break-word; }
/* SPEC §2.11 modal and §2.16 drawer: shared focus-trapped overlay. */
:where(.sky-ds) .sky-overlay { position: fixed; inset: 0; z-index: var(--sky-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sky-space-4); background: var(--sky-overlay); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--sky-duration-fast) var(--sky-ease-exit); }
:where(.sky-ds) .sky-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-standard); }
:where(.sky-ds) .sky-dialog { width: 35rem; max-width: 100%; max-height: calc(100dvh - var(--sky-space-7)); overflow: hidden; display: flex; flex-direction: column; gap: var(--sky-space-4); padding: var(--sky-space-6); border-radius: var(--sky-radius-xl); background: var(--sky-surface); box-shadow: var(--sky-shadow-3); transform: scale(var(--sky-motion-scale)); transition: transform var(--sky-duration-fast) var(--sky-ease-exit); }
:where(.sky-ds) .sky-dialog-sm { width: 25rem; }
:where(.sky-ds) .sky-dialog-lg { width: 45rem; }
:where(.sky-ds) .sky-dialog-body { overflow: auto; }
:where(.sky-ds) .sky-overlay.is-open .sky-dialog { transform: scale(1); transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-standard); }
:where(.sky-ds) .sky-dialog-title { font-size: var(--sky-font-xl); line-height: var(--sky-line-xl); font-weight: var(--sky-weight-semibold); }
:where(.sky-ds) .sky-drawer-overlay { z-index: var(--sky-z-drawer); padding: 0; justify-content: flex-start; background: transparent; opacity: 1; }
:where(.sky-ds) .sky-drawer-overlay::before { content: ""; position: absolute; inset: 0; background: var(--sky-overlay); opacity: 0; transition: opacity var(--sky-duration-base) var(--sky-ease-standard); }
:where(.sky-ds) .sky-drawer-overlay.is-open::before { opacity: 1; }
:where(.sky-ds) .sky-drawer { position: relative; width: var(--sky-sidebar-width); height: 100%; padding: var(--sky-space-5); background: var(--sky-surface); display: flex; flex-direction: column; gap: var(--sky-space-4); transform: translateX(var(--sky-motion-drawer)); transition: transform var(--sky-duration-slow) var(--sky-ease-standard); }
:where(.sky-ds)[dir="rtl"] .sky-drawer { --sky-motion-drawer: 100%; }
:where(.sky-ds) .sky-overlay.is-open .sky-drawer { transform: translateX(0); }
/* SPEC §2.12 toast and §2.13 dropdown. */
:where(.sky-ds) .sky-toast [data-toast-icon] { color: var(--sky-tone-ink); }
:where(.sky-ds) .sky-toast .sky-card-header { justify-content: flex-start; }
:where(.sky-ds) .sky-toast .sky-card-header > p { flex: 1; }
:where(.sky-ds) .sky-toast { position: fixed; inset-block-start: var(--sky-space-4); inset-inline-end: var(--sky-space-4); z-index: var(--sky-z-toast); width: 22.5rem; max-width: calc(100% - var(--sky-space-7)); padding: var(--sky-space-4); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-lg); background: var(--sky-surface); box-shadow: var(--sky-shadow-2); opacity: 0; visibility: hidden; transform: translateY(var(--sky-motion-toast)); transition: opacity var(--sky-duration-fast) var(--sky-ease-exit), transform var(--sky-duration-fast) var(--sky-ease-exit); }
:where(.sky-ds) .sky-toast.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-standard); }
:where(.sky-ds) .sky-dropdown-wrap { position: relative; }
:where(.sky-ds) .sky-menu { position: absolute; inset-block-start: var(--sky-offset-below); inset-inline-start: 0; z-index: var(--sky-z-dropdown); width: 13.75rem; max-width: 100%; padding: var(--sky-space-1); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-lg); background: var(--sky-surface); box-shadow: var(--sky-shadow-2); opacity: 0; visibility: hidden; transform: translateY(var(--sky-motion-menu)); transition: opacity var(--sky-duration-fast) var(--sky-ease-standard), transform var(--sky-duration-fast) var(--sky-ease-standard); }
:where(.sky-ds) .sky-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
:where(.sky-ds) .sky-menu-item { display: flex; align-items: center; width: 100%; min-height: 2.25rem; padding-block: var(--sky-space-2); padding-inline: var(--sky-space-3); color: var(--sky-text); background: transparent; border: 0; border-radius: var(--sky-radius-md); text-align: start; cursor: pointer; }
:where(.sky-ds) .sky-menu-item:is(:hover,.is-hover) { background: var(--sky-fill); }
:where(.sky-ds) .sky-menu-item[aria-current="true"] { color: var(--sky-link); background: var(--sky-brand-50); }
:where(.sky-ds) .sky-menu-item:disabled { color: var(--sky-text-3); background: transparent; cursor: not-allowed; }
/* SPEC §2.14 collapse / segmented / tabs / progress / skeleton. */
:where(.sky-ds) .sky-collapse-trigger { width: 100%; justify-content: space-between; height: var(--sky-btn-lg); }
:where(.sky-ds) .sky-collapse-trigger .sky-chevron { transition: transform var(--sky-duration-base) var(--sky-ease-standard); }
:where(.sky-ds) .sky-collapse-trigger[aria-expanded="true"] .sky-chevron { transform: rotate(var(--sky-motion-flip)); }
:where(.sky-ds) .sky-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sky-duration-base) var(--sky-ease-standard); }
:where(.sky-ds) .sky-collapse.is-open { grid-template-rows: 1fr; }
:where(.sky-ds) .sky-collapse > div { min-height: 0; overflow: hidden; }
:where(.sky-ds) .sky-collapse-content { padding: var(--sky-space-4); }
:where(.sky-ds) .sky-segment { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 2.25rem; padding: calc(var(--sky-space-1) / 2); background: var(--sky-fill); border-radius: var(--sky-radius-md); }
:where(.sky-ds) .sky-segment::before { content: ""; position: absolute; inset-block: calc(var(--sky-space-1) / 2); inset-inline-start: calc(var(--sky-space-1) / 2); width: calc((100% - var(--sky-space-1)) / 3); background: var(--sky-surface); border-radius: var(--sky-radius-sm); box-shadow: var(--sky-shadow-1); transform: translateX(calc(var(--sky-segment-index,0) * 100%)); transition: transform var(--sky-duration-base) var(--sky-ease-standard); }
:where(.sky-ds) :is(.sky-segment,.sky-tabs)[data-index="1"] { --sky-segment-index: 1; }
:where(.sky-ds) :is(.sky-segment,.sky-tabs)[data-index="2"] { --sky-segment-index: 2; }
:where(.sky-ds)[dir="rtl"] :is(.sky-segment,.sky-tabs)::before { transform: translateX(calc(var(--sky-segment-index,0) * -100%)); }
:where(.sky-ds) .sky-segment button { position: relative; z-index: var(--sky-z-raised); border: 0; background: transparent; border-radius: var(--sky-radius-sm); color: var(--sky-text); min-height: 2rem; cursor: pointer; }
:where(.sky-ds) .sky-tabs { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block-end: 1px solid var(--sky-border); }
:where(.sky-ds) .sky-tabs::before { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 33.333333%; height: 2px; background: var(--sky-primary); transform: translateX(calc(var(--sky-segment-index,0) * 100%)); transition: transform var(--sky-duration-base) var(--sky-ease-standard); }
:where(.sky-ds) .sky-tabs button { height: var(--sky-btn-md); background: transparent; border: 0; color: var(--sky-text); cursor: pointer; }
:where(.sky-ds) :is(.sky-segment,.sky-tabs) button:is(:hover,.is-hover) { background: var(--sky-fill-hover); }
:where(.sky-ds) :is(.sky-segment,.sky-tabs) button:is(:active,.is-active) { background: var(--sky-fill-active); }
:where(.sky-ds) :is(.sky-segment,.sky-tabs) button:disabled { color: var(--sky-text-3); background: transparent; cursor: not-allowed; }
:where(.sky-ds) .sky-tabs [aria-selected="true"] { color: var(--sky-link); }
:where(.sky-ds) .sky-progress { overflow: hidden; width: 100%; height: var(--sky-progress-height); border-radius: var(--sky-radius-pill); background: var(--sky-fill); }
:where(.sky-ds) .sky-progress > span { display: block; width: 0; height: 100%; background: var(--sky-brand-600); transition: width var(--sky-duration-progress) var(--sky-ease-standard); }
:where(.sky-ds) .sky-progress[data-tone="warning"] > span { background: var(--sky-warning-600); }
:where(.sky-ds) .sky-progress[data-tone="danger"] > span { background: var(--sky-danger-600); }
:where(.sky-ds) .sky-skeleton { position: relative; overflow: hidden; width: 100%; height: 5rem; border-radius: var(--sky-radius-sm); background: var(--sky-fill); opacity: 0; transition: opacity var(--sky-duration-fast) var(--sky-ease-standard); }
:where(.sky-ds) .sky-skeleton.is-visible { opacity: 1; }
:where(.sky-ds) .sky-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,var(--sky-surface),transparent); animation: sky-ds-shimmer var(--sky-duration-shimmer) var(--sky-ease-linear) infinite; }
@keyframes sky-ds-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* SPEC §2.15 copy / QR: no change to production generators or import functions. */
:where(.sky-ds) .sky-copy { display: flex; min-width: 0; gap: var(--sky-space-2); }
:where(.sky-ds) .sky-copy .sky-input { flex: 1; }
:where(.sky-ds) .sky-copy [data-copy] { min-width: calc(var(--sky-space-6) * 4); }
:where(.sky-ds) .sky-copy .is-copied { color: var(--sky-success-700); background: var(--sky-success-50); border-color: var(--sky-success-200); }
:where(.sky-ds) .sky-qr { width: 15.25rem; max-width: 100%; padding: var(--sky-space-3); border-radius: var(--sky-radius-md); background: var(--sky-white); margin-inline: auto; }
:where(.sky-ds) .sky-qr img { display: block; width: 13.75rem; height: 13.75rem; max-width: 100%; object-fit: contain; }
/* SPEC §2.16 isolated shell and navigation previews. */
:where(.sky-ds) .sky-nav-item { display: flex; align-items: center; gap: var(--sky-space-3); min-height: var(--sky-btn-md); padding-inline: var(--sky-space-3); color: var(--sky-text); border-radius: var(--sky-radius-md); font-weight: var(--sky-weight-medium); }
:where(.sky-ds) .sky-nav-item:is(:hover,.is-hover) { background: var(--sky-fill); text-decoration: none; }
:where(.sky-ds) .sky-nav-item[aria-current="page"] { background: var(--sky-brand-50); color: var(--sky-link); }
:where(.sky-ds) .sky-nav-item:is(:active,.is-active) { background: var(--sky-fill-active); }
:where(.sky-ds) .sky-nav-item[aria-current="page"]:is(:active,.is-active) { background: var(--sky-brand-100); }
:where(.sky-ds) .sky-nav-item[aria-disabled="true"] { color: var(--sky-text-3); pointer-events: none; }
:where(.sky-ds) .sky-nav-group { font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); font-weight: var(--sky-weight-medium); color: var(--sky-text-2); margin-block-start: var(--sky-space-5); margin-block-end: var(--sky-space-label); }
:where(.sky-ds) .sky-nav-footer { min-height: 3rem; display: flex; align-items: center; gap: var(--sky-space-2); }
@media (max-width: 767.98px) {
  :where(.sky-ds) .sky-btn-sm::after { content: ""; position: absolute; inset: calc(var(--sky-space-1) * -1); min-width: var(--sky-touch-min); min-height: var(--sky-touch-min); }
  :where(.sky-ds) .sky-stat-value { font-size: var(--sky-font-2xl); line-height: var(--sky-line-2xl); }
  :where(.sky-ds) .sky-desktop-table { display: none; }
  :where(.sky-ds) .sky-mobile-list { display: block; }
  :where(.sky-ds) .sky-pagination { justify-content: center; gap: var(--sky-space-3); }
  :where(.sky-ds) .sky-empty { padding-block: var(--sky-space-6); }
  :where(.sky-ds) .sky-dialog { padding: var(--sky-space-5); }
  :where(.sky-ds) .sky-toast { inset-inline: var(--sky-space-4); margin-inline: auto; }
  :where(.sky-ds) :is(.sky-menu-item,.sky-segment button) { min-height: var(--sky-touch-min); }
}
/* Reduced motion keeps final state and removes movement without changing layout. */
:where(.sky-ds) :is(.sky-overlay,.sky-toast,.sky-menu) { transition-property: opacity, transform, visibility; transition-duration: var(--sky-duration-fast), var(--sky-duration-fast), var(--sky-duration-zero); transition-delay: var(--sky-duration-zero), var(--sky-duration-zero), var(--sky-duration-fast); }
:where(.sky-ds) :is(.sky-overlay,.sky-toast,.sky-menu).is-open { transition-property: opacity, transform; transition-delay: var(--sky-duration-zero); }
:where(.sky-ds) .sky-drawer-overlay:not(.is-open) .sky-drawer { transition-duration: var(--sky-duration-base); }
:where(.sky-ds) .sky-drawer-overlay:not(.is-open) { transition-duration: var(--sky-duration-base), var(--sky-duration-base), var(--sky-duration-zero); transition-delay: var(--sky-duration-zero), var(--sky-duration-zero), var(--sky-duration-base); }
:where(.sky-ds)[data-reduced-motion="true"] :is(.sky-overlay,.sky-dialog,.sky-drawer,.sky-toast,.sky-menu,.sky-card-clickable,.sky-collapse,.sky-chevron,.sky-switch,.sky-overlay.is-open .sky-dialog),
:where(.sky-ds)[data-reduced-motion="true"] :is(.sky-segment,.sky-tabs,.sky-switch)::before { transition-property: opacity, color, background-color, border-color; transition-duration: var(--sky-duration-reduced); transition-delay: var(--sky-duration-zero); }
:where(.sky-ds)[data-reduced-motion="true"] :is(.sky-drawer,.sky-dialog,.sky-toast,.sky-menu,.sky-card-clickable,.sky-overlay.is-open .sky-dialog) { transform: none; }
:where(.sky-ds)[data-reduced-motion="true"] .sky-skeleton::after { display: none; animation: none; }
:where(.sky-ds)[data-reduced-motion="true"] .sky-spinner { animation-duration: var(--sky-spin-slow); }
:where(.sky-ds)[data-reduced-motion="true"] .sky-progress > span { transition-duration: var(--sky-duration-zero); }
@media (prefers-reduced-motion: reduce) {
  :where(.sky-ds) :is(.sky-overlay,.sky-dialog,.sky-drawer,.sky-toast,.sky-menu,.sky-card-clickable,.sky-collapse,.sky-chevron,.sky-switch,.sky-overlay.is-open .sky-dialog),
  :where(.sky-ds) :is(.sky-segment,.sky-tabs,.sky-switch)::before { transition-property: opacity, color, background-color, border-color; transition-duration: var(--sky-duration-reduced); transition-delay: var(--sky-duration-zero); }
  :where(.sky-ds) :is(.sky-drawer,.sky-dialog,.sky-toast,.sky-menu,.sky-card-clickable,.sky-overlay.is-open .sky-dialog) { transform: none; }
  :where(.sky-ds) .sky-skeleton::after { display: none; animation: none; }
  :where(.sky-ds) .sky-spinner { animation-duration: var(--sky-spin-slow); }
  :where(.sky-ds) .sky-progress > span { transition-duration: var(--sky-duration-zero); }
}