/*
 * KU Alumni design system — outcome dashboards (Employment, Unemployment,
 * Further education and the employer / job-title focus pages).
 *
 * Declarations live in the `ku` cascade layer with !important so they outrank
 * the legacy stylesheet's important rules. Properties that charts set inline
 * (widths, grid templates, per-mark colours) are never overridden here.
 */

@layer ku {
  .employment-block-grid > .display-card[hidden] {
    display: none !important;
  }

  /* ------------------------------------------------------------ page hero */

  #fields > .field-hero,
  #employment-detail > .field-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.5fr) !important;
    align-items: stretch !important;
    gap: 28px !important;
    min-height: 0 !important;
    margin: 0 0 20px !important;
    padding: 28px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    color: var(--ink) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    box-shadow: var(--shadow-2) !important;
    overflow: hidden !important;
  }

  #fields > .field-hero:not(.field-hero-with-funnel),
  #employment-detail > .field-hero:not(:has(.field-hero-funnel)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .field-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .field-kicker {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 6px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #fields > .field-hero h2,
  #employment-detail > .field-hero h2,
  .field-hero h1 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere;
  }

  .field-hero-copy p,
  #employmentDetailSubtitle {
    max-width: 52ch !important;
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .field-hero-jumps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .field-hero-jumps:empty {
    display: none !important;
  }

  .field-hero-jump {
    height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 540 !important;
    transform: none !important;
  }

  .field-hero-jump:hover {
    color: var(--on-dark) !important;
    border-color: var(--ink) !important;
    background: var(--ink) !important;
  }

  .field-tab-panel .ai-analytics-mount,
  .field-tab-panel .panel-head,
  .dashboard-section-head,
  .field-records-panel {
    scroll-margin-top: calc(var(--topbar-h) + 84px) !important;
  }

  .field-hero-funnel,
  .field-stat-strip {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .field-stat-strip:empty {
    display: none !important;
  }

  /* Readiness path (funnel) */

  .funnel-rate-chart {
    display: grid !important;
    gap: 2px !important;
  }

  .funnel-info-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }

  /* The title takes the free space so the copy button and info icon stay paired on the right. */
  .funnel-info-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: auto !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    letter-spacing: -.005em !important;
  }

  .funnel-rate-head,
  .funnel-rate-head strong,
  .funnel-rate-head span {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .funnel-rate-row {
    padding: 8px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .funnel-rate-meta strong,
  .funnel-rate-row .funnel-rate-meta strong {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 580 !important;
  }

  .funnel-rate-meta span,
  .funnel-rate-meta small,
  .funnel-rate-secondary {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 450 !important;
  }

  .funnel-rate-track {
    height: 10px !important;
    border-radius: 5px !important;
    background: var(--track) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .funnel-rate-track > i:not(.funnel-rate-overlay) {
    border-radius: 5px !important;
    background: var(--funnel-color, var(--series-1)) !important;
  }

  .funnel-rate-overlay {
    border-radius: 5px !important;
    background: var(--ink) !important;
    opacity: .82 !important;
  }

  .funnel-rate-value {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 620 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .funnel-drop-value,
  .funnel-drop-placeholder {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    min-height: 34px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    text-align: left !important;
  }

  .funnel-drop-value span {
    color: var(--ink) !important;
  }

  .funnel-drop-value small {
    color: var(--ink-3) !important;
    font-size: 10.5px !important;
    font-weight: 450 !important;
  }

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

  /* ------------------------------------------------------- page sections */

  .field-tab-panel > .panel,
  #employment-detail > .panel {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .field-tab-panel > .panel > .panel-head,
  #employment-detail > .panel > .panel-head {
    align-items: center !important;
    margin: 8px 0 14px !important;
    padding: 0 4px !important;
  }

  .field-tab-panel > .panel > .panel-head h2,
  #employment-detail > .panel > .panel-head h2 {
    font-size: 22px !important;
    font-weight: 560 !important;
    letter-spacing: -.02em !important;
  }

  /* Section heading: the title, with its one-line description beneath. */
  .dashboard-section-head {
    grid-column: 1 / -1 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 36px 4px 6px;
    padding: 0;
  }

  .dashboard-section-head h3 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
    line-height: 1.2 !important;
  }

  .dashboard-section-head p {
    max-width: 72ch;
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 13.5px !important;
    font-weight: 450 !important;
    line-height: 1.5 !important;
  }

  .display-grid,
  .drilldown-grid {
    gap: 16px !important;
    margin: 0 0 16px !important;
  }

  .employment-block-grid {
    gap: 16px !important;
    margin: 12px 0 16px !important;
  }

  .employment-chart-trio,
  .display-card-stack {
    gap: 16px !important;
  }

  /* Chart cards */

  .field-tab-panel .display-card,
  #employment-detail .display-card,
  #quality .display-card {
    min-height: 0 !important;
    padding: 20px 22px 22px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    transition: box-shadow 200ms var(--ease) !important;
  }

  .field-tab-panel .display-card:hover,
  #employment-detail .display-card:hover {
    background: var(--surface) !important;
    box-shadow: var(--shadow-2) !important;
  }

  .display-card > h3,
  .chart-card-head > h3 {
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
  }

  .chart-card-head {
    margin: 0 0 14px !important;
  }

  .block-map-section {
    margin: 0 !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--hairline) !important;
    background: transparent !important;
  }

  .block-map-section + .block-map-section {
    margin-top: 18px !important;
  }

  .block-map-section > .chart-card-head h4,
  .block-map-section > h4 {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  /* Satisfaction next to the outcome mix */

  .drilldown-grid > .display-card:has(> #fieldUniversitySatisfaction),
  .drilldown-grid > .display-card:has(> #employmentDetailUniversitySatisfaction) {
    order: 2 !important;
    grid-column: span 1 !important;
  }

  .drilldown-grid > .display-card:has(> #fieldEmploymentOutcomeMix) {
    order: 1 !important;
    grid-column: span 3 !important;
  }

  .drilldown-grid > .display-card:has(> #fieldEmploymentLocalEquity) {
    order: 3 !important;
  }

  /* Satisfaction gauge */

  .satisfaction-gauge {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .satisfaction-gauge .employment-satisfaction-head {
    display: none !important;
  }

  .satisfaction-gauge .employment-satisfaction-track {
    position: relative !important;
    width: min(100%, 240px) !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    cursor: pointer;
  }

  .satisfaction-gauge-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .satisfaction-gauge-base,
  .satisfaction-gauge-fill {
    fill: none;
    stroke-linecap: round;
    stroke-width: 16;
  }

  .satisfaction-gauge-base {
    stroke: var(--track);
  }

  .satisfaction-gauge-fill {
    transition: stroke-dasharray 900ms var(--ease-out);
  }

  .satisfaction-gauge-readout {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    justify-items: center;
    gap: 0;
  }

  .satisfaction-gauge-readout strong {
    color: var(--ink);
    font-size: 30px;
    font-weight: 420;
    line-height: 1.05;
    letter-spacing: -.035em;
  }

  .satisfaction-gauge-readout span {
    color: var(--ink-3);
    font-size: 12px;
  }

  .satisfaction-gauge-breakdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
  }

  .satisfaction-gauge-breakdown li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font-size: 12px;
  }

  .satisfaction-gauge-breakdown i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--series-1);
  }

  .satisfaction-gauge-breakdown .is-neutral i {
    background: #c5cbd4;
  }

  .satisfaction-gauge-breakdown .is-negative i {
    background: var(--series-2);
  }

  .satisfaction-gauge-breakdown b {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .satisfaction-gauge > em {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-style: normal !important;
    text-align: center !important;
  }

  /* ------------------------------------------------------ chart primitives */

  .chart-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }

  .chart-search input,
  .block-search input {
    height: 38px !important;
    padding: 0 14px 0 36px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    background-color: var(--surface-2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b818c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 15px 15px !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 450 !important;
  }

  .chart-search input:focus,
  .block-search input:focus {
    background-color: var(--surface) !important;
  }

  .block-search {
    margin: 0 0 16px !important;
  }

  .chart-search > span,
  .chart-search small,
  .chart-search-note {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

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

  .rate-chart-row,
  .bar-row,
  .contact-method-row,
  .equity-chart-row,
  .internship-risk-reason-row,
  .employment-reason-row {
    padding: 9px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rate-chart > .rate-chart-row + .rate-chart-row,
  .bar-row + .bar-row,
  .contact-method-row + .contact-method-row {
    border-top: 1px solid var(--hairline) !important;
  }

  .rate-chart-meta strong,
  .bar-label strong,
  .bar-label,
  .top-match-label,
  .degree-split-label strong {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
  }

  .rate-chart-meta span,
  .rate-chart-meta small,
  .bar-label span,
  .bar-label small,
  .degree-split-label span {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 450 !important;
  }

  .employment-share-chart-head,
  .share-chart-head,
  .top-match-chart-head,
  .top-further-chart-head,
  .top-internship-chart-head,
  .internship-risk-chart-head,
  .equity-chart-head,
  .employment-reasons-head,
  .contact-depth-head {
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !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,
  .equity-chart-head span {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .rate-chart-track,
  .bar-track,
  .equity-track,
  .priority-track,
  .employment-reason-track,
  .employment-signal-track,
  .internship-risk-reason-track,
  .contact-method-track,
  .degree-split-track,
  .match-track,
  .employment-satisfaction-overall:not(.satisfaction-gauge) .employment-satisfaction-track {
    height: 8px !important;
    min-height: 8px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--track) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .rate-chart-track > i,
  .equity-track > i,
  .priority-track > i,
  .employment-reason-track > i,
  .employment-signal-track > i,
  .internship-risk-reason-track > i,
  .match-track > i,
  .bar-fill,
  .contact-method-track > span {
    border-radius: 4px !important;
    box-shadow: none !important;
  }

  .rate-chart-value,
  .bar-value strong,
  .contact-method-value strong,
  .equity-metric b,
  .priority-metric strong,
  .match-value {
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 620 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .bar-value span,
  .contact-method-value span,
  .priority-metric span {
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .bar-rank {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--ink-3) !important;
    background: var(--surface-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  .sector-majority-tag {
    display: inline-block !important;
    align-self: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 24px !important;
    height: 24px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    text-transform: none !important;
  }

  /* Outcome mix */

  .employment-outcome-summary {
    gap: 12px !important;
    margin: 0 0 16px !important;
  }

  .employment-outcome-summary > div {
    padding: 14px 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .employment-outcome-summary span {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .employment-outcome-summary strong {
    color: var(--ink) !important;
    font-size: 30px !important;
    font-weight: 420 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
  }

  .employment-outcome-summary em {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-style: normal !important;
    font-weight: 450 !important;
  }

  .employment-outcome-stack,
  .contact-depth-stack {
    display: flex !important;
    gap: 3px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .employment-outcome-segment {
    background: var(--outcome-color, var(--series-1)) !important;
  }

  .employment-outcome-segment {
    color: #ffffff !important;
  }

  .employment-outcome-segment,
  .contact-depth-stack > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .employment-outcome-legend,
  .contact-depth-legend {
    gap: 8px 18px !important;
    margin-top: 12px !important;
  }

  .employment-outcome-legend-item {
    padding: 8px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .employment-outcome-legend-item strong {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 560 !important;
  }

  .employment-outcome-legend-item span,
  .employment-outcome-legend-item b {
    color: var(--ink-2) !important;
    font-size: 12.5px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .employment-outcome-legend-item i,
  .contact-depth-legend i,
  .degree-split-legend i,
  .contact-method-label i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
  }

  .employment-outcome-subchart,
  .employment-reasons,
  .employment-signal-card,
  .contact-depth-panel,
  .internship-risk-reason-panel {
    padding: 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .employment-outcome-subchart-head,
  .employment-reasons-head,
  .internship-risk-reason-head,
  .contact-depth-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .employment-outcome-subchart-head strong,
  .employment-reasons-head strong,
  .internship-risk-reason-head strong,
  .contact-depth-head strong {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }

  .employment-outcome-subchart-head span,
  .employment-reasons-head span,
  .internship-risk-reason-head span,
  .contact-depth-head span {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .employment-reason-label,
  .employment-reason-row strong,
  .internship-risk-reason-label {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
  }

  .employment-reason-row span,
  .employment-reason-row b,
  .internship-risk-reason-row span {
    color: var(--ink-2) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .employment-reason-row {
    padding: 6px 0 !important;
  }

  .employment-reason-track > i {
    background: var(--reason-color, var(--series-1)) !important;
  }

  /* Segment equity table */

  .equity-chart {
    gap: 0 !important;
    overflow-x: auto;
  }

  .equity-chart-row {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
  }

  .equity-chart-row:last-child {
    border-bottom: 0 !important;
  }

  .equity-segment strong {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .equity-records,
  .segment-signal-value {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 560 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .equity-track > i {
    background: var(--equity-color, var(--series-1)) !important;
  }

  /* Employer and title tiles (block charts) */

  .map-bar-chart {
    gap: 10px !important;
  }

  .map-bar-rows {
    gap: 10px !important;
  }

  .map-bar-row {
    position: relative !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 12px 12px 12px 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease) !important;
  }

  .map-bar-row:hover,
  .map-bar-row:focus-visible {
    background: var(--surface) !important;
    box-shadow: var(--shadow-2) !important;
    transform: translateY(-2px) !important;
  }

  .map-bar-label strong {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 580 !important;
  }

  .map-bar-label span,
  .map-bar-label small {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 450 !important;
  }

  .map-radial-meter {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 44px !important;
    width: auto !important;
    height: 30px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: #ffffff !important;
    background: var(--meter-color, var(--series-1)) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .map-radial-meter::before,
  .map-radial-meter::after {
    display: none !important;
  }

  .map-radial-meter * {
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
  }

  .map-bar-group {
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-top: 1px dashed var(--line) !important;
    background: transparent !important;
  }

  .map-bar-group:first-child {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .map-bar-group-label,
  .map-bar-group-label button,
  button.map-bar-group-label {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    text-transform: none !important;
  }

  button.map-bar-group-label {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .map-bar-group-tags span,
  .map-bar-group-tags b,
  .map-bar-group-tags strong {
    height: 24px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  .duo-block-note,
  .map-bar-chart + p,
  .map-bar-more {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .block-chart-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 50% !important;
    color: var(--ink-2) !important;
    background: var(--surface-2) !important;
  }

  .block-chart-toggle:hover {
    background: var(--surface-3) !important;
  }

  /* Heatmaps */

  .heatmap-scroll {
    padding: 2px !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    background: transparent !important;
  }

  .heatmap {
    gap: 4px !important;
    background: transparent !important;
  }

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

  .heatmap-cell {
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--heatmap-text, #ffffff) !important;
    background: var(--heatmap-fill, var(--surface-3)) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 620 !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: none !important;
  }

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

  .heatmap-axis-label,
  .heatmap-corner,
  .heatmap-column-label,
  .heatmap-row-label {
    border: 0 !important;
    color: var(--ink-2) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    text-transform: none !important;
  }

  .heatmap-row-label strong,
  .gpa-heatmap-label strong {
    color: var(--ink) !important;
    font-weight: 600 !important;
  }

  .heatmap-row-label small,
  .gpa-heatmap-label small,
  .gpa-heatmap-label span {
    color: var(--ink-3) !important;
    font-size: 11px !important;
  }

  .gpa-heatmap-average {
    border-radius: var(--r-pill) !important;
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
  }

  /* Degree split / stacked bars */

  .degree-split-segment.ku,
  .degree-split-legend i.ku {
    background: var(--series-1) !important;
  }

  .degree-split-segment.other,
  .degree-split-legend i.other {
    background: var(--series-2) !important;
  }

  .degree-split-segment.current-ku,
  .degree-split-legend i.current-ku {
    background: var(--series-1) !important;
  }

  .degree-split-segment.current-uae,
  .degree-split-legend i.current-uae {
    background: var(--series-3) !important;
  }

  .degree-split-segment.current-outside,
  .degree-split-legend i.current-outside {
    background: var(--series-2) !important;
  }

  .degree-split-stack {
    gap: 2px !important;
  }

  .degree-split-segment {
    border-radius: 3px !important;
  }

  .degree-split-legend {
    color: var(--ink-2) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    text-transform: none !important;
  }

  /* Contact methods */

  .contact-method-label strong {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 560 !important;
  }

  .contact-depth-legend {
    color: var(--ink-2) !important;
    font-size: 12px !important;
  }

  /* Action priorities */

  .priority-list {
    gap: 10px !important;
  }

  .priority-row {
    align-items: center !important;
    padding: 14px 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .priority-copy strong {
    color: var(--ink) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
  }

  .priority-copy span,
  .priority-copy p {
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
  }

  .priority-track > i {
    background: var(--priority-color, var(--series-2)) !important;
  }

  .priority-metric strong {
    font-size: 18px !important;
    font-weight: 560 !important;
  }

  .table-action {
    height: 32px !important;
    padding: 0 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .table-action:hover {
    color: var(--on-dark) !important;
    border-color: var(--ink) !important;
    background: var(--ink) !important;
  }

  /* Signals and internship risk */

  .employment-signal-grid,
  .unemployment-signal-reason-grid,
  .employment-signal-reason-grid {
    gap: 12px !important;
  }

  .employment-signal-track > i {
    background: var(--signal-color, var(--series-1)) !important;
  }

  .internship-risk-reason-track > i {
    background: var(--reason-color, var(--series-2)) !important;
  }

  .employment-signal-rates {
    gap: 12px !important;
  }

  .employment-signal-card {
    display: grid !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 14px 16px !important;
  }

  .employment-signal-card > span {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .employment-signal-card > strong {
    color: var(--ink) !important;
    font-size: 26px !important;
    font-weight: 420 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }

  .employment-signal-card > em {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-style: normal !important;
    font-weight: 450 !important;
  }

  /* Focus page: satisfaction beside the segment table */

  #employmentDetailBlockGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #employmentDetailBlockGrid > * {
    grid-column: 1 / -1 !important;
  }

  #employmentDetailBlockGrid > #employmentDetailUniversitySatisfactionCard:not([hidden]) {
    grid-column: span 1 !important;
  }

  #employmentDetailBlockGrid > #employmentDetailUniversitySatisfactionCard:not([hidden]) + #employmentDetailLocalEquityCard {
    grid-column: span 3 !important;
  }

  @media (max-width: 1180px) {
    #employmentDetailBlockGrid > #employmentDetailUniversitySatisfactionCard,
    #employmentDetailBlockGrid > #employmentDetailUniversitySatisfactionCard + #employmentDetailLocalEquityCard {
      grid-column: 1 / -1 !important;
    }
  }

  /* Records panels */

  .field-records-panel.record-table-panel {
    margin: 20px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden !important;
  }

  .record-table-panel-head {
    align-items: center !important;
    margin: 0 !important;
    padding: 16px 18px 16px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .record-table-panel-head h3 {
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }

  .record-table-panel-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .record-table-toggle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
  }

  .record-table-panel-body:not([hidden]) {
    display: block !important;
    padding: 0 18px 18px !important;
    border-top: 1px solid var(--hairline) !important;
  }

  .record-toolbar {
    margin: 16px 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .record-toolbar label {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    text-transform: none !important;
  }

  .record-toolbar input {
    height: 38px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    font-weight: 450 !important;
  }

  .detail-pane:empty {
    display: none !important;
  }

  /* Empty and callout states */

  .callout.muted {
    padding: 14px 16px !important;
    border: 1px dashed var(--line-strong) !important;
    border-radius: var(--r-md) !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-size: 13px !important;
  }

  /* Employment detail hero extras */

  .employment-detail-sector-tag {
    display: inline-flex !important;
    align-self: flex-start !important;
    height: 26px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  .employment-detail-sector-tag[hidden] {
    display: none !important;
  }

  /* Chart tooltip content */

  .chart-tooltip-trend-svg polyline,
  .chart-tooltip-trend-line {
    stroke: #6da7ec !important;
  }

  .chart-tooltip-forecast-button {
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: var(--r-pill) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .08) !important;
  }

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

  .chart-tooltip button,
  .chart-tooltip [data-chart-tooltip-review],
  .chart-tooltip [data-chart-tooltip-apply-filter] {
    border-radius: var(--r-pill) !important;
  }

  .chart-tooltip [data-chart-tooltip-review],
  .chart-tooltip [data-chart-tooltip-apply-filter] {
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .1) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }

  .chart-tooltip [data-chart-tooltip-review]:hover,
  .chart-tooltip [data-chart-tooltip-apply-filter]:hover {
    background: rgba(255, 255, 255, .2) !important;
  }

  /* Page loading */

  .view.is-page-loading > .page-loading-indicator {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-2) !important;
  }

  /* ------------------------------------------------------------ responsive */

  @media (max-width: 1180px) {
    #fields > .field-hero,
    #employment-detail > .field-hero {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .drilldown-grid > .display-card:has(> #fieldUniversitySatisfaction),
    .drilldown-grid > .display-card:has(> #employmentDetailUniversitySatisfaction),
    .drilldown-grid > .display-card:has(> #fieldEmploymentOutcomeMix) {
      grid-column: 1 / -1 !important;
    }
  }

  @media (max-width: 760px) {
    .funnel-rate-head {
      display: none !important;
    }

    .funnel-rate-row {
      grid-template-columns: minmax(0, 1fr) auto !important;
      row-gap: 6px !important;
    }

    .funnel-rate-row > .funnel-rate-meta {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    .funnel-rate-row > .funnel-rate-value {
      grid-column: 2 !important;
      grid-row: 1 !important;
    }

    .funnel-rate-row > .funnel-rate-track {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
    }

    .funnel-rate-row > .funnel-drop-value,
    .funnel-rate-row > .funnel-drop-placeholder {
      grid-column: 1 / -1 !important;
      grid-row: 3 !important;
      justify-self: start !important;
      flex-direction: row !important;
      align-items: baseline !important;
      gap: 6px !important;
      min-height: 0 !important;
      padding: 3px 9px !important;
    }

    .rate-chart,
    .equity-chart,
    .heatmap-scroll {
      overflow-x: auto !important;
    }

    .employment-share-chart,
    .top-match-chart,
    .top-internship-chart,
    .internship-risk-chart,
    .share-chart {
      min-width: 560px !important;
    }

    .field-tab-panel .display-card:has(.employment-share-chart, .top-match-chart, .top-internship-chart, .internship-risk-chart, .share-chart),
    #employment-detail .display-card:has(.employment-share-chart, .top-match-chart, .top-internship-chart, .internship-risk-chart, .share-chart) {
      overflow-x: auto !important;
    }

    .employment-outcome-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #fields > .field-hero,
    #employment-detail > .field-hero {
      padding: 20px !important;
    }

    .field-tab-panel .display-card,
    #employment-detail .display-card {
      padding: 16px !important;
    }
  }
}

/*
 * Colour variety: each metric column, readiness row, contact channel and tile
 * takes its own solid hue from the categorical palette,
 * so neighbouring values are easy to tell apart.
 */
:root {
  --hue-1: #2a78d6;
  --hue-2: #eb6834;
  --hue-3: #1baf7a;
  --hue-4: #7c5cff;
  --hue-5: #eda100;
  --hue-6: #e2589b;
}

@layer ku {
  .employment-block-grid > .display-card[hidden] {
    display: none !important;
  }

  .rate-chart-row > :nth-child(2) > i,
  .rate-chart-row > :nth-child(2).match-track > i { --hue: var(--hue-1); }
  .rate-chart-row > :nth-child(4) > i { --hue: var(--hue-4); }
  .rate-chart-row > :nth-child(6) > i { --hue: var(--hue-3); }
  .rate-chart-row > :nth-child(8) > i { --hue: var(--hue-2); }
  .rate-chart-row > :nth-child(10) > i { --hue: var(--hue-5); }
  .rate-chart-row > :nth-child(12) > i { --hue: var(--hue-6); }

  .rate-chart-row > .rate-chart-track > i,
  .rate-chart-row > .match-track > i,
  .rate-chart-row > div > .rate-chart-track > i {
    background: var(--hue, var(--hue-1)) !important;
  }

  /* Internship risk: the "unemployed" and "dissatisfied" columns stay warm. */
  .internship-risk-chart .rate-chart-row > :nth-child(6) > i { --hue: var(--hue-6); }
  .internship-risk-chart .rate-chart-row > :nth-child(8) > i { --hue: var(--hue-2); }

  /* Segment table metrics */
  .equity-chart-row > :nth-child(4) .equity-track > i { --hue: var(--hue-5); }
  .equity-chart-row > :nth-child(5) .equity-track > i { --hue: var(--hue-4); }
  .equity-chart-row > :nth-child(6) .equity-track > i { --hue: var(--hue-3); }
  .equity-chart-row > :nth-child(7) .equity-track > i { --hue: var(--hue-1); }
  .equity-chart-row > :nth-child(8) .equity-track > i { --hue: var(--hue-6); }

  .equity-track > i {
    background: var(--hue, var(--hue-1)) !important;
  }

  /* Readiness path: one hue per row */
  .funnel-rate-row:nth-child(1 of .funnel-rate-row) { --hue: var(--hue-1); }
  .funnel-rate-row:nth-child(2 of .funnel-rate-row) { --hue: var(--hue-4); }
  .funnel-rate-row:nth-child(3 of .funnel-rate-row) { --hue: var(--hue-3); }
  .funnel-rate-row:nth-child(4 of .funnel-rate-row) { --hue: var(--hue-2); }
  .funnel-rate-row:nth-child(5 of .funnel-rate-row) { --hue: var(--hue-5); }
  .funnel-rate-row:nth-child(6 of .funnel-rate-row) { --hue: var(--hue-6); }

  .funnel-rate-track > i:not(.funnel-rate-overlay) {
    background: var(--hue, var(--hue-1)) !important;
  }

  .funnel-rate-row .funnel-rate-meta strong::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 8px 1px 0 !important;
    border-radius: 50% !important;
    background: var(--hue, var(--hue-1)) !important;
    vertical-align: middle !important;
  }

  /* Contact channels: one hue per channel */
  .contact-method-row:nth-child(1 of .contact-method-row) { --hue: var(--hue-1); }
  .contact-method-row:nth-child(2 of .contact-method-row) { --hue: var(--hue-3); }
  .contact-method-row:nth-child(3 of .contact-method-row) { --hue: var(--hue-4); }
  .contact-method-row:nth-child(4 of .contact-method-row) { --hue: var(--hue-2); }
  .contact-method-row:nth-child(5 of .contact-method-row) { --hue: var(--hue-5); }

  .contact-method-track > span {
    background: var(--hue, var(--hue-1)) !important;
  }

  .contact-method-label i {
    background: var(--hue, var(--hue-1)) !important;
  }

  /* Ranked bar lists and reason panels cycle through the palette */
  .bar-row:nth-child(6n + 1 of .bar-row),
  .employment-reason-row:nth-child(6n + 1 of .employment-reason-row),
  .internship-risk-reason-row:nth-child(6n + 1 of .internship-risk-reason-row) { --hue: var(--hue-1); }
  .bar-row:nth-child(6n + 2 of .bar-row),
  .employment-reason-row:nth-child(6n + 2 of .employment-reason-row),
  .internship-risk-reason-row:nth-child(6n + 2 of .internship-risk-reason-row) { --hue: var(--hue-2); }
  .bar-row:nth-child(6n + 3 of .bar-row),
  .employment-reason-row:nth-child(6n + 3 of .employment-reason-row),
  .internship-risk-reason-row:nth-child(6n + 3 of .internship-risk-reason-row) { --hue: var(--hue-3); }
  .bar-row:nth-child(6n + 4 of .bar-row),
  .employment-reason-row:nth-child(6n + 4 of .employment-reason-row),
  .internship-risk-reason-row:nth-child(6n + 4 of .internship-risk-reason-row) { --hue: var(--hue-4); }
  .bar-row:nth-child(6n + 5 of .bar-row),
  .employment-reason-row:nth-child(6n + 5 of .employment-reason-row),
  .internship-risk-reason-row:nth-child(6n + 5 of .internship-risk-reason-row) { --hue: var(--hue-5); }
  .bar-row:nth-child(6n + 6 of .bar-row),
  .employment-reason-row:nth-child(6n + 6 of .employment-reason-row),
  .internship-risk-reason-row:nth-child(6n + 6 of .internship-risk-reason-row) { --hue: var(--hue-6); }

  .bar-row:not(.degree-split-row) .bar-fill,
  .employment-reason-track > i,
  .internship-risk-reason-track > i {
    background: var(--hue, var(--hue-1)) !important;
  }

  /* Signal cards */
  .employment-signal-card:nth-child(6n + 1) { --hue: var(--hue-3); }
  .employment-signal-card:nth-child(6n + 2) { --hue: var(--hue-2); }
  .employment-signal-card:nth-child(6n + 3) { --hue: var(--hue-1); }
  .employment-signal-card:nth-child(6n + 4) { --hue: var(--hue-4); }
  .employment-signal-card:nth-child(6n + 5) { --hue: var(--hue-5); }
  .employment-signal-card:nth-child(6n + 6) { --hue: var(--hue-6); }

  .employment-signal-track > i {
    background: var(--hue, var(--hue-1)) !important;
  }

  /* Employer and title tiles: coloured count badges */
  .map-bar-row:nth-child(6n + 1) { --hue: var(--hue-1); }
  .map-bar-row:nth-child(6n + 2) { --hue: var(--hue-2); }
  .map-bar-row:nth-child(6n + 3) { --hue: var(--hue-3); }
  .map-bar-row:nth-child(6n + 4) { --hue: var(--hue-4); }
  .map-bar-row:nth-child(6n + 5) { --hue: var(--hue-5); }
  .map-bar-row:nth-child(6n + 6) { --hue: var(--hue-6); }

  .map-radial-meter {
    background: var(--hue, var(--hue-1)) !important;
    box-shadow: 0 6px 14px -8px var(--hue, var(--hue-1)) !important;
  }

  .map-bar-row:hover {
    border-color: color-mix(in srgb, var(--hue, var(--hue-1)) 35%, transparent) !important;
  }

  /* Satisfaction gauge: green to blue */
  .satisfaction-gauge-breakdown li.is-satisfied i { background: var(--hue-3) !important; }
  .satisfaction-gauge-breakdown li.is-negative i { background: var(--hue-2) !important; }
}

/*
 * Employers & roles (and destination focus): one card, search + view switch in
 * a toolbar, a treemap where tile area follows alumni count, and lane cards
 * whose bars share a single scale.
 */
@layer ku {
  .employment-block-grid > .display-card[hidden] {
    display: none !important;
  }

  .display-card:has(> .block-view-tabs):not([hidden]),
  .employment-block-grid > .display-card:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
  }

  .display-card:has(> .block-view-tabs) > *,
  .employment-block-grid > .display-card > * {
    grid-column: 1 / -1 !important;
  }

  .display-card:has(> .block-view-tabs) > .block-search {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  .display-card > .block-view-tabs {
    grid-column: 2 !important;
  }

  .block-view-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface-2) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .block-view-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .block-view-tab {
    flex: 0 0 auto !important;
    height: 32px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .block-view-tab:hover {
    color: var(--ink) !important;
    background: rgba(13, 15, 20, .05) !important;
  }

  .block-view-tab[aria-selected="true"] {
    color: var(--on-dark) !important;
    background: var(--ink) !important;
    box-shadow: 0 6px 14px -8px rgba(13, 15, 20, .6) !important;
  }

  .display-card:has(> .block-view-tabs) > .block-map-section:not(.is-active-view) {
    display: none !important;
  }

  .display-card:has(> .block-view-tabs) > .block-map-section {
    position: relative !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .display-card:has(> .block-view-tabs) > .block-map-section > .chart-card-head {
    min-height: 28px !important;
    margin: 0 0 10px !important;
  }

  .display-card:has(> .block-view-tabs) > .block-map-section > .chart-card-head h4 {
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
    font-weight: 550 !important;
  }

  /* Uniform magnitude tiles */

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

  .mag-tile {
    --tier: var(--tier-base);
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 8px !important;
    height: 148px !important;
    padding: 14px 16px 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    cursor: pointer;
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms var(--ease) !important;
  }

  .mag-tile:hover,
  .mag-tile:focus-visible {
    border-color: var(--tier) !important;
    box-shadow: var(--shadow-2) !important;
    transform: translateY(-2px) !important;
  }

  .mag-tile-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .mag-rank {
    display: grid !important;
    place-items: center !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .mag-tier {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 24px !important;
    padding: 0 10px 0 8px !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--tier-soft) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  .mag-tier i,
  .mag-legend i {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--tier) !important;
  }

  .mag-name {
    overflow: hidden !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mag-value {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    align-self: end !important;
  }

  .mag-value b {
    color: var(--ink) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  .mag-value small {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .mag-meter {
    display: block !important;
    height: 10px !important;
    border-radius: 5px !important;
    background: var(--track) !important;
    overflow: hidden !important;
  }

  .mag-meter i {
    display: block !important;
    height: 100% !important;
    border-radius: 5px !important;
    background-color: var(--tier) !important;
  }

  .mag-tile.tier-top .mag-meter i {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .32) 0 3px, transparent 3px 7px) !important;
  }

  .tier-top { --tier: #7c5cff; --tier-soft: #ece7ff; }
  .tier-high { --tier: #3b82f6; --tier-soft: #e2edfe; }
  .tier-mid { --tier: #22c08a; --tier-soft: #dcf6ec; }
  .tier-base { --tier: #f4b740; --tier-soft: #fdf1d6; }

  .mag-legend {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    color: var(--ink-2) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
  }

  .mag-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .block-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 16px !important;
    margin-top: 12px !important;
  }

  .block-footer .duo-block-note {
    margin: 0 !important;
  }

  /* Lane cards (grouped views) */

  .lane-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
    gap: 14px !important;
  }

  .lane-card.map-bar-group,
  .lane-card.map-bar-group:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 16px 16px 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
  }

  .lane-card .map-bar-group-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  .map-bar-group-name {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }

  .map-bar-group-name i {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
  }

  .lane-card .map-bar-group-tags {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    gap: 6px 12px !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums !important;
  }

  .lane-card .map-bar-group-tags strong {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-items: flex-start !important;
    border: 0 !important;
    height: auto !important;
    padding: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
  }

  .lane-card .map-bar-group-tags strong small {
    color: var(--ink-3) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 450 !important;
    letter-spacing: 0 !important;
  }

  .lane-card .map-bar-group-tags em {
    display: inline-flex !important;
    align-items: baseline !important;
    height: auto !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-style: normal !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  .lane-card .map-bar-group-tags em span {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 450 !important;
  }

  .lane-share {
    display: block !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: color-mix(in srgb, var(--lane-accent) 14%, var(--track)) !important;
    overflow: hidden !important;
  }

  .lane-share i {
    display: block !important;
    height: 100% !important;
    border-radius: 2px !important;
    background: var(--lane-accent) !important;
  }

  .lane-rows {
    display: grid !important;
    gap: 2px !important;
  }

  .lane-row {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    grid-template-areas: "rank name count" "rank track track" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background-color 140ms var(--ease) !important;
  }

  .lane-row:hover,
  .lane-row:focus-visible {
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .lane-rank {
    grid-area: rank !important;
    align-self: start !important;
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    color: var(--ink-3) !important;
    background: var(--surface) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    box-shadow: inset 0 0 0 1px var(--hairline) !important;
  }

  .lane-name {
    grid-area: name !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lane-count {
    grid-area: count !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .lane-count b {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  .lane-count small {
    min-width: 38px !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    text-align: right !important;
  }

  .lane-track {
    grid-area: track !important;
    display: block !important;
    height: 7px !important;
    border-radius: 4px !important;
    background: var(--track) !important;
    overflow: hidden !important;
  }

  .lane-track i {
    display: block !important;
    height: 100% !important;
    border-radius: 4px !important;
    background: var(--lane-accent) !important;
  }

  .lane-more {
    margin: 0 !important;
    padding: 0 8px !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  @media (max-width: 760px) {
    .display-card:has(> .block-view-tabs),
    .employment-block-grid > .display-card {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .display-card:has(> .block-view-tabs) > .block-search,
    .display-card > .block-view-tabs {
      grid-column: 1 !important;
    }

    .display-card > .block-view-tabs {
      justify-self: start !important;
      max-width: 100% !important;
      margin-top: 10px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .treemap-tile {
      animation: none !important;
    }
  }
}

/* Job Offer Signals: stat tiles stack beside the rejection reasons instead of
   leaving half the card empty. */
@layer ku {
  .unemployment-signals {
    display: grid !important;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .unemployment-signals > .unemployment-signal-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 12px !important;
  }

  .unemployment-signals > .unemployment-signal-reason-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  @media (max-width: 900px) {
    .unemployment-signals {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .unemployment-signals > .unemployment-signal-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 560px) {
    .unemployment-signals > .unemployment-signal-summary {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}