/* Global on purpose, not scoped to .fftt-ec-wrapper: the match detail
   modal (assets/js/frontend.js) is appended straight to document.body, as
   overlays generally should be, so it sits outside .fftt-ec-wrapper in the
   DOM — a wrapper-scoped variable simply isn't inherited there. That left
   every var(--fftt-ec-*) inside .fftt-ec-modal* invalid, and the theme's
   own default button/link styling (a bright yellow, on the one that broke
   visibly) showed through instead. Defining these on :root means any
   element anywhere on the page can use them, regardless of where in the
   DOM it lives. */
:root {
	--fftt-ec-bg: #ffffff;
	--fftt-ec-surface: #ffffff;
	--fftt-ec-surface-2: #fafbff;
	--fftt-ec-text: #1a1a1a;
	--fftt-ec-text-muted: #5a5f73;
	--fftt-ec-text-faint: #8b90a3;
	--fftt-ec-border: #e2e4f0;

	--fftt-ec-accent: #0a1eaf;
	--fftt-ec-accent-tint: #e8eafc;
	--fftt-ec-accent-ink: #ffffff;

	--fftt-ec-lvl-fed: #c62839;   --fftt-ec-lvl-fed-tint: #fbe6e8;
	--fftt-ec-lvl-zone: #0e7c86;  --fftt-ec-lvl-zone-tint: #dff4f5;
	--fftt-ec-lvl-reg: #1f8a4c;   --fftt-ec-lvl-reg-tint: #e3f5ea;
	--fftt-ec-lvl-dep: #b45309;   --fftt-ec-lvl-dep-tint: #fbeee0;
	--fftt-ec-lvl-other: #6b7280; --fftt-ec-lvl-other-tint: #eef0f3;

	--fftt-ec-shadow: 0 1px 2px rgba(10, 20, 50, 0.06);
}

.fftt-ec-wrapper {
	background: var(--fftt-ec-bg);
	color: var(--fftt-ec-text);
	/* Every size in this stylesheet is in em, relative to whatever
	   font-size cascades down to this wrapper — themes don't all agree on
	   16px for html/body (one in production runs 18px), which was quietly
	   scaling every em-based measurement here up by 12.5%: same 360px
	   popover, ~12.5% bigger text inside it, so it wrapped more and looked
	   narrower than in a plain-16px preview. Pinning it here makes the
	   component's own sizing independent of the page it's embedded in. */
	font-size: 16px;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-variant-numeric: tabular-nums;
	margin: 1.5em 0 3em;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

/* Same gap as the wrapper itself: this is just a nested toggle group
   (list view vs. team detail), not meant to collapse the spacing between
   its own toolbar / legend / épreuves. */
#fftt-ec-list-view {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}
/* `display: flex` from author CSS always beats the browser's own
   `[hidden] { display: none }` default, no matter the specificity — without
   this, JS setting `.hidden = true` stops actually hiding the element, and
   the team detail view ends up rendered underneath the still-visible list. */
#fftt-ec-list-view[hidden],
.fftt-ec-detail[hidden] {
	display: none;
}

.fftt-ec-tabs {
	display: flex;
	gap: 1.4em;
	border-bottom: 1px solid var(--fftt-ec-border);
}
/* `.fftt-ec-wrapper` prefixed onto every tab-button rule here (and onto the
   other <button>s further down: the nav/close buttons) to out-specificity
   the theme's own global `button { … }` skin — a plain `.fftt-ec-tab-btn`
   selector alone was losing to it in production, rendering the inactive
   tab as the theme's default rounded/colored button instead of plain text. */
.fftt-ec-wrapper .fftt-ec-tab-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 600;
	line-height: normal;
	color: var(--fftt-ec-text-faint);
	padding: 0.7em 0.1em;
	margin: 0 0 -1px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.fftt-ec-wrapper .fftt-ec-tab-btn:hover { color: var(--fftt-ec-text); }
.fftt-ec-wrapper .fftt-ec-tab-btn:focus-visible { outline: 2px solid var(--fftt-ec-accent); outline-offset: 2px; }
.fftt-ec-wrapper .fftt-ec-tab-btn[aria-selected="true"] {
	color: var(--fftt-ec-accent);
	border-bottom-color: var(--fftt-ec-accent);
}

.fftt-ec-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}
/* Same reminder as list-view/detail above: pair any unconditional `display`
   with an explicit [hidden] override, or JS toggling `.hidden` stops working. */
.fftt-ec-tab-panel[hidden] {
	display: none;
}

.fftt-ec-cal-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	background: #e3e7f8;
	border: 1px solid var(--fftt-ec-border);
	border-radius: 10px;
	padding: 0.7em 1em;
}
.fftt-ec-cal-nav {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
}
.fftt-ec-wrapper .fftt-ec-cal-today-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-size: 0.85em;
	font-weight: 600;
	line-height: normal;
	color: var(--fftt-ec-accent);
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	padding: 0.5em 0.9em;
	cursor: pointer;
}
.fftt-ec-wrapper .fftt-ec-cal-today-btn:hover { background: var(--fftt-ec-surface-2); }
.fftt-ec-wrapper .fftt-ec-cal-arrow-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 1.1em;
	line-height: 1;
	box-shadow: none;
	color: var(--fftt-ec-text);
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	cursor: pointer;
}
.fftt-ec-wrapper .fftt-ec-cal-arrow-btn:hover { background: var(--fftt-ec-surface-2); }
.fftt-ec-wrapper .fftt-ec-cal-today-btn:focus-visible,
.fftt-ec-wrapper .fftt-ec-cal-arrow-btn:focus-visible { outline: 2px solid var(--fftt-ec-accent); outline-offset: 2px; }
.fftt-ec-cal-month-select {
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fftt-ec-text);
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	padding: 0.5em 2em 0.5em 0.8em;
}

/* Team filter: a custom listbox instead of a native <select> — an <option>
   can't render the épreuve's colored crest circle, only plain text. */
