/**
 * Sample score panel (parts/scorecard.php): a score ring with the tier, a shape with one point per dimension
 * and a bar per dimension, on a dark card. Loaded by the layouts that use the panel.
 * Movement is in assets/js/scorecard.js: it adds is-ready, then is-in when the panel is first seen, is-live once
 * it starts moving between results, and is-shift for the length of each move.
 */
.scorecard { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px; border: 1px solid rgba(241, 237, 229, .14); border-radius: 18px; background: rgba(241, 237, 229, .04); }
.scorecard__tag { position: absolute; top: -12px; right: 22px; padding: 5px 11px; border: 1px solid rgba(241, 237, 229, .22); border-radius: 999px; background: var(--ink); color: var(--muted-on-dark); font: 400 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scorecard__top { display: flex; align-items: center; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(241, 237, 229, .12); }
.scorecard__ring { position: relative; flex: none; width: 116px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scorecard__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scorecard__track { fill: none; stroke: rgba(241, 237, 229, .12); stroke-width: 9; }
.scorecard__arc { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; transition: stroke .8s; }
.scorecard__num { position: relative; font: 500 38px/1 var(--sans); letter-spacing: -.02em; }
.scorecard__of { position: relative; margin-top: 4px; font: 300 12px var(--sans); color: var(--muted-on-dark); }
.scorecard__tier { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.scorecard__label { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-dark); }
.scorecard__pill { padding: 7px 16px; border: 1px solid rgba(240, 100, 78, .4); border-radius: 999px; background: rgba(240, 100, 78, .12); color: var(--red-on-dark); font: 500 17px var(--sans); }
/* The ring and the pill are coloured by tier: red below 60, yellow from 60, green from 80 (data-band on the panel). */
.scorecard[data-band="mid"] .scorecard__arc { stroke: #D4A94F; }
.scorecard[data-band="high"] .scorecard__arc { stroke: #5FA57E; }
.scorecard[data-band="mid"] .scorecard__pill { border-color: rgba(212, 169, 79, .5); background: rgba(212, 169, 79, .14); color: #E6C987; }
.scorecard[data-band="high"] .scorecard__pill { border-color: rgba(111, 181, 140, .5); background: rgba(111, 181, 140, .15); color: #8FC7A6; }
.scorecard__note { max-width: 260px; font: 300 14px/1.45 var(--sans); color: var(--muted-on-dark); }
.scorecard__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.scorecard__radar { display: flex; flex-direction: column; gap: 8px; }
.scorecard__radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.scorecard__web { fill: none; stroke: rgba(241, 237, 229, .14); stroke-width: 1; }
.scorecard__peer { fill: none; stroke: rgba(241, 237, 229, .42); stroke-width: 1.5; stroke-dasharray: 4 4; }
.scorecard__you { fill: rgba(191, 46, 26, .3); stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.scorecard__dot { fill: var(--red); }
.scorecard__axis { font: 500 12px var(--sans); fill: var(--paper); }
.scorecard__key { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font: 300 12px var(--sans); color: var(--muted-on-dark); }
.scorecard__key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--red); vertical-align: -1px; }
.scorecard__key i.is-peer { width: 14px; height: 0; border-top: 2px dashed rgba(241, 237, 229, .45); border-radius: 0; background: none; vertical-align: 3px; }
.scorecard__bars { display: flex; flex-direction: column; gap: 13px; }
.scorecard__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; font: 500 13.5px var(--sans); }
.scorecard__bar-num { font-weight: 400; color: var(--muted-on-dark); }
.scorecard__bar.is-low .scorecard__bar-num { color: var(--red-on-dark); }
.scorecard__bar-line { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(241, 237, 229, .1); overflow: hidden; }
.scorecard__bar-line span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), #E07A66); }
.scorecard__bar.is-high .scorecard__bar-line span { background: linear-gradient(90deg, #5FA57E, #8FC7A6); }
.scorecard__bar.is-mid .scorecard__bar-line span { background: linear-gradient(90deg, #D4A94F, #E6C987); }
/* The sample draws itself in the first time it is seen (scorecard.js adds is-ready, then is-in).
   Every animation only sets where a part starts from, so each part ends exactly as it is drawn without the script. */
.scorecard__num, .scorecard__bar-num { font-variant-numeric: tabular-nums; }
.scorecard__you { transform-origin: 160px 125px; }
.scorecard__dot { transform-box: fill-box; transform-origin: center; }
.scorecard__bar-line span { position: relative; overflow: hidden; transform-origin: left; }
.scorecard__bar-line span::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); opacity: 0; }
/* The beam and the rings round each point show only while the panel moves from one result to the next (is-shift). */
.scorecard__sweep { opacity: 0; transform-origin: 160px 125px; }
.scorecard__sweep line { stroke: var(--red-on-dark); stroke-width: 1.5; stroke-opacity: .8; }
.scorecard__ping { opacity: 0; fill: none; stroke: var(--red-on-dark); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.scorecard.is-ready:not(.is-in) { opacity: 0; }
.scorecard.is-in { animation: scorecard-rise .9s cubic-bezier(.2, .8, .2, 1) backwards, scorecard-glow 1.6s ease-out 2.3s; }
.scorecard.is-in .scorecard__arc { animation: scorecard-arc 1.5s cubic-bezier(.3, .7, .2, 1) .45s backwards; }
.scorecard.is-in .scorecard__label, .scorecard.is-in .scorecard__note { animation: scorecard-fade .6s ease-out 1s backwards; }
.scorecard.is-in .scorecard__pill { animation: scorecard-pop .6s cubic-bezier(.2, .9, .3, 1.4) 1.1s backwards; }
.scorecard.is-in .scorecard__web, .scorecard.is-in .scorecard__axis, .scorecard.is-in .scorecard__key { animation: scorecard-fade .7s ease-out .7s backwards; }
.scorecard.is-in .scorecard__peer { animation: scorecard-fade .7s ease-out 1.1s backwards; }
.scorecard.is-in .scorecard__you { animation: scorecard-grow 1s cubic-bezier(.2, .9, .3, 1.25) 1.3s backwards, scorecard-breathe 5s ease-in-out 2.6s infinite; }
.scorecard.is-in .scorecard__dot { animation: scorecard-dot .5s cubic-bezier(.2, .9, .3, 1.6) calc(1.9s + var(--scorecard-i, 0) * 70ms) backwards; }
/* Moving to the next result. scorecard.js moves the ring, the shape and the bars; these are the effects that go with it.
   The beam goes round once, each point beats and rings as the beam passes it, a highlight runs along the bars,
   the score bumps as it lands, and the words fade over. */
.scorecard__tag, .scorecard__note { transition: opacity .26s, transform .26s; }
.scorecard__pill { transition: opacity .26s, transform .26s, color .5s, background-color .5s, border-color .5s; }
.scorecard .is-swapping { opacity: 0; transform: translateY(5px); }
.scorecard.is-live .scorecard__bar { transition: transform 1.2s cubic-bezier(.3, .7, .2, 1); }
.scorecard__num { transform-origin: center; }
.scorecard.is-shift .scorecard__num { animation: scorecard-bump 1.5s ease-out; }
.scorecard.is-shift .scorecard__sweep { animation: scorecard-scan 1.5s cubic-bezier(.45, 0, .25, 1); }
.scorecard.is-in.is-shift .scorecard__dot { animation: scorecard-dot .5s cubic-bezier(.2, .9, .3, 1.6) calc(1.9s + var(--scorecard-i, 0) * 70ms) backwards, scorecard-beat .7s ease-out calc(var(--scorecard-i, 0) / var(--scorecard-n, 6) * 1.25s); }
.scorecard.is-shift .scorecard__ping { animation: scorecard-ping .9s ease-out calc(var(--scorecard-i, 0) / var(--scorecard-n, 6) * 1.25s); }
.scorecard.is-shift .scorecard__bar-line span::after { animation: scorecard-shine 1.5s ease-in-out; }
.scorecard.is-in .scorecard__bar { animation: scorecard-slide .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.scorecard.is-in .scorecard__bar-line span { animation: scorecard-bar 1.1s cubic-bezier(.2, .8, .2, 1) backwards; }
.scorecard.is-in .scorecard__bar:nth-child(1), .scorecard.is-in .scorecard__bar:nth-child(1) .scorecard__bar-line span { animation-delay: 1.15s; }
.scorecard.is-in .scorecard__bar:nth-child(2), .scorecard.is-in .scorecard__bar:nth-child(2) .scorecard__bar-line span { animation-delay: 1.24s; }
.scorecard.is-in .scorecard__bar:nth-child(3), .scorecard.is-in .scorecard__bar:nth-child(3) .scorecard__bar-line span { animation-delay: 1.33s; }
.scorecard.is-in .scorecard__bar:nth-child(4), .scorecard.is-in .scorecard__bar:nth-child(4) .scorecard__bar-line span { animation-delay: 1.42s; }
.scorecard.is-in .scorecard__bar:nth-child(5), .scorecard.is-in .scorecard__bar:nth-child(5) .scorecard__bar-line span { animation-delay: 1.51s; }
.scorecard.is-in .scorecard__bar:nth-child(n+6), .scorecard.is-in .scorecard__bar:nth-child(n+6) .scorecard__bar-line span { animation-delay: 1.6s; }
.scorecard.is-in .scorecard__tag { animation: scorecard-pop .6s cubic-bezier(.2, .9, .3, 1.4) 2.2s backwards; }
@keyframes scorecard-rise { from { opacity: 0; transform: translateY(32px) scale(.97); } }
@keyframes scorecard-glow { 35% { border-color: rgba(240, 100, 78, .55); box-shadow: 0 0 70px -12px rgba(240, 100, 78, .5); } }
@keyframes scorecard-arc { from { stroke-dashoffset: 326.7; } }
@keyframes scorecard-fade { from { opacity: 0; } }
@keyframes scorecard-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes scorecard-grow { from { opacity: 0; transform: scale(0); } }
@keyframes scorecard-breathe { 50% { fill: rgba(191, 46, 26, .52); } }
@keyframes scorecard-dot { from { transform: scale(0); } }
@keyframes scorecard-scan { 0% { opacity: 0; transform: rotate(0deg); } 14%, 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
@keyframes scorecard-beat { 30% { transform: scale(1.9); } }
@keyframes scorecard-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.8); } }
@keyframes scorecard-bump { 78% { transform: scale(1); } 88% { transform: scale(1.14); } }
@keyframes scorecard-shine { 0% { opacity: 1; transform: translateX(-60px); } 100% { opacity: 1; transform: translateX(340px); } }
@keyframes scorecard-slide { from { opacity: 0; transform: translateX(18px); } }
@keyframes scorecard-bar { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
	.scorecard, .scorecard *, .scorecard *::after { animation: none !important; }
}

@media (max-width: 760px) {
	.scorecard { padding: 24px 18px 20px; }
	.scorecard__top { gap: 18px; }
	.scorecard__ring { width: 96px; height: 96px; }
	.scorecard__num { font-size: 32px; }
	.scorecard__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}