/* Shared reusable components. Load tokens.css first. All styles stay inside .yds-root. */
.yds-root { background: var(--yds-bg); color: var(--yds-fg); font: var(--yds-weight-regular) var(--yds-text-md)/var(--yds-leading-normal) var(--yds-font); -webkit-font-smoothing: antialiased; }
.yds-root *, .yds-root *::before, .yds-root *::after { box-sizing: border-box; }
.yds-root [hidden] { display: none !important; }
.yds-root :where(h1,h2,h3,h4,p,dl,dd,figure) { margin: 0; }
.yds-root :where(button,input,select,textarea) { font: inherit; }
.yds-root :where(button,input,select,textarea) { color: inherit; }
.yds-root :where(button) { cursor: pointer; }
.yds-root :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: var(--yds-focus-width) solid var(--yds-focus); outline-offset: var(--yds-focus-offset); }
.yds-root :where(button,input,select,textarea):disabled, .yds-root [aria-disabled="true"] { cursor: not-allowed; }
.yds-root :where(button,input,select,textarea):disabled { opacity: .55; }
.yds-root :where(a) { color: var(--yds-primary); text-underline-offset: 3px; }
.yds-root :where(svg) { flex-shrink: 0; }
.yds-root :where(img) { max-width: 100%; }
.yds-root ::selection { background: var(--yds-primary-border); color: var(--yds-fg); }
.yds-root .yds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.yds-root .yds-muted { color: var(--yds-muted); }
.yds-root .yds-small { font-size: var(--yds-text-sm); }
.yds-root .yds-caption { font-size: var(--yds-text-xs); }
.yds-root .yds-num { font-variant-numeric: tabular-nums; }
.yds-root .yds-mono { font-family: var(--yds-font-mono); }
.yds-root .yds-title { font-size: var(--yds-text-2xl); line-height: var(--yds-leading-tight); font-weight: var(--yds-weight-semibold); letter-spacing: -.6px; }
.yds-root .yds-subtitle { font-size: var(--yds-text-lg); font-weight: var(--yds-weight-semibold); letter-spacing: -.2px; }
.yds-root .yds-stack { display: grid; gap: var(--yds-space-4); }
.yds-root .yds-inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--yds-space-2); }
.yds-root .yds-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--yds-space-3); }
.yds-root .yds-spread { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--yds-space-3); }
.yds-root .yds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yds-space-4); }
.yds-root .yds-text-sm { font-size: var(--yds-text-sm); }
.yds-root .yds-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.yds-root .yds-icon { width: 16px; height: 16px; flex: none; }

