/* screens/20_player.css — плеер сессии (PL-01 … PL-17). Только токены; солнце и луна рисуются в canvas (20_player.js).
   Корень экранов на небе — .pl-play (--port 390 × 844 / --land 844 × 390). */

/* системная строка и полоска «домой» поверх неба — белые */
.app:has(.pl-play) .statusbar { color: var(--on-scene); background: transparent; }
.app:has(.pl-play) .homebar i { background: var(--on-scene); opacity: .6; }

/* ───────── небо ───────── */
.pl-play { position: relative; height: 100%; min-height: 100%; overflow: hidden; display: flex; flex-direction: column;
  color: var(--on-scene); background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 66%, var(--sky-3) 100%); }
.pl-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-sky .pl-star { fill: var(--star); opacity: .7; }
.pl-sky .pl-spark { fill: var(--spark); }
.pl-sky .pl-hill-1 { fill: var(--hill-1); }
.pl-sky .pl-hill-2 { fill: var(--hill-2); }
.pl-bar, .pl-stage, .pl-sub, .pl-foot, .pl-center, .pl-bottom, .pl-pause__body { position: relative; z-index: 1; }

/* ───────── шапка: тема сессии, фаза, кнопки прототипа ───────── */
.pl-bar { flex: none; display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: var(--status-h) var(--gutter) 0; }
.pl-play--land .pl-bar { padding-top: var(--s-2); min-height: 52px; }
.pl-bar__txt { flex: 1; min-width: 0; }
.pl-bar__over { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track);
  text-transform: uppercase; color: var(--date); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar__title { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-bold); color: var(--on-scene);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pl-chip { flex: none; min-height: 40px; border: 0; border-radius: var(--r-pill); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--scrim); box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene);
  font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); white-space: nowrap; }
.pl-chip--proto { box-shadow: none; outline: 1px dashed var(--scrim-line); outline-offset: -1px; }
.pl-chip[aria-pressed="true"] { background: var(--sun); color: var(--on-sun); outline-color: transparent; }
.pl-icbtn { flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim); box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene); }

/* ───────── сцена солнца: фон — само небо ───────── */
.pl-stage.sun-stage { flex: 1 1 auto; min-height: 0; height: auto; border-radius: 0; background: transparent; }
.pl-stage--short.sun-stage { flex: 0 0 260px; }
.pl-hint { position: absolute; z-index: 2; top: var(--s-2); left: 50%; transform: translateX(-50%); min-height: 40px; border: 0;
  border-radius: var(--r-pill); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--scrim); box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene); font-size: var(--fs-2); font-weight: var(--fw-medium); }
.pl-phrase { position: absolute; z-index: 2; left: var(--s-5); right: var(--s-5); bottom: var(--s-4); text-align: center;
  font-size: var(--fs-4); line-height: 26px; font-weight: var(--fw-semibold); color: var(--on-scene); text-wrap: balance; }
.pl-speed { position: absolute; z-index: 2; left: 50%; bottom: var(--s-3); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.pl-speed__val { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--on-scene-2); font-variant-numeric: tabular-nums; }
.pl-speed__val b { color: var(--on-scene); font-weight: var(--fw-semibold); }

/* ───────── субтитр реплики ───────── */
.pl-sub { flex: none; min-height: 78px; margin: var(--s-2) var(--s-5) 0; text-align: center; font-size: var(--fs-4); line-height: 26px;
  font-weight: var(--fw-medium); color: var(--on-scene); text-wrap: balance; }
.pl-paused { flex: none; margin: var(--s-1) 0 0; text-align: center; font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold);
  letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--date); }

/* ───────── низ: таймеры, полоска, пауза, «Завершить раньше» ───────── */
.pl-foot { flex: none; padding: var(--s-4) var(--s-5) calc(var(--home-h) + var(--s-1)); }
.pl-time { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-2); line-height: var(--lh-2);
  color: var(--on-scene-2); font-variant-numeric: tabular-nums; }
