/* Teams page: every team as a small constellation on a night sky (markup: scripts/team/page.mjs; behaviour: teams.js).
   The sky stays dark in both themes. Design tokens only; no inline styles (the content security policy forbids them).
   Motion tiers follow the header: html[data-motion] full (entrances, drawn lines, twinkle, the occasional
   constellation), lite (lines without drawing, no ambient motion) or static (nothing moves). */

body[data-page="teams"] main { max-width: none; padding: 0; }
.tm {
  --tm-sky: color-mix(in srgb, var(--midnight) 46%, var(--ink-0));
  --tm-ink: var(--chart-white);
  --tm-mute: color-mix(in srgb, var(--chart-white) 66%, transparent);
  --tm-faint: color-mix(in srgb, var(--chart-white) 14%, transparent);
  --tm-spring: linear(0, 0.22 7%, 0.86 19%, 1.06 28%, 1.03 36%, 0.99 50%, 1);
  overflow-x: clip;
}
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tm a:focus-visible, .tm button:focus-visible, .tm input:focus-visible { outline: var(--focus-width) solid var(--sky); outline-offset: var(--focus-offset); }

/* colours by name: a team's accent and a person's avatar */
.tm [data-accent="cobalt"], .tm [data-hue="cobalt"] { --ac: var(--sky); }
.tm [data-accent="sky"], .tm [data-hue="sky"] { --ac: var(--sky); }
.tm [data-accent="amber"], .tm [data-hue="amber"] { --ac: var(--amber); }
.tm [data-accent="orchid"], .tm [data-hue="orchid"] { --ac: var(--orchid-lift); }
.tm [data-accent="rose"], .tm [data-hue="rose"] { --ac: var(--rose); }
.tm [data-accent="verde"], .tm [data-hue="verde"] { --ac: var(--verde); }
.tm [data-accent="ember"], .tm [data-hue="ember"] { --ac: var(--ember); }

/* ---------- the sky ---------- */
.tm-sky { position: relative; isolation: isolate; color: var(--tm-ink); padding: clamp(28px, 5vh, 56px) 0 clamp(36px, 6vh, 64px);
  background:
    radial-gradient(50% 60% at 92% 4%, color-mix(in srgb, var(--cobalt) 34%, transparent), transparent 70%),
    radial-gradient(40% 50% at 2% 96%, color-mix(in srgb, var(--orchid) 26%, transparent), transparent 70%),
    radial-gradient(36% 44% at 50% 110%, color-mix(in srgb, var(--verde) 14%, transparent), transparent 70%),
    var(--tm-sky); }
.tm-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/teams-sky.svg") 0 0 / 480px 480px repeat; opacity: 0.55; }
.tm-stars::after { content: ""; position: absolute; inset: 0; background: url("/teams-sky-2.svg") 120px 60px / 720px 720px repeat; opacity: 0.8; }
html[data-motion="full"] .tm-stars::after { animation: tm-twinkle 5.5s ease-in-out infinite alternate; }
@keyframes tm-twinkle { from { opacity: 0.25; } to { opacity: 0.95; } }

.tm-in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 32px); }

/* ---------- heading, numbers, search and the switch ---------- */
.tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-5); }
.tm-title { flex: 1 1 30rem; min-width: 0; }
.tm-k { margin: 0 0 var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--amber); }
.tm h1 { margin: 0 0 var(--space-2); font: 600 clamp(1.6rem, 3.4vw, 2.5rem)/1.1 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; color: var(--tm-ink); }
.tm-lead { margin: 0; max-width: 62ch; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.5; color: var(--tm-mute); text-wrap: pretty; }
.tm-ctl { flex: 0 1 auto; display: grid; justify-items: end; gap: var(--space-2); }
.tm-stats { margin: 0; font: 400 0.95rem/1.3 var(--font-ui); color: var(--tm-mute); text-align: right; }
.tm-stats b { color: var(--tm-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-st-e, .tm-st-q, .tm.is-search .tm-st-a, .tm.is-search .tm-st-e { display: none; }
.tm[data-mode="all"]:not(.is-search) .tm-st-a { display: none; }
.tm[data-mode="all"]:not(.is-search) .tm-st-e { display: inline; }
.tm.is-search .tm-st-q { display: inline; color: var(--tm-ink); font-weight: 600; }
.tm-ctl-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2) var(--space-3); }
.tm-find input { width: min(15rem, 60vw); height: 34px; padding: 0 10px; border: 1px solid var(--tm-faint); border-radius: var(--radius-ui); background: color-mix(in srgb, var(--ink-0) 40%, transparent); color: var(--tm-ink); font: 400 0.92rem/1 var(--font-ui); }
.tm-find input::placeholder { color: color-mix(in srgb, var(--chart-white) 48%, transparent); }
.tm-switch { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--tm-faint); border-radius: var(--radius-ui); background: color-mix(in srgb, var(--ink-0) 40%, transparent); color: var(--tm-ink); font: 600 0.9rem/1 var(--font-ui); cursor: pointer; }
.tm-switch:hover { border-color: color-mix(in srgb, var(--chart-white) 34%, transparent); }
.tm-switch-track { position: relative; width: 34px; height: 18px; border-radius: var(--radius-ui); background: color-mix(in srgb, var(--chart-white) 20%, transparent); transition: background 200ms var(--ease); }
.tm-switch-dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 2px; background: var(--chart-white); transition: transform 320ms var(--tm-spring); }
.tm-switch[aria-checked="true"] .tm-switch-track { background: var(--verde); }
.tm-switch[aria-checked="true"] .tm-switch-dot { transform: translateX(16px); }
.tm-more { margin: 0; font: 400 0.88rem/1.3 var(--font-ui); color: var(--tm-mute); }
.tm-link { padding: 0; border: 0; background: none; color: var(--sky); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* without script there is nothing to switch or search: everyone shows */
html:not(.tm-js) .tm-ctl-row, html:not(.tm-js) .tm-foot b { display: none; }

/* ---------- the field of teams ---------- */
.tm-field { position: relative; display: grid; grid-template-columns: repeat(var(--tm-cols, 6), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; align-items: start; }
.tm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.tm-team { position: relative; z-index: 1; min-width: 0; padding: 9px 9px 10px; border: 1px solid color-mix(in srgb, var(--chart-white) 10%, transparent); border-top: 2px solid var(--ac); border-radius: var(--radius-ui);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 12%, transparent), transparent 70%), color-mix(in srgb, var(--ink-0) 30%, transparent);
  transition: opacity 240ms var(--ease), border-color 240ms var(--ease); }
