/*! vfunc-ui (vfunc.js layer 2) v1.2.0 | Apache-2.0 | (c) 2026 vidkid | https://github.com/vidkid-indy/vfunc */
@layer vf.base, vf.components;

@layer vf.base {
/* SPDX-License-Identifier: Apache-2.0 */
/* Shared rules of the layer 2 components. Built into dist/vfunc-ui.css inside @layer vf.base.
   Only var(--vf-*) tokens (from vfunc.tokens.css) and logical properties (rule 21, RTL ready). */

.vf-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes vf-spin {
  to { transform: rotate(360deg); }
}

/* The page does not scroll behind a modal layer (vfModal, vfDrawer, vfConfirm; D-032). */
[data-vf-scroll-lock] { overflow: hidden; }
[data-vf-scroll-lock] body { overflow: hidden; }
}

@layer vf.components {
/* SPDX-License-Identifier: Apache-2.0 */
/* vsAccordion. Open items have data-state="open" and aria-expanded="true". */

.vf-accordion {
  font-family: var(--vf-font-body);
  color: var(--vf-color-text);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
}

.vf-accordion__item + .vf-accordion__item { border-block-start: 1px solid var(--vf-color-border); }

.vf-accordion__heading { margin: 0; font-size: inherit; }

.vf-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-3);
  inline-size: 100%;
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
  font: inherit;
  font-size: var(--vf-font-size-md);
  font-weight: var(--vf-font-weight-strong);
  text-align: start;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.vf-accordion__trigger::after {
  content: "";
  flex: none;
  inline-size: 0.5em;
  block-size: 0.5em;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--vf-duration-fast) var(--vf-easing);
}

.vf-accordion__trigger[aria-expanded="true"]::after { transform: rotate(-135deg); }
.vf-accordion__trigger:hover { background: var(--vf-color-surface-muted); }
.vf-accordion__trigger:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }
.vf-accordion__trigger:disabled { color: var(--vf-color-text-disabled); cursor: not-allowed; }

.vf-accordion__panel {
  padding-block: 0 var(--vf-space-4);
  padding-inline: var(--vf-space-4);
}

.vf-accordion__panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vf-accordion__trigger::after { transition: none; }
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsAlert. Tone from data-variant: info, success, warning, danger. */

.vf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--vf-space-3);
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-info-text);
  background: var(--vf-color-info-soft);
  border: 1px solid transparent;
  border-inline-start: 2px solid var(--vf-color-info);
  border-radius: var(--vf-radius-md);
}

.vf-alert[data-variant="success"] { color: var(--vf-color-success-text); background: var(--vf-color-success-soft); border-inline-start-color: var(--vf-color-success); }
.vf-alert[data-variant="warning"] { color: var(--vf-color-warning-text); background: var(--vf-color-warning-soft); border-inline-start-color: var(--vf-color-warning); }
.vf-alert[data-variant="danger"] { color: var(--vf-color-danger-text); background: var(--vf-color-danger-soft); border-inline-start-color: var(--vf-color-danger); }

.vf-alert__body { flex: 1; min-inline-size: 0; }
.vf-alert__title { margin: 0; font-weight: var(--vf-font-weight-strong); }
.vf-alert__message > :first-child { margin-block-start: 0; }
.vf-alert__message > :last-child { margin-block-end: 0; }

.vf-alert__dismiss {
  flex: none;
  padding: 0;
  inline-size: 1.5em;
  block-size: 1.5em;
  font: inherit;
  font-size: var(--vf-font-size-lg);
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-sm);
  cursor: pointer;
}

.vf-alert__dismiss:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsAvatar. Size from data-size. */

.vf-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.5em;
  block-size: 2.5em;
  overflow: hidden;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  font-weight: var(--vf-font-weight-strong);
  color: var(--vf-color-primary);
  background: var(--vf-color-primary-soft);
  border-radius: var(--vf-radius-full);
}

.vf-avatar[data-size="sm"] { font-size: var(--vf-font-size-xs); }
.vf-avatar[data-size="lg"] { font-size: var(--vf-font-size-xl); }

.vf-avatar__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsBadge and vsTag share the tone colors: data-variant neutral, primary, success, warning, danger, info. */

.vf-badge,
.vf-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  padding-block: 0;
  padding-inline: var(--vf-space-2);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-xs);
  font-weight: var(--vf-font-weight-strong);
  line-height: var(--vf-line-height);
  white-space: nowrap;
  color: var(--vf-color-text);
  background: var(--vf-color-surface-muted);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-full);
}

.vf-badge__dot {
  inline-size: 0.5em;
  block-size: 0.5em;
  background: currentColor;
  border-radius: var(--vf-radius-full);
}

.vf-badge[data-variant="primary"],
.vf-tag[data-variant="primary"] { color: var(--vf-color-primary); background: var(--vf-color-primary-soft); border-color: transparent; }
.vf-badge[data-variant="success"],
.vf-tag[data-variant="success"] { color: var(--vf-color-success-text); background: var(--vf-color-success-soft); border-color: transparent; }
.vf-badge[data-variant="warning"],
.vf-tag[data-variant="warning"] { color: var(--vf-color-warning-text); background: var(--vf-color-warning-soft); border-color: transparent; }
.vf-badge[data-variant="danger"],
.vf-tag[data-variant="danger"] { color: var(--vf-color-danger-text); background: var(--vf-color-danger-soft); border-color: transparent; }
.vf-badge[data-variant="info"],
.vf-tag[data-variant="info"] { color: var(--vf-color-info-text); background: var(--vf-color-info-soft); border-color: transparent; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsBreadcrumb. The separator is drawn by CSS, so screen readers read only the path. */

.vf-breadcrumb {
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-sm);
  line-height: var(--vf-line-height);
}

.vf-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vf-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vf-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  color: var(--vf-color-text-muted);
}

.vf-breadcrumb__item + .vf-breadcrumb__item::before {
  content: "/";
  color: var(--vf-color-border-strong);
}

.vf-breadcrumb__link {
  color: var(--vf-color-primary);
  text-decoration: none;
  border-radius: var(--vf-radius-sm);
}

.vf-breadcrumb__link:hover { text-decoration: underline; }
.vf-breadcrumb__link:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }
.vf-breadcrumb__current[aria-current="page"] { color: var(--vf-color-text); font-weight: var(--vf-font-weight-strong); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsButtonGroup. data-attached joins the edges of the buttons. */

.vf-button-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
}