.pl-time b { font-size: var(--fs-3); font-weight: var(--fw-semibold); color: var(--on-scene); }
.pl-track { position: relative; height: 4px; margin-top: var(--s-2); border-radius: var(--r-pill); overflow: hidden; }
.pl-track::before { content: ""; position: absolute; inset: 0; background: var(--on-scene); opacity: .18; }
.pl-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--fill-a), var(--fill-b)); }
.pl-ctrls { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); margin-top: var(--s-4); }
.pl-pp { width: 72px; height: 72px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--on-primary); color: var(--primary); box-shadow: var(--sh-2); }
.pl-pp .ic { stroke-width: 2.6; }
.pl-pp:active { transform: scale(.97); }
.pl-end { min-height: var(--tap); border: 0; padding: 0 var(--s-4); background: transparent; color: var(--on-scene-2);
  font-size: var(--fs-2); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }

/* горизонтально: низ в одну строку — время слева, пауза по центру, «Завершить раньше» справа */
.pl-play--land .pl-sub { min-height: 48px; margin-top: 0; font-size: var(--fs-3); line-height: var(--lh-3); }
.pl-play--land .pl-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--s-4); padding: var(--s-1) var(--s-5) var(--s-3); }
.pl-play--land .pl-track { grid-column: 1 / -1; grid-row: 1; margin: 0 0 var(--s-2); }
.pl-play--land .pl-time { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 0; }
.pl-play--land .pl-ctrls { display: contents; }
.pl-play--land .pl-pp { grid-column: 2; grid-row: 2; width: 56px; height: 56px; }
.pl-play--land .pl-end { grid-column: 3; grid-row: 2; justify-self: end; }
.pl-play--land .pl-paused { position: absolute; top: 60px; left: 0; right: 0; }

/* ───────── лист выбора / шкалы (фазы choice и scale; PL-02, PL-15) ───────── */
.pl-sheet { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border-radius: var(--r-2) var(--r-2) 0 0; background: var(--bg); color: var(--ink); }
.pl-sheet__in { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: var(--s-3) var(--gutter) calc(var(--home-h) + var(--s-2)); }
.pl-sheet__in::-webkit-scrollbar { display: none; }
.pl-sheet__grab { width: 40px; height: 4px; margin: 0 auto var(--s-3); border-radius: var(--r-pill); background: var(--ink-3); opacity: .35; }
.pl-sheet__over { padding: 0 var(--s-1); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track);
  text-transform: uppercase; color: var(--accent-ink); }
.pl-sheet__title { margin-top: var(--s-1); padding: 0 var(--s-1); font-size: var(--fs-4); line-height: 26px; font-weight: var(--fw-bold); color: var(--ink); }
.pl-sheet .pick, .pl-scale { margin-top: var(--s-4); }
.pl-group + .pl-group { margin-top: var(--s-5); }
.pl-group__label { margin: var(--s-4) var(--s-1) 0; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); color: var(--ink-2); }
.pl-group__label + .pick { margin-top: var(--s-2); }
.pl-own[hidden] { display: none; }
.pl-own .field { margin-top: var(--s-3); }
.pl-scale .scale__nums span { cursor: pointer; }
.pl-acts { margin-top: var(--s-5); display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); }
.pl-acts .btn--ghost { align-self: center; }
.pl-sheet--static { flex: none; }
.pl-sheet--static .pl-sheet__in { overflow: visible; padding-top: var(--s-5); }

/* вертикально, фаза выбора: солнце сверху поменьше, лист занимает остальное */
.pl-play--port.pl-play--ask .pl-stage { flex: 0 0 200px; }
/* горизонтально, фаза выбора: солнце слева, лист справа */
.pl-play--land.pl-play--ask .pl-stage { width: 44%; }
.pl-play--land.pl-play--ask .pl-sheet { position: absolute; top: 60px; right: 0; bottom: 0; width: 56%; border-radius: var(--r-2) 0 0 0; }
.pl-play--land.pl-play--ask .pl-sheet__in { padding: var(--s-4) var(--s-5) var(--s-4); }
.pl-play--land.pl-play--ask .pl-sheet__grab { display: none; }

