/*
 * KU Alumni design system — Home view.
 *
 * An immersive dark stage for the realistic globe. Overlays are dark frosted
 * panels with white type; the employment card is the one bright surface.
 * All fills are solid colours. Moving to another page slides Home up and
 * out of view (stage.css); tool windows can open over it.
 */

:root {
  --space: #04070f;
  --hglass: rgba(12, 16, 27, .52);
  --hglass-strong: rgba(12, 16, 27, .62);
  --hline: rgba(255, 255, 255, .09);
  --hline-strong: rgba(255, 255, 255, .16);
  --hink: #ffffff;
  --hink-2: rgba(255, 255, 255, .76);
  --hink-3: rgba(255, 255, 255, .54);
  --hink-4: rgba(255, 255, 255, .34);
  --hfill: rgba(255, 255, 255, .07);
  --hfill-strong: rgba(255, 255, 255, .12);
  /* Ink and paper for the bright surfaces on the stage (the employment
     card, active pills): fixed, independent of the page theme. */
  --hdark: #0d0f14;
  --hdark-2: #474d58;
  --hdark-3: #7b818c;
  --hpaper-2: #eef0f3;
  --level: #a98fff;
  --level-strong: #8c6cf7;
  --hshadow: 0 24px 60px -28px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .25);
  /* The ease behind iOS sheet and widget motion: fast out, long settle. */
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
}

/* First in <main> at z-index 0; stage.css hides it while a page is open. */
#home.view,
#home.view.active {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--hink);
  background: var(--space);
  animation: home-enter 700ms var(--ease-out) both;
}

@keyframes home-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.is-home {
  overflow: hidden;
}

.home-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--space);
}

.home-map {
  position: absolute;
  inset: 0;
}

.home-map-canvas {
  display: block;
  touch-action: none;
  cursor: grab;
  outline: none;
}

.home-map.is-dragging .home-map-canvas {
  cursor: grabbing;
}

.home-veil {
  display: none;
}

/* ------------------------------------------------------- frosted panels */

