.ratings-shell { padding-block: var(--space-ui-6); }
.ratings-shell p { margin-block: var(--space-ui-3); }
.ratings-meta,.ratings-notes,.ratings-subtitle { color: var(--text-secondary); font-size: var(--type-meta); }
.ratings-controls { display:flex; gap:var(--space-ui-2); flex-wrap:wrap; margin-block:var(--space-ui-5); }
.ratings-search { flex:1; min-width:0; }
.ratings-controls input,.ratings-controls select,.ratings-button { min-height:var(--size-control-base); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--bg-surface); color:var(--text-primary); padding:var(--space-ui-2) var(--space-ui-3); font-size:var(--type-control); }
.ratings-controls input { width:100%; }
.ratings-button, .ratings-name, .rating-cell { cursor:pointer; }
.ratings-legend { container-type:inline-size; width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-ui-4); margin-block:var(--space-ui-4); color:var(--text-secondary); font-size:var(--type-meta); }
.ratings-scale { width:min(100%,var(--rating-legend-width)); }
.ratings-scale-direction { display:flex; justify-content:space-between; margin-bottom:var(--space-ui-2); }
.ratings-scale-bands { display:flex; flex-wrap:wrap; gap:var(--space-ui-3) var(--space-ui-5); }
.ratings-key { display:flex; align-items:center; gap:var(--space-ui-2); white-space:nowrap; }
.ratings-swatch { display:block; width:var(--size-icon-sm); height:var(--size-icon-sm); border-radius:var(--rating-cell-radius); }
.ratings-missing-key { display:flex; align-items:center; gap:var(--space-ui-2); }
.ratings-missing-key .ratings-swatch { width:var(--size-icon-sm); height:var(--size-icon-sm); border-radius:var(--rating-cell-radius); }
.ratings-chart { display:grid; grid-template-columns:var(--rating-label-width) minmax(0,1fr); column-gap:var(--rating-cell-gap); margin-block:var(--space-ui-4); }
#ratings-content { container-type:inline-size; }
.ratings-chart { --rating-cell-size:clamp(var(--rating-cell-min), calc((100cqi - var(--rating-label-width) - var(--rating-columns) * var(--rating-cell-gap)) / var(--rating-columns)), var(--rating-cell-max)); }
.ratings-season { --rating-cell-size:var(--rating-cell-max); }
.ratings-scroll { overflow-x:auto; overflow-y:hidden; min-width:0; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }
.ratings-axis-viewport { overflow:hidden; min-width:0; position:sticky; top:0; z-index:var(--layer-raised); background:var(--bg-body); align-self:start; padding-bottom:var(--rating-cell-gap); }
.ratings-label { width:var(--rating-label-width); min-width:0; padding-right:var(--space-ui-3); display:flex; align-items:center; gap:var(--space-ui-1); height:var(--rating-cell-size); margin-bottom:var(--rating-cell-gap); box-sizing:border-box; }
.ratings-label-axis { position:sticky; top:0; z-index:var(--layer-raised); background:var(--bg-body); }
.ratings-row { margin-bottom:var(--rating-cell-gap); }
.ratings-name { display:block; flex:1; min-width:0; border:0; background:none; color:var(--text-primary); padding:0; text-align:left; font-size:var(--type-card-title); line-height:var(--leading-meta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ratings-name:hover { color:var(--accent); }
.ratings-series-score { flex:none; color:var(--accent); font-size:var(--type-meta); }
.ratings-cells { display:grid; grid-template-columns:repeat(var(--rating-columns),var(--rating-cell-size)); gap:var(--rating-cell-gap); align-items:start; }
.rating-cell,.rating-blank,.rating-axis { width:var(--rating-cell-size); aspect-ratio:1; min-width:0; padding:0; border:0; display:grid; place-items:center; font-size:var(--type-meta); line-height:1; }
.rating-cell { background:var(--rating-band-0); color:var(--text-on-accent); border-radius:var(--rating-cell-radius); }
.rating-cell[data-band="0"] { color:var(--text-primary); }
[data-band="0"] { background-color:var(--rating-band-0); } [data-band="1"] { background-color:var(--rating-band-1); } [data-band="2"] { background-color:var(--rating-band-2); } [data-band="3"] { background-color:var(--rating-band-3); } [data-band="4"] { background-color:var(--rating-band-4); }
[data-band="missing"] { color:var(--text-primary); background:repeating-linear-gradient(135deg,var(--bg-surface) 0,var(--bg-surface) var(--space-ui-1),var(--text-dim) var(--space-ui-1),var(--text-dim) var(--space-ui-1-5)); }
.rating-axis { color:var(--text-secondary); }
.ratings-detail-head { display:flex; align-items:flex-start; gap:var(--space-ui-3); margin-block:var(--space-ui-4); }
.ratings-detail-head h2 { margin:0; font-size:var(--type-section); }
.ratings-seasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--rating-season-min-width)),1fr)); gap:var(--space-ui-5) var(--space-ui-6); margin-block:var(--space-ui-5); align-items:start; }
.ratings-season { min-width:0; border-top:1px solid var(--border); padding-top:var(--space-ui-3); }
.ratings-season h3 { font-size:var(--type-section); margin-block:var(--space-ui-2); }
.ratings-episodes { display:grid; grid-template-columns:repeat(auto-fill,var(--rating-cell-size)); gap:var(--rating-cell-gap); }
.ratings-paging { display:flex; align-items:center; justify-content:center; gap:var(--space-ui-3); margin-block:var(--space-ui-5); color:var(--text-secondary); font-size:var(--type-meta); }
.ratings-unavailable { flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); font-size:var(--type-meta); }

