/* Commendation Tracker components, shared by both hosts: the map's side
   panel (index.html, under css/index.css) and the standalone tracker site
   (tracker/index.html). Rules here style what the parts in js/commendations/
   render; each host lays out the frame around it in its own stylesheet.
   Versioned like the scripts: bump ?v= in BOTH index.html files. */

.rt-comm-view-title {
	color: #efefe6;
	font-size: 1.375rem;
	margin: 8px 0 14px 0;
	text-align: center;
}

.rt-comm-view-sub {
	color: #9a978d;
	text-align: center;
	font-size: 0.92rem;
	line-height: 1.4;
	margin: -8px auto 16px auto;
	max-width: 380px;
}

.rt-comm-crumb {
	display: inline-block;
	color: #6fafc7;
	text-decoration: none;
	font-size: 0.95rem;
	margin-bottom: 4px;
}

.rt-comm-section-title {
	color: #6fafc7;
	font-size: 1.05rem;
	margin: 14px 2px 8px 2px;
}

/* A closed What's left group: the title is the button that opens it. */
.rt-comm-section-toggle {
	display: block;
	width: 100%;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	margin: 4px 0 0 0;
	background: none;
	font: inherit;
	font-size: 1.05rem;
	color: #6fafc7;
	text-align: left;
	cursor: pointer;
}

.rt-comm-section-toggle::before {
	content: "▸";
	display: inline-block;
	width: 1em;
	color: #9a978d;
}

.rt-comm-section-toggle[aria-expanded="true"]::before { content: "▾"; }

.rt-comm-list[hidden] { display: none; }

.rt-comm-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Root-view faction tiles: medal art with the in-distinction level over it,
   the way Rare's reputation page presents each company. */
.rt-comm-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.rt-comm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	padding: 20px 14px 18px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #E4E4E4;
	text-decoration: none;
}

.rt-comm-tile-art-1 { background-image: url(/images/commendations/container-1.png); }
.rt-comm-tile-art-2 { background-image: url(/images/commendations/container-2.png); }
.rt-comm-tile-art-3 { background-image: url(/images/commendations/container-3.png); }
.rt-comm-tile-art-4 { background-image: url(/images/commendations/container-4.png); }
.rt-comm-tile-art-tall-tales { background-image: url(/images/commendations/tall-tale-container.png); }
.rt-comm-tile-art-adventures-at-sea { background-image: url(/images/commendations/adventures-at-sea-container.png); }

.rt-comm-tile:hover {
	filter: brightness(1.14);
}

.rt-comm-tile-medal {
	position: relative;
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}

.rt-comm-tile-medal img {
	max-width: 100%;
	max-height: 100%;
}

/* The small hexagon-company icons read better a little smaller. */
.rt-comm-tile-medal-plain img {
	max-width: 72px;
	max-height: 72px;
	opacity: 0.9;
}

.rt-comm-tile-level {
	position: absolute;
	top: 54%;
	left: 50%;
	transform: translate(-50%, -58%);
	font-family: Eczar, Georgia, "serif";
	font-size: 1.5rem;
	font-weight: normal;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
}

.rt-comm-tile-level-long {
	font-size: 1.35rem;
}

.rt-comm-tile-name {
	font-size: 1.02rem;
	color: #efefe6;
}

.rt-comm-tile-rank {
	font-size: 0.78rem;
	color: #6fafc7;
	min-height: 1em;
}

.rt-comm-tile .rt-comm-count {
	margin-top: 2px;
}

.rt-comm-tile .rt-comm-count-progress {
	align-items: center;
}

@media (max-width: 340px) {
	.rt-comm-tiles { grid-template-columns: 1fr; }
}

.rt-comm-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	color: #E4E4E4;
	text-decoration: none;
	/* Torn-edge panels, the same treatment as the storm tracker's lists,
	   recoloured to the tracker's slate. The edge is in the PNG's alpha, so
	   the row carries no border, no radius and no fill of its own: the panel
	   background shows through the torn corners. Stretched to the row, which
	   the hand-drawn edge tolerates far better than a photo would. */
	background-color: transparent;
	background-image: url(/images/commendations/commendation-1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	border-radius: 0;
}

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

/* Hover brightens the tile rather than swapping a fill, which would bleed
   through the transparent edge. */
