/* ═══════════════════════════════════════════════════════════════════════
   ВКЛАДКА «ПРОФИЛЬ» · слой поверх системы

   Подключается ПОСЛЕ общих: /system.css → /cabinet.css → /styles-кабинет.css
   → этот файл. Своих цветов не заводит вовсе — только системные токены,
   поэтому ночь и день получаются сами собой, без второго набора правил.

   Правила, которые тут соблюдаются буквально:
   · ОДИН плотный объект на экран. Здесь это карточка «кто я» (.pfhero):
     карточка встречи (.next) принадлежит вкладке «Сейчас» и сюда не попадает,
     значит место героя свободно. Всё остальное — стекло и строки;
   · перечисление = СТРОКИ с волосяной линией, а не стопка плашек;
   · иконки только SVG в currentColor. Эмодзи и глифов-иконок нет;
   · обводки на полях ввода нет никогда — полей здесь и нет вовсе;
   · все имена с префиксом .pf — вкладку наполняют четыре агента сразу,
     и общие имена (.step, .stage, .bar, .list, .go, .on) уже заняты.
   ═══════════════════════════════════════════════════════════════════════ */

/* Колонка вкладки. На вебе .wrap растягивается до 1320px, и список настроек
   в такую ширину читать нечем: строка «Ступень — Мастерская» уезжает концами
   в разные стороны экрана. Держим колонку. */
.pfstack{display:flex;flex-direction:column}

/* ═══ 1. КТО Я — ГЕРОЙ ═════════════════════════════════════════════════
   Плотный объект: тот же материал, что у карточки встречи и у «подготовка
   пройдена». Стекла на него не вешаем. */
.pfhero{display:flex;flex-direction:column;gap:var(--s3);padding:16px 18px;margin-bottom:var(--s3);
  border:1px solid var(--hero-line);border-radius:var(--r-l);
  background:var(--hero-bg);color:var(--hero-ink);box-shadow:var(--hero-edge)}
.pfhero-kick{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;color:var(--hero-kick)}
.pfid{display:flex;align-items:center;gap:12px;min-width:0}
/* Инициал под фотографией: пока фото не пришло (или его нет вовсе), кружок
   не должен зиять пустотой. Картинка ложится поверх буквы. */
.pfava{position:relative;flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:0;
  /* Заливка кружка — токеном, а не своим числом: --hero-track это и есть
     «мягкая белая вуаль НА герое», и он у светлой и тёмной темы разный.
     Захардкоженные .14 в обеих темах читались бы чуть по-разному. */
  color:var(--hero-ink);background:var(--hero-track);
  border:1px solid var(--hero-hair);box-shadow:inset 0 1px var(--hero-hair)}