.ratings-notes { border-top:1px solid var(--border); padding-top:var(--space-ui-4); margin-block:var(--space-ui-6); }
.ratings-notes summary { cursor:pointer; }
.ratings-sr { position:absolute; width:var(--size-scale-px-1); height:var(--size-scale-px-1); padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.rating-cell { position:relative; transition:box-shadow var(--motion-duration-base) var(--motion-ease-out); }
.rating-cell.is-inspected,.rating-cell:focus-visible { z-index:var(--layer-raised); box-shadow:var(--shadow-accent-control); outline:var(--size-scale-px-1) solid var(--text-primary); outline-offset:calc(-1 * var(--size-scale-px-1)); }
.rating-tooltip { position:fixed; z-index:var(--layer-popover); width:max-content; max-width:min(var(--rating-tooltip-width),calc(100vw - var(--space-ui-3) * 2)); box-sizing:border-box; padding:var(--space-ui-3); border:1px solid var(--border); border-radius:var(--radius-ui-sm); background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-floating); font-size:var(--type-meta); overflow-wrap:anywhere; }
.rating-tooltip[hidden] { display:none; }
.rating-tooltip strong { display:block; font-size:var(--type-card-title); }
.rating-tooltip-score { display:flex; align-items:baseline; gap:var(--space-ui-2); margin-block:var(--space-ui-2); }
.rating-tooltip-score b { font-size:var(--type-dialog-title); color:var(--accent); }
.rating-tooltip p { margin-block:var(--space-ui-1); }
.rating-tooltip p,.rating-tooltip small,.rating-tooltip-score span { color:var(--text-secondary); font-size:var(--type-meta); }
@media (prefers-reduced-motion:reduce) { .rating-cell { transition:none; } .rating-cell.is-inspected { transform:none; } }

.ratings-missing { margin-block:var(--space-ui-5); }
.ratings-missing h2 { font-size:var(--type-section); }
.ratings-missing-row { display:flex; align-items:center; gap:var(--space-ui-3); padding-block:var(--space-ui-2); border-bottom:1px solid var(--border); }

.ratings-name,.ratings-series-score,.rating-cell,.ratings-season h3 a,.ratings-detail-head h2 a { text-decoration:none; }
.ratings-season h3 a,.ratings-detail-head h2 a { color:inherit; }

@container (min-width: 40rem) { .ratings-scale-bands { grid-template-columns:repeat(6,max-content); } }

.ratings-detail-poster { flex:0 0 var(--size-mobile-poster); }
.ratings-detail-poster img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:var(--radius-ui-sm); }
.ratings-detail-copy { flex:1; min-width:0; }
.ratings-detail-year { margin-inline-start:var(--space-ui-2); color:var(--text-secondary); font-size:var(--type-meta); font-weight:var(--font-weight-body); }
.ratings-detail-overview p { margin-block:var(--space-ui-2); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-copy); overflow:hidden; }
.ratings-detail-overview button { border:0; padding:0; background:none; color:var(--accent); font-size:var(--type-meta); cursor:pointer; }