/* ==========================================================================
   PickBot — Under the Hood. Scoped to .pbh. Consumes the theme's --pb-* tokens and
   defines none (the same D-3 contract the Intelligence Lab and Free Picks carry).
   Two chromatic hues only: signal + fault. Decorative motion is ambient and never
   represents a transaction.
   ========================================================================== */

.pbh { position: relative; }
.pbh * { min-width: 0; }

.pbh-h2 { margin: 0 0 14px; font-size: var(--wp--preset--font-size--title-2); letter-spacing: -0.015em; line-height: 1.08; }
.pbh-sub { margin: 0; max-width: 64ch; color: var(--pb-text-2); font-size: var(--wp--preset--font-size--body); }
.pbh-empty { margin: 0; color: var(--pb-muted); font-size: var(--wp--preset--font-size--body-s); }
.pbh-na { color: var(--pb-faint); }

/* --------------------------------------------------------------------------
   Pagehead: telemetry grid + status row
   -------------------------------------------------------------------------- */
.pbh-head { position: relative; isolation: isolate; overflow: hidden; }
.pbh-grid {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(244, 244, 241, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(244, 244, 241, 0.035) 1px, transparent 1px),
		radial-gradient(ellipse 70% 60% at 22% 10%, rgba(191, 240, 73, 0.10), transparent 60%);
	background-size: 64px 64px, 64px 64px, 100% 100%;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.25) 70%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.25) 70%, transparent);
}
.pbh-head .pb-lead { margin-top: 18px; }

