/* The standalone tracker site (tracker/index.html), in the look of design
   A: Rare Thief's subdomain banner on the blue gradient, then a dark
   surface with a bar (the site's name, the sections, the search, the
   account) and the content under it. The commendation components come from
   css/tracker.css, shared with the map's side panel; everything the site
   does differently is scoped under .rt-site here, so the panel never
   changes. Assets take the place of CSS here one by one, where they fit. */

/* Eczar runs 400 to 800; the site uses it at 400 only, nothing bold. */
@font-face { font-family: Eczar; src: url("/fonts/Eczar-VariableFont_wght.ttf") format("opentype"); font-weight: 400 800; }
@font-face { font-family: ProzaLibre; src: url("/fonts/ProzaLibre-Regular.ttf") format("truetype"); font-weight: normal; }
/* Where is Duke's title and note lettering, for the overview's masthead. */
@font-face { font-family: Burlesk; src: url("/fonts/Burlesk-Regular.otf") format("opentype"); font-weight: normal; }
@font-face { font-family: brushtipTexe; src: url("/fonts/BTTEX_15.ttf") format("truetype"); font-weight: normal; }

:root {
	--rt-page: #101216;
	--rt-bar: #0b0d10;
	--rt-bar-secondary: #131719;
	--rt-card: #171a1f;
	--rt-line: #23272e;
	--rt-ink: #ece9df;
	--rt-ink-soft: #d8d6cc;
	--rt-muted: #a3a091;
	--rt-link: #7cc6d6;
	--rt-link-hover: #a9dbe6;
	--rt-accent: #5bb8cc;
	--rt-gold: #d9b45b;
	--rt-green: #7fc98b;
	--rt-red: #c98484;
	--rt-track: #262a31;
}

html {
	min-width: 320px;
	margin: 0;
	padding: 0;
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 38, 51, 1) 15%, rgba(0, 38, 51, 1) 85%, rgba(0, 0, 0, 1) 100%);
	color: var(--rt-ink);
	font-family: ProzaLibre, Georgia, serif;
	font-size: 15px;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* --- The header: the site's name, the sections, the account ---------------
   Two dark rows across the whole page, their contents in the 1280px
   column: Rare Thief's mark and the account, then the site's name and its
   sections as tabs. At 1000px and under the tabs become one button at the
   end of the second row that names the current section, the pattern Rare's
   forum uses on a phone: every section one tap away, none hidden off the
   edge of a scrolling row. */

.rt-site-head {
	background: var(--rt-bar);
	border-bottom: 1px solid var(--rt-line);
}

/* Two rows: Rare Thief's mark and the account, then the site's name and
   its sections. The rows run edge to edge; their content keeps the page's
   width. */
.rt-site-bar {
	max-width: 1280px;
	min-height: 56px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.rt-site-logo { display: flex; line-height: 0; }
.rt-site-logo img { height: 24px; width: auto; }
.rt-site-logo:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 4px; }

.rt-site-menu {
	border-top: 1px solid var(--rt-line);
	background: var(--rt-bar-secondary);
}

.rt-site-menu-in {
	position: relative;
	max-width: 1280px;
	min-height: 52px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 20px;
}

.rt-site-title {
	margin: 0;
	font-family: Eczar, Georgia, serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1;
	white-space: nowrap;
}

.rt-site-title a { color: var(--rt-ink); text-decoration: none; }
.rt-site-title a:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }

.rt-site-nav {
	display: flex;
	gap: 0;
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
}

.rt-site-nav-link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 10px;
	color: var(--rt-muted);
	font-size: 15px;
	white-space: nowrap;
	text-decoration: none;
}

.rt-site-nav-link:hover { color: var(--rt-ink); }
.rt-site-nav-link:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: -2px; }
/* The current tab: its word in the accent, underlined just beneath it. */
.rt-site-nav-on, .rt-site-nav-on:hover { color: var(--rt-accent); }
.rt-site-nav-on::after { content: ""; position: absolute; left: 10px; right: 10px; top: calc(50% + 12px); height: 3px; border-radius: 2px; background: currentColor; }
/* Inside a shared profile, signed in: your mark beside theirs, as the
   commendation rows do it (rt-comm-vs-you): small, muted, green when you
   have it too. */
.rt-vs-you { display: inline-block; color: var(--rt-muted); font-size: 13px; white-space: nowrap; }
.rt-vs-you-done { color: var(--rt-green); }
.rt-vs-figure { color: var(--rt-muted); }
.rt-vs-figure b { color: var(--rt-ink); }
.rt-se-you { display: block; margin-top: 4px; }
.rt-se-kind .rt-vs-you { margin-left: 8px; }
/* A section the shared pirate does not share: there, but no link. */
.rt-site-nav-off { color: var(--rt-muted); opacity: 0.45; cursor: default; }
.rt-site-nav-toggle { display: none; }

/* The panel's own search box stays in the page for the panel's code, which
   the site's box (below the bar) types into; it is never shown here. */
.rt-site #commendations_search_wrap { display: none !important; }

/* The account: signed out, the panel's Login button (its art comes from
   css/tracker.css); signed in, a chip with the gamerpic, the tag and the
   import date, which opens the overview, where the card has the actions
   (update, share, switch, log out); signed in with nothing imported, the
   greeting and the Import Profile button. The strip is the panel's markup;
   the figures and actions it shows there stay out of the chip. */
.rt-site #commendations_account { position: relative; flex: 0 1 auto; min-width: 0; }
.rt-site #commendations_account:empty { display: none; }
.rt-site-bar .rt-comm-account { min-height: 0; padding: 0; gap: 10px; color: var(--rt-ink); }
.rt-site-bar .rt-comm-account:not(.rt-comm-account-authed) > span { display: none; }
.rt-site-bar .rt-comm-signin-notice { font-size: 13px; max-width: 240px; }
/* A login that failed, in the site's colour for something lost. */
.rt-site .rt-comm-signin-notice { color: var(--rt-red); }
.rt-site-bar .rt-comm-account-authed:not(.rt-comm-account-profile) > span { font-size: 13px; line-height: 1.35; color: var(--rt-muted); text-align: right; }

.rt-site .rt-comm-signin-btn:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-site-bar .rt-comm-account-authed { min-height: 0; }
.rt-site-bar .rt-comm-account-profile { gap: 10px; line-height: 1.2; cursor: pointer; }
.rt-site-bar .rt-comm-account-profile:hover .rt-comm-profile-tag b { text-decoration: underline; }
.rt-site-bar .rt-comm-account-profile:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 4px; border-radius: 17px; }
.rt-site-bar .rt-comm-gamerpic { width: 34px; height: 34px; }
.rt-site-bar .rt-comm-profile-main { gap: 0; }
.rt-site-bar .rt-comm-profile-tag { display: flex; flex-direction: column; font-size: 14px; }
.rt-site-bar .rt-comm-profile-tag b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-site-bar .rt-comm-profile-main { min-width: 0; }
.rt-site-bar .rt-comm-pirate-name, .rt-site-bar .rt-comm-imported { font-size: 13px; color: var(--rt-muted); }
.rt-site-bar .rt-comm-currencies, .rt-site-bar .rt-comm-overall, .rt-site-bar .rt-comm-digest, .rt-site-bar .rt-comm-apart, .rt-site-bar .rt-comm-actions { display: none; }

@media (max-width: 1000px) {
	.rt-site-bar, .rt-site-menu-in { padding: 0 16px; }
}

/* Too narrow for every tab beside the name (they need about 1150px): one
   button naming the current section, at the end of the second row; the list
   drops down from it. */