.vf-button-group[data-attached="true"] { gap: 0; flex-wrap: nowrap; }
.vf-button-group[data-attached="true"] > .vf-button { border-radius: 0; }
.vf-button-group[data-attached="true"] > .vf-button + .vf-button { margin-inline-start: -1px; }
.vf-button-group[data-attached="true"] > .vf-button:first-child {
  border-start-start-radius: var(--vf-radius-md);
  border-end-start-radius: var(--vf-radius-md);
}
.vf-button-group[data-attached="true"] > .vf-button:last-child {
  border-start-end-radius: var(--vf-radius-md);
  border-end-end-radius: var(--vf-radius-md);
}
.vf-button-group[data-attached="true"] > .vf-button:focus-visible { position: relative; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsButton. State and variants come from attributes: data-variant, data-size, disabled, aria-busy. */

.vf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vf-space-2);
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-4);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  font-weight: var(--vf-font-weight-strong);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border-strong);
  border-radius: var(--vf-radius-md);
  cursor: pointer;
  transition: background-color var(--vf-duration-fast) var(--vf-easing), border-color var(--vf-duration-fast) var(--vf-easing);
}

.vf-button:hover { background: var(--vf-color-surface-muted); }
.vf-button:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-button[data-size="sm"] {
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-3);
  font-size: var(--vf-font-size-sm);
}

.vf-button[data-size="lg"] {
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-5);
  font-size: var(--vf-font-size-lg);
}

.vf-button[data-variant="primary"] {
  color: var(--vf-color-on-primary);
  background: var(--vf-color-primary);
  border-color: var(--vf-color-primary);
}
.vf-button[data-variant="primary"]:hover { background: var(--vf-color-primary-hover); border-color: var(--vf-color-primary-hover); }

.vf-button[data-variant="danger"] {
  color: var(--vf-color-text-inverse);
  background: var(--vf-color-danger);
  border-color: var(--vf-color-danger);
}
.vf-button[data-variant="danger"]:hover { background: var(--vf-color-danger-text); border-color: var(--vf-color-danger-text); }

.vf-button[data-variant="ghost"] {
  background: transparent;
  border-color: transparent;
}
.vf-button[data-variant="ghost"]:hover { background: var(--vf-color-surface-muted); }

.vf-button:disabled {
  color: var(--vf-color-text-disabled);
  background: var(--vf-color-surface-muted);
  border-color: var(--vf-color-border);
  cursor: not-allowed;
}

.vf-button[aria-busy="true"] { cursor: progress; }

.vf-button__spinner {
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--vf-radius-full);
  animation: vf-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vf-button__spinner { animation-duration: 2.4s; }
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsCard. */

.vf-card {
  display: flex;
  flex-direction: column;
  font-family: var(--vf-font-body);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-lg);
  box-shadow: var(--vf-shadow-1);
}

.vf-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vf-space-3);
  padding-block: var(--vf-space-4) 0;
  padding-inline: var(--vf-space-5);
}

.vf-card__heading { min-inline-size: 0; }

.vf-card__title {
  margin: 0;
  font-size: var(--vf-font-size-lg);
  font-weight: var(--vf-font-weight-strong);
  line-height: var(--vf-line-height);
}

.vf-card__subtitle {
  margin: 0;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
}

.vf-card__actions { display: flex; flex: none; gap: var(--vf-space-2); }

.vf-card__body {
  flex: 1;
  padding-block: var(--vf-space-4);
  padding-inline: var(--vf-space-5);
}

.vf-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--vf-space-2);
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-5);
  border-block-start: 1px solid var(--vf-color-border);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vfCarousel. One slide shown at a time; the others are [hidden]. */

.vf-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-2);
  font-family: var(--vf-font-body);
  color: var(--vf-color-text);
}

.vf-carousel__slides {
  overflow: hidden;
  background: var(--vf-color-surface-muted);
  border-radius: var(--vf-radius-lg);
}

.vf-carousel__slide[hidden] { display: none; }
.vf-carousel__image { display: block; inline-size: 100%; block-size: auto; }

.vf-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--vf-space-1);
  order: 2;
}

.vf-carousel__prev,
.vf-carousel__next,
.vf-carousel__rotation {
  min-inline-size: 2.25em;
  block-size: 2.25em;
  padding-block: 0;
  padding-inline: var(--vf-space-2);
  font: inherit;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
  cursor: pointer;
}

.vf-carousel__rotation { margin-inline-end: auto; }

.vf-carousel__prev:hover,
.vf-carousel__next:hover,
.vf-carousel__rotation:hover { background: var(--vf-color-surface-muted); }

.vf-carousel__prev:focus-visible,
.vf-carousel__next:focus-visible,
.vf-carousel__rotation:focus-visible,
.vf-carousel__dot:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-carousel__prev:disabled,
.vf-carousel__next:disabled { color: var(--vf-color-text-disabled); cursor: not-allowed; }

.vf-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--vf-space-2);
  order: 1;
}

.vf-carousel__dot {
  inline-size: 0.625em;
  block-size: 0.625em;
  padding: 0;
  background: var(--vf-color-border-strong);
  border: 0;
  border-radius: var(--vf-radius-full);
  cursor: pointer;
}

.vf-carousel__dot[aria-current="true"] { background: var(--vf-color-primary); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsChart and vfChart (data file). Series colors come from data-series and the --vf-chart-*
   tokens, so the dark theme follows; the marks paint with currentColor. */

.vf-chart {
  position: relative;
  margin: 0;
  font-family: var(--vf-font-body);
  color: var(--vf-color-text);
}

.vf-chart__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.vf-chart [data-series="0"] { color: var(--vf-chart-1); }
.vf-chart [data-series="1"] { color: var(--vf-chart-2); }
.vf-chart [data-series="2"] { color: var(--vf-chart-3); }
.vf-chart [data-series="3"] { color: var(--vf-chart-4); }
.vf-chart [data-series="4"] { color: var(--vf-chart-5); }
.vf-chart [data-series="5"] { color: var(--vf-chart-6); }
.vf-chart [data-series="6"] { color: var(--vf-chart-7); }
.vf-chart [data-series="7"] { color: var(--vf-chart-8); }

.vf-chart__gridline { stroke: var(--vf-color-border); stroke-width: 1; }
.vf-chart__tick,
.vf-chart__label { fill: var(--vf-color-text-muted); font-size: var(--vf-font-size-xs); }

.vf-chart__bar,
.vf-chart__slice,
.vf-chart__point { fill: currentColor; }
.vf-chart__slice { stroke: var(--vf-color-surface); stroke-width: 1; }
.vf-chart__point { stroke: var(--vf-color-surface); stroke-width: 2; }
.vf-chart__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.vf-chart__area { fill: currentColor; opacity: 0.15; }

.vf-chart__mark[tabindex] { cursor: pointer; outline: none; }
.vf-chart__mark[tabindex]:hover,
.vf-chart__mark[tabindex]:focus { opacity: 0.8; stroke: var(--vf-color-focus); stroke-width: 2; }

.vf-chart[data-animate] .vf-chart__mark,
.vf-chart[data-animate] .vf-chart__line,
.vf-chart[data-animate] .vf-chart__area { animation: vf-chart-in var(--vf-duration-base) var(--vf-easing); }

@keyframes vf-chart-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vf-chart[data-animate] .vf-chart__mark,
  .vf-chart[data-animate] .vf-chart__line,
  .vf-chart[data-animate] .vf-chart__area { animation: none; }
}

