/* ── Cluster map — /people/landing (2026-08-17) ──────────────────────────
   The whole people browse: every cluster, every role inside it, as compact
   avatar cards. templates/content/_cluster-map.html.twig. Replaced first the
   cluster pill row and then — after manual testing — the full-size role tile
   sections that used to sit below it. See
   documentation/person-type-subtabs-plan.md.

   Why it exists: the cluster → person_type mapping used to be expressed only
   by vertical position, ~2,400px desktop / ~4,700px mobile, ten of whose 31
   tiles were repeats a reader could only discover by scrolling to the bottom.

   Own file rather than the tail of role-browse.css (322 lines, against the
   ~350-400 split threshold) per documentation/css-organisation.md §1-2.
   role-browse.css still owns the .np-role-tile / .np-role-avatar components:
   the tiles are retired from THIS page but the classes are shared with
   templates/content/_tile-group.html.twig (publications), and the avatar stack
   here is the same component, scaled down below rather than re-implemented.

   Hues arrive by cascade from the data-cluster map in css/colors.css, whose
   arms cover .np-cluster (retired here), .np-role-map-group (this file) and
   .np-map-chip-notch. Nothing is duplicated here.

   Colour is never the only cue: group names and the visually-hidden "also
   in …" text carry the meaning, because two hue pairs collapse under
   protanopia (plan §3). Don't "simplify" the notch by dropping that text. */

.np-role-map {
  display: flex;
  flex-wrap: wrap;
  /* Row gap > column gap: groups on one row must read as separate columns,
     and rows as separate bands. */
  gap: 26px 30px;
  margin: 0 0 10px;
}

/* Group width is driven by data-span, which PersonTypeTilesBuilder::rowSpan()
   derives from the width each group's own chips need. No cluster key appears
   here: a new or renamed cluster sizes itself.

   `auto` (the default) keeps the intrinsic packing that lets the small
   clusters flow three-up on the first row — Ruānuku and Poari are ~110px of
   chips each, and that row is worth preserving. */
.np-role-map-group {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(100%, 40rem);
}

/* A group whose chips need more than ~1.5 rows. Giving it the row makes it
   SHORTER, which is the counter-intuitive part: Whakaputa's nine chips wrap to
   three lines at the 40rem cap and two lines across the full width. */
.np-role-map-group[data-span="full"] {
  flex-basis: 100%;
  max-width: 100%;
}

/* Half-row groups pair up: two per row instead of two rows. The basis (not a
   fixed width) still lets a small `auto` group tuck in alongside where there
   is room — Tautoko and Kairangahau share a row that way. */
.np-role-map-group[data-span="half"] {
  /* 20px, not the exact 15px half-gap: two halves at 50% - 15px plus the
     30px gap total exactly 100%, which fits only until something rounds up.
     The extra 5px each is the slack that keeps the pair on one row. */
  flex-basis: calc(50% - 20px);
  max-width: calc(50% - 20px);
}

/* ---------- group header ----------
   A filled pill in the cluster's hue, white text. Replaced a hue left-rule
   with dark text 2026-08-17: with eight groups on a page the thin rule was
   too small a colour sample to tell clusters apart at a glance, which was the
   first thing users said about the map.

   The fill is --tile-hue-DK, not the base hue. White on the base hue fails
   4.5:1 on two of the eight (researchers #bb5f38 at 4.37:1, and
   community-networks-local #a67c50 at 3.74:1), and 15px bold is not WCAG
   "large text" (that starts at 18.66px bold), so it gets no exemption. Every
   -dk clears 6:1. The chips keep the base hue on their borders, which also
   gives the header/chip hierarchy something to say. */
.np-role-map-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 11px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--tile-hue-dk, #4a453d);
  text-decoration: none;
  transition: box-shadow .15s;
}
.np-role-map-name {
  /* !important is the escape hatch typography.css itself uses — its heading
     rule sets font-weight 100 !important and would otherwise win. */
  font-weight: 700 !important;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
}
.np-role-map-n {
  font-size: 12px;
  font-weight: 600;
  /* Not a lighter alpha: at 12px this is the smallest text in the component
     and needs the full 4.5:1 the fill was chosen for. */
  color: #fff;
  opacity: .85;
  white-space: nowrap;
}
/* No colour change on hover — there is no darker token to move to, and going
   lighter would drop the two tight hues below contrast. */
.np-role-map-label:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.np-role-map-label:focus-visible {
  outline: 3px solid var(--tile-hue-dk, #6c675f);
  outline-offset: 3px;
}

/* ---------- role chips ----------
   A pill, with the role's faces floating on the page background beneath it —
   no card, no border around the pair. The pill carries the affordance; the
   avatars are preview, so giving them their own container would make each one
   look like a tile again, which is what this page moved away from. */
.np-role-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 10px;
  margin: 0;
  padding: 0 0 0 15px;
  list-style: none;
}

/* ---------- teams inside a cluster ----------
   Two columns, one per person_type parent, when the hierarchy holds a split
   worth drawing (builder-side rule; Whakaputa only, today). Parallel rather
   than stacked because the two journals are siblings, not a sequence — and
   because it mirrors the paired Hapori groups directly below.

   On phones the columns stack, which is the row-per-team layout, so the
   narrow view is the alternative arrangement for free. */
