/* Prints 2.0 design (ws-brand round 4): built by ws-brand/tools/build-app-p2.mjs from ws-brand/system/p2.css and
   system/skin.css. Do not edit here: edit those and rebuild. Every rule is under body.p2 (set by app.js p2Design only
   while SERVER.boot.p2 is on), so with P2 off this file matches nothing and the page is exactly as before. */
/* ---- tokens ---- */
body.p2 {
  /* surfaces: Darkroom, one step apart */
  --p2-bg: #0b0b0c; --p2-bg2: #131315; --p2-card: #17171a; --p2-card2: #1e1e22; --p2-card3: #26262a;
  --p2-line: rgba(255,255,255,.09); --p2-line2: rgba(255,255,255,.16);
  /* text: paper, three steps (ink3 is the dimmest allowed, 5.6:1 on bg) */
  --p2-ink: #f3f1ec; --p2-ink2: #b8b5ad; --p2-ink3: #8b8983;
  --p2-paper: #f3f1ec; --p2-paperInk: #16140f;
  /* one signal: social actions (open together, share, invite) and your own pack */
  --p2-signal: #ff6fb5; --p2-signalInk: #120e1a;
  --p2-accent2: #6fd3ff;
  /* states */
  --p2-go: #7ce0a3; --p2-warn: #ffd60a; --p2-stop: #ff6b6b; --p2-live: #ff453a;
  /* ink, the play currency */
  --p2-gold: #e8c46a; --p2-gold2: #b8913a;
  /* rarity: process inks; 5 = 1 of 1 (the founder's green, nothing else ever uses it) */
  --p2-r0: #8b8983; --p2-r1: #19b7e8; --p2-r2: #9d7bff; --p2-r3: #ffd60a; --p2-r4: #ff3d9a; --p2-r5: #1afe49;
  /* type */
  --p2-head: 'Mona Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --p2-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p2-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;   /* seeds, hashes, codes only */
  --p2-numf: 'Instrument Sans', system-ui, sans-serif;                    /* numbers: the sans, tabular figures */
  /* space: a 4 px grid */
  --p2-s1: 4px; --p2-s2: 8px; --p2-s3: 12px; --p2-s4: 16px; --p2-s5: 20px; --p2-s6: 24px; --p2-s8: 32px; --p2-s10: 40px; --p2-s14: 56px;
  --p2-gutter: 16px;
  /* corners: art 2, tags 6, controls 10, cards 14, sheets 20, people round */
  --p2-ra: 2px; --p2-rt: 6px; --p2-rc: 10px; --p2-rk: 14px; --p2-rs: 20px;
  /* motion */
  --p2-ease: cubic-bezier(.2,.8,.2,1); --p2-fast: 140ms; --p2-base: 240ms; --p2-slow: 420ms;
  --p2-shadow: 0 18px 48px rgba(0,0,0,.55);
  /* layout */
  --p2-top-h: 56px; --p2-tabs-h: 64px; --p2-rail-w: 232px; --p2-max: 1180px;
}
/* ---- the system's components, for new markup (wrap it in .p2-sys) ---- */
body.p2 .p2-sys {
  background: var(--p2-bg); color: var(--p2-ink);
  font: 400 15.5px/1.5 var(--p2-sans); -webkit-font-smoothing: antialiased;
}

body.p2 .p2-sys *, body.p2 .p2-sys *::before, body.p2 .p2-sys *::after { box-sizing: border-box; }
body.p2 .p2-sys a { color: inherit; text-decoration: none; }
body.p2 .p2-sys button { font: inherit; color: inherit; }
body.p2 .p2-sys canvas.p2-px, body.p2 .p2-sys .p2-art canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- 2. type ---------- */
body.p2 .p2-sys .p2-display { font: 750 44px/1 var(--p2-head); letter-spacing: -.045em; margin: 0; }
body.p2 .p2-sys .p2-h1 { font: 700 32px/1.05 var(--p2-head); letter-spacing: -.035em; margin: 0; }
body.p2 .p2-sys .p2-h2 { font: 700 24px/1.1 var(--p2-head); letter-spacing: -.03em; margin: 0; }
body.p2 .p2-sys .p2-h3 { font: 650 19px/1.2 var(--p2-head); letter-spacing: -.02em; margin: 0; }
body.p2 .p2-sys .p2-body { font: 400 15.5px/1.5 var(--p2-sans); }
body.p2 .p2-sys .p2-small { font: 400 13.5px/1.45 var(--p2-sans); color: var(--p2-ink2); }
body.p2 .p2-sys .p2-num { font: 500 13.5px/1.4 var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .p2-sys .p2-code { font: 500 12.5px var(--p2-mono); color: var(--p2-ink3); word-break: break-all; }
body.p2 .p2-sys .p2-dim { color: var(--p2-ink3); } body.p2 .p2-sys .p2-t2 { color: var(--p2-ink2); }
@media (min-width: 900px) { body.p2 .p2-sys .p2-display { font-size: 60px; } body.p2 .p2-sys .p2-h1 { font-size: 40px; } }

/* ---------- 3. layout: header, tabs (phone bar / desk rail), page ---------- */
body.p2 .p2-sys .p2-top { position: sticky; top: 0; z-index: 30; height: var(--p2-top-h); display: flex; align-items: center; gap: var(--p2-s1);
  padding: 0 var(--p2-s2) 0 var(--p2-s4); background: rgba(11,11,12,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--p2-line); }
body.p2 .p2-sys .p2-brand { display: flex; align-items: center; gap: 9px; font: 800 19px var(--p2-head); letter-spacing: -.045em; margin-right: auto; }
body.p2 .p2-sys .p2-brand canvas { width: 28px; height: 28px; }
body.p2 .p2-sys .p2-top .p2-back { margin-right: var(--p2-s1); }
body.p2 .p2-sys .p2-top .p2-title { font: 650 16px var(--p2-head); letter-spacing: -.02em; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p2 .p2-sys .p2-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--p2-tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: rgba(11,11,12,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--p2-line); }
body.p2 .p2-sys .p2-tabs a { display: grid; justify-items: center; gap: 3px; font: 500 11.5px var(--p2-sans); color: var(--p2-ink3); position: relative; padding: 6px 0; }
body.p2 .p2-sys .p2-tabs a svg { width: 24px; height: 24px; }
body.p2 .p2-sys .p2-tabs a.on { color: var(--p2-ink); }
body.p2 .p2-sys .p2-tabs a .p2-dot { position: absolute; top: 4px; left: calc(50% + 9px); }
body.p2 .p2-sys .p2-tabs .p2-open { width: 56px; height: 56px; margin: 0 auto; border-radius: 18px; background: var(--p2-paper); color: var(--p2-paperInk); place-content: center; gap: 0; }
body.p2 .p2-sys .p2-tabs .p2-open svg { width: 26px; height: 26px; }
body.p2 .p2-sys .p2-tabs .p2-open .p2-badge { position: absolute; top: -4px; right: -6px; }
body.p2 .p2-sys .p2-tabs .p2-open.ready { background: var(--p2-paper); color: var(--p2-paperInk); }
body.p2 .p2-sys .p2-page { padding: var(--p2-s4) var(--p2-gutter) calc(var(--p2-tabs-h) + var(--p2-s8)); max-width: var(--p2-max); margin: 0 auto; }
body.p2 .p2-sys .p2-tabs .p2-railonly { display: none; }
@media (min-width: 900px) {
  body.p2 .p2-sys .p2-tabs .p2-railonly { display: flex; }
  body.p2 .p2-sys .p2-tabs .p2-railbrand { font: 800 20px var(--p2-head); letter-spacing: -.045em; color: var(--p2-ink); margin-bottom: 14px; }
  body.p2 .p2-sys .p2-tabs .p2-railbrand:hover { background: none; }
  body.p2 .p2-sys .p2-tabs .p2-railbrand canvas { width: 28px; height: 28px; }
  body.p2 .p2-sys .p2-tabs .p2-railfoot { margin-top: 28px; border-top: 1px solid var(--p2-line); border-radius: 0; padding-top: 18px; }
  body.p2 .p2-sys.p2-has-rail .p2-top .p2-brand { visibility: hidden; }
}
@media (min-width: 900px) {
  body.p2 .p2-sys .p2-tabs { top: 0; right: auto; width: var(--p2-rail-w); height: 100vh; grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: start;
    gap: 2px; padding: var(--p2-s4) var(--p2-s3); border-top: 0; border-right: 1px solid var(--p2-line); }
  body.p2 .p2-sys .p2-tabs a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--p2-rc); font-size: 15px; }
  body.p2 .p2-sys .p2-tabs a:hover { background: var(--p2-card); color: var(--p2-ink); }
  body.p2 .p2-sys .p2-tabs a.on { background: var(--p2-card2); }
  body.p2 .p2-sys .p2-tabs .p2-open { width: auto; height: auto; margin: 6px 0 10px; border-radius: var(--p2-rc); padding: 12px; place-content: initial; }
  body.p2 .p2-sys .p2-tabs .p2-open::after { content: 'Open a pack'; font: 650 15px var(--p2-sans); }
  body.p2 .p2-sys.p2-has-rail .p2-top, body.p2 .p2-sys.p2-has-rail .p2-page { margin-left: var(--p2-rail-w); }
  body.p2 .p2-sys .p2-page { padding-bottom: var(--p2-s14); }
}