.fftt-ec-cal-team-picker {
	position: relative;
}
.fftt-ec-wrapper .fftt-ec-cal-team-picker-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-width: 220px;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: normal;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	color: var(--fftt-ec-text);
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	padding: 0.5em 0.8em;
	cursor: pointer;
}
.fftt-ec-wrapper .fftt-ec-cal-team-picker-btn:hover { background: var(--fftt-ec-surface-2); }
.fftt-ec-wrapper .fftt-ec-cal-team-picker-btn:focus-visible { outline: 2px solid var(--fftt-ec-accent); outline-offset: 2px; }
.fftt-ec-wrapper .fftt-ec-cal-team-picker-btn[aria-expanded="true"] { border-color: var(--fftt-ec-accent); }
.fftt-ec-cal-team-picker-btn-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fftt-ec-cal-team-picker-caret {
	font-size: 0.7em;
	color: var(--fftt-ec-text-faint);
	flex-shrink: 0;
	margin-left: auto;
}
.fftt-ec-cal-team-picker-panel {
	position: absolute;
	z-index: 25;
	top: calc(100% + 4px);
	left: 0;
	min-width: 240px;
	max-width: min(320px, 90vw);
	max-height: 320px;
	overflow-y: auto;
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(10, 20, 50, 0.14);
	padding: 0.4em;
}
.fftt-ec-cal-team-picker-panel[hidden] { display: none; }
.fftt-ec-cal-team-picker-group-label {
	margin: 0.6em 0.5em 0.2em;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fftt-ec-text-faint);
}
.fftt-ec-cal-team-picker-group-label:first-child { margin-top: 0.2em; }
.fftt-ec-wrapper .fftt-ec-cal-team-picker-option {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 0.6em;
	border-radius: 6px;
	font-size: 0.9em;
	color: var(--fftt-ec-text);
	cursor: pointer;
}
.fftt-ec-wrapper .fftt-ec-cal-team-picker-option:hover,
.fftt-ec-wrapper .fftt-ec-cal-team-picker-option--active {
	background: var(--fftt-ec-accent-tint);
}
.fftt-ec-wrapper .fftt-ec-cal-team-picker-option--active {
	font-weight: 600;
	color: var(--fftt-ec-accent);
}
.fftt-ec-cal-team-picker-option--all { font-weight: 600; }
.fftt-ec-cal-team-picker-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fftt-ec-cal-team-picker-crest {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fftt-ec-accent);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68em;
	font-weight: 700;
	flex-shrink: 0;
}

.fftt-ec-cal-filters {
	display: flex;
	gap: 1.2em;
	flex-wrap: wrap;
}
.fftt-ec-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.88em;
	font-weight: 500;
	color: var(--fftt-ec-text);
	cursor: pointer;
}
.fftt-ec-checkbox input {
	accent-color: var(--fftt-ec-accent);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* Month grid, Monday-first — same idea as Outlook/Google Calendar's month
   view: a 7-column week grid, small colored chips per match (colored by
   the team's level, same palette as the legend), today and the clicked day
   both get their own highlight. */
.fftt-ec-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.fftt-ec-cal-grid-head {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fftt-ec-text-faint);
	text-align: center;
	padding: 0.4em 0 0.5em;
}
.fftt-ec-cal-cell {
	/* min-width: 0 overrides the browser's default "never shrink below the
	   content's own width" on a grid item — without it, one cell with a long
	   chip can quietly widen its whole column past the other 6, breaking the
	   equal 7-column layout `1fr` is supposed to guarantee. */
	min-width: 0;
	min-height: 92px;
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	padding: 0.35em;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.fftt-ec-cal-cell--out {
	background: var(--fftt-ec-surface-2);
}
.fftt-ec-cal-cell--out .fftt-ec-cal-cell-num {
	color: var(--fftt-ec-text-faint);
}
/* Declared before --today/--selected so a holiday that's also today (or
   clicked) still shows the accent highlight instead of just the gray. */
.fftt-ec-cal-cell--holiday {
	background: #ececef;
}
.fftt-ec-cal-cell--today {
	border-color: var(--fftt-ec-accent);
	box-shadow: inset 0 0 0 1px var(--fftt-ec-accent);
	background: var(--fftt-ec-accent-tint);
}
.fftt-ec-cal-cell--selected {
	box-shadow: inset 0 0 0 2px var(--fftt-ec-accent);
}
.fftt-ec-cal-cell--has-matches {
	cursor: pointer;
}
.fftt-ec-cal-cell-num {
	font-size: 0.78em;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.fftt-ec-cal-cell-num--ferie {
	color: #c5221f;
}
.fftt-ec-cal-chips {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	overflow: hidden;
	min-width: 0;
}
.fftt-ec-cal-chip {
	font-size: 0.66em;
	font-weight: 600;
	line-height: 1.3;
	padding: 0.15em 0.35em;
	border-radius: 4px;
	min-width: 0;
}
/* The time and the once-per-chip house/plane icon share a line, icon
   pushed to the right — home vs away chips are already told apart by
   fill vs outline, so the icon isn't repeated on every opponent line. */
.fftt-ec-cal-chip-time-row {
	display: flex;
	align-items: baseline;
	gap: 0.3em;
}
.fftt-ec-cal-chip-time {
	font-weight: 700;
}
/* V/D/= result badge, right before the score — a fixed win/loss/draw color
   regardless of the chip's own level color, so the outcome reads at a
   glance without having to parse the score itself. */
.fftt-ec-cal-chip-result {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	flex-shrink: 0;
}
.fftt-ec-cal-chip-result--win { background: #1a7f37; }
.fftt-ec-cal-chip-result--loss { background: #b42318; }
.fftt-ec-cal-chip-result--draw { background: #4b5563; }
.fftt-ec-cal-chip-icon {
	margin-left: auto;
	flex-shrink: 0;
}
.fftt-ec-cal-chip-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Day popover: a "tooltip" of matches anchored near the clicked cell.
   The wrap must stay positioned so the popover's inline left/top (computed
   in JS from the cell's own bounding rect) land in the right place. */
.fftt-ec-cal-grid-wrap {
	position: relative;
}
.fftt-ec-cal-backdrop {
	position: fixed;
	inset: 0;
	background: transparent;
	z-index: 20;
}
.fftt-ec-cal-backdrop[hidden] {
	display: none;
}
.fftt-ec-cal-popover {
	position: absolute;
	z-index: 30;
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(10, 20, 50, 0.18);
	padding: 0.9em 1em 1.1em;
}
.fftt-ec-cal-popover[hidden] {
	display: none;
}
/* max-width: none on both variants defeats a common theme reset
   (something like `.entry-content * { max-width: 100% }`) that otherwise
   caps this absolutely/fixed-positioned popover to its narrow parent
   column's width instead of the size these rules actually ask for —
   .fftt-ec-wrapper is prefixed on both for the specificity to win. */
.fftt-ec-wrapper .fftt-ec-cal-popover--anchored {
	/* !important: a specificity-only override (via the .fftt-ec-wrapper
	   prefix) wasn't enough in production — something in the theme's CSS
	   is still constraining this to a narrower width, so width/max-width
	   are forced here rather than guessed at again. */
	width: min(360px, 90vw) !important;
	max-width: none !important;
	max-height: 540px;
	overflow-y: auto;
}
.fftt-ec-wrapper .fftt-ec-cal-popover-close {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 1.1em;
	box-shadow: none;
	color: var(--fftt-ec-text-faint);
	background: var(--fftt-ec-surface-2);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 50%;
	cursor: pointer;
}
.fftt-ec-wrapper .fftt-ec-cal-popover-close:hover {
	background: var(--fftt-ec-border);
}
.fftt-ec-wrapper .fftt-ec-cal-popover-close:focus-visible {
	outline: 2px solid var(--fftt-ec-accent);
	outline-offset: 2px;
}
.fftt-ec-cal-popover .fftt-ec-detail-section-title {
	padding-right: 1.6em;
}
.fftt-ec-match-group + .fftt-ec-match-group {
	margin-top: 0.9em;
}
.fftt-ec-match-group-title {
	margin: 0 0 0.3em;
	font-size: 0.76em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fftt-ec-text-faint);
}
/* Same chip look as the month grid (filled = domicile, outlined =
   extérieur, colored by level), just sized up for the popover's own room
   and stacked one per group instead of packed into a single day cell. */
.fftt-ec-cal-chip--modal {
	display: block;
	font-size: 0.85em;
	padding: 0.55em 0.7em;
	line-height: 1.35;
}
.fftt-ec-cal-chip--modal + .fftt-ec-cal-chip--modal {
	margin-top: 0.5em;
}
.fftt-ec-cal-chip-match {
	font-weight: 700;
	overflow-wrap: anywhere;
}
.fftt-ec-cal-chip-match:not(:first-of-type) {
	margin-top: 0.5em;
}
.fftt-ec-cal-chip-division {
	font-weight: 500;
	font-size: 0.92em;
	opacity: 0.85;
	overflow-wrap: anywhere;
}
.fftt-ec-club-banner {
	display: flex;
	align-items: center;
	gap: 0.9em;
	background: var(--fftt-ec-accent);
	color: var(--fftt-ec-accent-ink);
	border-radius: 10px;
	padding: 1.1em 1.3em;
	box-shadow: var(--fftt-ec-shadow);
}
.fftt-ec-club-crest {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95em;
	flex-shrink: 0;
}
.fftt-ec-club-name {
	font-weight: 600;
	font-size: 1.2em;
	letter-spacing: 0.01em;
}
.fftt-ec-club-meta {
	font-size: 0.82em;
	opacity: 0.85;
	margin-top: 0.15em;
}

.fftt-ec-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	background: #e3e7f8;
	border: 1px solid var(--fftt-ec-border);
	border-radius: 10px;
	padding: 0.7em 1em;
}
.fftt-ec-field-group { display: flex; flex-direction: column; gap: 0.3em; }
.fftt-ec-field-group label {
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fftt-ec-text-faint);
}
.fftt-ec-field-group select {
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--fftt-ec-text);
	background: var(--fftt-ec-surface-2);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	padding: 0.5em 2em 0.5em 0.8em;
}
.fftt-ec-field-group select:focus-visible { outline: 2px solid var(--fftt-ec-accent); outline-offset: 2px; }

.fftt-ec-phase-summary {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--fftt-ec-text);
	white-space: nowrap;
}

.fftt-ec-legend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	flex-wrap: wrap;
}
.fftt-ec-legend {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
	font-size: 0.78em;
}
.fftt-ec-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 999px;
	padding: 0.35em 0.8em 0.35em 0.55em;
	color: var(--fftt-ec-text-muted);
}
.fftt-ec-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fftt-ec-cache-note {
	font-size: 0.74em;
	color: var(--fftt-ec-text-faint);
	white-space: nowrap;
}

