/*
 * Manager Pressure Index — BettingApps.local
 * Loaded only on: page-templates/manager-index.php + manager-index-methodology.php
 * Brand tokens from CLAUDE.md / brand-tokens.css
 *
 * Section separation strategy:
 *   — All section backgrounds are #ffffff (no alternating cloud-white bands)
 *   — Sections are separated by border-top: 1px solid #E9E9E9
 *   — Section headings carry a left colour accent (Deep Magenta var(--ba-accent))
 *     which is the brand's designated divider/accent colour
 *
 * Pressure colour scale (used on rank badges via inline PHP style, and on bars/sparklines):
 *   Score  0-24  → green  #2f8f46
 *   Score 25-49  → amber  #e0ad17
 *   Score 50-74  → orange #f57a2a
 *   Score 75-100 → red    #d93a2f
 */

/* ---- Hide parent theme page-title bar ---- */
body.ba-manager-index-route .page-title {
	display: none;
}

/* ================================================================
   Section wrappers — all white, separated by hairline borders
   ================================================================ */

.ba-manager-index-shell,
.ba-manager-index-section,
.ba-manager-index-editorial {
	padding: 56px 0;
}

/* Hero keeps the gradient */
.ba-manager-index-shell {
	background: linear-gradient(135deg, #f87830 0%, #f8a018 52%, #e85090 100%);
}

/* All content sections: white background, top border divider */
.ba-manager-index-section,
.ba-manager-index-editorial {
	background: #fff;
	border-top: 1px solid #E9E9E9;
}

/* Remove the --light variant background — all sections are white now */
.ba-manager-index-section--light {
	background: #fff;
}

.ba-manager-index-shell .container,
.ba-manager-index-section .container,
.ba-manager-index-editorial .container {
	max-width: 1120px;
}

/* ================================================================
   Breadcrumbs (inside gradient hero)
   ================================================================ */

.ba-manager-index-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, 0.75);
}

.ba-manager-index-breadcrumbs a {
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
}

.ba-manager-index-breadcrumbs a:hover {
	color: #fff;
}

/* ================================================================
   Hero layout
   ================================================================ */

.ba-manager-index-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
	gap: 28px;
	align-items: stretch;
}

/* Hero content — text lives directly on the gradient */
.ba-manager-index-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Hero panel — white editorial aside card on the right */
.ba-manager-index-hero__panel {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.12);
	padding: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ================================================================
   Hero typography (white on gradient)
   ================================================================ */

.ba-manager-index-kicker {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 14px;
}

.ba-manager-index-hero h1 {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(34px, 4.8vw, 52px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #fff;
	margin-bottom: 16px;
}

.ba-manager-index-hero__lead {
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(248, 248, 248, 0.92);
	margin-bottom: 0;
}

.ba-manager-index-hero__limitation {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	padding-left: 14px;
	border-left: 3px solid rgba(255, 255, 255, 0.38);
	margin-bottom: 0;
}

/* ================================================================
   Hero meta row (freshness chips + methodology link)
   ================================================================ */

.ba-manager-index-hero__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 16px;
}

.ba-manager-index-status,
.ba-manager-index-pill-link,
.ba-manager-index-band {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 7px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Status chips on gradient — white-tinted pills */
.ba-manager-index-status {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.32);
}

.ba-manager-index-status--sample {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Stale renders inside the white hero panel — restore semantic red */
.ba-manager-index-status--stale {
	background: #fde8e8;
	color: #8e2222;
	border: 1px solid #f5cece;
	display: block;
	margin-top: 12px;
}

.ba-manager-index-pill-link {
	background: rgba(32, 32, 32, 0.72);
	color: #fff;
	text-decoration: none;
}

.ba-manager-index-pill-link:hover,
.ba-manager-index-pill-link:focus {
	color: #fff;
	text-decoration: none;
	background: var(--ba-accent);
}

/* ================================================================
   Hero panel typography
   ================================================================ */

.ba-manager-index-hero__panel h2 {
	font-family: 'Manrope', sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #202020;
	margin-bottom: 12px;
}

.ba-manager-index-hero__panel p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #474747;
}

