/*
 * Game Night Planner — Front-end Planner Page
 *
 * Scoped under .gnp-root and .gnp-page-wrap so styles never leak into the
 * host theme. Colour variables live in theme.css only (loaded first) —
 * this used to duplicate them here too, which risked silently drifting out
 * of sync (e.g. a variable added to theme.css but not mirrored here).
 */

/* ── Base ──────────────────────────────────────────────────────────────── */
.gnp-root,
.gnp-page-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--gnp-text);
}

/* ── Page wrapper ───────────────────────────────────────────────────────── */
.gnp-page-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	box-sizing: border-box;
}

/* ── Banners ────────────────────────────────────────────────────────────── */
.gnp-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: var(--gnp-radius);
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.5;
}

.gnp-banner--warn {
	background: var(--gnp-warn-bg);
	color: var(--gnp-warn);
	border-left: 4px solid var(--gnp-warn);
}

.gnp-banner--info {
	background: var(--gnp-info-bg);
	color: var(--gnp-info);
	border-left: 4px solid var(--gnp-info);
}

/* ── Notices ────────────────────────────────────────────────────────────────
 * Same class/definition as admin.css's "Notices" block (kept in sync
 * manually, same as .gnp-toast's two nearly-identical definitions already
 * were before this comment was added — see that file). Needed here too
 * because .gnp-notice is used on front-end pages that only ever load
 * planner.css/theme.css, never admin.css — render_planner_page()'s "Planner
 * not found" message already relied on this class working front-end without
 * actually being defined anywhere reachable there; this closes that gap. */
.gnp-notice {
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 13px;
	margin-top: 12px;
}

.gnp-notice--error {
	background: var(--gnp-danger-bg);
	color: var(--gnp-danger);
	border-left: 3px solid var(--gnp-danger);
}

/* ── Planner header (Section 7) ─────────────────────────────────────────── */
.gnp-planner-header {
	margin-bottom: 28px;
}

.gnp-back-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--gnp-blue-mid);
	text-decoration: none;
	margin-bottom: 12px;
}

.gnp-back-link:hover {
	color: var(--gnp-blue);
	text-decoration: underline;
}

.gnp-planner-header__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-bottom: 12px;
}

.gnp-planner-header__links .gnp-back-link {
	margin-bottom: 0;
}

.gnp-planner-header__main {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.gnp-planner-header__title {
	font-size: clamp( 22px, 5vw, 32px );
	font-weight: 700;
	color: var(--gnp-blue);
	margin: 0;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.gnp-planner-title-edit-btn {
	background: transparent;
	border: none;
	color: var(--gnp-text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	align-self: flex-start;
	margin-top: 2px;
}

.gnp-planner-title-edit-btn:hover {
	color: var(--gnp-blue);
	background: var(--gnp-blue-light);
}

.gnp-planner-interact-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	font-weight: 400;
	color: var(--gnp-text-muted);
	cursor: pointer;
	align-self: flex-start;
}

/* "Change game type" control (Prompt 9) — reuses .gnp-form__label and
   .gnp-tickbox-list (added for create-planner-page.js's picker) so this
   stays visually consistent with every other supercategory-choice UI in
   the feature, rather than introducing a third variant. */
.gnp-planner-supercategory-picker {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 0.85em;
}
.gnp-planner-supercategory-picker .gnp-form__label {
	font-size: 1em;
	color: var(--gnp-text-muted);
	font-weight: 600;
}
.gnp-planner-supercategory-picker .gnp-tickbox-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px 16px;
}
.gnp-planner-supercategory-picker .gnp-tickbox-list__option label {
	font-weight: 400;
	color: var(--gnp-text-muted);
}

/* ── Join planner (join-planner feature, GNP_DB_VERSION 1.9) ────────────── */

.gnp-join-control {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	align-self: flex-start;
	margin-top: 4px;
}
.gnp-join-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
}
.gnp-join-badge--approved {
	background: var(--gnp-success-bg);
	color: var(--gnp-success);
}
.gnp-join-badge--pending {
	background: var(--gnp-blue-light);
	color: var(--gnp-blue-mid);
}
.gnp-join-badge--declined {
	background: var(--gnp-danger-bg);
	color: var(--gnp-danger);
}
/* Guest join form — reuses .gnp-form__row/.gnp-form__hint (defined above,
   "Form (temp game)") and .gnp-notice--error (defined at the top of this
   file) rather than introducing new field styling, so it looks like every
   other small form on this page. */
