/* F440 — витрина. Источник: «Экран витрины - F440.dc.html».

   Шапка с состоянием, до трёх строк-подсказок и сетка карточек.
   Карточка кликабельна целиком: кнопки «играть» внутри нет — две зоны
   нажатия с одним действием только путают. */

.home-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.home-title { font-size: var(--fs-h3); font-weight: 600; margin: 0 }

/* ── Строки-подсказки ────────────────────────────────────────── */
.home-rows { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4) }
.hrow {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: 13px var(--sp-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
}
/* Рекомендация — акцентной кромкой слева, а не заливкой: она подсказка,
   а не главное действие экрана. */
.hrow.is-rec { border-left: 3px solid var(--accent-hi) }
.hrow.is-warn { background: var(--brass-wash); border-color: var(--brass-edge) }
.hrow-main { flex: 1; min-width: 220px }
.hrow-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: 2px }
.hrow-text { font-size: var(--fs-small); color: var(--muted) }
/* В строке кнопки компактнее общей: 48 px здесь дают ощущение модалки. */
.hrow .btn { min-height: var(--tap-row); padding: 11px 16px; font-size: var(--fs-small) }
.btn--primary.is-brass { border-color: var(--brass-edge); background: var(--brass-wash); color: var(--brass) }
@media (hover: hover) {
  .btn--primary.is-brass:hover:not(:disabled) { border-color: var(--brass); background: var(--brass-wash) }
}

/* Строка «продолжить»: тот же тренажёр, тот же режим. */
.hcont {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 12px var(--sp-4); text-align: left;
  background: var(--stage); border: 1px solid var(--line); border-radius: var(--r-card);
  color: var(--text);
  transition: border-color var(--t-press) var(--ease);
}
@media (hover: hover) { .hcont:hover { border-color: var(--line-2) } }
.hcont-play {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-deep); color: var(--on-accent); display: grid; place-items: center;
}
.hcont-main { flex: 1; min-width: 0; display: grid }
.hcont-main b { font-size: 14px; font-weight: 600 }
.hcont-main .t-num { font-size: 12px; color: var(--muted-3) }
.hcont-key { font-size: 12px; color: var(--muted-3); flex-shrink: 0 }
@media (hover: none) { .hcont-key { display: none } }

/* ── Сетка карточек ──────────────────────────────────────────── */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3) }

.tcard {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 15px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text);
  transition: border-color var(--t-press) var(--ease);
}
@media (hover: hover) { .tcard:hover { border-color: var(--line-2) } }
.tcard:active { border-color: var(--line-2); background: var(--panel-2) }
.tcard.is-due { border-color: var(--accent-edge) }
.tcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2) }
.tcard h3 { font-size: var(--fs-h3); font-weight: 600; margin: 0 }
.tcard-meta {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted-3); white-space: nowrap;
}
.tcard-meta.ok { color: var(--accent-ink) }
.tcard-meta.brass { color: var(--brass) }
.tcard p { font-size: var(--fs-small); color: var(--muted); flex: 1; margin: 0 }
.tcard-prev { height: 52px; background: var(--stage); border-radius: var(--r-xs); overflow: hidden; position: relative }
.tcard-foot {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted-3);
}
.tcard-foot b { font-weight: 500; color: var(--text) }
.tcard-foot b.ok { color: var(--accent-ink) }
.tcard-foot b.brass { color: var(--brass) }
.tcard-foot b.none { color: var(--muted-3) }

/* Восьмая ячейка — счёт покрытия, а не тренажёр: пунктир отделяет её
   от карточек, и она уходит, когда измерены все семь. */
.tcard--note { justify-content: center; background: transparent; border-style: dashed; border-color: var(--line-2) }
.tcard-title { font-size: 14px; font-weight: 600 }
.tcard-link { font-size: var(--fs-small); color: var(--accent-ink) }

/* ── Превью навыка ───────────────────────────────────────────── */
.pv { display: block; width: 100%; height: 100% }
.pv-line { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke }
.pv-dim { fill: none; stroke: var(--line-2); stroke-width: 2; vector-effect: non-scaling-stroke }
.pv-base { stroke: var(--line); vector-effect: non-scaling-stroke }

.pv-none { height: 100%; display: grid; place-items: center; background: var(--hatch-nodata) }
.pv-none .t-label { font-size: 10px; color: var(--muted-3) }

.pv-bars { height: 100%; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 7px }
.pv-bar { display: flex; align-items: center; gap: var(--sp-2) }
.pv-bar span { font-family: var(--font-mono); font-size: 9px; color: var(--muted-3); width: 8px }
.pv-bar i { flex: 1; height: 5px; background: var(--panel-3); border-radius: var(--r-pill); overflow: hidden }
.pv-bar b { display: block; height: 100%; background: var(--line-2) }
.pv-bar.is-b span { color: var(--accent-ink) }
.pv-bar.is-b b { background: var(--accent) }

.pv-axis { height: 100%; display: grid; place-items: center }
.pv-axis-line { position: relative; width: 86%; height: 1px; background: var(--panel-3) }
.pv-tick { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--line-2) }
.pv-tick.mid { top: -5px; height: 11px }
.pv-dot { position: absolute; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%) }

.pv-decay { height: 100%; padding: 10px 12px; display: flex; align-items: flex-end; gap: 3px }
.pv-decay i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85 }

.pv-corr { height: 100%; padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px }
.pv-corr-track { position: relative; height: 5px; background: var(--panel-3); border-radius: var(--r-pill) }
.pv-corr-track .pv-dot { top: -2px; width: 9px; height: 9px }
.pv-corr-x { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted-3) }