/* ---------- 4. icon buttons, the ink pill, dots and badges ---------- */
body.p2 .p2-sys .p2-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--p2-rc); background: none; border: 0; cursor: pointer; position: relative; color: var(--p2-ink2); }
body.p2 .p2-sys .p2-icon:hover { background: var(--p2-card); color: var(--p2-ink); }
body.p2 .p2-sys .p2-icon svg { width: 22px; height: 22px; }
body.p2 .p2-sys svg.p2-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.p2 .p2-sys .p2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p2-signal); position: absolute; top: 8px; right: 8px; box-shadow: 0 0 0 2px var(--p2-bg); }
body.p2 .p2-sys .p2-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--p2-signal); color: var(--p2-signalInk); font: 700 12px/20px var(--p2-numf); text-align: center; }
body.p2 .p2-sys .p2-inkpill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 99px; background: var(--p2-card); border: 1px solid var(--p2-line); font: 600 14px var(--p2-numf); font-variant-numeric: tabular-nums; cursor: pointer; }
body.p2 .p2-sys .p2-gem { width: 11px; height: 14px; background: var(--p2-gold); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); flex: none; display: inline-block; }
body.p2 .p2-sys .p2-av { width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden; background: var(--p2-card3); display: inline-grid; place-items: center; font: 700 13px var(--p2-head); }
body.p2 .p2-sys .p2-av.lg { width: 72px; height: 72px; font-size: 26px; }

/* ---------- 5. the print: the art is the hero ---------- */
/* The frame: square art, 2 px corner, nothing drawn on top of it. Everything about the print sits below it. */
body.p2 .p2-sys .p2-art { position: relative; aspect-ratio: 1; border-radius: var(--p2-ra); overflow: hidden; background: var(--p2-card2); }
body.p2 .p2-sys .p2-art > canvas, body.p2 .p2-sys .p2-art > img { width: 100%; height: 100%; display: block; }
/* a print as a card in a grid */
body.p2 .p2-sys .p2-print { display: block; position: relative; }
body.p2 .p2-sys .p2-print .p2-cap { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: baseline; padding: 8px 2px 0; }
body.p2 .p2-sys .p2-print .p2-name { font: 600 14.5px/1.25 var(--p2-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p2 .p2-sys .p2-print .p2-no { font: 500 13px var(--p2-numf); font-variant-numeric: tabular-nums; color: var(--p2-ink3); }
body.p2 .p2-sys .p2-print .p2-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; margin-top: 3px; font: 500 13px var(--p2-numf); font-variant-numeric: tabular-nums; color: var(--p2-ink2); }
body.p2 .p2-sys .p2-print:hover .p2-art { outline: 1px solid var(--p2-line2); outline-offset: 3px; }
/* yours: a quiet mark under the art, never on it */
body.p2 .p2-sys .p2-print.mine .p2-cap::before { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); }
/* the grid: 2 up on a phone, more as room allows */
body.p2 .p2-sys .p2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p2-s5) var(--p2-s3); }
@media (min-width: 640px) { body.p2 .p2-sys .p2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { body.p2 .p2-sys .p2-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--p2-s6) var(--p2-s4); } }
body.p2 .p2-sys .p2-grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--p2-s3) var(--p2-s2); }
@media (min-width: 1100px) { body.p2 .p2-sys .p2-grid.dense { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* a print shown big (its own page): full bleed on a phone, the art on a wall on desk */
body.p2 .p2-sys .p2-hero-art { margin: 0 calc(-1 * var(--p2-gutter)); }
body.p2 .p2-sys .p2-hero-art .p2-art { border-radius: 0; }
@media (min-width: 900px) { body.p2 .p2-sys .p2-hero-art { margin: 0; } body.p2 .p2-sys .p2-hero-art .p2-art { border-radius: var(--p2-ra); } }

/* ---------- 6. rarity: one display everywhere (notches + "1 in N") ---------- */
body.p2 .p2-sys .p2-rar { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--p2-numf); font-variant-numeric: tabular-nums; color: var(--p2-ink2); white-space: nowrap; }
body.p2 .p2-sys .p2-rar i { display: inline-flex; gap: 2px; }
body.p2 .p2-sys .p2-rar i b { width: 4px; height: 10px; border-radius: 1px; background: var(--p2-card3); }
body.p2 .p2-sys .p2-rar[data-r="0"] i b:nth-child(-n+1) { background: var(--p2-r0); }
body.p2 .p2-sys .p2-rar[data-r="1"] i b:nth-child(-n+2) { background: var(--p2-r1); }
body.p2 .p2-sys .p2-rar[data-r="2"] i b:nth-child(-n+3) { background: var(--p2-r2); }
body.p2 .p2-sys .p2-rar[data-r="3"] i b:nth-child(-n+4) { background: var(--p2-r3); }
body.p2 .p2-sys .p2-rar[data-r="4"] i b { background: var(--p2-r4); }
body.p2 .p2-sys .p2-rar[data-r="5"] i b { background: var(--p2-r5); }
body.p2 .p2-sys .p2-rar[data-r="4"], body.p2 .p2-sys .p2-rar[data-r="5"] { color: var(--p2-ink); }
body.p2 .p2-sys .p2-rar .p2-tier { font-family: var(--p2-sans); font-weight: 600; }
/* a 1 of 1 gets one green hairline on its frame; nothing else ever does */
body.p2 .p2-sys .p2-print.uniq .p2-art { box-shadow: 0 0 0 2px var(--p2-r5); }

/* ---------- 7. ink amounts ---------- */
body.p2 .p2-sys .p2-ink { display: inline-flex; align-items: center; gap: 5px; font: 600 14px var(--p2-numf); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.p2 .p2-sys .p2-ink.lg { font-size: 24px; gap: 8px; } body.p2 .p2-sys .p2-ink.lg .p2-gem { width: 15px; height: 19px; }
body.p2 .p2-sys .p2-ink.dim { color: var(--p2-ink3); font-weight: 500; }

/* ---------- 8. buttons ---------- */
body.p2 .p2-sys .p2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--p2-rc);
  border: 0; cursor: pointer; font: 650 15.5px var(--p2-sans); background: var(--p2-paper); color: var(--p2-paperInk);
  transition: transform var(--p2-fast) var(--p2-ease), background var(--p2-fast); }
