/*
 * Наочні блоки збірки відгуків (inc/reviews-widgets.php).
 * Вантажиться лише на сторінці запису reviews. Кольори — тільки з токенів.
 */

/* ---------- Пульс відгуків ---------- */
.dpls-pulse { margin: 28px 0 32px; padding: 24px; border: 1px solid var(--dpls-line); border-radius: var(--dpls-r-lg); background: linear-gradient(180deg, var(--dpls-accent-soft), var(--dpls-surface) 140px); }
.dpls-pulse__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 18px; }
.dpls-pulse__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 800 13px/1.3 var(--dpls-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--dpls-ink); }
.dpls-pulse__title .dpls-ico { color: var(--dpls-pulse); }
.dpls-pulse__sub { margin: 0; font-size: 14px; color: var(--dpls-ink-muted); }
.dpls-pulse__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.dpls-pulse__label { margin: 0 0 8px; font: 700 13px/1.3 var(--dpls-font-display); color: var(--dpls-ink-muted); }
.dpls-pulse__score { display: flex; align-items: center; gap: 18px; }
.dpls-pulse__scoretext { min-width: 0; }
.dpls-pulse__basis, .dpls-pulse__public { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--dpls-ink-faint); }
.dpls-pulse__public { color: var(--dpls-ink-muted); }
.dpls-pulse__note { margin: 14px 0 0; font-size: 13px; color: var(--dpls-ink-faint); }

/* Кільце оцінки: довжина дуги через pathLength=100, тож dasharray = відсоток. */
.dpls-ring { position: relative; flex: none; width: 112px; height: 112px; }
.dpls-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dpls-ring circle { fill: none; stroke-width: 11; }
.dpls-ring__track { stroke: var(--dpls-surface-alt); }
.dpls-ring__value { stroke: var(--dpls-ok); stroke-linecap: round; }
.dpls-ring.is-mid .dpls-ring__value { stroke: var(--dpls-star); }
.dpls-ring.is-bad .dpls-ring__value { stroke: var(--dpls-pulse); }
.dpls-ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dpls-ring__num { font: 800 32px/1 var(--dpls-font-display); font-variant-numeric: tabular-nums; color: var(--dpls-ink); }
.dpls-ring__of { margin-top: 2px; font-size: 12px; color: var(--dpls-ink-faint); }

/* Смуга тону. */
.dpls-tone { display: flex; gap: 3px; height: 14px; border-radius: var(--dpls-r-pill); overflow: hidden; background: var(--dpls-surface-alt); }
.dpls-tone__seg { min-width: 6px; }
.dpls-tone__seg.is-positive, .dpls-tone__dot.is-positive { background: var(--dpls-ok); }
.dpls-tone__seg.is-mixed, .dpls-tone__dot.is-mixed { background: var(--dpls-star); }
.dpls-tone__seg.is-negative, .dpls-tone__dot.is-negative { background: var(--dpls-pulse); }
.dpls-tone__legend { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.dpls-tone__legend li { display: flex; align-items: center; gap: 8px; }
.dpls-tone__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dpls-tone__pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Терези: плюси й мінуси на одній шкалі частоти. */
.dpls-balance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--dpls-line); }
.dpls-balance__head { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font: 800 15px/1.2 var(--dpls-font-display); }
.dpls-balance__col.is-plus .dpls-balance__head { color: var(--dpls-ok); }
.dpls-balance__col.is-minus .dpls-balance__head { color: var(--dpls-pulse-ink); }
.dpls-balance__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dpls-balance__item { border-radius: var(--dpls-r-sm); }
.dpls-balance__item > summary, div.dpls-balance__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: var(--dpls-r-sm); list-style: none; }
.dpls-balance__item > summary { cursor: pointer; }
.dpls-balance__item > summary::-webkit-details-marker { display: none; }
.dpls-balance__item > summary:hover { background: var(--dpls-surface-alt); }
.dpls-balance__text { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.35; }
.dpls-balance__item > summary .dpls-balance__text { text-decoration: underline dotted var(--dpls-line-strong); text-underline-offset: 3px; }
.dpls-balance__n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 700; color: var(--dpls-ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dpls-balance__meter { grid-column: 1; grid-row: 2; display: block; height: 6px; border-radius: var(--dpls-r-pill); background: var(--dpls-surface-alt); overflow: hidden; }
.dpls-balance__meter > span { display: block; height: 100%; border-radius: inherit; }
.is-plus .dpls-balance__meter > span { background: var(--dpls-ok); }
.is-minus .dpls-balance__meter > span { background: var(--dpls-pulse); }
/* Частота невідома: штрихова смуга замість заповненої, щоб не вдавати точність. */
.dpls-balance__meter.is-unknown { background: transparent; border: 1px dashed var(--dpls-line-strong); }
.dpls-balance__meter.is-unknown > span { display: none; }
.dpls-balance__example { margin: 4px 0 6px; padding: 8px 12px; border-left: 3px solid var(--dpls-line-strong); font-size: 14px; line-height: 1.5; color: var(--dpls-ink-muted); font-style: italic; }

/* ---------- Перемикач сортування ---------- */
.dpls-sorter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dpls-sorter[hidden] { display: none; }
.dpls-sorter__label { font-size: 13px; color: var(--dpls-ink-faint); }
.dpls-sorter .dpls-chip { cursor: pointer; font: inherit; font-size: 13px; }

/* ---------- Оцінки за критеріями ---------- */
.dpls-crit { margin: 22px 0; }
.dpls-crit__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--dpls-line); border-radius: var(--dpls-r-md); overflow: hidden; background: var(--dpls-surface); }
.dpls-crit__list > li + li { border-top: 1px solid var(--dpls-line); }
.dpls-crit__row > summary { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 1fr) 42px minmax(78px, auto) 18px; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.dpls-crit__row > summary::-webkit-details-marker { display: none; }
.dpls-crit__row > summary:hover { background: var(--dpls-surface-alt); }
.dpls-crit__row[open] > summary { background: var(--dpls-accent-soft); }
.dpls-crit__row[open] > summary .dpls-ico { transform: rotate(180deg); }
.dpls-crit__row > summary .dpls-ico { color: var(--dpls-ink-faint); transition: transform .2s ease; }
.dpls-crit__name { font: 700 16px/1.3 var(--dpls-font-display); }
.dpls-crit__meter, .dpls-cmp__meter { display: block; height: 8px; border-radius: var(--dpls-r-pill); background: var(--dpls-surface-alt); overflow: hidden; }
.dpls-crit__meter > span, .dpls-cmp__meter > span { display: block; height: 100%; border-radius: inherit; background: var(--dpls-ok); }
.dpls-crit__meter.is-mid > span, .dpls-cmp__meter.is-mid > span { background: var(--dpls-star); }
.dpls-crit__meter.is-bad > span, .dpls-cmp__meter.is-bad > span { background: var(--dpls-pulse); }
.dpls-crit__val { font: 800 18px/1 var(--dpls-font-display); font-variant-numeric: tabular-nums; text-align: right; }
.dpls-crit__n { font-size: 13px; color: var(--dpls-ink-faint); white-space: nowrap; }
.dpls-crit__more { padding: 2px 16px 16px; font-size: 15px; line-height: 1.6; color: var(--dpls-ink-muted); }
.dpls-crit__more p { margin: 0 0 8px; }
.dpls-crit__more blockquote { margin: 0; padding: 8px 14px; border-left: 3px solid var(--dpls-accent-line); background: var(--dpls-surface-alt); border-radius: 0 var(--dpls-r-sm) var(--dpls-r-sm) 0; font-style: italic; }
.dpls-crit__more blockquote p { margin: 0; }
.dpls-crit__foot, .dpls-cmp__foot { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--dpls-ink-faint); }

