/* =====================================================================
   BADGE — twelve dots, a drawn ring, a label revealed in place
   Twelve is the longitude/clock geometry used across the suite. IT IS NOT
   A COUNT of members, utilities or systems. No dot is labelled or
   numbered, and none should be.
   ===================================================================== */

/* FOOTPRINT IS PINNED so the badge no longer sizes off its copy —
   swapping the label cannot stretch the circle into an ellipse. */
.badge{
  position:relative;
  flex:0 0 min(30.4vw,438px);width:min(30.4vw,438px);min-width:0;
  aspect-ratio:1;border-radius:50%;
  border:2px dotted var(--gold);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:11%;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(15px,1.6vw,21px);
  color:var(--slate);
  line-height:1.4;letter-spacing:.03em;text-transform:uppercase;
  transition:border-color .7s ease .9s;
}
/* `flex-basis:auto` IS THE FIX, AND WITHOUT IT THE CIRCLE IS AN ELLIPSE.
   `.pivot .in` flips to `flex-direction:column` at this same breakpoint, so
   flex-basis stops describing WIDTH and starts describing HEIGHT — while
   this rule only overrode `width`. Measured before the fix: 240 x 279.67 at
   920, 240 x 267.52 at 880, square again only once 30.4vw falls below 240px
   (~790px viewport). In that band the dotted CSS border rendered as an
   ellipse while the drawn SVG ring stayed circular, because the SVG scales
   by its smaller axis. With basis auto and no height set, aspect-ratio:1
   against the definite width governs both axes.
   Same idiom as `.hero .stage` in pages/home.css, which overrides
   flex-basis in its own max-width:920px rule for the same reason. */
@media(max-width:920px){.badge{flex-basis:auto;width:min(240px,60vw)}}

/* THE LABEL IS POSITIONED AGAINST THE BADGE, NOT FLOWED INSIDE IT, and
   that is required rather than preferred. The badge's `padding:11%` is a
   PERCENTAGE, and percentage padding resolves against the CONTAINING
   BLOCK's inline size — .in at 1180px — not against the element's own
   width. That is 129.8px a side, leaving a 178px content box inside a
   336px circle, so an in-flow label is confined to about half the ring's
   interior. inset:0 escapes that.

   THE 19% SIDE PADDING IS GONE (2026-08-07, client copy change). It set
   the text measure for the previous label, which relied on natural
   wrapping. The copy is now FOUR AUTHORED LINES with explicit <br>, so a
   measure that also breaks lines is a second, competing authority:
   measured, "Health Systems." wrapped to a FIFTH line at every width and
   every size tested. `white-space:nowrap` makes the authored breaks the
   only breaks, and the ring — not the padding — is what bounds the type.

   TYPE SIZE TRACKS THE BADGE, NOT THE VIEWPORT. font-size is the badge's
   own width times a constant, so the copy fills the same fraction of the
   circle at every width; the badge is min(30.4vw,438px) above 920 and
   min(240px,60vw) below, and the two rules mirror those exactly. A single
   clamp() on the viewport cannot do this — the badge's width formula
   changes at the breakpoint and a viewport-keyed size would drift out of
   proportion across it.

   .082 IS SET BY THE RING, MEASURED, NOT CHOSEN BY EYE. The binding
   constraint is the widest line's own box corners against the ring's inner
   radius — NOT the text block's bounding-box diagonal, which over-states
   the collision because the widest line ("Health Systems.") sits near the
   vertical centre where the circle is widest and the block's rectangular
   corners hold no text. Measured minimum corner clearance across
   1440/1199/920/760/640/560/320: .082 -> 8.95px (12.4% of the inner
   radius); .085 -> 6.75px; .090 -> 3.10px; .095 -> NEGATIVE at 320.
   Re-measure with a Range if the copy, the face, the tracking or the
   badge's width formula moves. */
.badge .blabel{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  white-space:nowrap;
  text-transform:none;
  line-height:1.10;
  font-size:calc(min(30.4vw,438px) * .082);
  opacity:0;transition:opacity .5s ease-out 2s;
}
/* mirrors `.badge{width:min(240px,60vw)}` in the rule above — the two must
   move together or the copy stops filling the circle at the breakpoint. */
@media(max-width:920px){.badge .blabel{font-size:calc(min(240px,60vw) * .082)}}
.badge.built .blabel{opacity:1}

.badge .bdots{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.badge .bd{
  opacity:0;transform:scale(.4);
  transform-box:fill-box;transform-origin:center;
  transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,.8,.3,1);
}
.badge.built .bd{opacity:1;transform:none;transition-duration:.24s}

/* Beat 1 — the twelve pop in staggered in RING ORDER. The .bd circles are
   authored top-first and clockwise (cy=22 is the topmost, then x
   increases), so a linear stagger by nth-of-type walks the ring from
   twelve o'clock. 0.055s apart, 0.24s each: first starts at 0, last lands
   at 0.845s.

   nth-of-type IS SAFE HERE and is not safe everywhere. All twelve .bd
   circles share ONE parent <g>, so type-position and document order
   agree. The problem band's twelve dots are split across two <g> parents
   and the same selector silently misassigns three of them — see
   pages/home.css. Check the parent before reaching for nth-of-type. */
