/* ============================================================================
   YAVI · Component primitives
   ----------------------------------------------------------------------------
   Канон компонентов из yavi-design-system. Подключаем ПОСЛЕ components.css —
   так старые .* классы остаются на местах, пока экраны не перепрошиты,
   а новые .yv-* живут отдельным namespace'ом.

   Источники: yavi-design-system/project/preview/components-*.html и
   yavi-design-system/project/ui_kits/yavi-pwa/styles.css.

   Подробная документация — docs/DESIGN.md.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Layout primitives
   --------------------------------------------------------------------------- */

.yv-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  /* На широких экранах центрируем мобильную колонку, не растягиваем.
     Дизайн-система: 360–430px, никаких desktop-layouts. */
  max-width: var(--viewport-max);
  margin: 0 auto;
}

.yv-screen-inner {
  flex: 1;
  padding: var(--safe-top) var(--space-6) calc(var(--space-9) + var(--safe-bottom));
}

/* Когда экран с фиксированным таб-баром — оставляем место снизу */
.yv-screen--with-tabbar .yv-screen-inner {
  padding-bottom: calc(var(--h-tabbar) + var(--safe-bottom) + var(--space-7));
}

/* Без safe-top, если есть hero-фото на самый верх */
.yv-screen--hero .yv-screen-inner {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   2. Header bar
   --------------------------------------------------------------------------- */

.yv-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: var(--h-header);
  padding: 0 var(--space-1);
  margin-bottom: var(--space-5);
}

.yv-header__title {
  text-align: center;
  font: var(--t-label-lg);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.yv-header__pager {
  font: var(--t-body);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.yv-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: var(--r-pill);
}
.yv-icon-btn:active { opacity: 0.6; }
.yv-icon-btn svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------
   3. Bottom tab bar (5 slots, fixed)
   --------------------------------------------------------------------------- */

.yv-tabbar {
  /* Sticky, не fixed: тогда таб-бар наследует ширину родителя (.yv-screen),
     который сам зажат до --viewport-max и центрирован. Если бы он был fixed,
     ширина считалась бы от viewport и на широком окне таб-бар уезжал бы из колонки. */
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(11, 9, 7, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + var(--safe-bottom));
  /* Сжимаем нижний край yv-screen-inner — он сам уже учитывает место под таб-бар. */
  margin-top: auto;
}

.yv-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  padding: 8px 2px;
  font: 500 9.5px/1.3 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.yv-tab svg { width: 22px; height: 22px; flex-shrink: 0; }
.yv-tab__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}

.yv-tab.is-active { color: var(--brass-300); }
.yv-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brass-300);
}

.yv-tab[disabled],
.yv-tab.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------- */