/* Actions */
.yds-root .yds-btn, .yds-root .yds-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px;
  min-height: var(--yds-control-height); padding: 6px 12px; border: 1px solid var(--yds-border);
  border-radius: var(--yds-radius-control); background: var(--yds-panel); color: var(--yds-fg);
  font-size: var(--yds-text-sm); font-weight: var(--yds-weight-medium); line-height: 1.4; text-decoration: none;
  white-space: nowrap; box-shadow: var(--yds-shadow-sm); vertical-align: middle;
  transition: background var(--yds-motion-fast) var(--yds-ease), border-color var(--yds-motion-fast) var(--yds-ease);
}
.yds-root .yds-btn:hover, .yds-root .yds-icon-btn:hover { background: var(--yds-surface); border-color: var(--yds-border-strong); }
.yds-root .yds-btn:active, .yds-root .yds-icon-btn:active { background: var(--yds-surface-hover); }
.yds-root .yds-btn[data-variant="primary"] { color: var(--yds-on-primary); background: var(--yds-primary); border-color: var(--yds-primary); }
.yds-root .yds-btn[data-variant="primary"]:hover { background: var(--yds-primary-hover); border-color: var(--yds-primary-hover); }
.yds-root .yds-btn[data-variant="soft"] { color: var(--yds-primary); background: var(--yds-primary-soft); border-color: var(--yds-primary-border); box-shadow: none; }
.yds-root .yds-btn[data-variant="soft"]:hover { border-color: var(--yds-primary); }
.yds-root .yds-btn[data-variant="ghost"], .yds-root .yds-icon-btn[data-variant="ghost"] { background: transparent; border-color: transparent; box-shadow: none; }
.yds-root .yds-btn[data-variant="ghost"]:hover, .yds-root .yds-icon-btn[data-variant="ghost"]:hover { background: var(--yds-surface); }
.yds-root .yds-btn[data-variant="danger"] { color: var(--yds-on-danger); background: var(--yds-danger); border-color: var(--yds-danger); }
.yds-root .yds-btn[data-variant="danger"]:hover { background: var(--yds-danger-hover); border-color: var(--yds-danger-hover); }
.yds-root .yds-btn[data-size="sm"], .yds-root .yds-icon-btn[data-size="sm"] { min-height: var(--yds-control-height-sm); padding: 4px 8px; font-size: var(--yds-text-sm); }
.yds-root .yds-btn[data-size="lg"], .yds-root .yds-icon-btn[data-size="lg"] { min-height: var(--yds-control-height-lg); padding: 9px 16px; font-size: var(--yds-text-md); }
.yds-root .yds-icon-btn { width: var(--yds-control-height); padding: 6px; }
.yds-root .yds-icon-btn[data-size="sm"] { width: var(--yds-control-height-sm); padding: 4px; }
.yds-root .yds-icon-btn[data-size="lg"] { width: var(--yds-control-height-lg); padding: 8px; }
.yds-root .yds-btn svg, .yds-root .yds-icon-btn svg { width: 16px; height: 16px; }
.yds-root .yds-btn[aria-disabled="true"], .yds-root .yds-icon-btn[aria-disabled="true"] { opacity: .55; }
.yds-root .yds-btn:disabled:hover, .yds-root .yds-icon-btn:disabled:hover, .yds-root .yds-btn[aria-disabled="true"]:hover, .yds-root .yds-icon-btn[aria-disabled="true"]:hover { filter: none; }
.yds-root .yds-btn[data-loading="true"] { cursor: progress; }
.yds-root .yds-btn[data-loading="true"]::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: yds-spin 700ms linear infinite; }

