/*
 * Prospector.GG front-end design system.
 *
 * Only Prospector-owned classes opt into these rules. Do not add unscoped
 * element selectors here: WordPress admin, Blocksy, BuddyPress, and third-party
 * plugins must remain visually independent.
 */

:where(.pph-home, .pph-member-takeover, .pph-ui) {
	/* Brand and semantic color tokens. */
	--pph-gold: #ffd400;
	--pph-gold-2: #e3b400;
	--pph-bg: #081018;
	--pph-panel: rgba(10, 18, 27, .96);
	--pph-panel-2: rgba(16, 27, 39, .96);
	--pph-control-bg: #0a1520;
	--pph-control-bg-hover: #10202c;
	--pph-text: #f5f8fb;
	--pph-muted: #9eadbb;
	--pph-blue: #2eb8ff;
	--pph-green: #36d97e;
	--pph-red: #ef5350;
	--pph-line: rgba(255, 212, 0, .23);
	--pph-line-soft: rgba(134, 166, 198, .17);
	--pph-focus-ring: 0 0 0 2px rgba(255, 212, 0, .1);

	/* Type, sizing, spacing, border, and shadow tokens. */
	--pph-font-sans: Verdana, Geneva, Arial, sans-serif;
	--pph-font-display: Iceberg, Orbitron, Teko, Rajdhani, var(--pph-font-sans);
	--pph-control-height: 40px;
	--pph-radius-xs: 4px;
	--pph-radius-sm: 5px;
	--pph-radius-md: 8px;
	--pph-radius: 11px;
	--pph-space-1: 4px;
	--pph-space-2: 8px;
	--pph-space-3: 12px;
	--pph-space-4: 16px;
	--pph-space-5: 24px;
	--pph-shadow-sm: 0 8px 20px rgba(0, 0, 0, .24);
	--pph-shadow: 0 18px 50px rgba(0, 0, 0, .34);
	--pph-shadow-menu: 0 18px 38px rgba(0, 0, 0, .88);

	/* Named layers. Components should not invent competing large integers. */
	--pph-z-base: 0;
	--pph-z-raised: 10;
	--pph-z-sticky: 40;
	--pph-z-dropdown-host: 1100;
	--pph-z-dropdown: 1200;
	--pph-z-popover: 1400;
	--pph-z-header: 1000000;
	--pph-z-modal: 1000100;
	--pph-z-toast: 1000200;
}

.pph-home:not(.pph-member-takeover) { --pph-line-soft: rgba(134, 166, 198, .16); }
.pph-member-takeover {
	--pph-panel: rgba(10, 18, 27, .97);
	--pph-panel-2: rgba(15, 27, 39, .98);
	--pph-line: rgba(255, 212, 0, .24);
	--pph-line-soft: rgba(134, 166, 198, .17);
}

/* Existing shared shell primitives now live here as canonical components. */
:where(.pph-home, .pph-member-takeover, .pph-ui) .pph-card {
	overflow: hidden;
	border: 1px solid var(--pph-line-soft);
	border-radius: var(--pph-radius);
	background: linear-gradient(160deg, rgba(255,255,255,.018), transparent 38%), var(--pph-panel);
	box-shadow: var(--pph-shadow);
}

:where(.pph-home, .pph-member-takeover, .pph-ui) .pph-card-kicker {
	display: flex;
	align-items: center;
	gap: var(--pph-space-2);
	padding: var(--pph-space-3) 14px;
	border-bottom: 1px solid var(--pph-line-soft);
	background: rgba(0, 0, 0, .16);
	color: #d9e3ed;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
}

:where(.pph-home, .pph-member-takeover, .pph-ui) .pph-card-kicker .dashicons {
	width: 16px;
	height: 16px;
	color: var(--pph-gold);
	font-size: 16px;
}