.tm-team-h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; min-width: 0; }
.tm-logo { flex: none; width: 22px; height: 22px; border-radius: var(--radius-ui); }
img.tm-logo { background: var(--chart-white); padding: 2px; }
.tm-mono { display: grid; place-items: center; background: var(--ac); color: var(--ink-0); font: 700 10px/1 var(--font-ui); letter-spacing: 0.02em; }
.tm-team h2 { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 0.95rem/1.2 var(--font-ui); text-wrap: balance; color: var(--tm-ink); }
.tm-team h2 a { color: inherit; text-decoration: none; }
.tm-team h2 a:hover { text-decoration: underline; text-decoration-color: var(--ac); text-underline-offset: 3px; }
.tm-n { flex: none; font: 600 11px/1 var(--font-ui); color: var(--tm-mute); font-variant-numeric: tabular-nums; }
.tm-n-p { display: none; }
.tm[data-mode="all"] .tm-n-p, html:not(.tm-js) .tm-n-p { display: inline; }

.tm-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; }
.tm-prior { margin-top: 8px; }
.tm-prior-h { margin: 0 0 6px; font: 700 10.5px/1.2 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--chart-white) 50%, transparent); }
html.tm-js .tm[data-mode="active"] .tm-prior { display: none; }

/* team widths: the switch changes how many people a team shows, so each team has a width for each mode */
.tm-wa-2 { grid-column: span 2; } .tm-wa-3 { grid-column: span 3; }
.tm[data-mode="all"] .tm-team, html:not(.tm-js) .tm-team { grid-column: span 1; }
.tm[data-mode="all"] .tm-we-2, html:not(.tm-js) .tm-we-2 { grid-column: span 2; }
.tm[data-mode="all"] .tm-we-3, html:not(.tm-js) .tm-we-3 { grid-column: span 3; }
@media (max-width: 1279px) { .tm-field { --tm-cols: 5; } }
@media (max-width: 1059px) { .tm-field { --tm-cols: 4; } }
@media (max-width: 859px) { .tm-field { --tm-cols: 3; } }
@media (max-width: 659px) {
  .tm-field { --tm-cols: 2; }
  .tm .tm-team.tm-team { grid-column: span 2; }
  .tm .tm-wa-1:not(.tm-we-2), .tm[data-mode="active"] .tm-wa-1 { grid-column: span 1; }
  .tm-people { grid-template-columns: 1fr; }
  .tm-ctl { justify-items: start; }
  .tm-stats { text-align: left; }
  .tm-ctl-row { justify-content: flex-start; }
}
@media (max-width: 459px) { .tm-field { --tm-cols: 1; } .tm .tm-team.tm-team, .tm .tm-wa-1 { grid-column: span 1; } }

/* ---------- a person ---------- */
.tm-card[data-solo] { cursor: default; }
.tm-card { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 7px 5px 5px; border: 1px solid color-mix(in srgb, var(--chart-white) 11%, transparent); border-radius: var(--radius-ui);
  background: color-mix(in srgb, var(--chart-white) 6%, color-mix(in srgb, var(--ink-0) 50%, transparent)); cursor: pointer;
  transition: transform 260ms var(--tm-spring), opacity 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.tm-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-ui); background: var(--ac); color: var(--ink-0); font: 700 11.5px/1 var(--font-ui); letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 50%, transparent), 0 0 14px color-mix(in srgb, var(--ac) 38%, transparent); }