.pbh-status {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
	margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pb-hairline);
	font-size: var(--wp--preset--font-size--body-s);
}
.pbh-status__item { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pbh-status__k { font-family: var(--wp--preset--font-family--data); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-status__v { color: var(--pb-text); font-variant-numeric: tabular-nums; transition: color var(--pb-base) var(--pb-ease); }
.pbh-status__v.is-changed { color: var(--pb-signal); }

.pbh-engine {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 14px; border: 1px solid var(--pb-control); border-radius: 999px;
	font-family: var(--wp--preset--font-family--data); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-text-2);
}
.pbh-engine__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pb-control); flex: 0 0 8px; }
.pbh-engine.is-active { border-color: rgba(191, 240, 73, 0.45); color: var(--pb-text); }
.pbh-engine.is-active .pbh-engine__dot { background: var(--pb-signal); box-shadow: 0 0 0 0 rgba(191, 240, 73, 0.55); animation: pbh-pulse 2.4s ease-out infinite; }
.pbh-engine.is-unknown { border-style: dashed; }
@keyframes pbh-pulse { 0% { box-shadow: 0 0 0 0 rgba(191, 240, 73, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(191, 240, 73, 0); } 100% { box-shadow: 0 0 0 0 rgba(191, 240, 73, 0); } }

.pbh-unavailable { margin: 16px 0 0; padding: 12px 16px; border-left: 2px solid var(--pb-control); background: var(--pb-sunken); color: var(--pb-text-2); font-size: var(--wp--preset--font-size--body-s); }

/* --------------------------------------------------------------------------
   Overview tiles
   -------------------------------------------------------------------------- */
.pbh-metrics { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .pbh-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.pbh-metric {
	position: relative; background: var(--pb-surface); border: 1px solid var(--pb-hairline); border-radius: 8px;
	padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 6px;
	transition: border-color var(--pb-fast) var(--pb-ease);
}
.pbh-metric::before { content: ""; position: absolute; top: -1px; left: -1px; width: 0; height: 2px; background: var(--pb-signal); transition: width var(--pb-fast) var(--pb-ease); }
.pbh-metric:hover { border-color: #2C3949; }
.pbh-metric:hover::before { width: 28px; }
.pbh-metric__value { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.02em; color: var(--pb-text); transition: color var(--pb-slow) var(--pb-ease); }
.pbh-metric__value.is-changed { color: var(--pb-signal); }
.pbh-metric__label { margin: 4px 0 0; font-weight: 600; color: var(--pb-text); font-size: var(--wp--preset--font-size--body-s); }
.pbh-metric__window { margin: 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-metric__def { margin: 6px 0 0; color: var(--pb-muted); font-size: 13px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Pipeline
   -------------------------------------------------------------------------- */
.pbh-pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: stage; }
@media (min-width: 700px) { .pbh-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .pbh-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pbh-stage {
	position: relative; background: var(--pb-surface); border: 1px solid var(--pb-hairline); border-radius: 8px;
	padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px;
}
.pbh-stage--unmeasured { background: var(--pb-sunken); border-style: dashed; }
.pbh-stage__n { font-size: 11px; letter-spacing: 0.18em; color: var(--pb-signal); }
.pbh-stage__label { margin: 0; font-size: var(--wp--preset--font-size--title-3); letter-spacing: -0.01em; }
.pbh-stage__desc { margin: 0; color: var(--pb-text-2); font-size: 13px; line-height: 1.5; flex: 1 1 auto; }
.pbh-stage__metrics { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--pb-hairline); display: grid; gap: 6px; }
.pbh-stage__metrics > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pbh-stage__metrics dt { font-family: var(--wp--preset--font-family--data); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-stage__metrics dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 20px; line-height: 1; transition: color var(--pb-slow) var(--pb-ease); }
.pbh-stage__metrics dd.is-changed { color: var(--pb-signal); }
.pbh-stage__nometric dd { font-family: var(--wp--preset--font-family--data) !important; font-size: 11px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pb-muted); font-weight: 500 !important; }

/* Connector: an ambient signal travelling between stages. Decorative. */
.pbh-stage::after {
	content: ""; position: absolute; pointer-events: none;
	background: repeating-linear-gradient(90deg, rgba(191, 240, 73, 0.55) 0 6px, transparent 6px 14px);
	background-size: 28px 100%; opacity: 0.7;
	animation: pbh-flow 1.6s linear infinite;
}
@media (max-width: 699px) {
	.pbh-stage:not(:last-child)::after { left: 50%; bottom: -14px; width: 2px; height: 14px; background: repeating-linear-gradient(180deg, rgba(191, 240, 73, 0.55) 0 4px, transparent 4px 8px); background-size: 100% 16px; animation-name: pbh-flow-y; }
}
@media (min-width: 700px) and (max-width: 1099px) {
	.pbh-stage:nth-child(odd)::after { top: 50%; right: -18px; width: 18px; height: 2px; }
}
@media (min-width: 1100px) {
	.pbh-stage:not(:nth-child(4n))::after { top: 50%; right: -18px; width: 18px; height: 2px; }
}
@keyframes pbh-flow { to { background-position: 28px 0; } }
@keyframes pbh-flow-y { to { background-position: 0 16px; } }

/* --------------------------------------------------------------------------
   Activity chart
   -------------------------------------------------------------------------- */
.pbh-chartwrap { background: var(--pb-surface); border: 1px solid var(--pb-hairline); border-radius: 8px; padding: clamp(12px, 2vw, 22px) clamp(8px, 1.6vw, 18px); }
.pbh-chart { display: block; width: 100%; height: clamp(200px, 28vw, 320px); }
.pbh-chart__grid { stroke: var(--pb-hairline); stroke-width: 1; }
.pbh-chart__axis { stroke: var(--pb-control); stroke-width: 1; }
.pbh-chart__tick { fill: var(--pb-muted); font-family: var(--wp--preset--font-family--data); font-size: 11px; }
.pbh-chart__tick--right { fill: var(--pb-faint); }
.pbh-chart__hit { fill: transparent; }
.pbh-chart__col:hover .pbh-chart__hit { fill: rgba(244, 244, 241, 0.04); }
.pbh-chart__bar { transition: y var(--pb-slow) var(--pb-ease), height var(--pb-slow) var(--pb-ease); }
.pbh-chart__bar--intake { fill: var(--pb-signal); }
.pbh-chart__bar--structured { fill: rgba(191, 240, 73, 0.55); }
.pbh-chart__bar--graded { fill: var(--pb-text); }
.pbh-chart__line { fill: none; stroke: rgba(184, 192, 203, 0.6); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pbh-chart__area { fill: rgba(184, 192, 203, 0.07); }
.pbh-chart__axes { display: flex; justify-content: space-between; margin: 6px 4px 0; font-family: var(--wp--preset--font-family--data); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pb-faint); }

.pbh-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--pb-text-2); }
.pbh-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.pbh-legend__swatch { width: 12px; height: 12px; border-radius: 2px; }
.pbh-legend__item--intake .pbh-legend__swatch { background: var(--pb-signal); }
.pbh-legend__item--structured .pbh-legend__swatch { background: rgba(191, 240, 73, 0.55); }
.pbh-legend__item--graded .pbh-legend__swatch { background: var(--pb-text); }
.pbh-legend__item--refresh .pbh-legend__swatch { height: 2px; border-radius: 1px; background: rgba(184, 192, 203, 0.6); }

/* --------------------------------------------------------------------------
   Coverage
   -------------------------------------------------------------------------- */
.pbh-leagues { display: grid; gap: 12px; }
.pbh-league {
	display: grid; gap: 14px 24px; align-items: center;
	background: var(--pb-surface); border: 1px solid var(--pb-hairline); border-radius: 8px; padding: 18px 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pbh-league { grid-template-columns: 150px minmax(0, 1fr) auto; } }
.pbh-league.is-inplay { border-color: rgba(191, 240, 73, 0.35); }
.pbh-league__id { display: flex; flex-direction: column; gap: 4px; }
.pbh-league__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.pbh-league__sport { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-league__state { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pb-faint); }
.is-inplay .pbh-league__state { color: var(--pb-signal); }
.pbh-league__next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; }
.pbh-league__k { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-league__home { display: inline-flex; align-items: center; gap: 10px; }
.pbh-league__at { color: var(--pb-faint); }
.pbh-league__when { color: var(--pb-text-2); font-size: 12px; letter-spacing: 0.06em; }
.pbh-league__nogame { color: var(--pb-muted); font-size: var(--wp--preset--font-size--body-s); }
.pbh-team { display: inline-flex; align-items: center; gap: 8px; }
.pbh-team__name { color: var(--pb-text); }
.pbh-badge { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.pbh-badge--fallback { display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--data); font-size: 9px; letter-spacing: 0.04em; color: var(--pb-muted); border: 1px solid var(--pb-hairline); border-radius: 4px; }
.pbh-league__stats { margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 4px 22px; }
.pbh-league__stats > div { display: flex; flex-direction: column; gap: 2px; }
.pbh-league__stats dt { font-family: var(--wp--preset--font-family--data); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pb-muted); white-space: nowrap; }
.pbh-league__stats dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 22px; line-height: 1; transition: color var(--pb-slow) var(--pb-ease); }
.pbh-league__stats dd.is-changed { color: var(--pb-signal); }
@media (max-width: 599px) { .pbh-league__stats { grid-template-columns: repeat(2, auto); } }

