/* ============================================================================
   /who-can-attend/ — who has to be in the room.
   Only what this page adds. The cards, points lists, callouts, pills, definition lists and
   buttons are the shared components (.cc2-card, .cc2-points, .callout, .pill, .cc2-dl, .btn)
   from components.css — do not fork them here.
   ============================================================================ */

/* ---- Hero ----
   Same shape as /which-patients/: a tinted wash to a plain page, so the two reference pages
   read as siblings. */
.wa-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-3xl);
  background:linear-gradient(180deg, var(--brand-50) 0%, var(--color-page) 100%); }
.wa-hero h1 { letter-spacing:-.02em; color:var(--color-secondary); max-width:15em; }
.wa-hero h1 .hl { color:var(--color-primary); }
.wa-hero .lede { max-width:38em; }
@media (max-width:760px) { .wa-hero { padding-top:122px; } }

/* ---- The team graphic: hub and branches ----
   The coordinating practitioner on the left, joined by a bracket to the members they convene. The
   SHAPE is the argument — one person invites, the rest attend — so the coordinator is the only node
   off the trunk. Do not flatten it back to a row or grid of equal tiles.

   ⚠️ DO NOT DRAW A TABLE. A round "table seen from above" was tried 2026-09-11 (an ellipse centred
   behind the nodes, left pair mirrored to face it) and read as an empty white blob — a decorative
   shape with nothing in it looks like a rendering fault, not a diagram.

   ⚠️ Real elements, NOT an SVG. An SVG scales its own type with the viewport and the labels landed
   near 8px on a phone.

   ⚠️ THE CONNECTORS ARE BUILT FROM PER-ROW SEGMENTS, not one line with computed endpoints: each
   member draws its own half-trunk plus a horizontal stub, and the first and last clip theirs to
   their own centre. That survives labels of different lengths and a member count that is itself
   derived. Equal rows (grid-auto-rows:1fr) are what make the hub's stub meet the trunk's midpoint.

   ⚠️ Icons take their colour from `color` on the node, never `stroke` on the <svg> — the sprite
   symbols set stroke="currentColor" themselves and override an outer stroke (craft.md P0 7). */
/* Graphic left, its reading down the right. The rules are what the diagram MEANS, so they sit
   level with it rather than in a row underneath — a row reads as a separate topic. */
/* ⚠️ The graphic column is deliberately the NARROWER of the two. Its labels are short, so a wide
   column just pushes empty space into the gutter — at 1.1fr with a --space-3xl gutter the two halves
   read as disconnected. The rules carry the long lines, so they get the width. */
.wa-team { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1fr);
  gap:var(--space-2xl); align-items:start; }
@media (max-width:1000px) { .wa-team { grid-template-columns:1fr; } }

.wa-fig { margin:0; }

/* ⚠️ VERTICAL: coordinator on top, members branching below. It ran horizontally (lead left, members
   right) and was too short to sit beside the four rules — the column ended halfway down them. Turned
   on its side it gains height instead of width, which is what the layout needs.
   --wa-lead is the lead node's diameter and the trunk is drawn at half of it, so the line falls
   straight out of the coordinator's centre; change the size and the trunk follows. */
.wa-hub { --wa-lead:104px; --wa-trunk:calc(var(--wa-lead) / 2 - 1px); }

.wa-hub-lead { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr);
  column-gap:var(--space-m); align-items:center; }
/* The stem from the coordinator down to the first branch. The lead row is exactly the node's height
   (its label never runs taller), so top:100% is the node's bottom edge. */
.wa-hub-lead::after { content:""; position:absolute; left:var(--wa-trunk); top:100%;
  height:var(--space-l); border-left:2px solid var(--color-border); }

/* grid-auto-rows:1fr is load-bearing: the dashed branch below reaches UP into the previous row with
   a percentage offset, which resolves against its own row's height. Equal rows make that offset land
   exactly on the previous member's centre. */
.wa-hub-members { margin:var(--space-l) 0 0 var(--wa-trunk); padding:0; list-style:none;
  display:grid; grid-auto-rows:1fr; }
.wa-member { position:relative; display:grid; grid-template-columns:auto 1fr;
  column-gap:var(--space-m); align-items:center;
  padding:var(--space-m) 0 var(--space-m) var(--space-2xl); }
/* half-trunk + stub, per row */
.wa-member::before { content:""; position:absolute; left:0; top:0; bottom:0;
  border-left:2px solid var(--color-border); }
.wa-member::after { content:""; position:absolute; left:0; top:50%;
  width:var(--space-2xl); border-top:2px solid var(--color-border); }
.wa-member:last-child::before { bottom:50%; }
/* The solid trunk ends where the last REQUIRED branch leaves it; everything past that point is the
   conditional branch and is drawn dashed by .is-extra below. */
