/* ============================================================
   Panel v2 — New Order game gallery (?neworder)
   Scoped: body.pnv2 .pv2-neworder — classic UI untouched.
   Design contract: CLAUDE-DESIGN-SYSTEM.md + panel-v2-core.css

   TWO SURFACES, ONE SHEET (2026-08-05). The public games browser at
   /services/game_servers/ renders the same picker, so every selector below
   carries a second arm on body.pv2games, the route class that page's template
   sets. Nothing else changed: strip the pv2games arms and this file is byte
   identical to what the panel shipped. Edit the pair together — a rule added
   for only one body class is drift between the two surfaces.
   The public page adds nothing to the tile except its game-page link and its
   Order button; those live in css/public-v2-games.css, not here.
   ============================================================ */

/* ---------- toolbar: one row, one 32px height ---------- */
body.pnv2 .pv2-neworder .pv2-no-toolbar,
body.pv2games .pv2-neworder .pv2-no-toolbar {
	display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
}
body.pnv2 .pv2-neworder .pv2-no-toolbar > *,
body.pv2games .pv2-neworder .pv2-no-toolbar > * { margin: 0 !important; }
body.pnv2 .pv2-neworder .pv2-no-searchwrap,
body.pv2games .pv2-neworder .pv2-no-searchwrap {
	position: relative; display: flex; align-items: center; height: var(--pv2-ctl-h);
	width: 280px; max-width: 100%;
}
/* the classic theme gives every input a 10px bottom margin — inside a stretch row it
   inflates the wrapper past the control and drags the search glyph off the input's
   midline (same root cause as the orders/invoices toolbars). One 32px row. */
body.pnv2 .pv2-neworder .pv2-no-searchwrap .pv2-input,
body.pv2games .pv2-neworder .pv2-no-searchwrap .pv2-input { margin: 0 !important; height: var(--pv2-ctl-h); }
body.pnv2 .pv2-neworder .pv2-no-searchwrap > i,
body.pv2games .pv2-neworder .pv2-no-searchwrap > i {
	position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	margin: 0 !important; line-height: 1; font-size: 12px; pointer-events: none;
	color: var(--pv2-text-dim);
}
body.pnv2 .pv2-neworder .pv2-no-count,
body.pv2games .pv2-neworder .pv2-no-count {
	margin-left: auto !important;
	color: var(--pv2-text-dim); font: 400 12px 'Open Sans', Arial, sans-serif;
	white-space: nowrap;
}

