/* The catalogue pages' one stylesheet (web/scripts/catalogue.mjs writes the
   pages; fingerprinted as catalogue.<hash>.css by web/scripts/landing-page.mjs
   and served immutable). External rather than an inline <style>: ~15k pages
   share it, so it is fetched once and cached. No style attributes anywhere
   (the CSP has no 'unsafe-inline'): a rarity is a t-<tier> class, a page
   type is cp (container or collection), ip (item) or bp (/catalogue) on <main>,
   and pr on <main> when the page carries prices. The ground, the column, the
   header, footer, get row and the quiet button (.btn) are web/landing/site.css.
   The look: CS2 facts on black, plain. The site's title size, a bordered
   search box, the stacked categories with a white rule under the current
   one, the pictures as they are; an item's versions are rows between
   hairlines, and so are its prices by wear. Colour means one thing each: a
   rarity's colour on that rarity, bold white for the cheapest market. */

:root {
  --r-common: #b0c3d9; --r-uncommon: #5e98d9; --r-rare: #4b69ff; --r-mythical: #8847ff;
  --r-legendary: #d32ce6; --r-ancient: #eb4b4b; --r-special: #e4ae39; --r-gold: #d9b650;
  --rc: var(--r-common);
}
h1, h2, h3 { letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img { display: block; }
time, .pt, .od, .oi, .amt, .wp, .tr, .totals .fact, .pf, .cats { font-variant-numeric: tabular-nums; }

/* the crumbs; the header, footer and get row are web/landing/site.css */
.crumbs { margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--tf-faint); }
.crumbs a { color: var(--tf-muted); text-decoration: none; }
.crumbs a:hover { color: var(--tf-fg); text-decoration: underline; text-underline-offset: 3px; }

/* rarity */
.t-common { --rc: var(--r-common); } .t-uncommon { --rc: var(--r-uncommon); } .t-rare { --rc: var(--r-rare); }
.t-mythical { --rc: var(--r-mythical); } .t-legendary { --rc: var(--r-legendary); } .t-ancient { --rc: var(--r-ancient); }
.t-special { --rc: var(--r-special); } .t-gold { --rc: var(--r-gold); }

/* a picture: the art alone; where Steam has none, its space left empty */
.th { display: flex; align-items: center; justify-content: center; flex: none; }
.th img { width: 100%; height: auto; }
.th.no { aspect-ratio: 4 / 3; }

/* a price and where it is from: the ask, then its market and age under it */
.pt { display: block; color: var(--tf-text); }
.pt b { font-weight: 600; color: var(--tf-fg); }
.pt em { font-style: normal; color: var(--tf-muted); }
.pt small { display: block; font-size: 0.76rem; color: var(--tf-faint); }
.pt.na { color: var(--tf-faint); font-size: 0.85rem; }
.src { margin-top: 0.9rem; font-size: 0.8rem; color: var(--tf-faint); }
.src a { color: var(--tf-text); text-underline-offset: 3px; text-decoration-color: var(--tf-line-strong); }
.src a:hover { color: var(--tf-fg); }
.fn { margin-top: 1rem; font-size: 0.78rem; color: var(--tf-faint); }
.ic { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--tf-radius-sm); color: var(--tf-accent-text); text-decoration: none; }
.ic:hover { background: var(--tf-ink-raised); }

/* a container or collection's head: its name and facts, its price and the CSFloat button on the left, its picture on the right */
.head { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.25rem; align-items: center; }
.head .hart { width: 13rem; }
.head h1 { font-size: 2.25rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; }
.meta { margin-top: 0.5rem; color: var(--tf-muted); font-size: 0.92rem; }
.meta i { font-style: normal; margin: 0 0.5rem; color: var(--tf-faint); }
.meta a { color: var(--tf-text); text-underline-offset: 3px; text-decoration-color: var(--tf-line-strong); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; }
.buy .pt b { font-size: 1.5rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }

/* "All markets": every market's lowest ask side by side, closed until asked */
.am { margin-top: 1.75rem; border-top: 1px solid var(--tf-line); border-bottom: 1px solid var(--tf-line); }
.am summary { min-height: 2.75rem; padding: 0.65rem 0; cursor: pointer; font-size: 0.92rem; font-weight: 550; color: var(--tf-text); }
.am summary:hover, .am[open] summary { color: var(--tf-fg); }
.amw { overflow-x: auto; margin: 0.1rem 0 1rem; }
.amt { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.88rem; }
.amt th, .amt td { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--tf-line); text-align: right; }
.amt thead th { font-size: 0.8125rem; font-weight: 500; color: var(--tf-faint); }
.amt th:first-child { text-align: left; padding-left: 0; }
.amt tbody th { font-weight: 400; color: var(--tf-text); }
.amt tbody th b { font-weight: 600; color: var(--tf-fg); }
.amt td { color: var(--tf-muted); }
.amt td.lo { color: var(--tf-fg); font-weight: 650; }
.amt td.na { color: var(--tf-grey-4); }
.amt .sv { padding-left: 1rem; color: var(--tf-faint); }
.amt .w { color: var(--tf-faint); }

/* a container or collection: the odds bar, then a band per rarity, each in its rarity's light */
.ob { display: block; margin: 2rem 0 0.4rem; overflow: visible; border-radius: 4px; }
.ob rect { fill: var(--rc); }
.band { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; padding: 1.75rem 0; border-top: 1px solid var(--tf-line); }
.ob + .band { border-top: 0; }
.bl { position: relative; display: flex; flex-direction: column; align-self: start; padding-left: 1rem; }
.bl::before { content: ""; position: absolute; top: 0.15rem; bottom: 0.15rem; left: 0; width: 3px; background: var(--rc); }
.bl .od { font-size: 1.5rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: var(--tf-fg); }
.bl .oi { margin-top: 0.2rem; font-size: 0.85rem; color: var(--tf-text); }
.bl h2 { margin-top: 0.45rem; font-size: 0.95rem; font-weight: 600; color: var(--tf-text); letter-spacing: 0; }
.bl h2:first-child { margin-top: 0; color: var(--tf-fg); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.4rem 1rem; }
.card > a, .card > div { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
/* a skin card: its picture, weapon, finish and price */
.card .art { aspect-ratio: 4 / 3; margin-bottom: 0.5rem; }
.card .w { font-size: 0.78rem; color: var(--tf-muted); }
.card .f { font-size: 0.92rem; font-weight: 600; color: var(--tf-fg); line-height: 1.3; }
.card .pt { margin-top: 0.3rem; font-size: 0.88rem; }
.card .pt + .pt { margin-top: 0.15rem; }
.kn { display: flex; flex-direction: column; gap: 0.9rem; }
.kr { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.kh h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.kh .pt { margin-top: 0.15rem; font-size: 0.85rem; }
/* a knife's price line keeps its market and age together (every .kr span is a block) */
.kh .pt small { white-space: nowrap; }
.kh .ag { display: inline; }
.kr ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: 0.2rem; }
.kr a, .kr span { display: block; border-radius: var(--tf-radius-sm); }
.kr img { width: 100%; height: auto; }
.kr ul a:hover { background: var(--tf-ink-raised); }
.ps h2 { margin: 2.5rem 0 0.8rem; font-size: 1.2rem; }
.ps h2 span, .ps h3 { color: var(--tf-faint); font-size: 0.9rem; font-weight: 500; }
.ps h3 { margin: 1.2rem 0 0.5rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
.tiles a { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem; border-radius: var(--tf-radius-sm); text-decoration: none; font-size: 0.8rem; color: var(--tf-text); text-align: center; min-width: 0; }
.tiles a:hover { background: var(--tf-ink-raised); color: var(--tf-fg); }
.tiles .th { width: 100%; }
.tiles a > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* an item: its name, versions and prices on the left, the skin on the right */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2.5rem; align-items: center; }
.hero .big { width: 100%; }
.eb { font-size: 0.95rem; color: var(--tf-muted); }
.eb .rn { color: var(--rc); font-weight: 600; }
.side h1 { margin-top: 0.15rem; font-size: 2.25rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.side h1 .w { display: block; margin-bottom: 0.15rem; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--tf-muted); }
/* its versions: rows between hairlines, each with its cheapest ask; the chosen one raised, marked by a white rule on its left edge */
.vpan { display: none; }
main:has(#v-n:checked) .vpan.v-n, main:has(#v-s:checked) .vpan.v-s, main:has(#v-v:checked) .vpan.v-v { display: block; }
@supports not selector(:has(*)) { .vpan { display: block; } }
.go { margin-top: 1rem; }
.go a:not(.btn) { color: var(--tf-accent-text); text-decoration: none; }
.vl { margin-top: 1.4rem; border-top: 1px solid var(--tf-line); }
.vl li { display: flex; align-items: center; gap: 1rem; min-height: 3.1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--tf-line); }
.vl li > span:first-child { flex: 1; color: var(--tf-muted); }
.vl .pt { text-align: right; }
.side .tr { text-align: left; margin-top: 0.8rem; }
.also { margin-top: 1.1rem; font-size: 0.92rem; }
.also a { color: var(--tf-accent-text); text-decoration: none; }
.also a:hover, .go a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* supply status line: source and status chip */
.sup-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.7rem; font-size: 0.92rem; color: var(--tf-muted); }
.sup-line a { color: var(--tf-text); text-underline-offset: 3px; text-decoration-color: var(--tf-line-strong); }
.sup-line a:hover { color: var(--tf-fg); }
.sup { color: var(--tf-muted); font-size: 0.85rem; white-space: nowrap; cursor: help; }
.sup::before { content: "·"; margin-right: 0.5rem; color: var(--tf-faint); }
.sup-more { font-size: 0.8rem; color: var(--tf-faint); }
.ip h2, .chain h2 { margin: 2.6rem 0 1rem; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.025em; }
/* Prices by wear: the skin's float range by the head, then a hairline row per wear it can have (wear, float span,
   cheapest ask, market and age); a row with no listings dim. .nf: a catalogue without float ranges, no span column. */
