/* =====================================================================
   WRRC 2026 Copenhagen — UltimateLIVE desktop results page
   Override stylesheet. Load AFTER ../template/iframe/stylesheet.css

   Palette taken from worldathletics.org/…/copenhagen26 CSS variables:
     primary   #ff873c  orange      (calls to action, active state)
     secondary #69d7e1  cyan        (links, focus, hover)
     tertiary  #a5fa64  lime        (highlights, favourites)
     quaternary#bd94ff  purple      (spare accent)
     dark      #262626 / #1e1e1e / #0e0e0e
     light     #f0f0f0 / #dedede / #818181 / #707070

   !important is used only where the page carries inline styles or
   JS-set styles that would otherwise win (menubar background,
   leaderboard time header, #PAGECONTENT height, footer cells).

   Deployment: link this file AFTER stylesheet.css, e.g.
     <link rel="stylesheet" href="../template/iframe/stylesheet.css">
     <link rel="stylesheet" href="../template/iframe/wrrc26-ultimatelive.css">
   If you instead concatenate it onto the end of stylesheet.css, the
   @import below is ignored (it must be the first rule in a file) —
   then move the @import to the top of stylesheet.css, or drop it and
   the fallback fonts (Helvetica/Arial) are used.

   Tested against the live page structure on 2026-09-16: leaderboard,
   results, search (quick + advanced), favourites, participant popup.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');

:root {
	--wa-orange:        #ff873c;
	--wa-orange-dark:   #e86f22;
	--wa-cyan:          #69d7e1;
	--wa-lime:          #a5fa64;
	--wa-purple:        #bd94ff;

	--wa-orange-tint:   #fbd1bb;
	--wa-cyan-tint:     #c2e9ed;
	--wa-lime-tint:     #e3f7d2;
	--wa-purple-tint:   #dfd0fa;

	--wa-black:         #0e0e0e;
	--wa-dark:          #1e1e1e;
	--wa-charcoal:      #262626;
	--wa-charcoal-2:    #2c2c2c;
	--wa-grey:          #818181;
	--wa-grey-text:     #707070;
	--wa-line:          #dedede;
	--wa-light:         #f0f0f0;
	--wa-white:         #ffffff;

	--wa-font:          "Barlow", "World Athletics", Helvetica, Arial, sans-serif;

	--wa-header-h:      56px;   /* top bar   */
	--wa-footer-h:      28px;   /* bottom bar */
}

/* ---------------------------------------------------------------------
   Structure — layout rules carried over from the standard
   template/iframe/stylesheet.css, so this file works on its own
   (the per-event stylesheet.php serves ONLY this file).
   ------------------------------------------------------------------- */
body, html {
	margin: 0;
	height: 100%;
	overflow: hidden;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}
#PAGECONTENT { overflow: auto; }

.loading,
.participant {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.leaderboard_table,
.leaderboard_table_results,
.search_result_table,
.myfavourites_result_table,
.scroller_table,
.participant_table,
.participant_table_panel {
	width: 100%;
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
.search_navmenu,
.search_menu,
.search_table,
.leaderboard_divider,
.leaderboard_segmenthdr,
.scroller_list,
.scroller_startbutton,
.scroller_stopbutton,
.other_table,
.box { width: 100%; }

.participant_table_data { border: 0; }
.search_label { text-align: left; }

#PARTICIPANTINFO {
	width: 750px;
	height: 500px;
	overflow: auto;
	border-spacing: 0;
	border-collapse: collapse;
}

.tracker {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.languageflags { border: none; }
.banner { border: 0; }

.credits { vertical-align: middle; }
.result_hdr, .result_odd, .result_even, .result_hover, .result_highlighted,
.leaderboard_timehdr, .leaderboard_timehdr_hover, .leaderboard_timehdr_active,
.leaderboard_segmenthdr, .leaderboard_newsegment { vertical-align: middle; }

/* ---------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */
body, html {
	font-family: var(--wa-font);
	font-size: 13px;
	color: var(--wa-charcoal);
	background: var(--wa-charcoal);
	-webkit-font-smoothing: antialiased;
}

#main_screen table {
	font-family: var(--wa-font);
}

/* Page content area: kill the watermark, light background, height
   re-computed because the header/footer are taller than the 45px the
   page JS reserves (JS sets an inline height – hence !important). */
#PAGECONTENT {
	background: var(--wa-light);
	background-image: none;
	height: calc(100vh - var(--wa-header-h) - var(--wa-footer-h)) !important;
	scrollbar-width: thin;
	scrollbar-color: #b5b5b5 var(--wa-light);
}
#PAGECONTENT::-webkit-scrollbar { width: 10px; }
#PAGECONTENT::-webkit-scrollbar-track { background: var(--wa-light); }
#PAGECONTENT::-webkit-scrollbar-thumb { background: #b5b5b5; border-radius: 5px; border: 2px solid var(--wa-light); }