.rt-comm-row:hover {
	filter: brightness(1.14);
}

.rt-comm-faction-row {
	justify-content: flex-start;
	/* Tall enough for the progress-bar variant so tallies arriving after
	   sign-in don't reflow the list. */
	min-height: 31px;
}

.rt-comm-faction-row .rt-comm-count {
	margin-left: auto;
}

.rt-comm-count {
	color: #6fafc7;
	font-size: 0.9rem;
}

.rt-comm-nowrap { white-space: nowrap; }

.rt-comm-pin {
	fill: #6fafc7;
	margin-left: 8px;
	vertical-align: -1px;
	transform: rotate(35deg);
}

.rt-comm-icon {
	flex-shrink: 0;
	border-radius: 3px;
}

.rt-comm-row-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rt-comm-row-name {
	font-size: 1rem;
}

.rt-comm-row-desc {
	font-size: 0.82rem;
	color: #9a978d;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rt-comm-detail {
	text-align: center;
	color: #E4E4E4;
	padding-top: 10px;
}

.rt-comm-detail-name {
	font-size: 1.4rem;
	margin: 10px 0 6px 0;
	color: #efefe6;
	font-weight: normal;
}

.rt-comm-detail-desc {
	font-size: 1rem;
	margin-bottom: 12px;
}

.rt-comm-detail-meta {
	font-size: 0.9rem;
	color: #6fafc7;
	margin-top: 12px;
}

.rt-comm-error {
	color: #E4E4E4;
	text-align: center;
	padding: 30px 10px;
}

#commendations_search_wrap {
	padding: 12px 14px 0 14px;
}

/* The same field as Custom Maps: the torn frame is an image behind a
   transparent input rather than a border, so the edge is drawn rather than
   rectangular. Without the orange glow, which belongs to a required field. */
.commendations_search_box {
	position: relative;
	height: 50px;
}

.commendations_search_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#commendations_search {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/* Set unconditionally: the global :placeholder-shown rule would otherwise
	   swap the face the moment you type and the box would shift. */
	font-family: ProzaLibre;
	background: transparent;
	border: none;
	color: #efefe6;
	font-size: 1rem;
	padding: 8px 14px;
	outline: none;
}

#commendations_search:focus {
	border: none;
	outline: none;
}

.rt-comm-grades {
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: 36px;
	margin: 8px auto 4px auto;
	text-align: left;
}

@media (max-width: 360px) {
	.rt-comm-grades { grid-template-columns: auto; }
}

.rt-comm-grade-row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	color: #E4E4E4;
	font-size: 0.95rem;
	padding: 2px 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rt-comm-grade-row span:last-child {
	color: #6fafc7;
}

.rt-comm-grades-note {
	font-size: 0.8rem;
	color: #9a978d;
	max-width: 300px;
	margin: 6px auto 0 auto;
}

/* Commendation Tracker. Account strip + bookmarklet setup */

#commendations_account {
	padding: 10px 14px 0 14px;
}

/* Authed strip as a miniature of Rare's profile header: gamerpic, tag,
   currencies, completion. The min-heights below reserve its space. */
.rt-comm-account-profile {
	line-height: 1.35;
}

.rt-comm-gamerpic {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex: 0 0 auto;
	background-color: #26292e;
}

.rt-comm-profile-main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.rt-comm-profile-tag {
	font-size: 1.05rem;
	color: #efefe6;
}

.rt-comm-imported {
	font-size: 0.82rem;
	color: #7e919b;
	font-weight: normal;
}

/* The words under the card: update, share, and (with several pirates)
   switch. Links rather than icons so they read and hit on a phone. */
.rt-comm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	padding: 4px 12px 0;
	font-size: 0.88rem;
	line-height: 1.5;
}


/* The pirate's own name beside the gamertag on a multi-pirate account. */
.rt-comm-pirate-name {
	font-size: 0.88rem;
	color: #b8c7cf;
	font-weight: normal;
}

/* The picker: one button per pirate, a note beside each. */
.rt-comm-pirate-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rt-comm-pirate-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 14px;
}

.rt-comm-pirate-btn {
	min-width: 150px;
	text-align: center;
	text-decoration: none;
}

.rt-comm-pirate-btn-off {
	opacity: 0.45;
	cursor: default;
}