.gnp-join-guest-form {
	max-width: 280px;
}
.gnp-join-guest-form .gnp-form__row { margin-bottom: 8px; }
.gnp-join-guest-form .gnp-notice--error:not([hidden]) { margin: 0 0 8px; padding: 6px 10px; }

/* Shown in the interest row instead of the vote button when the planner
   requires an approved join before voting and the current user/guest
   hasn't joined — see buildInterestRow()'s own comment in planner.js. */
.gnp-interest-row__join-hint {
	font-size: 0.8em;
	color: var(--gnp-text-muted);
	font-style: italic;
}

/* ── Manage participants modal (organizer/creator) ───────────────────────── */

.gnp-participants-body {
	max-height: 60vh;
	overflow-y: auto;
}
.gnp-participants-section { margin-bottom: 20px; }
.gnp-participants-section:last-child { margin-bottom: 0; }
.gnp-participants-section__heading {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--gnp-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
}
.gnp-participants-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gnp-participants-list__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--gnp-border, #e2e2e2);
}
.gnp-participants-list__row:last-child { border-bottom: none; }
.gnp-participants-list__name {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gnp-participants-list__guest-tag {
	margin-left: 6px;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--gnp-text-muted);
}
.gnp-participants-list__actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.gnp-planner-title-input {
	font-size: clamp( 22px, 5vw, 32px );
	font-weight: 700;
	color: var(--gnp-blue);
	line-height: 1.2;
	border: 1px solid var(--gnp-blue-mid);
	border-radius: var(--gnp-radius);
	padding: 2px 8px;
	background: var(--gnp-surface);
	width: 100%;
	max-width: 100%;
	font-family: inherit;
}

.gnp-planner-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--gnp-text-muted);
}

.gnp-header-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.gnp-header-meta-item .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--gnp-blue-mid);
}

/* ── Attendance likelihood badges ───────────────────────────────────────── */
.gnp-attendance-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gnp-likelihood {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 22px;
	padding: 0 6px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
}