.vf-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-1) var(--vf-space-3);
  margin: 0;
  margin-block-start: var(--vf-space-2);
  padding: 0;
  list-style: none;
  font-size: var(--vf-font-size-sm);
}

.vf-chart__entry,
.vf-chart__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
}

.vf-chart__toggle {
  padding-block: 0;
  padding-inline: var(--vf-space-1);
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-sm);
  cursor: pointer;
}

.vf-chart__toggle[aria-pressed="false"] { color: var(--vf-color-text-disabled); text-decoration: line-through; }
.vf-chart__toggle:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-chart__swatch {
  inline-size: 0.75em;
  block-size: 0.75em;
  background: currentColor;
  border-radius: var(--vf-radius-sm);
}

.vf-chart__toggle[aria-pressed="false"] .vf-chart__swatch { opacity: 0.3; }

.vf-chart__tooltip {
  position: absolute;
  z-index: var(--vf-z-popover);
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-2);
  font-size: var(--vf-font-size-xs);
  white-space: nowrap;
  color: var(--vf-color-text-inverse);
  background: var(--vf-color-text);
  border-radius: var(--vf-radius-sm);
  box-shadow: var(--vf-shadow-2);
  pointer-events: none;
  transform: translate(-50%, -110%);
}

.vf-chart__tooltip[hidden] { display: none; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsCheckbox and the radios of vsRadioGroup: native inputs in the theme color. */

.vf-check {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  cursor: pointer;
}

.vf-check__input {
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  margin: 0;
  accent-color: var(--vf-color-primary);
  cursor: pointer;
}

.vf-check__input:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }
.vf-check__input[aria-invalid="true"] { outline: 1px solid var(--vf-color-danger); }

.vf-check__input:disabled,
.vf-check__input:disabled + .vf-check__label {
  color: var(--vf-color-text-disabled);
  cursor: not-allowed;
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsChipsInput: vsTag chips and a text input inside one box. */

.vf-chips-input {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vf-space-1);
  inline-size: 100%;
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-2);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border-strong);
  border-radius: var(--vf-radius-md);
}

.vf-chips-input:focus-within { border-color: var(--vf-color-focus); box-shadow: var(--vf-focus-ring); }
.vf-chips-input[data-state="disabled"] { background: var(--vf-color-surface-muted); }

.vf-chips-input__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vf-chips-input__chip { display: inline-flex; }

.vf-chips-input__input {
  flex: 1;
  min-inline-size: 6em;
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-1);
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
}

.vf-chips-input__input[aria-invalid="true"] { color: var(--vf-color-danger-text); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vfDateRangePicker: two labelled date inputs side by side (stacked on narrow screens). */

.vf-date-range__inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--vf-space-2);
}

.vf-date-range__part {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--vf-space-1);
  min-inline-size: 10em;
}

.vf-date-range__label {
  font-size: var(--vf-font-size-xs);
  color: var(--vf-color-text-muted);
}

.vf-date-range__separator {
  padding-block-end: var(--vf-space-2);
  color: var(--vf-color-text-muted);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsDescriptions. Columns from data-columns (1–4); one column on narrow screens. */

.vf-descriptions {
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
}

.vf-descriptions__title {
  margin-block: 0 var(--vf-space-2);
  font-weight: var(--vf-font-weight-strong);
}

.vf-descriptions__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vf-space-3) var(--vf-space-5);
  margin: 0;
}

.vf-descriptions__item { min-inline-size: 0; }

.vf-descriptions__label {
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
}

.vf-descriptions__value {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40em) {
  .vf-descriptions[data-columns="2"] .vf-descriptions__list { grid-template-columns: repeat(2, 1fr); }
  .vf-descriptions[data-columns="3"] .vf-descriptions__list { grid-template-columns: repeat(3, 1fr); }
  .vf-descriptions[data-columns="4"] .vf-descriptions__list { grid-template-columns: repeat(4, 1fr); }
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsEmptyState. */

.vf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vf-space-2);
  padding-block: var(--vf-space-7);
  padding-inline: var(--vf-space-5);
  font-family: var(--vf-font-body);
  text-align: center;
  color: var(--vf-color-text-muted);
}

.vf-empty-state__icon { font-size: var(--vf-font-size-2xl); }

.vf-empty-state__title {
  margin: 0;
  font-size: var(--vf-font-size-lg);
  font-weight: var(--vf-font-weight-strong);
  color: var(--vf-color-text);
}

.vf-empty-state__description { margin: 0; }
.vf-empty-state__action { margin-block-start: var(--vf-space-3); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsField and the field wrapper of the input components; vsRadioGroup (a fieldset). */

.vf-field {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vf-field__label {
  padding: 0;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-sm);
  font-weight: var(--vf-font-weight-strong);
  color: var(--vf-color-text);
}

.vf-field__required {
  margin-inline-start: var(--vf-space-1);
  color: var(--vf-color-danger-text);
}

.vf-field__hint,
.vf-field__error {
  margin: 0;
  font-size: var(--vf-font-size-sm);
  line-height: var(--vf-line-height);
}

.vf-field__hint { color: var(--vf-color-text-muted); }
.vf-field__error { color: var(--vf-color-danger-text); }

.vf-radio-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-2);
}