body.p2 .p2-sys .p2-btn:active { transform: scale(.97); }
body.p2 .p2-sys .p2-btn svg { width: 19px; height: 19px; }
body.p2 .p2-sys .p2-btn.sig { background: var(--p2-paper); color: var(--p2-paperInk); }      /* with friends: same paper as every action (critique r1: pink competed with the art) */
body.p2 .p2-sys .p2-btn.ghost { background: var(--p2-card2); color: var(--p2-ink); }
body.p2 .p2-sys .p2-btn.line { background: none; color: var(--p2-ink); box-shadow: inset 0 0 0 1px var(--p2-line2); }
body.p2 .p2-sys .p2-btn.stop { background: none; color: var(--p2-stop); box-shadow: inset 0 0 0 1px rgba(255,107,107,.4); }
body.p2 .p2-sys .p2-btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
body.p2 .p2-sys .p2-btn.lg { height: 54px; font-size: 16.5px; padding: 0 26px; }
body.p2 .p2-sys .p2-btn.wide { width: 100%; }
body.p2 .p2-sys .p2-btn[disabled] { opacity: .45; cursor: default; transform: none; }
body.p2 .p2-sys .p2-btn:focus-visible, body.p2 .p2-sys .p2-chip:focus-visible, body.p2 .p2-sys .p2-icon:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 2px; }
body.p2 .p2-sys .p2-actions { display: flex; gap: var(--p2-s2); align-items: center; }
body.p2 .p2-sys .p2-actions .p2-btn:first-child { flex: 1; }
/* the action bar pinned above the tabs on a phone (buy / offer on a print) */
body.p2 .p2-sys .p2-actionbar { position: sticky; bottom: calc(var(--p2-tabs-h) + var(--p2-s2)); z-index: 5; display: flex; gap: var(--p2-s2); align-items: center;
  padding: var(--p2-s2); margin: var(--p2-s4) calc(-1 * var(--p2-s2)) 0; border-radius: var(--p2-rk); background: rgba(19,19,21,.96); backdrop-filter: blur(12px); border: 1px solid var(--p2-line); }
body.p2 .p2-sys .p2-actionbar .p2-btn { flex: 1; }
body.p2 .p2-sys .p2-actionbar .p2-price { padding: 0 8px; }
body.p2 .p2-sys .p2-actionbar .p2-price small { display: block; font: 400 11.5px var(--p2-sans); color: var(--p2-ink3); }

/* ---------- 9. chips and segments ---------- */
body.p2 .p2-sys .p2-chips { display: flex; gap: var(--p2-s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--p2-gutter)); padding: 2px var(--p2-gutter); }
body.p2 .p2-sys .p2-chips::-webkit-scrollbar { display: none; }
body.p2 .p2-sys .p2-chip { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--p2-line2); background: none; color: var(--p2-ink2); font: 500 14px var(--p2-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
body.p2 .p2-sys .p2-chip.on { background: var(--p2-ink); color: var(--p2-bg); border-color: var(--p2-ink); }
body.p2 .p2-sys .p2-chip .p2-n { font: 500 12.5px var(--p2-numf); opacity: .7; }
body.p2 .p2-sys .p2-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 12px; background: var(--p2-card); gap: 2px; }
body.p2 .p2-sys .p2-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--p2-ink2); font: 550 14px var(--p2-sans); cursor: pointer; }
body.p2 .p2-sys .p2-seg button.on { background: var(--p2-card3); color: var(--p2-ink); }