.gnp-likelihood--high { background: #D4EDDA; color: #155724; }
.gnp-likelihood--mid  { background: #FFF3CD; color: #856404; }
.gnp-likelihood--low  { background: var(--gnp-blue-light); color: var(--gnp-blue); }

/* ── Status badge ───────────────────────────────────────────────────────── */
.gnp-status-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
}

.gnp-status-badge--draft    { background: #E2E8F0; color: #4A5568; }
.gnp-status-badge--active   { background: #D4EDDA; color: #155724; }
.gnp-status-badge--archived { background: #F8D7DA; color: #721c24; }
.gnp-status-badge--canceled { background: #F8D7DA; color: #721c24; }

/* ── Planner main content area ──────────────────────────────────────────── */
.gnp-planner-main {
	position: relative;
}

.gnp-archived-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--gnp-text-muted);
	margin-bottom: 20px;
	padding: 10px 14px;
	background: var(--gnp-surface-alt);
	border: 1px solid var(--gnp-border);
	border-radius: var(--gnp-radius);
}

.gnp-archived-notice .dashicons {
	color: var(--gnp-text-muted);
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ── Game grid root / loading state ─────────────────────────────────────── */
.gnp-game-grid-root {
	min-height: 200px;
}

.gnp-loading-state {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 16px;
}

/* Skeleton cards — reuse admin.css keyframe via shared class names */
@keyframes gnp-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position:  400px 0; }
}

.gnp-card--skeleton .gnp-card__img-placeholder,
.gnp-skeleton-line {
	background: linear-gradient( 90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75% );
	background-size: 800px 100%;
	animation: gnp-shimmer 1.4s infinite linear;
	border-radius: 4px;
}

.gnp-card--skeleton {
	background: var(--gnp-surface);
	border: 1px solid var(--gnp-border);
	border-radius: var(--gnp-radius);
	overflow: hidden;
}

.gnp-card__img-placeholder {
	width: 100%;
	aspect-ratio: 16/9;
}

.gnp-card__body {
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gnp-skeleton-line         { height: 14px; }
.gnp-skeleton-line--title  { height: 18px; width: 70%; }
.gnp-skeleton-line--short  { width: 45%; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.gnp-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	padding: 12px 20px;
	border-radius: var(--gnp-radius);
	background: #1d2327;
	color: #fff;
	font-size: 14px;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
	max-width: calc( 100vw - 48px );
}

.gnp-toast--success { background: var(--gnp-success-solid); }
.gnp-toast--error   { background: var(--gnp-danger-solid); }

/* ── Login prompt ───────────────────────────────────────────────────────── */
.gnp-login-prompt {
	text-align: center;
	padding: 60px 20px;
}

.gnp-login-prompt p {
	font-size: 16px;
	color: var(--gnp-text-muted);
	margin-bottom: 16px;
}

/* ── Shortcode button ───────────────────────────────────────────────────── */
.gnp-shortcode-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	background: var(--gnp-blue);
	color: var(--gnp-button-text);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity var(--gnp-transition);
}

.gnp-shortcode-btn:hover { opacity: .85; color: var(--gnp-button-text); }

.gnp-shortcode-btn--create {
	background: transparent;
	color: var(--gnp-blue);
	border: 1px solid var(--gnp-blue);
}

.gnp-shortcode-btn--create:hover {
	background: var(--gnp-blue-light);
	opacity: 1;
	color: var(--gnp-blue);
}

/* ── Community Calendar DOM-hook injected UI (Section 4.2/4.3) ───────────
   Previously a self-contained, hardcoded-hex <style> block injected by
   cc-hook.js at runtime (getButtonStyles()) — a second, unsynced copy of
   colours that already existed as var(--gnp-*) everywhere else. Moved here
   as normal var()-driven rules; cc-hook.js no longer injects any CSS at
   all. Like .gnp-shortcode-btn above, no separate dark-mode override block
   is needed — GNP_Theme's variable definitions are re-declared for these
   exact classnames under body[data-gnp-cc-theme="dark"] (see theme.css),
   so the values referenced here already flip with the page's resolved
   theme; only the variable, never the rule, needs to change per theme. */
.gnp-planner-bar {
	display: flex;
	justify-content: flex-end;
	padding: 0 16px 10px;
}

.gnp-planner-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.gnp-planner-btn--open {
	background: var(--gnp-blue) !important;
	color: var(--gnp-button-text) !important;
	border: 1px solid var(--gnp-blue) !important;
}

.gnp-planner-btn--open:hover { opacity: .85; }

.gnp-planner-btn--create {
	background: transparent !important;
	color: var(--gnp-blue) !important;
	border: 1px solid var(--gnp-blue) !important;
}

.gnp-planner-btn--create:hover { background: var(--gnp-blue-light) !important; }

.gnp-planner-btn--loading {
	background: transparent !important;
	color: var(--gnp-text-muted) !important;
	border: 1px solid var(--gnp-border) !important;
	pointer-events: none;
}

.gnp-create-planner-group {
	margin: 4px 0 16px;
	padding: 10px 12px;
	border: 1px solid var(--gnp-border);
	border-radius: 6px;
	background: var(--gnp-surface-alt);
}

.gnp-create-planner-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	/* Explicit text colour — previously left unset, so it silently
	   inherited whatever text colour the surrounding page (Community
	   Calendar) happened to be using. On CC's own dark mode that meant
	   white text landing on this box's light background. */
	color: var(--gnp-text);
}

.gnp-create-planner-hint {
	margin: 4px 0 0 24px;
	font-size: 12px;
	color: var(--gnp-text-muted);
}

.gnp-hook-toast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100000;
	background: var(--gnp-blue);
	color: var(--gnp-button-text);
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 13px;
	/* Not one of GNP_Theme::COLOR_VARS (not admin-configurable), and its
	   light-mode value doesn't match var(--gnp-shadow)'s default — kept
	   literal, with an explicit dark override, rather than silently
	   changing the toast's shadow depth while fixing the actual colors. */
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

body[data-gnp-cc-theme="dark"] .gnp-hook-toast {
	box-shadow: 0 1px 6px rgba(0,0,0,.40);
}

.gnp-hook-toast--error {
	background: var(--gnp-danger-solid);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 599px ) {
	.gnp-page-wrap {
		padding: 16px 12px 48px;
	}

	.gnp-planner-header__meta {
		gap: 10px;
		font-size: 13px;
	}

	.gnp-toast {
		bottom: 16px;
		right: 12px;
		left: 12px;
		text-align: center;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 10 additions — game cards, interest, bringer, add bar, modal, search
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Game card grid ──────────────────────────────────────────────────────── */
.gnp-game-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
	margin-bottom: 24px;
}

/* ── Game card ───────────────────────────────────────────────────────────── */
.gnp-card {
	background: var(--gnp-surface);
	border: 1px solid var(--gnp-border);
	border-radius: var(--gnp-radius);
	box-shadow: var(--gnp-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow var(--gnp-transition);
}

.gnp-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.gnp-card--archived { opacity: .55; }

.gnp-card__img-placeholder {
	width: 100%;
	aspect-ratio: 16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	background: var(--gnp-surface-alt);
}
.gnp-card__img-icon { opacity: .5; }

.gnp-card__img-placeholder--light  { background: #EAF4EC; }
.gnp-card__img-placeholder--medium { background: #FFF8E7; }
.gnp-card__img-placeholder--heavy  { background: #FBE9E7; }

.gnp-card__img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	background: var(--gnp-surface-alt);
}

.gnp-card__img-clickable,
.gnp-card__title-clickable {
	cursor: pointer;
	transition: opacity var(--gnp-transition);
}
.gnp-card__img-clickable:hover  { opacity: .85; }
.gnp-card__title-clickable:hover { color: var(--gnp-blue); text-decoration: underline; }
.gnp-card__img-clickable:focus-visible,
.gnp-card__title-clickable:focus-visible {
	outline: 2px solid var(--gnp-blue-mid);
	outline-offset: 2px;
}

/* ── Detail modal ────────────────────────────────────────────────────────── */
.gnp-detail-box { max-width: 460px; }
.gnp-detail-image {
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--gnp-radius);
	margin-bottom: 12px;
}
.gnp-detail-meta { margin: 8px 0 12px; }
.gnp-detail-description {
	color: var(--gnp-text);
	line-height: 1.5;
	margin: 0 0 12px;
	white-space: pre-wrap;
}
.gnp-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}
.gnp-detail-meta-line,
.gnp-detail-notes {
	font-size: 13px;
	color: var(--gnp-text-muted);
	margin: 0 0 8px;
	white-space: pre-wrap;
}
.gnp-detail-notes strong,
.gnp-detail-meta-line strong { color: var(--gnp-text); }
.gnp-detail-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--gnp-blue);
	font-weight: 500;
	text-decoration: none;
}
.gnp-detail-link:hover { text-decoration: underline; }
.gnp-detail-empty {
	color: var(--gnp-text-muted);
	font-style: italic;
}
.gnp-tag-chip {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 99px;
	font-size: 12px;
	background: var(--gnp-blue-light);
	color: var(--gnp-blue);
}

.gnp-card__body {
	padding: 12px 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gnp-card__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--gnp-blue);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gnp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--gnp-text-muted);
}