#fftt-ec-epreuves {
	display: flex;
	flex-direction: column;
	gap: 1.7em;
}

.fftt-ec-epreuve {
	border-radius: 10px;
	box-shadow: var(--fftt-ec-shadow);
	overflow: hidden;
}
.fftt-ec-epreuve-head {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 1em 1.25em;
	background: #0a1eaf;
}
.fftt-ec-epreuve-crest {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.72em;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}
.fftt-ec-epreuve-title {
	font-weight: 600;
	font-size: 1.05em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
}
.fftt-ec-epreuve-count {
	font-size: 0.78em;
	color: #ffffff;
	opacity: 0.8;
	white-space: nowrap;
	margin-top: 0.15em;
}

.fftt-ec-epreuve-body {
	background: var(--fftt-ec-accent-tint);
	border-radius: 0 0 10px 10px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fftt-ec-level-block { background: var(--fftt-ec-surface); border-radius: 6px; overflow: hidden; }
.fftt-ec-level-head {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.9em;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.fftt-ec-level-block--fed   .fftt-ec-level-head { background: var(--fftt-ec-lvl-fed-tint);   color: var(--fftt-ec-lvl-fed); }
.fftt-ec-level-block--zone  .fftt-ec-level-head { background: var(--fftt-ec-lvl-zone-tint);  color: var(--fftt-ec-lvl-zone); }
.fftt-ec-level-block--reg   .fftt-ec-level-head { background: var(--fftt-ec-lvl-reg-tint);   color: var(--fftt-ec-lvl-reg); }
.fftt-ec-level-block--dep   .fftt-ec-level-head { background: var(--fftt-ec-lvl-dep-tint);   color: var(--fftt-ec-lvl-dep); }
.fftt-ec-level-block--other .fftt-ec-level-head { background: var(--fftt-ec-lvl-other-tint); color: var(--fftt-ec-lvl-other); }

.fftt-ec-level-block--fed   { --fftt-ec-lt-accent: var(--fftt-ec-lvl-fed);   --fftt-ec-lt-tint: var(--fftt-ec-lvl-fed-tint); }
.fftt-ec-level-block--zone  { --fftt-ec-lt-accent: var(--fftt-ec-lvl-zone);  --fftt-ec-lt-tint: var(--fftt-ec-lvl-zone-tint); }
.fftt-ec-level-block--reg   { --fftt-ec-lt-accent: var(--fftt-ec-lvl-reg);   --fftt-ec-lt-tint: var(--fftt-ec-lvl-reg-tint); }
.fftt-ec-level-block--dep   { --fftt-ec-lt-accent: var(--fftt-ec-lvl-dep);   --fftt-ec-lt-tint: var(--fftt-ec-lvl-dep-tint); }
.fftt-ec-level-block--other { --fftt-ec-lt-accent: var(--fftt-ec-lvl-other); --fftt-ec-lt-tint: var(--fftt-ec-lvl-other-tint); }

.fftt-ec-level-table-scroll { overflow-x: auto; }
table.fftt-ec-level-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	font-size: 0.88em;
	table-layout: fixed;
}
.fftt-ec-level-table th, .fftt-ec-level-table td {
	padding: 0.6em 0.9em;
	text-align: left;
	border: none;
	border-bottom: 1px solid var(--fftt-ec-border);
	overflow-wrap: anywhere;
}
.fftt-ec-level-table th:nth-child(1), .fftt-ec-level-table td:nth-child(1) { width: 34%; }
.fftt-ec-level-table th:nth-child(2), .fftt-ec-level-table td:nth-child(2) { width: 34%; }
.fftt-ec-level-table th:nth-child(3), .fftt-ec-level-table td:nth-child(3) { width: 14%; }
.fftt-ec-level-table th:nth-child(4), .fftt-ec-level-table td:nth-child(4) { width: 9%; text-align: center; }
.fftt-ec-level-table th:nth-child(5), .fftt-ec-level-table td:nth-child(5) { width: 9%; text-align: center; }
.fftt-ec-level-table thead th {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fftt-ec-lt-accent);
	background: var(--fftt-ec-lt-tint);
	border: none;
	border-bottom: 2px solid var(--fftt-ec-lt-accent);
}
.fftt-ec-level-table tbody tr:last-child td { border: none; }
.fftt-ec-level-table tbody tr:hover td { background: var(--fftt-ec-surface-2); }
.fftt-ec-team-name { font-weight: 500; }
.fftt-ec-team-division { color: var(--fftt-ec-text-muted); }
.fftt-ec-team-poule { font-size: 0.85em; color: var(--fftt-ec-text-muted); white-space: nowrap; }
.fftt-ec-team-mj { color: var(--fftt-ec-text-muted); }

