/* Public, framework-independent CSS API. Component names use the ds- prefix. */
.ds-button,.ds-input,.ds-select,.ds-textarea{font:inherit}
.ds-button{
  border:1px solid var(--ds-btn-border,color-mix(in srgb,var(--ds-color-primary) 82%,var(--ds-color-text)));
  min-height:var(--ds-size-control);border-radius:var(--ds-btn-radius,var(--ds-radius-md));padding:0 var(--ds-space-4);
  display:inline-flex;gap:var(--ds-space-2);align-items:center;justify-content:center;
  background-color:var(--ds-color-primary);
  background-image:var(--ds-btn-gradient,none);
  color:var(--ds-color-on-primary);font-weight:650;cursor:pointer;white-space:nowrap;
  box-shadow:var(--ds-btn-shadow,none);
  transition:background-color var(--ds-motion-fast),transform var(--ds-motion-fast),border-color var(--ds-motion-fast),box-shadow var(--ds-motion-fast);
}
.ds-button:hover{
  background-color:var(--ds-color-primary-hover);
  box-shadow:var(--ds-btn-hover-shadow,none);transform:var(--ds-btn-hover-transform,none);
}
.ds-button:active{
  transform:var(--ds-btn-active-transform,scale(.985));
  box-shadow:var(--ds-btn-active-shadow,none);
}
.ds-button--secondary{
  background-color:var(--ds-color-surface);color:var(--ds-color-text);border-color:var(--ds-color-border-strong);
  background-image:var(--ds-btn-secondary-gradient,none);
  box-shadow:var(--ds-btn-secondary-shadow,none);
}
.ds-button--secondary:hover{
  background-color:var(--ds-color-surface-alt);
  box-shadow:var(--ds-btn-secondary-hover-shadow,none);
}
.ds-button--ghost{
  background-color:transparent;background-image:none;color:var(--ds-color-text);border-color:transparent;box-shadow:none;
}
.ds-button--ghost:hover{background-color:var(--ds-color-surface-alt);box-shadow:none}
.ds-button--ghost:active{box-shadow:none}
/* Distinct interactive variants in the shared CSS package. */
.ds-button--outline{background-color:transparent;background-image:none;box-shadow:none;color:var(--ds-color-text);border-color:var(--ds-color-border-strong)}
.ds-button--outline:hover{background-color:var(--ds-color-surface-alt);box-shadow:none}
.ds-button--outline:active{box-shadow:inset 0 1px 2px rgba(12,18,36,.08)}
.ds-button--link{min-height:var(--ds-size-control);padding-inline:6px;background-color:transparent;background-image:none;box-shadow:none;border-color:transparent;color:var(--ds-color-primary);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.ds-button--link:hover{background-color:transparent;box-shadow:none;text-decoration-color:currentColor}
.ds-button--link:active{box-shadow:none}
.ds-button[aria-busy="true"]{cursor:progress}
.ds-button[aria-busy="true"]::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .75s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds-button--danger{
  background-color:var(--ds-color-danger);
  border-color:color-mix(in srgb,var(--ds-color-danger) 83%,var(--ds-color-text));
}
.ds-button--danger:hover{filter:brightness(.94);background-color:var(--ds-color-danger)}
.ds-button:disabled{background-image:none;box-shadow:none;transform:none}
.ds-button--sm{min-height:34px;padding:0 var(--ds-space-3);font-size:.85rem}
.ds-button--icon{width:var(--ds-size-control);padding:0}
.ds-button:disabled,.ds-input:disabled{cursor:not-allowed;opacity:.48}
.ds-button:focus-visible,.ds-input:focus-visible,.ds-select:focus-visible,.ds-textarea:focus-visible,.ds-tab:focus-visible{outline:3px solid var(--ds-color-focus);outline-offset:3px}
.ds-card{border:1px solid var(--ds-color-border);background:var(--ds-color-surface);border-radius:var(--ds-radius-lg);padding:var(--ds-space-5)}
.ds-field{display:grid;gap:var(--ds-space-2)}
/* Shared, semantic form/empty-state patterns; caller sets aria-describedby
   on the invalid input and supplies a concrete recovery instruction. */
.ds-field-error{color:var(--ds-color-danger);font-size:.875rem;font-weight:550;line-height:1.5}
.ds-field-help{color:var(--ds-color-text-muted);font-size:.875rem;line-height:1.5}
.ds-empty-state{display:grid;gap:var(--ds-space-3);justify-items:start;border:1px dashed var(--ds-color-border-strong);border-radius:var(--ds-radius-lg);padding:var(--ds-space-5);background:var(--ds-color-surface)}
.ds-empty-state p{margin:0;color:var(--ds-color-text-muted)}
.ds-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}