/* sort segmented control (server-side links, 32px like every toolbar control) */
body.pnv2 .pv2-neworder .pv2-no-seg,
body.pv2games .pv2-neworder .pv2-no-seg {
	display: inline-flex; align-items: stretch; height: var(--pv2-ctl-h);
	border: 1px solid var(--pv2-border-strong); border-radius: var(--pv2-radius);
	overflow: hidden; background: var(--pv2-field); flex-shrink: 0;
}
body.pnv2 .pv2-neworder .pv2-no-seg-btn,
body.pv2games .pv2-neworder .pv2-no-seg-btn {
	display: inline-flex; align-items: center; gap: 7px; padding: 0 13px;
	font: 400 12.5px 'Open Sans', Arial, sans-serif; color: var(--pv2-text-soft);
	text-decoration: none; white-space: nowrap;
	border-left: 1px solid var(--pv2-border);
	transition: background-color .12s, color .12s;
}
body.pnv2 .pv2-neworder .pv2-no-seg-btn:first-child,
body.pv2games .pv2-neworder .pv2-no-seg-btn:first-child { border-left: 0; }
body.pnv2 .pv2-neworder .pv2-no-seg-btn i,
body.pv2games .pv2-neworder .pv2-no-seg-btn i { font-size: 12px; color: var(--pv2-text-muted); transition: color .12s; }
body.pnv2 .pv2-neworder .pv2-no-seg-btn:hover,
body.pv2games .pv2-neworder .pv2-no-seg-btn:hover { background: var(--pv2-hover); color: #fff; }
body.pnv2 .pv2-neworder .pv2-no-seg-btn:hover i,
body.pv2games .pv2-neworder .pv2-no-seg-btn:hover i { color: var(--pv2-accent); }
body.pnv2 .pv2-neworder .pv2-no-seg-btn.active,
body.pv2games .pv2-neworder .pv2-no-seg-btn.active { background: var(--pv2-hover); color: #fff; font-weight: 600; }
body.pnv2 .pv2-neworder .pv2-no-seg-btn.active i,
body.pv2games .pv2-neworder .pv2-no-seg-btn.active i { color: var(--pv2-gold); }

/* ---------- game tile grid: 4 / 3 / 2 columns, zero overflow ---------- */
body.pnv2 .pv2-neworder .pv2-no-grid,
body.pv2games .pv2-neworder .pv2-no-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
	margin-bottom: 26px;
}

body.pnv2 .pv2-neworder .pv2-no-tile,
body.pv2games .pv2-neworder .pv2-no-tile {
	display: block; min-width: 0; text-decoration: none;
	background: var(--pv2-panel); border: 1px solid var(--pv2-border);
	border-radius: var(--pv2-radius-lg); overflow: hidden;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
body.pnv2 .pv2-neworder .pv2-no-tile:hover,
body.pv2games .pv2-neworder .pv2-no-tile:hover,
body.pnv2 .pv2-neworder .pv2-no-tile:focus,
body.pv2games .pv2-neworder .pv2-no-tile:focus {
	border-color: var(--pv2-accent); transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); outline: none; text-decoration: none;
}

/* cover image (game-server-icons are 324x176) */
body.pnv2 .pv2-neworder .pv2-no-thumb,
body.pv2games .pv2-neworder .pv2-no-thumb {
	position: relative; aspect-ratio: 324 / 176; overflow: hidden;
	background: var(--pv2-surface);
}
body.pnv2 .pv2-neworder .pv2-no-thumb img,
body.pv2games .pv2-neworder .pv2-no-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	max-width: 100% !important;
	transition: transform .25s ease;
}
body.pnv2 .pv2-neworder .pv2-no-tile:hover .pv2-no-thumb img,
body.pv2games .pv2-neworder .pv2-no-tile:hover .pv2-no-thumb img { transform: scale(1.045); }

/* ---------- the tile badge is a CORNER SASH over the cover art ----------
   Ryan 2026-07-31: "on the new order page I like the sashes instead of the
   labels — look at how we did it in the old version". Ours already:
   layout.css's .corner-ribbon (~2122), which the classic ?neworder and the
   public /order/ still use. layout.css is the PUBLIC SITE's sheet and is not
   edited — the geometry is mirrored here, scoped to the route, on the plain
   <span> the renderer already emits (::before/::after are the fold triangles),
   so no markup changes and the public ribbons are untouched.

   Geometry is derived, not fudged. A W x H band rotated 45deg whose centreline
   sits d from the thumb's top-right corner shows a visible chord of exactly 2d
   and lands its far edge (d + H/2)*sqrt(2) down the right edge. Position it by
   k = d / sqrt(2):  top = k - H/2,  right = k - W/2.
   Desktop: W 110 x H 17, k 29 -> d 41, chord 82px, far edge 70px down a thumb
   that is never shorter than 126px. Longest label "PRE-ORDER" measures 54.4px
   at 9px/700 (POPULAR 46.0, "25% OFF" 41.1), so 82px of chord clears it by
   ~14px a side. W/2 (55) > d (41) puts both band ends AND their folds outside
   the corner, which is what makes it read as folded fabric instead of a
   rotated rectangle — the thumb's overflow:hidden does the cutting.
   Mobile (<=700) shrinks the chord to 66px against a 173px-wide thumb. */
