/* ==========================================================================
   The capability constellation — index.html only
   ==========================================================================
   Links are SVG, nodes are HTML absolutely positioned on top of them. That
   split is not a compromise, it is the same one the hero makes for its pins
   over the map, and for the same two reasons: an agency node is its logo tile,
   which is markup data.js already knows how to build, and every node has
   to be a real focusable button rather than a shape with a click handler.

   Additive. Loads after base.css, immersive-hero.css, hero-map.css and
   service-filter.css, and only adds selectors.
   ========================================================================== */


/* ==========================================================================
   01. Discipline colours
   ==========================================================================
   Six hues, anchored on the brand purple, which goes to the largest cluster
   rather than to whichever discipline sounded most important. The rest are far
   enough apart on the wheel to be told apart at 10px, and warm/cool balanced so
   no half of the graph reads as louder than the other.

   These are the graph's own palette and deliberately not the map's: the plate
   is entirely purple because there purple means "a member is here", and one
   colour cannot mean two things on one page. The constellation sits on white,
   a screen away, and is colouring a different question. */
/* THE SIX --d-* HUES NOW LIVE IN base.css, with their unpacked triples, because
   the tools page uses them too and a colour declared inside one component's
   sheet is a colour the next feature copies rather than reuses. The values did
   not change and the reasoning above is still theirs. The member counts they
   used to carry: brand 6, digital 4, b2b 3, content 2, pr 2, media 2. */
:root{
  --net-ink  :#212934;
  --net-dim  :#6B7280;
  /* Link stroke at rest. This was #C9CDD6, which is 1.6:1 on white — under the
     3:1 floor the design system already reasons about for non-text (see the
     --scroll-thumb note in base.css), and far enough under it that the
     connections read as absent. A network graph whose edges cannot be seen is a
     scatter plot. #8B94A6 clears 3:1 while staying a neutral that the six
     cluster colours can sit on top of. */
  --net-line :#8B94A6;
}


/* ==========================================================================
   02. The section
   ========================================================================== */
/* Matches .directory's 48/48 rather than sitting at its own tighter rhythm —
   this is a full section of the page and it reads as one, so it should measure
   like one. */
/* No rule above it either. The section boundary is already stated by the fill
   changing from the directory's white to this band's tint, and a hairline drawn
   on top of a colour change states it twice. Same reason .net-stage lost its
   outline and .member-card never had one. */
.netsec{
  padding:var(--sec) 0;
  /* The tinted half of the alternation. Named through the surface token rather
     than --offwhite directly, so flipping the run re-tones this band with it. */
  background:var(--surface-alt);
  border-top:0;
}
.netsec[hidden]{display:none}

/* The closer carries no top padding of its own: base.css sets it to zero
   deliberately, so that the section above supplies the single gap and the space
   above the box equals the space below it.

   That works while the section above is on white. It breaks the moment this
   section is above it, because this one is tinted — its bottom padding is the
   band's own inside edge, not open page, so the mist box ended up starting at
   the exact pixel the band stopped. Two greys, touching, with the box appearing
   to grow out of the band rather than sit after it.

   So the gap is restored here, on the same adjacent-sibling pattern
   base.css already uses for `.svc-sec + .closer` — a rule that exists for
   precisely this situation — and at the same --s14, because a tinted band needs
   at least the separation a white one was given. */
/* `.netsec + .closer .wrap{padding-top:var(--s14)}` stood here. The closer now
   carries its own symmetric section padding from --sec-lg, so it no longer needs
   a rule per thing it might follow. See the note on .closer in base.css. */

/* Centred, and following a pattern rather than setting one. The directory
   directly above is centred with a capped, centred deck under its heading
   (hero-map.css, `.directory .directory-head` / `.directory-deck`) and the
   closer below is centred too. Left-aligned, this was the one section header on
   the page not doing what the two either side of it do. */