.wp { color: var(--tf-fg); font-size: 1rem; font-weight: 600; }
.tr { margin-top: 1.125rem; font-size: 0.8125rem; color: var(--tf-faint); }
.tr b { color: var(--tf-text); font-weight: 500; }
.few { margin-left: 0.5rem; color: var(--tf-muted); white-space: nowrap; }
.tiers li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--tf-line); font-size: 0.92rem; }
.tiers li:last-child { border-bottom: 1px solid var(--tf-line); }
.tiers .gt { color: var(--tf-fg); }
.tiers .ga { color: var(--tf-faint); font-size: 0.85rem; }
.tiers .gn { color: var(--tf-text); font-variant-numeric: tabular-nums; }
.ch { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: center; }
.ch.c3 { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr) 3rem minmax(0, 1fr); }
.col { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.node { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 0.85rem; align-items: center; min-height: 3.75rem; text-decoration: none; color: var(--tf-muted); font-size: 0.82rem; }
.node .ni { grid-row: span 4; width: 5rem; }
/* a crafted souvenir has no picture: its words line up with the others' */
.node.craft { grid-template-columns: minmax(0, 1fr); padding-left: 5.85rem; }
.node .nk { font-size: 0.8125rem; color: var(--tf-faint); }
.node b { font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--tf-fg); }
.node .pt { font-size: 0.85rem; }
.node.self .nk { color: var(--rc); }
a.node:hover b { text-decoration: underline; text-underline-offset: 3px; }
.more summary { min-height: 2.5rem; padding: 0.5rem 0; cursor: pointer; font-size: 0.88rem; color: var(--tf-muted); }
.more .node { margin-top: 0.9rem; }
.col .sub { margin-top: 0.4rem; font-size: 0.8125rem; color: var(--tf-faint); }
.to { position: relative; height: 1px; margin: 0 0.5rem; background: var(--tf-grey-4); }
.to::after { content: ""; position: absolute; right: -1px; top: -3.5px; border-left: 7px solid var(--tf-grey-4); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* the search, on every category page: a bordered box, its edge takes the accent on focus */
.sf { position: relative; flex: none; width: min(100%, 22rem); }
.sf-in { display: flex; align-items: center; gap: 0.7rem; height: 2.5rem; padding: 0 0.8rem; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius); color: var(--tf-faint); }
.sf-in:hover { border-color: var(--tf-line-heavy); }
.sf-in:focus-within { border-color: var(--tf-accent); box-shadow: 0 0 0 1px var(--tf-accent); }
.sf-in input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sf-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--tf-fg); outline: none; }
.sf-in kbd { font: 0.8125rem var(--tf-font-mono); color: var(--tf-faint); }
.sf-res { position: absolute; z-index: 20; top: 100%; right: 0; width: min(36rem, calc(100vw - 2 * var(--gutter))); margin-top: 0.4rem; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius); background: var(--tf-pane); padding: 0.35rem; }
.sf-res[hidden] { display: none; }
.sf-res .g { color: var(--tf-faint); font-size: 0.8125rem; padding: 0.55rem 0.7rem 0.2rem; }
.sf-res a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0 0.85rem; align-items: center; min-height: 3.25rem; padding: 0.4rem 0.7rem; border-radius: var(--tf-radius-sm); font-size: 0.9rem; text-decoration: none; }
.sf-res a:hover, .sf-res a.on { background: var(--tf-ink-hover); }
.sf-res .ti { display: block; width: 2.75rem; aspect-ratio: 4 / 3; }
.sf-res .ti img { width: 100%; height: 100%; object-fit: contain; }
.sf-res .rt { display: flex; flex-direction: column; min-width: 0; }
.sf-res .rt b { color: var(--tf-fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-res em { font-style: normal; color: var(--tf-faint); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-res mark { background: none; color: var(--tf-accent-text); }
.sf-res .pc { color: var(--tf-fg); font-variant-numeric: tabular-nums; }
.sf-res .pc small { margin-left: 0.4rem; color: var(--tf-faint); font-size: 0.78rem; }
.sf-res .none { padding: 0.55rem 0.7rem; color: var(--tf-faint); font-size: 0.9rem; }

/* the categories (/catalogue and /catalogue/<category>): a big heavy title and the search, then the menu of
   categories beside the one shown. The menu is a stack of plain labels; a 1 px white rule (.cu) lies under the
   current one and slides to the next, placed by catalogue.js (without it the current label carries the same rule). */
.bh { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--tf-line-strong); }
.bhl { min-width: 0; }
.bh h1, .bt { margin: 0 0 0.75rem; font-size: 2.25rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; color: var(--tf-fg); }
.totals { color: var(--tf-muted); font-size: 1rem; }
.totals b { color: var(--tf-fg); font-weight: 600; }
.cg { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); align-items: start; margin-top: 0; }
.cats { position: sticky; top: calc(var(--tf-header-h) + 1.5rem); margin-top: 1.5rem; padding-right: 2rem; display: flex; flex-direction: column; gap: 0.1rem; }
.cats a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; color: var(--tf-muted); font-size: 0.95rem; text-decoration: none; }
.cats a > span { padding-bottom: 0.3rem; }
.cats small { font-size: 0.78rem; color: var(--tf-faint); }
.cats a:hover, .cats a[aria-current] { color: var(--tf-fg); }
.cats a[aria-current] > span { font-weight: 600; }
.cats a[aria-current] small { color: var(--tf-muted); }
.cats:not([data-ready]) a[aria-current] > span { box-shadow: 0 1px 0 var(--tf-fg); }
.cu { position: absolute; top: 0; left: 0; width: 0; height: 1px; background: var(--tf-fg); opacity: 0; pointer-events: none; }
.cats[data-ready] .cu { opacity: 1; }
.cats[data-ready="on"] .cu { transition: transform 180ms var(--tf-ease), width 180ms var(--tf-ease), opacity 150ms ease; }

