/* Personal account: identity, subscription, college account, agent, settings, danger zone. */

.pf {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Top bar ---------- */
.pf-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.pf-top__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.pf-top__right { margin-left: auto; }

.pf-top__inner,
.pf-main { max-width: calc(880px + 2 * var(--gutter)); }
.pf-main { padding-top: var(--s-6); }

/* ---------- Identity ---------- */
.pf-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.pf-id__avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pf-id__body { min-width: 0; display: grid; gap: var(--s-2); }
.pf-avatar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-1);
}
.pf-avatar__pick { cursor: pointer; }
.pf-avatar__pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-id__name {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: -0.03em;
}
.pf-id__meta { color: var(--text-2); font-size: var(--fs-14); }
.pf-id__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- Cards ---------- */
.pf-cards { display: grid; gap: var(--s-4); }

.pf-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.pf-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pf-card--danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

.pf-sub {
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pf-note {
  max-width: 64ch;
  color: var(--text-3);
  font-size: var(--fs-14);
  line-height: 1.6;
}
.pf-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Прямой ребёнок грид-карточки растягивается на всю её ширину — кнопке это не идёт. */
.pf-card > .btn { justify-self: start; }

/* ---------- Key/value rows ---------- */
.pf-row {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-14);
}
.pf-row:last-of-type { border-bottom: 0; }
.pf-row__label { color: var(--text-3); }
.pf-row__value { overflow-wrap: anywhere; }

/* ---------- Subscription ---------- */
.pf-plan__now { font-size: var(--fs-16); }
.pf-plan__now--off { color: var(--danger-text); }

/* Карточки тарифов переехали на экран «Тариф» (plan.css): кабинет
   показывает состояние подписки, а не второй прайс-лист. */
.pf-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  color: var(--accent-text);
  font-size: var(--fs-14);
  font-weight: 600;
}
.pf-link svg { width: 15px; height: 15px; transition: transform var(--dur-micro) var(--ease-out); }
.pf-link:hover svg { transform: translateX(3px); }

/* ---------- Devices ---------- */
.pf-devices { display: grid; gap: var(--s-2); list-style: none; }
.pf-device {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--fs-14);
}
.pf-device {
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.pf-device:hover { border-color: var(--border-strong); transform: translateX(3px); }
.pf-device.is-current { border-color: var(--spot-border); }
.pf-device__meta { color: var(--text-3); font-size: var(--fs-12); white-space: nowrap; }
/* A device unfolds into its latest visits (§48). The row is the <summary>, so the whole line toggles. */
.pf-device { display: block; }
.pf-device__fold { width: 100%; }
/* Name over «when», the arrow on the right: «Windows-ПК · Chrome» stays whole on a phone. */
.pf-device__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; cursor: pointer; list-style: none; }
.pf-device__head::-webkit-details-marker { display: none; }
.pf-device__name { grid-column: 1; line-height: 1.35; }
.pf-device__head .pf-device__meta { grid-column: 1; white-space: normal; }
.pf-device__head svg { grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px; color: var(--text-3); transition: transform var(--dur-micro) var(--ease-out); }
.pf-device__fold[open] .pf-device__head svg { transform: rotate(180deg); }
.pf-visits { display: grid; gap: 2px; margin-top: var(--s-2); list-style: none; color: var(--text-3); font-size: var(--fs-12); }
.pf-visits li { display: flex; justify-content: space-between; gap: var(--s-3); }

/* ---------- Agent scopes ---------- */
.pf-scopes { display: grid; gap: var(--s-2); list-style: none; }
.pf-scope {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-3);
  font-size: var(--fs-14);
}
.pf-scope svg { width: 16px; height: 16px; }
.pf-scope.is-on { color: var(--text); }
.pf-scope.is-on svg { color: var(--success); }

/* ---------- Settings and danger rows ---------- */
.pf-setting,
.pf-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.pf-setting:last-of-type,
.pf-danger:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pf-setting__name { font-size: var(--fs-14); font-weight: 600; }
.pf-setting__note {
  max-width: 52ch;
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: 1.5;
}
.pf-setting .btn,
.pf-danger .btn { flex: 0 0 auto; }

.pf-danger__btn { color: var(--danger-text); }
/* Armed state after the first click: the label already says "точно?", the colour backs it up. */
.pf-danger__btn.is-armed {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

@media (max-width: 519px) {
  .pf-card { padding: var(--s-4); }
  .pf-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* Кнопка уходит под текст: рядом с двумя строками объяснения ей на телефоне
     остаётся сантиметр, и подпись в ней переносится по буквам. */
  .pf-setting,
  .pf-danger {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .pf-id__avatar { width: 56px; height: 56px; font-size: var(--fs-18); }
}

/* ---------- Мои данные ---------- */
/* Панель раскрывается по кнопке и объясняет, что будет в архиве и почему его
   сейчас не будет. Тост тут не годится: он исчезает быстрее, чем это читают. */
.pf-export {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
}
.pf-export__lead { color: var(--text-2); font-size: var(--fs-14); }
.pf-export__list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding-left: var(--s-5);
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.pf-export__list b { color: var(--text); font-weight: 600; }
.pf-export__none { color: var(--text-2); font-size: var(--fs-14); line-height: 1.6; }
.pf-export__none b { color: var(--text); }

/* Граница ответственности платформы. Стоит отдельно от кнопок: это не
   пояснение к действию, а то, чего действие НЕ делает. */
.pf-note--edge {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* Erase-recordings question: a native modal, no motion. Same layer trick as the teacher card. */
.pf-dialog {
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: transparent;
  overflow: visible;
}
.pf-dialog:not([open]) { display: none; }
.pf-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pf-dialog__card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.pf-dialog__title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; }
.pf-dialog__text { margin: 0; color: var(--text-2); line-height: 1.6; }

/* «Твой почерк»: the portrait as the model wrote it, small and quiet under «Почему так». */
.pf-voice { color: var(--text-2); font-size: var(--fs-14); line-height: 1.55; }
[data-voice] .nt-solve__files { margin: var(--s-3) 0; }