@media (max-width: 1200px) {
	.rt-site-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		flex: 1 1 auto;
		min-width: 0;
		align-self: stretch;
		padding: 0 2px 0 0;
		border: 0;
		background: none;
		color: var(--rt-ink);
		font: inherit;
		font-size: 15px;
		cursor: pointer;
	}
	.rt-site-nav-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.rt-site-nav-toggle::after {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		margin: -4px 2px 0 0;
		border-right: 2px solid var(--rt-muted);
		border-bottom: 2px solid var(--rt-muted);
		transform: rotate(45deg);
	}
	.rt-site-nav-toggle:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: -2px; }
	.rt-site-nav-open .rt-site-nav-toggle::after { margin-top: 4px; transform: rotate(225deg); }
	.rt-site-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 20;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 6px 0 8px;
		border-top: 1px solid var(--rt-line);
		border-bottom: 1px solid var(--rt-line);
		background: var(--rt-bar);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
	}
	.rt-site-nav-open .rt-site-nav { display: flex; }
	.rt-site-nav-link { padding: 12px 20px; border-bottom: 0; border-left: 3px solid transparent; font-size: 16px; }
	.rt-site-nav-on { border-left-color: var(--rt-accent); }
	.rt-site-nav-on::after { display: none; }
}

@media (max-width: 720px) {
	.rt-site-logo img { height: 20px; }
	.rt-site-title { font-size: 17px; }
	/* The greeting gives way to its button. */
	.rt-site-bar .rt-comm-account-authed:not(.rt-comm-account-profile) > span { display: none; }
}

/* --- The content ----------------------------------------------------------- */

.rt-site-page {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	flex: 1;
}

#commendations_sections_container {
	min-height: 50vh;
	color: var(--rt-ink);
}

#commendations_scroll_container {
	max-width: 1216px;
	margin: 0 auto;
	padding: 28px 32px 48px;
	box-sizing: border-box;
}

#commendations_loading {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}

/* While the wheel turns (account.js syncWheel, and from the first paint) it
   stands in the middle of the space between the header and the footer, and
   the search box waits for the page. */
.rt-comm-loading .rt-site-page,
.rt-comm-loading #commendations_sections_container,
.rt-comm-loading #commendations_scroll_container { display: flex; flex-direction: column; flex: 1; width: 100%; }
.rt-comm-loading #commendations_loading { flex: 1; align-items: center; }
.rt-comm-loading #site_search_wrap { display: none; }

/* The search under the bar (js/tracker-site/search.js): the field is drawn,
   Amir's torn frame at the proportions of his mock, with a transparent
   input over it in Eczar. */
.rt-site-search {
	position: relative;
	width: 100%;
	max-width: 600px;
	height: 68px;
	margin: 0 auto 24px;
}

.rt-site-search[hidden] { display: none; }
/* Under a page's figures, or on the overview under its cards. */
.rt-site-search-in { margin: 22px auto 26px; }
.rt-home > .rt-site-search-in { margin: 0 auto; }
/* What the results stand in for while the box holds a search. */
.rt-site-search-hides { display: none !important; }

.rt-site-search-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#site_search {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0 30px;
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	color: #2b2e33;
	font-family: Eczar, Georgia, serif;
	font-size: 21px;
}

#site_search::placeholder { color: #4b4e54; }
#site_search:focus { outline: none; }
.rt-site-results-head { margin: 0 0 14px; font-size: 15px; color: var(--rt-muted); }

.panel-loading-ship-wheel-image { width: 72px; }

/* A shared profile's pages: the shared pirate's card heads them, the
   panel's own card on the same art as the player's card on the overview,
   named as such. The header above stays the viewer's. */
.rt-site-subject {
	position: relative;
	z-index: 0;
	max-width: 460px;
	margin: 0 0 20px;
	padding: 8px 12px 10px;
}

/* The panel's shared card (css/tracker.css): the same art washed blue, so a
   viewer can tell at a glance whose numbers these are. The mask keeps the
   wash off the torn corners. */
.rt-site-subject::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(0, 195, 255, 0.1), rgba(0, 195, 255, 0.1)),
		url(/images/commendations/profile-container.png) no-repeat;
	background-size: 100% 100%;
	-webkit-mask: url(/images/commendations/profile-container.png) 0 0 / 100% 100% no-repeat;
	mask: url(/images/commendations/profile-container.png) 0 0 / 100% 100% no-repeat;
}

/* A date moves to the next line whole, never its year alone ("imported Oct 12, 2026"). */
.rt-site-subject .rt-comm-imported, .rt-nowrap { white-space: nowrap; }

.rt-site-subject .rt-comm-account-shared::before { display: none; }
.rt-site-subject .rt-comm-account-authed { min-height: 0; }

/* The commendations' figure, with room before the chips under it. */
.rt-site .rt-comm-summary { margin-bottom: 20px; }

/* The card at the top right of every page of a shared profile, in the same
   place each time; the page's way back, name, line and figures beside it. */
.rt-site-lens-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 0 0 20px;
}

.rt-site-lens-head-text { flex: 1 1 360px; min-width: 0; }
.rt-site-lens-head-text > :last-child { margin-bottom: 0; }
.rt-site-lens-head .rt-site-subject { flex: 0 1 460px; max-width: 460px; margin: 0; }
.rt-home-subject { flex: 0 1 460px; min-width: 0; }
.rt-home-subject:empty { display: none; }
.rt-home-subject .rt-site-subject { max-width: none; margin: 0; }

@media (max-width: 860px) {
	.rt-site-lens-head .rt-site-subject, .rt-home-subject { flex: 1 1 100%; max-width: none; }
}


.rt-site-foot {
	text-align: center;
	padding: 18px 16px 28px;
	font-size: 13px;
	color: var(--rt-muted);
}

.rt-site-foot a { color: var(--rt-ink-soft); text-decoration: none; white-space: nowrap; }
.rt-site-foot a:hover { text-decoration: underline; }

/* --- The panel's components, in A's language ------------------------------- */

/* Nothing bold on the site, by heading or by hand: emphasis is the ink colour. */
.rt-site b, .rt-site strong { font-weight: normal; }
.rt-site .rt-comm-link { color: var(--rt-link); }
.rt-site .rt-comm-link:hover { color: var(--rt-link-hover); }
.rt-site .rt-comm-setup-note { color: var(--rt-muted); }
/* The panel centres its notices and its three charts in a narrow column;
   on the site they start where the page's heading does, the charts in a row. */