/* Fields: native form elements preserve browser semantics. */
.yds-root .yds-field { display: grid; gap: 6px; min-width: 0; }
.yds-root .yds-label { display: block; font-size: var(--yds-text-sm); font-weight: var(--yds-weight-medium); }
.yds-root .yds-input, .yds-root .yds-select, .yds-root .yds-textarea {
  display: block; width: 100%; min-width: 0; min-height: var(--yds-control-height); padding: 7px 10px;
  border: 1px solid var(--yds-border-strong); border-radius: var(--yds-radius-control); background: var(--yds-panel);
  color: var(--yds-fg); font-size: var(--yds-text-sm); line-height: 1.5; transition: border-color var(--yds-motion-fast) var(--yds-ease);
}
.yds-root .yds-input::placeholder, .yds-root .yds-textarea::placeholder { color: var(--yds-muted); opacity: 1; }
.yds-root .yds-input:hover, .yds-root .yds-select:hover, .yds-root .yds-textarea:hover { border-color: var(--yds-muted); }
.yds-root .yds-input[readonly], .yds-root .yds-textarea[readonly] { background: var(--yds-surface); }
.yds-root .yds-select { padding-right: 28px; }
.yds-root .yds-select option { background: var(--yds-panel); color: var(--yds-fg); }
.yds-root .yds-textarea { min-height: 92px; resize: vertical; }
.yds-root .yds-hint, .yds-root .yds-error { font-size: var(--yds-text-sm); line-height: var(--yds-leading-normal); }
.yds-root .yds-hint { color: var(--yds-muted); }
.yds-root .yds-error { color: var(--yds-danger); }
.yds-root :is(.yds-input,.yds-select,.yds-textarea,.yds-control-row)[aria-invalid="true"] { border-color: var(--yds-danger); }
.yds-root .yds-control-row { display: flex; align-items: center; gap: var(--yds-space-2); min-height: var(--yds-control-height); min-width: 0; padding: 0 10px; background: var(--yds-panel); border: 1px solid var(--yds-border-strong); border-radius: var(--yds-radius-control); color: var(--yds-muted); }
.yds-root .yds-control-row:focus-within { outline: var(--yds-focus-width) solid var(--yds-focus); outline-offset: var(--yds-focus-offset); }
.yds-root .yds-control-row > .yds-input { flex: 1; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; min-height: calc(var(--yds-control-height) - 2px); outline: none; background: transparent; }
.yds-root .yds-control-row > svg { width: 16px; height: 16px; }
.yds-root .yds-control-row > .yds-kbd { margin-left: auto; }
.yds-root .yds-number-unit { display: flex; align-items: center; gap: var(--yds-space-2); }
.yds-root .yds-number-unit .yds-input { flex: 1; font-variant-numeric: tabular-nums; }
.yds-root .yds-number-unit > span { color: var(--yds-muted); font-size: var(--yds-text-sm); }
.yds-root .yds-file { width: 100%; font-size: var(--yds-text-sm); color: var(--yds-muted); }
.yds-root .yds-file::file-selector-button { min-height: var(--yds-control-height); padding: 6px 12px; margin-right: var(--yds-space-3); border: 1px solid var(--yds-border); border-radius: var(--yds-radius-control); background: var(--yds-panel); color: var(--yds-fg); font: inherit; cursor: pointer; }
.yds-root .yds-file::file-selector-button:hover { background: var(--yds-surface); }
.yds-root .yds-check { accent-color: var(--yds-primary); }
.yds-root input.yds-check { width: 16px; height: 16px; margin: 0; flex: none; vertical-align: middle; }
.yds-root label.yds-check { display: inline-flex; align-items: flex-start; gap: var(--yds-space-2); font-size: var(--yds-text-sm); cursor: pointer; }
.yds-root label.yds-check > input { accent-color: var(--yds-primary); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.yds-root label.yds-check:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.yds-root .yds-switch { display: inline-flex; align-items: center; gap: var(--yds-space-2); font-size: var(--yds-text-sm); cursor: pointer; }
.yds-root .yds-switch input, .yds-root input.yds-switch { appearance: none; position: relative; width: 34px; height: 20px; padding: 0; margin: 0; border: 1px solid var(--yds-border-strong); border-radius: var(--yds-radius-full); background: var(--yds-surface-hover); cursor: pointer; flex: none; transition: background var(--yds-motion-fast); }
.yds-root .yds-switch input::before, .yds-root input.yds-switch::before { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: var(--yds-muted); transition: transform var(--yds-motion-fast); }
.yds-root .yds-switch input:checked, .yds-root input.yds-switch:checked { background: var(--yds-primary); border-color: var(--yds-primary); }
.yds-root .yds-switch input:checked::before, .yds-root input.yds-switch:checked::before { transform: translateX(14px); background: var(--yds-on-primary); }
.yds-root .yds-switch:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.yds-root .yds-slider { display: block; width: 100%; min-width: 0; min-height: 28px; margin: 0; accent-color: var(--yds-primary); cursor: pointer; }
.yds-root .yds-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--yds-border-strong); border-radius: var(--yds-radius-control); overflow: clip; background: var(--yds-panel); }
.yds-root .yds-stepper .yds-input { width: 64px; border: 0; border-radius: 0; text-align: center; appearance: textfield; }
.yds-root .yds-stepper .yds-input::-webkit-inner-spin-button, .yds-root .yds-stepper .yds-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.yds-root .yds-stepper .yds-icon-btn { border: 0; border-radius: 0; box-shadow: none; }
.yds-root .yds-stepper:focus-within { outline: var(--yds-focus-width) solid var(--yds-focus); outline-offset: var(--yds-focus-offset); }
.yds-root .yds-stepper :focus-visible { outline-offset: -3px; }
.yds-root [data-yds-combobox] { position: relative; min-width: 0; }
.yds-root [data-yds-combobox] [role="listbox"] { position: absolute; z-index: var(--yds-z-popover); top: calc(100% + 6px); left: 0; right: 0; max-height: 240px; overflow-y: auto; margin: 0; padding: var(--yds-space-1); list-style: none; border: 1px solid var(--yds-border); border-radius: var(--yds-radius-control); background: var(--yds-panel); box-shadow: var(--yds-shadow-md); }
.yds-root [data-yds-combobox] [role="option"] { display: block; width: 100%; min-height: var(--yds-control-height-sm); padding: 7px 9px; border: 1px solid transparent; border-radius: var(--yds-radius-sm); background: transparent; color: var(--yds-fg); text-align: left; font-size: var(--yds-text-sm); cursor: pointer; }
.yds-root [data-yds-combobox] [role="option"][aria-selected="true"] { background: var(--yds-primary-soft); color: var(--yds-primary); }
.yds-root [data-yds-combobox] [role="option"]:hover, .yds-root [data-yds-combobox] [role="option"][data-active="true"] { border-color: var(--yds-border-strong); background: var(--yds-surface); color: var(--yds-fg); }
.yds-root [data-yds-combobox] [role="option"][aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.yds-root [data-yds-combobox] [data-yds-empty] { padding: var(--yds-space-2); color: var(--yds-muted); font-size: var(--yds-text-sm); }

/* Navigation and mutually exclusive choices */
.yds-root .yds-segmented { display: inline-flex; align-items: stretch; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--yds-surface); border: 1px solid var(--yds-border); border-radius: 8px; }
.yds-root .yds-segmented > button, .yds-root .yds-segmented > .yds-btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: var(--yds-control-height-sm); padding: 4px 11px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--yds-muted); font-size: var(--yds-text-sm); font-weight: var(--yds-weight-medium); box-shadow: none; }
.yds-root .yds-segmented > button:hover { color: var(--yds-fg); background: var(--yds-surface-hover); }
.yds-root .yds-segmented > [aria-pressed="true"], .yds-root .yds-segmented > [aria-selected="true"] { color: var(--yds-fg); background: var(--yds-panel); border-color: var(--yds-border); box-shadow: var(--yds-shadow-sm); }
.yds-root .yds-tablist { display: flex; gap: var(--yds-space-4); border-bottom: 1px solid var(--yds-border); overflow-x: auto; }
.yds-root .yds-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: var(--yds-control-height); padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--yds-muted); font-size: var(--yds-text-sm); font-weight: var(--yds-weight-medium); text-decoration: none; }
.yds-root .yds-tab:hover { color: var(--yds-fg); }
.yds-root .yds-tab[aria-selected="true"], .yds-root .yds-tab[aria-current="page"] { color: var(--yds-primary); border-bottom-color: var(--yds-primary); }
.yds-root .yds-tabs > [role="tabpanel"] { padding-top: var(--yds-space-4); }
.yds-root .yds-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 0; margin: 0; list-style: none; color: var(--yds-muted); font-size: var(--yds-text-sm); }
.yds-root .yds-breadcrumb li { display: inline-flex; gap: 7px; align-items: center; }
.yds-root .yds-breadcrumb li + li::before { content: "/"; color: var(--yds-muted); }
.yds-root .yds-breadcrumb a { color: var(--yds-muted); text-decoration: none; }
.yds-root .yds-breadcrumb a:hover { color: var(--yds-fg); text-decoration: underline; }
.yds-root .yds-breadcrumb [aria-current="page"] { color: var(--yds-fg); }
.yds-root .yds-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: var(--yds-space-1); }
.yds-root .yds-pagination [aria-current="page"] { color: var(--yds-primary); border-color: var(--yds-primary-border); background: var(--yds-primary-soft); }
.yds-root .yds-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--yds-space-3); flex-wrap: wrap; }