:where(.pph-home, .pph-member-takeover, .pph-ui) .pph-button,
:where(.pph-home, .pph-member-takeover, .pph-ui) .pph-ui-button {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 13px;
	border: 1px solid var(--pph-line-soft);
	border-radius: 6px;
	background: rgba(255, 255, 255, .03);
	color: #e7eef5;
	font: 900 11px/1.2 var(--pph-font-sans);
	letter-spacing: .025em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

:where(.pph-home, .pph-member-takeover, .pph-ui) :is(.pph-button, .pph-ui-button):hover {
	transform: translateY(-1px);
}

:where(.pph-home, .pph-member-takeover, .pph-ui) :is(.pph-button, .pph-ui-button):focus-visible {
	outline: 2px solid var(--pph-gold);
	outline-offset: 2px;
}

:where(.pph-home, .pph-member-takeover, .pph-ui) :is(.pph-button-primary, .pph-ui-button--primary) {
	border-color: #ffec7a;
	background: linear-gradient(180deg, #ffe24a, var(--pph-gold-2));
	box-shadow: 0 8px 20px rgba(255, 212, 0, .1);
	color: #141414;
}

:where(.pph-home, .pph-member-takeover, .pph-ui) :is(.pph-button-ghost, .pph-ui-button--ghost) {
	border-color: var(--pph-line-soft);
	background: rgba(255, 255, 255, .03);
	color: #e7eef5;
}

/* Forms: opt in with the component classes below. */
.pph-ui-label {
	display: block;
	margin: 0 0 5px;
	color: var(--pph-ui-accent, var(--pph-gold));
	font: 900 8px/1.2 var(--pph-font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}

:is(.pph-ui-input, .pph-ui-select) {
	box-sizing: border-box;
	width: 100%;
	height: var(--pph-control-height);
	min-height: var(--pph-control-height);
	margin: 0;
	border: 1px solid var(--pph-ui-line, var(--pph-line-soft));
	border-radius: var(--pph-radius-sm);
	outline: 0;
	background-color: var(--pph-control-bg);
	color: #edf2f6;
	font: 700 10px/1.2 var(--pph-font-sans);
}

.pph-ui-input { padding: 8px 10px; }
.pph-ui-input::placeholder { color: #7f92a1; opacity: 1; }

.pph-ui-select {
	appearance: none;
	padding: 7px 28px 7px 9px;
	background-image: linear-gradient(45deg, transparent 50%, #9cabb7 50%), linear-gradient(135deg, #9cabb7 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
	background-repeat: no-repeat;
	background-size: 4px 4px, 4px 4px;
	color-scheme: dark;
}

.pph-ui-select option { background: var(--pph-control-bg); color: #edf2f6; }
:is(.pph-ui-input, .pph-ui-select):focus { border-color: rgba(255, 215, 0, .62); box-shadow: var(--pph-focus-ring); }

.pph-ui-search { position: relative; display: block; }
.pph-ui-search .pph-ui-input { padding-right: 35px; }
.pph-ui-search > .dashicons {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 16px;
	height: 16px;
	color: #aebdc8;
	font-size: 16px;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Breadcrumbs and page headings have compact archive and standard tool forms. */
.pph-ui-breadcrumbs {
	margin: 0 0 10px;
	border: 1px solid var(--pph-ui-line, var(--pph-line-soft));
	border-left: 3px solid var(--pph-ui-accent, var(--pph-gold));
	border-radius: 7px;
	background: rgba(9, 18, 27, .94);
}

.pph-ui-breadcrumbs > ol {
	display: flex;
	min-width: 0;
	min-height: 39px;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 12px;
	list-style: none;
}

.pph-ui-breadcrumbs li {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 10px;
	color: #e8eef4;
	font: 900 9px/1.2 var(--pph-font-sans);
	letter-spacing: .045em;
	text-transform: uppercase;
}

.pph-ui-breadcrumbs li + li::before { content: "›"; flex: 0 0 auto; color: var(--pph-gold); font-size: 15px; line-height: 1; }
.pph-ui-breadcrumbs a { color: inherit; text-decoration: none; }
.pph-ui-breadcrumbs a:hover,
.pph-ui-breadcrumbs a:focus-visible { color: var(--pph-ui-accent, var(--pph-gold)); }
.pph-ui-breadcrumbs [aria-current="page"] { display: block; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }

.pph-ui-breadcrumbs--compact {
	margin-bottom: 8px;
	border: 1px solid var(--pph-ui-line, var(--pph-line-soft));
	border-left: 3px solid rgba(255, 215, 0, .72);
	border-radius: 7px;
	background: rgba(5, 12, 19, .9);
	box-shadow: none;
}

.pph-ui-breadcrumbs--compact > ol { min-height: 34px; gap: 0; padding: 7px 11px; }
.pph-ui-breadcrumbs--compact li { display: flex; gap: 0; color: var(--pph-ui-muted, var(--pph-muted)); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.pph-ui-breadcrumbs--compact li + li::before { margin: 0 8px; color: rgba(255, 215, 0, .58); }
.pph-ui-breadcrumbs--compact a { color: #c7d4df; }

.pph-ui-surface {
	overflow: hidden;
	border: 1px solid var(--pph-ui-line, var(--pph-line-soft));
	border-radius: var(--pph-radius);
	background: linear-gradient(150deg, rgba(255,255,255,.018), transparent 38%), var(--pph-panel);
	box-shadow: var(--pph-shadow);
}

.pph-ui-surface--compact {
	border-radius: var(--pph-radius-md);
	background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 34%), rgba(7,15,23,.96);
	box-shadow: 0 16px 38px rgba(0,0,0,.24);
}

.pph-ui-page-heading { padding: 15px 16px 13px; border-bottom: 1px solid var(--pph-line); }
.pph-ui-page-heading > span,
.pph-ui-eyebrow {
	display: block;
	margin: 0 0 4px;
	color: var(--pph-ui-accent, var(--pph-gold));
	font: 900 9px/1.2 var(--pph-font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pph-ui-page-heading > div { display: flex; align-items: center; gap: 12px; }
.pph-ui-page-heading h1 {
	min-width: 0;
	margin: 0;
	color: #fff;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 950;
	letter-spacing: -.035em;
	line-height: 1;
	text-transform: uppercase;
}

.pph-ui-page-heading i { height: 1px; flex: 1 1 auto; background: linear-gradient(90deg, rgba(255,212,0,.64), transparent); }
.pph-ui-page-heading p { margin: 7px 0 0; color: var(--pph-ui-muted, var(--pph-muted)); font-size: 10px; line-height: 1.5; }

.pph-ui-page-heading--compact {
	padding: 13px 15px 14px;
	border: 1px solid rgba(255, 215, 0, .18);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(255,215,0,.035), transparent 42%), rgba(7,15,23,.96);
}

.pph-ui-page-heading--compact > div { gap: 10px; }
.pph-ui-page-heading--compact > span { letter-spacing: .13em; }
.pph-ui-page-heading--compact h1 { font-family: var(--pph-font-display); font-size: clamp(23px, 4cqw, 31px); font-weight: 900; letter-spacing: 0; }
.pph-ui-page-heading--compact i { background: linear-gradient(90deg, rgba(255,215,0,.42), transparent); }
.pph-ui-page-heading--compact p { line-height: 1.45; }

/* Filters and results. */
.pph-ui-filter-card { padding: 0; overflow: hidden; border-color: var(--pph-ui-line, var(--pph-line-soft)); background: rgba(6,13,20,.96); }
.pph-ui-filter-card > .pph-card-kicker { margin: 0; border-bottom-color: var(--pph-ui-line, var(--pph-line-soft)); background: #08121b; }
.pph-ui-filter { display: grid; gap: 12px; padding: 12px 10px 14px; }
.pph-ui-filter-fields { display: grid; gap: 10px; }
.pph-ui-filter-fields label > span,
.pph-ui-filter > label > span { display: block; margin: 0 0 5px; color: var(--pph-ui-accent, var(--pph-gold)); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.pph-ui-filter-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255,215,0,.14);
}

.pph-ui-filter-footer > span { color: var(--pph-ui-muted, var(--pph-muted)); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.pph-ui-filter-footer > span strong { color: var(--pph-ui-accent, var(--pph-gold)); font-size: 14px; }
.pph-ui-filter-footer > .pph-ui-button {
	height: var(--pph-control-height);
	min-height: var(--pph-control-height);
	padding: 6px 11px;
	border-color: rgba(134,166,198,.28);
	background: linear-gradient(180deg, #10202c, #0a1620);
	color: #dce6ed;
	font-size: 8px;
	line-height: 1;
}
.pph-ui-filter-footer > .pph-ui-button:is(:hover, :focus-visible) { border-color: rgba(255,215,0,.6); color: #fff; }

.pph-ui-empty-state { padding: 36px 18px; color: var(--pph-ui-muted, var(--pph-muted)); text-align: center; }
.pph-ui-empty-state[hidden] { display: none; }
.pph-ui-empty-state > .dashicons { display: block; width: 30px; height: 30px; margin: 0 auto 8px; color: var(--pph-ui-accent, var(--pph-gold)); font-size: 30px; }
.pph-ui-empty-state > strong { display: block; color: #fff; font-size: 15px; }
.pph-ui-empty-state > p { margin: 5px 0 0; font-size: 10px; }
.pph-ui-empty-state--attached { border: 1px solid var(--pph-ui-line, var(--pph-line-soft)); border-top: 0; background: rgba(7,15,23,.96); }
.pph-ui-results-panel { min-width: 0; border: 1px solid var(--pph-ui-line, var(--pph-line-soft)); background: rgba(7,15,23,.96); }
.pph-ui-results-panel--attached { border-top: 0; border-radius: 0 0 var(--pph-radius-md) var(--pph-radius-md); }
.pph-ui-results-panel--floating { margin-top: 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* Tabs and accordions are opt-in primitives; feature scripts keep behavior. */
.pph-ui-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 6px; border: 1px solid var(--pph-line-soft); border-radius: var(--pph-radius-md); background: rgba(0,0,0,.12); }
.pph-ui-tab { min-height: 34px; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--pph-muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.pph-ui-tab:is(:hover, :focus-visible, .is-active, [aria-selected="true"]) { border-color: rgba(255,212,0,.16); background: rgba(255,212,0,.08); color: var(--pph-gold); }

.pph-ui-accordion { overflow: hidden; border: 1px solid var(--pph-line-soft); border-radius: var(--pph-radius-md); background: var(--pph-panel); }
.pph-ui-accordion > summary { display: flex; min-height: 42px; align-items: center; gap: 8px; padding: 9px 11px; color: #fff; font-size: 10px; font-weight: 900; list-style: none; cursor: pointer; }
.pph-ui-accordion > summary::-webkit-details-marker { display: none; }
.pph-ui-accordion[open] > summary { border-bottom: 1px solid var(--pph-line-soft); }

/* Dropdowns: elevate the host and keep its ancestor chain unclipped. */
.pph-ui-overflow-zone,
.pph-ui-dropdown-card,
.pph-ui-dropdown,
.pph-ui-dropdown-context { overflow: visible; }
.pph-card.pph-ui-dropdown-card { overflow: visible; }
.pph-ui-dropdown { position: relative; }
.pph-ui-dropdown:is(.is-open, :has([aria-expanded="true"])) { z-index: var(--pph-z-dropdown-host); }
.pph-ui-dropdown__menu { position: absolute; z-index: var(--pph-z-dropdown); }

/* Tooltips and modal shells. */
.pph-ui-tooltip { position: absolute; z-index: var(--pph-z-popover); max-width: min(260px, calc(100vw - 24px)); padding: 6px 8px; border: 1px solid rgba(255,215,0,.52); border-radius: var(--pph-radius-xs); background: #071019; box-shadow: var(--pph-shadow-sm); color: #fff; font-size: 9px; font-weight: 700; line-height: 1.35; pointer-events: none; }
.pph-ui-modal { position: fixed; z-index: var(--pph-z-modal); inset: 0; display: grid; padding: 18px; place-items: center; }
.pph-ui-modal[hidden] { display: none; }
.pph-ui-modal__backdrop { position: absolute; inset: 0; background: rgba(0,5,10,.82); backdrop-filter: blur(5px); }
.pph-ui-modal__dialog { position: relative; z-index: 1; width: min(620px, 100%); max-height: calc(100dvh - 36px); overflow: auto; border: 1px solid rgba(255,212,0,.34); border-radius: 12px; background: linear-gradient(150deg,#0d1924,#071019 72%); box-shadow: 0 28px 90px rgba(0,0,0,.7); color: var(--pph-text); }

/* Shared application-shell variants. Feature grids may still refine column widths. */
.pph-layout-grid > * { min-width: 0; }
@media (min-width: 761px) {
	.pph-home .pph-grid.pph-layout--two-column { grid-template-columns: minmax(0, 1fr) var(--pph-rail-width, 225px); }
	.pph-home .pph-grid.pph-layout--full-width { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 761px) {
	body.pph-premium-tool-active .pph-premium-tool-page .pph-ui-overflow-zone { position: relative; overflow: visible; isolation: auto; }
	body.pph-premium-tool-active .pph-premium-tool-page .pph-right > .pph-ui-overflow-zone { z-index: var(--pph-z-sticky); }
	body.pph-premium-tool-active .pph-premium-tool-page .pph-ui-dropdown-card {
		position: relative;
		z-index: var(--pph-z-dropdown-host);
		contain: none;
		background: #071019;
		backdrop-filter: none;
	}
	body.pph-premium-tool-active .pph-premium-tool-page .pph-ui-dropdown-card .pph-ui-dropdown-context { overflow: visible; }
	body.pph-premium-tool-active .pph-premium-tool-page .pph-ui-dropdown-card .pph-ui-dropdown__menu {
		right: 0;
		left: 0;
		z-index: var(--pph-z-dropdown);
		box-sizing: border-box;
		width: 100%;
		min-width: 100%;
		max-width: none;
		border-color: rgba(255,212,0,.38);
		background: #071019;
		box-shadow: var(--pph-shadow-menu);
		backdrop-filter: none;
	}
	body.pph-premium-tool-active .pph-premium-tool-page .pph-ui-dropdown-card ~ .pph-site-menu-card { position: relative; z-index: var(--pph-z-base); }
}

@media (max-width: 760px) {
	.pph-application-shell .pph-ui-breadcrumbs--compact {
		margin-right: 0;
		margin-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.pph-ui-page-heading { padding: 13px 10px 12px; }
	.pph-ui-page-heading h1 { font-size: 25px; }
	.pph-ui-page-heading--compact { padding: 13px 12px 12px; }
	.pph-ui-page-heading--compact h1 { font-size: 23px; }
	.pph-ui-filter--mobile { gap: 7px; padding: 8px 9px 9px; border-radius: 0; }
	.pph-ui-filter--mobile .pph-ui-filter-footer > span { display: none; }
	.pph-ui-filter--mobile .pph-ui-filter-footer > .pph-ui-button { min-width: 58px; }
	.pph-ui-dropdown:is(.is-open, :has([aria-expanded="true"])) { z-index: var(--pph-z-dropdown-host); }
	.pph-ui-dropdown__menu { z-index: var(--pph-z-dropdown); }
}

@media (prefers-reduced-motion: reduce) {
	:where(.pph-home, .pph-member-takeover, .pph-ui) :is(.pph-button, .pph-ui-button, .pph-ui-tab) { transition-duration: .01ms; }
}