/* ========================================================= THE ROUND ROBIN — forecast-round.css · "The Round" Styles for assets/js/forecast-round.js. Voice colours are passed in per voice (Model --projection, Grant --studio, You --text, Community the chart steel) so nothing here names a category. Contract: REFERENCE.md §3 "Forecast sources (The Round)". ========================================================= */ .fr-band { container-type: inline-size; margin: 0 0 var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .fr-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--s-6); align-items: center; } .fr-ringbox { width: 100%; max-width: 380px; margin-inline: auto; } .fr-ring { width: 100%; height: auto; display: block; overflow: visible; } .fr-finding { font-family: var(--fe); font-weight: 600; font-size: 30px; line-height: 1.14; color: var(--text); margin: 6px 0 8px; text-wrap: balance; max-width: 26ch; } .fr-scope { font-family: var(--fm); font-size: 11px; color: var(--muted); margin: 0 0 var(--s-3); } .fr-hint { font-family: var(--fc); font-size: 11.5px; color: var(--muted); margin: 0; max-width: 52ch; } /* Ring marks -- the homepage ring's language: round seats, round caps, the field as an outer ring of ticks, agreement as arc length. */ .fr-seat, .fr-edge, .fr-hub { cursor: pointer; outline: none; } .fr-edge.is-dead { cursor: default; } .fr-hit { fill: transparent; } .fr-focus { fill: none; stroke: transparent; } .fr-guide { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; } .fr-track { fill: none; stroke: var(--border); stroke-width: 1; } .fr-petal { stroke: var(--border); stroke-width: 2; stroke-linecap: round; transition: stroke 0.45s ease, stroke-width 0.45s ease; } .fr-petals.is-dense .fr-petal { stroke-width: 1.2; } .fr-petal.is-on { stroke-width: 3; } .fr-petals.is-dense .fr-petal.is-on { stroke-width: 2; } .fr-petal.is-both { stroke: var(--text); } .fr-petal.is-some { stroke: var(--sub); } .fr-edge-hit { fill: none; stroke: transparent; stroke-width: 26; } .fr-edge-track { fill: none; stroke: var(--border); stroke-width: 1.25; stroke-linecap: round; } .fr-edge.is-dead .fr-edge-track { stroke-dasharray: 3 4; } .fr-edge-fill { fill: none; stroke: var(--sub); stroke-width: 2.4; stroke-linecap: round; transition: stroke 0.3s ease, stroke-width 0.3s ease; } .fr-edge.is-on .fr-edge-fill { stroke: var(--text); stroke-width: 3.2; } .fr-edge:hover .fr-edge-fill, .fr-edge:focus-visible .fr-edge-fill { stroke: var(--text); } .fr-edge-txt { font-family: var(--fm); font-size: 11px; fill: var(--sub); } .fr-edge.is-on .fr-edge-txt { fill: var(--text); } .fr-seat-chip { stroke-width: 2; transition: fill 0.35s ease; } .fr-seat-chip.is-dead { stroke-dasharray: 3 3; } .fr-seat-txt { font-family: var(--fd); font-size: 13px; letter-spacing: 0.1em; fill: var(--sub); } .fr-seat.is-on .fr-seat-txt { fill: var(--text); } .fr-hub-ring { fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0.45; transition: opacity 0.3s ease; } .fr-hub.is-on .fr-hub-ring { opacity: 1; } .fr-hub-n { font-family: var(--fe); font-weight: 500; font-size: 28px; fill: var(--text); } .fr-hub-txt { font-family: var(--fm); font-size: 9.5px; letter-spacing: 0.12em; fill: var(--muted); } .fr-hub.is-on .fr-hub-txt { fill: var(--text); } .fr-seat:focus-visible .fr-focus, .fr-hub:focus-visible .fr-focus, .fr-edge:focus-visible .fr-focus { stroke: var(--orange); stroke-width: 2; } /* First view: the field grows out, then the agreement arcs fill (forecast-round.js entrance()). */ .fr-ring.is-pre .fr-petal { opacity: 0; } .fr-ring.is-pre .fr-edge-fill { opacity: 0; } .fr-ring.is-in .fr-petal { opacity: 1; transition: opacity 0.6s ease, stroke 0.45s ease, stroke-width 0.45s ease; } .fr-ring.is-in .fr-edge-fill { opacity: 1; transition: opacity 0.5s ease 0.4s, stroke 0.3s ease, stroke-width 0.3s ease; } /* Single-voice list */ .fr-list { margin-bottom: var(--s-4); } .fr-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; min-height: 48px; border-bottom: 1px solid var(--border); transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; } .fr-enter { opacity: 0; } .fr-rk { font-family: var(--fm); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .fr-nm { min-width: 0; } .fr-nm b { display: block; font-family: var(--fb); font-weight: 500; font-size: var(--t-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-nm small { display: block; font-family: var(--fm); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-val { display: flex; align-items: center; gap: 6px; font-family: var(--fc); font-size: 11.5px; color: var(--muted); white-space: nowrap; } .fr-sw { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid var(--projection); flex: none; } .fr-sw.is-off { border-style: dashed; border-color: var(--muted); } .fr-off { color: var(--sub); } .fr-note a { color: var(--orange); } .fr-grant-note { font-family: var(--fb); font-size: var(--t-body); color: var(--sub); line-height: 1.6; max-width: 62ch; margin: var(--s-3) 0; } .fr-grant-note p { margin: 0 0 var(--s-2); } .fr-grant-note a { color: var(--orange); } .fr-empty { border: 1px dashed var(--border); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-3); justify-items: start; margin-bottom: var(--s-5); } .fr-empty p { margin: 0; color: var(--sub); font-size: var(--t-body); max-width: 52ch; } .fr-cta { font-family: var(--fb); font-weight: 600; font-size: var(--t-ui); color: var(--bg); background: var(--amber); border-radius: var(--r-md); padding: 8px 14px; text-decoration: none; } .fr-cta:hover { filter: var(--hover-lift); } /* Head to head */ .fr-slope-wrap { overflow: hidden; } .fr-slope { display: block; } .fr-slope-head { font-family: var(--fd); font-size: 14px; letter-spacing: 0.05em; } .fr-slope-nm { font-family: var(--fc); fill: var(--text); } .fr-slope-nm.is-out { fill: var(--muted); } .fr-slope-rk { font-family: var(--fm); font-size: 10px; fill: var(--muted); } .fr-link { stroke: var(--border); stroke-width: 1.25; } .fr-link.is-moved { stroke: var(--sub); stroke-width: 1.5; } .fr-link.is-only { stroke-width: 2.5; } .fr-cutline { stroke: var(--amber); stroke-dasharray: 4 4; opacity: 0.75; } .fr-cut-txt { font-family: var(--fm); font-size: 10px; fill: var(--amber); } .fr-note { font-family: var(--fc); font-size: 11.5px; color: var(--muted); margin: var(--s-2) 0 var(--s-5); } /* All voices */ .fr-sheet-head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; margin-bottom: var(--s-2); } .fr-sheet-head .fr-note { margin: 0; } .fr-seg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--fc); font-size: 12px; color: var(--muted); } .fr-seg button { font-family: var(--fd); font-weight: 500; font-size: 13px; letter-spacing: 0.03em; color: var(--sub); background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 10px; cursor: pointer; } .fr-seg button[aria-pressed="true"] { color: var(--text); border-color: var(--sub); background: var(--card); } .fr-sheet { margin-bottom: var(--s-5); } .fr-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; min-height: 44px; border-bottom: 1px solid var(--border); transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; } .fr-track { display: block; } .fr-track-base { stroke: var(--border); } /* Tables: a page's own head-to-head and All voices views (Bracket) */ .fr-table-wrap { overflow-x: auto; margin-bottom: var(--s-5); } .fr-table { width: 100%; border-collapse: collapse; font-family: var(--fb); font-size: var(--t-body); } .fr-table th, .fr-table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); } .fr-table thead th { font-family: var(--fd); font-weight: 600; font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); } .fr-table tbody th { font-weight: 500; color: var(--text); } .fr-table td.fr-num { font-family: var(--fm); font-variant-numeric: tabular-nums; color: var(--text); } .fr-table td.is-gap { color: var(--orange); } .fr-table tr.is-same th, .fr-table tr.is-same td { color: var(--muted); } .fr-line-tag { font-family: var(--fm); font-size: var(--t-mini); color: var(--muted); white-space: nowrap; } .fr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .fr-band button:focus-visible, .fr-seg button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* Narrow: the ring stays a ring, stacked above the finding, instead of the row of seat buttons it used to fall back to. */ @container (max-width: 640px) { .fr-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .fr-ringbox { max-width: 330px; } .fr-finding { font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .fr-row, .fr-srow { transition: none; } } /* ── Page column ───────────────────────────────────────────────────────────── Lines the band, notes and footer up with the board. This mirrors main.css's .bracket-wrap and has to be changed with it -- it was a hard 1100px with no auto margin because that is exactly what .bracket-wrap was on 2026-09-15. Both moved to --max on 2026-09-17, and both now centre. The missing `margin-inline: auto` was the older half of that bug: while .page-header-inner above it was also uncentred the two agreed at 0, so nothing looked wrong; the moment the header started centring, this column stayed pinned to the left edge. It lived in an inline