.fftt-ec-empty { font-style: italic; color: #666; padding: 1em 1.25em; }
.fftt-ec-loading {
	font-style: italic;
	color: var(--fftt-ec-text-faint);
	padding: 3em 1.25em;
	text-align: center;
}
/* Before JS populates them, the tabs/toolbar/legend would otherwise flash
   empty (no options in the Phase/Épreuve selects, no legend dots) — the
   shell hides them and shows only the centered loading message until
   renderAll() runs and drops this class. */
.fftt-ec-wrapper.is-loading .fftt-ec-tabs,
.fftt-ec-wrapper.is-loading .fftt-ec-toolbar,
.fftt-ec-wrapper.is-loading .fftt-ec-legend-row {
	display: none;
}

/* A team row opens its classement/calendrier — already resolved
   server-side, so the click needs no extra request. */
.fftt-ec-team-row { cursor: pointer; }
.fftt-ec-team-row:hover td, .fftt-ec-team-row:focus-visible td { background: var(--fftt-ec-lt-tint); }
.fftt-ec-team-row:focus-visible { outline: 2px solid var(--fftt-ec-lt-accent); outline-offset: -2px; }

/* ================= team detail: classement + calendrier ================= */

.fftt-ec-detail {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

.fftt-ec-back-btn {
	align-self: flex-start;
	font-family: inherit;
	font-size: 0.88em;
	font-weight: 600;
	color: var(--fftt-ec-accent);
	background: var(--fftt-ec-accent-tint);
	border: none;
	border-radius: 999px;
	padding: 0.55em 1.1em;
	cursor: pointer;
}
.fftt-ec-back-btn:hover { filter: brightness(0.97); }
.fftt-ec-back-btn:focus-visible { outline: 2px solid var(--fftt-ec-accent); outline-offset: 2px; }

/* Same exact construction as the reference division table in wordpress-pro:
   a solid-accent banner (top corners only) directly above a tinted "frame"
   (bottom corners only) whose 8px padding reveals as a thin accent-tint
   margin around the white table — no club logos, everything else pixel-for-
   pixel the same padding/sizes/weights as the original .fftt-cp-* rules. */
.fftt-ec-detail-head {
	background: var(--fftt-ec-accent);
	border-radius: 8px 8px 0 0;
	padding: 0.9em 1.25em;
	box-shadow: var(--fftt-ec-shadow);
}
.fftt-ec-detail-title {
	color: #ffffff;
	font-weight: 600;
	font-size: 1.15em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.fftt-ec-detail-sub {
	color: #ffffff;
	font-size: 0.78em;
	letter-spacing: 0.01em;
	opacity: 0.85;
	margin-top: 0.2em;
}

.fftt-ec-detail-section-title {
	margin: 0 0 0.5em;
	font-size: 1em;
	font-weight: 600;
	color: var(--fftt-ec-accent);
}

.fftt-ec-poule-round + .fftt-ec-poule-round {
	margin-top: 1.2em;
}
.fftt-ec-poule-round-title {
	margin: 0 0 0.5em;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--fftt-ec-text-muted);
}

.fftt-ec-classement-body {
	padding: 8px;
	border-radius: 0 0 10px 10px;
	background: var(--fftt-ec-accent-tint);
	box-shadow: var(--fftt-ec-shadow);
}
.fftt-ec-classement-scroll {
	overflow-x: auto;
	border-radius: 6px;
	background: #ffffff;
}
table.fftt-ec-classement-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	font-size: 0.92em;
}
.fftt-ec-classement-table th, .fftt-ec-classement-table td {
	padding: 0.65em 0.85em;
	text-align: center;
	border: none;
	border-bottom: 1px solid #eceef7;
}
.fftt-ec-classement-table th:nth-child(2), .fftt-ec-classement-table td:nth-child(2) { text-align: left; }
.fftt-ec-classement-table thead th {
	background: var(--fftt-ec-accent-tint);
	color: var(--fftt-ec-accent);
	font-weight: 600;
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border: none;
	border-bottom: 2px solid var(--fftt-ec-accent);
}
.fftt-ec-classement-table tbody tr:last-child td { border: none; }
.fftt-ec-classement-table tbody tr:nth-child(even) { background: #fafbff; }
.fftt-ec-classement-row--self {
	background: var(--fftt-ec-accent-tint) !important;
	font-weight: 600;
	box-shadow: inset 4px 0 0 var(--fftt-ec-accent);
}
.fftt-ec-classement-table .fftt-ec-team-name { font-weight: 500; }

/* Mobile "+" toggle (columns beyond Pos/Clubs/Pts), hidden by default —
   same construction as the reference division table. */
.fftt-ec-toggle-th,
.fftt-ec-row-toggle-cell {
	display: none;
}
.fftt-ec-row-toggle {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--fftt-ec-accent);
	background: #ffffff;
	color: var(--fftt-ec-accent);
	font-weight: 700;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.fftt-ec-row-detail-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	gap: 0.5em;
	margin: 0.4em 0;
	padding: 0;
}
.fftt-ec-row-detail-list > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15em;
	background: #f6f7fc;
	border-radius: 6px;
	padding: 0.4em 0.3em;
}
.fftt-ec-row-detail-list dt {
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #777;
	font-weight: 600;
}
.fftt-ec-row-detail-list dd {
	margin: 0;
	font-weight: 600;
}