.wa-member.is-last-required::before { bottom:50%; }
/* The trunk stops here; everything past it is the conditional branch. */
.wa-member.is-last-required::before { bottom:50%; }

/* ⚠️ THE DASH STARTS WHERE THE LAST REQUIRED BRANCH LEAVES THE TRUNK, not at the row boundary.
   It used to begin at the top of the conditional member's own row, so the run from the third
   member down to it was half solid and half dashed — the line only became conditional partway.
   The solid trunk now stops at the third member's centre (.is-last-required) and this element
   reaches up to meet it with top:-50%.
   ⚠️ ONE element, not a dashed trunk plus a dashed stub: as two borders meeting at a right angle
   they each started their own dash phase, so the corner showed a seam, a doubled dash or a gap
   depending on row height. border-left + border-bottom with a corner radius draws the whole run
   and its turn in a single pass. */
.wa-member.is-extra::before { top:-50%; bottom:50%; width:var(--space-2xl);
  border-left:2px dashed var(--color-accent);
  border-bottom:2px dashed var(--color-accent);
  border-bottom-left-radius:10px; }
.wa-member.is-extra::after { display:none; }

/* The + markers sit ON the trunk between members, so the graphic reads as a sum: coordinator plus
   each member. Surface-coloured fill masks the line behind them; #seats is a .block tint section, so
   that is the section's own background. */
.wa-plus { position:absolute; left:0; top:0; z-index:1; transform:translate(-50%, -50%);
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:var(--radius-full); background:var(--color-surface);
  border:1px solid var(--color-border-soft); color:var(--color-ink-soft);
  font-size:var(--text-xs); font-weight:var(--weight-extrabold); line-height:1; }
.wa-member.is-extra .wa-plus { border-style:dashed; border-color:var(--color-accent);
  color:var(--color-accent); }
@media (max-width:760px) { .wa-plus { display:none; } }

.wa-node { position:relative; display:grid; place-items:center;
  width:72px; height:72px; border-radius:var(--radius-full); background:var(--color-surface);
  border:2px solid var(--color-border); color:var(--color-ink-soft); box-shadow:var(--shadow-xs); }
.wa-node svg { width:32px; height:32px; fill:none; stroke-width:1.6; }
.wa-node.is-lead { width:var(--wa-lead); height:var(--wa-lead); background:var(--brand-50);
  border-color:var(--color-primary); color:var(--color-primary); box-shadow:var(--shadow-sm); }
.wa-node.is-lead svg { width:46px; height:46px; }
.wa-node-n { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center;
  width:24px; height:24px; border-radius:var(--radius-full);
  background:var(--color-secondary); color:var(--color-surface);
  border:2px solid var(--color-page); font-size:var(--text-xs);
  font-weight:var(--weight-extrabold); font-variant-numeric:tabular-nums; }
.wa-node.is-lead .wa-node-n { background:var(--color-primary); }
.wa-member.is-extra .wa-node { background:var(--color-page); border-style:dashed;
  border-color:var(--color-accent); color:var(--color-accent); box-shadow:none; }
.wa-member.is-extra .wa-node-n { background:var(--color-accent); }

.wa-node-body { display:grid; gap:var(--space-3xs); align-content:center; }
/* --text-md: at --text-lg every member title broke to two lines in this column. Only the lead,
   which has the wider column, takes the larger size. */
.wa-node-t { font-size:var(--text-md); font-weight:var(--weight-bold);
  line-height:var(--line-tight); color:var(--color-secondary); }
.wa-node-d { font-size:var(--text-sm); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }
/* The condition on a conditional member, in the accent that its dashed branch and ring already
   use — so the three signals say the same thing. */
.wa-node-cond { margin-top:var(--space-3xs); font-size:var(--text-sm);
  font-weight:var(--weight-semibold); color:var(--color-accent);
  line-height:var(--line-relaxed); }
.wa-hub-lead .wa-node-t { font-size:var(--text-lg); }

/* Below the width the bracket needs, the hub sits above the members and the branches go with it. */
@media (max-width:760px) {
  .wa-hub-lead::after { display:none; }
  .wa-hub-members { margin-left:0; }
  .wa-node.is-lead { width:56px; height:56px; }
  .wa-node.is-lead svg { width:24px; height:24px; }
  .wa-hub-lead .wa-node-t { font-size:var(--text-lg); }
  .wa-hub-members { grid-auto-rows:auto; row-gap:var(--space-s); }
  .wa-member { padding:0; }
  .wa-member::before, .wa-member::after { display:none; }
}

/* ---- The composition rules ----
   Two rules, set as ruled rows rather than cards. They are prose with citations inside the
   sentences, not parallel feature blurbs, and a card frame around a paragraph reads as decoration
   here — the hairline and the heading do the separating. */