.net-head{
  max-width:64rem;margin:0 auto var(--s6);
  text-align:center;
}
/* Display type wants as few breaks as it can get, and a centred headline with a
   short first line and a long second one reads as a mistake. balance evens the
   lines where the browser supports it and is simply ignored where it does not. */
.net-head .t-h2{
  text-wrap:balance;
}
/* Same measure and same type as .directory-deck, so the two section intros are
   the same object. Capped well short of the grid for the reason that rule
   already gives: a deck set the full width of the page is a rule of text, not a
   paragraph. */
.net-lede{
  max-width:60ch;margin:var(--s4) auto 0;
  color:var(--gray);font-size:17px;line-height:27px;
  text-wrap:pretty;
}
/* Its own row at every width. The two sentences above it are claims about the
   graph; this one is the instruction for using it, and it should start where
   the eye returns rather than wherever the line above happened to run out. */
.net-lede-cue{display:block}

/* -- legend ------------------------------------------------------------
   Doubles as a control: each swatch is the same filter the graph's own
   discipline nodes fire, for anyone who would rather read a list than hunt a
   cluster. */
.net-legend{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2);
  margin-bottom:var(--s6);
}

/* Filled, not outlined - the same rule .member-card states in its own comment
   and .net-stage now follows. The hairline these carried was doing the work the
   fill should: six outlined pills on an offwhite band read as six empty boxes
   with the colour trapped in a dot, and the outline on the active one was the
   only thing marking it. --mist is the token for exactly this ("neutral chip
   fill"), and it separates from the band it sits on without a line. */
.net-key{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;
  border:0;border-radius:var(--r-pill);
  background:var(--mist);
  font:500 13px/1 "Libre Franklin",sans-serif;color:var(--slate);
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}

/* Three levels, and they are three sizes rather than three greys: the swatch
   carries the colour, the name carries the meaning, the count is a footnote to
   the name. It used to sit at the name's size and near its weight, so a key
   read as two words of equal rank - "Brand & campaigns" and "6". */
.net-key i{
  width:8px;height:8px;border-radius:50%;background:var(--ac);flex:none;
}
.net-key b{
  margin-left:1px;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ash);
}

/* Hover and on are the same move at two strengths - the fill takes on the
   discipline's own colour - so the control never has to borrow an outline to
   say which one is live. The tint is kept light and the ink kept dark on
   purpose: filling with the accent outright would put white type on Media &
   activation's amber at about 2:1, and the six hues are too far apart in
   luminance for any single foreground to clear 4.5:1 across all of them. */
.net-key:hover{background:color-mix(in srgb,var(--ac) 12%,var(--white))}
.net-key:focus-visible{outline:var(--focus-w) solid var(--lavender);outline-offset:var(--focus-off)}
.net-key.is-on{
  background:color-mix(in srgb,var(--ac) 22%,var(--white));
  color:var(--slate);
}
/* Deliberately not a weight change on the active key. Six pills wrap-centred in
   a row: bolding one widens it, and every key after it slides. The tint says
   which is live without moving anything. */
.net-key.is-on b{color:var(--slate)}


/* ==========================================================================
   03. The stage
   ==========================================================================
   Aspect-ratio rather than a fixed height: the layout is solved in a unit
   square and projected into whatever box this is, so the box has to keep a
   stable shape or the constellation stretches. */
/* The aspect ratio is a capacity decision, not a taste one. The layout is solved
   in a unit square and projected into this box, so a narrower box puts the same
   45 nodes closer together in pixels — while the labels, being type, stay the
   size they were. Below about 1280 the 16:10 box stops having room for the
   labels of a whole traced cluster, so the box gets taller instead of the text
   getting smaller. Measured at each step; see the note on placeLabels(). */
