/**
 * The unified appraisal control under the seller's price.
 *
 * One soft card. Idle: a pill and a one-line hint. Open: a small heading, one
 * white row per provider (name, status badge, the figure, its label, the
 * details link), and a footnote. The seller's price stays the loud element on
 * the page: every figure here is two sizes smaller. Colours and radii are
 * tokens only; geometry is local.
 */

.bp-appraisal {
  margin-block-start: 14px;
  max-width: 560px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  color: var(--text);
}

.bp-appraisal *,
.bp-appraisal *::before,
.bp-appraisal *::after { box-sizing: border-box; }

/* The script toggles `hidden`; it must win over every display rule below. */
.bp-appraisal [hidden] { display: none !important; }

.bp-appraisal button {
  font: inherit;
  cursor: pointer;
}

/* ---------------------------------------------------------------- cta */

.bp-appraisal__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.bp-appraisal[data-state="open"] .bp-appraisal__cta { display: none; }

.bp-appraisal__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-block: 0;
  padding-inline: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: border-color .2s ease;
}

.bp-appraisal__trigger:hover,
.bp-appraisal__trigger:focus-visible { border-color: var(--ink); }

.bp-appraisal__spark {
  font-size: 13px;
  line-height: 1;
}

.bp-appraisal__hint {
  flex: 1 1 200px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- head */

.bp-appraisal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 12px;
  margin-block-end: 10px;
}

.bp-appraisal__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bp-appraisal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.bp-appraisal__subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.bp-appraisal__tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  font-size: 12px;
  color: var(--text-muted);
}

.bp-appraisal__updated:empty { display: none; }

.bp-appraisal__refresh {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bp-appraisal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-inline-end: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-secondary);
}

.bp-appraisal__close:hover,
.bp-appraisal__close:focus-visible { background: var(--surface); color: var(--ink); }

.bp-appraisal__close svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------- rows */

.bp-appraisal__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.bp-appraisal__row {
  padding: 10px 14px 10px;
  background: var(--surface);
}

.bp-appraisal__row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 6px;
}

.bp-appraisal__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
}

.bp-appraisal__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding-inline: 8px;
  border-radius: var(--r-full);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.bp-appraisal__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

.bp-appraisal__row[data-state="success"] .bp-appraisal__badge { background: var(--success-tint); color: var(--ink); }
.bp-appraisal__row[data-state="success"] .bp-appraisal__badge::before { background: var(--accent); }
.bp-appraisal__row[data-state="success"] .bp-appraisal__badge.is-stale { background: var(--warning-tint); color: var(--warning); }
.bp-appraisal__row[data-state="success"] .bp-appraisal__badge.is-stale::before { background: var(--warning); }
.bp-appraisal__row[data-state="error"] .bp-appraisal__badge::before { background: var(--error); }

.bp-appraisal__line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 16px;
}

.bp-appraisal__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 22px;
  min-width: 0;
}

.bp-appraisal__stat {
  display: grid;
  gap: 1px;
}

.bp-appraisal__stat + .bp-appraisal__stat {
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--line);
}

.bp-appraisal__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  unicode-bidi: isolate;
}

.bp-appraisal__value--sub { font-size: 20px; }

.bp-appraisal__k {
  font-size: 12px;
  color: var(--text-secondary);
}

.bp-appraisal__loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 13px;
  color: var(--text-muted);
}

.bp-appraisal__spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--line);
  border-inline-start-color: var(--ink);
  border-radius: 50%;
  animation: bp-appraisal-spin .8s linear infinite;
}

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

.bp-appraisal__novalue,
.bp-appraisal__pending,
.bp-appraisal__error {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 40px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.bp-appraisal__retry,
.bp-appraisal__more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bp-appraisal__retry {
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 700;
}

.bp-appraisal__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  text-decoration-color: var(--line);
}

.bp-appraisal__more:hover,
.bp-appraisal__more:focus-visible { text-decoration-color: currentColor; }

.bp-appraisal__more svg {
  width: 13px;
  height: 13px;
  transition: transform .2s ease;
}

.bp-appraisal__more[aria-expanded="true"] svg { transform: rotate(180deg); }

.bp-appraisal__meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--warning);
}

/* ------------------------------------------------------------ details */

.bp-appraisal__details {
  display: grid;
  gap: 10px;
  padding-block-start: 10px;
  margin-block-start: 8px;
  border-block-start: 1px dashed var(--line);
}

.bp-appraisal__gtitle {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.bp-appraisal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.bp-appraisal__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.bp-appraisal__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-block-start: .55em;
  border-radius: 50%;
  background: var(--accent);
}

.bp-appraisal__group--neutral .bp-appraisal__list li::before { background: var(--line); }

.bp-appraisal__list li small {
  font-size: 12.5px;
  color: var(--text-muted);
}

.bp-appraisal__facts {
  display: grid;
  gap: 4px;
  margin: 0;
}

.bp-appraisal__fact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13.5px;
}

.bp-appraisal__fact dt { color: var(--text-muted); }
.bp-appraisal__fact dd { margin: 0; color: var(--text); }

.bp-appraisal__fine {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- note */

.bp-appraisal__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 600px) {
  .bp-appraisal { max-width: none; padding: 10px 12px; }
  .bp-appraisal__trigger { width: 100%; justify-content: center; }
  .bp-appraisal__hint { flex-basis: 100%; padding-inline-start: 0; border-inline-start: 0; }
  .bp-appraisal__row { padding-inline: 12px; }
  .bp-appraisal__value { font-size: 20px; }
  .bp-appraisal__value--sub { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-appraisal__spinner { animation-duration: 2s; }
  .bp-appraisal__more svg { transition: none; }
}