/* Semantic color is assigned only to status components, never an arbitrary parent. */
.yds-root :is(.yds-badge,.yds-alert,.yds-toast) { --yds-tone: var(--yds-muted); --yds-tone-soft: var(--yds-surface); --yds-tone-border: var(--yds-border); }
.yds-root :is(.yds-badge,.yds-alert,.yds-toast)[data-tone="primary"] { --yds-tone: var(--yds-primary); --yds-tone-soft: var(--yds-primary-soft); --yds-tone-border: var(--yds-primary-border); }
.yds-root :is(.yds-badge,.yds-alert,.yds-toast)[data-tone="success"] { --yds-tone: var(--yds-success); --yds-tone-soft: var(--yds-success-soft); --yds-tone-border: var(--yds-success-border); }
.yds-root :is(.yds-badge,.yds-alert,.yds-toast)[data-tone="warning"] { --yds-tone: var(--yds-warning); --yds-tone-soft: var(--yds-warning-soft); --yds-tone-border: var(--yds-warning-border); }
.yds-root :is(.yds-badge,.yds-alert,.yds-toast)[data-tone="danger"] { --yds-tone: var(--yds-danger); --yds-tone-soft: var(--yds-danger-soft); --yds-tone-border: var(--yds-danger-border); }
.yds-root :is(.yds-badge,.yds-alert,.yds-toast)[data-tone="info"] { --yds-tone: var(--yds-info); --yds-tone-soft: var(--yds-info-soft); --yds-tone-border: var(--yds-info-border); }
.yds-root .yds-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 7px; border: 1px solid var(--yds-tone-border); border-radius: var(--yds-radius-sm); color: var(--yds-tone); background: var(--yds-tone-soft); font-size: var(--yds-text-xs); line-height: 1.5; font-weight: var(--yds-weight-medium); white-space: nowrap; }
.yds-root .yds-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.yds-root .yds-alert, .yds-root .yds-toast { display: flex; align-items: flex-start; gap: var(--yds-space-3); padding: 12px 14px; border: 1px solid var(--yds-tone-border); border-radius: var(--yds-radius-panel); background: var(--yds-tone-soft); color: var(--yds-tone); font-size: var(--yds-text-sm); }
.yds-root .yds-alert strong, .yds-root .yds-toast strong { font-weight: var(--yds-weight-semibold); }
.yds-root .yds-alert p, .yds-root .yds-toast p { margin-top: 3px; }
.yds-root .yds-alert > .yds-icon-btn, .yds-root .yds-toast > .yds-icon-btn { margin-left: auto; color: inherit; }
.yds-root .yds-toast { width: min(380px, 100%); box-shadow: var(--yds-shadow-md); }
.yds-root .yds-toast-region, .yds-root .yds-toast-stack { position: fixed; z-index: var(--yds-z-toast); right: 20px; bottom: 20px; width: min(380px, calc(100vw - 32px)); display: grid; gap: var(--yds-space-2); pointer-events: none; }
.yds-root .yds-toast-region > *, .yds-root .yds-toast-stack > * { pointer-events: auto; }
.yds-root .yds-toast-message { flex: 1; min-width: 0; align-self: center; overflow-wrap: anywhere; }
.yds-root .yds-toast .yds-toast-action, .yds-root .yds-toast .yds-toast-close { flex: none; color: inherit; }
.yds-root .yds-toast .yds-toast-close { margin-left: auto; font-size: var(--yds-text-lg); }

