/*
 * Varzytines.com transparency components — A ir B etapams.
 * Reikalauja varzytines-stage-a-compat.css ARBA varzytines-tokens.css.
 * Klasės prefiksuotos `vz-`, kad nesikirstų su keturiomis esamomis sistemomis.
 */

.vz-data-state,
.vz-confidence,
.vz-verdict,
.vz-capability__status,
.vz-media__kind {
  align-items: center;
  border: var(--vz-border-width) solid currentColor;
  border-radius: var(--vz-radius-sm);
  display: inline-flex;
  font-family: var(--vz-font-sans);
  font-size: var(--vz-font-size-caption);
  font-weight: var(--vz-font-weight-semibold);
  gap: var(--vz-space-1);
  letter-spacing: var(--vz-letter-spacing-label);
  line-height: var(--vz-line-height-ui);
  min-height: 1.5rem;
  padding: 0.125rem var(--vz-space-2);
  text-wrap: balance;
}

.vz-data-state > svg,
.vz-data-state > i,
.vz-confidence > svg,
.vz-confidence > i,
.vz-verdict > svg,
.vz-verdict > i,
.vz-capability__status > svg,
.vz-capability__status > i,
.vz-media__kind > svg,
.vz-media__kind > i {
  block-size: 0.875rem;
  flex: 0 0 0.875rem;
  inline-size: 0.875rem;
  stroke-width: 2;
}

/* 1. Penkios duomenų kilmės / trūkumo būsenos. */
.vz-data-state[data-state="verified"] {
  background: var(--vz-data-verified-bg);
  border-color: var(--vz-data-verified-border);
  color: var(--vz-data-verified-fg);
}

.vz-data-state[data-state="source"] {
  background: var(--vz-data-source-bg);
  border-color: var(--vz-data-source-border);
  color: var(--vz-data-source-fg);
}

.vz-data-state[data-state="estimate"] {
  background: var(--vz-data-estimate-bg);
  border-color: var(--vz-data-estimate-border);
  color: var(--vz-data-estimate-fg);
}

.vz-data-state[data-state="insufficient"] {
  background: var(--vz-data-insufficient-bg);
  border-color: var(--vz-data-insufficient-border);
  color: var(--vz-data-insufficient-fg);
}

.vz-data-state[data-state="na"] {
  background: var(--vz-data-na-bg);
  border-color: var(--vz-data-na-border);
  color: var(--vz-data-na-fg);
}

button.vz-data-state,
a.vz-data-state {
  cursor: pointer;
  min-height: var(--vz-size-touch);
}

button.vz-data-state:focus-visible,
a.vz-data-state:focus-visible,
.vz-verdict[href]:focus-visible,
button.vz-verdict:focus-visible,
.vz-pagination__button:focus-visible,
.vz-freshness a:focus-visible,
.vz-state a:focus-visible,
.vz-state button:focus-visible {
  outline: var(--vz-border-width-strong) solid var(--vz-color-focus);
  outline-offset: 0.1875rem;
}

@media (hover: hover) {
  button.vz-data-state:hover,
  a.vz-data-state:hover,
  .vz-verdict[href]:hover,
  button.vz-verdict:hover {
    filter: brightness(0.96);
  }
}

/* 2. Skaičius ir pasitikėjimo lygis. */
.vz-metric {
  background: var(--vz-color-surface);
  border-block-start: var(--vz-border-width-strong) solid var(--vz-color-border-strong);
  display: grid;
  gap: var(--vz-space-2);
  min-inline-size: 0;
  padding: var(--vz-space-3) 0;
}

.vz-metric__header {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vz-space-2);
  justify-content: space-between;
}

.vz-metric__label {
  color: var(--vz-color-text-muted);
  font-size: var(--vz-font-size-ui);
  font-weight: var(--vz-font-weight-semibold);
  hyphens: auto;
  line-height: var(--vz-line-height-ui);
  overflow-wrap: anywhere;
}