/* Filled, not outlined — the rule .member-card states in its own comment and
   .join-card and .closer-box both follow. The hairline this used to carry made
   the stage the only outlined surface in the section, drawing a box around the
   constellation before it drew the constellation. The fill difference against
   the band is what separates it now.

   --r-lg, not --r-md: the token scale reserves --r-md for compact rows and
   --r-lg for full surfaces, and at 1352x845 this is the largest surface on the
   page. It was the only full-size panel set at the compact radius. */
.net-stage{
  position:relative;
  aspect-ratio:4 / 3;
  width:100%;
  border:0;border-radius:var(--r-lg);
  background:var(--white);
  overflow:hidden;
}
/* Wide screens have the width to spare, so the box flattens out and the six
   clusters spread across it rather than stacking. */
@media (min-width:1281px){
  .net-stage{aspect-ratio:16 / 10}
}

.net-links{position:absolute;inset:0;width:100%;height:100%;display:block}
.net-nodes{position:absolute;inset:0}


/* ==========================================================================
   04. Links
   ========================================================================== */
.net-links line{
  stroke:var(--net-line);
  stroke-width:1.15;
  stroke-linecap:round;
  transition:stroke .2s ease,stroke-opacity .2s ease,stroke-width .2s ease;
}
/* A service belongs to exactly one discipline, so that edge is a statement of
   membership and carries the cluster's colour. An agency-to-service edge is a
   claim about capability and stays neutral, which is what lets the six clusters
   read as clusters instead of as one coloured mesh.

   The neutral one is the stronger of the two on purpose. "This agency does this
   thing" is the substance of the graph; "this thing belongs to that discipline"
   is its filing system. The colour carries the second well enough on its own,
   so it can stay lighter without going quiet. */
.net-links line.l-member{stroke:var(--ac);stroke-opacity:.55;stroke-width:1.3}
.net-links line.l-holds {stroke:var(--net-line);stroke-opacity:.9}

/* Tracing one node: its own edges brighten, everything else recedes far enough
   that the trace is the only thing left to read. */
.net-stage.is-tracing .net-links line{stroke-opacity:.07}
.net-stage.is-tracing .net-links line.is-lit{
  stroke:var(--ac);stroke-opacity:1;stroke-width:1.8;
}


/* ==========================================================================
   05. Nodes
   ==========================================================================
   Positioned by percentage from the solved layout, and translated by -50% so
   the coordinate is the node's centre rather than its corner — which matters
   because the three node types are three different sizes. */
.net-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:0;background:none;
  font:inherit;color:var(--net-ink);
  cursor:pointer;
  transition:opacity .22s ease;
}
.net-node:focus-visible{outline:none}
.net-node:focus-visible .net-mark{outline:var(--focus-w) solid var(--lavender);outline-offset:var(--focus-off)}

.net-mark{
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ac);
  transition:transform .18s cubic-bezier(.22,.68,.28,1),box-shadow .18s ease;
}
.net-node:hover .net-mark{transform:scale(1.12)}

.net-label{
  font-size:11px;line-height:1.25;font-weight:500;
  text-align:center;white-space:nowrap;
  color:var(--net-dim);
  pointer-events:none;
}

/* -- discipline: the hubs -------------------------------------------------
   The largest thing in the graph because it is the thing the clusters are
   organised around, and the only type labelled unconditionally. */
.n-discipline{z-index:3}
.n-discipline .net-mark{
  width:52px;height:52px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 18%,transparent);
}
.n-discipline .net-count{
  color:var(--white);font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums;
}
.n-discipline .net-label{
  font-size:12px;font-weight:600;color:var(--net-ink);
  max-width:13ch;white-space:normal;
}

/* -- agency: the subject --------------------------------------------------
   Its logo, not a coloured dot. Thirty-four of the forty-five nodes are dots;
   making the eleven that the page is actually about look like themselves is
   what keeps them the subject rather than eleven more points in a mesh.

   No discipline colour on the mark: an agency bridging two clusters cannot
   honestly take one of their colours, and eight of the eleven bridge two. They
   stay neutral and let their position between the clusters do the talking. */
