/* Share hub design system.

   Transcribed from the approved Claude Design build ("Headstart Society Share Hub").
   That bundle styles everything inline, which cannot express :hover, :focus-visible or
   media queries, so it becomes a real stylesheet here.

   Load order is styles.css -> home.css -> hub.css. The first two stay untouched:
   stats.html depends on styles.css, and home.css carries ~130 lines of tuned
   leaderboard chart geometry that is working and worth not disturbing. hub.css is
   loaded last, so at equal specificity it wins any overlap.

   Class prefix is hs-. The design's own six layout names are kept verbatim so its
   880px media block transcribes one to one. */

:root{
  /* The design's palette. --midnight/--ocean/--ink/--orange/--lavender/--cloud already
     exist in styles.css and match exactly, so they are reused rather than redeclared. */
  --hs-bg:#FDFDFB;
  --hs-hair:#E6E8F4;
  --hs-cream:#FFF4E8;
  --hs-orange-hover:#E86C00;
  --hs-glass:rgba(241,244,253,.72);
  --hs-stage:rgba(241,244,253,.5);
  --hs-rowhover:rgba(239,238,251,.5);
  --hs-shadow:0 2px 4px rgba(0,35,71,.04);
  --hs-display:"Poppins",system-ui,-apple-system,sans-serif;
  --hs-body:"Inter",system-ui,-apple-system,sans-serif;
  /* Ink opacity ramp, straight from the design. */
  --hs-i30:rgba(10,26,63,.30);
  --hs-i35:rgba(10,26,63,.35);
  --hs-i50:rgba(10,26,63,.50);
  --hs-i55:rgba(10,26,63,.55);
  --hs-i60:rgba(10,26,63,.60);
  --hs-i62:rgba(10,26,63,.62);
  --hs-i66:rgba(10,26,63,.66);
  --hs-i75:rgba(10,26,63,.75);
}

/* The main site's backdrop, so the hub pages sit on the same ground as
   headstartglobal.io rather than a flat fill of their own. Copied from .hp-bg
   in app/homepage-design.css; keep the two in step. background-attachment:fixed
   is the static-page equivalent of that rule's position:fixed layer, so the
   wash stays put while the page scrolls.

   Longhand, not the `background` shorthand: the shorthand resets
   background-image, which is how the first attempt at this silently lost to
   this very rule. */
body{
  background-color: var(--lavender);
  background-image:
    radial-gradient(46% 42% at 13% 54%, rgba(0, 63, 125, 0.14) 0%, rgba(0, 63, 125, 0) 62%),
    radial-gradient(34% 32% at 84% 44%, rgba(253, 119, 2, 0.10) 0%, rgba(253, 119, 2, 0) 60%),
    linear-gradient(155deg, #EFEEFB 0%, #F3F2FC 50%, #F7F5FC 100%);
  background-attachment: fixed;
  font-family: var(--hs-body);
}

/* The old .view/.page rules cap the column at 520px. .hs-main owns width now. */
.view,.page{max-width:none;padding:0}
.view{display:none}
.view.active{display:block}

/* ---------- topbar ---------- */
.hs-topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:13px 40px;background:var(--hs-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,232,244,.8)}
.hs-topbar-brand{display:flex;align-items:center;gap:10px;background:none;border:none;
  padding:0;cursor:pointer;font-family:inherit;text-decoration:none}
.hs-topmark{width:30px;height:30px;border-radius:9px;background:var(--lavender);
  display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.hs-topmark img{width:24px;height:24px;object-fit:contain}
.hs-topword{font-family:var(--hs-display);font-weight:600;font-size:15px;color:var(--midnight)}
.hs-toplabel{font-size:14px;color:var(--hs-i50)}
.hs-topspacer{flex:1}
.hs-countdown{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--hs-i60)}
.hs-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}

/* ---------- page column ---------- */
.hs-main{max-width:1040px;margin:0 auto;padding:26px 40px 80px}

/* ---------- breadcrumbs ---------- */
.hs-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:13px;
  color:var(--hs-i55);margin-bottom:14px}
.hs-crumbs a,.hs-crumbs button{color:var(--hs-i55);background:none;border:none;padding:0;
  font:inherit;cursor:pointer;text-decoration:none}