.rt-site .rt-comm-error { text-align: left; padding: 12px 0; }
.rt-site .rt-comm-flags { justify-content: flex-start; }
/* A commendation's flags on the filter pills' torn chip art, each keeping its colour. */
.rt-site .rt-comm-flag { border: 0; border-radius: 0; padding: 3px 12px; background: url(/images/commendations/chip.png) no-repeat; background-size: 100% 100%; font-size: 13px; color: #c9c7bd; }
/* The panel's small print and its blues, in the site's sizes and colours. */
.rt-site .rt-comm-tile-rank { font-size: 13px; color: var(--rt-link); }
/* After both: Legacy and Time-limited keep their own colours, a tile's label too. */
.rt-site .rt-comm-flag-retired { color: #c98484; }
.rt-site .rt-comm-flag-limited { color: #d2a55f; }
.rt-site .rt-comm-vs-you { font-size: 13px; }
.rt-site .rt-comm-standing-label { font-size: 13px; }
.rt-site .rt-comm-vs-them { color: var(--rt-accent); }
.rt-site .rt-comm-overall { color: var(--rt-link); }
.rt-site a.rt-comm-currencies:hover .rt-comm-currency { color: var(--rt-link-hover); }
.rt-site .rt-comm-digest, .rt-site .rt-comm-unlocks-more { color: var(--rt-link); }
.rt-site .rt-comm-digest { font-size: 13px; }
/* What's left's groups open from the drawn chevron the Import page's steps use. */
.rt-site .rt-comm-section-toggle { display: flex; align-items: center; gap: 10px; }
.rt-site .rt-comm-section-toggle::before, .rt-site .rt-comm-section-toggle[aria-expanded="true"]::before {
	content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
	border-right: 2px solid var(--rt-muted); border-bottom: 2px solid var(--rt-muted); transform: rotate(-45deg); transition: transform 0.15s; }
.rt-site .rt-comm-section-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.rt-site .rt-comm-setup { max-width: 680px; margin: 0; }
.rt-site .rt-comm-setup .rt-comm-setup-note, .rt-site .rt-comm-facts { font-size: 14px; }
/* A section's own note (log in, still arriving) reads at the line above it. */
.rt-site .rt-comm-setup-note.rt-ms-note { font-size: 15px; }
.rt-site .rt-comm-setup-center { text-align: left; }
.rt-site .rt-comm-howto { margin: 4px 0 16px; }
.rt-site .rt-comm-overall { white-space: normal; }
/* The panel rings in its own blue; on the site everything a key reaches
   rings in the accent (the search box excepted, as Amir has it). */
.rt-site a:focus-visible, .rt-site button:focus-visible, .rt-site summary:focus-visible, .rt-site [tabindex]:focus-visible,
.rt-site #commendations_sections_container a:focus-visible, .rt-site #commendations_sections_container button:focus-visible, .rt-site .rt-comm-recipe summary:focus-visible,
.rt-site .rt-comm-unlocks-more:focus-visible, .rt-site .rt-comm-reward:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
/* One colour per meaning across the site and the panel's pieces in it:
   done and owned green, unlocked gold, links and bars the site's blues,
   a change the accent, a loss red. */
.rt-site .rt-comm-check, .rt-site .rt-comm-mine-done, .rt-site .rt-comm-vs .rt-comm-vs-done { color: var(--rt-green); }
.rt-site .rt-comm-reward-got { color: var(--rt-gold); }
.rt-site .rt-comm-guide, .rt-site .rt-comm-exact, .rt-site .rt-comm-guide-list li::marker { color: var(--rt-link); }
.rt-site .rt-comm-minibar > span, .rt-site .rt-comm-standing-bar span { background-color: var(--rt-accent); }
.rt-site .rt-comm-delta { color: var(--rt-accent); }
.rt-site .rt-comm-delta-down { color: var(--rt-red); }
.rt-site .rt-comm-delta-now { color: var(--rt-muted); font-size: 13px; }
.rt-site .rt-comm-apart-earned { color: var(--rt-gold); }
.rt-site .rt-comm-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 28px; }
.rt-site .rt-comm-chart { max-width: none; margin: 0; }
.rt-site .rt-comm-chart-range { text-align: left; margin-top: 14px; }
/* The share link's field is as wide as a link needs, not the page. */
.rt-site .rt-comm-share-url { max-width: 720px; }

/* The panel's form controls, drawn for the site: the share link in the
   search box's art, a hand-drawn box for each share switch, the Import
   page's recipes opening from a chevron like the section button's, and the
   panel's buttons in the header's Import art. */
.rt-site .rt-comm-share-url input { box-sizing: border-box; height: 60px; padding: 0 24px; border: 0; border-radius: 0; background: url(/images/tracker/search-input.png) no-repeat; background-size: 100% 100%;
	color: #2b2e33; font-family: ProzaLibre, Georgia, serif; font-size: 14px; text-overflow: ellipsis; }
.rt-site .rt-comm-share-url input:focus { outline: none; }
/* At the search box's proportions, which its torn edge is drawn for. */
@media (max-width: 860px) { .rt-site .rt-comm-share-url input { height: 52px; padding: 0 20px; } }
.rt-site .rt-comm-share-toggle input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; background: url(/images/tracker/check-box.svg) center / contain no-repeat; cursor: pointer; }
.rt-site .rt-comm-share-toggle input:checked { background-image: url(/images/tracker/check-box-on.svg); }
.rt-site .rt-comm-share-toggle input:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-site .rt-comm-recipe summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; color: var(--rt-link); }
.rt-site .rt-comm-recipe summary::-webkit-details-marker { display: none; }
.rt-site .rt-comm-recipe summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.rt-site .rt-comm-recipe[open] summary::before { transform: rotate(45deg); }
.rt-site .rt-comm-btn { padding: 11px 22px; border: 0; border-radius: 0; background: url(/images/commendations/auth-button.png) no-repeat; background-size: 100% 100%; color: #ffffff; font-family: Eczar, Georgia, serif; font-size: 1rem; }
.rt-site .rt-comm-btn:hover { background-color: transparent; filter: brightness(1.1); }
/* One blue for every button here: the Login's and the header's Import's gradient art, not the panel's flatter one. */
.rt-site .rt-comm-primary-btn, .rt-site .rt-comm-bookmarklet { background-image: url(/images/commendations/auth-button.png); }

/* The last plain boxes wear the stat cards' torn art, sliced so its edge
   keeps its width however wide or short the box. */
.rt-site .rt-comm-supplemental, .rt-site .rt-comm-standing, .rt-home-adds, .rt-site .rt-comm-howto {
	border: 8px solid transparent;
	border-radius: 0;
	border-image: url(/images/tracker/progress-container.png) 18 fill / 8px stretch;
	background: none;
}
.rt-site .rt-comm-crumb { display: inline-block; margin: 0 0 16px; font-size: 14px; color: var(--rt-link); }

.rt-site .rt-comm-view-title {
	margin: 0 0 6px;
	font-family: Eczar, Georgia, serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.1;
	color: var(--rt-ink);
	text-align: left;
}

.rt-site .rt-comm-view-sub {
	max-width: none;
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--rt-muted);
	text-align: left;
}

.rt-site .rt-comm-section-title {
	margin: 22px 0 10px;
	font-family: Eczar, Georgia, serif;
	font-weight: 400;
	font-size: 19px;
	color: var(--rt-ink);
}

.rt-site .rt-comm-bar { background-color: var(--rt-track); border-radius: 3px; }
.rt-site .rt-comm-bar > span { background-color: var(--rt-accent); }

/* The root's chips (Islands, Almost there, What's left) wear the panel's
   chip art (css/tracker.css); only their row is left-aligned here. The
   Currency and Recent progress chips stay out: they are the site's own tabs. */
.rt-site .rt-comm-chips { justify-content: flex-start; gap: 8px; margin: 0 0 18px; }
.rt-site .rt-comm-chips a[href$="/currency"], .rt-site .rt-comm-chips a[href$="/recent"] { display: none; }

/* Commendation rows wear the panel's torn art (css/tracker.css), in two
   columns once the page is wide enough (a row was a name and a tick two
   screens apart). Side by side every row wears the same art, since the
   alternating pair read as two coloured columns; stacked, they alternate. */
@media (min-width: 1000px) {
	.rt-site .rt-comm-list:not([hidden]) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 12px;
	}
	.rt-site .rt-comm-list:not([hidden]) .rt-comm-row:nth-child(even) { background-image: url(/images/commendations/commendation-1.png); }
}