.n-agency{z-index:4}
.n-agency .net-mark{
  width:38px;height:38px;
  background:var(--white);
  border-radius:50%;
  box-shadow:0 1px 3px rgb(20 22 30 / .16), 0 0 0 1px var(--line);
  overflow:hidden;
}
/* The tile is square with a 25% radius by default; inside a round node it takes
   the node's shape instead, so the logo fills the circle rather than sitting in
   a rounded square inside it. */
.n-agency .tile{
  width:100%;height:100%;
  border-radius:50%;
  background:var(--white);
  /* .tile sets its initials in white, because everywhere else it sits on a
     colour. Here the ground is white, so without this an agency whose logo file
     fails to load — data.js removes the <img> on error and falls back to
     initials — would leave a blank circle instead of a monogram. */
  color:var(--slate);
  font-size:12px;
}
/* A member with a mark of its own ground (data.js `markbg`) keeps it: the
   tile is that colour rather than white, which is the whole point of the
   property. Doubled class to outrank the white above. */
.n-agency .tile:has(.logoimg-onbg){background:var(--markbg,var(--plum))}
.n-agency .net-label{
  font-size:11px;font-weight:600;color:var(--net-ink);
  max-width:15ch;white-space:normal;
}

/* -- service: the leaves --------------------------------------------------
   Small, and labelled only on approach. Twenty-eight labels at rest is a wall
   of text where a shape should be. */
/* Sized by how many members offer it — 11px for the twenty-two a single agency
   holds, 18px for the three that all three of theirs do. It is the only number
   a service node has, and it is the one the section's lede is about: the
   network's strength is the overlap, not the duplication. Set per node by
   network-graph.js; the fallback is the middle step. */
.n-service{z-index:2}
.n-service .net-mark{width:var(--dot,14px);height:var(--dot,14px)}
/* Placed by script, not by this rule. It used to sit directly under its dot,
   which is fine for one label and wrong for seven: tracing a discipline reveals
   every service in it at once, and this graph deliberately packs a cluster's
   services close to their hub, so a column of labels all hanging straight down
   landed on top of each other and on whatever else was underneath. --lx/--ly
   carry the offset that placeLabels() solved for, in px from the dot's centre. */
.n-service .net-label{
  position:absolute;left:50%;top:50%;
  transform:translate(calc(-50% + var(--lx,0px)), calc(-50% + var(--ly,14px)));
  opacity:0;
  padding:3px 7px;border-radius:var(--r-sm);
  /* Opaque. At .92 the links and the relief behind it read straight through the
     pill, which is most of why the text was hard to make out. */
  background:var(--white);
  border:1px solid var(--line);
  color:var(--net-ink);font-size:11px;font-weight:600;line-height:1.25;
  box-shadow:0 2px 8px rgb(20 22 30 / .14);
  transition:opacity .16s ease;
}
.n-service:hover .net-label,
.n-service:focus-visible .net-label,
.n-service.is-lit .net-label{opacity:1}

/* A visible label has to sit above every other node, or the dot it belongs to
   gets to hide it behind an agency logo two pixels away. */
.n-service.is-lit,
.n-service:hover,
.n-service:focus-visible{z-index:7}

/* Choosing a discipline should name what is in it, not just colour it in. The
   labels are collision-solved, so revealing a whole cluster's worth is safe. */
.net-stage.is-filtered .n-service.in-filter .net-label{opacity:1}
.net-stage.is-filtered .n-service.in-filter{z-index:6}

/* -- tracing ---------------------------------------------------------------
   Same language the map uses for the same idea: what you did not ask for steps
   back, it does not leave. */
.net-stage.is-tracing .net-node{opacity:.16}
.net-stage.is-tracing .net-node.is-lit,
.net-stage.is-tracing .net-node.is-source{opacity:1}
.net-stage.is-tracing .net-node.is-source .net-mark{transform:scale(1.12)}


