/* Playground (/play) — стилі СТОРІНКИ конструктора навколо картки (перемикачі, пікери, сцена,
   дії, меню). Перенесено з <style> мокапа (analytics/lab/content_engine/p5_play_data/mockup_v7/
   index.html) у область :where(.kmp-play), щоб класи мокапа (.tab, .btn, .menu, .box …) не били
   глобальні стилі продукту. :where() — навмисно: у нього нульова специфічність, тож кожне правило
   важить рівно стільки, скільки в мокапі, і НЕ перебиває card.css усередині картки (.rp, .rn, .k …).
   З простим префіксом .kmp-play (+1 клас) правила сторінки перемагали правила картки — K.testAll
   на сайті давав 669 поломок верстки з 9 747 (21.10). Шапку лендинга, кікер, h1 і лід мокапа НЕ
   перенесено: їх дає шел застосунку і app/(app)/play/page.tsx. Стилі картки — card.css (.card).
   Цей файл НАШ: scripts/play-sync.sh його не перетирає.
   #pngSheet — діалог «PNG ready», який движок вішає в <body>, поза .kmp-play: його класи тут же. */

/* ---------- токени: кольори — змінні продукту (globals.css, DS v8), розміри — як у мокапі ---------- */
.kmp-play,
#pngSheet {
  --page: var(--color-page);
  --card: var(--color-card);
  --soft: var(--color-soft);
  --line: var(--color-line);
  --line-2: var(--color-line-2);
  --ink: var(--color-ink);
  --body: var(--color-body);
  --mut: var(--color-mut);
  --faint: var(--color-faint);
  --acc: var(--color-acc);
  --acc-ink: var(--color-acc-ink);
  --acc-8: var(--color-acc-8);
  --acc-14: var(--color-acc-14);
  --acc-55: var(--color-acc-55);
  --acc-hover: var(--color-acc-hover);
  --neu: var(--color-neu);
  --neu-2: var(--color-neu-2);
  --ctl-edge: var(--color-ctl-edge);
  --r-ctl: 9px;
  --r-row: 8px;
  --r-item: 7px;
  --r-menu: 11px;
  --r-card: 14px;
  --sh-card: 0 0 0 1px var(--line);
  --sh-menu: 0 6px 24px rgba(26, 26, 29, 0.07);
  --t-meta: 10px;
  --t-2xs: 10.5px;
  --t-ctl: 11.5px;
  --t-ui: 12.5px;
  --t-base: 13px;
  --t-title: 14.5px;
  /* шрифти — next/font продукту (Inter Tight, JetBrains Mono), не Google Fonts мокапа */
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  color: var(--body);
  font: var(--t-base) / 1.5 var(--sans);
}

/* картка оголошує свої --sans/--mono ("Inter Tight" за іменем) — на сайті шрифт приходить через
   next/font під іншим іменем сім'ї, тож перевизначаємо їх на рівні картки (специфічність 0,2,0) */
.kmp-play .card {
  --sans: var(--font-sans);
  --mono: var(--font-mono);
}

:where(.kmp-play) .rp,
:where(#pngSheet) .rp {
  font-family: var(--mono);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--acc-ink);
}
:where(.kmp-play) .rn {
  color: var(--ink);
  font-weight: 500;
}

.kmp-play-loading {
  display: block;
  margin: 24px 0 0;
  font-size: var(--t-ui);
  color: var(--mut);
}

