/* THE PROFILE — "the trainer card" (HANDOFF-156; docs/PLAN-PROFILE-9SEP.md
   direction B, Luke's pick 9 Sep). A plate on the left that reads as one
   shareable object — the customer's own card as their picture, name, rank,
   the four counts, the biggest pull — and three NAMED shelves on the right
   you scroll past: STILL IN THE VAULT, KANTO POKÉDEX, EVERY RIP. Named
   shelves rather than tabs on purpose: what someone still OWNS and what they
   have CAUGHT are different sets (a catch survives the sale), and a tab hides
   two of the three.

   Everything wears the stage sheet's own skin — the sky panel, white tiles
   with the key outline and the hard drop, the pink accent, Barlow
   Condensed italic — so nothing here defines a colour the sheet does not
   already use. Both shells: below 1024 the plate stacks above the shelves
   and the sheet is the stage's bottom card. */

.ov--profile .ov__panel{width:min(1040px,100%);max-height:100%}
.ov--profile .ov__body{padding:22px 26px 22px;overflow:auto;position:relative;z-index:1}
/* the stage fades the body's top 64px (stage.css, mask-image) — the plate's
   pink band and the first shelf title sit there. The odds sheet turns it off
   with this exact selector; specificity needs the html prefix. */
html[data-layout="stage"] .ov--profile .ov__body{-webkit-mask-image:none;mask-image:none}
/* ON A PAGE IT FADES INSTEAD OF CUTTING (Luke, 11 Sep 01:55 and again 06:29:
   "as you start scrolling the Your Profile page, it cuts out behind the header.
   I'm thinking it should fade behind it slightly"; "I don't like how, on the
   profile page, it just all cuts behind the header at the top. There should be
   a fade there").
   The rule above is right for the SHEET — the stage's 64px ramp ate the plate's
   pink band and the first shelf title — but a page is a different geometry, so
   it is put back here for [data-page] only, at the 14px feather he picked on
   7 Sep ("option C", page.css:197).
   It keys off the BODY'S OWN TOP EDGE, not --pg-hdr: .ov--profile is a
   .pg--panel, so its body already starts below the header rather than behind
   it, and a mask offset by the header band would feather 62px down the page
   where nothing is passing under anything. The bottom 40px matches the ramp the
   other scrollers wear.
   AND IT IS 0 AT REST. The ramp follows the scroll — profile.js setFade writes
   --pf-fade from scrollTop, clamped to 14 — because this body has no top
   padding at stage, so a fixed ramp dimmed the top of the plate before anything
   had moved. Luke caught that on the clan panel (11 Sep 07:11) and asked
   whether it was wrong anywhere else; it was wrong here. At 0 every stop
   collapses and the mask is opaque from the body's own edge. */
html[data-layout="stage"][data-page] .pg.ov--profile .ov__body{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) calc(var(--pf-fade,0px) / 2),#000 var(--pf-fade,0px),#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) calc(var(--pf-fade,0px) / 2),#000 var(--pf-fade,0px),#000 calc(100% - 40px),transparent 100%)}

/* VIEW ALL SITS NEXT TO THE TITLE ON THESE TWO (Luke, 11 Sep 06:29: "for the
   'Your Friends' section, it should say 'Your Friends', then a number, and then
   'View All' ... for the 'Still in Vault' section it should stay 'Still in
   Vault', and then 'View All' should just be on the right of the text. All the
   other 'View All' buttons are fine and in the right place").
   .pf-all's margin-left:auto (:140) inside a space-between row is what threw it
   to the far edge. Only these two shelves are pulled back in; Kanto Pokédex and
   Every Rip keep theirs exactly where they are. The friends count is already
   inside the h3 (friends.js:201), so the order reads title, number, button. */
.pf-shelf--friends .pf-shelf__h,
.pf-shelf--vault .pf-shelf__h{justify-content:flex-start}
.pf-shelf--friends .pf-shelf__h .pf-all,
.pf-shelf--vault .pf-shelf__h .pf-all{margin-left:0}
/* BACK, top-left (Luke, 10 Sep 01:52): a sticker as a rectangle, in the 66px
   between the sheet's top and the plate, so nothing on the page moves. It
   returns to wherever the profile was opened from (profile.js `back`); in a
   View-all it returns to the profile. Round 2 (10 Sep 04:20, §3.17) moved it
   from 20px to 12px. It was level with an X until round 3 removed that — a
   page has no X (Luke, 10 Sep: "surely you don't need the X at the top") — and
   on a page page.css re-pins this one into the band under the header. */