.ba-manager-index-hero__editorial {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #888;
	margin-top: 14px;
}

/* ================================================================
   Shared card spec — 18px radius, brand shadow, #E9E9E9 border
   ================================================================ */

.ba-manager-index-methodology__card,
.ba-manager-index-note,
.ba-manager-index-card,
.ba-manager-index-methodology-summary,
.ba-manager-index-faq__item,
.ba-manager-index-editorial__card,
.ba-manager-index-empty {
	background: #fff;
	border: 1px solid #E9E9E9;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.08);
}

/* ================================================================
   Section headings
   Left border accent (Deep Magenta) signals editorial authored content
   ================================================================ */

.ba-manager-index-section__heading {
	margin-bottom: 28px;
}

.ba-manager-index-section__heading h2 {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #202020;
	margin-bottom: 8px;
	/* Left accent — brand Deep Magenta, the designated divider/accent colour */
	padding-left: 16px;
	border-left: 4px solid var(--ba-accent);
}

.ba-manager-index-section__heading p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #666;
	margin: 0;
	padding-left: 20px; /* align with the h2 text after the border */
}

/* ================================================================
   Why-changed: editorial notes grid
   Pink left border signals "editorial commentary" not data
   ================================================================ */

.ba-manager-index-notes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ba-manager-index-note {
	padding: 24px 24px 24px 20px;
	border-left: 3px solid #e85090;
}

.ba-manager-index-note h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 10px;
}

.ba-manager-index-note p {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #474747;
	margin: 0;
}

/* ================================================================
   Movers section
   ================================================================ */

.ba-manager-index-movers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ba-manager-index-movers__column {
	background: #fff;
	border: 1px solid #E9E9E9;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.07);
}

.ba-manager-index-movers__column h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #E9E9E9;
}

/* Mover rows are flat list items inside the column card */
.ba-manager-index-mover-card {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 11px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f2f2f2;
}

.ba-manager-index-mover-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ba-manager-index-mover-card strong {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #202020;
}

.ba-manager-index-mover-card span {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #888;
	margin-top: 2px;
}

.ba-manager-index-mover-card__delta {
	min-width: 58px;
	text-align: center;
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 14px;
	padding: 6px 10px;
	border-radius: 10px;
	flex-shrink: 0;
}