/* a category: its name and facts, the price source line, then its groups under a hairline that fades out */
.panel { min-width: 0; padding: 1.5rem 0 0 2.5rem; border-left: 1px solid var(--tf-line-strong); }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.ph h1, .ph h2 { margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.025em; }
.pf { margin-top: 0.4rem; color: var(--tf-muted); font-size: 0.9rem; }
.pf i { font-style: normal; margin: 0 0.5rem; color: var(--tf-faint); }
.ph .src { margin: 0 0 0.15rem; text-align: right; white-space: nowrap; }
.grp { margin-top: 2.25rem; }
.grp > h3 { padding-bottom: 0.65rem; border-bottom: 1px solid var(--tf-line-strong); font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; }
.grp > h3 span { margin-left: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--tf-faint); font-variant-numeric: tabular-nums; }
.sg { margin-top: 1.25rem; }
.sg h4 { margin: 0; font-size: 0.85rem; font-weight: 500; color: var(--tf-muted); }
.sg h4 span { margin-left: 0.3rem; color: var(--tf-faint); }

/* art: Steam's picture, else four of what it holds as a mosaic */
.ar { display: block; aspect-ratio: 4 / 3; }
.ar img { width: 100%; height: 100%; object-fit: contain; }
.ar.mo { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1px; }
.ar.mo.n1 { grid-template-columns: 1fr; }