.pfava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pftx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pftx b{font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pftx i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:0;
  color:var(--hero-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ступень и поток — подпись под именем, отделённая волосяной линией: это
   уже не «кто я», а «где я», и слипаться им нельзя. */
.pfhero-sub{padding-top:var(--s3);border-top:1px solid var(--hero-hair);
  font-size:13px;line-height:1.5;color:var(--hero-sub)}

/* ═══ 2. КАРТОЧКА — СТЕКЛО ═════════════════════════════════════════════
   Тот же материал, что у .msplan и .prog: заливка --pane, кромка стекла,
   мягкая тень. Заголовок карточки — не h2: на вкладке один заголовок, h1. */
.pfcard{display:flex;flex-direction:column;padding:14px 16px;margin-bottom:11px;
  border:1px solid var(--glass-line);border-radius:var(--r-l);background:var(--pane);
  box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.pfcard-h{font-family:var(--font-head);font-size:15.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink)}
.pfcard-s{font-size:13px;color:var(--ink2);line-height:1.55;margin-top:5px}
.pfcard-h+.pfmeter,.pfcard-h+.pfrow,.pfcard-h+.pfopt,.pfcard-h+.pflink,
.pfcard-s+.pfmeter,.pfcard-s+.pfrow,.pfcard-s+.pfopt,.pfcard-s+.pflink{margin-top:var(--s3)}

/* ═══ 3. ПРОГРЕСС ══════════════════════════════════════════════════════
   Полосы стоят подряд, поэтому разделяет их воздух, а не линия: линия между
   полосами дала бы решётку. Материал дорожки — системный, как у .bar. */
.pfmeter+.pfmeter{margin-top:14px}
.pfmeter-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:8px}
.pfmeter-top .l{font-size:12.5px;font-weight:650;color:var(--head);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfmeter-top .n{flex:none;font-size:15px;font-weight:700;font-family:var(--mono);color:var(--ink)}
/* Знаменатель — часть числа, а не украшение: --dim давал 2.9:1 и цифру
   приходилось угадывать (та же правка, что у .prog-top .n small). */
.pfmeter-top .n small{color:var(--taupe);font-weight:500}
.pfbar{height:6px;border-radius:99px;overflow:hidden;
  background:var(--track-bg);border:1px solid var(--track-line)}
.pfbar i{display:block;height:100%;border-radius:99px;
  background:var(--bar-fill);transition:width .5s var(--ease)}

/* ═══ 4. СТРОКА «ПОДПИСЬ — ЗНАЧЕНИЕ» ══════════════════════════════════
   Перечисление фактов о доступе. Волосяная линия между, у последней нет. */
.pfrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:11px 0;border-bottom:1px solid var(--hair)}
.pfrow:last-child{border-bottom:0;padding-bottom:2px}
.pfrow .l{flex:none;font-size:13px;color:var(--muted)}
.pfrow .v{min-width:0;text-align:right;font-size:13.5px;font-weight:650;color:var(--ink);
  line-height:1.45;overflow-wrap:anywhere}

/* ═══ 5. ВЫБОР ТЕМЫ ════════════════════════════════════════════════════
   Полноценный список вариантов — кружок в шапке остаётся на месте и живёт
   своей жизнью (theme.js). Выбранный вариант помечен галочкой и цветом:
   синий здесь значит «вы здесь», ровно как в остальном кабинете. */
.pfopt{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:9px 0;
  background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  font:inherit;letter-spacing:0;text-align:left;color:var(--ink);cursor:pointer;
  transition:color var(--dur) var(--ease)}
.pfopt:last-child{border-bottom:0}
.pfopt-i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink2);background:var(--chip-bg);border:1px solid var(--chip-line);
  box-shadow:var(--inset-1);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.pfopt-i svg{display:block;width:17px;height:17px}
.pfopt-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pfopt-t b{font-size:14px;font-weight:650;line-height:1.3}
.pfopt-t i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.35}
/* Галочка занимает место всегда — иначе при смене выбора строки дёргаются. */
.pfopt-tick{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;
  color:var(--blue);opacity:0;transition:opacity var(--dur) var(--ease)}
.pfopt-tick svg{display:block;width:16px;height:16px}
.pfopt.on{color:var(--ink)}
.pfopt.on .pfopt-i{color:var(--blue);background:var(--blue-soft);border-color:var(--open-line)}
.pfopt.on .pfopt-tick{opacity:1}
.pfopt:hover .pfopt-i{color:var(--ink)}
.pfopt.on:hover .pfopt-i{color:var(--blue)}
.pfopt:active{transform:scale(.995)}

/* ═══ 6. СТРОКА-ДЕЙСТВИЕ ═══════════════════════════════════════════════
   Связь с куратором, панель ведущего, выход. Те же строки с волосяной
   линией, только справа шеврон: строка ведёт наружу. */
.pflink{display:flex;align-items:center;gap:11px;min-height:52px;padding:9px 0;
  border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.pflink:last-child{border-bottom:0}
.pflink-i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--blue);background:var(--blue-soft);border:1px solid var(--open-line)}
.pflink-i svg{display:block;width:17px;height:17px}
.pflink-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pflink-t b{font-size:14px;font-weight:650;line-height:1.3}
.pflink-t i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.35}
.pflink-go{flex:0 0 18px;color:var(--dim);display:grid;place-items:center;
  transition:transform var(--dur) var(--ease)}
