/* ==========================================================================
   Profile and account.
   A settings page is read in one column on a phone and scanned in two on
   a desktop; the grid does that without a breakpoint per field.
   ========================================================================== */

.profile { max-width: 46rem; }

.profile__header { display: flex; gap: var(--sf-space-5); align-items: flex-start; }
.profile__avatar { border-radius: var(--sf-radius-full); flex-shrink: 0; object-fit: cover; }
.profile__name { margin: 0 0 var(--sf-space-2); font-size: var(--sf-text-2xl); }
.profile__bio { margin: 0; color: var(--sf-slate-700); }

.profile__links { margin-top: var(--sf-space-5); }
.profile__links ul { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); list-style: none; margin: 0; padding: 0; }
.profile__links a { font-family: var(--sf-font-mono); font-size: var(--sf-text-sm); }

/* ---------- Account ---------- */

.account { display: grid; gap: var(--sf-space-6); max-width: 46rem; }

.account__section {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface);
  padding: var(--sf-space-5);
}

.account__section fieldset { border: 0; margin: 0 0 var(--sf-space-5); padding: 0; }
.account__section fieldset:last-of-type { margin-bottom: 0; }

.account__legend { font-size: var(--sf-text-lg); font-weight: var(--sf-weight-medium); margin-bottom: var(--sf-space-2); padding: 0; }
.account__note { margin: 0 0 var(--sf-space-4); font-size: var(--sf-text-sm); color: var(--sf-slate-600); }
.account__current { font-family: var(--sf-font-mono); margin: 0 0 var(--sf-space-2); }

.account__field { margin: 0 0 var(--sf-space-4); }
.account__field label { display: block; font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); margin-bottom: var(--sf-space-1); }
.account__field input,
.account__field textarea,
.account__field select { width: 100%; }

.account__hint { display: block; margin-top: var(--sf-space-1); font-size: var(--sf-text-xs); color: var(--sf-slate-500); }

/* Two columns where there is room, one where there is not. */
.account__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sf-space-4); }

.account__avatar { display: flex; align-items: center; gap: var(--sf-space-4); margin-bottom: var(--sf-space-5); flex-wrap: wrap; }
.account__avatar img { border-radius: var(--sf-radius-full); object-fit: cover; }

/* The file input is visually hidden but still focusable, so the label
   behaves as a button for a mouse and the control is reachable by tab. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus-visible {
  position: static !important;
  width: auto; height: auto;
  clip: auto; margin: 0;
}

.account__group { margin-bottom: var(--sf-space-4); }
.account__group legend { font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); color: var(--sf-slate-600); }
.account__check { display: block; margin: var(--sf-space-1) 0; font-size: var(--sf-text-sm); }
.account__fixed { margin: var(--sf-space-1) 0; font-size: var(--sf-text-sm); color: var(--sf-slate-500); }

.account__actions { display: flex; gap: var(--sf-space-2); margin: 0; }

.account__status { margin: var(--sf-space-3) 0 0; font-size: var(--sf-text-sm); }
.account__status:empty { display: none; }
.account__status.is-error { color: var(--sf-red-ink); }
.account__status.is-ok { color: var(--sf-green-ink); }

@media (max-width: 640px) {
  .profile__header { flex-direction: column; }
  .account__actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Public instructor profile.
   ========================================================================== */

.instructor-profile { max-width: 60rem; padding-block: var(--sf-space-8); }

.instructor-profile__header { display: flex; gap: var(--sf-space-6); align-items: center; flex-wrap: wrap; }
.instructor-profile__avatar { border-radius: var(--sf-radius-full); object-fit: cover; flex-shrink: 0; }
.instructor-profile__name { margin: 0; font-size: var(--sf-text-3xl); }
.instructor-profile__headline { margin: var(--sf-space-1) 0 var(--sf-space-3); color: var(--sf-slate-600); font-size: var(--sf-text-lg); }

.instructor-profile__expertise { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); list-style: none; margin: 0; padding: 0; }
.instructor-profile__expertise li {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  padding: var(--sf-space-1) var(--sf-space-3);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-full);
}

/* Three figures side by side where there is room, stacked where not. */
.instructor-profile__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sf-space-4);
  margin: var(--sf-space-8) 0;
  padding: var(--sf-space-5);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
}
.instructor-profile__stats dt { font-size: var(--sf-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--sf-slate-500); }
.instructor-profile__stats dd { margin: var(--sf-space-1) 0 0; font-size: var(--sf-text-xl); font-weight: var(--sf-weight-medium); }

.instructor-profile__section { margin-top: var(--sf-space-8); }
.instructor-profile__section h2 { font-size: var(--sf-text-xl); margin-bottom: var(--sf-space-4); }

.instructor-profile__links ul { display: flex; flex-wrap: wrap; gap: var(--sf-space-4); list-style: none; margin: var(--sf-space-5) 0 0; padding: 0; }

.instructor-profile__courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--sf-space-5);
  list-style: none; margin: 0; padding: 0;
}

.instructor-profile__reviews { display: grid; gap: var(--sf-space-4); list-style: none; margin: 0; padding: 0; }
.instructor-review { padding: var(--sf-space-4); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); }
.instructor-review__rating { margin: 0 0 var(--sf-space-2); color: var(--sf-amber-ink); letter-spacing: .1em; }
.instructor-review__content { margin: 0; }
.instructor-review__content p { margin: 0; }
.instructor-review__meta { margin: var(--sf-space-2) 0 0; font-size: var(--sf-text-sm); color: var(--sf-slate-500); }

@media (max-width: 640px) {
  .instructor-profile__header { flex-direction: column; align-items: flex-start; }
  .instructor-profile__name { font-size: var(--sf-text-2xl); }
}