/* ==========================================================================
   06. Filter awareness
   ==========================================================================
   The whole argument of the service filter was one state across every surface.
   A constellation that ignored it would be the fourth surface and the first
   one not listening. When a discipline is chosen the graph holds that cluster
   and its agencies, and everything else recedes — the same reading the map and
   the directory are showing at that moment, in the third grammar. */
.net-stage.is-filtered .net-node{opacity:.14}
.net-stage.is-filtered .net-node.in-filter{opacity:1}
.net-stage.is-filtered .net-links line{stroke-opacity:.06}
.net-stage.is-filtered .net-links line.in-filter{stroke-opacity:.9;stroke:var(--ac)}

/* Tracing is a hover; the filter is a decision. A hover should be able to look
   around inside a filtered graph without the filter fighting it. */
.net-stage.is-filtered.is-tracing .net-node{opacity:.1}
.net-stage.is-filtered.is-tracing .net-node.is-lit,
.net-stage.is-filtered.is-tracing .net-node.is-source{opacity:1}

/* Centred with the head it closes. A caption left-aligned under a centred
   section would put the only ragged edge in the block at the bottom of it. */
.net-hint{
  max-width:70ch;margin:var(--s4) auto 0;
  text-align:center;
  color:var(--ash);font-size:13px;line-height:1.5;
}


/* ==========================================================================
   07. Narrow
   ==========================================================================
   Forty-five nodes at 390px is tight, so the graph gives up the two things it
   can afford to: the service labels on hover (a thumb has no hover anyway) and
   some of its width-to-height ratio, which buys the clusters room to separate. */
@media (max-width:900px){
  /* Level with .directory, which drops to --s9 at this width for the same
     reason, and the gap above the box comes down with it. */

  /* Six keys wrap to three or four rows here, so the row gap is doing more work
     than the column gap and the padding has to give a little back to keep two
     of the shorter names on a line together. */
  .net-legend{gap:6px}
  .net-key{padding:7px 12px 7px 10px;font-size:12px;gap:7px}

  /* Back to the compact radius, following the token scale's own rule that the
     radius belongs to the size of the surface: 24px is under 2% of the width of
     the desktop stage and 7% of this one. It is also load-bearing here — at
     350px wide the corner arc reached far enough in to clip the bottom-left of
     the "PR & public affairs" label, which sits about 30px from the edge. */
  .net-stage{border-radius:var(--r-md)}
  .net-stage{aspect-ratio:4 / 5}
  .n-discipline .net-mark{width:42px;height:42px}
  .n-discipline .net-count{font-size:13px}
  /* Narrower than it looks like it needs to be. The solved layout insets every
     node 8.5% from the frame, which is ~30px at this width — enough for a mark
     but not for a label centred on it, so "PR & public affairs" and "Media &
     activation" hung 6-8px past the left edge and were clipped by the stage.
     Wrapping them one word earlier is the fix at the cause; widening the inset
     would have cost the graph room at every breakpoint to solve a problem that
     only exists at this one. */
  .n-discipline .net-label{font-size:10px;max-width:8ch;line-height:1.3}
  .n-agency .net-mark{width:30px;height:30px}
  .n-agency .net-label{display:none}
  .n-service .net-mark{width:10px;height:10px}

  /* Service names come off entirely here, and that is a measurement rather than
     a preference: the stage is about 350px across at this width, and a traced
     cluster can hold seven names of sixty to ninety pixels each. There is no
     arrangement of those that does not overlap — the placement solver's own
     numbers say so — and seven names stacked on each other read as less than
     none. What is left still works: the six disciplines keep their labels, the
     legend names them again above, and every service is listed in full on the
     member cards directly below. There is no hover on a phone to lose. */
  .n-service .net-label{display:none}
}


