/* Headstart Partners Hub - home + society finder. Home-specific rules only;
   shared primitives live in styles.css. Ported from the hub prototype. */

/* ---------- home hero extras ---------- */
#home .hero .kicker{color:var(--amber)}
#unis .hero .kicker{color:var(--amber)}
#home .cta{margin-top:22px}
.homefoot{text-align:center;font-size:12.5px;color:#5A6A8C;margin-top:18px;line-height:1.6}

/* ---------- home leaderboard teaser (quiet link into the unis view) ---------- */
.lb-teaser{text-align:center;margin-top:16px}
.lb-teaser-link{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  font-family:var(--body);font-weight:600;font-size:13px;color:var(--ocean);
  cursor:pointer;padding:9px 12px;border-radius:var(--pill)}
.lb-teaser-link:hover{color:var(--flame)}
.lb-teaser-link span{transition:transform .16s ease}
.lb-teaser-link:hover span{transform:translateX(3px)}
.lb-teaser-link:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ocean)}

/* ---------- university grid (compact four-up) ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:16px}
.tile{background:var(--white);border:none;border-radius:12px;padding:11px 9px;text-align:left;cursor:pointer;font-family:var(--body);box-shadow:0 1px 4px rgba(10,26,63,.07);transition:transform .16s ease,box-shadow .16s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px -10px rgba(10,26,63,.24)}
.tile .t{font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.2;color:var(--midnight);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .s{font-size:10.5px;color:#5A6A8C;margin-top:4px}
/* university crest: a small identity mark above the name, left-aligned with the
   tile's text. object-fit:contain keeps arms and wordmarks in aspect; a missing
   crest is removed in JS, so the tile falls back to text-only with no reserved gap. */
.tile-crest{display:block;height:28px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin:0 0 8px}