.vz-metric__value {
  color: var(--vz-color-text);
  font-family: var(--vz-font-sans);
  font-size: var(--vz-font-size-title);
  font-variant-numeric: tabular-nums;
  font-weight: var(--vz-font-weight-bold);
  line-height: var(--vz-line-height-tight);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.vz-metric__context {
  color: var(--vz-color-text-muted);
  font-size: var(--vz-font-size-ui);
  line-height: var(--vz-line-height-ui);
  margin: 0;
}

.vz-confidence[data-confidence="high"] {
  background: var(--vz-data-verified-bg);
  border-color: var(--vz-data-verified-border);
  color: var(--vz-data-verified-fg);
}

.vz-confidence[data-confidence="medium"] {
  background: var(--vz-data-estimate-bg);
  border-color: var(--vz-data-estimate-border);
  color: var(--vz-data-estimate-fg);
}

.vz-confidence[data-confidence="low"],
.vz-confidence[data-confidence="unknown"] {
  background: var(--vz-data-insufficient-bg);
  border-color: var(--vz-data-insufficient-border);
  color: var(--vz-data-insufficient-fg);
}

.vz-metric[data-confidence="low"] .vz-metric__value,
.vz-metric[data-confidence="unknown"] .vz-metric__value {
  text-decoration-color: var(--vz-data-insufficient-border);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.2em;
}

.vz-metric[data-confidence="low"],
.vz-metric[data-confidence="unknown"] {
  border-block-start-color: var(--vz-data-insufficient-border);
}

.vz-metric.is-loading .vz-metric__value,
.vz-metric.is-loading .vz-metric__context {
  color: transparent;
  position: relative;
}

.vz-metric.is-loading .vz-metric__value::after,
.vz-metric.is-loading .vz-metric__context::after {
  animation: vz-skeleton 1.2s linear infinite;
  background: linear-gradient(90deg, var(--vz-color-surface-muted), var(--vz-color-surface-subtle), var(--vz-color-surface-muted));
  background-size: 200% 100%;
  border-radius: var(--vz-radius-xs);
  content: "";
  inset: 0;
  position: absolute;
}

.vz-metric.is-error {
  border-block-start-color: var(--vz-color-danger);
}

.vz-metric.is-empty .vz-metric__value,
.vz-metric[data-confidence="unknown"] .vz-metric__value {
  color: var(--vz-color-text-muted);
  font-size: var(--vz-font-size-body);
  font-weight: var(--vz-font-weight-semibold);
}

/* 3. Šalių pajėgumų matrica. */
.vz-capability {
  background: var(--vz-color-surface);
  border: var(--vz-border-width) solid var(--vz-color-border);
  border-radius: var(--vz-radius-md);
  inline-size: 100%;
  overflow: hidden;
}

.vz-capability__caption {
  color: var(--vz-color-text);
  font-size: var(--vz-font-size-body);
  font-weight: var(--vz-font-weight-semibold);
  padding: var(--vz-space-4);
  text-align: start;
}

.vz-capability__table {
  border-collapse: collapse;
  color: var(--vz-color-text);
  font-family: var(--vz-font-sans);
  font-size: var(--vz-font-size-ui);
  inline-size: 100%;
  table-layout: fixed;
}

.vz-capability__table th,
.vz-capability__table td {
  border-block-start: var(--vz-border-width) solid var(--vz-color-divider);
  padding: var(--vz-space-3);
  text-align: start;
  vertical-align: middle;
}

.vz-capability__table th {
  background: var(--vz-color-surface-subtle);
  color: var(--vz-color-text-muted);
  font-weight: var(--vz-font-weight-semibold);
  hyphens: auto;
  overflow-wrap: anywhere;
}

.vz-capability__country {
  font-weight: var(--vz-font-weight-semibold);
}

.vz-capability__freshness {
  color: var(--vz-color-text-muted);
  display: block;
  font-size: var(--vz-font-size-caption);
  font-variant-numeric: tabular-nums;
  margin-block-start: var(--vz-space-1);
}

.vz-capability__status[data-level="full"] {
  background: var(--vz-data-verified-bg);
  border-color: var(--vz-data-verified-border);
  color: var(--vz-data-verified-fg);
}

.vz-capability__status[data-level="partial"] {
  background: var(--vz-data-estimate-bg);
  border-color: var(--vz-data-estimate-border);
  color: var(--vz-data-estimate-fg);
}

.vz-capability__status[data-level="none"] {
  background: var(--vz-data-na-bg);
  border-color: var(--vz-data-na-border);
  color: var(--vz-data-na-fg);
}

.vz-capability.is-loading td {
  color: transparent;
}

.vz-capability.is-error {
  border-color: var(--vz-color-danger-border);
}

/* 4. Duomenų senumo juosta. */
.vz-freshness {
  align-items: start;
  background: var(--vz-data-source-bg);
  border-block-end: var(--vz-border-width) solid var(--vz-data-source-border);
  color: var(--vz-data-source-fg);
  display: grid;
  font-family: var(--vz-font-sans);
  gap: var(--vz-space-2);
  grid-template-columns: auto minmax(0, 1fr) auto;
  inline-size: 100%;
  padding: var(--vz-space-3) max(var(--vz-space-4), env(safe-area-inset-right)) var(--vz-space-3) max(var(--vz-space-4), env(safe-area-inset-left));
}

.vz-freshness[data-freshness="current"] {
  background: var(--vz-data-verified-bg);
  border-color: var(--vz-data-verified-border);
  color: var(--vz-data-verified-fg);
}

.vz-freshness[data-freshness="delayed"] {
  background: var(--vz-data-estimate-bg);
  border-color: var(--vz-data-estimate-border);
  color: var(--vz-data-estimate-fg);
}

.vz-freshness[data-freshness="stale"] {
  background: var(--vz-data-insufficient-bg);
  border-color: var(--vz-data-insufficient-border);
  color: var(--vz-data-insufficient-fg);
}

.vz-freshness[data-freshness="error"] {
  background: var(--vz-color-danger-soft);
  border-color: var(--vz-color-danger-border);
  color: var(--vz-color-danger);
}

.vz-freshness__icon {
  block-size: 1.125rem;
  inline-size: 1.125rem;
  margin-block-start: 0.125rem;
}

.vz-freshness__title {
  display: block;
  font-size: var(--vz-font-size-ui);
  font-weight: var(--vz-font-weight-semibold);
  line-height: var(--vz-line-height-ui);
}

.vz-freshness__detail,
.vz-freshness__time {
  font-size: var(--vz-font-size-caption);
  line-height: var(--vz-line-height-ui);
}

.vz-freshness__detail {
  margin: var(--vz-space-1) 0 0;
}

.vz-freshness__time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vz-freshness__action {
  color: currentColor;
  font-size: var(--vz-font-size-ui);
  font-weight: var(--vz-font-weight-semibold);
  min-height: var(--vz-size-touch);
  padding: var(--vz-space-2);
}

/* 5. Tuščia, nėra duomenų, loading ir error būsena. */
.vz-state {
  align-items: start;
  background: var(--vz-color-surface-subtle);
  border: var(--vz-border-width) solid var(--vz-color-border);
  border-radius: var(--vz-radius-md);
  color: var(--vz-color-text);
  display: grid;
  font-family: var(--vz-font-sans);
  gap: var(--vz-space-3);
  justify-items: start;
  min-block-size: 10rem;
  padding: var(--vz-space-5);
}

.vz-state__icon {
  block-size: 1.5rem;
  color: var(--vz-color-text-muted);
  inline-size: 1.5rem;
}

.vz-state__title {
  font-size: var(--vz-font-size-body);
  font-weight: var(--vz-font-weight-semibold);
  line-height: var(--vz-line-height-ui);
  margin: 0;
}

.vz-state__body {
  color: var(--vz-color-text-muted);
  font-size: var(--vz-font-size-ui);
  line-height: var(--vz-line-height-body);
  margin: 0;
  max-inline-size: var(--vz-size-text-measure);
}

.vz-state__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vz-space-2);
}