/* ───────── PL-ROT, PL-P: текст на небе ───────── */
.pl-center { flex: none; padding: 0 var(--s-6); text-align: center; }
.pl-h1 { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--on-scene); }
.pl-text { margin-top: var(--s-2); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--on-scene-2); }
.pl-bottom { flex: none; margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--gutter) calc(var(--home-h) + var(--s-3)); }
.btn.pl-btn-light { background: var(--on-primary); color: var(--primary); box-shadow: var(--sh-2); }
.btn.pl-btn-light .btn__play { background: var(--primary-soft); color: var(--primary); }
.btn.pl-btn-onsky { background: transparent; color: var(--on-scene); box-shadow: inset 0 0 0 2px var(--scrim-line); }
.btn--ghost.pl-btn-onsky { box-shadow: none; color: var(--on-scene-2); align-self: center; }
.pl-rot__ic { width: 88px; height: 88px; margin: 0 auto var(--s-5); border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim); box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene); }
.pl-rot__ic .ic { animation: pl-turn 3.2s ease-in-out infinite; }
@keyframes pl-turn { 0%, 25% { transform: rotate(0); } 50%, 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .pl-rot__ic .ic { animation: none; transform: rotate(-90deg); } }

.pl-pause__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pl-pause__txt { flex: none; padding: 0 var(--s-5) calc(var(--home-h) + var(--s-3)); text-align: center; }
.pl-pause__btns .btn { width: 100%; }
.pl-pause__btns { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.pl-play--land .pl-pause__body { flex-direction: row; align-items: center; }
.pl-play--land .pl-pause__body .pl-stage { align-self: stretch; }
.pl-play--land .pl-pause__txt { flex: 0 0 420px; padding: 0 var(--s-6) 0 0; text-align: left; }
.pl-play--land .pl-pause__btns { flex-direction: row; }
.pl-play--land .pl-pause__btns .btn { flex: 1; }

/* ───────── PL-01 подготовка ───────── */
.pl-prep__title { margin-top: var(--s-1); }
.pl-prep__text { margin: var(--s-3) var(--s-1) 0; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink); }
.pl-prep__list { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); list-style: none; border-radius: var(--r-1); background: var(--field);
  display: flex; flex-direction: column; gap: var(--s-2); }
.pl-prep__list li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); color: var(--ink-2); }
.pl-prep__list .ic { color: var(--accent); }

/* ───────── PL-03, PL-17: текст видео ───────── */
.pl-tcard { margin-top: var(--s-5); }
.pl-transcript { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.pl-transcript p { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }

/* ───────── PL-03 «Мария о сессии»: видео-обложка + блок доверия (правки 20.10) ───────── */
/* обложка: фото Марии под плашкой h.video; плашка становится прозрачной, снизу — небо «Закат» под подпись */
.pl-vid { position: relative; overflow: hidden; border-radius: var(--r-1); box-shadow: var(--sh-2);
  background: linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); }
.pl-vid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  transform: scale(1.32); transform-origin: 48% 26%; }
.pl-vid .video { position: relative; z-index: 1; border-radius: 0;
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--sky-1) 50%, transparent) 72%, color-mix(in srgb, var(--sky-1) 90%, transparent) 100%),
    linear-gradient(160deg, color-mix(in srgb, var(--sky-2) 10%, transparent) 0%, color-mix(in srgb, var(--sky-3) 14%, transparent) 100%); }
/* play — внизу слева, рядом подпись; лицо Марии остаётся открытым */
.pl-vid .video__play { position: absolute; left: var(--s-4); bottom: var(--s-4); width: 60px; height: 60px; color: var(--on-primary);
  background: var(--primary); box-shadow: 0 0 0 6px color-mix(in srgb, var(--on-scene) 22%, transparent), var(--sh-2);
  animation: joy-breathe 4s ease-in-out infinite; --breathe: 1.07; }
.pl-vid .video__label { left: calc(var(--s-4) + 60px + var(--s-4)); right: 76px; bottom: calc(var(--s-4) + 18px);
  font-size: var(--fs-3); line-height: var(--lh-3); }
.pl-vid .video__time { top: var(--s-4); right: var(--s-4); bottom: auto; }