.np-role-map-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-left: 15px;
}
.np-role-map-sub {
  flex: 1 1 calc(50% - 12px);
  min-width: 0;
}
.np-role-map-sub .np-role-map-chips { padding-left: 0; }
/* Quiet, in the cluster's own dark hue: this is a level BELOW the header pill
   and must not compete with it. Not a heading element — the group header
   above it is a link, not an h*, so an h3 here would invent a level the page
   does not have; the <ul> carries aria-label instead. */
.np-role-map-sub-title {
  display: block;
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tile-hue-dk, #6c675f);
}

/* `np-map-chip`, NOT `np-role-chip` — that name is taken. css/curated-people-list.css
   owns .np-role-chip (the D-22 person_type chips on person cards), and its
   `.np-role-chip > a, .np-role-chip > span` rule is specificity 0-1-1 against a
   plain `.np-role-chip-pill` class at 0-1-0. It therefore wins whatever the load
   order, and it painted this pill's border grey and wrapped the avatar stack —
   also a direct child span — in a stray pill outline. Renamed rather than
   out-specified: the older component had the name first. */
.np-map-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
}

/* White ground + a 2px border in the cluster's own hue: the pill carries its
   cluster's colour itself, so a chip stays legible as "one of Whakaputa's"
   when it is read on its own — which is exactly what the repeated roles need,
   since the same chip appears under two clusters.
   Every hue clears 3:1 on white (the lightest, community-networks-local
   #a67c50, measures 3.73:1), so the border satisfies WCAG 1.4.11 non-text
   contrast as a UI boundary rather than relying on the old grey. */
.np-map-chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* >= 24px tall: WCAG 2.2 AA 2.5.8 target size. The .np-people-subtab
     padding this look borrows from is 3px/12px and misses it — size up
     here rather than copying that across. */
  min-height: 28px;
  padding: 4px 12px;
  border: 2px solid var(--tile-hue, #6c675f);
  border-radius: 999px;
  background: #fff;
  color: #2c2c2b;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.np-map-chip:hover .np-map-chip-pill {
  border-color: var(--tile-hue-dk, #2c2c2b);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.np-map-chip:focus-visible {
  outline: 3px solid var(--tile-hue, #6c675f);
  outline-offset: 3px;
  border-radius: 12px;
}
.np-map-chip-name { min-width: 0; }
/* The count sits inside a hue-bordered pill now, so the old grey read as a
   third colour. -dk rather than the base hue: it is text, and needs 4.5:1. */
.np-map-chip-n { color: var(--tile-hue-dk, #6c675f); font-weight: 700; }

/* Avatar stack — the .np-role-avatar component from role-browse.css, scaled
   from 38px to 24px. Overridden here rather than forked so there is one
   avatar look across the site. Indented to sit under the pill's text rather
   than its border, so the faces read as belonging to it. */
.np-map-chip-avatars {
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.np-role-map .np-role-avatar {
  width: 24px;
  height: 24px;
  margin-left: -7px;
  border-width: 1.5px;
}
.np-role-map .np-role-avatar:first-child { margin-left: 0; }
.np-role-map .np-role-avatar-initial { font-size: 10px; }
.np-role-map .np-role-avatar--more { font-size: 10px; }
/* The faces sit on the page, not on a card, so the white ring that separated
   them from the tile's white background is doing nothing — but it still keeps
   overlapping portraits apart, so it stays, thinner. */

/* Shared-membership dot — one per OTHER cluster this role renders under, in
   that cluster's hue (the .np-map-chip-notch[data-cluster] arm of the
   colors.css map). With the role repeated in full under every cluster it
   belongs to, this is the only on-chip cue that you have met these faces
   already. Decorative by contract: the same fact is in the chip's
   visually-hidden text, which is what a reader who cannot separate the hues
   relies on. */
/* A dot, not a bar — 8px round, the same shape and size the cluster pills use
   for their hue dot (.np-people-tab::before, .np-pubsearch-tab::before), so
   "a coloured dot means a cluster" reads the same everywhere on the site.
   The class name still says notch: it is the selector the colors.css hue map
   and the contract are keyed on, and renaming it buys nothing. */
.np-map-chip-notch {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tile-hue, #6c675f);
}

/* ---------- narrow screens ----------
   Co-located per css-organisation.md §2 — this is the map's own breakpoint,
   not a cross-component override. One group per row, two cards per row: at
   phone widths intrinsic packing has nothing to pack, but the cards are
   narrow enough to pair rather than stack one-up as the old tiles did. */
@media (max-width: 719px) {
  .np-role-map {
    gap: 20px;
  }
  /* One group per row at phone widths — the span hints assume a desktop-ish
     row and have nothing to pack against here. */
  .np-role-map-group,
  .np-role-map-group[data-span="full"],
  .np-role-map-group[data-span="half"] {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .np-role-map-chips {
    gap: 12px 8px;
    padding-left: 12px;
  }
  /* Team columns stack — this is option 2, the row-per-team layout. */
  .np-role-map-subs { gap: 14px; padding-left: 12px; }
  .np-role-map-sub { flex: 1 1 100%; }
  .np-role-map .np-role-avatar {
    width: 21px;
    height: 21px;
    margin-left: -6px;
  }
}