/* ⚠️ Columns by DEFAULT, single column only beside the graphic. It was written the other way round
   — one column, with a media query widening it — which was right for #seats and silently wrong for
   #co-managed, where the same component is used standalone and stayed stacked full width. */
.wa-rules { display:grid; align-content:start; gap:var(--space-l) var(--space-2xl);
  grid-template-columns:repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.wa-team .wa-rules { grid-template-columns:1fr; }
@media (max-width:1000px) {
  .wa-team .wa-rules { grid-template-columns:repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
}

.wa-rule { padding-top:var(--space-s); border-top:2px solid var(--color-accent); }
/* ⚠️ --text-lg, not --text-xl. These are the reading of the diagram beside them, not section
   headings; at large emphasis they compete with the h2 above and the owner called them huge. */
.wa-rule h3 { margin:0 0 var(--space-2xs); font-size:var(--text-lg);
  font-weight:var(--weight-bold); line-height:var(--line-tight); color:var(--color-secondary); }
.wa-rule p { margin:0; max-width:42em; font-size:var(--text-sm); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }
/* The count rule is two statements, not a paragraph — the count leads its own line.
   ⚠️ A single-line CHIP, roughly the height of one line of text. Two earlier attempts were both too
   heavy: words ("Three"/"Four") set at --text-lg / weight 800 in --color-secondary read as
   sub-headings, because that is the .wa-rule h3 recipe exactly; then a stacked box with the numeral
   over a tracked-out PARTICIPANTS label was, in the owner's words, too big. Keep it on one line.
   ⚠️ Width is content-sized, never a fixed em: the label is --text-xs and a fixed width sized at the
   desktop step overflowed at 390px, where the fluid scale shrinks the box faster than the text. */
.wa-counts { display:grid; gap:var(--space-s); margin:0; padding:0; list-style:none; }
.wa-counts li { display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-m);
  align-items:start; }
.wa-count { display:inline-flex; align-items:baseline; gap:.3em; width:max-content;
  margin-top:1px; padding:var(--space-3xs) var(--space-xs);
  border-radius:var(--radius-full); background:var(--brand-25);
  border:1px solid var(--color-border-soft); font-size:var(--text-xs);
  font-weight:var(--weight-semibold); color:var(--color-ink-soft); white-space:nowrap; }
.wa-count b { font-size:var(--text-sm); font-weight:var(--weight-extrabold);
  color:var(--color-primary); font-variant-numeric:tabular-nums; }
.wa-counts > li > span:last-child { font-size:var(--text-sm); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }

.wa-rule p strong { color:var(--color-secondary); }
.wa-rule p a { color:var(--color-primary); }

/* ---- Who can participate ----
   The claiming column carries five groups and two long pill rows; the non-claiming one carries
   three. Left-weighted columns keep the pills off a fourth line without stranding whitespace
   beside the shorter card, and the cards stretch so the gap sits inside a card rather than
   between them. */
.wa-parts { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-m);
  align-items:stretch; }
@media (max-width:860px) { .wa-parts { grid-template-columns:1fr; } }

/* ---- The key band ----
   The page's one banded section, and the owner has twice said this is the most important content on
   it. Two constraints pull against each other and both are load-bearing:

   ⚠️ It must NOT read as a pitch. It ran on --grad-deep with white text until 2026-09-11 and the
   owner read the treatment as decorative — "makes it look superfluous, this is key info". A dark
   gradient is this site's marketing idiom and on a cited reference page it tells a reader to skip.

   ⚠️ It must still stand out. The emphasis is typographic and structural rather than chromatic: the
   brand tint, the highlighted heading, and the claims set at section-heading size on white panels —
   not as card titles.
   ⚠️ NO ACCENT RULE ACROSS THE TOP. A 3px accent border was tried and read as a stray blue line
   between this section and the one above it — a full-bleed rule with nothing either side of it
   looks like a divider that lost its section. The hairlines are enough to bound the tint. */
.wa-key { background:var(--brand-50); border-top:1px solid var(--color-border-soft);
  border-bottom:1px solid var(--color-border-soft); }

/* ⚠️ THREE equal columns, one per claim (owner's call). The invite claim runs several times the
   height of the other two, so the row is deliberately top-aligned rather than stretched — equal
   heights would leave two panels mostly empty. */
/* The heading takes the hero's highlight instead of a rule beneath it. */
.wa-key .section-head h2 .hl { color:var(--color-primary); }

.wa-nr { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap:var(--space-l); align-items:start; }
.wa-nr-col { display:flex; flex-direction:column; gap:var(--space-m);
  padding:var(--space-xl); border-radius:var(--radius-xl); background:var(--color-surface);
  border:1px solid var(--color-border-soft); box-shadow:var(--shadow-xs); }