/* Containers, collections and tables */
.yds-root .yds-card { min-width: 0; background: var(--yds-panel); border: 1px solid var(--yds-border); border-radius: var(--yds-radius-panel); box-shadow: var(--yds-shadow-sm); }
.yds-root .yds-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--yds-space-3); padding: 14px var(--yds-panel-pad); border-bottom: 1px solid var(--yds-border); border-radius: var(--yds-radius-panel) var(--yds-radius-panel) 0 0; }
.yds-root .yds-card-header h3 { font-size: var(--yds-text-md); font-weight: var(--yds-weight-semibold); }
.yds-root .yds-card-body { padding: var(--yds-panel-pad); }
.yds-root .yds-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--yds-space-3); flex-wrap: wrap; padding: 12px var(--yds-panel-pad); border-top: 1px solid var(--yds-border); }
.yds-root .yds-divider { border: 0; border-top: 1px solid var(--yds-border); margin: var(--yds-space-4) 0; }
.yds-root .yds-list { display: grid; gap: var(--yds-space-1); padding: var(--yds-space-2); margin: 0; list-style: none; }
.yds-root .yds-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--yds-space-3); width: 100%; min-width: 0; padding: var(--yds-row-pad); border: 1px solid transparent; border-radius: var(--yds-radius-control); background: transparent; color: var(--yds-fg); text-align: left; font-size: var(--yds-text-sm); }
.yds-root :is(button,a).yds-list-row:hover { background: var(--yds-surface); }
.yds-root .yds-list-row[aria-pressed="true"], .yds-root .yds-list-row[aria-selected="true"], .yds-root .yds-list-row[aria-current="true"] { background: var(--yds-primary-soft); border-color: var(--yds-primary-border); }
.yds-root .yds-list-row strong { font-weight: var(--yds-weight-medium); }
.yds-root .yds-list-row small { display: block; margin-top: 2px; color: var(--yds-muted); font-size: var(--yds-text-xs); }
.yds-root .yds-list-row[aria-disabled="true"] { opacity: .55; }
.yds-root .yds-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--yds-border); border-radius: var(--yds-radius-panel); background: var(--yds-panel); }
.yds-root .yds-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--yds-text-sm); }
.yds-root .yds-table caption { text-align: left; padding: 12px 16px; color: var(--yds-muted); }
.yds-root .yds-table th, .yds-root .yds-table td { padding: var(--yds-row-pad) 14px; border-bottom: 1px solid var(--yds-border); vertical-align: middle; }
.yds-root .yds-table th { background: var(--yds-surface); color: var(--yds-muted); font-size: var(--yds-text-xs); font-weight: var(--yds-weight-medium); white-space: nowrap; }
.yds-root .yds-table tbody tr:last-child td { border-bottom: 0; }
.yds-root .yds-table tbody tr:hover { background: var(--yds-surface); }
.yds-root .yds-table tr[aria-selected="true"] { background: var(--yds-primary-soft); }
.yds-root .yds-table [data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.yds-root .yds-table th button { display: inline-flex; gap: 6px; align-items: center; padding: 0; border: 0; color: inherit; background: none; font: inherit; }
.yds-root .yds-empty { display: grid; justify-items: center; gap: var(--yds-space-2); padding: 32px 20px; color: var(--yds-muted); text-align: center; font-size: var(--yds-text-sm); }
.yds-root .yds-empty strong { color: var(--yds-fg); font-weight: var(--yds-weight-medium); }
.yds-root .yds-empty > svg { width: 28px; height: 28px; margin-bottom: var(--yds-space-1); }
.yds-root .yds-stat { display: grid; gap: var(--yds-space-1); }
.yds-root .yds-stat-label { color: var(--yds-muted); font-size: var(--yds-text-sm); }
.yds-root .yds-stat-value { font-size: var(--yds-text-display); line-height: var(--yds-leading-tight); font-weight: var(--yds-weight-medium); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.yds-root .yds-stat-value small { font-size: var(--yds-text-sm); font-weight: var(--yds-weight-regular); color: var(--yds-muted); letter-spacing: 0; }

/* Progress and measurement: native meter is for scalar values, progress for task completion. */
.yds-root .yds-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid var(--yds-border-strong); border-right-color: var(--yds-primary); border-radius: 50%; animation: yds-spin 700ms linear infinite; vertical-align: middle; }
.yds-root .yds-skeleton { display: block; min-height: 14px; border-radius: var(--yds-radius-sm); background: var(--yds-surface-hover); animation: yds-pulse 1.7s ease-in-out infinite; }
.yds-root .yds-progress { display: block; width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--yds-radius-full); overflow: hidden; background: var(--yds-surface-hover); accent-color: var(--yds-primary); }
.yds-root .yds-progress::-webkit-progress-bar { background: var(--yds-surface-hover); border-radius: var(--yds-radius-full); }
.yds-root .yds-progress::-webkit-progress-value { background: var(--yds-primary); border-radius: var(--yds-radius-full); }
.yds-root .yds-progress::-moz-progress-bar { background: var(--yds-primary); border-radius: var(--yds-radius-full); }
.yds-root progress.yds-progress:not([value]) { background: linear-gradient(90deg, var(--yds-surface-hover) 0 30%, var(--yds-primary) 50%, var(--yds-surface-hover) 70% 100%); background-size: 200% 100%; animation: yds-indeterminate 1.5s linear infinite; }
.yds-root progress.yds-progress:not([value])::-webkit-progress-bar { background: linear-gradient(90deg, var(--yds-surface-hover) 0 30%, var(--yds-primary) 50%, var(--yds-surface-hover) 70% 100%); background-size: 200% 100%; animation: yds-indeterminate 1.5s linear infinite; }
.yds-root .yds-progress > span { display: block; height: 100%; background: var(--yds-primary); border-radius: inherit; }
.yds-root .yds-meter { display: block; width: 100%; height: 12px; border: 0; background: var(--yds-surface-hover); border-radius: var(--yds-radius-sm); overflow: hidden; }
.yds-root meter.yds-meter { appearance: none; }
.yds-root .yds-meter::-webkit-meter-bar { background: var(--yds-surface-hover); border: 0; border-radius: var(--yds-radius-sm); }
.yds-root .yds-meter::-webkit-meter-optimum-value { background: var(--yds-success); }
.yds-root .yds-meter::-webkit-meter-suboptimum-value { background: var(--yds-warning); }
.yds-root .yds-meter::-webkit-meter-even-less-good-value { background: var(--yds-danger); }
.yds-root .yds-meter::-moz-meter-bar { background: var(--yds-primary); }
.yds-root .yds-meter > span { display: block; height: 100%; background: var(--yds-primary); border-radius: inherit; }
.yds-root .yds-meter[data-tone="warning"] > span { background: var(--yds-warning); }
.yds-root .yds-meter[data-tone="danger"] > span { background: var(--yds-danger); }