.vz-state[data-state="no-data"] {
  background: var(--vz-data-insufficient-bg);
  border-color: var(--vz-data-insufficient-border);
}

.vz-state[data-state="error"] {
  background: var(--vz-color-danger-soft);
  border-color: var(--vz-color-danger-border);
}

.vz-state[data-state="loading"] {
  min-block-size: 12rem;
}

.vz-skeleton {
  animation: vz-skeleton 1.2s linear infinite;
  background: linear-gradient(90deg, var(--vz-color-surface-muted), var(--vz-color-surface-subtle), var(--vz-color-surface-muted));
  background-size: 200% 100%;
  border-radius: var(--vz-radius-xs);
  block-size: 0.875rem;
  inline-size: min(100%, 24rem);
}

.vz-skeleton:nth-child(2) {
  inline-size: min(72%, 17rem);
}

@keyframes vz-skeleton {
  to { background-position: -200% 0; }
}

/* 6. Verdiktų žetonai. */
.vz-verdict {
  min-height: 1.75rem;
  text-transform: uppercase;
}

.vz-verdict[data-verdict="buy"] {
  background: var(--vz-verdict-buy-bg);
  border-color: var(--vz-verdict-buy-border);
  color: var(--vz-verdict-buy-fg);
}

.vz-verdict[data-verdict="check"] {
  background: var(--vz-verdict-check-bg);
  border-color: var(--vz-verdict-check-border);
  color: var(--vz-verdict-check-fg);
}