.home-intro,
.home-mini-card,
.home-mix-card,
.home-geo,
.home-dock {
  border: 1px solid var(--hline);
  background: var(--hglass);
  box-shadow: var(--hshadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}

/* -------------------------------------------------------------- labels */

.home-map-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.home-map-leaders {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.home-map-leader {
  fill: none;
  stroke: rgba(255, 255, 255, .7);
  stroke-width: 1.2;
}

.home-map-leader-dot {
  fill: var(--space);
  stroke: #ffffff;
  stroke-width: 1.6;
}

/* The layer lets the map receive the pointer; the name pills themselves
   are targets for their place. */
.home-map-label {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px 0 12px;
  border: 1px solid var(--hline-strong);
  border-radius: var(--r-pill);
  color: var(--hink);
  /* No backdrop blur: dozens of pills move over a canvas that redraws every
     frame, and each blur would be recomputed every frame. A denser fill reads
     the same. */
  background: rgba(12, 16, 27, .8);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

/* A country's number takes its colour, as its marker and overlay do. */
.home-map-label strong {
  color: var(--label-color, var(--level));
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.home-map-label.is-active,
.home-map-label.is-focus {
  border-color: #ffffff;
  color: var(--hdark);
  background: #ffffff;
}

.home-map-label.is-active strong,
.home-map-label.is-focus strong {
  color: color-mix(in srgb, var(--label-color, var(--level-strong)) 72%, #0d0f14);
}

.home-map-label.is-focus {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 620;
}

.home-map-label.is-country {
  height: 26px;
  padding: 0 9px 0 10px;
  font-size: 12px;
}

/* Fallback SVG map (no WebGL) */

.home-map-fallback {
  position: absolute;
  inset: 12% 24% 12% 26%;
  width: 50%;
  height: 76%;
}

.home-map-fallback-land {
  fill: #2b3346;
  stroke: rgba(255, 255, 255, .25);
  stroke-width: 1;
}

.home-map-fallback-emirate {
  stroke: #ffffff;
  stroke-width: 1.4;
  cursor: pointer;
}

.home-map-fallback-emirate:hover,
.home-map-fallback-emirate.is-active {
  stroke-width: 3;
}

.home-map-fallback-emirate {
  transition: opacity 200ms ease;
}

.home-map-fallback.has-selection .home-map-fallback-emirate:not(.is-selected):not(:hover) {
  opacity: .32;
}

.home-view.is-map-fallback [data-home-map-mode="globe"],
.home-view.is-map-fallback .home-search,
.home-view.is-map-fallback .home-dock-buttons {
  display: none;
}

.home-view.is-map-loading .home-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: home-spin 800ms linear infinite;
}

@keyframes home-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------- layout */

.home-layout {
  position: absolute;
  /* The same gap separates everything from the top bar and the screen
     edges: above the rail and cards, beside them, and below. */
  inset: calc(var(--topbar-h) + var(--shell-gap)) var(--shell-gap) var(--shell-gap) var(--content-left);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) minmax(300px, 344px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px 20px;
  pointer-events: none;
}

.home-layout > * {
  pointer-events: auto;
}

.home-intro {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
  padding: 14px 16px 14px 18px;
  border-radius: var(--r-lg);
}

.home-intro-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.home-date {
  color: var(--hink-3);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.home-intro h1 {
  margin: 0;
  color: var(--hink);
  font-size: 26px;
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.home-lead {
  margin: 2px 0 0;
  color: var(--hink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.home-changes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.home-change {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--hline);
  border-radius: 12px;
  background: var(--hfill);
}

.home-change-label {
  overflow: hidden;
  color: var(--hink-3);
  font-size: 11px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-change-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.home-change-value {
  color: var(--hink);
  font-size: 16px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.home-change-delta {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-change-delta.is-good { color: #5fd6a0; }
.home-change-delta.is-bad { color: #ff9a7a; }
.home-change-delta.is-flat { color: var(--hink-3); }

.home-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 8px 0 0;
  padding: 7px 10px !important;
  border: 1px solid rgba(169, 143, 255, .35) !important;
  border-radius: 12px !important;
  color: var(--hink) !important;
  background: rgba(140, 108, 247, .14) !important;
  box-shadow: none !important;
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms;
}

.home-ask:hover {
  border-color: rgba(169, 143, 255, .6) !important;
  background: rgba(140, 108, 247, .24) !important;
}

.home-ask span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ask[hidden] {
  display: none;
}

.home-ask svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--level);
  fill: currentColor;
  stroke: none;
}

/* ---------------------------------------------------------------- KPIs */

.home-kpis {
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: end;
  display: grid;
  gap: 12px;
  min-height: 0;
}

.home-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  color: var(--hink);
  text-decoration: none;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease);
}

a.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--hline-strong);
}

.home-card-label {
  color: var(--hink-3);
  font-size: 12.5px;
  font-weight: 520;
}

.home-card-value {
  color: var(--hink);
  font-size: 32px;
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.home-card-caption {
  color: var(--hink-3);
  font-size: 12.5px;
  line-height: 1.35;
}

.home-hero-card {
  gap: 6px;
  padding: 20px 22px 18px;
  border: 1px solid #ffffff;
  color: var(--hdark);
  background: #ffffff;
  box-shadow: var(--hshadow);
}

.home-hero-card .home-card-label,
.home-hero-card .home-card-caption {
  color: var(--hdark-3);
}

.home-hero-card .home-card-value {
  color: var(--hdark);
  font-size: clamp(50px, 4.8vw, 64px);
  font-weight: 300;
  letter-spacing: -.045em;
}

.home-card-link {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px 0 12px;
  border-radius: var(--r-pill);
  color: #ffffff;
  background: var(--hdark);
  font-size: 12px;
  font-weight: 550;
}

.home-card-link svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  color: var(--hdark);
  background: #ffffff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.home-barcode {
  display: grid;
  grid-template-columns: repeat(56, minmax(0, 1fr));
  gap: 3px;
  height: 30px;
  margin: 10px 0 4px;
}

.home-barcode i {
  display: block;
  border-radius: 2px;
  background: #ebe7f7;
  transform-origin: bottom;
  animation: home-bar-rise 700ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 9ms);
}

.home-barcode i.is-on {
  background: var(--bar, var(--level-strong));
}

@keyframes home-bar-rise {
  from { transform: scaleY(.2); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.home-card-trend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-trend-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--hpaper-2);
}

.home-trend-chip small {
  color: var(--hdark-3);
  font-size: 11.5px;
}

.home-trend-chip b {
  color: var(--hdark);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.home-trend-chip.is-latest {
  background: var(--hdark);
}

.home-trend-chip.is-latest small {
  color: rgba(255, 255, 255, .6);
}

.home-trend-chip.is-latest b {
  color: #ffffff;
}

.home-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-mini-card {
  gap: 1px;
  padding: 10px 12px 9px;
}

.home-mini-card .home-card-label,
.home-mini-card .home-card-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mini-card .home-card-label {
  font-size: 12px;
}

.home-mini-card .home-card-value {
  font-size: 22px;
}

.home-mini-card .home-card-caption {
  font-size: 11px;
}

.home-mix-card .home-card-value {
  font-size: 30px;
}

.home-mix-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  margin: 10px 0 6px;
}

.home-mix-bar i {
  flex: 0 0 var(--w);
  min-width: 3px;
  border-radius: 3px;
  background: var(--c);
}

.home-mix-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
}

.home-mix-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--hink-2);
  font-size: 12px;
}

.home-mix-item i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.home-mix-item span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mix-item b {
  color: var(--hink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.home-kpis:not(.is-ready) .home-card-value {
  justify-self: start;
  min-width: 90px;
  border-radius: 8px;
  color: transparent;
  background: var(--hfill-strong);
  animation: home-pulse 1.2s ease-in-out infinite;
}

.home-kpis:not(.is-ready) .home-hero-card .home-card-value {
  background: var(--hpaper-2);
}

@keyframes home-pulse {
  50% { opacity: .5; }
}

/* ------------------------------------------------------------ geo panel */

.home-geo {
  grid-column: 3;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  max-height: 100%;
  align-self: start;
  padding: 14px;
  border-radius: var(--r-xl);
}

.home-geo-head {
  display: grid;
  gap: 4px;
}

.home-eyebrow {
  color: var(--hink-3);
  font-size: 12px;
  font-weight: 520;
}

.home-geo-head h2 {
  margin: 0 0 8px;
  color: var(--hink);
  font-size: 21px;
  font-weight: 560;
  letter-spacing: -.02em;
}

.home-segmented {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hline);
  border-radius: var(--r-pill);
  background: var(--hfill);
}

.home-segmented[hidden] {
  display: none;
}

.home-segmented button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--hink-2);
  background: transparent;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 550;
  transform: none;
}