.hs-crumbs a:hover,.hs-crumbs button:hover{color:var(--ocean)}
.hs-crumbs .hs-sep{color:var(--hs-i30)}
.hs-crumbs .hs-here{color:var(--ink);font-weight:600}

/* ---------- type ---------- */
.hs-kicker{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hs-i50);margin-bottom:10px}
.hs-h1{font-family:var(--hs-display);font-weight:600;font-size:34px;line-height:1.16;
  color:var(--midnight);max-width:15em;text-wrap:balance}
.hs-h1-sm{font-size:29px;line-height:1.2;max-width:22em}
.hs-sub{font-size:15.5px;line-height:1.62;color:var(--hs-i66);max-width:44em;margin-top:12px}
.hs-lede{font-size:14.5px;color:var(--hs-i62);margin-top:8px}

/* ---------- stat row ---------- */
.hs-stats{display:flex;gap:52px;margin-top:30px;flex-wrap:wrap}
.hs-stat .hs-statn{font-family:var(--hs-display);font-weight:600;font-size:31px;
  color:var(--midnight);font-variant-numeric:tabular-nums}
.hs-stat .hs-statl{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hs-i50);margin-top:2px}

/* ---------- buttons ---------- */
.hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;
  padding:0 20px;border:none;border-radius:10px;font-family:var(--hs-body);font-weight:600;
  font-size:14.5px;cursor:pointer;text-decoration:none;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease}
.hs-btn-navy{background:var(--midnight);color:#fff}
.hs-btn-navy:hover{background:var(--ocean)}
/* Ink on orange, never white: white on #FD7702 is about 2.7:1 and fails AA. */
.hs-btn-orange{background:var(--orange);color:var(--ink)}
.hs-btn-orange:hover{background:var(--hs-orange-hover)}
.hs-btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hs-hair)}
.hs-btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--orange);color:var(--orange)}
.hs-btn-sm{height:34px;padding:0 15px;border-radius:9px;font-size:13px}
.hs-textlink{background:none;border:none;padding:0;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--ocean);cursor:pointer;text-decoration:none}
.hs-textlink:hover{color:var(--orange)}
.hs-ctarow{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}

/* ---------- cards ---------- */
.hs-card{background:#fff;border:1px solid var(--hs-hair);border-radius:14px;
  box-shadow:var(--hs-shadow)}
.hs-card-hd{padding:18px 22px 14px}
.hs-card-hd h2{font-family:var(--hs-display);font-weight:600;font-size:18px;color:var(--midnight)}
.hs-card-hd p{font-size:13.5px;color:var(--hs-i60);margin-top:4px}
.hs-divider{border-top:1px solid var(--hs-hair)}
.hs-foot{padding:14px 22px;font-size:13px;color:var(--hs-i50);border-top:1px solid var(--hs-hair)}
.hs-foot a{color:var(--ocean)}

/* how the pack works */
.hs-steprow{display:flex;gap:14px;padding:16px 22px;border-top:1px solid var(--hs-hair)}
.hs-numtile{width:34px;height:34px;border-radius:10px;background:var(--lavender);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hs-display);font-weight:600;font-size:14px;color:var(--midnight)}
.hs-steprow h3{font-size:14.5px;font-weight:600;color:var(--ink)}
.hs-steprow p{font-size:13.5px;line-height:1.55;color:var(--hs-i62);margin-top:3px}

/* ---------- university grid ---------- */
.hs-unigrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.hs-unicard{display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  background:#fff;border:1px solid var(--hs-hair);border-radius:12px;box-shadow:var(--hs-shadow);
  padding:15px 16px 14px;cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .14s ease,transform .14s ease}
.hs-unicard:hover{border-color:var(--orange);transform:none}
.hs-tile{width:38px;height:38px;border-radius:10px;background:var(--lavender);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--hs-display);font-weight:600;font-size:12.5px;letter-spacing:.02em;
  color:var(--midnight)}
/* The crest keeps its own white plate inside the design's tile; a society or university
   with no artwork falls back to the monogram, which is the design's own rule. */