/* A company's standing on its page. */
.rt-site .rt-comm-standing {
	margin: 0 0 22px;
	padding: 10px 12px;
}

/* The company tiles are the panel's, container art and all (Amir); only
   the grid is the site's: as many across as fit. */
.rt-site .rt-comm-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }

/* A commendation's page: the icon beside the title, the rest full width. */
.rt-site .rt-comm-detail {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	column-gap: 22px;
	row-gap: 6px;
	align-items: start;
	text-align: left;
}

.rt-site .rt-comm-detail > .rt-comm-icon { grid-row: 1 / span 4; width: 112px; height: 112px; align-self: center; }
.rt-site .rt-comm-detail > * { grid-column: 2; }
.rt-site .rt-comm-detail > .rt-comm-icon { grid-column: 1; }
.rt-site .rt-comm-detail > .rt-grades, .rt-site .rt-comm-detail > .rt-comm-grades-note, .rt-site .rt-comm-detail > .rt-comm-unlocks,
.rt-site .rt-comm-detail > .rt-comm-supplemental, .rt-site .rt-comm-detail > .rt-comm-detail-meta:last-child { grid-column: 1 / -1; }
.rt-site .rt-comm-detail-name { margin: 0; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--rt-ink); text-align: left; }
.rt-site .rt-comm-detail-desc { margin: 0; font-size: 16px; color: var(--rt-ink-soft); text-align: left; }
.rt-site .rt-comm-detail-meta { margin: 0; font-size: 14px; color: var(--rt-muted); text-align: left; }
.rt-site .rt-comm-detail .rt-comm-mine { justify-content: flex-start; }

/* The grades as discs in the stat cards' art (commendation.js gradeDiscs),
   each with a ring like the cards' bar: full once earned, filling for the one
   being worked on, empty for the rest. An earned disc wears the blue wash the
   shared profile card does (css/tracker.css), on its own pixels only. A
   column each, at most 118px, five to a row on a phone. */
.rt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rt-site .rt-grades { margin: 22px 0 0; }
.rt-grades-head { margin: 0 0 14px; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 19px; color: var(--rt-ink); }
.rt-grades-list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); row-gap: 22px; max-width: calc(var(--n) * 118px); margin: 0; padding: 0; list-style: none; }
.rt-grade { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rt-grade-disc { position: relative; display: grid; place-items: center; width: 68px; height: 68px; background: url(/images/tracker/grade-disc-1.svg) center / contain no-repeat;
	font-family: Eczar, Georgia, serif; font-size: 18px; line-height: 1; color: var(--rt-muted); }
.rt-grade:nth-child(3n + 2) .rt-grade-disc { background-image: url(/images/tracker/grade-disc-2.svg); }
.rt-grade:nth-child(3n) .rt-grade-disc { background-image: url(/images/tracker/grade-disc-3.svg); }
.rt-grade-done .rt-grade-disc::before { content: ""; position: absolute; inset: 0; background: rgba(0, 195, 255, 0.1);
	-webkit-mask: url(/images/tracker/grade-disc-1.svg) center / contain no-repeat; mask: url(/images/tracker/grade-disc-1.svg) center / contain no-repeat; }
.rt-grade-done:nth-child(3n + 2) .rt-grade-disc::before { -webkit-mask-image: url(/images/tracker/grade-disc-2.svg); mask-image: url(/images/tracker/grade-disc-2.svg); }
.rt-grade-done:nth-child(3n) .rt-grade-disc::before { -webkit-mask-image: url(/images/tracker/grade-disc-3.svg); mask-image: url(/images/tracker/grade-disc-3.svg); }
.rt-grade-long { font-size: 15px; }
.rt-grade-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-grade-num { position: relative; }
.rt-grade-done .rt-grade-disc, .rt-grade-now .rt-grade-disc { color: var(--rt-ink); }
.rt-grade-t { font-family: Eczar, Georgia, serif; font-size: 21px; line-height: 1; color: var(--rt-muted); white-space: nowrap; }
.rt-grade-t-long { font-size: 16px; }
.rt-grade-done .rt-grade-t { color: var(--rt-ink-soft); }
.rt-grade-now .rt-grade-t { color: var(--rt-ink); }
.rt-grade-you { font-size: 13px; line-height: 1; color: var(--rt-accent); white-space: nowrap; }
.rt-site .rt-comm-grades-note { max-width: none; margin: 12px 0 0; font-size: 13px; color: var(--rt-muted); }

@media (max-width: 600px) {
	.rt-grades-list { grid-template-columns: repeat(min(var(--n), 5), minmax(0, 1fr)); max-width: none; }
	.rt-grade-disc { width: 56px; height: 56px; }
	.rt-grade-t { font-size: 19px; }
	.rt-grade-t-long { font-size: 15px; }
}

/* Cosmetic Rewards: cards in columns. */
.rt-site .rt-comm-unlocks { margin-top: 22px; }
.rt-site .rt-comm-unlocks > .rt-comm-supplemental-label { margin: 0 0 10px; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 19px; color: var(--rt-ink); }
.rt-site .rt-comm-reward-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rt-site .rt-comm-reward-name { font-size: 14px; color: var(--rt-ink); }
.rt-site .rt-comm-reward-meta { font-size: 13px; color: var(--rt-muted); }
.rt-site .rt-comm-supplemental { margin-top: 16px; padding: 8px 10px; }

/* Cosmetic pictures: Where is Duke's holder behind every one, a torn-paper
   frame around Rare's tile gradient (images/tracker/cosmetic-holder.png,
   Duke's own), the picture on top of it inset as Duke insets it so its
   corners never show past the torn edge. The wrapper (.rt-cos, nothing in
   the panel) takes the size each place gives. One not owned, or a season
   reward not earned, sits in Duke's dark holder at full colour. */
.rt-site .rt-cos {
	display: block;
	position: relative;
	flex: 0 0 auto;
}

.rt-site .rt-cos::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(/images/tracker/cosmetic-holder.png) no-repeat;
	background-size: 100% 100%;
}

.rt-site .rt-chest-missing .rt-cos::before, .rt-site .rt-se-locked .rt-cos::before { background-image: url(/images/tracker/cosmetic-holder-dark.png); }

.rt-site .rt-cos > img, .rt-site .rt-cos > span {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	object-fit: contain;
}

.rt-site .rt-comm-reward .rt-cos, .rt-site .rt-chest-kind .rt-cos { width: 56px; height: 56px; }
.rt-site .rt-gd-ship .rt-cos { width: 64px; height: 64px; }
.rt-site .rt-se-reward .rt-cos { width: 44px; height: 44px; }
.rt-site .rt-chest-item .rt-cos { width: 100%; aspect-ratio: 1 / 1; }
.rt-site .rt-chest-detail .rt-cos { width: 100%; aspect-ratio: 1 / 1; margin: 0; }

/* A cosmetic's or an achievement's page: the picture takes the column a
   commendation's icon has, the words stand beside it; on a phone the
   picture is on top, as wide as the page. */
