.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-gap-controls); flex-wrap:wrap; margin-block:var(--space-ui-5); }
.ratings-search { flex:1; min-width:0; display:flex; }
.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); }
/* A fixed height, like the home and header search fields, and no native search-field look:
   Safari gives type=search its own taller box, which a min-height alone does not hold. */
.ratings-controls input { width:100%; height:var(--size-control-base); -webkit-appearance:none; appearance:none; }
.ratings-controls input:focus { outline:none; border-color:var(--accent); box-shadow:var(--shadow-search-active); }
/* Selects: Safari draws a native select at its own small height and ignores min-height and
   padding, so on iPhone and Mac the two selects stood shorter than the search field. No native
   look; every label is a flex box (no text line around the field, whose descender space made the
   row taller than the search field), so the row is exactly the field height and the selects stretch
   to it; our own chevron replaces the native arrows. */
.ratings-select { position:relative; display:flex; }
.ratings-controls select { -webkit-appearance:none; appearance:none; padding-right:calc(var(--space-ui-3) + var(--size-icon-sm) / 2 + var(--space-ui-2)); }
.ratings-select::after { content:""; position:absolute; top:50%; right:var(--space-ui-3); width:calc(var(--size-icon-sm) / 2); height:calc(var(--size-icon-sm) / 2); border-right:var(--size-scale-px-1) solid var(--text-secondary); border-bottom:var(--size-scale-px-1) solid var(--text-secondary); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
@media (max-width:767px) {
  /* iOS focus-zoom fix: box enlarged by --zoom-k-control then scaled back
     down -- see the shared explainer in assets-src/shared/ui-tokens.css.
     Text input only, not <select>: .ratings-search has flex-basis:0
     (flex:1) so a percentage width on the input doesn't feed back into the
     row's flex-basis math, but the two <select>s have flex-basis:auto --
     enlarging their font/padding inflated their real (pre-transform, k
     times bigger) auto-width, and transform doesn't shrink that layout
     footprint, so it ate into the input's flex-grow share (measured: the
     input's rendered width collapsed from 204px to 121-148px at 375px width
     depending on how much of the select was enlarged, even after removing
     select's horizontal padding from the enlargement -- the font growth
     alone was still enough). <select>'s own closed-state box doesn't invoke
     the iOS on-screen keyboard, so it isn't part of the keyboard-triggered
     zoom this fix targets; confirmed no zoom on it in the iOS Simulator
     check (see WORKLOG 2026-09-28), so it's left untouched rather than
     fixed with a technique that regresses the search field's width.
     margin-right is the horizontal twin of margin-bottom: the input is an
     inline-block, so its pre-transform width (k times the label) stayed in
     the label's line box and widened the page (measured +23px at 375px,
     +32px at 402px). Pulling the margin box back to 100% ends that without
     touching the rendered size. */
  .ratings-controls input {
    height: calc(var(--size-control-base) * var(--zoom-k-control));
    min-height: calc(var(--size-control-base) * var(--zoom-k-control));
    width: calc(100% * var(--zoom-k-control));
    border-width: calc(var(--size-scale-px-1) * var(--zoom-k-control));
    border-radius: calc(var(--radius-ui-sm) * var(--zoom-k-control));
    padding: calc(var(--space-ui-2) * var(--zoom-k-control)) calc(var(--space-ui-3) * var(--zoom-k-control));
    font-size: var(--zoom-safe-font);
    transform: scale(var(--zoom-inv-control));
    transform-origin: top left;
    margin-bottom: calc(var(--size-control-base) * (1 - var(--zoom-k-control)));
    margin-right: calc(100% * (1 - var(--zoom-k-control)));
  }
}
.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-faint) var(--space-ui-1),var(--text-faint) var(--space-ui-1-5)); }
.rating-axis { color:var(--text-secondary); }
.ratings-detail-head { display:flex; align-items:flex-start; gap:var(--space-ui-6); margin-block:var(--space-ui-4); }
.ratings-detail-head h2 { margin:0; font-size:var(--type-rating-detail-title); }
.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-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; }

.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; font-size:var(--type-meta); }
.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; }
@media (min-width: 48rem) { .ratings-detail-copy { max-width:var(--measure-rating-detail-prose); } }