.gnp-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.gnp-card__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	padding: 6px 12px;
	border-top: 1px solid var(--gnp-border);
	background: var(--gnp-surface-alt);
}

/* ── Complexity badge ────────────────────────────────────────────────────── */
.gnp-complexity-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 600;
	text-transform: capitalize;
}
.gnp-complexity-badge--light  { background: #D4EDDA; color: #155724; }
.gnp-complexity-badge--medium { background: #FFF3CD; color: #856404; }
.gnp-complexity-badge--heavy  { background: #F8D7DA; color: #721c24; }

/* ── General badge ───────────────────────────────────────────────────────── */
.gnp-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 600;
}
.gnp-badge--temp { background: var(--gnp-blue-light); color: var(--gnp-blue); }

/* ── Card buttons ────────────────────────────────────────────────────────── */
.gnp-card-btn {
	background: none;
	border: 1px solid var(--gnp-border);
	border-radius: 4px;
	cursor: pointer;
	padding: 4px 8px;
	font-size: 12px;
	color: var(--gnp-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background var(--gnp-transition), color var(--gnp-transition);
}
.gnp-card-btn:hover { background: var(--gnp-blue-light); color: var(--gnp-blue); border-color: var(--gnp-blue-mid); }
.gnp-card-btn--danger:hover { background: var(--gnp-danger-bg); color: var(--gnp-danger); border-color: var(--gnp-danger); }

/* ── Interest row ────────────────────────────────────────────────────────── */
.gnp-interest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-top: 1px solid var(--gnp-border);
	gap: 8px;
	font-size: 13px;
}

.gnp-interest-count { color: var(--gnp-text-muted); }

/* Round 5: the interest count becomes a real <button> once there's at
   least one voter to list (see buildInterestRow() in planner.js) — reset
   button chrome back to plain text, then add just enough affordance
   (underline on hover/focus) to read as clickable without looking like
   the vote toggle button next to it. */
.gnp-interest-count--clickable {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--gnp-text-muted);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--gnp-transition), color var(--gnp-transition);
}
.gnp-interest-count--clickable:hover,
.gnp-interest-count--clickable:focus-visible {
	color: var(--gnp-text);
	text-decoration-color: currentColor;
}