/* ---------- перемикачі: Who (kinds) і Compare by (tabs) ---------- */
:where(.kmp-play) .kinds {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
:where(.kmp-play) .kinds::-webkit-scrollbar {
  display: none;
}
:where(.kmp-play) .kind {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--mut);
  cursor: pointer;
  white-space: nowrap;
}
:where(.kmp-play) .kind:hover {
  color: var(--ink);
  border-color: var(--line-2);
}
:where(.kmp-play) .kind[aria-selected="true"] {
  color: var(--acc-ink);
  border-color: var(--acc);
  background: var(--acc-8);
}
:where(.kmp-play) .soon {
  flex: none;
  margin-left: 6px;
  font-size: var(--t-ctl);
  color: var(--faint);
  white-space: nowrap;
}
:where(.kmp-play) .soon em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
:where(.kmp-play) .tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
:where(.kmp-play) .tabs::-webkit-scrollbar {
  display: none;
}
:where(.kmp-play) .tab {
  flex: none;
  background: none;
  border: 0;
  padding: 0 12px;
  height: 36px;
  font-size: var(--t-ui);
  color: var(--mut);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
:where(.kmp-play) .tab:hover {
  color: var(--ink);
}
:where(.kmp-play) .tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 500;
}
:where(.kmp-play) .tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--acc);
  border-radius: 2px;
}
:where(.kmp-play) .hint {
  margin: 12px 0 0;
  font-size: var(--t-ui);
  color: var(--mut);
}

/* ---------- пікери ---------- */
:where(.kmp-play) .pickrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
:where(.kmp-play) .fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 0 1 240px;
}
:where(.kmp-play) .fld.narrow {
  flex: 0 1 164px;
}
:where(.kmp-play) .box {
  display: flex;
  align-items: center;
  height: 36px;
  border-radius: var(--r-ctl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 0 12px;
  gap: 2px;
}
:where(.kmp-play) .box:hover {
  box-shadow: inset 0 0 0 1px var(--neu);
}
:where(.kmp-play) .box:focus-within {
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
:where(.kmp-play) .box .rp {
  font-size: var(--t-ctl);
  margin-right: 2px;
}
:where(.kmp-play) .box input,
:where(.kmp-play) .box select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  height: 34px;
  font-size: var(--t-ui);
  color: var(--ink);
  outline: none;
  padding: 0;
  font-weight: 500;
}
:where(.kmp-play) .box select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 16px;
  background:
    linear-gradient(45deg, transparent 50%, var(--faint) 50%) right 5px center /
    5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--faint) 50%) right 0 center /
    5px 5px no-repeat;
}
:where(.kmp-play) .box input::placeholder {
  color: var(--faint);
  font-weight: 400;
}
:where(.kmp-play) .box input[aria-invalid="true"] {
  color: var(--acc-ink);
}
:where(.kmp-play) .sub {
  font-size: var(--t-2xs);
  color: var(--mut);
  min-height: 16px;
  padding-left: 12px;
  line-height: 16px;
}
:where(.kmp-play) .sub.err {
  color: var(--acc-ink);
}
:where(.kmp-play) .iconbtn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-ctl);
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--body);
  cursor: pointer;
  font-size: var(--t-base);
}
:where(.kmp-play) .iconbtn:hover {
  background: var(--soft);
  color: var(--ink);
}
:where(.kmp-play) .quiet {
  margin-left: auto;
  height: 36px;
  border: 0;
  background: none;
  color: var(--mut);
  font-size: var(--t-ui);
  font-weight: 500;
  cursor: pointer;
  padding: 0 4px;
}
:where(.kmp-play) .quiet:hover {
  color: var(--ink);
}
:where(.kmp-play) .trynext {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
  min-height: 24px;
}
:where(.kmp-play) .pgmeta,
:where(#pngSheet) .pgmeta {
  font: 500 var(--t-meta) / 1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}
:where(.kmp-play) .chip {
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-ctl);
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-ctl);
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
}
:where(.kmp-play) .chip:hover {
  background: var(--soft);
  color: var(--ink);
}
:where(.kmp-play) .chip .rn {
  font-weight: 500;
}