/* ---------------------------------------------------------------------
   Top bar  (event title + language flags)
   ------------------------------------------------------------------- */
#main_screen > table:first-of-type td {
	background: var(--wa-charcoal);
	/* cell height + 3px accent border = --wa-header-h */
	height: calc(var(--wa-header-h) - 3px);
	line-height: calc(var(--wa-header-h) - 3px) !important;
	border-bottom: 3px solid var(--wa-orange);
}

#main_screen > table:first-of-type td.credits {
	font-family: var(--wa-font);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wa-white);
	padding-left: 18px !important;
}

/* first cell (150px, holds the facebook-like widget) — room for a logo.
   To show the event logo, drop an image on the server and un-comment:
#main_screen > table:first-of-type td:first-child {
	background: var(--wa-charcoal) url('wrrc26-logo.png') no-repeat center / auto 36px;
}
*/

/* language flags */
#main_screen > table:first-of-type td.credits[align="right"] {
	padding-right: 14px !important;
}
.languageflags {
	opacity: 0.55;
	transition: opacity .15s ease;
	border-radius: 2px;
}
.languageflags:hover { opacity: 1; }

/* ---------------------------------------------------------------------
   Left menu
   ------------------------------------------------------------------- */
#menubar {
	background: var(--wa-dark) !important;
	color: var(--wa-grey);
	border-right: 1px solid var(--wa-charcoal-2);
}

.menu,
.menu_hover,
.menu_active {
	font-family: var(--wa-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	line-height: 48px;
	padding-left: 18px;
	margin: 0;
	cursor: pointer;
	border-bottom: 1px solid var(--wa-charcoal-2);
	border-right: 0;
	border-left: 4px solid transparent;
	text-shadow: none;
	transition: background .12s ease, color .12s ease;
}

.menu {
	color: #cfcfcf;
	background: var(--wa-dark);
}

.menu_hover {
	color: var(--wa-lime);
	background: var(--wa-charcoal);
}

.menu_active {
	color: var(--wa-white);
	background: var(--wa-charcoal);
	border-left-color: var(--wa-orange);
}

.menu_arrow { display: none; }

/* "[ mobile version ]" + auto-refresh counter */
#PAGEMENU a {
	color: var(--wa-cyan);
	text-decoration: none;
	font-weight: 500;
}
#PAGEMENU a:hover { text-decoration: underline; }

.refreshbox {
	font-family: var(--wa-font);
	font-size: 11px;
	color: var(--wa-grey);
}

/* ---------------------------------------------------------------------
   Bottom bar
   ------------------------------------------------------------------- */
#main_screen > table:last-of-type td {
	background: var(--wa-black) !important;
	height: var(--wa-footer-h);
	line-height: var(--wa-footer-h);
}
#main_screen > table:last-of-type td.credits {
	font-family: var(--wa-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wa-grey);
}

/* ---------------------------------------------------------------------
   Form controls (selects, inputs, buttons)
   ------------------------------------------------------------------- */