.gnp-interest-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--gnp-border);
	border-radius: 99px;
	background: none;
	font-size: 12px;
	cursor: pointer;
	color: var(--gnp-text-muted);
	transition: background var(--gnp-transition), color var(--gnp-transition), border-color var(--gnp-transition);
	white-space: nowrap;
}
.gnp-interest-btn:hover,
.gnp-interest-btn--active {
	background: var(--gnp-warn-bg);
	color: var(--gnp-warn);
	border-color: var(--gnp-warn);
}
.gnp-interest-icon { font-size: 14px; }

/* ── Bringer row ─────────────────────────────────────────────────────────── */
.gnp-bringer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-top: 1px solid var(--gnp-border);
	gap: 8px;
	font-size: 13px;
	flex-wrap: wrap;
}

.gnp-bringer-info { color: var(--gnp-text); font-weight: 500; }

/* Round 5: the aggregate line is a real <button> now too (same reasoning
   as .gnp-interest-count--clickable above) whenever there's at least one
   claim to list — reset to plain text, add the same hover/focus
   affordance. Disabled (the "No bringer yet" empty state — see
   buildBringerRow()'s own comment) falls through to the plain
   .gnp-bringer-info color with no pointer cursor, since there's nothing
   to click. */
.gnp-bringer-info--clickable {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--gnp-transition), color var(--gnp-transition);
}
.gnp-bringer-info--clickable:hover,
.gnp-bringer-info--clickable:focus-visible {
	color: var(--gnp-blue);
	text-decoration-color: currentColor;
}
.gnp-bringer-info:disabled {
	color: var(--gnp-text-muted);
	cursor: default;
	font-weight: 400;
}

/* "You're bringing this" — the current viewer's OWN claim state,
   deliberately styled distinctly from .gnp-bringer-info above (which is
   the aggregate, everyone-sees-this line) so the two visually read as
   separate pieces of information: what's true for everyone vs. what's
   true for you specifically. */
.gnp-bringer-mine {
	color: var(--gnp-blue);
	font-weight: 500;
	white-space: nowrap;
}

.gnp-bringer-claim,
.gnp-bringer-release {
	padding: 4px 10px;
	border-radius: 99px;
	border: 1px solid var(--gnp-border);
	background: none;
	font-size: 12px;
	cursor: pointer;
	transition: background var(--gnp-transition), color var(--gnp-transition);
	white-space: nowrap;
}
.gnp-bringer-claim   { color: var(--gnp-blue); border-color: var(--gnp-blue-mid); }
.gnp-bringer-claim:hover { background: var(--gnp-blue-light); }
.gnp-bringer-release { color: var(--gnp-text-muted); }
.gnp-bringer-release:hover { background: var(--gnp-danger-bg); color: var(--gnp-danger); border-color: var(--gnp-danger); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.gnp-progress-wrap {
	margin-bottom: 20px;
}
.gnp-progress-label {
	display: block;
	font-size: 13px;
	color: var(--gnp-text-muted);
	margin-bottom: 6px;
}
.gnp-progress-track {
	height: 8px;
	background: var(--gnp-surface-alt);
	border-radius: 99px;
	overflow: hidden;
	border: 1px solid var(--gnp-border);
}
.gnp-progress-bar {
	height: 100%;
	background: linear-gradient( 90deg, var(--gnp-blue-mid), var(--gnp-blue) );
	border-radius: 99px;
	transition: width 0.4s ease;
	min-width: 0;
}

/* ── Sort control ────────────────────────────────────────────────────────── */
.gnp-sort-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 4px;
	justify-content: flex-end;
}
.gnp-sort-label {
	font-size: 13px;
	color: var(--gnp-text-muted);
}
.gnp-sort-select {
	font-size: 13px;
	color: var(--gnp-text);
	background: var(--gnp-surface);
	border: 1px solid var(--gnp-border);
	border-radius: var(--gnp-radius);
	padding: 5px 10px;
	cursor: pointer;
}
.gnp-sort-select:focus {
	outline: 2px solid var(--gnp-blue-mid);
	outline-offset: 1px;
}