.home-segmented button:hover {
  color: var(--hink);
  background: var(--hfill);
}

.home-segmented button[aria-pressed="true"] {
  color: var(--hdark);
  background: #ffffff;
}

.home-segmented svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-geo-focus {
  display: grid;
  gap: 12px;
  flex: 0 0 auto;
}

.home-geo-summary {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--hline);
  border-radius: var(--r-md);
  background: var(--hfill);
}

.home-geo-summary strong {
  color: var(--hink);
  font-size: 30px;
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.home-geo-summary span {
  color: var(--hink-2);
  font-size: 12.5px;
}

.home-geo-summary small {
  margin-top: 6px;
  color: var(--hink-3);
  font-size: 12px;
}

.home-geo-summary {
  position: relative;
}

.home-geo-summary > .home-geo-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  color: var(--hink-2);
  background: var(--hfill-strong);
  cursor: pointer;
}

.home-geo-summary > .home-geo-detail-close:hover,
.home-geo-summary > .home-geo-detail-close:focus-visible {
  color: var(--hink);
  background: var(--hline-strong);
}

.home-geo-summary.is-country strong {
  color: var(--level);
}

.home-geo-detail {
  padding: 14px 16px;
  border-radius: var(--r-md);
  color: var(--hdark);
  background: #ffffff;
  animation: pop-in 220ms var(--ease-out) both;
}

