/* ===========================================================================
   Student profile — /profile/{username} for a student ("Student Details",
   Figma 5381:3320).

   Every colour here is the design's own value, read from the file rather than
   matched by eye: the band behind the hero, the three tinted stat cards, the
   section pills, the chart blues and the orange that marks anything under the
   pass mark. They live as variables at the top so the page has one palette.

   The theme's sticky nav hangs 50px into the page (header-footer.css), so the
   hero opens with room for it, as the class detail page does.
   =========================================================================== */
.fame-profile {
  /* --- the design's palette --- */
  --fsp-page: #f5f8f9;         /* page behind the cards          */
  --fsp-band: #dfeefc;         /* the hero band                  */
  --fsp-blue: #0063e3;         /* breadcrumb, section pills      */
  --fsp-primary: #0f5fd1;      /* bars, fills, buttons, initials */
  --fsp-ink: #0c1524;          /* headings and numbers           */
  --fsp-ink-2: #121f3e;        /* the stat-card labels           */
  --fsp-muted: #4b5768;        /* secondary text                 */
  --fsp-deep: #0a3f8f;         /* VERIFIED FAME STUDENT          */
  --fsp-chip: #0c1524;         /* exam chips                     */
  --fsp-below: #c2620a;        /* under the pass mark            */
  --fsp-below-ink: #8a4300;    /* its text, and the legend line  */
  --fsp-below-bg: #fdecd2;     /* "Not passed"                   */
  --fsp-pass-ink: #0d5a34;
  --fsp-pass-bg: #e1f4ea;      /* "Passed"                       */
  --fsp-track: #e9ecf1;        /* progress and subject tracks    */
  --fsp-line: #eceff3;         /* row dividers                   */
  --fsp-soft: #f1f3f6;         /* the course exam chip           */
  --fsp-badge-ring: #e6eefc;   /* ring around the verified tick  */
  --fsp-star: #f5a524;
  --fsp-card-courses: #fdfaf4;
  --fsp-card-mocks: #f5eefd;
  --fsp-card-best: #f3fef9;
  --fsp-shadow: 0 4px 25px rgba(0, 0, 0, .05);
  color: var(--fsp-ink);
  background: var(--fsp-page);
}

.fsp-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }
/* The performance block: full width of the page wrap, centred (the design's
   1160px cap was dropped — owner, 2026-10-07). */
.fsp-narrow { width: 100%; margin: 0 auto; }

/* ---------- hero ----------
   One flat band that runs on BEHIND the three stat cards: in the design it ends
   two thirds of the way down them, which the cards' negative margin reproduces. */