/* -- the small phones ------------------------------------------------------
   Below about 400px the marks start landing on each other, and the count is
   worth stating because it is what this block is for: at 430px eight pairs of
   marks overlap, at 390px thirteen, at 360px eighteen, at 320px twenty-six.
   The layout cannot be re-solved per breakpoint — it is one seeded solve, which
   is what makes the picture the same picture everywhere — so the only variable
   left is how much room each node takes up in it. Shrinking the three marks is
   the whole fix, and it is proportionate: they were sized for a stage four
   times this wide.

   440, not 400: the counts above are the stage's problem, and the stage is
   40px narrower than the viewport once .wrap has taken its padding. Keyed at
   400 this block missed the 430px phones, which is most of them. */
@media (max-width:440px){
  .n-discipline .net-mark{width:36px;height:36px}
  /* The bottom-most hub's name no longer fits inside the stage under it: the
     layout insets every node 8.5% from the frame, and 8.5% of a 350px-tall
     stage is 30px, where half a mark plus a two-line name wants 45. So the box
     stops clipping and the name is allowed to hang a few pixels past the
     bottom edge, onto the band the stage is sitting on.

     Two better-looking fixes were tried and are worse. Moving the label above
     its mark lands it on the two agency logos beside it — a caption on top of
     a logo is a worse failure than a caption crossing a background edge. And
     reversing the flex order moves the mark down by the height of the label it
     swapped with, so the clipped name becomes a clipped circle.

     The traffic layer keeps its own overflow:hidden, so the pulses are still
     contained; it is only the labels that are free to overhang. */
  .net-stage{overflow:visible}
  .n-discipline .net-count{font-size:12px}
  .n-discipline .net-label{font-size:9.5px;max-width:7ch}
  .n-agency .net-mark{width:24px;height:24px}
  .n-service .net-mark{width:8px;height:8px}
}


/* -- landscape on a phone, and any short window ----------------------------
   The one case that was properly broken. The narrow block above turns the stage
   portrait — 4/5, taller than it is wide — on the reasonable assumption that a
   narrow viewport is a tall one. Turn the phone sideways and that assumption
   inverts: at 844x390 the stage came out 995px tall, two and a half times the
   height of the screen it is on. The graph was not small, it was unreachable —
   you scrolled through it a third at a time and never saw the shape, which is
   the only thing this section exists to show.

   Keyed on the height and the orientation rather than the width, because that
   is what is actually wrong: it is a short window, and a short desktop window
   has the same problem. The stage goes wide and is capped against the viewport,
   and the marks come down because the solved layout is being squashed into a
   flatter box than it was drawn for. */
@media (max-height:560px) and (orientation:landscape){
  .net-stage{
    aspect-ratio:16 / 9;
    max-height:82vh;
    border-radius:var(--r-md);
  }
  .n-discipline .net-mark{width:38px;height:38px}
  .n-discipline .net-count{font-size:12px}
  .n-discipline .net-label{font-size:10px;max-width:9ch}
  /* The flatter the box, the less room under the bottom row — this mode needs
     the overhang more than the narrow one does. Same reasoning as there. */
  .net-stage{overflow:visible}
  .n-agency .net-mark{width:26px;height:26px}
  .n-agency .net-label{display:none}
  .n-service .net-mark{width:9px;height:9px}
  .n-service .net-label{display:none}
}


/* ==========================================================================
   08. Reduced motion
   ==========================================================================
   The settle is skipped in the script — the layout is solved before the first
   paint and the nodes are simply there. These cover the rest. */
@media (prefers-reduced-motion:reduce){
  .net-node,.net-mark,.net-links line,.net-label{transition:none}
  .net-node:hover .net-mark{transform:none}
  .net-stage.is-tracing .net-node.is-source .net-mark{transform:none}
}