.hs-tile img{width:100%;height:100%;object-fit:contain;padding:4px;background:#fff}
.hs-uniname{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.hs-unicount{font-size:12.5px;color:var(--hs-i55)}

/* ---------- society rows ---------- */
.hs-socrow{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;
  background:none;border:none;border-top:1px solid var(--hs-hair);cursor:pointer;
  text-align:left;font-family:inherit;text-decoration:none;transition:background-color .14s ease}
.hs-socrow:first-child{border-top:none}
.hs-socrow:hover{background:var(--hs-rowhover)}
.hs-logotile{width:40px;height:40px;border-radius:10px;background:var(--lavender);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--hs-display);font-weight:600;font-size:12px;color:var(--midnight)}
.hs-logotile img{width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
/* home.css styles .rowlist/.rowitem as free-standing cards with a gap. Inside the new
   hairline-divided card those rules have to be neutralised, not deleted: the class names
   stay because uat/ms_14_hub_pages.py addresses rows by .rowitem. */
.hs-card .rowlist{display:block;gap:0;margin-top:0}
.hs-socrow{background:#fff;border-radius:0;box-shadow:none;transform:none}
.hs-socrow:hover{transform:none;box-shadow:none}
.hs-socbody{flex:1;min-width:0}
.hs-socname{display:block;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.hs-socmeta{display:block;font-size:12px;color:var(--hs-i55);margin-top:3px}
/* The theme keeps its own span so it stays addressable, but reads as text here rather
   than the pill home.css gives it. */
.hs-socmeta .theme{background:none;padding:0;margin:0;border-radius:0;font-size:12px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--ocean)}
.hs-chev{font-size:16px;color:var(--hs-i35);flex:none}

/* ---------- pack page ---------- */
.hs-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;
  align-items:start;margin-top:18px}

/* poster selector: constant-width transparent border plus an inset ring, so switching
   between 1px and 1.5px never nudges the contents by half a pixel. */
.hs-postersel{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hs-hair)}
.hs-postertile{flex:1;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:#fff;border:1.5px solid transparent;box-shadow:inset 0 0 0 1px var(--hs-hair);
  cursor:pointer;text-align:left;font-family:inherit;
  transition:background-color .14s ease,box-shadow .14s ease}
.hs-postertile:hover{box-shadow:inset 0 0 0 1px var(--orange)}
.hs-postertile.on{background:var(--hs-cream);box-shadow:inset 0 0 0 1.5px var(--orange)}
.hs-thumb{width:36px;height:45px;border-radius:5px;border:1px solid var(--hs-hair);flex:none;
  object-fit:cover;object-position:top;background:var(--lavender);display:block}
.hs-postertile>span{min-width:0}
.hs-tilelabel{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.hs-tilehint{display:block;font-size:12px;color:var(--hs-i55);margin-top:1px}

/* format row: not in the design, but story is what actually gets posted */
.hs-fmt{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--hs-hair)}
.hs-fmtlabel{font-size:12px;color:var(--hs-i50);flex:1}
.hs-seg{display:flex;gap:6px}
.hs-seg button{height:30px;padding:0 12px;border-radius:8px;background:#fff;
  border:1px solid var(--hs-hair);font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--hs-i60);cursor:pointer;transition:all .14s ease}
.hs-seg button:hover{border-color:var(--orange)}
.hs-seg button.on{background:var(--hs-cream);border-color:var(--orange);color:var(--ink)}

.hs-stage{padding:20px;background:var(--hs-stage)}
.hs-stage canvas{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;
  border:1px solid var(--hs-hair);border-radius:8px}

.hs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 18px;
  border-top:1px solid var(--hs-hair)}
.hs-actions .hs-spacer{flex:1}
.hs-iconbtn{width:38px;height:38px;border-radius:10px;background:#fff;
  border:1px solid var(--hs-hair);color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:border-color .14s ease,color .14s ease}
.hs-iconbtn:hover{border-color:var(--orange);color:var(--orange)}
.hs-iconbtn svg{width:18px;height:18px;display:block}
.hs-note{padding:0 18px 16px;font-size:12.5px;line-height:1.55;color:var(--hs-i55)}

/* right rail */
.hs-rail{display:flex;flex-direction:column;gap:14px}
.hs-rail .hs-card{border-radius:12px;padding:16px 18px}
.hs-eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hs-i50)}
.hs-caption{font-size:13px;line-height:1.65;color:var(--hs-i75);white-space:pre-line;margin-top:10px}
.hs-railhd{display:flex;align-items:center;gap:11px}
.hs-startile{width:32px;height:32px;border-radius:10px;background:var(--lavender);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--midnight)}
.hs-railhd h3{font-family:var(--hs-display);font-weight:600;font-size:15px;color:var(--midnight)}
.hs-railbody{font-size:13px;line-height:1.6;color:var(--hs-i62);margin:10px 0 12px}