/* ---------- Порівняння ---------- */
.dpls-cmp { margin: 22px 0; }
.dpls-cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--dpls-line); border-radius: var(--dpls-r-md); overflow: hidden; background: var(--dpls-surface); font-size: 15px; }
.dpls-prose .dpls-cmp__table th, .dpls-prose .dpls-cmp__table td, .dpls-cmp__table th, .dpls-cmp__table td { padding: 12px 14px; border: 0; border-top: 1px solid var(--dpls-line); text-align: left; vertical-align: top; }
.dpls-cmp__table thead th { border-top: 0; background: var(--dpls-surface-alt); font: 700 13px/1.3 var(--dpls-font-display); color: var(--dpls-ink-muted); }
.dpls-cmp__table tbody th { font: 700 15px/1.35 var(--dpls-font-display); }
.dpls-cmp__table tr.is-self { background: var(--dpls-accent-soft); }
.dpls-cmp__tag { display: block; margin-top: 4px; font: 600 12px/1.2 var(--dpls-font-body); color: var(--dpls-accent-hover); }
.dpls-cmp__rate { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dpls-cmp__meter { width: 56px; }

/* ---------- Джерела ---------- */
.dpls-sources { margin: 0 0 16px; border: 1px solid var(--dpls-line); border-radius: var(--dpls-r-md); background: var(--dpls-surface); }
.dpls-sources > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; cursor: pointer; }
.dpls-sources > summary .dpls-ico { color: var(--dpls-accent); }
.dpls-sources ul { margin: 0; padding: 0 16px 14px 42px; font-size: 14px; line-height: 1.5; }
.dpls-sources li { margin: 4px 0; }
.dpls-sources__title { display: block; color: var(--dpls-ink-faint); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
	.dpls-crit__row > summary .dpls-ico { transition: none; }
}

@media (max-width: 768px) {
	.dpls-pulse { padding: 18px 16px; }
	.dpls-pulse__top, .dpls-balance { grid-template-columns: minmax(0, 1fr); }
	.dpls-ring { width: 96px; height: 96px; }
	.dpls-ring__num { font-size: 27px; }
	.dpls-crit__row > summary { grid-template-columns: minmax(0, 1fr) 42px 18px; gap: 6px 12px; padding: 12px 14px; }
	.dpls-crit__name { grid-column: 1; }
	.dpls-crit__val { grid-column: 2; grid-row: 1; }
	.dpls-crit__row > summary .dpls-ico { grid-column: 3; grid-row: 1; }
	.dpls-crit__meter { grid-column: 1 / -1; grid-row: 2; }
	.dpls-crit__n { grid-column: 1 / -1; grid-row: 3; }

	/* Таблиця порівняння — картками. */
	.dpls-cmp__table, .dpls-cmp__table tbody, .dpls-cmp__table tr, .dpls-cmp__table th, .dpls-cmp__table td { display: block; }
	.dpls-cmp__table thead { display: none; }
	.dpls-cmp__table { border: 0; background: transparent; }
	.dpls-cmp__table tbody { display: grid; gap: 10px; }
	.dpls-cmp__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--dpls-line); border-radius: var(--dpls-r-md); background: var(--dpls-surface); overflow: hidden; }
	.dpls-cmp__table tr > th, .dpls-cmp__table tr > td:last-child { grid-column: 1 / -1; }
	.dpls-prose .dpls-cmp__table th, .dpls-prose .dpls-cmp__table td, .dpls-cmp__table th, .dpls-cmp__table td { border-top: 0; padding: 6px 14px; }
	.dpls-cmp__table tbody th { padding-top: 12px; }
	.dpls-cmp__table td:last-child { padding-bottom: 12px; }
	.dpls-cmp__table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--dpls-ink-faint); }
}