/*
 * KU Alumni design system — Alumni directory.
 *
 * The search dock (scope notch, search bar and suggestion list), the compact
 * directory cards and the directory's buttons. Loaded after alumni.css;
 * declarations live in the `ku` layer and are scoped under #alumni so they
 * take over from the earlier directory rules without touching other pages.
 *
 * Buttons are flat: solid ink for the primary action, white with a hairline
 * border for secondary ones. No gradients, glows or lift on hover.
 */

@layer ku {
  #alumni {
    --dir-radius: 10px;
    --dir-bar-radius: 20px;
    --dir-shoulder: 16px;
    --dir-icon-people: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.8a3.4 3.4 0 0 1 0 6.4'/%3E%3Cpath d='M18.5 14.8c1.7.7 2.7 2.4 3 5.2'/%3E%3C/svg%3E");
    --dir-icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.5 4.6 2.4 7.9 8.5 10.5-6.1 2.6-8 5.9-8.5 10.5-.5-4.6-2.4-7.9-8.5-10.5C9.6 9.4 11.5 6.1 12 1.5Z'/%3E%3C/svg%3E");
    --dir-icon-globe: 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.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19'/%3E%3Cpath d='M12 2.5c2.6 2.7 3.8 5.9 3.8 9.5s-1.2 6.8-3.8 9.5c-2.6-2.7-3.8-5.9-3.8-9.5S9.4 5.2 12 2.5Z'/%3E%3C/svg%3E");
    --dir-icon-campus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 8.5 12 14l9-4.5V16h2V8.5L12 3Z'/%3E%3Cpath d='M5 12.2V16c0 2.2 3.1 4 7 4s7-1.8 7-4v-3.8l-7 3.5-7-3.5Z'/%3E%3C/svg%3E");
    --dir-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");
    --dir-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.4 7 1-5.1 4.9 1.2 7L12 17.8l-6.2 3.3 1.2-7L1.9 9.2l7-1L12 1.8Z'/%3E%3C/svg%3E");
    --dir-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5c4.4 0 8 3.4 8 7.8 0 5.6-6.3 11.6-7.3 12.6a1 1 0 0 1-1.4 0C10.3 20.9 4 14.9 4 9.3c0-4.4 3.6-7.8 8-7.8Zm0 4.6a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Z'/%3E%3C/svg%3E");
    --dir-icon-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5l2.6 1.9 3.2-.1 1 3 2.6 1.9-1 3.1 1 3.1-2.6 1.9-1 3-3.2-.1L12 22.5l-2.6-1.9-3.2.1-1-3-2.6-1.9 1-3.1-1-3.1 2.6-1.9 1-3 3.2.1L12 1.5Zm-1.3 14.4 5.8-5.8-1.5-1.5-4.3 4.3-2.1-2.1-1.5 1.5 3.6 3.6Z'/%3E%3C/svg%3E");
    --dir-icon-search: 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.3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    --dir-icon-clock: 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.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --dir-icon-check: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 9.5 17.5 19 7'/%3E%3C/svg%3E");
    --dir-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 9.5 17.5 19 7'/%3E%3C/svg%3E");
    --dir-icon-refresh: 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='M20 11a8 8 0 0 0-14.6-4.5L4 8'/%3E%3Cpath d='M4 3.5V8h4.5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.6 4.5L20 16'/%3E%3Cpath d='M20 20.5V16h-4.5'/%3E%3C/svg%3E");
  }

  /* ========================================================= page header */

  /* The page has no visible title — the active nav tab names it — but the
     heading stays for assistive technology. In the review queue the short
     explanation of the queue shows above the filter panel. */
  #alumni > .alumni-page-heading {
    display: block !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #alumni:not(:has(.alumni-review-queue-button.is-active)) > .alumni-page-heading,
  #alumni .alumni-page-heading h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-heading-copy {
    display: block !important;
  }

  #alumni .alumni-page-heading .alumni-directory-description {
    display: none !important;
  }

  #alumni:has(.alumni-review-queue-button.is-active) .alumni-page-heading .alumni-directory-description {
    display: block !important;
    max-width: 80ch !important;
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ====================================================== filter panel */

  /* Always open. Its top row carries the directory summary on the left and
     the run controls on the right, all centred on one 34px line. */
  /* The row is centred in its band: 14px from the panel's top edge (1px
     border + 13px padding) and 14px to the divider below, with a 14px inset
     on both sides. */
  #alumni #alumniFilters.filter-band {
    padding-top: 13px !important;
  }

  #alumni #alumniFilters .filter-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px 12px !important;
    min-height: 34px !important;
    padding: 0 6px 0 0 !important;
  }

  #alumni #alumniFilters .filter-grid {
    margin-top: 14px !important;
  }

  /* Active filter chips: 14px to the panel's bottom edge (8px here plus the
     band's 6px padding), matching the space above the top row. */
  #alumni #alumniFilters .alumni-active-filters {
    margin: 10px 4px 8px !important;
  }

  #alumni .alumni-filter-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 0 !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin-right: auto !important;
    padding-left: 6px !important;
  }

  #alumni .alumni-filter-summary .alumni-heading-metrics {
    display: flex !important;
    flex-wrap: wrap !important;
    align-self: center !important;
    align-items: center !important;
    gap: 8px 0 !important;
  }

  /* Each figure is a bold value beside a muted label; a short rule separates
     the plain figures. */
  #alumni .alumni-heading-metrics .status-pill:not(.alumni-review-queue-button),
  #alumni .alumni-filter-summary .alumni-last-completed {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ink-3) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 480 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-heading-metrics .status-pill strong,
  #alumni .alumni-filter-summary .alumni-last-completed strong {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 640 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni .alumni-filter-summary .alumni-last-completed strong {
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-weight: 560 !important;
  }

  #alumni #alumniRankedMetric,
  #alumni .alumni-filter-summary .alumni-last-completed {
    margin-left: 14px !important;
    padding-left: 14px !important;
    border-left: 1px solid var(--line) !important;
  }

  #alumni .alumni-filter-summary .alumni-last-completed {
    order: 1 !important;
  }

  #alumni .alumni-filter-summary .alumni-last-completed::before {
    content: "" !important;
    width: 13px !important;
    height: 13px !important;
    margin: 0 1px 0 0 !important;
    border-radius: 0 !important;
    -webkit-mask: var(--dir-icon-clock) center / contain no-repeat !important;
    mask: var(--dir-icon-clock) center / contain no-repeat !important;
    background: var(--ink-4) !important;
    box-shadow: none !important;
  }

  #alumni .alumni-heading-metrics .status-pill[hidden],
  #alumni .alumni-filter-summary .alumni-last-completed[hidden] {
    display: none !important;
  }

  /* Needs review: an amber chip that opens the review queue. */
  #alumni .alumni-heading-metrics .alumni-review-queue-button,
  #alumni .alumni-heading-metrics .alumni-review-queue-button:hover {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 0 0 14px !important;
    padding: 0 10px 0 9px !important;
    border: 1px solid rgba(250, 178, 25, .32) !important;
    border-radius: 8px !important;
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease) !important;
  }

  #alumni .alumni-heading-metrics .alumni-review-queue-button::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 2px !important;
    border-radius: 50% !important;
    background: var(--warning) !important;
  }

  #alumni .alumni-heading-metrics .alumni-review-queue-button strong {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 660 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni .alumni-heading-metrics .alumni-review-queue-button:hover {
    border-color: rgba(250, 178, 25, .6) !important;
    background: #ffedc4 !important;
  }

  #alumni .alumni-heading-metrics .alumni-review-queue-button[hidden] {
    display: none !important;
  }

  #alumni .alumni-heading-metrics .alumni-review-queue-button.is-active,
  #alumni .alumni-heading-metrics .alumni-review-queue-button.is-active:hover {
    border-color: var(--ink) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  #alumni .alumni-heading-metrics .alumni-review-queue-button.is-active::before {
    background: var(--warning) !important;
  }

  #alumni #alumniFilters #alumniClearFilters {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--dir-radius) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
  }

  #alumni #alumniFilters #alumniClearFilters:disabled {
    display: none !important;
  }

  #alumni .alumni-header-operations {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #alumni .alumni-header-operations[hidden] {
    display: none !important;
  }

  #alumni .alumni-header-operations .panel-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  /* The semester menu and Start Run share one size and shape. */
  #alumni .alumni-run-scope-select {
    width: 164px !important;
    min-width: 164px !important;
  }

  #alumni .alumni-run-scope-select .filter-select-trigger,
  #alumni #alumniStartRun {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: var(--dir-radius) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  #alumni .alumni-run-scope-select .filter-select-trigger {
    width: 100% !important;
    padding: 0 10px 0 12px !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
  }

  #alumni .alumni-run-scope-select .filter-select-trigger:hover {
    border-color: var(--line-strong) !important;
    background: var(--surface-2) !important;
  }

  #alumni #alumniStartRun,
  #alumni #alumniStartRun:hover:not(:disabled) {
    padding: 0 16px !important;
    border: 1px solid var(--ink) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  #alumni #alumniStartRun:hover:not(:disabled) {
    border-color: var(--ink-hover) !important;
    background: var(--ink-hover) !important;
  }

  /* The shared band caps its grid height for the open/close animation; this
     panel never collapses, so the grid takes its natural height. */
  #alumni #alumniFilters .filter-grid {
    max-height: none !important;
    transition: none !important;
  }

  @media (max-width: 560px) {
    #alumni #alumniFilters .filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px 8px !important;
    }
  }

  @media (max-width: 820px) {
    #alumni .alumni-filter-summary {
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    #alumni .alumni-filter-summary .alumni-last-completed {
      margin-left: 0 !important;
      padding-left: 0 !important;
      border-left: 0 !important;
    }

    #alumni .alumni-header-operations,
    #alumni .alumni-header-operations .panel-actions {
      width: 100% !important;
      align-items: stretch !important;
    }

    #alumni .alumni-run-scope-select {
      flex: 1 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
    }
  }

  /* ========================================================== dropdowns */

  /* Triggers: neutral focus ring instead of the brand-blue glow; a trigger
     holding a filter value reads as filled. */
  #alumni #alumniFilters .filter-select-trigger,
  #alumni .alumni-run-scope-select .filter-select-trigger {
    transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease) !important;
  }

  #alumni #alumniFilters .filter-select-trigger:hover {
    border-color: var(--line-strong) !important;
    background: var(--surface) !important;
  }

  #alumni #alumniFilters .filter-select.has-value .filter-select-trigger,
  #alumni .alumni-run-scope-select.has-value .filter-select-trigger {
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
    font-weight: 600 !important;
  }

  #alumni #alumniFilters .filter-select.open .filter-select-trigger,
  #alumni #alumniFilters .filter-select-trigger[aria-expanded="true"],
  #alumni .alumni-run-scope-select .filter-select-trigger[aria-expanded="true"] {
    border-color: var(--ink-3) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(13, 15, 20, .07) !important;
  }

  #alumni .filter-select-trigger svg {
    transition: transform var(--fast) var(--ease) !important;
  }

  #alumni .filter-select-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg) !important;
  }

  /* Menus */
  #alumni .filter-select-menu {
    padding: 4px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    box-shadow: 0 14px 34px -14px rgba(16, 24, 40, .24), 0 2px 6px rgba(16, 24, 40, .05) !important;
  }

  #alumni .filter-select-menu .filter-select-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--ink-2) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: background-color 90ms var(--ease), color 90ms var(--ease) !important;
  }

  #alumni .filter-select-menu .filter-select-option:hover,
  #alumni .filter-select-menu .filter-select-option:focus-visible {
    outline: none !important;
    color: var(--ink) !important;
    background: #f1f3f6 !important;
  }

  #alumni .filter-select-menu .filter-select-option[aria-selected="true"],
  #alumni .filter-select-menu .filter-select-option.selected {
    color: var(--ink) !important;
    background: transparent !important;
    font-weight: 600 !important;
  }

  #alumni .filter-select-menu .filter-select-option[aria-selected="true"]:hover,
  #alumni .filter-select-menu .filter-select-option.selected:hover {
    background: #f1f3f6 !important;
  }

  #alumni .filter-select-menu .filter-select-option-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Single choice: a check on the right of the chosen row. */
  #alumni .filter-select-menu:not([aria-multiselectable="true"]) .filter-select-option[aria-selected="true"]::after {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
    -webkit-mask: var(--dir-icon-check) center / contain no-repeat !important;
    mask: var(--dir-icon-check) center / contain no-repeat !important;
    background: var(--ink) !important;
  }

  #alumni .filter-select-menu:not([aria-multiselectable="true"]) .filter-select-check-slot {
    display: none !important;
  }

  /* Multiple choice: a checkbox at the start of every row. */
  #alumni .filter-select-menu[aria-multiselectable="true"] .filter-select-check-slot {
    order: -1 !important;
    display: grid !important;
    flex: 0 0 16px !important;
    place-items: center !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 1.5px solid var(--line-strong) !important;
    border-radius: 5px !important;
    color: var(--on-dark) !important;
    background: var(--surface) !important;
    transition: background-color 90ms var(--ease), border-color 90ms var(--ease) !important;
  }

  #alumni .filter-select-menu[aria-multiselectable="true"] .filter-select-option:hover .filter-select-check-slot {
    border-color: var(--ink-3) !important;
  }

  /* The tick is drawn here so rows built without a check icon (such as
     "All semesters") still show one. */
  #alumni .filter-select-menu[aria-multiselectable="true"] .filter-select-option[aria-selected="true"] .filter-select-check-slot {
    border-color: var(--ink) !important;
    background: var(--ink) var(--dir-check-white) center / 11px 11px no-repeat !important;
  }

  #alumni .filter-select-menu[aria-multiselectable="true"] .filter-select-check {
    display: none !important;
  }

  /* Secondary figures in a row (semester sizes, counts). */
  #alumni .filter-select-menu .filter-select-option small {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: var(--ink-4) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni .filter-select-menu .filter-select-option[aria-selected="true"] small {
    color: var(--ink-3) !important;
  }

  /* Option search box inside long menus. */
  #alumni .filter-select-menu .alumni-filter-option-search {
    margin: 0 0 4px !important;
    padding: 2px 2px 6px !important;
    border-bottom: 1px solid var(--hairline) !important;
  }

  /* ======================================================== search dock */

  #alumni .alumni-search-dock {
    position: relative !important;
    z-index: 6 !important;
    margin: 0 0 18px !important;
    filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .05)) drop-shadow(0 6px 14px rgba(16, 24, 40, .05)) !important;
  }

  /* The raised tab that carries the scope toggles. Its left offset is the
     bar's corner radius plus the shoulder, so the concave shoulder starts on
     the bar's straight top edge rather than over its rounded corner. */
  #alumni .alumni-search-notch {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: max-content !important;
    max-width: calc(100% - (var(--dir-bar-radius) + var(--dir-shoulder)) * 2) !important;
    margin: 0 0 -1px calc(var(--dir-bar-radius) + var(--dir-shoulder) + 6px) !important;
    padding: 6px 6px 3px !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--surface) !important;
  }

  #alumni .alumni-search-notch::before,
  #alumni .alumni-search-notch::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    width: var(--dir-shoulder) !important;
    height: var(--dir-shoulder) !important;
    pointer-events: none !important;
  }

  #alumni .alumni-search-notch::before {
    right: 100% !important;
    background: radial-gradient(circle at 0 0, transparent calc(var(--dir-shoulder) - .5px), var(--surface) var(--dir-shoulder)) !important;
  }

  #alumni .alumni-search-notch::after {
    left: 100% !important;
    background: radial-gradient(circle at 100% 0, transparent calc(var(--dir-shoulder) - .5px), var(--surface) var(--dir-shoulder)) !important;
  }

  #alumni .alumni-segment {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 2px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
  }

  #alumni .alumni-segment [role="radio"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 10px 0 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: var(--ink-3) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 540 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease) !important;
  }

  #alumni .alumni-segment [role="radio"]:hover {
    color: var(--ink) !important;
    background: var(--surface-2) !important;
  }

  #alumni .alumni-segment [role="radio"][aria-checked="true"] {
    color: var(--ink) !important;
    background: var(--surface-3) !important;
    font-weight: 620 !important;
  }

  #alumni .alumni-segment [role="radio"]:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 1px !important;
  }

  #alumni .alumni-segment-icon {
    flex: 0 0 auto !important;
    width: 15px !important;
    height: 15px !important;
    -webkit-mask: var(--segment-icon) center / contain no-repeat !important;
    mask: var(--segment-icon) center / contain no-repeat !important;
    background: var(--segment-fill) !important;
  }

  #alumni .alumni-segment-icon.is-people { --segment-icon: var(--dir-icon-people); --segment-fill: #4f6bed; }
  #alumni .alumni-segment-icon.is-spark { --segment-icon: var(--dir-icon-spark); --segment-fill: #e8920c; }
  #alumni .alumni-segment-icon.is-globe { --segment-icon: var(--dir-icon-globe); --segment-fill: #12a37f; }
  #alumni .alumni-segment-icon.is-campus { --segment-icon: var(--dir-icon-campus); --segment-fill: var(--brand); }
  #alumni .alumni-segment-icon.is-linkedin { --segment-icon: var(--dir-icon-linkedin); --segment-fill: #0a66c2; }

  /* ------------------------------------------------------------- bar */

  /* Search field, then one grey group holding Sort by and Order, then the
     Search button — all 44px tall with the same corner radius. */
  #alumni #alumniDirectoryForm.alumni-directory-toolbar {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: var(--dir-bar-radius) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
  }

  #alumni .alumni-search-field,
  #alumni .alumni-sort-field,
  #alumni .alumni-order-field {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    transition: background-color var(--fast) var(--ease) !important;
  }

  #alumni .alumni-search-field {
    padding: 0 14px 0 40px !important;
    border-radius: 14px !important;
  }

  #alumni .alumni-search-field::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
    -webkit-mask: var(--dir-icon-search) center / contain no-repeat !important;
    mask: var(--dir-icon-search) center / contain no-repeat !important;
    background: var(--ink-3) !important;
  }

  #alumni .alumni-search-field:hover,
  #alumni .alumni-search-field:focus-within {
    background: var(--surface-2) !important;
  }

  #alumni .alumni-search-field > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  #alumni #alumniSearch {
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    color: var(--ink) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  #alumni #alumniSearch::placeholder {
    color: var(--ink-4) !important;
    font-weight: 450 !important;
  }

  #alumni .alumni-sort-field,
  #alumni .alumni-order-field {
    gap: 8px !important;
    background: var(--surface-2) !important;
  }

  #alumni .alumni-sort-field {
    margin-left: 6px !important;
    padding: 0 10px 0 14px !important;
    border-radius: 14px 0 0 14px !important;
  }

  #alumni .alumni-order-field {
    padding: 0 14px 0 12px !important;
    border-radius: 0 14px 14px 0 !important;
  }

  #alumni .alumni-sort-field::before {
    content: none !important;
  }

  #alumni .alumni-order-field::before {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 1px !important;
    background: var(--line-strong) !important;
  }

  #alumni .alumni-sort-field:hover,
  #alumni .alumni-order-field:hover {
    background: var(--surface-3) !important;
  }

  #alumni .alumni-sort-label-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  #alumni .alumni-sort-label-row > label {
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-sort-label-row .alumni-score-guide-button.chart-info-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    font-size: 8.5px !important;
  }

  #alumni .alumni-order-label {
    display: none !important;
  }

  #alumni .alumni-sort-group {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #alumni .alumni-sort-group .alumni-sort-select {
    width: 150px !important;
  }

  #alumni .alumni-sort-group .alumni-sort-select .filter-select-trigger,
  #alumni .alumni-sort-group .alumni-sort-select .filter-select-trigger:hover,
  #alumni .alumni-sort-group .alumni-sort-select .filter-select-trigger[aria-expanded="true"] {
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  #alumni .alumni-sort-group .filter-select-menu {
    right: -10px !important;
    left: auto !important;
    margin-top: 16px !important;
  }

  #alumni .alumni-sort-direction,
  #alumni .alumni-sort-direction:hover {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-sort-direction .button-icon {
    width: 12px !important;
    height: 12px !important;
    padding: 5px !important;
    box-sizing: content-box !important;
    border-radius: 7px !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 1px var(--line) !important;
  }

  #alumni .alumni-sort-direction[data-direction="asc"] .button-icon {
    transform: rotate(180deg) !important;
  }

  #alumni .alumni-sort-direction:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 4px !important;
    border-radius: 6px !important;
  }

  #alumni .alumni-search-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 0 6px !important;
    padding: 0 18px 0 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
    transition: background-color var(--fast) var(--ease) !important;
  }

  #alumni .alumni-search-submit svg {
    width: 15px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.3 !important;
    stroke-linecap: round !important;
  }

  #alumni .alumni-search-submit:hover {
    background: var(--ink-hover) !important;
  }

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

  /* ------------------------------------------------------- suggestions */

  #alumni .alumni-search-suggest {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 40 !important;
    display: grid !important;
    gap: 1px !important;
    width: min(420px, 100%) !important;
    padding: 10px 6px 6px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-3) !important;
    animation: dir-suggest-in 160ms var(--ease-out) both !important;
  }

  #alumni .alumni-search-suggest[hidden] {
    display: none !important;
  }

  #alumni .alumni-suggest-heading {
    margin: 0 0 4px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 540 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-suggest-option {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 5px 10px 5px 6px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background-color var(--fast) var(--ease), opacity var(--med) var(--ease) !important;
  }

  #alumni .alumni-suggest-option:hover,
  #alumni .alumni-suggest-option.is-active {
    background: var(--surface-2) !important;
  }

  #alumni .alumni-search-suggest.is-pending .alumni-suggest-option {
    opacity: .5 !important;
  }

  #alumni .alumni-suggest-copy {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
  }

  #alumni .alumni-suggest-copy strong,
  #alumni .alumni-suggest-copy small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-suggest-copy strong {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #alumni .alumni-suggest-copy small {
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  #alumni .alumni-suggest-score {
    padding: 2px 7px !important;
    border-radius: 6px !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 11.5px !important;
    font-weight: 620 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #alumni .alumni-suggest-empty,
  #alumni .alumni-suggest-footer {
    margin: 0 !important;
    padding: 8px 10px 3px !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
  }

  #alumni .alumni-suggest-footer {
    margin-top: 4px !important;
    border-top: 1px solid var(--hairline) !important;
    color: var(--ink-4) !important;
    font-size: 11px !important;
  }

  @keyframes dir-suggest-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
  }

  /* ========================================================== avatars */

  /* A real photo covers the initials; the placeholder photo is hidden so the
     initials show on a pale tint of the person's hue. */
  #alumni .alumni-avatar-wrap,
  #alumni .alumni-suggest-avatar-wrap {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: var(--surface-3) !important;
  }

  #alumni .alumni-suggest-avatar-wrap {
    width: 34px !important;
    height: 34px !important;
  }

  #alumni .alumni-avatar-fallback,
  #alumni .alumni-suggest-avatar-fallback {
    position: absolute !important;
    inset: 0 !important;
    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: 12px !important;
    font-weight: 650 !important;
    letter-spacing: .02em !important;
  }

  #alumni .alumni-avatar-fallback {
    font-size: 24px !important;
  }

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

  #alumni .alumni-suggest-avatar {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

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

  /* ============================================================ cards */

  #alumni .alumni-directory-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)) !important;
    gap: 14px !important;
  }

  #alumni .alumni-card.display-card {
    display: grid !important;
    grid-template-columns: 144px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-areas: "media body" "media foot" !important;
    align-items: start !important;
    gap: 6px 16px !important;
    padding: 8px 14px 8px 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    transform: none !important;
    transition: border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease) !important;
  }

  #alumni .alumni-card.display-card:hover {
    border-color: var(--line) !important;
    box-shadow: var(--shadow-2) !important;
    transform: none !important;
  }

  #alumni .alumni-card-skeleton.display-card:hover {
    border-color: var(--hairline) !important;
    box-shadow: var(--shadow-1) !important;
  }

  /* Media panel: banner strip, the photo overlapping its lower edge, and the
     two actions pinned to the bottom of the card. */
  #alumni .alumni-card-media {
    grid-area: media !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    padding: 0 6px 8px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    background: var(--surface-2) !important;
  }

  #alumni .alumni-card-media-banner {
    position: relative !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    height: 90px !important;
    margin: 0 -6px !important;
    overflow: hidden !important;
    background: var(--surface-3) !important;
  }

  #alumni .alumni-card-media-banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* No banner fetched: a quiet dotted placeholder, same height as a real one. */
  #alumni .alumni-card-media-banner.is-empty {
    background-color: var(--surface-3) !important;
    background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px) !important;
    background-size: 10px 10px !important;
    background-position: center !important;
    opacity: .85 !important;
  }

  /* Loading state: a flat block like the other skeleton shapes, not the dots. */
  #alumni .alumni-card-media-banner.is-skeleton {
    background-image: none !important;
    background-color: var(--surface-3) !important;
    opacity: 1 !important;
  }

  /* The photo always paints above the banner it overlaps. */
  #alumni .alumni-card-media .alumni-avatar-wrap,
  #alumni .alumni-card-media .alumni-skeleton-avatar {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    margin-top: -32px !important;
  }

  #alumni .alumni-card-media .alumni-skeleton-avatar {
    border: 3px solid var(--surface-2) !important;
    box-sizing: content-box !important;
    width: 84px !important;
    height: 84px !important;
  }

  #alumni .alumni-card .alumni-avatar-wrap {
    width: 84px !important;
    height: 84px !important;
    border: 3px solid var(--surface) !important;
    box-shadow: none !important;
  }

  #alumni .alumni-card .alumni-card-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: auto 0 0 !important;
    padding-top: 10px !important;
  }

  #alumni .alumni-card .alumni-card-action {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 580 !important;
    transform: none !important;
  }

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

  #alumni .alumni-card .alumni-card-links .alumni-card-action-primary,
  #alumni .alumni-card .alumni-card-links .alumni-card-action-primary:hover:not(:disabled) {
    border-color: var(--ink) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  #alumni .alumni-card .alumni-card-links .alumni-card-action-primary:hover:not(:disabled) {
    border-color: var(--ink-hover) !important;
    background: var(--ink-hover) !important;
  }

  #alumni .alumni-card .alumni-card-action:disabled {
    opacity: .45 !important;
  }

  /* Body: status tags, name, score and location, then chips. */
  #alumni .alumni-card-body {
    grid-area: body !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding-top: 8px !important;
  }

  #alumni .alumni-card-tags {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 100% !important;
    pointer-events: auto !important;
  }

  #alumni .alumni-card-tags .alumni-score-rank.alumni-banner-rank,
  #alumni .alumni-card-tags .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: #2a4fb0 !important;
    background: #e6eeff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  #alumni .alumni-card-tags .alumni-score-rank.alumni-banner-rank.alumni-score-rank-unranked {
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
  }

  #alumni .alumni-card-tags .alumni-score-rank.alumni-banner-rank.alumni-predicted-linkedin-tag {
    color: #6b3fb3 !important;
    background: #f0e8fc !important;
  }

  #alumni .alumni-card-tags .alumni-score-rank.alumni-banner-rank.alumni-linkedin-only-tag {
    color: #0d6a80 !important;
    background: #e0f5fa !important;
  }

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

  #alumni .alumni-card-tags .alumni-score-rank.alumni-banner-rank.alumni-no-linkedin-tag {
    color: var(--critical-ink) !important;
    background: var(--critical-soft) !important;
  }

  #alumni .alumni-card-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #alumni .alumni-card a.alumni-card-name,
  #alumni .alumni-card-name {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 640 !important;
    line-height: 1.3 !important;
    letter-spacing: -.012em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    -webkit-line-clamp: unset !important;
  }

  #alumni .alumni-card-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    gap: 9px !important;
    min-width: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
  }

  #alumni .alumni-card-score-grid {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #alumni .alumni-card-score-grid::before {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    -webkit-mask: var(--dir-icon-star) center / contain no-repeat !important;
    mask: var(--dir-icon-star) center / contain no-repeat !important;
    background: #f2a900 !important;
  }

  #alumni .alumni-card-score-grid.is-empty::before {
    background: var(--ink-4) !important;
  }

  #alumni .alumni-card .alumni-score-value {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  #alumni .alumni-card .alumni-score-value small {
    margin: 0 0 0 4px !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }

  #alumni .alumni-card-score-grid.is-empty .alumni-score-value {
    color: var(--ink-4) !important;
  }

  #alumni .alumni-card-score-grid .alumni-score-meter {
    order: 1 !important;
    width: 36px !important;
    height: 4px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    background: var(--surface-3) !important;
  }

  #alumni .alumni-card-score-grid .alumni-score-meter-fill {
    border-radius: 2px !important;
  }

  #alumni .alumni-card-score-grid > .chart-info-icon {
    order: 2 !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    border-color: var(--line) !important;
    color: var(--ink-3) !important;
    background: var(--surface) !important;
    font-size: 8.5px !important;
  }

  #alumni .alumni-card-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    color: var(--ink-2) !important;
    text-decoration: underline dotted var(--ink-4) !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-card-location::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 13px !important;
    height: 13px !important;
    -webkit-mask: var(--dir-icon-pin) center / contain no-repeat !important;
    mask: var(--dir-icon-pin) center / contain no-repeat !important;
    background: var(--ink-2) !important;
  }

  /* Chips wrap into a clipped second row, so one that does not fit drops out
     whole instead of shrinking to a stub. */
  #alumni .alumni-card-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 5px !important;
    max-width: 100% !important;
    height: 26px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #alumni .alumni-card-chip {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: min(100%, 168px) !important;
    height: 26px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 520 !important;
    line-height: 26px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-card-chip.is-empty {
    color: var(--ink-4) !important;
    background: var(--surface-2) !important;
  }

  /* Footer: freshness line and the admin update action. */
  #alumni .alumni-card .alumni-card-footer {
    grid-area: foot !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border: 0 !important;
  }

  #alumni .alumni-card-update-meta {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #alumni .alumni-card-updated-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
  }

  #alumni .alumni-card-updated-date::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--good) !important;
  }

  #alumni .alumni-card-updated-date[data-fresh="false"]::before {
    background: var(--ink-4) !important;
  }

  #alumni .alumni-card .alumni-card-action.alumni-update-button {
    gap: 5px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px 0 7px !important;
    border-radius: 7px !important;
    color: var(--ink-2) !important;
    font-size: 11.5px !important;
  }

  #alumni .alumni-card .alumni-card-action.alumni-update-button::before {
    content: "" !important;
    width: 11px !important;
    height: 11px !important;
    -webkit-mask: var(--dir-icon-refresh) center / contain no-repeat !important;
    mask: var(--dir-icon-refresh) center / contain no-repeat !important;
    background: currentColor !important;
  }

  /* Rows that span the whole card: review reasons and run progress. */
  #alumni .alumni-card-review-reason,
  #alumni .alumni-card-run-status,
  #alumni .alumni-card .alumni-profile-run-experience {
    grid-column: 1 / -1 !important;
    margin: 4px 0 2px !important;
  }

  #alumni .alumni-card-review-reason {
    border-radius: 10px !important;
  }

  #alumni .alumni-card .alumni-profile-run-experience {
    border-radius: 12px !important;
  }

  /* Loading cards */

  #alumni .alumni-card-skeleton .alumni-skeleton-avatar {
    width: 84px !important;
    height: 84px !important;
    border: 3px solid var(--surface) !important;
    border-radius: 50% !important;
  }

  #alumni .alumni-card-skeleton .alumni-skeleton-button {
    height: 28px !important;
    border-radius: 8px !important;
  }

  #alumni .alumni-card-skeleton .alumni-card-tags .skeleton-pill {
    height: 22px !important;
    border-radius: 6px !important;
  }

  #alumni .alumni-card-skeleton .alumni-card-chips .skeleton-pill {
    height: 26px !important;
    border-radius: 8px !important;
  }

  #alumni .alumni-card-skeleton .alumni-card-name-row .skeleton-line {
    height: 16px !important;
  }

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

  @media (max-width: 1080px) {
    #alumni .alumni-search-submit {
      width: 44px !important;
      padding: 0 !important;
    }

    #alumni .alumni-search-submit span {
      display: none !important;
    }
  }

  @media (max-width: 820px) {
    #alumni .alumni-search-notch {
      max-width: 100% !important;
      margin-left: 0 !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
    }

    #alumni .alumni-search-notch::before {
      content: none !important;
    }

    #alumni #alumniDirectoryForm.alumni-directory-toolbar {
      grid-template-columns: minmax(0, 1fr) auto auto !important;
      row-gap: 6px !important;
      border-top-left-radius: 0 !important;
    }

    #alumni .alumni-search-field {
      grid-column: 1 / -1 !important;
    }

    #alumni .alumni-sort-field {
      margin-left: 0 !important;
    }

    #alumni .alumni-sort-group,
    #alumni .alumni-sort-group .alumni-sort-select {
      flex: 1 1 auto !important;
      width: 100% !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 480px) {
    #alumni .alumni-segment [role="radio"] {
      padding: 0 8px 0 7px !important;
      font-size: 12px !important;
    }

    #alumni .alumni-card.display-card {
      grid-template-columns: 112px minmax(0, 1fr) !important;
      gap: 6px 12px !important;
      padding-right: 10px !important;
    }

    #alumni .alumni-card .alumni-avatar-wrap,
    #alumni .alumni-card-skeleton .alumni-skeleton-avatar {
      width: 68px !important;
      height: 68px !important;
    }

    #alumni .alumni-card .alumni-card-links {
      flex-direction: column !important;
      align-self: stretch !important;
      padding: 0 4px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #alumni .alumni-search-suggest {
      animation: none !important;
    }
  }

  /* Score tiles: Influence and QS Alumni Impact as a matched pair, each with a
     caption, a figure and a meter, so neither is squeezed into one text line. */
  #alumni .alumni-card-scores {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #alumni .alumni-card-score-tile {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 8px 9px 9px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
  }

  #alumni .alumni-card-score-tile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #alumni .alumni-card-score-tile-label {
    overflow: hidden !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-card-score-tile-head > .chart-info-icon {
    flex: 0 0 auto !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    border-color: var(--line) !important;
    color: var(--ink-3) !important;
    background: var(--surface) !important;
    font-size: 8.5px !important;
  }

  #alumni .alumni-card-score-tile-body {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #alumni .alumni-card .alumni-card-score-tile .alumni-score-value {
    color: var(--ink) !important;
    font-size: 21px !important;
    font-weight: 620 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }

  #alumni .alumni-card-score-tile.is-empty .alumni-score-value {
    color: var(--ink-4) !important;
  }

  #alumni .alumni-card-score-tile-note {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  #alumni .alumni-card-score-tile .alumni-score-meter {
    width: 100% !important;
    height: 4px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    background: var(--surface-3) !important;
  }

  #alumni .alumni-card-score-tile .alumni-score-meter-fill {
    border-radius: 2px !important;
  }

}