.yv-btn {
  width: 100%;
  height: var(--h-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  font: var(--t-cta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  transition: filter 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.yv-btn:active { transform: scale(0.985); }
.yv-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.yv-btn--filled {
  /* Яркий brass-градиент — primary CTA с золотистым фоном.
     В дизайн-системе Yavi на сэмпле «cinematic vinyl» был более приглушённый
     янтарь (#4a3825 → #3a2c1c), но в продукте пользователь хочет видеть
     полноценный «gold button» — поэтому ставим brass-200 → brass-300. */
  background: linear-gradient(180deg, var(--brass-200) 0%, var(--brass-300) 100%);
  border-color: var(--brass-500);
  color: var(--ink-0);
}
.yv-btn--filled .yv-btn__sub {
  color: var(--ink-0);
  opacity: 0.7;
}
.yv-btn--filled:active {
  filter: brightness(0.92);
  transform: none;          /* press-стейт filled-кнопки — только filter, без scale */
}

.yv-btn--outline {
  border-color: var(--line-brass);
  color: var(--text);
}

.yv-btn--small {
  height: 40px;
  font: var(--t-cta-sm);
  padding: 0 14px;
  gap: 8px;
  letter-spacing: var(--tracking-wide);
}

.yv-btn--ghost {
  border-color: transparent;
  color: var(--text-faint);
}

.yv-btn__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.yv-btn__sub {
  font: var(--t-body-sm);
  color: var(--brass-100);
  opacity: 0.8;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 400;
}

.yv-btn__arrow {
  font-size: 18px;
  line-height: 1;
  opacity: 0.9;
}

/* Маленькая подпись под кнопкой — для случаев, когда деталь (цена, длительность)
   не помещается на самой кнопке без визуального шума. */
.yv-btn-caption {
  font: var(--t-caption);
  color: var(--text-faint);
  text-align: center;
  margin: var(--space-2) 0 0;
}

/* ---------------------------------------------------------------------------
   5. Cards
   --------------------------------------------------------------------------- */

.yv-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-6);
}
.yv-card:active { border-color: var(--border-active); }

.yv-card--success {
  background: var(--success-bg);
  border-color: var(--success-line);
}

.yv-card--flat { padding: var(--space-5); }

/* ---------------------------------------------------------------------------
   6. Section labels & row utilities
   --------------------------------------------------------------------------- */

.yv-section-label {
  display: block;
  margin: var(--space-7) 0 var(--space-4);
  font: var(--t-label);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.yv-section-label__hint {
  font: var(--t-body-sm);
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.yv-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.yv-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.yv-stack--lg { gap: var(--space-5); }

/* ---------------------------------------------------------------------------
   7. Action row (Шаги дня / Сегодня pattern)
   --------------------------------------------------------------------------- */

.yv-action-row {
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr) 18px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.yv-action-row__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}
.yv-action-row:active { transform: scale(0.99); }

.yv-action-row__ring {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.yv-action-row__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-sm);
  color: var(--brass-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yv-action-row__icon svg { width: 22px; height: 22px; }

.yv-action-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.yv-action-row__title {
  font: var(--t-h3);
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yv-action-row__sub {
  font: var(--t-body-sm);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yv-action-row__cta {
  height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-sm);
  color: var(--text);
  font: 500 11px/1 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.yv-action-row__cta--ghost {
  border-color: transparent;
  color: var(--text-faint);
  padding: 0 4px;
}

/* States */
.yv-action-row.is-active {
  border-color: var(--line-brass);
}
.yv-action-row.is-active .yv-action-row__ring {
  border-color: var(--brass-300);
  position: relative;
}
.yv-action-row.is-active .yv-action-row__ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--brass-300);
  clip-path: inset(0 0 50% 0);    /* half-fill — «в работе» */
}

.yv-action-row.is-completed {
  background: linear-gradient(180deg, rgba(74, 138, 92, 0.08) 0%, var(--success-bg) 100%);
  border-color: var(--success-line);
}
.yv-action-row.is-completed .yv-action-row__ring {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}
.yv-action-row.is-completed .yv-action-row__icon {
  border-color: var(--success-line);
  color: var(--success);
}
.yv-action-row.is-completed .yv-action-row__title { color: var(--success-fg); }
.yv-action-row.is-completed .yv-action-row__sub {
  color: var(--success-fg);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   8. Scene tile (Сцена дня в списке — без изображения, type-led)
   --------------------------------------------------------------------------- */

.yv-scene-tile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-scene-tile:active { transform: scale(0.99); }

.yv-scene-tile__day {
  border-right: 1px solid var(--border);
  padding-right: 14px;
}
.yv-scene-tile__day-label {
  font: var(--t-label-sm);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  line-height: 1;
}
.yv-scene-tile__day-num {
  display: block;
  margin-top: 6px;
  font: 400 28px/1 var(--font-serif);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.yv-scene-tile__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.yv-scene-tile__kicker {
  font: var(--t-label-sm);
  color: var(--brass-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.yv-scene-tile__title {
  font: var(--t-h3);
  color: var(--text);
  margin: 0;
}
.yv-scene-tile__meta {
  font: var(--t-caption);
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.yv-scene-tile__state {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.yv-scene-tile.is-completed {
  background: linear-gradient(180deg, rgba(74, 138, 92, 0.08) 0%, var(--success-bg) 100%);
  border-color: var(--success-line);
}
.yv-scene-tile.is-completed .yv-scene-tile__day { border-right-color: var(--success-line); }
.yv-scene-tile.is-completed .yv-scene-tile__day-label,
.yv-scene-tile.is-completed .yv-scene-tile__meta {
  color: var(--success-fg);
  opacity: 0.7;
}
.yv-scene-tile.is-completed .yv-scene-tile__day-num,
.yv-scene-tile.is-completed .yv-scene-tile__title { color: var(--success-fg); }
.yv-scene-tile.is-completed .yv-scene-tile__kicker { color: var(--success); }
.yv-scene-tile.is-completed .yv-scene-tile__state { color: var(--success); }

.yv-scene-tile.is-active { border-color: var(--line-brass); }
.yv-scene-tile.is-active .yv-scene-tile__state { color: var(--brass-300); }

.yv-scene-tile.is-locked { opacity: 0.55; }
.yv-scene-tile.is-locked .yv-scene-tile__day-num,
.yv-scene-tile.is-locked .yv-scene-tile__title { color: var(--text-faint); }
.yv-scene-tile.is-locked .yv-scene-tile__kicker { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   9. Archetype row (single-column mobile list)
   --------------------------------------------------------------------------- */

.yv-archetype-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 16px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-archetype-row:active {
  transform: scale(0.99);
  border-color: var(--line-brass);
}

.yv-archetype-row__media {
  width: 76px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid var(--line-faint);
  flex-shrink: 0;
}

.yv-archetype-row__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.yv-archetype-row__name {
  font: var(--t-archetype-sm);
  color: var(--text);
}
.yv-archetype-row__sub {
  font: var(--t-body-sm);
  color: var(--text-faint);
}

.yv-archetype-row__chevron {
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
  10. Photo placeholder (warm-key radial blob)
   --------------------------------------------------------------------------- */

.yv-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a130c 0%, #08060a 100%);
  border-radius: var(--r-sm);
}
.yv-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(216, 180, 122, 0.28), transparent 55%);
}
.yv-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 9, 7, 0) 30%, rgba(11, 9, 7, 0.95) 100%);
}

.yv-photo--chair::before {
  background:
    radial-gradient(circle at 70% 35%, rgba(216, 180, 122, 0.35), transparent 50%),
    radial-gradient(circle at 75% 45%, rgba(255, 210, 140, 0.50), transparent 18%);
}
.yv-photo--window::before {
  background: radial-gradient(circle at 30% 35%, rgba(200, 160, 100, 0.25), transparent 55%);
}
.yv-photo--cafe::before {
  background:
    radial-gradient(circle at 60% 50%, rgba(200, 140, 80, 0.35), transparent 55%),
    radial-gradient(circle at 20% 30%, rgba(190, 140, 90, 0.20), transparent 50%);
}

/* ---------------------------------------------------------------------------
  11. Hero photo header (Day, Scene)
   --------------------------------------------------------------------------- */

.yv-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.yv-hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.yv-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-bottom);
}

.yv-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--safe-top) + var(--space-4)) var(--space-6) var(--space-6);
}

