/* Tournament Detail page: meta bar, tabs and bracket visualization. */

.pc-tournament-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-sm);
	font-family: var(--pc-font-body);
	color: var(--pc-dark-text-muted);
}

/* ------------------------------------------------------------------ Tabs */

.pc-tab-list {
	display: flex;
	gap: var(--pc-space-sm);
	border-bottom: 1px solid var(--pc-light-border);
	margin-bottom: var(--pc-space-md);
	overflow-x: auto;
}

/* Used for both a real <button> (client-side JS toggle, e.g. the Group/KO
   switch inside one Draws category) and a real <a> (actual navigation,
   e.g. the category selector itself) -- display/text-decoration make it
   look identical either way. */
.pc-tab {
	display: inline-block;
	font-family: var(--pc-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 0.85rem 0.25rem;
	color: var(--pc-light-text-muted);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.pc-tab.is-active {
	color: var(--pc-light-text);
	border-bottom-color: var(--pc-red);
}

.pc-tab-panel[hidden] {
	display: none;
}

/* --------------------------------------------------------------- Bracket */

/* Layout engine (see assets/js/bracket.js): round 1 (leftmost
   .pc-bracket-round) renders in plain normal flow -- a simple stacked
   column, gap below, nothing clever. Every later round is positioned by JS
   at the exact measured midpoint between the two round-N cards that feed
   it, then absolutely positioned inside its own (position: relative)
   .pc-bracket-round-matches box, whose height JS also sets to match round
   1's own natural (tallest) height -- every column then shares the exact
   same Y coordinate space, since every column's title band is the same
   height above it. Connector lines are separate elements
   (.pc-bracket-connector-h/-v) positioned from those same measured
   coordinates -- see .pc-bracket-connectors below. None of this is
   guessed via CSS gap/margin math (the previous approach, which relied on
   every adjacent pair of round columns always being exactly
   var(--pc-space-xl) apart -- broke the moment two rounds weren't quite
   the same width, e.g. one round showing per-set scores and the next one
   not). The flex column below is still a real, working fallback if JS
   ever fails to run (imperfectly centered, but functional and never
   visually broken) -- absolutely positioned children are removed from
   that flow the instant JS sets their position, not a hack layered on top
   of it. */
.pc-bracket {
	overflow-x: auto;
	padding: var(--pc-space-xs) var(--pc-space-xs) var(--pc-space-md);
}

/* The actual (possibly wider-than-viewport) scrollable content -- .pc-bracket
   itself is only the scroll VIEWPORT. .pc-bracket-connectors lives inside
   this, not .pc-bracket, specifically so it scrolls together with the
   round columns instead of staying pinned to whatever's currently visible. */
.pc-bracket-inner {
	position: relative;
	display: flex;
	gap: var(--pc-space-xl);
}

/* No min-width -- a round's width is now fully content-driven (see
   .pc-bracket-match below + bracket.js's applyBracketWidth()), which
   explicitly sets this to the widest card actually in the bracket, so an
   arbitrary CSS floor here would only get in the way before JS runs.
   flex-shrink: 0 is now what stops this column from ever shrinking below
   its assigned width when the bracket is wider than the viewport (min-
   width used to do that job too, as a side effect, before it was removed
   above) -- without it, .pc-bracket-inner's default flex-shrink: 1 could
   squeeze every round narrower instead of actually scrolling
   (.pc-bracket's own overflow-x: auto), silently undoing the whole
   "widen to fit, never wrap" point of this section. */
.pc-bracket-round {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

/* Every round's title sits at the very top, all in one row across every
   column -- confirmed with the user, same as the reference site. Every
   column's title band must stay the exact same height for every other
   column's JS-computed Y coordinates to line up correctly (see above). */
.pc-bracket-round-title {
	flex: 0 0 auto;
	margin: 0 0 var(--pc-space-sm);
	padding: 0.7rem 1rem;
	background: var(--pc-dark-bg);
	color: var(--pc-dark-text);
	font-family: var(--pc-font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	border-radius: var(--pc-radius-sm);
}

/* The Final column gets the site's one accent color (--pc-red, already
   used for the active tab underline above) instead of the same uniform
   petrol every other round uses -- confirmed with the user: the moment a
   category is actually decided should read as the visual climax of the
   diagram, not just another column. Color/border only, never
   padding/font-size/height -- every round's title band must stay the
   exact same height for bracket.js's Y-coordinate math to keep every
   column aligned (see the note at the top of this file). The
   :not(--tbd) guard on the match border keeps an undecided final (e.g.
   both semis still in progress) from looking falsely "decided". */
.pc-bracket-round--final .pc-bracket-round-title {
	background: var(--pc-red);
}

.pc-bracket-round--final .pc-bracket-match:not(.pc-bracket-match--tbd) {
	border-left-color: var(--pc-red);
}

/* position: relative -- the containing block bracket.js positions round 2+
   cards against via absolute top/left/right. flex/gap below is the
   normal-flow fallback (round 1's real, permanent layout; every later
   round's fallback until JS overrides it -- see the note above). */
.pc-bracket-round-matches {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-md);
}

/* align-self: flex-start overrides .pc-bracket-round-matches's default
   flex stretch (which would otherwise force every card to its column's
   full width) -- width: max-content instead sizes each card to exactly
   what its own (nowrap, see .pc-bracket-name below) content needs. This is
   both the CSS-only fallback if bracket.js never runs (still never wraps,
   just a differently-sized card per round) AND the natural, unconstrained
   state bracket.js's applyBracketWidth() measures FROM before overriding
   every card to one shared width across the whole bracket (inline
   style -- see that function's own docblock). */
/* padding: 0 -- .pc-bracket-match also carries the shared .pc-card class
   (components.css), which brings its own generic padding: var(--pc-
   space-md) (24px) on all four sides -- the right amount for an ordinary
   content card, but wrong here on every side: it was stacking with
   .pc-bracket-player's own padding below both on top/bottom (previously
   fixed here as a top/bottom-only override -- reported+highlighted on a
   screenshot) AND on left/right, where it combined with that same row
   padding into an un-deliberate ~36px inset nobody had actually designed
   as one number. Zeroed on all four sides now, so .pc-bracket-player's
   own padding (see below) is the SINGLE source of truth for a match
   card's spacing, horizontal and vertical alike -- coordinated
   ("zladené") by construction, confirmed with the user, rather than two
   different rules' paddings accidentally stacking. */
.pc-bracket-match {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	width: max-content;
	border-left: 3px solid var(--pc-dark-bg);
	padding: 0;
}

/* No opacity here (previously 0.6, applied to the whole card) -- it was
   compounding on top of .pc-bracket-name--tbd's already-muted text color
   below, dropping the rendered contrast to roughly 2.6:1 against the
   card's light background (well under the 4.5:1 WCAG AA minimum) on what
   is the single most common card state in a freshly-drawn bracket (every
   round beyond round 1 starts here). The lighter border-color plus the
   name's own italic + muted styling already read as "not decided yet"
   without touching contrast. */
.pc-bracket-match--tbd {
	border-left-color: var(--pc-light-border);
}

/* Padding only (was ALSO min-height: 2.75rem) -- that min-height was
   exactly the "too much air above/below the name" reported: a 1-line
   singles row is much shorter than 2.75rem, so align-items: center just
   padded the shortfall out as empty space above and below instead of
   removing it. Height is now purely whatever the row's own content +
   this padding needs -- singles and doubles rows end up DIFFERENT
   heights (1 line vs 2), which is fine; the ask was to remove wasted
   space, not force every row to an identical height.

   0.75rem uniform on every side (was 8px vertical / 0.75rem horizontal,
   and before that .pc-bracket-match's own .pc-card padding was ALSO
   stacking on top of both -- see .pc-bracket-match above). One value
   now governs the whole card's spacing: the gap before the flag/name and
   after the score on every row, the gap above the first row and below
   the last row (since .pc-bracket-match's own padding is zeroed), and
   the gap between the two rows in the middle. A small, deliberate step
   up from the bare 8px it briefly was, confirmed with the user --
   horizontal and vertical spacing coordinated by construction, not by
   two unrelated rules happening to add up. */
.pc-bracket-player {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	padding: 0.75rem;
	font-family: var(--pc-font-body);
	font-weight: 500;
}

.pc-bracket-player + .pc-bracket-player {
	border-top: 1px solid var(--pc-light-border);
}

/* Sits where the set scores would be, on the row of the side that conceded.
   Smaller than the group-card badge — a bracket cell is a tighter box, and
   .pc-bracket-player already right-aligns whatever follows the name. */
.tico-match-badge--bracket {
	flex: 0 0 auto;
	padding: 0.15rem 0.45rem;
	font-size: 0.7rem;
}

.pc-bracket-player.is-winner {
	font-weight: 700;
	color: var(--pc-light-text);
}

/* white-space: nowrap -- a name/seed must NEVER wrap onto a second line,
   regardless of length (inherited by .pc-pair-line's own block children
   too, covering doubles the same way). The card widening to fit this
   instead (see .pc-bracket-match above + bracket.js) is what actually
   prevents the wasted vertical space wrapping would otherwise cause. */
.pc-bracket-name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
}

.pc-bracket-name--tbd {
	color: var(--pc-light-text-muted);
	font-style: italic;
}

/* A bye's own empty side (playcross_draw_slot_label()) -- deliberately its
   own class, not reusing --tbd: a bye is a PERMANENT, known state (nobody
   will ever occupy this side), not "not decided yet" -- clearly
   distinguished per the bracket rework spec, even though it happens to
   look the same today. */
.pc-bracket-name--bye {
	color: var(--pc-light-text-muted);
	font-style: italic;
}

/* Date/time footer row (playcross_render_draw_bracket()) -- only present
   when TICO_Dashboard::get_scheduled_match_label() actually returns
   something (organizer has both placed AND published this match on the
   schedule); absent entirely otherwise, same convention as
   .pc-draw-match-schedule elsewhere on this page. */
.pc-bracket-match-footer {
	padding: 0.3rem 0.75rem;
	border-top: 1px solid var(--pc-light-border);
}

.pc-bracket-match-date {
	font-size: 0.75rem;
	color: var(--pc-light-text-muted);
}

/* Doubles: each half of the pair on its own line (playcross_draw_slot_label()/
   playcross_render_draw_match_card()'s own $name() closure both emit this),
   e.g.:
     Gabriela Vargová
     Lenka Koščaková [2]
   instead of "Name1 / Name2" on one line -- confirmed with the user. Also
   used inside the Matches list's scoreline/score-entry tables (see
   tournament-single.css), not just the bracket diagram.

   line-height tightened well below the inherited body default (1.6) --
   without this, a doubles match card (2 teams x 2 stacked names = 4
   lines) ends up visibly taller than a singles card (2 players x 1 line
   = 2 lines) sitting right next to it in the same .pc-draw-match-list
   row, exactly what was reported. Doesn't fully equalize the two on its
   own (4 lines of ANY line-height still take more room than 2), but gets
   them close -- combined with the tighter .pc-draw-match padding/gap
   below, which shrinks both card kinds by the same amount and so doesn't
   change the gap between them by itself, but does address the "less
   space above/below the names, from the card edge" part of the ask. */
/* white-space: nowrap + ellipsis -- reported directly, screenshot: a
   real (longer) doubles name pair, e.g. "Kristína Blanárová [5]", was
   wrapping onto a 2nd sub-line inside a Matches-board column narrow
   enough not to fit it on one, which silently broke the whole
   equal-card-height mechanism below (a wrapped row simply grows past
   its 2.4rem slot -- nothing was actually clipping it). The bracket
   diagram never had this problem because its own card WIDENS to fit
   (bracket.js's applyBracketWidth()) instead of truncating -- there's
   no such flexibility in the Matches board's fixed 3-column grid, so
   here a too-long name is truncated with an ellipsis instead, same
   principle every fixed-width name column on the web uses. */
.pc-pair-line {
	display: block;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The singles counterpart to .pc-pair-line above, used only inside
   playcross_render_draw_match_card()'s own $name() closure (Matches
   list cards, not the bracket diagram) -- a plain 1-line singles row
   would otherwise stay visibly shorter than a 2-line doubles team next
   to it in the same match list, even after .pc-pair-line was tightened
   as far as it reasonably could go. Line-height 2.3 (roughly 2x
   .pc-pair-line's own 1.15) makes the two match: a single line at this
   line-height comes out about the same total height as 2 stacked
   .pc-pair-line rows, not by shrinking doubles further but by growing
   singles up to meet it, per the user's own request. */
.pc-single-line {
	display: block;
	line-height: 2.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-bracket-scores {
	display: flex;
	flex: 0 0 auto;
	gap: 0.3rem;
	white-space: nowrap;
}

.pc-bracket-set-win,
.pc-bracket-set {
	min-width: 1.1rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.pc-bracket-set-win {
	font-weight: 700;
}

/* Reported directly (same bug/fix as the Matches board's own
   .tico-match-scoreline table): .pc-bracket-player.is-winner (below) sets
   font-weight: 700 on the whole card side, which every child -- including
   this plain per-set number -- silently inherited, bolding even a set the
   overall match winner actually LOST. font-weight: 400 explicitly here
   breaks that inheritance; .pc-bracket-set--winner (below) is what
   actually decides bold now, per SET rather than per row. */
.pc-bracket-set {
	color: var(--pc-light-text-muted);
	font-weight: 400;
}

/* Set server-side (playcross_render_bracket_score_row()) on whichever
   side's number was actually higher in THAT one set -- independent of
   .is-winner (the overall match winner), same "per set, not per row"
   principle the Matches board's own .tico-match-set-winner already uses. */
.pc-bracket-set--winner {
	font-weight: 700;
}

.pc-bracket-player.is-winner .pc-bracket-set-win,
.pc-bracket-player.is-winner .pc-bracket-set {
	color: var(--pc-light-text);
}

/* A bye's own card in the KO bracket -- the advancing side's name (bold,
   same .is-winner weight the rest of the bracket uses for a decided
   match) plus a small muted note, never a score-entry form since there's
   nothing to play. */
.tico-bracket-bye-note {
	margin: 0 0.75rem 0.4rem;
	font-size: 0.8rem;
}

/* Connector lines -- drawn entirely by assets/js/bracket.js as real DOM
   elements (see .pc-bracket-connector-h/-v below), never CSS pseudo-
   elements/calc() guesses. .pc-bracket-connectors is the single absolutely-
   positioned overlay bracket.js fills with one <div> per line segment; it
   lives inside .pc-bracket-inner (see above) specifically so it scrolls
   together with the round columns. pointer-events: none so it never
   intercepts clicks meant for the cards underneath/around it. */
.pc-bracket-connectors {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pc-bracket-connector-h,
.pc-bracket-connector-v {
	position: absolute;
	/* White, not --pc-light-border -- that grey line read fine drawn
	   directly on the Draws tab's old plain-light background, but now
	   nearly matches that tab's own grey band background (--pc-band-bg)
	   behind it, making the connectors between match cards nearly
	   invisible (flagged directly). White keeps them clearly visible
	   regardless of what's behind them -- this line only ever runs
	   through the gaps between match cards (bracket.js's own measured
	   positioning), never across a card's own white background, so it
	   never needs to blend in there either. */
	border-color: var(--pc-light-surface);
	border-style: solid;
}

.pc-bracket-connector-h {
	border-width: 2px 0 0 0;
}

.pc-bracket-connector-v {
	border-width: 0 2px 0 0;
}

/* "Champion: ..." below the last round, once the final itself is decided
   -- the site's one accent color (matches the Final column's own accent
   above) instead of inherited body text, and a step larger than the
   bracket's other text -- this single line is the highest-stakes moment
   on the whole page and previously had strictly less visual weight than
   an ordinary bolded winner name mid-bracket. Confirmed with the user:
   more expressive than the uniform look every other line here has. */
.tico-bracket-champion {
	margin-top: var(--pc-space-md);
	font-family: var(--pc-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--pc-red);
}