/* ===========================================================================
   Shared leaderboard components (rankings, battlegrounds, Chicken Fight, WoE reports)
   ===========================================================================
   LOADING: not loaded by the shell on its own. A module that uses it asks for it with the
   page-meta key 'css' in themes/freya/main/meta/<module>.php, for the whole module or for
   one action:
       '*'       => array('css' => array('leaderboard')),
       'session' => array('css' => array('leaderboard')),
   fy_boot.php then loads it in front of the module's own page stylesheet.

   PODIUM (top three; DOM order 1, 2, 3; shown 2-1-3 from 720px, winner raised;
   on phones the winner is full width with second and third side by side):
       <ol class="fy-lb-podium">
         <li class="fy-lb-spot fy-lb-spot--1">          (--2, --3)
           <div class="fy-lb-card">
             <span class="fy-rank fy-rank--1 fy-lb-medal"><span class="fy-sr">Rank 1</span>[crown icon]</span>
             <h3 class="fy-lb-card__title">Name or link</h3>
             <p class="fy-lb-card__sub">Class or other subtitle</p>
             <p class="fy-lb-card__guild"><img class="fy-lb-emblem" width="24" height="24" alt=""><span>Guild</span></p>
             <dl class="fy-lb-card__stats">
               <div class="is-key"><dt>Label</dt><dd>Main number</dd></div>
               <div><dt>Label</dt><dd>Number</dd></div>
             </dl>
           </div>
         </li>
       </ol>

   BOARD (ranked rows; a real <table> laid out with CSS grid; phones get two-line cards):
       <section class="fy-lb-board" id="..." data-fy-lb-offset="3" data-fy-nowrap>
         <header class="fy-lb-board__head"><h2 class="fy-lb-board__title">[icon]Ranks 4 to 500</h2>
           <p class="fy-lb-board__meta">Ranked by ...</p></header>
         <table class="fy-lb-table my-columns">      set --lb-cols on my-columns (grid-template-columns)
           <thead><tr><th scope="col">Rank</th>... <th class="is-num">...</th></tr></thead>
           <tbody class="fy-lb-chunk" style="--rows:97">   one row group per 100 ranks
             <tr>
               <td class="fy-lb-r"><span class="fy-rank">4</span></td>    rank, left column on phones
               <td class="fy-lb-main"><span class="fy-lb-name">Name</span></td>  first line on phones
               <td>detail</td> <td class="is-num">detail</td>          second line on phones, joined by dots
               <td class="fy-lb-metric is-num">main number</td>          first line, right, on phones
             </tr>
           </tbody>
         </table>
         [show-more bar, see below]
       </section>
     - Keep the main cell before the detail cells and the metric cell last in DOM order.
     - Phone labels for detail cells: add them in the module stylesheet with
       .my-columns td:nth-child(n)::before { content: "\00B7\00A0\00A0 Lv\00A0"; } (dot + label).
     - .fy-lb-table--norank: a board without a rank column.
     - Optional line control on phones (opt-in; boards without these classes are unchanged):
       .fy-lb-table--split on the table + .fy-lb-break on one detail cell: that cell and the
       cells after it start a third line (no dot in front of the break cell; give its label
       no dot either). .fy-lb-fit on a detail cell: it shrinks with an ellipsis instead of
       pushing the rest of its line onto a new line (put the text in .fy-lb-clip or
       .fy-lb-guild). Both keep wrapped lines from starting with a stray dot.
     - data-fy-nowrap keeps freya.js from wrapping the table in .fy-table-wrap.
     - Row groups use content-visibility:auto, so full-page screenshots may show empty
       space below the fold; scroll or force-render them before capturing.

   SHOW MORE (optional, for boards with more than one row group):
       <div class="fy-lb-more" data-fy-lb-more hidden><p class="fy-lb-more__count" aria-live="polite"></p>
         <button type="button" class="fy-btn fy-btn--violet fy-btn--sm" data-fy-lb-next>...</button>
         <button type="button" class="fy-btn fy-btn--quiet fy-btn--sm" data-fy-lb-all>...</button></div>
     The script lives in themes/freya/ranking/_helpers.php ($fyRkMoreScript). Without JavaScript
     every row group shows; with it the first group shows and the others get hidden="until-found"
     (find-in-page still finds names in them in Chromium) or hidden elsewhere.

   OTHER PARTS: .fy-lb-emblem (24px guild emblem, pixelated), .fy-lb-guild (emblem + name),
   .fy-lb-name, .fy-lb-sub, .fy-lb-clip (ellipsis), .fy-lb-pair (two stacked numbers,
   "a / b" on phones), .fy-lb-none (muted placeholder), .fy-lb-empty (on a .fy-empty block),
   .fy-lb-related (row of links to other leaderboards), tone helpers .fy-lb-t-gold|violet|
   pink|sky|mint|rose|amber|muted.

   1. Podium (top three)      3. Board table (rows, phone cards)
   2. Board shell             4. Show more, notes and small parts */