@media (min-width: 641px) {
	.fftt-ec-row-detail { display: none !important; }
}

@media (max-width: 640px) {
	.fftt-ec-col-extra { display: none; }

	.fftt-ec-toggle-th,
	.fftt-ec-row-toggle-cell {
		display: table-cell;
		text-align: center;
	}

	.fftt-ec-classement-table th,
	.fftt-ec-classement-table td {
		padding: 0.55em 0.5em;
		font-size: 0.88em;
	}

	.fftt-ec-classement-table td:nth-child(2) {
		text-align: left;
	}

	.fftt-ec-row-detail td {
		border-bottom: none;
		padding: 0 0.6em 0.6em;
	}
}

.fftt-ec-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75em;
}
.fftt-ec-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5em 0.75em;
	border-radius: 8px;
	padding: 1.6em 0.9em 0.85em;
	background: var(--fftt-ec-accent-tint);
	box-shadow: var(--fftt-ec-shadow);
}
.fftt-ec-card--played { background: #eef0f3; }
.fftt-ec-card--clickable { cursor: pointer; }
.fftt-ec-card--clickable:hover { box-shadow: 0 0 0 2px var(--fftt-ec-accent) inset; }
.fftt-ec-card--clickable:focus-visible { outline: 2px solid var(--fftt-ec-accent); outline-offset: 2px; }
.fftt-ec-card-detail-icon {
	position: absolute;
	top: 0.55em;
	right: 0.7em;
	color: var(--fftt-ec-accent);
	opacity: 0.6;
}
.fftt-ec-card-journee {
	position: absolute;
	top: 0.55em;
	left: 0.9em;
	font-size: 0.7em;
	font-weight: 700;
	color: var(--fftt-ec-accent);
	background: var(--fftt-ec-accent-tint);
	border-radius: 4px;
	padding: 0.1em 0.5em;
}
.fftt-ec-card-team { display: flex; align-items: center; min-width: 0; }
.fftt-ec-card-team--home { justify-content: flex-end; text-align: right; }
.fftt-ec-card-team--away { justify-content: flex-start; text-align: left; }
.fftt-ec-card-team-name { font-weight: 500; font-size: 0.92em; overflow-wrap: anywhere; }
.fftt-ec-card-team--selected .fftt-ec-card-team-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fftt-ec-card-team--winner .fftt-ec-card-team-name { font-weight: 700; }
.fftt-ec-card-team--win .fftt-ec-card-team-name { color: #1a7f37; }
.fftt-ec-card-team--loss .fftt-ec-card-team-name { color: #c5221f; font-weight: 400; }
.fftt-ec-card-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	font-size: 0.78em;
	color: #555;
	white-space: nowrap;
}
.fftt-ec-date, .fftt-ec-time { font-weight: 500; }
.fftt-ec-score { font-weight: 700; font-size: 1.15em; color: var(--fftt-ec-accent); }
.fftt-ec-badge { padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.78em; font-weight: 600; text-transform: uppercase; }
.fftt-ec-badge--home { background: var(--fftt-ec-accent); color: #fff; }
.fftt-ec-badge--away { background: #eceef7; color: #444; }

@media (max-width: 640px) {
	.fftt-ec-level-table th, .fftt-ec-level-table td { padding: 0.5em 0.5em; font-size: 0.85em; }

	/* Each filter (and the count) on its own full-width line, and the
	   select itself capped to that width — a long épreuve label as the
	   selected option otherwise pushes the <select> past the viewport. */
	.fftt-ec-toolbar,
	.fftt-ec-cal-toolbar { flex-direction: column; align-items: stretch; }
	.fftt-ec-field-group { width: 100%; min-width: 0; }
	.fftt-ec-field-group select { width: 100%; max-width: 100%; box-sizing: border-box; }
	.fftt-ec-phase-summary { width: 100%; }

	.fftt-ec-cards { grid-template-columns: 1fr; }
	.fftt-ec-card { grid-template-columns: 1fr; text-align: center; }
	.fftt-ec-card-team--home, .fftt-ec-card-team--away { justify-content: center; text-align: center; }
	.fftt-ec-card-meta { flex-direction: row; justify-content: center; flex-wrap: wrap; }

	/* Today/prev/next stay together on their own line; the month and team
	   filters each get a full-width line of their own below — squeezed
	   onto a shared line (the old `flex:1` split) left the month select
	   showing a clipped "Septem…" and gave the team filter no room for a
	   team's full name. */
	.fftt-ec-cal-nav { width: 100%; }
	.fftt-ec-cal-month-select,
	.fftt-ec-cal-team-picker { flex: 1 1 100%; min-width: 0; }
	.fftt-ec-wrapper .fftt-ec-cal-team-picker-btn { max-width: none; width: 100%; }
	.fftt-ec-cal-team-picker-panel { left: 0; right: 0; max-width: none; }
	.fftt-ec-cal-grid { gap: 2px; }
	.fftt-ec-cal-grid-head { font-size: 0.6em; padding: 0.3em 0; }
	.fftt-ec-cal-cell { min-height: 56px; padding: 0.2em; border-radius: 4px; }
	.fftt-ec-cal-cell-num { font-size: 0.68em; }
	/* Scoped to the grid's own chips (inside .fftt-ec-cal-chips) — without
	   this, the same class name on the popover's much bigger chips
	   (.fftt-ec-cal-chip--modal) got squashed to this 6px dot too, since a
	   plain .fftt-ec-cal-chip selector here carries the same specificity
	   and comes later in the cascade: their time/match/division text no
	   longer had room and spilled over each other. */
	.fftt-ec-cal-chips .fftt-ec-cal-chip { padding: 0; height: 6px; border-radius: 3px; }
	.fftt-ec-cal-chips .fftt-ec-cal-chip-time-row,
	.fftt-ec-cal-chips .fftt-ec-cal-chip-title { display: none; }

	/* A tooltip pinned to a thumb-sized cell doesn't work on a phone —
	   it becomes a bottom sheet instead, with a dimmed scrim behind it. */
	.fftt-ec-cal-backdrop { background: rgba(15, 23, 42, 0.35); }
	.fftt-ec-wrapper .fftt-ec-cal-popover--sheet {
		position: fixed;
		left: 0.6em;
		right: 0.6em;
		bottom: 0.6em;
		top: auto;
		width: auto !important;
		max-width: none !important;
		max-height: 88vh;
		overflow-y: auto;
	}
}

/* ================= "Prochains évènements" (homepage widget) ================= */

.fftt-ec-upcoming-empty {
	font-style: italic;
	color: var(--fftt-ec-text-faint);
	padding: 0.5em 0;
}
/* Legend doubles as a level filter here (the Calendrier tab's own legend
   stays a plain, non-interactive list — these rules are scoped to this
   widget on purpose): a click hides that level's chips instead of
   removing a checkbox tick, so the struck-through label itself carries
   the "off" state. */
.fftt-ec-upcoming .fftt-ec-legend {
	margin-bottom: 0.9em;
}
.fftt-ec-upcoming .fftt-ec-legend-item {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.fftt-ec-upcoming .fftt-ec-legend-item:hover {
	background: var(--fftt-ec-border);
}
.fftt-ec-upcoming .fftt-ec-legend-item:focus-visible {
	outline: 2px solid var(--fftt-ec-accent);
	outline-offset: 2px;
}
.fftt-ec-upcoming .fftt-ec-legend-item--off {
	text-decoration: line-through;
	opacity: 0.55;
}
/* Level colors are set here, keyed off `data-level`, rather than as an
   inline `style="color:var(--fftt-ec-lvl-…)"` on the element itself: a
   WordPress install that runs shortcode/block output through
   wp_kses_post() (many themes and security plugins do) can silently drop
   a `color` declared with var() from an inline style attribute — CSS in
   this stylesheet is never touched by that filter. The Calendrier tab's
   own chips render straight to the DOM from JS, bypassing PHP content
   filtering entirely, which is why they were never affected. */
.fftt-ec-upcoming .fftt-ec-legend-item[data-level="fed"] .fftt-ec-legend-dot { background: var(--fftt-ec-lvl-fed); }
.fftt-ec-upcoming .fftt-ec-legend-item[data-level="zone"] .fftt-ec-legend-dot { background: var(--fftt-ec-lvl-zone); }
.fftt-ec-upcoming .fftt-ec-legend-item[data-level="reg"] .fftt-ec-legend-dot { background: var(--fftt-ec-lvl-reg); }
.fftt-ec-upcoming .fftt-ec-legend-item[data-level="dep"] .fftt-ec-legend-dot { background: var(--fftt-ec-lvl-dep); }
.fftt-ec-upcoming .fftt-ec-cal-chip[data-level="fed"] { background: var(--fftt-ec-lvl-fed-tint); color: var(--fftt-ec-lvl-fed); }
.fftt-ec-upcoming .fftt-ec-cal-chip[data-level="zone"] { background: var(--fftt-ec-lvl-zone-tint); color: var(--fftt-ec-lvl-zone); }
.fftt-ec-upcoming .fftt-ec-cal-chip[data-level="reg"] { background: var(--fftt-ec-lvl-reg-tint); color: var(--fftt-ec-lvl-reg); }
.fftt-ec-upcoming .fftt-ec-cal-chip[data-level="dep"] { background: var(--fftt-ec-lvl-dep-tint); color: var(--fftt-ec-lvl-dep); }
.fftt-ec-upcoming .fftt-ec-cal-chip[data-level="other"] { background: var(--fftt-ec-lvl-other-tint); color: var(--fftt-ec-lvl-other); }
.fftt-ec-upcoming-carousel-wrap {
	position: relative;
	margin-bottom: 1.2em;
}
/* A single row, entirely JS-driven (assets/js/upcoming.js): it sets each
   card's width inline so exactly `perView` cards fill the row exactly (no
   partial card ever peeks at the edge), and moves the row itself via
   scrollTo() — overflow stays hidden rather than auto so the visitor can't
   drag/wheel it to a position between cards, and there's never a vertical
   scrollbar either. */
.fftt-ec-upcoming-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.7em;
	overflow-x: hidden;
	overflow-y: hidden;
}
/* The card itself is just the Calendrier tab's own day popover, restyled
   to sit in a fixed-width carousel slot instead of floating beside a
   clicked cell: same "day label + colored match chips" markup and CSS
   classes (.fftt-ec-detail-section-title, .fftt-ec-cal-chip--modal…), just
   without the close button (nothing to dismiss here) and, since every
   event here is already known to be "à domicile", without the
   Domicile/Extérieur heading or the house/plane icon the popover repeats
   per side. No border — the card reads as one solid tinted block, with
   the day title as its own edge-to-edge colored band (overflow: hidden
   clips that band's corners to the card's own radius); unlike the
   Calendrier tab's own popover title, this override only applies here. */
.fftt-ec-upcoming-card {
	flex: 0 0 auto;
	width: 250px; /* pre-JS fallback; upcoming.js overrides this per breakpoint */
	background: var(--fftt-ec-accent-tint);
	border: none;
	border-radius: 10px;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.fftt-ec-upcoming .fftt-ec-detail-section-title {
	margin: 0;
	background: var(--fftt-ec-accent);
	color: #fff;
	padding: 0.5em 1em;
}
.fftt-ec-upcoming-card-body {
	padding: 0.9em 1em 1.1em;
}
.fftt-ec-upcoming-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.6em;
}
.fftt-ec-upcoming-dot-btn {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--fftt-ec-border);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.fftt-ec-upcoming-dot-btn:hover {
	background: var(--fftt-ec-text-muted);
}
.fftt-ec-upcoming-dot-btn--active {
	background: var(--fftt-ec-accent);
	transform: scale(1.3);
}

/* ================= Match detail modal ================= */
/* Opened from a played match's score card (.fftt-ec-card--clickable) —
   same request/response shape and layout as the "wordpress-pro" module's
   own match modal, ported over rather than reusing its CSS file since the
   two plugins load independently; this plugin has no per-club logos, so
   the header is team names only (no crest images). */

.fftt-ec-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 34, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	z-index: 100000;
}
/* Header + close button live outside the scrolling area (flex column,
   header pinned via flex-shrink: 0, only the body scrolls) rather than
   being scrolled-past content with position: sticky bolted on — simpler,
   and the close button (absolutely positioned against the whole modal,
   which no longer scrolls itself) stays put for free. */
.fftt-ec-modal {
	position: relative;
	background: var(--fftt-ec-surface);
	border-radius: 10px;
	width: 100%;
	max-width: 710px;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Same reasoning as .fftt-ec-wrapper's own font-size pin: this modal is
	   appended to document.body, outside .fftt-ec-wrapper, so it doesn't
	   inherit that pin either — without its own, every em-based size here
	   would quietly scale with whatever base font-size the theme happens
	   to set on body (verified in production: not always 16px). */
	font-size: 16px;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--fftt-ec-text);
}
/* !important throughout: the modal is appended to document.body, outside
   any theme content wrapper, so a theme rule targeting plain <button>
   elements (often more specific than our single class, e.g.
   ".entry-content button") can otherwise win and paint its own
   background/padding straight through this reset — confirmed in
   production (a bare yellow button chrome bleeding into both this close
   button and the set-detail toggle below). */
.fftt-ec-modal-close {
	position: absolute;
	top: 0.6em;
	right: 0.7em;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0;
	border: none !important;
	border-radius: 50%;
	background: var(--fftt-ec-surface-2) !important;
	box-shadow: none !important;
	color: #333;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
	appearance: none;
	-webkit-appearance: none;
}
.fftt-ec-modal-close:hover {
	background: var(--fftt-ec-border) !important;
}
.fftt-ec-modal-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75em;
	background: var(--fftt-ec-accent-tint);
	padding: 1.6em 1em 1.2em;
	border-radius: 10px 10px 0 0;
	flex-shrink: 0;
}
.fftt-ec-modal-team {
	font-weight: 600;
	font-size: 0.95em;
	overflow-wrap: anywhere;
	min-width: 0;
}
.fftt-ec-modal-team--a { text-align: right; }
.fftt-ec-modal-team--b { text-align: left; }
.fftt-ec-modal-score {
	font-weight: 700;
	font-size: 1.3em;
	color: var(--fftt-ec-accent);
	white-space: nowrap;
}
.fftt-ec-modal-body {
	padding: 1.2em 1.4em 1.5em;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}
.fftt-ec-modal-loading,
.fftt-ec-modal-empty {
	font-style: italic;
	color: var(--fftt-ec-text-muted);
	text-align: center;
	margin: 1em 0;
}
.fftt-ec-modal-heading {
	margin: 0 0 0.6em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fftt-ec-accent);
}
.fftt-ec-modal-section + .fftt-ec-modal-section {
	margin-top: 1.4em;
}
.fftt-ec-modal-players,
.fftt-ec-modal-games {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}
.fftt-ec-modal-player-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0.6em;
	background: var(--fftt-ec-surface-2);
	border-radius: 6px;
	padding: 0.5em 0.75em;
	font-size: 0.9em;
}
.fftt-ec-modal-game {
	background: var(--fftt-ec-surface-2);
	border-radius: 6px;
	padding: 0.5em 0.75em;
	font-size: 0.9em;
}
.fftt-ec-modal-game-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto;
	align-items: center;
	gap: 0.6em;
}
.fftt-ec-modal-game-row--clickable { cursor: pointer; }
.fftt-ec-modal-game-row--clickable:hover .fftt-ec-modal-game-toggle {
	color: var(--fftt-ec-accent);
}
.fftt-ec-modal-game-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #999;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	flex-shrink: 0;
	transition: transform 0.15s ease, color 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}