/* ── Add bar ─────────────────────────────────────────────────────────────── */
.gnp-owned-games-bar {
	display: flex;
	margin-bottom: 12px;
}

.gnp-add-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px dashed var(--gnp-border);
}

.gnp-add-btn {
	padding: 8px 18px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid var(--gnp-blue-mid);
	transition: background var(--gnp-transition), color var(--gnp-transition);
}
.gnp-add-btn--library {
	background: var(--gnp-blue);
	color: var(--gnp-button-text);
	border-color: var(--gnp-blue);
}
.gnp-add-btn--library:hover { opacity: .88; }
.gnp-add-btn--temp {
	background: transparent;
	color: var(--gnp-blue);
}
.gnp-add-btn--temp:hover { background: var(--gnp-blue-light); }

/* ── Empty state (planner) ───────────────────────────────────────────────── */
.gnp-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--gnp-text-muted);
}
.gnp-empty-state__icon { font-size: 48px; display: block; margin-bottom: 12px; }
.gnp-empty-state__msg  { font-size: 16px; margin-bottom: 20px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.gnp-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 10000;
}
.gnp-modal__box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10001;
	background: var(--gnp-surface);
	border-radius: var(--gnp-radius);
	box-shadow: 0 8px 32px rgba(0,0,0,.22);
	padding: 28px 28px 24px;
	width: min( 560px, calc(100vw - 32px) );
	max-height: 90vh;
	overflow-y: auto;
}
.gnp-modal__title {
	margin: 0 0 20px;
	font-size: 18px;
	color: var(--gnp-blue);
}
.gnp-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--gnp-text-muted);
	padding: 4px 6px;
	line-height: 1;
}
.gnp-modal__close:hover { color: var(--gnp-text); }

/* Round 5: the guest-name prompt and the voter/bringer list are both much
   smaller pieces of content than the add-game modal — narrower box reads
   better than the same 560px width every other modal uses. */
.gnp-guest-name-modal .gnp-modal__box,
.gnp-people-modal .gnp-modal__box {
	width: min( 380px, calc(100vw - 32px) );
}

.gnp-guest-name-modal input[type="text"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--gnp-border);
	border-radius: var(--gnp-radius);
	font-size: 14px;
	background: var(--gnp-surface);
	color: var(--gnp-text);
	margin-bottom: 4px;
}
.gnp-guest-name-modal input[type="text"]:focus {
	outline: 2px solid var(--gnp-blue-mid);
	outline-offset: 1px;
}

.gnp-form__error {
	color: var(--gnp-danger);
	font-size: 12px;
	margin: 4px 0 0;
}

/* ── People list (voter/bringer names modal, Round 5) ───────────────────── */
.gnp-people-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 50vh;
	overflow-y: auto;
}
.gnp-people-list__row {
	padding: 8px 4px;
	border-bottom: 1px solid var(--gnp-border);
	font-size: 14px;
	color: var(--gnp-text);
}
.gnp-people-list__row:last-child { border-bottom: none; }
.gnp-people-list__row--you {
	font-weight: 600;
	color: var(--gnp-blue);
}