.pflink-go svg{display:block;width:18px;height:18px}
.pflink:hover .pflink-go{transform:translateX(2px);color:var(--taupe)}
/* Выход — единственное необратимое действие вкладки, и цвет говорит об этом.
   Плашкой не делаем: одна тревожная плашка среди тихих строк кричала бы. */
.pfout .pflink-t b{color:var(--alarm-ink)}
.pfout .pflink-i{color:var(--alarm-ink);background:var(--alarm-bg);border-color:var(--alarm-line)}

/* ═══ 7. ВЕБ: колонка, а не полоса во всю ширину ═══════════════════════ */
@media (min-width:900px){
  .pfstack{max-width:560px}
  .pfhero{padding:20px 22px}
  .pfcard{padding:16px 18px}
}

/* ── Покупки ─────────────────────────────────────────────────────────────────
   История платежей приходит из кабинета курса. Строка = одна покупка: за что,
   сколько, когда и чем кончилась. */
.pfbuy{padding:11px 0;border-bottom:1px solid var(--hair)}
.pfbuy:last-of-type{border-bottom:0}
.pfbuy-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pfbuy-t b{font-size:14px;font-weight:650;color:var(--ink)}
.pfbuy-t span{flex:none;font-size:14px;font-weight:700;color:var(--ink)}
.pfbuy i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
/* Возврат и отмена: сумма приглушена и зачёркнута — деньги вернулись, и делать
   вид, что покупка в силе, нельзя. */
.pfbuy.bad .pfbuy-t b,.pfbuy.bad .pfbuy-t span{color:var(--taupe)}
.pfbuy.bad .pfbuy-t span{text-decoration:line-through}

/* ═══ ПРОФИЛЬ ГРУППАМИ ═══════════════════════════════════════════════════════
   Было восемь одинаковых карточек лентой — стало четыре раздела: обучение,
   оплата, настройки, помощь. Заголовок раздела живёт СНАРУЖИ рамки и мелким:
   так экран читается сверху вниз по разделам, а не как стопка плиток. */
.pfgrp{margin-bottom:var(--s5)}
.pfgrp-h{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--taupe);margin:0 0 7px 4px}
.pfgrp-b{border:1px solid var(--glass-line);border-radius:var(--r-l);overflow:hidden;
  background:var(--pane);box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.pfgrp-s{font-size:12px;color:var(--taupe);line-height:1.45;margin:7px 4px 0}
/* Строки внутри группы делит волосок, а не отступ: это список, а не набор
   отдельных объектов. */
.pfgrp-b > *{border-bottom:1px solid var(--hair)}
.pfgrp-b > *:last-child{border-bottom:0}
.pfgrp-b .pfrow,.pfgrp-b .pflink{padding-left:15px;padding-right:15px}
.pfgrp-b .pfrow{min-height:46px}
.pfgrp-b .pfmeters{padding:12px 15px}
.pfgrp-b .pfbuys .pfbuy{padding:11px 15px}
.pfgrp-b .pfopt{padding-left:15px;padding-right:15px}

/* Сводка в герое: три числа вместо двух карточек ниже. */
.pfsvod{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:14px}
.pfsv{padding:9px 11px;border-radius:var(--r-s);background:var(--glass-3);border:1px solid var(--hair)}
.pfsv b{display:block;font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pfsv b span{font-size:12.5px;font-weight:600;color:var(--taupe)}
/* Подпись под числом бывает длинной («подготовка · Мастерская») — переносим
   по словам, а не режем: обрезанное слово хуже двух строк. */
.pfsv i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3}

/* Строка-кнопка (раскрыть покупки): выглядит как обычная строка, ведёт себя
   как кнопка — шеврон поворачивается. */
.pfrow-b{width:100%;background:none;border:0;font:inherit;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.pfrow-b .v{display:inline-flex;align-items:center;gap:4px}
.pfrow-chev{display:inline-flex;color:var(--dim);transition:transform var(--dur) var(--ease)}
.pfrow-chev svg{width:16px;height:16px}
.pfrow-chev.on{transform:rotate(90deg)}