.yv-hero__title {
  font: var(--t-archetype);
  color: var(--text);
  margin: 0;
}
.yv-hero__subtitle {
  font: var(--t-body-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

.yv-hero__progress {
  margin-top: var(--space-5);
  max-width: 240px;
}
.yv-hero__day-label {
  font: var(--t-body-sm);
  color: var(--text-muted);
}
.yv-hero__progress-meta {
  font: var(--t-body-sm);
  color: var(--text-faint);
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
  12. Linear progress bar
   --------------------------------------------------------------------------- */

.yv-bar-track {
  height: 3px;
  background: var(--ink-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 6px;
}

.yv-bar-fill {
  height: 100%;
  background: var(--brass-300);
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
  13. Rhythm row (Progress)
   --------------------------------------------------------------------------- */

.yv-rhythm-row {
  display: grid;
  grid-template-columns: 24px 110px minmax(0, 1fr) 56px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.yv-rhythm-row__icon {
  color: var(--brass-300);
  display: flex;
}
.yv-rhythm-row__name { font: var(--t-body-sm); color: var(--text); }
.yv-rhythm-row__pct {
  font: var(--t-body-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------------------------------------------------------------------------
  14. Day grid (30-day living)
   --------------------------------------------------------------------------- */

.yv-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  max-width: 460px;
}

.yv-day-dot {
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 14px/1 var(--font-serif);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.yv-day-dot svg { width: 14px; height: 14px; }

.yv-day-dot.is-done {
  background: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success);
}

.yv-day-dot.is-today {
  border-color: var(--brass-300);
  color: var(--brass-100);
  background: var(--ink-1);
  box-shadow: 0 0 0 2px var(--ink-0), 0 0 0 3px var(--brass-300);
}

.yv-day-dot.is-locked { opacity: 0.35; }

.yv-day-grid__legend {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-6);
  font: var(--t-caption);
  color: var(--text-faint);
}
.yv-day-grid__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.yv-day-grid__legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
  15. Stepper (Scene flow)
   --------------------------------------------------------------------------- */

.yv-stepper-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.yv-stepper-row + .yv-stepper-row { margin-top: 8px; }

.yv-stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 12px/1 var(--font-serif);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.yv-stepper-dot.is-done {
  background: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success);
}
.yv-stepper-dot.is-curr {
  border-color: var(--brass-300);
  background: transparent;
}
.yv-stepper-dot.is-curr::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brass-300);
}
.yv-stepper-dot.is-locked { opacity: 0.5; }

.yv-stepper-line {
  flex: 1;
  height: 1px;
  background: var(--line-faint);
}
.yv-stepper-line.is-done { background: var(--success); }

.yv-stepper-num {
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  font: var(--t-caption);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.yv-stepper-num.is-curr { color: var(--text); }
.yv-stepper-num-spacer { flex: 1; }

/* ---------------------------------------------------------------------------
  16. Completion banner & modal
   --------------------------------------------------------------------------- */

.yv-completion-banner {
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  border-radius: var(--r-md);
  padding: 16px var(--space-6);
  display: flex;
  gap: 14px;
  align-items: center;
}
.yv-completion-banner__star { color: var(--brass-300); }
.yv-completion-banner__title {
  font: var(--t-h3);
  color: var(--success-fg);
  margin: 0;
}
.yv-completion-banner__sub {
  font: var(--t-body-sm);
  color: var(--success-fg);
  margin: 2px 0 0;
  opacity: 0.85;
}

.yv-completion-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: var(--space-7);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
}
.yv-completion-modal__check {
  width: 84px;
  height: 84px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--success-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
}
.yv-completion-modal__check svg { width: 36px; height: 36px; }
.yv-completion-modal__label {
  font: var(--t-label-lg);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ---------------------------------------------------------------------------
  17. Next-action band (Star4 + label + chevron)
   --------------------------------------------------------------------------- */

.yv-next-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 16px;
  gap: 14px;
  align-items: center;
  margin-top: var(--space-7);
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(201, 163, 106, 0.06) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--line-brass);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-next-action:active { transform: scale(0.99); }

/* Star4 в brass-outlined контейнере — визуально рифмуется с icon-контейнерами
   action-row и material-row, держит /day-дашборд в одной системе. */
.yv-next-action__star {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-sm);
  color: var(--brass-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yv-next-action__star svg { width: 22px; height: 22px; }

.yv-next-action__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.yv-next-action__label {
  font: var(--t-label-sm);
  color: var(--brass-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.yv-next-action__title {
  font: var(--t-h3);
  color: var(--text);
}
.yv-next-action__chevron {
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
  18. Inputs
   --------------------------------------------------------------------------- */

.yv-input,
.yv-textarea {
  width: 100%;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: var(--t-body);
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-input {
  height: var(--h-input);
  padding: 0 14px;
}
.yv-textarea {
  min-height: 90px;
  padding: 12px 14px;
  resize: none;
}
.yv-input:focus,
.yv-textarea:focus {
  outline: none;
  border-color: var(--brass-300);
}

.yv-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yv-field__label {
  font: var(--t-label-sm);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.yv-counter {
  font: var(--t-caption);
  color: var(--text-faint);
  text-align: right;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------------
  19. Material row (Day → «Материалы роли»)
   --------------------------------------------------------------------------- */

.yv-material-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: inherit;
}
.yv-material-row__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-sm);
  color: var(--brass-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yv-material-row__icon svg { width: 22px; height: 22px; }

.yv-material-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.yv-material-row__title {
  font: 500 15px/1.25 var(--font-serif);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yv-material-row__sub {
  font: var(--t-caption);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yv-material-row__status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  font: var(--t-caption);
  color: var(--text-faint);
}
.yv-material-row__check {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--text-faint);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yv-material-row__check.is-done {
  border-color: var(--success);
  color: var(--success);
}

/* ---------------------------------------------------------------------------
  20. Divider
   --------------------------------------------------------------------------- */

.yv-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-7) 0;
  border: 0;
}

/* ---------------------------------------------------------------------------
  19ter. Progress — photo strip, insight row, quote card
   --------------------------------------------------------------------------- */

.yv-progress-strip {
  position: relative;
  height: 160px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-top: var(--space-3);
  overflow: hidden;
}
.yv-progress-strip__label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font: var(--t-label);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.yv-progress-strip__markers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  font: var(--t-caption);
  color: var(--text-faint);
}
.yv-progress-strip__marker {
  white-space: nowrap;
}
.yv-progress-strip__marker.is-current {
  color: var(--brass-100);
}

.yv-insight-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.yv-insight-row__icon {
  color: var(--brass-300);
  display: flex;
  margin-top: 2px;
}
.yv-insight-row__icon > svg { width: 20px; height: 20px; }
.yv-insight-row__body {
  min-width: 0;
}
.yv-insight-row__title {
  font: var(--t-body);
  color: var(--text);
}
.yv-insight-row__sub {
  font: var(--t-body-sm);
  color: var(--text-faint);
  margin-top: 2px;
}
.yv-insight-row__when {
  font: var(--t-body-sm);
  color: var(--text-faint);
  white-space: nowrap;
}

.yv-progress-quote {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
}
.yv-progress-quote__mark {
  font: 500 28px/0.8 var(--font-serif);
  color: var(--text-faint);
  align-self: start;
}
.yv-progress-quote__text {
  font: italic 400 14px/1.5 var(--font-serif);
  color: var(--text-muted);
}
.yv-progress-quote__star {
  color: var(--brass-300);
  display: flex;
  align-self: center;
}
.yv-progress-quote__star > svg { width: 20px; height: 20px; }

/* Заглушка прогресса — пока прожито <3 дней */
.yv-progress-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-4) 0;
}
.yv-progress-locked__icon {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass-300);
}
.yv-progress-locked__icon > svg { width: 28px; height: 28px; }
.yv-progress-locked__title {
  font: var(--t-h2);
  color: var(--text);
}
.yv-progress-locked__text {
  font: var(--t-body);
  color: var(--text-muted);
  text-wrap: pretty;
  max-width: 280px;
  margin: 0;
}
.yv-progress-locked__count {
  margin-top: var(--space-2);
  font: var(--t-label-sm);
  color: var(--brass-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ---------------------------------------------------------------------------
  19bis. Day-steps — toggle-able шаги дня
   --------------------------------------------------------------------------- */

.yv-step-row {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-step-row:active { transform: scale(0.99); }

.yv-step-row__check {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.yv-step-row__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-sm);
  color: var(--brass-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yv-step-row__icon > svg { width: 22px; height: 22px; }

.yv-step-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.yv-step-row__no {
  font: var(--t-label-sm);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-variant-numeric: tabular-nums;
}
.yv-step-row__title {
  font: var(--t-body);
  color: var(--text);
  line-height: 1.4;
}

/* Completed step — целиком зеленеет */
.yv-step-row.is-done {
  background: linear-gradient(180deg, rgba(74, 138, 92, 0.08) 0%, var(--success-bg) 100%);
  border-color: var(--success-line);
}
.yv-step-row.is-done .yv-step-row__check {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}
.yv-step-row.is-done .yv-step-row__icon {
  border-color: var(--success-line);
  color: var(--success);
}
.yv-step-row.is-done .yv-step-row__no { color: var(--success); }
.yv-step-row.is-done .yv-step-row__title { color: var(--success-fg); }

/* ---------------------------------------------------------------------------
  19quater. Фрагменты персонажа — 2x2 grid с flip-card механикой
   ----------------------------------------------------------------------------
   Каждая карточка начинает «лицом вниз» (star4 на back-face). Тап → 3D-флип
   на rotateY(180deg) → открывается title + текст. Повторный тап скрывает.
   --------------------------------------------------------------------------- */

/* Фрагменты персонажа — горизонтальная карусель карточек (бесконечная).
   overflow-x по одной оси: горизонтальный свайп ловит карусель, вертикальный
   беспрепятственно уходит в скролл страницы (вертикального переполнения нет). */
.yv-fragment-deck {
  position: relative;
  margin-top: var(--space-4);
  padding-top: 14px; /* место для «силуэта» карточки позади колоды */
}
/* Статичный силуэт карточки позади колоды — выглядывает сверху, создаёт
   ощущение стопки. Карточки колоды непрозрачны, поэтому ниже пика силуэт скрыт. */
.yv-fragment-deck::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 18px;
  right: 18px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}
.yv-fragment-carousel {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.yv-fragment-carousel::-webkit-scrollbar { display: none; }

.yv-fragment-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  box-sizing: border-box;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line-brass);
  border-radius: var(--r-lg);
  /* латунный отлив поверх непрозрачной базы — карточка нигде не просвечивает,
     силуэт позади виден только в пике сверху */
  background:
    linear-gradient(180deg, rgba(201, 163, 106, 0.06) 0%, rgba(201, 163, 106, 0) 60%),
    var(--bg-surface);
  text-align: left;
}

.yv-fragment-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.yv-fragment-card__kicker {
  font: var(--t-label-sm);
  color: var(--brass-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.yv-fragment-card__pager {
  font: var(--t-label-sm);
  color: var(--text-faint);
  letter-spacing: var(--tracking-widest);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.yv-fragment-card__body {
  margin-top: var(--space-5);
  font: var(--t-h1);
  color: var(--text);
  text-wrap: pretty;
  overflow: hidden;
}
.yv-fragment-card__body :is(p, ul, ol) { margin: 0; }
.yv-fragment-card__source {
  margin-top: auto;
  font: italic 400 13px/1.5 var(--font-serif);
  color: var(--text-muted);
  text-wrap: pretty;
}

.yv-fragment-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-5);
}
.yv-fragment-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1), background-color 220ms;
}
.yv-fragment-dot.is-active {
  width: 22px;
  background: var(--brass-300);
}

.yv-fragment-hint {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
  font: var(--t-label-sm);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ---------------------------------------------------------------------------
  20bis. Legacy glyph-container SVG sizing
   ----------------------------------------------------------------------------
   Старые шаблоны (persona-material, day-scene, reflection) рендерили глифы
   текстом и стилизовали через font-size. Когда мы переезжаем на inline SVG
   через v-html, эти контейнеры получают SVG width/height=100% и переполняются.
   Здесь — точечные правила, чтобы SVG в этих контейнерах выглядел правильно
   до полной миграции экранов на yv-* primitives.
   --------------------------------------------------------------------------- */

.section-icon-list__icon > svg,
.outro__check > svg,
.outro__star > svg,
.section-core__shield > svg,
.section-essence__star > svg,
.scene-block__icon > svg,
.scene-essence__star > svg,
.outcome-item__icon > svg,
.emotions__icon > svg,
.reflection__star > svg,
.material-item__icon > svg,
.scene-card__icon > span > svg,
.outcome-item__radio-inner > svg {
  display: block;
}
.section-icon-list__icon > svg { width: 20px; height: 20px; }
.outro__check > svg            { width: 12px; height: 12px; }
.outro__star > svg             { width: 56px; height: 56px; }
.section-core__shield > svg    { width: 48px; height: 48px; }
.section-essence__star > svg   { width: 22px; height: 22px; }
.scene-block__icon > svg       { width: 22px; height: 22px; }
.scene-essence__star > svg     { width: 22px; height: 22px; }
.outcome-item__icon > svg      { width: 22px; height: 22px; }
.emotions__icon > svg          { width: 28px; height: 28px; }
.reflection__star > svg        { width: 48px; height: 48px; }
.material-item__icon > svg     { width: 22px; height: 22px; }
.scene-card__icon > span > svg { width: 16px; height: 16px; }
.outcome-item__radio-inner > svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------------
  21. Splash (intro) — cold-open + vinyl phases
   --------------------------------------------------------------------------- */

.yv-splash-cold,
.yv-splash-vinyl {
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--space-7) calc(var(--safe-bottom) + var(--space-7));
}

.yv-splash-cold {
  cursor: pointer;
}
.yv-splash-cold__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-9);
  text-align: center;
}
.yv-splash-cold__quote {
  font: var(--t-display-md);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.yv-splash-cold__rule {
  width: 32px;
  height: 1px;
  background: var(--brass-300);
  opacity: 0.6;
}

.yv-splash-vinyl {
  justify-content: space-between;
  padding-top: calc(var(--safe-top) + var(--space-9));
}
.yv-splash-vinyl__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
  width: 100%;
}
.yv-splash-vinyl__caption {
  font: var(--t-body);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin: 0;
}
.yv-splash-vinyl__rule {
  width: 56px;
  height: 1px;
  background: var(--brass-300);
  opacity: 0.6;
}
.yv-splash-vinyl__cta {
  width: 100%;
  max-width: var(--viewport-max);
}

/* ---------------------------------------------------------------------------
  21bis. Splash phase 3 — menu (4 entry points)
   --------------------------------------------------------------------------- */

.yv-splash-menu .yv-screen-inner {
  padding-top: calc(var(--safe-top) + var(--space-7));
}
.yv-splash-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-9);
}
.yv-splash-menu__brand {
  font: var(--t-display-md);
  color: var(--text);
  letter-spacing: 4px;
}

.yv-menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.yv-menu-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: 14px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-menu-item:active {
  transform: scale(0.99);
  border-color: var(--border-active);
}

.yv-menu-item__tag {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-brass);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--t-h3);
  color: var(--brass-300);
  font-family: var(--font-serif);
}

