/* ============================================================
   PERSONAL — экран 7 «Личное пространство для роста»
   Equal grid 3×2, каждый блок: визуальный мини-виджет сверху,
   заголовок + описание снизу. Гесскоины — accent с gradient border.
   ============================================================ */

.personal {
  position: relative;
}
/* Индивидуальный blob-фон (.personal__bg-blob) удалён —
   фон секции теперь определяется глобальной зеброй в shared.css. */

/* HEAD — центрированный заголовок секции */
.personal__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  margin-bottom: 48px;
}
.personal__title {
  max-width: 833px;
  margin: 0 auto;
}
.personal__lead {
  max-width: 527px;
  margin: 0 auto;
  text-align: center;
}

/* Notice «Будет доступно с 1 июня» — лавандовая pill с иконкой
   календаря под lead. Сообщает юзеру что эта функциональность будет
   доступна после старта летнего сезона. */
.personal__notice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 16px auto 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(155, 95, 223, 0.10);
  border: 1px dashed rgba(155, 95, 223, 0.35);
  color: var(--g3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.personal__notice svg {
  width: 16px; height: 16px; flex-shrink: 0;
}
.personal__notice b {
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Карточки слегка приглушаем — визуально подчёркиваем,
   что функциональность ещё не активна (доступна с 1 июня). */
.personal__grid {
  opacity: 0.85;
}

/* GRID — 3 × 2, равные карточки */
.personal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* CARD — белая, hairline border, равная высота, padding 24px.
   Порядок детей в HTML: viz → title → desc, но визуально хотим
   сначала text-блок, потом visual. Делаем через flex order, чтобы
   не плодить дублирующую разметку. */
.pcard {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  isolation: isolate;
  min-height: 272px;
}
.pcard__title { order: 1; }
.pcard__desc  { order: 2; }
.pcard__viz   { order: 3; margin-top: auto; }

/* Accent — Гесскоины: gradient border 1.5px через mask */
.pcard--accent {
  border-color: transparent;
}
.pcard--accent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.pcard__viz {
  /* Фиксированная высота — чтобы низ всех 6 карточек встал ровно
     на одну линию в каждом ряду. Visual теперь снизу, граница сверху. */
  height: 180px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 18px 4px 5px;
  border-top: 1px solid var(--hairline-2);
  margin-top: 18px;
}

.pcard__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}
.pcard__desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* Сноска-уточнение под .pcard__desc — italic, мельче, светлее. */
.pcard__footnote {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-mute);
  margin-top: 6px;
  order: 3;
}
.pcard__footnote em {
  font-style: italic;
  font-family: 'Playfair Display', 'Inter', serif;
}

/* ============================================================
   1 · Настрой на день — 5 emoji-circle в ряд, первый с gradient ring
   ============================================================ */
.pcard__viz--mood {
  gap: 9px;
  justify-content: flex-start;
}
.pcard__mood {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fef6f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  filter: grayscale(.15);
  opacity: .85;
}
.pcard__mood.is-active {
  filter: none;
  opacity: 1;
}
.pcard__mood.is-active::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 2px;
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask-composite: exclude;
}

/* ============================================================
   2 · Намерения месяца — 4 progress bar'а с bullet и %
   ============================================================ */
.pcard__viz--goals {
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.pcard__goal {
  display: grid;
  grid-template-columns: 14px 1fr 38px;
  align-items: center;
  gap: 9px;
}
.pcard__goal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c, var(--g1));
}
.pcard__goal-bar {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: #f3e5ec;
  overflow: hidden;
}
.pcard__goal-bar i {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  background: var(--grad);
  border-radius: inherit;
}
.pcard__goal-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}

/* ============================================================
   3 · Дневник эфиров — 3 row'а с pill-date, заголовком, превью
   ============================================================ */
