/*
 * PlayCross shared components.
 * Building blocks reused across every page template: alternating
 * section bands, cards, buttons, badges and a small form/table skeleton.
 */

/* ---------------------------------------------------------------- Layout */

.pc-container {
	max-width: var(--pc-content-width);
	margin-inline: auto;
	padding-inline: var(--pc-space-sm);
}

.pc-section {
	padding-block: var(--pc-space-xl);
}

.pc-section--dark {
	background: var(--pc-dark-bg);
	color: var(--pc-dark-text);
}

.pc-section--light {
	background: var(--pc-light-bg);
	color: var(--pc-light-text);
}

.pc-section--tight {
	padding-block: var(--pc-space-lg);
}

/* Halves just this section's own TOP padding, leaving its bottom padding
   (and every other .pc-section on the site) untouched -- scoped narrowly
   to tournament-single.php's Overview/Draws/Matches content sections,
   where the gap above that section's own heading was reported as too
   big. Source order matters: defined after .pc-section--tight so that,
   applied together, this wins for padding-top while .pc-section--tight's
   own padding-bottom still applies. */
.pc-section--tight-top {
	padding-top: calc(var(--pc-space-xl) / 2);
}

.pc-section--tighter-top {
	padding-top: calc(var(--pc-space-lg) / 2);
}

.pc-section--dark-surface {
	background: var(--pc-dark-surface);
	color: var(--pc-dark-text);
}

.pc-page-content p {
	margin: 0 0 1em;
}

/* ------------------------------------------------------------ Typography */

.pc-eyebrow {
	display: inline-block;
	font-family: var(--pc-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-red);
	margin: 0 0 var(--pc-space-xs);
}

.pc-heading {
	font-family: var(--pc-font-heading);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--pc-space-sm);
}

.pc-heading--hero {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	text-transform: uppercase;
}

.pc-hero-subtitle {
	font-size: 1rem;
}

.pc-hero-actions {
	display: flex;
	gap: var(--pc-space-sm);
	flex-wrap: wrap;
	margin-top: var(--pc-space-md);
}

.pc-text-muted {
	color: var(--pc-light-text-muted);
}

.pc-section--dark .pc-text-muted {
	color: var(--pc-dark-text-muted);
}

/* ----------------------------------------------------------------- Cards */

.pc-card {
	border-radius: var(--pc-radius);
	border: 1px solid var(--pc-light-border);
	background: var(--pc-light-surface);
	padding: var(--pc-space-md);
}

.pc-section--dark .pc-card,
.pc-card--dark {
	border-color: var(--pc-dark-border);
	background: var(--pc-dark-surface);
	color: var(--pc-dark-text);
}

.pc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--pc-space-sm);
}

/* --------------------------------------------------------------- Buttons */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--pc-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.85rem 1.5rem;
	border-radius: var(--pc-radius-sm);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Needed because .pc-btn already sets its own `display` above -- the
   browser's default [hidden]{display:none} rule is a lower-priority
   origin than this class, so on its own a hidden .pc-btn stayed fully
   visible (found while fixing the referee page's own Save/Save-set
   buttons, but this is a general .pc-btn defect: tournament-registration.php's
   wizard "Back" button had the exact same bug). Without this, toggling the
   `hidden` attribute on any button carrying this class had no visual
   effect at all. */
.pc-btn[hidden] {
	display: none;
}

.pc-btn--primary {
	background: var(--pc-red);
	color: #fff;
}

.pc-btn--primary:hover,
.pc-btn--primary:focus-visible {
	background: var(--pc-red-hover);
	color: #fff;
}

/* Referee page's "Save" button (section 8) -- greyed out and inert until
   the match is actually decided, rather than only ever appearing once it
   is; turns into the normal solid red .pc-btn--primary look the instant
   enough sets are banked, which is the visual cue to save the final
   result. Reuses existing neutral tokens rather than a new one-off color. */
.pc-btn--primary:disabled {
	background: var(--pc-light-border);
	color: var(--pc-light-text-muted);
	cursor: not-allowed;
}