/* ---------- 10. section heads, stats, lists, tables ---------- */
body.p2 .p2-sys .p2-sec { margin: var(--p2-s8) 0 var(--p2-s3); display: flex; align-items: baseline; gap: var(--p2-s3); }
body.p2 .p2-sys .p2-sec h2 { font: 700 20px var(--p2-head); letter-spacing: -.025em; margin: 0; }
body.p2 .p2-sys .p2-sec a { margin-left: auto; font: 500 14px var(--p2-sans); color: var(--p2-ink3); white-space: nowrap; }
/* stats as a sentence of facts, never boxed cards */
body.p2 .p2-sys .p2-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--p2-ink2); }
body.p2 .p2-sys .p2-stats b { color: var(--p2-ink); font: 600 14px var(--p2-numf); font-variant-numeric: tabular-nums; margin-right: 4px; }
/* lists: the phone's table */
body.p2 .p2-sys .p2-list { display: grid; }
body.p2 .p2-sys .p2-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--p2-line); }
body.p2 .p2-sys .p2-row:last-child { border-bottom: 0; }
body.p2 .p2-sys .p2-row .p2-art { width: 48px; }
body.p2 .p2-sys .p2-row .p2-t { font: 600 15px/1.25 var(--p2-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p2 .p2-sys .p2-row .p2-s { font-size: 13px; color: var(--p2-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p2 .p2-sys .p2-row .p2-r { text-align: right; display: grid; justify-items: end; gap: 2px; }
body.p2 .p2-sys .p2-row.noart { grid-template-columns: 1fr auto; }
/* desk tables: only where comparing many numbers is the job (market sets, sales); right-aligned numbers, no empty columns */
body.p2 .p2-sys .p2-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
body.p2 .p2-sys .p2-table th { text-align: left; font: 500 13px var(--p2-sans); color: var(--p2-ink3); padding: 8px 10px; border-bottom: 1px solid var(--p2-line); white-space: nowrap; }
body.p2 .p2-sys .p2-table td { padding: 10px; border-bottom: 1px solid var(--p2-line); vertical-align: middle; }
body.p2 .p2-sys .p2-table td.n, body.p2 .p2-sys .p2-table th.n { text-align: right; font-family: var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .p2-sys .p2-table tr:hover td { background: var(--p2-bg2); }
/* key facts (print page): label / value pairs */
body.p2 .p2-sys .p2-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--p2-s4); }
body.p2 .p2-sys .p2-facts div { padding: 10px 0; border-bottom: 1px solid var(--p2-line); }
body.p2 .p2-sys .p2-facts dt { font-size: 13px; color: var(--p2-ink3); } body.p2 .p2-sys .p2-facts dd { margin: 2px 0 0; font: 600 15px var(--p2-sans); }
body.p2 .p2-sys .p2-facts dd.rare { color: var(--p2-ink); } body.p2 .p2-sys .p2-facts dd small { font: 500 12.5px var(--p2-numf); color: var(--p2-ink3); margin-left: 6px; }
/* disclosure */
body.p2 .p2-sys details.p2-more { border-bottom: 1px solid var(--p2-line); }
body.p2 .p2-sys details.p2-more summary { list-style: none; cursor: pointer; padding: 14px 0; font: 600 15px var(--p2-sans); display: flex; justify-content: space-between; }
body.p2 .p2-sys details.p2-more summary::after { content: '+'; color: var(--p2-ink3); font-weight: 400; }
body.p2 .p2-sys details.p2-more[open] summary::after { content: '−'; }
body.p2 .p2-sys details.p2-more summary::-webkit-details-marker { display: none; }

/* ---------- 11. cards, sheets, toasts ---------- */
body.p2 .p2-sys .p2-card { background: var(--p2-bg2); border: 1px solid var(--p2-line); border-radius: var(--p2-rk); padding: var(--p2-s4); }
body.p2 .p2-sys .p2-scrim { position: fixed; inset: 0; background: rgba(5,5,6,.82); z-index: 40; }
body.p2 .p2-sys .p2-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow: auto; background: var(--p2-bg2);
  border-radius: var(--p2-rs) var(--p2-rs) 0 0; border-top: 1px solid var(--p2-line2); padding: 10px var(--p2-gutter) calc(var(--p2-s6) + env(safe-area-inset-bottom));
  animation: p2s-up var(--p2-base) var(--p2-ease); }
body.p2 .p2-sys .p2-sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--p2-line2); margin: 0 auto 14px; }
@media (min-width: 900px) { body.p2 .p2-sys .p2-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; transform: translate(-50%, -50%); border-radius: var(--p2-rs); border: 1px solid var(--p2-line2); animation: p2s-fade var(--p2-base) var(--p2-ease); }
  body.p2 .p2-sys .p2-sheet::before { display: none; } }
body.p2 .p2-sys .p2-sheet.inline { position: static; transform: none; width: auto; animation: none; box-shadow: var(--p2-shadow); }
body.p2 .p2-sys .p2-field { display: grid; gap: 6px; margin: var(--p2-s4) 0; }
body.p2 .p2-sys .p2-field label { font-size: 13.5px; color: var(--p2-ink2); }
body.p2 .p2-sys .p2-input { height: 50px; padding: 0 14px; border-radius: var(--p2-rc); border: 1px solid var(--p2-line2); background: var(--p2-bg); color: var(--p2-ink); font: 600 18px var(--p2-numf); font-variant-numeric: tabular-nums; width: 100%; }
body.p2 .p2-sys .p2-input:focus { outline: 2px solid var(--p2-accent2); outline-offset: 1px; }
body.p2 .p2-sys .p2-help { font-size: 13px; color: var(--p2-ink3); }
body.p2 .p2-sys .p2-help.warn { color: var(--p2-warn); }
body.p2 .p2-sys .p2-toast { position: fixed; left: 50%; bottom: calc(var(--p2-tabs-h) + 16px); transform: translateX(-50%); z-index: 50; display: flex; gap: 10px; align-items: center;
  padding: 12px 16px; border-radius: 12px; background: var(--p2-paper); color: var(--p2-paperInk); font: 550 14.5px var(--p2-sans); box-shadow: var(--p2-shadow); animation: p2s-fade var(--p2-base) var(--p2-ease); }

/* ---------- 12. empty and loading ---------- */
body.p2 .p2-sys .p2-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: var(--p2-s10) var(--p2-s4); }
body.p2 .p2-sys .p2-empty canvas { width: 56px; height: 56px; opacity: .9; }
body.p2 .p2-sys .p2-empty b { font: 650 17px var(--p2-head); letter-spacing: -.02em; }
body.p2 .p2-sys .p2-empty p { margin: 0; color: var(--p2-ink3); max-width: 300px; font-size: 14px; }
/* loading: a still placeholder in the art's place, fading in once; never a looping shimmer */
body.p2 .p2-sys .p2-skel { background: var(--p2-card); border-radius: var(--p2-ra); }
body.p2 .p2-sys .p2-skel.line { height: 12px; border-radius: 6px; margin: 8px 0; }
body.p2 .p2-sys .p2-loaded { animation: p2s-fade var(--p2-slow) var(--p2-ease); }

