/* Metrics-first layer for the two forecast hubs (staged mockup). */
:is(#rf-root, #ff-root) .m-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: .5rem; }
:is(#rf-root, #ff-root) .m-head { display: flex; align-items: center; gap: .6rem; }
:is(#rf-root, #ff-root) .m-head h2 { margin: 0; }
:is(#rf-root, #ff-root) .m-line { font-size: 1.05rem; font-weight: 700; margin: .25rem 0 .5rem; }
:is(#rf-root, #ff-root) .m-chart { height: 340px; min-width: 0; }
:is(#rf-root, #ff-root) .m-more { margin-top: .6rem; }
:is(#rf-root, #ff-root) .m-more > summary { cursor: pointer; font-weight: 700; color: #004aad; }
:is(#rf-root, #ff-root) .m-pos { color: var(--gain, #137a3e); font-weight: 700; }
:is(#rf-root, #ff-root) .m-neg { color: var(--loss, #b42318); font-weight: 700; }
/* Logos: identification only, shown as supplied */
:is(#rf-root, #ff-root) .lg { height: 22px; width: auto; max-width: 84px; object-fit: contain; vertical-align: middle; margin-right: .4rem; }
:is(#rf-root, #ff-root) .lg.crest { width: 22px; max-width: 22px; }
:is(#rf-root, #ff-root) .co { display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; }
/* League cards: small horizontal bars */
#ff-root .m-league { border: 1px solid #e3e7ee; border-radius: 10px; padding: .6rem .75rem; min-width: 0; }
#ff-root .m-league h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .35rem; display: flex; align-items: center; gap: .4rem; }
#ff-root .m-league h4 { font-size: .78rem; font-weight: 700; color: #5b6573; margin: .45rem 0 .15rem; text-transform: uppercase; letter-spacing: .03em; }
#ff-root .m-bar { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; gap: .4rem; align-items: center; font-size: .85rem; margin: .18rem 0; }
#ff-root .m-bar .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ff-root .m-bar .track { grid-column: 1 / -1; height: .45rem; background: #eef1f4; border-radius: 4px; overflow: hidden; margin-top: -.1rem; }
#ff-root .m-bar .fill { display: block; height: 100%; background: #004aad; border-radius: 4px; }
#ff-root .m-bar.drop .fill { background: #b42318; }
#ff-root .m-bar .p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#ff-root .m-pick { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
#ff-root .m-pick .bh { width: 40px; height: 40px; }
/* Bobbleheads: gentle bob with a slight head tilt, about 2 s a loop */
.bh { flex: none; overflow: visible; }
.bh .bh-head { transform-box: view-box; transform-origin: 32px 38px; animation: bh-bob 2s ease-in-out infinite; }
.bh .bh-body { transform-box: view-box; transform-origin: 32px 62px; animation: bh-sway 2s ease-in-out infinite; }
@keyframes bh-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-2px) rotate(5deg); } }
@keyframes bh-sway { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .bh .bh-head, .bh .bh-body { animation: none; } }
:is(#rf-root, #ff-root) svg.bh { width: 56px !important; height: 56px !important; max-width: none !important; }
#ff-root .m-pick svg.bh { width: 38px !important; height: 38px !important; }
#rf-root #m-table { max-height: none; }
#rf-root #m-table .m-sticky { position: sticky; left: 0; z-index: 2; background: #fff; }
#rf-root #m-table th.m-sticky { z-index: 3; background: #e8f1ff; }
#rf-root #m-table tr:nth-child(even) > td.m-sticky { background: #f6f8fb; }
#ff-root .m-ptab td { vertical-align: middle; }
#ff-root .m-ptab .m-pick { display: flex; align-items: center; gap: 6px; }
#ff-root .m-ptab .m-pick b { font-size: 1.05em; }
#ff-root table.m-ptab { min-width: 0 !important; width: 100%; }
#ff-root .m-ptab .m-pick { white-space: normal; }
#ff-root .m-ptab td:last-child { width: 46%; }
#ff-root .m-ptab td, #ff-root .m-ptab th, #ff-root .m-ptab .co { white-space: normal !important; }
#rf-root .m-top + .m-head, #rf-root .m-top + h2, #ff-root .m-kpis + .m-head { margin-top: 1rem; }
#ff-root #leaguecards { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px; }
#ff-root #leaguecards > .m-league { flex: 0 1 calc((100% - 24px) / 3); min-width: 0; }
@media (min-width: 1200px) { #ff-root #leaguecards > .m-league { flex-basis: calc((100% - 48px) / 5); } }
@media (max-width: 767px) { #ff-root #leaguecards > .m-league { flex-basis: 100%; } }
@media (min-width: 1200px) { #rf-root .m-kpis.m-top { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1199px) { #rf-root .m-kpis.m-top { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  :is(#rf-root, #ff-root) .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :is(#rf-root, #ff-root) .m-kpis .kpi { padding: .55rem .6rem; }
  :is(#rf-root, #ff-root) .m-kpis .kpi .v { font-size: 1.2rem; }
  :is(#rf-root, #ff-root) .m-kpis .kpi .l { font-size: .62rem; }
}
#rf-root .m-kpis .kpi .v small { font-size: .62em; font-weight: 600; }