.pc-btn--outline {
	background: transparent;
	border-color: var(--pc-light-border);
	color: var(--pc-light-text);
}

.pc-section--dark .pc-btn--outline {
	border-color: var(--pc-dark-border);
	color: var(--pc-dark-text);
}

.pc-btn--outline:hover,
.pc-btn--outline:focus-visible {
	border-color: var(--pc-red);
	color: var(--pc-red);
}

/* Referee page's optional "Set server" button (section 6) -- disabled
   until a radio option is actually picked, same neutral treatment as
   .pc-btn--primary:disabled above, generalized here since any outline
   button can reasonably need this same state. */
.pc-btn--outline:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pc-btn--outline:disabled:hover {
	border-color: var(--pc-light-border);
	color: var(--pc-light-text);
}

/* ---------------------------------------------------------------- Badges */

.pc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--pc-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	line-height: 1;
}

.pc-badge--live {
	background: rgba(230, 57, 70, 0.12);
	color: var(--pc-red);
}

.pc-badge--live::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--pc-red);
	animation: pc-pulse 1.4s ease-in-out infinite;
}

.pc-badge--win {
	background: rgba(46, 160, 67, 0.14);
	color: var(--pc-green);
}

.pc-badge--soon {
	background: rgba(230, 162, 60, 0.16);
	color: var(--pc-amber);
}

.pc-badge--neutral {
	background: rgba(139, 148, 158, 0.16);
	color: var(--pc-light-text-muted);
}

/* Solid fill, not the soft/tinted look --win/--live/--soon share -- a
   stronger, unmistakable signal specifically for "you are registered for
   this", used on the public /tournaments/ list's own inverted dark card
   (see .pc-tournament-row--registered, tournaments.css). Confirmed with
   the user. */
.pc-badge--registered {
	background: #1e9e6a;
	color: #fff;
}

/* Homepage Live strip's fallback (claude_code_prompt_live-scoring.md
   section 11) -- shown instead of --live whenever nothing is currently in
   progress, so a spectator never mistakes a just-finished result for an
   ongoing match. Same green as --win (a decided/positive outcome), same
   small leading dot as --live for visual rhythm, but STATIC (no pulse) --
   that stillness is itself part of the "this already ended" signal. */
.pc-badge--result {
	background: rgba(46, 160, 67, 0.14);
	color: var(--pc-green);
}

.pc-badge--result::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--pc-green);
}

.pc-section--dark .pc-badge--neutral {
	color: var(--pc-dark-text-muted);
}

@keyframes pc-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* ----------------------------------------------------------------- Forms */

.pc-field {
	display: block;
	margin-bottom: var(--pc-space-sm);
}

.pc-field label {
	display: block;
	font-family: var(--pc-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.pc-field input,
.pc-field select {
	width: 100%;
	font-family: var(--pc-font-body);
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--pc-radius-sm);
	border: 1px solid var(--pc-light-border);
	background: var(--pc-light-surface);
	color: var(--pc-light-text);
}

.pc-section--dark .pc-field input,
.pc-section--dark .pc-field select {
	border-color: var(--pc-dark-border);
	background: var(--pc-dark-surface);
	color: var(--pc-dark-text);
}

/* ------------------------------------------------------------ Live strip */
/* The strip's own markup/styling now lives in front-page.css (.pc-live-heading/
   .pc-live-cards/.pc-live-card...) -- redesigned entirely from the earlier
   scrolling-text marquee this section used to hold (requested directly,
   reference screenshot) into compact match cards, homepage-only. */

.pc-card .pc-badge {
	margin-bottom: var(--pc-space-xs);
}

/* ---------------------------------------------------------------- Profile */

.pc-profile-header {
	display: flex;
	align-items: center;
	gap: var(--pc-space-md);
	flex-wrap: wrap;
}

.pc-avatar {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pc-dark-surface);
	color: var(--pc-dark-text);
	font-family: var(--pc-font-heading);
	font-size: 1.75rem;
	font-weight: 700;
	flex-shrink: 0;
}