/* ---------- society list ---------- */
.rowlist{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.rowitem{display:flex;align-items:center;justify-content:space-between;background:var(--white);border:none;border-radius:var(--radius);padding:16px 18px;cursor:pointer;font-family:var(--body);text-align:left;box-shadow:0 1px 4px rgba(10,26,63,.07);transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.rowitem:hover{background:#FBFAFF;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(10,26,63,.2)}
.rowitem:hover .arrow{transform:translateX(3px)}
.rowitem .t{font-weight:600;font-size:14.5px;color:var(--midnight)}
.rowitem .end{display:flex;align-items:center}
.rowitem .theme{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);background:var(--lavender);padding:4px 10px;border-radius:var(--pill);white-space:nowrap;margin-left:10px}
.rowitem .arrow{color:var(--orange);font-weight:700;margin-left:8px;transition:transform .16s ease}

/* ============ cycle leaderboard: a target-hitting bar chart ============
   ONE DOM (li > a.lb-row > rank + id + count + bar>fill) drives both modes.
   The class on #leaderboard (lb-h / lb-v) chooses the axis; milestone lines
   ride the same value/SCALE_MAX fraction (--f) as the bars so a bar of value N
   and the N target line land on the same pixel. */
.lb{margin-top:22px}
.lb .kicker{color:var(--ocean)}
.lb h2{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.32;letter-spacing:-.3px;color:var(--midnight);margin-bottom:14px;max-width:26ch}
.lb-rows{list-style:none}
.lb-row{text-decoration:none;color:inherit}
.lb-bar{background:var(--cloud);overflow:hidden}
.lb-bar-fill{min-width:5px}
.lb-name{font-family:var(--display);font-weight:600;color:var(--midnight)}
.lb-uni{color:#5A6A8C}
.lb-rank{font-family:var(--display);font-weight:700;color:var(--ocean);font-variant-numeric:tabular-nums}
.lb-count{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean)}

/* --- milestone target lines (shared bits) --- */
.lb-ms{pointer-events:none;z-index:2}
.lb-ms-num{font-family:var(--display);font-weight:700;font-size:11px;color:var(--ocean);
  font-variant-numeric:tabular-nums;line-height:1}

/* ---------------- horizontal mode ---------------- */
.lb-h .lb-chart{position:relative;padding-top:26px}
.lb-h .lb-rows{display:flex;flex-direction:column;gap:8px}
.lb-h .lb-row{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  grid-template-areas:"rank id count" "bar bar bar";
  column-gap:10px;row-gap:9px;
  padding:12px var(--lb-pad,14px);
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 1px 4px rgba(10,26,63,.07);
  transition:transform .16s ease,box-shadow .16s ease}
.lb-h .lb-row:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(10,26,63,.22)}
.lb-h .lb-row:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ocean)}
.lb-h .lb-rank{grid-area:rank;align-self:center;text-align:center;font-size:18px}
.lb-h .lb-id{grid-area:id;min-width:0;align-self:center}
.lb-h .lb-name{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-h .lb-uni{display:block;font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-h .lb-count{grid-area:count;align-self:center;white-space:nowrap;font-size:10.5px}
.lb-h .lb-bar{grid-area:bar;height:9px;border-radius:var(--pill)}
.lb-h .lb-bar-fill{height:100%;border-radius:0 var(--pill) var(--pill) 0;
  background:linear-gradient(90deg,var(--ocean),var(--deep))}
.lb-h .is-lead{box-shadow:inset 0 0 0 1.5px rgba(253,119,2,.28),0 10px 24px -13px rgba(253,119,2,.5)}
.lb-h .is-lead:hover{box-shadow:inset 0 0 0 1.5px rgba(253,119,2,.32),0 14px 28px -13px rgba(253,119,2,.55)}
.lb-h .is-lead .lb-rank{color:var(--orange)}
.lb-h .is-lead .lb-count{color:var(--flame)}
.lb-h .is-lead .lb-bar-fill{background:linear-gradient(90deg,var(--orange),var(--amber))}
/* vertical dashed target line + top caps label, aligned to the bar-track zone */
.lb-h .lb-ms{position:absolute;top:0;bottom:0;width:0;
  left:calc(var(--lb-pad,14px) + var(--f) * (100% - 2 * var(--lb-pad,14px)))}
.lb-h .lb-ms-line{position:absolute;top:24px;bottom:2px;left:0;
  border-left:1.5px dashed rgba(0,63,125,.30)}
.lb-h .lb-ms-cap{position:absolute;top:0;left:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.lb-h .lb-ms.at-start .lb-ms-cap{transform:translateX(-2px)}
.lb-h .lb-ms.at-end .lb-ms-cap{transform:translateX(-100%)}

/* ---------------- vertical mode ---------------- */
.lb-v .lb-chart{position:relative;
  --lbv-count-h:16px;--lbv-bar-h:148px;--lbv-rank-h:18px;--lbv-name-h:28px;--lbv-gap:6px;
  --lbv-base:calc(var(--lbv-name-h) + var(--lbv-rank-h) + 2 * var(--lbv-gap));
  height:calc(var(--lbv-count-h) + var(--lbv-bar-h) + var(--lbv-rank-h) + var(--lbv-name-h) + 3 * var(--lbv-gap))}
.lb-v .lb-rows{display:flex;flex-direction:row;align-items:stretch;gap:5px;height:100%}
.lb-v .lb-rows > li{flex:1 1 0;min-width:0;display:flex}   /* the li is the flex item, not the a */
.lb-v .lb-row{width:100%;height:100%;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:var(--lbv-gap);
  padding:2px 1px 0;border-radius:10px;transition:background-color .16s ease}
.lb-v .lb-row:hover{background:rgba(255,255,255,.6)}
.lb-v .lb-row:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ocean)}
.lb-v .lb-count{order:1;height:var(--lbv-count-h);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8.5px;text-align:center}
.lb-v .lb-bar{order:2;position:relative;height:var(--lbv-bar-h);width:64%;max-width:34px;
  border-radius:var(--pill)}
.lb-v .lb-bar-fill{position:absolute;left:0;right:0;bottom:0;
  border-radius:var(--pill);background:linear-gradient(to top,var(--deep),var(--ocean))}
.lb-v .lb-rank{order:3;height:var(--lbv-rank-h);display:flex;align-items:center;font-size:14px}
.lb-v .lb-id{order:4;height:var(--lbv-name-h);width:100%;min-width:0}
.lb-v .lb-uni{display:none}
.lb-v .lb-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:10px;line-height:1.25;text-align:center}
.lb-v .is-lead .lb-rank{color:var(--orange)}
.lb-v .is-lead .lb-count{color:var(--flame)}
.lb-v .is-lead .lb-bar-fill{background:linear-gradient(to top,var(--flame),var(--amber))}
/* horizontal dashed target line across the chart, caps label at the left */
.lb-v .lb-ms{position:absolute;left:0;right:0;height:0;
  bottom:calc(var(--lbv-base) + var(--f) * var(--lbv-bar-h))}
.lb-v .lb-ms-line{position:absolute;left:0;right:0;top:0;
  border-top:1.5px dashed rgba(0,63,125,.28)}
.lb-v .lb-ms-cap{position:absolute;left:0;top:3px;
  display:flex;align-items:baseline;gap:5px;white-space:nowrap;
  background:var(--lavender);padding:1px 5px;border-radius:var(--pill)}

/* top-5 chip: names the full field when the slim vertical view shows only five.
   A tiny caps pill in the same lavender/ocean family as the .theme and milestone
   chips. Hidden everywhere by default; revealed only under .lb-v.has-more in the
   slim media query below. */
