/* ==========================================================================
   Essly ratings section (roadmap 5.6) — /ratings/ and the /test-index/ QA copy.

   Carved out of assets/css/essly-test-index.css in step 5.6a. The prototype
   sheet is loaded by eight other page types (front page, the cosplay / fandom /
   character archives and every entity single) and none of them render these
   blocks, so the section keeps its own file and its own enqueue — see
   essly_child_enqueue_ratings_assets() in functions.php.

   Still depends on the prototype canvas sheet: the --eti-* tokens, the 1240px
   .essly-test-wrap and the .essly-test-card renderer all live there and are
   shared with the section. That is a dependency to shrink later, not a reason
   to fork the card styles here.

   Three components share this file: the slice constructor
   (`essly-ratings-slice*`) rebuilt in 5.6c, the ranked row list
   (`essly-ratings-list*`) printed by both the tops and the slice, and the QA
   draft on /test-index/ (`essly-ratings-draft*`), which keeps only its figures
   panel and the verdict under it.
   ========================================================================== */

/* Breadcrumb strip of the ratings page — the only element above the section.
   The parent theme already draws .breadcrumb (size, separators, link colour),
   so this only fixes the spacing inside the 1240px wrapper. */
.essly-ratings-page__crumbs {
	margin: 0 0 .75rem;
}

.essly-ratings-page__crumbs .breadcrumb {
	margin: 0;
	opacity: 1;
}

/* Section (roadmap 5.6): slice controls, a top of works and a top of entities.
   Reuses the existing --eti-* tokens and the 991/767 breakpoints so the block
   looks like part of the site and collapses the way every other grid does. */

.essly-ratings-draft {
	margin-top: 2.5rem;
	padding: 1.75rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
	box-shadow: var( --eti-shadow-sm );
}

/* The block says the ratings are switched off instead of printing empty lists. */
.essly-ratings-page__missing {
	margin: 1.25rem 0 0;
	color: var( --eti-muted );
}

/* Slice constructor (5.6c): four radio groups, a submit and the list they produce.
   The card frame is a modifier because the QA draft renders the same block inside
   its own card, where a second one would only add a border to a border. */
.essly-ratings-slice--framed {
	margin-top: 2.5rem;
	padding: 1.75rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
	box-shadow: var( --eti-shadow-sm );
}

.essly-ratings-slice__title {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.essly-ratings-slice__desc {
	margin: 0 0 1.5rem;
	color: var( --eti-muted );
	font-size: .875rem;
}

/* Controls: five filter groups plus a submit, wrapping on narrow screens.
   Each group is a fieldset with its own legend, and all five are siblings — the
   relation one lives inside a conditional of its own, so it can be absent. */
.essly-ratings-slice__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var( --eti-soft );
	border: 1px solid var( --eti-border );
	border-radius: 12px;
}