.home-geo-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.home-geo-detail-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 3px;
}

.home-geo-detail-head strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.home-geo-detail-text span {
  color: var(--hdark-3);
  font-size: 12.5px;
}

.home-geo-detail-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hdark-2);
  background: var(--hpaper-2);
  box-shadow: none;
}

.home-geo-detail-close:hover {
  color: var(--hdark);
  background: var(--hpaper-2);
}

.home-geo-detail-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Under the location lists. Folded (zero height, no gap) on the Based tab; the
   Workplace and Studying tabs grow it open. */
.home-geo-profile {
  display: grid;
  grid-template-rows: 0fr;
  flex: 0 0 auto;
  margin-top: -14px;
  opacity: 0;
  transition:
    grid-template-rows 320ms var(--ease-out),
    margin-top 320ms var(--ease-out),
    opacity 220ms ease;
}

.home-geo-profile.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
}

.home-geo-profile-inner {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .home-geo-profile {
    transition: none;
  }
}

/* Rows that only report, never select: the list's row without its hover. */
.home-geo-row.is-static,
.home-geo-row.is-static:hover {
  background: transparent;
  cursor: default;
}

.home-geo-list[hidden] {
  display: none;
}

/* The header stays put; everything beneath it scrolls. The scroller starts
   exactly where the first block sits at rest, so scrolled content is cut by a
   clean edge there (14px under the tabs) and nothing at rest moves. It runs to
   the panel's bottom edge, where content fades out over the last 14px instead
   of being cut (home.js sets --fade-bottom as you scroll, so at the end the
   last row clears the fade). */
.home-geo {
  overflow: hidden;
}

.home-geo-head {
  flex: 0 0 auto;
}

.home-geo-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-geo-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: -14px;
  padding-bottom: 14px;
  overflow-y: auto;
  /* No scrollbar, so it cannot take room from one side: the padding stays
     equal left and right. It still scrolls by wheel, touch or keys. */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
}

.home-geo-body::-webkit-scrollbar {
  display: none;
}

.home-geo-list {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  margin: 0 -6px;
  padding: 0;
  list-style: none;
}

.home-geo-list-title {
  padding: 2px 10px 6px;
  color: var(--hink-3);
  font-size: 12px;
  font-weight: 550;
}

.home-geo-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--hink);
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
}

.home-geo-row:hover,
.home-geo-row:focus-visible {
  border-color: transparent;
  color: var(--hink);
  background: var(--hfill);
}

.home-geo-row[aria-pressed="true"],
.home-geo-row[aria-pressed="true"]:hover {
  color: var(--hink);
  background: var(--hfill-strong);
  box-shadow: inset 0 0 0 1px var(--hline-strong);
}

.home-geo-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--hink-3);
  background: var(--hfill);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.home-geo-name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 540;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-geo-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.home-geo-value b {
  font-size: 13.5px;
  font-weight: 620;
}

.home-geo-value small {
  min-width: 42px;
  color: var(--hink-3);
  font-size: 11.5px;
  text-align: right;
}

.home-geo-bar {
  grid-column: 2 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--hfill);
  overflow: hidden;
}

.home-geo-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 3px;
  background: var(--bar, var(--level));
  transform-origin: left;
  animation: home-bar-grow 700ms var(--ease-out) both;
}

@keyframes home-bar-grow {
  from { transform: scaleX(0); }
  to { transform: none; }
}

.home-geo-more {
  padding: 8px 12px;
  color: var(--hink-3);
  font-size: 12px;
}

.home-geo-head {
  position: relative;
}

.home-geo-info {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hink-3);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.home-geo-info:hover,
.home-geo-info:focus-visible,
.home-geo-info[aria-expanded="true"] {
  color: var(--hink);
  background: var(--hfill-strong);
}

