/*
 * KU Alumni design system — chart system v2 ("viz"). Loaded last.
 *
 * One hue per meaning, validated as a set (dataviz validator, light surface):
 *   rate  #2a78d6  blue    — employment / share of population
 *   mix   #4a3aa7  violet  — share of a group / mix
 *   match #1baf7a  aqua    — study-job or internship match, satisfaction
 *   amber #eda100          — offers and other secondary positives
 *   red   #e34948          — 5th slot
 *   concern #eb6834 orange — reserved for metrics where "up" is bad
 * Ordinal and sequential encodings use one hue light -> deep.
 *
 * Marks are thin (6-10px) solid fills with rounded data ends;
 * values sit beside the mark in tabular figures, never on top of it.
 */

:root {
  --hue-1: #2a78d6;
  --hue-2: #eb6834;
  --hue-3: #1baf7a;
  --hue-4: #4a3aa7;
  --hue-5: #eda100;
  --hue-6: #184f95;
}

@layer ku {
  :root {
    --hue-rate: #2a78d6;
    --hue-mix: #4a3aa7;
    --hue-match: #1baf7a;
    --hue-warm: #eb6834;
    --hue-amber: #eda100;
    --hue-rose: #184f95;
    --viz-red: #e34948;
    --viz-track: #eef1f5;
    --viz-grid: rgba(14, 20, 32, .07);
    --viz-good-ink: #0a7a2f;
    --viz-bad-ink: #b42323;
    --viz-num: var(--font-sans);
    --viz-num-sm: var(--font-sans);
  }

  /* ============================================================ card chrome */

  :root .field-tab-panel .display-card,
  :root #employment-detail .display-card {
    border: 1px solid rgba(14, 20, 32, .05) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -22px rgba(16, 24, 40, .22) !important;
  }

  :root .field-tab-panel .display-card > h3,
  :root #employment-detail .display-card > h3 {
    font-size: 14.5px !important;
    font-weight: 640 !important;
    letter-spacing: -.005em !important;
  }

  /* ================================================== metric rows (rate-chart)
     Each metric cell: the value on top, a thin meter underneath. */

  :root .rate-chart > .rate-chart-row,
  :root .rate-chart > .rate-chart-row + .rate-chart-row {
    align-items: stretch !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    margin: 0 -8px !important;
    border-radius: 10px !important;
  }

  /* Dividers are a separate straight line, so rounded hover corners don't bend them. */
  :root .rate-chart > .rate-chart-row,
  :root .display-card .equity-chart-row,
  :root .display-card .bar-row { position: relative; }

  :root .rate-chart > .rate-chart-row + .rate-chart-row::before,
  :root .display-card .equity-chart-row + .equity-chart-row::before,
  :root .display-card .bar-row + .bar-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--viz-grid);
    pointer-events: none;
  }

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

  :root .rate-chart > .rate-chart-row:hover::before,
  :root .rate-chart > .rate-chart-row:hover + .rate-chart-row::before { display: none; }

  :root .rate-chart-meta {
    align-self: center !important;
  }

  :root .rate-chart-row > .rate-chart-track,
  :root .rate-chart-row > .rate-chart-track.match-track,
  :root .rate-chart-row > .rate-chart-track.employment-rate-track {
    position: relative !important;
    align-self: end !important;
    height: 6px !important;
    min-height: 6px !important;
    margin: 0 0 5px !important;
    border-radius: 3px !important;
    background: var(--viz-track) !important;
    overflow: visible !important;
    cursor: pointer;
  }

  /* A generous hit area covering the value above the meter. */
  :root .rate-chart-row > .rate-chart-track::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -6px !important;
    height: 34px !important;
  }

  :root .rate-chart .rate-chart-row > .rate-chart-track > i,
  :root .rate-chart .rate-chart-row > .match-track > i,
  :root .rate-chart .rate-chart-row > div > .rate-chart-track > i {
    min-width: 0 !important;
    height: 100% !important;
    border-radius: 3px !important;
    /* Red-to-green value colour set by the renderer; categorical hue only as a fallback. */
    background: var(--share-color, var(--hue, var(--hue-rate))) !important;
    background-image: none !important;
  }

  :root .rate-chart .rate-chart-row:hover > .rate-chart-track > i { filter: saturate(1.1) !important; }

  :root .rate-chart-value,
  :root .rate-chart-row > strong.rate-chart-value {
    align-self: start !important;
    justify-self: start !important;
    margin-top: 3px !important;
    padding: 0 !important;
    color: var(--ink) !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 12.5px !important;
    font-weight: 560 !important;
    line-height: 18px !important;
    letter-spacing: -.02em !important;
  }

  :root .rate-chart-track.is-top + .rate-chart-value { font-weight: 720 !important; }

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

  /* The leader of a column is emphasised by its bold value only; no coloured end cap. */
  :root .rate-chart .rate-chart-row > .rate-chart-track.is-top > i {
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Column headers. Bars are coloured by value, so there is no per-column key. */
  :root :is(.employment-share-chart-head, .share-chart-head, .top-match-chart-head, .top-further-chart-head, .top-internship-chart-head, .internship-risk-chart-head) > strong {
    padding-left: 0 !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }

  /* Column meanings that differ from the positional default. */
  :root .top-internship-chart .rate-chart-row > :nth-child(8),
  :root .top-internship-chart .rate-chart-row > :nth-child(9) { --hue: var(--hue-amber) !important; }
  :root .top-internship-chart .rate-chart-row > :nth-child(10),
  :root .top-internship-chart .rate-chart-row > :nth-child(11) { --hue: var(--hue-rose) !important; }

  :root .internship-risk-chart .rate-chart-row > :nth-child(6),
  :root .internship-risk-chart .rate-chart-row > :nth-child(7) { --hue: var(--hue-warm) !important; }
  :root .internship-risk-chart .rate-chart-row > :nth-child(8),
  :root .internship-risk-chart .rate-chart-row > :nth-child(9) { --hue: var(--viz-red) !important; }
  :root .internship-risk-chart .rate-chart-row > :nth-child(10),
  :root .internship-risk-chart .rate-chart-row > :nth-child(11) { --hue: var(--hue-match) !important; }

  /* Unemployment: the leading rate is a concern, the share column is the mix. */
  :root [data-field-tab-panel="unemployment"] .rate-chart:not(.internship-risk-chart):not(.top-internship-chart) .rate-chart-row > :nth-child(2),
  :root [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) !important;
  }

  /* Further study: studying blue, outside UAE amber, in UAE aqua, KU violet. */
  :root [data-field-tab-panel="further"] .rate-chart-row > :nth-child(4),
  :root [data-field-tab-panel="further"] .rate-chart-row > :nth-child(5) { --hue: var(--hue-amber) !important; }
  :root [data-field-tab-panel="further"] .rate-chart-row > :nth-child(6),
  :root [data-field-tab-panel="further"] .rate-chart-row > :nth-child(7) { --hue: var(--hue-match) !important; }
  :root [data-field-tab-panel="further"] .rate-chart-row > :nth-child(8),
  :root [data-field-tab-panel="further"] .rate-chart-row > :nth-child(9) { --hue: var(--hue-mix) !important; }

  :root .rate-chart-row > .sector-majority-tag {
    align-self: center !important;
    background: var(--surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--viz-grid) !important;
  }

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

  :root .display-card .equity-chart-row {
    align-items: center !important;
    min-height: 44px !important;
  }

  :root .equity-metric {
    grid-template-rows: auto 6px !important;
    row-gap: 6px !important;
  }

  :root .equity-metric > b {
    grid-area: 1 / 1 !important;
    padding: 0 !important;
    line-height: 18px !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 12.5px !important;
    font-weight: 560 !important;
    letter-spacing: -.02em !important;
  }

  :root .equity-metric > .equity-track {
    position: relative !important;
    grid-area: 2 / 1 !important;
    height: 6px !important;
    min-height: 6px !important;
    border-radius: 3px !important;
    background: var(--viz-track) !important;
    overflow: visible !important;
    cursor: pointer;
  }

  :root .equity-metric > .equity-track::after {
    content: "";
    position: absolute;
    inset: -26px 0 -6px;
  }

  :root .equity-metric > .equity-track > i {
    height: 100% !important;
    border-radius: 3px !important;
    background: var(--equity-color, var(--hue, var(--hue-rate))) !important;
  }

  :root .equity-records,
  :root .segment-signal-value {
    font-family: var(--viz-num-sm) !important;
    font-size: 12.5px !important;
    font-weight: 560 !important;
  }

  :root .equity-chart-head > span {
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  /* ===================================================== ranked bar lists */

  :root .display-card .bar-row:not(.degree-split-row) {
    --hue: var(--hue-rate) !important;
    padding: 7px 0 !important;
  }

  :root .display-card .bar-row + .bar-row { border: 0 !important; }

  :root .display-card .bar-row:not(.degree-split-row) .bar-track {
    height: 8px !important;
    min-height: 8px !important;
    border-radius: 4px !important;
    background: var(--viz-track) !important;
  }

  :root .display-card .bar-row:not(.degree-split-row) .bar-fill {
    border-radius: 4px !important;
    background: var(--bar-color, var(--hue, var(--hue-rate))) !important;
    background-image: none !important;
  }

  :root .display-card .bar-row.is-top:not(.degree-split-row) .bar-fill {
    background: var(--bar-color, var(--hue-rate)) !important;
    background-image: none !important;
  }

  :root .display-card .bar-rank {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
  }

  :root .display-card .bar-row.is-top .bar-rank {
    color: #ffffff !important;
    background: var(--ink) !important;
  }

  :root .display-card .bar-value strong {
    font-family: var(--viz-num-sm) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  :root .display-card .bar-value span {
    min-width: 40px !important;
    color: var(--ink-3) !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 11px !important;
    text-align: right !important;
  }

  /* Degree / location splits: KU is always violet, elsewhere in UAE aqua,
     abroad and other universities amber. 2px surface gap between parts. */
  :root .degree-split-segment.ku, :root .degree-split-legend i.ku,
  :root .degree-split-segment.current-ku, :root .degree-split-legend i.current-ku { background: var(--hue-mix) !important; }
  :root .degree-split-segment.other, :root .degree-split-legend i.other,
  :root .degree-split-segment.current-outside, :root .degree-split-legend i.current-outside { background: var(--hue-amber) !important; }
  :root .degree-split-segment.current-uae, :root .degree-split-legend i.current-uae { background: var(--hue-match) !important; }

  :root .display-card .degree-split-row .degree-split-track {
    height: 8px !important;
    min-height: 8px !important;
    border-radius: 4px !important;
    background: var(--viz-track) !important;
  }

  :root .degree-split-stack { gap: 2px !important; }
  :root .display-card .degree-split-segment { border-radius: 4px !important; }
  :root .degree-split-legend i { border-radius: 2px !important; }

  /* Reason lists: concern (orange) by default; destinations are blue. */
  :root .employment-reason-row,
  :root .internship-risk-reason-row { --hue: var(--hue-warm) !important; }
  :root .postgraduate-outcome-mix .employment-reason-row { --hue: var(--hue-rate) !important; }

  :root .employment-reason-track,
  :root .internship-risk-reason-track {
    height: 8px !important;
    min-height: 8px !important;
    border-radius: 4px !important;
    background: var(--viz-track) !important;
  }

  :root .employment-reason-track > i,
  :root .internship-risk-reason-track > i {
    border-radius: 4px !important;
    background: var(--reason-color, var(--hue, var(--hue-rate))) !important;
    background-image: none !important;
  }

  :root .employment-reason-row > b,
  :root .employment-reason-label span,
  :root .internship-risk-reason-row > b {
    font-family: var(--viz-num-sm) !important;
    font-size: 11.5px !important;
  }

  /* ================================================ readiness path (funnel) */

  :root .funnel-rate-row { --hue: var(--hue-rate) !important; }

  :root .funnel-rate-row .funnel-rate-meta strong::before { display: none !important; }

  :root .funnel-rate-track {
    position: relative !important;
    height: 10px !important;
    border-radius: 5px !important;
    background: var(--viz-track) !important;
    overflow: hidden !important;
  }

  /* Ghost of the stage this row is measured from; the pale gap is the drop. */
  :root .funnel-rate-track::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--funnel-prev, 0%);
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--ink-4) 22%, var(--viz-track)) !important;
    background-image: none !important;
  }

  :root .funnel-rate-track > i:not(.funnel-rate-overlay) {
    position: relative !important;
    z-index: 1 !important;
    border-radius: 5px !important;
    /* Red-to-green scale from stockScaleColor(), as the bars used before the redesign. */
    background: var(--funnel-color, var(--hue, var(--hue-rate))) !important;
  }

  :root .funnel-rate-track > .funnel-rate-overlay {
    z-index: 2 !important;
    background: var(--hue-rose) !important;
  }

  :root .funnel-rate-value {
    font-family: var(--viz-num-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
  }

  :root .funnel-drop-value {
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: inset 0 0 0 1px var(--viz-grid) !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    letter-spacing: -.01em !important;
  }

  :root .funnel-drop-value.muted {
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-family: var(--font-sans) !important;
  }

  /* ========================================================== heatmaps */

  :root .viz-heat-cell,
  :root .heatmap-cell.viz-heat-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    color: var(--heat-ink, var(--ink)) !important;
    background: var(--heat-fill, var(--surface-2)) !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 12.5px !important;
    font-weight: 560 !important;
    letter-spacing: -.02em !important;
    cursor: pointer;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease) !important;
  }

  :root .viz-heat-cell strong { font: inherit !important; color: inherit !important; }
  :root .viz-heat-cell.is-top strong { font-weight: 720 !important; }

  :root .viz-heat-cell:not(.heatmap-cell-empty):hover {
    transform: none !important;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink) !important;
  }

  :root .viz-heat-cell.heatmap-cell-empty {
    color: var(--ink-4) !important;
    background: var(--surface-2) !important;
    cursor: default;
  }

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

  :root .viz-heat-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--ink-3);
    font-size: 11px;
  }

  :root .viz-heat-legend em {
    margin-left: auto;
    font-style: normal;
  }

  :root .viz-heat-scale {
    background-image: linear-gradient(90deg, var(--scale-a), var(--scale-b), var(--scale-c)) !important;
    display: inline-block !important;
    width: 84px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }

  /* Generic heatmaps (pathways): single-hue cells, compact rows. */
  :root .heatmap-cell:not(.viz-heat-cell) {
    background: var(--heatmap-fill, var(--surface-2)) !important;
    color: var(--heatmap-text, var(--ink)) !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  :root .heatmap-cell.heatmap-cell-empty:not(.viz-heat-cell) {
    background: var(--surface-2) !important;
  }

  /* ============================================================ donut / mix */

  :root .viz-mix {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px 28px !important;
  }

  :root .viz-mix > .employment-outcome-detail { grid-column: 1 / -1 !important; }

  :root .viz-mix-figure {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
  }

  :root .viz-mix-legend-block { display: grid; gap: 6px; min-width: 190px; }

  :root .viz-mix-legend-title {
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
  }

  :root .viz-donut,
  :root .viz-rings {
    position: relative;
    flex: none;
    width: var(--viz-donut-size, var(--viz-rings-size, 168px));
    height: var(--viz-donut-size, var(--viz-rings-size, 168px));
  }

  :root .viz-rings { width: var(--viz-rings-size); height: var(--viz-rings-size); }

  :root .viz-donut svg,
  :root .viz-rings svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  :root .viz-donut-track,
  :root .viz-ring-track {
    fill: none;
    stroke: var(--viz-track);
  }

  :root .viz-donut-seg {
    fill: none;
    cursor: pointer;
    transition: opacity var(--fast) var(--ease), stroke var(--fast) var(--ease);
  }

  :root .viz-ring-fill {
    fill: none;
    stroke-linecap: round;
    cursor: pointer;
  }

  /* Dimming mutes the stroke only. The global dimmed rule also sets fill, which
     would turn these open arcs and lines into solid grey shapes. */
  :root :is(.viz-donut-track, .viz-donut-seg, .viz-ring-track, .viz-ring-fill, .viz-trend-line, .viz-trend-glow).is-chart-item-dimmed {
    fill: none !important;
  }

  :root .viz-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    text-align: center;
  }

  :root .viz-donut-center strong {
    color: var(--ink);
    font-family: var(--viz-num);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1;
  }

  :root .viz-donut-center span {
    max-width: 96px;
    color: var(--ink-3);
    font-size: 11px;
    line-height: 1.2;
  }

  :root .viz-legend {
    display: grid;
    gap: 0;
    min-width: 180px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :root .viz-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 52px;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-radius: 6px;
  }

  :root .viz-legend li + li { box-shadow: inset 0 1px 0 var(--viz-grid); }
  :root .viz-legend li.viz-mark { cursor: pointer; }
  :root .viz-legend li.viz-mark:hover { background: var(--surface-2); }

  :root .viz-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }

  :root .viz-legend span {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root .viz-legend b {
    color: var(--ink);
    font-family: var(--viz-num-sm);
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
  }

  :root .viz-legend em {
    color: var(--ink-3);
    font-family: var(--viz-num-sm);
    font-size: 11px;
    font-style: normal;
    text-align: right;
  }

  /* KPI tiles that accompany a mix */
  :root .viz-kpis.employment-outcome-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  :root .employment-outcome-summary > div {
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--viz-grid) !important;
  }

  :root .employment-outcome-summary > div > span {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 560 !important;
  }

  :root .employment-outcome-summary > div > strong {
    display: block !important;
    margin: 4px 0 2px !important;
    color: var(--ink) !important;
    font-family: var(--viz-num) !important;
    font-size: 22px !important;
    font-weight: 560 !important;
    letter-spacing: -.04em !important;
    line-height: 1.1 !important;
  }

  :root .employment-outcome-summary > div > em {
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-style: normal !important;
  }

  @media (max-width: 980px) {
    :root .viz-mix { grid-template-columns: minmax(0, 1fr) !important; }
    :root .viz-mix-figure { flex-wrap: wrap; }
  }

  /* ======================================================= signal tiles */

  :root .employment-signal-card { --hue: var(--hue-rate) !important; }
  :root .employment-signal-card.is-concern { --hue: var(--hue-warm) !important; }
  :root .employment-signal-card.is-match { --hue: var(--hue-match) !important; }
  :root .employment-signal-card.is-amber { --hue: var(--hue-amber) !important; }

  :root .employment-signal-card {
    border: 0 !important;
    background: var(--surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--viz-grid) !important;
  }

  :root .employment-signal-card > strong {
    font-family: var(--viz-num) !important;
    font-weight: 560 !important;
    letter-spacing: -.04em !important;
  }

  :root .employment-signal-track {
    height: 6px !important;
    border-radius: 3px !important;
    background: var(--viz-track) !important;
  }

  :root .employment-signal-track > i {
    border-radius: 3px !important;
    background: var(--signal-color, var(--hue, var(--hue-rate))) !important;
  }

  /* =================================================== satisfaction gauge */

  :root .satisfaction-gauge-base {
    stroke: var(--viz-track) !important;
    stroke-linecap: butt !important;
  }

  :root .satisfaction-gauge-fill { stroke-linecap: butt !important; }

  :root .satisfaction-gauge-readout strong {
    font-family: var(--viz-num) !important;
    font-weight: 560 !important;
    letter-spacing: -.05em !important;
  }

  :root .satisfaction-gauge-breakdown li.is-satisfied i { background: var(--hue-match) !important; }
  :root .satisfaction-gauge-breakdown li.is-neutral i { background: #c5cad3 !important; }
  :root .satisfaction-gauge-breakdown li.is-negative i { background: var(--hue-warm) !important; }
  :root .satisfaction-gauge-breakdown b { font-family: var(--viz-num-sm) !important; }

  /* ===================================================== contact methods */

  :root .contact-method-chart.viz-contact,
  :root .display-card.full .contact-method-chart.viz-contact {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 20px 32px !important;
  }

  @media (max-width: 1100px) {
    :root .contact-method-chart.viz-contact,
    :root .display-card.full .contact-method-chart.viz-contact { grid-template-columns: minmax(0, 1fr) !important; }
  }

  :root .viz-contact-coverage {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
  }

  :root .viz-channel-list {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
  }

  :root .viz-channel-head,
  :root .viz-channel-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 60px 52px;
    align-items: center;
    gap: 8px;
  }

  :root .viz-channel-head {
    padding: 0 0 6px;
    border-bottom: 1px solid var(--viz-grid);
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
  }

  :root .viz-channel-head > :first-child { grid-column: 1 / 3; }
  :root .viz-channel-head > :not(:first-child) { text-align: right; }

  :root .viz-channel-row {
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
  }

  :root .viz-channel-row + .viz-channel-row { box-shadow: inset 0 1px 0 var(--viz-grid); }
  :root .viz-channel-row:hover { background: var(--surface-2); }

  :root .viz-channel-row i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }

  :root .viz-channel-row span {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root .viz-channel-row strong,
  :root .viz-channel-row em {
    font-family: var(--viz-num-sm);
    font-size: 12.5px;
    font-style: normal;
    text-align: right;
  }

  :root .viz-channel-row strong { color: var(--ink); font-weight: 600; }
  :root .viz-channel-row em { color: var(--ink-3); font-size: 11.5px; }

  :root .viz-contact .contact-depth-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    background: var(--surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--viz-grid) !important;
  }

  :root .viz-depth-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
  }

  :root .viz-depth-kpis > div {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--viz-grid);
  }

  :root .viz-depth-kpis span { color: var(--ink-3); font-size: 11px; font-weight: 560; }
  :root .viz-depth-kpis strong { color: var(--ink); font-family: var(--viz-num); font-size: 20px; font-weight: 560; letter-spacing: -.04em; }
  :root .viz-depth-kpis em { color: var(--ink-3); font-size: 11px; font-style: normal; }

  :root .viz-contact .contact-depth-stack {
    height: 30px !important;
    min-height: 30px !important;
    gap: 2px !important;
    border-radius: 8px !important;
    background: transparent !important;
  }

  :root .viz-contact .contact-depth-stack > span {
    border-radius: 6px !important;
    font-family: var(--viz-num-sm) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  :root .viz-contact .contact-depth-legend span { font-size: 11.5px !important; }
  :root .viz-contact .contact-depth-legend b { font-family: var(--viz-num-sm) !important; font-weight: 600 !important; }

  /* ========================================================= trend line */

  :root .viz-trend {
    margin: 0 0 10px;
    padding: 2px 0 12px;
    border-bottom: 1px solid var(--viz-grid);
  }

  :root .viz-trend-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }

  :root .viz-trend-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
  }

  :root .viz-trend-key {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 8px;
  }

  :root .viz-trend-key > span {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 560;
  }

  :root .viz-trend-key > span i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  :root .viz-trend-key > strong {
    color: var(--ink);
    font-family: var(--viz-num);
    font-size: 21px;
    font-weight: 560;
    letter-spacing: -.04em;
    line-height: 1.25;
  }

  :root .viz-delta {
    padding: 1px 6px;
    border-radius: 999px;
    font-family: var(--viz-num-sm);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
  }

  :root .viz-delta.is-good { color: var(--viz-good-ink); background: #e6f6ea; }
  :root .viz-delta.is-bad { color: var(--viz-bad-ink); background: #fdecec; }
  :root .viz-delta.is-flat { color: var(--ink-3); background: var(--surface-2); }

  :root .viz-trend-caption {
    color: var(--ink-3);
    font-size: 11px;
    white-space: nowrap;
  }

  :root .viz-trend-plot {
    position: relative;
    height: 150px;
  }

  :root .viz-trend-grid,
  :root .viz-trend-area-box {
    position: absolute;
    inset: 10px 52px 24px 38px;
  }

  /* Dotted gridlines and a solid baseline, like the forecast charts. */
  :root .viz-trend-grid span {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1.5px dotted var(--viz-grid);
  }

  :root .viz-trend-grid span:last-child { border-top: 1px solid var(--line-strong, #cdd2da); }

  :root .viz-trend-grid b {
    position: absolute;
    left: -38px;
    width: 30px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 500;
    text-align: right;
  }

  :root .viz-trend-area-box svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  :root .viz-trend-line,
  :root .viz-trend-glow {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  /* A soft halo under the line. */
  :root .viz-trend-glow {
    stroke-width: 7;
    stroke-opacity: .32;
    filter: blur(5px);
  }

  :root .viz-trend-area { stroke: none; }

  :root .viz-trend-vgrid {
    stroke: var(--viz-grid);
    stroke-width: 1;
    stroke-dasharray: 1.5 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  /* Samples are hollow rings; the latest actual is solid with a halo. */
  :root .viz-trend-dot {
    position: absolute;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    border: 2px solid var(--dot);
    border-radius: 50%;
    background: var(--surface);
    transform: translate(-50%, -50%);
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
    pointer-events: none;
  }

  :root .viz-trend-dot.is-last {
    width: 11px;
    height: 11px;
    border-color: var(--surface);
    background: var(--dot);
    box-shadow: 0 0 0 2px var(--dot);
  }

  /* Hovering a period lifts its points. */
  :root .viz-trend-area-box:has(.viz-trend-col:hover) .viz-trend-dot { opacity: .55; }

  :root .viz-trend-area-box:has(.viz-trend-col[data-i="0"]:hover) .viz-trend-dot[data-i="0"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="1"]:hover) .viz-trend-dot[data-i="1"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="2"]:hover) .viz-trend-dot[data-i="2"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="3"]:hover) .viz-trend-dot[data-i="3"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="4"]:hover) .viz-trend-dot[data-i="4"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="5"]:hover) .viz-trend-dot[data-i="5"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="6"]:hover) .viz-trend-dot[data-i="6"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="7"]:hover) .viz-trend-dot[data-i="7"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="8"]:hover) .viz-trend-dot[data-i="8"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="9"]:hover) .viz-trend-dot[data-i="9"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="10"]:hover) .viz-trend-dot[data-i="10"],
  :root .viz-trend-area-box:has(.viz-trend-col[data-i="11"]:hover) .viz-trend-dot[data-i="11"] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 20%, transparent);
  }

  :root .viz-trend-end {
    position: absolute;
    left: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--viz-grid), 0 2px 6px -3px rgba(16, 24, 40, .2);
    font-family: var(--viz-num-sm);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
  }

  :root .viz-trend-end::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dot);
  }

  :root .viz-trend-end.is-below { transform: translateY(60%); }

  :root .viz-trend-col {
    position: absolute;
    top: -10px;
    bottom: -4px;
    z-index: 2;
    cursor: pointer;
  }

  :root .viz-trend-col::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 4px;
    left: var(--x);
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--ink-3) 0 3px, transparent 3px 6px);
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
  }

  :root .viz-trend-col:hover::after,
  :root .viz-trend-col.is-chart-item-focused::after { opacity: .6; }

  :root .viz-trend-x {
    position: absolute;
    left: 38px;
    right: 52px;
    bottom: 0;
    height: 16px;
  }

  :root .viz-trend-x span {
    position: absolute;
    color: var(--ink-3);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -.02em;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  /* ================================================ employer / title tiles
     Tiers are ordinal (Top > High > Mid > Base) on the red-to-green scale. */

  :root .tier-top { --tier: hsl(124 72% 38%) !important; --tier-soft: hsl(124 50% 90%) !important; }
  :root .tier-high { --tier: hsl(88 76% 42%) !important; --tier-soft: hsl(88 55% 89%) !important; }
  :root .tier-mid { --tier: hsl(40 84% 48%) !important; --tier-soft: hsl(40 80% 89%) !important; }
  :root .tier-base { --tier: hsl(8 82% 52%) !important; --tier-soft: hsl(8 80% 91%) !important; }

  :root .mag-tile {
    border: 1px solid rgba(14, 20, 32, .06) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease) !important;
  }

  :root .mag-tile:hover {
    box-shadow: 0 10px 24px -16px rgba(16, 24, 40, .35) !important;
    transform: translateY(-1px);
  }

  :root .mag-value b {
    font-family: var(--viz-num) !important;
    font-weight: 500 !important;
    letter-spacing: -.05em !important;
  }

  :root .mag-value small { font-family: var(--viz-num-sm) !important; }

  :root .mag-meter {
    height: 6px !important;
    border-radius: 3px !important;
    background: var(--tier-soft, var(--viz-track)) !important;
  }

  :root .mag-meter i,
  :root .mag-tile.tier-top .mag-meter i {
    border-radius: 3px !important;
    background: var(--tier) !important;
    background-image: none !important;
  }

  /* ============================================================ bubbles */

  :root .bubble-dot {
    color: #ffffff !important;
    background: var(--bubble) !important;
    background-image: none !important;
    box-shadow: 0 14px 28px -16px var(--bubble), inset 0 -6px 14px -6px rgba(0, 0, 0, .18) !important;
  }

  :root .bubble-dot b {
    font-family: var(--viz-num) !important;
    font-weight: 600 !important;
    letter-spacing: -.04em !important;
  }

  /* ===================================================== priority matrix */

  :root .display-card .priority-metric strong {
    font-family: var(--viz-num) !important;
    font-weight: 560 !important;
    letter-spacing: -.04em !important;
  }

  :root .display-card .priority-track {
    height: 6px !important;
    min-height: 6px !important;
    border-radius: 3px !important;
  }
}