/* ---------- leaderboard container, restyled into the new system ---------- */
/* Only the shell. The chart geometry stays in home.css. */
.lb{background:#fff;border:1px solid var(--hs-hair);border-radius:14px;box-shadow:var(--hs-shadow);
  padding:18px 20px;margin-top:22px}

/* ---------- keyboard focus ---------- */
.hs-btn:focus-visible,.hs-textlink:focus-visible,.hs-unicard:focus-visible,
.hs-socrow:focus-visible,.hs-postertile:focus-visible,.hs-iconbtn:focus-visible,
.hs-seg button:focus-visible,.hs-crumbs button:focus-visible,.hs-crumbs a:focus-visible,
.hs-topbar-brand:focus-visible{
  outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ocean)}
.hs-postertile.on:focus-visible{box-shadow:inset 0 0 0 1.5px var(--orange),0 0 0 2px #fff,0 0 0 5px var(--ocean)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- 880px, transcribed from the design ---------- */
@media (max-width:880px){
  .hs-main{padding:20px 18px 60px}
  .hs-topbar{padding:12px 18px}
  .hs-cols{grid-template-columns:1fr}
  .hs-stats{gap:26px}
  .hs-unigrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-h1{font-size:28px}
  .hs-h1-sm{font-size:24px}
  .hs-toplabel{display:none}
  .hs-countdown{font-size:12px}
}
@media (max-width:520px){
  .hs-actions{gap:8px}
  .hs-actions .hs-btn{flex:1 1 100%}
  .hs-actions .hs-spacer{display:none}
}

/* ---------- topbar sub-nav ---------- */
.hs-topnav{display:flex;align-items:center;gap:4px;margin-left:14px}
.hs-navlink{font-size:13.5px;font-weight:600;color:var(--hs-i55);text-decoration:none;
  padding:6px 10px;border-radius:8px;transition:background-color .14s ease,color .14s ease}
.hs-navlink:hover{color:var(--ink);background:rgba(239,238,251,.7)}
.hs-navlink.on{color:var(--midnight);background:var(--lavender)}
.hs-navlink:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ocean)}

/* ---------- community search ---------- */
.hs-searchrow{display:flex;flex-direction:column;gap:7px;margin-top:26px;max-width:420px}
.hs-srlabel{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hs-i50)}
.hs-search{height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--hs-hair);
  background:#fff;font-family:var(--hs-body);font-size:14.5px;color:var(--ink);
  transition:border-color .14s ease}
.hs-search::placeholder{color:var(--hs-i35)}
.hs-search:hover{border-color:var(--orange)}
.hs-search:focus-visible{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ocean)}
.hs-empty{margin-top:18px;font-size:14px;color:var(--hs-i55)}

@media (max-width:880px){
  .hs-topnav{margin-left:8px;gap:2px}
  .hs-navlink{padding:6px 8px;font-size:13px}
  .hs-searchrow{max-width:none}
}
/* ---------- hero wash ----------
   The same decorative line-work the main site puts behind its homepage hero, so the
   hub reads as part of headstartglobal.io rather than a bolted-on microsite. Same
   asset, same size, same mask ramp; anchored to the top of the page instead of a
   hero section, because the hub's pages start straight into content.

   Note the asset is an INFLATED copy. public/home/hero-bg.svg is gzip bytes served as
   image/svg+xml with no content-encoding: gzip, so a browser cannot parse it and the
   homepage's own background silently does not render. Pointing at that file would
   have inherited the bug. */
body::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:560px;
  pointer-events:none;
  z-index:0;
  opacity:.9;
  background-image:url(/community/assets/hero-bg.svg);
  background-size:1440px auto;
  background-position:center top;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 6%, #000 44%, #000 84%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0) 6%, #000 44%, #000 84%, rgba(0,0,0,0) 100%);
}
/* Content sits above the wash. The topbar already owns z-index 30. */
.hs-main{position:relative;z-index:1}