/* 1. Podium ----------------------------------------------------------------- */
.fy-lb-podium {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "first first" "second third";
	gap: var(--sp-6) var(--sp-3);
	margin: var(--sp-8) 0 var(--sp-8);
	padding: 0;
	list-style: none;
}
.fy-lb-spot { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.fy-lb-spot + .fy-lb-spot { margin-top: 0; }
.fy-lb-spot--1 { grid-area: first; }
.fy-lb-spot--2 { grid-area: second; }
.fy-lb-spot--3 { grid-area: third; }

.fy-lb-card {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: calc(var(--sp-6) + 6px) var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
	text-align: center;
}
.fy-lb-spot--1 .fy-lb-card {
	border-color: rgba(255, 214, 109, .34);
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(255, 196, 63, .13), transparent 62%),
		var(--grad-card), var(--surface);
}
.fy-lb-spot--1 .fy-lb-card::before {
	/* a second, inner gold line: the storybook frame of the winner */
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 214, 109, .13);
	border-radius: calc(var(--r-lg) - 5px);
	pointer-events: none;
}
.fy-lb-spot--2 .fy-lb-card { border-color: rgba(222, 216, 245, .2); }
.fy-lb-spot--3 .fy-lb-card { border-color: rgba(255, 175, 120, .22); }

.fy-lb-medal.fy-rank {
	position: absolute;
	top: -21px;
	left: 50%;
	min-width: 42px;
	height: 42px;
	border-radius: 14px;
	font-size: 1.15rem;
	transform: translateX(-50%);
	box-shadow: 0 0 0 5px var(--bg);
}
.fy-lb-spot--1 .fy-lb-medal.fy-rank { box-shadow: 0 0 0 5px var(--bg), var(--glow-gold); }
.fy-lb-medal .fy-i { width: 1.25em; height: 1.25em; }