/* Overlays: native dialog provides modal focus isolation and top-layer rendering. */
.yds-root .yds-dialog, .yds-root .yds-drawer { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; overflow-y: auto; border: 1px solid var(--yds-border); border-radius: var(--yds-radius-lg); background: var(--yds-panel); color: var(--yds-fg); box-shadow: var(--yds-shadow-lg); font: inherit; }
.yds-root .yds-dialog::backdrop, .yds-root .yds-drawer::backdrop { background: var(--yds-overlay); }
.yds-root .yds-dialog-header, .yds-root .yds-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--yds-space-3); padding: var(--yds-panel-pad); border-bottom: 1px solid var(--yds-border); }
.yds-root .yds-dialog-title { font-size: var(--yds-text-lg); font-weight: var(--yds-weight-semibold); line-height: var(--yds-leading-tight); }
.yds-root .yds-dialog-body, .yds-root .yds-drawer-body { padding: var(--yds-panel-pad); }
.yds-root .yds-dialog-footer, .yds-root .yds-drawer-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--yds-space-2); padding: var(--yds-panel-pad); border-top: 1px solid var(--yds-border); }
.yds-root .yds-drawer { position: fixed; inset: 0 0 0 auto; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: var(--yds-radius-lg) 0 0 var(--yds-radius-lg); }
.yds-root .yds-popover, .yds-root .yds-menu { z-index: var(--yds-z-popover); width: min(320px, calc(100vw - 32px)); padding: var(--yds-space-3); border: 1px solid var(--yds-border); border-radius: var(--yds-radius-panel); background: var(--yds-panel); color: var(--yds-fg); box-shadow: var(--yds-shadow-md); }
.yds-root [popover].yds-popover, .yds-root [popover].yds-menu { margin: 0; }
.yds-root .yds-command [role="listbox"] { position: static; margin-top: var(--yds-space-2); box-shadow: none; }
.yds-root .yds-menu { width: min(240px, calc(100vw - 32px)); padding: var(--yds-space-1); list-style: none; }
.yds-root .yds-menu-item, .yds-root .yds-menu > button, .yds-root .yds-menu > a { display: flex; align-items: center; gap: var(--yds-space-2); width: 100%; padding: 8px 10px; min-height: var(--yds-control-height-sm); border: 0; border-radius: var(--yds-radius-sm); color: var(--yds-fg); background: transparent; text-align: left; text-decoration: none; font-size: var(--yds-text-sm); }
.yds-root .yds-menu-item:hover, .yds-root .yds-menu > button:hover, .yds-root .yds-menu > a:hover { background: var(--yds-surface); }
.yds-root .yds-menu-item[data-tone="danger"] { color: var(--yds-danger); }
.yds-root .yds-menu-item[aria-disabled="true"] { opacity: .55; }
.yds-root .yds-menu .yds-kbd { margin-left: auto; }
.yds-root .yds-tooltip { position: fixed; z-index: var(--yds-z-popover); max-width: min(280px, calc(100vw - 24px)); padding: 5px 8px; border: 1px solid var(--yds-border); border-radius: var(--yds-radius-sm); color: var(--yds-fg); background: var(--yds-panel); box-shadow: var(--yds-shadow-md); font-size: var(--yds-text-xs); line-height: 1.5; pointer-events: auto; }

