/* PNGRFL Kumul Register widgets.
   Card ⇄ list switching is pure CSS driven by [data-view] on the register
   container, so filtering never has to re-query when the view changes. */

.pngrfl-view-toggle,
.pngrfl-caps-bar,
.pngrfl-detail-trigger {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
}

/* ---------- View toggle ---------- */

.pngrfl-view-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.pngrfl-view-toggle__count {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-body);
}

.pngrfl-view-toggle__buttons {
	display: flex;
	gap: 1px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}

.pngrfl-view-toggle__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: #fff;
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 12px 20px;
	min-height: 44px;
}

.pngrfl-view-toggle__btn.is-active {
	background: var(--pngrfl-toggle-active-bg, var(--pngrfl-ink));
	color: var(--pngrfl-toggle-active-text, var(--pngrfl-paper));
}

/* ---------- Register views ---------- */

[data-view="cards"] .kumul-row-only,
[data-view="list"] .kumul-card-only {
	display: none !important;
}

/* List view is one row per item, so the Loop Grid's own column count has to
   collapse — otherwise each row is squeezed into a card-width track and its
   inner columns get 0px, overflowing the page. !important because the column
   count comes from Elementor's per-element CSS. */
[data-view="list"] .elementor-grid {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0 !important;
}

[data-view="list"] .e-loop-item {
	border-bottom: 1px solid var(--pngrfl-hairline, #E3DDD4);
	min-width: 0;
}

/* List rows: only the name column may push; every other track can compress. */
[data-view="list"] .kumul-row {
	display: grid;
	grid-template-columns: 72px minmax(140px, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
	align-items: center;
	gap: 12px;
	padding: 14px 8px;
	min-height: 44px;
}

@media (max-width: 767px) {
	[data-view="list"] .kumul-row {
		grid-template-columns: 56px minmax(120px, 1fr) minmax(0, 0.7fr);
	}
	[data-view="list"] .kumul-row > :nth-child(n + 4) {
		display: none;
	}
}

/* ---------- Caps bar ---------- */

.pngrfl-caps-bar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.pngrfl-caps-bar__value {
	font-family: var(--pngrfl-sans);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pngrfl-caps-bar__suffix {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-body);
	margin-left: 4px;
}

.pngrfl-caps-bar__track {
	width: 100%;
	height: 6px;
	background: var(--pngrfl-bar-track, #E3DDD4);
	overflow: hidden;
}

.pngrfl-caps-bar__fill {
	display: block;
	height: 100%;
	background: var(--pngrfl-bar-fill, var(--pngrfl-red));
	transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Detail trigger ---------- */

.pngrfl-detail-trigger--card {
	display: contents;
}

.pngrfl-detail-trigger__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 12px 20px;
	min-height: 44px;
}

.pngrfl-detail-trigger__btn:hover {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

.pngrfl-detail-trigger__hint {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: #8a817a;
}

/* Whole-card mode: the loop item itself is the hit area. */
.e-loop-item:has( [data-pngrfl-trigger][data-mode="card"] ) {
	cursor: pointer;
}

/* ---------- Detail dialog ---------- */

[data-pngrfl-dialog] {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 9, 8, 0.72);
}

[data-pngrfl-dialog][data-open] {
	display: flex;
}

[data-pngrfl-dialog] .kumul-detail__panel {
	background: #fff;
	max-width: 880px;
	width: 100%;
	max-height: 88vh;
	overflow: auto;
	border-top: 4px solid var(--pngrfl-red, #C0392B);
}

/* Detail field boxes ship SOLID, not dashed — the dashes were design annotation. */
[data-pngrfl-dialog] .kumul-detail__field {
	border: 1px solid #E3DDD4;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

[data-pngrfl-dialog] .kumul-detail__label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a817a;
}

[data-pngrfl-dialog] .kumul-detail__value {
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ---------- Register item: card + row presentations ----------
   One loop item carries both; [data-view] above decides which shows.
   Colours arrive as custom properties from the widget, so Global Colors stay
   the single source of truth. */

.kumul-item {
	min-width: 0;
	height: 100%;
}

/* --- Card view --- */

.kumul-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: #fff;
	/* Brief §2: red at 10+ Tests, hairline otherwise. */
	border-top: 3px solid var(--pngrfl-hairline, #D5CDC4);
}

.kumul-item.is-capped .kumul-card {
	border-top-color: var(--pngrfl-capped, var(--pngrfl-red));
}

.kumul-card__media {
	aspect-ratio: 3 / 3.7;
	overflow: hidden;
	background: var(--pngrfl-paper-alt, #EDE8E1);
}

.kumul-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Photoless player: neutral block carrying the cap number. */
.kumul-card__media--empty {
	display: grid;
	place-items: center;
	background: var(--pngrfl-paper-alt, #EDE8E1);
}

.kumul-card__placeholder {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

.kumul-card__badge {
	position: absolute;
	top: 3px;
	left: 0;
	background: var(--pngrfl-ink);
	color: var(--pngrfl-gold);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	padding: 5px 9px;
}

.kumul-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	flex: 1;
	min-width: 0;
}

.kumul-card__name {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/* Pinned to the bottom so cards of differing name length stay aligned. */
.kumul-card__foot {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.kumul-card__caps {
	font-family: var(--pngrfl-sans);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: var(--pngrfl-red);
}

.kumul-card__meta {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

/* --- List view --- */

.kumul-row__thumb {
	width: 44px;
	height: 44px;
	overflow: hidden;
	background: var(--pngrfl-paper-alt, #EDE8E1);
	flex: none;
}

.kumul-row__thumb img,
.kumul-row__thumb-empty {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kumul-row__ident {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kumul-row__name {
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* Brief §2: 700 at 10+ Tests. */
.kumul-item.is-capped .kumul-row__name {
	font-weight: 700;
}

.kumul-row__sub {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

.kumul-row__cap {
	font-family: var(--pngrfl-mono);
	font-size: 12px;
	color: var(--pngrfl-red);
}

.kumul-row__year {
	font-family: var(--pngrfl-mono);
	font-size: 12px;
	color: var(--pngrfl-body);
}

/* Zebra striping on even cap numbers, white on hover. */
[data-view="list"] .kumul-item.is-even .kumul-row {
	background: var(--pngrfl-zebra, #F2EEE8);
}

[data-view="list"] .kumul-item .kumul-row:hover {
	background: #fff;
}

.pngrfl-caps-bar--inline {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}

.pngrfl-caps-bar--inline .pngrfl-caps-bar__track {
	width: 58px;
	height: 6px;
	background: var(--pngrfl-hairline, #E3DDD4);
	flex: none;
	display: block;
}

.pngrfl-caps-bar--inline .pngrfl-caps-bar__fill {
	display: block;
	height: 100%;
	background: var(--pngrfl-hairline-strong, #D5CDC4);
}

.pngrfl-caps-bar--inline.is-capped .pngrfl-caps-bar__fill {
	background: var(--pngrfl-red);
}

/* Whole card is the click target for the detail popup. */
.e-loop-item:has( [data-pngrfl-trigger][data-mode="card"] ) {
	cursor: pointer;
}

.e-loop-item:has( [data-pngrfl-trigger][data-mode="card"] ):focus-within .kumul-card {
	outline: 2px solid var(--pngrfl-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kumul-card,
	.kumul-row {
		transition: none;
	}
}

/* ---------- Toolbar (search + order) ---------- */

.pngrfl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	min-width: 0;
}

.pngrfl-toolbar__field {
	flex: 1 1 260px;
	min-width: 0;
	background: var(--pngrfl-field-bg, #1E1A18);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	color: #fff;
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	padding: 14px 16px;
	min-height: 46px;
}

.pngrfl-toolbar__field::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.pngrfl-toolbar__submit,
.pngrfl-toolbar__order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	font-family: var(--pngrfl-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0 22px;
	min-height: 46px;
	text-decoration: none;
	background: var(--pngrfl-order-bg, var(--pngrfl-red));
	color: #fff;
	transition: background 160ms ease, color 160ms ease;
}

.pngrfl-toolbar__submit {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.pngrfl-toolbar__submit:hover,
.pngrfl-toolbar__order:hover {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

@media (max-width: 767px) {
	.pngrfl-toolbar__field { flex-basis: 100%; }
	.pngrfl-toolbar__submit,
	.pngrfl-toolbar__order { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-toolbar__submit,
	.pngrfl-toolbar__order { transition: none; }
}

/* ---------- Detail dialog layout ---------- */

.kumul-detail__overlay {
	position: absolute;
	inset: 0;
}

.kumul-detail__panel {
	position: relative;
}

.kumul-detail__close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	width: 44px;
	height: 44px;
	color: var(--pngrfl-ink);
}

.kumul-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
	gap: 0;
	align-items: stretch;
}

/* Brief §6: single column below 640px, photo on top. */
@media (max-width: 639px) {
	.kumul-detail__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kumul-detail__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--pngrfl-paper-alt, #EDE8E1);
	min-width: 0;
}

.kumul-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kumul-detail__badge {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--pngrfl-ink);
	color: var(--pngrfl-gold);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 10px;
}

.kumul-detail__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(22px, 3.4vw, 40px);
	min-width: 0;
	background: var(--pngrfl-paper, #F7F4EF);
}

.kumul-detail__name {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.kumul-detail__kicker {
	margin: 0;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}

/* 3-up stat block joined by 2px hairline gaps. */
.kumul-detail__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	background: var(--pngrfl-hairline-strong, #D5CDC4);
	padding: 2px;
}

.kumul-detail__stat {
	background: #fff;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.kumul-detail__statval {
	font-family: var(--pngrfl-sans);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.kumul-detail__stat.is-accent .kumul-detail__statval {
	color: var(--pngrfl-red);
}

.kumul-detail__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 479px) {
	.kumul-detail__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kumul-detail__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.kumul-detail__navbtn {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 2px solid var(--pngrfl-ink);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 12px 18px;
	min-height: 44px;
	transition: background 160ms ease, color 160ms ease;
}

.kumul-detail__navbtn:hover {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

/* Editor preview only — the live dialog is hidden until opened. */
.kumul-detail--preview {
	position: static;
	display: block;
	background: none;
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kumul-detail__navbtn { transition: none; }
}

/* ---------- Era chips ----------
   Elementor's Taxonomy Filter ships a pill look that is wrong for this design
   (brief §3 / §5 snippet 5). These are the chips from the reference: mono,
   squared, transparent with a hairline, gold-on-ink when active.
   Scoped to the toolbar so other filters on the site are untouched. */

.pngrfl-toolbar-scope .e-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-start !important;
}

/* !important is deliberate: Elementor generates per-element CSS for its own
   filter widget at a higher specificity than any class selector here, and the
   brief calls for replacing that pill styling outright. */
.pngrfl-toolbar-scope .e-filter-item {
	appearance: none;
	cursor: pointer;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: var(--pngrfl-mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 11px 15px !important;
	min-height: 44px !important;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pngrfl-toolbar-scope .e-filter-item:hover {
	border-color: var(--pngrfl-gold) !important;
	color: var(--pngrfl-gold) !important;
}

/* Active chip: gold ground, ink text. */
.pngrfl-toolbar-scope .e-filter-item[aria-pressed="true"] {
	background: var(--pngrfl-gold) !important;
	border-color: var(--pngrfl-gold) !important;
	color: var(--pngrfl-ink) !important;
}

/* Elementor appends the "All" option (data-filter="__all"); the design leads
   with it. Both spellings covered so this does not depend on that internal. */
.pngrfl-toolbar-scope .e-filter-item[data-filter="__all"],
.pngrfl-toolbar-scope .e-filter-item[data-filter=""] {
	order: -1;
}

/* Result count reads gold on the ink toolbar (brief §3, row 3). */
.pngrfl-toolbar-scope .pngrfl-view-toggle__count {
	color: var(--pngrfl-gold);
}

.pngrfl-toolbar-scope .pngrfl-view-toggle__btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
}

.pngrfl-toolbar-scope .pngrfl-view-toggle__buttons {
	background: transparent;
	border: 0;
	gap: 8px;
}

.pngrfl-toolbar-scope .pngrfl-view-toggle__btn.is-active {
	background: var(--pngrfl-gold);
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-toolbar-scope .e-filter-item { transition: none; }
}

/* =========================================================================
   Grouped register (PNG Orchids)
   Every colour is a token from the kit layer; the Orchid accent is
   --pngrfl-orchid, derived from the "Orchid" Global Color.
   ========================================================================= */

.pngrfl-register {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
	--pngrfl-accent: var(--pngrfl-orchid, var(--pngrfl-red));
	display: flex;
	flex-direction: column;
	gap: 44px;
	min-width: 0;
}

/* The client-side filter hides with [hidden]; it must beat any display rule. */
.pngrfl-register [hidden],
.pngrfl-register-filter [hidden] {
	display: none !important;
}

.pngrfl-fixture {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.pngrfl-fixture-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pngrfl-hairline-strong, #D5CDC4);
}

.pngrfl-fixture-header__title {
	margin: 0;
	font-family: var(--pngrfl-sans, "Archivo", sans-serif);
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--pngrfl-ink);
	overflow-wrap: anywhere;
}

.pngrfl-fixture-header__meta {
	margin: 0;
	font-family: var(--pngrfl-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

/* --- Card view --------------------------------------------------------- */

.pngrfl-fixture__players {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
	min-width: 0;
}

.orchid-card {
	border-top-color: var(--pngrfl-accent);
}

.orchid-card__open,
.orchid-row__open {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.orchid-card__open::after {
	/* The name button's hit area covers the whole card. */
	content: "";
	position: absolute;
	inset: 0;
}

.orchid-card__open:focus-visible {
	outline: none;
}

.orchid-card:focus-within {
	outline: 2px solid var(--pngrfl-gold);
	outline-offset: 2px;
}

.orchid-card__debut {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.orchid-card__opponent {
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--pngrfl-accent);
}

/* --- List view --------------------------------------------------------- */

.pngrfl-register[data-view="list"] .pngrfl-fixture__players {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.pngrfl-register[data-view="cards"] .pngrfl-register__head {
	display: none;
}

.pngrfl-register__head,
.orchid-row {
	display: grid;
	/* Name keeps a readable minimum; every other track can compress. */
	grid-template-columns: 52px minmax(0, 64px) minmax(140px, 1.4fr) minmax(0, 1fr) minmax(0, 96px);
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.pngrfl-register__head.has-status,
.orchid-row.has-status {
	grid-template-columns: 52px minmax(0, 64px) minmax(140px, 1.4fr) minmax(0, 1fr) minmax(0, 96px) minmax(0, 110px);
}

.pngrfl-register__head {
	padding: 0 8px 10px;
	border-bottom: 2px solid var(--pngrfl-ink);
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

.orchid-row {
	padding: 9px 8px;
	min-height: 60px;
	border-bottom: 1px solid var(--pngrfl-hairline, #E3DDD4);
}

.pngrfl-register[data-view="list"] .pngrfl-fixture__players > .orchid-item:nth-child(even) .orchid-row {
	background: var(--pngrfl-zebra, #F2EEE8);
}

.pngrfl-register[data-view="list"] .orchid-row:hover {
	background: var(--pngrfl-card, #fff);
}

.orchid-row .kumul-row__cap {
	color: var(--pngrfl-accent);
}

.orchid-row__open {
	font-size: 16px;
	font-weight: 700;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.orchid-row__debut {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 15px;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.orchid-row__profile {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--pngrfl-accent);
	justify-self: start;
}

.orchid-row__profile:hover {
	color: var(--pngrfl-accent);
}

.orchid-row__status {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

.pngrfl-register__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font-size: 16px;
	color: var(--pngrfl-muted, #8A817A);
}

@media (max-width: 767px) {
	.pngrfl-fixture__players {
		grid-template-columns: minmax(0, 1fr);
	}
	/* 390px: thumb · number · name, with the debut folded under the name. */
	.pngrfl-register__head,
	.pngrfl-register__head.has-status,
	.orchid-row,
	.orchid-row.has-status {
		grid-template-columns: 44px minmax(0, 48px) minmax(0, 1fr);
		gap: 10px;
	}
	.pngrfl-register__head > :nth-child(n + 4),
	.orchid-row > :nth-child(n + 5) {
		display: none;
	}
	.orchid-row__debut {
		grid-column: 3;
		font-size: 13px;
	}
}

/* --- Filter bar -------------------------------------------------------- */

.pngrfl-register-filter {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.pngrfl-register-filter__search input {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	background: var(--pngrfl-field-bg, rgba(255, 255, 255, 0.06));
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans);
	font-size: 15px;
}

.pngrfl-register-filter__search input::placeholder {
	color: rgba(247, 244, 239, 0.55);
}

.pngrfl-register-filter__search input:focus-visible {
	outline: 2px solid var(--pngrfl-gold);
	outline-offset: 0;
}

.pngrfl-register-filter__years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pngrfl-chip {
	appearance: none;
	cursor: pointer;
	min-height: 44px;
	padding: 11px 15px;
	border: 1px solid rgba(247, 244, 239, 0.28);
	border-radius: 0;
	background: transparent;
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pngrfl-chip:hover {
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-gold);
}

.pngrfl-chip.is-active {
	background: var(--pngrfl-gold);
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

/* --- Profile component (popup + standalone page) ----------------------- */

.kumul-detail--orchids {
	--pngrfl-accent: var(--pngrfl-orchid, var(--pngrfl-red));
}

.kumul-detail--orchids .kumul-detail__panel {
	max-height: 92vh;
	border-top-color: var(--pngrfl-accent);
}

.kumul-detail--orchids .kumul-detail__close {
	width: auto;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: var(--pngrfl-paper);
}

.kumul-detail__media--numbered {
	display: grid;
	place-items: center;
}

.kumul-detail__media--numbered img {
	position: absolute;
	inset: 0;
}

.kumul-detail__placeholder {
	font-family: var(--pngrfl-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

.kumul-detail--orchids .kumul-detail__kicker {
	color: var(--pngrfl-accent);
}

.kumul-detail__debut {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

.kumul-detail__debut-label,
.kumul-detail__debut .kumul-detail__label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
}

.kumul-detail__debut-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.kumul-detail__debut-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.kumul-detail__debut-value {
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.kumul-detail__bio p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--pngrfl-body);
}

.kumul-detail__fields--six {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kumul-detail__permalink {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--pngrfl-accent);
}

.kumul-detail__navbtn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

/* Standalone profile page: the same component, laid out in the page flow. */
.kumul-detail--page {
	position: static;
	display: block;
	padding: clamp(24px, 6vh, 64px) 5%;
	background: var(--pngrfl-paper);
}

.kumul-detail--page .kumul-detail__panel {
	max-width: 1080px;
	max-height: none;
	margin: 0 auto;
	overflow: visible;
}

@media (max-width: 639px) {
	.kumul-detail__debut-grid,
	.kumul-detail__fields--six {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.kumul-detail__fields--six {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-chip { transition: none; }
}

/* Orchid control bar: the count and view toggle sit on ink, so they need the
   same light treatment the Kumul toolbar has. */
.pngrfl-orchid-controls .pngrfl-view-toggle__count {
	color: var(--pngrfl-gold);
}

.pngrfl-orchid-controls .pngrfl-view-toggle__buttons {
	background: transparent;
	border: 0;
	gap: 8px;
	flex-wrap: wrap;
}

.pngrfl-orchid-controls .pngrfl-view-toggle__btn {
	background: transparent;
	border: 1px solid rgba(247, 244, 239, 0.28);
	color: var(--pngrfl-paper);
}

.pngrfl-orchid-controls .pngrfl-view-toggle__btn.is-active {
	background: var(--pngrfl-gold);
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

/* ---- Orchid rows: out-rank the Kumul list rules --------------------------
   Orchid rows also carry .kumul-row, so the Kumul register's
   [data-view="list"] .kumul-row templates and its nth-child hide were winning
   in list view and misaligning rows against the header. These selectors are
   deliberately more specific; they must stay below the rules they override. */

.pngrfl-register[data-view] .kumul-row.orchid-row {
	grid-template-columns: 52px minmax(0, 64px) minmax(140px, 1.4fr) minmax(0, 1fr) minmax(0, 96px);
	gap: 12px;
	padding: 9px 8px;
}

.pngrfl-register[data-view] .kumul-row.orchid-row.has-status {
	grid-template-columns: 52px minmax(0, 64px) minmax(140px, 1.4fr) minmax(0, 1fr) minmax(0, 96px) minmax(0, 110px);
}

.pngrfl-register[data-view] .kumul-row.orchid-row > * {
	display: revert;
}

.pngrfl-register[data-view] .kumul-row.orchid-row > .kumul-row__ident,
.pngrfl-register[data-view] .kumul-row.orchid-row > .orchid-row__debut {
	display: flex;
}

.pngrfl-register[data-view] .kumul-row.orchid-row > .orchid-row__profile {
	display: inline-flex;
}

/* The name button carries a full-card hit area, but its own box meets 44px too. */
.orchid-card__open {
	display: flex;
	align-items: center;
	min-height: 44px;
	width: 100%;
}

@media (max-width: 767px) {
	.pngrfl-register[data-view] .kumul-row.orchid-row,
	.pngrfl-register[data-view] .kumul-row.orchid-row.has-status {
		grid-template-columns: 44px minmax(0, 48px) minmax(0, 1fr);
		gap: 4px 10px;
	}
	/* Debut folds under the name; profile and status move into the popup. */
	.pngrfl-register[data-view] .kumul-row.orchid-row > .orchid-row__debut {
		grid-column: 3;
		font-size: 13px;
	}
	.pngrfl-register[data-view] .kumul-row.orchid-row > .orchid-row__profile,
	.pngrfl-register[data-view] .kumul-row.orchid-row > .orchid-row__status {
		display: none;
	}
}

/* The media image sets display:block, which outranks the browser's [hidden]
   rule — so a photoless player showed broken-image alt text. Force it. */
.kumul-detail [hidden] {
	display: none !important;
}

.pngrfl-player-profile__back {
	padding: 24px 5% 0;
	background: var(--pngrfl-paper);
}

.pngrfl-player-profile__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--pngrfl-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--pngrfl-orchid, var(--pngrfl-red));
}

/* Profile page: the theme's blank-page wrapper is a grid that reorders its
   children, which put the back link under the panel. */
.pngrfl-player-profile {
	display: block;
}

/* The photo column is 3:4. Stretched to the row height, aspect-ratio derives
   the WIDTH from that height and the column spills into the body. Let the
   width drive instead. Scoped to Orchids so the Kumul popup is unchanged. */
.kumul-detail--orchids .kumul-detail__media {
	align-self: start;
	width: 100%;
}

/* The field-box styles were written for the popup only ([data-pngrfl-dialog]).
   The standalone profile is the same component, so it gets the same boxes:
   solid hairline, never the dashed design annotation. */
.kumul-detail--page .kumul-detail__field {
	border: 1px solid var(--pngrfl-hairline, #E3DDD4);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	background: var(--pngrfl-card, #fff);
}

.kumul-detail--page .kumul-detail__label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

.kumul-detail--page .kumul-detail__debut .kumul-detail__label {
	color: var(--pngrfl-gold);
}

.kumul-detail--page .kumul-detail__value {
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.kumul-detail--page .kumul-detail__panel {
	background: var(--pngrfl-card, #fff);
	border-top: 4px solid var(--pngrfl-orchid, var(--pngrfl-red));
}