.pcard__viz--diary {
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  justify-content: center;
}
.pcard__note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 7px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background .2s ease;
}
.pcard__note:hover { background: #fbf2f4; }
.pcard__note-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--g2);
  background: rgba(233,74,161,.10);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pcard__note:nth-child(3) .pcard__note-date {
  color: var(--g3);
  background: rgba(155,95,223,.10);
}
.pcard__note-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pcard__note-body b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__note-body small {
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__note-arrow {
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1;
  font-weight: 400;
}

/* ============================================================
   4 · Гесскоины — gradient coin + большое число
   ============================================================ */
.pcard__viz--coin {
  gap: 15px;
  align-items: center;
  padding-left: 4px;
}
.pcard__coin {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  filter: drop-shadow(0 7px 15px rgba(233,74,161,.28));
}
.pcard__coin svg {
  width: 100%;
  height: 100%;
}
.pcard__balance {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   5 · Календарь эмоций — heatmap 7 × 4 dots
   ============================================================ */
.pcard__viz--heatmap {
  justify-content: center;
}
.pcard__heatmap {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  grid-auto-rows: 14px;
  gap: 9px;
  justify-content: center;
}
.pcard__hdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3e5ec;
}

/* ============================================================
   6 · Отчёт месяца — 4 gradient bar'а + KPI
   ============================================================ */
.pcard__viz--report {
  align-items: flex-end;
  gap: 15px;
  padding-bottom: 15px;
}
.pcard__chart {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 94px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}
.pcard__bar {
  flex: 1 1 0;
  height: var(--h, 50%);
  background: var(--grad);
  border-radius: 8px 8px 0 0;
  min-height: 10px;
  opacity: .9;
}
.pcard__bar:nth-child(1) { opacity: .55; }
.pcard__bar:nth-child(2) { opacity: .7; }
.pcard__bar:nth-child(3) { opacity: .85; }
.pcard__bar:nth-child(4) { opacity: 1; }
.pcard__kpi {
  flex-shrink: 0;
  background: #fef6f0;
  border-radius: var(--radius);
  padding: 12px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 71px;
}
.pcard__kpi b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pcard__kpi span {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .personal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* На мобильном держим сетку 2×3 — 6 карточек влезают как табличка,
     не превращаясь в длинную простыню. Виджеты ужимаем внутри. */
  .personal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .pcard {
    padding: 16px;
    min-height: 220px;
    gap: 6px;
  }
  .pcard__title { font-size: 14px; }
  .pcard__desc  { font-size: 11px; line-height: 1.45; }
  .pcard__viz {
    height: 110px;
    padding: 12px 0 0;
    margin-top: 12px;
  }

  /* 1 · Mood — emoji мельче, gap меньше, чтобы 5 влезло */
  .pcard__viz--mood { gap: 4px; }
  .pcard__mood { width: 28px; height: 28px; font-size: 16px; }

  /* 2 · Goals — компактнее */
  .pcard__viz--goals { gap: 6px; }
  .pcard__goal { grid-template-columns: 10px 1fr 28px; gap: 7px; }
  .pcard__goal-dot { width: 10px; height: 10px; }
  .pcard__goal-bar { height: 5px; }
  .pcard__goal-val { font-size: 10px; }

  /* 3 · Diary — оставляем 2 ноты, третья скрывается чтобы не давила */
  .pcard__viz--diary { gap: 2px; }
  .pcard__note { padding: 4px 5px; gap: 7px; }
  .pcard__note:nth-child(3) { display: none; }
  .pcard__note-date { font-size: 10px; padding: 3px 6px; }
  .pcard__note-body b { font-size: 11px; }
  .pcard__note-body small { font-size: 10px; }
  .pcard__note-arrow { font-size: 13px; }

  /* 4 · Гесскоины — coin + balance стопкой по вертикали */
  .pcard__viz--coin {
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
  }
  .pcard__coin { width: 44px; height: 44px; }
  .pcard__balance { font-size: 30px; }

  /* 5 · Heatmap — мельче, центрируем */
  .pcard__heatmap {
    grid-template-columns: repeat(7, 8px);
    grid-auto-rows: 8px;
    gap: 5px;
  }
  .pcard__hdot { width: 8px; height: 8px; }

  /* 6 · Bar chart + KPI — chart выше, KPI ниже (column) */
  .pcard__viz--report {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 0;
    align-items: stretch;
  }
  .pcard__chart { height: 60px; gap: 6px; }
  .pcard__kpi {
    flex-direction: row;
    gap: 6px;
    padding: 4px 8px;
    min-width: 0;
    align-self: center;
  }
  .pcard__kpi b { font-size: 16px; }
  .pcard__kpi span { font-size: 10px; }
}