.vz-verdict[data-verdict="watch"] {
  background: var(--vz-verdict-watch-bg);
  border-color: var(--vz-verdict-watch-border);
  color: var(--vz-verdict-watch-fg);
}

.vz-verdict[data-verdict="pass"] {
  background: var(--vz-verdict-pass-bg);
  border-color: var(--vz-verdict-pass-border);
  color: var(--vz-verdict-pass-fg);
}

.vz-verdict[data-verdict="none"] {
  background: var(--vz-verdict-none-bg);
  border-color: var(--vz-verdict-none-border);
  color: var(--vz-verdict-none-fg);
  text-transform: none;
}

.vz-verdict.is-loading {
  color: transparent;
  inline-size: 5.5rem;
  overflow: hidden;
  position: relative;
}

.vz-verdict.is-loading::after {
  animation: vz-skeleton 1.2s linear infinite;
  background: linear-gradient(90deg, var(--vz-color-surface-muted), var(--vz-color-surface-subtle), var(--vz-color-surface-muted));
  background-size: 200% 100%;
  content: "";
  inset: 0;
  position: absolute;
}

/* 7. Nuotraukos, dokumento screenshot, netinkamas ir trūkstamas vaizdas. */
.vz-media {
  aspect-ratio: 4 / 3;
  background: var(--vz-color-surface-muted);
  border: var(--vz-border-width) solid var(--vz-color-border);
  border-radius: var(--vz-radius-sm);
  color: var(--vz-color-text-muted);
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
}