/* ==========================================================================
   09. The topic panel
   ==========================================================================
   The detail view a discipline or a service opens. It is the page's own profile
   panel in a second mode, not a second panel - base.css owns the shell, the
   dock, the sticky bar and the entrance, and everything here is the difference
   between showing a member and showing a topic.

   It lives in this file rather than in base.css because it is the
   constellation's surface: the six colours it is drawn in are declared at the
   top of this file, and a rule that reads one of them belongs beside it. Load
   this stylesheet without the graph and these rules simply never match. */

/* A member has a mark. A discipline has a colour and nothing else, so the
   swatch is that colour at the size the mark would have been - no glyph, no
   monogram, no icon invented for an abstract category. */
.panel-swatch{
  width:56px;height:56px;flex:none;border-radius:25%;
  background:var(--ac,var(--purple));
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
}

/* The masthead stays plum in every mode. The cluster colour arrives as the rule
   under it and as the swatch beside the name, which is as far as it can go: at
   4px and 56px square it is a shape, and shapes have a 3:1 floor these six
   values clear. Behind the heading it would be a text background, where amber
   at 1.9:1 with white on it is not a design choice, it is unreadable. */
.panel[data-mode="discipline"] .panel-mast::after,
.panel[data-mode="service"] .panel-mast::after{
  background:var(--ac,var(--purple));height:4px;
}

/* The fact strip is a flex row, which eats the space either side of the number
   it is built around - the member mode's clock has the same 6px for the same
   reason. Without it the panel opens on "6of 11 members". */
.panel-mast .geo .geo-fact{gap:5px}

/* The count is the argument, so it rides in the chip rather than in a key
   under it: at a glance the list says how much of this discipline more than
   one member can actually do.

   The fill, the transparent border and the hover come from .tag-btn in
   base.css - these chips are that component and only add the count and the
   shared state below. */
.svc-chip{display:inline-flex;align-items:center;gap:var(--s2);color:var(--gray)}
.svc-chip b{
  font-weight:500;font-size:12px;line-height:16px;
  min-width:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--white);color:var(--gray);text-align:center;
  transition:background-color 200ms ease-in-out,color 200ms ease-in-out;
}
/* Held by more than one member - the exception in this data, and the only thing
   in the list worth marking. The rule is left plain, because marking the rule
   marks everything.

   The tint is the legend's own, at the same 12%: a shared service and a live
   legend key are the same colour doing the same job, and the ink stays dark for
   the reason set out up there - white on amber is about 2:1. */
.svc-chip.is-shared{
  background:color-mix(in srgb,var(--ac) 12%,var(--white));
  color:var(--slate);
}
.svc-chip.is-shared b{background:var(--ac,var(--purple));color:var(--white)}
/* Hover is the tint again, one step up, so the whole row answers in the same
   language rather than the plain chips going purple and the shared ones going
   darker. */
.svc-chip:hover{background:var(--pale);color:var(--plum)}
.svc-chip.is-shared:hover{background:color-mix(in srgb,var(--ac) 22%,var(--white))}
.svc-chip:hover b{background:var(--white)}
.svc-chip.is-shared:hover b{background:var(--ac,var(--purple));color:var(--white)}
/* The step back up out of a service. The one chip in the row that is not a
   sibling, so it takes the brand tint rather than the cluster's - it leads out
   of the colour the rest of the row is in. */
.svc-chip.is-parent{
  background:var(--pale);color:var(--plum);font-weight:500;
}
.svc-chip.is-parent:hover{background:var(--lavender);color:var(--plum)}

/* Where it lands. The kv list the member mode gives to founded/team/languages,
   carrying city and who is in it - so a discipline that says "3 markets" above
   has to name them here rather than leave the number to imply coverage. */
.panel[data-mode="discipline"] #panelReach dd{color:var(--gray)}

/* Condensed, the bar tile is the swatch: same colour, no contents. */
.panel[data-mode="discipline"] .bar-id .tile,
.panel[data-mode="service"] .bar-id .tile{background:var(--ac,var(--purple))}