.vf-radio-group[data-direction="horizontal"] .vf-radio-group__options {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--vf-space-4);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vfGrid (data file). The table is vsTable; a max height (set by JS from the height prop) scrolls
   the rows under a header that stays on top. */

.vf-grid {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-2);
  font-family: var(--vf-font-body);
}

.vf-grid__scroll { overflow: auto; }
.vf-grid__scroll[data-height] .vf-table { overflow: visible; }
.vf-grid__scroll[data-height] .vf-table__head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

.vf-grid__check {
  inline-size: 1em;
  block-size: 1em;
  margin: 0;
  accent-color: var(--vf-color-primary);
  cursor: pointer;
}

.vf-grid__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-2);
}

.vf-grid__range {
  margin: 0;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsInput, vsTextarea, vsSelect. State from attributes: data-size, aria-invalid, disabled, readonly. */

.vf-input,
.vf-textarea,
.vf-select {
  box-sizing: border-box;
  inline-size: 100%;
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-3);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border-strong);
  border-radius: var(--vf-radius-md);
  transition: border-color var(--vf-duration-fast) var(--vf-easing), box-shadow var(--vf-duration-fast) var(--vf-easing);
}

.vf-textarea { resize: vertical; }
.vf-select[multiple] { padding-block: var(--vf-space-1); }

.vf-input::placeholder,
.vf-textarea::placeholder { color: var(--vf-color-text-muted); }

.vf-input:focus,
.vf-textarea:focus,
.vf-select:focus {
  outline: none;
  border-color: var(--vf-color-focus);
  box-shadow: var(--vf-focus-ring);
}

.vf-input[data-size="sm"],
.vf-textarea[data-size="sm"],
.vf-select[data-size="sm"] {
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-2);
  font-size: var(--vf-font-size-sm);
}

.vf-input[data-size="lg"],
.vf-textarea[data-size="lg"],
.vf-select[data-size="lg"] {
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
  font-size: var(--vf-font-size-lg);
}

.vf-input[aria-invalid="true"],
.vf-textarea[aria-invalid="true"],
.vf-select[aria-invalid="true"] { border-color: var(--vf-color-danger); }

.vf-input:disabled,
.vf-textarea:disabled,
.vf-select:disabled {
  color: var(--vf-color-text-disabled);
  background: var(--vf-color-surface-muted);
  cursor: not-allowed;
}

.vf-input[readonly],
.vf-textarea[readonly] { background: var(--vf-color-surface-muted); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsListView. Selectable options have role="option" and aria-selected. */

.vf-list-view {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
}

.vf-list-view__item {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-1);
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
}

.vf-list-view__item + .vf-list-view__item { border-block-start: 1px solid var(--vf-color-border); }

.vf-list-view__item[role="option"] { cursor: pointer; }
.vf-list-view__item[role="option"]:hover { background: var(--vf-color-surface-muted); }
.vf-list-view__item[role="option"]:focus-visible { outline: none; box-shadow: inset var(--vf-focus-ring); }
.vf-list-view__item[aria-selected="true"] { background: var(--vf-color-primary-soft); }

.vf-list-view__title { font-weight: var(--vf-font-weight-strong); }
.vf-list-view__description,
.vf-list-view__meta { font-size: var(--vf-font-size-sm); color: var(--vf-color-text-muted); }

.vf-list-view[data-state="empty"] { border-style: dashed; }

/* SPDX-License-Identifier: Apache-2.0 */
/* The menu of vfDropdown and vfSplitButton; the split button group. The panel is position: fixed
   next to its trigger (coordinates set by JS); the gap comes from data-placement. */

.vf-dropdown,
.vf-split-button { position: relative; display: inline-flex; }

.vf-menu {
  position: fixed;
  z-index: var(--vf-z-dropdown);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-inline-size: 10em;
  max-inline-size: 20em;
  padding-block: var(--vf-space-1);
  padding-inline: 0;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-2);
}

.vf-menu[hidden] { display: none; }
.vf-menu[data-placement="bottom"],
.vf-popover__panel[data-placement="bottom"] { margin-block-start: var(--vf-space-1); }
.vf-menu[data-placement="top"],
.vf-popover__panel[data-placement="top"] { margin-block-start: calc(var(--vf-space-1) * -1); }

.vf-menu__item {
  display: block;
  inline-size: 100%;
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-3);
  font: inherit;
  text-align: start;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.vf-menu__item:hover,
.vf-menu__item:focus { outline: none; background: var(--vf-color-surface-muted); }
.vf-menu__item[data-variant="danger"] { color: var(--vf-color-danger-text); }
.vf-menu__item[aria-disabled="true"] { color: var(--vf-color-text-disabled); cursor: not-allowed; }

.vf-menu__separator {
  margin-block: var(--vf-space-1);
  border-block-start: 1px solid var(--vf-color-border);
}

/* SplitButton: the two buttons joined. */
.vf-split-button > .vf-button:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.vf-split-button > .vf-split-button__toggle {
  margin-inline-start: -1px;
  padding-inline: var(--vf-space-2);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.vf-split-button > .vf-button:focus-visible { position: relative; }

.vf-split-button__caret {
  inline-size: 0.4em;
  block-size: 0.4em;
  margin-block-end: 0.2em;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vfModal, vfDrawer (data-side: end, start, bottom) and vfConfirm. Size from data-size. */

.vf-modal {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: var(--vf-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vf-space-4);
  font-family: var(--vf-font-body);
  color: var(--vf-color-text);
}

.vf-modal__backdrop {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  background: var(--vf-color-overlay);
}

.vf-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 32em;
  max-block-size: 100%;
  overflow: hidden;
  background: var(--vf-color-surface);
  border-radius: var(--vf-radius-lg);
  box-shadow: var(--vf-shadow-3);
}

.vf-modal[data-size="sm"] .vf-modal__dialog { max-inline-size: 24em; }
.vf-modal[data-size="lg"] .vf-modal__dialog { max-inline-size: 48em; }
.vf-modal__dialog:focus-visible { outline: none; box-shadow: var(--vf-shadow-3), var(--vf-focus-ring); }

.vf-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vf-space-3);
  padding-block: var(--vf-space-4) 0;
  padding-inline: var(--vf-space-5);
}

.vf-modal__title {
  margin: 0;
  font-size: var(--vf-font-size-lg);
  font-weight: var(--vf-font-weight-strong);
  line-height: var(--vf-line-height);
}

