/*
 * KU Alumni design system — Alumni profile page.
 *
 * A compact two-column dashboard: the profile card (banner, photo, actions)
 * and a details list on the left; the score card with its component chart and
 * the remaining sections on the right. Loaded after alumni.css; declarations
 * live in the `ku` layer and are scoped under #alumni-focus.
 */

@layer ku {
  #alumni-focus {
    --pf-radius: 18px;
    --pf-gap: 14px;
    --pf-accent: #2b6cd4;
    --pf-accent-soft: #d6e4f8;
    --pf-hover: #f2f4f7;
    --pf-icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --pf-icon-employer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
    --pf-icon-industry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10l5 3V10l5 3V6l4-2v17'/%3E%3C/svg%3E");
    --pf-icon-degree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 9 10-5 10 5-10 5Z'/%3E%3Cpath d='M6 11v5c2 2 10 2 12 0v-5'/%3E%3C/svg%3E");
    --pf-icon-campus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='m12 3 8 4H4Z'/%3E%3Cpath d='M6 10v8M10 10v8M14 10v8M18 10v8'/%3E%3C/svg%3E");
    --pf-icon-batch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --pf-icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 2.5a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4ZM2.6 8.6h3.8V21H2.6V8.6Zm6.2 0h3.6v1.7h.1c.5-.9 1.7-2 3.6-2 3.8 0 4.5 2.5 4.5 5.8V21h-3.8v-6.1c0-1.5 0-3.3-2-3.3s-2.3 1.6-2.3 3.2V21H8.8V8.6Z'/%3E%3C/svg%3E");
    --pf-icon-match: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8 8 9 4.6-1 8-4.5 8-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --pf-icon-updated: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --pf-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  /* ============================================================ layout */

  #alumni-focus .alumni-focus-layout {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: var(--pf-gap) !important;
  }

  #alumni-focus .alumni-focus-layout[hidden] {
    display: none !important;
  }

  #alumni-focus .alumni-focus-side {
    position: sticky !important;
    top: calc(var(--topbar-h) + 16px) !important;
    display: grid !important;
    gap: var(--pf-gap) !important;
    min-width: 0 !important;
  }

  #alumni-focus .alumni-focus-main {
    display: grid !important;
    gap: var(--pf-gap) !important;
    min-width: 0 !important;
  }

  #alumni-focus .alumni-focus-main > .panel,
  #alumni-focus .alumni-focus-main > .alumni-profile-run-experience {
    margin: 0 !important;
  }

  #alumni-focus .alumni-focus-main > .alumni-profile-run-experience {
    padding: 14px 16px !important;
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--shadow-1) !important;
  }

  /* ====================================================== profile card */

  #alumni-focus #alumniIdentityHeader.alumni-identity-header {
    display: block !important;
    margin: 0 !important;
    padding: 8px 8px 18px !important;
    overflow: hidden !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--pf-radius) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  /* Banner: the collected cover photo, or a quiet dotted panel without one. */
  #alumni-focus .alumni-identity-banner-wrap {
    position: relative !important;
    height: 112px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background-color: #e8edf5 !important;
    background-image: radial-gradient(rgba(43, 108, 212, .14) 1px, transparent 1.4px) !important;
    background-size: 12px 12px !important;
  }

  #alumni-focus .alumni-identity-banner {
    aspect-ratio: auto !important;
    mix-blend-mode: normal !important;
  }

  #alumni-focus .alumni-identity-banner-wrap.is-placeholder .alumni-identity-banner,
  #alumni-focus .alumni-banner-unavailable-note {
    display: none !important;
  }

  #alumni-focus .alumni-identity-banner-badges {
    top: 8px !important;
    right: auto !important;
    left: 8px !important;
    justify-content: flex-start !important;
  }

  #alumni-focus .alumni-identity-banner-rank.alumni-score-rank.alumni-banner-rank,
  #alumni-focus .alumni-identity-banner-rank.alumni-score-rank.alumni-banner-rank:hover {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--ink-2) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  #alumni-focus .alumni-identity-banner-rank.alumni-banner-rank:not(.alumni-score-rank-unranked):not(.alumni-predicted-linkedin-tag):not(.alumni-linkedin-only-tag):not(.alumni-review-required-tag) {
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  #alumni-focus .alumni-identity-banner-rank.alumni-predicted-linkedin-tag {
    color: #6b3fb3 !important;
  }

  #alumni-focus .alumni-identity-banner-rank.alumni-review-required-tag {
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
  }

  #alumni-focus .alumni-identity-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    margin-top: -42px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  #alumni-focus .alumni-focus-avatar-wrap,
  #alumni-focus .alumni-identity-header-skeleton .alumni-skeleton-focus-avatar {
    position: relative !important;
    z-index: 2 !important;
    width: 84px !important;
    height: 84px !important;
    margin: 0 !important;
    border: 4px solid var(--surface) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12) !important;
  }

  #alumni-focus .alumni-related-avatar-fallback {
    display: grid !important;
    place-items: center !important;
    color: hsl(var(--avatar-hue, 214) 42% 34%) !important;
    background: hsl(var(--avatar-hue, 214) 70% 91%) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }

  #alumni-focus .alumni-related-avatar-fallback::before,
  #alumni-focus .alumni-related-avatar-fallback::after {
    content: none !important;
  }

  #alumni-focus .alumni-related-avatar-wrap.is-placeholder > img {
    visibility: hidden !important;
  }

  #alumni-focus .alumni-focus-avatar-fallback {
    display: grid !important;
    place-items: center !important;
    color: hsl(var(--avatar-hue, 214) 42% 34%) !important;
    background: hsl(var(--avatar-hue, 214) 70% 91%) !important;
    font-size: 26px !important;
    font-weight: 650 !important;
  }

  #alumni-focus .alumni-focus-avatar-fallback::before,
  #alumni-focus .alumni-focus-avatar-fallback::after {
    content: none !important;
  }

  #alumni-focus .alumni-focus-avatar-wrap.is-placeholder > img {
    visibility: hidden !important;
  }

  #alumni-focus .alumni-identity-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }

  #alumni-focus .alumni-identity-name-row {
    justify-content: center !important;
  }

  #alumni-focus .alumni-identity-name-row h1,
  #alumni-focus #alumniIdentityHeader h1 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em !important;
  }

  #alumni-focus .alumni-identity-role-line {
    display: block !important;
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  #alumni-focus .alumni-identity-employer {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #alumni-focus .alumni-identity-employer::before {
    content: "·" !important;
    margin: 0 6px !important;
    color: var(--ink-4) !important;
    font-weight: 400 !important;
  }

  #alumni-focus .alumni-identity-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 8px !important;
    margin: 0 !important;
  }

  #alumni-focus .alumni-identity-meta-row:empty {
    display: none !important;
  }

  #alumni-focus .alumni-identity-meta {
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
  }

  /* The details list already carries the update date. */
  #alumni-focus .alumni-identity-updated {
    display: none !important;
  }

  #alumni-focus .alumni-identity-glassdoor {
    justify-content: center !important;
    margin: 2px 0 0 !important;
    font-size: 12px !important;
  }

  #alumni-focus .alumni-identity-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 0 !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }

  #alumni-focus .alumni-identity-actions .alumni-focus-action-button,
  #alumni-focus .alumni-identity-actions .alumni-focus-action-button:hover:not(:disabled) {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 580 !important;
    transform: none !important;
  }

  #alumni-focus .alumni-identity-actions .alumni-focus-action-button:hover:not(:disabled) {
    border-color: var(--line-strong) !important;
    background: var(--surface-2) !important;
  }

  #alumni-focus .alumni-identity-actions .alumni-focus-update-button,
  #alumni-focus .alumni-identity-actions .alumni-focus-update-button:hover:not(:disabled) {
    border-color: var(--ink) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  #alumni-focus .alumni-identity-actions .alumni-focus-update-button:hover:not(:disabled) {
    border-color: var(--ink-hover) !important;
    background: var(--ink-hover) !important;
  }

  #alumni-focus .alumni-identity-actions .alumni-focus-action-button:disabled {
    opacity: .45 !important;
  }

  /* Loading state */
  #alumni-focus .alumni-identity-header-skeleton .alumni-skeleton-identity-banner {
    height: 100% !important;
    border-radius: 0 !important;
  }

  #alumni-focus .alumni-identity-header-skeleton .alumni-identity-actions {
    justify-content: center !important;
  }

  /* ====================================================== details list */

  #alumni-focus .alumni-focus-about.panel {
    margin: 0 !important;
    padding: 16px 16px 8px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--pf-radius) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  #alumni-focus .alumni-focus-about > h2 {
    margin: 0 0 4px !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
  }

  #alumni-focus .alumni-focus-facts {
    display: grid !important;
    margin: 0 !important;
  }

  #alumni-focus .alumni-focus-fact {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 11px !important;
    align-items: center !important;
    padding: 9px 0 !important;
    border-top: 1px solid var(--hairline) !important;
  }

  #alumni-focus .alumni-focus-fact:first-child {
    border-top: 0 !important;
  }

  #alumni-focus .alumni-focus-fact::before {
    content: "" !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: var(--surface-2) !important;
  }

  #alumni-focus .alumni-focus-fact::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 8px !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    -webkit-mask: var(--fact-icon) center / contain no-repeat !important;
    mask: var(--fact-icon) center / contain no-repeat !important;
    background: #55657e !important;
  }

  #alumni-focus .alumni-focus-fact.is-empty::before,
  #alumni-focus .alumni-focus-fact.is-empty::after,
  #alumni-focus .alumni-focus-fact.is-skeleton::after {
    content: none !important;
  }

  #alumni-focus .alumni-focus-fact.is-empty {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #alumni-focus .alumni-focus-fact[data-icon="location"] { --fact-icon: var(--pf-icon-location); }
  #alumni-focus .alumni-focus-fact[data-icon="employer"] { --fact-icon: var(--pf-icon-employer); }
  #alumni-focus .alumni-focus-fact[data-icon="industry"] { --fact-icon: var(--pf-icon-industry); }
  #alumni-focus .alumni-focus-fact[data-icon="degree"] { --fact-icon: var(--pf-icon-degree); }
  #alumni-focus .alumni-focus-fact[data-icon="campus"] { --fact-icon: var(--pf-icon-campus); }
  #alumni-focus .alumni-focus-fact[data-icon="batch"] { --fact-icon: var(--pf-icon-batch); }
  #alumni-focus .alumni-focus-fact[data-icon="linkedin"] { --fact-icon: var(--pf-icon-linkedin); }
  #alumni-focus .alumni-focus-fact[data-icon="match"] { --fact-icon: var(--pf-icon-match); }
  #alumni-focus .alumni-focus-fact[data-icon="updated"] { --fact-icon: var(--pf-icon-updated); }

  #alumni-focus .alumni-focus-fact dt {
    grid-column: 2 !important;
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  #alumni-focus .alumni-focus-fact dd {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 1px 0 0 !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  #alumni-focus .alumni-focus-fact.is-empty dd {
    grid-column: 1 !important;
    color: var(--ink-3) !important;
    font-weight: 450 !important;
  }

  #alumni-focus .alumni-focus-fact dd a {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--brand) !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alumni-focus .alumni-focus-fact dd a:hover {
    text-decoration: underline !important;
  }

  #alumni-focus .alumni-focus-fact dd small {
    flex: 0 0 auto !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    color: #6b3fb3 !important;
    background: #f0e8fc !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
  }

  /* ======================================================= main panels */

  #alumni-focus .alumni-focus-view .alumni-focus-grid,
  #alumni-focus .alumni-focus-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--pf-gap) !important;
  }

  #alumni-focus .alumni-focus-grid[hidden] {
    display: none !important;
  }

  #alumni-focus .alumni-focus-grid > .panel,
  #alumni-focus .alumni-focus-grid > .panel:hover {
    padding: 18px 20px !important;
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--shadow-1) !important;
  }

  #alumni-focus .alumni-focus-grid > .panel > h2,
  #alumni-focus .alumni-focus-grid > .panel > .panel-head h2 {
    margin: 0 0 12px !important;
    font-size: 15px !important;
    font-weight: 620 !important;
  }

  #alumni-focus .alumni-focus-summary-text {
    max-width: none !important;
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #alumni-focus .alumni-empty {
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-size: 12.5px !important;
  }

  /* ========================================================= score card */

  #alumni-focus .alumni-focus-score > h2 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
  }

  #alumni-focus .alumni-score-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #alumni-focus .alumni-score-tags .alumni-score-tag,
  #alumni-focus .alumni-score-tags .alumni-score-tag:hover {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  #alumni-focus .alumni-score-tags .alumni-score-tag::before {
    content: none !important;
  }

  #alumni-focus .alumni-score-tags .alumni-score-tag strong {
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Rank, confidence and evidence take a tint of the red-to-green scale used
     on the analytics pages; the figure is a deep shade of the same hue so it
     stays readable. */
  #alumni-focus .alumni-score-tags .alumni-score-tag.has-scale-color,
  #alumni-focus .alumni-score-tags .alumni-score-tag.has-scale-color:hover {
    border-color: color-mix(in srgb, var(--alumni-score-tag-color) 32%, transparent) !important;
    color: color-mix(in srgb, var(--alumni-score-tag-color) 55%, var(--ink-2)) !important;
    background: color-mix(in srgb, var(--alumni-score-tag-color) 11%, var(--surface)) !important;
  }

  #alumni-focus .alumni-score-tags .alumni-score-tag.has-scale-color strong {
    color: color-mix(in srgb, var(--alumni-score-tag-color) 62%, #10141c) !important;
  }

  #alumni-focus #alumniFocusScore {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 20px !important;
  }

  /* Without components the empty message says it all. */
  #alumni-focus #alumniFocusScore:has(> .alumni-empty) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #alumni-focus #alumniFocusScore:has(> .alumni-empty) .alumni-score-hero {
    display: none !important;
  }

  #alumni-focus .alumni-score-hero,
  #alumni-focus .alumni-score-hero-unranked {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--surface-2) !important;
  }

  /* The score tile takes the same scale colour as the score itself. */
  #alumni-focus .alumni-score-hero:not(.alumni-score-hero-unranked) {
    background: color-mix(in srgb, var(--alumni-score-color, var(--ink-4)) 10%, var(--surface)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alumni-score-color, var(--ink-4)) 24%, transparent) !important;
  }

  #alumni-focus .alumni-score-hero:not(.alumni-score-hero-unranked) strong {
    color: color-mix(in srgb, var(--alumni-score-color, var(--ink)) 62%, #10141c) !important;
  }

  #alumni-focus .alumni-score-hero strong {
    color: var(--ink) !important;
    font-size: 40px !important;
    font-weight: 450 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni-focus .alumni-score-hero-unranked strong {
    color: var(--ink-2) !important;
    font-size: 20px !important;
    letter-spacing: -.01em !important;
  }

  #alumni-focus .alumni-score-hero span {
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  /* Component chart: label · weight · 0–100 track · value per row. */
  #alumni-focus .alumni-component-chart {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    --row-columns: minmax(120px, 1.15fr) 36px minmax(120px, 2fr) 34px 14px;
  }

  #alumni-focus .alumni-component-axis,
  #alumni-focus .alumni-component-toggle {
    display: grid !important;
    grid-template-columns: var(--row-columns) !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  #alumni-focus .alumni-component-axis {
    padding: 0 8px 4px !important;
    color: var(--ink-4) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  #alumni-focus .alumni-component-axis-weight,
  #alumni-focus .alumni-component-axis-value {
    text-align: right !important;
  }

  #alumni-focus .alumni-component-axis-scale {
    display: flex !important;
    justify-content: space-between !important;
  }

  #alumni-focus .alumni-component-axis-scale i {
    font-style: normal !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni-focus .alumni-component-list {
    display: grid !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #alumni-focus .alumni-component-row {
    margin: 0 !important;
    border-radius: 10px !important;
  }

  #alumni-focus .alumni-component-row:has(.alumni-component-toggle[aria-expanded="true"]) {
    background: var(--surface-2) !important;
  }

  #alumni-focus .alumni-component-toggle {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    transform: none !important;
    transition: background-color 90ms var(--ease) !important;
  }

  #alumni-focus .alumni-component-toggle:hover {
    background: var(--pf-hover) !important;
  }

  #alumni-focus .alumni-component-toggle:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: -2px !important;
  }

  #alumni-focus .alumni-component-label {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 520 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alumni-focus .alumni-component-label .is-short {
    display: none !important;
  }

  #alumni-focus .alumni-component-weight {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
  }

  #alumni-focus .alumni-component-track {
    position: relative !important;
    display: block !important;
    height: 6px !important;
    border-radius: 3px !important;
    background: var(--surface-3) !important;
  }

  #alumni-focus .alumni-component-fill {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 3px !important;
    background: color-mix(in srgb, var(--component-color, var(--pf-accent)) 30%, var(--surface)) !important;
  }

  #alumni-focus .alumni-component-dot {
    position: absolute !important;
    top: 50% !important;
    z-index: 2 !important;
    width: 12px !important;
    height: 12px !important;
    margin: -6px 0 0 -6px !important;
    border-radius: 50% !important;
    background: var(--component-color, var(--pf-accent)) !important;
    box-shadow: 0 0 0 2px var(--surface) !important;
  }

  #alumni-focus .alumni-component-overall {
    position: absolute !important;
    top: -5px !important;
    bottom: -5px !important;
    z-index: 1 !important;
    width: 0 !important;
    border-left: 1.5px dashed var(--ink-4) !important;
  }

  #alumni-focus .alumni-component-value {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
  }

  #alumni-focus .alumni-component-chevron {
    width: 12px !important;
    height: 12px !important;
    -webkit-mask: var(--pf-icon-chevron) center / contain no-repeat !important;
    mask: var(--pf-icon-chevron) center / contain no-repeat !important;
    background: var(--ink-4) !important;
    transition: transform var(--fast) var(--ease) !important;
  }

  #alumni-focus .alumni-component-toggle[aria-expanded="true"] .alumni-component-chevron {
    transform: rotate(180deg) !important;
  }

  /* No direct evidence: hollow marker, muted value. */
  #alumni-focus .alumni-component-row.is-unavailable .alumni-component-fill {
    display: none !important;
  }

  #alumni-focus .alumni-component-row.is-unavailable .alumni-component-dot {
    border: 2px solid var(--ink-4) !important;
    background: var(--surface) !important;
  }

  #alumni-focus .alumni-component-row.is-unavailable .alumni-component-value,
  #alumni-focus .alumni-component-row.is-unavailable .alumni-component-label {
    color: var(--ink-3) !important;
  }

  #alumni-focus .alumni-component-detail {
    padding: 2px 30px 12px 8px !important;
  }

  #alumni-focus .alumni-component-detail[hidden] {
    display: none !important;
  }

  #alumni-focus .alumni-component-rationale {
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  #alumni-focus .alumni-component-warnings {
    margin: 8px 0 0 !important;
    padding-left: 18px !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #alumni-focus .alumni-component-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 16px !important;
    margin: 8px 0 0 !important;
    padding: 10px 8px 0 !important;
    border-top: 1px solid var(--hairline) !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
  }

  #alumni-focus .alumni-component-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #alumni-focus .alumni-component-legend .is-dot::before {
    content: "" !important;
    width: 34px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, hsl(2 82% 52%), hsl(63 78% 45%), hsl(124 74% 38%)) !important;
  }

  #alumni-focus .alumni-component-legend .is-overall::before {
    content: "" !important;
    width: 0 !important;
    height: 12px !important;
    border-left: 1.5px dashed var(--ink-4) !important;
  }

  #alumni-focus .alumni-component-legend .is-hint {
    margin-left: auto !important;
    color: var(--ink-4) !important;
  }

  /* ======================================================= activity */

  #alumni-focus .alumni-activity-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
    gap: 8px !important;
  }

  #alumni-focus .alumni-activity-metric.status-pill,
  #alumni-focus .alumni-activity-metric.status-pill:hover {
    display: grid !important;
    align-content: start !important;
    gap: 2px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  #alumni-focus .alumni-activity-metric span {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    white-space: normal !important;
  }

  #alumni-focus .alumni-activity-metric strong {
    color: var(--ink) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni-focus .alumni-activity-metric small {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
  }

  /* ======================================================= responsive */

  @media (max-width: 1180px) {
    #alumni-focus #alumniFocusScore {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #alumni-focus .alumni-score-hero {
      flex-direction: row !important;
      align-items: baseline !important;
      gap: 8px !important;
    }

  }

  @media (max-width: 1024px) {
    #alumni-focus .alumni-focus-layout {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #alumni-focus .alumni-focus-side {
      position: static !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      align-items: start !important;
    }
  }

  @media (max-width: 720px) {
    #alumni-focus .alumni-focus-side,
    #alumni-focus .alumni-focus-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #alumni-focus .alumni-focus-grid > .panel {
      grid-column: 1 !important;
    }

    #alumni-focus .alumni-component-chart {
      --row-columns: minmax(0, 1fr) 30px 72px 30px 12px;
    }

    #alumni-focus .alumni-component-axis-label {
      visibility: hidden !important;
    }

    #alumni-focus .alumni-component-label .is-full {
      display: none !important;
    }

    #alumni-focus .alumni-component-label .is-short {
      display: inline !important;
    }

    #alumni-focus .alumni-component-legend .is-hint {
      margin-left: 0 !important;
    }
  }

  /* ======================================================= QS Alumni Impact */

  /* Same row chart as the Influence panel; the third column shows the model's
     confidence instead of a weight (the four areas are combined, not weighted),
     and the colours are a calm blue ramp because low QS values are normal. */
  #alumni-focus .alumni-qs-chart {
    --row-columns: minmax(110px, 1.15fr) 52px minmax(120px, 2fr) 34px 14px;
  }

  #alumni-focus .alumni-qs-chart .alumni-component-weight {
    font-size: 11.5px !important;
  }

  #alumni-focus .alumni-qs-chart .alumni-component-legend .is-dot::before {
    background: linear-gradient(90deg, hsl(218 46% 66%), hsl(218 57% 53%), hsl(218 68% 40%)) !important;
  }

  #alumni-focus .alumni-qs-hero {
    --alumni-score-color: hsl(218 57% 53%);
  }

  #alumni-focus .alumni-qs-evidence-count {
    margin: 6px 0 0 !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #alumni-focus .alumni-qs-note {
    margin: 10px 0 0 !important;
    color: var(--ink-4) !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }

  @media (max-width: 720px) {
    #alumni-focus .alumni-qs-chart {
      --row-columns: minmax(0, 1fr) 38px 64px 30px 12px;
    }

    #alumni-focus .alumni-qs-chart .alumni-component-weight {
      font-size: 11px !important;
    }
  }
}