/* ============================================================
   Communications — page-specific decoration.

   Structural classes (.xs-section, .xs-panel, .xs-split, .xs-btn …)
   come from the design system; this file holds only what's unique
   here: the hero fan-out, the audience selector, the newsletter
   before/after, the game-comms panel with its jersey-clash check,
   the social post card and the animated trigger stack.

   Channel colours carry meaning on this page:
     BLUE  #2199e8  email / admin
     GREEN --success  game comms
     CYAN  #00D4FF  social
   Keep that mapping if you edit it.

   Keyframes are global, so everything here is `cm`-prefixed.

   NOTE on <button> rules: the legacy theme sets
   `button:hover{background:#0060ff}` at specificity 0,1,1, which
   beats a bare `.cm-aud` (0,1,0). Interactive controls are scoped
   under `.xs-page` AND restate their background on :hover/:focus.
   ============================================================ */

@keyframes cmGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes cmSend{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:none}}
@keyframes cmPing{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.8);opacity:0}}
@keyframes cmMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.cm-hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;color:#fff;
	background:radial-gradient(circle at 74% 32%,#0d1a33,#04070f 60%)}
/* The site header is fixed and transparent over the hero — hold solid black
   for its height before fading, same convention as the other flagships. */
.cm-hero__fade{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none;
	background:linear-gradient(180deg,var(--ink-900) 0,var(--ink-900) 130px,transparent 100%)}
.cm-hero__inner{position:relative;width:100%;padding-top:calc(130px + clamp(2rem,4vw,3.5rem))}
.cm-blob{position:absolute;border-radius:50%;pointer-events:none}
.cm-blob--cyan{bottom:-160px;right:-120px;width:560px;height:560px;filter:blur(30px);
	background:radial-gradient(circle,rgba(0,212,255,.24),transparent 62%);animation:cmGlow 8s ease-in-out infinite}
.cm-blob--blue{top:-120px;left:-100px;width:420px;height:420px;filter:blur(26px);
	background:radial-gradient(circle,rgba(33,153,232,.22),transparent 64%)}

/* hero visual: one compose window fanning out to three channels */
.cm-fan{display:flex;align-items:center;gap:16px}
.cm-fan__compose{flex:none;width:150px;background:#0b1120;border:1px solid rgba(255,255,255,.14);
	border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.cm-fan__composebar{padding:8px 12px;background:#111a2e;font-size:.62rem;letter-spacing:.08em;
	text-transform:uppercase;color:var(--blue-500)}
.cm-fan__composebody{padding:12px}
.cm-fan__l{height:7px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:7px}
.cm-fan__l--head{height:8px;width:80%;background:rgba(255,255,255,.18);margin-top:0}
.cm-fan__l--short{width:70%;margin-top:5px}
.xs-page .cm-fan__send{margin-top:12px;background:var(--blue-500);color:#fff;text-align:center;
	border-radius:6px;padding:.4rem;font-family:var(--font-display);font-size:.8rem}
.cm-fan__arrow{flex:none;color:var(--blue-500);font-size:1.4rem}
.cm-fan__out{flex:1;display:flex;flex-direction:column;gap:12px}
.cm-chan{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;
	display:flex;align-items:center;gap:.7rem;animation:cmSend .6s var(--ease) both}
.cm-chan--1{animation-delay:.2s}
.cm-chan--2{animation-delay:.45s}
.cm-chan--3{animation-delay:.7s}
.cm-chan__icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.cm-chan__icon--email{background:rgba(33,153,232,.16);color:var(--blue-500)}
.cm-chan__icon--game{background:rgba(58,219,118,.15);color:var(--success)}
.cm-chan__icon--social{background:rgba(0,212,255,.16);color:var(--cyan)}
.xs-page .cm-chan__name{font-family:var(--font-display);color:#fff;font-size:.95rem}
.cm-chan__sub{font-size:.68rem;color:rgba(255,255,255,.5)}

/* ---------- framing band ---------- */
.cm-framing{background:#070d1c}
.cm-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.xs-page .cm-pill{display:inline-flex;align-items:center;gap:.6rem;background:#0b1120;border-radius:999px;
	padding:.6rem 1.2rem;font-family:var(--font-display);color:#fff;font-size:1.1rem}
.cm-pill--email{border:1px solid rgba(33,153,232,.35)}
.cm-pill--game{border:1px solid rgba(58,219,118,.35)}
.cm-pill--social{border:1px solid rgba(0,212,255,.35)}

/* ---------- S1: audience selector ---------- */
.cm-lbl{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}
.cm-auds{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.xs-page .cm-aud,
.xs-page .cm-aud:hover,
.xs-page .cm-aud:focus{background:#0f1830;border:1px solid rgba(255,255,255,.1);border-radius:9px;
	padding:10px 4px;cursor:pointer;font-family:var(--font-body);color:rgba(255,255,255,.6);
	transition:all .15s var(--ease)}
.xs-page .cm-aud.is-active,
.xs-page .cm-aud.is-active:hover,
.xs-page .cm-aud.is-active:focus{background:rgba(33,153,232,.16);border-color:var(--blue-500);color:#fff}
.cm-aud__lbl{font-size:.64rem;margin-top:.3rem}
.cm-count{display:flex;align-items:flex-end;justify-content:space-between;background:#0f1830;
	border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.cm-count__k{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.xs-page .cm-count__n{font-family:var(--font-display);color:#fff;font-size:2.4rem;line-height:1}
.cm-count__right{text-align:right}
.cm-count__scope{font-size:.7rem;color:rgba(255,255,255,.55)}
.cm-count__track{margin-top:6px;height:8px;width:120px;border-radius:5px;background:#04070f;overflow:hidden}
.cm-count__fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#1276c4,#2199e8);
	transition:width .5s var(--ease)}
.cm-draft{background:#04070f;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px}
.cm-draft__by{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:rgba(255,255,255,.5);margin-bottom:8px}
.xs-page .cm-draft__mark{width:16px;height:16px;border-radius:4px;background:var(--cyan);display:flex;
	align-items:center;justify-content:center;color:#04070f;font-size:.6rem;font-family:var(--font-display)}
.xs-page .cm-draft__subject{font-family:var(--font-display);color:#fff;font-size:1rem}
.cm-draft__l{margin-top:8px;height:7px;border-radius:4px;background:rgba(255,255,255,.12)}
.cm-draft__l--short{margin-top:5px;width:76%;background:rgba(255,255,255,.08)}
.cm-draft__foot{margin-top:12px;display:flex;justify-content:flex-end}
.xs-page .cm-draft__send{background:var(--blue-500);color:#fff;border-radius:7px;padding:.5rem 1.1rem;
	font-family:var(--font-display);font-size:.9rem}

/* ---------- S2: newsletter before/after ---------- */
.cm-ba{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.6rem}
.cm-ba__col{flex:1 1 300px;max-width:340px}
.cm-ba__lbl{text-align:center;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
	color:rgba(255,255,255,.4);margin-bottom:.6rem}
.cm-ba__lbl--after{color:var(--cyan)}
.cm-ba__arrow{flex:none;color:var(--blue-500);font-size:1.6rem}
.cm-plain{background:var(--paper);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px;min-height:300px}
.cm-plain__text{font-family:monospace;font-size:.8rem;color:#555;line-height:1.7}
.cm-nl{background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.5);min-height:300px;display:flex;flex-direction:column}
.xs-page .cm-nl__bar{padding:20px;background:linear-gradient(135deg,var(--navy-700),var(--blue-500));color:#fff;
	font-family:var(--font-display);letter-spacing:.05em;font-size:1.3rem;text-align:center}
.cm-nl__body{padding:18px;color:var(--ink);flex:1}
.xs-page .cm-nl__head{font-family:var(--font-display);color:var(--navy-700);font-size:1.15rem}
.cm-nl__img{margin-top:10px;height:70px;border-radius:8px;background:linear-gradient(135deg,#e2e6ec,#c9ced6)}
.cm-nl__l{margin-top:10px;height:7px;border-radius:4px;background:var(--gray-200)}
.cm-nl__l--short{margin-top:5px;width:82%}
.xs-page .cm-nl__cta{margin-top:14px;background:var(--red-600);color:#fff;text-align:center;border-radius:6px;
	padding:.55rem;font-family:var(--font-display);font-size:.9rem}

/* ---------- S3: game comms ---------- */
.cm-game__head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
	background:#111a2e;font-size:.72rem;color:rgba(255,255,255,.6)}
.cm-rsvp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cm-rsvp__cell{background:#0f1830;border:1px solid rgba(255,255,255,.12);border-radius:9px;
	padding:10px 6px;text-align:center}
.cm-rsvp__cell--in{border-color:rgba(58,219,118,.3)}
.cm-rsvp__cell--out{border-color:rgba(224,20,20,.3)}
.xs-page .cm-rsvp__n{font-family:var(--font-display);font-size:1.5rem;color:rgba(255,255,255,.6)}
.cm-rsvp__cell--in .cm-rsvp__n{color:var(--success)}
.cm-rsvp__cell--out .cm-rsvp__n{color:var(--red-500)}
.cm-rsvp__lbl{font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cm-jersey{background:#0f1830;border:1px solid rgba(224,20,20,.5);border-radius:10px;padding:12px 14px;
	transition:border-color .4s var(--ease)}
.cm-jersey.is-clear{border-color:rgba(58,219,118,.4)}
.cm-jersey__row{display:flex;align-items:center;justify-content:space-around;gap:10px}
.cm-jersey__side{text-align:center}
.cm-jersey__swatch{width:52px;height:44px;margin:0 auto;border-radius:8px;border:2px solid rgba(255,255,255,.25);
	transition:background .4s var(--ease)}
.cm-jersey__swatch--home{background:#14161c}
.cm-jersey__swatch--away{background:#191b22}
.cm-jersey.is-clear .cm-jersey__swatch--away{background:#eef1f5}
.cm-jersey__team{font-size:.72rem;color:#fff;margin-top:.4rem}
.cm-jersey__kit{font-size:.6rem;color:rgba(255,255,255,.45)}
.xs-page .cm-jersey__vs{font-family:var(--font-display);color:rgba(255,255,255,.4)}
.cm-jersey__foot{margin-top:12px;display:flex;align-items:center;gap:.6rem;justify-content:space-between;flex-wrap:wrap}
.cm-jersey__status{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--red-500)}
.cm-jersey.is-clear .cm-jersey__status{color:var(--success)}
.xs-page .cm-jersey__btn,
.xs-page .cm-jersey__btn:hover,
.xs-page .cm-jersey__btn:focus{background:var(--red-600);border:1px solid rgba(255,255,255,.18);
	border-radius:7px;padding:.4rem .8rem;cursor:pointer;font-family:var(--font-body);font-size:.78rem;
	color:#fff;transition:all .15s var(--ease)}
.xs-page .cm-jersey.is-clear .cm-jersey__btn,
.xs-page .cm-jersey.is-clear .cm-jersey__btn:hover,
.xs-page .cm-jersey.is-clear .cm-jersey__btn:focus{background:#0f1830}
.cm-game__actions{margin-top:14px;display:flex;gap:8px}
.xs-page .cm-act{flex:1;text-align:center;border-radius:8px;padding:.6rem;font-family:var(--font-display);font-size:.92rem;color:#fff}
.cm-act--primary{background:var(--blue-500)}
.cm-act--ghost{background:#0f1830;border:1px solid rgba(255,255,255,.14)}

/* ---------- S4: social post ---------- */
.cm-post{background:#fff;color:var(--ink);border-radius:16px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.6);max-width:400px;margin:0 auto}
.cm-post__head{display:flex;align-items:center;gap:.6rem;padding:12px 14px;border-bottom:1px solid var(--gray-200)}
.xs-page .cm-post__avatar{width:36px;height:36px;border-radius:50%;background:var(--navy-700);color:#fff;
	display:flex;align-items:center;justify-content:center;font-family:var(--font-display);flex:none}
.xs-page .cm-post__club{font-family:var(--font-display);color:var(--navy-700);font-size:.95rem}
.cm-post__time{font-size:.66rem;color:var(--gray-600)}
.cm-post__share{margin-left:auto;color:var(--gray-600)}
.cm-post__body{padding:14px;min-height:70px;font-size:.92rem;line-height:1.5;color:var(--ink)}
.cm-post__card{aspect-ratio:16/9;background:linear-gradient(135deg,#0d1a33,#1a0608);display:flex;
	align-items:center;justify-content:center;text-align:center;color:#fff}
.xs-page .cm-post__score{font-family:var(--font-display);font-size:2.2rem;line-height:1}
.cm-post__final{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-top:.3rem}
.cm-post__stats{padding:10px 14px;display:flex;gap:1.4rem;color:var(--gray-600);font-size:.8rem}

/* ---------- S5: automatic notification triggers ---------- */
.cm-trigs{display:flex;flex-direction:column;gap:12px}
.cm-trig{display:flex;align-items:center;gap:16px;background:#0b1120;border:1px solid rgba(255,255,255,.1);
	border-radius:14px;padding:16px 20px;transition:all .4s var(--ease)}
.cm-trig.is-on{background:rgba(33,153,232,.07);border-color:rgba(33,153,232,.4)}
.cm-trig__icon{flex:none;position:relative;width:44px;height:44px;border-radius:11px;background:#0f1830;
	color:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:1.1rem;
	transition:all .4s var(--ease)}
.cm-trig.is-on .cm-trig__icon{background:rgba(33,153,232,.16);color:var(--blue-500)}
/* the ping ring only exists while a row is lighting up */
.cm-trig__ping{position:absolute;inset:0;border-radius:11px;border:2px solid var(--blue-500);
	animation:cmPing 1.2s ease-out infinite}
.cm-trig__main{flex:1;min-width:0}
.cm-trig__event{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.xs-page .cm-trig__msg{font-family:var(--font-display);color:#fff;font-size:1.15rem;margin-top:2px}
.cm-trig__tag{flex:none;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	border-radius:6px;padding:.3rem .6rem;background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.cm-trig.is-on .cm-trig__tag{background:rgba(58,219,118,.14);color:var(--success)}
/* the admin-threshold row keeps its own tag colour once lit — it's an alert,
   not a routine "sent" confirmation */
.cm-trig.is-on .cm-trig__tag--admin{background:rgba(232,160,0,.16);color:var(--gold-300)}

/* ---------- multi-sport strip ---------- */
.cm-marquee{overflow:hidden}
.cm-marquee__track{margin-top:2rem;display:flex;gap:2.5rem;width:max-content;
	animation:cmMarquee 36s linear infinite;align-items:center;padding:0 1.25rem}
.cm-marquee__track img{height:46px;width:auto;opacity:.8}

/* ---------- one-place band + close ---------- */
.cm-oneplace{position:relative;overflow:hidden;text-align:center;
	background:linear-gradient(150deg,var(--navy-900),#0d1a33)}
.cm-oneplace__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:640px;height:420px;
	background:radial-gradient(circle,rgba(0,212,255,.26),transparent 65%);filter:blur(26px);pointer-events:none}
.cm-q{font-size:2.2rem;color:rgba(255,255,255,.2)}
.xs-page .cm-q__line{font-family:var(--font-display);font-size:clamp(1.5rem,3.6vw,2.2rem);color:#fff;
	margin:.5rem 0 0;line-height:1.2}
.cm-close{position:relative;overflow:hidden;text-align:center;
	background:linear-gradient(150deg,var(--navy-900),#0d1a33)}
.cm-close__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:640px;height:420px;
	background:radial-gradient(circle,rgba(33,153,232,.32),transparent 65%);filter:blur(26px);pointer-events:none}
.cm-close__foot{margin-top:1.8rem;color:rgba(255,255,255,.6);font-size:.9rem}
.cm-caption{text-align:center;margin-top:.9rem;color:rgba(255,255,255,.45);font-size:.82rem}

@media (prefers-reduced-motion:reduce){
	.cm-blob--cyan,.cm-chan,.cm-trig__ping,.cm-marquee__track{animation:none}
}