/* ---------- 13. the album: stamps, postmarks, the stockbook page ---------- */
body.p2 .p2-sys .p2-stockbook { background: #1a1813; border-radius: var(--p2-rk); padding: var(--p2-s4); border: 1px solid rgba(255,255,255,.06); }
body.p2 .p2-sys .p2-stockbook .p2-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 8px 12px; border-bottom: 1px solid rgba(243,233,210,.12); }
body.p2 .p2-sys .p2-stamp { aspect-ratio: 1; background: var(--p2-paper); padding: 9%; position: relative;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 64%) -4px -4px / 8px 8px round, linear-gradient(#000, #000) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat;
  mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 64%) -4px -4px / 8px 8px round, linear-gradient(#000, #000) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat; }
body.p2 .p2-sys .p2-stamp .p2-art { border-radius: 0; }
body.p2 .p2-sys .p2-stamp.empty { background: none; outline: 1px dashed rgba(243,233,210,.22); outline-offset: -4px; -webkit-mask: none; mask: none; display: grid; place-items: center; color: rgba(243,233,210,.35); font: 500 12.5px var(--p2-numf); }
/* a postmark: two halves of two collectors' seeds, a cancellation ring with both names */
body.p2 .p2-sys .p2-postmark { position: relative; aspect-ratio: 1; }
body.p2 .p2-sys .p2-postmark .p2-stamp { position: absolute; inset: 0; }
body.p2 .p2-sys .p2-postmark .halves { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
body.p2 .p2-sys .p2-postmark .halves > div { overflow: hidden; position: relative; }
body.p2 .p2-sys .p2-postmark .halves .p2-art { position: absolute; top: 0; height: 100%; width: 200%; aspect-ratio: auto; border-radius: 0; }
body.p2 .p2-sys .p2-postmark .halves > div + div .p2-art { right: 0; }
body.p2 .p2-sys .p2-postmark.pending .halves > div + div { background: var(--p2-paper); outline: 2px dashed rgba(22,20,15,.25); outline-offset: -6px; }
body.p2 .p2-sys .p2-postmark.pending .halves > div + div .p2-art { display: none; }
body.p2 .p2-sys .p2-postmark.faded { opacity: .35; filter: grayscale(1); }
body.p2 .p2-sys .p2-postmark svg.ring { position: absolute; right: -4%; bottom: -4%; width: 36%; height: 36%; transform: rotate(-12deg); pointer-events: none; }
body.p2 .p2-sys .p2-postmark { max-width: 220px; }
body.p2 .p2-sys .p2-pmcap { margin-top: 8px; font-size: 13.5px; }
body.p2 .p2-sys .p2-pmcap b { font-weight: 600; } body.p2 .p2-sys .p2-pmcap span { display: block; font-size: 12.5px; color: var(--p2-ink3); }

/* ---------- 14. switches ---------- */
body.p2 .p2-sys .p2-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; cursor: pointer; }
body.p2 .p2-sys .p2-switch input { appearance: none; width: 46px; height: 28px; border-radius: 99px; background: var(--p2-card3); position: relative; cursor: pointer; flex: none; transition: background var(--p2-fast); }
body.p2 .p2-sys .p2-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--p2-ink); transition: transform var(--p2-base) var(--p2-ease); }
body.p2 .p2-sys .p2-switch input:checked { background: var(--p2-paper); } body.p2 .p2-sys .p2-switch input:checked::after { transform: translateX(18px); background: #0b0b0c; }

/* ---------- 15. motion ---------- */
@keyframes p2s-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes p2s-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.p2 .p2-sys *, body.p2 .p2-sys *::before, body.p2 .p2-sys *::after { animation: none !important; transition: none !important; } }
body.p2 .p2-sys.reduce *, body.p2 .p2-sys.reduce *::before, body.p2 .p2-sys.reduce *::after { animation: none !important; transition: none !important; }