.fsp-hero {
  background: var(--fsp-band);
  padding: 92px 0 96px;
  text-align: center;
}
.fsp-crumb {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--fsp-blue); border-radius: 100px; padding: 6px 18px;
  font-size: 14px; color: #fff; margin: 0 0 30px;
}
.fsp-crumb a { color: #fff; text-decoration: none; }
.fsp-crumb a:hover { text-decoration: underline; }
.fsp-crumb span[aria-hidden] { opacity: .75; }

.fsp-avatar-wrap { position: relative; width: 144px; margin: 0 auto 16px; }
.fsp-avatar {
  display: block; width: 144px; height: 144px; border-radius: 50%;
  object-fit: cover; background: #fff; box-sizing: border-box;
}
.fsp-avatar--initial {
  display: flex; align-items: center; justify-content: center;
  color: var(--fsp-primary); font-size: 46px; font-weight: 800; letter-spacing: -.92px;
}
.fsp-verified {
  position: absolute; right: 0; bottom: 0; width: 40px; height: 40px;
  border-radius: 20px; background: var(--fsp-primary);
  border: 4px solid var(--fsp-badge-ring);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.fsp-verified img { display: block; width: 18px; height: 18px; }
.fsp-verified-text {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--fsp-deep);
}
.fsp-name { margin: 0 0 10px; font-size: 34px; font-weight: 700; line-height: 1.2; color: var(--fsp-ink); }
.fsp-college { margin: 0 0 20px; color: var(--fsp-muted); font-size: 16px; }
.fsp-exams { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fsp-exam {
  display: inline-block; padding: 9px 18px; border-radius: 20px;
  background: var(--fsp-chip); color: #fff; font-size: 14px; font-weight: 600;
}

/* ---------- body ---------- */
.fsp-body { padding-bottom: 64px; }
.fsp-card { background: #fff; border-radius: 20px; padding: 28px 32px; box-shadow: var(--fsp-shadow); }
.fsp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fsp-card-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; color: var(--fsp-ink); }
.fsp-card-head .fsp-card-title { margin-bottom: 0; }
.fsp-empty { margin: 0; color: var(--fsp-muted); text-align: center; }

/* The section pills: a 5% wash of the brand blue inside a blue hairline. */
.fsp-pill {
  display: block; width: fit-content; margin: 52px auto 16px;
  padding: 4px 22px; border: 1px solid var(--fsp-blue); border-radius: 10px;
  background: rgba(0, 99, 227, .05); color: var(--fsp-blue);
  font-size: 16px; line-height: 28px; font-weight: 600;
}
.fsp-section-title { margin: 0 0 28px; text-align: center; font-size: 28px; font-weight: 700; color: var(--fsp-ink); }
.fsp-section-title--left { text-align: left; margin: 0; }

/* ---------- the three tiles ---------- */
.fsp-tiles {
  margin: -74px 0 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.fsp-tile {
  display: flex; align-items: center; gap: 20px; min-height: 122px;
  border-radius: 20px; padding: 24px 30px; box-shadow: var(--fsp-shadow);
}
.fsp-tile:nth-child(1) { background: var(--fsp-card-courses); }
.fsp-tile:nth-child(2) { background: var(--fsp-card-mocks); }
.fsp-tile:nth-child(3) { background: var(--fsp-card-best); }
/* The icons are the design's own SVGs; the "best" one is a glyph over its
   pale disc, so the disc is the background here. */
.fsp-tile-ico { flex: 0 0 auto; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.fsp-tile-ico img { display: block; }
.fsp-tile-ico--best {
  background: url('../img/student-profile/stat-best-ring.svg') left bottom / 39px 39px no-repeat;
  align-items: flex-start; justify-content: flex-end;
}
.fsp-tile-value { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--fsp-ink); }
.fsp-tile-label { margin: 2px 0 0; font-size: 20px; line-height: 22px; color: var(--fsp-ink-2); font-weight: 400; }

/* ---------- performance ---------- */
.fsp-perf { display: grid; grid-template-columns: minmax(0, 728fr) minmax(0, 408fr); gap: 24px; align-items: start; }
.fsp-chart-card, .fsp-rate-card { border-radius: 28px; }

.fsp-legend { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fsp-muted); }
.fsp-legend-line { width: 20px; height: 2px; background: var(--fsp-below-ink); display: inline-block; }

/* The bar chart. A bar's HEIGHT is the datum and travels in the markup;
   everything else is here. */
.fsp-bars {
  margin: 28px 0 0; padding: 0; list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 16px; align-items: end;
}
.fsp-bar { display: flex; flex-direction: column; justify-content: flex-end; height: 300px; text-align: center; }
.fsp-bar-value { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--fsp-ink); }
.fsp-bar-fill { display: block; background: var(--fsp-primary); border-radius: 12px 12px 0 0; min-height: 4px; }
.fsp-bar.is-below .fsp-bar-fill { background: var(--fsp-below); }
.fsp-bar-label { display: block; margin-top: 12px; font-size: 13px; color: var(--fsp-ink); line-height: 1.3; word-break: break-word; }
.fsp-bar-date { display: block; color: var(--fsp-muted); font-size: 12.5px; margin-top: 3px; }

/* The donut. */
.fsp-donut { position: relative; width: 200px; margin: 24px auto 20px; }
.fsp-donut svg { display: block; width: 200px; height: 200px; }
.fsp-donut-track { stroke: var(--fsp-line); }
.fsp-donut-fill { stroke: var(--fsp-primary); }
.fsp-donut-centre { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fsp-donut-value { font-size: 40px; font-weight: 700; line-height: 1; color: var(--fsp-ink); }
.fsp-donut-label { font-size: 13px; color: var(--fsp-muted); margin-top: 8px; }
.fsp-rate-note { margin: 0; text-align: center; color: var(--fsp-muted); font-size: 15px; }

/* Average by subject. */
.fsp-subjects { margin-top: 24px; }
.fsp-sbars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.fsp-sbar { display: grid; grid-template-columns: 136px minmax(0, 1fr) 48px; gap: 16px; align-items: center; }
.fsp-sbar-name { font-size: 15px; font-weight: 600; color: var(--fsp-ink); }
.fsp-sbar-track { display: block; height: 14px; border-radius: 7px; background: var(--fsp-track); overflow: hidden; }
.fsp-sbar-fill { display: block; height: 100%; border-radius: 7px; background: var(--fsp-primary); }
.fsp-sbar.is-below .fsp-sbar-fill { background: var(--fsp-below); }
.fsp-sbar-value { font-size: 15px; font-weight: 700; text-align: right; color: var(--fsp-ink); }
.fsp-note { margin: 24px 0 0; font-size: 13px; color: var(--fsp-muted); }

/* ---------- courses ---------- */
.fsp-courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fsp-course {
  background: #fff; border-radius: 20px; padding: 32px; box-shadow: var(--fsp-shadow);
  display: flex; flex-direction: column;
}
.fsp-course-top { margin: 0 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fsp-course-exam {
  display: inline-block; padding: 6px 14px; border-radius: 16px;
  background: var(--fsp-soft); color: var(--fsp-ink); font-size: 13px; font-weight: 600;
}
.fsp-course-status { font-size: 13px; font-weight: 600; color: var(--fsp-muted); }
.fsp-course-status.is-done { color: var(--fsp-pass-ink); }
.fsp-course-title { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--fsp-ink); }
.fsp-course-since { margin: 0 0 22px; font-size: 14px; color: var(--fsp-muted); }
.fsp-course-track { display: block; margin-top: auto; height: 6px; border-radius: 3px; background: var(--fsp-track); overflow: hidden; }
.fsp-course-fill { display: block; height: 100%; border-radius: 3px; background: var(--fsp-primary); }
.fsp-course-foot { margin: 14px 0 0; display: flex; justify-content: space-between; font-size: 14px; color: var(--fsp-muted); }
.fsp-course-foot strong { color: var(--fsp-ink); }

/* ---------- attempts ---------- */
.fsp-attempts-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 52px 0 22px; }
.fsp-link { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--fsp-blue); cursor: pointer; }
.fsp-link:hover { text-decoration: underline; }
.fsp-attempts { padding: 0 32px; }
.fsp-mocks { margin: 0; padding: 0; list-style: none; }
.fsp-mock {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 110px 86px; gap: 16px;
  align-items: center; padding: 24px 0; border-bottom: 1px solid var(--fsp-line);
}
.fsp-mock:last-child { border-bottom: 0; }
.fsp-mock[hidden] { display: none; }
/* The mock test's icon tile (partials/mock-lead-icon): the Mock Exams page's
   tile, coloured per mock test by --fame-row-c (set inline). */
.fsp-mock-lead {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; color: var(--fame-row-c, var(--fsp-primary));
  background: var(--fsp-soft);
  background: color-mix(in srgb, var(--fame-row-c, var(--fsp-primary)) 12%, #ffffff);
}
.fsp-mock-lead svg { width: 26px; height: 26px; }
.fsp-mock-info { min-width: 0; }
.fsp-mock-title { display: block; font-size: 16px; font-weight: 600; color: var(--fsp-ink); }
.fsp-mock-meta { display: block; margin-top: 6px; font-size: 14px; color: var(--fsp-muted); }
.fsp-mock-res { justify-self: start; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 700; }
.fsp-mock-res.is-pass { background: var(--fsp-pass-bg); color: var(--fsp-pass-ink); }
.fsp-mock-res.is-fail { background: var(--fsp-below-bg); color: var(--fsp-below-ink); }
.fsp-mock-score { font-size: 28px; font-weight: 700; text-align: right; letter-spacing: -.56px; color: var(--fsp-ink); }

/* ---------- their review ---------- */
.fsp-review { margin-top: 52px; }
.fsp-review-source { margin: 0 0 18px; font-size: 18px; font-weight: 600; border-left: 2px solid var(--fsp-primary); padding-left: 14px; color: var(--fsp-ink); }
.fsp-stars { margin: 0 0 18px; display: flex; gap: 6px; }
.fsp-stars img { display: block; width: 24px; height: 24px; }
.fsp-star--off { opacity: .25; }
.fsp-quote { margin: 0 0 24px; font-size: 16px; line-height: 1.75; color: var(--fsp-muted); }
.fsp-review-by { margin: 0; display: flex; align-items: center; gap: 14px; }
.fsp-review-by img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.fsp-review-name { display: block; font-weight: 600; font-size: 18px; color: var(--fsp-ink); }
.fsp-review-role { display: block; font-size: 15px; color: var(--fsp-muted); }

/* ---------- call to action ---------- */
.fsp-cta { margin-top: 60px; text-align: center; }
.fsp-cta-title { margin: 0 0 24px; font-size: 32px; font-weight: 700; color: var(--fsp-ink); }
.fsp-cta-btn {
  display: inline-block; padding: 17px 36px; border-radius: 28px;
  background: var(--fsp-primary); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none;
}
.fsp-cta-btn:hover { background: #0a4ba9; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .fsp-perf { grid-template-columns: 1fr; }
  .fsp-tiles { grid-template-columns: 1fr; margin-top: -40px; }
  .fsp-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .fsp-hero { padding: 76px 0 64px; }
  .fsp-name { font-size: 26px; }
  .fsp-tiles { margin-top: -34px; }
  .fsp-courses { grid-template-columns: 1fr; }
  .fsp-card, .fsp-course { padding: 22px 18px; }
  .fsp-attempts { padding: 0 18px; }
  .fsp-sbar { grid-template-columns: 1fr; gap: 6px; }
  .fsp-sbar-value { text-align: left; }
  /* Phones: icon + title on the first row, the result badge and the score on
     the second (badge under the title, score at the right). */
  .fsp-mock { grid-template-columns: 44px minmax(0, 1fr) 76px; gap: 12px; }
  .fsp-mock-lead { grid-row: 1; grid-column: 1; width: 44px; height: 44px; border-radius: 11px; }
  .fsp-mock-lead svg { width: 22px; height: 22px; }
  .fsp-mock-info { grid-row: 1; grid-column: 2 / -1; }
  .fsp-mock-res { grid-row: 2; grid-column: 2 / 3; justify-self: start; }
  .fsp-mock-score { grid-row: 2; grid-column: 3 / -1; font-size: 24px; }
  .fsp-bars { gap: 8px; }
  .fsp-bar-label { font-size: 11px; }
  .fsp-cta-title { font-size: 24px; }
}