.home-geo-info svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* How the figures are counted: a small popover from the (i) button. */
.home-geo-note {
  position: absolute;
  top: 30px;
  right: -3px;
  z-index: 8;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  width: min(280px, 100%);
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--hline-strong);
  border-radius: var(--r-md);
  color: var(--hink-2);
  background: var(--hglass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: var(--hshadow);
  font-size: 11.5px;
  line-height: 1.5;
  max-height: min(520px, calc(100vh - 160px));
  overflow-y: auto;
}

.home-geo-headwrap {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
}

.home-geo:has(.home-geo-info:hover) .home-geo-note,
.home-geo:has(.home-geo-info:focus-visible) .home-geo-note,
.home-geo:has(.home-geo-info[aria-expanded="true"]) .home-geo-note,
.home-geo-note:hover {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .home-geo-note {
    transition: none;
  }
}

/* --------------------------------------------------------------- dock */

.home-dock {
  position: relative;
  z-index: 6;
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: var(--r-pill);
}

.home-mode-toggle {
  border: 0;
}

.home-mode-toggle button {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.home-search {
  position: relative;
  display: flex;
  align-items: center;
}

.home-search-icon {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--hink-3);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.home-search input {
  width: 196px;
  height: 36px;
  padding: 0 14px 0 34px;
  transition: width 220ms var(--ease-out);
}

.home-search input:focus {
  width: 236px;
}

.home-search-options {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  width: 280px;
  max-height: 340px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--hline-strong);
  border-radius: var(--r-md);
  background: var(--hglass-strong);
  box-shadow: var(--hshadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  list-style: none;
}

.home-search-options[hidden] {
  display: none;
}

.home-search-heading,
.home-search-empty {
  padding: 6px 10px;
  color: var(--hink-3);
  font-size: 11.5px;
  font-weight: 550;
}

.home-search-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--hink);
  font-size: 13px;
  cursor: pointer;
}

.home-search-option:hover,
.home-search-option[aria-selected="true"] {
  background: var(--hfill-strong);
}

.home-search-option b {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  color: var(--hdark);
  background: var(--level);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.home-dock-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--hline);
}

.home-dock-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hink-2);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.home-dock-button:hover {
  color: var(--hink);
  background: var(--hfill);
}

.home-dock-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-view:has(.home-search-options:not([hidden])) .home-map-hint {
  opacity: 0;
}

.home-map-hint {
  position: relative;
  z-index: 5;
  transition: opacity 160ms var(--ease);
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: center;
  margin: 0 0 64px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  color: var(--hink-2);
  background: var(--hglass);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  font-size: 11.5px;
  pointer-events: none;
}

.home-map-hint:empty {
  display: none;
}

/* ------------------------------------------------------------ tooltip */

.home-map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 160px;
  max-width: 240px;
  padding: 10px 13px 11px;
  border-radius: 14px;
  color: var(--hdark-2);
  background: #ffffff;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7);
  pointer-events: none;
  will-change: transform;
}

.home-map-tooltip[hidden] {
  display: none;
}

.home-map-tooltip strong {
  color: var(--hdark);
  font-size: 14px;
  font-weight: 620;
}

.home-map-tooltip span {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.home-map-tooltip small {
  color: var(--hdark-3);
  font-size: 11.5px;
}

.home-map-tooltip em {
  margin-top: 4px;
  color: var(--level-strong);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}

/* --------------------------------------------- short desktop viewports */

@media (max-height: 820px) and (min-width: 1101px) {
  .home-intro h1 {
    font-size: 22px;
  }

  .home-changes {
    margin-top: 8px;
  }

  .home-change {
    padding: 6px 9px;
  }

  .home-ask {
    margin-top: 8px;
    padding: 6px 10px;
  }

  .home-lead {
    margin-top: 4px;
    font-size: 12.5px;
  }

  .home-hero-card .home-card-value {
    font-size: 46px;
  }

  .home-barcode {
    height: 22px;
    margin-top: 6px;
  }

  .home-mix-legend {
    display: none;
  }
}

@media (max-width: 1399px) and (min-width: 1101px) {
  .home-map-hint {
    display: none;
  }

  .home-layout {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) minmax(280px, 316px);
  }

  .home-search input,
  .home-search input:focus {
    width: 180px;
  }
}

/* ------------------------------------------------- tablet and phone */

