@import url('/css/trades.css'); /* the trading screens (#1119, #1120): linked from here so the change ships without a restart */
/* Lock and Lay — Breeding › Pair (#1112) and the breeding pickers (#1113), on both clients. Loaded after style.css (and
   before the phone's own sheet), so the same selectors here win; where an older rule carries an id, the rule here names
   it too. The language is the top bar's and the left bar's (hud.css): what you only READ is sunk (the counts, the note,
   who is on the ticket, the search box), what you can PRESS is raised (the two Choose tiles, a card, a chip, Pair) and
   goes down under the finger; pink is her, blue is him, green is go, gold is money.
   - The two tiles of "Plan a pairing" are slabs with a thick edge in her colour or his and a solid coin. A picked animal
     sits on its slab: its picture, a Dam / Sire tag, its name without the het tail (three lines at most, the whole morph
     in the tooltip), its facts, its genes as pills in the Collection's colours with hets on their own line, and Change /
     Best match / Open as chips. On a short screen the two pictures give way first, so the ticket still fits.
   - The pair ticket under them is one raised bar: who goes in reads from two wells, the standing plan has its own corner,
     and Pair is a green slab the height of the bar. It stays at the bottom of the panel whenever it would be out of
     sight (the phone's has always done so), so Pair is never a scroll away. While a pairing is sent the same bar is
     the loading panel (pairfx.js), in the same shape.
   - The pickers' window is 90% of the screen with the list filling it. A coin says whose list it is, the counts sit in
     wells, "with her" is a chip with her picture, the search fills the bar. A card is raised: the whole morph on up to
     three lines, hets on their own line, the value in gold (a clutch's in green). The chosen one says Picked.
   - "Male for" (the Season tab's picker) shows her in a well beside the title and a picture a male, drawn near view.
   Only transform, opacity and box-shadow move, each once; nothing loops. With reduced motion nothing moves. */
:root { --bp-f: #e07aa9; --bp-f1: #ffa9cb; --bp-f2: #df6b9f; --bp-fe: #8c2f5d; --bp-ft: #3d0a22;
  --bp-m: #6ca0c2; --bp-m1: #a5d6f5; --bp-m2: #5a9fd0; --bp-me: #23597f; --bp-mt: #062238;
  --bp-well: #fbf8f1; --bp-lift: var(--paper); --bp-edge: rgba(60, 48, 30, .35); --bp-gold: #8a5a00; --bp-ev: #2f7f48; --bp-het: #7a5a98; --bp-go1: #74d893; --bp-go2: #2f9150; --bp-goe: #17512b; --bp-got: #052b12; }
:root[data-theme="dark"] { --bp-well: #141210; --bp-lift: #2e2a25; --bp-edge: rgba(0, 0, 0, .5); --bp-gold: #f1cd6a; --bp-ev: #7fd596; --bp-het: #b99ad0; }

/* ---- the note under "Ready to introduce": a well, a coin, the first sentence in bold ---- */
.bhint.bp-note { gap: 11px; padding: 6px 16px 6px 6px; border: 1px solid var(--rule); border-radius: 22px; background: var(--bp-well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); color: var(--ink-2); font: 400 13px/1.35 var(--sans); }
.bhint.bp-note::before { width: 30px; height: 30px; border: 0; background: linear-gradient(180deg, #ffdc73, #d99a1c); color: #4a3000; font: italic 700 15px/1 var(--serif); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .5); }
.bhint.bp-note b { font-weight: 700; color: var(--ink); }

/* ---- Plan a pairing: the two slabs ---- */
.pair-board.bp { gap: 12px; padding-bottom: 6px; }
.pair-board.bp .pcard { --sx: var(--bp-m); --s1: var(--bp-m1); --s2: var(--bp-m2); --se: var(--bp-me); --st: var(--bp-mt); --dk: color-mix(in srgb, var(--se) 80%, #000);
  position: relative; border: 1px solid color-mix(in srgb, var(--sx) 46%, var(--rule-2)); border-radius: 18px; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--sx) 20%, transparent), transparent 75%), linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink);
  box-shadow: 0 5px 0 var(--dk), 0 11px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1); }
.pair-board.bp .pcard.f { --sx: var(--bp-f); --s1: var(--bp-f1); --s2: var(--bp-f2); --se: var(--bp-fe); --st: var(--bp-ft); }
/* a tile with nobody on it: the whole of it is the button (the generic empty note's dashes and its "i" stay off it) */
:is(#panelBody, #view) .pair-board.bp .pcard.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 218px; margin: 0; padding: 18px 14px 20px; border: 1px solid color-mix(in srgb, var(--sx) 46%, var(--rule-2)); border-radius: 18px; font: 400 13px/1.35 var(--sans); font-style: normal; text-align: center; color: var(--ink); cursor: pointer; transition: transform .09s, box-shadow .09s, filter .12s; }
:is(#panelBody, #view) .pair-board.bp .pcard.empty::before { content: none; }
@media (hover: hover) { .pair-board.bp .pcard.empty:hover { transform: translateY(-2px); filter: brightness(1.06); border-color: color-mix(in srgb, var(--sx) 46%, var(--rule-2)); background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--sx) 20%, transparent), transparent 75%), linear-gradient(180deg, var(--bp-lift), var(--paper-2)); box-shadow: 0 7px 0 var(--dk), 0 15px 18px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .1); }
  .pair-board.bp .pcard.empty:hover .pc-sym { transform: translateY(-4px) rotate(-8deg); } }
.pair-board.bp .pcard.empty:active { transform: translateY(4px); filter: none; box-shadow: 0 1px 0 var(--dk), inset 0 1px 0 rgba(255, 255, 255, .1); }
.pair-board.bp .pcard.empty .pc-sym { flex: none; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 4px; border: 0; border-radius: 50%; background: linear-gradient(180deg, var(--s1), var(--s2)); color: var(--st); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--se), 0 8px 9px rgba(0, 0, 0, .35); transition: transform .18s cubic-bezier(.2, .9, .3, 1.4); }
.pair-board.bp .pcard.empty .pc-sym svg { width: 30px; height: 30px; stroke-width: 2.4; }
.pair-board.bp .pcard.empty > b { font: 600 20px/1.15 var(--serif); font-style: normal; color: var(--ink); }
.pair-board.bp .pc-ready { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bp-well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); font: 500 12.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.pair-board.bp .pc-ready i { font: 700 14px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; color: var(--sx); }
.pair-board.bp .pcard.empty .meta { font: 400 12px/1.35 var(--sans); font-style: normal; color: var(--ink-3); }
.pair-board.bp .pcard.empty .pc-actions { margin: 2px 0 0; padding: 0; border: 0; justify-content: center; }
/* the × between them */
.pair-board.bp .cross { align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bp-well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); font: 400 18px/1 var(--sans); font-style: normal; color: var(--ink-3); }
/* an animal on its slab */
.pair-board.bp .pcard.picked { gap: 6px; padding: 9px 12px 11px; }
/* the picture fills its frame (a little of its empty edge is off the frame); in a shorter frame the animal is drawn smaller, never cut */
.pair-board.bp .pc-pic { position: relative; height: var(--pc-pic-h, 150px); border-radius: 12px; overflow: hidden; background: var(--thumb-bg); }
.pair-board.bp .pc-pic canvas, #view .pair-board.bp .pc-pic canvas { position: absolute; left: 50%; top: -7%; display: block; width: auto; max-width: none; height: 114%; max-height: none; aspect-ratio: 52 / 30; translate: -50% 0; object-fit: fill; border: 0; border-radius: 0; background: none; cursor: pointer; }
.pair-board.bp .pc-role { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 9px 3px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--s1), var(--s2)); color: var(--st); font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 0 var(--se); }
.pair-board.bp .pcard.picked .nm { margin: 3px 0 0; font: 600 16px/1.22 var(--serif); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pair-board.bp .pcard.picked .pc-vis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); }
.pair-board.bp .pcard.picked .pc-facts { font: 500 12px/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pair-board.bp .pcard.picked .pc-facts b { font-weight: 700; color: var(--ink-2); }
.pair-board.bp .pc-genes { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.pair-board.bp .pc-genes > span { display: flex; flex-wrap: wrap; gap: 4px; }
.pair-board.bp .pc-genes .gene { padding: 0 8px; border-radius: 99px; font: 500 10.5px/1.62 var(--sans); white-space: nowrap; }
.pair-board.bp .pc-genes .gene.codom { background: #fff3d6; border-color: #d9a441; color: #7a5410; }
.pair-board.bp .pc-genes .gene.dom { background: #e3edfa; border-color: #6c8fbf; color: #244a7a; }
.pair-board.bp .pc-genes .gene.rec { background: #efe4f7; border-color: #9a6db5; color: #4f2d6b; }
.pair-board.bp .pc-genes .gene.rec.het { background: transparent; border-style: dashed; color: #6a4d80; }
:root[data-theme="dark"] .pair-board.bp .pc-genes .gene.codom { background: #3a2e12; color: #f2cd7a; } :root[data-theme="dark"] .pair-board.bp .pc-genes .gene.dom { background: #172a40; color: #a9c6ea; }
:root[data-theme="dark"] .pair-board.bp .pc-genes .gene.rec { background: #2b1d38; color: #d3b5ea; } :root[data-theme="dark"] .pair-board.bp .pc-genes .gene.rec.het { background: transparent; color: #b99ad0; }
.pair-board.bp .pc-genes .gene.rec.het.unlikely { opacity: .62; border-color: var(--rule-2); color: var(--ink-3); }
.pair-board.bp .pcard .pc-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 7px; border-top: 1px solid var(--rule); }
:root .pair-board.bp .pc-actions button { display: inline-flex; align-items: center; height: 28px; min-height: 0; padding: 0 13px; border: 1px solid var(--rule-2); border-radius: 999px; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); font: 700 12.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
:root .pair-board.bp .pc-actions button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--bp-edge); }
:root .pair-board.bp .pc-actions #bBest { border-color: color-mix(in srgb, #58c176 60%, var(--rule-2)); background: linear-gradient(180deg, color-mix(in srgb, #58c176 30%, var(--bp-lift)), color-mix(in srgb, #58c176 16%, var(--paper-2))); }
:root .pair-board.bp .pc-actions button.quiet { padding: 0 6px; border-color: transparent; background: none; box-shadow: none; color: var(--ink-2); font-weight: 500; }
@media (hover: hover) { :root .pair-board.bp .pc-actions button:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); } :root .pair-board.bp .pc-actions button.quiet:hover { border-color: transparent; text-decoration: underline; } }
/* a short screen: the two pictures give way first, so the ticket and its Pair button fit under the slabs (#1112) */
@media (max-height: 940px) { #panelBody .pair-board.bp { --pc-pic-h: clamp(92px, calc(100vh - 760px), 150px); } }

/* ---- the pair ticket: who goes in (wells), the standing plan, and Pair (a slab) ---- */
#panelBody .pair-ticket, #panelBody .pair-cta { position: sticky; bottom: 8px; z-index: 6; }
:is(#panelBody, #view) .pair-ticket:not(.pairing) { display: grid; grid-template-columns: minmax(0, 1fr) auto 128px; grid-template-rows: 1fr 1fr; gap: 6px 12px; align-items: stretch; margin: 10px 0 4px; padding: 9px; border: 1px solid var(--rule-2); border-radius: 18px; overflow: visible; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2));
  box-shadow: 0 4px 0 var(--bp-edge), 0 12px 20px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08); }
.pair-ticket:not(.pairing) .pt-rows { display: contents; }
.pair-ticket:not(.pairing) .pt-row { --sx: var(--bp-m); grid-column: 1; display: grid; grid-template-columns: 34px 30px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 42px; padding: 3px 13px 3px 4px; border: 1px solid var(--rule); border-radius: 21px; background: var(--bp-well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.pair-ticket:not(.pairing) .pt-row + .pt-row { --sx: var(--bp-f); border-top: 1px solid var(--rule); }
.pair-ticket:not(.pairing) .pt-row canvas { width: 34px; height: 34px; border-radius: 50%; background: var(--thumb-mid); box-shadow: 0 0 0 2px var(--sx); }
.pair-ticket:not(.pairing) .pt-row small { font: 700 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sx); }
.pair-ticket:not(.pairing) .pt-row b { font: 600 12.5px/1.2 var(--sans); color: var(--ink); white-space: normal; overflow-wrap: anywhere; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pair-ticket:not(.pairing) .pt-plan { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; gap: 5px; width: 152px; padding: 0 2px; border: 0; }
.pt-plan > small { font: 700 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pt-plan .pt-plan-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
:root .pt-plan .seg.plan-once { flex: 1 1 100%; box-sizing: border-box; padding: 2px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bp-well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
:root .pt-plan .seg.plan-once button { flex: 1 1 auto; height: 24px; min-height: 0; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 11.5px/1 var(--sans); white-space: nowrap; box-shadow: none; }
:root .pt-plan .seg.plan-once button.on { background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px var(--rule-2); }
:root .pt-plan .pt-plan-ctl > button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; height: 26px; min-height: 0; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); font: 700 12px/1 var(--sans); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
:root .pt-plan .pt-plan-ctl > button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--bp-edge); }
:root .pt-plan .pt-plan-ctl > button:disabled { opacity: .5; box-shadow: none; }
@media (hover: hover) { :root .pt-plan .pt-plan-ctl > button:hover:not(:disabled) { border-color: var(--ink-3); background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); } }
.pt-plan .pt-plan-ctl .tag { margin: 0; }
:root .pair-ticket button.pt-go { grid-column: 3; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: auto; min-height: 0; margin: 0 0 5px; padding: 6px 10px 4px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--bp-go1), var(--bp-go2)); color: var(--bp-got); line-height: 1.05;
  box-shadow: 0 5px 0 var(--bp-goe), inset 0 2px 0 rgba(255, 255, 255, .42); transition: transform .08s, box-shadow .08s, filter .12s; animation: bp-go .42s cubic-bezier(.2, .9, .3, 1.3) both; }
:root .pair-ticket button.pt-go b { font: 800 27px/1 var(--sans); letter-spacing: -.01em; }
:root .pair-ticket button.pt-go span { font: 600 12.5px/1 var(--sans); opacity: .82; }
@media (hover: hover) { :root .pair-ticket button.pt-go:hover { transform: translateY(-2px); filter: brightness(1.07); background: linear-gradient(180deg, var(--bp-go1), var(--bp-go2)); color: var(--bp-got); box-shadow: 0 7px 0 var(--bp-goe), inset 0 2px 0 rgba(255, 255, 255, .42); } }
:root .pair-ticket button.pt-go:active { transform: translateY(4px); filter: none; box-shadow: 0 1px 0 var(--bp-goe), inset 0 2px 0 rgba(255, 255, 255, .42); }
@keyframes bp-go { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
/* not yet: an amber well with the reason; the standing plan stays in reach */
:is(#panelBody, #view) .pair-cta.blocked { align-items: center; gap: 3px; margin: 10px 0 4px; padding: 11px 16px 12px; border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--rule)); border-radius: 18px; background: color-mix(in srgb, var(--amber) 12%, var(--bp-well)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25), 0 10px 18px rgba(0, 0, 0, .25); color: var(--ink-2); text-align: center; }
.pair-cta.blocked .pt-plan { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; width: auto; margin-top: 7px; padding: 8px 0 0; border-top: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); }
.pair-cta.blocked .pt-plan .seg.plan-once { flex: 0 0 auto; } .pair-cta.blocked .pt-plan .pt-plan-ctl > button { flex: 0 0 auto; }
/* while the pairing is sent (pairfx.js): the same bar, in green, with its two pictures and its filling bar */
:is(#panelBody, #view) .pair-ticket.pairing { gap: 16px; min-height: 110px; margin: 10px 0 4px; padding: 11px 20px 12px 18px; border: 0; border-radius: 18px; box-shadow: 0 4px 0 var(--bp-goe), 0 12px 20px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .2); }
.pair-ticket.pairing .ptl-pic { width: 62px; height: 62px; } .pair-ticket.pairing .ptl-rings { width: 30px; height: 30px; margin: 0 -15px; } .pair-ticket.pairing .ptl-rings svg { width: 17px; height: 17px; }
.pair-ticket.pairing .ptl-glow { width: 230px; height: 230px; margin: -115px 0 0 -44px; }
.pair-ticket.pairing .ptl-txt { gap: 2px; } .pair-ticket.pairing .ptl-txt b { font-size: 21px; } .pair-ticket.pairing .ptl-who { gap: 8px; font-size: 13px; } .pair-ticket.pairing .ptl-bar { height: 11px; margin-top: 6px; }

/* ---- the pickers' window: Choose a female, Choose a male, Male for ---- */
#modalBox:has(.pp-tools), #modalBox:has(.mp-list) { display: flex; flex-direction: column; height: 90vh; max-height: 90vh; overflow: hidden; box-sizing: border-box; }
#modalBox:has(.pp-tools) > *, #modalBox:has(.mp-list) > * { flex: none; }
#modalBox:has(.pp-tools) > .pick-list, #modalBox:has(.mp-list) > .mp-list { flex: 1 1 0; min-height: 0; max-height: none; margin-top: 12px; }
/* the head: a coin in her colour or his, the title, the counts in wells, who she is, Close */
.pp-head, .pp-sheet-head { --sx: var(--bp-m); --s1: var(--bp-m1); --s2: var(--bp-m2); --se: var(--bp-me); --st: var(--bp-mt); align-items: center; gap: 13px; }
.pp-head.f, .pp-sheet-head.f { --sx: var(--bp-f); --s1: var(--bp-f1); --s2: var(--bp-f2); --se: var(--bp-fe); --st: var(--bp-ft); }
.pp-coin { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--s1), var(--s2)); color: var(--st); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 0 var(--se), 0 5px 6px rgba(0, 0, 0, .35); }
.pp-coin svg { width: 23px; height: 23px; stroke-width: 2.4; }
.pp-head .pp-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pp-head .pp-t h2 { margin: 0; white-space: nowrap; }
.pp-head .pp-trow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pp-well { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bp-well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); font: 500 12px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.pp-well b { font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pp-well.ok b { color: var(--bp-ev); }
.pp-head .pp-working { font: italic 500 12px/1 var(--sans); color: var(--ink-3); }
.pp-with { flex: 0 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 340px; padding: 5px 13px 5px 5px; border: 1px solid var(--rule); border-radius: 13px; background: var(--bp-well); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); text-align: left; }
.pp-with canvas { flex: none; width: 64px; height: 37px; border-radius: 8px; background: var(--thumb-bg); box-shadow: 0 0 0 2px var(--bp-f); }
.pp-with > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-with small { font: 700 9.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bp-f); }
.pp-with b { font: 600 12px/1.25 var(--sans); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-with i { font: 500 11.5px/1.25 var(--sans); font-style: normal; color: var(--bp-het); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-trow .pp-with { max-width: 560px; } .pp-trow .pp-with b { font-size: 13px; -webkit-line-clamp: 1; }
:root .pp-head #ppClose, :root .pp-head #mpClose { flex: none; height: 36px; min-height: 0; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); font: 700 13px/1 var(--sans); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
:root .pp-head #ppClose:active, :root .pp-head #mpClose:active { transform: translateY(2px); box-shadow: 0 0 0 var(--bp-edge); }
/* the tools: the search is a well that takes the room; sort, Ready only and the views are raised, the one that is on pressed in */
#modalBox .pp-tools { flex-wrap: nowrap; gap: 8px; margin-top: 13px; }
#modalBox .pp-tools .gq-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
#modalBox .pp-tools .gq-row .bsearch, #modalBox .mp-tools .bsearch { flex: 1 1 auto; min-width: 0; width: auto; height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bp-well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); font-size: 13.5px; }
#modalBox .pp-tools select { height: 38px; padding: 0 30px 0 13px; border: 1px solid var(--rule-2); border-radius: 12px; background-color: var(--paper-2); color: var(--ink); font: 600 13px/1 var(--sans); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); }
:root #modalBox .pp-ready, :root #modalBox .mp-tools .chip { flex: none; height: 38px; min-height: 0; padding: 0 15px; border: 1px solid var(--rule-2); border-radius: 12px; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); font: 600 13px/1 var(--sans); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
:root #modalBox .pp-ready.on, :root #modalBox .mp-tools .chip.on { transform: translateY(2px); border-color: #2f7f48; background: #2f7f48; color: #fff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
#modalBox .pp-views { flex: none; box-sizing: border-box; height: 38px; padding: 3px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bp-well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
:root #modalBox .pp-views button { height: 30px; padding: 0 14px; border-radius: 9px; font: 600 12.5px/1 var(--sans); color: var(--ink-2); }
:root #modalBox .pp-views button.on { background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px var(--rule-2); }
/* a card: raised, its picture, its whole morph on up to three lines, hets on their own line, its weight and age, its value */
#modalBox .pick-list.pp-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px 10px; padding: 3px 4px 10px 2px; align-content: start; }
@media (max-width: 1100px) { #modalBox .pick-list.pp-cards { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); } }
#modalBox button.pk, :root[data-theme="dark"] #modalBox button.pk { --sx: var(--bp-m); --se: var(--bp-me); position: relative; display: flex; flex-direction: column; gap: 0; padding: 5px 5px 0; border: 1px solid var(--rule-2); border-radius: 13px; overflow: visible; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); box-shadow: 0 3px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
#modalBox .pick-list.pp-f button.pk, #modalBox .pick-list.pp-f button.pkr { --sx: var(--bp-f); --se: var(--bp-fe); }
@media (hover: hover) { #modalBox button.pk:hover { transform: translateY(-2px); border-color: var(--sx); box-shadow: 0 5px 0 var(--bp-edge), 0 8px 12px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .07); } }
#modalBox button.pk:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bp-edge); }
#modalBox button.pk.on { border-color: var(--sx); box-shadow: 0 0 0 2px var(--sx), 0 3px 0 2px var(--se); }
#modalBox .pk .pk-pic { position: relative; display: block; border-radius: 9px; overflow: hidden; background: var(--thumb-bg); }
#modalBox .pk .pk-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 52 / 26; object-fit: cover; background: none; }
#modalBox .pk.notyet .pk-pic canvas { opacity: .5; filter: saturate(.6); }
#modalBox .pk .pk-why { left: 6px; bottom: 6px; max-width: calc(100% - 12px); box-sizing: border-box; padding: 2px 8px; border-radius: 99px; background: rgba(20, 18, 15, .84); color: #ffd7a6; font: 600 11px/1.5 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modalBox .pk.on .pk-pic::after { content: 'Picked'; position: absolute; right: 6px; top: 6px; padding: 3px 9px 2px; border-radius: 99px; background: linear-gradient(180deg, #62e58a, #25b352); color: #06310f; font: 700 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 0 #0e6e2e; }
#modalBox .pk .mb { flex: 1 1 auto; gap: 3px; padding: 8px 5px 0; }
#modalBox .pk .mb-name { font: 700 13px/1.28 var(--sans); overflow-wrap: anywhere; -webkit-line-clamp: 3; }
#modalBox .pk .mb-vis { font: 500 12px/1.3 var(--sans); -webkit-line-clamp: 2; }
#modalBox .pk .mb-het, #modalBox .pkr .mb-het, #modalBox .mp-row .mb-het { font: 500 11.5px/1.3 var(--sans); color: var(--bp-het); -webkit-line-clamp: 2; }
#modalBox .mb-het i { color: var(--ink-3); opacity: 1; }
#modalBox .pk .pk-adv { padding: 3px 5px 0; }
#modalBox .pk .pk-meta { align-items: center; flex-wrap: nowrap; gap: 6px; margin: 8px -5px 0; padding: 7px 10px 8px; border-top: 1px solid var(--rule); border-radius: 0 0 12px 12px; background: color-mix(in srgb, var(--bp-well) 55%, transparent); font: 500 11px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
#modalBox .pk .pk-meta > :last-child { font: 700 12.5px/1.2 var(--sans); color: var(--bp-gold); }
#modalBox .pk .pk-meta > .evtag { color: var(--bp-ev); }
/* List and Table: rows in the same clothes; a female list has no Clutch column, so its Status sits under its heading */
#modalBox .pick-list.pp-list, #modalBox .pick-list.pp-table { border-color: var(--rule-2); border-radius: 13px; background: color-mix(in srgb, var(--bp-well) 45%, transparent); }
#modalBox .pick-list.pp-f.pp-list .pkr, #modalBox .pick-list.pp-f.pp-list .pkr:not(.pkr-h) { grid-template-columns: 96px minmax(0, 1fr) 76px 64px 72px 110px; }
#modalBox .pick-list.pp-f.pp-table .pkr, #modalBox .pick-list.pp-f.pp-table .pkr:not(.pkr-h) { grid-template-columns: 48px minmax(0, 1fr) 76px 64px 72px 110px; }
#modalBox .pkr canvas { background: var(--thumb-bg); }
#modalBox .pkr .mb-name { font-weight: 700; } #modalBox .pp-list .pkr .mb-name { -webkit-line-clamp: 2; }
#modalBox .pkr > .pkr-n:nth-last-child(2):not(.evtag), #modalBox .pick-list.pp-f .pkr > .pkr-n:nth-last-child(2) { color: var(--bp-gold); font-weight: 500; }
#modalBox .pkr .evtag { color: var(--bp-ev); }
#modalBox .pkr.on, :root[data-theme="dark"] #modalBox .pkr.on { box-shadow: inset 4px 0 0 var(--sx); }
#modalBox .pkr-h { background: var(--paper); }
/* "Male for": her in a well beside the title; a raised row a male, with his picture */
#modalBox .mp-head .meta { margin: 0; }
#modalBox:has(.mp-list) .mp-once { margin: 14px 2px 0; gap: 10px; }
:root #modalBox .mp-once .seg { padding: 3px; border: 1px solid var(--rule); border-radius: 11px; background: var(--bp-well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
:root #modalBox .mp-once .seg button { height: 28px; min-height: 0; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 12px/1 var(--sans); }
:root #modalBox .mp-once .seg button.on { background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--ink); box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px var(--rule-2); }
#modalBox .mp-tools { gap: 8px; margin-top: 10px; }
#modalBox .mp-list { gap: 7px; border-top: 0; padding: 3px 5px 10px 2px; }
#modalBox .mp-row, :root[data-theme="dark"] #modalBox .mp-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 0 13px; align-items: center; padding: 6px 15px 6px 6px; border: 1px solid var(--rule-2); border-radius: 13px; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); box-shadow: 0 3px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
@media (hover: hover) { #modalBox .mp-row:hover:not(:disabled), :root[data-theme="dark"] #modalBox .mp-row:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--bp-m); background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); } }
#modalBox .mp-row:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--bp-edge); }
#modalBox .mp-row.on, :root[data-theme="dark"] #modalBox .mp-row.on { border-color: #2f7f48; box-shadow: 0 0 0 2px #3fa860, 0 3px 0 2px #17512b; }
#modalBox .mp-row:disabled { opacity: .5; box-shadow: none; }
.mp-pic { display: block; width: 100px; height: 58px; border-radius: 9px; overflow: hidden; background: var(--thumb-bg); }
.mp-pic canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
#modalBox .mp-row .mp-main { gap: 3px; text-align: left; }
#modalBox .mp-row .mp-l1 .mb { flex: 0 1 auto; gap: 2px; }
#modalBox .mp-row .mp-l1 .mb-name { font: 700 13.5px/1.25 var(--sans); -webkit-line-clamp: 2; }
#modalBox .mp-row .mp-l2 { font: 500 11.5px/1.3 var(--sans); color: var(--ink-3); }
#modalBox .mp-row .mp-val { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#modalBox .mp-row .mp-val .evtag { min-width: 0; font: 700 15px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--bp-ev); }
#modalBox .mp-row .mp-val small { font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* Pair now (#1418): the board's raised pill (Best match), with the go colour on its words, inside the card's right edge */
:root #modalBox .mp-pairnow, :root body.mobile .mp-list-m .mp-pairnow { display: inline-flex; align-items: center; height: 30px; min-height: 0; padding: 0 13px; border: 1px solid var(--rule-2); border-radius: 999px; background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--bp-ev); font: 700 12.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 2px 0 var(--bp-edge), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s; }
:root #modalBox .mp-item > .mp-pairnow { position: absolute; left: 119px; bottom: 9px; }
/* (#1418 round 3) it sits under the male's text, in the card's middle column, so the clutch value keeps the same x on
   every row, button or not. The card grows by one line to hold it: 6px pad + 100px picture + 13px gap = 119px. */
:root #modalBox .mp-item.can-pair > .mp-row, :root[data-theme="dark"] #modalBox .mp-item.can-pair > .mp-row { padding-bottom: 46px; }
:root #modalBox .mp-pairnow:active, :root body.mobile .mp-list-m .mp-pairnow:active { transform: translateY(2px); box-shadow: 0 0 0 var(--bp-edge); }
@media (hover: hover) { :root #modalBox .mp-pairnow:hover { border-color: var(--bp-ev); background: linear-gradient(180deg, var(--bp-lift), var(--paper-2)); color: var(--bp-ev); } }
:root body.mobile .mp-list-m .mp-pairnow { height: 34px; margin-top: 8px; } /* its own line at the foot of the card's text, clear of the value */

/* ---- the phone ---- */
body.mobile .bhint.bp-note { margin: 0 0 4px; font-size: 12.5px; }
body.mobile .pair-board.bp { gap: 9px; }
#view .pair-board.bp .pcard.empty { min-height: 190px; gap: 7px; padding: 14px 8px 16px; }
body.mobile .pair-board.bp .pcard.empty .pc-sym { width: 56px; height: 56px; } body.mobile .pair-board.bp .pcard.empty .pc-sym svg { width: 27px; height: 27px; }
body.mobile .pair-board.bp .pcard.empty > b { font: 600 16.5px/1.15 var(--serif); }
body.mobile .pair-board.bp .pcard.empty .meta { font-size: 11.5px; }
body.mobile .pair-board.bp .pcard.picked { padding: 8px 8px 10px; }
body.mobile .pair-board.bp .pc-pic { height: 92px; }
body.mobile .pair-board.bp .pcard.picked .nm { font-size: 13.5px; -webkit-line-clamp: 4; }
:root body.mobile .pair-board.bp .pc-actions button { height: 34px; }
#view .pair-ticket:not(.pairing) { grid-template-columns: minmax(0, 1fr) 92px; grid-template-rows: auto auto auto; gap: 6px 9px; }
body.mobile .pair-ticket:not(.pairing) .pt-plan { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: auto; padding: 3px 2px 0; }
body.mobile .pair-ticket:not(.pairing) .pt-plan .seg.plan-once { flex: 0 1 auto; } body.mobile .pair-ticket:not(.pairing) .pt-plan .seg.plan-once button { height: 32px; padding: 0 12px; font-size: 13px; }
body.mobile .pair-ticket:not(.pairing) .pt-plan .pt-plan-ctl { flex: 1 1 auto; flex-wrap: nowrap; } body.mobile .pair-ticket:not(.pairing) .pt-plan .pt-plan-ctl > button { flex: 0 0 auto; height: 34px; padding: 0 16px; font-size: 13px; }
:root body.mobile .pair-ticket button.pt-go { grid-column: 2; grid-row: 1 / 3; width: auto; }
#view .pair-ticket.pairing { min-height: 150px; padding: 14px 16px; }
/* the phone's Choose a female / male sheet and its Male for sheet: the whole name, hets on their own line, the value */
body.mobile .pp-list .row-card .t, body.mobile .mp-list-m .row-card .t { white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.25; }
body.mobile .pp-list .row-card { align-items: flex-start; border-radius: 13px; box-shadow: 0 3px 0 var(--bp-edge); }
body.mobile .pp-list .row-card canvas { width: 96px; height: 55px; border-radius: 9px; }
body.mobile .pp-list .row-card .pp-het, body.mobile .mp-list-m .row-card .pp-het { margin-top: 1px; font: 500 12px/1.3 var(--sans); color: var(--bp-het); }
body.mobile .pp-list .row-card .pp-het i, body.mobile .mp-list-m .row-card .pp-het i { font-style: normal; color: var(--ink-3); }
body.mobile .pp-list .row-card .pp-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 3px; font: 500 12px/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
body.mobile .pp-list .row-card .pp-facts b { font-weight: 700; color: var(--bp-gold); } body.mobile .pp-list .row-card .pp-facts b.ev { color: var(--bp-ev); }
body.mobile .pp-list .row-card.on { box-shadow: 0 0 0 2px var(--bp-f), 0 3px 0 2px var(--bp-fe); } body.mobile .pp-list.pp-m .row-card.on { box-shadow: 0 0 0 2px var(--bp-m), 0 3px 0 2px var(--bp-me); }
body.mobile .pp-list .row-card.notyet canvas { opacity: .5; }
body.mobile .pp-sheet-head { display: flex; align-items: center; gap: 11px; margin: 0 44px 2px 0; }
body.mobile .pp-sheet-head .pp-coin { width: 38px; height: 38px; } body.mobile .pp-sheet-head .pp-coin svg { width: 20px; height: 20px; }
body.mobile .pp-sheet-head .name { margin: 0; }
body.mobile .pp-counts { margin: 6px 0 2px; }
body.mobile .pp-with { max-width: none; margin: 8px 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .pair-board.bp .pcard, .pair-board.bp .pcard .pc-sym, .pair-board.bp .pc-actions button, .pair-ticket button.pt-go, .pt-plan .pt-plan-ctl > button, #modalBox button.pk, #modalBox .mp-row, .pp-head button, #modalBox .pp-ready, #modalBox .mp-tools .chip, #modalBox .mp-pairnow, body.mobile .mp-list-m .mp-pairnow { transition: none !important; animation: none !important; }
}