/*
 * KU Alumni design system — chart finish for the outcome dashboards.
 *
 * Loaded after analytics.css. Same `ku` layer, so these !important rules win
 * over the legacy stylesheet and over analytics.css where they overlap.
 *
 * The idea: every metric is one compact "data cell" — a flat tinted track whose
 * fill is a slightly deeper tint of the same hue with a crisp end cap, and the
 * value printed inside the cell. One hue means one meaning (blue = rate/share,
 * violet = mix, green = job match, orange = concern), so a column reads at a
 * glance and rows are ~35% shorter than the old bar + separate-number layout.
 * All fills are flat colours (see solid.css).
 */

@layer ku {
  :root {
    --cell-h: 25px;
    --cell-r: 9px;
    --hue-rate: #6cb4f6;
    --hue-mix: #8a5cf6;
    --hue-match: #4cd1a0;
    --hue-warm: #ef5d36;
    --hue-amber: #f5cf45;
    --hue-rose: #3f8fe0;
  }

  /* ------------------------------------------------ card chrome, compacted */

  .field-tab-panel .display-card,
  #employment-detail .display-card {
    padding: 14px 16px 12px !important;
    border-radius: var(--r-md) !important;
  }

  .field-tab-panel .display-card > h3,
  #employment-detail .display-card > h3 {
    margin: 0 0 8px !important;
    padding-right: 34px !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
  }

  .chart-search {
    gap: 10px !important;
    margin: 0 0 8px !important;
  }

  .chart-search input[type="search"] {
    height: 30px !important;
    min-height: 30px !important;
    padding-left: 34px !important;
    border-radius: var(--r-pill) !important;
    font-size: 12.5px !important;
    background-position: 12px center !important;
    background-size: 14px 14px !important;
  }

  .chart-search > em {
    padding: 3px 9px !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-3) !important;
    background: var(--surface-3) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 560 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* -------------------------------------------------- rate-chart: data cells */

  .rate-chart {
    --cell-gap: 6px;
    gap: 0 !important;
  }

  .rate-chart-row,
  .employment-share-chart-head,
  .share-chart-head,
  .top-match-chart-head,
  .top-further-chart-head,
  .top-internship-chart-head,
  .internship-risk-chart-head {
    display: grid !important;
    grid-template-columns: minmax(130px, 1.35fr) !important;
    grid-auto-columns: minmax(78px, 1fr) !important;
    column-gap: var(--cell-gap) !important;
    align-items: center !important;
  }

  /* Charts that end in a sector / majority-degree tag get a wider last column. */
  .top-match-chart.has-sector-column .rate-chart-row,
  .top-match-chart.has-sector-column .top-match-chart-head,
  .top-further-chart .rate-chart-row,
  .top-further-chart .top-further-chart-head {
    grid-template-columns: minmax(130px, 1.2fr) repeat(2, minmax(78px, 1fr)) minmax(112px, 1.1fr) !important;
  }

  .top-further-chart.rate-only .rate-chart-row,
  .top-further-chart.rate-only .top-further-chart-head {
    grid-template-columns: minmax(180px, 340px) minmax(96px, 200px) !important;
  }

  /* Every child sits in row 1; a track and its value share one grid cell. */
  .rate-chart-row > *,
  .employment-share-chart-head > *,
  .share-chart-head > *,
  .top-match-chart-head > *,
  .top-further-chart-head > *,
  .top-internship-chart-head > *,
  .internship-risk-chart-head > * {
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .rate-chart-row > :nth-child(1),
  .employment-share-chart-head > :nth-child(1),
  .share-chart-head > :nth-child(1),
  .top-match-chart-head > :nth-child(1),
  .top-further-chart-head > :nth-child(1),
  .top-internship-chart-head > :nth-child(1),
  .internship-risk-chart-head > :nth-child(1) { grid-column: 1 !important; }

  /* Empty spacer spans in the header only exist for the old two-column pairs. */
  .employment-share-chart-head > span:not(:first-child),
  .share-chart-head > span:not(:first-child),
  .top-match-chart-head > span:not(:first-child),
  .top-further-chart-head > span:not(:first-child),
  .top-internship-chart-head > span:not(:first-child),
  .internship-risk-chart-head > span:not(:first-child) { display: none !important; }

  .rate-chart-row > :nth-child(2),  .rate-chart-row > :nth-child(3),
  .rate-chart-head > :nth-child(2),
  .employment-share-chart-head > :nth-child(2),
  .share-chart-head > :nth-child(2),
  .top-match-chart-head > :nth-child(2),
  .top-further-chart-head > :nth-child(2),
  .top-internship-chart-head > :nth-child(2),
  .internship-risk-chart-head > :nth-child(2) { grid-column: 2 !important; }

  .rate-chart-row > :nth-child(4),  .rate-chart-row > :nth-child(5),
  .employment-share-chart-head > :nth-child(4),
  .share-chart-head > :nth-child(4),
  .top-match-chart-head > :nth-child(4),
  .top-further-chart-head > :nth-child(4),
  .top-internship-chart-head > :nth-child(4),
  .internship-risk-chart-head > :nth-child(4) { grid-column: 3 !important; }

  .rate-chart-row > :nth-child(6),  .rate-chart-row > :nth-child(7),
  .employment-share-chart-head > :nth-child(6),
  .share-chart-head > :nth-child(6),
  .top-match-chart-head > :nth-child(6),
  .top-further-chart-head > :nth-child(6),
  .top-internship-chart-head > :nth-child(6),
  .internship-risk-chart-head > :nth-child(6) { grid-column: 4 !important; }

  .rate-chart-row > :nth-child(8),  .rate-chart-row > :nth-child(9),
  .employment-share-chart-head > :nth-child(8),
  .share-chart-head > :nth-child(8),
  .top-internship-chart-head > :nth-child(8),
  .internship-risk-chart-head > :nth-child(8) { grid-column: 5 !important; }

  .rate-chart-row > :nth-child(10), .rate-chart-row > :nth-child(11),
  .top-internship-chart-head > :nth-child(10),
  .internship-risk-chart-head > :nth-child(10) { grid-column: 6 !important; }

  .rate-chart-row > :nth-child(12), .rate-chart-row > :nth-child(13),
  .top-internship-chart-head > :nth-child(12),
  .internship-risk-chart-head > :nth-child(12) { grid-column: 7 !important; }

  /* Row */
  .rate-chart > .rate-chart-row,
  .rate-chart > .rate-chart-row + .rate-chart-row {
    margin: 0 -6px !important;
    padding: 3px 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    transition: background var(--fast) var(--ease);
  }

  .rate-chart > .rate-chart-row:hover {
    background: var(--surface-2) !important;
  }

  .rate-chart-meta {
    display: grid !important;
    gap: 0 !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
  }

  .rate-chart-meta strong,
  .rate-chart-meta .top-match-label strong {
    display: block !important;
    overflow: hidden !important;
    font-size: 13px !important;
    font-weight: 580 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rate-chart-meta > span {
    overflow: hidden !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Header labels line up with the text inside the cells below them. */
  .employment-share-chart-head,
  .share-chart-head,
  .top-match-chart-head,
  .top-further-chart-head,
  .top-internship-chart-head,
  .internship-risk-chart-head {
    padding: 0 0 5px !important;
    border-bottom: 1px solid var(--hairline) !important;
    margin-bottom: 3px !important;
  }

  .employment-share-chart-head > strong,
  .share-chart-head > strong,
  .top-match-chart-head > strong,
  .top-further-chart-head > strong,
  .top-internship-chart-head > strong,
  .internship-risk-chart-head > strong {
    padding-left: 9px !important;
    align-self: end !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Data cell */
  .rate-chart-track,
  .rate-chart-track.match-track,
  .rate-chart-track.employment-rate-track {
    position: relative !important;
    grid-row: 1 !important;
    height: var(--cell-h) !important;
    min-height: var(--cell-h) !important;
    border-radius: var(--cell-r) !important;
    background: color-mix(in srgb, var(--hue, var(--hue-rate)) 14%, var(--surface)) !important;
    overflow: hidden !important;
  }

  .rate-chart .rate-chart-row > .rate-chart-track > i,
  .rate-chart .rate-chart-row > .match-track > i,
  .rate-chart .rate-chart-row > div > .rate-chart-track > i {
    display: block !important;
    height: 100% !important;
    border-radius: var(--cell-r) !important;
    background: var(--hue, var(--hue-rate)) !important;
    box-shadow: none !important;
    transition: background var(--fast) var(--ease);
  }

  .rate-chart .rate-chart-row:hover > .rate-chart-track > i {
    background: var(--hue, var(--hue-rate)) !important;
    filter: brightness(.94) saturate(1.05);
  }

  .rate-chart-value,
  .rate-chart-row > strong.rate-chart-value {
    z-index: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    padding: 0 0 0 9px !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 640 !important;
    line-height: var(--cell-h) !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums !important;
    pointer-events: none !important;
  }

  .rate-chart-track:has(> i[style*="width:0%"]) + .rate-chart-value {
    color: var(--ink-4) !important;
    font-weight: 560 !important;
  }

  /* One hue per metric position; job match is always green. */
  .rate-chart-row > :nth-child(2), .rate-chart-row > :nth-child(3) { --hue: var(--hue-rate); }
  .rate-chart-row > :nth-child(4), .rate-chart-row > :nth-child(5) { --hue: var(--hue-mix); }
  .rate-chart-row > :nth-child(6), .rate-chart-row > :nth-child(7) { --hue: var(--hue-match); }
  .rate-chart-row > :nth-child(8), .rate-chart-row > :nth-child(9) { --hue: var(--hue-warm); }
  .rate-chart-row > :nth-child(10), .rate-chart-row > :nth-child(11) { --hue: var(--hue-amber); }
  .rate-chart-row > :nth-child(12), .rate-chart-row > :nth-child(13) { --hue: var(--hue-rose); }

  .rate-chart-row > .match-track,
  .rate-chart-row > .match-track + .rate-chart-value,
  .rate-chart-row > .job-match-track,
  .rate-chart-row > .job-match-track + .rate-chart-value { --hue: var(--hue-match); }

  .rate-chart-row > .employment-rate-track,
  .rate-chart-row > .employment-rate-track + .rate-chart-value { --hue: var(--hue-rate); }

  .rate-chart-row > .selected-share-track,
  .rate-chart-row > .selected-share-track + .rate-chart-value { --hue: var(--hue-mix); }

  /* The hue is read from the track, so the fill inherits it (not its own). */
  .rate-chart-row > :nth-child(n) > i { --hue: inherit !important; }

  /* Share / split cards that reuse the first column for a different meaning. */
  .internship-risk-chart .rate-chart-row > :nth-child(6),
  .internship-risk-chart .rate-chart-row > :nth-child(7) { --hue: var(--hue-rose); }
  .internship-risk-chart .rate-chart-row > :nth-child(8),
  .internship-risk-chart .rate-chart-row > :nth-child(9) { --hue: var(--hue-warm); }

  /* Sector / majority-degree tag */
  .rate-chart-row > .sector-majority-tag {
    justify-self: start !important;
    max-width: 100% !important;
    height: 22px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    line-height: 22px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* -------------------------------------------------------------- heatmap */

  .heatmap-row {
    gap: 4px !important;
  }

  .heatmap-cell {
    min-height: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 620 !important;
    font-variant-numeric: tabular-nums !important;
    box-shadow: none !important;
    transition: transform var(--fast) var(--ease);
  }

  .heatmap-cell strong {
    font: inherit !important;
    color: inherit !important;
  }

  .heatmap-cell:not(.heatmap-cell-empty):hover {
    transform: scale(1.04);
  }

  /* --------------------------------------------- employment per segment (equity) */

  .display-card .equity-chart-row,
  .display-card .equity-chart-head {
    column-gap: 6px !important;
    align-items: center !important;
  }

  .display-card .equity-chart-row {
    margin: 0 -6px !important;
    padding: 5px 6px !important;
    border-radius: 10px !important;
  }

  .display-card .equity-chart-row:hover { background: var(--surface-2) !important; }

  .equity-metric {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  .equity-metric > .equity-track,
  .equity-metric > b {
    grid-area: 1 / 1 !important;
  }

  .equity-metric > .equity-track {
    height: var(--cell-h) !important;
    min-height: var(--cell-h) !important;
    border-radius: var(--cell-r) !important;
    background: color-mix(in srgb, var(--hue, var(--hue-rate)) 14%, var(--surface)) !important;
  }

  .equity-metric > .equity-track > i {
    border-radius: var(--cell-r) !important;
    background: var(--hue, var(--hue-rate)) !important;
  }

  .equity-metric > b {
    z-index: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    padding-left: 9px !important;
    line-height: var(--cell-h) !important;
    pointer-events: none !important;
  }

  .equity-chart-row > :nth-child(4) { --hue: var(--hue-amber); }
  .equity-chart-row > :nth-child(5) { --hue: var(--hue-mix); }
  .equity-chart-row > :nth-child(6) { --hue: var(--hue-match); }
  .equity-chart-row > :nth-child(7) { --hue: var(--hue-rate); }
  .equity-chart-row > :nth-child(8) { --hue: var(--hue-rose); }
  .equity-chart-row > :nth-child(n) .equity-track > i { --hue: inherit !important; }

  /* --------------------------------------------------- ranked bars (bar-row) */

  .display-card .bar-row,
  .display-card .degree-split-row {
    display: grid !important;
    grid-template-columns: 24px minmax(110px, 1.1fr) minmax(0, 2fr) 64px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 6px 0 !important;
  }

  .display-card .degree-split-chart { gap: 0 !important; }

  .display-card .degree-split-row,
  .display-card .bar-row { margin: 0 !important; }

  .display-card .bar-row .bar-track,
  .display-card .degree-split-row .degree-split-track {
    height: 10px !important;
    min-height: 10px !important;
    border-radius: 5px !important;
  }

  .display-card .bar-row .bar-fill,
  .display-card .degree-split-segment {
    border-radius: 5px !important;
  }

  .display-card .bar-value {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    text-align: right !important;
  }

  .display-card .degree-split-label {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
  }

  .display-card .degree-split-label span {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .display-card .degree-split-legend {
    gap: 14px !important;
    margin: 0 0 4px !important;
    font-size: 11.5px !important;
  }

  /* ------------------------------------------------------ employer / title tiles */

  .mag-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 8px !important;
  }

  .mag-tile {
    grid-template-rows: auto auto auto !important;
    gap: 3px !important;
    height: auto !important;
    padding: 9px 12px 10px !important;
    border-radius: 12px !important;
  }

  .mag-tile-top { margin-bottom: 1px !important; }

  .mag-rank {
    min-width: 20px !important;
    height: 20px !important;
    font-size: 10.5px !important;
  }

  .mag-tier {
    height: 20px !important;
    padding: 0 8px 0 7px !important;
    font-size: 10.5px !important;
  }

  .mag-name {
    font-size: 13px !important;
  }

  .mag-value {
    gap: 6px !important;
  }

  .mag-value b {
    font-size: 22px !important;
    font-weight: 450 !important;
  }

  .mag-value small {
    font-size: 11px !important;
  }

  .mag-meter {
    height: 6px !important;
    border-radius: 3px !important;
  }

  .mag-meter i { border-radius: 3px !important; }

  /* -------------------------------------------------------- contact methods */

  .display-card.full .contact-method-chart {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  @media (min-width: 1000px) {
    .display-card.full .contact-method-chart {
      grid-template-columns: auto minmax(0, 1fr) !important;
      gap: 32px !important;
    }
  }

  .contact-method-row {
    grid-template-columns: minmax(96px, 160px) minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 6px 0 !important;
  }

  .contact-method-track {
    height: 12px !important;
    min-height: 12px !important;
    border-radius: 6px !important;
  }

  .contact-method-track > span { border-radius: 6px !important; }

  .contact-method-value {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 88px !important;
    text-align: right !important;
  }

  .contact-depth-panel {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
  }

  .contact-depth-head {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .display-card.full .contact-depth-panel {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .contact-depth-stack {
    height: 46px !important;
    min-height: 46px !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }

  .contact-depth-stack > span {
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  .contact-depth-legend {
    gap: 6px 12px !important;
    margin-top: 10px !important;
  }

  /* ----------------------------------------------------- action priority matrix */

  .display-card .priority-list {
    display: grid !important;
    gap: 6px !important;
  }

  .display-card .priority-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(120px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px 16px !important;
    padding: 8px 10px 8px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
  }

  .display-card .priority-copy {
    display: grid !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  .display-card .priority-copy strong { font-size: 13px !important; line-height: 1.3 !important; }

  .display-card .priority-copy span {
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .display-card .priority-track {
    height: 8px !important;
    min-height: 8px !important;
    border-radius: 4px !important;
    background: var(--surface-3) !important;
  }

  .display-card .priority-track > i { border-radius: 4px !important; }

  .display-card .priority-metric {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 76px !important;
    justify-content: flex-end !important;
  }

  .display-card .priority-metric strong {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* ---------------------------------------------------- outcome mix (stacked) */

  .employment-outcome-summary {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .employment-outcome-summary > div {
    padding: 9px 12px !important;
    border-radius: 12px !important;
  }

  .employment-outcome-summary > div > strong {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  .employment-outcome-summary > div > span,
  .employment-outcome-summary > div > em {
    font-size: 11.5px !important;
  }

  .employment-outcome-stack {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 9px !important;
    margin-bottom: 8px !important;
  }

  .employment-outcome-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 22px !important;
    margin: 0 !important;
  }

  .employment-outcome-legend-item {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    padding: 0 !important;
    font-size: 12.5px !important;
  }

  .employment-outcome-legend-item i { align-self: center !important; }

  /* ----------------------------------------------- readiness path (hero funnel) */

  .funnel-rate-row {
    padding: 5px 0 !important;
  }

  .funnel-drop-value small { display: none !important; }

  /* ----------------------------------------------------------- readiness path */

  #fields > .field-hero,
  #employment-detail > .field-hero {
    gap: 22px !important;
    margin-bottom: 16px !important;
    padding: 18px 22px !important;
  }

  .field-hero-funnel,
  .field-stat-strip {
    padding: 14px 18px 10px !important;
    border-radius: var(--r-md) !important;
  }

  .funnel-rate-row {
    padding: 4px 0 !important;
    gap: 10px !important;
  }

  .funnel-rate-track {
    height: 12px !important;
    border-radius: 6px !important;
  }

  .funnel-rate-track > i:not(.funnel-rate-overlay) { border-radius: 6px !important; }

  .funnel-drop-value,
  .funnel-drop-placeholder {
    flex-direction: row !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 2px 10px !important;
    border-radius: var(--r-pill) !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  .funnel-drop-value small { display: none !important; }

  .funnel-info-head { margin-bottom: 6px !important; }

  /* ------------------------------------------------ concern-coloured metrics */

  /* On the Unemployment page the leading rate is a concern, not an achievement. */
  [data-field-tab-panel="unemployment"] .rate-chart:not(.internship-risk-chart):not(.top-internship-chart) .rate-chart-row > :nth-child(2),
  [data-field-tab-panel="unemployment"] .rate-chart:not(.internship-risk-chart):not(.top-internship-chart) .rate-chart-row > :nth-child(3) {
    --hue: var(--hue-warm);
  }

  /* --------------------------------------------- ranked bars and reason lists */

  .display-card .bar-row .bar-track {
    background: color-mix(in srgb, var(--hue, var(--hue-rate)) 10%, var(--surface)) !important;
  }

  .employment-reason-row,
  .internship-risk-reason-row {
    padding: 5px 0 !important;
    gap: 10px !important;
  }

  .employment-reason-track,
  .internship-risk-reason-track {
    height: 10px !important;
    min-height: 10px !important;
    border-radius: 5px !important;
    background: color-mix(in srgb, var(--hue, var(--hue-rate)) 10%, var(--surface)) !important;
  }

  .employment-reason-track > i,
  .internship-risk-reason-track > i { border-radius: 5px !important; }

  .internship-risk-reason-panel,
  .employment-reasons {
    gap: 2px !important;
  }

  /* ------------------------------------------------ palette: tiers and stripes */

  .tier-top { --tier: #8a5cf6; --tier-soft: #ece5fe; }
  .tier-high { --tier: #6cb4f6; --tier-soft: #e1effd; }
  .tier-mid { --tier: #4cd1a0; --tier-soft: #dcf6ec; }
  .tier-base { --tier: #f5cf45; --tier-soft: #fdf3cc; }

  .mag-tile {
    border-radius: 16px !important;
    box-shadow: 0 6px 16px -10px rgba(40, 30, 90, .28) !important;
  }

  .mag-meter, .mag-meter i { border-radius: 4px !important; }
  .mag-meter { height: 8px !important; }

  /* Hatching is reserved for the highest tier (leading cell of a column). */
  .rate-chart .rate-chart-row > .rate-chart-track.is-top > i,
  .bar-row.is-top .bar-fill,
  .contact-column.is-top .contact-method-track > span {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 7px) !important;
  }

  .heatmap-cell { border-radius: 10px !important; }

  /* ------------------------------------------------- contact methods: columns */

  .contact-columns {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    min-height: 200px !important;
    padding: 4px 0 0 !important;
  }

  .contact-method-row.contact-column {
    display: flex !important;
    flex: 0 0 92px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 92px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .contact-method-row.contact-column + .contact-method-row.contact-column { border: 0 !important; }

  .contact-column .contact-method-value {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .contact-column .contact-method-value strong { font-size: 15px !important; }

  .contact-column .contact-method-track {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 72px !important;
    height: auto !important;
    min-height: 110px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--contact-color, var(--hue-rate)) 16%, var(--surface-2)) !important;
  }

  .contact-column .contact-method-track > span {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: auto !important;
    border-radius: 18px !important;
    background: var(--contact-color, var(--hue-rate)) !important;
    box-shadow: 0 6px 14px -8px var(--contact-color, var(--hue-rate)) !important;
  }

  .contact-column .contact-method-label { flex-direction: column !important; gap: 3px !important; text-align: center !important; }
  .contact-column .contact-method-label strong { font-size: 12px !important; line-height: 1.2 !important; white-space: normal !important; }
  .contact-column .contact-method-label i { display: none !important; }

  /* ------------------------------------------------------------------ bubbles */

  .bubble-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px 28px;
    padding: 6px 4px 4px;
  }

  .bubble-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .bubble-copy { display: grid; gap: 2px; min-width: 0; }

  .bubble-dot {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0d0f14;
    background: var(--bubble);
    box-shadow: 0 10px 22px -12px var(--bubble), inset 0 0 0 3px rgba(255, 255, 255, .55);
    transition: transform var(--med) var(--ease-out);
    cursor: default;
  }

  .bubble-dot:hover { transform: scale(1.05); }

  .bubble-dot.is-striped {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 8px);
  }

  .bubble-dot b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }

  .bubble-label {
    max-width: 190px;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bubble-item small { color: var(--ink-3); font-size: 11px; }

  /* ------------------------------------------------------ chunkier meters */

  .funnel-rate-track, .funnel-rate-track > i:not(.funnel-rate-overlay) { border-radius: 8px !important; }
  .funnel-rate-track { height: 14px !important; }

  .display-card .bar-row .bar-track { height: 12px !important; border-radius: 7px !important; }
  .display-card .bar-row .bar-fill { border-radius: 7px !important; }

  /* KU vs other / study-location splits use the shared palette. */
  .degree-split-segment.ku, .degree-split-legend i.ku, .degree-split-segment.current-ku, .degree-split-legend i.current-ku { background: #8a5cf6 !important; }
  .degree-split-segment.other, .degree-split-legend i.other { background: #f5cf45 !important; }
  .degree-split-segment.current-outside, .degree-split-legend i.current-outside { background: #ef5d36 !important; }
  .degree-split-segment.current-uae, .degree-split-legend i.current-uae { background: #4cd1a0 !important; }

  /* --------------------------------------------------- heatmap: dot matrix */

  .heatmap-dot-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
  }

  .heatmap-dot-cell .heat-dot {
    display: block;
    flex: 0 0 auto;
    width: var(--dot-size, 14px);
    height: var(--dot-size, 14px);
    margin-left: calc((26px - var(--dot-size, 14px)) / 2);
    margin-right: calc((24px - var(--dot-size, 14px)) / 2);
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 5px 10px -6px var(--dot);
    transition: transform var(--med) var(--ease-out);
  }

  .heatmap-dot-cell.is-top .heat-dot {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 6px) !important;
  }

  .heatmap-dot-cell strong {
    font-size: 12px !important;
    letter-spacing: -.01em !important;
    font-weight: 650 !important;
  }

  .heatmap-dot-cell:not(.heatmap-cell-empty):hover { transform: none !important; background: var(--surface-3) !important; }
  .heatmap-dot-cell:hover .heat-dot { transform: scale(1.12); }
  .heatmap-dot-cell.heatmap-cell-empty { background: var(--surface-2) !important; }
}

/* The analytics layer reads these categorical hues (unlayered, so redefined here). */
:root {
  --hue-1: #6cb4f6;
  --hue-2: #ef5d36;
  --hue-3: #4cd1a0;
  --hue-4: #8a5cf6;
  --hue-5: #f5cf45;
  --hue-6: #3f8fe0;
}

/* Copy-as-image button: sits left of the info icon in every analytics chart head. */
.chart-snapshot-button {
  position: relative;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink-3) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: none !important;
  transition: color var(--med) var(--ease-out), background var(--med) var(--ease-out), border-color var(--med) var(--ease-out);
}

.chart-snapshot-button:hover,
.chart-snapshot-button:focus-visible {
  color: var(--ink) !important;
  background: var(--surface-3) !important;
}

.chart-snapshot-glyph {
  display: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.chart-snapshot-button[data-state="idle"] .is-copy,
.chart-snapshot-button[data-state="done"] .is-done,
.chart-snapshot-button[data-state="error"] .is-error { display: block; }

.chart-snapshot-spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 1.8px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}

.chart-snapshot-button[data-state="busy"] { cursor: progress; }
.chart-snapshot-button[data-state="busy"] .chart-snapshot-spinner {
  display: block;
  animation: chart-snapshot-spin .7s linear infinite;
}

.chart-snapshot-button[data-state="done"] {
  color: var(--good-ink) !important;
  border-color: color-mix(in srgb, var(--good) 35%, transparent) !important;
  background: var(--good-soft) !important;
}

.chart-snapshot-button[data-state="error"] {
  color: var(--critical-ink) !important;
  border-color: color-mix(in srgb, var(--critical) 35%, transparent) !important;
  background: var(--critical-soft) !important;
}

/* Outcome label that slides in beside the button after a copy. */
.chart-snapshot-button[data-feedback]::after {
  content: attr(data-feedback);
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  animation: chart-snapshot-pop 200ms var(--ease-out);
}

@keyframes chart-snapshot-spin { to { transform: rotate(360deg); } }
@keyframes chart-snapshot-pop {
  from { opacity: 0; transform: translate(6px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .chart-snapshot-button[data-state="busy"] .chart-snapshot-spinner { animation-duration: 1.6s; }
  .chart-snapshot-button[data-feedback]::after { animation: none; }
}