.fftt-ec-modal-game-toggle--open {
	color: var(--fftt-ec-accent);
	transform: rotate(180deg);
}
.fftt-ec-modal-game-detail {
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px solid var(--fftt-ec-border);
}
.fftt-ec-modal-game-detail[hidden] { display: none; }
.fftt-ec-modal-sets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em;
}
.fftt-ec-modal-set {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	min-width: 42px;
}
.fftt-ec-modal-set-number {
	font-size: 0.75em;
	font-weight: 600;
	color: #999;
}
.fftt-ec-modal-set-scores {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 6px;
	padding: 0.3em 0.65em;
	min-width: 34px;
}
.fftt-ec-modal-set-score { font-size: 0.9em; padding: 0.15em 0; }
.fftt-ec-modal-set-score--winner { font-weight: 700; color: var(--fftt-ec-accent); }
.fftt-ec-modal-set-score--empty { color: #ccc; }
.fftt-ec-modal-set-divider {
	width: 100%;
	height: 1px;
	background: var(--fftt-ec-border);
}
/* A quiet "A1 / X1" reminder of which row is which, shaped like a set card
   (same number-spacer + box structure) so it lines up as a row header to
   the left of set 1, but unboxed and muted so it doesn't read as a set. */
.fftt-ec-modal-sets-legend .fftt-ec-modal-set-number { visibility: hidden; }
.fftt-ec-modal-sets-legend-box {
	background: transparent;
	border-color: transparent;
	padding: 0.3em 0.3em;
}
.fftt-ec-modal-sets-legend-item {
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #aaa;
	padding: 0.15em 0;
}
.fftt-ec-modal-sets-legend .fftt-ec-modal-set-divider { background: #ccc; }
/* The A-side label (A1, A2…) always hugs the row's left edge and the X-side
   label (X1, X2…) always hugs its right edge — a fixed vertical line for the
   labels no matter how long each player's name is (the name grows toward
   the middle instead of pushing the label around). */
.fftt-ec-modal-player-a,
.fftt-ec-modal-game-player--a {
	display: flex;
	align-items: center;
	gap: 0.35em;
	justify-content: flex-start;
	text-align: left;
}
.fftt-ec-modal-player-b,
.fftt-ec-modal-game-player--b {
	display: flex;
	align-items: center;
	gap: 0.35em;
	justify-content: flex-end;
	text-align: right;
}
/* A double game's row stacks its 2 players one per line instead of joining
   them with "et" on one line — same label+name shape per line as a single
   player (reuses .fftt-ec-modal-game-player--a/--b), just wrapped in a
   column instead of packed into the row directly. */
.fftt-ec-modal-game-player-double {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.fftt-ec-modal-game-player-double--a { align-items: flex-start; }
.fftt-ec-modal-game-player-double--b { align-items: flex-end; }
.fftt-ec-modal-player-label {
	display: inline-block;
	width: 28px;
	background: var(--fftt-ec-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.75em;
	border-radius: 4px;
	padding: 0.1em 0;
	text-align: center;
	box-sizing: border-box;
	flex-shrink: 0;
}
/* Same "A1" numbering as in singles, just recolored orange — the only cue
   that this player is part of a double rather than a separate labeling
   scheme. */
.fftt-ec-modal-player-label--double {
	background: #e07b1f;
}
/* Same orange for the score and the winning side's name/set-scores, so the
   whole double row (and its expanded set detail) reads as one color story
   instead of switching back to blue partway through. */
.fftt-ec-modal-game--double .fftt-ec-modal-game-score,
.fftt-ec-modal-game--double .fftt-ec-modal-game-player--winner,
.fftt-ec-modal-game--double .fftt-ec-modal-set-score--winner {
	color: #e07b1f;
}
.fftt-ec-modal-player-info {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.fftt-ec-modal-player-a .fftt-ec-modal-player-info { align-items: flex-start; }
.fftt-ec-modal-player-b .fftt-ec-modal-player-info { align-items: flex-end; }
.fftt-ec-modal-player-name { font-size: 1.05em; font-weight: 600; color: var(--fftt-ec-text); }
.fftt-ec-modal-player-rank { font-size: 0.75em; font-weight: 400; color: var(--fftt-ec-text-muted); }
.fftt-ec-modal-game-player--winner { font-weight: 700; color: var(--fftt-ec-accent); }
.fftt-ec-modal-game-score {
	font-weight: 700;
	color: var(--fftt-ec-accent);
	text-align: center;
	white-space: nowrap;
}

/* ---- Mobile view of the match detail ----
   The desktop layout (pairings side by side, accordion rows) doesn't fit a
   phone, so frontend.js builds a second, dedicated view into the same modal
   body — each team's players grouped in one card, then one card per game
   with both players and their 5 set boxes always visible, the winner marked
   with a check. Hidden by default; the ≤ 480px block below swaps it in for
   the desktop view. */
.fftt-ec-modal-view--mobile { display: none; }
.fftt-ec-mm-count {
	margin: 0 0 0.9em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75em;
	font-weight: 600;
	color: var(--fftt-ec-text-faint);
}
.fftt-ec-mm-team {
	list-style: none;
	margin: 0 0 0.8em;
	padding: 0;
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 10px;
	box-shadow: var(--fftt-ec-shadow);
}
.fftt-ec-mm-player {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.6em 0.8em;
}
.fftt-ec-mm-player + .fftt-ec-mm-player { border-top: 1px solid var(--fftt-ec-border); }
.fftt-ec-mm-pinfo {
	min-width: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.fftt-ec-mm-pname { font-weight: 700; font-size: 0.95em; }
.fftt-ec-mm-prank { font-size: 0.75em; color: var(--fftt-ec-text-muted); }
.fftt-ec-mm-game {
	background: var(--fftt-ec-surface);
	border: 1px solid var(--fftt-ec-border);
	border-radius: 10px;
	box-shadow: var(--fftt-ec-shadow);
}
.fftt-ec-mm-game + .fftt-ec-mm-game { margin-top: 0.6em; }
.fftt-ec-mm-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 0.6em;
}
.fftt-ec-mm-side + .fftt-ec-mm-side { border-top: 1px solid var(--fftt-ec-border); }
.fftt-ec-mm-names {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
	font-size: 0.82em;
	line-height: 1.3;
	overflow-wrap: break-word;
}
.fftt-ec-mm-side--winner .fftt-ec-mm-names { font-weight: 700; }
.fftt-ec-mm-name { min-width: 0; }
.fftt-ec-mm-sets { display: flex; gap: 3px; }
.fftt-ec-mm-set {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(22px, 6.2vw, 28px);
	height: clamp(22px, 6.2vw, 28px);
	border-radius: 6px;
	background: #f1f3f9;
	color: var(--fftt-ec-text-faint);
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
}
.fftt-ec-mm-set--won {
	background: var(--fftt-ec-accent-tint);
	color: var(--fftt-ec-accent);
	font-weight: 700;
}
.fftt-ec-mm-set--empty {
	background: none;
	color: #c4c8d8;
}
/* Doubles keep the same orange as the desktop view for their winning sets,
   so they still read as a double at a glance. */
.fftt-ec-mm-game--double .fftt-ec-mm-set--won {
	background: #fdebd9;
	color: #e07b1f;
}

@media (max-width: 480px) {
	.fftt-ec-modal-view--desktop { display: none; }
	.fftt-ec-modal-view--mobile { display: block; }
	.fftt-ec-modal-body {
		background: #f2f3fb;
		padding: 1em 0.6em 1.2em;
	}
	.fftt-ec-modal-header {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.fftt-ec-modal-team--a,
	.fftt-ec-modal-team--b {
		text-align: center;
	}
	.fftt-ec-modal-score { text-align: center; }
	.fftt-ec-modal-player-row,
	.fftt-ec-modal-game-row {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 0.2em;
	}
	.fftt-ec-modal-player-a,
	.fftt-ec-modal-player-b,
	.fftt-ec-modal-game-player--a,
	.fftt-ec-modal-game-player--b {
		justify-content: center;
		text-align: center;
	}
	.fftt-ec-modal-player-a .fftt-ec-modal-player-info,
	.fftt-ec-modal-player-b .fftt-ec-modal-player-info {
		align-items: center;
	}
	.fftt-ec-modal-game-player-double--a,
	.fftt-ec-modal-game-player-double--b {
		align-items: center;
	}
}