/* The score spectrum lives inside the existing result card and scrolls with it. */
#results-dialog{width:min(840px,calc(100vw - 28px))}
#results-dialog .result-spectrum{min-width:0;margin:0 0 24px;padding:19px 18px 15px;border:1px solid #5c4c73;border-radius:14px;background:radial-gradient(ellipse at 100% 0,#9874cf0e,transparent 64%),#181c29;box-shadow:inset 0 1px #d8beff05}
#results-dialog .result-spectrum-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
#results-dialog .result-spectrum-heading>div{min-width:0}
#results-dialog .result-spectrum-eyebrow{display:block;margin:0 0 4px;font-size:7.5px;font-weight:600;line-height:1.3;letter-spacing:1.5px;color:#b09bcc}
#results-dialog #result-spectrum-title{margin:0;font:600 17px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:-.2px;color:#e4dbf3;overflow-wrap:anywhere}
#results-dialog .result-spectrum-badge{display:inline-flex;align-items:center;flex:none;white-space:nowrap;padding:5px 7px;border:1px solid #8b7350;border-radius:5px;background:#342c2066;color:#e9cf9e;font-size:8px;font-weight:600;line-height:1.2;letter-spacing:.6px}
#results-dialog #result-spectrum-note{margin:11px 0 15px;font-size:11px;line-height:1.6;color:#b0b5c9;overflow-wrap:anywhere}
#results-dialog .result-spectrum-chart{width:100%;min-width:0;max-width:100%}
#results-dialog .result-spectrum-chart .spectrum-screen{border-radius:10px;border-color:#45425a;background:radial-gradient(ellipse at 65% 60%,#28465314,transparent 65%),#101521;box-shadow:inset 0 1px #ffffff03}
#results-dialog .result-spectrum-chart .spectrum-screen>svg{display:block;width:100%;max-width:100%;height:auto}
#results-dialog .result-spectrum-chart .spectrum-axis-number{font-size:14px;fill:#a7b3c8}
#results-dialog .result-spectrum-chart .spectrum-axis-title{font-size:11px;letter-spacing:1.3px;fill:#9daec4}
#results-dialog .result-spectrum-chart .spectrum-instrument-label{font-size:10px;letter-spacing:1.1px}
#results-dialog .result-spectrum-chart .spectrum-mean-label{font-size:11px;fill:#abb9cd}
#results-dialog .result-spectrum-chart .spectrum-you-label{font-size:12px}
#results-dialog .result-spectrum-chart .spectrum-legend{padding:13px 1px 0;gap:8px 15px;font-size:10px;line-height:1.5;color:#aeb5c9}
#results-dialog .result-spectrum-chart .spectrum-inspect-copy{width:100%;margin-left:0;min-height:14px;color:#a1adc2}
#results-dialog .result-spectrum-chart .spectrum-tooltip{font-size:10px;line-height:1.45;max-width:82%;white-space:normal;text-align:center;padding:7px 9px;border-color:#81709d;color:#f0eafa}
#results-dialog .result-spectrum-chart .spectrum-hit:focus-visible{outline-color:#d0b7ef;outline-width:1.5px;background:#c9adff0c}
@media(max-width:600px){
 #results-dialog .result-spectrum{padding:13px 11px 11px;margin-bottom:19px;border-radius:12px}
 #results-dialog .result-spectrum-heading{gap:8px}
 #results-dialog #result-spectrum-title{font-size:15px}
 #results-dialog .result-spectrum-badge{font-size:7.5px;padding:5px 6px;letter-spacing:.4px}
 #results-dialog #result-spectrum-note{margin:9px 0 12px;font-size:10px;line-height:1.6}
 #results-dialog .result-spectrum-chart .spectrum-axis-number{font-size:20px}
 #results-dialog .result-spectrum-chart .spectrum-axis-number[text-anchor="end"]{font-size:14px}
 #results-dialog .result-spectrum-chart .spectrum-axis-title{font-size:15px;letter-spacing:.8px}
 #results-dialog .result-spectrum-chart .spectrum-mean-label{font-size:14px}
 #results-dialog .result-spectrum-chart .spectrum-you-label{font-size:13px;letter-spacing:.4px}
 #results-dialog .result-spectrum-chart .spectrum-legend{font-size:9px;gap:7px 12px}
 #results-dialog .result-spectrum-chart .spectrum-instrument-label{display:none}
}
@media(max-width:400px){
 #results-dialog .result-spectrum{padding:12px 8px 10px}
 #results-dialog .result-spectrum-eyebrow{font-size:7px;letter-spacing:1px}
 #results-dialog #result-spectrum-title{font-size:14px}
 #results-dialog .result-spectrum-badge{font-size:7px;padding:5px;letter-spacing:.25px}
 #results-dialog .result-spectrum-chart .spectrum-axis-number{font-size:24px}
 /* Leave twenty-point score labels on small screens; the plot still fits. */
 #results-dialog .result-spectrum-chart .spectrum-axis-number:is([x="138"],[x="294"],[x="450"],[x="606"],[x="762"]){display:none}
 #results-dialog .result-spectrum-chart .spectrum-axis-number[text-anchor="end"]{font-size:15px}
 #results-dialog .result-spectrum-chart .spectrum-axis-title{font-size:16px;letter-spacing:.6px}
 #results-dialog .result-spectrum-chart .spectrum-tooltip{font-size:10px;min-width:110px;max-width:78%}
}