.essly-ratings-slice__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.essly-ratings-slice__group legend {
	padding: 0;
	margin: 0 .35rem 0 0;
	color: var( --eti-faint );
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.essly-ratings-slice__option {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .7rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 999px;
	color: var( --eti-muted );
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.essly-ratings-slice__option:hover {
	border-color: var( --eti-border-strong );
	color: var( --eti-text );
}

/* The radio itself is hidden but stays focusable, so keyboard users still see
   which option is picked — the highlight below follows :checked, not :focus. */
.essly-ratings-slice__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.essly-ratings-slice__option:has( input:checked ) {
	border-color: var( --eti-accent );
	background: var( --eti-accent-soft );
	color: var( --eti-accent-text );
}

.essly-ratings-slice__option:has( input:focus-visible ) {
	outline: 2px solid var( --eti-accent );
	outline-offset: 2px;
}

/* Relation filter (5.6d): a select rather than pills. Its list is open ended
   (every published entity of the type), while the four other controls are closed
   sets — a hundred pills would push the rest of the row off the screen. The
   highlight follows the picked option the same way the pills follow :checked, so
   an active filter is visible without reading the option text. */
.essly-ratings-slice__select {
	position: relative;
	display: inline-flex;
}

.essly-ratings-slice__select select {
	max-width: 16rem;
	height: 2.25rem;
	padding: 0 .6rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 999px;
	color: var( --eti-muted );
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.essly-ratings-slice__select select:hover {
	border-color: var( --eti-border-strong );
	color: var( --eti-text );
}

.essly-ratings-slice__select select:focus-visible {
	outline: 2px solid var( --eti-accent );
	outline-offset: 2px;
}

.essly-ratings-slice__select select:has( option:checked:not( [value=""] ) ) {
	border-color: var( --eti-accent );
	background: var( --eti-accent-soft );
	color: var( --eti-accent-text );
}

/* The group legend already names the control, so its label is read out loud but
   not printed a second time. */
.essly-ratings-slice__select-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* Dropping the filter is a link, not a second control: the select already is
   one, and the note it sits in is where a reader looks for the way out. */
.essly-ratings-slice__reset {
	margin-left: .35rem;
	color: var( --eti-accent-text );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.essly-ratings-slice__submit {
	height: 2.25rem;
	padding: 0 1rem;
	background: var( --eti-accent );
	border: 1px solid var( --eti-accent );
	border-radius: 999px;
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
}


.essly-ratings-slice__result {
	margin-top: 1.75rem;
}

.essly-ratings-slice__result-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.essly-ratings-slice__result-title .essly-test-icon {
	color: var( --eti-accent );
}

.essly-ratings-slice__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --eti-rail-gap );
}

/* The cards are sized by flex-basis inside a rail; a grid track already fixes
   the width, so the shorthand has to be dropped or the two would fight. */
.essly-ratings-slice__grid .essly-test-card {
	flex: none;
	width: 100%;
	min-width: 0;
}

/* The QA draft keeps a note of its own for the decision line, so the note look
   belongs to the section rather than to one of its two blocks. */
.essly-ratings-slice__empty,
.essly-ratings-slice__note,
.essly-ratings-draft__note {
	margin: 0 0 .85rem;
	color: var( --eti-muted );
	font-size: .8125rem;
}

.essly-ratings-slice__note,
.essly-ratings-draft__note {
	padding: .7rem .85rem;
	background: var( --eti-accent-soft );
	border-left: 3px solid var( --eti-accent );
	border-radius: 0 8px 8px 0;
	color: var( --eti-text );
}

/* Ranked rows: a plain ordered list, one row per line. Printed by the ready-made
   tops and by the slice, which is why the component is named after what it is. */
.essly-ratings-list {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essly-ratings-list__row {
	display: grid;
	grid-template-columns: 1.75rem 2.5rem minmax( 0, 1fr ) auto;
	align-items: center;
	gap: .75rem;
	padding: .6rem .85rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 10px;
}

.essly-ratings-list__rank {
	color: var( --eti-faint );
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.essly-ratings-list__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	background: var( --eti-soft );
	border-radius: 8px;
}

.essly-ratings-list__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.essly-ratings-list__thumb-fallback {
	display: flex;
	color: var( --eti-faint );
}

.essly-ratings-list__title {
	min-width: 0;
	overflow: hidden;
	color: var( --eti-text );
	font-size: .875rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.essly-ratings-list__title:hover {
	color: var( --eti-accent-text );
}

.essly-ratings-list__value {
	padding: .2rem .6rem;
	background: var( --eti-soft );
	border-radius: 999px;
	color: var( --eti-text );
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}


/* Diagnostics: the reason for the draft, so it reads as a fact panel rather
   than decoration. */
.essly-ratings-draft__diag {
	margin-top: 2rem;
	padding: 1.25rem;
	background: var( --eti-soft );
	border: 1px solid var( --eti-border );
	border-radius: 12px;
}

.essly-ratings-draft__diag-title {
	margin: 0 0 .85rem;
	font-size: .9375rem;
	font-weight: 700;
}

.essly-ratings-draft__diag-list {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: .5rem;
	margin: 0 0 1rem;
}

.essly-ratings-draft__diag-row {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .7rem .85rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 10px;
}

.essly-ratings-draft__diag-row dt {
	color: var( --eti-muted );
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.essly-ratings-draft__diag-row dd {
	margin: 0;
	color: var( --eti-text );
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.essly-ratings-draft__verdict {
	margin: 0 0 .85rem;
	padding: .8rem 1rem;
	background: var( --eti-card );
	border-left: 3px solid var( --eti-border-strong );
	border-radius: 0 8px 8px 0;
	font-size: .875rem;
	font-weight: 600;
}

.essly-ratings-draft__verdict--ok {
	border-left-color: #059669;
}

.essly-ratings-draft__verdict--warn {
	border-left-color: #d97706;
}

.essly-ratings-draft__verdict--stop {
	border-left-color: #e11d48;
}

@media ( max-width: 991px ) {
	.essly-ratings-slice__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.essly-ratings-draft__diag-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.essly-ratings-slice--framed,
	.essly-ratings-draft {
		padding: 1.1rem;
	}

	.essly-ratings-slice__grid,
	.essly-ratings-draft__diag-list {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* The number stops competing with the title for the only line. */
	.essly-ratings-list__row {
		grid-template-columns: 1.5rem minmax( 0, 1fr ) auto;
	}

	.essly-ratings-list__thumb {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Ready-made tops (roadmap 5.6b) — the opening half of the section.

   The lists print the ranked row component of the section
   (`.essly-ratings-list__*`), which the slice constructor uses as well: the same
   four facts per line (position, face, name, figure) in both. What is new here is
   the frame — the period switcher, the two-column grid of lists and the notes that
   say what the period does and does not do.
   -------------------------------------------------------------------------- */

.essly-ratings-tops {
	margin-top: 2.5rem;
	padding: 1.75rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
	box-shadow: var( --eti-shadow-sm );
}

/* The only control of the block: one shared period for every list of works. */
.essly-ratings-tops__period {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
}

.essly-ratings-tops__period-link {
	padding: .35rem .7rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 999px;
	color: var( --eti-muted );
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.essly-ratings-tops__period-link:hover {
	border-color: var( --eti-border-strong );
	color: var( --eti-text );
}

.essly-ratings-tops__period-link.is-active {
	border-color: var( --eti-accent );
	background: var( --eti-accent-soft );
	color: var( --eti-accent-text );
}

.essly-ratings-tops__note {
	margin: 1rem 0 0;
	color: var( --eti-muted );
	font-size: .8125rem;
}

.essly-ratings-tops__subtitle {
	margin: 2rem 0 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.essly-ratings-tops__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
	margin-top: 1.25rem;
}

.essly-ratings-tops__grid--entities {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.essly-ratings-tops__block {
	padding: 1rem 1.1rem;
	background: var( --eti-soft );
	border: 1px solid var( --eti-border );
	border-radius: 12px;
}

.essly-ratings-tops__title {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .85rem;
	font-size: .9375rem;
	font-weight: 700;
}

.essly-ratings-tops__title .essly-test-icon {
	color: var( --eti-accent );
}

.essly-ratings-tops__empty {
	margin: 0;
	color: var( --eti-muted );
	font-size: .8125rem;
}

@media ( max-width: 991px ) {
	.essly-ratings-tops__grid,
	.essly-ratings-tops__grid--entities {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 767px ) {
	.essly-ratings-tops {
		padding: 1.1rem;
	}
}