.vf-modal__close {
  flex: none;
  margin-inline-start: auto;
  padding: 0;
  inline-size: 2em;
  block-size: 2em;
  font: inherit;
  font-size: var(--vf-font-size-lg);
  line-height: 1;
  color: var(--vf-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-sm);
  cursor: pointer;
}

.vf-modal__close:hover { color: var(--vf-color-text); background: var(--vf-color-surface-muted); }
.vf-modal__close:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-modal__body {
  flex: 1;
  overflow: auto;
  padding-block: var(--vf-space-4);
  padding-inline: var(--vf-space-5);
  line-height: var(--vf-line-height);
}

.vf-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--vf-space-2);
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-5);
  border-block-start: 1px solid var(--vf-color-border);
}

.vf-confirm__message { margin: 0; }

/* Drawer: a full-height panel at one side. */
.vf-drawer { padding: 0; justify-content: flex-end; align-items: stretch; z-index: var(--vf-z-drawer); }
.vf-drawer[data-side="start"] { justify-content: flex-start; }
.vf-drawer[data-side="bottom"] { flex-direction: column; justify-content: flex-end; }
.vf-drawer .vf-modal__dialog { max-inline-size: 24em; border-radius: 0; }
.vf-drawer[data-size="sm"] .vf-modal__dialog { max-inline-size: 18em; }
.vf-drawer[data-size="lg"] .vf-modal__dialog { max-inline-size: 40em; }
.vf-drawer[data-side="bottom"] .vf-modal__dialog { max-inline-size: none; max-block-size: 80%; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsNumberInput and the other boxed inputs (search, password): one border around input and buttons. */

.vf-number-input,
.vf-search-input,
.vf-password-input {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border-strong);
  border-radius: var(--vf-radius-md);
  transition: border-color var(--vf-duration-fast) var(--vf-easing), box-shadow var(--vf-duration-fast) var(--vf-easing);
}

.vf-number-input:focus-within,
.vf-search-input:focus-within,
.vf-password-input:focus-within {
  border-color: var(--vf-color-focus);
  box-shadow: var(--vf-focus-ring);
}

.vf-number-input[data-size="sm"],
.vf-search-input[data-size="sm"],
.vf-password-input[data-size="sm"] { font-size: var(--vf-font-size-sm); }

.vf-number-input[data-size="lg"],
.vf-search-input[data-size="lg"],
.vf-password-input[data-size="lg"] { font-size: var(--vf-font-size-lg); }

.vf-number-input__input,
.vf-search-input__input,
.vf-password-input__input {
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-3);
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
}

.vf-number-input__input { text-align: center; -moz-appearance: textfield; }
.vf-number-input__input::-webkit-inner-spin-button,
.vf-number-input__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.vf-search-input__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.vf-number-input__input[aria-invalid="true"],
.vf-search-input__input[aria-invalid="true"],
.vf-password-input__input[aria-invalid="true"] { color: var(--vf-color-danger-text); }