/* Claim size, not card-title size — these are the page's two headline facts. ⚠️ --step-3 directly, not a
   --text-* alias: this site's semantic scale stops at --text-xl (= --step-2), so --text-2xl and
   --text-3xl do not exist and silently fall back to 16px. Anything above large emphasis uses the
   step directly, as about.css and case-conferencing.css do. */
/* --step-2, not --step-3: at three columns the claims sit in ~350px and the larger step broke each
   one to four lines. Still claim size — well above the .cc2-card h3 recipe — just not display size. */
.wa-nr-col h3 { margin:0; font-size:var(--step-2); font-weight:var(--weight-extrabold);
  letter-spacing:-.01em; line-height:var(--line-tight); color:var(--color-secondary); }
.wa-nr-col > p { margin:0; color:var(--color-ink-soft); line-height:var(--line-relaxed); }

/* The notes, as cited pull-quotes. The accent rule carries the emphasis the dark background used
   to, at a fraction of the visual cost. */
.wa-quote { margin:0; padding:var(--space-s) 0 var(--space-s) var(--space-m);
  border-left:3px solid var(--color-accent); }
.wa-quote p { margin:0; font-size:var(--text-md); line-height:var(--line-relaxed);
  color:var(--color-secondary); }
.wa-quote cite { display:block; margin-top:var(--space-2xs); font-style:normal;
  font-size:var(--text-sm); color:var(--color-ink-soft); }
.wa-quote cite a { color:var(--color-primary); }

/* ---- Lead + list split (#coordinate) ----
   🚩 RESTORED TWICE NOW. These rules sit between other blocks in this file and have twice been
   taken as collateral when a whole region was replaced or deleted — the section silently loses its
   grid and stacks full width, and nothing fails: not the build, not the SEO lint. After ANY block
   removal here, diff the `wa-*` classes in the template against the selectors in this file in BOTH
   directions; a dead-rule check alone only finds the opposite problem. */
.wa-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:var(--space-2xl); align-items:start; }
.wa-split .section-head { margin-bottom:var(--space-l); max-width:none; }
.wa-split-lead { display:grid; gap:var(--space-l); align-content:start; }
.wa-list-card { padding:var(--space-l); }
.wa-list-card .cc2-card-head { margin-bottom:var(--space-s); }
@media (max-width:900px) { .wa-split { grid-template-columns:1fr; gap:var(--space-l); } }

/* ---- The exceptions ----
   Each card is a lede and a single "who is needed" statement — no duration, no item numbers, no
   role/limit rows (owner's call: the cards were carrying reference detail that belongs on
   /mbs-items/). */
/* components.css bottom-aligns a .cc2-points inside a three-up card; these cards carry prose of
   different lengths, so they are top-aligned and end where their content ends. */
.wa-exc-card { align-content:start; }
/* ⚠️ Scoped to .wa-exc-card so it out-specifies components.css's `.cc2-card p`, which was resetting
   this margin to 0 and butting the lede straight up against the first key/value row. */
.wa-exc-card .wa-exc-lead { margin:0 0 var(--space-m); font-size:var(--text-sm);
  color:var(--color-ink-soft); line-height:var(--line-relaxed); }
/* The kind of conference, carried lighter than the name it qualifies. */
.wa-exc-kind { font-weight:var(--weight-normal); color:var(--color-ink-soft); }
.wa-exc-card .cc2-kv { margin-bottom:var(--space-s); }
/* ⚠️ These values WRAP, unlike everywhere else .cc2-kv is used. The component sets
   `white-space:nowrap` on the value so the figures line up down a card — right when the values are
   "15 / 20 / 40 min", wrong here, where they are phrases like "Surgeon or cardiologist,
   TMVr-accredited" that are wider than a third-width card and would simply overflow it. Nothing
   lines up in these cards anyway. */
/* ⚠️ GRID, not the component's wrapping flex row. Under flex-wrap a value too long to sit beside
   its label drops to its own FULL-WIDTH line — so a two-line value ran back under the label instead
   of staying in a right-hand column. Two real columns keep the label at its content width and pen
   the value into the rest, wrapping inside that column and hard right however many lines it takes. */
.wa-exc-card .cc2-kv > div { display:grid; grid-template-columns:auto minmax(0, 1fr);
  align-items:baseline; column-gap:var(--space-s); }
.wa-exc-card .cc2-kv dt { flex:none; }
.wa-exc-card .cc2-kv dd { margin:0; white-space:normal; text-align:right; }
.wa-exc-body { margin:0; font-size:var(--text-sm); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }
.wa-exc-body strong { color:var(--color-secondary); }
.wa-exc-body a { color:var(--color-primary); }

/* ---- Closing panel ---- */
.wa-next { max-width:44em; }
.wa-next h2 { color:var(--color-secondary); }
.wa-next p { margin:var(--space-s) 0 var(--space-l); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }