/* Prints 2.0 UI push (2026-11-08): per-screen polish, every rule scoped under body.p2 (app.js p2Design sets it only
   while the boot says p2), so with P2 off nothing here matches and the old site is exactly as before.
   One section per screen; edit only your own section, between its BEGIN and END lines. */

/* ==== BEGIN chrome: The header, tab bar, preview bar, toasts, sheets and modals ==== */
/* focus: one ring everywhere, the system's (accent2), not the old violet */
body.p2 :focus-visible { outline-color: var(--p2-accent2); }

/* the header: every icon a 44 px touch target (the drawn circle stays 34), one red dot for what's new to you */
body.p2 .top .wallet .iconbtn::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
body.p2 .top .wallet .me { position: relative; }
body.p2 .top .wallet .me::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
body.p2 .top .wallet .iconbtn:focus-visible, body.p2 .top .wallet .me:focus-visible, body.p2 .top .wallet .inkpill:focus-visible,
body.p2 .top .brand:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 2px; border-radius: var(--p2-rc); }
body.p2 .top .wallet .iconbtn:focus-visible, body.p2 .top .wallet .me:focus-visible { border-radius: 50%; }
/* the album's dot says "something waits", not "alarm": a small paper dot; the bell keeps the red count */
body.p2 .top .wallet .albbtn .dot { top: 6px; right: 6px; min-width: 0; width: 8px; height: 8px; padding: 0; background: var(--p2-ink); box-shadow: 0 0 0 2px var(--p2-bg); font-size: 0; }
body.p2 .top .wallet .bell .dot { box-shadow: 0 0 0 2px var(--p2-bg); }
/* on a phone the stamp leads and the word steps down, which gives the icons room */
@media (max-width: 640px) {
  body.p2 .top .brand { font-size: 20px; gap: var(--p2-s2); }
  body.p2 .top .brand canvas.logo { width: 28px; height: 28px; }
}
/* the ink pill: numbers in the sans, the gem without its glow */
body.p2 .inkpill::before { filter: none; }
/* round 2: one dot means "something needs you", the bell's red, wherever it shows (the album's, Open's) */
body.p2 .top .wallet .albbtn .dot, body.p2 #nav a.due::after, body.p2 #nav a.due span::after { background: var(--live); }

/* the preview bar: one quiet line, its link a real touch target */
body.p2 .devnote { padding: 0 var(--p2-s4); min-height: 32px; display: flex; align-items: center; justify-content: center; gap: var(--p2-s2); flex-wrap: wrap;
  font: 400 12.5px/1.4 var(--p2-sans); color: var(--p2-ink3); }
body.p2 .devnote a { margin-left: 0; color: var(--p2-ink2); text-underline-offset: 3px; text-decoration-color: var(--p2-line2); padding: 6px 2px; }
body.p2 .devnote a:hover { color: var(--p2-ink); text-decoration-color: currentColor; }

/* round 2, a calmer phone header: logo, a small Preview tag, search, bell, ink, you. The album folds away (it's
   Collection's Album tab, and Today's stamps row); the preview bar becomes a tag beside the wordmark that scrolls away
   with the page, its House rules link stretched over it (the link keeps its words for a screen reader) */
@media (max-width: 640px) and (min-width: 375px) {
  body.p2 .top .wallet .albbtn { display: none; }
  body.p2 .devnote { position: absolute; top: calc(env(safe-area-inset-top) + 17px); left: 146px; z-index: 21; display: flex;
    min-height: 0; height: 22px; padding: 0 7px; gap: 0; border: 1px solid var(--p2-line2); border-radius: 999px;
    background: transparent; white-space: nowrap; overflow: visible; }
  body.p2 .devnote b { display: inline; margin: 0; padding: 0; background: none; font: 500 11px/1 var(--p2-sans); letter-spacing: 0; color: var(--p2-ink2); }
  body.p2 .devnote .dn-s, body.p2 .devnote .dn-l { display: none; }
  body.p2 .devnote a[href="/rules"] { position: absolute; inset: -11px -2px; margin: 0; padding: 0; font-size: 0; color: transparent; border-radius: 999px; }
  body.p2 .devnote a[href="/rules"]:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: -8px; }
}

/* the tab bar: nothing glows; the active tab is paper */
body.p2 #nav a.on svg, body.p2 #nav a.on .i { filter: none; }
body.p2 #nav a:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: -2px; border-radius: var(--p2-rc); }
@media (max-width: 899px) {
  /* Open's paper square sits on the same line as the other icons, so all five labels share one baseline */
  body.p2 #nav a.p2-open svg { margin: -6px 0; }
  body.p2 #nav a.p2-open span { margin-top: 0; }
  /* your pack is waiting: the signal dot on the square's corner, not a white blob beside it */
  body.p2 #nav a.p2-open.due::after { top: 4px; right: calc(50% - 22px); width: 8px; height: 8px; background: var(--live); box-shadow: 0 0 0 2px var(--p2-bg); }
}

/* toasts: a compact, solid card that sits just above the tab bar; no emoji glyph in front, tap still dismisses */
body.p2 .toast { gap: var(--p2-s3); padding: var(--p2-s2) var(--p2-s4) var(--p2-s2) var(--p2-s2); min-height: 48px; border-radius: var(--p2-rk);
  background: var(--p2-card2); border: 1px solid var(--p2-line2); box-shadow: var(--p2-shadow);
  font: 400 14px/1.4 var(--p2-sans); color: var(--p2-ink2); animation: p2c-tin var(--p2-base) var(--p2-ease); cursor: default; }
body.p2 .toast b { color: var(--p2-ink); font-weight: 600; }
body.p2 .toast .ti { width: 32px; height: 32px; border-radius: var(--p2-ra); background: var(--p2-card3); }
body.p2 .toast .ti:not(:has(img, svg)) { display: none; }
body.p2 .toast:has(.ti:not(:has(img, svg))) { padding-left: var(--p2-s4); }
body.p2 .toast.out { animation: p2c-tout var(--p2-fast) ease forwards; }
@keyframes p2c-tin { from { opacity: 0; transform: translateY(8px); } }
@keyframes p2c-tout { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) {
  body.p2 .toasts { left: var(--p2-s2); right: var(--p2-s2); bottom: calc(64px + var(--p2-s2) + env(safe-area-inset-bottom)); gap: var(--p2-s2); }
  body.p2 .toast { font-size: 13.5px; }
  body.p2 .toast > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* panels (the account menu, notifications): a solid card above the toasts, so a toast never shows through */
body.p2 .toppanel { z-index: 61; background: var(--p2-bg2); border: 1px solid var(--p2-line2); border-radius: var(--p2-rs); box-shadow: var(--p2-shadow); }
body.p2 .toppanel.menu .mm-list a { min-height: 44px; }
body.p2 .toppanel.menu .mm-list a:focus-visible { outline-offset: -2px; }
body.p2 .mm-cue { background: var(--p2-card3); color: var(--p2-ink2); }
/* a desktop has the height: the whole account menu shows, no "More below" over its items */
@media (min-width: 641px) { body.p2 .toppanel.menu { max-height: calc(100vh - 96px); } }
/* a phone dims the page behind an open panel, so the panel reads as on top (no blur) */
@media (max-width: 640px) { body.p2 .toppanel { box-shadow: var(--p2-shadow), 0 0 0 100vmax rgba(0,0,0,.5); } }

/* modals (the welcome tour, the recovery code, search): the system's sheet frame */
body.p2 .search-ov { background: rgba(0,0,0,.66); }
body.p2 .search-box { background: var(--p2-bg2); border: 1px solid var(--p2-line2); border-radius: var(--p2-rs); box-shadow: var(--p2-shadow); }
/* confirms and the sign-in box: the same frame (their contents stay as each screen made them) */
body.p2 .cfm, body.p2 .authov { background: rgba(0,0,0,.66); }
body.p2 .cfm-box, body.p2 .authbox { background: var(--p2-bg2); border: 1px solid var(--p2-line2); border-radius: var(--p2-rs); box-shadow: var(--p2-shadow); }
body.p2 .authbox .actions .btn { height: auto; min-height: 48px; }
/* (the welcome tour itself: the home section owns it, a bottom sheet on a phone; merged out of here at integration) */
@media (prefers-reduced-motion: reduce) {
  body.p2 .toast, body.p2 .toast.out { animation: none; }
}

/* ==== END chrome ==== */



/* ==== BEGIN floor: The Floor (chat), the account menu and settings ==== */
/* The Floor: the rooms column's heading in Mona Sans; the empty and offline states as a quiet card, not a dashed box */
body.p2 .cp-sh h1 { font: 600 20px/1.2 var(--p2-head); letter-spacing: -.02em; color: var(--p2-ink); }
body.p2 .cp-empty { margin: var(--p2-s8) auto; padding: var(--p2-s6) var(--p2-s5); gap: var(--p2-s2); border: 1px solid var(--p2-line); border-radius: var(--p2-rk); background: var(--p2-card); color: var(--p2-ink3); font: 400 14px/1.45 var(--p2-sans); }
body.p2 .cp-empty b { font: 600 16px/1.3 var(--p2-head); color: var(--p2-ink); }
body.p2 .cp-empty .btn { margin-top: var(--p2-s2); min-height: 44px; padding: 0 var(--p2-s5); background: var(--p2-card3); color: var(--p2-ink); }
body.p2 .cp-empty .btn:hover { background: var(--p2-line2); }
body.p2 .cp-side .cp-rooms .cp-empty { margin: var(--p2-s4) 0; max-width: none; }
/* What the Floor is, under its title; the offline card says it's coming back and gives Today meanwhile (chat.js, P2 only) */
body.p2 .p2-floor-what { margin: calc(-1 * var(--p2-s2)) var(--p2-s4) var(--p2-s2); color: var(--p2-ink3); font: 400 14px/1.4 var(--p2-sans); }
body.p2 .p2-floor-off { text-align: center; }
body.p2 .p2-floor-off .p2-floor-st { min-height: 1.45em; color: var(--p2-ink2); font-weight: 500; }
body.p2 .p2-floor-off .p2-floor-st:empty { min-height: 0; }
body.p2 .p2-floor-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--p2-s3); }
body.p2 .p2-floor-off .p2-floor-acts .btn { margin-top: var(--p2-s2); }
body.p2 .p2-floor-off .p2-floor-acts .btn.primary { display: inline-flex; align-items: center; background: var(--p2-paper); color: var(--p2-bg); text-decoration: none; }
body.p2 .p2-floor-off .btn:disabled { opacity: .7; cursor: progress; }
body.p2 .p2-floor-cxl { margin-top: var(--p2-s2); color: var(--p2-ink2); font: 500 14px/1.4 var(--p2-sans); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
/* The way into the Crossing, under the rooms (chat.js, P2 only) */
body.p2 .p2-floor-cx { flex: none; display: flex; align-items: center; gap: var(--p2-s3); min-height: 64px; margin: var(--p2-s2) var(--p2-s3) var(--p2-s3); padding: var(--p2-s3) var(--p2-s4); border: 1px solid var(--p2-line); border-radius: var(--p2-rk); background: var(--p2-card); color: var(--p2-ink); text-decoration: none; transition: background var(--p2-fast) var(--p2-ease), border-color var(--p2-fast) var(--p2-ease); }
body.p2 .p2-floor-cx:hover { background: var(--p2-card2); border-color: var(--p2-line2); }
body.p2 .p2-floor-cx:focus-visible { outline: 2px solid var(--p2-ink); outline-offset: 2px; }
body.p2 .p2-floor-cx .i { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--p2-ink2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.p2 .p2-floor-cx > span { display: grid; gap: 2px; min-width: 0; }
body.p2 .p2-floor-cx b { font: 600 15px/1.25 var(--p2-head); letter-spacing: -.01em; }
body.p2 .p2-floor-cx > span > span { color: var(--p2-ink3); font: 400 13px/1.35 var(--p2-sans); }
@media (max-width: 760px) { body.p2 .p2-floor-cx { margin: var(--p2-s2) var(--p2-s4) calc(var(--p2-s3) + env(safe-area-inset-bottom)); } }

/* The account menu: rows at least 44 px, sentence-case section line, no floating "More below" pill (the list's fade says
   it; the friction log's F26) */
body.p2 .toppanel.menu { border-radius: var(--p2-rk); border-color: var(--p2-line2); background: var(--p2-bg2); }
body.p2 .mm-head { padding: var(--p2-s4); gap: var(--p2-s3); }
body.p2 .mm-head b { font: 600 17px/1.25 var(--p2-head); letter-spacing: -.01em; color: var(--p2-ink); }
body.p2 .mm-list { padding: var(--p2-s2); gap: 2px; }
body.p2 .mm-list a { min-height: 44px; padding: 0 var(--p2-s3); gap: var(--p2-s3); border-radius: var(--p2-rc); color: var(--p2-ink2); font: 500 15px/1.3 var(--p2-sans); transition: background var(--p2-fast) var(--p2-ease), color var(--p2-fast) var(--p2-ease); }
body.p2 .mm-list a:hover, body.p2 .mm-list a:focus-visible { background: var(--p2-card2); color: var(--p2-ink); }
body.p2 .mm-list a:focus-visible { outline: 2px solid var(--p2-ink); outline-offset: -2px; }
body.p2 .mm-sec { margin: var(--p2-s2) var(--p2-s3) var(--p2-s1); padding-top: var(--p2-s3); border-top: 1px solid var(--p2-line); color: var(--p2-ink3); font: 500 13px/1.3 var(--p2-sans); text-transform: none; letter-spacing: 0; }
body.p2 .toppanel.menu .mm-list.more + .mm-cue { display: none; }
body.p2 .mm-foot { padding: var(--p2-s3) var(--p2-s4); gap: var(--p2-s3); border-top: 1px solid var(--p2-line); }
body.p2 .mm-foot a, body.p2 .mm-foot .btn { min-height: 44px; display: inline-flex; align-items: center; gap: var(--p2-s2); }
/* No passkey yet: a warm card at the top of the menu with one button (app.js mePanel, P2 only) */
body.p2 .p2-mm-pk { flex: none; display: grid; gap: var(--p2-s2); margin: var(--p2-s3) var(--p2-s3) 0; padding: var(--p2-s3) var(--p2-s4) var(--p2-s4); border: 1px solid rgba(240, 180, 90, .35); border-radius: var(--p2-rc); background: rgba(240, 180, 90, .09); color: var(--p2-ink2); font: 400 13px/1.45 var(--p2-sans); }
body.p2 .p2-mm-pk b { color: var(--p2-ink); font: 600 15px/1.3 var(--p2-head); letter-spacing: -.01em; }
body.p2 .p2-mm-pk .btn { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; margin-top: var(--p2-s1); padding: 0 var(--p2-s5); background: var(--p2-paper); color: var(--p2-paperInk); text-decoration: none; }
body.p2 .p2-mm-pk .btn:focus-visible { outline: 2px solid var(--p2-ink); outline-offset: 2px; }

/* Settings: one readable column; no numbered circles (the steps are sections, not a sequence); your account right after
   the profile and the long banner picker last (the friction log's F32: where to add a passkey or link Discord sat under
   57 banners). Order only: every control and its words are as they were */
body.p2 .page:has(> .studio) { max-width: 820px; }
body.p2 .page:has(> .studio) .page-head h1 { font-family: var(--p2-head); letter-spacing: -.03em; }
body.p2 .studio { gap: 0; }
body.p2 .studio > .step { grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--p2-s8) 0; border-top: 1px solid var(--p2-line); }
body.p2 .studio > .step > .sn { display: none; }
body.p2 .studio > .step.pk { order: 1; }
body.p2 .studio > .step { order: 2; }
body.p2 .studio > .step:first-child { order: 0; }
body.p2 .studio > .step[data-anchor="banner"] { order: 9; }
body.p2 .studio .sb h3 { margin: 0 0 var(--p2-s4); font: 600 20px/1.25 var(--p2-head); letter-spacing: -.02em; color: var(--p2-ink); }
body.p2 .studio .sb > p { max-width: 62ch; }
body.p2 .studio .sb > label:not(.check) { display: block; margin-top: var(--p2-s4); color: var(--p2-ink2); font: 500 14px/1.3 var(--p2-sans); }
body.p2 .studio .sb > label:not(.check) .field { margin-top: var(--p2-s2); max-width: 520px; }
body.p2 .studio label.check { display: flex; align-items: flex-start; gap: var(--p2-s3); min-height: 44px; padding: var(--p2-s2) 0; color: var(--p2-ink2); font: 400 15px/1.4 var(--p2-sans); cursor: pointer; }
body.p2 .studio label.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p2-paper); }
body.p2 .studio .actions { margin-top: var(--p2-s4); gap: var(--p2-s3); }
body.p2 .studio .actions .btn { min-height: 44px; }
@media (max-width: 760px) { body.p2 .studio > .step { padding: var(--p2-s6) 0; } }
/* On a phone (pages.js settings, P2 only): the banner gallery folded to the chosen banner and the first four tiles behind
   "Show all"; long rule paragraphs under "How this works" */
body.p2 .studio .p2-bn-fold .bn-filt { display: none; }
body.p2 .studio .p2-bn-fold .bn-grid > .bn-tile:nth-child(n+5) { display: none; }
body.p2 .studio .p2-bn-all { margin-top: var(--p2-s4); min-height: 44px; width: 100%; background: var(--p2-card2); color: var(--p2-ink); }
body.p2 .studio > .step.pk { scroll-margin-top: 64px; }
body.p2 .studio .p2-fold { margin-top: var(--p2-s3); }
body.p2 .studio .p2-fold > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--p2-ink2); font: 500 14px/1.3 var(--p2-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.p2 .studio .p2-fold > summary:focus-visible { outline: 2px solid var(--p2-ink); outline-offset: 2px; }
body.p2 .studio .p2-fold > p { margin-top: var(--p2-s2); }

/* ==== END floor ==== */



/* ==== BEGIN share: Sharing and inviting (share sheet, two-name toy, invite entry points) ==== */

/* ==== END share ==== */



/* ==== BEGIN home: Sign-up, first run, Home/Today and the daily loop ==== */
/* Today's free pack card (views/p2.js today): a flat card, as the kept page's; the brand has no gradients */
body.p2 .p2-today .p2-tcard { background: var(--p2-card); border: 1px solid var(--p2-line2); border-radius: var(--p2-rk); padding: var(--p2-s4); gap: var(--p2-s4); }
body.p2 .p2-today .p2-ttext { display: grid; gap: var(--p2-s1); }
body.p2 .p2-today .p2-ttext .p2-row2 { margin-top: var(--p2-s3); }
body.p2 .p2-today .p2-btn { min-height: 44px; }
body.p2 .p2-today .p2-nentry { display: inline-flex; align-items: center; min-height: 44px; margin: calc(-1 * var(--p2-s2)) 0; }

/* (no gaps for empty slots: the first week's card and the duels list hold nothing on most days) */
body.p2 .hf .p2-today { margin: var(--p2-s4) 0 0; }
@media (min-width: 1001px) { body.p2 .hf .p2-today { margin: 0; } }
body.p2 .hf .p2-today > .p2-wslot:empty, body.p2 .hf .p2-today > .p2-dlist:empty, body.p2 .hf .dropbars:empty { display: none; }
/* the drop's band under the free pack card: one paper button on the page (Open with a friend), so a bought pack is the
   quieter button here, and its caption doesn't repeat the free packs the card above already offers */
body.p2 .hf-main:has(> .p2-todaybox) .hd-hero .collect:not(.soldout) .cb-pack:not(:disabled) { background: var(--p2-card2); color: var(--p2-ink); box-shadow: inset 0 0 0 1px var(--p2-line2); border-radius: var(--p2-rc); }
body.p2 .hf-main:has(> .p2-todaybox) .hd-hero .collect:not(.soldout) .cb-pack:not(:disabled):hover { background: var(--p2-card3); }
body.p2 .hf-main:has(> .p2-todaybox) .hd-hero .collect .cb-pack .cb-s .ink { font: 600 16px var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .hf-main:has(> .p2-todaybox) .hd-hero .cb-cap > span:first-child { display: none; }
/* (and not "Spending ink needs Discord" right above the Link Discord row that says it in full) */
body.p2 .hf-main:has(> .p2-todaybox):has(> .verifybar) .hd-hero .cb-cap { display: none; }
body.p2 .hf .hd-hero .cb-cap { font: 400 13px/1.45 var(--p2-sans); color: var(--p2-ink3); }

/* Link Discord: a row like Today's others, its mark, its words, the button */
body.p2 .hf .verifybar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--p2-s3); row-gap: var(--p2-s3); align-items: center;
  margin: 0; padding: var(--p2-s4) 0; }
body.p2 .hf .verifybar .cb-ic { width: 44px; height: 44px; place-items: center; border-radius: var(--p2-rc); background: var(--p2-card2); color: var(--p2-ink2); align-self: start; }
body.p2 .hf .verifybar .grow { display: none; }
body.p2 .hf .verifybar b { font: 600 15px/1.3 var(--p2-sans); color: var(--p2-ink); }
body.p2 .hf .verifybar small { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--p2-sans); color: var(--p2-ink3); }
body.p2 .hf .verifybar .btn { min-height: 44px; padding: 0 var(--p2-s4); border-radius: var(--p2-rc); }
@media (max-width: 640px) { body.p2 .hf .verifybar .btn { grid-column: 2; justify-self: start; } }

/* Today's rows (auction, quests, stamps, Getting started): one rhythm, 44 px marks, the system's type */
body.p2 .hf .hf-todo .hrow { padding: var(--p2-s3) 0; min-height: 68px; }
body.p2 .hf .hr-t b { font: 600 15px/1.3 var(--p2-sans); }
body.p2 .hf .hr-t small { font: 400 13.5px/1.4 var(--p2-sans); color: var(--p2-ink3); }
body.p2 .hf .hr-amt { font: 600 14px var(--p2-numf); font-variant-numeric: tabular-nums; }
/* Getting started's slim line as a row like the others: the count in the mark, its name, then what's next */
body.p2 .hf .quests.slim .qslim { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--p2-s3); row-gap: 2px;
  min-height: 68px; padding: var(--p2-s3) 0; }
body.p2 .hf .qslim > b { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--p2-rc);
  background: var(--p2-card2); color: var(--p2-ink2); font: 600 13px var(--p2-numf); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
body.p2 .hf .qslim .kicker { grid-column: 2; grid-row: 1; font: 600 15px/1.3 var(--p2-sans); color: var(--p2-ink); }
body.p2 .hf .qslim .qs-next { grid-column: 2; grid-row: 2; font: 400 13.5px/1.4 var(--p2-sans); color: var(--p2-ink3); }
body.p2 .hf .qslim .qs-go { grid-column: 3; grid-row: 1 / span 2; }
/* Getting started opened: the list's rows tall enough to tap, the system's type */
body.p2 .hf .quests:not(.slim) .qh .kicker { font: 600 15px/1.3 var(--p2-sans); color: var(--p2-ink); }
body.p2 .hf .quests:not(.slim) .qh b { font: 400 13.5px var(--p2-numf); font-variant-numeric: tabular-nums; color: var(--p2-ink3); }
body.p2 .hf .quests:not(.slim) a.q { min-height: 48px; padding: var(--p2-s2) 0; font: 400 14.5px/1.35 var(--p2-sans); color: var(--p2-ink2); }
body.p2 .hf .quests:not(.slim) a.q:hover { color: var(--p2-ink); }
body.p2 .hf .quests:not(.slim) a.q .ink { font: 600 13.5px var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .hf .quests .hideq, body.p2 .hf .quests .qmore { min-height: 44px; padding: 0 var(--p2-s4); border-radius: var(--p2-rc); }
body.p2 .hf .quests .qmore { margin: var(--p2-s1) 0 0; padding: 0; color: var(--p2-ink2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--p2-line2); }
body.p2 .hf .qslim:focus-visible, body.p2 .hf .hrow:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 2px; border-radius: var(--p2-rt); }

/* the welcome tour (showTour): the system's sheet, a bottom sheet on a phone, a card in the middle on a computer */
body.p2 .tourov { background: rgba(5,5,6,.82); animation: none; }
body.p2 .tourov .tourbox { background: var(--p2-bg2); border: 1px solid var(--p2-line2); border-radius: var(--p2-rs); box-shadow: var(--p2-shadow);
  padding: var(--p2-s6) var(--p2-s6) var(--p2-s5); gap: var(--p2-s3); animation: p2s-fade var(--p2-base) var(--p2-ease); }
body.p2 .tourbox .tdots { gap: var(--p2-s1); }
body.p2 .tourbox .tbody { display: grid; justify-items: center; gap: var(--p2-s2); }
body.p2 .tourbox .tdots i { width: 16px; height: 4px; border-radius: 2px; background: var(--p2-line2); transition: background var(--p2-fast) var(--p2-ease), width var(--p2-fast) var(--p2-ease); }
body.p2 .tourbox .tdots i.on { width: 24px; background: var(--p2-ink); }
body.p2 .tourbox .ticon { margin: var(--p2-s3) 0 0; color: var(--p2-ink); }
body.p2 .tourbox h2 { margin: var(--p2-s1) 0 0; font: 700 24px/1.1 var(--p2-head); letter-spacing: -.03em; color: var(--p2-ink); }
body.p2 .tourbox p { min-height: 0; margin: 0 auto; max-width: 36ch; font: 400 15.5px/1.5 var(--p2-sans); color: var(--p2-ink2); text-wrap: pretty; }
body.p2 .tourbox p b { color: var(--p2-ink); font-weight: 600; }
body.p2 .tourbox .textra:empty { display: none; }
body.p2 .tourbox .tactions { margin-top: var(--p2-s4); gap: var(--p2-s2); }
body.p2 .tourbox .tactions .btn { min-height: 44px; min-width: 44px; padding: 0 var(--p2-s5); border-radius: var(--p2-rc); }
body.p2 .tourbox .tactions .btn.ghost { color: var(--p2-ink2); }
@media (max-width: 640px) {
  body.p2 .tourov { align-items: flex-end; padding: 0; }
  body.p2 .tourov .tourbox { margin: auto 0 0; width: 100%; max-width: none; border-width: 1px 0 0; border-radius: var(--p2-rs) var(--p2-rs) 0 0;
    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 .tourov .tourbox::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--p2-line2); margin: 0 auto var(--p2-s3); }
  body.p2 .tourbox .tactions .btn.primary { flex: 1 1 auto; max-width: 60%; }
}
@media (prefers-reduced-motion: reduce) { body.p2 .tourov .tourbox { animation: none; } body.p2 .tourbox .tdots i { transition: none; } }
/* (round 2: "Send a friend a free pack" under Keep after a guest's first pull, views/p2.js turned) */
body.p2 .p2-foot .p2-tell { margin-top: var(--p2-s2); min-height: 48px; }
/* (round 2: the light tour, app.js showTour's p2-tlite: only on Today after a kept pack, a short card at the foot of the
   page that doesn't dim or block it; the page behind stays tappable) */
body.p2 .tourov.p2-tlite { background: none; pointer-events: none; align-items: flex-end; justify-content: center; padding: 0 var(--p2-s4) calc(var(--p2-s4) + env(safe-area-inset-bottom)); }
body.p2 .tourov.p2-tlite .tourbox { pointer-events: auto; margin: auto 0 0; width: 100%; max-width: 440px; border: 1px solid var(--p2-line2); border-radius: var(--p2-rk);
  padding: var(--p2-s4); gap: var(--p2-s2); max-height: 46vh; overflow: auto; }
body.p2 .tourov.p2-tlite .tourbox::before { content: none; }
body.p2:has(.p2-land[role="dialog"]) .tourov.p2-tlite { display: none; }
body.p2 .tourov.p2-tlite .tdots { justify-content: flex-start; }
body.p2 .tourov.p2-tlite .tbody { justify-items: start; text-align: left; gap: var(--p2-s1); }
body.p2 .tourov.p2-tlite .ticon { display: none; }
body.p2 .tourov.p2-tlite h2 { margin: 0; font-size: 18px; }
body.p2 .tourov.p2-tlite p { margin: 0; max-width: none; font-size: 14px; line-height: 1.45; }
body.p2 .tourov.p2-tlite .tactions { margin-top: var(--p2-s2); }
body.p2 .tourov.p2-tlite .tactions .btn.primary { flex: 0 0 auto; }
@media (max-width: 640px) {
  body.p2 .tourov.p2-tlite { padding: 0 var(--p2-s3) calc(var(--p2-tabs-h, 64px) + var(--p2-s2) + env(safe-area-inset-bottom)); }
  body.p2 .tourov.p2-tlite .tourbox { padding: var(--p2-s3) var(--p2-s4); animation: p2s-fade var(--p2-base) var(--p2-ease); }
}

/* ==== END home ==== */



/* ==== BEGIN pack: Pack opening (every pack screen) ==== */
/* The signed-in pack stage (app.js openPack: a bought, sealed, launch or free pack) in the guest packer's look
   (views/p2.js packer): a flat Darkroom room, a dark-paper sleeve with a dashed tear line, dark-paper cards whose rarity
   shows as a ring and a notch bar (dark paper, not white: the founder, 2026-10-19, app.css; the guest packer keeps its own), not as coloured light; headings in Mona Sans, labels in the sans, sentence case. Only looks:
   what a pack holds, its price, its odds and every step of the draw are as they were. */

/* the room: flat, no rays, motes, coloured ambient light or white flash */
body.p2 .pk-stage { background: var(--p2-bg); color: var(--p2-ink); font-family: var(--p2-sans); gap: var(--p2-s5); transition: none; }
body.p2 .pk-stage.amb-h0, body.p2 .pk-stage.amb-h1, body.p2 .pk-stage.amb-h2, body.p2 .pk-stage.amb-h3, body.p2 .pk-stage.amb-h4 { background: var(--p2-bg); }
body.p2 .pk-stage .rays, body.p2 .pk-stage .motes, body.p2 .pk-stage .flash { display: none !important; }
body.p2 .pk-stage > .x { top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border-radius: var(--p2-rc); border: 1px solid var(--p2-line2); background: var(--p2-card); color: var(--p2-ink); }
body.p2 .pk-stage > .x:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 3px; }

/* the words over it: a quiet line, the heading, one plain line under it */
body.p2 .pk-stage .title { min-height: 84px; max-width: 560px; padding: 0 var(--p2-s4); }
body.p2 .pk-stage .title .kicker { font: 500 13px/1.35 var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink3); }
body.p2 .pk-stage .title h2 { margin: var(--p2-s1) 0 0; font: 700 26px/1.1 var(--p2-head); letter-spacing: -0.03em; color: var(--p2-ink); }
body.p2 .pk-stage .title .sub { margin: 6px 0 0; font: 400 14px/1.45 var(--p2-sans); color: var(--p2-ink2); min-height: 20px; }
body.p2 .pk-stage .hintline { font: 400 14px var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink3); }
body.p2 .pk-stage .grad-text { color: var(--p2-ink); background: none; -webkit-text-fill-color: currentColor; }
body.p2 .pk-stage .leg-text { color: var(--p2-gold); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
body.p2 .pk-stage .odds-line { font: 600 13px var(--p2-sans); }
body.p2 .pk-stage .pset { font-family: var(--p2-sans); }
@media (min-width: 900px) { body.p2 .pk-stage .title h2 { font-size: 30px; } }

/* the dark paper the sleeve and the cards are printed on */
body.p2 .pk-stage { --pk-dp: #1c1b19; --pk-rule: rgba(243,241,236,.14); }
/* the sleeve: dark paper, a window of the drop's art, a dashed tear line along the top */
body.p2 .pk2 { filter: drop-shadow(0 18px 26px rgba(0,0,0,.6)); }
body.p2 .pk2 .pk2-body, body.p2 .pk2 .pk2-flap { background: var(--pk-dp); }
body.p2 .pk2 .pk2-body { box-shadow: inset 0 0 0 1px var(--pk-rule); }
body.p2 .pk2 .pk2-body .pk2-art { background: var(--pk-dp); border-radius: 2px; }
body.p2 .pk2 .pk2-body .pk2-art img, body.p2 .pk2 .pk2-body .pk2-art canvas { border-radius: 2px; background: #000; }
body.p2 .pk2 .pk2-label { color: var(--p2-ink); text-shadow: none; }
body.p2 .pk2 .pk2-label { bottom: 6%; gap: 2px; }
body.p2 .pk2 .pk2-label canvas.logo { width: 28px; height: 28px; margin-bottom: 4px; }
body.p2 .pk2 .pk2-label b { font: 800 32px/1 var(--p2-head); letter-spacing: -0.045em; color: var(--p2-ink); }
body.p2 .pk2 .pk2-label span { font: 600 12.5px/1.3 var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink2); }
body.p2 .pk2 .pk2-label em { font: 500 12.5px var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink3); }
body.p2 .pk2 .pk2-cut { border-top: 2px dashed rgba(243,241,236,.3); }
body.p2 .pk2 .pk2-cut i { background: var(--p2-ink); box-shadow: none; }
body.p2 .pk2 .pk2-cut span { font: 600 12px var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink2); }
body.p2 .pk2 .pk2-light { box-shadow: none; background: var(--pk-rule); }
body.p2 .pk2 .pk2-peek i { background: var(--pk-dp); box-shadow: inset 0 0 0 1.5px rgba(243,241,236,.3), 0 -4px 10px rgba(0,0,0,.25); }
body.p2 .pk2:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 6px; }
/* (sealing: the count line breathes while the draw is made public, in place of the scanning light) */
body.p2 .pk2.sealing { filter: drop-shadow(0 18px 26px rgba(0,0,0,.6)); }
body.p2 .pk2.sealing .pk2-body::after { display: none; }
body.p2 .pk2.sealing .pk2-label em, body.p2 .pk2.drawing .pk2-label em { animation: p2pk-breathe 1.2s ease-in-out infinite; }
@keyframes p2pk-breathe { 50% { opacity: .25; } }

/* the cards: a dark-paper back with the wordmark and a notch bar in the card's rarity colour (the hint on every card) */
body.p2 .dk .back { background: var(--pk-dp); border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0,0,0,.5), inset 0 0 0 1px var(--pk-rule), inset 0 0 0 7px var(--pk-dp), inset 0 0 0 8px var(--pk-rule); }
body.p2 .dk .back .cb { border: 0; }
body.p2 .dk .back .cb b { font: 800 30px var(--p2-head); letter-spacing: -0.04em; color: var(--p2-ink); }
body.p2 .dk .back::before { content: ""; position: absolute; left: 50%; bottom: 9%; width: 54px; height: 4px; transform: translateX(-50%); border-radius: 2px;
  background: var(--hc); opacity: .55; }
body.p2 .dk.rare .back { box-shadow: 0 16px 32px rgba(0,0,0,.5), inset 0 0 0 7px var(--pk-dp), inset 0 0 0 9.5px var(--hc); }
body.p2 .dk.rare .back::before { opacity: 1; }
body.p2 .dk.charge .back { box-shadow: 0 0 0 2px var(--hc), 0 16px 32px rgba(0,0,0,.5), inset 0 0 0 7px var(--pk-dp), inset 0 0 0 10px var(--hc); }
body.p2 .dk.leg .back { box-shadow: 0 16px 32px rgba(0,0,0,.5), inset 0 0 0 7px var(--pk-dp), inset 0 0 0 9.5px var(--p2-gold); }
body.p2 .dk.leg.charge .back { box-shadow: 0 0 0 2px var(--p2-gold), 0 16px 32px rgba(0,0,0,.5), inset 0 0 0 7px var(--pk-dp), inset 0 0 0 10px var(--p2-gold); }
body.p2 .dk:not(.open):hover .inner { transform: translateY(-6px); }

/* a turned print, and the five after: dark paper with the art and its printed label */
body.p2 .dk .front { border-radius: 8px; }
body.p2 .dk .front .card, body.p2 .deal.summary .card { --pk-dp: #1c1b19; --pk-rule: rgba(243,241,236,.14); background: var(--pk-dp); color: var(--p2-ink); border-radius: 8px; padding: 7px 7px 10px; box-shadow: inset 0 0 0 1px var(--pk-rule), 0 16px 32px rgba(0,0,0,.5); }
body.p2 .dk.open .front { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc) 70%, transparent), 0 16px 32px rgba(0,0,0,.5); }
body.p2 .dk.leg.open .front { box-shadow: 0 0 0 2px var(--p2-gold), 0 16px 32px rgba(0,0,0,.5); }
body.p2 .dk .front .card-art, body.p2 .deal.summary .card .card-art { border-radius: 2px; }
body.p2 .dk .front .card-title, body.p2 .deal.summary .card .card-title { font: 750 16px/1.15 var(--p2-head); letter-spacing: -0.02em; color: var(--p2-ink); }
body.p2 .dk .front .card-sub, body.p2 .dk .front .card-sub .ed, body.p2 .deal.summary .card-sub, body.p2 .deal.summary .card-sub .ed { color: var(--p2-ink3); }
body.p2 .dk .front .odds, body.p2 .deal.summary .card .odds { color: var(--p2-ink2); font-family: var(--p2-sans); }
body.p2 .dk .front .card-foot, body.p2 .deal.summary .card-foot { border-top-color: var(--pk-rule); }
body.p2 .dk .front .card .count, body.p2 .deal.summary .card .count { color: var(--p2-ink3); }
/* its stamp ("1 in N") and tags: the sans, no glow */
body.p2 .dk .stamp { border-radius: var(--p2-rt); background: var(--p2-bg); border: 1.5px solid var(--hc); box-shadow: 0 8px 20px rgba(0,0,0,.5); padding: 6px 14px; }
body.p2 .dk.leg .stamp { border-color: var(--p2-gold); }
body.p2 .dk .stamp b { font: 700 15px var(--p2-sans); letter-spacing: 0; color: var(--p2-ink); }
body.p2 .dk .stamp span { font: 500 12px var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink2); }
body.p2 .dk .newtag { font: 600 12px/1.3 var(--p2-sans); letter-spacing: 0; text-transform: none; border-radius: var(--p2-rt); padding: 3px 8px; background: var(--p2-bg); color: var(--p2-ink); box-shadow: inset 0 0 0 1px var(--p2-line2); }
body.p2 .dk .newtag.hv { color: var(--p2-ink); }
body.p2 .dk .newtag.hv small { color: var(--p2-ink2); }

/* the row of turned ones, small: a ring in its colour */
body.p2 .tray { gap: var(--p2-s2); min-height: 48px; }
body.p2 .tray .tr { width: 44px; height: 44px; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--hc); }
body.p2 .tray .tr.slot { box-shadow: inset 0 0 0 1px var(--p2-line2); background: var(--p2-bg2); }

/* Turn all, Show all, 2x speed: real buttons, 44 px */
body.p2 .pk-stage .after { gap: var(--p2-s2); min-height: 44px; }
body.p2 .pk-stage .after > .btn.sm, body.p2 .pk-stage .after .fastb { height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--p2-rc); font: 600 14px var(--p2-sans);
  border: 1px solid var(--p2-line2); background: transparent; color: var(--p2-ink); }
body.p2 .pk-stage .after .autob[aria-pressed="true"], body.p2 .pk-stage .after .fastb[aria-pressed="true"] { background: var(--p2-paper); color: var(--p2-paperInk); border-color: transparent; }
body.p2 .pk-stage .deck:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 8px; border-radius: 8px; }

/* the whole pull: the best one ringed with a tag, every card's actions as outlines, the main one light */
body.p2 .deal.summary { gap: var(--p2-s3); }
body.p2 .deal.summary .card.best { box-shadow: 0 0 0 2px var(--hc), 0 16px 32px rgba(0,0,0,.5); }
body.p2 .deal.summary .card.leg.best { box-shadow: 0 0 0 2px var(--p2-gold), 0 16px 32px rgba(0,0,0,.5); }
body.p2 .deal.summary .card.best::after { content: 'Best'; font: 600 12px/1.4 var(--p2-sans); letter-spacing: 0; text-transform: none; border-radius: var(--p2-rt); padding: 2px 10px;
  background: var(--p2-bg); color: var(--p2-ink); box-shadow: 0 0 0 1.5px var(--hc); }
body.p2 .deal.summary .pulpfoot .btn { background: transparent; color: var(--p2-ink); border: 1px solid var(--p2-line2); font-family: var(--p2-sans); }
body.p2 .deal.summary .pulpfoot .btn .ink { color: inherit; }
body.p2 .deal.summary .pulpfoot .btn.danger { color: var(--p2-stop); border-color: rgba(255,107,107,.5); }
body.p2 .deal.summary .pulpfoot .btn.sellb { background: var(--p2-card3); color: var(--p2-ink); border-color: var(--p2-card3); }
body.p2 .deal.summary .pulpfoot .btn.sellb.glow, body.p2 .deal.summary .pulpfoot .btn.shareb { background: var(--p2-paper); color: var(--p2-paperInk); border-color: var(--p2-paper); box-shadow: none; }
body.p2 .deal.summary .card.pulped { opacity: .5; }
body.p2 .pk-stage .after .taphint, body.p2 .pk-stage .after .bidhint, body.p2 .pk-stage .stcap { color: var(--p2-ink3); font: 400 13.5px/1.45 var(--p2-sans); }
body.p2 .pk-stage .finline, body.p2 .pk-stage .stline { border-radius: var(--p2-rk); background: var(--p2-card); border: 1px solid var(--p2-line); box-shadow: none; }
body.p2 .pk-stage .runsum b { font: 650 16px var(--p2-head); letter-spacing: -0.01em; }
body.p2 .pk-stage .runsum small { color: var(--p2-ink2); font-family: var(--p2-sans); }
@media (max-width: 640px) {
  body.p2 .pk-stage .title { min-height: 76px; }
  body.p2 .pk-stage .title h2 { font-size: 24px; }
  body.p2 .stage .pkbar { background: var(--p2-bg); border-top: 1px solid var(--p2-line); }
  /* (three exits in one row cut "Open another · 200 ink" at 390 px: the main one gets its own row, the rest share one) */
  body.p2 .stage .pkbar, body.p2 .stage .pkbar:has(.glow) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  body.p2 .stage .pkbar .btn.glow { grid-column: 1 / -1; }
  body.p2 .stage .pkbar .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.p2 .stage .pkbar .btn { height: 48px; }
  /* (a long set name and the number wrapped to two lines on a small card: one line, the set name cut) */
  body.p2 .deal.summary .card .card-sub { flex-wrap: nowrap; gap: 6px; font-size: 13px; }
  body.p2 .deal.summary .card .card-sub > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.p2 .deal.summary .card .card-sub > .ed { flex: none; }
  /* (the best first, across the row: its art beside its label, as the guest packer's summary has it) */
  body.p2 .deal.summary .card.best { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: 12px; align-items: center; margin-top: 8px; }
  body.p2 .deal.summary .card.best .card-body { padding-top: 0; }
  /* (two a row, as before: the wider gap had pushed them to one a row) */
  body.p2 .deal.summary .card { width: calc(50% - 6px); max-width: 190px; }
  body.p2 .stage .after.pkend > .pulpall { height: 44px; }
}

/* the Open tab: each drop's buy row in 44 px controls */
body.p2 .drop .dbtns .btn, body.p2 .drop .dbtns .field { min-height: 44px; }
body.p2 .drop .npick .chip { min-width: 44px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  body.p2 .pk2.sealing .pk2-label em, body.p2 .pk2.drawing .pk2-label em { animation: none; }
}

/* Today's free pack in the guest packer's look (views/p2.js ownPack): the sealed pack big and centred, the thing to tap
   (its strip says "Tap to tear"), its words under it and the button under them, in a phone's first screen */
body.p2 .p2-ownpk .p2-offer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--p2-s4); padding-top: var(--p2-s3); }
body.p2 .p2-ownpk .p2-offer .p2-sleeve { --w: min(56vw, 220px, 34svh); }
body.p2 .p2-ownpk .p2-sleeve .p2-strip span { letter-spacing: 0; text-transform: none; font-family: var(--p2-sans); font-weight: 600; }
/* a card's number, "No. 41/500", under its rarity word */
body.p2 .p2-pack .p2-cno { font: 500 12px/1.2 var(--p2-sans); color: inherit; opacity: .62; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.p2 .p2-pack .p2-mini .p2-cno { font-size: 11px; }
/* (the summary's cards a little taller where they carry a number, so name, rarity and number all fit) */
body.p2 .p2-pack .p2-sum .p2-card3:has(.p2-cno) { aspect-ratio: 5 / 7.3; }
body.p2 .p2-pack .p2-sum .p2-card3.p2-mini:has(.p2-cno) { aspect-ratio: 5 / 7.7; }
/* the summary: Show a friend first, Done under it */
body.p2 .p2-ownpk .p2-foot .p2-sharebest + .p2-btn { margin-top: var(--p2-s2); }

/* ==== END pack ==== */



/* ==== BEGIN print: The print page and the profile ==== */
/* The print page (.pd in the #ov overlay) and the profile (.prof), in the shared-print landing's voice: Mona Sans
   titles at the token sizes, numbers in the sans, quiet labels, hairlines instead of boxes, 44 px touch targets. */

/* ---- the print page: its title and number, as the landing words them ("Sea Rogues No. 4") ---- */
body.p2 .pd-info .kicker { margin: 0 0 var(--p2-s2); font: 500 14px/1.4 var(--p2-sans); color: var(--p2-ink3); }
body.p2 .pd-info .kicker a { color: var(--p2-ink2); }
body.p2 .pd-title { justify-content: flex-start; align-items: baseline; gap: var(--p2-s1) var(--p2-s3); }
body.p2 .pd-title h2 { flex: 0 1 auto; font: 700 40px/1.05 var(--p2-head); letter-spacing: -.035em; text-wrap: balance; }
body.p2 .pd-title .pd-ed { margin-left: 0; font: 500 16px var(--p2-numf); font-variant-numeric: tabular-nums; color: var(--p2-ink3); }
body.p2 .pd-tools .iconbtn { width: 44px; height: 44px; border-radius: var(--p2-rc); }
body.p2 .pd-tools .iconbtn:hover { background: var(--p2-card2); }
/* rarity and rank: one quiet line under the title */
body.p2 .pd-info .pmeta { margin: var(--p2-s3) 0 var(--p2-s5); gap: var(--p2-s1) var(--p2-s4); font-size: 14px; color: var(--p2-ink3); }
body.p2 .pd-info .pmeta .odds { font: 600 15px var(--p2-numf); color: var(--p2-ink); }
/* the owner and the price: one row on hairlines */
body.p2 .pd-info .owner { padding: var(--p2-s4) 0; gap: var(--p2-s3); border-color: var(--p2-line); }
body.p2 .pd-info .owner .who span, body.p2 .pd-info .owner .ask span { font-size: 13.5px; color: var(--p2-ink3); }
body.p2 .pd-info .owner .who a { font: 650 17px var(--p2-head); letter-spacing: -.01em; color: var(--p2-ink); }
body.p2 .pd-info .owner .ask .ink { font: 650 24px var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .pd-info .pnums { margin: var(--p2-s3) 0 0; gap: var(--p2-s1) var(--p2-s5); font-size: 14px; }
body.p2 .pd-info .pnums b { font: 600 14px var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .pd-info .pd-drop { margin: var(--p2-s2) 0 0; font-size: 14px; }
body.p2 .pd-info .pd-drop a { color: var(--p2-ink3); text-decoration: underline; text-decoration-color: var(--p2-line2); text-underline-offset: 3px; }
/* the actions: paper is the action, the rest quiet cards, every one at least 44 px */
body.p2 .pd-info > .actions { gap: var(--p2-s2); margin-top: var(--p2-s5); }
body.p2 .pd-info > .actions .btn { min-height: 46px; border-radius: var(--p2-rc); font: 600 15px var(--p2-sans); }
body.p2 .pd-info > .actions .btn:not(.primary) { background: var(--p2-card2); border-color: transparent; color: var(--p2-ink); }
body.p2 .pd-info > .actions .btn.primary { background: var(--p2-paper); color: var(--p2-paperInk); border-color: var(--p2-paper); }
body.p2 .pd-info > .actions .btn:active { transform: scale(.97); }
body.p2 .pd-info > .actions .pricef { min-height: 46px; border-radius: var(--p2-rc); background: var(--p2-card2); }
body.p2 .pd-info > .actions .pricef .field { font-family: var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .pd-info .like.big { min-height: 46px; min-width: 46px; border-radius: var(--p2-rc); background: var(--p2-card2); font: 600 14px var(--p2-numf); }
body.p2 .pd-info > .likethis, body.p2 .pd-info > .wantline { font-size: 14px; color: var(--p2-ink3); }
body.p2 .pd-info .lockline { font-size: 14px; line-height: 1.45; }
/* traits, history, download, seed: section heads in Mona Sans, hairline rows, a 44 px tap on every fold */
body.p2 .pd-info > .subhead, body.p2 .pd-info .p2x-sethd .subhead { margin: var(--p2-s8) 0 var(--p2-s2); font: 650 20px/1.2 var(--p2-head); letter-spacing: -.02em; }
body.p2 .pd-info .why, body.p2 .pd-info .recipe { font-size: 14.5px; line-height: 1.55; color: var(--p2-ink2); }
body.p2 .pd-info details.disclose { border-bottom: 1px solid var(--p2-line); }
body.p2 .pd-info details.disclose > summary { display: flex; align-items: center; min-height: 48px; font: 600 15px var(--p2-sans); color: var(--p2-ink); cursor: pointer; }
body.p2 .pd-info .timeline li { padding: var(--p2-s2) 0; font-size: 14px; color: var(--p2-ink2); }
body.p2 .pd-info .hash { margin-top: var(--p2-s4); font-size: 12px; line-height: 1.5; color: var(--p2-ink3); overflow-wrap: anywhere; }
body.p2 .pd-info .pd-cmp { min-height: 44px; }
/* its set: one-line captions under the tiles ("none listed" broke over two lines) */
body.p2 .pd-info .p2x-tcap { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
body.p2 .pd-info .p2x-setline { font-size: 14px; line-height: 1.5; }
/* a computer: the details beside the art as the landing has them, on the page itself, not in a card */
@media (min-width: 1001px) {
  body.p2 .pd-info { padding: var(--p2-s2) 0 0; background: none; border: 0; border-radius: 0; }
  body.p2 .pd { gap: var(--p2-s14); }
  body.p2 .pd-info .p2x-strip.wrap { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: var(--p2-s2); }
}
body.p2 .pd-info .p2x-sethd .subhead { margin: 0; }
body.p2 .pd-info .p2x-sethd { align-items: center; }
body.p2 .pd-info .p2x-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--p2-ink2); text-decoration: underline; text-decoration-color: var(--p2-line2); text-underline-offset: 3px; }
/* a phone: the bar, the sheet and the title at the phone sizes */
@media (max-width: 640px) {
  body.p2 .pbar { gap: var(--p2-s1); padding-left: var(--p2-s1); padding-right: var(--p2-s2); background: var(--p2-bg); border-bottom-color: var(--p2-line); }
  body.p2 .pbar b { font: 650 16px var(--p2-head); letter-spacing: -.02em; }
  body.p2 .pbar .pb-share { height: 36px; padding: 0 14px 0 11px; border-radius: 9px; background: var(--p2-card2); color: var(--p2-ink); font: 600 14px var(--p2-sans); }
  body.p2 .pd-info { padding: var(--p2-s4) var(--p2-gutter) 0; }
  body.p2 .pd-title h2 { font-size: 30px; }
  body.p2 .pd-title .pd-ed { font-size: 15px; }
  body.p2 .pd-info > .actions:not(.pin) .btn { height: 48px; }
  body.p2 .pd-info > .actions.pin .btn, body.p2 .pd-info > .actions.pin .like.big { min-height: 52px; }
  body.p2 .pd-info .p2x-strip.wrap { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { body.p2 .pd-info > .actions .btn:active { transform: none; } }

/* ---- the profile: the collector, one line of numbers, their wall ---- */
body.p2 .prof { margin: var(--p2-s8) 0 var(--p2-s4); gap: var(--p2-s4) var(--p2-s6); }
body.p2 .prof h1 { font: 700 40px/1.05 var(--p2-head); letter-spacing: -.035em; overflow-wrap: anywhere; }
body.p2 .prof .sub { margin-top: var(--p2-s2); font-size: 15px; line-height: 1.45; color: var(--p2-ink3); }
body.p2 .prof .sub::first-letter { text-transform: uppercase; }
body.p2 .prof .sub a, body.p2 .prof .sub .pkbtn { color: var(--p2-ink2); }
body.p2 .prof .bio { margin: var(--p2-s3) 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.5; color: var(--p2-ink2); }
body.p2 .prof .profside { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--p2-s2); }
body.p2 .prof .profside .btn { min-height: 44px; padding: 0 18px; border-radius: var(--p2-rc); font: 600 15px var(--p2-sans); background: var(--p2-card2); border-color: transparent; color: var(--p2-ink); }
body.p2 .prof .profside .btn.primary, body.p2 .prof .profside .follow:not(.on) { background: var(--p2-paper); color: var(--p2-paperInk); border-color: var(--p2-paper); }
/* Share: its class .psh is also the print sheet's head, whose rules hid it on a computer and pushed it out of line on a
   phone; shown and lined up again */
body.p2 .prof .profside .btn.psh { display: inline-flex; align-items: center; justify-content: center; gap: var(--p2-s2); margin: 0; }
body.p2 .prof .profside .follow.on { background: var(--p2-card2); border-color: transparent; color: var(--p2-ink); }
body.p2 #view .sec-head h2 { font: 650 22px/1.2 var(--p2-head); letter-spacing: -.02em; }
body.p2 #view .sec-head .aside, body.p2 #view .sec-head > a { font-size: 14px; color: var(--p2-ink3); }
body.p2 .p2x-wall { margin: var(--p2-s6) 0 var(--p2-s4); }
body.p2 .p2x-slot { border: 1px dashed var(--p2-line2); border-radius: var(--p2-ra); background: var(--p2-bg2); }
body.p2 a.p2x-slot:hover, body.p2 a.p2x-slot:focus-visible { border-color: var(--p2-ink3); background: var(--p2-card); }
body.p2 .p2x-wallnote { font-size: 14px; line-height: 1.5; color: var(--p2-ink3); }
/* an empty wall of your own: six small places in one row, not six big boxes filling the first screen */
body.p2 .p2x-wall .grid.p2x-wallg:not(:has(.card)) { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 420px; gap: var(--p2-s2); }
/* a computer: the wall in one row of six across the page (it filled only the left half, in two rows) */
@media (min-width: 900px) {
  body.p2 .p2x-wall .grid.p2x-wallg:has(.card) { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; gap: var(--p2-s3); }
}
@media (max-width: 640px) {
  body.p2 .prof { margin-top: var(--p2-s6); gap: var(--p2-s3) var(--p2-s4); align-items: start; }
  body.p2 .prof .orb { width: 72px; height: 72px; }
  body.p2 .prof h1 { font-size: 30px; }
  body.p2 .prof .sub { font-size: 14px; }
  body.p2 .prof .profside { width: 100%; }
  body.p2 .prof .profside .btn { flex: 1 1 0; }
  body.p2 #view .sec-head h2 { font-size: 20px; }
}
/* the shared print's landing (signed out): who shared it and who keeps it in one line at the top, the tier word as a
   badge beside the title (the title wraps rather than cutting the badge off), and Pass it on under the numbers */
body.p2 .p2-land .p2-hero .p2-top .p2-from { min-width: 0; line-height: 1.35; }
body.p2 .p2-land .p2-hero .p2-title { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
body.p2 .p2-land .p2-pbadge { display: inline-block; vertical-align: .3em; margin-left: 2px; padding: 4px 10px 3px; border-radius: 99px;
  border: 1px solid var(--p2-line2); color: var(--p2-ink); font: 600 14px/1.2 var(--p2-sans); letter-spacing: 0; white-space: nowrap; }
body.p2 .p2-land .p2-pbadge[data-tier="common"], body.p2 .p2-land .p2-pbadge[data-tier="uncommon"] { color: var(--p2-ink2); }
body.p2 .p2-land .p2-pbadge[data-tier="legendary"] { background: var(--p2-paper); color: var(--p2-paperInk); border-color: transparent; }
body.p2 .p2-land .p2-hero .p2-line { white-space: normal; overflow: visible; }
body.p2 .p2-land .p2-pass { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 4px; border: 0; background: none;
  color: var(--p2-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--p2-line2); cursor: pointer; }
body.p2 .p2-land .p2-pass:focus-visible { outline: 2px solid var(--p2-accent2); outline-offset: 2px; border-radius: 4px; }

/* the print page's set strip: a missing one with none for sale stays a dimmed silhouette, now with no caption, not "none listed"
   seven times over (its aria-label still says so) */
body.p2 .pd-info .p2x-tile.miss .p2x-tcap.p2x-none { visibility: hidden; }

/* ==== END print ==== */



/* ==== BEGIN market: Market and offers ==== */
/* (.p2x-mkt: the market page, set by app.js p2Market under P2 only; every tab of /market draws into it) */
/* the head: a calmer title, closer to its tabs */
body.p2 .p2x-mkt .page-head.p2x-mhead { padding: 24px 0 0; gap: 0; }
body.p2 .p2x-mkt .p2x-mhead h1 { font: 700 32px/1.05 var(--p2-head); letter-spacing: -.035em; margin: 0; }
@media (min-width: 900px) { body.p2 .p2x-mkt .page-head.p2x-mhead { padding-top: 32px; } body.p2 .p2x-mkt .p2x-mhead h1 { font-size: 40px; } }
body.p2 .p2x-mkt .p2x-mtabs { width: 100%; margin-top: 16px; gap: 24px; }
body.p2 .p2x-mkt .p2x-mtabs button { min-height: 44px; padding: 10px 0; }
/* a tab row that runs past the screen fades at the edge it goes on past (app.js sets p2x-mr / p2x-ml), so it reads as a row you swipe */
body.p2 .p2x-mkt .p2x-mtabs { scroll-padding-inline: 24px; }
@media (max-width: 520px) { body.p2 .p2x-mkt .p2x-mtabs { gap: 18px; } }
body.p2 .p2x-mkt .p2x-mtabs.p2x-mr { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
body.p2 .p2x-mkt .p2x-mtabs.p2x-ml { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
body.p2 .p2x-mkt .p2x-mtabs.p2x-ml.p2x-mr { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
/* a member with nothing yet: their free pack, one step (Finish your sets, the offer sheet) */
body.p2 .p2x-freenext { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--p2-line2, var(--rule)); border-radius: var(--p2-ra, 12px); background: var(--p2-card, rgba(255,255,255,.03)); }
body.p2 .p2x-freenext .p2-t { font-weight: 600; }
body.p2 .p2x-freenext .p2-small { margin-top: 4px; }
body.p2 .p2x-freenext .p2-btn { min-height: 44px; flex: none; }
body.p2 .tsheet .pick > .p2x-freenext { margin: 8px 0 16px; }
/* the Auctions tab: today's daily auction above collectors' own */
body.p2 .p2x-mkt .p2x-adaily { margin: 16px 0 24px; }
body.p2 .p2x-mkt .p2x-adaily .p2-sec { margin-top: 0; }
@media (min-width: 900px) { body.p2 .p2x-mkt .p2x-adaily .p2x-auc { max-width: 560px; } }
/* the latest sale: its label in the reading face at a readable size */
body.p2 .p2x-mkt .ticker { height: 44px; }
body.p2 .p2x-mkt .tk-k { font: 500 12.5px var(--p2-sans); color: var(--p2-ink3); }
body.p2 .p2x-mkt .tk-i .ink { font-family: var(--p2-numf); }
body.p2 .p2x-mkt .tk-all { min-height: 44px; }

/* a tab's own row (Yours: Offers · Listings · Wantlist · Alerts; Open · History; Running · Ended): a small segmented
   control under the page's tabs, so the two rows don't read as the same level */
body.p2 .p2x-mkt .seg.yseg, body.p2 .p2x-mkt .seg.oseg { display: inline-flex; gap: 2px; width: auto; max-width: 100%; margin: 16px 0 0;
  padding: 3px; border: 1px solid var(--p2-line); border-radius: 12px; background: var(--p2-bg2); }
body.p2 .p2x-mkt .seg.yseg + .seg.oseg { display: flex; width: fit-content; margin-top: 8px; }
body.p2 .p2x-mkt .seg.yseg button, body.p2 .p2x-mkt .seg.oseg button { min-height: 38px; padding: 0 14px; border: 0; margin: 0; border-radius: 9px;
  font: 550 14px var(--p2-sans); color: var(--p2-ink3); transition: background var(--p2-fast) var(--p2-ease), color var(--p2-fast) var(--p2-ease); }
body.p2 .p2x-mkt .seg.yseg button::after, body.p2 .p2x-mkt .seg.oseg button::after { display: none; }
body.p2 .p2x-mkt .seg.yseg button:hover, body.p2 .p2x-mkt .seg.oseg button:hover { color: var(--p2-ink2); }
body.p2 .p2x-mkt .seg.yseg button.on, body.p2 .p2x-mkt .seg.oseg button.on { background: var(--p2-card3); color: var(--p2-ink); }
body.p2 .p2x-mkt .seg.yseg button .dim { color: var(--p2-ink3); margin-left: 2px; }
/* (the control is 44 px tall with its padding: the whole of it is the tap target) */
@media (max-width: 760px) { body.p2 .p2x-mkt .seg.yseg button, body.p2 .p2x-mkt .seg.oseg button { min-height: 38px; padding: 0 12px; } }

/* a tab's intro: a quiet line, not a paragraph in body size */
body.p2 .p2x-mkt .tabnote { margin: 16px 0 16px; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--p2-ink3); }

/* empty states: one quiet card, its line in the reading size, its action a real button */
body.p2 .p2x-mkt .empty { margin: 16px 0 0; padding: 32px 20px; border: 1px solid var(--p2-line); border-radius: var(--p2-rk); background: var(--p2-bg2);
  color: var(--p2-ink2); font-size: 14.5px; line-height: 1.5; text-align: center; }
body.p2 .p2x-mkt .empty b { display: block; margin: 0 0 4px; font: 650 18px/1.25 var(--p2-head); letter-spacing: -.02em; color: var(--p2-ink); }
body.p2 .p2x-mkt .empty .btn { min-height: 44px; margin-top: 16px; }

/* For you: sections on the 8 px rhythm, links big enough to tap */
body.p2 .p2x-mkt .p2x-fy { animation: p2x-mkt-in var(--p2-base) var(--p2-ease) both; }
body.p2 .p2x-mkt .p2x-fy .p2-sec { margin: 32px 0 12px; align-items: center; }
body.p2 .p2x-mkt .p2x-fy .p2-sec:first-child { margin-top: 24px; }
body.p2 .p2x-mkt .p2x-fy .p2-sec a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -12px auto; padding: 0 2px 0 12px; color: var(--p2-ink2); }
body.p2 .p2x-mkt .p2x-fy .p2-sec a::after { content: '›'; margin-left: 6px; font-size: 18px; line-height: 1; color: var(--p2-ink3); }
body.p2 .p2x-mkt .p2x-fy > .p2-small:not(.p2x-also) { margin: 0; padding: 16px; border: 1px solid var(--p2-line); border-radius: var(--p2-rk); background: var(--p2-bg2); color: var(--p2-ink2); max-width: 720px; }
body.p2 .p2x-mkt .p2x-fy .p2-list > .p2-small { margin: 0; padding: 16px; border: 1px solid var(--p2-line); border-radius: var(--p2-rk); background: var(--p2-bg2); color: var(--p2-ink2); }
body.p2 .p2x-mkt .p2x-fy .p2-row { min-height: 64px; }
body.p2 .p2x-mkt .p2x-fy .p2-row .p2-t { font: 600 15.5px/1.3 var(--p2-sans); }
/* the daily auction: art, then the number, then the time, then the button, each a step apart */
body.p2 .p2x-mkt .p2x-auc { padding: 12px; gap: 16px; transition: border-color var(--p2-fast) var(--p2-ease); }
body.p2 .p2x-mkt .p2x-auc:hover { border-color: var(--p2-line2); }
body.p2 .p2x-mkt .p2x-auc .p2-art { display: block; aspect-ratio: 1; border-radius: var(--p2-ra); overflow: hidden; }
body.p2 .p2x-mkt .p2x-aucamt { margin: 8px 0 4px; }
body.p2 .p2x-mkt .p2x-auc .p2x-big { font: 700 28px/1 var(--p2-head); letter-spacing: -.02em; }
body.p2 .p2x-mkt .p2x-auc .p2-btn { height: 44px; min-width: 96px; margin-top: 12px; }
@media (max-width: 520px) { body.p2 .p2x-mkt .p2x-auc { grid-template-columns: 112px 1fr; gap: 14px; } }
/* Just listed: the row of cards shows a third card's edge, so it reads as a row to swipe */
@media (max-width: 899px) { body.p2 .p2x-mkt .p2x-fy .grid.p2x-row6 { grid-auto-columns: 44%; gap: 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  body.p2 .p2x-mkt .p2x-fy .grid.p2x-row6 > * { scroll-snap-align: start; } }
/* Sold today: rows a step apart, the time in the dim */
body.p2 .p2x-mkt .p2x-sold { margin: 0; }
/* the other tabs, one tap away: pills, not a line of underlined words */
body.p2 .p2x-mkt .p2x-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; color: var(--p2-ink3); font-size: 14px; }
body.p2 .p2x-mkt .p2x-also .p2x-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--p2-line); border-radius: 22px;
  background: var(--p2-bg2); color: var(--p2-ink2); font-size: 14px; text-decoration: none; transition: border-color var(--p2-fast) var(--p2-ease), color var(--p2-fast) var(--p2-ease); }
body.p2 .p2x-mkt .p2x-also .p2x-link:hover { border-color: var(--p2-line2); color: var(--p2-ink); }

/* Sets (the collections table): the filters a row you swipe on a phone, the search and sort one row under it */
body.p2 .p2x-mkt .hot { margin: 24px 0 8px; }
body.p2 .p2x-mkt .hot-h b { font: 700 20px var(--p2-head); letter-spacing: -.025em; }
body.p2 .p2x-mkt .hot-n { margin-top: -2px; }
body.p2 .p2x-mkt .hot-n .ink, body.p2 .p2x-mkt .crow .ink { font-family: var(--p2-numf); }
body.p2 .p2x-mkt .mbar { margin: 24px 0 8px; }
body.p2 .p2x-mkt .mbar .chip { min-height: 40px; }
body.p2 .p2x-mkt .mbar .field { min-height: 44px; }
@media (max-width: 760px) {
  body.p2 .p2x-mkt .mbar .kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; flex: 1 1 100%; margin: 0 calc(-1 * var(--p2-gutter)); padding: 0 var(--p2-gutter); }
  body.p2 .p2x-mkt .mbar .kinds::-webkit-scrollbar { display: none; }
  body.p2 .p2x-mkt .mbar .kinds .chip { flex: none; }
  body.p2 .p2x-mkt .mbar .grow { display: none; }
  body.p2 .p2x-mkt .mbar .q { flex: 1 1 0; min-width: 0; }
  body.p2 .p2x-mkt .mbar .sort { flex: 0 1 42%; min-width: 0; }
  body.p2 .p2x-mkt .crow.mkt { padding-left: 4px; padding-right: 4px; }
}
body.p2 .p2x-mkt .crow.mkt .btn.sm, body.p2 .p2x-mkt .crow.offrow .btn.sm { min-height: 36px; }
body.p2 .p2x-mkt .btn.more { min-height: 44px; margin-top: 16px; }

/* Your offers: the collection offers' rows and the bar above them */
body.p2 .p2x-mkt .toolbar { margin: 16px 0 8px; }
body.p2 .p2x-mkt .crow.offrow { padding: 12px 4px; border-bottom: 1px solid var(--p2-line); border-radius: 0; }
body.p2 .p2x-mkt .crow.offrow .opr { font: 600 15px var(--p2-numf); }
@media (max-width: 640px) {
  body.p2 .p2x-mkt .crow.offrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  body.p2 .p2x-mkt .crow.offrow .cname { grid-column: 1 / -1; }
  body.p2 .p2x-mkt .crow.offrow .opr { text-align: left; }
  body.p2 .p2x-mkt .crow.offrow .btn.sm { min-height: 44px; padding: 0 16px; }
}
/* an offer for one print (made, or countered): who, what each side gives, then the answer buttons, full size */
body.p2 .p2x-mkt .sec-head { margin: 32px 0 8px; }
body.p2 .p2x-mkt .sec-head h2 { font: 700 20px var(--p2-head); letter-spacing: -.025em; }
body.p2 .p2x-mkt .offer { padding: 16px 0; gap: 12px 16px; }
body.p2 .p2x-mkt .offer .olabel { font: 500 13px var(--p2-sans); color: var(--p2-ink3); }
body.p2 .p2x-mkt .offer .oink .ink { font-family: var(--p2-numf); }
body.p2 .p2x-mkt .offer .oacts .btn { min-height: 44px; }
body.p2 .p2x-mkt .ctrbox .field { height: 44px; }
body.p2 .p2x-mkt .ctrbox .btn { min-height: 44px; }
@media (max-width: 640px) {
  body.p2 .p2x-mkt .offer .oacts { flex: 1 1 100%; }
  body.p2 .p2x-mkt .offer .oacts .btn { flex: 1 1 0; }
  body.p2 .p2x-mkt .offer .card { width: 112px; }
}

/* Make an offer (the sheet from a collection's row): the three numbers a quiet row, the form on the 8 px rhythm */
body.p2 .cosheet .kicker { color: var(--p2-ink3); }
body.p2 .cosheet .co-head { margin: 12px 0 16px; }
body.p2 .cosheet .co-head .cthumb { border-radius: var(--p2-ra); overflow: hidden; }
body.p2 .cosheet .co-head h2 { font: 700 24px/1.1 var(--p2-head); letter-spacing: -.03em; }
body.p2 .cosheet .co-stats { gap: 8px; margin: 0 0 16px; }
body.p2 .cosheet .co-stats > div { gap: 2px; padding: 8px 12px; border-color: var(--p2-line); border-radius: var(--p2-rc); background: var(--p2-bg2); }
body.p2 .cosheet .co-stats span { font-size: 12.5px; color: var(--p2-ink3); }
body.p2 .cosheet .co-stats b { font: 600 16px/1.3 var(--p2-numf); font-variant-numeric: tabular-nums; }
body.p2 .cosheet .co-stats .ink { font-family: var(--p2-numf); }
body.p2 .cosheet .offerbox .field { min-height: 44px; }
body.p2 .cosheet .offerbox .btn.go { min-height: 48px; }

/* desktop: Finish your sets beside Today's 1 of 1 (two columns at the top of For you), the tab's two small rows on one
   line, and an empty state as wide as the reading column */
@media (min-width: 1100px) {
  body.p2 .p2x-mkt .p2x-fy:has(> .p2x-auc) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  body.p2 .p2x-mkt .p2x-fy:has(> .p2x-auc) > * { grid-column: 1 / -1; }
  body.p2 .p2x-mkt .p2x-fy:has(> .p2x-auc) > .p2-sec:first-child { grid-column: 1; grid-row: 1; margin-top: 24px; }
  body.p2 .p2x-mkt .p2x-fy:has(> .p2x-auc) > .p2-sec:first-child + .p2-list { grid-column: 1; grid-row: 2; max-width: none; }
  body.p2 .p2x-mkt .p2x-fy > .p2-sec:has(+ .p2x-auc) { grid-column: 2; grid-row: 1; margin-top: 24px; }
  body.p2 .p2x-mkt .p2x-fy > .p2x-auc { grid-column: 2; grid-row: 2; max-width: none; }
}
/* Sealed packs' filters: one row to swipe on a phone, nothing cut off at the edge */
body.p2 .p2x-mkt .chips.sfilt .chip { min-height: 40px; }
@media (max-width: 760px) {
  body.p2 .p2x-mkt .chips.sfilt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-left: calc(-1 * var(--p2-gutter)); margin-right: calc(-1 * var(--p2-gutter)); padding: 0 var(--p2-gutter); }
  body.p2 .p2x-mkt .chips.sfilt::-webkit-scrollbar { display: none; }
  body.p2 .p2x-mkt .chips.sfilt .chip { flex: none; }
}
@media (min-width: 900px) {
  body.p2 .p2x-mkt .seg.oseg + .seg.oseg,
  body.p2 .p2x-mkt .seg.yseg + .seg.oseg { display: inline-flex; margin: 16px 0 0 12px; vertical-align: top; }
  body.p2 .p2x-mkt .empty { max-width: 720px; }
}

@keyframes p2x-mkt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.p2 .p2x-mkt .p2x-fy { animation: none; }
  body.p2 .p2x-mkt .seg.yseg button, body.p2 .p2x-mkt .seg.oseg button, body.p2 .p2x-mkt .p2x-also .p2x-link, body.p2 .p2x-mkt .p2x-auc { transition: none; }
}

/* ==== END market ==== */



/* ==== BEGIN album: Album, binders and empty states ==== */
/* Empty states, site-wide: the page's own words, left-aligned like the playbook's mockup (heading, one line, the button
   that fills it), on the 4/8 rhythm. No border box: an empty page is quiet, not an alert. */
body.p2 .empty { text-align: left; border: 0; border-radius: 0; padding: var(--p2-s8) var(--p2-s4); max-width: 36rem; color: var(--p2-ink2); font: 400 15px/1.5 var(--p2-sans); }
body.p2 .empty > b:first-child { display: block; margin: 0 0 var(--p2-s1); color: var(--p2-ink); font: 600 20px/1.25 var(--p2-head); letter-spacing: -.01em; }
body.p2 .empty .btn, body.p2 .empty .actions { margin-top: var(--p2-s4) !important; }
body.p2 .empty .actions { justify-content: flex-start !important; }
body.p2 .empty > .btn { display: flex; width: max-content; }
body.p2 .empty .btn { min-height: 44px; }
body.p2 .empty .btn.glow { box-shadow: none; animation: none; }
/* the new ones (app.js p2Empty): a spot for a small mark beside the words, taking no room while it's empty */
body.p2 .p2e { display: flex; align-items: flex-start; gap: var(--p2-s4); padding: var(--p2-s10) 0 var(--p2-s8); }
body.p2 .p2e-mark { flex: none; width: 44px; height: 44px; }
body.p2 .p2e-mark:empty { display: none; }
body.p2 .p2e-body { min-width: 0; }
body.p2 .p2e-h { margin: 0 0 var(--p2-s2); color: var(--p2-ink); font: 600 24px/1.2 var(--p2-head); letter-spacing: -.015em; }
body.p2 .p2e-line { margin: 0; max-width: 30rem; color: var(--p2-ink2); font: 400 15px/1.5 var(--p2-sans); text-wrap: pretty; }
body.p2 .p2e-go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--p2-s6); margin-top: var(--p2-s5) !important; }
@media (min-width: 900px) { body.p2 .p2e { padding: var(--p2-s14) 0 var(--p2-s10); } }
/* round 2: the Printlings tab's empty state. A quieter second way in under Open a pack, and where a first pack's five land */
body.p2 .p2e-friend { display: flex; align-items: center; width: max-content; min-height: 44px; margin-top: var(--p2-s2); color: var(--p2-ink2); font: 500 15px var(--p2-sans); text-decoration: underline; text-decoration-color: var(--p2-line2); text-underline-offset: 4px; }
body.p2 .p2e-friend:hover { color: var(--p2-ink); text-decoration-color: var(--p2-ink3); }
body.p2 .p2e-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--p2-s2); max-width: 420px; margin-top: var(--p2-s8); }
body.p2 .p2e-slot { aspect-ratio: 3 / 4; border: 1px dashed var(--p2-line2); border-radius: var(--p2-rk); opacity: .7; }
/* the tab row: the Album's count in words, quiet; the row scrolls rather than cut a tab off */
body.p2 .p2x-invseg .tcnt.p2x-tcnt { font: 500 12px/1 var(--p2-sans); letter-spacing: 0; padding: 4px 8px; color: var(--p2-ink2); background: var(--p2-card2); white-space: nowrap; }
body.p2 .p2x-invseg { overflow-x: auto; scrollbar-width: none; }
body.p2 .p2x-invseg::-webkit-scrollbar { display: none; }

/* Collection's summary line: one quiet line of facts under the tabs, not a second heading */
body.p2 .invline { font-size: 14px; line-height: 1.5; color: var(--p2-ink3); margin-top: var(--p2-s3); }
body.p2 .invline .ink { color: var(--p2-gold); }
body.p2 .invline .p2x-link { color: var(--p2-ink2); min-height: 0; }
/* the filter row: 44 px to tap, the chips on the 8 px step */
body.p2 .invbar .fbtn2, body.p2 .invbar .qf { min-height: 44px; }
body.p2 .invbar .chips.fins { gap: var(--p2-s2); }

/* Sets: each set's head is its name and count over a full-width progress rule; the gaps are quiet slots */
body.p2 .fam { margin-bottom: var(--p2-s10); }
body.p2 .fam-head { gap: var(--p2-s2) var(--p2-s3); padding-bottom: 0; border-bottom: 0; margin-bottom: var(--p2-s4); }
body.p2 .fam-head > b { font: 600 20px/1.2 var(--p2-head); letter-spacing: -.015em; }
body.p2 .fam-head > .mono { color: var(--p2-ink2) !important; font: 500 14px var(--p2-numf) !important; font-variant-numeric: tabular-nums; }
body.p2 .fam-head .meter { order: 10; flex: 1 1 100%; width: auto; height: 4px; border-radius: 2px; background: var(--p2-card3); }
body.p2 .fam-head .meter i { border-radius: 2px; background: var(--p2-ink); transition: width var(--p2-slow) var(--p2-ease); }
body.p2 .fam:has(.fam-head .done) .fam-head .meter i { background: var(--p2-go); }
body.p2 .fam-head .done { color: var(--p2-go); font: 600 13px var(--p2-sans); }
body.p2 .fam-head > .dim, body.p2 .mmiss .dim, body.p2 .dwline { font-size: 13px; }
body.p2 .fam-head > .dim::first-letter, body.p2 .mmiss > span::first-letter, body.p2 .mmiss > .dim::first-letter { text-transform: uppercase; }
body.p2 .fam-head .btn { min-height: 40px; }
body.p2 .mmiss { margin: 0 0 var(--p2-s6); gap: var(--p2-s2) var(--p2-s3); }
body.p2 .mmiss .mmb.primary { background: var(--p2-card2); color: var(--p2-ink); border: 1px solid var(--p2-line2); }
body.p2 .setfilt { margin: var(--p2-s2) 0 var(--p2-s4); padding-left: 0; padding-right: 0; }
body.p2 .dwline { margin-left: 0; margin-right: 0; padding-left: 0; color: var(--p2-ink3); }
@media (max-width: 640px) { body.p2 .fam-head .wantall { margin-left: 0; } }
body.p2 .series-grid { gap: var(--p2-s3); }
body.p2 .series-grid .slot { border: 1px dashed var(--p2-line2); border-radius: var(--p2-rk); background: transparent; padding: var(--p2-s3); gap: 2px; color: var(--p2-ink3); font-size: 13px; transition: border-color var(--p2-fast) var(--p2-ease), background-color var(--p2-fast) var(--p2-ease); }
body.p2 .series-grid .slot b { color: var(--p2-ink2); font: 600 15px/1.25 var(--p2-head); margin-bottom: 2px; }
body.p2 .series-grid .slot .slot-buy { margin-top: var(--p2-s2); font-size: 12.5px; color: var(--p2-ink3); }
body.p2 .series-grid .slot .slot-buy::first-letter { text-transform: uppercase; }
body.p2 .series-grid .slot.p2x-quiet .slot-buy, body.p2 .series-grid .slot.p2x-quiet .slot-cta { display: none; }
body.p2 .series-grid .slot.p2x-quiet .wantb { margin-top: auto; }
@media (max-width: 640px) { body.p2 .series-grid .slot.p2x-quiet { min-height: 120px; } }
body.p2 .series-grid a.slot:hover { border-color: var(--p2-ink3); background: var(--p2-bg2); }
@media (max-width: 640px) {
  body.p2 .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.p2 .series-grid .slot { aspect-ratio: auto; min-height: 168px; }
}

/* Album: the postmarks block, then the stamp book. Empty postmark frames are quiet outlines without a word under each */
body.p2 .albumpg .p2-pms { margin-bottom: var(--p2-s8); }
body.p2 .albumpg .p2-pme figcaption { display: none; }
body.p2 .albumpg .p2-pms:has(.p2-pme):not(:has(.p2-pm:not(.p2-pme))) .p2-pmgrid { max-width: 264px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.p2 .albumpg .p2-pmgo { min-height: 48px; }
body.p2 .albumpg .p2-pms:has(.p2-pme):not(:has(.p2-pm:not(.p2-pme))) .p2-pmgo { width: max-content; max-width: 100%; padding: 0 var(--p2-s6); background: var(--p2-signal); border-color: var(--p2-signal); color: var(--p2-signalInk); }
body.p2 .albumpg > a.btn.sm[href="/n/"], body.p2 .albumpg > a.btn.sm[href="/album/names"] { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 var(--p2-s8) !important; }
/* the book's tabs never cut a word off on a phone: the tabs scroll, today's chip keeps its own place */
body.p2 .albsegw { gap: var(--p2-s2); }
body.p2 .albsegw .albseg { overflow-x: auto; scrollbar-width: none; }
body.p2 .albsegw .albseg::-webkit-scrollbar { display: none; }
body.p2 .albseg button { min-height: 44px; }
@media (max-width: 640px) {
  body.p2 .albsegw { flex-wrap: wrap; border-bottom: 0; }
  body.p2 .albsegw .albseg { flex: 1 1 100%; border-bottom: 1px solid var(--p2-line); }
  body.p2 .albsegw .atoday { order: -1; margin: 0 0 var(--p2-s2); min-height: 40px; }
}

/* ==== END album ==== */



/* ==== BEGIN crossing: The Crossing ==== */
/* The Crossing keeps its games' window (round 12: pixel frames, the games' yellow and purple) but takes the brand's
   type and its rules: Mona Sans headings, sentence case (no small mono capitals), no glows, blur or decorative
   gradients, touch targets of 44 px. Presentation only: views/crossing.js's rules, timings and calls are untouched. */

/* ---- type: headings in Mona Sans, the numbers in the sans (tabular) ---- */
body.p2 .cx .cx-ttl, body.p2 .cx .cx-firsth h2, body.p2 .cx .cx-colt h2, body.p2 .cx .cx-empty > b, body.p2 .cx .cx-box h3,
body.p2 .cx .cx-ph h3, body.p2 .cx .cx-shtitle, body.p2 .cx .cx-bsm h3, body.p2 .cx .cx-cfh h1, body.p2 .cx .cx-big h1 {
  font-family: var(--p2-head); font-weight: 700; letter-spacing: -.025em; }
/* (one size on every tab: the Exchange's head had its own, smaller) */
body.p2 .cx .cx-ttl, body.p2 .cx.cx-on-ex .cx-stick .cx-ttl { font-family: var(--p2-head); font-weight: 700; font-size: 24px; line-height: 34px; letter-spacing: -.025em; }
@media (min-width: 761px) { body.p2 .cx .cx-ttl, body.p2 .cx.cx-on-ex .cx-stick .cx-ttl { font-size: 32px; line-height: 40px; } }
body.p2 .cx .cx-firsth h2 { font-size: 26px; line-height: 1.1; }
body.p2 .cx .cx-wallh, body.p2 .cx .cx-foot h3 { font: 600 15px/1.3 var(--p2-head); letter-spacing: -.01em; color: var(--t2); }

/* ---- no small mono capitals: the test badge, "New", the kickers, in the reading face and sentence case ---- */
body.p2 .cx .cx-test, body.p2 .cx .cx-tt .cx-test, body.p2 .cx.cx-on-ex .cx-stick .cx-test, body.p2 .cx.cx-on-ex .cx-stick .cx-tt .cx-test {
  font: 500 12px/1 var(--p2-sans); letter-spacing: 0; text-transform: none; }
body.p2 .cx .cx-new { font: 600 11.5px/1.3 var(--p2-sans); letter-spacing: 0; text-transform: none; padding: 2px 7px; background: var(--p2-bg); }
body.p2 .cx .cx-cfh .cx-gk, body.p2 .cx .cx-meta .cx-gk, body.p2 .cx .kicker.cx-gk { font: 500 14px/1.5 var(--p2-sans); letter-spacing: 0; text-transform: none; color: var(--p2-ink2); }
/* (the caption on a print's mat: the name in the heading face, as written, not in small capitals) */
body.p2 .cx .cx-leaf .cx-scap { font-family: var(--p2-head); font-variant: normal; letter-spacing: -.01em; }

/* ---- no glows, blur or decorative gradients ---- */
/* (the stuck head ends in a hairline, not a fade) */
body.p2 .cx .cx-stick::after { height: 1px; background: var(--p2-line); opacity: 0; transition: opacity var(--p2-fast) linear; }
body.p2 .cx.stuck .cx-stick::after { opacity: 1; }
body.p2 .cx .cx-cfb.dev:not(.up) .cx-cfh h1 { text-shadow: none; }
body.p2 .cx .cx-mv.new .cx-mvi { box-shadow: 0 0 0 2px var(--p2-go); }
body.p2 .cx .cx-purse.landed::before, body.p2 .cx .cx-cfb.minted .cx-cfp::before, body.p2 .cx .cx-tilt::after,
body.p2 .cx .cx-cfb.up .cx-paper::after, body.p2 .cxx .xbr.xtr.mine::before, body.p2 .cxx .xspread::before { content: none; }
body.p2 .cx .cx-arr.new { animation-name: cxin; }
body.p2 .cx .cx-b.cx-landed > .cx-glims, body.p2 .cx .cx-purse.landed .cx-pbig b { animation: none; }
body.p2 .cx .cx-ppback { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--p2-bg); box-shadow: inset 0 0 0 1px var(--p2-line2); }
body.p2 .cx .cx-tray, body.p2 .cx .cx-cfb.up .cx-tray { background: var(--p2-bg2); box-shadow: inset 0 0 0 1px var(--p2-line); }
@media (max-width: 760px) {
  body.p2 .cx .cx-cfx .cx-cfa { background: var(--p2-bg); border-top: 1px solid var(--p2-line); }
}

/* ---- one head on every tab: the title and the tabs no longer change colour between Prints, Exchange and For sale
   (the game's yellow title and lavender tabs, then white ones on the Exchange): paper for the title and the chosen tab,
   a paper bar under it, the others quiet ---- */
body.p2 .cx .cx-ttl, body.p2 .cx.cx-on-ex .cx-stick .cx-ttl { color: var(--p2-ink); }
body.p2 .cx .cx-tabs.seg, body.p2 .cx.cx-on-ex .cx-tabs.seg { border-bottom: 1px solid var(--p2-line); }
body.p2 .cx .cx-tabs button, body.p2 .cx.cx-on-ex .cx-tabs button { color: var(--p2-ink3); }
body.p2 .cx .cx-tabs button:hover, body.p2 .cx.cx-on-ex .cx-tabs button:hover { color: var(--p2-ink2); }
body.p2 .cx .cx-tabs button.on, body.p2 .cx.cx-on-ex .cx-tabs button.on { color: var(--p2-ink); box-shadow: inset 0 -2px 0 var(--p2-paper); }
body.p2 .cx .cx-tabs button.on::after, body.p2 .cx.cx-on-ex .cx-tabs button.on::after { display: none; }
/* (each game's money in the head says its name on a phone too: "✦ — glims", not a bare "✦ —") */
@media (max-width: 640px) { body.p2 .cx .cx-b small { display: inline; font-size: 12.5px; } body.p2 .cx .cx-mb { gap: 12px; } }

/* ---- the first-run empty state: both ways in fit on a computer ("Strike in Pyx Online" was cut off) ---- */
body.p2 .cx .cx-firstgo { grid-template-columns: repeat(2, minmax(0, max-content)); max-width: none; }
body.p2 .cx .cx-firstgo .btn { padding: 0 20px; }
@media (max-width: 640px) { body.p2 .cx .cx-firstgo { grid-template-columns: minmax(0, 1fr); } }
body.p2 .cx .cx-first { gap: var(--p2-s6); }
body.p2 .cx .cx-firsth { gap: var(--p2-s2); }
body.p2 .cx .cx-firsth p, body.p2 .cx .cx-empty > span { color: var(--p2-ink2); font-size: 15.5px; line-height: 1.5; }

/* ---- touch targets: 44 px for every tap ---- */
body.p2 .cx .cx-filter .chip, body.p2 .cx .cx-dens button, body.p2 .cx .cx-sort select { min-height: 44px; }
body.p2 .cx .cx-mkey { min-height: 36px; }
body.p2 .cx .cx-shx { min-width: 44px; min-height: 44px; }
body.p2 .cx .cx-tabs button { min-height: 44px; }
body.p2 .cx .cx-fold summary { min-height: 48px; }
/* (the Exchange's little "why" button by the balance: a 44 px target around the same 15 px icon) */
body.p2 .cxx .xbal .xwhy { width: 44px; height: 44px; margin: -13px -9px -13px -15px; }

/* ==== END crossing ==== */