.fy-lb-card .fy-lb-card__title {
	max-width: 100%;
	margin: var(--sp-2) 0 0;
	overflow: hidden;
	color: var(--text);
	font: 600 1.12rem/1.25 var(--font-display);
	overflow-wrap: anywhere;
}
.fy-lb-card__title a { color: inherit; text-decoration: none; }
.fy-lb-card__title a:hover { color: var(--gold-200); }
.fy-lb-spot--1 .fy-lb-card .fy-lb-card__title { font-size: 1.35rem; }
.fy-lb-card__sub { margin: 0; color: var(--violet-200); font-size: .9rem; font-weight: 700; }
.fy-lb-card__guild {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	max-width: 100%;
	margin: .15rem 0 0;
	color: var(--text-3);
	font-size: .86rem;
	font-weight: 700;
}
.fy-lb-card__guild span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-lb-card__guild a { color: inherit; text-decoration: none; }
.fy-lb-card__guild a:hover, .fy-lb-card__sub a:hover { color: var(--gold-200); }
.fy-lb-card__sub a { color: inherit; text-decoration: none; }
.fy-lb-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-self: stretch;
	margin: var(--sp-4) 0 0;
}
/* tiles share a row when they fit; a tile that wraps alone takes the full width */
.fy-lb-card__stats > div {
	flex: 1 1 108px;
	min-width: 0;
	padding: .5rem .45rem .55rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface-sunken);
}
.fy-lb-card__stats dt { margin: 0 0 .2rem; color: var(--text-3); font: 800 .64rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.fy-lb-card__stats dd { margin: 0; color: var(--text); font: 600 1rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.fy-lb-card__stats .is-key dd { color: var(--gold-200); }
.fy-lb-spot--1 .fy-lb-card__stats .is-key dd { color: var(--gold-300); }

@media (max-width: 719.98px) {
	/* phones: the winner on top, second and third side by side */
	.fy-lb-spot--2 .fy-lb-card, .fy-lb-spot--3 .fy-lb-card { padding-inline: var(--sp-3); }
	.fy-lb-spot--2 .fy-lb-card__title, .fy-lb-spot--3 .fy-lb-card__title { font-size: 1rem; }
	.fy-lb-spot--2 .fy-lb-card__stats, .fy-lb-spot--3 .fy-lb-card__stats { flex-direction: column; gap: 0; margin-top: var(--sp-3); }
	.fy-lb-spot--2 .fy-lb-card__stats > div, .fy-lb-spot--3 .fy-lb-card__stats > div {
		flex: none;
		padding: .45rem .2rem;
		border: 0;
		border-top: 1px solid var(--line);
		border-radius: 0;
		background: none;
	}
	.fy-lb-spot--2 .fy-lb-card__stats dd, .fy-lb-spot--3 .fy-lb-card__stats dd { font-size: .95rem; }
}

@media (min-width: 720px) {
	.fy-lb-podium {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas: "second first third";
		gap: var(--sp-5);
		margin-top: var(--sp-10);
	}
	/* the winner stands higher: second and third start lower, all three end on one line,
	   whatever the length of their content */
	.fy-lb-podium { align-items: stretch; }
	.fy-lb-podium > .fy-lb-spot--2 { margin-top: 2.25rem; }
	.fy-lb-podium > .fy-lb-spot--3 { margin-top: 3.25rem; }
	.fy-lb-spot--1 .fy-lb-card { padding-top: calc(var(--sp-8) + 10px); padding-bottom: var(--sp-6); }
	.fy-lb-spot--1 .fy-lb-medal.fy-rank { top: -26px; min-width: 52px; height: 52px; border-radius: 17px; font-size: 1.3rem; }
}
@media (min-width: 720px) and (max-width: 1099.98px) {
	/* tablets: three narrow cards, so the numbers become label and value lines
	   instead of tiles stacked into tall boxes */
	.fy-lb-card__stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--sp-3); }
	.fy-lb-card__stats > div {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: .5rem;
		padding: .5rem .2rem;
		border: 0;
		border-top: 1px solid var(--line);
		border-radius: 0;
		background: none;
	}
	.fy-lb-card__stats dt { margin: 0; text-align: left; }
	.fy-lb-card__stats dd { text-align: right; }
}

@media print {
	.fy-lb-chunk, .fy-lb-chunk[hidden] { display: block !important; content-visibility: visible !important; }
	.fy-lb-more { display: none !important; }
}

/* 2. Board shell ------------------------------------------------------------ */
.fy-lb-board {
	margin: 0 0 var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}
.fy-lb-board__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(140, 87, 248, .09), rgba(140, 87, 248, .02));
}
.fy-lb-board .fy-lb-board__title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.2rem; }
.fy-lb-board__title .fy-i { color: var(--gold-300); }
.fy-lb-board .fy-lb-board__meta { margin: 0; color: var(--text-3); font-size: .86rem; font-weight: 700; }

/* 3. Board table -------------------------------------------------------------
   A real <table> for meaning, laid out with CSS grid so long boards can be split
   into row groups that skip rendering while off screen (content-visibility).
   Each table sets --lb-cols (desktop columns) in its module stylesheet. */