/* Disclosure, identity and keyboard hints */
.yds-root .yds-accordion { border: 1px solid var(--yds-border); border-radius: var(--yds-radius-panel); background: var(--yds-panel); }
.yds-root .yds-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--yds-space-3); padding: 14px 16px; font-size: var(--yds-text-sm); font-weight: var(--yds-weight-medium); list-style: none; cursor: pointer; border-radius: var(--yds-radius-panel); }
.yds-root .yds-accordion > summary::-webkit-details-marker { display: none; }
.yds-root .yds-accordion > summary::after { content: "+"; color: var(--yds-muted); font-size: var(--yds-text-lg); font-weight: var(--yds-weight-regular); }
.yds-root .yds-accordion[open] > summary::after { content: "−"; }
.yds-root .yds-accordion[open] > summary { border-bottom: 1px solid var(--yds-border); border-radius: var(--yds-radius-panel) var(--yds-radius-panel) 0 0; }
.yds-root .yds-accordion-body { padding: 14px 16px; color: var(--yds-muted); font-size: var(--yds-text-sm); }
.yds-root .yds-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--yds-primary-border); border-radius: var(--yds-radius-full); background: var(--yds-primary-soft); color: var(--yds-primary); object-fit: cover; font-size: var(--yds-text-xs); font-weight: var(--yds-weight-semibold); }
.yds-root .yds-avatar[data-size="sm"] { width: 24px; height: 24px; }
.yds-root .yds-avatar[data-size="lg"] { width: 44px; height: 44px; font-size: var(--yds-text-md); }
.yds-root .yds-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; padding: 1px 5px; border: 1px solid var(--yds-border); border-bottom-width: 2px; border-radius: var(--yds-radius-sm); background: var(--yds-surface); color: var(--yds-muted); font: var(--yds-text-xs)/1.4 var(--yds-font-mono); white-space: nowrap; }