.rt-site .rt-site-pictured { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 32px; align-items: start; }
.rt-site .rt-ach-detail.rt-site-pictured { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.rt-site .rt-site-pictured > :first-child { grid-column: 1; grid-row: 1; }
.rt-site .rt-site-pictured > .rt-site-detail-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rt-site .rt-site-pictured .rt-ach-art { width: 100%; height: auto; margin: 0; }
/* Unlocked and waiting: the holder glows. */
.rt-site .rt-chest-unlocked .rt-cos::before, .rt-site .rt-se-ready .rt-cos::before { filter: drop-shadow(0 0 3px var(--rt-gold)); }
.rt-site .rt-comm-reward-unlocked .rt-cos::before { filter: drop-shadow(0 0 3px var(--rt-gold)); }

@media (max-width: 860px) {
	#commendations_scroll_container { padding: 18px 14px 32px; }
	.rt-site-search { height: 56px; margin-bottom: 18px; }
	#site_search { padding: 0 22px; font-size: 18px; }
	.rt-site .rt-comm-view-title { font-size: 27px; }
	.rt-site .rt-comm-detail { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; }
	.rt-site .rt-comm-detail > .rt-comm-icon { width: 72px; height: 72px; }
	.rt-site .rt-comm-detail-name { font-size: 24px; }
	.rt-site .rt-site-pictured, .rt-site .rt-ach-detail.rt-site-pictured { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.rt-site .rt-site-pictured > :first-child, .rt-site .rt-site-pictured > .rt-site-detail-body { grid-column: 1; grid-row: auto; }
	.rt-site .rt-chest-detail.rt-site-pictured .rt-cos { max-width: 440px; }
	.rt-site .rt-site-pictured .rt-ach-art { max-width: 480px; }
}

/* --- Home (js/tracker-site/home.js) --------------------------------------- */

.rt-home { display: flex; flex-direction: column; gap: 26px; }

/* The site's name over the overview, as Where is Duke wears its own. */
.rt-home-masthead { margin: 44px 0 12px; text-align: center; }
.rt-home-masthead-title { font-family: Burlesk, Eczar, Georgia, serif; font-weight: normal; font-size: 80px; line-height: 1; text-transform: uppercase; color: var(--rt-ink); }
.rt-home-masthead-line { margin: 16px 0 0; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--rt-ink); }

/* Duke's note beside the Login, in his brush lettering, an arrow drawn
   straight at the button so the two stay one line at any width. */
.rt-home-hero-actions:has(.rt-home-brush) { align-items: center; gap: 12px; }
.rt-home-brush { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-family: brushtipTexe, Georgia, serif; font-size: 22px; line-height: 1; color: #bf8a73; }
.rt-home-brush svg { flex: none; margin-top: 3px; }

.rt-home-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}

.rt-home-hero-text { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.rt-home-hero-mine { align-items: center; }

/* Signed in: the player's card beside the Ahoy, the panel's strip on its
   card art, with the currencies, the tally and the actions. */
.rt-home-account {
	flex: 0 1 460px;
	min-width: 0;
	padding: 8px 12px 10px;
	background: url(/images/commendations/profile-container.png) no-repeat;
	background-size: 100% 100%;
}

.rt-home-account:empty { display: none; }
.rt-home-h1 { margin: 0; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.1; color: var(--rt-ink); }
.rt-home-hero p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--rt-muted); }
.rt-home-hero-actions { display: flex; gap: 10px; flex-shrink: 0; }

.rt-home-card:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
/* The overview's own Import stands in for the header's (home.js). */
.rt-home-import-here #commendations_account .rt-comm-import-btn { display: none; }

/* A card per section: the figure, what it is of, a bar when there is one. */
.rt-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.rt-home-cards-mine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Amir's wide torn container (images/tracker/progress-container.png, drawn
   for these cards' shape); the edge is in the PNG's alpha, so a card has no
   border, radius or fill of its own and hover brightens it. */
.rt-home-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 20px 24px;
	background: url(/images/tracker/progress-container.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink);
	text-decoration: none;
}

.rt-home-card:hover { filter: brightness(1.14); }
.rt-home-card-label { font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 17px; line-height: 1.1; color: var(--rt-ink-soft); }
.rt-home-card-figure { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.rt-home-card-figure b { font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 30px; color: var(--rt-ink); }
.rt-home-card-figure span { font-size: 15px; color: var(--rt-muted); }
.rt-home-card-bar { display: block; width: auto; height: 6px; border-radius: 3px; background: var(--rt-track); overflow: hidden; }
.rt-home-card-bar > span { display: block; height: 100%; background: var(--rt-accent); }
.rt-home-green > span { background: var(--rt-green); }
.rt-home-card-sub { font-size: 13px; line-height: 1.3; color: var(--rt-muted); overflow-wrap: anywhere; }

.rt-home-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.rt-home-h2 { margin: 0; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 22px; color: var(--rt-ink); }
.rt-home-row-head .rt-comm-link { font-size: 14px; text-decoration: none; }
.rt-home-tiles { margin-bottom: 0; }

/* Signed in: what is within reach beside the companies. */
.rt-home-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.rt-home-two > section { min-width: 0; }
.rt-home-almost { display: flex; flex-direction: column; gap: 8px; }

.rt-home-almost-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 120px;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: url(/images/commendations/commendation-1.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink);
	text-decoration: none;
}

.rt-home-almost-row:nth-child(even) { background-image: url(/images/commendations/commendation-2.png); }
.rt-home-almost-row:hover { filter: brightness(1.14); }
.rt-home-almost-row:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-home-almost-row .rt-comm-icon { width: 44px; height: 44px; }
.rt-home-almost-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-home-almost-name { font-size: 15px; }
.rt-home-almost-count { font-size: 13px; color: var(--rt-muted); }
.rt-home-almost-pct { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: var(--rt-green); }
.rt-home-almost-bar { width: 100%; height: 5px; border-radius: 3px; background: var(--rt-track); overflow: hidden; }
.rt-home-almost-bar > span { display: block; height: 100%; background: var(--rt-green); }

/* The reputation tiles beside Almost There: the panel's, three across. */
.rt-site .rt-home-tiles-mine { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.rt-home-adds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	padding: 12px 14px;
}

.rt-home-adds-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-size: 13px; color: var(--rt-muted); }
.rt-home-adds-head .rt-home-h2 { font-size: 20px; }
.rt-home-adds-grid { display: contents; }
.rt-home-adds-grid > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--rt-muted); }
.rt-home-adds-grid b { font-weight: normal; font-size: 15px; color: var(--rt-ink); }

@media (max-width: 1000px) {
	.rt-home-two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
	.rt-home-account { flex: 1 1 100%; }
	.rt-home-cards-mine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.rt-home-card { padding: 13px 14px; }
	.rt-home-card-figure b { font-size: 23px; }
}

@media (max-width: 720px) {
	.rt-home-masthead-title { font-size: 54px; }
	.rt-home-masthead-line { margin-top: 10px; font-size: 19px; }
}

@media (max-width: 480px) {
	.rt-home-masthead-title { font-size: 44px; }
	/* Smaller, so the note still fits beside the Login. */
	.rt-home-hero-actions:has(.rt-home-brush) { gap: 10px; }
	.rt-home-brush { gap: 6px; font-size: 17px; }
	.rt-home-brush svg { width: 50px; height: 15px; }
	.rt-home-h1 { font-size: 27px; }
	.rt-home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.rt-site .rt-comm-tiles, .rt-site .rt-home-tiles-mine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.rt-home-almost-row { grid-template-columns: 40px minmax(0, 1fr) 44px; }
	.rt-home-almost-row .rt-comm-icon { width: 40px; height: 40px; }
	.rt-home-almost-bar { display: none; }
}

/* --- Achievements (js/tracker-site/achievements.js) ---------------------- */

.rt-ach-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	margin: 6px 2px 22px;
	color: var(--rt-ink-soft);
	font-size: 1.05rem;
}

.rt-ach-figure b {
	color: var(--rt-ink);
	font-size: 1.35rem;
	font-weight: normal;
}