/* Keeps its own column and wraps inside it. min-width:0 is what lets a flex
   item wrap below its content width instead of pushing the row apart. */
.rt-comm-pirate-note {
	flex: 1;
	min-width: 0;
	font-size: 0.88rem;
	color: #9a978d;
}

/* "Pirate 2" beside a shared card's gamertag: the slot, never the name. */
.rt-comm-pirate-no {
	font-size: 0.82rem;
	color: #b8c7cf;
	font-weight: normal;
}

.rt-comm-currencies {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 12px;
	color: #d3e2e8;
	font-size: 0.92rem;
}

.rt-comm-currency {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.rt-comm-currency img {
	width: 17px;
	height: 17px;
}

.rt-comm-account-wrap { flex-wrap: wrap; }

/* Keep the sentence and button on one row; only the notice wraps under. */
.rt-comm-account-wrap > span { flex: 1 1 0; }

.rt-comm-signin-notice {
	flex-basis: 100%;
	color: #00c3ff;
	font-size: 0.92rem;
}

.rt-comm-account {
	/* Reserved space: async auth must never shift the list below. Signed-out
	   renders once at the base height; signed-in states (checking / imported
	   with digest) all occupy the taller reserved variant. */
	min-height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #E4E4E4;
	padding: 8px 12px;
}

.rt-comm-account-authed {
	/* Measured height of the common state (profile strip: gamerpic, tag,
	   currencies, completion, digest). Reserve it so the checking loaded
	   swap doesn't shift the list below. */
	min-height: 110px;
}

@media (max-width: 480px) {
	.rt-comm-gamerpic { width: 44px; height: 44px; }
	.rt-comm-profile-tag { font-size: 1rem; }
	.rt-comm-currencies { font-size: 0.85rem; gap: 2px 10px; }
	.rt-comm-currency img { width: 15px; height: 15px; }
	.rt-comm-account-authed { min-height: 128px; }
}

/* The reserve above keeps the checking state from shifting the list; once
   the card is drawn the nav under it takes that room instead. Placed after
   the reserve rules so it wins at every width. */
.rt-comm-account-profile { min-height: 0; }

/* Custom Maps' button art, duplicated into the tracker's own folder so a
   future redesign of either panel can't break the other. */
.rt-comm-signin-btn {
	background-image: url(/images/commendations/login-button.png);
	background-color: transparent;
	background-size: 100% 100%;
	border: none;
	border-radius: 0;
	font-size: 1.0625rem;
	color: #ffffff;
	width: 100px;
	height: 45px;
	cursor: pointer;
	font-family: 'Eczar', serif;
	flex: 0 0 auto;
}

.rt-comm-signin-btn:hover { opacity: 0.9; }

.rt-comm-import-btn {
	display: inline-block;
	background-image: url(/images/commendations/auth-button.png);
	background-color: transparent;
	background-size: 100% 100%;
	border: none;
	border-radius: 0;
	color: #ffffff;
	cursor: pointer;
	padding: 11px 22px;
	font-size: 1rem;
	font-family: 'Eczar', serif;
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto;
}

.rt-comm-import-btn:hover { opacity: 0.9; }

.rt-comm-btn {
	display: inline-block;
	text-decoration: none;
	background-color: #2d5a2d;
	color: #efefe6;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 4px;
	font-size: 0.9rem;
	padding: 6px 14px;
	cursor: pointer;
	white-space: nowrap;
}

.rt-comm-btn:hover { background-color: #377037; }

.rt-comm-btn-quiet {
	background-color: #26292e;
}

.rt-comm-setup {
	color: #E4E4E4;
	margin: 0 auto;
}

.rt-comm-setup-steps {
	margin: 0 0 12px 0;
	font-size: 0.92rem;
	line-height: 1.7;
	padding-left: 14px;
}

.rt-comm-setup-steps li { margin-bottom: 14px; }

.rt-comm-step-hint {
	color: #9a978d;
	font-size: 0.85rem;
}

.rt-comm-setup-note .rt-comm-btn { margin: 8px 0; }

/* The one thing a new player must do, so it gets the main button art. */
.rt-comm-bookmarklet {
	display: inline-block;
	margin: 10px 0 6px 0;
	padding: 12px 26px;
	background: url(/images/commendations/primary-button.png) no-repeat;
	background-size: 100% 100%;
	color: #ffffff;
	font-family: 'Eczar', serif;
	text-decoration: none;
	white-space: nowrap;
	cursor: grab;
}

.rt-comm-bookmarklet:hover { filter: brightness(1.12); }

/* One small nudge on arrival says "this moves"; it never loops. */
@keyframes rt-comm-nudge {
	0%, 100% { transform: translateY(0); }
	20% { transform: translateY(-6px); }
	40% { transform: translateY(0); }
	60% { transform: translateY(-3px); }
	80% { transform: translateY(0); }
}

.rt-comm-bookmarklet { animation: rt-comm-nudge 1.1s ease-in-out 0.6s 1; }

@media (prefers-reduced-motion: reduce) {
	.rt-comm-bookmarklet { animation: none; }
}
.rt-comm-bookmarklet:active { cursor: grabbing; }

.rt-comm-link {color: #6fafc7;}

.rt-comm-setup-foot {
	font-size: 0.85rem;
	color: #9a978d;
}

.rt-comm-setup-center { text-align: center; }

/* Comparison cell: their number over yours, right-aligned like the plain
   progress figure it replaces so rows stay on the same grid. */
.rt-comm-vs {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
	/* The row is a flex container with no growing child, so every right-hand
	   element earns its place at the edge with auto margin. Same as
	   .rt-comm-check and .rt-comm-progress-num, which this replaces. */
	margin-left: auto;
	gap: 1px;
	line-height: 1.25;
	text-align: right;
}

.rt-comm-vs-them { color: #00c3ff; font-size: 0.95rem; white-space: nowrap; }
.rt-comm-vs-you  { color: #9a978d; font-size: 0.72rem; white-space: nowrap; }
/* Green is this UI's word for "done" everywhere else; keep it that way when
   the value is a tick rather than a fraction. */
.rt-comm-vs .rt-comm-vs-done { color: #7dbb7d; }

/* The share link: a read-only field beside its copy button, because a link
   people hand round has to be selectable as well as copyable. */
.rt-comm-share-url {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 12px 0;
}

.rt-comm-share-url input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	background-color: #1a1a1a;
	color: #E4E4E4;
	font-size: 0.8rem;
}

.rt-comm-share-url .rt-comm-btn { flex: none; margin: 0; }

.rt-comm-share-toggle {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	cursor: pointer;
}

.rt-comm-share-toggle input { margin-top: 2px; flex: none; }

/* A shared Reputation reuses the signed-in card on torn-edge art with a blue
   tint, so a viewer can tell at a glance whose numbers they are reading. The
   art sits on its own layer: the mask keeps the tint off the torn corners, and
   a mask that fails to load hides only the art, never the card. */
.rt-comm-account-shared {
	position: relative;
	z-index: 0;
	background: none;
	border: none;
}

.rt-comm-account-shared::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;
}

/* The owner's digest line is a link to Recent Progress. A viewer has no such
   page to open, so the same line renders as plain text. */
.rt-comm-digest-static {
	cursor: default;
	text-decoration: none;
}

/* Button art shared with Custom Maps, matching the import CTA's treatment. */
.rt-comm-primary-btn {
	display: inline-block;
	background-image: url(/images/commendations/primary-button.png);
	background-color: transparent;
	background-size: 100% 100%;
	border: none;
	border-radius: 0;
	color: #ffffff;
	cursor: pointer;
	padding: 10px 20px;
	margin: 8px 0;
	font-size: 0.95rem;
	font-family: 'Eczar', serif;
	text-decoration: none;
	white-space: nowrap;
}

.rt-comm-primary-btn:hover { opacity: 0.9; }

.rt-comm-facts {
	margin: 0 0 12px 0;
	padding-left: 20px;
	font-size: 0.85rem;
	color: #9a978d;
	line-height: 1.6;
}

.rt-comm-facts li { margin-bottom: 7px; }

.rt-comm-howto {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 4px auto 16px auto;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 4px;
	background-color: #1f2125;
}

.rt-comm-setup-callout {
	margin: 4px 0 14px 0;
	padding: 12px 14px;
	background-color: #1f2125;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 4px;
	color: #E4E4E4;
	line-height: 1.5;
}

.rt-comm-setup-hint,
.rt-comm-setup-note {
	font-size: 0.85rem;
	color: #9a978d;
	margin: 0 0 12px 0;
	line-height: 1.6;
}

.rt-comm-setup-hint { margin: 8px 0 0 0; }

/* Commendation Tracker. Progress overlay */

.rt-comm-row-done { opacity: 0.72; }

.rt-comm-check {
	color: #7dbb7d;
	margin-left: auto;
	font-size: 1rem;
}

.rt-comm-progress-num {
	margin-left: auto;
	color: #6fafc7;
	font-size: 0.82rem;
	white-space: nowrap;
}

.rt-comm-count-progress {
	display: flex;
	flex-direction: column;
	gap: 3px;
	/* Rows right-align the fraction over its bar; tiles re-center it below. */
	align-items: flex-end;
}

.rt-comm-minibar {
	display: block;
	width: 64px;
	height: 4px;
	background-color: rgba(255,255,255,0.12);
	border-radius: 2px;
	overflow: hidden;
}

.rt-comm-minibar > span {
	display: block;
	height: 100%;
	background-color: #0a7ca8;
}

/* Up to four at once, which is wider than a narrow panel. */
.rt-comm-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 16px auto;
}

/* A lone chip centred looks like a headline; left it sits as a quiet link. */
.rt-comm-chips:has(> :only-child) { justify-content: flex-start; }

.rt-comm-chip {
	background: url(/images/commendations/chip.png) no-repeat;
	background-size: 100% 100%;
	color: #efefe6;
	font-size: 0.88rem;
	padding: 7px 18px;
	text-decoration: none;
}

.rt-comm-chip:hover { filter: brightness(1.14); }

@media (max-width: 380px) {
	.rt-comm-chip { padding: 7px 12px; }
}

.rt-comm-mine {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #E4E4E4;
	font-size: 0.95rem;
	margin-bottom: 12px;
}

.rt-comm-mine-done { color: #7dbb7d; }

.rt-comm-bar {
	display: inline-block;
	width: 160px;
	height: 8px;
	background-color: rgba(255,255,255,0.12);
	border-radius: 4px;
	overflow: hidden;
}

.rt-comm-bar > span {
	display: block;
	height: 100%;
	background-color: #0a7ca8;
}

.rt-comm-grade-earned span { color: #7dbb7d; }
.rt-comm-grade-earned span:last-child { color: #7dbb7d; }

.rt-comm-digest {
	color: #6fafc7;
	font-size: 0.82rem;
	text-decoration: none;
}

a.rt-comm-digest { display: inline-block; width: fit-content; }
a.rt-comm-digest:hover { text-decoration: underline; }

.rt-comm-recent-entry { margin-bottom: 26px; }

.rt-comm-recent-date {
	color: #efefe6;
	font-size: 1.02rem;
	margin: 0 0 6px 0;
	text-align: center;
}

.rt-comm-delta-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
	/* Rows have no growing child, so a trailing cell only reaches the right
	   edge with an auto margin. Without it this drifted with the description
	   length, same as the compare cell did. */
	margin-left: auto;
	gap: 2px;
}

.rt-comm-delta { color: #00c3ff; font-size: 0.95rem; }
.rt-comm-delta-down { color: #c98484; }
.rt-comm-delta-now { color: #6fafc7; font-size: 0.78rem; }

.rt-comm-chart {
	max-width: 420px;
	margin: 0 auto 22px auto;
}

.rt-comm-chart-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: #efefe6;
}

.rt-comm-chart-head img { width: 18px; height: 18px; }

.rt-comm-chart-now { margin-left: auto; color: #00c3ff; }

.rt-comm-spark {
	display: block;
	width: 100%;
	height: 100px;
	background-color: #1f2125;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 4px;
}

.rt-comm-chart-foot {
	display: flex;
	justify-content: space-between;
	color: #9a978d;
	font-size: 0.78rem;
	margin-top: 4px;
}

.rt-comm-chart-range {
	text-align: center;
	color: #9a978d;
	font-size: 0.85rem;
	margin-top: 4px;
}

a.rt-comm-currencies { display: inline-flex; text-decoration: none; cursor: pointer; }

/* The default ring traces every child box; a plain one stays a rectangle. */
#commendations_sections_container a:focus-visible { outline: 2px solid #00c3ff; outline-offset: 2px; }
a.rt-comm-currencies:hover .rt-comm-currency { color: #00c3ff; }

.rt-comm-recent-more {
	color: #9a978d;
	font-size: 0.85rem;
	margin: 4px 0 8px 0;
}

.rt-comm-supplemental {margin-top: 12px;background-color: #1f2125;border: 1px solid rgba(255,255,255,0.08);border-radius: 4px;padding: 10px 14px;}

.rt-comm-guide-row {margin-top: 10px;text-align: left;}

.rt-comm-guide-link { margin: 4px 0; }

.rt-comm-flags {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2px 0 10px 0;
}

.rt-comm-flag {
	display: inline-block;
	font-size: 0.78rem;
	color: #9a978d;
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 10px;
	padding: 2px 10px;
	line-height: 1.5;
}

.rt-comm-flag-retired {
	color: #c98484;
	border-color: rgba(201,132,132,0.4);
}

/* Amber rather than the red of Legacy: the content still exists, only the
   window to earn it has closed, and an event can return. */
.rt-comm-flag-limited {
	color: #d2a55f;
	border-color: rgba(210,165,95,0.4);
}

.rt-comm-guide {
	color: #00c3ff;
	line-height: 1.4;
	text-decoration: none;
}

.rt-comm-guide:hover { text-decoration: underline; }

.rt-comm-standing {
	margin: 4px 0 22px 0;
	padding: 12px 14px;
	background-color: #1f2125;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 4px;
	color: #E4E4E4;
	text-align: left;
}

.rt-comm-standing-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px 12px;
	font-size: 1.05rem;
}

/* The level never breaks; the title drops under it when both don't fit. */
.rt-comm-standing-head > span:first-child { white-space: nowrap; }

.rt-comm-standing-rank { color: #9a978d; font-size: 0.9rem; }

.rt-comm-standing-bar {
	height: 6px;
	margin: 8px 0 4px 0;
	background-color: rgba(255,255,255,0.08);
	border-radius: 2px;
	overflow: hidden;
}

.rt-comm-standing-bar span { display: block; height: 100%; background-color: #00c3ff; }

.rt-comm-standing-next { font-size: 0.8rem; color: #9a978d; }

.rt-comm-standing-stats {
	display: grid;
	grid-template-columns: repeat(var(--n), 1fr);
	gap: 8px;
	margin-top: 12px;
	text-align: center;
}

/* Four in a row don't fit a phone; two by two reads as deliberate. */
@media (max-width: 480px) {
	.rt-comm-standing-stats[style*="--n:4"] { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
}

.rt-comm-standing-num { display: block; font-size: 1.1rem; color: #6fafc7; }
.rt-comm-standing-of { color: #7e919b; font-size: 0.85rem; }
.rt-comm-standing-label { display: block; font-size: 0.78rem; color: #9a978d; }

.rt-comm-map-box {
	margin-top: 12px;
	text-align: left;
}

.rt-comm-maprow {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #E4E4E4;
	font-size: 0.92rem;
	padding: 3px 0;
}

.rt-comm-mapbox { display: flex; cursor: pointer; }

.rt-comm-mapcheck:focus-visible + .rt-comm-checkimgs { outline: 2px solid #00c3ff; outline-offset: 2px; }

/* Legend-style image checkboxes (input stays for the sync logic). */
.rt-comm-mapcheck {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.rt-comm-checkimgs {
	width: 23px;
	height: 23px;
	flex: 0 0 auto;
}

.rt-comm-checkimgs img {
	width: 23px;
	height: 23px;
	display: none;
}

.rt-comm-mapcheck:not(:checked) + .rt-comm-checkimgs .rt-comm-check-off { display: block; }
.rt-comm-mapcheck:checked + .rt-comm-checkimgs .rt-comm-check-on { display: block; }

.rt-comm-map-foot {
	margin-top: 8px;
	font-size: 0.85rem;
	color: #9a978d;
}

.rt-comm-exact {
	display: block;
	width: fit-content;
	color: #00c3ff;
	text-decoration: none;
	font-size: 0.95rem;
	padding: 2px 0 6px 0;
}

.rt-comm-exact:hover { text-decoration: underline; }


.rt-comm-overall {
	color: #00c3ff;
	white-space: nowrap;
}