/* Contributor page: five-up roster grid, built on the shared subpages shell */

.cb-hero{display:grid;grid-template-columns:1fr .62fr;gap:clamp(32px,5vw,64px);align-items:end}
.cb-hero>*{min-width:0}
.cb-hero .mx-title{max-width:820px;margin:14px 0 20px}
.cb-hero .mx-lead{max-width:820px}
.cb-counts{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--mx-soft);border-radius:14px;background:var(--mx-panel)}
.cb-counts div{padding:22px 24px;border-right:1px solid var(--mx-soft);border-bottom:1px solid var(--mx-soft)}
.cb-counts div:nth-child(even){border-right:0}
.cb-counts div:nth-last-child(-n+2){border-bottom:0}
.cb-counts b{display:block;color:var(--mx-blue);font-size:1.8rem;line-height:1.1}
.cb-counts span{color:var(--mx-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em}


.cb-count{display:inline-block;margin-left:10px;padding:3px 9px;border:1px solid var(--mx-line);border-radius:999px;color:var(--mx-blue);font:500 .62rem var(--mx-mono);vertical-align:middle}

/* the site nav is sticky, so anchored jumps need headroom */
.cb-papers,.cb-paper-authors{scroll-margin-top:96px}

/* ---- paper overview blocks ---- */
.cb-paper-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cb-paper{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;padding:clamp(22px,2.6vw,32px);border:1px solid var(--mx-line);border-radius:16px;background:linear-gradient(135deg,rgba(74,143,194,.07),var(--mx-panel) 58%,rgba(112,78,162,.04));transition:border-color .18s}
.cb-paper:hover{border-color:rgba(74,143,194,.42)}
.cb-paper:hover .cb-paper-name{color:var(--mx-blue)}
.cb-paper-pending{border-style:dashed;border-color:var(--mx-soft);background:var(--mx-panel)}
.cb-paper-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cb-paper-idx{color:var(--mx-blue);font:500 .62rem var(--mx-mono);letter-spacing:.14em}
.cb-paper-name{margin:20px 0 10px;font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.15;letter-spacing:-.035em}
.cb-paper-name a{color:inherit;text-decoration:none}
.cb-paper-name a:hover{color:var(--mx-blue)}
.cb-paper-sub{max-width:52ch;margin:0;color:var(--mx-dim);font-size:.88rem;line-height:1.6}
.cb-paper-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--mx-soft)}
.cb-paper-stats b{display:block;color:#fff;font-size:1.3rem;font-weight:500;line-height:1.2}
.cb-paper-stats span{color:var(--mx-dim);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em}
.cb-paper-link{margin-top:auto;padding-top:26px;color:var(--mx-blue);font-size:.82rem;text-decoration:none;align-self:start}
.cb-paper-link:hover{color:#fff}

/* ---- per-paper author list ---- */
.cb-paper-tag{display:block;margin-bottom:9px;color:var(--mx-blue);font:500 .62rem var(--mx-mono);letter-spacing:.14em}
.cb-paper-authors .mx-section-head{align-items:start}
.cb-empty{padding:clamp(24px,3vw,38px);border:1px dashed var(--mx-soft);border-radius:14px;background:var(--mx-panel)}
.cb-empty p{max-width:66ch;margin:0;color:var(--mx-dim);font-size:.9rem;line-height:1.65}
.cb-empty strong{color:#fff;font-weight:500}
.cb-empty .cb-paper-link{display:inline-block;padding-top:18px}

/* five people per row, then wrap */
.cb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cb{display:flex;flex-direction:column;min-width:0;padding:13px 16px;border:1px solid var(--mx-soft);border-radius:13px;background:var(--mx-panel);contain:layout paint style;transition:border-color .18s,transform .18s}
.cb:hover{border-color:var(--mx-line);transform:translateY(-2px)}
.cb-name{margin:0 0 5px;font-size:.95rem;line-height:1.3;letter-spacing:-.015em;overflow-wrap:anywhere}
.cb-role{color:var(--mx-blue);font:500 .58rem var(--mx-mono);text-transform:uppercase;letter-spacing:.08em}
.cb-aff{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid var(--mx-soft);color:#9ca4af;font-size:.72rem;line-height:1.4;overflow-wrap:anywhere}
.cb-aff-empty{color:#5c636d}

/* advisors carry a longer affiliation-plus-title line */
#advisors .cb-aff{font-size:.7rem}

.cb-note-section{padding-top:6px}
.cb-note{max-width:900px;margin:0;color:#747b85;font-size:.7rem;line-height:1.65}
.cb-note a{color:var(--mx-dim)}
.cb-note a:hover{color:var(--mx-blue)}

@media(min-width:1200px){
  .cb-grid{gap:14px}
  .cb{padding:16px 20px}
    .cb-name{font-size:1.05rem}
  .cb-role{font-size:.62rem}
  .cb-aff{font-size:.79rem}
  #advisors .cb-aff{font-size:.76rem}
}
@media(max-width:1050px){.cb-hero{grid-template-columns:1fr}.cb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.cb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cb-paper-grid{grid-template-columns:1fr}}
@media(max-width:620px){.cb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cb{padding:12px 14px}.cb-name{font-size:.88rem}}
@media(max-width:400px){.cb-grid{grid-template-columns:1fr}.cb-counts{grid-template-columns:1fr}.cb-counts div{border-right:0}.cb-counts div:nth-last-child(-n+2){border-bottom:1px solid var(--mx-soft)}.cb-counts div:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.cb:hover{transform:none}}

/* the paper pages open straight on the heading; without this the first
   section adds its 70-120px top margin on top of the shell padding */
.mx-shell>.mx-section:first-child{margin-top:0}

/* ===================================================================
   Contributor index (/contributor/): roster masthead + paper index.

   The masthead draws one square per person, all alike: the roster is one
   group, so the squares carry scale, not role. Only the counts underneath
   name the groupings. The papers below are a ruled index, not cards: rows
   fill the width honestly and add a row per paper without reflowing.
   =================================================================== */

.cx-mast-title{margin:0 0 clamp(30px,3.6vw,44px)!important}
.cx-roster{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}

/* One mark per person. The ramp is a single hue at three lightnesses, and it
   encodes the sweep travelling across the roster -- never the person. Every
   mark starts and ends at the same --u-rest, so no one is left brighter than
   anyone else; a mark is only bright while the wave is passing over it. */
.cx-units{--u-rest:#356F9B;--u-dark:#16324A;--u-peak:#A6DCFF;
  display:grid;grid-template-columns:repeat(auto-fill,14px);gap:7px;
  align-content:start;width:min(100%,720px)}
.cx-units i{display:block;width:14px;height:14px;background:var(--u-rest);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%274.5%27%20r%3D%273.05%27%2F%3E%3Cpath%20d%3D%27M8%208.9c-3.25%200-5.55%201.95-5.55%204.3V15h11.1v-1.8C13.55%2010.85%2011.25%208.9%208%208.9z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%274.5%27%20r%3D%273.05%27%2F%3E%3Cpath%20d%3D%27M8%208.9c-3.25%200-5.55%201.95-5.55%204.3V15h11.1v-1.8C13.55%2010.85%2011.25%208.9%208%208.9z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* ---- ruled paper index ---- */
/* no border-top here: .mx-section-head already rules off under the heading */
.cx-rows{margin:0;padding:0;list-style:none}
.cx-item{border-bottom:1px solid var(--mx-soft)}
.cx-row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,3vw,44px);padding:clamp(22px,2.6vw,30px) clamp(8px,1.4vw,18px);
  color:inherit;text-decoration:none;transition:background-color .18s}
.cx-row:hover{background:rgba(74,143,194,.05)}
.cx-row:focus-visible{outline:2px solid var(--mx-blue);outline-offset:-2px;border-radius:8px}
.cx-num{color:var(--mx-blue);font:500 .62rem var(--mx-mono);letter-spacing:.14em}
.cx-name{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:400;line-height:1.15;
  letter-spacing:-.035em;transition:color .18s}
.cx-row:hover .cx-name{color:var(--mx-blue)}
.cx-act{display:inline-flex;align-items:center;gap:9px;color:var(--mx-blue);
  font-size:.8rem;white-space:nowrap}
.cx-arrow{flex:none;width:15px;height:15px;transition:transform .18s}
.cx-row:hover .cx-arrow{transform:translateX(4px)}

.cx-item--pending .cx-num,.cx-item--pending .cx-name{color:var(--mx-dim)}
.cx-item--pending .cx-act{color:var(--mx-amber)}
.cx-item--pending .cx-row:hover .cx-name{color:var(--mx-dim)}

/* ---- the roster lights up one by one, then keeps a slow pulse ---- */
/* Two animations per mark: the arrival, then a wave that crosses the grid and
   leaves it as it found it. The stagger is computed from --i so the count can
   change without rewriting a delay into every element. */
@media(prefers-reduced-motion:no-preference){
  .cx-units i{
    opacity:0;
    animation:
      cxUnitIn .34s ease-out both calc(var(--i) * .012s),
      cxSweep 6.5s linear calc(var(--i) * .026s + .34s) infinite;
  }
}
@keyframes cxUnitIn{
  from{opacity:0;transform:translateY(3px) scale(.82);background:var(--u-dark)}
  60% {background:var(--u-peak)}
  to  {opacity:1;transform:none;background:var(--u-rest)}
}
@keyframes cxSweep{
  0%  {background:var(--u-rest)}
  4%  {background:var(--u-peak)}
  16% {background:var(--u-rest)}
  100%{background:var(--u-rest)}
}

@media(max-width:720px){
  .cx-row{grid-template-columns:1fr;gap:11px;padding:20px 4px}
  .cx-act{justify-self:start}
}
@media(max-width:560px){
  .cx-units{grid-template-columns:repeat(auto-fill,11px);gap:6px}
  .cx-units i{width:11px;height:11px}
}

/* a pending roster is a dead end without somewhere to go next */
.cx-link{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  color:var(--mx-blue);font-size:.82rem;text-decoration:none}
.cx-link:hover{color:var(--mx-ink)}
.cx-link:hover .cx-arrow{transform:translateX(4px)}