.rt-ach-bar { width: 220px; }
.rt-ach-note { margin: 6px 2px 0; }

.rt-ach-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.rt-ach-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 20px;
	/* The panel's profile card art (profile-container.png): no border, radius or fill of its own. */
	background: url(/images/commendations/profile-container.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink-soft);
	text-decoration: none;
}

.rt-ach-card:hover { filter: brightness(1.14); }
.rt-ach-card:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }

.rt-ach-pic {
	flex: 0 0 auto;
	width: 200px;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 2px;
	background-color: var(--rt-page);
	object-fit: cover;
}

/* Still locked: the picture waits in grey. */
.rt-ach-card:not(.rt-ach-done) .rt-ach-pic { filter: grayscale(1) brightness(0.7); }
.rt-ach-grid-plain .rt-ach-card .rt-ach-pic { filter: none; }

.rt-ach-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.rt-ach-name { color: var(--rt-ink); font-size: 1.02rem; line-height: 1.2; }
.rt-ach-desc { font-size: 0.85rem; line-height: 1.35; color: var(--rt-muted); }

.rt-ach-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.8rem;
	color: var(--rt-muted);
}

.rt-ach-secret { color: #b79bd6; }
.rt-ach-done .rt-ach-status { color: var(--rt-green); }

.rt-ach-detail .rt-ach-art {
	width: 100%;
	max-width: 480px;
	margin: 6px auto 12px;
	display: block;
}

.rt-ach-mine {
	margin-top: 10px;
	color: var(--rt-ink-soft);
}

.rt-ach-mine-done { color: var(--rt-green); }

@media (max-width: 860px) {
	.rt-ach-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.rt-ach-pic { width: 128px; }
}

/* --- Milestones (js/tracker-site/milestones.js) -------------------------- */

.rt-ms-note { margin: 6px 2px 22px; }

.rt-ms-ships {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.rt-ms-ship {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 22px;
	/* A ship's, a season's or a guild's card: the reputation tiles' art
	   (images/commendations/container-N.png) in its landscape cut, cycling
	   through the four as the tiles do. */
	background: url(/images/tracker/container-1.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink-soft);
	text-decoration: none;
}

.rt-ms-ships > .rt-ms-ship:nth-child(4n+2) { background-image: url(/images/tracker/container-2.png); }
.rt-ms-ships > .rt-ms-ship:nth-child(4n+3) { background-image: url(/images/tracker/container-3.png); }
.rt-ms-ships > .rt-ms-ship:nth-child(4n+4) { background-image: url(/images/tracker/container-4.png); }

.rt-ms-ship:hover { filter: brightness(1.14); }
.rt-ms-ship:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }

.rt-ms-ship-name { color: var(--rt-ink); font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.rt-ms-ship-type { color: var(--rt-muted); font-size: 0.85rem; }
.rt-ms-ship-total { margin-top: 4px; }
.rt-ms-ship-total b { color: var(--rt-ink); font-size: 1.3rem; font-weight: normal; }
/* A running season's level, on a line of its own above what is claimed. */
.rt-se-list-level { margin-top: 4px; color: var(--rt-ink-soft); }
.rt-se-list-level b { color: var(--rt-ink); font-size: 1.3rem; font-weight: normal; }
.rt-se-list-level + .rt-ms-ship-total { margin-top: 0; }

.rt-ms-ship-best {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--rt-muted);
}

/* The panel's chip art (css/tracker.css .rt-comm-chip), as the chest's pills have it. */
.rt-ms-chip {
	padding: 4px 12px;
	background: url(/images/commendations/chip.png) no-repeat;
	background-size: 100% 100%;
	color: #c9c7bd;
	white-space: nowrap;
}

.rt-ms-head { margin: 4px 0 6px; }
.rt-ms-class { color: var(--rt-muted); font-size: 0.85rem; margin-left: 6px; }

.rt-ms-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* One line on a desktop: name, level, bar, then the count over the date. */
.rt-ms-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 76px 150px 150px;
	align-items: center;
	gap: 4px 14px;
	padding: 8px 12px;
	/* The commendation rows' torn art (css/tracker.css .rt-comm-row), alternating. */
	background: url(/images/commendations/commendation-1.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink-soft);
	font-size: 0.92rem;
}

.rt-ms-list .rt-ms-row:nth-child(even) { background-image: url(/images/commendations/commendation-2.png); }
.rt-ms-plain { grid-template-columns: minmax(0, 1fr) auto; }
.rt-ms-pinned { box-shadow: inset 3px 0 0 var(--rt-accent); }

.rt-ms-name { color: var(--rt-ink); min-width: 0; }

.rt-ms-of {
	margin-left: 8px;
	color: var(--rt-muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

.rt-ms-level { color: var(--rt-ink); }
.rt-ms-bar { width: 100%; }
.rt-ms-figures { text-align: right; line-height: 1.25; }
.rt-ms-count { color: var(--rt-muted); font-variant-numeric: tabular-nums; }
.rt-ms-when { color: var(--rt-muted); font-size: 0.8rem; }
.rt-ms-when:empty { display: none; }

@media (max-width: 1100px) {
	/* Name and level above, the bar and its figures below. */
	.rt-ms-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name level"
			"bar  figures";
	}
	.rt-ms-name    { grid-area: name; }
	.rt-ms-level   { grid-area: level; text-align: right; }
	.rt-ms-bar     { grid-area: bar; }
	.rt-ms-figures { grid-area: figures; }
	.rt-ms-plain   { grid-template-areas: "name count"; }
	.rt-ms-plain .rt-ms-count { grid-area: count; }
}

/* --- Seasons (js/tracker-site/seasons.js) -------------------------------- */

.rt-se-standing { color: var(--rt-muted); font-size: 0.85rem; }
.rt-se-running { color: var(--rt-green); }
.rt-se-waiting, .rt-se-waiting b { color: var(--rt-gold); }

.rt-se-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	margin: 6px 2px 4px;
	color: var(--rt-ink-soft);
	font-size: 1.05rem;
}

.rt-se-renown { margin-bottom: 10px; }
.rt-se-next { color: var(--rt-muted); font-size: 0.9rem; }

/* The season as Rare lays it out: a tier is a row of level cards, each on
   one of Amir's torn containers (as the overview's cards), naming its track.
   The reached levels tick their number. */
.rt-se-tier-head { display: flex; align-items: baseline; gap: 12px; }
.rt-se-tier-levels { color: var(--rt-muted); font-size: 13px; }

.rt-se-tier {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}

.rt-se-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 16px 18px 18px;
	background: url(/images/tracker/container-1.png) no-repeat;
	background-size: 100% 100%;
}

.rt-se-tier .rt-se-card:nth-child(4n+2) { background-image: url(/images/tracker/container-2.png); }
.rt-se-tier .rt-se-card:nth-child(4n+3) { background-image: url(/images/tracker/container-3.png); }
.rt-se-tier .rt-se-card:nth-child(4n+4) { background-image: url(/images/tracker/container-4.png); }

.rt-se-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.rt-se-number { font-family: Eczar, Georgia, serif; font-size: 19px; color: var(--rt-ink); white-space: nowrap; }
.rt-se-reached .rt-se-number { color: var(--rt-green); }

/* A Premium Tier level: named at the foot of its card, in gold under a
   gold rule. A free level carries nothing, so the gold alone says which. */
.rt-se-card-foot {
	margin-top: auto;
	padding-top: 10px;
	border-top: 2px solid rgba(217, 180, 91, 0.55);
	color: var(--rt-gold);
	font-family: Eczar, Georgia, serif;
	font-size: 17px;
	text-align: center;
}