@layer ku {
  /* Columns of numbers align on tabular figures. */
  :root :is(.rate-chart-value, .equity-metric > b, .equity-records, .segment-signal-value, .bar-value, .viz-legend b, .viz-legend em,
    .viz-channel-row strong, .viz-channel-row em, .funnel-rate-value, .funnel-drop-value, .viz-heat-cell, .heatmap-cell,
    .employment-reason-row > b, .employment-reason-label span, .viz-trend-grid b, .viz-trend-end, .viz-delta, .mag-value small,
    .contact-depth-legend b, .contact-depth-stack > span, .satisfaction-gauge-breakdown b) {
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
  }
}

/* ============================================== info (i) tooltip: sections */
@layer ku {
  :root .chart-tooltip.is-chart-info-tooltip:not(.is-alumni-score-tooltip) {
    padding: 6px 6px 6px 18px !important;
    font-weight: 400 !important;
  }

  :root .chart-tooltip .chart-info-body {
    display: grid !important;
    gap: 16px !important;
    max-height: min(68vh, 520px) !important;
    padding: 12px 14px 12px 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    white-space: normal !important;
    font-weight: 400 !important;
  }

  :root .chart-tooltip .chart-info-section {
    display: grid !important;
    gap: 6px !important;
  }

  :root .chart-tooltip .chart-info-section + .chart-info-section {
    padding-top: 14px !important;
    border-top: 1px solid var(--viz-grid, #e3e6ec) !important;
  }

  :root .chart-tooltip .chart-info-section h4 {
    margin: 0 !important;
    color: var(--brand-strong, var(--ink-3, #6b7380)) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
  }

  :root .chart-tooltip .chart-info-section p {
    margin: 0 !important;
    color: var(--ink-2, #3a414d) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* The first section is the plain-language summary, so it reads a notch larger. */
  :root .chart-tooltip .chart-info-section:first-child p {
    color: var(--ink, #14181f) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  :root .chart-tooltip .chart-info-section ul {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  :root .chart-tooltip .chart-info-section li {
    position: relative !important;
    padding-left: 14px !important;
    color: var(--ink-2, #3a414d) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  :root .chart-tooltip .chart-info-section li::before {
    content: "" !important;
    position: absolute !important;
    top: .62em !important;
    left: 1px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--ink-4, #9aa1ad) !important;
  }
}

@layer ku {
  /* Pathways heatmap: rows hug their cells; labels centre on the row. */
  :root .pathway-heatmap .heatmap-row { align-items: center !important; }

  :root .pathway-heatmap .heatmap-row-label {
    min-height: 34px !important;
    padding: 2px 12px 2px 0 !important;
    line-height: 1.25 !important;
  }

  :root .pathway-heatmap .heatmap-cell {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }
}

@layer ku {
  /* Cards stretched to a taller neighbour keep their content at the top. */
  :root .field-tab-panel .display-card,
  :root #employment-detail .display-card { align-content: start !important; }
}

@layer ku {
  :root :is(.viz-legend li, .viz-channel-row).is-chart-item-dimmed { opacity: .42; }
  :root :is(.viz-legend li, .viz-channel-row).is-chart-item-focused { background: var(--surface-2); }

  @media (max-width: 640px) {
    :root .viz-mix-figure { flex-direction: column; align-items: stretch; }
    :root .viz-mix-figure .viz-donut { align-self: center; }
    :root .viz-contact-coverage { flex-direction: column; align-items: stretch; }
    :root .viz-contact-coverage .viz-rings { align-self: center; }
    :root .viz-trend-head { flex-direction: column; align-items: flex-start; }
    :root .viz-trend-x span:nth-child(even) { visibility: hidden; }
  }
}

@layer ku {
  /* Rate-only rankings (UG employers / titles): two side-by-side columns. */
  :root .rate-only-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 36px;
  }

  @media (max-width: 760px) {
    :root .employment-chart-trio { grid-template-columns: minmax(0, 1fr) !important; }
    :root .rate-only-columns { grid-template-columns: minmax(0, 1fr); }
    :root .rate-only-columns > .rate-chart + .rate-chart > .top-further-chart-head { display: none !important; }
  }

  :root .top-further-chart.rate-only .rate-chart-row,
  :root .top-further-chart.rate-only .top-further-chart-head {
    grid-template-columns: minmax(0, 1.8fr) minmax(96px, 1fr) !important;
  }

  :root .top-further-chart.rate-only .top-match-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  :root .top-further-chart.rate-only .top-further-chart-head > span:first-child { padding-left: 28px; }

  :root .rate-chart-rank {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 6px;
    color: var(--ink-3);
    background: var(--surface-2);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  :root .top-further-chart.rate-only .rate-chart-meta > span { padding-left: 28px; }
}

@layer ku {
  /* Search fields: a quiet focus state — tinted border and a faint halo. */
  :root :is(.chart-search, .block-search) input:focus,
  :root :is(.chart-search, .block-search) input:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line)) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(10, 88, 202, .07) !important;
  }

  /* GPA heatmap: the fill is the data, so focus never greys a cell out. */
  :root .viz-heat-cell.is-chart-item-dimmed:not(.heatmap-cell-empty),
  :root .viz-heat-cell.is-chart-item-focused:not(.heatmap-cell-empty) {
    color: var(--heat-ink, var(--ink)) !important;
    background: var(--heat-fill, var(--surface-2)) !important;
  }

  /* Hover crosshair: the cell's row and column stay, everything else fades. */
  :root .gpa-outcome-heatmap .viz-heat-cell,
  :root .gpa-outcome-heatmap .heatmap-axis-label {
    transition: opacity 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease) !important;
  }

  :root .gpa-outcome-heatmap.is-crosshair .viz-heat-cell:not(.is-heat-cross) { opacity: .38 !important; }

  :root .gpa-outcome-heatmap.is-crosshair .heatmap-axis-label:is(.heatmap-column-label, .heatmap-row-label):not(.is-heat-cross) { opacity: .5 !important; }

  :root .gpa-outcome-heatmap .heatmap-axis-label.is-heat-cross { color: var(--ink) !important; }

  :root .gpa-outcome-heatmap .viz-heat-cell.is-heat-active,
  :root .gpa-outcome-heatmap .viz-heat-cell:not(.heatmap-cell-empty):hover {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    transform: scale(1.06) !important;
    box-shadow: 0 0 0 2px var(--surface), 0 10px 22px -8px rgba(16, 24, 40, .45) !important;
  }
}

@layer ku {
  /* PG degree share: of PG blue, at KU violet, other universities amber. */
  :root .degree-rate-chart:not(.is-current) .rate-chart-row > :nth-child(6),
  :root .degree-rate-chart:not(.is-current) .rate-chart-row > :nth-child(7) { --hue: var(--hue-amber) !important; }
}

@layer ku {
  /* ---- no stray horizontal scrollbar on wide screens; roomier bar columns ---- */
  @media (min-width: 761px) {
    :root .equity-chart,
    :root .display-card .equity-chart { overflow-x: clip !important; }
  }

  :root .rate-chart { --cell-gap: 12px; }

  :root .display-card .equity-chart-row,
  :root .display-card .equity-chart-head { column-gap: 14px !important; }

  /* ---- Employed-by row: batch/semester beside major/heatmap ---- */
  .employment-who-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    grid-column: 1 / -1;
    align-items: start;
  }
  .employment-who-grid > .display-card-stack { gap: 16px !important; }
  @media (max-width: 980px) { .employment-who-grid { grid-template-columns: 1fr; } }

  /* ---- Comparison-style GPA heatmap: solid bands, tinted label tiles ---- */
  :root .gpa-outcome-heatmap .heatmap-row {
    grid-template-columns: minmax(104px, 150px) repeat(var(--cols), minmax(0, 1fr)) !important;
  }
  :root .gpa-outcome-heatmap .heatmap-row { gap: 6px !important; }
  :root .gpa-outcome-heatmap { gap: 6px !important; }
  :root .gpa-outcome-heatmap .viz-heat-cell {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  }
  :root .gpa-outcome-heatmap .viz-heat-cell.heatmap-cell-empty {
    color: var(--ink-4) !important;
    text-shadow: none;
  }
  :root .gpa-outcome-heatmap .heatmap-row-label {
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
  }
  :root .gpa-outcome-heatmap .heatmap-column-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    font-weight: 620 !important;
    text-align: center !important;
  }
  :root .viz-heat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  :root .viz-heat-chip::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--chip);
  }
}