/* Home flows as a page on small screens. */
@media (max-width: 1100px) {
  body.is-home {
    overflow: auto;
  }

  body:not([data-home-mode="hidden"]) #home.view {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "map"
      "kpis"
      "geo";
    gap: 16px;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  body:not([data-home-mode="hidden"]) .home-layout {
    display: contents;
  }

  body:not([data-home-mode="hidden"]) .home-stage {
    grid-area: map;
    position: relative;
    height: min(66vh, 580px);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
  }

  body:not([data-home-mode="hidden"]) .home-intro {
    grid-area: intro;
  }

  body:not([data-home-mode="hidden"]) .home-dock {
    grid-area: map;
    align-self: end;
    justify-self: center;
    z-index: 4;
    max-width: calc(100% - 24px);
    margin-bottom: 14px;
  }

  body:not([data-home-mode="hidden"]) .home-map-hint {
    grid-area: map;
    z-index: 4;
    margin-bottom: 70px;
  }

  body:not([data-home-mode="hidden"]) .home-kpis {
    grid-area: kpis;
    align-self: start;
  }

  body:not([data-home-mode="hidden"]) .home-geo {
    grid-area: geo;
    max-height: none;
  }

  body:not([data-home-mode="hidden"]) .home-geo-list {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .home-kpi-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-kpi-row > :last-child {
    grid-column: 1 / -1;
  }

  .home-dock-buttons {
    display: none;
  }

  .home-dock {
    gap: 6px;
  }

  .home-search input,
  .home-search input:focus {
    width: 150px;
  }

  .home-search-options {
    left: auto;
    right: -60px;
    width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home.view.active,
  .home-barcode i,
  .home-geo-bar i {
    animation: none;
  }
}

/* Shell overrides while Home is showing: a dark frosted top bar and rail.
   Layered so they outrank the foundation's important shell rules. */
@layer ku {
  body.is-home {
    background: var(--space) !important;
  }

  /* The top bar is dark frosted glass on every page: translucent, with the
     content behind it blurred, so it reads the same over the globe and over
     the light pages. */
  .topbar {
    border-bottom: 1px solid var(--hline) !important;
    background: rgba(6, 9, 18, .52) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
  }

  .top-back-button,
  .top-back-button:hover {
    border-color: var(--hline) !important;
    color: var(--hink) !important;
    background: var(--hfill) !important;
    box-shadow: none !important;
  }

  .brand strong {
    color: var(--hink) !important;
  }

  .brand small {
    color: var(--hink-3) !important;
  }

  .brand-mark {
    content: url("/static/alumni-mark-white.png");
  }

  .header-field-tabs {
    border-color: var(--hline) !important;
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
  }

  .header-field-tabs .field-tab {
    color: var(--hink-2) !important;
  }

  .header-field-tabs .field-tab:hover {
    color: var(--hink) !important;
    background: var(--hfill) !important;
  }

  .header-field-tabs .field-tab.active,
  .header-field-tabs .field-tab.active:hover {
    color: var(--hdark) !important;
    background: #ffffff !important;
  }

  #sourceLine {
    border-color: var(--hline) !important;
    background: rgba(255, 255, 255, .06) !important;
  }

  #sourceLine .source-chip {
    color: var(--hink-2) !important;
  }

  #sourceLine .source-chip:first-child {
    color: var(--hink) !important;
  }

  #sourceLine .source-chip + .source-chip {
    border-left-color: var(--hline) !important;
  }

  .top-actions .icon-button,
  .rail-toggle {
    border-color: var(--hline) !important;
    color: var(--hink-2) !important;
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
  }

  .top-actions .icon-button:hover {
    color: var(--hink) !important;
    background: var(--hfill-strong) !important;
  }

  .sidebar {
    border-color: var(--hline) !important;
    background: rgba(12, 16, 27, .52) !important;
    box-shadow: var(--hshadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
  }

  .sidebar nav button {
    color: var(--hink-2) !important;
  }

  .sidebar nav button:hover {
    color: var(--hink) !important;
    background: var(--hfill) !important;
  }

  .sidebar nav button.active,
  .sidebar nav button.active:hover {
    color: var(--hdark) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7) !important;
  }

  .sidebar .nav-group + .nav-group:not([hidden]) {
    border-top-color: var(--hline) !important;
  }

  .home-intro h1,
  .home-geo-head h2 {
    color: var(--hink) !important;
  }

  .home-search input {
    border: 1px solid var(--hline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--hink) !important;
    background-color: var(--hfill) !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  .home-search input:focus {
    border-color: rgba(255, 255, 255, .4) !important;
    background-color: var(--hfill-strong) !important;
    box-shadow: none !important;
  }

  .home-search input::placeholder {
    color: var(--hink-3) !important;
  }

  @media (max-width: 1100px) {
    body.is-home main {
      background: var(--space) !important;
    }
  }

  @media (max-width: 900px) {
    .sidebar {
      background: #0c101b !important;
    }
  }
}