/* A premium reward on a card of another track says so itself. */
.rt-se-premium-note { margin-left: 8px; color: var(--rt-gold); }

.rt-se-rewards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rt-se-reward {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--rt-ink-soft);
}

.rt-se-pic {
	background: var(--rt-cosmetic-tile);
	object-fit: contain;
}

/* A voyage: Rare gives it no picture, so the scroll its page draws. */
.rt-se-voyage { display: flex; align-items: center; justify-content: center; }
.rt-se-voyage svg { width: 72%; height: 72%; }

.rt-se-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-se-name { color: var(--rt-ink); font-size: 0.92rem; overflow-wrap: anywhere; }
.rt-se-kind { color: var(--rt-muted); font-size: 13px; }
.rt-se-said { margin-left: 8px; }

.rt-se-claimed .rt-se-said, .rt-se-have .rt-se-said { color: var(--rt-green); }
.rt-se-ready .rt-se-said { color: var(--rt-gold); }
/* Not earned yet: the words go quiet; the picture keeps its colours in
   Duke's dark holder (below). */
.rt-se-locked .rt-se-name { color: var(--rt-muted); }
/* A Pirate Legend reward: its name in Athena's blue, earned or not. */
.rt-se-legend .rt-se-name { color: var(--rt-accent); }

/* --- Guilds (js/tracker-site/guilds.js) ----------------------------------- */

.rt-gd-motto { color: var(--rt-muted); font-style: italic; overflow-wrap: anywhere; }
.rt-ms-head .rt-gd-motto { margin-top: 4px; }
.rt-gd-members { margin: 0 2px 4px; color: var(--rt-muted); font-size: 0.9rem; }
.rt-gd-hint { margin: -4px 2px 8px; color: var(--rt-muted); font-size: 0.85rem; }

.rt-gd-ships {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}

.rt-gd-ship {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	/* The panel's profile card art (profile-container.png): no border, radius or fill of its own. */
	background: url(/images/commendations/profile-container.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink-soft);
}

.rt-gd-ship-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.rt-gd-ship-name { color: var(--rt-ink); overflow-wrap: anywhere; }
.rt-gd-ship-type { color: var(--rt-muted); font-size: 0.82rem; }
.rt-gd-state { color: var(--rt-muted); font-size: 0.8rem; }
.rt-gd-at-sea { color: var(--rt-green); }
.rt-gd-sail { color: var(--rt-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
a.rt-gd-sail { text-decoration-color: rgba(154, 151, 141, 0.35); }
a.rt-gd-sail:hover { color: var(--rt-ink-soft); text-decoration-color: currentColor; }
a.rt-gd-sail:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }

.rt-gd-voyage-list { display: flex; flex-direction: column; gap: 4px; }
/* Past the first ten, until "Show N more". */
.rt-gd-voyages:not(.rt-gd-open) .rt-gd-extra { display: none; }

.rt-gd-voyage {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 16px;
	/* The commendation rows' torn art, alternating (css/tracker.css .rt-comm-row). */
	background: url(/images/commendations/commendation-1.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink-soft);
	font-size: 0.92rem;
}

.rt-gd-voyage-list .rt-gd-voyage:nth-child(even) { background-image: url(/images/commendations/commendation-2.png); }
.rt-gd-voyage:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-gd-voyage-head { display: flex; justify-content: space-between; gap: 10px; }
.rt-gd-voyage-ship { color: var(--rt-ink); min-width: 0; overflow-wrap: anywhere; }
.rt-gd-voyage-when { color: var(--rt-muted); font-size: 0.8rem; white-space: nowrap; }

/* --- Recent (js/tracker-site/recent.js) ----------------------------------- */

.rt-rc-list { display: flex; flex-direction: column; gap: 4px; }

/* A row on the commendation rows' torn art, alternating: the mark of what
   moved, then what. */
.rt-rc-row {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	gap: 4px 14px;
	padding: 10px 16px;
	background: url(/images/commendations/commendation-1.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink-soft);
	font-size: 0.95rem;
	line-height: 1.4;
}

.rt-rc-list .rt-rc-row:nth-child(even) { background-image: url(/images/commendations/commendation-2.png); }

/* The mark, as tall as the first line beside it. */
.rt-rc-kind { display: flex; align-items: center; justify-content: center; height: 1.4em; color: var(--rt-muted); }

/* The game's marks (images/tracker/icons), tinted; currency's is the gold coin. */
.rt-rc-icon {
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.rt-rc-icon-commendations { -webkit-mask-image: url(/images/tracker/icons/commendations.svg); mask-image: url(/images/tracker/icons/commendations.svg); }
.rt-rc-icon-achievement { -webkit-mask-image: url(/images/tracker/icons/achievement.svg); mask-image: url(/images/tracker/icons/achievement.svg); }
.rt-rc-icon-milestone { -webkit-mask-image: url(/images/tracker/icons/milestone.svg); mask-image: url(/images/tracker/icons/milestone.svg); }
.rt-rc-icon-guild { -webkit-mask-image: url(/images/tracker/icons/guild.svg); mask-image: url(/images/tracker/icons/guild.svg); }
.rt-rc-icon-currency { background: url(/images/commendations/progression/currency-gold.svg) no-repeat center / contain; -webkit-mask: none; mask: none; }
.rt-rc-text { min-width: 0; overflow-wrap: anywhere; }
.rt-rc-note { display: block; color: var(--rt-muted); font-size: 13px; }

/* Currency: a line per coin that moved, its coin in the marks' column, the
   change and the new total lined up on the right. The lines together are
   the way to Currency History. */
.rt-rc-row-currency .rt-rc-text { grid-column: 1 / -1; }
.rt-rc-cur-list { display: flex; flex-direction: column; gap: 8px; max-width: 416px; color: inherit; text-decoration: none; }
.rt-rc-cur { display: flex; align-items: center; gap: 14px; }
.rt-rc-cur-icon { flex: none; width: 20px; height: 20px; margin: 0 1px; }
.rt-rc-cur-name { color: var(--rt-ink); }
.rt-rc-cur-list:hover .rt-rc-cur-name { text-decoration: underline; }
.rt-rc-cur-list:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 4px; }
.rt-rc-cur-figs { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; line-height: 1.25; font-variant-numeric: tabular-nums; }
.rt-rc-cur-delta { color: var(--rt-accent); }
.rt-rc-cur-down { color: var(--rt-red); }
.rt-rc-cur-now { color: var(--rt-muted); font-size: 13px; }

/* An import's commendation changes, as the panel's Recent Progress draws
   them, each category titled with the pirate: "Commendations Progressed". */
/* A day: its date, a size up from the other titles, then each kind of event
   under its name, centred, in the pills' order. */
.rt-site .rt-rc-day > .rt-comm-section-title { font-size: 24px; }
/* Between one day and the next, a thin line that fades out at both ends. */
.rt-rc-day + .rt-rc-day { margin-top: 36px; padding-top: 30px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.55) 25%, rgba(255, 255, 255, 0.55) 75%, transparent) top / 100% 1px no-repeat; }
.rt-rc-group-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 10px; text-align: center; font-family: Eczar, Georgia, serif; font-weight: 400; font-size: 19px; color: var(--rt-ink); }
.rt-rc-group-title .rt-rc-icon { color: var(--rt-muted); }
.rt-rc-block { padding: 2px 0 6px; }
.rt-rc-block .rt-comm-section-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 6px; font-family: ProzaLibre, Georgia, serif; font-size: 15px; color: var(--rt-ink); }
.rt-rc-block .rt-comm-section-title .rt-rc-icon { margin-right: 6px; color: var(--rt-muted); }
.rt-rc-block-when { color: var(--rt-muted); font-size: 13px; }
.rt-rc-block .rt-comm-list { margin-bottom: 4px; }
.rt-rc-block .rt-comm-recent-more { margin: 2px 0 6px; color: var(--rt-muted); font-size: 13px; }
/* Past the first rows, until "Show N more". */
.rt-rc-feed:not(.rt-rc-open) .rt-rc-extra { display: none; }

/* --- Chest (js/tracker-site/chest.js) ------------------------------------- */

/* New in the shops: the latest update's sets on the Chest, every update on its page. */
.rt-chest-new { margin-bottom: 8px; }
.rt-home-new { margin: 28px 0 8px; }
.rt-chest-new-link { margin: 0 0 18px; }
.rt-chest-new-when { margin: -4px 0 10px; color: var(--rt-muted); }
.rt-chest-new-title .rt-chest-new-when { margin: 0; font-size: 15px; font-weight: normal; }
.rt-chest-set { margin: 14px 0 8px; font-size: 17px; font-weight: normal; color: var(--rt-ink); }
.rt-chest-set-where { color: var(--rt-muted); font-size: 14px; }

/* A note stands where the figures would, with the room they leave under them. */
.rt-chest-note { margin: 6px 0 22px; }

/* The chest page: every kind as a small card, by category. */
.rt-chest-kinds {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.rt-chest-kind {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: url(/images/commendations/unlock-card.png) no-repeat;
	background-size: 100% 100%;
	color: var(--rt-ink);
	text-decoration: none;
}

.rt-chest-kind:hover { filter: brightness(1.14); }
.rt-chest-kind:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-chest-kind-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-chest-kind-name { font-size: 15px; line-height: 1.2; color: var(--rt-ink); }
.rt-chest-kind-count { font-size: 13px; color: var(--rt-muted); }
.rt-chest-kind-count b { font-weight: normal; color: var(--rt-ink); }

.rt-chest-pic { display: block; background: var(--rt-cosmetic-tile); object-fit: contain; }
/* A picture that never arrived: the same space, empty. */
.rt-chest-nopic { box-sizing: border-box; }

/* A kind: its neighbours as pills, then the filters and the search, then every cosmetic. */
.rt-chest-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* The panel's chip art (css/tracker.css .rt-comm-chip), the current one lit. */
.rt-chest-pill {
	padding: 7px 18px;
	background: url(/images/commendations/chip.png) no-repeat;
	background-size: 100% 100%;
	color: #c9c7bd;
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
}

.rt-chest-pill span { color: var(--rt-muted); margin-left: 4px; }
.rt-chest-pill:hover { filter: brightness(1.14); color: var(--rt-ink); }
.rt-chest-pill:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-chest-pill-on { filter: brightness(1.3); color: var(--rt-ink); }
.rt-chest-pill-on span { color: var(--rt-ink-soft); }

.rt-chest-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 14px;
	margin: 0 0 14px;
	border-top: 1px solid var(--rt-line);
}

/* Recent's pills sit straight under the line, with no rule above them,
   each kind's with its mark. */
.rt-rc-chips { padding-top: 0; border-top: 0; margin: 4px 0 18px; }
.rt-rc-chips .rt-chest-chip { display: inline-flex; align-items: center; gap: 8px; }
.rt-rc-chips .rt-rc-icon { width: 16px; height: 16px; margin: 0; color: inherit; }

.rt-chest-chip {
	padding: 7px 18px;
	border: none;
	border-radius: 0;
	background: url(/images/commendations/chip.png) no-repeat;
	background-size: 100% 100%;
	color: #c9c7bd;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.rt-chest-chip span { color: var(--rt-muted); margin-left: 2px; }
.rt-chest-chip:hover { filter: brightness(1.14); color: var(--rt-ink); }
.rt-chest-chip:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-chest-chip-on { filter: brightness(1.3); color: var(--rt-ink); }
.rt-chest-chip-on span { color: var(--rt-ink-soft); }

.rt-chest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 12px;
}

/* Each cosmetic's card on the stat cards' torn art, as the other boxes. */
.rt-chest-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 2px;
	border: 8px solid transparent;
	border-radius: 0;
	border-image: url(/images/tracker/progress-container.png) 18 fill / 8px stretch;
	background: none;
	color: var(--rt-ink);
	text-decoration: none;
}

.rt-chest-item:hover { filter: brightness(1.12); }
/* A placeholder tile (an item nobody has imported yet) is no link: nothing to light up. */
.rt-chest-unknown { cursor: default; }
.rt-chest-unknown:hover { filter: none; }
.rt-chest-item:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.rt-chest-name { font-size: 14px; line-height: 1.3; color: var(--rt-ink); overflow-wrap: anywhere; }
.rt-chest-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; color: var(--rt-muted); }
/* Duke's stock on the Chest page: a line under the title, and when each item leaves. */
.rt-chest-duke-note { margin: -4px 0 12px; color: var(--rt-muted); font-size: 14px; }
.rt-chest-until { display: block; color: var(--rt-muted); font-size: 13px; }
.rt-chest-duke { margin-bottom: 8px; }
.rt-chest-price { color: var(--rt-gold); }
/* Doubloons are the game's blue coin. */
.rt-chest-doubloons { color: var(--rt-accent); }
/* The coin after a price, as the game prints one. */
.rt-chest-coin { width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; }
.rt-chest-owned .rt-chest-said { color: var(--rt-green); }
.rt-chest-unlocked .rt-chest-said { color: var(--rt-gold); }
/* Not owned yet: the name goes quiet; the picture keeps its colours. */
.rt-chest-missing .rt-chest-name { color: var(--rt-muted); }

/* One cosmetic, as large as the column allows. */
.rt-chest-detail .rt-chest-art { background: var(--rt-cosmetic-tile); object-fit: contain; }
.rt-chest-detail .rt-comm-detail-meta { margin-top: 2px; }
.rt-chest-detail .rt-comm-detail-desc { margin-top: 10px; }
.rt-chest-mine { margin-top: 10px; color: var(--rt-ink-soft); }
.rt-chest-mine-owned { color: var(--rt-green); }
.rt-chest-mine-unlocked { color: var(--rt-gold); }
.rt-chest-how { text-align: left; }
.rt-chest-steps { margin: 6px 0 2px; padding-left: 20px; line-height: 1.45; color: var(--rt-ink-soft); }
.rt-chest-steps li { margin: 4px 0; }
.rt-chest-done { color: var(--rt-green); }
.rt-chest-progress, .rt-chest-seen { font-size: 13px; color: var(--rt-muted); }

@media (max-width: 540px) {
	/* One a row: two leave too little room for a name like "Blunderbusses". */
	.rt-chest-kinds { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.rt-chest-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
	.rt-chest-item { padding: 0; }
}

/* The page's words as the server writes them (rt-map-body-modifier/tracker.mjs),
   for the moment before the view draws them in their place. */
.rt-prerender { max-width: 760px; margin: 24px auto; padding: 0 16px; color: var(--rt-ink); text-align: center; }
.rt-prerender h2 { margin: 12px 0; font-weight: 400; }
.rt-prerender img { display: block; margin: 12px auto; max-width: 100%; height: auto; }
.rt-prerender p, .rt-prerender li { color: var(--rt-muted); }
.rt-prerender ul { list-style: none; padding: 0; }
.rt-prerender a { color: var(--rt-accent); }