.vz-media__image {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

.vz-media[data-kind="document"] .vz-media__image {
  background: var(--vz-color-surface);
  object-fit: contain;
  padding: var(--vz-space-2);
}

.vz-media[data-kind="unusable"] .vz-media__image {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.35;
}

.vz-media__kind {
  backdrop-filter: none;
  background: var(--vz-color-surface);
  border-color: var(--vz-color-border-strong);
  color: var(--vz-color-text);
  inset-block-start: var(--vz-space-2);
  inset-inline-start: var(--vz-space-2);
  position: absolute;
}

.vz-media__fallback {
  align-items: center;
  display: grid;
  gap: var(--vz-space-2);
  justify-items: center;
  max-inline-size: 18rem;
  padding: var(--vz-space-4);
  text-align: center;
}

.vz-media__fallback svg,
.vz-media__fallback i {
  block-size: 2rem;
  inline-size: 2rem;
}

.vz-media__fallback strong {
  color: var(--vz-color-text);
  font-size: var(--vz-font-size-ui);
}

.vz-media__fallback span {
  font-size: var(--vz-font-size-caption);
  line-height: var(--vz-line-height-ui);
}

.vz-media[data-kind="error"] {
  background: var(--vz-color-danger-soft);
  border-color: var(--vz-color-danger-border);
}

.vz-media[data-kind="loading"]::after {
  animation: vz-skeleton 1.2s linear infinite;
  background: linear-gradient(90deg, var(--vz-color-surface-muted), var(--vz-color-surface-subtle), var(--vz-color-surface-muted));
  background-size: 200% 100%;
  content: "";
  inset: 0;
  position: absolute;
}

/* 8. Tankus rezultatų srautas ir puslapiavimas. */
.vz-results {
  display: grid;
  gap: var(--vz-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.vz-object-card {
  background: var(--vz-color-surface);
  border: var(--vz-border-width) solid var(--vz-color-border);
  border-radius: var(--vz-radius-md);
  color: var(--vz-color-text);
  display: grid;
  gap: var(--vz-space-4);
  min-inline-size: 0;
  padding: var(--vz-space-4);
}

.vz-object-card:focus-within {
  border-color: var(--vz-color-focus);
  box-shadow: 0 0 0 0.125rem var(--vz-color-action-soft-hover);
}

.vz-object-card__title {
  font-size: var(--vz-font-size-body);
  font-weight: var(--vz-font-weight-semibold);
  hyphens: auto;
  line-height: var(--vz-line-height-ui);
  margin: 0;
  overflow-wrap: anywhere;
}

.vz-object-card__summary {
  color: var(--vz-color-text-muted);
  display: -webkit-box;
  font-size: var(--vz-font-size-ui);
  line-height: var(--vz-line-height-body);
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.vz-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vz-space-2);
  justify-content: space-between;
  margin-block-start: var(--vz-space-5);
}

.vz-pagination__status {
  color: var(--vz-color-text-muted);
  font-size: var(--vz-font-size-ui);
  font-variant-numeric: tabular-nums;
}

.vz-pagination__controls {
  display: flex;
  gap: var(--vz-space-2);
}

.vz-pagination__button {
  align-items: center;
  background: var(--vz-color-surface);
  border: var(--vz-border-width) solid var(--vz-color-border-strong);
  border-radius: var(--vz-radius-sm);
  color: var(--vz-color-text);
  cursor: pointer;
  display: inline-flex;
  font: var(--vz-font-weight-semibold) var(--vz-font-size-ui) / var(--vz-line-height-ui) var(--vz-font-sans);
  gap: var(--vz-space-1);
  justify-content: center;
  min-block-size: var(--vz-size-touch);
  min-inline-size: var(--vz-size-touch);
  padding: var(--vz-space-2) var(--vz-space-3);
}

.vz-pagination__button[aria-current="page"] {
  background: var(--vz-color-action);
  border-color: var(--vz-color-action);
  color: var(--vz-color-text-inverse);
}

.vz-pagination__button:disabled,
.vz-pagination__button[aria-disabled="true"] {
  background: var(--vz-color-surface-muted);
  color: var(--vz-color-text-disabled);
  cursor: not-allowed;
}

@media (hover: hover) {
  .vz-pagination__button:not(:disabled):hover {
    background: var(--vz-color-action-soft-hover);
    border-color: var(--vz-color-action);
  }
}

/* 390 px yra bazė. Matrica tampa skaitytinų blokų seka, ne horizontaliu slinkimu. */
@media (max-width: 39.999rem) {
  .vz-capability {
    border: 0;
    overflow: visible;
  }

  .vz-capability__table,
  .vz-capability__table tbody,
  .vz-capability__table tr,
  .vz-capability__table th,
  .vz-capability__table td {
    display: block;
    inline-size: 100%;
  }

  .vz-capability__table thead {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .vz-capability__table tr {
    background: var(--vz-color-surface);
    border: var(--vz-border-width) solid var(--vz-color-border);
    border-radius: var(--vz-radius-md);
    margin-block-end: var(--vz-space-3);
    overflow: hidden;
  }

  .vz-capability__table td {
    align-items: center;
    display: grid;
    gap: var(--vz-space-3);
    grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 1fr);
  }

  .vz-capability__table td::before {
    color: var(--vz-color-text-muted);
    content: attr(data-label);
    font-size: var(--vz-font-size-caption);
    font-weight: var(--vz-font-weight-semibold);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .vz-capability__table td:first-child {
    display: block;
    padding-block: var(--vz-space-4);
  }

  .vz-capability__table td:first-child::before {
    content: none;
  }

  .vz-freshness {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vz-freshness__time,
  .vz-freshness__action {
    grid-column: 2;
    justify-self: start;
  }

  .vz-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .vz-pagination__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vz-pagination__button[data-page-number] {
    display: none;
  }
}

@media (min-width: 40rem) {
  .vz-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .vz-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  button.vz-data-state,
  a.vz-data-state,
  .vz-verdict[href],
  button.vz-verdict {
    min-height: var(--vz-size-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vz-skeleton,
  .vz-metric.is-loading .vz-metric__value::after,
  .vz-metric.is-loading .vz-metric__context::after,
  .vz-verdict.is-loading::after,
  .vz-media[data-kind="loading"]::after {
    animation: none;
  }
}