/* ---------- сцена ---------- */
:where(.kmp-play) .scene {
  margin-top: 24px;
  background: var(--page);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where(.kmp-play) .stagebar,
:where(.kmp-play) .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
:where(.kmp-play) .stagebar {
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}
:where(.kmp-play) .angle {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--t-ui);
  color: var(--mut);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: left;
}
:where(.kmp-play) .angle b {
  color: var(--ink);
  font-weight: 500;
}
:where(.kmp-play) .angle .car {
  color: var(--faint);
  font-size: var(--t-ctl);
}
:where(.kmp-play) .fmt {
  display: flex;
  gap: 4px;
  flex: none;
}
:where(.kmp-play) .tok {
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-ctl);
  border: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-ctl);
  color: var(--mut);
  cursor: pointer;
}
:where(.kmp-play) .tok[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
  box-shadow: none;
}
:where(.kmp-play) .tok:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
:where(.kmp-play) .pv {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--page);
}
:where(.kmp-play) .pv > .scaler {
  transform-origin: 0 0;
  position: absolute;
  left: 0;
  top: 0;
}
:where(.kmp-play) .actions {
  margin-top: 16px;
}
:where(.kmp-play) .btn,
:where(#pngSheet) .btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-ctl);
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
:where(.kmp-play) .btn:hover,
:where(#pngSheet) .btn:hover {
  background: var(--soft);
}
:where(.kmp-play) .btn.primary {
  background: var(--ink);
  color: var(--page);
  box-shadow: none;
}
:where(.kmp-play) .btn.primary:hover {
  background: #2c2c31;
}
:where(.kmp-play) .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
:where(.kmp-play) .btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}
:where(.kmp-play) .status {
  margin-left: auto;
  font-size: var(--t-ctl);
  color: var(--mut);
  min-height: 16px;
}
:where(.kmp-play) .empty {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 24px;
}
:where(.kmp-play) .empty h3 {
  margin: 0 0 8px;
  font-size: var(--t-title);
  color: var(--ink);
  font-weight: 600;
}
:where(.kmp-play) .empty p {
  margin: 0;
  font-size: var(--t-ui);
  color: var(--mut);
}

/* ---------- меню кутів і діалог PNG ---------- */
:where(.kmp-play) .menu,
:where(#pngSheet).menu {
  position: absolute;
  z-index: var(--z-popover, 80);
  background: var(--card);
  border-radius: var(--r-menu);
  box-shadow:
    0 0 0 1px var(--line),
    var(--sh-menu);
  padding: 4px;
  min-width: 220px;
}
:where(.kmp-play) .menu[hidden] {
  display: none;
}
:where(.kmp-play) .mi {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  background: none;
  border-radius: var(--r-row);
  font-size: var(--t-ui);
  color: var(--body);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
:where(.kmp-play) .mi:hover,
:where(.kmp-play) .mi:focus-visible {
  background: var(--soft);
  color: var(--ink);
}
:where(.kmp-play) .mi[aria-checked="true"] {
  color: var(--ink);
  font-weight: 500;
}
:where(.kmp-play) .mi .ck {
  width: 12px;
  color: var(--acc-ink);
  flex: none;
}
:where(.kmp-play) .hair {
  height: 1px;
  background: var(--line-2);
  margin: 4px 0;
}
:where(.kmp-play) .mnote,
:where(#pngSheet) .mnote {
  padding: 0 8px 8px;
  font-size: var(--t-2xs);
  color: var(--mut);
  white-space: normal;
  max-width: 340px;
}
:where(.kmp-play) #angleMenu {
  left: 0;
  top: 28px;
}

/* ---------- телефон: дії — у смузі внизу екрана (зона великого пальця) ---------- */
:where(.kmp-play) .mbar {
  display: none;
}
@media (max-width: 760px) {
  :where(.kmp-play) .fld {
    flex: 1 1 140px;
  }
  :where(.kmp-play) .quiet {
    margin-left: 0;
  }
  :where(.kmp-play) .trynext {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  :where(.kmp-play) .trynext .chip {
    flex: none;
  }
  :where(.kmp-play) .scene {
    padding: 16px 12px;
    border-radius: var(--r-card);
  }
  :where(.kmp-play) .actions {
    display: none;
  }
  /* у потоці під карткою, не фіксовано: фіксована смуга билася з cookie-банером (e2e B, 21.10) */
  :where(.kmp-play) .mbar {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 0 0 8px;
  }
  :where(.kmp-play) .mbar .btn {
    flex: 1;
    justify-content: center;
  }
}