/* Локальные стили прототипа hello-playground */

/* Маркер для самопроверки: скрипт читает это значение */
:root { --hp-local-css: 1; }

.hp-main { padding-block: var(--dp-space-5) var(--dp-space-8); }
.hp-back { font-size: var(--dp-size-sm); }

.hp-hero { margin-bottom: var(--dp-space-6); }
.hp-hero p { max-width: 62ch; }
.hp-badge {
  display: inline-block; margin-bottom: var(--dp-space-3);
  padding: 3px 10px; border-radius: var(--dp-radius-full);
  background: var(--dp-accent-weak); color: var(--dp-accent);
  font-size: var(--dp-size-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}

.hp-check { margin-bottom: var(--dp-space-5); }
.hp-list { list-style: none; margin: 0 0 var(--dp-space-4); padding: 0; display: grid; gap: var(--dp-space-2); }
.hp-list li { display: flex; align-items: center; gap: var(--dp-space-3); font-size: var(--dp-size-sm); }
.hp-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--dp-text-faint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-text-faint) 18%, transparent);
  transition: background var(--dp-transition), box-shadow var(--dp-transition);
}
li.is-ok   .hp-dot { background: var(--dp-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-success) 20%, transparent); }
li.is-fail .hp-dot { background: var(--dp-danger);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-danger) 20%, transparent); }
.hp-env { font-size: var(--dp-size-xs); font-family: var(--dp-font-mono); margin: 0; word-break: break-all; }

.hp-grid { display: grid; gap: var(--dp-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.hp-counter { display: flex; align-items: center; gap: var(--dp-space-4); }
.hp-counter output {
  font-size: var(--dp-size-xl); font-weight: 650; font-variant-numeric: tabular-nums;
  min-width: 3ch; text-align: center;
}

.hp-logo { transition: transform 400ms cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
.hp-logo.is-spun { transform: rotate(360deg) scale(1.06); }

.hp-swatches { display: flex; flex-wrap: wrap; gap: var(--dp-space-2); }
.hp-swatches span {
  padding: var(--dp-space-2) var(--dp-space-3); border-radius: var(--dp-radius-md);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--c); font-size: var(--dp-size-xs); font-weight: 550;
}