.pc-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pc-font-heading);
	font-weight: 700;
	background: var(--pc-red);
	color: #fff;
	border-radius: var(--pc-radius-sm);
	padding: 0.15rem 0.6rem;
	font-size: 0.85rem;
	margin-left: 0.5rem;
}

.pc-profile-flag {
	font-size: 1.5rem;
	line-height: 1;
	vertical-align: middle;
	margin-left: 0.5rem;
}

.pc-stat-value {
	font-family: var(--pc-font-heading);
	font-size: 2rem;
	font-weight: 700;
	display: block;
}

.pc-stat-label {
	font-family: var(--pc-font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pc-light-text-muted);
}

.pc-match-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	padding: var(--pc-space-sm) 0;
	border-bottom: 1px solid var(--pc-light-border);
}

.pc-match-row:last-child {
	border-bottom: none;
}

.pc-profile-name {
	margin-bottom: 0.25rem;
}

.pc-section--tight-heading {
	margin-top: var(--pc-space-lg);
}

/* --------------------------------------------------- Live-style match row */
/* Moved here from front-page.css (was homepage-only) -- requested
   directly: the Matches board's own cards and the Draws tab's own
   group/KO match lists now use this EXACT same row component too, so it
   lives in this shared file rather than front-page.php's own. The card
   SHELL (.pc-live-card / .pc-live-card-header, homepage) and
   (.pc-matches-card / .pc-matches-card-header, Matches/Draws) stay in
   their own respective stylesheets -- only unchanged, since both already
   used the same visual language (petrol/red header, squared top-left
   corner) even before this round. Only the body -- one row per side,
   flag + name (+seed) left, sets-won tally + per-set numbers right -- was
   actually different, so only that part is shared now. */
.pc-live-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.35rem 0;
}

.pc-live-card-row + .pc-live-card-row {
	border-top: 1px solid var(--pc-card-divider);
}

.pc-live-card-player {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Doubles -- both partners stacked on their own line each, instead of
   "Primary / Partner" on .pc-live-card-player's one shared line above.
   .pc-live-card-row's own padding is trimmed specifically when it holds
   a stacked pair -- pair-line's own font-size/line-height below are
   hand-measured (not a round-number guess) so the WHOLE row lands on
   exactly the same height a 1-line singles row already has -- ONE shared
   target now (this component has no page-specific override anywhere
   left, homepage strip and Matches/Draws board alike, since the
   Matches/Draws round that switched to this exact same component).
   Re-measured directly (reported directly: doubles cards, played AND
   not-yet-played, sat ~1.3px taller than singles ones right next to
   them) after .pc-live-card-scores below picked up its own explicit
   font-size -- that shifted the singles row's own natural height a hair,
   which this value hadn't been re-tuned against until now. */
.pc-live-card-row--stacked {
	padding: 0.166rem 0; /* measured against the real CSS to land exactly on a 1-line singles row's own height (32.95px/33.75px, row 1 vs row 2) */
}

.pc-live-card-player--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.pc-live-card-player--stacked .pair-line {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.72rem;
	line-height: 1.2;
	font-weight: 600;
}

.pc-live-card-flag {
	flex: 0 0 auto;
}

/* font-size explicit here to match .pc-live-card-player's own 0.85rem --
   reported directly, measured: without it, this inherited the page's
   plain base size (larger than 0.85rem), so a row WITH this element sat
   ~0.65px taller than a not-yet-played row that has no scores at all (no
   .pc-live-card-scores means nothing forcing that taller line height).
   Small on its own, but added up across both rows into a visible
   difference between an unplayed card and a played/LIVE one right next
   to it on the same board. */
.pc-live-card-scores {
	display: flex;
	flex: 0 0 auto;
	gap: 0.3rem;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* Stands where the set scores would be on a match nobody played: "Walkover"
   on the row of the side that conceded, "Cancelled" on both rows when
   neither side turned up. Public, not organizer-only — this is the whole
   explanation of why a decided match shows no real score. */
.pc-live-card-badge {
	flex: 0 0 auto;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--pc-red);
}

/* Neither side turned up, so nobody is being singled out. */
.pc-live-card-badge--cancelled {
	color: var(--pc-light-text);
	background: var(--pc-light-border);
}

/* Holds the winner's side of a walkover open so both rows keep the same
   height and the names stay aligned — the badge belongs to one row only. */
.pc-live-card-badge--empty {
	background: none;
	padding: 0.15rem 0;
}

/* The same two markings for the <table> scoreline and the organizer's own
   score-entry card. Kept here rather than in tournament-single.css because
   the table version also renders on the player profile, which does not load
   that sheet — the badge has to be styled wherever either scoreline is. */
.tico-match-badge {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--pc-red);
}