/* ---------- 16. underline tabs (one row per page; replaces pill rows) ---------- */
body.p2 .p2-sys .p2-tabrow { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--p2-line); margin: 0 calc(-1 * var(--p2-gutter)); padding: 0 var(--p2-gutter); }
body.p2 .p2-sys .p2-tabrow::-webkit-scrollbar { display: none; }
body.p2 .p2-sys .p2-tabrow a, body.p2 .p2-sys .p2-tabrow button { flex: none; background: none; border: 0; padding: 12px 0 11px; font: 550 15px var(--p2-sans); color: var(--p2-ink3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
body.p2 .p2-sys .p2-tabrow .on { color: var(--p2-ink); border-bottom-color: var(--p2-ink); }
body.p2 .p2-sys .p2-tabrow .p2-n { font: 500 13px var(--p2-numf); color: var(--p2-ink3); margin-left: 4px; }
/* a plain line of badges, not pills */
body.p2 .p2-sys .p2-badgeline { font-size: 13.5px; color: var(--p2-ink2); }
/* "have" and "missing" marks under a set tile: paper and dim, no extra colour */
body.p2 .p2-sys .p2-have { color: var(--p2-ink); } body.p2 .p2-sys .p2-miss { color: var(--p2-ink3); }

/* ---------- 17. desk scale (critique r2): actions keep a natural width, reading stays readable ---------- */
@media (min-width: 900px) {
  body.p2 .p2-sys .p2-actions .p2-btn:first-child { flex: 0 1 auto; min-width: 220px; }
  body.p2 .p2-sys .p2-btn.wide { width: auto; min-width: 280px; }
  body.p2 .p2-sys .p2-small { font-size: 14.5px; }
  body.p2 .p2-sys .p2-row .p2-s { font-size: 14px; }
}


/* ==================== the skin ==================== */
/* ==========================================================================================================
   Prints 2.0 design, the skin: the real site's existing markup, restyled. Every rule is under body.p2, which app.js
   sets only while the boot says p2 (a tester, or everyone), so with P2 off nothing here matches anything.
   From the round-3 system and its three critique rounds: the art is the colour; nothing drawn on the art; one rarity
   display; no tiny mono capitals; numbers in the sans; paper is the action colour; calmer header and tabs.
   ========================================================================================================== */

/* ---------- type: numbers in the sans (tabular), mono only for seeds and codes ---------- */
body.p2 { --mono: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.p2 .mono, body.p2 .ink, body.p2 .odds, body.p2 .num { font-variant-numeric: tabular-nums; }
body.p2 .hash, body.p2 .icode, body.p2 .rc, body.p2 kbd, body.p2 code, body.p2 .seed, body.p2 .vbox code { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
/* the kicker: a quiet line in the reading face, not a mono label in capitals */
body.p2 .kicker { font: 500 13.5px/1.35 'Instrument Sans', system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
/* (the generated block below, NOCAPS, turns off every other capitals label of app.css) */

/* ---------- the header ---------- */
/* the beta note: one slim line, its links kept */
body.p2 .devnote { padding: 4px 16px; font-size: 12px; background: transparent; border-bottom: 1px solid var(--rule); color: var(--t3); }
body.p2 .devnote b { display: none; }
/* fewer header icons: the Crossing lives on the Floor tab's pages and the account menu; the free pack under Open */
body.p2 .wallet .cxbtn, body.p2 .wallet .freebtn { display: none; }
/* the tab bar: Today · Market · Open · Collection · Floor (labels and order set by app.js p2Design); Open is the paper
   square in the middle on a phone */
@media (max-width: 899px) {
  body.p2 #nav a.p2-open { position: relative; }
  body.p2 #nav a.p2-open svg { width: 26px; height: 26px; padding: 5px; box-sizing: content-box; border-radius: 12px; background: var(--t1); color: var(--k0); }
  body.p2 #nav a.p2-open span { margin-top: 1px; }
}
body.p2 #nav a.due span::after { background: var(--p2-signal, #ff6fb5); }

/* ---------- the print card: nothing on the art ---------- */
body.p2 .card .fbadges, body.p2 .card .glare, body.p2 .card-art > .like, body.p2 .card .newtag { display: none; }
body.p2 .card { background: transparent; }
body.p2 .card-body { padding: 9px 2px 2px; }
body.p2 .card-title { font-weight: 600; }

/* ---------- one rarity display: five notches in process ink, then the odds ---------- */
body.p2 .h0 { --p2n: 1; } body.p2 .h1 { --p2n: 2; } body.p2 .h2 { --p2n: 3; } body.p2 .h3 { --p2n: 4; } body.p2 .h4 { --p2n: 5; }
body.p2 .odds::before, body.p2 .h4 .odds::before, body.p2 .odds.h4::before {
  width: 24px; height: 10px; border-radius: 1px; box-shadow: none;
  background: linear-gradient(90deg, var(--hc, var(--r0)) 0 calc(var(--p2n, 1) * 5px), var(--k3) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); }
body.p2 .odds.uniq::before { --p2n: 5; background: var(--r5); }
body.p2 .odds { color: var(--t2); font: 500 13px var(--mono); }
/* founder question: coloured notches (default) or paper ones: add class p2-rar-paper to body (one line in app.js) */
body.p2.p2-rar-paper { --r1: #8f8c86; --r2: #b0ada6; --r3: #d2cfc8; --r4: #f3f1ec; }
/* founder question: the gold gem (default) or a paper ink drop: add class p2-ink-drop to body */
body.p2.p2-ink-drop { --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' shape-rendering='crispEdges' fill='%23f3f1ec'%3E%3Crect x='4' y='1' width='2' height='2'/%3E%3Crect x='3' y='3' width='4' height='2'/%3E%3Crect x='2' y='5' width='6' height='2'/%3E%3Crect x='1' y='7' width='8' height='5'/%3E%3Crect x='2' y='12' width='6' height='2'/%3E%3C/svg%3E"); --gem-ar: .625; }

/* ---------- the print page / overlay (.pd) ---------- */
body.p2 .pd-info .kicker { margin-bottom: 8px; }
body.p2 .pd-title .pd-ed { font: 500 15px var(--mono); color: var(--t3); }
body.p2 .pd-info .pmeta { gap: 6px 14px; }
body.p2 .pd-info .pmeta .prank, body.p2 .pd-info .pmeta .popf { font-size: 13px; color: var(--t3); }
/* the "replace it" maths moves out of the way (still in Pack odds) */
body.p2 .pd-info > .replace { display: none; }
body.p2 .pd-info .pnums { font-size: 13.5px; }
body.p2 .pd-info .subhead { font: 650 18px var(--font-head, 'Mona Sans'), sans-serif; letter-spacing: -.02em; color: var(--t1); text-transform: none; }
body.p2 .pd-info .disclose summary { font-weight: 600; }

/* ---------- a collection page ---------- */
/* facts as a sentence, not boxed cards */
body.p2 .tfs-card { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
body.p2 .tfs-card > div { padding: 0; border: 0; background: none; display: flex; gap: 6px; align-items: baseline; }
body.p2 .tfs-card > div > span { font-size: 13.5px; color: var(--t3); text-transform: none; letter-spacing: 0; font-weight: 500; order: 2; }
body.p2 .tfs-card > div > b { font: 650 15px var(--mono); order: 1; }
body.p2 .cwhere { opacity: .85; }
body.p2 .cwhere .cw-h { font: 600 14px 'Instrument Sans', sans-serif; color: var(--t2); }

/* ---------- segments become one underline tab row everywhere (Inventory, the Album, a collection) ---------- */
body.p2 .seg { display: flex; gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
body.p2 .seg button { height: auto; padding: 11px 0 10px; border-radius: 0; background: none; color: var(--t3); font: 550 15px 'Instrument Sans', sans-serif; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: none; }
body.p2 .seg button.on { background: none; color: var(--t1); border-bottom-color: var(--t1); }

/* ---------- buttons: paper is the action; nothing glows ---------- */
body.p2 .btn { box-shadow: none; text-shadow: none; }
body.p2 .btn.glow, body.p2 .btn.free, body.p2 .btn.green { background: var(--t1); color: var(--k0); border-color: var(--t1); }

/* ---------- chips: quieter ---------- */
body.p2 .chip { font-family: 'Instrument Sans', sans-serif; letter-spacing: 0; text-transform: none; }

/* ---------- the Album: room for postmarks beside the stamps (filled by the build's postmarks later) ---------- */
body.p2 .p2-pm-slot:empty { display: none; }
body.p2 .p2-pm-slot { margin: 14px 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }

/* ==================== round 5: the feature markup (app.js p2x-*, built only under P2) ==================== */
body.p2 .p2x-hide { display: none; }
body.p2 .p2x-link { background: none; border: 0; padding: 0; font: inherit; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- the set strip (print page, a collection's Your set) ---------- */
body.p2 .p2x-strip { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 72px)); gap: 6px; }
body.p2 .p2x-strip.wrap { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
body.p2 .p2x-tile { display: block; min-width: 0; color: inherit; text-decoration: none; }
body.p2 .p2x-tart { display: block; aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: var(--k2); }
body.p2 .p2x-tart img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; }
body.p2 .p2x-tile.miss .p2x-tart img { opacity: .3; filter: grayscale(1); }
body.p2 .p2x-tile:hover .p2x-tart, body.p2 .p2x-tile:focus-visible .p2x-tart { outline: 1px solid var(--rule2); outline-offset: 2px; }
body.p2 .p2x-tcap { display: flex; justify-content: center; margin-top: 5px; text-align: center; font: 500 11.5px/1.25 var(--mono); color: var(--t3); }
body.p2 .p2x-tcap .ink { font-size: 11.5px; color: var(--t2); }
body.p2 .p2x-tile.have .p2x-tcap { color: var(--t1); }
body.p2 .p2x-setline { margin: 0 0 10px; font-size: 13.5px; color: var(--t2); }
body.p2 .p2x-setline b { color: var(--t1); font-weight: 600; }

/* ---------- the print page: its set after the actions; rank and "like it" moved down ---------- */
body.p2 .p2x-set { margin: 22px 0 6px; }
body.p2 .p2x-sethd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
body.p2 .p2x-sethd .subhead { margin: 0; }
body.p2 .p2x-more { margin-left: auto; font-size: 13.5px; color: var(--t3); white-space: nowrap; }
body.p2 .p2x-rankline { margin: 6px 0 0; font-size: 13px; color: var(--t3); }
body.p2 .p2x-rankline a, body.p2 .p2x-rankline span { color: var(--t3); }

/* ---------- a collection page: the Your set card (the Set line's own words give way to it) ---------- */
body.p2 .p2x-yourset { margin: 18px 0 18px; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--k1); max-width: 640px; }
body.p2 .p2x-ysh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
body.p2 .p2x-yst small { display: block; font-size: 12.5px; color: var(--t3); margin-bottom: 2px; }
body.p2 .p2x-yst b, body.p2 .p2x-yst a { font: 650 16px 'Mona Sans', 'Instrument Sans', sans-serif; letter-spacing: -.02em; color: var(--t1); }
body.p2 .p2x-ysb { font-size: 13.5px; color: var(--t2); }
body.p2 .p2x-yourset .p2x-strip { margin: 4px 0 14px; }
body.p2 .p2x-ysa { display: flex; flex-wrap: wrap; gap: 8px; }
body.p2 .p2x-ysa .btn { min-height: 40px; }
body.p2 .p2x-hasset .setline > span:not(.wantgrp):not(.demand) { display: none; }

/* ---------- Market: one row of tabs, For you ---------- */
body.p2 .p2x-mhead .ph-p, body.p2 .p2x-mhead .mseg { display: none; }
body.p2 .p2x-mtabs { margin-top: 6px; }
body.p2 .p2x-fy { background: none; }
body.p2 .p2x-fy .p2-sec:first-child { margin-top: 18px; }
body.p2 .p2x-fy .p2-list { max-width: 720px; }
body.p2 .p2x-fy .p2-row { color: inherit; }
body.p2 .p2x-fy .p2-row .p2-art img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; }
body.p2 .p2x-fy .p2-s { display: flex; align-items: baseline; gap: 4px; }
body.p2 .p2x-fy .p2-s .ink { font-size: 13px; color: var(--t2); }
body.p2 .p2x-go::after { content: '›'; font-size: 22px; line-height: 1; color: var(--t3); }
body.p2 .p2x-auc { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; max-width: 640px; color: inherit; }
body.p2 .p2x-auc .p2-art img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; }
body.p2 .p2x-big { font-size: 24px; font-weight: 600; color: var(--t1); }
body.p2 .p2x-aucamt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 2px; }
body.p2 .p2x-auc .p2-btn { margin-top: 10px; }
@media (min-width: 900px) { body.p2 .p2x-auc { grid-template-columns: 200px 1fr; } }
body.p2 .p2x-fy .grid.p2x-row6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 899px) {
  body.p2 .p2x-fy .grid.p2x-row6 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
}
body.p2 .p2x-sold { max-width: 720px; }
body.p2 .p2x-also { margin-top: 26px; }
body.p2 .p2x-also .p2x-link { color: var(--t2); font-size: inherit; min-height: 32px; }

/* ---------- the Album: named page tabs ("Fairground · 4 of 8") ---------- */
body.p2 .p2x-ptabs { display: flex; align-items: stretch; gap: 6px; height: auto; margin: 0 0 10px; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; }
body.p2 .p2x-ptabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { body.p2 .p2x-ptabs { flex-wrap: wrap; overflow: visible; } }
body.p2 .p2x-ptabs .ptab, body.p2 .p2x-ptabs .ptab.on { flex: none; max-width: none; width: auto; height: auto; min-height: 44px; margin: 0; padding: 7px 12px; display: block; text-align: left; border-radius: var(--rt); color: var(--t1); }
body.p2 .p2x-ptabs .ptab.on { color: var(--k0); }
body.p2 .p2x-ptabs .ptab::before { display: none; }
body.p2 .p2x-ptabs .ptab .ptl, body.p2 .p2x-ptabs .ptab.on .ptl.on { display: none; }
body.p2 .p2x-ptn { display: grid; gap: 1px; }
body.p2 .p2x-ptn b { font: 600 13.5px/1.2 'Instrument Sans', sans-serif; white-space: nowrap; }
body.p2 .p2x-ptn small { font: 500 12px/1.2 'Instrument Sans', sans-serif; font-variant-numeric: tabular-nums; opacity: .75; }

/* ---------- the profile: The wall, three across, empty places dashed ---------- */
body.p2 .p2x-wall { margin-bottom: 8px; }
body.p2 .p2x-wall .grid.p2x-wallg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 720px; }
body.p2 .p2x-wallg .card-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.p2 .p2x-wallg .card { padding: 0; border: 0; }
body.p2 .p2x-slot { display: block; aspect-ratio: 1; border-radius: var(--ra); border: 1.5px dashed var(--rule2); }
body.p2 a.p2x-slot:hover { border-color: var(--t3); }
body.p2 .p2x-wallnote { margin: 10px 0 0; font-size: 13.5px; color: var(--t3); }

/* ---------- Collection's sub-tabs: Prints · Sets · Album · Wall ---------- */
body.p2 .p2x-invseg button[data-t="portfolio"], body.p2 .p2x-invseg button[data-t="binders"] { display: none; }
body.p2 .seg a.p2x-walltab { flex: none; padding: 11px 0 10px; color: var(--t3); font: 550 15px 'Instrument Sans', sans-serif; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
body.p2 .invline .p2x-link { color: var(--t2); }

/* ---------- Open and Today: the page says its tab's name ---------- */
body.p2 .p2x-openhead .kicker { display: none; }
body.p2 .p2x-todayhead { margin-bottom: 0; }
body.p2 .hf .hf-todo > .hc-h { display: none; }
@media (max-width: 1000px) { body.p2 .hf .hf-todo { order: 0; } }
/* (polish3: on a phone the free pack's card, open now or with a friend, comes first, above the day's rows and the drop) */
@media (max-width: 1000px) { body.p2 .hf .p2-todaybox { order: -1; } }

/* ---------- tap targets: chips and small pills get a 36 px hit area ---------- */
body.p2 .chip { min-height: 36px; }

/* ---------- motion: the system's calm rules ---------- */
@media (prefers-reduced-motion: reduce) { body.p2 .card-art img { transition: none; } }


/* ---- NOCAPS: 92 capitals labels from app.css, in sentence case under P2 (codes keep their capitals) ---- */
body.p2 .devnote b { text-transform: none; letter-spacing: 0; }
body.p2 .kicker { text-transform: none; letter-spacing: 0; }
body.p2 .fbadge { text-transform: none; letter-spacing: 0; }
body.p2 .price.aucp small { text-transform: none; letter-spacing: 0; }
body.p2 .pilltag { text-transform: none; letter-spacing: 0; }
body.p2 .drop.soon .soon-when b { text-transform: none; letter-spacing: 0; }
body.p2 .fact > span:first-child { text-transform: none; letter-spacing: 0; }
body.p2 .calc-eq small { text-transform: none; letter-spacing: 0; }
body.p2 .pack .label span { text-transform: none; letter-spacing: 0; }
body.p2 .hint { text-transform: none; letter-spacing: 0; }
body.p2 .kpi > span:first-child { text-transform: none; letter-spacing: 0; }
body.p2 .fam-head .done { text-transform: none; letter-spacing: 0; }
body.p2 .badges span { text-transform: none; letter-spacing: 0; }
body.p2 .trait span { text-transform: none; letter-spacing: 0; }
body.p2 .fx-stamp { text-transform: none; letter-spacing: 0; }
body.p2 .dc-row span { text-transform: none; letter-spacing: 0; }
body.p2 .crow.head { text-transform: none; letter-spacing: 0; }
body.p2 .kpill { text-transform: none; letter-spacing: 0; }
body.p2 .cstats span { text-transform: none; letter-spacing: 0; }
body.p2 .fgroup h4 { text-transform: none; letter-spacing: 0; }
body.p2 .evt { text-transform: none; letter-spacing: 0; }
body.p2 .bidbox > div > span { text-transform: none; letter-spacing: 0; }
body.p2 .status { text-transform: none; letter-spacing: 0; }
body.p2 .sg { text-transform: none; letter-spacing: 0; }
body.p2 .tr .tv small { text-transform: none; letter-spacing: 0; }
body.p2 .bidbar small { text-transform: none; letter-spacing: 0; }
body.p2 .offer .olabel { text-transform: none; letter-spacing: 0; }
body.p2 .pk-stage .hintline { text-transform: none; letter-spacing: 0; }
body.p2 .pk2 .pk2-label span { text-transform: none; letter-spacing: 0; }
body.p2 .pk2 .pk2-label em { text-transform: none; letter-spacing: 0; }
body.p2 .pk2 .pk2-cut span { text-transform: none; letter-spacing: 0; }
body.p2 .dk .stamp span { text-transform: none; letter-spacing: 0; }
body.p2 .deal.summary .card.best::after { text-transform: none; letter-spacing: 0; }
body.p2 .pickhint > b:first-child { text-transform: none; letter-spacing: 0; }
body.p2 .live-row .ltag { text-transform: none; letter-spacing: 0; }
body.p2 .ptraits .pt-h { text-transform: none; letter-spacing: 0; }
body.p2 .mm-sec { text-transform: none; letter-spacing: 0; }
body.p2 .ihday { text-transform: none; letter-spacing: 0; }
body.p2 .e3-k { text-transform: none; letter-spacing: 0; }
body.p2 .e3-soon { text-transform: none; letter-spacing: 0; }
body.p2 .replace .rl { text-transform: none; letter-spacing: 0; }
body.p2 .tierpill { text-transform: none; letter-spacing: 0; }
body.p2 .srow .gifttag { text-transform: none; letter-spacing: 0; }
body.p2 .lx-cd span { text-transform: none; letter-spacing: 0; }
body.p2 .pshort { text-transform: none; letter-spacing: 0; }
body.p2 .pgl { text-transform: none; letter-spacing: 0; }
body.p2 .pspecial { text-transform: none; letter-spacing: 0; }
body.p2 .ax-kl { text-transform: none; letter-spacing: 0; }
body.p2 .ax-pool span { text-transform: none; letter-spacing: 0; }
body.p2 .ax-divh { text-transform: none; letter-spacing: 0; }
body.p2 .card.newto .newtag { text-transform: none; letter-spacing: 0; }
body.p2 .tg-h { text-transform: none; letter-spacing: 0; }
body.p2 .drop .dbtns .setlab > span { text-transform: none; letter-spacing: 0; }
body.p2 .havetag { text-transform: none; letter-spacing: 0; }
body.p2 .dr-t span { text-transform: none; letter-spacing: 0; }
body.p2 .s-dco .dco-or { text-transform: none; letter-spacing: 0; }
body.p2 .ax-sub { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-k { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-logo .pyxs-online { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-logo .pyxs-tale { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-press { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-hud span { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-scrollcue { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-ticker .pyxs-run { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-gnav button { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-story-pg .pyxs-gnav a { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-reliquaries-pg .pyxs-tab th { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-reliquaries-pg .pyxs-tag { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-reliquaries-pg .pyxs-boons span { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-reliquaries-pg .pyxs-pair { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-reliquaries-pg .pyxs-form { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-boss .pyxs-tag { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-floor .pyxs-fl { text-transform: none; letter-spacing: 0; }
body.p2 .pyxs-countdown span { text-transform: none; letter-spacing: 0; }
body.p2 .cp-group { text-transform: none; letter-spacing: 0; }
body.p2 .cp-room .cp-livetag { text-transform: none; letter-spacing: 0; }
body.p2 .cp-pill { text-transform: none; letter-spacing: 0; }
body.p2 .cp-day { text-transform: none; letter-spacing: 0; }
body.p2 .cp-new { text-transform: none; letter-spacing: 0; }
body.p2 .cp-sec { text-transform: none; letter-spacing: 0; }
body.p2 .cp-eh { text-transform: none; letter-spacing: 0; }
body.p2 .pl-live { text-transform: none; letter-spacing: 0; }
body.p2 .pl.over .pl-panel .pl-ph span { text-transform: none; letter-spacing: 0; }
body.p2 .pl.band.ph .pl-ph span { text-transform: none; letter-spacing: 0; }
body.p2 .cdk-grp { text-transform: none; letter-spacing: 0; }
body.p2 .tk-k { text-transform: none; letter-spacing: 0; }
body.p2 .invseg .tnew { text-transform: none; letter-spacing: 0; }
body.p2 .bnd-spn span { text-transform: none; letter-spacing: 0; }
body.p2 .bnd-brand { text-transform: none; letter-spacing: 0; }
body.p2 .bnd-pk.ms .bnd-vt { text-transform: none; letter-spacing: 0; }
body.p2 .drop .dbtns .npick > span { text-transform: none; letter-spacing: 0; }
body.p2 .cwhere .cw-h { text-transform: none; letter-spacing: 0; }

/* ---------- move 6: the stamp-face beside an empty state's words (app.js p2Face), 44 px, looking at the button ---------- */
body.p2 .p2-stampface { display: flex; align-items: center; gap: 12px; }
body.p2 canvas.p2-stampface-c { display: block; flex: none; width: 44px; height: 44px; image-rendering: pixelated; }
body.p2 .p2-stampface > :last-child { flex: 1; min-width: 0; }
/* an older .empty box given the mark (the Wantlist's, in Market's centred card): its words beside the face, left-aligned */
body.p2 .empty.p2e:has(> .p2e-mark > canvas) { text-align: left; }