.badge.built .bd:nth-of-type(1){transition-delay:0.000s}
.badge.built .bd:nth-of-type(2){transition-delay:0.055s}
.badge.built .bd:nth-of-type(3){transition-delay:0.110s}
.badge.built .bd:nth-of-type(4){transition-delay:0.165s}
.badge.built .bd:nth-of-type(5){transition-delay:0.220s}
.badge.built .bd:nth-of-type(6){transition-delay:0.275s}
.badge.built .bd:nth-of-type(7){transition-delay:0.330s}
.badge.built .bd:nth-of-type(8){transition-delay:0.385s}
.badge.built .bd:nth-of-type(9){transition-delay:0.440s}
.badge.built .bd:nth-of-type(10){transition-delay:0.495s}
.badge.built .bd:nth-of-type(11){transition-delay:0.550s}
.badge.built .bd:nth-of-type(12){transition-delay:0.605s}

/* The drawn circle takes --gold and the twelve dots take --mark, matching
   what the hero canvas draws: its founding ring is stroked gold and its
   dots filled with the accent. THE CANVAS NOW READS THOSE SAME TOKENS AT
   INIT (see js/hero-sphere.js), so the badge and the sphere move
   together under a palette pass. In the source concept the canvas held
   its own hex literals and did not. */
.badge .bring{
  fill:none;stroke:var(--gold);stroke-width:2;
  stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
}
/* Beat 2 — the arc sweep, 0.9s to 1.9s. The opacity step fires at 0.9s
   WITH the draw. Previously the stroke drew while opacity was still 0 and
   only snapped on near the end, so roughly 80% of the sweep happened
   invisibly and the ring read as appearing rather than drawing. The
   dotted container border fades over the same beat, so the placeholder
   hands off to the drawn ring instead of the two crossing. */
.badge.built .bring{
  stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset 1s cubic-bezier(.4,.6,.3,1) .9s,opacity 0s linear .9s;
}
.badge.built{border-color:transparent}

/* ---- THE DEPARTURE. Added at L1, 2026-08-18, under EXCEPTION SIX.
   FIGURES AND THE 2.2.2 DECLARATION ARE IN WL-30, css/pages/why-longitude.css.
   This is a shared component sheet with no register of its own; the pointer
   names the entry rather than copying its numbers, because a name cannot go
   stale the way a copied figure can.

   ⚠ SPECIFICITY, AND IT IS THE REASON THESE SIT HERE RATHER THAN ABOVE.
   `.badge.built .bd:nth-of-type(n)` is (0,3,1). `.badge.leaving .bd` alone is
   (0,2,1) and LOSES — the dots would keep their build-in delays and never
   leave. That is the B5 defect exactly (§65). These carry :nth-of-type to tie
   at (0,3,1) and are placed BELOW the built rules so source order decides.
   `.leaving` is added WHILE `.built` is still present, as the #origin cycle
   does; both come off together at the reset.

   THE ORDER IS REVERSED — dot 12 leaves first, dot 1 last — so the ring
   unwinds rather than repeating its build direction. 11 x 0.055 + 0.45 =
   1.055s for the whole departure; reveal.js derives the same figure from its
   own constants and does not duplicate this number. ---- */
.badge.leaving .bd:nth-of-type(n){opacity:0;transform:scale(.4);transition-duration:.45s}
.badge.leaving .bd:nth-of-type(1){transition-delay:0.605s}
.badge.leaving .bd:nth-of-type(2){transition-delay:0.550s}
.badge.leaving .bd:nth-of-type(3){transition-delay:0.495s}
.badge.leaving .bd:nth-of-type(4){transition-delay:0.440s}
.badge.leaving .bd:nth-of-type(5){transition-delay:0.385s}
.badge.leaving .bd:nth-of-type(6){transition-delay:0.330s}
.badge.leaving .bd:nth-of-type(7){transition-delay:0.275s}
.badge.leaving .bd:nth-of-type(8){transition-delay:0.220s}
.badge.leaving .bd:nth-of-type(9){transition-delay:0.165s}
.badge.leaving .bd:nth-of-type(10){transition-delay:0.110s}
.badge.leaving .bd:nth-of-type(11){transition-delay:0.055s}
.badge.leaving .bd:nth-of-type(12){transition-delay:0.000s}
.badge.leaving .bring{stroke-dashoffset:100;opacity:0;
  transition:stroke-dashoffset .6s cubic-bezier(.4,.6,.3,1),opacity .2s linear .4s}


/* REDUCED MOTION — end state, fully present, no motion: all twelve dots,
   the closed ring and the label. The label is part of the end state
   because it is the copy, not a transitional artefact. */
@media(prefers-reduced-motion:reduce){
  .badge .blabel{opacity:1;transition:none}
  /* ⚠ :nth-of-type(n) IS LOAD-BEARING HERE, NOT ORNAMENT. L1's departure
     rules are (0,3,1); this block is inside a media query and A MEDIA QUERY
     ADDS NO SPECIFICITY (§49), so at (0,2,0) it would LOSE to them and a
     reader who asked for no motion would watch the dots fade out. The loop
     is gated so `.leaving` is never added under reduced motion — but this
     block must not depend on that gate to be correct. */
  .badge .bd,.badge.leaving .bd:nth-of-type(n){opacity:1;transform:none;transition:none}
  /* .badge .bring is (0,2,0) and loses to `.badge.built .bring` (0,3,0)
     above; the .built variant ties it and wins on source order. */
  .badge .bring,.badge.built .bring,.badge.leaving .bring{stroke-dashoffset:0;opacity:1;transition:none}
  .badge{border-color:transparent;transition:none}
}