/* ─── Экран «Профиль» (дизайн-кит v14): одна колонка карточек — кто (тариф-чип
   + стрик у аватара), plus, статы, достижения, семья, подпись-цитата. Фоны
   карточек рисует skTabbar.mount на [data-pencil]; прогресс-полоски —
   pencilStroke (drawProfileBars). Всё под #profile. */
/* --gold — единственный акцент экрана (лист 06: одна золотая кнопка на слой) */
#profile{ --p-soft:var(--pencil); --gold:#D9A832; }
#profile .pgrid{ max-width:980px; margin:8px auto 0; display:grid; gap:18px;
  align-content:start; padding:14px 20px 0; }
#profile [data-pencil] > *:not(.sk-tabbar-bg){ position:relative; }
#profile .pcard{ position:relative; padding:16px; }
/* заголовки карточек — Caveat 19 (канон 06·3: было 1.55rem≈25 → 19) */
#profile .pcard h3{ font-family:'Caveat',cursive; font-weight:700; font-size:19px;
  margin:0 0 12px; line-height:1.05; color:var(--graphite); }

/* ── карта-герой (чертёж 06·3): шестерёнка R10 в углу · аватар-круг 96 +
   лампа-бейдж уровня · имя Caveat 24 · класс + экипировка (line 2.5/24) · чип
   тарифа + «с нами с <мес>» · XP-полоса 12 с делениями 25%. Контуры — CSS
   ::before + filter:url(#squiggle) (как .chip, components.css; гейт light-fx/
   reduced-motion — base.css). Карандашную подложку карты рисует skTabbar.mount
   (data-pencil, mountProfilePencils). ── */
/* шестерёнка: descendant-селектор с id+2 классами перебивает общий
   #profile [data-pencil] > *{position:relative} (иначе absolute проигрывает) */
#profile .pcard.hero .gearb{ position:absolute; top:16px; right:16px; width:40px;
  height:40px; display:grid; place-items:center; color:var(--graphite-soft); z-index:2;
  background:none; border:none; cursor:pointer; transition:transform .09s ease, color .12s; }
#profile .hero .gearb::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle); }
#profile .hero .gearb:hover{ color:var(--graphite); }
#profile .hero .gearb:active{ transform:scale(.94); }
#profile .hero .gearb svg{ width:24px; height:24px; overflow:visible; }
#profile .hero .gearb:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px;
  border-radius:10px; }

#profile .hero .who{ display:flex; align-items:flex-start; gap:16px; }
/* аватар — круг 96: графитовый контур ::before, фото/инициалы/карандаш в .ph
   (inset 6, overflow hidden), лампа-бейдж уровня на верхнем углу */
#profile .hava{ width:96px; height:96px; flex:none; position:relative; padding:0;
  background:none; border:none; border-radius:50%; cursor:pointer;
  transition:transform .09s ease; }
#profile .hava::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:50%; filter:url(#squiggle); }
#profile .hava:active{ transform:scale(.97); }
#profile .hava:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:3px;
  border-radius:50%; }
#profile .hava .ph{ position:absolute; inset:6px; border-radius:50%; overflow:hidden;
  display:block; }
#profile .hava .ph .ava{ width:100%; height:100%; border-radius:50%; box-shadow:none;
  font-size:2.1rem; }
#profile .hava .ph .hero-pv{ display:block; width:100%; height:100%; }
#profile .hava .ph .hero-pv svg{ width:100%; height:100%; display:block; overflow:visible; }
/* лампа-бейдж уровня: круг 24, СПЛОШНОЙ жёлтый (полупрозрачный --marker тонет на
   аватаре, в тёмной теме .20) + графитовый контур; тёмный текст хардкодим —
   читаемость важнее темизации (как бейдж колокольчика, notify.css) */
#profile .hava .lvl{ position:absolute; top:-2px; right:-2px; width:24px; height:24px;
  border-radius:50%; background:#FFDE59; box-shadow:0 0 0 2px #2C2A26;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1; pointer-events:none; }
#profile .hava .lvl b{ font-family:'Caveat',cursive; font-weight:700; font-size:13px;
  color:#2C2A26; line-height:.85; }
#profile .hava .lvl small{ font-size:6.5px; color:rgba(44,42,38,.72); }

#profile .hero .wc{ flex:1; min-width:0; }
#profile .hero .nm{ font-family:'Caveat',cursive; font-weight:700; font-size:24px;
  line-height:28px; color:var(--graphite); padding-right:44px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* класс + лестница экипировки (открытое currentColor, закрытое op .28) */
#profile .clsrow{ display:flex; align-items:center; gap:8px; margin-top:8px;
  min-height:24px; flex-wrap:wrap; row-gap:4px; }
#profile .clsrow .cls{ font-family:'Caveat',cursive; font-weight:700; font-size:17px;
  color:var(--graphite); white-space:nowrap; }
#profile .clsrow .gicons{ display:flex; gap:4px; }
#profile .clsrow .gi{ width:24px; height:24px; flex:none; color:var(--graphite-soft); }
#profile .clsrow .gi svg{ width:100%; height:100%; display:block; overflow:visible; }
#profile .clsrow .gi.off{ opacity:.28; }
/* чип тарифа 32 (R8): Free-апселл (upfull) и Plus (is-plus) — маркерные */
#profile .chiprow{ display:flex; align-items:center; gap:8px; margin-top:6px;
  min-height:32px; flex-wrap:wrap; row-gap:4px; }
#profile .chip32{ height:32px; border-radius:8px; padding:0 12px; font-size:12px;
  color:var(--graphite-soft); position:relative; display:inline-flex; align-items:center;
  max-width:100%; background:none; border:none; font-family:'Neucha',cursive; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform .09s ease; }
#profile .chip32::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--pencil); border-radius:8px; filter:url(#squiggle); }
#profile .chip32:active{ transform:scale(.97); }
#profile .chip32:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px;
  border-radius:8px; }
#profile .chip32.is-plus, #profile .chip32.upfull{ color:var(--graphite);
  background:var(--marker); }
#profile .chip32.is-plus::before, #profile .chip32.upfull::before{ border-color:var(--amber); }
#profile .chiprow .since{ font-size:12px; color:var(--pencil); white-space:nowrap; }

/* XP-полоса 12: прогресс — штриховка h-hach (green diag) + графит-контур,
   остаток — ghost dashed, деления 25% пунктиром; «+N ✎» всплывает 400 мс
   (transform/opacity) при закрытии задачи (rpgOnAward) */
#profile .xpw{ margin-top:12px; position:relative; }
#profile .xpw:empty{ display:none; }
#profile .xpbar{ position:relative; height:12px; }
#profile .xpfill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px;
  border:2px solid var(--graphite); transition:width .4s ease;
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 4.5px, rgba(62,142,90,.35) 4.5px 6px); }
#profile .xprest{ position:absolute; right:0; top:0; bottom:0; left:100%; border-radius:3px;
  border:1.5px dashed var(--pencil); transition:left .4s ease; }
#profile .xpt{ position:absolute; top:-4px; bottom:-4px;
  border-left:1.4px dashed var(--pencil-faint); }
#profile .xpp{ position:absolute; right:56px; top:-8px; font-family:'Caveat',cursive;
  font-weight:700; font-size:17px; color:var(--green); opacity:0; pointer-events:none; }
#profile .xpp.go{ animation:xppf .4s ease; }
@keyframes xppf{ 0%{ opacity:0; transform:translateY(6px); } 30%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-16px); } }
#profile .xpn{ font-size:12px; color:var(--graphite-soft); text-align:right; margin-top:4px; }

/* ── карточка plus (чертёж 06·3): заголовок 19 (plus — gold), текст 13, одна
   ЗОЛОТАЯ кнопка 48 R12 (Caveat 19, солид gold + карандашный контур ::before,
   не data-pencil — иначе подложка перекрыла бы заливку), цена 12 ── */
#profile .plus{ display:grid; gap:8px; }
#profile .plus h3{ margin:0; font-size:19px; }
#profile .plus h3 svg{ width:16px; height:16px; }
#profile .plusp{ margin:0; font-size:13px; line-height:1.3; color:var(--graphite-soft); }
#profile .cta.gold{ position:relative; justify-self:start; height:48px; margin-top:4px;
  padding:0 18px; display:inline-flex; align-items:center; border-radius:12px;
  background:var(--gold); color:#fff; font-family:'Caveat',cursive; font-weight:700;
  font-size:19px; text-align:center; border:none; cursor:pointer; transition:transform .09s ease; }
#profile .cta.gold::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle); }
#profile .cta.gold:active{ transform:scale(.97); }
#profile .cta.gold:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px;
  border-radius:12px; }
#profile .plus .price{ font-size:12px; color:var(--pencil); }

/* ── статы: 2×2 на телефоне, в ряд на широких ── */
#profile .stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:720px){ #profile .stats{ grid-template-columns:repeat(4,1fr); } }
/* плитка — кнопка (тап → модалка openStatModal): сброс дефолтов button, раскладку
   даёт flex; фон рисует data-pencil (mountProfilePencils) */
#profile .stat{ position:relative; padding:12px 14px; display:flex; gap:12px;
  align-items:center; width:100%; background:none; border:none; font:inherit;
  color:inherit; text-align:left; cursor:pointer; transition:transform .12s ease; }
#profile .stat:hover{ transform:translateY(-1px); }
#profile .stat:focus-visible{ outline:3px solid var(--ink-blue);
  outline-offset:2px; border-radius:12px; }
#profile .stat > *{ position:relative; }
#profile .stat svg.g{ width:30px; height:30px; flex:0 0 auto; }
#profile .stat .v{ font-size:1.35rem; line-height:1; font-family:'Caveat',cursive;
  font-weight:700; }
#profile .stat .l{ font-size:.78rem; color:var(--p-soft); margin-top:2px; }

/* ── достижения ── */
#profile .ach{ display:grid; gap:2px; }
#profile .arow{ display:flex; gap:14px; align-items:center; margin:6px 0; }
#profile .arow svg.g{ width:38px; height:38px; flex:0 0 auto; }
#profile .arow .grow{ flex:1; min-width:0; }
#profile .arow .t{ display:flex; justify-content:space-between; font-size:1rem;
  gap:10px; }
#profile .arow .t .n{ color:var(--p-soft); font-size:.85rem; white-space:nowrap; }
#profile .bar{ height:10px; margin-top:6px; }

/* ── семья (чертёж 06·3): строки 48 «аватар 32 · имя · роль», ghost-кнопка 40
   «позвать в семью» с + line-иконкой. Роль показываем честно: «ты» у себя,
   пер-участниковых ролей в данных нет — у остальных пусто. ── */
#profile .fam{ display:flex; flex-direction:column; }
#profile .fam .fr{ display:flex; align-items:center; gap:8px; height:48px; width:100%; }
#profile .fam .fr .ava{ width:32px; height:32px; flex:none; font-size:.95rem;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.12); }
#profile .fam .fnm{ flex:1; min-width:0; font-size:15px; color:var(--graphite);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#profile .fam .frole{ flex:none; font-size:12px; color:var(--pencil); white-space:nowrap; }
#profile .fam .frghost{ position:relative; height:40px; margin-top:4px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px; border-radius:10px;
  font-family:'Neucha',cursive; font-size:14px; color:var(--graphite-soft);
  background:none; border:none; cursor:pointer; transition:transform .09s ease, color .12s; }
#profile .fam .frghost::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle); }
#profile .fam .frghost svg{ width:16px; height:16px; }
#profile .fam .frghost:hover{ color:var(--graphite); }
#profile .fam .frghost:active{ transform:scale(.98); }
#profile .fam .frghost:focus-visible{ outline:3px solid var(--ink-blue);
  outline-offset:2px; border-radius:10px; }

/* ── сегменты «тема»/«уведомления» (чертёж 06·3): seg40 40 R10 с переезжающим
   маркером-пилюлей (.mk transform .2s), line-иконки 2.5/20, активная кнопка —
   Caveat 15. Селектор #profile .seg40 (1,1,0) перебивает старые бары #theme-seg/
   #push-seg в dark.css (1,0,0) в обеих темах — тот чужой WIP не трогаем. Маркер
   двигают paintThemeSeg/paintPushSeg (theme.js/push.js). ── */
#profile .seg40{ position:relative; height:40px; margin-top:8px; border-radius:10px;
  background:var(--paper2); display:flex; padding:4px; gap:4px; flex-wrap:nowrap; }
#profile .seg40::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle); }
#profile .seg40 .mk{ position:absolute; top:4px; bottom:4px; left:4px; background:var(--marker);
  border-radius:8px; transform:rotate(-1deg); transition:transform .2s ease; pointer-events:none; }
#profile .seg40.s3 .mk{ width:calc((100% - 16px) / 3); }
#profile .seg40.s2 .mk{ width:calc((100% - 12px) / 2); }
#profile .seg40 button{ flex:1; min-width:0; min-height:0; margin:0; padding:0; position:relative;
  display:flex; align-items:center; justify-content:center; gap:6px; border-radius:8px;
  line-height:1; font-family:'Neucha',cursive; font-size:13px; color:var(--pencil);
  background:none; border:none; cursor:pointer; }
#profile .seg40 button svg{ width:20px; height:20px; flex:none; }
#profile .seg40 button.on{ color:var(--graphite); font-family:'Caveat',cursive;
  font-weight:700; font-size:15px; }
#profile .seg40 button:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px;
  border-radius:8px; }

/* ── низ: экскурсия/выход + подпись ── */
#profile .p-signout{ text-align:center; padding:2px 0 0; }
#profile .p-signout button{ font-family:'Neucha',cursive; font-size:.95rem;
  color:var(--red); cursor:pointer; padding:8px 14px; background:none; border:none; }
#profile .pfoot{ text-align:center; font-family:'Caveat',cursive; font-size:1.1rem;
  color:var(--p-soft); transform:rotate(-.5deg); padding-bottom:6px; }

@media (max-width:639px){
  #profile .pgrid{ padding:10px 12px 0; gap:14px; }
  /* чертёж 06 держит аватар-круг 96 и имя 24 и на телефоне (рендер 375) */
  #profile .hero .who{ gap:12px; }
}