/* ── Library search (inside modal) ──────────────────────────────────────── */
.gnp-library-search__input {
	width: 100%;
	margin-bottom: 14px;
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid var(--gnp-border);
	border-radius: 4px;
	box-sizing: border-box;
}
.gnp-library-search__results {
	max-height: 360px;
	overflow-y: auto;
}
.gnp-library-search__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 4px;
	border-bottom: 1px solid var(--gnp-border);
	gap: 10px;
}
.gnp-library-search__row:last-child { border-bottom: none; }
.gnp-library-search__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.gnp-library-search__info strong {
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gnp-library-search__meta  { font-size: 12px; color: var(--gnp-text-muted); }
.gnp-library-search__loading,
.gnp-library-search__empty,
.gnp-library-search__more,
.gnp-library-search__error { padding: 14px 4px; font-size: 13px; color: var(--gnp-text-muted); }
.gnp-library-search__error { color: var(--gnp-danger); }

/* ── "Add from library" Add/Added button ──────────────────────────────────
   Made deliberately large and unmissable: whether a game is already on the
   board needs to be obvious at a glance across a whole scrollable list,
   without reading each label carefully. Also now a toggle (Add <-> Added,
   which removes/re-adds the game) rather than a one-way action, so it
   needs a clear pressed/active look in both states. */
.gnp-lib-add-btn {
	flex-shrink: 0;
	min-width: 108px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 8px;
	white-space: nowrap;
}

.gnp-lib-add-btn--added {
	background-color: var(--gnp-success-solid) !important;
	border-color:     var(--gnp-success-solid) !important;
	color:            var(--gnp-button-text) !important;
}
.gnp-lib-add-btn--added:hover,
.gnp-lib-add-btn--added:focus {
	/* Hints that clicking again removes it, without a hover-only text
	   swap that screen-reader/touch users would never see — the aria-label
	   already says "Remove X from this planner" in this state. */
	background-color: var(--gnp-danger-solid) !important;
	border-color:     var(--gnp-danger-solid) !important;
}

@media ( max-width: 599px ) {
	.gnp-lib-add-btn { min-width: 96px; padding: 10px 14px; font-size: 14px; }
}

/* ── Form (temp game) ────────────────────────────────────────────────────── */
.gnp-form__row { margin-bottom: 14px; }
.gnp-form__row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
}
.gnp-form__row--inline {
	display: flex;
	align-items: center;
	gap: 12px;
}
.gnp-form__row--inline label { margin-bottom: 0; white-space: nowrap; }
.gnp-form__row--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.gnp-form__hint {
	margin: 4px 0 0;
	font-size: 0.85em;
	color: var( --gnp-text-muted, #666 );
}
.gnp-form__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 5px;
}
/* Shared visible tickbox list for supercategory ("game type") choices —
   used by create-planner-page.js's picker and reused wherever else this
   feature needs the same single-select radio-list UI (e.g. planner.js's
   "Change game type" control). Deliberately not a <select> per the
   product spec. */