/* --------------------------------------------------------------------------
   Distribution
   -------------------------------------------------------------------------- */
.pbh-dist { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pbh-dist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pbh-dist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pbh-dist__panel { background: var(--pb-surface); border: 1px solid var(--pb-hairline); border-radius: 8px; padding: 20px 22px; }
@media (min-width: 1100px) { .pbh-dist__panel[data-pbh-dist="held_reasons"] { grid-column: span 2; } }
@media (min-width: 1100px) { .pbh-dist__panel[data-pbh-dist="held_reasons"] .pbh-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.pbh-dist__title { margin: 0 0 14px; font-family: var(--wp--preset--font-family--data); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-dist__unit { color: var(--pb-faint); letter-spacing: 0.12em; }
.pbh-dist__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--pb-hairline); color: var(--pb-muted); font-size: 13px; line-height: 1.5; }
.pbh-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pbh-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.pbh-bar__label { font-size: 13px; color: var(--pb-text-2); }
.pbh-bar__value { grid-column: 2; grid-row: 1 / span 2; font-size: 15px; color: var(--pb-text); }
.pbh-bar__track { grid-column: 1; height: 6px; border-radius: 999px; background: var(--pb-sunken); overflow: hidden; }
.pbh-bar__fill { display: block; height: 100%; background: var(--pb-signal); border-radius: 999px; transition: width var(--pb-slow) var(--pb-ease); }

/* --------------------------------------------------------------------------
   Feed
   -------------------------------------------------------------------------- */
.pbh-feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pb-hairline); }
.pbh-feed__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--pb-hairline); align-items: start; }
.pbh-feed__item.is-new { animation: pbh-in var(--pb-slow) var(--pb-ease-in) both; }
@keyframes pbh-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pbh-feed__time { font-size: 12px; letter-spacing: 0.06em; color: var(--pb-muted); padding-top: 3px; white-space: nowrap; }
.pbh-feed__body { display: flex; flex-direction: column; gap: 2px; }
.pbh-feed__tags { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-muted); }
.pbh-feed__title { font-weight: 600; color: var(--pb-text); }
.pbh-feed__detail { color: var(--pb-text-2); font-size: var(--wp--preset--font-size--body-s); }
.pbh-feed__item--graded .pbh-feed__tags { color: var(--pb-signal); }
.pbh-feed__item--structured .pbh-feed__tags { color: var(--pb-text-2); }
@media (max-width: 599px) { .pbh-feed__item { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Feedback loop · How PickBot thinks · footer
   -------------------------------------------------------------------------- */
.pbh-loop { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .pbh-loop { grid-template-columns: 6fr 5fr; gap: 56px; } }
.pbh-loop .pb-ctas { margin-top: 24px; }
.pbh-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--pb-hairline); }
.pbh-ladder__step { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0 14px 24px; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 18px; }
.pbh-ladder__step::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--pb-ground); border: 2px solid var(--pb-signal); }
.pbh-ladder__step:last-child::before { background: var(--pb-signal); }
.pbh-ladder__n { font-size: 11px; letter-spacing: 0.16em; color: var(--pb-muted); }

.pbh-think { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pbh-think { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pbh-think { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pbh-think__n { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: 0.18em; color: var(--pb-signal); }

.pbh-disclosures { margin: 0 0 16px; padding: 0 0 0 18px; color: var(--pb-muted); font-size: 13px; line-height: 1.6; max-width: 80ch; }
.pbh-attribution { margin: 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.pbh-attribution a { color: var(--pb-muted); text-decoration: none; }
.pbh-attribution a:hover { color: var(--pb-text); }

/* --------------------------------------------------------------------------
   Reduced motion: decoration stops, values still update.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pbh-engine.is-active .pbh-engine__dot { animation: none; }
	.pbh-stage::after { animation: none; }
	.pbh-feed__item.is-new { animation: none; }
	.pbh-chart__bar, .pbh-bar__fill, .pbh-metric__value, .pbh-stage__metrics dd, .pbh-league__stats dd, .pbh-status__v { transition: none; }
}