.yv-menu-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.yv-menu-item__title {
  font: var(--t-label-lg);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.yv-menu-item__sub {
  font: var(--t-label-sm);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

/* ---------------------------------------------------------------------------
  21ter. Splash phase 4 — detail screen with photo + pager
   --------------------------------------------------------------------------- */

.yv-splash-detail .yv-screen-inner {
  padding-bottom: calc(var(--h-tabbar) + var(--safe-bottom) + var(--space-7));
}

.yv-splash-detail__body {
  font: italic 400 17px/1.55 var(--font-serif);
  color: var(--text-muted);
  margin: var(--space-7) 0 var(--space-7);
  text-wrap: pretty;
}

.yv-splash-detail__photo {
  height: 280px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: var(--space-7);
}

.yv-splash-detail__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.yv-detail-pager {
  /* Sticky как у .yv-tabbar — наследует ширину родителя (.yv-screen, max 430px),
     прилипает к нижнему краю viewport при скролле, центрируется вместе с колонкой
     на широких экранах. */
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) calc(var(--space-4) + var(--safe-bottom));
  background: rgba(11, 9, 7, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.yv-detail-pager__chip {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-faint);
  font: var(--t-body-sm);
  font-family: var(--font-serif);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yv-detail-pager__chip.is-active {
  border-color: var(--brass-300);
  color: var(--brass-100);
}

/* ---------------------------------------------------------------------------
  22. Vinyl emblem container
   --------------------------------------------------------------------------- */

.yv-vinyl-emblem {
  display: inline-block;
  width: 280px;
  max-width: 75vw;
  aspect-ratio: 1;
}
.yv-vinyl-emblem img { width: 100%; height: 100%; display: block; }

@keyframes yv-vinyl-spin { to { transform: rotate(360deg); } }
.yv-vinyl-emblem--spin img {
  animation: yv-vinyl-spin 28s linear infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .yv-vinyl-emblem--spin img { animation: none; }
}