.tm-photo { object-fit: cover; background: var(--tm-faint); }
.tm-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tm-nm { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* an institution gets two lines, then an ellipsis; pointing at the card shows all of it */
.tm-inst { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.tm-nm { font: 600 13px/1.25 var(--font-ui); color: var(--tm-ink); }
.tm-dg { font-weight: 400; color: var(--tm-mute); }
.tm-inst { font: 400 11.5px/1.3 var(--font-ui); color: var(--tm-mute); }
.tm-card:hover, .tm-card.is-on { border-color: color-mix(in srgb, var(--ac, var(--sky)) 70%, transparent); background: color-mix(in srgb, var(--chart-white) 12%, var(--tm-sky)); z-index: 3; }
.tm-card:hover .tm-nm, .tm-card.is-on .tm-nm { white-space: normal; }
.tm-card:hover .tm-inst, .tm-card.is-on .tm-inst { -webkit-line-clamp: unset; line-clamp: none; }
html:not([data-motion="static"]) .tm-card:hover { transform: translateY(-2px); }

/* contributors to earlier versions: a slightly faded box */
.tm-card.is-prior { opacity: 0.62; border-style: dashed; background: color-mix(in srgb, var(--ink-0) 30%, transparent); }
.tm-card.is-prior .tm-av { filter: saturate(0.35); box-shadow: none; }
.tm-card.is-prior:hover, .tm-card.is-prior.is-on { opacity: 1; }

/* lit: one person's cards stand out and the rest step back */
.tm-card.is-on .tm-av { box-shadow: 0 0 0 2px var(--chart-white), 0 0 18px var(--ac); }
.tm-field.is-lit .tm-card:not(.is-on) { opacity: 0.32; }
.tm-field.is-lit .tm-card.is-prior:not(.is-on) { opacity: 0.2; }
.tm-line { fill: none; stroke: var(--ac, var(--sky)); stroke-width: 1.6; stroke-linecap: round; opacity: 0.9; filter: drop-shadow(0 0 4px var(--ac, var(--sky))); }
.tm-field.is-ambient .tm-line { stroke-width: 1.2; opacity: 0.6; }
html[data-motion="full"] .tm-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tm-draw 620ms var(--ease) forwards; }
html[data-motion="full"] .tm-field.is-ambient .tm-line { animation-duration: 1100ms; }
@keyframes tm-draw { to { stroke-dashoffset: 0; } }
.tm-field.is-ambient .tm-card.is-on { border-color: color-mix(in srgb, var(--ac, var(--sky)) 55%, transparent); }

/* search: matches stay, the rest fade */
.tm.is-search .tm-card.is-miss { opacity: 0.16; }
.tm.is-search .tm-card.is-match { border-color: var(--amber); }
.tm.is-search .tm-team.is-miss { opacity: 0.45; }

/* ---------- motion ---------- */
html.tm-js[data-motion="full"] .tm-team { animation: tm-rise 640ms var(--tm-spring) backwards; animation-delay: calc(var(--d, 0) * 45ms); }
.tm-team[data-i="1"] { --d: 1; } .tm-team[data-i="2"] { --d: 2; } .tm-team[data-i="3"] { --d: 3; } .tm-team[data-i="4"] { --d: 4; }
.tm-team[data-i="5"] { --d: 5; } .tm-team[data-i="6"] { --d: 6; } .tm-team[data-i="7"] { --d: 7; } .tm-team[data-i="8"] { --d: 8; }
.tm-team[data-i="9"] { --d: 9; } .tm-team[data-i="10"] { --d: 10; } .tm-team[data-i="11"] { --d: 11; } .tm-team[data-i="12"] { --d: 12; }
.tm-team[data-i="13"] { --d: 13; } .tm-team[data-i="14"] { --d: 14; } .tm-team[data-i="15"] { --d: 15; } .tm-team[data-i="16"] { --d: 16; }
.tm-team[data-i="17"] { --d: 17; } .tm-team[data-i="18"] { --d: 18; } .tm-team[data-i="19"] { --d: 19; }
@keyframes tm-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
/* switching to everyone: the earlier contributors arrive with a small pop */
html[data-motion="full"] .tm[data-mode="all"] .tm-prior .tm-card { animation: tm-pop 420ms var(--tm-spring) backwards; }
@keyframes tm-pop { from { opacity: 0; transform: scale(0.94); } }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease); }
html[data-motion="static"] .tm *, html[data-motion="static"] .tm *::after { transition: none !important; animation: none !important; }
html[data-motion="lite"] .tm-team, html[data-motion="lite"] .tm-card { animation: none; }

.tm-foot { margin: var(--space-5) 0 0; max-width: 72ch; font: 400 0.88rem/1.45 var(--font-ui); color: var(--tm-mute); }
.tm-foot b { color: var(--tm-ink); }