/* ====================================================== chart tooltip (light)
   The hover card is a light surface with dark ink. The alumni score tooltips
   keep their own dark treatment. */
@layer ku {
  :root .chart-tooltip:not(.is-alumni-score-tooltip):not(.is-alumni-score-guide-tooltip) {
    border: 1px solid var(--viz-grid, #e3e6ec) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    color: var(--ink-2, #3a414d) !important;
    background: var(--surface, #ffffff) !important;
    box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .28), 0 2px 8px -2px rgba(16, 24, 40, .08) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-weight: 500 !important;
  }

  :root .chart-tooltip:not(.is-alumni-score-tooltip):not(.is-alumni-score-guide-tooltip) strong,
  :root .chart-tooltip:not(.is-alumni-score-tooltip):not(.is-alumni-score-guide-tooltip) b {
    color: var(--ink, #14181f) !important;
  }

  :root .chart-tooltip:not(.is-alumni-score-tooltip):not(.is-alumni-score-guide-tooltip) .chart-tooltip-text {
    color: var(--ink, #14181f);
    font-weight: 600;
  }

  /* Trend block */
  :root .chart-tooltip .chart-tooltip-trend {
    border-top-color: var(--viz-grid, #e3e6ec) !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-head > span:first-child,
  :root .chart-tooltip .chart-tooltip-trend-values small,
  :root .chart-tooltip .chart-tooltip-trend-endpoint small,
  :root .chart-tooltip .chart-tooltip-trend-change span {
    color: var(--ink-3, #6b7380) !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-values small,
  :root .chart-tooltip .chart-tooltip-trend-endpoint small {
    font-size: 9px;
  }

  :root .chart-tooltip .chart-tooltip-trend-head strong,
  :root .chart-tooltip .chart-tooltip-trend-endpoint strong {
    font-family: var(--viz-num-sm, inherit);
  }

  :root .chart-tooltip .chart-tooltip-trend-change {
    border-radius: 8px;
    background: var(--surface-2, #f4f5f8) !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-change.is-positive strong { color: var(--viz-good-ink, #14804a) !important; }
  :root .chart-tooltip .chart-tooltip-trend-change.is-negative strong { color: var(--viz-bad-ink, #c43232) !important; }

  :root .chart-tooltip .chart-tooltip-trend-range {
    border-color: var(--viz-grid, #e3e6ec) !important;
    border-radius: 10px;
    background: var(--surface-2, #f4f5f8) !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-range-track i::before,
  :root .chart-tooltip .chart-tooltip-trend-range-track i::after {
    border-color: var(--surface, #fff) !important;
    background: var(--ink-3, #6b7380) !important;
    box-shadow: 0 0 0 1px var(--ink-3, #6b7380) !important;
  }

  /* Trend chart, drawn like the forecast charts. */
  :root .chart-tooltip .chart-tooltip-trend-svg {
    width: 100% !important;
    height: auto !important;
    font-family: var(--font-mono, ui-monospace, monospace);
  }

  :root .chart-tooltip .chart-tooltip-trend-grid {
    stroke: var(--viz-grid, #e3e6ec);
    stroke-width: 1;
    stroke-dasharray: 1.5 4;
    stroke-linecap: round;
  }

  :root .chart-tooltip .chart-tooltip-trend-grid.is-base {
    stroke: var(--line-strong, #cdd2da);
    stroke-dasharray: none;
  }

  :root .chart-tooltip .chart-tooltip-trend-tick {
    fill: var(--ink-3, #6b7380);
    font-size: 8.5px;
    letter-spacing: -.02em;
  }

  :root .chart-tooltip .chart-tooltip-trend-area { stroke: none; }

  :root .chart-tooltip .chart-tooltip-trend-line,
  :root .chart-tooltip .chart-tooltip-trend-glow {
    fill: none;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  :root .chart-tooltip .chart-tooltip-trend-line,
  :root .chart-tooltip .chart-tooltip-trend-glow {
    stroke: var(--trend-stroke, var(--ink-3, #6b7380)) !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-glow {
    stroke-width: 6;
    stroke-opacity: .35;
  }

  :root .chart-tooltip .chart-tooltip-trend-current-guide {
    stroke-width: 1.25;
    stroke-opacity: .7;
    stroke-dasharray: 2 3;
  }

  :root .chart-tooltip .chart-tooltip-forecast-line {
    stroke: var(--ink-3, #6b7380) !important;
    stroke-width: 2.75 !important;
    stroke-dasharray: 1 6 !important;
    stroke-linecap: round !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-svg circle {
    fill: var(--surface, #fff) !important;
    stroke: var(--dot, var(--ink-3, #6b7380)) !important;
    stroke-width: 1.75 !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-svg circle.is-current {
    fill: var(--dot, var(--ink-3, #6b7380)) !important;
    stroke: var(--surface, #fff) !important;
    stroke-width: 2 !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-svg circle.is-forecast {
    fill: var(--surface, #fff) !important;
    stroke: var(--ink-3, #6b7380) !important;
    stroke-width: 2.5 !important;
  }

  /* Buttons: quiet pills on the light card, one dark primary action. */
  :root .chart-tooltip .chart-tooltip-review-button,
  :root .chart-tooltip .chart-tooltip-forecast-button,
  :root .chart-tooltip [data-chart-tooltip-review],
  :root .chart-tooltip [data-chart-tooltip-apply-filter] {
    border: 1px solid var(--line, #dfe3ea) !important;
    border-radius: var(--r-pill, 999px) !important;
    color: var(--ink, #14181f) !important;
    background: var(--surface-2, #f4f5f8) !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  :root .chart-tooltip .chart-tooltip-review-button:hover,
  :root .chart-tooltip .chart-tooltip-forecast-button:hover,
  :root .chart-tooltip [data-chart-tooltip-review]:hover,
  :root .chart-tooltip [data-chart-tooltip-apply-filter]:hover {
    border-color: var(--line-strong, #cdd2da) !important;
    background: var(--surface-3, #eceef3) !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-button.is-primary {
    border-color: var(--ink, #14181f) !important;
    color: #ffffff !important;
    background: var(--ink, #14181f) !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-button.is-primary:hover {
    background: var(--ink-2, #2a303a) !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-controls {
    border-top-color: var(--viz-grid, #e3e6ec) !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-controls.has-error > span { color: var(--viz-bad-ink, #c43232) !important; }
}

/* ============================================ chart tooltip: layout and type
   Title, headline value, description and detail read as separate tiers; the
   trend, forecast and actions sit below as quiet sections. */
@layer ku {
  :root .chart-tooltip:not(.is-alumni-score-tooltip):not(.is-alumni-score-guide-tooltip) {
    gap: 12px !important;
    min-width: 232px !important;
    padding: 14px 16px !important;
    line-height: 1.4 !important;
  }

  :root .chart-tooltip .chart-tooltip-structured {
    display: grid !important;
    gap: 3px !important;
    white-space: normal !important;
  }

  :root .chart-tooltip .chart-tooltip-title {
    color: var(--ink-3, #6b7380) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    line-height: 1.3 !important;
  }

  :root .chart-tooltip .chart-tooltip-metric {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 8px !important;
  }

  :root .chart-tooltip .chart-tooltip-value {
    font-family: var(--viz-num-sm, inherit) !important;
    font-size: 26px !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 650 !important;
    letter-spacing: -.025em !important;
    line-height: 1.15 !important;
  }

  :root .chart-tooltip .chart-tooltip-desc {
    color: var(--ink-2, #3a414d) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  :root .chart-tooltip .chart-tooltip-detail {
    justify-self: start !important;
    margin-top: 5px !important;
    border-radius: 7px !important;
    padding: 3px 8px !important;
    color: var(--ink-3, #6b7380) !important;
    background: var(--surface-2, #f4f5f8) !important;
    font-size: 11.5px !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 500 !important;
  }

  /* Trend */
  :root .chart-tooltip .chart-tooltip-trend {
    gap: 9px !important;
    margin-top: 0 !important;
    padding-top: 12px !important;
    font-size: 12px !important;
  }

  :root .chart-tooltip .chart-tooltip-trend.is-loading,
  :root .chart-tooltip .chart-tooltip-trend-empty {
    color: var(--ink-3, #6b7380) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-head > span:first-child {
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-values small,
  :root .chart-tooltip .chart-tooltip-trend-endpoint small {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-head strong { font-size: 15px; }

  :root .chart-tooltip .chart-tooltip-trend-change {
    padding: 7px 10px !important;
  }

  :root .chart-tooltip .chart-tooltip-trend-change strong { font-size: 13px; }

  :root .chart-tooltip .chart-tooltip-trend-endpoint strong { font-size: 12px; }

  /* Actions: two equal buttons */
  :root .chart-tooltip .chart-tooltip-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  :root .chart-tooltip .chart-tooltip-review-button,
  :root .chart-tooltip .chart-tooltip-forecast-button {
    align-self: stretch !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-button.is-primary {
    color: var(--on-dark, #ffffff) !important;
  }

  /* Forecast */
  :root .chart-tooltip .chart-tooltip-forecast-controls {
    gap: 10px !important;
    padding-top: 12px !important;
    font-size: 12px !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-controls.is-loading > span {
    color: var(--ink-3, #6b7380) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-meta {
    font-size: 11.5px !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-meta span { color: var(--ink-3, #6b7380); }

  :root .chart-tooltip .chart-tooltip-forecast-result-grid span {
    padding: 9px 11px !important;
    color: var(--ink-2, #3a414d) !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-result small,
  :root .chart-tooltip .chart-tooltip-forecast-summary small {
    font-size: 10px !important;
    letter-spacing: .04em !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-result-grid strong { font-size: 14px; }

  :root .chart-tooltip .chart-tooltip-forecast-summary p {
    color: var(--ink-2, #3a414d) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  :root .chart-tooltip .chart-tooltip-forecast-actions .is-primary { flex: 1 1 100%; }
  :root .chart-tooltip .chart-tooltip-forecast-actions .chart-tooltip-forecast-button:not(.is-primary) { flex: 1 1 0; }
}

@layer ku {
  /* Pathways heatmap: soft single-hue tiles, quiet empty cells, row focus. */
  :root .pathway-heatmap .heatmap-row {
    gap: 5px !important;
    padding: 2px 0 !important;
    border-radius: 10px;
    transition: background var(--fast) var(--ease);
  }

  :root .pathway-heatmap .heatmap-row:not(.heatmap-header-row):hover {
    background: var(--surface-2);
  }

  :root .pathway-heatmap .heatmap-row-label {
    color: var(--ink-2) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
  }

  :root .pathway-heatmap .heatmap-row:hover .heatmap-row-label { color: var(--ink) !important; }

  :root .pathway-heatmap .heatmap-column-label {
    color: var(--ink-3) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  :root .pathway-heatmap .heatmap-cell {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
  }

  :root .pathway-heatmap .heatmap-cell.heatmap-cell-empty {
    background: transparent !important;
    position: relative;
  }

  :root .pathway-heatmap .heatmap-cell.heatmap-cell-empty::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hairline);
    transform: translate(-50%, -50%);
  }

  :root .pathway-heatmap .heatmap-cell:not(.heatmap-cell-empty):hover {
    transform: none !important;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink) !important;
  }

  :root .pathway-heat-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    color: var(--ink-3);
    font-size: 11px;
  }

  :root .pathway-heat-scale {
    display: inline-block;
    width: 140px;
    height: 8px;
    border-radius: 4px;
  }
}

@layer ku {
  /* Single-metric ranked charts span the card like the other bar charts. */
  :root .top-further-chart.full-width .rate-chart-row,
  :root .top-further-chart.full-width .top-further-chart-head {
    grid-template-columns: minmax(130px, 1.35fr) minmax(160px, 2.2fr) !important;
  }
}