.box,
.box_small,
.box_quick {
	font-family: var(--wa-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--wa-charcoal);
	background: var(--wa-white);
	border: 1px solid var(--wa-line);
	border-radius: 3px;
	padding: 5px 8px;
	outline: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.box_small { padding: 4px 6px; font-size: 12px; }
.box_quick {
	font-size: 16px;
	font-weight: 600;
	width: 99%;
	padding: 9px 14px;
	border-radius: 3px;
}
.box:focus,
.box_small:focus,
.box_quick:focus {
	border-color: var(--wa-cyan);
	box-shadow: 0 0 0 3px rgba(105, 215, 225, 0.35);
}

.button,
.scroller_startbutton,
.scroller_stopbutton {
	font-family: var(--wa-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wa-charcoal);
	background: var(--wa-orange);
	border: 0;
	border-radius: 2px;
	padding: 8px 18px;
	cursor: pointer;
	transition: background .12s ease;
}
.button:hover { background: var(--wa-orange-dark); }

.scroller_startbutton { background: var(--wa-lime); }
.scroller_stopbutton  { background: var(--wa-orange); }

/* quick / advanced search + commentator window toggles */
.search_navmenu {
	background: var(--wa-dark);
	color: var(--wa-white);
	border-bottom: 1px solid var(--wa-charcoal-2);
}
.search_navmenu td { padding: 10px 6px; }

.search_menu_navigation,
.search_menu_navigation_active {
	font-family: var(--wa-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	height: auto;
	line-height: 1;
	padding: 9px 20px;
	border-radius: 2px;
	cursor: pointer;
	display: inline-block;
	transition: background .12s ease, color .12s ease;
}
.search_menu_navigation {
	color: var(--wa-white);
	background: transparent;
	border: 1px solid var(--wa-grey);
}
.search_menu_navigation:hover {
	border-color: var(--wa-lime);
	color: var(--wa-lime);
}
.search_menu_navigation_active {
	color: var(--wa-charcoal);
	background: var(--wa-lime);
	border: 1px solid var(--wa-lime);
}

/* filter bars on results / search tabs */
.search_menu {
	background: var(--wa-charcoal);
	color: var(--wa-white);
}
.search_menu > tbody > tr > td { padding: 6px 10px; }
.search_menu .search_menu > tbody > tr > td { padding: 4px 2px; }

.search_label {
	font-family: var(--wa-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #cfcfcf;
	text-shadow: none;
	padding: 3px 6px;
}
.search_label .box,
.search_label .box_small { text-transform: none; letter-spacing: 0; }

/* status line ("61 participant(s) found", "select distance and category") */
.search_table {
	background: var(--wa-white);
	border-top: 0;
	border-bottom: 1px solid var(--wa-line);
	font-size: 12px;
	color: var(--wa-grey-text);
}
.search_table td { padding: 8px 12px; }
#divResults_Status,
#divSearch_Status { padding: 0 !important; }

.search_result_table,
.myfavourites_result_table,
.scroller_table {
	background: var(--wa-white);
}

/* ---------------------------------------------------------------------
   Leaderboard blocks
   ------------------------------------------------------------------- */
#divLeaderBoard { padding: 14px 14px 0; }

/* each leaderboard becomes a white card */
#divLeaderBoard > div[id^="leaderboard"] > table.leaderboard_table {
	background: var(--wa-white);
	border: 1px solid var(--wa-line);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
#divLeaderBoard > div[id^="leaderboard"] > table.leaderboard_table > tbody > tr > td { padding: 0; }

/* toolbar row (auto follow + selects) — direct child table only */
#divLeaderBoard > div[id^="leaderboard"] > table.leaderboard_table > tbody > tr > td > table.leaderboard_table:first-child > tbody > tr > td {
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--wa-charcoal);
}
#divLeaderBoard div[id^="autofollow"] { line-height: 20px !important; }

.leaderboard_divider {
	margin-top: 14px;
	border-top: 0;
}

/* timing-point tabs — the page puts navy bg / 0.65 opacity inline on
   these cells, hence !important. Rendered as a light tab strip. */
.leaderboard_timehdr,
.leaderboard_timehdr_hover,
.leaderboard_timehdr_active {
	font-family: var(--wa-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	color: var(--wa-charcoal) !important;
	background: var(--wa-white) !important;
	opacity: 1 !important;
	border-top: 1px solid var(--wa-line);
	border-left: 0;
	border-right: 1px solid var(--wa-line);
	border-bottom: 3px solid var(--wa-line);
	text-shadow: none;
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease;
}
.leaderboard_timehdr_hover {
	color: var(--wa-charcoal) !important;
	border-bottom-color: var(--wa-lime);
}
.leaderboard_timehdr_active {
	color: var(--wa-charcoal) !important;
	border-bottom-color: var(--wa-orange);
}

.leaderboard_segmenthdr {
	font-family: var(--wa-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	height: 26px;
	line-height: 26px;
	color: var(--wa-charcoal);
	background: var(--wa-cyan-tint);
	border: 0;
	text-shadow: none;
	padding-left: 10px;
}

.leaderboard_newsegment {
	font-family: var(--wa-font);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wa-white);
	background: var(--wa-grey);
	border-bottom: 0;
	line-height: 22px;
}

.leaderboard_table_results { width: 100%; }

/* ---------------------------------------------------------------------
   Result tables (leaderboard, results, search, favourites, scroller)
   ------------------------------------------------------------------- */
.result_hdr {
	font-family: var(--wa-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wa-white);
	background: var(--wa-charcoal-2);
	border-bottom: 0;
	line-height: 30px;
	opacity: 1;
}

.result_odd,
.result_even,
.result_hover,
.result_highlighted {
	font-family: var(--wa-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--wa-charcoal);
	line-height: 32px;
	border-bottom: 1px solid #e9e9e9;
	opacity: 1;
	cursor: pointer;
	transition: background .1s ease;
}
.result_odd  { background: var(--wa-white); }
.result_even { background: #f7f7f7; }
.result_hover { background: var(--wa-cyan-tint); }
.result_highlighted { background: var(--wa-lime-tint); }

.result_hdr td,
.result_odd td,
.result_even td,
.result_hover td,
.result_highlighted td {
	background: inherit;
	padding-left: 8px;
	padding-right: 8px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The columns have percentage widths, so cell edges land on fractional
   pixels and Chrome shows hairline seams between cells of a coloured row.
   A 1px shadow on each side of every cell, in the row colour, hides them. */
.result_hdr td         { box-shadow: -1px 0 0 0 var(--wa-charcoal-2), 1px 0 0 0 var(--wa-charcoal-2); }
.result_even td        { box-shadow: -1px 0 0 0 #f7f7f7, 1px 0 0 0 #f7f7f7; }
.result_hover td       { box-shadow: -1px 0 0 0 var(--wa-cyan-tint), 1px 0 0 0 var(--wa-cyan-tint); }
.result_highlighted td { box-shadow: -1px 0 0 0 var(--wa-lime-tint), 1px 0 0 0 var(--wa-lime-tint); }
/* favourite rows also get a lime bar on the left */
.result_highlighted td:first-child { box-shadow: inset 4px 0 0 var(--wa-lime), 1px 0 0 0 var(--wa-lime-tint); }

/* rank column */
.result_odd  td:first-child,
.result_even td:first-child,
.result_hover td:first-child,
.result_highlighted td:first-child {
	font-weight: 700;
}

/* name (first left-aligned cell after the race-no) */
.result_odd  td[align="center"] + td[align="left"],
.result_even td[align="center"] + td[align="left"],
.result_hover td[align="center"] + td[align="left"],
.result_highlighted td[align="center"] + td[align="left"] {
	font-weight: 600;
}

/* nation code next to the flag */
.nation {
	font-family: var(--wa-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wa-grey-text);
	text-shadow: none;
	line-height: 10px;
	vertical-align: middle;
}
.result_odd img[title],
.result_even img[title],
.result_hover img[title],
.result_highlighted img[title] {
	vertical-align: middle;
	border-radius: 2px;
}

/* favourite (+) icon — keep it quiet until hovered */
.result_odd  td:last-child img,
.result_even td:last-child img {
	opacity: 0.35;
	transition: opacity .12s ease;
}
.result_hover td:last-child img,
.result_highlighted td:last-child img,
.result_odd  td:last-child img:hover,
.result_even td:last-child img:hover { opacity: 1; }

/* podium markers: a coloured bar on the first three rows after the
   header, on the leaderboard and the results list (both are rank-sorted).
   Search results can be sorted by anything, so they are left alone. */
#divLeaderBoard tr.result_hdr + tr > td:first-child,
#divLeaderBoard tr.result_hdr + tr + tr > td:first-child,
#divLeaderBoard tr.result_hdr + tr + tr + tr > td:first-child,
#list_results   tr.result_hdr + tr > td:first-child,
#list_results   tr.result_hdr + tr + tr > td:first-child,
#list_results   tr.result_hdr + tr + tr + tr > td:first-child {
	position: relative;
}
#divLeaderBoard tr.result_hdr + tr > td:first-child::before,
#divLeaderBoard tr.result_hdr + tr + tr > td:first-child::before,
#divLeaderBoard tr.result_hdr + tr + tr + tr > td:first-child::before,
#list_results   tr.result_hdr + tr > td:first-child::before,
#list_results   tr.result_hdr + tr + tr > td:first-child::before,
#list_results   tr.result_hdr + tr + tr + tr > td:first-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
}
#divLeaderBoard tr.result_hdr + tr > td:first-child::before,
#list_results   tr.result_hdr + tr > td:first-child::before { background: var(--wa-orange); }
#divLeaderBoard tr.result_hdr + tr + tr > td:first-child::before,
#list_results   tr.result_hdr + tr + tr > td:first-child::before { background: var(--wa-cyan); }
#divLeaderBoard tr.result_hdr + tr + tr + tr > td:first-child::before,
#list_results   tr.result_hdr + tr + tr + tr > td:first-child::before { background: var(--wa-purple); }
/* the "no results yet" row is never a sibling of the header, so it gets no bar */
tr.leaderboard_nodata > td:first-child::before { content: none !important; }

/* "no results available yet" etc. */
.leaderboard_nodata,
.myfavourites_nodata,
.scroller_nodata {
	font-family: var(--wa-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--wa-grey-text);
	background: transparent;
	cursor: default;
}
.leaderboard_nodata td { padding: 14px 0 20px; }

/* ---------------------------------------------------------------------
   Participant details popup
   ------------------------------------------------------------------- */
.participant {
	background: rgba(14, 14, 14, 0.7);
}

#PARTICIPANTINFO {
	border: 0;
	border-radius: 6px;
	background: var(--wa-white);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.participant_table_panel {
	color: var(--wa-white);
	background: var(--wa-charcoal);
	border-bottom: 3px solid var(--wa-orange);
	font-family: var(--wa-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.participant_table_panel td { height: 36px !important; }

.participant_table_data { width: 96%; }

.participant_hdr_small {
	font-family: var(--wa-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wa-grey);
}

.participant_value_big {
	font-family: var(--wa-font);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--wa-charcoal);
}

.participant_value_std {
	font-family: var(--wa-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--wa-charcoal);
	font-variant-numeric: tabular-nums;
}

.participant_section_hdr {
	font-family: var(--wa-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wa-charcoal);
	background: var(--wa-light);
	border-bottom: 2px solid var(--wa-cyan);
	height: 26px;
	padding-left: 8px;
}

/* split table inside the popup */
.split_hdr,
.split_time,
.split_segment,
.details_racetime,
.details_segmenttime,
.details_splittime {
	font-family: var(--wa-font);
	font-size: 12px;
	height: 24px;
	padding-right: 6px;
	padding-left: 6px;
	font-variant-numeric: tabular-nums;
	border-right: 0;
}
.split_hdr {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--wa-grey-text);
	background: var(--wa-white);
	border-bottom: 2px solid var(--wa-line);
}
.split_time {
	font-weight: 500;
	color: var(--wa-charcoal);
	background: var(--wa-white);
	border-bottom: 1px solid var(--wa-line);
}
.split_segment {
	font-weight: 700;
	background: var(--wa-light);
	border-bottom: 1px solid var(--wa-line);
}
.details_racetime    { background: var(--wa-cyan-tint);   border-bottom: 1px solid var(--wa-line); }
.details_segmenttime { background: var(--wa-orange-tint); border-bottom: 1px solid var(--wa-line); }
.details_splittime   { background: var(--wa-lime-tint);   border-bottom: 1px solid var(--wa-line); }

/* ---------------------------------------------------------------------
   Scroller
   ------------------------------------------------------------------- */
.scroller_list {
	font-family: var(--wa-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--wa-white);
	background: var(--wa-charcoal);
	border: 1px solid var(--wa-charcoal-2);
	border-radius: 3px;
}

/* ---------------------------------------------------------------------
   Misc
   ------------------------------------------------------------------- */
.loading { background: transparent; }   /* keep the auto-refresh spinner unobtrusive */

.other_table { background: var(--wa-white); }

#divTeamResults,
#divMyFavourites,
#divScroller,
#divOther,
#divStatistics,
#divHelp { background: var(--wa-white); min-height: 100%; }

::selection { background: var(--wa-lime); color: var(--wa-charcoal); }