.lb-top{display:none;align-items:center;margin:-2px 0 14px;
  font-family:var(--body);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ocean);background:var(--lavender);
  padding:3px 10px;border-radius:var(--pill);
  box-shadow:inset 0 0 0 1px rgba(0,63,125,.10)}

.lb-empty{background:var(--white);border-radius:var(--radius);padding:18px;text-align:center;
  font-size:13.5px;line-height:1.55;color:#5A6A8C;box-shadow:0 1px 4px rgba(10,26,63,.07)}

/* ---------------- vertical mode: slim 5-column board (phones) ----------------
   Below 520px the vertical board shows only its top five columns, so each keeps a
   legible ~66px width and a tappable target instead of ten ~30px slivers. The
   hiding is CSS-only - every row stays in the DOM for the cross-repo count - and
   the .lb-top chip names the full field. Horizontal mode never truncates.
   Milestone-line mechanics are unchanged; only the count band grows so the whole
   "N applications" string can stack in two lines rather than being clipped. */
@media (max-width:519px){
  #leaderboard.lb-v #lbRows > li:nth-child(n+6){display:none}
  #leaderboard.lb-v.has-more .lb-top{display:inline-flex}
  .lb-v .lb-chart{--lbv-count-h:24px}
  .lb-v .lb-rows{gap:6px}
  .lb-v .lb-bar{width:72%;max-width:46px}
  .lb-v .lb-rank{font-size:17px}
  .lb-v .lb-name{font-size:11px;line-height:1.2}
  .lb-v .lb-count{white-space:normal;overflow:visible;text-overflow:clip;
    text-transform:none;letter-spacing:.01em;font-size:9.5px;line-height:1.15;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
}

/* ---------------- laptop width: the unis view widens into a full board ----------------
   At >=1000px ONLY the #unis view grows to 960px (home + socs stay at the 520 base). The
   cycle hero spans that width, the vertical board spreads into a centered, roomier bar
   chart, and the four-column university grid keeps four columns with fuller tiles. Every
   override is scoped under #unis, so the 520-999px and <520px layouts are untouched.

   The chart stays a target-hitting bar chart: only the CSS custom properties on
   .lb-v .lb-chart change (taller bars, roomier bands), so --lbv-base and the chart height
   recompute from them and every milestone line keeps riding the same value/SCALE_MAX
   fraction as its bar. Columns are capped and the row is centered so a sparse two-entry
   board reads honestly instead of ballooning into two fat bars. */
@media (min-width:1000px){
  #unis.view{max-width:960px}

  /* cycle hero spans the wider column */
  #unis .hero{padding:46px 44px 42px}
  #unis .hero h1{font-size:42px;line-height:1.08;margin:12px 0 14px}
  #unis .hero p{font-size:17px;line-height:1.55;max-width:56ch}

  /* leaderboard heading + section breathe */
  #unis .lb{margin-top:26px}
  #unis .lb h2{font-size:21px;line-height:1.3;max-width:34ch;margin-bottom:18px}

  /* vertical board: taller bars + roomier bands -> chart ~264px tall */
  #unis .lb-v .lb-chart{--lbv-count-h:18px;--lbv-bar-h:168px;--lbv-rank-h:20px;
    --lbv-name-h:34px;--lbv-gap:8px}
  /* centre the columns and cap each so a 2-entry board does not balloon into fat bars */
  #unis .lb-v .lb-rows{justify-content:center;gap:10px}
  #unis .lb-v .lb-rows > li{max-width:96px}
  /* wider columns want a bar radius that keeps SHORT fills reading as bars, not lenses:
     round the top data-end and the empty track top, near-flat baseline (phones keep pills) */
  #unis .lb-v .lb-bar{width:66%;max-width:56px;border-radius:16px 16px 5px 5px}
  #unis .lb-v .lb-bar-fill{border-radius:13px 13px 0 0}
  #unis .lb-v .lb-rank{font-size:17px}
  #unis .lb-v .lb-name{font-size:12px;line-height:1.25}
  /* the count is a data label over each bar: sentence case + tight tracking fits the full
     "N applications" on one line at column width (textContent is unchanged either way) */
  #unis .lb-v .lb-count{font-size:9.5px;text-transform:none;letter-spacing:.01em}

  /* milestone caps + labels breathe */
  #unis .lb-v .lb-ms-cap{top:4px;padding:3px 9px;gap:6px}
  #unis .lb-v .lb-ms-num{font-size:13px}

  /* four-column university grid keeps four columns, roomier tiles */
  #unis .grid{gap:14px;margin-top:22px}
  #unis .tile{padding:16px 15px}
  #unis .tile-crest{height:34px;margin-bottom:11px}
  #unis .tile .t{font-size:14px}
  #unis .tile .s{font-size:12px;margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  .lb-h .lb-row,.lb-v .lb-row,.lb-teaser-link span,.tile,.rowitem,.rowitem .arrow{transition:none}
}