.vf-number-input__step,
.vf-search-input__clear,
.vf-password-input__toggle {
  flex: none;
  padding-block: 0;
  padding-inline: var(--vf-space-3);
  font: inherit;
  color: var(--vf-color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.vf-number-input__step:hover,
.vf-search-input__clear:hover,
.vf-password-input__toggle:hover { color: var(--vf-color-text); background: var(--vf-color-surface-muted); }

.vf-number-input__step:focus-visible,
.vf-search-input__clear:focus-visible,
.vf-password-input__toggle:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-number-input__step:disabled,
.vf-password-input__toggle:disabled {
  color: var(--vf-color-text-disabled);
  background: transparent;
  cursor: not-allowed;
}

.vf-number-input__step:first-child { border-inline-end: 1px solid var(--vf-color-border); }
.vf-number-input__step:last-child { border-inline-start: 1px solid var(--vf-color-border); }

.vf-password-input__toggle {
  font-size: var(--vf-font-size-sm);
  font-weight: var(--vf-font-weight-strong);
}

.vf-search-input__clear[hidden] { display: none; }

.vf-number-input:has(:disabled),
.vf-search-input:has(:disabled),
.vf-password-input:has(:disabled) { background: var(--vf-color-surface-muted); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsPagination. The current page has aria-current="page". */

.vf-pagination { font-family: var(--vf-font-body); }

.vf-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vf-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vf-pagination__button {
  min-inline-size: 2.25em;
  block-size: 2.25em;
  padding-block: 0;
  padding-inline: var(--vf-space-2);
  font: inherit;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.vf-pagination__button:hover { background: var(--vf-color-surface-muted); }
.vf-pagination__button:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-pagination__button[aria-current="page"] {
  color: var(--vf-color-on-primary);
  background: var(--vf-color-primary);
  border-color: var(--vf-color-primary);
}

.vf-pagination__button:disabled {
  color: var(--vf-color-text-disabled);
  background: transparent;
  cursor: not-allowed;
}

.vf-pagination__gap {
  padding-inline: var(--vf-space-1);
  color: var(--vf-color-text-muted);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vfPopover. The panel is position: fixed next to its trigger (coordinates set by JS); the gap is
   in menu.css (data-placement). */

.vf-popover { position: relative; display: inline-flex; }

.vf-popover__panel {
  position: fixed;
  z-index: var(--vf-z-popover);
  box-sizing: border-box;
  inline-size: max-content;
  max-inline-size: 22em;
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-sm);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-2);
}

.vf-popover__panel[hidden] { display: none; }
.vf-popover__panel:focus-visible { outline: none; box-shadow: var(--vf-shadow-2), var(--vf-focus-ring); }

.vf-popover__header {
  display: flex;
  align-items: flex-start;
  gap: var(--vf-space-2);
}

.vf-popover__title { margin: 0; font-weight: var(--vf-font-weight-strong); }

.vf-popover__close {
  flex: none;
  margin-inline-start: auto;
  padding: 0;
  inline-size: 1.5em;
  block-size: 1.5em;
  font: inherit;
  font-size: var(--vf-font-size-md);
  line-height: 1;
  color: var(--vf-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-sm);
  cursor: pointer;
}

.vf-popover__close:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }
.vf-popover__body { margin-block-start: var(--vf-space-1); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsProgress: a native <progress>. Each engine styles its own pseudo-elements. */

.vf-progress {
  display: block;
  inline-size: 100%;
  block-size: 0.5em;
  overflow: hidden;
  color: var(--vf-color-primary);
  background: var(--vf-color-surface-muted);
  border: 0;
  border-radius: var(--vf-radius-full);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.vf-progress::-webkit-progress-bar { background: var(--vf-color-surface-muted); }
.vf-progress::-webkit-progress-value { background: var(--vf-color-primary); border-radius: var(--vf-radius-full); }
.vf-progress::-moz-progress-bar { background: var(--vf-color-primary); border-radius: var(--vf-radius-full); }

.vf-progress__row {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
}

.vf-progress__value {
  flex: none;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsRating: stars filled from data-state="on"; the radios are visually hidden but focusable. */

.vf-rating__stars,
.vf-rating[data-readonly="true"] {
  display: inline-flex;
  gap: var(--vf-space-1);
}

.vf-rating__item {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.vf-rating__star {
  font-size: var(--vf-font-size-xl);
  line-height: 1;
  color: var(--vf-color-border-strong);
  transition: color var(--vf-duration-fast) var(--vf-easing);
}

.vf-rating[data-readonly="true"] .vf-rating__star { font-size: var(--vf-font-size-md); }
.vf-rating__star[data-state="on"] { color: var(--vf-color-warning); }
.vf-rating__item:hover .vf-rating__star { color: var(--vf-color-warning); }
.vf-rating__input:focus-visible + .vf-rating__star { border-radius: var(--vf-radius-sm); box-shadow: var(--vf-focus-ring); }
.vf-rating__input:disabled + .vf-rating__star { opacity: 0.5; }
.vf-rating__item:has(:disabled) { cursor: not-allowed; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsSelectButton: joined toggle buttons; the chosen ones have aria-pressed="true". */

.vf-select-button {
  display: inline-flex;
  flex-wrap: wrap;
}

.vf-select-button__option {
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-4);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border-strong);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--vf-duration-fast) var(--vf-easing);
}

.vf-select-button__option + .vf-select-button__option { margin-inline-start: -1px; }
.vf-select-button__option:first-child { border-start-start-radius: var(--vf-radius-md); border-end-start-radius: var(--vf-radius-md); }
.vf-select-button__option:last-of-type { border-start-end-radius: var(--vf-radius-md); border-end-end-radius: var(--vf-radius-md); }

.vf-select-button__option:hover { background: var(--vf-color-surface-muted); }
.vf-select-button__option:focus-visible { position: relative; outline: none; box-shadow: var(--vf-focus-ring); }

.vf-select-button__option[aria-pressed="true"] {
  position: relative;
  color: var(--vf-color-on-primary);
  background: var(--vf-color-primary);
  border-color: var(--vf-color-primary);
}

.vf-select-button__option:disabled {
  color: var(--vf-color-text-disabled);
  background: var(--vf-color-surface-muted);
  cursor: not-allowed;
}

.vf-select-button[data-size="sm"] .vf-select-button__option {
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-3);
  font-size: var(--vf-font-size-sm);
}

.vf-select-button[data-size="lg"] .vf-select-button__option {
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-5);
  font-size: var(--vf-font-size-lg);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsSkeleton. Shape from data-variant: text, rect, circle. Size the rect and circle from your CSS. */

.vf-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-2);
}

.vf-skeleton__line {
  display: block;
  block-size: 1em;
  background: var(--vf-color-surface-muted);
  border-radius: var(--vf-radius-sm);
  animation: vf-skeleton-pulse 1.5s var(--vf-easing) infinite;
}

.vf-skeleton[data-variant="text"] .vf-skeleton__line:last-child:not(:first-child) { inline-size: 60%; }
.vf-skeleton[data-variant="rect"] .vf-skeleton__line { block-size: 8em; border-radius: var(--vf-radius-md); }
.vf-skeleton[data-variant="circle"] { display: inline-flex; }
.vf-skeleton[data-variant="circle"] .vf-skeleton__line { inline-size: 2.5em; block-size: 2.5em; border-radius: var(--vf-radius-full); }

@keyframes vf-skeleton-pulse {
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .vf-skeleton__line { animation: none; }
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsSlider: a native range input in the theme color. */

.vf-slider {
  inline-size: 100%;
  margin: 0;
  accent-color: var(--vf-color-primary);
  cursor: pointer;
}

.vf-slider:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); border-radius: var(--vf-radius-sm); }
.vf-slider:disabled { cursor: not-allowed; opacity: 0.5; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsSparkline: sized here; the SVG stretches to it. Color is currentColor (set `color` on it). */

.vf-sparkline {
  display: inline-block;
  inline-size: 6em;
  block-size: 1.5em;
  overflow: visible;
  color: var(--vf-color-primary);
  vertical-align: middle;
}

.vf-sparkline__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.vf-sparkline__bar { fill: currentColor; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsSpinner. Size from data-size; the vf-spin keyframes are in base.css. */

.vf-spinner {
  display: inline-flex;
  align-items: center;
  font-size: var(--vf-font-size-lg);
  color: var(--vf-color-primary);
}

.vf-spinner[data-size="sm"] { font-size: var(--vf-font-size-sm); }
.vf-spinner[data-size="lg"] { font-size: var(--vf-font-size-2xl); }

.vf-spinner__circle {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--vf-radius-full);
  animation: vf-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vf-spinner__circle { animation-duration: 2.4s; }
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsStatCard. Trend color from data-trend: up, down, flat. */

.vf-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-1);
  padding-block: var(--vf-space-4);
  padding-inline: var(--vf-space-5);
  font-family: var(--vf-font-body);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-lg);
}

.vf-stat-card__label {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
  margin: 0;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
}

.vf-stat-card__value {
  margin: 0;
  font-size: var(--vf-font-size-2xl);
  font-weight: var(--vf-font-weight-strong);
  line-height: var(--vf-line-height);
  font-variant-numeric: tabular-nums;
}

.vf-stat-card__delta {
  margin: 0;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
}

.vf-stat-card__delta[data-trend="up"] .vf-stat-card__change { color: var(--vf-color-success-text); }
.vf-stat-card__delta[data-trend="down"] .vf-stat-card__change { color: var(--vf-color-danger-text); }
.vf-stat-card__change { font-weight: var(--vf-font-weight-strong); }

.vf-stat-card__description {
  margin: 0;
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsStepper. Step state from data-state: complete, current, upcoming. */

.vf-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-sm);
  color: var(--vf-color-text-muted);
}

.vf-stepper__step { flex: 1; min-inline-size: 8em; }

