/* Profile (learner-screens agent): account card and recent activity of one height, tabs below. Working tokens only.
   The height of the pair is set by the account card; the activity list is an absolute layer that scrolls inside
   (C4.7.1 #4: a flex:1 1 0 variant is computed differently by the engines). */

.profile { display: flex; flex-direction: column; }
.profile__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: stretch; min-block-size: 400px; margin-block-end: var(--space-8); }
.profile__tabs { margin-block-end: var(--space-6); }
.profile__panel { outline: none; }

/* ---------- account ---------- */
.pacc { gap: var(--space-4); padding: var(--space-6); }
.pacc__head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.pacc__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pacc__name { margin: 0; }
.prows { display: flex; flex-direction: column; margin: 0; }
.prow {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: var(--space-4); block-size: var(--row-list);
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.prow:last-child { box-shadow: none; }
.prow__k { color: var(--text-muted); font-size: var(--fs-sm); }
.prow__v { min-width: 0; margin: 0; }
.prow__text { font-weight: var(--fw-medium); }
.prow__select { display: block; max-inline-size: 260px; }
.prow .select { min-block-size: 36px; padding-block: 0; }
.prow .select-wrap__arrow { inset-inline-end: 12px; }
.pacc__foot { margin-block-start: auto; padding-block-start: var(--space-2); }

/* ---------- recent activity ---------- */
.pact { position: relative; padding: 0; gap: 0; overflow: hidden; }
.pact__head { display: flex; align-items: center; block-size: 64px; padding: var(--space-4) var(--space-6) 0; }
.pact__scroll { position: absolute; inset-block: 64px 56px; inset-inline: 0; padding-inline: var(--space-6); }
.pact__scroll:focus-visible { outline-offset: -2px; }
.pact__empty { position: absolute; inset-block: 64px 0; inset-inline: 0; display: grid; place-items: center; overflow: hidden; }
.pact__empty .state { padding-block: var(--space-4); }
.pact__foot {
  position: absolute; inset-block-end: 0; inset-inline: 0; display: flex; align-items: center; gap: var(--space-3); block-size: 56px; padding-inline: var(--space-6);
  background: var(--surface); box-shadow: inset 0 1px 0 var(--line-soft);
}
.acts { margin: 0; padding: 0; list-style: none; }
.act {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); block-size: var(--row-list);
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.act__icon { display: grid; place-items: center; color: var(--text-muted); }
.act__text { color: var(--text); font-size: var(--fs-sm); text-decoration: none; }
a.act__text:hover { text-decoration: underline; }
.act__time { font-size: var(--fs-xs); white-space: nowrap; }

/* ---------- tab panels ---------- */
.ppanel { display: flex; flex-direction: column; min-width: 0; }
.pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-block-end: var(--space-6); }
/* The Progress column asks for 200 px, but in table-layout auto the fill column takes the rest and a width is only a
   hint (B-88): the cell content holds the column's width itself, so the bar stays readable. */
.cellprog { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-inline-size: calc(200px - 2 * var(--space-4)); }
.cellprog .progress { flex: 1 1 auto; min-inline-size: 96px; }
.cellprog__v { flex: none; min-inline-size: 40px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: end; }
.audit__filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-block-end: var(--space-5); }
.audit__filter .field { inline-size: 200px; }
.audit__reset:empty { display: none; }
.rights__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-end: var(--space-5); }
.rights__note { font-size: var(--fs-sm); }
.rights__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gutter); }
.rights__group { gap: var(--space-3); }
.rights__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.perm {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: var(--space-3); block-size: 56px;
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.perm:last-child { box-shadow: none; }
.perm__icon { display: grid; place-items: center; color: var(--text-faint); }
.perm.is-granted .perm__icon { color: var(--brand); }
.perm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm__title { font-weight: var(--fw-medium); }
.perm:not(.is-granted) .perm__title { color: var(--text-muted); }
.perm__desc { font-size: var(--fs-xs); }

@media (max-width: 1023px) {
  .profile__pair { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
  .pact { block-size: 420px; }
}
@media (max-width: 719px) {
  .pacc { padding: var(--space-5); }
  .prow { grid-template-columns: 110px minmax(0, 1fr); }
  .pstats { grid-template-columns: minmax(0, 1fr); }
  .pact__scroll, .pact__foot { padding-inline: var(--space-5); }
  .pact__head { padding-inline: var(--space-5); }
  .audit__filter .field { inline-size: 100%; }
  .rights__groups { grid-template-columns: minmax(0, 1fr); }
}