.home-geo-head .home-segmented {
  display: flex;
  justify-self: stretch;
}

.home-geo-head .home-segmented {
  min-width: 0;
  gap: 2px;
  padding: 3px;
}

.home-geo-head .home-segmented button {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

/* ------------------------------------------------- split cards (focus) */

/* With a place in focus the one panel splits into a card per chart: the
   places, who employs or teaches alumni there, majors and nationality. They
   sit side by side so all of them are on screen at once; whatever does not
   fit scrolls. The panel itself turns clear and each card carries the glass.
   home.js sets data-split and animates the cards in with a spring. */

.home-geo {
  justify-self: end;
  width: 100%;
  transform-origin: 100% 0;
}

.home-geo[data-split="true"] {
  --split-w: clamp(560px, 42vw, 700px);
  /* Wider than its column, reaching left over the map: a negative margin
     (a percentage of the column) so the layout's tracks do not move. It stops
     above the map bar, which keeps its place beneath. */
  width: auto;
  justify-self: stretch;
  margin-left: calc(100% - var(--split-w));
  max-height: calc(100% - var(--dk-bar-h, 58px) - 26px);
  overflow: visible;
  gap: 12px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Every card: the same frosted glass as the single panel. */
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-head,
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-card:not(.home-geo-detail) {
  border: 1px solid var(--hline);
  border-radius: var(--r-lg);
  background: var(--hglass);
  box-shadow: var(--hshadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}

/* Title, layer tabs and the (i) on one line. */
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "eyebrow tabs info"
    "title   tabs info";
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  padding: 14px 14px 14px 18px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-eyebrow,
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-head h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-eyebrow { grid-area: eyebrow; align-self: end; }
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-head h2 { grid-area: title; align-self: start; margin: 2px 0 0; }
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-head .home-segmented { grid-area: tabs; width: 252px; }

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-info {
  position: static;
  grid-area: info;
}

.home-geo[data-split="true"] .home-geo-note {
  top: calc(100% + 8px);
  right: 0;
}

/* The scroller runs the width of the panel, with room around the cards for
   their shadows. The bottom fade is dropped: a mask would stop the cards'
   glass blurring the map behind them. */
.home-geo[data-split="true"] .home-geo-body {
  margin: 0 -24px;
  padding: 0 24px 24px;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-geo[data-split="true"] .home-geo-flow {
  display: block;
  column-count: 2;
  column-gap: 12px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-card,
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-focus {
  display: grid;
  break-inside: avoid;
  margin: 0 0 12px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-focus {
  gap: 0;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-focus > .home-geo-card {
  margin: 0;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-list {
  gap: 0;
  padding: 12px 8px 8px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-list-title {
  padding: 0 10px 6px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-summary {
  padding: 13px 16px 14px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-summary strong {
  font-size: 28px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-summary small {
  margin-top: 3px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-summary:not(.is-country) {
  gap: 2px;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-detail {
  margin: 0;
}

/* Tighter rows than the single column, so more of each chart is in view. */
:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-row {
  padding: 7px 10px;
  row-gap: 3px;
  line-height: 1.25;
}

:is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-bar {
  height: 4px;
}

/* Profile lists are cards of their own: the wrapper that folds them in the
   single column steps aside (and is simply gone on the Based tab). */
.home-geo[data-split="true"] .home-geo-profile,
.home-geo[data-split="true"] .home-geo-profile-inner {
  display: contents;
}

.home-geo[data-split="true"] .home-geo-profile:not(.is-open) {
  display: none;
}

/* Cards and the header that are leaving are copied into this layer so they can
   fade and fold away after the panel itself has changed (see home.js). */
.home-geo-ghosts {
  position: fixed;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.home-geo-ghosts > * {
  position: absolute !important;
  margin: 0 !important;
}

/* The hint line would sit under the cards; it returns with the globe. */
.home-geo[data-split="true"] ~ .home-map-hint {
  display: none;
}

/* Under 1100px Home flows as a page; the cards then wrap to the width. */
@media (max-width: 1100px) {
  .home-geo[data-split="true"] {
    margin-left: 0;
    max-height: none;
  }

  .home-geo[data-split="true"] ~ .home-map-hint {
    display: flex;
  }

  .home-geo[data-split="true"] .home-geo-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "eyebrow info"
      "title   info"
      "tabs    tabs";
    row-gap: 8px;
  }

  .home-geo[data-split="true"] .home-geo-head .home-segmented { width: 100%; }

  .home-geo[data-split="true"] .home-geo-body {
    margin: 0;
    padding: 0;
  }

  .home-geo[data-split="true"] .home-geo-flow {
    column-count: auto;
    column-width: 280px;
  }
}


/* Placeholders for the cards while the first figures load. */
.sk {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--hfill-strong);
  animation: home-pulse 1.2s ease-in-out infinite;
}

.sk-value {
  width: 58px;
}

.home-geo-row.is-skeleton .sk {
  height: 12px;
}

.home-geo-summary.is-skeleton {
  gap: 10px;
  min-height: 101px;
  align-content: center;
}

.sk-big {
  width: 118px;
  height: 26px;
  border-radius: 8px;
}

.sk-line {
  width: 72%;
}

.sk-short {
  width: 52%;
}

@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
  }
}

@media (min-width: 1101px) {
  :is(.home-geo[data-split="true"], .home-geo-ghosts) .home-geo-head.has-exit {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "exit eyebrow tabs info"
      "exit title   tabs info";
  }
}

@media (max-width: 1100px) {
  .home-geo[data-split="true"] .home-geo-head.has-exit {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "exit eyebrow info"
      "exit title   info"
      "tabs tabs    tabs";
  }
}

.home-geo-head > .home-geo-exit {
  grid-area: exit;
  align-self: center;
  width: 28px;
  height: 28px;
  color: var(--hink-2);
  background: var(--hfill-strong);
  cursor: pointer;
}

.home-geo-head > .home-geo-exit:hover,
.home-geo-head > .home-geo-exit:focus-visible {
  color: var(--hink);
  background: var(--hline-strong);
}

.home-geo-empty {
  display: flex;
  padding: 6px 10px 8px;
}

.home-geo-empty-pill {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--hline);
  border-radius: var(--r-pill);
  color: var(--hink-3);
  background: var(--hfill);
  font-size: 12px;
  font-weight: 520;
}

/* (i) tooltip: titled sections, as on the analytics pages. */
.home-geo-note {
  display: grid;
  gap: 14px;
  width: min(340px, 100%);
  padding: 14px 16px;
  white-space: normal;
}

.home-note-section {
  display: grid;
  gap: 6px;
}

.home-note-section + .home-note-section {
  padding-top: 12px;
  border-top: 1px solid var(--hline);
}

.home-note-section h4 {
  margin: 0;
  color: var(--hink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-note-section p {
  margin: 0;
  color: var(--hink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.home-note-section:first-child p {
  color: var(--hink);
  font-size: 13px;
  font-weight: 500;
}

.home-note-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-note-section li {
  position: relative;
  padding-left: 14px;
  color: var(--hink-2);
  font-size: 12px;
  line-height: 1.5;
}

.home-note-section li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hink-3);
}