/* sector_focus block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   sector focus pills + marquee */

.sector-focus__pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.sector-focus__pills-label { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); margin-bottom: .7rem; }
.focus-pill { font-size: var(--fs-min); font-weight: 700; color: var(--navy); background: var(--light); border: 2px solid transparent; padding: .5rem 1.1rem; border-radius: var(--radius-pill); text-decoration: none; }
.focus-pill--linked:hover { background: var(--navy); color: var(--white); }
.sector-focus__marquee { border-block: 1px solid var(--line); padding-block: .9rem; display: flex; align-items: center; gap: 1.2rem; overflow: hidden; }
.sector-focus__marquee-label { flex: 0 0 auto; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--em-color); }
.sector-focus__marquee p { flex: 1 1 auto; white-space: nowrap; font-size: var(--fs-min); color: var(--muted); max-width: none; }

/* Ticker: the track holds the items twice (see the block markup) and slides one
   full copy, so the loop is seamless. Was previously inert — the keyframe lived
   only in the old child stylesheets, so both copies showed static and ran
   together. Now self-contained, brand-neutral. */
.sector-focus__marquee-track-wrap { flex: 1 1 auto; overflow: hidden; }
.sector-focus__marquee-track { display: flex; align-items: center; width: max-content; animation: sectorMarqueeScroll 34s linear infinite; }
.sector-focus__marquee-track-wrap:hover .sector-focus__marquee-track { animation-play-state: paused; }
.marquee-pill { white-space: nowrap; font-size: var(--fs-min); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; }
.marquee-pill::after { content: "\2022"; margin-inline: .95rem; color: var(--accent); }
@keyframes sectorMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sector-focus__marquee-track { animation: none; } }