.ba-manager-index-mover-card__delta--up   { background: #fff1eb; color: #c24b17; }
.ba-manager-index-mover-card__delta--down { background: #eef6ea; color: #2c7b3f; }
.ba-manager-index-mover-card__delta--flat { background: #f2f2f2; color: #666; }

/* ================================================================
   Pressure visual module (hybrid spotlight + ladder + compare)
   ================================================================ */

.ba-manager-index-pressure-visual {
	border-top: 1px solid #E9E9E9;
}

.ba-manager-index-pressure-visual .ba-manager-index-section__heading {
	margin-bottom: 22px;
}

.ba-manager-index-pressure-visual__spotlight {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.ba-pressure-spotlight-card {
	background: #fff;
	border: 1px solid #E9E9E9;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.08);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.ba-pressure-spotlight-card__ring {
	position: relative;
	width: 92px;
	height: 92px;
	flex-shrink: 0;
}

.ba-pressure-spotlight-card__ring svg {
	width: 92px;
	height: 92px;
	transform: rotate(-90deg);
	display: block;
}

.ba-pressure-spotlight-card__ring-track {
	fill: none;
	stroke: #f1f1f1;
	stroke-width: 11;
}

.ba-pressure-spotlight-card__ring-progress {
	fill: none;
	stroke-width: 11;
	stroke-linecap: round;
}

.ba-pressure-spotlight-card--low .ba-pressure-spotlight-card__ring-progress { stroke: #2f8f46; }
.ba-pressure-spotlight-card--watch .ba-pressure-spotlight-card__ring-progress { stroke: #e0ad17; }
.ba-pressure-spotlight-card--high .ba-pressure-spotlight-card__ring-progress { stroke: #f57a2a; }
.ba-pressure-spotlight-card--extreme .ba-pressure-spotlight-card__ring-progress { stroke: #d93a2f; }

.ba-pressure-spotlight-card__ring-value {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ba-pressure-spotlight-card__ring-value strong {
	font-family: 'Manrope', sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	color: #202020;
}

.ba-pressure-spotlight-card__ring-value span {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #777;
	margin-top: 4px;
}

.ba-pressure-spotlight-card__meta {
	min-width: 0;
}

.ba-pressure-spotlight-card__rank {
	font-family: 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #202020;
	margin: 0 0 3px;
}

.ba-pressure-spotlight-card__club {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #777;
	margin: 0 0 7px;
}

.ba-pressure-spotlight-card__movement {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.ba-pressure-spotlight-card__movement.is-up { color: #bc4d18; }
.ba-pressure-spotlight-card__movement.is-down { color: #2c7b3f; }
.ba-pressure-spotlight-card__movement.is-flat { color: #777; }

.ba-pressure-ladder {
	background: #fff;
	border: 1px solid #E9E9E9;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.08);
	padding: 20px;
}

.ba-pressure-ladder__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.ba-pressure-ladder__description {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	margin: 0 0 14px;
}

.ba-pressure-ladder__filter {
	border: 1px solid #E9E9E9;
	background: #f8f8f8;
	color: #555;
	border-radius: 999px;
	padding: 7px 12px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ba-pressure-ladder__filter:hover,
.ba-pressure-ladder__filter:focus-visible {
	border-color: var(--ba-accent-text);
	color: #202020;
}

.ba-pressure-ladder__filter.is-active {
	background: #202020;
	border-color: #202020;
	color: #fff;
}

.ba-pressure-ladder__rows {
	display: grid;
	gap: 8px;
}

.ba-pressure-ladder-row {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(150px, 2fr) 90px 102px;
	align-items: center;
	gap: 12px;
	border: 1px solid #f0f0f0;
	border-radius: 14px;
	padding: 12px;
}

.ba-pressure-ladder-row__identity {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ba-pressure-ladder-row__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f8f8f8;
	border: 1px solid #E9E9E9;
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #202020;
	flex-shrink: 0;
}

.ba-pressure-ladder-row__name-wrap {
	min-width: 0;
}

.ba-pressure-ladder-row__name-wrap strong {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #202020;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ba-pressure-ladder-row__name-wrap span {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ba-pressure-ladder-row__bar-track {
	height: 10px;
	width: 100%;
	border-radius: 999px;
	background: #f2f2f2;
	overflow: hidden;
}

.ba-pressure-ladder-row__bar-fill {
	height: 100%;
	border-radius: inherit;
	min-width: 6px;
}

.ba-pressure-ladder-row--low .ba-pressure-ladder-row__bar-fill {
	background: linear-gradient(90deg, rgba(47, 143, 70, 0.22) 0%, #2f8f46 100%);
}

.ba-pressure-ladder-row--watch .ba-pressure-ladder-row__bar-fill {
	background: linear-gradient(90deg, rgba(224, 173, 23, 0.22) 0%, #e0ad17 100%);
}

.ba-pressure-ladder-row--high .ba-pressure-ladder-row__bar-fill {
	background: linear-gradient(90deg, rgba(245, 122, 42, 0.22) 0%, #f57a2a 100%);
}

.ba-pressure-ladder-row--extreme .ba-pressure-ladder-row__bar-fill {
	background: linear-gradient(90deg, rgba(217, 58, 47, 0.22) 0%, #d93a2f 100%);
}

.ba-pressure-ladder-row__stats {
	text-align: right;
}

.ba-pressure-ladder-row__score {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: #202020;
}

.ba-pressure-ladder-row__movement {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	margin-top: 4px;
}

.ba-pressure-ladder-row__movement.is-up { color: #bc4d18; }
.ba-pressure-ladder-row__movement.is-down { color: #2c7b3f; }
.ba-pressure-ladder-row__movement.is-flat { color: #777; }

.ba-pressure-ladder-row__actions {
	display: flex;
	justify-content: flex-end;
}

.ba-pressure-ladder-row__pin {
	border: 1px solid #E9E9E9;
	background: #fff;
	color: #202020;
	border-radius: 999px;
	padding: 7px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ba-pressure-ladder-row__pin:hover,
.ba-pressure-ladder-row__pin:focus-visible {
	border-color: var(--ba-accent-text);
	color: var(--ba-accent-text);
}

.ba-pressure-ladder-row__pin[aria-pressed="true"] {
	background: #202020;
	border-color: #202020;
	color: #fff;
}

.ba-pressure-ladder-row__pin:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.ba-pressure-compare {
	margin-top: 14px;
	background: #fff;
	border: 1px solid #E9E9E9;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.08);
	padding: 20px;
}

.ba-pressure-compare__header h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 6px;
}

.ba-pressure-compare__header p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	margin: 0 0 12px;
}

.ba-pressure-compare__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.ba-pressure-compare-card {
	background: #f8f8f8;
	border: 1px solid #E9E9E9;
	border-radius: 14px;
	padding: 14px;
}

.ba-pressure-compare-card h4 {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 2px;
}

.ba-pressure-compare-card__club {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #777;
	margin: 0 0 10px;
}

.ba-pressure-compare-card__stats {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.ba-pressure-compare-card__score {
	font-family: 'Manrope', sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: #202020;
}

.ba-pressure-compare-card__movement {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ba-accent-text);
}

.ba-pressure-compare-card__band {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin: 0;
}

/* ================================================================
   Rankings: manager card grid
   ================================================================ */

.ba-manager-index-ranking-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ba-manager-index-card {
	padding: 24px;
}

.ba-manager-index-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
}

.ba-manager-index-card__identity {
	display: flex;
	align-items: center;
	gap: 14px;
}

/*
 * Rank badge — background is computed as a PHP inline style per card
 * based on the manager's pressure_score (see rankings.php helper).
 * The CSS here sets shape, size, font only — colour comes from inline style.
 */
.ba-manager-index-card__rank {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 12px;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 16px;
	/* Fallback if inline style fails */
	background: var(--ba-accent);
}

.ba-manager-index-card h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 21px;
	font-weight: 700;
	color: #202020;
	letter-spacing: -0.01em;
	margin-bottom: 3px;
}

.ba-manager-index-card__identity p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #888;
	margin: 0;
}

.ba-manager-index-card__score-block {
	text-align: right;
	flex-shrink: 0;
}

.ba-manager-index-card__score {
	font-family: 'Manrope', sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	color: #202020;
	margin: 8px 0 4px;
}

.ba-manager-index-card__movement {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 13px;
}

.ba-manager-index-card__movement.is-up   { color: #c24b17; }
.ba-manager-index-card__movement.is-down { color: #2c7b3f; }
.ba-manager-index-card__movement.is-flat { color: #999; }

/* Pressure band pill */
.ba-manager-index-band {
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ba-manager-index-band--low     { background: #e9f8ec; color: #2f8f46; }
.ba-manager-index-band--watch   { background: #fff6de; color: #996d00; }
.ba-manager-index-band--high    { background: #ffeadb; color: #cc5c1a; }
.ba-manager-index-band--extreme { background: #ffe4e1; color: #d93a2f; }

/* Card middle: sparkline + summary */
.ba-manager-index-card__middle {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
}

.ba-manager-index-card__sparkline {
	padding: 8px 10px;
	border-radius: 12px;
	background: #f8f8f8;
	border: 1px solid #E9E9E9;
}

.ba-manager-index-card__sparkline svg {
	display: block;
	width: 100%;
	height: 42px;
}

/* Sparkline polyline stroke colour is set by an SVG linearGradient in rankings.php */
.ba-manager-index-card__sparkline polyline {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ba-manager-index-card__summary {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	margin: 0;
}

/* Metrics chips — brand chip spec: bg #F8F8F8, border #E9E9E9 */
.ba-manager-index-card__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.ba-manager-index-card__metrics span {
	display: inline-flex;
	background: #f8f8f8;
	border: 1px solid #E9E9E9;
	border-radius: 999px;
	padding: 5px 12px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #555;
}

/* ================================================================
   Factor bars
   The fill uses a full pressure-scale gradient (green → amber → orange → magenta).
   The inline width (0–100%) clips how much of that gradient is revealed,
   so low values show green and high values reveal the orange-magenta end.
   ================================================================ */

.ba-manager-index-factor-list {
	display: grid;
	gap: 10px;
}

.ba-manager-index-factor__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #666;
}

.ba-manager-index-factor__meta strong {
	font-weight: 700;
	color: #202020;
}

.ba-manager-index-factor__track {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: #eee; /* fallback; overridden per band below */
	overflow: hidden;
}

.ba-manager-index-factor__fill {
	height: 100%;
	border-radius: inherit;
	min-width: 4px;
	/* Colour is set per band class below — no default gradient */
}

/*
 * Band-specific factor bar fills.
 * Each bar uses its component value's own band colour only.
 * Fade from ~12% opacity to 100% opacity left-to-right:
 *   — thin bars stay readable (the colour is visible even at low width)
 *   — the right edge is always the full band colour = clear signal
 * Track background uses a matching ultra-light tint (2% opacity).
 */

/* Low — green */
.ba-manager-index-factor--low .ba-manager-index-factor__track {
	background: rgba(47, 143, 70, 0.08);
}
.ba-manager-index-factor--low .ba-manager-index-factor__fill {
	background: linear-gradient(90deg, rgba(47, 143, 70, 0.12) 0%, rgba(47, 143, 70, 1) 100%);
}

/* Watch — amber */
.ba-manager-index-factor--watch .ba-manager-index-factor__track {
	background: rgba(224, 173, 23, 0.08);
}
.ba-manager-index-factor--watch .ba-manager-index-factor__fill {
	background: linear-gradient(90deg, rgba(224, 173, 23, 0.12) 0%, rgba(224, 173, 23, 1) 100%);
}

/* High — orange */
.ba-manager-index-factor--high .ba-manager-index-factor__track {
	background: rgba(245, 122, 42, 0.08);
}
.ba-manager-index-factor--high .ba-manager-index-factor__fill {
	background: linear-gradient(90deg, rgba(245, 122, 42, 0.12) 0%, rgba(245, 122, 42, 1) 100%);
}

/* Extreme — magenta */
.ba-manager-index-factor--extreme .ba-manager-index-factor__track {
	background: rgba(217, 58, 47, 0.08);
}
.ba-manager-index-factor--extreme .ba-manager-index-factor__fill {
	background: linear-gradient(90deg, rgba(217, 58, 47, 0.12) 0%, rgba(217, 58, 47, 1) 100%);
}

.ba-manager-index-factor.is-inactive .ba-manager-index-factor__meta {
	color: #8a8a8a;
}

.ba-manager-index-factor.is-inactive .ba-manager-index-factor__meta strong {
	color: #7c7c7c;
}

.ba-manager-index-factor.is-inactive .ba-manager-index-factor__track {
	background: rgba(120, 120, 120, 0.12);
}

.ba-manager-index-factor.is-inactive .ba-manager-index-factor__fill {
	min-width: 0;
	background: linear-gradient(90deg, rgba(120, 120, 120, 0.18) 0%, rgba(120, 120, 120, 0.45) 100%);
}

/* ================================================================
   Methodology summary block (on hub page)
   ================================================================ */

.ba-manager-index-methodology-summary {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.75fr);
	gap: 24px;
	padding: 28px;
}

.ba-manager-index-methodology-summary h2 {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #202020;
	margin-bottom: 12px;
}

.ba-manager-index-methodology-summary p,
.ba-manager-index-methodology-summary ul {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #474747;
}

.ba-manager-index-methodology-summary ul {
	margin: 12px 0 0;
	padding-left: 18px;
}

.ba-manager-index-methodology-summary__panel {
	border-left: 1px solid #E9E9E9;
	padding-left: 24px;
}

.ba-manager-index-methodology-summary__panel h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 10px;
}

.ba-manager-index-methodology-summary__panel p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

.ba-manager-index-methodology-summary__panel .ba-manager-index-pill-link {
	display: inline-flex;
	margin-top: 16px;
	background: #202020;
	color: #fff;
}

/* ================================================================
   Full methodology page
   ================================================================ */

.ba-manager-index-methodology {
	display: grid;
	gap: 18px;
}

.ba-manager-index-methodology__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ba-manager-index-methodology__card {
	padding: 26px;
}

.ba-manager-index-methodology__card h2 {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #202020;
	margin-bottom: 12px;
}

.ba-manager-index-methodology__card p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #474747;
}

.ba-manager-index-methodology__card ul {
	margin: 14px 0 0;
	padding-left: 18px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #474747;
}

.ba-manager-index-weight-list {
	display: grid;
	gap: 0;
}

.ba-manager-index-weight-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #E9E9E9;
	padding: 11px 0;
	font-family: 'Inter', sans-serif;
}

.ba-manager-index-weight-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ba-manager-index-weight-item span {
	display: block;
}

/* ================================================================
   FAQ section
   ================================================================ */

.ba-manager-index-faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ba-manager-index-faq__item {
	padding: 24px;
}

.ba-manager-index-faq__item h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 10px;
}

.ba-manager-index-faq__item p {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #474747;
	margin: 0;
}

/* ================================================================
   Related links
   ================================================================ */

.ba-manager-index-related-links {
	margin-top: 28px;
}

.ba-manager-index-related-links h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #202020;
	margin-bottom: 12px;
}

.ba-manager-index-related-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ba-manager-index-related-links__list a {
	background: #fff;
	color: var(--ba-accent-text);
	border: 1px solid #ead1dd;
	border-radius: 999px;
	padding: 8px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ba-manager-index-related-links__list a:hover {
	border-color: var(--ba-accent-text);
	color: #202020;
	text-decoration: none;
}

/* ================================================================
   Editorial content card + empty state
   ================================================================ */

.ba-manager-index-editorial__card,
.ba-manager-index-empty {
	padding: 28px;
}

.ba-manager-index-empty {
	max-width: 760px;
	margin: 0 auto;
}

.ba-manager-index-empty h1 {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #202020;
	margin-bottom: 12px;
}

.ba-manager-index-empty p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #666;
}

/* ================================================================
   Methodology page — additional components
   ================================================================ */

/*
 * Table-of-contents list inside the hero panel
 */
.ba-manager-index-methodology-toc {
	margin: 0 0 14px;
	padding-left: 18px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.8;
	color: #474747;
}

/*
 * Section heading inside a card (data families, pressure bands, etc.)
 * Same left-accent pattern as section headings, but smaller to sit inside a card.
 */
.ba-manager-index-section__heading--card {
	margin-bottom: 20px;
}

.ba-manager-index-section__heading--card h2 {
	font-size: clamp(18px, 2vw, 22px);
	margin-bottom: 6px;
	padding-left: 14px;
	border-left: 3px solid var(--ba-accent);
}

.ba-manager-index-section__heading--card p {
	padding-left: 17px;
	font-size: 14px;
}

/*
 * Pressure band rows — band pill + score range + plain description
 */
.ba-manager-index-band-rows {
	display: grid;
	gap: 12px;
}

.ba-manager-index-band-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f2f2f2;
}

.ba-manager-index-band-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ba-manager-index-band-row .ba-manager-index-band {
	flex-shrink: 0;
	min-width: 76px;
	text-align: center;
}

.ba-manager-index-band-row__detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ba-manager-index-band-row__detail strong {
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #202020;
}

.ba-manager-index-band-row__detail span {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #888;
}

/*
 * Scoring weight bars — wider card layout, Deep Magenta fill gradient.
 * These show relative contribution (not pressure level), so the gradient
 * runs from a light tint of magenta to full Deep Magenta.
 */
.ba-manager-index-methodology__card--weights {
	padding: 28px;
}

.ba-manager-index-weight-bars {
	display: grid;
	gap: 14px;
}

.ba-manager-index-weight-bar-item {
	/* reuses factor__track from the hub */
}

.ba-manager-index-weight-bar__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #474747;
}

.ba-manager-index-weight-bar__meta strong {
	font-weight: 700;
	color: #202020;
}

.ba-manager-index-weight-bar__fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		rgba(15, 124, 133, 0.30)  0%,
		rgba(15, 124, 133, 0.65) 50%,
		var(--ba-accent)                  100%
	);
	min-width: 6px;
}

/*
 * Source families list — plain clean list inside a card
 */
.ba-manager-index-source-list {
	margin: 0;
	padding-left: 20px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.8;
	color: #474747;
}

.ba-manager-index-source-list li + li {
	margin-top: 6px;
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 991px) {
	.ba-manager-index-hero,
	.ba-manager-index-methodology-summary,
	.ba-manager-index-methodology__grid,
	.ba-manager-index-card__middle {
		grid-template-columns: 1fr;
	}

	.ba-manager-index-notes,
	.ba-manager-index-ranking-list,
	.ba-manager-index-faq,
	.ba-manager-index-movers,
	.ba-manager-index-pressure-visual__spotlight {
		grid-template-columns: 1fr;
	}

	.ba-pressure-ladder-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.ba-pressure-ladder-row__stats,
	.ba-pressure-ladder-row__actions {
		text-align: left;
		justify-content: flex-start;
	}

	.ba-pressure-compare__grid {
		grid-template-columns: 1fr;
	}

	.ba-manager-index-methodology-summary__panel {
		border-left: none;
		border-top: 1px solid #E9E9E9;
		padding-left: 0;
		padding-top: 20px;
	}
}

@media (max-width: 767px) {
	.ba-manager-index-shell,
	.ba-manager-index-section,
	.ba-manager-index-editorial {
		padding: 40px 0;
	}

	.ba-manager-index-hero__content {
		padding-bottom: 4px;
	}

	.ba-manager-index-hero__panel,
	.ba-manager-index-card,
	.ba-manager-index-note,
	.ba-manager-index-faq__item,
	.ba-manager-index-methodology__card,
	.ba-manager-index-editorial__card,
	.ba-manager-index-methodology-summary,
	.ba-pressure-spotlight-card,
	.ba-pressure-ladder,
	.ba-pressure-compare {
		padding: 20px;
	}

	.ba-manager-index-hero h1 {
		font-size: clamp(30px, 8vw, 40px);
	}

	.ba-manager-index-card__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ba-manager-index-card__score-block {
		text-align: left;
	}

	.ba-manager-index-card__identity {
		align-items: center;
	}

	.ba-manager-index-section__heading h2 {
		padding-left: 12px;
	}

	.ba-manager-index-section__heading p {
		padding-left: 16px;
	}
}