.skills-overview { margin: 0; border: 1px solid var(--border-subtle); background: var(--surface-glass); }
.skills-overview > .card-content { padding: 20px; }
.skills-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 16px; }
.skills-heading h2, .skills-history h2, .skills-history-empty h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.skills-heading .student-section-link { width: auto; justify-content: flex-start; }
.skills-overall { display: flex; align-items: center; gap: 16px; min-width: 0; }
.skills-overall > strong { flex: 0 0 auto; color: var(--accent-light); font-size: 36px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.skills-overall > div { min-width: 0; }
.skills-overall span { display: block; color: var(--text-primary); font-weight: 650; }
.skills-overall small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.skills-overall > strong.skills-no-data { max-width: 48%; font-size: 22px; overflow-wrap: anywhere; }
.skills-core-summary { margin: 10px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.skills-radar { position: relative; width: 100%; height: 250px; min-width: 0; margin-top: 4px; }
.skills-chart-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-secondary); font-size: 13px; }
.skills-chart-caption { margin: -3px 0 18px; color: var(--text-muted); text-align: center; font-size: 12px; line-height: 1.45; }
.skills-chart-unavailable { margin: 0; padding: 24px 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.skills-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.skills-ranking { min-width: 0; }
.skills-ranking h3 { margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; font-weight: 650; line-height: 1.4; }
.skills-ranking-list { display: grid; gap: 3px; }
.skills-rank-row { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto 15px; align-items: center; gap: 7px; width: 100%; min-height: 46px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); background: transparent; text-align: left; cursor: pointer; }
.skills-color-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--skill-color); }
.skills-rank-row strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 1.35; }
.skills-rank-copy { min-width: 0; }
.skills-rank-copy strong { display: block; }
.skills-rank-copy small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.skills-rank-value { color: var(--accent-light); font-size: 13px; font-variant-numeric: tabular-nums; }
.skills-rank-row svg { width: 15px; height: 15px; color: var(--text-muted); }
.skills-all-button { width: 100%; margin-top: 15px; }
.skills-footnote { margin: 12px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.skills-empty, .skills-local-error { margin-top: 18px; padding: 18px 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.skills-empty strong { display: block; color: var(--text-primary); font-weight: 650; }
.skills-empty p { margin: 7px 0 0; }
.skills-local-error .button { width: 100%; }
.skills-back { margin-bottom: 14px; }
.skills-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px; padding: 5px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-glass); }
.skills-sort .button { width: 100%; min-width: 0; padding: 5px; font-size: 13px; }
.skills-full-list { display: grid; gap: 9px; }
.skills-list-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px 12px; width: 100%; margin: 0; padding: 14px 16px; border: 1px solid var(--border-subtle); background: var(--surface-glass); color: var(--text-primary); text-align: left; cursor: pointer; }
.skills-list-copy { min-width: 0; }
.skills-list-copy strong { display: block; color: var(--text-primary); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.skills-list-copy small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.skills-list-value { color: var(--accent-light); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.skills-list-row > .profile-skill-track { grid-column: 1 / -1; display: block; height: 5px; }
.skills-detail-summary { margin: 0; border: 1px solid var(--border-accent); background: var(--surface-glass); }
.skills-detail-summary > .card-content { padding: 20px; }
.skills-detail-summary .profile-skill-track { display: block; margin-top: 17px; }
.skills-detail-stats { display: grid; gap: 10px; margin-top: 18px; color: var(--text-secondary); font-size: 12px; }
.skills-detail-stats > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.skills-detail-stats strong { color: var(--text-primary); font-weight: 650; }
.skills-history { margin: 18px 0; }
.skills-history > .card-content { padding: 20px; }
.skills-history-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.skills-history-heading > span { color: var(--accent-light); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.skills-history-chart { position: relative; width: 100%; min-width: 0; height: 230px; margin: 16px 0 6px; }
.skills-history-chart .skills-history-tooltip { max-width: min(250px, calc(100% - 12px)); white-space: normal !important; box-sizing: border-box; }
.skills-history-tooltip-content { display: grid; gap: 5px; padding: 11px 13px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.skills-history-tooltip-content strong { color: var(--chart-tooltip-title); font-weight: 700; }
.skills-history-tooltip-content span { color: var(--chart-tooltip-text); }
.skills-history-start, .skills-history-note { margin: 8px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.skills-history-note { margin-top: 12px; }
.skills-history-events { margin-top: 16px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.skills-history-events summary { padding: 4px 0; color: var(--accent-light); font-size: 13px; line-height: 1.5; cursor: pointer; }
.skills-history-events ol { display: grid; gap: 0; list-style: none; margin: 10px 0 0; padding: 0; }
.skills-history-events li { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 13px 0; border-top: 1px solid var(--border-subtle); }
.skills-history-events time { color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.skills-history-event-copy { min-width: 0; }
.skills-history-event-copy strong { display: block; font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.skills-history-event-copy small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.skills-history-event-value { color: var(--accent-light); font-size: 13px; line-height: 1.5; font-weight: 700; font-variant-numeric: tabular-nums; }
.skills-history-empty { margin: 22px 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.skills-history-empty p { margin: 8px 0 0; }
.skills-history-empty .button { margin-top: 12px; }
.skills-detail-skeleton { min-height: 205px; margin: 0; }
.skills-detail-skeleton p { height: 26px; border-radius: 8px; margin-bottom: 18px; }
.skills-detail-skeleton p:first-child { height: 50px; width: 65%; }
.skills-detail-page .student-page-heading h1 { font-size: clamp(25px, 6.5vw, 38px); overflow-wrap: anywhere; }
.skill-exercises { margin-top: 24px; }
.skill-exercises .student-section-heading { margin-bottom: 15px; }
.skill-exercise-context { min-width: 0; }
.skill-exercise-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 7px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.skill-exercise-meta > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.skill-exercise-meta > span:last-child { flex: 0 0 auto; }
.student-profile .progress-courses-section { margin-top: 24px; }
@media (max-width: 480px) {
  .skills-overview > .card-content, .skills-detail-summary > .card-content, .skills-history > .card-content { padding: 16px; }
  .skills-history-events li { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
  .skills-history-events time { grid-column: 1; }
  .skills-history-event-copy { grid-column: 1; }
  .skills-history-event-value { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .skills-rankings { gap: 12px; }
  .skills-ranking h3 { min-height: 37px; }
  .skills-rank-row { grid-template-columns: 6px minmax(0, 1fr); align-items: start; gap: 5px 6px; }
  .skills-color-dot { margin-top: 5px; }
  .skills-rank-copy strong { font-size: 12px; }
  .skills-rank-copy small { font-size: 9px; }
  .skills-rank-value { grid-column: 2; font-size: 12px; font-weight: 650; }
  .skills-rank-row svg { display: none; }
  /* The labels occupy real space inside the SVG: add breathing room around
     the whole chart, rather than doubling the former 4px container margin. */
  .skills-radar { width: calc(100% + 24px); height: 250px; margin-left: -12px; margin-top: 48px; }
  .skills-chart-caption { margin-top: 64px; }
  .skills-overall > strong { font-size: 32px; }
  .skills-overall { gap: 12px; }
  .skills-heading h2 { font-size: 17px; }
  .skills-heading .student-section-link { display: none; }
}