.fy-lb-table {
	display: block;
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--text-2);
	font-size: .94rem;
}
.fy-lb-table thead, .fy-lb-table tbody { display: block; }
.fy-lb-table tr {
	display: grid;
	grid-template-columns: var(--lb-cols, 56px minmax(0, 1fr));
	align-items: center;
	column-gap: var(--sp-4);
	min-height: 56px;
	padding: .45rem var(--sp-5);
	border-top: 1px solid var(--line);
}
.fy-lb-table thead tr { min-height: 0; padding-block: .65rem; border-top: 0; background: rgba(140, 87, 248, .06); }
.fy-lb-table th {
	min-width: 0;
	padding: 0;
	color: var(--text-3);
	font: 800 .7rem/1.3 var(--font-body);
	letter-spacing: .1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.fy-lb-table td { min-width: 0; padding: 0; }
.fy-lb-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.fy-lb-table .is-num, .fy-lb-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.fy-lb-table .is-center { text-align: center; }
.fy-lb-table a { color: var(--violet-200); font-weight: 800; text-decoration: none; }
.fy-lb-table a:hover { color: var(--gold-300); }

.fy-lb-chunk:not([hidden]) { content-visibility: auto; contain-intrinsic-size: auto calc(var(--rows, 100) * 57px); }
/* Collapsed groups use hidden="until-found" (where supported) so find-in-page still finds a
   name in them; freya.css hides every [hidden] with display:none, which would stop that. */
.fy-lb-chunk[hidden="until-found"] { display: block !important; }

.fy-lb-r .fy-rank { min-width: 32px; height: 32px; border-radius: 10px; font-size: .86rem; }
.fy-lb-main { display: flex; align-items: center; gap: .6rem; }
.fy-lb-name { display: block; overflow: hidden; color: var(--text); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.fy-lb-name a { color: inherit; }
.fy-lb-name a:hover { color: var(--gold-300); }
.fy-lb-sub { display: block; overflow: hidden; color: var(--text-3); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.fy-lb-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-lb-guild { display: flex; align-items: center; gap: .5rem; color: var(--text-2); }
.fy-lb-guild > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-lb-emblem { flex: none; width: 24px; height: 24px; border-radius: 4px; background: rgba(255, 255, 255, .05); image-rendering: pixelated; }
.fy-lb-none { color: var(--text-4); }
.fy-lb-metric { color: var(--gold-200); font: 600 1rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.fy-lb-strong { color: var(--text); font-weight: 800; }
.fy-lb-pair { display: block; line-height: 1.25; white-space: nowrap; }
.fy-lb-pair + .fy-lb-pair { color: var(--text-3); font-size: .84rem; }

/* Tablets: tighter gaps so names, classes and guilds keep more of their width; long
   column labels wrap onto two lines instead of running into the next column. */
@media (min-width: 720px) and (max-width: 1099.98px) {
	.fy-lb-table { font-size: .9rem; }
	.fy-lb-table tr { column-gap: .65rem; padding-inline: var(--sp-4); }
	.fy-lb-table th { white-space: normal; }
	.fy-lb-r .fy-rank { min-width: 30px; height: 30px; }
}

/* Phones: every row becomes a small two-line card. The rank sits on the left,
   the name and the main number on the first line, the details below. */
@media (max-width: 719.98px) {
	.fy-lb-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.fy-lb-table tr {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: .15rem .55rem;
		min-height: 64px;
		padding: .7rem var(--sp-4) .7rem 3.6rem;
	}
	.fy-lb-table--norank tr { padding-left: var(--sp-4); }
	.fy-lb-table tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
	.fy-lb-table td { order: 3; color: var(--text-3); font-size: .82rem; line-height: 1.35; }
	.fy-lb-table td.fy-lb-r { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); }
	.fy-lb-table td.fy-lb-main { order: 1; flex: 1 1 0; color: var(--text-2); font-size: .98rem; }
	.fy-lb-table td.fy-lb-metric { order: 1; flex: none; margin-left: auto; font-size: .98rem; text-align: right; }
	.fy-lb-table .is-num { text-align: left; }
	.fy-lb-table td.fy-lb-metric.is-num { text-align: right; }
	/* a dot between the details on the second line; :where() keeps these rules weak so the
	   module stylesheets can add labels such as "Lv" with a plain nth-child selector */
	.fy-lb-table :where(td:not(.fy-lb-r, .fy-lb-main, .fy-lb-metric))::before { content: "\00B7\00A0\00A0"; color: var(--text-4); }
	.fy-lb-table :where(td.fy-lb-main + td)::before { content: none; }
	.fy-lb-table td::before, .fy-lb-table td::after { color: var(--text-4); }
	.fy-lb-table .fy-lb-sub { display: none; }
	.fy-lb-table .fy-lb-clip { display: inline; }
	/* the guild name sets the baseline and the emblem sits centred next to it, so names
	   with and without an emblem line up with the text around them */
	.fy-lb-table .fy-lb-guild { display: inline-flex; align-items: baseline; gap: .35rem; vertical-align: baseline; color: var(--text-3); }
	.fy-lb-table .fy-lb-guild > :not(span), .fy-lb-table .fy-lb-guild > span:empty { align-self: center; }
	.fy-lb-table .fy-lb-emblem { width: 18px; height: 18px; }
	.fy-lb-table .fy-lb-pair { display: inline; }
	.fy-lb-table .fy-lb-pair + .fy-lb-pair { color: inherit; font-size: inherit; }
	.fy-lb-table .fy-lb-pair + .fy-lb-pair::before { content: " / "; }
	.fy-lb-chunk:not([hidden]) { contain-intrinsic-size: auto calc(var(--rows, 100) * 65px); }
	.fy-lb-board__head { padding-inline: var(--sp-4); }

	/* Opt-in line control (see the usage notes at the top of this file). */
	.fy-lb-table--split tr::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
	.fy-lb-table--split td.fy-lb-break, .fy-lb-table--split td.fy-lb-break ~ td { order: 5; }
	.fy-lb-table--split td.fy-lb-break ~ td.fy-lb-metric { order: 1; }
	.fy-lb-table :where(td.fy-lb-break)::before { content: none; }
	.fy-lb-table td.fy-lb-fit {
		display: flex;
		flex: 1 1 0;
		align-items: baseline;
		min-width: 0;
		max-width: max-content;
		white-space: nowrap;
	}
	.fy-lb-table td.fy-lb-fit::before { flex: none; }
	.fy-lb-table td.fy-lb-fit > * { min-width: 0; }
	.fy-lb-table td.fy-lb-fit .fy-lb-guild { display: flex; }
	.fy-lb-table td.fy-lb-fit .fy-lb-guild > span,
	.fy-lb-table td.fy-lb-fit .fy-lb-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 4. Show more, notes and small parts ---------------------------------------- */
.fy-lb-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border-top: 1px solid var(--line);
	color: var(--text-3);
	font-size: .9rem;
	font-weight: 700;
	text-align: center;
}
.fy-lb-more[hidden] { display: none; }
.fy-lb-more__count { flex-basis: 100%; margin: 0; }
.fy-lb-table tr[tabindex="-1"]:focus { outline: 2px solid var(--focus); outline-offset: -2px; }

.fy-lb-empty { margin: var(--sp-6) 0; }

.fy-lb-related {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: var(--sp-10) 0 0;
	padding: var(--sp-5) 0 0;
	border-top: 1px solid var(--line);
	/* the rule spans the whole column: it fades out at both ends instead of stopping on a hard edge over the site
	   background art (wide screens) */
	border-image: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) 1;
	color: var(--text-3);
	font-size: .9rem;
	font-weight: 700;
}
/* --text-3, not --text-4: the label starts at the column edge, where the site background art (wide screens) is
   only partly darkened and the dimmer colour drops below 4.5:1 */
.fy-lb-related__label { margin-right: .35rem; color: var(--text-3); font: 800 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-lb-related a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 40px;
	padding: 0 .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	color: var(--text-2);
	text-decoration: none;
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.fy-lb-related a:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .12); color: var(--text); }
.fy-lb-related .fy-i { width: 1.05em; height: 1.05em; color: var(--gold-300); }

/* Tone helpers for numbers */
.fy-lb-t-gold { color: var(--gold-200); }
.fy-lb-t-violet { color: var(--violet-200); }
.fy-lb-t-pink { color: var(--petal-300); }
.fy-lb-t-sky { color: var(--sky-300); }
.fy-lb-t-mint { color: var(--mint-300); }
.fy-lb-t-rose { color: var(--rose-300); }
.fy-lb-t-amber { color: var(--amber-300); }
.fy-lb-t-muted { color: var(--text-3); }