/* F440 — профиль. Источник: «Экран профиля - F440.dc.html».

   Приборная панель: моноширинные числа, единицы рядом с ними, честная
   пометка при нехватке данных. Порядок блоков задан приоритетом смысла,
   а не удобством вёрстки. */

.prof-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr }
@media (min-width: 900px) { .prof-grid { grid-template-columns: 1fr 1fr } }

.pcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.pcard--wide { grid-column: 1 / -1 }
.pcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3) }
.pcard-head h3 { font-size: var(--fs-h3); font-weight: 600; margin: 0 }
.pcard-head .t-num { font-size: 11px; color: var(--muted-3) }
.pcard-note { font-size: 12px; color: var(--muted); margin: var(--sp-3) 0 0; line-height: 1.5 }
.pcard-empty { font-size: var(--fs-small); color: var(--muted); margin: 0 }

/* Главное число экрана — ответ на вопрос «стал ли я слышать лучше»,
   поэтому оно крупнее всего остального. */
.pbig { font-family: var(--font-mono); font-size: 40px; font-weight: 500; line-height: 1.1 }
.pbig.ok { color: var(--accent-ink) }
.pbig.brass { color: var(--brass) }
.pbig-sub { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 var(--sp-3) }

.pbar { height: 6px; background: var(--panel-3); border-radius: var(--r-pill); overflow: hidden }
.pbar i { display: block; height: 100%; background: var(--accent) }
/* Замер не закончен — фактура, а не приглушённый цвет. */
.pbar.pending { background: var(--hatch-pending) }
.pbar.pending i { background: transparent }

.ph { display: block; width: 100%; height: 120px; margin-top: var(--sp-2) }
.ph-line { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke }
.ph-dot { fill: var(--accent-ink) }
.ph-dot.is-now { stroke: var(--panel); stroke-width: 3 }
.ph-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-3); margin-top: 4px }

/* Радар: пустая вершина — тёмная точка у центра, а не ноль на оси. */
.pcard--radar { display: flex; flex-direction: column }
.rd { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto }
.rd-web { fill: none; stroke: var(--line); stroke-width: 1 }
.rd-spoke { stroke: var(--line) }
.rd-area { fill: var(--accent-wash-2); stroke: var(--accent-hi); stroke-width: 1.6; stroke-linejoin: round }
.rd-dot { fill: var(--accent-ink) }
.rd-dot.is-empty { fill: var(--panel-3) }
.rd-lbl { fill: var(--muted-3); font-size: 11px; font-family: var(--font-ui) }

/* АЧХ: полоса без выборки — фиксированная высота и штриховка. Разная
   высота у неизмеренных полос сама по себе была бы данными. */
.pbands { display: flex; align-items: flex-end; gap: 5px; height: 120px }
.pbands i { flex: 1; border-radius: 3px 3px 0 0; min-height: 5px; background: var(--accent) }
.pbands i.low { background: var(--brass) }
.pbands i.none { background: var(--hatch-nodata) }
.pbands-x { display: flex; gap: 5px; font-size: 10px; color: var(--muted-3); margin-top: 5px }
.pbands-x span { flex: 1; text-align: center }
.plegend { display: flex; gap: var(--sp-4); font-size: 11px; color: var(--muted-3); margin-top: var(--sp-2) }
.plegend span { display: inline-flex; align-items: center; gap: 6px }
.plegend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block }
.plegend i.ok { background: var(--accent) }
.plegend i.none { background: var(--hatch-nodata) }

.perrs { display: grid; gap: 10px }
.perr-top { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-small); margin-bottom: 5px }
.perr-top .t-num { color: var(--muted) }
.perr-top .t-num.bad { color: var(--bad-ink) }
.perr .pbar i { background: var(--line-2) }

/* Таблица по тренажёрам */
.ptab { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-card); overflow: hidden }
.ptab .prow {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 68px 68px; gap: var(--sp-2);
  background: var(--stage); padding: 11px 13px; align-items: baseline; font-size: var(--fs-small);
}
.ptab .prow.head { background: var(--panel-2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-3) }
.ptab .prow b { font-weight: 600 }
.ptab .prow small { display: block; font-size: 11px; color: var(--muted-3); margin-top: 2px }
.ptab .prow small.brass { color: var(--brass) }
.ptab .prow span:not(:first-child) { text-align: right; color: var(--muted) }
.ptab .thr { color: var(--accent-ink) }
.ptab .thr .brass { color: var(--brass) }

/* Плитки: регулярность и объём — ниже и мельче умения. */
.ptiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3) }
.ptile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px var(--sp-4) }
.ptile b { display: block; font-size: 26px; font-weight: 500; margin: 4px 0 2px }
.ptile-sub { font-size: 11px; color: var(--muted-3) }

.pachs { display: grid; gap: 10px }
.pach { display: flex; gap: 10px; align-items: flex-start }
.pach-mark { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--panel-2); color: var(--muted-3) }
.pach-mark i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-2); display: block }
.pach.is-got .pach-mark { background: var(--accent-wash); color: var(--accent-ink) }
.pach-text { font-size: var(--fs-small); color: var(--muted) }
.pach.is-got .pach-text { color: var(--text) }
.pach-sub { font-size: 11px; color: var(--muted-3); margin-top: 1px }

.pacts { display: flex; gap: var(--sp-2); margin-top: var(--sp-3) }
.pacts .btn { min-height: var(--tap-row); padding: 10px 14px; font-size: var(--fs-small) }

/* Сегмент выбора темы: выбранный на panel-3 с обводкой, не зелёная
   заливка — это выбор режима, а не подтверждение. */
.pseg { display: flex; gap: 3px; padding: 3px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); flex-shrink: 0 }
.pseg button { padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--muted-2); font-family: inherit; font-size: 12px; cursor: pointer }
.pseg button.on { background: var(--panel-3); color: var(--text) }

/* Лист с выбором значения */
.sheet-opts { display: grid; gap: 7px; margin-bottom: var(--sp-3) }
.sheet-opts .opt.on { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent-ink) }

/* Вход в полный экран настроек из карточки профиля. */
.set-all { margin-top: var(--sp-3); width: 100%; }