.gnp-tickbox-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gnp-tickbox-list__option {
	display: flex;
	align-items: center;
	gap: 8px;
}
.gnp-tickbox-list__option label { margin-bottom: 0; font-weight: 400; }
.gnp-link-btn {
	background: none;
	border: none;
	padding: 0;
	margin-top: 12px;
	color: var( --gnp-blue, #2271b1 );
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.9em;
	display: block;
}
.gnp-link-btn:hover { color: var( --gnp-blue-mid, #135e96 ); }

.gnp-create-planner-app__tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var( --gnp-border, #dcdcde );
	margin-bottom: 20px;
}
.gnp-create-planner-app__tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 16px;
	font-size: 1em;
	font-weight: 500;
	color: var( --gnp-text-muted, #666 );
	cursor: pointer;
}
.gnp-create-planner-app__tab:hover {
	color: var( --gnp-text, #1d2327 );
}
.gnp-create-planner-app__tab.is-active {
	color: var( --gnp-blue, #2271b1 );
	border-bottom-color: var( --gnp-blue, #2271b1 );
}
.gnp-create-planner-app__body {
	max-width: 480px;
}
.gnp-range-pair { display: flex; align-items: center; gap: 6px; }

.gnp-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--gnp-border);
}

/* ── Responsive additions (Phase 10) ─────────────────────────────────────── */
@media ( max-width: 599px ) {
	.gnp-game-grid {
		grid-template-columns: 1fr;
	}

	.gnp-add-bar {
		flex-direction: column;
	}

	.gnp-add-btn { width: 100%; justify-content: center; }

	.gnp-interest-row,
	.gnp-bringer-row { flex-direction: column; align-items: flex-start; }

	.gnp-modal__box { padding: 20px 16px 18px; }
}

@media ( min-width: 600px ) and ( max-width: 1023px ) {
	.gnp-game-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 12 — Comments panel & library search tag chips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Library search tag chips (inside add-game modal) ───────────────────── */
.gnp-library-search__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 3px;
}

.gnp-tag {
	display: inline-block;
	padding: 1px 7px;
	background: var(--gnp-blue-light);
	color: var(--gnp-blue);
	border-radius: 99px;
	font-size: 11px;
	font-weight: 500;
}

.gnp-tag--more {
	background: var(--gnp-surface-alt);
	color: var(--gnp-text-muted);
}

/* ── Comments panel ──────────────────────────────────────────────────────── *
 * Just a link-out to the Community Calendar event page — comments are never
 * fetched or rendered inside the planner. */
.gnp-comments-panel {
	margin-top: 40px;
	padding: 16px 18px;
	border: 1px solid var(--gnp-border);
	border-radius: var(--gnp-radius);
	background: var(--gnp-surface);
	box-shadow: var(--gnp-shadow);
}

.gnp-comments-link-out {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gnp-blue);
	text-decoration: none;
}

.gnp-comments-link-out:hover {
	color: var(--gnp-blue-mid);
	text-decoration: underline;
}

/* ── Responsive: comments ─────────────────────────────────────────────────── */
@media ( max-width: 599px ) {
	.gnp-comments-panel { padding: 12px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Public game library page ([game_night_library] shortcode)
   Reuses .gnp-game-grid / .gnp-card / badge / tag-chip / empty-state styles
   defined above (Phase 10) — this section only adds the page-specific
   toolbar and pagination controls.
   ═══════════════════════════════════════════════════════════════════════════ */

.gnp-library-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.gnp-library-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.gnp-library-toolbar__search {
	flex: 1 1 260px;
	padding: 8px 12px;
	border: 1px solid var(--gnp-input-border);
	border-radius: 4px;
	background: var(--gnp-input-bg);
	color: var(--gnp-input-text);
	font-size: 14px;
}

.gnp-library-toolbar__select {
	padding: 8px 12px;
	border: 1px solid var(--gnp-input-border);
	border-radius: 4px;
	background: var(--gnp-input-bg);
	color: var(--gnp-input-text);
	font-size: 14px;
}

.gnp-library-toolbar__add-btn {
	flex-shrink: 0;
}

.gnp-library-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.gnp-library-pagination__indicator {
	font-size: 13px;
	color: var(--gnp-text-muted);
}

.gnp-library-link .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Create-a-planner page ([game_night_create_planner]) and My Game Planners
   page ([game_night_my_planners]) — any-logged-in-user planner creation
   feature. Both reuse .gnp-page-wrap/.gnp-root for layout + theming and
   .gnp-form__row/.gnp-form__actions (defined above, "Form (temp game)")
   for field layout, so only page-specific title/intro/empty-state rules and
   explicit input theming are needed here.
   ═══════════════════════════════════════════════════════════════════════════ */

.gnp-create-planner-page__title,
.gnp-my-planners-page__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--gnp-text);
}

.gnp-create-planner-page__intro {
	font-size: 14px;
	color: var(--gnp-text-muted);
	margin: 0 0 20px;
}

.gnp-create-planner-app {
	max-width: 480px;
}

.gnp-create-planner-app__loading,
.gnp-create-planner-app__empty,
.gnp-my-planners-list__loading,
.gnp-my-planners-list__empty {
	font-size: 13px;
	color: var(--gnp-text-muted);
	padding: 14px 4px;
}

/* Explicit input theming (not left to the generic dark-mode-only
 * input[type]/select/textarea override in theme.css) so the picker and
 * notes field are correctly themed in BOTH light and dark mode, matching
 * how .gnp-library-toolbar__search/__select already do it above. */
.gnp-create-planner-app select,
.gnp-create-planner-app textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--gnp-input-border);
	border-radius: 4px;
	background: var(--gnp-input-bg);
	color: var(--gnp-input-text);
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}

.gnp-create-planner-app textarea {
	resize: vertical;
	min-height: 64px;
}

.gnp-my-planners-list__create-link {
	display: inline-flex;
	margin: 16px 4px 0;
}

@media ( max-width: 599px ) {
	.gnp-create-planner-app { max-width: none; }
}