/* доверие (22.10): полоса lavender из ядра + стеклянные карточки. Стекло ядра (--glass) рассчитано на тёмные тона,
   на светлой полосе — полупрозрачный --surface с размытием (в тёмной теме --surface полосы — на ступень светлее неё) */
.pl-trustsec { --pl-glass: color-mix(in srgb, var(--surface) 62%, transparent); --pl-glass-line: color-mix(in srgb, var(--surface) 90%, transparent); }
[data-theme="dark"] .pl-trustsec { --pl-glass: color-mix(in srgb, var(--surface) 55%, transparent); --pl-glass-line: rgba(255,255,255,.14); }
.pl-trustsec :is(.card--glass, .ld-quote) { background: var(--pl-glass); border: 1px solid var(--pl-glass-line); box-shadow: 0 10px 24px -18px rgba(43,36,112,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pl-trust { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2); }
.pl-trust__sunny { flex: none; }
.pl-trust__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-trust__n { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-bold); color: var(--ink); }
.pl-trust__sub { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }

/* блоки ленты PL-03 плотнее лендинга: 24 px между блоками, лид — мелким */
.sheet--flat > .pl-sec, .pl-trustsec .pl-sec { margin-top: var(--s-5); }
.pl-trustsec .pl-sec .ld-eyebrow { color: var(--acc-violet-ink); }
.pl-sec .ld-section__head { margin-bottom: var(--s-3); }
.pl-sec .ld-lead { margin-top: var(--s-1); font-size: var(--fs-2); line-height: var(--lh-2); }
.pl-story { padding: var(--s-4); gap: var(--s-2); }
.pl-story .ld-quote__side { padding: 6px 12px; }
.pl-story .ld-quote__text { font-weight: var(--fw-medium); }
.pl-trustsec .pl-story .ld-quote__topic { background: var(--card-lavender); color: var(--acc-violet-ink); }

/* что будет в сессии: 2 × 2 стеклянные карточки, у каждой свой цвет кружка */
.pl-what.ld-grid { gap: var(--s-2); }
.pl-what__i.card { display: flex; align-items: center; gap: var(--s-2); min-height: 60px; padding: var(--s-2) var(--s-3); border-radius: calc(var(--r-1) - 8px); }
.pl-what__i .card__ic { flex: none; width: 36px; height: 36px; margin: 0; }
.pl-what__i .card__ic .ic { width: 18px; height: 18px; }
.pl-what__i .card__title { margin: 0; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); color: var(--ink); }
.pl-what__i:nth-child(1) { --card-ic: var(--acc-orange); --card-ic-on: var(--acc-orange-on); }
.pl-what__i:nth-child(2) { --card-ic: var(--acc-violet); --card-ic-on: var(--acc-violet-on); }
.pl-what__i:nth-child(3) { --card-ic: var(--acc-sun);    --card-ic-on: var(--acc-sun-on); }
.pl-what__i:nth-child(4) { --card-ic: var(--acc-mint);   --card-ic-on: var(--acc-mint-on); }
.pl-tfaq .ld-faq__q { font-weight: var(--fw-semibold); }
.pl-tfaq .pl-transcript { margin-top: 0; }

/* «Начать» / «Пропустить» — прибиты к низу (док ядра), лента прокручивается под ними */
.pl-vdock { padding: var(--s-5) var(--gutter) 0; background: linear-gradient(180deg, transparent 0, var(--dock-bg) 22px); pointer-events: none; }
.pl-vdock .btn { pointer-events: auto; }
.pl-vdock .btn-col { margin-top: 0; gap: 0; }
@media (prefers-reduced-motion: reduce) { .pl-vid .video__play { animation: none; } }

/* ───────── PL-16 итог: до / после ───────── */
.pl-cmp { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.pl-cmp__row { display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: var(--s-3); }
.pl-cmp__k { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.pl-cmp__bar { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.pl-cmp__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.pl-cmp__i--before { background: var(--ink-3); }
.pl-cmp__i--after { background: linear-gradient(90deg, var(--fill-a), var(--fill-b)); }
.pl-cmp__v { text-align: right; font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-keep { margin-top: var(--s-4); }