/* the BACK button's skin (the banner's top-left on the desktop, the floating pair on a phone) */
.ov--profile .pf-nav{position:static;flex:0 0 auto;height:40px;padding:0 14px 0 9px;display:inline-flex;align-items:center;gap:5px;background:#fff;border:2.5px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);color:var(--key);font:900 15px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;line-height:1}
.ov--profile .pf-nav svg{width:20px;height:20px}
.ov--profile .pf-nav:hover{background:var(--yellow,#FDC107)}
.ov--profile .pf-nav:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}

/* The page is the FULL content column — it tracks --sl-rail so a collapsed nav widens it */
html[data-layout="stage"] .pg.ov--profile[data-pf-layout]{
  /* page.js pins left to .sl-side.right (always 242px). Use visual rail footprint instead. */
  left:var(--sl-rail,242px)!important;
  right:0!important;
  width:auto!important
}
html[data-layout="stage"] .pg.ov--profile[data-pf-layout] .ov__panel,
.ov--profile[data-pf-layout] .ov__panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important
}
.ov--profile[data-pf-layout] .ov__body{
  padding-left:clamp(14px,1.6vw,22px);
  padding-right:clamp(14px,1.6vw,22px);
  padding-bottom:18px
}
.pf-alt{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  box-sizing:border-box
}

/* THE GRID (Luke, 9 Sep 22:00): the plate spans the left column; the Pokédex's
   FIRST row sits beside its foot (align-self:end, so its bottom IS the plate's
   bottom — HANDOFF-167 §1b, measured again in FE-A-NOTES-R2), and from the
   Pokédex's second row on everything runs edge to edge.
   ROUND 2 (Luke, 10 Sep 04:20, §3.9: "put one row of friends right at the top
   above STILL IN THE VAULT. Do not move the Pokédex section down or touch it in
   any way. Move the vault down and make the vaulted slabs smaller if you have
   to."): column 2 is three rows — FRIENDS at the top (auto), STILL IN THE VAULT
   in the leftover (1fr, centred in it), the Pokédex row at the foot (auto). The
   plate spans all three. profile.js fitRows() shrinks the vault slab when the
   three would outgrow the plate, so the Pokédex row never moves. Without a
   Pokédex shelf the friends and vault rows alone sit beside the plate. */

/* FRIENDS, row 1: profile.js paints the shelf's frame with the tiles' height
   reserved (.fr-grid--wait), friends.js fills it, so the grid never jumps */

   /* the sheet's X sits over this corner */

/* THE TITLE AND THE ROW CENTRE TOGETHER (Luke, 10 Sep 01:11: the VIEW ALL
   button sat on the first card). The row alone used to centre under a header
   pinned to the top, so the slack opened between them: measured 15px header
   to tile against the Pokédex's 8 at 1147x655 (21 vs 10 at 1512x982). A
   translateY on the header in record.css closed the title gap but carried
   VIEW ALL down onto the tiles (0px). Now the header takes the slack above
   it and the row the slack below, so header-to-tile is the shelf margin's
   10px, the same as the Pokédex row's, and VIEW ALL keeps that gap too. */

/* the breathing room around the vault row is symmetric, so its centre is the
   centre of the space between the sheet's top and the Pokédex header */

/* the clips band (record.css .pf-shelf--rec, FE-C's) sits between the Pokédex
   and EVERY RIP; its own rows were written for the old order, so they are
   restated here at the doubled specificity record.css's rules do not reach */

/* THE SMALLER SLAB (round 2): when the friends row, the vault row and the
   Pokédex row would outgrow the plate, fitRows() narrows the vault's tiles and
   folds each to one name line and one facts line, so the Pokédex row stays put */

/* ---- the plate -------------------------------------------------------- */

.pf-av{position:relative;width:92px;height:92px;margin:18px auto 0;border-radius:22px;border:3px solid var(--key);background:#fff;overflow:hidden;box-shadow:0 4px 0 var(--key);display:grid;place-items:center}
/* THE PICTURE IS THE CARD'S ART, NOT THE SLAB'S LABEL: every slab's top is the
   grader's label, so two picks looked identical (Luke, 22:21). The rules are
   scoped to the picture's own class — the badge is an img in the same box and
   an unscoped `.pf-av img` sized IT to the box and hid the picture behind it. */
.pf-av img.pf-av__img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.6);transform-origin:50% 58%}
.pf-av__letter{font:900 44px var(--display);font-style:italic;color:#fff;-webkit-text-stroke:3px var(--key);paint-order:stroke fill}
.pf-av img.pf-badge{position:absolute;right:-8px;bottom:-8px;width:34px;height:34px;object-fit:contain;transform:none;z-index:1;filter:drop-shadow(0 2px 0 rgba(11,15,24,.35))}
.pf-name{text-align:center;margin:12px 0 0;font:900 34px/1 var(--display);font-style:italic;color:#fff;-webkit-text-stroke:3px var(--key);paint-order:stroke fill;letter-spacing:.01em;overflow-wrap:anywhere}
.pf-name small{font-size:.62em;-webkit-text-stroke:3px var(--key);color:var(--acc-hi)}

.pf-tier{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border:2px solid var(--key);border-radius:999px;background:#fff;font:900 13px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em}
.pf-tier img{width:18px;height:18px}
.pf-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.pf-stat{display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;padding:7px 10px;min-width:0}
.pf-stat b{display:block;font:900 22px/1 var(--display);font-style:italic;color:var(--key);letter-spacing:.01em}
/* `/151` rides the number's own line (Luke, 22:31: the four tiles were different
   sizes because an unscoped `span` rule made it a block label) */
.pf-stat b .pf-of{display:inline;margin:0;font:inherit;font-size:.55em;letter-spacing:0;text-transform:none;color:#3A4354;font-weight:800}
.pf-stat>span{display:block;margin-top:4px;font:800 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#3A4354}
.pf-stat--pts b{display:flex;align-items:center;gap:6px}

.pf-share{margin:14px 0 0;display:flex;gap:8px}
.pf-btn{flex:1;padding:11px 10px;border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);font:900 16px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:linear-gradient(180deg,var(--acc-hi),var(--acc) 48%,var(--acc-lo));text-align:center;cursor:pointer}
.pf-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.pf-btn--ghost{background:#fff;color:var(--key)}
.pf-btn.is-on{background:var(--yellow,#FDC107);color:var(--key)}
.pf-url{margin:10px 0 0;text-align:center;font:700 12px var(--ui);color:#3A4354;min-height:1.2em}

/* ---- the shelves ------------------------------------------------------ */
.pf-shelf{margin:0 0 18px}
.pf-shelf__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.pf-shelf__h h3{margin:0;font:900 24px/1 var(--display);font-style:italic;text-transform:uppercase;color:var(--key);letter-spacing:.02em}
.pf-shelf__h h3 b{color:var(--acc);font-weight:inherit}
.pf-shelf__h span{font:800 13px var(--ui);color:#0B0F18}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
   /* the count is measured in profile.js (fitRows); this is the first paint */
.pf-all{margin-left:auto;padding:6px 12px;background:#fff;border:2px solid var(--key);border-radius:10px;box-shadow:0 3px 0 var(--key);font:900 13px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--key);cursor:pointer;white-space:nowrap}
.pf-all:hover{background:var(--yellow,#FDC107)}
.pf-all:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.pf-card{position:relative;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);padding:8px 8px 9px;min-width:0;text-align:left;font:inherit;color:inherit;cursor:zoom-in}
.pf-card img{display:block;width:100%;aspect-ratio:.62;object-fit:contain;border-radius:6px;background:#EEF3FA}
.pf-card__nm{margin:7px 0 0;font:800 12px/1.25 var(--ui);color:var(--key);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
/* the value sits on its own line ABOVE the grade and Held chips (10 Sep, the
   record session, folded in from record.css): three items did not fit one
   118px row and the value was clipped */
.pf-card__row{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap;row-gap:4px}
.pf-card__row .pf-card__v{order:-1;flex:0 0 100%;margin-left:0;font-size:16px;line-height:1}
.pf-chip{font:800 10px var(--ui);color:var(--key);border:2px solid var(--key);border-radius:7px;padding:1px 6px;background:#fff;white-space:nowrap}
.pf-chip--held{background:var(--acc);color:#fff}
.pf-chip--best{background:var(--yellow,#FDC107)}
.pf-card__v{margin-left:auto;font:900 14px var(--display);font-style:italic;color:var(--acc-lo)}
.pf-dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.pf-dex--row{grid-template-columns:repeat(6,minmax(0,1fr))}
.pf-mon{background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);padding:6px 6px 7px;text-align:center}
.pf-mon img{width:100%;aspect-ratio:1;object-fit:contain}
.pf-mon--off img{filter:brightness(0) opacity(.28)}
.pf-mon__no{font:800 10px var(--ui);letter-spacing:.1em;color:#3A4354}
.pf-mon__nm{font:900 14px var(--display);font-style:italic;color:var(--key);text-transform:uppercase;min-height:1.2em}
.pf-bar{height:12px;border:2px solid var(--key);border-radius:999px;background:#fff;overflow:hidden;margin:8px 0 0}
.pf-bar i{display:block;height:100%;background:linear-gradient(180deg,var(--acc-hi),var(--acc-lo))}
.pf-note{margin:12px 0 0;font:600 13px/1.4 var(--ui);color:#3A4354}
.pf-note b{color:var(--key)}
.pf-row{display:grid;grid-template-columns:64px minmax(0,1.15fr) minmax(0,1fr) auto;grid-template-rows:auto;gap:0 16px;align-items:center;background:rgba(255,255,255,.88);border:2px solid var(--key);border-radius:12px;padding:8px 14px 8px 8px;margin:0 0 8px;width:100%;text-align:left;font:inherit;color:inherit;cursor:zoom-in}
.pf-row__img{width:64px;aspect-ratio:.62;object-fit:contain;border-radius:6px;background:#EEF3FA}
.pf-row__n{font:800 17px/1.15 var(--ui);color:var(--key);min-width:0}
.pf-row__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* the clamp is the name's alone; the date line always shows */
.pf-row__n small{display:block;margin-top:5px;font:700 13px/1.3 var(--ui);color:#3A4354}
.pf-row__f{display:grid;grid-template-columns:118px 96px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.pf-row__c{display:flex;justify-content:center;align-items:center;gap:6px;min-width:0}
.pf-row__c--mon{justify-content:flex-start}
.pf-row__f .pf-chip{font-size:12px;padding:3px 9px}
.pf-chip--r{text-transform:capitalize}
.pf-chip--rare{background:#DDEBFF}
.pf-chip--epic{background:#E9DDFF}
.pf-chip--legendary{background:var(--yellow,#FDC107)}
.pf-row__mon{display:inline-flex;align-items:center;gap:6px;font:900 13px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.03em;color:var(--key);white-space:nowrap}
.pf-row__mon img{width:34px;height:34px;object-fit:contain}
.pf-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pf-row__st{font:900 13px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.05em;padding:4px 11px;border:2px solid var(--key);border-radius:8px;background:#fff;color:var(--key)}
.pf-row__st--held{background:var(--acc);color:#fff}
.pf-row__st--turbo{display:inline-flex;align-items:center;gap:5px}
.pf-row__bolt{width:9px;height:12px;flex:0 0 auto}
.pf-row__v{font:900 19px/1 var(--display);font-style:italic;color:var(--acc-lo);text-align:right}
.pf-row__v small{display:block;margin-top:3px;font:700 12px var(--ui);color:#3A4354;font-style:normal}
.pf-row--sold .pf-row__v{color:#3A4354}
.pf-more{display:block;margin-top:10px;margin:4px auto 0;padding:8px 18px;background:#fff;border:2px solid var(--key);border-radius:10px;box-shadow:0 3px 0 var(--key);font:900 14px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--key);cursor:pointer}

/* ---- the views: VIEW ALL opens the same sheet with one thing in it ---- */
.pf-view .pf-shelf__h{padding-right:58px;margin-bottom:14px}
.pf-view .pf-shelf__h h3{display:flex;align-items:center;gap:10px}
.pf-back{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:2px solid var(--key);border-radius:10px;box-shadow:0 3px 0 var(--key);color:var(--key);cursor:pointer;padding:0}
.pf-back svg{width:20px;height:20px}
.pf-back:hover{background:var(--yellow,#FDC107)}
.pf-view .pf-bar{margin:0 0 14px}
.pf-dex--all{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
/* TOP: sticks to the sheet's bottom edge once the plate has scrolled away */
.pf-top{position:sticky;bottom:6px;margin:14px 0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;background:#fff;border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);font:900 14px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--key);cursor:pointer;z-index:2}
.pf-top svg{width:18px;height:18px}
.pf-top[hidden]{display:none}

/* a landscape slab photo, turned upright inside the card's own box */
.pf-card,
.pf-row__img{overflow:hidden}
/* the partner lays a slab with its label to the RIGHT (Luke's Frienda Pikachu), so the turn is anticlockwise */
.pf-card img.is-land,
.pf-row__img.is-land{transform:rotate(-90deg) scale(1.61)}
.pf-card{overflow:hidden}
.pf-av img.pf-av__img.is-land{transform:rotate(-90deg) scale(1.6);object-position:42% 50%}

/* ---- picking the picture: every card grows a target ------------------- */
.ov--profile[data-pick="1"] .pf-card,
.ov--profile[data-pick="1"] .pf-row{cursor:pointer;border-style:dashed;border-color:var(--acc);box-shadow:0 3px 0 var(--acc)}
.pf-pick{margin:8px 0 12px;padding:8px 12px;background:var(--yellow,#FDC107);border:2px solid var(--key);border-radius:10px;font:800 13px var(--ui);color:var(--key)}

/* ---- the social wave (10 Sep 2026, FE-A): clan on the plate, the friend
   button, the friend banner, the FRIENDS shelf, the picture chooser ------ */
/* an uploaded photo is shown whole and centred; only a card's art is zoomed */
.pf-av img.pf-av__img.pf-av__img--photo{transform:none;object-position:center}
/* the clan chip to the right of the username (Luke: "the clan badge appears
   to the right of your username on the profile") */

/* "Member of FOMO": the membership line under the stats, into the clan page */

/* the achievements strip's mount (achievements.js, FE-D2, round 2) sits after the stats; its skin is achievements.css's */
.pf-ach[hidden]{display:none}
/* the friend button on someone else's plate (friends.js paints it) */
.pf-share--friend[hidden]{display:none}
.fr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.fr-btn svg{width:18px;height:18px;flex:0 0 auto}
.fr-btn--sm{flex:0 0 auto;padding:9px 12px;font-size:14px}
.fr-ask{flex:1 1 auto;align-self:center;font:800 13px var(--ui);color:var(--key)}
/* the banner over the plate: this person asked you something */
.pf-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:46px 0 16px;padding:10px 14px;background:var(--yellow,#FFFE9A);border:2.5px solid var(--key);border-radius:14px;box-shadow:0 4px 0 var(--key)}
.pf-banner p{margin:0;font:600 15px/1.35 var(--ui);color:var(--key)}
.pf-banner p b{font-weight:800}
.pf-banner__b{display:flex;gap:8px;flex:0 0 auto}
.pf-banner .nf-pill{background:#fff;color:var(--key);height:32px;font-size:14px}
.pf-banner .nf-pill--yes{background:linear-gradient(180deg,var(--acc-hi),var(--acc) 48%,var(--acc-lo));color:#fff}
/* the FRIENDS shelf's place in the grid is set with the grid above (round 2: row 1 of column 2) */
/* the count rides the title's own face: .pf-shelf__h span (13px) would otherwise shrink it */
.pf-shelf__h h3 .fr-count{font:inherit;color:var(--acc)}
/* THE FRIENDS VIEW (round 2, §3.19: "the VIEW ALL list has blank rows"): one row
   a person — the face, the name and clan chip; then the facts (rank badge and
   tier, species n/151, Rip Points, friends since); then VIEW / TRADE, and
   REMOVE behind a confirm on your own list. Data per BRIEF-CONTEXT-R2 §3b. */
.fr-list{display:flex;flex-direction:column;gap:8px}
.fr-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto;align-items:center;gap:14px;background:rgba(255,255,255,.88);border:2px solid var(--key);border-radius:12px;padding:8px 12px 8px 8px}
.fr-row__who{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.fr-row__id{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.fr-row__n{font:800 17px/1.1 var(--ui);color:var(--key);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fr-row__who:hover .fr-row__n{color:var(--acc)}
.fr-row__facts{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;min-width:0}
.fr-fact{display:inline-flex;align-items:center;gap:5px;font:700 13px var(--ui);color:#3A4354;white-space:nowrap}
.fr-fact b{font:900 16px/1 var(--display);font-style:italic;color:var(--key);font-variant-numeric:tabular-nums}
.fr-fact small{font:800 12px var(--ui);color:#3A4354}
/* "42/151" is one word: the shelf's 5px gap falls either side of it, never inside it */
.fr-n{display:inline-flex;align-items:baseline}
.fr-fact svg{width:18px;height:18px;flex:0 0 auto}
.fr-fact .pf-tier{padding:2px 9px 2px 5px}
.fr-row__acts{display:flex;gap:6px;flex:0 0 auto}
.fr-act{padding:7px 12px;background:#fff;border:2px solid var(--key);border-radius:10px;box-shadow:0 3px 0 var(--key);font:900 13px/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--key);cursor:pointer;white-space:nowrap}
.fr-act:hover{background:var(--yellow,#FFFE9A)}
.fr-act:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.fr-act:disabled{opacity:.55;cursor:default}
.fr-act--rm[data-armed="1"]{background:var(--acc);color:#fff}
.fr-row__since{font:700 12px var(--ui);color:#3A4354;white-space:nowrap}
/* the picture chooser (avatar.js, data-view="picture") */
.av-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 0}
.av-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px 22px;background:#fff;border:2.5px solid var(--key);border-radius:16px;box-shadow:0 4px 0 var(--key);cursor:pointer;text-align:center;font:inherit;color:var(--key)}
.av-opt:hover{background:var(--yellow,#FFFE9A)}
.av-opt:active{transform:translateY(2px);box-shadow:0 2px 0 var(--key)}
.av-opt:disabled{opacity:.5;cursor:default;box-shadow:0 4px 0 var(--key);transform:none;background:#fff}
.av-opt svg{width:44px;height:44px;color:var(--acc)}
.av-opt b{font:900 22px/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.02em}
.av-opt span{font:600 13px/1.4 var(--ui);color:#3A4354;max-width:26ch}
/* centred, and on its own — the "One of your cards" caption beside it is gone
   (Luke, 11 Sep). It is a bigger circle now that nothing sits next to it. */
.av-now{display:flex;justify-content:center;margin:0 0 18px}
.av-now .av-circle--sm{width:92px;height:92px}
.av-circle{width:180px;height:180px;border-radius:50%;border:3px solid var(--key);box-shadow:0 4px 0 var(--key);overflow:hidden;background:#fff}
.av-circle img{display:block;width:100%;height:100%;object-fit:cover}
.av-circle img.soc-av__card{object-position:50% 58%;transform:scale(1.6);transform-origin:50% 58%}
.av-circle--sm{width:64px;height:64px;border-width:2px;box-shadow:0 3px 0 var(--key)}
.av-preview{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0 0}
.av-preview .pf-note{margin:0;text-align:center}
.av-btns{display:flex;gap:10px;justify-content:center}
.av-btns .pf-btn{flex:0 0 auto;min-width:130px}
.av-btns--rm{margin-top:16px}
.av-err{margin:12px 0 0;text-align:center;font:700 13px var(--ui);color:#B23A3A}

/* ---- CHANGE PICTURE, THE POP-UP (avatar.js, Luke 10 Sep round 2) ---------
   Three steps on one .ov sheet over the profile PAGE. The panel is the site's
   own sheet skin; all this adds is the head's BACK, which lives INSIDE the
   head rather than pinned to the panel the way a page's does — a pop-up has no
   header band above it to sit in — and a wider box for the card grid. */
.ov--avpick .av-head{display:flex;align-items:center;gap:14px;min-width:0}
.av-back{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px 0 8px;background:#fff;border:2.5px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);color:var(--key);font:900 14px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;line-height:1;flex:0 0 auto}
.av-back svg{width:18px;height:18px}
.av-back:hover{background:var(--yellow,#FDC107)}
.av-back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
/* an author display beats the UA sheet's [hidden]{display:none} (the same trap
   as .sl-dots[hidden]) — step 1 has no BACK, so it has to be told to go */
.av-back[hidden]{display:none}
/* THE BOX IS THE SIZE OF ITS ANSWER (Luke, 11 Sep). It was min(980px,100%) — a
   cap picked for somebody with a full collection and spent whether or not there
   is one: measured with three cards in it, a 1008x566 box with 30% of it
   covered. fit-content between a floor and the same ceiling grows with the
   collection and stops being a room with three things in it when there are
   three things. Measured after: 659x493, 50%.
   The grid needs FIXED tracks for the panel to have a width to hug — auto-fill
   with a 1fr max would expand to whatever the panel gave it, which is the
   circular version of the same bug. */
html[data-layout="stage"] .ov--avpick .ov__panel{
  width:fit-content;min-width:min(520px,100%);max-width:min(980px,100%)}
.av-cards{grid-template-columns:repeat(auto-fill,132px)}
.av-dex{grid-template-columns:repeat(auto-fill,104px)}
.av-cards,.av-dex{justify-content:start}
.av-cards .pf-card{cursor:pointer}
/* the three tabs (Luke, 11 Sep: every pull · still in the vault · Pokédex).
   The strip is the site's own .otabs; the count rides in the tab so an empty
   one is visibly empty before you click it, and disabled when it is. */
.av-tabs{margin:0 0 4px}
.av-tabn{margin-left:7px;opacity:.62;font-variant-numeric:tabular-nums}
.otab[disabled]{opacity:.45;cursor:default}
/* the species tiles are the profile's own .pf-mon, made into buttons */
.av-mon{appearance:none;font:inherit;color:inherit;cursor:pointer;text-align:center}
.av-mon:hover{background:var(--yellow,#FDC107)}
.av-mon:active{transform:translateY(2px)}
/* the one you are wearing */
.pf-card--on{outline:3px solid var(--acc);outline-offset:2px}

/* ---- states ------------------------------------------------------------ */
.pf-empty{text-align:center;padding:26px 16px}
.pf-empty h3{margin:0 0 6px;font:900 30px/1 var(--display);font-style:italic;text-transform:uppercase;color:#fff;-webkit-text-stroke:4px var(--key);paint-order:stroke fill}
.pf-empty p{margin:0 auto;max-width:360px;font:600 14px/1.45 var(--ui);color:var(--key)}
.pf-empty .pf-btn{display:inline-block;flex:none;margin-top:14px;padding:11px 22px}
.pf-state{padding:40px 16px;text-align:center;font:800 16px var(--ui);color:var(--key)}

/* ---- the doors --------------------------------------------------------- */
.lbrow[data-lb-user],.lbp[data-lb-user]{cursor:pointer}
.lbrow[data-lb-user]:hover .lbrow__u,.lbp[data-lb-user]:hover .lbp__u{color:var(--acc)}

/* the phone row in the PROFILE sheet needs air before the balances (Luke, 22:31) */
.pf-mrow{margin:0 0 14px}
@media (max-width:1023px){
  .ov--profile .ov__body{padding:22px 14px 18px}
  /* TYPE ON THE PHONE (Luke, 22:31: "that text is too small and too hard to
     read ... all over the site on mobile"): nothing on this sheet under 13px,
     the notes and labels at 15/14. */
  .pf-stat>span{font-size:12px}
  .pf-note{font-size:15px;line-height:1.45}
  .pf-shelf__h span{font-size:14px}
  .pf-card__nm{font-size:14px;line-height:1.25}
  .pf-chip{font-size:12px;padding:2px 8px}
  .pf-row__f .pf-chip{font-size:13px}
  .pf-row__n small{font-size:14px}
  .pf-row__mon{font-size:14px}
  .pf-mon__no{font-size:12px}
  .pf-mon__nm{font-size:15px}

  .pf-url{font-size:13px}
  .pf-pick{font-size:14px}
  .pf-state{font-size:17px}
  /* the same order stacked (round 2): plate, FRIENDS, the vault, the Pokédex rows, the clips band, EVERY RIP */

  .pf-shelf--vault .pf-shelf__h{padding-right:0}
  /* the view's count on its own line, readable, clear of the X (Luke, 22:51) */
  .pf-view .pf-shelf__h{padding-right:60px;flex-wrap:wrap;gap:6px 12px}
  .pf-view .pf-shelf__h span{flex:1 0 100%;font-size:15px}

  .pf-row{grid-template-columns:56px minmax(0,1fr) auto;gap:4px 12px;padding:8px 10px 8px 8px}
  .pf-row__img{width:56px;grid-row:1 / span 2}
  .pf-row__n{font-size:15px}
  /* the facts run the full width under the name and the pill, so the caught
     species is never cut off at the pill's column (Luke, 23:25) */
  .pf-row__f{grid-column:2 / -1;grid-row:2;grid-template-columns:96px 84px;gap:6px;justify-content:start}
  /* the caught species takes its own line under the chips on the phone — a
     third column here was too narrow for Raticate or Aerodactyl */
  .pf-row__c--mon{grid-column:1 / -1;justify-content:flex-start}
  .pf-row__c--mon:empty{display:none}
  .pf-row__mon img{width:28px;height:28px}
  .pf-row__side{grid-column:3;grid-row:1}
  .pf-av{width:84px;height:84px}
  .pf-grid--all{grid-template-columns:1fr 1fr;gap:10px}
  .pf-dex--all{grid-template-columns:repeat(3,1fr)}
  /* the social wave on the phone: the FRIENDS shelf's row is set with the grid above (round 2: under the plate) */
  .pf-banner{flex-wrap:wrap;padding:12px 14px}
  .pf-banner p{font-size:16px}
  .pf-banner__b{flex:1 0 100%}
  .pf-banner__b .nf-pill{flex:1 1 0;height:38px;font-size:16px}
  .av-opts{grid-template-columns:1fr;gap:10px}
  .av-opt{padding:18px 14px 16px}
  .av-opt span{font-size:14px}
  .av-circle{width:150px;height:150px}
  /* the friends view on the phone (round 2, §3.22): two lines a row — the person
     and the buttons, then the facts — and nothing under 12px */
  .fr-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:10px 10px 10px 8px}
  .fr-row__who{grid-column:1;grid-row:1}
  .fr-row__acts{grid-column:2;grid-row:1}
  .fr-row__facts{grid-column:1 / -1;grid-row:2;gap:6px 12px}
  .fr-row__n{font-size:16px}
  .fr-fact{font-size:13px}
  .fr-fact b{font-size:16px}
  .fr-fact small{font-size:12px}
  .fr-act{padding:8px 10px;font-size:13px;min-height:36px}
  .fr-row__since{display:none}
  /* the sheet's BACK sticker (pf-nav, absolute top-left) sits where the view
     title starts on the phone: these views drop their inline back and start
     under the sticker instead */
  .pf-view--friends,.pf-view--picture{padding-top:50px}
  .pf-view--friends .pf-back,.pf-view--picture .pf-back{display:none}
}

/* Luke, 10 Sep 07:55, looking at gemmint10's profile: "when you've got a friend
   request, that VIEW ALL could move to the right to match the other VIEW ALLs,
   as it's not being blocked by the X button at the top."
   :50 insets the FRIENDS header by 58px because the sheet's X sits over that
   corner — but a banner pushes the whole row clear of the X, so the inset is
   just a misalignment. Measured with the banner up: FRIENDS' VIEW ALL right edge
   was 903 against the vault's and the Pokédex's 948 at 1147x655, and 1190
   against 1249 at 1512x982; with this rule all three sit on the same edge. */

/* ==== THE PAGE'S SKIN (17 Sep 2026) ====
   The Pokédex dark-card language: navy card, 2.5px ink key, gold numbers, pink
   CTA. .pf-alt carries the tokens and the shared restyles of the base pieces
   above (chips, rows, tiles, shelf heads); .pf-binder (further down) is the
   page's own structure. Both class names date from the design round that
   picked this layout; there is one layout now. */

/* ---- tokens ---- */
.pf-alt{
  --pf-navy:#1F2432;
  --pf-navy-hi:#2B3242;
  --pf-on-dim:#AEB6C7;
  --pf-gold:#FDC107; /* dex --gold, not pale site --yellow */
  --pf-acc:var(--acc,#D8498D);
  --pf-line:var(--key,#0B0F18);
  display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%;color:#fff
}
.pf-alt .pf-shelf,
.pf-alt #pfFriends{
  background:var(--pf-navy);color:#fff;border:2.5px solid var(--pf-line);border-radius:18px;
  box-shadow:0 5px 0 var(--pf-line);padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,24px);margin:0;box-sizing:border-box
}
.pf-alt .pf-shelf{margin:0}
.pf-alt .pf-shelf__h{padding-right:0;margin:0 0 12px}
.pf-alt .pf-shelf__h h3{color:#fff}
.pf-alt .pf-shelf__h h3 b{color:var(--pf-acc)}
.pf-alt .pf-shelf__h span{color:var(--pf-on-dim)}
.pf-alt .pf-shelf__h .fr-count{color:var(--pf-gold)}
.pf-alt .pf-all{background:var(--pf-navy-hi);color:#fff;border-color:var(--pf-line)}
.pf-alt .pf-all:hover{background:var(--pf-gold);color:var(--pf-line)}
.pf-alt .pf-note{color:var(--pf-on-dim);margin:8px 0 0}
.pf-alt .pf-note b{color:#fff}
.pf-alt .pf-ach{margin-top:12px}

.pf-alt .pf-url{margin-top:8px;color:var(--pf-on-dim)}

/* Identity: clean white on navy (dex), not white-fill stroke on white */
.pf-alt .pf-name{
  color:#fff;-webkit-text-stroke:0;paint-order:normal;text-shadow:none
}
.pf-alt .pf-name small{color:var(--pf-acc);-webkit-text-stroke:0}

.pf-alt .pf-tier{background:var(--pf-navy-hi);color:#fff;border-color:var(--pf-line)}
.pf-alt .pf-av{background:var(--pf-navy-hi)}
.pf-alt .pf-av__letter{color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 0 var(--pf-line)}

/* Stats: Pokédex yellow/gold display (slant + gold + key shadow) */
.pf-alt{
  --pf-slant:skewX(-7deg);
  --pf-display:'Barlow Condensed',var(--display),system-ui,sans-serif;
}
.pf-alt .pf-stat{
  background:var(--pf-navy-hi);border:2px solid var(--pf-line);border-radius:12px;padding:10px 12px
}
.pf-alt .pf-stat b{
  color:var(--pf-gold);font-family:var(--pf-display);font-weight:900;font-style:italic;
  font-size:clamp(22px,2.4vw,34px);line-height:1;letter-spacing:.01em;
  display:inline-flex;align-items:baseline;gap:4px;
  transform:var(--pf-slant);transform-origin:left center;
  text-shadow:0 3px 0 var(--pf-line)
}
.pf-alt .pf-stat b .pf-of{
  color:var(--pf-on-dim);font-size:.48em;font-weight:700;font-style:italic;
  text-shadow:none;transform:none
}
.pf-alt .pf-stat>span{
  color:var(--pf-on-dim);letter-spacing:.14em;font-family:var(--pf-display);
  font-weight:700;font-size:clamp(10px,.9vw,12px);margin-top:6px
}
.pf-alt .pf-stat--pts b{display:inline-flex}
.pf-alt .pf-shelf__h h3{
  font-family:var(--pf-display);font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(20px,2vw,26px)
}
.pf-alt .pf-shelf__h h3 b{color:var(--pf-gold);text-shadow:0 2px 0 var(--pf-line)}
.pf-alt .pf-name{
  font-family:var(--pf-display);font-weight:900;font-style:italic;
  font-size:clamp(28px,3.2vw,40px);transform:var(--pf-slant);transform-origin:left center
}

.pf-alt .pf-row__v{
  font-family:var(--pf-display);font-weight:900;font-style:italic;color:var(--pf-gold);
  text-shadow:0 2px 0 var(--pf-line)
}
.pf-alt .fr-count{
  font-family:var(--pf-display);font-weight:900;font-style:italic;color:var(--pf-gold);
  text-shadow:0 2px 0 var(--pf-line)
}

/* Buttons stay pink CTA */
.pf-alt .pf-btn--ghost{background:var(--pf-navy-hi);color:#fff}
.pf-alt .pf-btn.is-on{background:var(--pf-gold);color:var(--pf-line)}

/* Best pull / featured on dark */

/* Cards / mon tiles slightly raised */
.pf-alt .pf-card,
.pf-alt .pf-mon{
  background:rgba(255,255,255,.06);border-color:var(--pf-line);color:#fff;box-shadow:0 3px 0 var(--pf-line)
}
.pf-alt .pf-card img,.pf-alt .pf-mon img{background:var(--pf-navy-hi)}
.pf-alt .pf-card__nm,.pf-alt .pf-mon__nm{color:#fff}
.pf-alt .pf-mon__no{color:var(--pf-on-dim)}
.pf-alt .pf-card__v{color:var(--pf-gold)}
.pf-alt .pf-chip{background:var(--pf-navy-hi);color:#fff;border-color:var(--pf-line)}
.pf-alt .pf-chip--held{background:var(--pf-acc);color:#fff}
.pf-alt .pf-chip--best{background:var(--pf-gold);color:var(--pf-line)}
.pf-alt .pf-chip--rare{background:#2a3a55;color:#c5d8ff}
.pf-alt .pf-chip--epic{background:#3a2a55;color:#e0c8ff}
.pf-alt .pf-chip--legendary{background:var(--pf-gold);color:var(--pf-line)}
.pf-alt .pf-bar{background:#0b0f18;border-color:var(--pf-line)}
.pf-alt .pf-more{
  background:var(--pf-navy-hi);color:#fff;border:2px solid var(--pf-line);border-radius:12px;
  box-shadow:0 3px 0 var(--pf-line);font:900 14px var(--display);font-style:italic;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;width:100%;margin-top:8px
}
.pf-alt .pf-pick{color:var(--pf-on-dim);margin:0 0 10px}

/* Friends shelf: compact wait (~96px), no giant blank */
.pf-alt #pfFriends .fr-grid,
.pf-alt #pfFriends .fr-grid--wait{min-height:96px;max-height:120px}
.pf-alt #pfFriends:has(> .pf-note){padding-bottom:18px}
.pf-alt #pfFriends:has(> .pf-note) .fr-grid{display:none;min-height:0;max-height:none}
.pf-alt .fr-tile{
  background:rgba(255,255,255,.06);border-color:var(--pf-line);color:#fff;box-shadow:0 3px 0 var(--pf-line)
}
.pf-alt .fr-tile:hover{background:var(--pf-navy-hi)}
.pf-alt .fr-tile__n{color:#fff}

/* Rip rows: 2-line phone-like layout — no Held/Sold / caught clipping */
.pf-alt .pf-row{
  grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:4px 12px;
  padding:10px 12px 10px 8px;
  background:rgba(255,255,255,.06);
  border:2px solid var(--pf-line);
  border-radius:12px;
  color:#fff;
  overflow:hidden;
  min-width:0
}
.pf-alt .pf-row__img{width:56px;grid-row:1 / span 2;background:var(--pf-navy-hi)}
.pf-alt .pf-row__n{font-size:15px;color:#fff;min-width:0}
.pf-alt .pf-row__t{overflow:hidden;text-overflow:ellipsis}
.pf-alt .pf-row__n small{color:var(--pf-on-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-alt .pf-row__f{
  grid-column:2 / -1;grid-row:2;
  grid-template-columns:minmax(0,auto) minmax(0,auto) minmax(0,1fr);
  gap:6px;justify-content:start;min-width:0
}
.pf-alt .pf-row__c{min-width:0}
.pf-alt .pf-row__c--mon{grid-column:1 / -1;justify-content:flex-start;max-width:100%}
.pf-alt .pf-row__c--mon:empty{display:none}
.pf-alt .pf-row__mon{
  color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pf-alt .pf-row__mon img{width:28px;height:28px;flex:0 0 auto}
.pf-alt .pf-row__side{grid-column:3;grid-row:1;align-items:flex-end;min-width:0}
.pf-alt .pf-row__st{background:var(--pf-navy-hi);color:#fff;border-color:var(--pf-line);white-space:nowrap}
.pf-alt .pf-row__st--held{background:var(--pf-acc);color:#fff}
.pf-alt .pf-row__v{color:var(--pf-gold);font-size:17px}
.pf-alt .pf-row__v small{color:var(--pf-on-dim)}
.pf-alt .pf-row--sold .pf-row__v{color:var(--pf-on-dim)}
.pf-alt .pf-row__f .pf-chip{font-size:11px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---- the banner (.pf-hero__cover, from the design round; the page's cover uses it) ---- */
.pf-hero__cover{
  position:relative;height:152px;margin:0;border:0;border-bottom:2.5px solid var(--pf-line);
  border-radius:18px 18px 0 0;box-shadow:none;overflow:hidden;
  background:linear-gradient(135deg,var(--acc-hi),var(--acc) 40%,var(--pf-gold))
}

/* ---- ~1280 overlay polish ---- */
@media (min-width:1024px){
  .ov--profile[data-pf-layout] .ov__body{padding-left:clamp(14px,2vw,22px);padding-right:clamp(14px,2vw,22px)}
}

/* ---- banner: edge to edge, no frame of its own ---- */
.pf-hero__cover,
.pf-hero__cover--poke,
.pf-hero__cover.pf-hero__cover--poke{
  display:block;width:100%;height:clamp(140px,18vw,200px);margin:0;
  border:0!important;border-radius:16px 16px 0 0;box-shadow:none!important;
  background-color:#1a3a6e;
  background-image:url("/bg-plate.png");
  background-size:cover;background-position:center 40%;
  position:relative
}
.pf-hero__cover::after,
.pf-hero__cover--poke::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,24,.12),rgba(11,15,24,.62));
  pointer-events:none
}

/* the share / add-friend / trade row */
.pf-alt .pf-share-row{
  display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch;width:100%!important
}
.pf-alt .pf-share-row .pf-share--friend,
.pf-alt .pf-share-row .pf-share--trade{
  flex:1 1 0;margin:0;min-width:0;display:flex;width:auto
}
.pf-alt .pf-share-row .pf-btn,
.pf-alt .pf-share-row .fr-btn,
.pf-alt .pf-share-row button{
  width:100%!important;flex:1;margin:0
}
 /* hide empty note row eating space */

/* Even, tight shelf padding — no fat bottoms */
.pf-alt .pf-shelf,
.pf-alt #pfFriends{
  padding:16px 20px!important
}
.pf-alt #pfFriends .fr-grid,
.pf-alt #pfFriends .fr-grid--wait{min-height:0;max-height:none;margin:0;padding:0}
.pf-alt #pfFriends .fr-grid--wait:empty,
.pf-alt #pfFriends .fr-grid.fr-grid--wait:not(:has(.fr-tile)){min-height:88px}
.pf-alt .pf-shelf__h{margin:0 0 10px}
.pf-alt .pf-shelf--rips .pf-row:last-child{margin-bottom:0}
.pf-alt .pf-stat b,
.pf-alt .pf-shelf__h h3 b,
.pf-alt .fr-count,
.pf-alt .pf-row__v,
.pf-alt .pf-card__v{color:#FDC107!important}
.pf-alt{--pf-gold:#FDC107}

/* ---- reactive width: container + viewport breakpoints ---- */
.pf-alt{container-type:inline-size;container-name:pf-alt}

@media (max-width:1023px){
  /* Phone: no desktop rail inset — the page fills the screen */
  html[data-layout="stage"] .pg.ov--profile[data-pf-layout]{
    left:0!important;right:0!important;width:auto!important
  }

  .pf-alt .pf-shelf,
.pf-alt #pfFriends{padding:16px}
  
  .pf-hero__cover{height:clamp(100px,22vw,140px)}

}

@media (max-width:640px){

  .pf-alt .pf-stat b{transform-origin:center;justify-content:center;width:100%}
  .pf-alt .pf-stat{text-align:center}
}

/* Container queries: reflow when the profile panel itself is narrow (page chrome aside) */

/* stat labels left-aligned (Mike) */
.pf-alt .pf-stat{text-align:left!important}
.pf-alt .pf-stat>span{text-align:left!important;width:100%}
.pf-alt .pf-stat b{justify-content:flex-start!important;transform-origin:left center!important}

/* mon sprites visible on dark Pokédex shelf */
.pf-alt .pf-mon img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:transparent;min-height:48px
}
.pf-alt .pf-mon{overflow:visible}
.pf-alt .pf-dex{min-height:72px}

/* NOTE: html[data-layout="stage"] is the RIP/OPEN chrome, not "mobile".
   Phone stacking must use viewport width only. */

/* the clan chip is clan.js's .cl-chip when that module is loaded, friends.js's .soc-clan otherwise */

@media (max-width:1023px){
  html[data-layout="stage"] .pg.ov--profile[data-pf-layout]{left:0!important;right:0!important;width:auto!important}

}

/* rail tidy: stats 2x2 at every width, even padding all round, no air under the last button */

/* Tablet (641 to 1023): the rail is a card — avatar left at 240px, identity and stats right */

/* one 16px rhythm on small screens */
@media (max-width:640px){
  .pf-alt .pf-shelf,
.pf-alt #pfFriends{padding:16px!important}
}
@media (max-width:1023px){
  
  .ov--profile[data-pf-layout] .ov__body{padding-left:16px;padding-right:16px}
}

/* Desktop gutter: the nav's labels end near x=156 but the overlay began at the
   rail's nominal 242px footprint; pull it in so the left gap equals the right. */
@media (min-width:1024px){
  html[data-layout="stage"]:not([data-side="collapsed"]) .pg.ov--profile[data-pf-layout]{left:calc(var(--sl-rail,242px) - 74px)!important}
}

/* No scroll feather on the page: the 14px top mask fogged the top of the card */
.ov--profile[data-pf-layout] .ov__body,
html[data-layout="stage"] .ov--profile[data-pf-layout] .ov__body{-webkit-mask-image:none!important;mask-image:none!important}

/* Shelf heads: title left, View all right, on every shelf */
.pf-alt .pf-shelf__h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pf-alt .pf-shelf__h > :first-child{flex:1 1 auto;min-width:0}
.pf-alt .pf-shelf__h .pf-all{margin-left:auto;flex:0 0 auto}

/* Pokedex progress as a short inline pill beside its caption, not a scrollbar-lookalike */
.pf-alt .pf-shelf .pf-bar{display:inline-block;vertical-align:middle;width:180px;max-width:40%;height:10px;margin:16px 12px 0 0;border-width:2px}
.pf-alt .pf-shelf .pf-bar + .pf-note{display:inline;vertical-align:middle;margin:0;line-height:1.5}
@media (max-width:640px){
  .pf-alt .pf-shelf .pf-bar{display:block;width:100%;max-width:none;margin:14px 0 8px}
  .pf-alt .pf-shelf .pf-bar + .pf-note{display:block}
}

/* ================================================================
   THE PAGE — .pf-binder (17 Sep 2026): one continuous card, pulls first.
   Three passes from the design round, one layout: .pf-binder is the
   structure, .pf-binder--e the polish pass, .pf-binder--f the banner pass.
   profile.js paints all three class names on the one card.
   ================================================================ */
.pf-binder{
  --pf-hair:rgba(255,255,255,.09);
  display:block;padding:0;background:var(--pf-navy);color:#fff;
  border:2.5px solid var(--pf-line);border-radius:22px;box-shadow:0 5px 0 var(--pf-line);overflow:hidden
}
.pf-binder__sec{padding:22px 24px;border-top:2px solid var(--pf-hair)}
.pf-binder .pf-shelf,.pf-binder #pfFriends{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important
}
.pf-binder__cover{position:relative;overflow:hidden;padding:40px 24px 26px;text-align:center;background:var(--pf-navy)}

.pf-binder__cover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,36,50,.05) 0%,rgba(31,36,50,.25) 55%,var(--pf-navy) 100%)}
.pf-binder__id{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
/* ROUND (Luke, 18 Sep: "make the pfp circle cos we pulling from x now") — an X
   picture is drawn round everywhere it appears, and clans, friends and the
   board already wear theirs in circles; card art crops to a circle as cleanly */
.pf-binder .pf-av--binder{
  width:184px!important;height:184px!important;aspect-ratio:1;margin:0!important;border-radius:50%!important;
  border:3.5px solid var(--pf-line)!important;box-shadow:0 5px 0 var(--pf-line)!important;background:#0b0f18
}
.pf-binder .pf-av--binder .pf-badge{display:none}
.pf-binder .pf-av--binder img.pf-av__img:not(.pf-av__img--photo):not(.is-land){transform:scale(3.05);transform-origin:50% 54%;object-position:50% 54%}
.pf-binder .pf-name--binder{display:block;margin:16px 0 0;font-size:34px;text-align:center}
.pf-binder__pills{display:flex;align-items:center;justify-content:center;gap:8px 10px;flex-wrap:wrap;margin-top:10px}
.pf-binder__pills .cl-chip,.pf-binder__pills .soc-clan,.pf-binder__pills .pf-tier{
  height:34px;min-height:34px;padding:0 12px 0 6px;gap:6px;font-size:15px;line-height:1;border-width:2.5px;display:inline-flex;align-items:center;margin:0;box-sizing:border-box
}
.pf-binder__pills .cl-chip img,.pf-binder__pills .soc-clan img,.pf-binder__pills .pf-tier img{width:22px;height:22px}
.pf-binder__since{font:700 14px var(--ui);color:var(--pf-on-dim)}
.pf-binder__actions{width:100%;max-width:420px;margin-top:16px}
.pf-binder .pf-share-row,.pf-binder .pf-share--binder{display:flex;flex-direction:row;gap:8px;width:100%;margin:0}
.pf-binder .pf-share-row .pf-share{flex:1 1 0;min-width:0;display:flex}
.pf-binder .pf-share-row .pf-btn,.pf-binder .pf-share--binder .pf-btn{width:100%;flex:1}
.pf-binder .pf-url:empty{display:none}
.pf-binder .pf-url{margin-top:8px}
.pf-binder__strip{border-top:2px solid var(--pf-hair);background:var(--pf-navy-hi)}
.pf-binder .pf-stats--strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0}
.pf-binder .pf-stats--strip .pf-stat{
  background:transparent!important;border:0!important;border-left:2px solid var(--pf-hair)!important;border-radius:0!important;box-shadow:none!important;
  padding:16px 14px!important;text-align:center!important
}
.pf-binder .pf-stats--strip .pf-stat:first-child{border-left:0!important}
.pf-binder .pf-stats--strip .pf-stat b{font-size:28px;justify-content:center!important;transform-origin:center!important}
.pf-binder .pf-stats--strip .pf-stat>span{text-align:center!important}
.pf-binder .pf-ach{margin:0;padding:12px 24px 0}
.pf-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin-top:6px}
.pf-podium__slot{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;background:transparent;border:0;color:#fff;font:inherit;cursor:pointer;min-width:0;width:100%
}
.pf-podium__slot img{
  width:min(100%,150px);aspect-ratio:.62;object-fit:cover;border-radius:10px;border:2.5px solid var(--pf-line);box-shadow:0 3px 0 var(--pf-line);background:var(--pf-navy-hi);transition:transform .18s
}
.pf-podium__slot--1 img{width:min(100%,190px)}
.pf-podium__v{font:900 24px var(--display);font-style:italic;color:var(--pf-gold);letter-spacing:.01em;line-height:1}
.pf-podium__slot--1 .pf-podium__v{font-size:30px}
.pf-podium__n{font:700 13px var(--ui);color:var(--pf-on-dim);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-podium__n small{font-size:12px;color:#fff;opacity:.7}
.pf-podium__plinth{
  width:100%;display:flex;align-items:center;justify-content:center;
  font:900 16px var(--display);font-style:italic;color:var(--pf-line);border-radius:10px 10px 4px 4px;border:2px solid var(--pf-line)
}
.pf-podium__slot--1 .pf-podium__plinth{height:40px;background:linear-gradient(180deg,#FFE27A,var(--pf-gold))}
.pf-podium__slot--2 .pf-podium__plinth{height:30px;background:linear-gradient(180deg,#E9EEF6,#B9C2D1)}
.pf-podium__slot--3 .pf-podium__plinth{height:22px;background:linear-gradient(180deg,#E3B27A,#B07A44)}
.pf-podium__slot:hover img{transform:translateY(-3px)}
.pf-binder__dex{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start}
.pf-ring{position:relative;width:150px;text-align:center}
.pf-ring svg{width:150px;height:150px;transform:rotate(-90deg);display:block}
.pf-ring__t{fill:none;stroke:rgba(255,255,255,.1);stroke-width:10}
.pf-ring__f{fill:none;stroke:var(--pf-acc);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s}
.pf-ring__c{position:absolute;left:0;right:0;top:0;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.pf-ring__c b{font:900 40px var(--display);font-style:italic;color:#fff}
.pf-ring__c span{font:700 12px var(--ui);color:var(--pf-on-dim);margin-top:4px}
.pf-ring__k{margin:8px 0 0;font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--pf-on-dim)}
.pf-binder .pf-shelf--dex .pf-bar,.pf-binder .pf-shelf--dex .pf-note{display:none!important}
.pf-grid--binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
@media (max-width:640px){
  .pf-binder__sec{padding:18px 16px}
  .pf-binder__cover{padding:32px 16px 22px}
  .pf-binder .pf-av--binder{width:164px!important;height:164px!important}
  .pf-binder .pf-name--binder{font-size:30px}
  .pf-binder .pf-stats--strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-binder .pf-stats--strip .pf-stat:nth-child(3){border-left:0!important}
  .pf-binder .pf-stats--strip .pf-stat:nth-child(n+3){border-top:2px solid var(--pf-hair)!important}
  .pf-podium{gap:8px}
  .pf-podium__v{font-size:18px}
  .pf-podium__slot--1 .pf-podium__v{font-size:22px}
  .pf-binder__dex{grid-template-columns:1fr}
  .pf-ring{margin:0 auto}
  .pf-grid--binder{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

/* ================================================================
   The polish pass (.pf-binder--e): equal vault tiles with the redundant
   Held chip gone, a Pokedex row gap, hover lift, focus rings, 24px rhythm.
   ================================================================ */
.pf-binder--e .pf-binder__sec{padding:24px}
.pf-binder--e .pf-shelf__h{margin-bottom:14px}
.pf-binder--e .pf-dex--row2{margin-top:10px}
.pf-binder--e .pf-mon{transition:transform .16s}
.pf-binder--e .pf-mon:hover{transform:translateY(-2px)}
.pf-binder--e .pf-grid--binder{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;align-items:stretch}
.pf-binder--e .pf-card{display:flex;flex-direction:column;height:100%;transition:transform .16s}
.pf-binder--e .pf-card:hover{transform:translateY(-2px)}
.pf-binder--e .pf-card__nm{min-height:2.5em}
.pf-binder--e .pf-card__row{margin-top:auto;padding-top:6px;flex-wrap:nowrap;min-height:26px}
.pf-binder--e .pf-card__row .pf-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pf-binder--e .pf-shelf--vault .pf-chip--held{display:none}
.pf-binder--e .pf-podium__slot{gap:10px}
.pf-binder--e .pf-podium__n{width:100%}
.pf-binder--e button:focus-visible{outline:3px solid var(--pf-gold);outline-offset:2px;border-radius:12px}
@media (min-width:641px) and (max-width:1023px){
  .pf-binder--e .pf-grid--binder{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .pf-binder--e .pf-binder__sec{padding:18px 16px}
  .pf-binder--e .pf-grid--binder{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pf-binder--e .pf-grid--binder .pf-card:nth-child(n+7){display:none}
  .pf-binder--e .pf-card__row .pf-chip{font-size:9.5px;padding:1px 5px;letter-spacing:0}
}

/* Phone chrome: the floating BACK / TOP pair */
.pf-fabs{position:sticky;bottom:6px;z-index:2;display:flex;justify-content:flex-end;align-items:flex-end;gap:10px;margin-top:14px;pointer-events:none}
.pf-fabs > *{pointer-events:auto}
.pf-fabs .pf-top{position:static;margin:0}
.pf-nav--fab{display:none}
@media (max-width:1023px){
  .pf-fabs{justify-content:space-between}
  .pf-fabs .pf-nav--fab{display:inline-flex;position:static;height:40px}

  /* no scrollbar stealing 12px */
  .ov--profile[data-pf-layout] .ov__body{scrollbar-width:none;padding-top:14px!important}
  .ov--profile[data-pf-layout] .ov__body::-webkit-scrollbar{display:none;width:0;height:0}
}

@media (max-width:1023px){
  
  /* the scroll body runs from the top of the viewport, padded to clear the header */
  .ov--profile[data-pf-layout] .ov__panel{padding-top:0!important}
  .ov--profile[data-pf-layout] .ov__body{padding-top:calc(var(--mh-head,52px) + var(--mh-top,0px) + 14px)!important}
}

/* E: every rip's right-hand side — one pill style, status on its own row,
   the caught species in an inset card with the sprite in a circle */
.pf-binder--e .pf-row .pf-chip,
.pf-binder--e .pf-row__st{
  height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;
  font:800 12px var(--ui);line-height:1;letter-spacing:0;box-sizing:border-box;margin:0
}
.pf-binder--e .pf-row__c--mon .pf-row__mon{
  display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;
  background:rgba(255,255,255,.06);border:2px solid var(--pf-hair);border-radius:12px;
  font:900 14px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:#fff
}
.pf-binder--e .pf-row__c--mon .pf-row__mon img{
  width:32px;height:32px;padding:3px;border-radius:50%;background:rgba(255,255,255,.1);object-fit:contain
}
@media (max-width:640px){
  /* vault: two columns */
  .pf-binder--e .pf-grid--binder{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* every rip: fixed slab column, status / facts / caught card stacked beside it */
  .pf-binder--e .pf-row{grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto auto;gap:8px 12px;padding:10px;min-height:0;align-items:start}
  .pf-binder--e .pf-row__img{grid-column:1;grid-row:1 / span 3;align-self:stretch;width:92px;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:50% 50%;border-radius:8px}
  .pf-binder--e .pf-row__n{grid-column:2;grid-row:1;align-self:start;font-size:15px}
  .pf-binder--e .pf-row__side{grid-column:2;grid-row:2;display:flex;flex-direction:row;align-items:center;gap:6px;justify-content:flex-start}
  .pf-binder--e .pf-row__f{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:6px;align-self:end}
  .pf-binder--e .pf-row__c{display:contents}
  .pf-binder--e .pf-row__c--mon{display:block;flex:0 0 100%}
  .pf-binder--e .pf-row__c--mon:empty{display:none}
  .pf-binder--e .pf-row__c--mon .pf-row__mon{display:flex;width:100%}
  .pf-binder--e .pf-row__v{font-size:14px}
  /* friends: a bigger face, no clan chip crammed into a 100px tile */
  .pf-binder--e .fr-tile{padding:12px 6px 10px;gap:8px}
  .pf-binder--e .fr-tile .soc-av{width:64px;height:64px;font-size:24px}
  .pf-binder--e .fr-tile .cl-chip,.pf-binder--e .fr-tile .soc-clan{display:none}
  .pf-binder--e .fr-tile__n{font-size:13px}
}
@media (min-width:641px){
  /* every rip on desktop: the slab runs the full height of the row */
  .pf-binder--e .pf-row{grid-template-columns:96px minmax(0,1fr) auto;align-items:stretch;gap:8px 16px;padding:10px}
  .pf-binder--e .pf-row__img{width:96px;height:100%;grid-row:1 / span 2;align-self:stretch;object-fit:cover;object-position:50% 50%;border-radius:8px}
  .pf-binder--e .pf-row__n{align-self:start}
  .pf-binder--e .pf-row__f{align-self:end}
}

/* Pokedex rows: the second row is #pfDex2 and an id outranks the class rule */
.pf-binder #pfDex2{margin-top:10px!important}

/* ================================================================
   The banner pass (.pf-binder--f): the Eevee banner across the top of the
   card with the identity on it.
   ================================================================ */
.pf-binder--f .pf-binder__cover{padding:0 24px 26px}
.pf-binder--f .pf-binder__cover::after{display:none}
.pf-binder--f .pf-binder__banner{
  display:block;width:auto!important;margin:0 -24px 0;height:clamp(160px,20vw,220px)!important;
  border-radius:0!important;box-shadow:none!important;position:relative
}
.pf-binder--f .pf-binder__id{margin-top:-84px;position:relative;z-index:1}
@media (max-width:640px){
  .pf-binder--f .pf-binder__cover{padding:0 16px 22px}
  .pf-binder--f .pf-binder__banner{margin:0 -16px;height:176px!important}
  .pf-binder--f .pf-binder__id{margin-top:-46px}
}
/* desktop: taller banner, identity as a row — avatar left, name + pills beside, buttons right */
@media (min-width:1024px){
  .pf-binder--f .pf-binder__banner{height:280px!important}
  .pf-binder--f .pf-binder__id{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr auto;
    gap:0 22px;align-items:end;text-align:left;margin-top:-72px
  }
  .pf-binder--f .pf-av--binder{grid-column:1;grid-row:1 / span 2}
  .pf-binder--f .pf-name--binder{grid-column:2;grid-row:1;margin:0;text-align:left;align-self:end;line-height:1}
  .pf-binder--f .pf-binder__pills{grid-column:2;grid-row:2;justify-content:flex-start;margin-top:10px}
  .pf-binder--f .pf-binder__actions{grid-column:3;grid-row:1 / span 2;align-self:end;width:auto;max-width:none;margin:0}
  .pf-binder--f .pf-share-row,.pf-binder--f .pf-share--binder{width:auto}
  .pf-binder--f .pf-share-row .pf-share{flex:0 0 auto}
  .pf-binder--f .pf-share-row .pf-btn,.pf-binder--f .pf-share--binder .pf-btn{width:auto;min-width:150px}
  /* the artwork fills the whole cover; the identity row sits on it at its foot */
  .pf-binder--f .pf-binder__cover{position:relative;display:flex;align-items:flex-end;min-height:360px;padding:0 24px 24px}
  .pf-binder--f .pf-binder__banner{position:absolute;inset:0;margin:0;width:auto!important;height:auto!important}
  .pf-binder--f .pf-binder__id{margin-top:0;width:100%}
  /* a slight fade at the foot so the identity row reads on the art */
  .pf-binder--f .pf-binder__banner::after{
    display:block!important;
    background:linear-gradient(180deg,rgba(31,36,50,0) 50%,rgba(31,36,50,.5) 80%,rgba(31,36,50,.8) 100%)
  }
}
@media (max-width:640px){
  /* phone: a short fade over the bottom quarter only */
  .pf-binder--f .pf-binder__banner::after{
    display:block!important;
    background:linear-gradient(180deg,rgba(31,36,50,0) 74%,var(--pf-navy,#1F2432) 100%)
  }
}
@media (min-width:641px) and (max-width:1023px){
  .pf-binder--f .pf-binder__banner::after{display:none!important}
}

/* Binder Pokedex column: title, ring, View all stacked left, centred on the grid */
.pf-binder__dex{grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center}
.pf-binder__dexside{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 12px;text-align:center;align-self:center}
.pf-binder__dextitle{margin:0;font:900 22px/1.05 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.pf-binder .pf-binder__dextitle b{color:var(--pf-gold)!important}
.pf-binder__dexside .pf-ring{margin:0}
.pf-binder__dexside .pf-ring__k{display:none}
.pf-binder__dexside .pf-all{margin:0}
.pf-binder .pf-shelf--dex .pf-shelf__h{display:none!important}
@media (max-width:640px){
  .pf-binder__dex{grid-template-columns:1fr;gap:18px}
  .pf-binder__dexside{padding:0}
}

/* Achievements (17 Sep): achievements.js mounts into the card's [data-ach-mount]
   slot. The strip is a section like the others: hairline above, 24px padding,
   title left and View all right. */
.pf-binder .pf-ach{margin:0;padding:22px 24px 0;border-top:2px solid var(--pf-hair)}
.pf-binder--e .pf-ach{padding:24px 24px 0}
.pf-binder .pf-ach[hidden]{display:none}
.pf-alt .ach-strip__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.pf-alt .ach-strip__k{color:#fff}
.pf-alt .ach-strip__k b{color:var(--pf-gold)}
.pf-alt .ach-strip__none{color:var(--pf-on-dim)}
@media (max-width:640px){
  .pf-binder .pf-ach,.pf-binder--e .pf-ach{padding:18px 16px 0}
}
.pf-binder .ach-strip__k b{color:var(--pf-gold)!important}   /* the count in the same gold as the other shelf titles */

/* The banner (17 Sep). Mike's design puts /brand/stage/hero-banner-eevee.png
   here, but THAT FILE IS IN NOBODY'S CHECKOUT: it was never committed, and it
   404s here and on blockrips.com, which left the banner — the whole point of
   this layout — a flat navy block. The site's own plate backdrop stands in
   until the art arrives; when it does, this is the one line to restore:
     background-image:url("/brand/stage/hero-banner-eevee.png")!important;
   (a missing file would only 404 on every profile view, so it is not left in) */
.pf-hero__cover--poke,.pf-hero__cover.pf-hero__cover--poke,.pf-binder--f .pf-binder__banner{
  background-image:url("/bg-plate.png")!important;background-size:cover!important;background-position:center 30%!important
}

/* Achievements strip in the Binder: the same section rhythm and title as the
   other shelves (26px italic display, gold count), badges 56px on desktop
   with a 12px grid, 48px on a phone */
.pf-binder .pf-ach,.pf-binder--e .pf-ach{padding:24px}
.pf-binder .ach-strip__h{margin:0 0 14px}
.pf-binder .ach-strip__k{font:900 26px/1 var(--display);font-size:clamp(20px,2vw,26px);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:#fff}   /* the same clamp as every other shelf title, so phone and tablet match Top pulls */
.pf-binder .ach-strip__g{display:grid;grid-template-columns:repeat(auto-fill,56px);gap:12px;justify-content:start}
.pf-binder .ach-b{width:56px;height:56px;padding:0}
.pf-binder .ach-b img,.pf-binder .ach-b svg{width:100%;height:100%}
@media (max-width:640px){
  .pf-binder .pf-ach,.pf-binder--e .pf-ach{padding:18px 16px}
  /* phone keeps the original badge size (Mike, 17 Sep: "they look too big on mobile") */
  .pf-binder .ach-strip__g{grid-template-columns:repeat(auto-fill,36px);gap:6px}
  .pf-binder .ach-b{width:36px;height:36px}
}
/* phone friends shelf: three tiles regardless of what width friends.js measured
   at paint time (insurance against a stale measurement) */
@media (max-width:640px){
  .pf-binder #pfFriends .fr-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pf-binder #pfFriends .fr-tile:nth-child(n+4){display:none}
}

/* Phone Pokedex in the Binder: three columns whatever fitRows measured, and
   nothing can spill past the card edge */
@media (max-width:640px){
  .pf-binder #pfDex1,.pf-binder #pfDex2{grid-template-columns:repeat(3,minmax(0,1fr))!important;justify-content:stretch!important;overflow:hidden}
  /* achievements: one row of seven, View all for the rest */
  .pf-binder .ach-strip__g{grid-template-columns:repeat(7,minmax(0,1fr))}
  .pf-binder .ach-b{width:100%;height:auto;aspect-ratio:1}
  .pf-binder .ach-strip__g .ach-b:nth-child(n+8){display:none}
}

/* ================================================================
   BROWSE MODE (17 Sep 2026): grid / one-at-a-time switch on the Binder's
   vault and every-rip shelves, and the snap-scroll strip it opens.
   ================================================================ */
.pf-modes{display:inline-flex;gap:2px;padding:3px;background:var(--pf-navy-hi);border:2px solid var(--pf-line);border-radius:10px;margin-right:8px;flex:0 0 auto}
.pf-mode{width:32px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--pf-on-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pf-mode svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-mode.is-on{background:var(--pf-gold);color:var(--pf-line)}
.pf-mode:hover:not(.is-on){color:#fff}
.pf-alt .pf-shelf__h .pf-modes{margin-left:auto}
.pf-alt .pf-shelf__h .pf-modes + .pf-all,.pf-alt .pf-shelf__h .pf-modes + span{margin-left:0}

.pf-carousel{
  display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:4px 0 10px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.pf-carousel::-webkit-scrollbar{display:none}
.pf-slide{
  flex:0 0 min(72%,320px);scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  opacity:.5;transform:scale(.94);transition:opacity .2s,transform .2s
}
.pf-slide.is-active{opacity:1;transform:none}
/* the first and last slide can reach the middle */
.pf-slide:first-child{margin-left:calc(50% - min(36%,160px))}
.pf-slide:last-child{margin-right:calc(50% - min(36%,160px))}
.pf-slide__head{min-height:44px;display:flex;flex-direction:column;justify-content:flex-end}
.pf-slide__head b{display:block;font:800 16px/1.2 var(--ui);color:#fff}
.pf-slide__head small{display:block;margin-top:3px;font:700 13px var(--ui);color:var(--pf-on-dim)}
.pf-slide__card{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pf-slide__card img{display:block;width:100%;aspect-ratio:.62;object-fit:contain;border-radius:12px;background:var(--pf-navy-hi);border:2.5px solid var(--pf-line);box-shadow:0 4px 0 var(--pf-line)}
.pf-slide__foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:26px}
.pf-slide__foot .pf-chip,.pf-slide__foot .pf-row__st{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;font:800 12px var(--ui);line-height:1;margin:0}
.pf-slide__v{font:900 18px var(--display);font-style:italic;color:var(--pf-gold)}
.pf-slide__mon .pf-row__mon{
  display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;
  background:rgba(255,255,255,.06);border:2px solid var(--pf-hair);border-radius:12px;
  font:900 14px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:#fff
}
.pf-slide__mon .pf-row__mon img{width:32px;height:32px;padding:3px;border-radius:50%;background:rgba(255,255,255,.1);object-fit:contain}
@media (max-width:640px){
  .pf-slide{flex-basis:76%}
  .pf-slide:first-child{margin-left:12%}
  .pf-slide:last-child{margin-right:12%}
  .pf-alt .pf-shelf__h .pf-modes + span{display:none}   /* "33 packs, newest first" gives way to the switch on a phone */
}
/* browse-mode tune (17 Sep): white slide titles (a shelf rule paints <b> pink),
   a real peek of the neighbours on a phone, and shelf titles that stay on one
   line beside the switch */
.pf-alt .pf-slide__head b{color:#fff!important}
.pf-alt .pf-slide__head small{color:var(--pf-on-dim)!important}
@media (max-width:640px){
  .pf-slide{flex-basis:70%}
  .pf-slide:first-child{margin-left:15%}
  .pf-slide:last-child{margin-right:15%}
  /* phone: title, switch and View all on ONE row (Mike, 17 Sep) — the title is
     short enough now ("In the vault", "Every rip") to leave room for both */
  .pf-binder .pf-shelf--vault .pf-shelf__h,.pf-binder .pf-shelf--rips .pf-shelf__h{flex-wrap:nowrap;align-items:center}
  .pf-binder .pf-shelf--vault .pf-shelf__h h3,.pf-binder .pf-shelf--rips .pf-shelf__h h3{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-binder .pf-shelf--vault .pf-shelf__h .pf-modes,.pf-binder .pf-shelf--rips .pf-shelf__h .pf-modes{flex:0 0 auto;margin-left:auto}
  .pf-binder .pf-shelf--vault .pf-shelf__h .pf-all{flex:0 0 auto;margin-left:0}
  .pf-alt .pf-shelf__h .pf-modes{margin-right:6px}
}

/* browse mode (17 Sep, Mike): the track loops endlessly and never opens on a
   blank edge; both sides fade into the panel with a soft gradient rather than
   a hard cut. The wrap paints the fade over the cards, in the panel's own
   colour, so it reads as cards sliding under the edge. */
.pf-carousel-wrap{position:relative;margin:0 -24px}
.pf-carousel-wrap .pf-carousel{margin:0;padding-left:24px;padding-right:24px}
.pf-carousel-wrap::before,.pf-carousel-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(31,36,50,.8) 0,rgba(31,36,50,.45) 40%,rgba(31,36,50,.15) 75%,rgba(31,36,50,0) 100%)
}
.pf-carousel-wrap::before{left:0}
.pf-carousel-wrap::after{right:0;transform:scaleX(-1)}
.pf-carousel .pf-slide:first-child{margin-left:0}
.pf-carousel .pf-slide:last-child{margin-right:0}
.pf-carousel .pf-slide{opacity:.75}
.pf-carousel .pf-slide.is-active{opacity:1}
@media (max-width:640px){
  .pf-carousel-wrap{margin:0 -16px}
  .pf-carousel-wrap .pf-carousel{padding-left:16px;padding-right:16px}
  .pf-carousel-wrap::before,.pf-carousel-wrap::after{width:56px}
  .pf-carousel .pf-slide:first-child{margin-left:0}
  .pf-carousel .pf-slide:last-child{margin-right:0}
}

/* browse mode (17 Sep, Mike): title, date, chips and the Caught card belong to
   the highlighted card only; the neighbours show just their slab */
.pf-carousel .pf-slide__head,.pf-carousel .pf-slide__foot,.pf-carousel .pf-slide__mon{opacity:0;transition:opacity .2s}
.pf-carousel .pf-slide.is-active .pf-slide__head,.pf-carousel .pf-slide.is-active .pf-slide__foot,.pf-carousel .pf-slide.is-active .pf-slide__mon{opacity:1}
.pf-carousel .pf-slide{opacity:1}
.pf-carousel .pf-slide:not(.is-active) .pf-slide__card{opacity:.75}

/* browse mode (17 Sep, Mike): lighter side fades. The cards two or more away
   from the highlight drop right back, so nothing bright bleeds under the fade */
.pf-carousel .pf-slide:not(.is-active):not(.is-near) .pf-slide__card{opacity:.22}
.pf-carousel .pf-slide__card{transition:opacity .2s}
@media (max-width:640px){
  .pf-carousel-wrap::before,.pf-carousel-wrap::after{width:44px;background:linear-gradient(90deg,rgba(31,36,50,.7) 0,rgba(31,36,50,.25) 55%,rgba(31,36,50,0) 100%)}
}

/* browse mode (17 Sep, Mike): a real drop shadow under the slabs so they lift
   off the panel; deepest on the highlight, softer on the neighbours */
.pf-carousel .pf-slide__card img{
  box-shadow:0 4px 0 var(--pf-line),0 10px 22px rgba(0,0,0,.45),0 26px 54px rgba(0,0,0,.5);
  transition:box-shadow .2s
}
.pf-carousel .pf-slide:not(.is-active) .pf-slide__card img{box-shadow:0 4px 0 var(--pf-line),0 8px 18px rgba(0,0,0,.35)}
.pf-carousel-wrap .pf-carousel{padding-top:8px;padding-bottom:16px}

/* browse mode (17 Sep, Mike): the highlighted slab is clickable and says so —
   pointer cursor, and on hover it lifts with a deeper shadow */
.pf-carousel .pf-slide__card{cursor:pointer}
.pf-carousel .pf-slide.is-active .pf-slide__card img{transition:transform .2s,box-shadow .2s}
@media (hover:hover){
  .pf-carousel .pf-slide.is-active .pf-slide__card:hover img{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 4px 0 var(--pf-line),0 14px 28px rgba(0,0,0,.5),0 34px 64px rgba(0,0,0,.55)
  }
}
.pf-carousel .pf-slide.is-active .pf-slide__card:active img{transform:translateY(-2px) scale(1.005)}

/* podium (17 Sep, Mike): the top pulls cast a shadow too, and lift further on hover */
.pf-podium__slot img{
  box-shadow:0 3px 0 var(--pf-line),0 10px 22px rgba(0,0,0,.45),0 24px 48px rgba(0,0,0,.45);
  transition:transform .18s,box-shadow .18s
}
.pf-podium__slot--1 img{box-shadow:0 3px 0 var(--pf-line),0 12px 26px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.5)}
@media (hover:hover){
  .pf-podium__slot:hover img{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 3px 0 var(--pf-line),0 14px 28px rgba(0,0,0,.5),0 36px 68px rgba(0,0,0,.55)
  }
}

/* PHONE FABS RIDE WITH THE DOCK (Mike, 17 Sep: "when I scroll up the back and
   top buttons get hidden, they should shift up into view but return back down
   when the user scrolls down"). The profile page runs to the bottom of the
   viewport whatever the dock is doing, so the content scrolls under the dock
   like it does under the header, and the FAB pair sits on its own explicit
   offset: dock height (+8px) while the dock is home, 8px once it has slid
   away — on the dock's own .28s curve, so the two move as one. */
@media (max-width:1023px){
  html[data-layout="stage"] .pg.ov--profile[data-pf-layout]{bottom:0!important}
  /* the scroll box keeps no bottom padding (a sticky element is boxed in by
     it); the card itself carries the room that clears the dock */
  .ov--profile[data-pf-layout] .ov__body{padding-bottom:0!important}
  .ov--profile[data-pf-layout] .pf-binder{margin-bottom:calc(var(--pf-dock,58px) + 16px)}
  .ov--profile[data-pf-layout] .pf-fabs{
    bottom:calc(var(--pf-dock,58px) + 16px);   /* the same 16px under them as beside them (Mike) */
    transition:bottom .28s cubic-bezier(.2,.8,.3,1)
  }
  html[data-page-chrome="hidden"] .ov--profile[data-pf-layout] .pf-fabs{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
}

/* ONE LAYOUT (17 Sep 2026, Mike: "F version as final, delete the other variants
   and the variant picker"). BACK sits on the banner's top-left corner on the
   desktop; the phone keeps its floating pair. The toolbar row is gone, so the
   page starts at the card. */
.ov--profile .pf-nav--cover{position:absolute;top:16px!important;left:16px;z-index:3}   /* outranks .ov--profile .pf-nav{position:static} above and page.css's .pg--panel .pf-nav{top:…} */
.ov--profile[data-pf-layout] .ov__body{padding-top:16px}
@media (max-width:1023px){
  .ov--profile .pf-nav--cover{display:none}   /* the phone's BACK is the floating one */
}
/* friends tiles and rip rows lift on hover like the Pokédex tiles and vault slabs (Mike) */
.pf-binder--e .fr-tile,.pf-binder--e .pf-row{transition:transform .16s,background .16s}
.pf-binder--e .fr-tile:hover,.pf-binder--e .pf-row:hover{transform:translateY(-2px)}
/* every rip: "33 packs, newest first" sits by the title; the switch keeps the right (Mike) */
.pf-binder .pf-shelf--rips .pf-shelf__h{justify-content:flex-start}
.pf-binder .pf-shelf--rips .pf-shelf__h > h3{flex:0 0 auto}   /* the title keeps its own width so the count sits right beside it */
.pf-binder .pf-shelf--rips .pf-shelf__h .pf-shelf__count{margin-left:0;color:var(--pf-on-dim)}
.pf-binder .pf-shelf--rips .pf-shelf__h .pf-modes{margin-left:auto}
@media (max-width:640px){
  .pf-binder .pf-shelf--rips .pf-shelf__h .pf-shelf__count{display:none}
}
/* nothing ripped yet, inside the card */
.pf-binder .pf-empty--binder{text-align:center;padding:12px 0 4px;color:#fff}
.pf-binder .pf-empty--binder h3{margin:0 0 8px;font:900 26px/1 var(--display);font-style:italic;text-transform:uppercase}
.pf-binder .pf-empty--binder p{margin:0 auto 16px;max-width:46ch;color:var(--pf-on-dim);font:600 15px/1.45 var(--ui)}

/* Desktop polish (Mike, 17 Sep):
   - the card starts 16px under the header, not 58 (page.js's --pg-pad is the
     generic panel band; this page has its own BACK on the banner);
   - BACK is the banner's alone — the floating pair is TOP only above 1023
     (.ov--profile .pf-nav's display used to beat .pf-nav--fab's none);
   - the floating TOP keeps 16px in from the card's edge;
   - every button on the page answers a hover: lift and brighten. */
@media (min-width:1024px){
  html[data-layout="stage"] .pg.ov--profile[data-pf-layout] .ov__panel{padding-top:calc(var(--pg-hdr,58px) + 16px)!important}
  .ov--profile .pf-fabs .pf-nav--fab{display:none}
  .ov--profile[data-pf-layout] .pf-fabs{padding:0 16px}
  .ov--profile .pf-nav--cover{top:14px!important;left:14px}
}
@media (hover:hover){
  .pf-alt .pf-btn,.pf-alt .pf-all,.pf-alt .pf-mode{transition:transform .16s,filter .16s,background .16s,color .16s}
  .pf-alt .pf-btn:hover,.pf-alt .pf-all:hover{transform:translateY(-2px);filter:brightness(1.08)}
  .pf-alt .pf-btn:active,.pf-alt .pf-all:active{transform:translateY(0);filter:none}
}

/* phone carousel titles stay on one line and truncate rather than wrap (Mike, 17 Sep) */
@media (max-width:640px){
  .pf-slide__head{min-height:0;width:100%}
  .pf-slide__head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ================================================================
   THE PORT ONTO THE LIVE PROFILE (18 Sep 2026). Mike's page was built on a
   checkout from 15 Sep; these are the pieces the live profile needs back, and
   the things the design round never saw on real data.
   ================================================================ */

/* BACK on the sub-views and the state screens. The page paints its own BACK now
   (the banner's corner on the desktop, the floating pair on the phone), so the
   panel's one is hidden while the page is up — but "all achievements", the
   clips page and every Loading… / "no profile yet" screen are painted without a
   page under them, and on a phone those had no way back at all. */
.ov--profile[data-view="profile"]:not([data-state="1"]) .ov__panel > .pf-nav{display:none}

/* THE CLIPS AND SESSIONS BAND (clips-shelf.js). record.css lays this band out
   under .pf-b — the older grid — so inside the card it arrived unstyled: the
   two halves stacked at full width while their tile counts had been measured
   for half a width (a 118px tile drawn at ~300px), on white cards over navy. */
.pf-binder .pf-shelf--rec{display:grid;grid-template-columns:1fr;gap:0;margin:0}
.pf-binder .pf-shelf--rec2{grid-template-columns:1fr 1fr;gap:0}
.pf-binder .pf-shelf--rec > .pf-shelf{margin:0;min-width:0}
.pf-binder .pf-shelf--rec2 > .pf-shelf:first-child{padding-right:22px}
.pf-binder .pf-shelf--rec2 > .pf-shelf + .pf-shelf{padding-left:22px;border-left:2px solid var(--pf-hair)}
.pf-alt .pf-clip{background:rgba(255,255,255,.06);border-color:var(--pf-line);color:#fff;box-shadow:0 3px 0 var(--pf-line)}
.pf-alt .pf-clip__nm{color:#fff}
.pf-alt .pf-clip .clipposter{background:var(--pf-navy-hi)}
@media (max-width:1023px){
  .pf-binder .pf-shelf--rec2{grid-template-columns:1fr}
  .pf-binder .pf-shelf--rec2 > .pf-shelf:first-child{padding-right:0}
  .pf-binder .pf-shelf--rec2 > .pf-shelf + .pf-shelf{padding-left:0;border-left:0;margin-top:16px;padding-top:16px;border-top:2px solid var(--pf-hair)}
}

/* TOP PULLS with one or two cards: centred, not stranded in the left column of
   a three-column grid (profile.js adds the modifier) */
.pf-podium--1{grid-template-columns:minmax(0,320px);justify-content:center}
.pf-podium--2{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}

/* the counts strip's labels: 12px is the floor on the phone (Luke, §3.22 —
   the design round had them at 10px there, under the live page's 12px) */
.pf-alt .pf-stat>span{font-size:clamp(12px,.9vw,13px)}

/* THE CAROUSEL'S ARROWS. A finger and a trackpad move the strip; a wheel mouse
   scrolls the page instead, and clicking the next card opens it rather than
   sliding to it — so on a desktop there was no way through the strip at all.
   Only where the pointer is fine and hovers, so phones keep the clean strip. */
.pf-car__arw{display:none}
@media (hover:hover) and (pointer:fine){
  .pf-carousel-wrap .pf-car__arw{
    display:grid;place-items:center;position:absolute;top:50%;z-index:4;
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    background:#fff;border:2.5px solid var(--pf-line);box-shadow:0 3px 0 var(--pf-line);color:var(--pf-line);
    transform:translateY(-50%);transition:background .16s,transform .16s,box-shadow .16s
  }
  .pf-carousel-wrap .pf-car__arw svg{width:22px;height:22px}
  .pf-carousel-wrap .pf-car__arw--prev{left:8px}
  .pf-carousel-wrap .pf-car__arw--next{right:8px}
  .pf-carousel-wrap .pf-car__arw:hover{background:var(--pf-gold)}
  .pf-carousel-wrap .pf-car__arw:active{transform:translateY(calc(-50% + 2px));box-shadow:0 1px 0 var(--pf-line)}
  .pf-carousel-wrap .pf-car__arw:focus-visible{outline:3px solid var(--pf-gold);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){
  .pf-carousel-wrap .pf-car__arw{transition:none}
}

/* the loop moves the highlight in the same frame as its jump; nothing may
   transition through it, or the card you just landed on fades up from dim */
.pf-carousel.is-jumping .pf-slide,
.pf-carousel.is-jumping .pf-slide *{transition:none!important}

/* the Rip Card (ripcard.js) sits in the card under the counts strip, and takes
   the sections' own gutters. It stays hidden until the module fills it.
   .rip-plate is width:100% of whatever holds it — inside the old plate that was
   a ~400px column, but this card is the full page wide, which drew the Rip Card
   at 1236x1730 and buried everything under it. It keeps a card's own size. */
.pf-binder > .pf-rip{margin:0;padding:18px 24px 0}
.pf-binder > .pf-rip .rip-plate{max-width:300px}
@media (max-width:1023px){
  .pf-binder > .pf-rip{padding:16px 16px 0}
  .pf-binder > .pf-rip .rip-plate{max-width:240px;margin:0 auto}
  .pf-binder > .pf-rip .rip-h{justify-content:center}
}
/* the Rip Card box is one row now, its title and SHOW CARD (Luke, 18 Sep:
   "dont show the ugc card. just have a show playercard button"), so a
   heading's usual gap below it would only lopside the box */
.pf-binder .pf-rip .rip-row{margin:0}

/* ================================================================
   EVERY SECTION IN ITS OWN BOX (18 Sep 2026). Luke: "can I see how it would
   look if it wasn't a big black box — just like each section was in its own
   black box with rounded corners?" Shown beside the one card at his three
   sizes, he picked it: "ye separate boxes is the play". profile.js paints
   .pf-binder--boxes on the card; the markup is the one card's, and this
   block is the whole difference.
   The card stops being a surface: each section, and each module mount while
   it is shown, becomes its own navy box with the card's own 2.5px key border,
   22px radius and 5px drop, 16px apart (the page's 16px rhythm), so the
   hairlines between sections go. The cover and the counts strip stay one box.
   Each box clips to its own rounded corners; the card's overflow used to do
   that for everything in it, the banner's top corners above all (the cover's
   own radius does it now). The carousel's side fades are painted in
   --pf-navy, the boxes' own fill, so they still melt into it.
   ================================================================ */
.pf-binder.pf-binder--boxes{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.pf-binder.pf-binder--boxes > .pf-binder__sec,
.pf-binder.pf-binder--boxes > .pf-rip,
.pf-binder.pf-binder--boxes > .pf-ach{
  margin:16px 0 0;background:var(--pf-navy);border:2.5px solid var(--pf-line);border-radius:22px;
  box-shadow:0 5px 0 var(--pf-line);overflow:hidden
}
/* the first box in two parts: the cover (banner + identity) over the counts
   strip, the strip's own hairline between them */
.pf-binder.pf-binder--boxes > .pf-binder__cover{border:2.5px solid var(--pf-line);border-bottom:0;border-radius:22px 22px 0 0}
.pf-binder.pf-binder--boxes > .pf-binder__strip{
  border:2.5px solid var(--pf-line);border-top:2px solid var(--pf-hair);border-radius:0 0 22px 22px;
  box-shadow:0 5px 0 var(--pf-line);overflow:hidden
}
/* the Rip Card had no foot of its own (the next section's top padding was its
   air); as a box it takes the sections' gutters all round */
.pf-binder.pf-binder--boxes > .pf-rip{padding:24px}
@media (max-width:1023px){
  .pf-binder.pf-binder--boxes > .pf-rip{padding:16px}
}
/* a mount its module has not filled stays [hidden]: no empty box, no gap */
.pf-binder.pf-binder--boxes > [hidden]{display:none}

/* ── FOLLOWS (PLAN-FOLLOWERS-17SEP) ──────────────────────────────────────── */
/* THE THREE COUNTS on the plate (§4.3.2). The plate had four stats and no
   friend count at all; these three are their own row rather than a fifth,
   sixth and seventh stat. On your own profile each one is the door to its tab
   — which is also the answer to §3.6, "there is nowhere to find the people you
   follow who haven't followed back". */
.pf-social{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.pf-social[hidden]{display:none}
.pf-soc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;padding:8px 6px;border:2px solid var(--key);border-radius:12px;background:#fff;
  font:inherit;color:var(--key);text-align:center;cursor:pointer}
.pf-soc b{font:900 20px/1 var(--display);font-style:italic;font-variant-numeric:tabular-nums}
.pf-soc span{font:800 11px/1.1 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:#3A4354}
.pf-soc:hover{background:var(--yellow,#FFFE9A)}
.pf-soc:active{transform:translateY(2px)}
/* someone else's counts are numbers, not doors: there is no view of THEIR
   followers, and a button that opens nothing is worse than a figure */
.pf-soc--flat{cursor:default}
.pf-soc--flat:hover{background:#fff}
/* FOLLOWS YOU (§4.3.1): the one place the asymmetry is visible before you act.
   Full width above the button so FOLLOW BACK is never mistaken for FOLLOW. */
.fr-you{flex:1 0 100%;order:-1;font:800 12px/1.2 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:#3A4354}
/* the confirm sentence needs a line of its own on a narrow plate (§3.5) */
.pf-share{flex-wrap:wrap}
.fr-ask{flex:1 0 100%}
/* THE THREE TABS. The strip is the site's own .otabs, the same component the
   avatar picker wears, with the count riding in the tab so an empty one is
   visibly empty before it is opened. */
.fr-tabs{margin:0 0 10px}
.fr-tabn{margin-left:7px;opacity:.62;font-variant-numeric:tabular-nums}
/* FRIEND, ON A FOLLOWER ROW (§5d.10). On Followers and Following the only sign
   that somebody was already a friend was the ABSENCE of a FOLLOW BACK button —
   a difference nobody reads. The chip is the first fact in the row, ahead of
   the rank, and it is a WORD: the fact never depends on the colour. It is the
   same sticker the row's own buttons are, one size down, and it is not a
   button, so it carries no shadow and no hover. */
.fr-friend{display:inline-flex;align-items:center;padding:3px 9px;border:2px solid var(--key);border-radius:999px;background:var(--yellow,#FFFE9A);font:900 12px/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--key);white-space:nowrap}
/* SHOW ALL (§5d.5): the rows past the first 200. Under the list, centred, the
   same VIEW ALL sticker the shelves wear — and only on the tabs where the list
   on the page is shorter than the count beside the tab. */
.fr-more{display:flex;justify-content:center;margin:12px 0 0}
.fr-more .pf-all{margin-left:0}
.pf-note--sm{margin:0 0 10px;font:600 13px/1.4 var(--ui)}
@media (max-width:1023px){
  /* EVERY ROW ACTION IS A THUMB TARGET on the phone. The list is now something
     you act on (follow back, unfollow), not just read. */
  .pf-view--friends .fr-act{min-height:44px}
  /* THE ACTIONS GET THEIR OWN LINE on the phone, in the tabs' own lists only.
     Three buttons took 199px of the 350px row and the handle was clipped at
     65px against 76px of text (measured, 390x844) — and that is with ENGLISH:
     "Unfollow" is "Nicht mehr folgen" in German. A row that has to truncate a
     person's name to fit a verb is the wrong row. The search results below the
     box keep the inline layout: they carry one button. */
  .pf-view--friends > .fr-list .fr-row__acts{grid-column:1 / -1;grid-row:3;justify-content:flex-start;flex-wrap:wrap}
  /* ALL THREE TABS ON ONE LINE. The stage layout wraps .otabs (stage.css:2493),
     which put Following on a second row at 390 — measured 114+137+135 + gaps
     against 350 of strip. A three-column grid and 14px type fit them in 111px
     each, and the 44px thumb target is kept. */
  html[data-layout="stage"] .fr-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  html[data-layout="stage"] .fr-tabs .otab{min-height:44px;justify-content:center;gap:5px;padding:9px 4px;font-size:14px}
  .fr-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .fr-tabs .otab{min-height:44px;justify-content:center;gap:5px;padding:9px 4px;font-size:14px}
  .pf-soc{min-height:62px}
  .pf-soc b{font-size:22px}
  .pf-soc span{font-size:12px}
  .pf-note--sm{font-size:14px}
  .fr-you{font-size:13px}
  /* nothing under 12px on the phone (HANDOFF-174 §3.19), and SHOW ALL is a
     thumb target like every other action in these lists */
  .fr-friend{font-size:13px;padding:4px 10px}
  .fr-more .pf-all{min-height:44px;display:inline-flex;align-items:center}
}

/* ── FOLLOWS ON THE NEW PROFILE (18 Sep 2026, Luke's pick B: "a separate box looks well
   better") ──────────────────────────────────────────────────────────────────────────────
   Friends / Followers / Following are their own navy box under the numbers box, in the
   numbers' own type: gold figures, the dim uppercase label. On your own profile each one is
   a door to its list (friends.js draws the chevron). "Follows you" is a gold pill beside
   their rank and clan (friends.js youPill). The rules above this block are the old plate's. */
.pf-binder.pf-binder--boxes > .pf-social{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:16px 0 0;
  background:var(--pf-navy);border:2.5px solid var(--pf-line);border-radius:22px;
  box-shadow:0 5px 0 var(--pf-line);overflow:hidden
}
.pf-binder .pf-social .pf-soc{
  min-height:56px;padding:12px 10px;background:transparent;border:0;
  border-left:2px solid var(--pf-hair);border-radius:0;box-shadow:none;color:#fff
}
.pf-binder .pf-social .pf-soc:first-child{border-left:0}
html .pf-binder .pf-social .pf-soc b{
  color:var(--pf-gold);font-family:var(--pf-display);font-weight:900;font-style:italic;
  font-size:24px;line-height:1;text-shadow:0 2px 0 var(--pf-line)
}
.pf-binder .pf-social .pf-soc span{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;color:var(--pf-on-dim);
  font-family:var(--pf-display);font-weight:700;font-size:clamp(10px,.9vw,12px);
  letter-spacing:.14em;text-transform:uppercase
}
.pf-binder .pf-social .pf-soc span svg{width:12px;height:12px;flex:0 0 auto}
.pf-binder .pf-social button.pf-soc:hover{background:rgba(255,255,255,.06)}
.pf-binder .pf-social .pf-soc--flat:hover{background:transparent}
.pf-binder__pills .fr-you-pill{
  padding:0 12px;background:var(--pf-gold);color:var(--pf-line);border-color:var(--pf-line);
  text-transform:uppercase
}
/* THE UNFOLLOW CONFIRM on the new profile (18 Sep). As followers built it the sentence sat in
   the button slot at its full length: on desktop the header's auto-sized button column took it
   on one line and squeezed the name to a letter a line (381px tall at 1147, gift probe
   door-life), and its dark words sat on the light banner. Now the button block keeps a width,
   the sentence wraps on a navy note of its own, and Unfollow / Keep are 44px targets. */
@media (min-width:1024px){
  .pf-binder--f .pf-binder__actions{max-width:400px}
}
.pf-binder .pf-share-row{flex-wrap:wrap}
.pf-binder #pfFriend[data-ask="1"]{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px}
.pf-binder #pfFriend[data-ask="1"] .fr-ask{
  flex:1 0 100%;padding:8px 12px;border:2px solid var(--pf-line);border-radius:12px;
  background:var(--pf-navy);color:#fff;font:700 14px/1.35 var(--ui)
}
.pf-binder #pfFriend .fr-btn--sm{flex:1 1 0;min-height:44px}