.vf-stepper__button {
  display: flex;
  align-items: flex-start;
  gap: var(--vf-space-2);
  inline-size: 100%;
  padding: 0;
  font: inherit;
  text-align: start;
  color: inherit;
  background: transparent;
  border: 0;
}

button.vf-stepper__button { cursor: pointer; border-radius: var(--vf-radius-sm); }
button.vf-stepper__button:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-stepper__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.75em;
  block-size: 1.75em;
  font-weight: var(--vf-font-weight-strong);
  color: var(--vf-color-text-muted);
  background: var(--vf-color-surface);
  border: 2px solid var(--vf-color-border-strong);
  border-radius: var(--vf-radius-full);
}

.vf-stepper__text { display: flex; flex-direction: column; padding-block-start: var(--vf-space-1); }
.vf-stepper__label { font-weight: var(--vf-font-weight-strong); }
.vf-stepper__description { font-size: var(--vf-font-size-xs); }

.vf-stepper__step[data-state="current"] { color: var(--vf-color-text); }
.vf-stepper__step[data-state="current"] .vf-stepper__marker { color: var(--vf-color-primary); border-color: var(--vf-color-primary); }
.vf-stepper__step[data-state="complete"] .vf-stepper__marker {
  color: var(--vf-color-on-primary);
  background: var(--vf-color-primary);
  border-color: var(--vf-color-primary);
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsSwitch: a native checkbox (visually hidden) drawn as a track and thumb. State from :checked. */

.vf-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  cursor: pointer;
}

.vf-switch__input {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 2.25em;
  block-size: 1.25em;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.vf-switch__track {
  position: relative;
  flex: none;
  inline-size: 2.25em;
  block-size: 1.25em;
  background: var(--vf-color-border-strong);
  border-radius: var(--vf-radius-full);
  transition: background-color var(--vf-duration-fast) var(--vf-easing);
}

.vf-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 0.125em;
  inset-inline-start: 0.125em;
  inline-size: 1em;
  block-size: 1em;
  background: var(--vf-color-surface);
  border-radius: var(--vf-radius-full);
  box-shadow: var(--vf-shadow-1);
  transition: transform var(--vf-duration-fast) var(--vf-easing);
}

.vf-switch__input:checked + .vf-switch__track { background: var(--vf-color-primary); }
.vf-switch__input:checked + .vf-switch__track::after { transform: translateX(1em); }
[dir="rtl"] .vf-switch__input:checked + .vf-switch__track::after { transform: translateX(-1em); }
.vf-switch__input:focus-visible + .vf-switch__track { box-shadow: var(--vf-focus-ring); }

.vf-switch__input:disabled + .vf-switch__track { opacity: 0.5; }
.vf-switch__input:disabled,
.vf-switch__input:disabled ~ .vf-switch__label {
  color: var(--vf-color-text-disabled);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .vf-switch__track,
  .vf-switch__track::after { transition: none; }
}

/* SPDX-License-Identifier: Apache-2.0 */
/* vsTable (and the table inside vfGrid). Sort state from aria-sort; alignment from data-align;
   selected rows from data-state="selected". */

.vf-table {
  overflow-x: auto;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-sm);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-radius: var(--vf-radius-md);
}

.vf-table__table {
  inline-size: 100%;
  border-collapse: collapse;
}

.vf-table__caption {
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
  font-weight: var(--vf-font-weight-strong);
  text-align: start;
}

.vf-table__head,
.vf-table__cell {
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-3);
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--vf-color-border);
}

.vf-table__head {
  font-weight: var(--vf-font-weight-strong);
  color: var(--vf-color-text-muted);
  background: var(--vf-color-surface-muted);
  white-space: nowrap;
}

.vf-table__head[data-align="center"],
.vf-table__cell[data-align="center"] { text-align: center; }
.vf-table__head[data-align="end"],
.vf-table__cell[data-align="end"] { text-align: end; font-variant-numeric: tabular-nums; }

.vf-table__row:last-child .vf-table__cell { border-block-end: 0; }
.vf-table__row:hover { background: var(--vf-color-surface-muted); }
.vf-table__row[data-state="selected"] { background: var(--vf-color-primary-soft); }
.vf-table__row[data-action] { cursor: pointer; }

.vf-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-sm);
  cursor: pointer;
}

.vf-table__sort:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

.vf-table__sort-icon {
  inline-size: 0.4em;
  block-size: 0.4em;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  opacity: 0.3;
  transform: rotate(45deg);
}

[aria-sort="ascending"] .vf-table__sort-icon { opacity: 1; transform: rotate(-135deg); }
[aria-sort="descending"] .vf-table__sort-icon { opacity: 1; }

.vf-table__empty { padding: 0; }
.vf-table__loading {
  display: block;
  padding: var(--vf-space-5);
  text-align: center;
  color: var(--vf-color-text-muted);
}

.vf-table[data-state="loading"] .vf-table__row { opacity: 0.5; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsTabs. The active tab has aria-selected="true"; inactive panels are [hidden]. */

.vf-tabs { font-family: var(--vf-font-body); color: var(--vf-color-text); }

.vf-tabs__list {
  display: flex;
  gap: var(--vf-space-1);
  overflow-x: auto;
  border-block-end: 1px solid var(--vf-color-border);
}

.vf-tabs__tab {
  flex: none;
  margin-block-end: -1px;
  padding-block: var(--vf-space-2);
  padding-inline: var(--vf-space-4);
  font: inherit;
  font-size: var(--vf-font-size-md);
  color: var(--vf-color-text-muted);
  background: transparent;
  border: 0;
  border-block-end: 2px solid transparent;
  cursor: pointer;
}

.vf-tabs__tab:hover { color: var(--vf-color-text); }
.vf-tabs__tab:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); border-radius: var(--vf-radius-sm); }

.vf-tabs__tab[aria-selected="true"] {
  color: var(--vf-color-primary);
  font-weight: var(--vf-font-weight-strong);
  border-block-end-color: var(--vf-color-primary);
}

.vf-tabs__tab:disabled { color: var(--vf-color-text-disabled); cursor: not-allowed; }

.vf-tabs__panel { padding-block: var(--vf-space-4); }
.vf-tabs__panel:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); border-radius: var(--vf-radius-sm); }
.vf-tabs__panel[hidden] { display: none; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsTag: the box and tones are in badge.css; here the tag's own parts. */

.vf-tag {
  font-weight: var(--vf-font-weight-normal);
  border-radius: var(--vf-radius-sm);
}

.vf-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-inline-end: calc(var(--vf-space-1) * -1);
  inline-size: 1.25em;
  block-size: 1.25em;
  font: inherit;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-full);
  cursor: pointer;
}