.tico-match-badge--cancelled {
	color: var(--pc-light-text);
	background: var(--pc-light-border);
}

.pc-live-card-set {
	min-width: 1rem;
	text-align: center;
	color: var(--pc-card-score);
	font-weight: 400;
}

/* Bold is per SET (whichever side's number was actually higher in THAT
   set), never the whole row just because that side won the match overall
   -- same rule the Matches board / Draws groups+KO / bracket diagram all
   already use. */
.pc-live-card-set--winner {
	color: var(--pc-card-score-strong);
	font-weight: 700;
}

.pc-live-card-set--live {
	color: var(--pc-card-score-live);
	font-weight: 700;
}

/* Sets-won tally -- bold number then a divider before the individual
   per-set numbers, so it reads as a sum sitting apart from the breakdown.
   Lives on the tally span's own right edge (the flex gap on
   .pc-live-card-scores already provides the spacing on both sides of it)
   rather than on the container's left edge -- no line between the name
   and the tally, only between the tally and the sets. */
.pc-live-card-set-tally {
	min-width: 0.9rem;
	text-align: center;
	color: var(--pc-card-score-strong);
	font-weight: 700;
	padding-right: 0.4rem;
	border-right: 2px solid var(--pc-card-tally-divider);
}

/* Requested directly: while the match is still LIVE, the sets-won tally
   itself (e.g. the "1" in a 1:0, in-progress) is just as provisional as
   the in-progress set's own score -- more sets could still be played,
   so the tally could still climb. Same rule the OLD <table>-based
   scoreline already applied to its own equivalent cell
   (.tico-match-scoreline--live .tico-match-set--live, tournament-single.css)
   -- carried over here now that the Matches/Draws board's own cards use
   this component instead. */
.pc-live-card-set-tally--live {
	color: var(--pc-card-score-live);
}

/* Winner/loser NAME weight ("Variant C" of 3 mocked-up options,
   confirmed with the user) -- reported directly: the per-set numbers
   already show who won each set, but the player's own NAME looked the
   same either way, so it wasn't quick to see who won the MATCH without
   reading the numbers. Only applied once a match is actually decided
   (playcross_render_match_live_style_scoreline() (PHP) / outcomeClass()
   (assets/js/live-poll.js) both leave it off entirely for a still-live
   or not-yet-played match -- nobody's "lost" yet).

   No color change at all, and the flag stays exactly as it always was
   (2 earlier variants tried both of those, rejected) -- the winner's
   name is bold, the loser's is thinned down BELOW the plain default
   weight (600, every name's own weight before any of this) for a
   clearer contrast between them, same dark color either way.

   The 2nd selector in each rule (".pair-line") is required for the
   stacked-doubles variant specifically -- .pc-live-card-player--stacked
   .pair-line (above) already sets its own explicit font-weight on the
   individual partner lines, which would otherwise win over (not inherit)
   whatever weight this sets on the outer wrapping span alone. */
.pc-live-card-player--winner,
.pc-live-card-player--winner .pair-line {
	font-weight: 700;
}

.pc-live-card-player--loser,
.pc-live-card-player--loser .pair-line {
	font-weight: 400;
}

/* ----------------------------------------------------------------- Table */

.pc-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--pc-font-body);
}

.pc-table th,
.pc-table td {
	text-align: left;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--pc-light-border);
}

.pc-section--dark .pc-table th,
.pc-section--dark .pc-table td {
	border-bottom-color: var(--pc-dark-border);
}

.pc-table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pc-light-text-muted);
}

.pc-section--dark .pc-table th {
	color: var(--pc-dark-text-muted);
}