/* v2-community: styles for ext/v2-community.js. --b- tokens only.
   One component set (24 Oct): the pages use the site's own cards, tabs, forms and headers, so nothing is styled here
   but the download gate's dialog shell. The form inside it is V1's .gate (styles.css). */
.v2g { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--b-surface); color: var(--b-ink); box-shadow: 0 24px 64px rgba(var(--b-shadow), .28); overflow: auto; }
.v2g::backdrop { background: rgba(var(--b-shadow), .5); }
.v2g .gate { margin: 0; border: 0; }
.v2g #v2g-h:focus { outline: none; }
@media (max-width: 640px) { .v2g .gate-grid { grid-template-columns: minmax(0, 1fr); } }

/* The newsletter component (nlBlock): closes every Insights page. The menu's dark section card (.np-intro) and its red glow;
   the form is the hero search field (.hsearch + .hs-go) */
.nl-card { --focus: var(--b-accent-on-dark); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-3) var(--sp-6);
  padding: clamp(var(--sp-3), 4vw, var(--sp-6)); border-radius: 32px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); }
.nl-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 100% 115%, rgba(var(--b-map-rgb), .38), transparent 70%); }
.nl-card h2 { margin: 0; font: 500 var(--h-section)/1.1 var(--font-display); letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.nl-k { margin: 0 0 var(--sp-1-5); font-weight: 500; font-size: 14px; color: var(--b-accent-on-dark); }
.nl-sum { margin: var(--sp-1-5) 0 0; max-width: 52ch; color: rgba(255, 255, 255, .78); line-height: 1.55; }
.nl-search { max-width: none; }
.nl-form .err { margin: var(--sp-1) 0 0; color: #fff; }
.nl-fine { margin: var(--sp-1-5) 0 0 var(--sp-3); font-size: 13.5px; color: rgba(255, 255, 255, .66); }
.nl-fine a, .nl-card .ok a { color: #fff; }
.nl-card .ok { margin-top: var(--sp-2); }
@media (max-width: 860px) { .nl-card { grid-template-columns: 1fr; } .nl-fine { margin-left: 0; } }

/* Community of Practice: house parts only (.ov-top heads, .mcard tiles, event tiles, entry cards, the dark .nl-card) */
.cop-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1-5); margin: var(--sp-3) 0 0; }
.mcards.cop-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.cop-info, .cop-info:hover { cursor: default; transform: none !important; filter: none !important; }
.cop-info.nc:hover::before { --nk: 0; }
.cop-info p { padding-right: 0; }
.cop-steps .mcard-go { padding-right: 0; color: var(--b-primary); }
.cop-join { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.cop-gets { list-style: none; display: grid; gap: var(--sp-1-5); margin: var(--sp-3) 0 0; padding: 0; }
.cop-gets li { display: flex; gap: var(--sp-1-5); align-items: flex-start; color: rgba(255, 255, 255, .86); line-height: 1.45; }
.cop-gets .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--b-accent-on-dark); }
.cop-join-act { margin: var(--sp-4) 0 0; }
@media (max-width: 1080px) { .mcards.cop-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cop-join { grid-template-columns: 1fr; } .cop-scene { justify-self: center; max-width: 340px; } }
@media (max-width: 560px) { .mcards.cop-4 { grid-template-columns: 1fr; } }

/* The join card's session picture: white line on the dark card, peach for the presenter and the live dot */
.cop-scene { width: 100%; max-width: 480px; justify-self: end; overflow: visible; fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cop-scene .cs-map { overflow: visible; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.cop-scene .cs-map path { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cop-scene .cs-win { fill: rgba(30, 26, 27, .72); stroke: rgba(255, 255, 255, .4); }
.cop-scene .cs-bar { stroke: rgba(255, 255, 255, .2); }
.cop-scene .cs-dotw { fill: rgba(255, 255, 255, .3); stroke: none; }
.cop-scene .cs-live { fill: var(--b-accent-on-dark); stroke: none; }
.cop-scene .cs-t { fill: rgba(255, 255, 255, .8); stroke: none; font: 500 11px/1 var(--font-text); }
.cop-scene .cs-tile rect { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .22); }
.cop-scene .cs-tile.on rect { fill: rgba(255, 255, 255, .08); stroke: var(--b-accent-on-dark); stroke-width: 1.6; }
.cop-scene .cs-tile.on circle, .cop-scene .cs-tile.on > path { stroke: #fff; }
.cop-scene .cs-bars path { stroke: var(--b-accent-on-dark); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.cop-scene .cs-mic { stroke: rgba(255, 255, 255, .25); }
.cop-scene .cs-bub path:first-child, .cop-scene .cs-bub circle { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .45); }
.cop-scene .cs-b3 circle { stroke: var(--b-accent-on-dark); }
.cop-scene .cs-ln { stroke: rgba(255, 255, 255, .4); }
@media (prefers-reduced-motion: no-preference) {
  .cop-scene .cs-bars path { animation: en-grow 1.1s ease-in-out infinite; animation-delay: var(--d); }
  .cop-scene .cs-live { animation: pa-blink 2s ease-in-out infinite; }
  .cop-scene .cs-b1 { animation: dm-bob 3.2s ease-in-out infinite; }
  .cop-scene .cs-b2 { animation: dm-bob 3.2s ease-in-out 1.1s infinite; }
  .cop-scene .cs-b3 { animation: dm-bob 3.2s ease-in-out 2s infinite; }
}
@keyframes pa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }