/* ==========================================================================
   Live Market, Freya skin (market.ragnarevival.com/?s=freya): the market's own
   parts in the style of https://freya.ragnarevival.com/ (themes/freya), built
   only from freya.css tokens and its component vocabulary. Loaded after the
   main site's freya.css and database.css (item lists and detail pages), and
   errors.css on message pages; every main site file stays unchanged.

   1. Shell glue        current menu item, quick dock, header at 320 px, drawer
                        log in, empty state parts, chips
   2. Market bar        the market's pages, the server switch, the search
   3. Numbers           zeny, price changes, deal ratings, refine, cards, slots
   4. Overview          the numbers band, the refresh line, panels, item tiles,
                        the recent sales rows
   5. Search results    the results bar, the item cards
   6. All items         the list: filter, sort buttons and chips, phone list
   7. Item page         summary card and art, key numbers, facts, sales volume,
                        the price history panel, vendors and sales tables
   8. Price chart       the shared chart markup (mk-chart*) in Freya's colours
   9. Footer line       "Player market data updates automatically ..."
   10. Preferences      reduced motion, forced colours, print
   ========================================================================== */

/* 1. Shell glue ------------------------------------------------------------------ */
/* Database > Live Market is this site: marked like the current page in the menu card and the drawer. */
.fy-menu__link[aria-current="true"] { background: rgba(140, 87, 248, .18); }
.fy-drawer__links a[aria-current="true"] { background: rgba(255, 255, 255, .06); color: var(--text); }
/* The quick dock's Market is this site too (the main site marks aria-current="page" the same way). */
.fy-dock__link[aria-current="true"] { color: var(--gold-200); }
/* The drawer's Log in spans both columns (the main site sets it inline). */
.fy-mk-drawer-login { grid-column: 1 / -1; }

/* Narrow phones (under 360 px): the main site's header row is 4 px wider than the screen there (its pages scroll
   sideways at 320 px); slightly tighter gaps keep the same row inside the screen (the kit's fix). */
@media (max-width: 359.98px) {
	.fy-header__inner { gap: var(--sp-2); }
	.fy-brand { margin-right: 0; }
	.fy-header__actions { gap: .35rem; }
	.fy-status { padding: 0 .6rem; }
}

/* Empty state parts (the main site's .fy-empty, as the kit adds them). */
.fy-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(140, 87, 248, .16); color: var(--violet-300); }
.fy-empty__icon .fy-i { width: 24px; height: 24px; }
.fy-empty__title { margin: var(--sp-2) 0 0; color: var(--text); font: 600 var(--fs-h3)/var(--lh-snug) var(--font-display); }
.fy-empty__text { max-width: 52ch; color: var(--text-3); }
.fy-empty__text p { margin: 0 0 .5em; }
.fy-empty__text p:last-child { margin-bottom: 0; }
.fy-empty__actions { justify-content: center; margin-top: var(--sp-2); }
.fy-empty--compact { gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); }
.fy-empty--compact img { width: 72px; }
.fy-empty--compact h2, .fy-empty--compact h3, .fy-empty--compact .fy-empty__title { font-size: var(--fs-lg); }

/* Chips: range links, sort chips (the kit's .fy-chip, the main site's pill vocabulary). */
.fy-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 36px;
	padding: 0 .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--text-2);
	font: 600 .88rem/1 var(--font-display);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-chip:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .12); color: var(--text); }
.fy-chip[aria-pressed="true"], .fy-chip[aria-current="page"] { border-color: transparent; background: var(--grad-violet); color: #fff; box-shadow: var(--glow-violet); }
.fy-chip .fy-i { width: 1em; height: 1em; }
@media (pointer: coarse) { .fy-chip { min-height: 40px; } }

/* 2. Market bar ------------------------------------------------------------------ */
.fy-mk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-8);
}
.fy-mk-bar .fy-subnav { margin: 0; }
.fy-mk-bar__pages a .fy-i { width: 1.05em; height: 1.05em; }
.fy-mk-bar__pages a:not([aria-current="page"]) .fy-i { color: var(--violet-300); }
/* The server switch: a second pill row with its label, the current server in the violet pill, a gold sparkle before it. */
.fy-mk-switch .fy-subnav__label { padding: 0 .35rem 0 .75rem; }
.fy-mk-switch a { gap: .45rem; }
.fy-mk-switch__dot {
	flex: none;
	width: .6em;
	height: .6em;
	background: currentColor;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: .45;
}
.fy-mk-switch a[aria-current="page"] .fy-mk-switch__dot { background: var(--gold-200); opacity: 1; }
/* The search: the item database's search field (violet magnifier) and a violet button. */
.fy-mk-search { display: flex; gap: var(--sp-2); flex: 1 1 320px; min-width: min(100%, 250px); margin: 0 0 0 auto; }
.fy-mk-search__field { flex: 1 1 auto; min-width: 0; }
.fy-mk-search__field > input { width: 100%; min-height: 48px; border-radius: var(--r-pill); }
.fy-mk-search__field > .fy-i { color: var(--violet-300); }
.fy-mk-search .fy-btn { --btn-h: 48px; flex: none; }
@media (max-width: 719.98px) {
	.fy-mk-bar { gap: var(--sp-3); margin-bottom: var(--sp-6); }
	.fy-mk-search { flex-basis: 100%; }
}
@media (max-width: 379.98px) {
	.fy-mk-bar .fy-subnav a { padding: 0 .8rem; }
	.fy-mk-search .fy-btn { padding: 0 1rem; }
}

/* 3. Numbers ------------------------------------------------------------------------ */
/* Zeny: the main site's price (buying stores, zeny ranking): gold, heavy, tabular, "12,000 z". */
.fy-mk-z { color: var(--gold-200); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fy-mk-z__u { margin-left: .18em; color: var(--gold-300); font-weight: 700; opacity: .8; }
.fy-mk-z--plain { color: var(--text); }
.fy-mk-z--plain .fy-mk-z__u { color: var(--text-3); opacity: 1; }

/* A price change: an arrow and the size ("12.4%"), mint up, rose down (the main site's .fy-badge tones), muted when
   within 1 %, a dot when there is no earlier price; never colour alone (arrow + words for screen readers). */
.fy-mk-chg { display: inline-flex; align-items: center; gap: .2rem; color: var(--text-3); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fy-mk-chg .fy-i { width: .95em; height: .95em; }
.fy-mk-chg--up { color: var(--mint-300); }
.fy-mk-chg--down { color: var(--rose-300); }
.fy-mk-chg--flat { color: var(--text-3); }
.fy-mk-chg--none { color: var(--text-4); }
.fy-mk-chg__pre { margin-right: .25rem; color: var(--text-3); font-size: .72em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* as a pill (tiles, the item's 24h and 7d) */
.fy-mk-chg--pill { gap: .25rem; padding: .22rem .6rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); font-size: .78rem; line-height: 1.3; }
.fy-mk-chg--pill.fy-mk-chg--up { border-color: rgba(82, 221, 156, .4); background: rgba(82, 221, 156, .12); }
.fy-mk-chg--pill.fy-mk-chg--down { border-color: rgba(255, 128, 152, .45); background: rgba(240, 74, 105, .13); }
.fy-mk-chg--lg { padding: .38rem .8rem; font-size: .92rem; }

/* Refine, cards, slots, no record, estimate */
.fy-mk-refine { color: var(--gold-300); font-weight: 800; }
.fy-mk-slots { color: var(--text-3); font-weight: 700; }
.fy-mk-cards { display: block; margin-top: .1rem; color: var(--text-3); font-size: .78rem; font-weight: 700; line-height: 1.35; white-space: normal; }
.fy-mk-est { color: var(--text-2); font-weight: 700; font-style: italic; }
.fy-mk-nohist { color: var(--text-4); font-style: italic; font-weight: 600; }
.fy-mk-each { margin-left: .25rem; color: var(--text-4); font-size: .8em; font-weight: 700; }
.fy-mk-good { color: var(--mint-300); }
.fy-mk-bad { color: var(--rose-300); }

/* 4. Overview ---------------------------------------------------------------------- */
/* The numbers band: the main site's "Freya in numbers" (server information): big figures between hairlines. */
.fy-mk-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--line);
}
.fy-mk-stat { position: relative; display: grid; align-content: start; gap: .35rem; min-width: 0; padding: var(--sp-5) var(--sp-5) var(--sp-6); background: var(--bg); transition: background-color var(--t-fast) var(--ease); }
.fy-mk-stat dt { display: flex; align-items: center; gap: .45rem; color: var(--text-3); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-mk-stat dt .fy-i { flex: none; width: 1.1em; height: 1.1em; color: var(--violet-300); }
.fy-mk-stat dd { margin: 0; color: var(--text); font: 600 clamp(1.8rem, 1.45rem + 1.4vw, 2.6rem)/1.05 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fy-mk-stat__link { color: inherit; text-decoration: none; }
.fy-mk-stat__link::after { content: ""; position: absolute; inset: 0; }
.fy-mk-stat__go { margin-left: auto; color: var(--text-4); transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease); }
.fy-mk-stat:has(.fy-mk-stat__link):hover { background: linear-gradient(rgba(140, 87, 248, .1), rgba(140, 87, 248, .1)), var(--bg); }
.fy-mk-stat:has(.fy-mk-stat__link):hover .fy-mk-stat__go { color: var(--gold-300); transform: translateX(3px); }
.fy-mk-stat:has(.fy-mk-stat__link):hover dd { color: var(--gold-100); }
.fy-mk-stat:has(.fy-mk-stat__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.fy-mk-stat__link:focus-visible { outline: none; }
.fy-mk-stat--gold dd { color: var(--gold-200); }
@media (min-width: 760px) {
	.fy-mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fy-mk-stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.fy-mk-stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* The refresh line under the band (the main site's .fy-si-note), with the clock in gold. */
.fy-mk-note { display: flex; align-items: flex-start; gap: .5rem; margin: var(--sp-3) 0 0; color: var(--text-3); font-size: .88rem; line-height: 1.5; }
.fy-mk-note > .fy-i { flex: none; margin-top: .2rem; color: var(--gold-300); }
.fy-mk-note strong { color: var(--text-2); font-weight: 800; }

/* The overview's panels: the main site's database panels (.fy-card.fy-db-panel) with an icon title and a line under it. */
.fy-mk-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 1100px) {
	.fy-mk-dash--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}
.fy-mk-panel .fy-db-panel__head { flex-wrap: wrap; align-items: flex-start; }
.fy-mk-panel__titles { flex: 1 1 260px; min-width: 0; }
.fy-mk-panel .fy-card__title { font-size: 1.3rem; }
.fy-mk-panel .fy-card__title .fy-i { flex: none; }
.fy-mk-panel__sub { margin: .3rem 0 0; color: var(--text-3); font-size: .9rem; line-height: 1.45; }
.fy-mk-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* Item tiles: movers, the most listed items, search results. The item's client icon in the main site's .fy-db-icon. */
.fy-mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.fy-mk-tiles > li { min-width: 0; margin: 0; }
.fy-mk-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: .8rem;
	height: 100%;
	min-height: 64px;
	padding: .7rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .03);
	color: var(--text);
	text-decoration: none;
	transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.fy-mk-tile:hover { transform: translateY(-2px); border-color: var(--line-3); background: rgba(140, 87, 248, .1); color: var(--text); }
.fy-mk-tile .fy-db-icon { width: 40px; height: 40px; border-radius: 12px; }
.fy-mk-tile__body { display: grid; flex: 1 1 auto; gap: .12rem; min-width: 0; }
.fy-mk-tile__name { color: var(--text); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.fy-mk-tile:hover .fy-mk-tile__name { color: var(--gold-100); }
.fy-mk-tile__meta { color: var(--text-3); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.fy-mk-tile__meta .fy-mk-z { font-weight: 800; }
.fy-mk-tile__end { flex: none; margin-left: auto; text-align: right; }
.fy-mk-tile__price { font-size: 1rem; }
.fy-mk-tile__none { color: var(--text-3); font-weight: 800; font-style: italic; }
/* The bigger item card (most listed, search results): the icon twice its size, pixel sharp, on a violet glow. */
.fy-mk-tiles--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.fy-mk-tile--card { align-items: flex-start; padding: .85rem .95rem; }
.fy-mk-tile--card .fy-db-icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: radial-gradient(circle at 50% 42%, rgba(140, 87, 248, .26), rgba(255, 255, 255, .02) 72%), var(--surface-sunken);
}
.fy-mk-tile--card .fy-db-icon img { width: 48px; height: 48px; }
.fy-mk-tile--card .fy-mk-tile__body { gap: .2rem; padding-top: .1rem; }
.fy-mk-tile--card .fy-mk-tile__price { font-size: 1.05rem; line-height: 1.3; }

/* Recent sales: rows inside the panel, divided by lines (the main site's flat list rows). */
.fy-mk-rows { margin: 0; padding: 0; list-style: none; }
.fy-mk-rows > li { margin: 0; border-top: 1px solid var(--line); }
.fy-mk-row {
	display: flex;
	align-items: center;
	gap: .8rem;
	min-height: 60px;
	padding: .6rem var(--sp-6);
	color: var(--text);
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease);
}
.fy-mk-row:hover { background: rgba(255, 255, 255, .035); color: var(--text); }
.fy-mk-row:hover .fy-mk-tile__name { color: var(--gold-100); }
.fy-mk-row:focus-visible { outline-offset: -3px; }
.fy-mk-row .fy-db-icon { width: 36px; height: 36px; }
@media (max-width: 559.98px) {
	.fy-mk-row { padding-inline: var(--sp-4); }
}

/* 5. Search results ---------------------------------------------------------------- */
.fy-mk-results .fy-db-results__bar { margin-bottom: var(--sp-5); }
.fy-mk-results .fy-db-results__count strong { margin-right: .3rem; }
.fy-mk-results__more { margin: 0; color: var(--text-3); font-size: .9rem; font-weight: 700; }

/* 6. All items --------------------------------------------------------------------- */
.fy-mk-list .fy-db-results__bar { align-items: flex-end; }
.fy-mk-filter { flex: 0 1 360px; min-width: min(100%, 240px); }
.fy-mk-filter > input { width: 100%; }
.fy-mk-filter > .fy-i { color: var(--violet-300); }
/* sort buttons in the table head: the header label itself, a small arrow pair after it */
.fy-mk-sort {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin: -.4rem -.45rem;
	padding: .4rem .45rem;
	border: 0;
	border-radius: var(--r-xs);
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
	cursor: pointer;
}
.fy-mk-sort:hover { color: var(--gold-300); }
.fy-mk-sort .fy-i { width: 1.15em; height: 1.15em; opacity: .55; }
th[aria-sort] .fy-mk-sort { color: var(--gold-200); }
th[aria-sort] .fy-mk-sort .fy-i { opacity: 1; }
th.is-num .fy-mk-sort { flex-direction: row-reverse; }
/* sort chips (phones and tablets, where the table head is hidden) */
.fy-mk-list .fy-db-sortbar { margin: 0 0 var(--sp-4); }
.fy-mk-list .fy-db-sortbar .fy-chip { min-height: 34px; padding: 0 .8rem; font-size: .84rem; }
.fy-mk-list .fy-db-sortbar .fy-chip[data-dir="asc"] .fy-i { transform: scaleY(-1); }
.fy-mk-list .fy-db-sortbar .fy-chip:last-child { margin-right: 2rem; }
@media (pointer: coarse) { .fy-mk-list .fy-db-sortbar .fy-chip { min-height: 40px; } }

/* The count: the main site's results count (the number big, the words quiet). On phones the count and the filter share
   one row, so the list starts higher. */
.fy-mk-list__count strong { margin-right: .2rem; }
.fy-mk-list__on { color: var(--text-3); }
@media (max-width: 719.98px) {
	.fy-mk-list .fy-db-results__bar { flex-wrap: nowrap; align-items: center; }
	.fy-mk-list__count { flex: none; }
	.fy-mk-list__on { display: none; }
	.fy-mk-filter { flex: 1 1 auto; min-width: 0; }
}
/* The list itself: the main site's dense database table (.fy-table.fy-db-table) on wide screens; a click anywhere on a
   row opens the item (market.js, data-mk-rowlink), the name stays the link for the keyboard. */
.fy-mk-list__table tbody tr { cursor: pointer; }
.fy-mk-list__table td { white-space: nowrap; }
.fy-mk-list__table .fy-db-c-item { min-width: 15rem; white-space: normal; }
.fy-mk-list__table .fy-db-item__name { font-weight: 800; }
.fy-mk-list__table tbody tr { position: relative; }
.fy-mk-list__table tbody tr:hover .fy-db-item__name { color: var(--gold-200); }

/* Below 1100 px the list is a compact phone list: one row per item, the whole row the link. Line 1: icon, name, the
   cheapest price; line 2: one value (the sorted column's; fair price by default) and the 24h change. */
@media (max-width: 1099.98px) {
	.fy-mk-list .fy-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.fy-mk-list__table { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
	.fy-mk-list__table thead { display: none; }
	.fy-mk-list__table, .fy-mk-list__table tbody { display: block; }
	.fy-mk-list__table tbody { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--grad-card), var(--surface); box-shadow: var(--shadow-md); }
	.fy-mk-list__table tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "icon name price" "icon line chg";
		align-items: center;
		column-gap: .75rem;
		row-gap: .1rem;
		padding: .6rem 1rem;
		border-bottom: 1px solid var(--line);
	}
	.fy-mk-list__table tr:last-child { border-bottom: 0; }
	.fy-mk-list__table td { display: none; padding: 0; border: 0; background: none; }
	.fy-mk-list__table tbody tr:hover td { background: none; }
	.fy-mk-list__table tbody tr:hover { background: rgba(255, 255, 255, .03); }
	.fy-mk-list__table .fy-db-c-item { display: contents; min-width: 0; }
	.fy-mk-list__table .fy-db-c-item .fy-db-item { display: contents; }
	.fy-mk-list__table .fy-db-c-item .fy-db-icon { grid-area: icon; }
	.fy-mk-list__table .fy-db-c-item .fy-db-item__text { grid-area: name; min-width: 0; }
	.fy-mk-list__table .fy-db-item__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.fy-mk-list__table .fy-db-item__name::after { content: ""; position: absolute; inset: 0; }
	.fy-mk-list__table tr:has(.fy-db-item__name:focus-visible) { outline: 2px solid var(--focus); outline-offset: -3px; }
	.fy-mk-list__table .fy-db-item__name:focus-visible { outline: none; }
	.fy-mk-list__table td[data-col="cheapest"] { display: block; grid-area: price; text-align: right; }
	.fy-mk-list__table td[data-col="pct"] { display: block; grid-area: chg; justify-self: end; font-size: .82rem; }
	/* line 2: the sorted column's value with its label; fair price unless another number column is sorted */
	.fy-mk-list__table td[data-col="fair"],
	.fy-mk-list__table[data-mk-sorted="highest"] td[data-col="highest"],
	.fy-mk-list__table[data-mk-sorted="listings"] td[data-col="listings"],
	.fy-mk-list__table[data-mk-sorted="qty"] td[data-col="qty"] { display: block; grid-area: line; color: var(--text-3); font-size: .8rem; font-weight: 700; text-align: left; }
	.fy-mk-list__table[data-mk-sorted="highest"] td[data-col="fair"],
	.fy-mk-list__table[data-mk-sorted="listings"] td[data-col="fair"],
	.fy-mk-list__table[data-mk-sorted="qty"] td[data-col="fair"] { display: none; }
	.fy-mk-list__table td[data-label]::before { content: attr(data-label) " "; color: var(--text-4); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
	.fy-mk-list__table td[data-col="cheapest"]::before, .fy-mk-list__table td[data-col="pct"]::before { content: none; }
	.fy-mk-list__table td[data-col] .fy-mk-z { color: inherit; font-weight: 800; }
	.fy-mk-list__table td[data-col="cheapest"] .fy-mk-z { color: var(--gold-200); }
}
@media (max-width: 379.98px) {
	.fy-mk-list__table tr { padding-inline: .8rem; column-gap: .6rem; }
	.fy-mk-list__table .fy-db-icon { width: 30px; height: 30px; }
}

/* 7. Item page ------------------------------------------------------------------------- */
/* The main site's database detail page: the summary card on the left (sticky), the panels on the right. The page head's
   title is the item's name (smaller for a long name). */
.fy-mk-h1-slots { color: var(--text-3); font-weight: 500; }
.fy-mk-head--long h1 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem); }
/* The art box: the client illustration on the main site's paper (75 x 100, shown twice its size); when an item has none,
   market.js swaps in the client icon (class fy-mk-art__icon) and the box turns into the main site's dark art box with
   the icon pixel sharp, four times its size. */
.fy-mk-item .fy-db-summary__art--paper { min-height: 240px; }
.fy-mk-item .fy-db-summary__art--paper img { width: 150px; height: auto; }
.fy-mk-art:has(img.fy-mk-art__icon) {
	border-color: var(--line);
	background:
		radial-gradient(60% 55% at 50% 62%, rgba(140, 87, 248, .26), transparent 72%),
		radial-gradient(40% 30% at 50% 88%, rgba(255, 214, 109, .12), transparent 70%),
		var(--surface-sunken);
}
.fy-mk-art img.fy-mk-art__icon { width: 96px; height: 96px; mix-blend-mode: normal; border-radius: 0; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(4, 2, 16, .55)); }
/* Tablets and phones (under 960 px, the summary card is full width): the main site's tablet layout of this card, the
   art beside the name with the 24h and 7d changes under the name, the six numbers in rows of three under both. Phones
   (under 600 px): the same, one size down (the illustration at its own 75 x 100), the numbers in rows of two. */
@media (max-width: 959.98px) {
	.fy-mk-item .fy-db-summary { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-areas: "art head" "art chgs" "stats stats"; align-items: center; column-gap: var(--sp-6); }
	.fy-mk-item .fy-db-summary__art { grid-area: art; }
	.fy-mk-item .fy-db-summary__head { grid-area: head; align-self: end; }
	.fy-mk-item .fy-db-summary > .fy-mk-chgs { grid-area: chgs; align-self: start; }
	.fy-mk-item .fy-db-summary > .fy-stats { grid-area: stats; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fy-mk-item .fy-db-summary > .fy-mk-unsold { grid-area: stats; }
}
@media (max-width: 599.98px) {
	.fy-mk-item .fy-db-summary { grid-template-columns: 7.25rem minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-4); }
	.fy-mk-item .fy-db-summary__art { min-height: 0; aspect-ratio: 3 / 4; padding: .5rem; }
	.fy-mk-item .fy-db-summary__art--paper img { width: 75px; }
	.fy-mk-item .fy-mk-art img.fy-mk-art__icon { width: 48px; height: 48px; }
	.fy-mk-item .fy-db-summary > .fy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fy-mk-item p.fy-db-summary__name { margin: 0; color: var(--text); font: 600 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.2 var(--font-display); overflow-wrap: anywhere; }
.fy-mk-item .fy-db-summary__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.fy-mk-item .fy-db-summary__sub code { padding: .1em .45em; }
.fy-mk-item .fy-db-summary .fy-stat dd .fy-mk-z { color: var(--gold-200); }
.fy-mk-item .fy-db-summary .fy-stat dd { font-size: 1.05rem; line-height: 1.25; }
.fy-mk-item .fy-db-summary .fy-stat--key dd { font-size: 1.2rem; }
.fy-mk-chgs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.fy-mk-chgs li { margin: 0; }
.fy-mk-unsold { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .8rem .95rem; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-2); font-size: .92rem; line-height: 1.45; }
.fy-mk-unsold .fy-i { flex: none; margin-top: .15rem; color: var(--violet-300); }

/* The two facts (suggested fair price, total on the server): the main site's framed card of facts. */
.fy-mk-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-6); margin: 0; --card-pad: clamp(1.25rem, .9rem + 1.3vw, 1.75rem); }
@media (min-width: 640px) {
	.fy-mk-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fy-mk-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: start; min-width: 0; }
.fy-mk-fact__icon { grid-row: span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: rgba(140, 87, 248, .16); color: var(--violet-300); }
.fy-mk-fact__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-mk-fact__icon .fy-i { width: 24px; height: 24px; }
.fy-mk-fact dt { color: var(--text-3); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-mk-fact dd { margin: 0; min-width: 0; }
.fy-mk-fact__value { margin-top: .15rem !important; color: var(--text); font: 600 clamp(1.45rem, 1.2rem + .9vw, 1.9rem)/1.15 var(--font-display); overflow-wrap: anywhere; }
.fy-mk-fact__value .fy-mk-z { font-weight: 600; }
.fy-mk-fact__sub { margin-top: .35rem !important; color: var(--text-3); font-size: .88rem; line-height: 1.5; }
@media (max-width: 419.98px) {
	.fy-mk-fact { grid-template-columns: minmax(0, 1fr); }
	.fy-mk-fact__icon { display: none; }
}

/* Sales volume: the numbers band with six figures. */
.fy-mk-volume .fy-mk-stat dd { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.fy-mk-volume .fy-mk-stat { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* Panel heads with range chips */
.fy-mk-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fy-mk-ranges__label { margin-right: .2rem; color: var(--text-4); font: 800 .66rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-mk-ranges .fy-chip { min-height: 34px; padding: 0 .8rem; font-size: .84rem; }
@media (pointer: coarse) { .fy-mk-ranges .fy-chip { min-height: 40px; } }
.fy-mk-panel__count { flex: none; }

/* Vendors and sales: the main site's dense table inside a panel (.fy-db-scroll); below 1300 px (the panel column is
   narrower there) the main site's flat list rows: line 1 the vendor and the price, line 2 small pills (deal, quantity,
   map, a refined or carded item), as database.css draws its card rows. */
.fy-mk-trade td { white-space: nowrap; }
.fy-mk-trade .fy-mk-c-price { font-size: 1rem; }
.fy-mk-trade .fy-mk-c-item { white-space: normal; min-width: 10rem; }
.fy-mk-trade .fy-mk-c-who { color: var(--text); font-weight: 800; }
.fy-mk-trade .fy-mk-where { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-2); font-weight: 700; }
.fy-mk-trade .fy-mk-where .fy-i { color: var(--violet-300); }
.fy-mk-trade .fy-mk-where__xy { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.fy-mk-trade time { color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 1299.98px) {
	.fy-mk-trade, .fy-mk-trade tbody { display: block; }
	.fy-mk-trade thead { display: none; }
	.fy-mk-trade tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .4rem .45rem;
		padding: .85rem var(--sp-6);
		border-bottom: 1px solid var(--line);
	}
	.fy-mk-trade tr:last-child { border-bottom: 0; }
	.fy-mk-trade td { display: block; padding: 0; border: 0; white-space: normal; background: none; }
	.fy-mk-trade td:first-child, .fy-mk-trade td:last-child { padding: 0; }
	.fy-mk-trade tbody tr:hover td { background: none; }
	.fy-mk-trade .fy-mk-c-who { order: 1; flex: 1 1 calc(100% - 10.5rem); min-width: 0; overflow-wrap: anywhere; font-size: 1rem; }
	.fy-mk-trade .fy-mk-c-price { order: 2; flex: 0 0 10rem; text-align: right; font-size: 1.05rem; }
	.fy-mk-trade .fy-mk-c-meta-item { order: 3; }
	.fy-mk-trade .fy-mk-c-deal { order: 3; }
	.fy-mk-trade td.fy-mk-c-meta-item:not(.fy-mk-c-deal) {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		padding: .22rem .6rem;
		border-radius: var(--r-pill);
		background: rgba(255, 255, 255, .045);
		color: var(--text);
		font-size: .8rem;
		font-weight: 700;
	}
	.fy-mk-trade td.fy-mk-c-meta-item[data-label]::before { content: attr(data-label); margin-right: .35rem; color: var(--text-3); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
	.fy-mk-trade td.fy-mk-c-meta-item.is-plain { display: none; }
	.fy-mk-trade td:empty { display: none; }
	.fy-mk-trade .fy-mk-cards { display: inline; margin: 0 0 0 .35rem; font-size: .76rem; }
	.fy-mk-trade .fy-mk-where { gap: .25rem; font-weight: 700; }
}
@media (max-width: 559.98px) {
	.fy-mk-trade tr { padding-inline: var(--sp-4); }
}
@media (max-width: 359.98px) {
	/* the price under the name: a billion price and a long name both keep their room */
	.fy-mk-trade .fy-mk-c-who { flex-basis: 100%; }
	.fy-mk-trade .fy-mk-c-price { flex: 1 1 100%; text-align: left; }
}

/* An item nobody has sold yet: the main site's empty state (the poring) fills the panel column. */
.fy-mk-quiet .fy-db-panel__body { padding-top: var(--sp-6); }
.fy-mk-quiet .fy-empty { border: 0; background: none; }

/* Notes under the tables (the main site's .fy-db-panel__note) */
.fy-mk-panel .fy-db-panel__note { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.55; }
.fy-mk-panel .fy-db-panel__note > .fy-i { flex: none; margin-top: .25rem; color: var(--violet-300); }

/* 8. Price chart --------------------------------------------------------------------- */
/* The shared chart (inc/market-ui.php mk_price_chart(), read-out and table view by assets/market/market.js) in the main
   site's chart style (server information's class chart: one series, one hue, violet): the median is the 2.5 px violet
   line, cheapest to highest the violet wash behind it with a dashed upper edge (highest) and a solid lower edge
   (cheapest). Colours checked with the dataviz validator on the card (#18113a): violet-500 3:1 and more, inside the
   dark lightness band. Text keeps the text colours; grid lines are the main site's hairlines. */
.mk-chart {
	--mkc-line: var(--violet-500);
	--mkc-edge: rgba(167, 126, 255, .62);
	--mkc-band: rgba(140, 87, 248, .22);
	--mkc-ring: #1b1440;
	margin: 0;
}
.mk-chart__legend { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; margin: 0 0 var(--sp-5); padding: 0; list-style: none; color: var(--text-2); font-size: .86rem; font-weight: 700; }
.mk-chart__legend li { display: inline-flex; align-items: center; gap: .55rem; margin: 0; }
.mk-chart__key { display: inline-block; flex: none; }
.mk-chart__key--median { width: 24px; height: 3px; border-radius: 2px; background: var(--mkc-line); }
.mk-chart__key--band { width: 24px; height: 12px; border-top: 1.5px dashed var(--mkc-edge); border-bottom: 1.5px solid var(--mkc-edge); background: var(--mkc-band); }
.mk-chart__plot { position: relative; height: clamp(220px, 140px + 11vw, 320px); margin: .6rem 0 2.1rem 3.3rem; border-radius: var(--r-xs); touch-action: pan-y; }
.mk-chart__plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 10px; }
.mk-chart__y { position: absolute; top: 0; bottom: 0; left: -3.3rem; width: 2.8rem; display: flex; flex-direction: column; justify-content: space-between; color: var(--text-3); font: 700 .74rem/1 var(--font-body); font-variant-numeric: tabular-nums; text-align: right; }
.mk-chart__y span { display: flex; align-items: center; justify-content: flex-end; height: 0; white-space: nowrap; }
.mk-chart__area { position: absolute; inset: 0; cursor: crosshair; }
.mk-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-chart__grid { stroke: var(--line); stroke-width: 1; }
.mk-chart__grid--base { stroke: var(--line-2); }
.mk-chart__band { fill: var(--mkc-band); }
.mk-chart__edge { fill: none; stroke: var(--mkc-edge); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mk-chart__edge--hi { stroke-dasharray: 5 4; }
.mk-chart__median { fill: none; stroke: var(--mkc-line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(140, 87, 248, .55)); }
.mk-chart__pin, .mk-chart__dot { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.mk-chart__pin { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--mkc-line); box-shadow: 0 0 0 2px var(--mkc-ring), 0 0 12px rgba(140, 87, 248, .8); }
.mk-chart__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--violet-300); box-shadow: 0 0 0 2px var(--mkc-ring); }
.mk-chart__hair { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--line-3); pointer-events: none; }
.mk-chart__tip {
	position: absolute;
	top: 6px;
	z-index: 2;
	display: grid;
	gap: .22rem;
	min-width: 11.5rem;
	padding: .65rem .8rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: rgba(31, 23, 72, .97);
	box-shadow: var(--shadow-lg);
	color: var(--text-3);
	font-size: .82rem;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
	transform: translateX(-50%);
}
.mk-chart__tip.is-end { transform: translateX(calc(-100% - 14px)); }
.mk-chart__tip.is-start { transform: translateX(14px); }
.mk-chart__tip-t { margin-bottom: .1rem; color: var(--text); font: 600 .92rem/1.25 var(--font-display); }
.mk-chart__tip-row { display: flex; align-items: center; gap: .5rem; }
.mk-chart__tip-row::before { content: ""; flex: none; width: 14px; border-top: 2px solid var(--mkc-line); }
.mk-chart__tip-row--hi::before { border-top: 1.5px dashed var(--mkc-edge); }
.mk-chart__tip-row--lo::before { border-top: 1.5px solid var(--mkc-edge); }
.mk-chart__tip-row b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-chart__x { position: absolute; left: 0; right: 0; bottom: -1.75rem; height: 1.2rem; color: var(--text-3); font: 700 .74rem/1.2 var(--font-body); }
.mk-chart__x span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.mk-chart__x .is-first { transform: none; }
.mk-chart__x .is-last { transform: translateX(-100%); }
@media (max-width: 719.98px) {
	.mk-chart__x .is-mid:nth-child(2), .mk-chart__x .is-mid:nth-child(4) { display: none; }
}
@media (max-width: 419.98px) {
	.mk-chart__plot { margin-left: 2.9rem; }
	.mk-chart__y { left: -2.9rem; width: 2.5rem; font-size: .7rem; }
	.mk-chart__x .is-mid { display: none; }
	.mk-chart__tip { min-width: 0; }
}
/* The table view: the main site's "show all" pill (server information's class list), the compact table inside. */
.mk-chart__table { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.mk-chart__table > summary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	margin-top: var(--sp-4);
	padding: 0 1rem;
	border: 1px solid var(--line-3);
	border-radius: var(--r-pill);
	color: var(--text);
	font: 600 .95rem/1 var(--font-display);
	list-style: none;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.mk-chart__table > summary::-webkit-details-marker { display: none; }
.mk-chart__table > summary:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .14); }
.mk-chart__table > summary .fy-i:first-child { color: var(--violet-300); }
.fy-mk-chart__chev { opacity: .75; transition: transform var(--t-med) var(--ease); }
.mk-chart__table[open] .fy-mk-chart__chev { transform: rotate(180deg); }
.mk-chart__scroll { max-height: 380px; margin-top: var(--sp-4); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.mk-chart__scroll .fy-table { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mk-chart__scroll thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(rgba(140, 87, 248, .1), rgba(140, 87, 248, .1)), var(--surface-2); }
.mk-chart__scroll tbody th { color: var(--text-2); font: 700 .86rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; background: none; border-bottom: 1px solid var(--line); padding: .55rem .8rem; text-align: left; }
.mk-chart__scroll td { font-variant-numeric: tabular-nums; }
.mk-chart__nojs { margin: 0; padding: var(--sp-4); color: var(--text-3); font-size: .9rem; }

/* Message pages (the main site's 404 layout, errors.css): "Where to next?" is an h2 when the message has no h2 title of
   its own; it keeps the h3's look. */
.fy-page .fy-oops__links h2 { margin: 0 0 var(--sp-4); color: var(--text-3); font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-align: center; text-transform: uppercase; }

/* 9. Footer line ----------------------------------------------------------------------- */
.fy-mk-source { display: flex; align-items: flex-start; justify-content: center; gap: .5rem; margin: var(--sp-10) 0 0; color: var(--text-3); font-size: .86rem; line-height: 1.5; text-align: center; }
.fy-mk-source > .fy-i { flex: none; margin-top: .2rem; color: var(--gold-300); }
.fy-mk-source strong { color: var(--text-2); }

/* 10. Preferences ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fy-mk-tile, .fy-mk-stat__go { transition: none; }
	.fy-mk-tile:hover { transform: none; }
}
@media (forced-colors: active) {
	.fy-chip[aria-pressed="true"], .fy-chip[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
	.fy-mk-switch__dot { background: CanvasText; }
}