@keyframes yds-spin { to { transform: rotate(360deg); } }
@keyframes yds-pulse { 50% { opacity: .45; } }
@keyframes yds-indeterminate { to { background-position: -200% 0; } }
@media (pointer: coarse) {
  .yds-root .yds-btn, .yds-root .yds-icon-btn, .yds-root .yds-btn[data-size], .yds-root .yds-icon-btn[data-size],
  .yds-root .yds-tab, .yds-root .yds-segmented > button, .yds-root .yds-menu-item,
  .yds-root .yds-menu > button, .yds-root .yds-menu > a, .yds-root .yds-input, .yds-root .yds-select, .yds-root .yds-control-row,
  .yds-root [data-yds-combobox] [role="option"] { min-height: 44px; }
  .yds-root .yds-icon-btn, .yds-root .yds-icon-btn[data-size] { min-width: 44px; }
  .yds-root .yds-input, .yds-root .yds-select, .yds-root .yds-textarea { font-size: 16px; }
  .yds-root .yds-slider { min-height: 44px; }
  .yds-root label.yds-check, .yds-root .yds-switch { min-height: 44px; align-items: center; }
  .yds-root label.yds-check > input { margin-top: 0; }
}
@media (max-width: 600px) {
  .yds-root .yds-grid { grid-template-columns: 1fr; }
  .yds-root .yds-dialog { max-height: calc(100dvh - 24px); width: calc(100vw - 24px); }
  .yds-root .yds-drawer { width: min(440px, calc(100vw - 16px)); }
  .yds-root .yds-toast-region, .yds-root .yds-toast-stack { right: 16px; bottom: 16px; }
  .yds-root .yds-table th, .yds-root .yds-table td { padding-left: 10px; padding-right: 10px; }
  .yds-root .yds-title { font-size: var(--yds-text-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .yds-root *, .yds-root *::before, .yds-root *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .yds-root .yds-btn, .yds-root .yds-icon-btn, .yds-root .yds-badge { border-color: ButtonText; }
  .yds-root :is(.yds-list-row,.yds-tab)[aria-selected="true"], .yds-root .yds-list-row[aria-pressed="true"] { outline: 1px solid Highlight; }
  .yds-root .yds-switch input::before, .yds-root input.yds-switch::before { background: ButtonText; }
}