/* a row: art, name, facts and price, then its rarest contents, each lighting the floor under it in its rarity's
   colour */
.cr { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--tf-line); }
.cr:first-child { border-top: 0; }
.cr .ca { display: block; }
.cm { min-width: 0; }
.cm > a { display: block; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; color: var(--tf-fg); text-decoration: none; line-height: 1.3; }
.cm > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cm .cd { display: block; font-size: 0.8rem; color: var(--tf-faint); }
.cm .pt { margin-top: 0.1rem; font-size: 0.88rem; }
.cm .pt small { display: inline; margin-left: 0.35rem; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 4.6rem; gap: 0.45rem; }
.strip a { display: block; padding-bottom: 3px; border-bottom: 2px solid var(--rc); }
.strip img { width: 100%; height: auto; }
.lad { display: block; width: 100%; max-width: 9rem; height: 4px; margin-top: 0.5rem; }
.lad rect { fill: var(--rc); }

/* tiles: art, a name told apart from its group's, a price; raised under the pointer */
.tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 1.25rem 0.9rem; margin-top: 0.9rem; }
.sg .tg { margin-top: 0.6rem; }
.tg a { display: flex; flex-direction: column; height: 100%; margin: -0.45rem; padding: 0.45rem; border-radius: var(--tf-radius); text-decoration: none; }
.tg a:hover { background: var(--tf-ink-raised); }
.tg .ar { margin-bottom: 0.35rem; }
.tg b { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--tf-fg); }
.tg .pt { margin-top: 0.15rem; font-size: 0.85rem; }
.tg .pt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg .ag { display: none; }

/* a card's price over its wears: the range of the cheapest asks, "$18.48–$119.55" */
.pt.rg b { font-weight: 600; }

/* a weapon case's return: the case, its key, the expected value of a case opened and the return, as tags; the
   skins' share of it behind a closed row */
.roi { margin-top: 1rem; color: var(--tf-muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.roi b { font-weight: 600; color: var(--tf-fg); }
.roi i { font-style: normal; margin: 0 0.5rem; color: var(--tf-faint); }
.roi .few { margin-left: 0.25rem; }
.rd { margin-top: 1.75rem; border-top: 1px solid var(--tf-line); border-bottom: 1px solid var(--tf-line); }
.rd summary { min-height: 2.75rem; padding: 0.65rem 0; cursor: pointer; font-size: 0.92rem; font-weight: 550; color: var(--tf-text); }
.rd summary:hover, .rd[open] summary { color: var(--tf-fg); }
.rot { min-width: 0; }
.rot tbody th i { display: inline-block; width: 3px; height: 0.9em; margin-right: 0.6rem; vertical-align: -0.1em; background: var(--rc); }
.rot tr.tot th { padding-left: 0; font-weight: 600; color: var(--tf-fg); }
.rot tr.tot td { color: var(--tf-fg); font-weight: 600; }

/* the sort of a list: a quiet select, right-aligned (in the source line's row on a container or collection, beside it
   on a category's head); hidden until catalogue.js finds more than one order that means something */
.lt { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 0.9rem; }
.lt .src { margin: 0; }
.lt .srt { margin-left: auto; }
.phr { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.srt { position: relative; display: inline-block; color-scheme: dark; }
.srt[hidden] { display: none; }
.srt::after { content: ""; position: absolute; right: 0.8rem; top: 50%; width: 0.32rem; height: 0.32rem; border-right: 1.5px solid var(--tf-muted); border-bottom: 1.5px solid var(--tf-muted); transform: translateY(-0.2rem) rotate(45deg); pointer-events: none; }
.srt select { appearance: none; height: 1.875rem; padding: 0 1.9rem 0 0.8rem; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius-sm); background: none; color: var(--tf-fg); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.srt select:hover { border-color: var(--tf-line-heavy); background: var(--tf-ink-raised); }
.srt select:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }
.srt option { background: var(--tf-pane); color: var(--tf-fg); }
/* a category sorted as one list: the groups' headings and subheadings give way */
.panel.flat .grp > h3, .panel.flat .sg > h4 { display: none; }
.panel.flat .grp { margin-top: 1.25rem; }

/* the price switch, in the source line: Cheapest (any market) or one market's ask on every price; a small control, its menu an opaque panel */
.mkw { position: relative; }
.mk { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.875rem; padding: 0 0.7rem 0 0.8rem; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius-sm); background: none; color: var(--tf-fg); font-size: 0.8rem; font-weight: 500; line-height: 1; cursor: pointer; }
.mk::after { content: ""; width: 0.32rem; height: 0.32rem; border-right: 1.5px solid var(--tf-muted); border-bottom: 1.5px solid var(--tf-muted); transform: translateY(-0.1rem) rotate(45deg); }
.mk:hover, .mk[aria-expanded="true"] { border-color: var(--tf-line-heavy); background: var(--tf-ink-raised); }
.mkm { position: absolute; z-index: 30; top: calc(100% + 0.35rem); left: 0; display: flex; flex-direction: column; min-width: 10.5rem; padding: 0.25rem; border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius); background: var(--tf-pane); text-align: left; }
.mkm[hidden] { display: none; }
.mkm button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; padding: 0 0.7rem; border: 0; border-radius: var(--tf-radius-sm); background: none; color: var(--tf-text); font-size: 0.88rem; text-align: left; cursor: pointer; }
.mkm button:hover, .mkm button:focus-visible { background: var(--tf-ink-hover); color: var(--tf-fg); outline: none; }
.mkm button[aria-checked="true"] { color: var(--tf-fg); }
.mkm button[aria-checked="true"]::after { content: ""; width: 0.3rem; height: 0.6rem; margin-right: 0.15rem; border-right: 1.5px solid var(--tf-fg); border-bottom: 1.5px solid var(--tf-fg); transform: translateY(-0.08rem) rotate(45deg); }
.mkm button:first-child { position: relative; margin-bottom: 0.3rem; }
.mkm button:first-child::before { content: ""; position: absolute; left: 0.4rem; right: 0.4rem; bottom: -0.2rem; height: 1px; background: var(--tf-line); }

/* motion: a category swapped in by a click fades in (catalogue.js marks it .in); the page's first one is just there */
.panel.in > * { animation: cat-in 160ms var(--tf-ease) backwards; }
.panel.out { opacity: 0; transition: opacity 120ms var(--tf-ease); }
@keyframes cat-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .panel.in > * { animation: none; }
}

/* Narrower than the menu and a category side by side: the menu is one line of labels over the category, the same
   white rule sliding under the current one; it scrolls sideways and sticks right under the header, on solid black. */