.vf-tag__remove:hover { background: var(--vf-color-border); }
.vf-tag__remove:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }
.vf-tag__remove:disabled { cursor: not-allowed; opacity: 0.5; }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsTimeline. Marker color from data-variant. */

.vf-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-md);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
}

.vf-timeline__item {
  position: relative;
  display: flex;
  gap: var(--vf-space-3);
  padding-block-end: var(--vf-space-4);
}

.vf-timeline__item::before {
  content: "";
  position: absolute;
  inset-block: 1.25em 0;
  inset-inline-start: calc(0.375em - 1px);
  border-inline-start: 2px solid var(--vf-color-border);
}

.vf-timeline__item:last-child::before { display: none; }

.vf-timeline__marker {
  position: relative;
  flex: none;
  inline-size: 0.75em;
  block-size: 0.75em;
  margin-block-start: 0.375em;
  background: var(--vf-color-text-muted);
  border-radius: var(--vf-radius-full);
}

.vf-timeline__item[data-variant="primary"] .vf-timeline__marker { background: var(--vf-color-primary); }
.vf-timeline__item[data-variant="success"] .vf-timeline__marker { background: var(--vf-color-success); }
.vf-timeline__item[data-variant="warning"] .vf-timeline__marker { background: var(--vf-color-warning); }
.vf-timeline__item[data-variant="danger"] .vf-timeline__marker { background: var(--vf-color-danger); }
.vf-timeline__item[data-variant="info"] .vf-timeline__marker { background: var(--vf-color-info); }

.vf-timeline__content { min-inline-size: 0; }
.vf-timeline__title { margin: 0; font-weight: var(--vf-font-weight-strong); }
.vf-timeline__time { display: block; font-size: var(--vf-font-size-sm); color: var(--vf-color-text-muted); }
.vf-timeline__description { margin: 0; margin-block-start: var(--vf-space-1); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vfToast. The region's corner from data-position; tone from data-variant. */

.vf-toast-region {
  position: fixed;
  z-index: var(--vf-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-2);
  box-sizing: border-box;
  max-inline-size: 100%;
  inline-size: 24em;
  padding: var(--vf-space-4);
  pointer-events: none;
  inset-block-end: 0;
  inset-inline-end: 0;
}

.vf-toast-region[data-position="bottom-start"] { inset-inline: 0 auto; }
.vf-toast-region[data-position="bottom-center"] { inset-inline: 0; margin-inline: auto; }
.vf-toast-region[data-position^="top"] { inset-block: 0 auto; }
.vf-toast-region[data-position="top-start"] { inset-inline: 0 auto; }
.vf-toast-region[data-position="top-center"] { inset-inline: 0; margin-inline: auto; }

.vf-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--vf-space-2);
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-space-4);
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-sm);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text);
  background: var(--vf-color-surface);
  border: 1px solid var(--vf-color-border);
  border-inline-start: 2px solid var(--vf-color-info);
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-2);
  pointer-events: auto;
}

.vf-toast[data-variant="success"] { border-inline-start-color: var(--vf-color-success); }
.vf-toast[data-variant="warning"] { border-inline-start-color: var(--vf-color-warning); }
.vf-toast[data-variant="danger"] { border-inline-start-color: var(--vf-color-danger); }

.vf-toast__body { flex: 1; min-inline-size: 0; }
.vf-toast__title { margin: 0; font-weight: var(--vf-font-weight-strong); }
.vf-toast__message { margin: 0; }

.vf-toast__action,
.vf-toast__dismiss {
  flex: none;
  padding-block: 0;
  padding-inline: var(--vf-space-2);
  font: inherit;
  color: var(--vf-color-primary);
  background: transparent;
  border: 0;
  border-radius: var(--vf-radius-sm);
  cursor: pointer;
}

.vf-toast__action { font-weight: var(--vf-font-weight-strong); }
.vf-toast__dismiss { color: var(--vf-color-text-muted); font-size: var(--vf-font-size-lg); line-height: 1; }
.vf-toast__action:focus-visible,
.vf-toast__dismiss:focus-visible { outline: none; box-shadow: var(--vf-focus-ring); }

/* SPDX-License-Identifier: Apache-2.0 */
/* vsTooltip: shown on hover and on keyboard focus inside the wrapper. Side from data-placement. */

.vf-tooltip {
  position: relative;
  display: inline-flex;
}

.vf-tooltip__bubble {
  position: absolute;
  z-index: var(--vf-z-popover);
  inset-block-end: 100%;
  inset-inline-start: 50%;
  margin-block-end: var(--vf-space-1);
  padding-block: var(--vf-space-1);
  padding-inline: var(--vf-space-2);
  max-inline-size: 20em;
  inline-size: max-content;
  font-family: var(--vf-font-body);
  font-size: var(--vf-font-size-xs);
  line-height: var(--vf-line-height);
  color: var(--vf-color-text-inverse);
  background: var(--vf-color-text);
  border-radius: var(--vf-radius-sm);
  box-shadow: var(--vf-shadow-2);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--vf-duration-fast) var(--vf-easing);
}

[dir="rtl"] .vf-tooltip__bubble { transform: translateX(50%); }

.vf-tooltip:hover .vf-tooltip__bubble,
.vf-tooltip:focus-within .vf-tooltip__bubble {
  visibility: visible;
  opacity: 1;
}

.vf-tooltip[data-placement="bottom"] .vf-tooltip__bubble {
  inset-block: 100% auto;
  margin-block: var(--vf-space-1) 0;
}

.vf-tooltip[data-placement="start"] .vf-tooltip__bubble,
.vf-tooltip[data-placement="end"] .vf-tooltip__bubble {
  inset-block: 50% auto;
  margin: 0;
  transform: translateY(-50%);
}

.vf-tooltip[data-placement="start"] .vf-tooltip__bubble { inset-inline: auto 100%; margin-inline-end: var(--vf-space-1); }
.vf-tooltip[data-placement="end"] .vf-tooltip__bubble { inset-inline: 100% auto; margin-inline-start: var(--vf-space-1); }

@media (prefers-reduced-motion: reduce) {
  .vf-tooltip__bubble { transition: none; }
}
}