.ds-label{font-size:.875rem;font-weight:600}
.ds-input,.ds-select,.ds-textarea{width:100%;background:var(--ds-color-surface);border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-md);padding:var(--ds-space-2) var(--ds-space-3);color:var(--ds-color-text);min-height:var(--ds-size-control)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-color-text-muted);opacity:.75}
.ds-textarea{min-height:94px;resize:vertical}
.ds-input[aria-invalid="true"]{border-color:var(--ds-color-danger)}
.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:var(--ds-color-surface-alt);border:1px solid var(--ds-color-border);font-size:.78rem;font-weight:600}
.ds-badge--success{color:var(--ds-color-success)}
.ds-alert{padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-color-border);background:var(--ds-color-surface-alt);border-radius:var(--ds-radius-md);display:flex;gap:var(--ds-space-3)}
.ds-tabs{display:flex;gap:var(--ds-space-1);max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-bottom:1px solid var(--ds-color-border)}
.ds-tab{flex:0 0 auto;min-height:44px;border:0;background:transparent;color:var(--ds-color-text-muted);padding:var(--ds-space-3) var(--ds-space-4);border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-weight:600}
.ds-tab[aria-selected="true"]{color:var(--ds-color-primary);border-bottom-color:var(--ds-color-primary)}
.ds-skeleton{height:14px;border-radius:6px;background:var(--ds-color-surface-alt);animation:ds-pulse 1.6s ease-in-out infinite}
.ds-progress{height:8px;overflow:hidden;border-radius:99px;background:var(--ds-color-surface-alt)}
.ds-progress span{display:block;height:100%;background:var(--ds-color-primary);border-radius:inherit}
/* Native dialog with entry/exit fades. Discrete display and overlay
   transitions preserve visibility during close without JavaScript delays. */
.ds-dialog{
  width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  padding:0;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-xl);
  background:var(--ds-color-surface);color:var(--ds-color-text);
  box-shadow:0 24px 70px #0003;
  opacity:0;transform:translateY(6px) scale(.985);
  transition:opacity 180ms ease,
    transform 200ms cubic-bezier(.2,.75,.3,1),
    display 200ms allow-discrete,overlay 200ms allow-discrete;
}
.ds-dialog[open]{opacity:1;transform:translateY(0) scale(1)}
@starting-style{
  .ds-dialog[open]{opacity:0;transform:translateY(6px) scale(.985)}
}
.ds-dialog::backdrop{
  background-color:transparent;backdrop-filter:blur(3px);
  transition:background-color 200ms ease,
    display 200ms allow-discrete,overlay 200ms allow-discrete;
}
.ds-dialog[open]::backdrop{background-color:#050b1b99}
@starting-style{
  .ds-dialog[open]::backdrop{background-color:transparent}
}
.ds-dialog-inner{padding:var(--ds-space-6)}
.ds-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--ds-space-2);margin-top:var(--ds-space-6)}
.ds-dialog-actions>.ds-button{max-width:100%;white-space:normal}
[data-density="compact"]{--ds-size-control:var(--ds-size-control-compact)}
[data-density="compact"] .ds-card{padding:var(--ds-space-3)}
[data-density="compact"] .ds-button{min-height:var(--ds-size-control-compact)}
/* Dense desktop layouts are opt-in. On touch devices, small and compact
   controls still expose a 44px minimum target without changing their label. */
@media (pointer:coarse){
  .ds-button,.ds-button--sm,[data-density="compact"] .ds-button{min-height:44px}
  .ds-button--icon{min-width:44px}
}
@media (max-width:400px){
  .ds-dialog-actions>.ds-button{flex:1 1 120px}
}
@keyframes ds-pulse{50%{opacity:.46}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ds-dialog,.ds-dialog::backdrop{transition:none!important}
  .ds-dialog{transform:none}
}