body.pnv2 .pv2-neworder .pv2-no-badge,
body.pv2games .pv2-neworder .pv2-no-badge {
	--pv2-sash-w: 110px; --pv2-sash-h: 17px; --pv2-sash-k: 29px;
	position: absolute; z-index: 2;
	top: calc(var(--pv2-sash-k) - var(--pv2-sash-h) / 2);
	right: calc(var(--pv2-sash-k) - var(--pv2-sash-w) / 2);
	left: auto; bottom: auto;
	display: block; width: var(--pv2-sash-w); height: auto;
	padding: 4px 0; margin: 0;
	transform: rotate(45deg); transform-origin: 50% 50%;
	text-align: center; pointer-events: none;
	font: 700 9px/1 'Open Sans', Arial, sans-serif;
	letter-spacing: .5px; text-transform: uppercase;
	border: 0; border-radius: 0;
	color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
	background: linear-gradient(#ff6b6b 0%, #d9534f 100%);
}
body.pnv2 .pv2-neworder .pv2-no-badge::before,
body.pv2games .pv2-neworder .pv2-no-badge::before,
body.pnv2 .pv2-neworder .pv2-no-badge::after,
body.pv2games .pv2-neworder .pv2-no-badge::after {
	content: ''; position: absolute; bottom: -3px;
	border-top: 3px solid #9e2b25;
	border-left: 3px solid transparent; border-right: 3px solid transparent;
}
body.pnv2 .pv2-neworder .pv2-no-badge::before,
body.pv2games .pv2-neworder .pv2-no-badge::before { left: 0; }
body.pnv2 .pv2-neworder .pv2-no-badge::after,
body.pv2games .pv2-neworder .pv2-no-badge::after { right: 0; }

/* sash variants — the red / amber pair layout.css already ships, plus the
   gold one the featured nav tiles use for offers. White ink does not carry on
   gold, so that variant takes dark ink. */
body.pnv2 .pv2-neworder .pv2-no-badge.new,
body.pv2games .pv2-neworder .pv2-no-badge.new { background: linear-gradient(#ff6b6b 0%, #d9534f 100%); }
body.pnv2 .pv2-neworder .pv2-no-badge.new::before,
body.pv2games .pv2-neworder .pv2-no-badge.new::before,
body.pnv2 .pv2-neworder .pv2-no-badge.new::after,
body.pv2games .pv2-neworder .pv2-no-badge.new::after { border-top-color: #9e2b25; }

body.pnv2 .pv2-neworder .pv2-no-badge.popular,
body.pv2games .pv2-neworder .pv2-no-badge.popular { background: linear-gradient(#ffb347 0%, #f0ad4e 100%); }
body.pnv2 .pv2-neworder .pv2-no-badge.popular::before,
body.pv2games .pv2-neworder .pv2-no-badge.popular::before,
body.pnv2 .pv2-neworder .pv2-no-badge.popular::after,
body.pv2games .pv2-neworder .pv2-no-badge.popular::after { border-top-color: #c77c11; }

body.pnv2 .pv2-neworder .pv2-no-badge.preorder,
body.pv2games .pv2-neworder .pv2-no-badge.preorder {
	background: linear-gradient(#f0b64a 0%, #db9b15 100%);
	color: #1a1a1b; text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}
body.pnv2 .pv2-neworder .pv2-no-badge.preorder::before,
body.pv2games .pv2-neworder .pv2-no-badge.preorder::before,
body.pnv2 .pv2-neworder .pv2-no-badge.preorder::after,
body.pv2games .pv2-neworder .pv2-no-badge.preorder::after { border-top-color: #8a6210; }

/* name + price row */
body.pnv2 .pv2-neworder .pv2-no-meta,
body.pv2games .pv2-neworder .pv2-no-meta { padding: 10px 12px 11px; }
body.pnv2 .pv2-neworder .pv2-no-name,
body.pv2games .pv2-neworder .pv2-no-name {
	font: 600 13px 'Open Sans', Arial, sans-serif; color: #fff; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pnv2 .pv2-neworder .pv2-no-price,
body.pv2games .pv2-neworder .pv2-no-price {
	display: flex; align-items: baseline; gap: 4px; margin-top: 4px;
	font: 400 12px 'Open Sans', Arial, sans-serif; color: var(--pv2-text-muted);
	white-space: nowrap; overflow: hidden;
}
body.pnv2 .pv2-neworder .pv2-no-amount,
body.pv2games .pv2-neworder .pv2-no-amount { color: var(--pv2-accent); font-weight: 600; font-size: 12.5px; }
body.pnv2 .pv2-neworder .pv2-no-cycle,
body.pv2games .pv2-neworder .pv2-no-cycle { color: var(--pv2-text-dim); }
body.pnv2 .pv2-neworder .pv2-no-go,
body.pv2games .pv2-neworder .pv2-no-go {
	margin-left: auto; align-self: center; font-size: 11px; color: var(--pv2-gold);
	opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
body.pnv2 .pv2-neworder .pv2-no-tile:hover .pv2-no-go,
body.pv2games .pv2-neworder .pv2-no-tile:hover .pv2-no-go { opacity: 1; transform: translateX(0); }

/* no-results block */
body.pnv2 .pv2-neworder .pv2-no-noresults[hidden],
body.pv2games .pv2-neworder .pv2-no-noresults[hidden] { display: none; }
body.pnv2 .pv2-neworder .pv2-no-noresults .pv2-empty,
body.pv2games .pv2-neworder .pv2-no-noresults .pv2-empty { padding: 60px 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	body.pnv2 .pv2-neworder .pv2-no-grid,
	body.pv2games .pv2-neworder .pv2-no-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	body.pnv2 .pv2-neworder .pv2-no-toolbar,
	body.pv2games .pv2-neworder .pv2-no-toolbar { flex-wrap: wrap; }
	body.pnv2 .pv2-neworder .pv2-no-searchwrap,
	body.pv2games .pv2-neworder .pv2-no-searchwrap { width: 100%; order: 1; }
	body.pnv2 .pv2-neworder .pv2-no-seg,
	body.pv2games .pv2-neworder .pv2-no-seg { order: 2; }
	body.pnv2 .pv2-neworder .pv2-no-count,
	body.pv2games .pv2-neworder .pv2-no-count { order: 3; }
}
@media (max-width: 700px) {
	body.pnv2 .pv2-neworder .pv2-no-grid,
	body.pv2games .pv2-neworder .pv2-no-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	body.pnv2 .pv2-neworder .pv2-no-meta,
	body.pv2games .pv2-neworder .pv2-no-meta { padding: 9px 10px 10px; }
	/* two-up tiles halve the cover: chord 82 -> 66 (k 23.33, d 33) so the sash
	   still clears "PRE-ORDER" but stops eating half a 173px-wide thumb. */
	body.pnv2 .pv2-neworder .pv2-no-badge,
	body.pv2games .pv2-neworder .pv2-no-badge { --pv2-sash-w: 88px; --pv2-sash-k: 23.33px; }
	/* touch has no hover/tooltip — let long titles wrap to 2 lines instead of ellipsizing */
	body.pnv2 .pv2-neworder .pv2-no-name,
	body.pv2games .pv2-neworder .pv2-no-name {
		font-size: 12.5px;
		white-space: normal; display: -webkit-box;
		-webkit-line-clamp: 2; -webkit-box-orient: vertical;
	}
}

/* struck-through original price when an active offer discounts the tile (Ryan 2026-07-21) */
body.pnv2 .pv2-no-was,
body.pv2games .pv2-no-was {
	text-decoration: line-through;
	color: var(--pv2-text-dim);
	font-size: 12px;
	margin-left: 7px;
	font-weight: 400;
}

/* The rail grows past 1400px, and a 4-up grid there just makes 372px game
   tiles. Add a column instead so the extra width buys more games on screen.
   This lives here, not in core, because the route sheet loads last and wins. */
@media (min-width: 1400px) {
	body.pnv2 .pv2-neworder .pv2-no-grid,
	body.pv2games .pv2-neworder .pv2-no-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ============================================================
   TAP-TARGET PASS 2026-08-03 — new-order catalog.
   The toolbar reads --pv2-ctl-h for the search field and the sort
   segmented control, so ONE token re-declaration lifts the whole row
   to 44px instead of per-control overrides that drift apart (the
   design-system "re-declare the token, not the rules" pattern).
   The toolbar already wraps at <=900, so a taller row cannot push
   anything sideways. Desktop keeps the 32px toolbar height.
   ============================================================ */
@media (hover: none), (max-width: 900px) {
	body.pnv2 .pv2-neworder .pv2-no-toolbar,
	body.pv2games .pv2-neworder .pv2-no-toolbar { --pv2-ctl-h: 44px; }
	/* the segmented buttons stretch to the strip's height, so they inherit it;
	   core's invisible 44px extender covers them either way */
	body.pnv2 .pv2-neworder .pv2-no-seg,
	body.pv2games .pv2-neworder .pv2-no-seg { height: 44px; }
}