.page-rating main {
max-width: 1280px;
margin: 0 auto;
width: 100%;
}
.rating-head { margin-bottom: var(--space-md); }
.rating-lead {
max-width: var(--type-measure);
color: var(--color-ink-muted);
}
.rating-tools {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-md);
margin-top: var(--space-md);
}
.rating-search,
.rating-filter {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.rating-search span,
.rating-filter span {
font-size: var(--type-size-small);
color: var(--color-ink-muted);
}
.rating-search input,
.rating-filter select {
font: inherit;
color: var(--color-ink);
background: var(--color-surface);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sm);
padding: var(--space-2xs) var(--space-xs);
min-width: 14rem;
}
.rating-count {
margin: 0 0 var(--space-2xs);
font-size: var(--type-size-small);
color: var(--color-ink-muted);
}
.rating-wrap {
overflow-x: auto;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
}
.page-text .rating-table {
width: 100%;
max-width: none;
border-collapse: separate;
border-spacing: 0;
font-size: var(--type-size-small);
}
.page-text .rating-table th,
.page-text .rating-table td {
border-bottom: 1px solid var(--color-line);
padding: var(--space-2xs) var(--space-sm);
vertical-align: middle;
white-space: nowrap;
}
.page-text .rating-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-line-strong);
padding: 0;
vertical-align: bottom;
}
.page-text .rating-table .is-sticky {
position: sticky;
left: 0;
z-index: 1;
background: var(--color-surface);
font-weight: var(--type-weight-regular);
text-align: left;
box-shadow: 1px 0 0 var(--color-line);
}
.page-text .rating-table thead .is-sticky {
z-index: 3;
background: var(--color-surface-alt);
}
.page-text .rating-table tbody tr:nth-child(even) .is-sticky { background: var(--color-surface-alt); }
.page-text .rating-table tbody tr:nth-child(even) td { background: var(--color-surface-alt); }
.page-text .rating-table tbody tr:hover td,
.page-text .rating-table tbody tr:hover .is-sticky { background: var(--color-surface-sunken); }
.page-text .rating-table tbody .is-sticky::before {
content: counter(rating-row) ".";
counter-increment: rating-row;
display: inline-block;
min-width: 2.2em;
margin-right: var(--space-2xs);
color: var(--color-ink-muted);
font-variant-numeric: tabular-nums;
}
.page-text .rating-table tbody { counter-reset: rating-row; }
.rating-sort {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
padding: var(--space-2xs) var(--space-sm);
background: none;
border: 0;
font: inherit;
color: var(--color-ink);
text-align: left;
cursor: pointer;
}
.rating-sort:hover { color: var(--color-accent); }
.rating-sort__unit {
font-size: var(--type-size-small);
font-weight: var(--type-weight-regular);
color: var(--color-ink-muted);
}
.rating-sort__arrow {
font-size: 10px;
line-height: 1;
color: var(--color-accent);
min-height: 12px;
}
.page-text .rating-table .is-number {
text-align: right;
font-variant-numeric: tabular-nums;
}
.rating-swatch {
flex: 0 0 auto;
width: 13px;
height: 13px;
border-radius: 2px;
border: 1px solid var(--color-line-strong);
}
.page-text .rating-table .is-missing {
color: var(--color-ink-muted);
font-style: italic;
}
.rating-note { color: var(--color-ink-muted); }
.rating-legend { margin-top: var(--space-xl); }
.rating-legend h2 { font-size: var(--type-size-h2); }
.rating-legend li { margin-bottom: var(--space-2xs); }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 720px) {
.page-rating main { padding: var(--space-md) var(--space-sm) var(--space-xl); }
.rating-tools { gap: var(--space-sm); }
.rating-search input,
.rating-filter select { min-width: 0; width: 100%; }
.rating-search,
.rating-filter { flex: 1 1 100%; }
.rating-wrap { overflow-x: visible; border: 0; border-radius: 0; }
.page-text .rating-table,
.page-text .rating-table tbody,
.page-text .rating-table tr,
.page-text .rating-table td,
.page-text .rating-table th { display: block; }
.page-text .rating-table thead { display: none; }
.page-text .rating-table tbody tr {
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
background: var(--color-surface);
}
.page-text .rating-table tbody tr:nth-child(even) td,
.page-text .rating-table tbody tr:nth-child(even) .is-sticky { background: none; }
.page-text .rating-table .is-sticky {
position: static;
white-space: normal;
box-shadow: none;
border-bottom: 1px solid var(--color-line);
padding: 0 0 var(--space-2xs);
margin-bottom: var(--space-2xs);
font-size: var(--type-size-h3);
}
.page-text .rating-table td {
display: flex;
justify-content: space-between;
gap: var(--space-sm);
border-bottom: 0;
padding: 2px 0;
white-space: normal;
}
.page-text .rating-table td::before {
content: attr(data-label);
color: var(--color-ink-muted);
}
.page-text .rating-table .is-number { text-align: right; }
}
@media print {
.rating-tools { display: none; }
.rating-wrap { overflow: visible; border: 0; }
.rating-sort { color: var(--color-ink); }
.rating-sort__arrow { display: none; }
.page-text .rating-table { font-size: 10pt; }
}