@media (max-width: 60rem) {
  .cg { display: block; }
  .panel { padding: 0; border-left: 0; }
  .cats { top: var(--tf-header-h); z-index: 10; margin-top: 0; flex-direction: row; gap: 1.5rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--tf-ink); box-shadow: inset 0 -1px var(--tf-line-strong); }
  .cats::-webkit-scrollbar { display: none; }
  .cats a { flex: none; align-items: center; padding: 0.7rem 0 0; }
  .cats a > span { padding-bottom: 0.65rem; }
  .cats small { display: none; }
  .ph { margin-top: 1.75rem; }
}
@media (max-width: 52rem) {
  .strip { grid-auto-columns: 3.9rem; }
}

/* Phones: one column; no text under 14 px, nothing to tap under 40 px. */
@media (max-width: 640px) {
  .crumbs, .meta, .src, .fn, .pt small, .bl .oi, .card .w, .cm .cd, .node, .col .sub, .tiers .ga, .tr, .amt, .sf-res em, .sf-res .pc small, .tiles a, .pf, .grp > h3 span, .sg h4, .tg .pt, .kh .pt, .more summary, .eb, .node .nk, .amt thead th, .sf-res .g, .few, .sup, .col .sub { font-size: 0.875rem; }
  .crumbs a, .meta a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .head { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 1rem; }
  .head .hart { width: 6.5rem; }
  .head h1 { font-size: 1.875rem; }
  .meta i { margin: 0 0.3rem; }
  .band { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .bl { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
  .bl .oi, .bl h2 { margin: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 0.75rem; }
  .kr { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .kh { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
  .kh .pt { text-align: right; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .side h1 { font-size: 1.875rem; }
  .wp { grid-column: 2; grid-row: 1; text-align: right; }
  .tiers li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; }
  .tiers .ga { grid-row: 2; }
  .ch, .ch.c3 { grid-template-columns: minmax(0, 1fr); }
  .to { width: 1px; height: 1.5rem; margin: 0.6rem 0 0.6rem 2.5rem; }
  .to::after { right: auto; top: auto; left: -3.5px; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--tf-grey-4); border-bottom: 0; }
  .bh { flex-direction: column; align-items: stretch; padding-bottom: 1.25rem; }
  .sf { width: 100%; }
  .sf-res { left: 0; right: auto; width: 100%; }
  .ph { flex-direction: column; align-items: flex-start; }
  .ph .src { text-align: left; white-space: normal; }
  .phr { align-items: flex-start; }
  .srt select { height: 2.5rem; font-size: 0.875rem; }
  .roi { font-size: 0.875rem; }
  .grp { margin-top: 1.75rem; }
  .cr { grid-template-columns: 5rem minmax(0, 1fr); gap: 0.6rem 0.9rem; }
  .cr .strip { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; }
  .cr .strip a { display: flex; flex-direction: column; justify-content: center; min-height: 2.5rem; }
  .tg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk { height: 2.5rem; font-size: 0.875rem; }
  .mkm button { min-height: 2.75rem; font-size: 0.9375rem; }
  .cm .pt small { display: block; margin-left: 0; }
  /* small links keep their line height and get a 40 px hit area: padding out, the same margin back */
  .src a, .cm > a, .also a, .go a:not(.btn) { display: inline-block; padding: 0.65rem 0; margin: -0.65rem 0; }
  .cm > a { display: block; }
  .sf-in kbd { display: none; }
  .sf-in input { align-self: stretch; font-size: 1rem; }
  .kr ul { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
  .sf-res a { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0 0.7rem; }
  .sf-res .ti { width: 2.5rem; }
}
@media (max-width: 560px) {
  .bh h1, .bt { font-size: 1.875rem; }
}

/* The light theme (web/brand/tokens.css): rarity text is the rarity colour darkened to read on white. */
:root[data-theme="light"] :is(.eb .rn, .node.self .nk) { color: color-mix(in srgb, var(--rc) 58%, #000); }