/* pnew.css — generated by tools/build_css.sh, do not edit */
/* Self-hosted Google Fonts (OFL). Generated by tools/fetch_fonts.sh. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/Anton-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/Anton-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/Caveat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/Caveat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/InterTight-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/InterTight-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter (owner 01.11. Modern Dark: the member area's face; owner 03.11.: every page outside takes it too). The files were on
   disk but had no face, so pages fell back to a local Inter or the system font. Variable, one file per subset. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The logo (owner 01.11. / 02.11.: the new wordmark everywhere, not only in the plastik look) — Pirata One, SIL OFL,
   one weight; used by .pc-logo only (the browser fetches it only where a logo is drawn) */
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/PirataOne.woff2) format('woff2');
}
/* panty.com v3 tokens: a literal port of the :root of design/v2/cast-mockup.html (owner 30.09.: the mockup is the spec).
   docs/design-v3-system.md §1 has the table. Every colour is a token; outside this file a colour is only ever var(--x).
   Block 1 = the mockup's own names and values (constants, the same in light and dark: brand objects keep their colour).
   Block 2 = the pnew role names every template and page file uses, pointed at the mockup values.
   The dark block and the auto-dark block are identical (tests/theme_test.php checks it). */
:root{
  /* ============ 1 · MOCKUP :root (cast-mockup.html l.11-21), 1:1 ============ */
  --duck: #e7eaf2; --duck-2: #d5dbe9; --duck-3: #c1cadd;
  --pink: #00b3ff; --pink-press: #0094e0; --pink-soft: #a6e4ff;
  --anthracite: #0b1020;            /* mockup --ink: the dark blocks, the ink button, text on paper objects */
  --card-dk: #121a2b;               /* mockup --card-dk: tiles and boxes on a dark block */
  --cream: #FBF5EC; --paper: #FFFDF8;
  --on-dark: #eaf0fa; --muted-dk: #9fb0c8; --muted-lt: #495060;
  --mline: rgba(128,128,128,.5);    /* mockup --line: THE line (owner: grey 50 %, never white), on paper and on chrome */
  --hline: rgba(128,128,128,.2);    /* owner 05.11. «die line ist scheisse in der top navi, zu prägnant»: the header's bottom hairline only, quieter than --mline */
  --lhair-o: .32;                   /* owner 06.11. «haarline bei listen viel zu krass, muss eher andeuten»: the row line in lists = --mline at this opacity (grey 16 %), fading out at both ends (inside.css) */
  --live: #1f79a3;                  /* mockup .chip b: the live dot */
  --ph-a: #d8dce5; --ph-b: #cdd2de; --ph-ink: #686f7f;   /* mockup .ph stripes: a missing photo */
  --fig-shadow: drop-shadow(0 24px 40px rgb(16 23 25 / .22));
  --rim-pink: drop-shadow(0 0 1px #00b3ff) drop-shadow(0 20px 40px rgb(0 0 0 / .45));
  --dash: rgb(16 23 25 / .28);      /* the dashed seam inside care labels, the arch */
  --dash-2: rgb(16 23 25 / .35);    /* the dashed seam inside the big care label */
  --stamp-fill: rgb(232 241 240 / .55);
  --mt-light: rgb(232 241 240 / .85); --mt-dark: rgb(16 23 25 / .85);   /* masking tape on notes */
  --btn-edge-ink: #000000;          /* .btn--ink box-shadow 0 6px 0 #000 */
  --btn-edge-on-accent: color-mix(in srgb, var(--pink) 58%, var(--anthracite));   /* owner 05.10.: the black button on a pink card needs an edge that is not its own face */
  --white: #FFFFFF;                 /* .btn--ink / .real / .sticker--black text */
  /* ONE FACE (design system 03.11., docs/design-system.md §3): Inter, set HERE on :root, so every alias that is resolved on
     :root (--display, --font-display, --label …) is Inter in every scope — before, --display was resolved against the old
     --body "Inter Tight" on :root and every head inside stayed Inter Tight although the member scope set Inter (MCH-007,
     MSL-001, MBY-005). The alias names stay until wave 2 has moved every rule onto --body / --type-*. --display-lc is the
     wordmark only (Pirata One); --hand (Caveat) is gone: its notes take the page face (owner 03.11.: no marker fonts). */
  --display: var(--body); --display-lc: "Pirata One", system-ui, sans-serif; --display-tape: var(--body);
  --body: "Inter", system-ui, sans-serif; --label: var(--body); --hand: var(--body);

  /* Mockup geometry (not in its :root, read off its selectors) */
  --wrap-max: 1280px; --wrap-pad: 56px;           /* .wrap */
  --hdr-h: 69px;                                  /* .hdr: .wrap 68 + the 1 px line under it */
  /* The scale: six sizes (phone values in the 700 block below; the 06.10. poster sizes in brackets). */
  --fs-xl: clamp(40px, 4.4vw, 58px);   /* 1 hero        .pc-h-xl            phone 40 (AD pass 06.11.)         [86 / 72] */
  --fs-l: 44px;                        /* 2 statement   .pc-h-l             phone 32                          [92 / 54] */
  --fs-m: 34px;                        /* 3 page head   .pc-h-m, page h1    phone 27                          [58 / 40] */
  /*   the page h1 is --fs-h1, one step per tier: outside 34 / phone 27, inside 24 / phone 24, the selling moments inside
       (wizards, membership, Premium wall) 30 / phone 24 (UX 17.10. #81, design system 03.11.; the INSIDE TIER below sets it) */
  --fs-section: 21px;                  /* 4 section     .pc-h-card, card and panel heads, prose h2/h3   phone 18 [34 / 30] */
  --fs-subhead: 16px;                  /* 5 sub head    FAQ questions, notes, reviews, plan names       phone 15 [24 / 22] */
  --btn-fs: 15px; --btn-sm-fs: 13px;   /* 6 action: keys 15 (= --fs-body), small keys and chips 13 (= --fs-meta), owner decision 03.11. */
  --lh-hero: 1.04; --lh-head: 1.12; --lh-sub: 1.2; --lh-tape: 1.28;   /* tape: the line pitch is the tape box (Inter Tight content area 1.21 + pad .06), so the next line's tape never covers a descender (N4 #82) */
  --tr-h: -.025em; --tr-head: -.018em; --tr-btn: 0em; --tr-num: -.01em;
  --tape-pad: .02em .14em .04em;
  /* radii: aliases of the four design-system radii (docs/design-system.md §5; wave 2 replaces the names) */
  --r-label: var(--r-s); --r-stamp: var(--r-s); --r-icon: var(--r-m); --r-rules: var(--r-m); --r-pcard: var(--r-m); --r-tile: var(--r-m);
  --r-box: var(--r-l); --r-door: var(--r-l); --r-empty: var(--r-l); --r-note: var(--r-s);

  /* ============ 2 · pnew role names (aliases onto the mockup) ============ */
  /* photo house look (owner 06.10., docs/photo-look-06-10.md): ONE dial, --photo-look 0 off · 1 subtle · 1.6 medium (default) ·
     2.2 strong. Every amount below is "per 1.0 of the dial" and the rules multiply it by --photo-look, so the three strengths
     are one number. The server still normalises each card photo (lib/grade.php); the CSS then pulls the whole set together:
     img filter  = owner 09.10. ("washed out, needs more power"): a little MORE saturation and contrast, no lift
     ::before    = colour pull: --photo-tint in blend mode "color" (hue + saturation of the tint, the photo keeps its light)
     ::after     = tone: one multiply layer of warm paper x vignette x foot shade x fine grain (--photo-shade/-foot/-grain)
     --photo-ease is the hover multiplier (cards show more true colour under the pointer, --photo-hover).
     Same values in light and dark (the theme blocks below do not touch them). */
  --photo-look: 1.6; --photo-ease: 1; --photo-hover: .4;
  --photo-desat: -.06; --photo-contrast: .1; --photo-lift: -.02; --photo-wash: .05; --photo-tone: .12;   /* owner 09.10.: was .07 / -.05 / .04 / .09 / .3 (faded) — the light pink pull stays */
  --photo-tint: #D9A99C; --photo-blend: color; --photo-tone-blend: multiply;
  --photo-shade: radial-gradient(125% 100% at 50% 40%, #FFEFE8 40%, #B9B4B6 100%);
  --photo-foot: linear-gradient(180deg, #FFFFFF 58%, #D8D2D2 100%);
  --photo-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='.3 0 0 0 .81  .3 0 0 0 .81  .3 0 0 0 .81  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Premium: the ink label with the pink mark (mockup .real). --prem-bg is themed below. */
  --on-prem: var(--white);
  --prem-stripe: color-mix(in srgb, var(--prem-bg) 88%, var(--accent));
  /* The gold-bronze Premium pill (owner 15.10.: "goldbronze mässig und animiert", components.css .pc-chip--premium): a brand
     object, the same in light and dark. Rest = light metal with the dark bronze ink (>= 5.2:1 on every stop); chosen =
     dark bronze with the pale gold ink (>= 6.4:1); the sheen is the slow light that sweeps over the rest state. */
  --prem-metal: linear-gradient(135deg, #C89B4A 0%, #F3DA94 38%, #D9AE5C 62%, #B9863A 100%);
  --prem-metal-ink: #2A1904;
  --prem-metal-dk: linear-gradient(135deg, #3B2609 0%, #6E4A17 50%, #3B2609 100%);
  --prem-metal-dk-ink: #FCE6A6;
  --prem-metal-bevel: inset 0 1px 0 rgb(255 246 214 / .75), inset 0 -1px 0 rgb(110 70 20 / .35);
  --prem-metal-ring: inset 0 0 0 1px #D9AE5C;
  --prem-sheen: linear-gradient(105deg, transparent 38%, rgb(255 250 232 / .7) 50%, transparent 62%);
  /* Chrome inks (header, footer, tabbar: mockup .hdr/.ftr) and the 50 % grey chrome line. */
  --on-chrome: var(--on-dark); --on-chrome-2: var(--muted-dk);
  --chrome-line: rgba(128,128,128,.5);   /* = --mline */
  --chrome-press: color-mix(in srgb, var(--chrome-2) 80%, var(--on-chrome));
  --chrome-tint: color-mix(in srgb, var(--on-chrome) 16%, transparent);
  --chrome-tint-press: color-mix(in srgb, var(--on-chrome) 26%, transparent);
  /* Cream stickers, knobs, text on photos (mockup .sticker--cream). On-sticker = the anthracite ink. */
  --sticker-cream: var(--cream); --on-sticker: var(--anthracite);

  /* Tonal steps (owner 05.10.: "alles durch unterschiedlich helle Flächen, nicht durch Linien"). The member area is
     built from four tones, never from borders: ground (--bg / --app-ground) → panel (--surface, one step up in dark,
     paper in light) → well (--sunken: the in-panel tile, the chat bubble in, the pill at rest, the alert) → hover
     (--surface-2). Fields are filled, not outlined: --field on the ground, --field-in inside a panel (components.css
     re-points --field there); the ring on focus is the only edge a field gets. --chrome-well = the tonal square /
     search pill on the chrome (header icon squares, header search). No borders (owner 18.10.): --line (grey 50 %) is
     transparent on every page except admin (the NO BORDERS block at the foot); separation is a surface step. Only
     fields (3:1 edge), focus rings, error states and the quiet listing-card edge (--t-card-edge) draw a line. */
  --chrome-well: color-mix(in srgb, var(--on-chrome) 9%, var(--chrome));
  --chrome-well-hover: color-mix(in srgb, var(--on-chrome) 16%, var(--chrome));
  /* State layers (one hover/press step per surface, never a new colour). */
  --surface-2: color-mix(in srgb, var(--sunken) 89%, var(--ink));
  --ink-press: color-mix(in srgb, var(--ink) 86%, var(--bg));
  --accent-soft-press: color-mix(in srgb, var(--accent-soft) 85%, var(--accent));
  --on-accent-2: color-mix(in srgb, var(--on-accent) 75%, transparent);
  --on-accent-press: color-mix(in srgb, var(--on-accent) 12%, transparent);
  --accent-well: color-mix(in srgb, var(--sticker-cream) 55%, var(--accent));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --danger-line: color-mix(in srgb, var(--danger) 40%, transparent);
  --hand-ink: var(--pink);          /* mockup .hand: Caveat notes are pink (ink on a pink block) */
  /* T41: pink that carries information (median prices, stars, proof %, draft band) on light grounds: >= 5:1 on paper
     and duck. Decorative Caveat notes stay --pink. Dark theme: plain --pink (it reads on the dark grounds). */
  --pink-ink: #243c76;       /* the same on paper objects in both themes (they keep their light colours) */
  --pink-text: var(--pink-ink);
  /* v2 glow is gone (mockup buttons have a hard edge, no glow). Kept as a no-op shadow for page files. */
  --glow: 0 0 0 0 transparent;
  --pulse-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --on-blush: var(--on-accent);
  --ring-story: var(--accent);
  --star: var(--accent);

  /* Overlays */
  --bg-veil: color-mix(in srgb, var(--bg) 90%, transparent);
  /* direct order wizard (owner 06.10., pages/order.css; mockup design/v2/direct-order-wizard.html): the page glow that warms
     with every step (--do-heat is set by order.js, 0 to 22), the sticky bars' veils, the card shade, the level ladder's fill */
  --do-heat: 0;
  --do-glow: radial-gradient(60% 60% at 50% 0%, rgb(255 157 178 / calc(var(--do-heat, 0) * 1%)), transparent 70%);
  --do-top-veil: color-mix(in srgb, var(--bg) 92%, transparent);
  --do-dock-veil: color-mix(in srgb, var(--chrome) 94%, transparent);
  --do-card-shade: linear-gradient(180deg, rgb(16 23 25 / .4) 0%, transparent 26%, transparent 52%, rgb(16 23 25 / .9) 100%);
  --do-foot-2: color-mix(in srgb, var(--on-dark) 78%, transparent);
  --do-ladder: linear-gradient(var(--pink-soft), var(--pink), var(--pink-press));
  --surface-veil: color-mix(in srgb, var(--surface) 65%, transparent);
  --dk-veil: color-mix(in srgb, var(--dk-bg) 72%, transparent);     /* a cast label on anthracite (art-director round 30.09.) */
  --pink-veil: color-mix(in srgb, var(--pink) 82%, transparent);    /* a cast label on pink */
  --glass: rgba(9,13,14,.36);
  --glass-strong: rgba(9,13,14,.6);
  --backdrop: color-mix(in srgb, var(--prem-bg) 95%, transparent);
  --on-media: var(--sticker-cream);
  --on-media-2: color-mix(in srgb, var(--on-media) 75%, transparent);
  --media-track: color-mix(in srgb, var(--on-media) 30%, transparent);
  --media-rule: color-mix(in srgb, var(--on-media) 45%, transparent);
  --media-dim: color-mix(in srgb, var(--on-sticker) 16%, transparent);
  --media-shade: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--prem-bg) 75%, transparent));
  --shade-card: linear-gradient(to bottom, var(--glass), transparent 22%, transparent 52%, color-mix(in srgb, var(--prem-bg) 72%, transparent));
  /* Seller card portrait (docs/sellercard-02-10.md): the caption sits on the photo, so these are the same in light and dark.
     --scard-shade = the faint top veil (glass like) + ambient foot; --scard-cap-shade rides on the caption, so a taller
     caption (premium kicker, a wrapped status) always carries its own shade (many stops, no band). */
  --scard-shade: linear-gradient(180deg, rgb(16 23 25 / .14) 0%, rgb(16 23 25 / 0) 16%, rgb(16 23 25 / 0) 55%, rgb(16 23 25 / .12) 75%, rgb(16 23 25 / .2) 100%);
  --scard-cap-shade: linear-gradient(180deg, rgb(16 23 25 / 0) 0%, rgb(16 23 25 / .1) 14%, rgb(16 23 25 / .32) 32%, rgb(16 23 25 / .58) 52%, rgb(16 23 25 / .76) 74%, rgb(16 23 25 / .84) 100%);
  /* adcard2 03.10.: the listing card's caption shade, lighter than the portrait's: only the foot of a product photo
     darkens (title + "@name" stay readable), the item's colour above it stays judgeable. */
  --pcard-cap-shade: linear-gradient(180deg, rgb(16 23 25 / 0) 0%, rgb(16 23 25 / .16) 22%, rgb(16 23 25 / .44) 50%, rgb(16 23 25 / .64) 78%, rgb(16 23 25 / .7) 100%);
  /* cards3 05.10. (owner: no box under the photo): Premium = a blush tint over the caption shade, on both card kinds. */
  --pcard-cap-blush: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 42%, transparent) 100%), var(--pcard-cap-shade);
  --scard-cap-blush: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 42%, transparent) 100%), var(--scard-cap-shade);
  --scard-ink: var(--cream); --scard-ink-2: rgb(251 245 236 / .76); --scard-ink-3: rgb(251 245 236 / .55);
  --scard-tshadow: 0 1px 2px rgb(16 23 25 / .4);
  --scard-glass: rgb(16 23 25 / .32); --scard-glass-hover: rgb(16 23 25 / .52);
  --ground-shadow: color-mix(in srgb, var(--anthracite) 55%, transparent);   /* 05.10.: a cut-out's soft ground shadow (hero) */
  --scard-online: #2FD27A; --scard-online-halo: 0 0 0 3px rgb(47 210 122 / .25);
  --shade-hero: linear-gradient(100deg, color-mix(in srgb, var(--chrome) 88%, transparent) 0%, color-mix(in srgb, var(--chrome) 64%, transparent) 55%, color-mix(in srgb, var(--chrome) 78%, transparent) 100%);
  --shade-hero-blur: linear-gradient(100deg, color-mix(in srgb, var(--chrome) 72%, transparent) 0%, color-mix(in srgb, var(--chrome) 44%, transparent) 55%, color-mix(in srgb, var(--chrome) 62%, transparent) 100%);
  --shade-hero-plain: linear-gradient(100deg, color-mix(in srgb, var(--chrome) 90%, transparent) 0%, color-mix(in srgb, var(--chrome) 55%, transparent) 70%, color-mix(in srgb, var(--chrome) 30%, transparent) 100%);
  --shade-paygate: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--scrim) 60%, transparent));
  /* Profile cover banner (detail.css .pn-dtcover): the foot shade on a photo, the brand-stripe fallback and its shade. */
  --shade-cover: linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--scrim) 70%, transparent));
  --shade-cover-plain: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg) 55%, transparent));
  --stripes-cover: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pink) 16%, var(--surface)) 0 14px, color-mix(in srgb, var(--pink) 30%, var(--surface)) 14px 28px);

  /* Skin ramp: avatar fallbacks only (never a surface or text). */
  --skin-50: #FCE0D0; --skin-100: #F9D3C0; --skin-200: #F2C4AE; --skin-300: #E2A98C; --skin-400: #D0907A;
  --skin-500: #C98767; --skin-600: #9A5A40; --skin-650: #8A5140; --skin-700: #7A4535; --skin-800: #5E3021; --skin-900: #2A120C;
  --skin: var(--skin-200);
  --hero-bg: #B08670;
  /* The pink arch (mockup .arch: flat --pink with a dashed seam). */
  --ph-arch: var(--pink);
  --duck-egg: var(--duck-2);
  --ph-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --ph-vignette: none;
  --ph-landing: linear-gradient(90deg, color-mix(in srgb, var(--skin) 75%, transparent) 0%, transparent 58%);
  /* Avatar fallbacks: the initial on a toned circle, toned by member id. A17 (owner 18.10., innen-50): ONE placeholder system —
     the initial in ink (--ink) on six muted tonal fills over --sunken (teal, slate, sand, sage, lilac, stone), never pink
     (pink is the one key and the unread mark), so it reads in both themes. g6 / g7 stay for the buyer masks (lock tokens). */
  --av-g0: color-mix(in srgb, #5671b1 26%, var(--sunken)); --av-g1: color-mix(in srgb, #8FA6C8 26%, var(--sunken));
  --av-g2: color-mix(in srgb, #C8B48F 26%, var(--sunken)); --av-g3: color-mix(in srgb, #9FBF8A 24%, var(--sunken));
  --av-g4: color-mix(in srgb, #B39FCC 26%, var(--sunken)); --av-g5: color-mix(in srgb, #A0A8AE 24%, var(--sunken));
  --av-g6: var(--av-g0); --av-g7: var(--anthracite);
  --av-ink: var(--ink); --av-ink-light: var(--on-dark);
  /* A14 (owner 18.10.): a key on a photo (remove X, turn, swap) — dark glass, never pale cream on the picture */
  --photo-key-bg: color-mix(in srgb, var(--anthracite) 62%, transparent);

  /* Paper objects (keep their colour in light and dark: care labels, notes, receipts, stamps, tape, pegs). */
  --obj-paper: var(--paper); --obj-cream: var(--cream); --obj-ink: var(--anthracite); --obj-ink-2: var(--muted-lt); --obj-ink-3: #293040;
  --obj-muted: #b7bece; --obj-muted-2: #757d90; --obj-alarm: #0a4fb5;
  --obj-line: var(--dash); --obj-line-2: var(--dash-2); --obj-fill: rgba(16,23,25,.1);
  --tape-pink: color-mix(in srgb, var(--accent) 78%, transparent);
  --peg: var(--accent); --peg-2: #3459b1; --peg-spring: #8F8F96; --rope: #7c8497;
  --cut-band: rgba(16,23,25,.35); --cut-bow: color-mix(in srgb, var(--sticker-cream) 55%, transparent);
  --cut-seam: color-mix(in srgb, currentColor 70%, #0b1020);

  /* Elevation. The mockup's cards carry NO shadow (a 1 px --mline border instead); only objects, notes, stickers,
     receipts and the frame float. --sh-1 / --sh-2 are therefore none; floating chrome uses the frame shadow. */
  --sh-knob: 0 2px 6px rgb(16 23 25 / .25);
  --sh-sticker: 0 6px 16px rgb(16 23 25 / .15);                 /* .sticker */
  --sh-cut: drop-shadow(0 24px 40px rgb(16 23 25 / .22));       /* .fig / .obj (= --fig-shadow) */
  --sh-band: 0 6px 16px rgb(16 23 25 / .15);
  --sh-print: 0 20px 40px rgb(16 23 25 / .12);                  /* .receipt */
  --sh-pola: 0 10px 24px rgb(16 23 25 / .14);
  --sh-label: 0 18px 30px rgb(0 0 0 / .4);                      /* .clabel-big */
  --sh-tag: drop-shadow(0 24px 40px rgb(16 23 25 / .22));
  --sh-receipt: 0 20px 40px rgb(16 23 25 / .12);                /* .receipt */
  --sh-note: 0 10px 24px rgb(16 23 25 / .14);                   /* .note */
  --sh-tape: 0 1px 3px rgb(16 23 25 / .18);
  --sh-lift: 0 10px 24px rgb(16 23 25 / .14);
  --sh-tape-hl: 0 10px 24px rgb(16 23 25 / .14);
  --sh-hand: 0 2px 10px rgb(16 23 25 / .3);
  --sh-frame: 0 30px 80px rgb(16 23 25 / .25);                  /* .frame: menus, sheets, dialogs, toasts */
  /* premium editorial pass (owner 27.10., outside only): photo cards float on a soft diffuse shadow instead of the 1 px
     edge, lift 3 px on hover; one overlay darkens the lower half of every photo card so the name always reads. */
  --sh-card: 0 8px 24px rgb(16 23 25 / .10);
  --sh-card-hover: 0 14px 36px rgb(16 23 25 / .16);
  --sh-floating: 0 18px 48px rgb(16 23 25 / .20);
  --sh-pink: 0 6px 18px rgb(244 132 157 / .28);
  --card-rim: inset 0 0 0 1px rgb(16 23 25 / .05);
  --r-card-x: 16px;
  --dur-card: 220ms;
  --card-overlay: linear-gradient(to bottom, transparent 35%, rgb(0 0 0 / .12) 55%, rgb(0 0 0 / .78) 100%);
  --card-cap-scrim: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .22) 60%, rgb(0 0 0 / .3) 100%);
  --card-cap-scrim-strong: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .5) 45%, rgb(0 0 0 / .78) 100%);   /* home SEO strip (04.11.): her caption reads on a white photo */
  --btn-pink-grad: linear-gradient(180deg, #8dbed4 0%, var(--pink) 45%, var(--pink-press) 100%);
  --btn-dk-grad: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .04));
  --btn-dk-grad-hover: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .06));
  --sh-pink-hover: 0 8px 22px rgb(244 132 157 / .3);
  --chip-glass: rgb(16 23 25 / .42);   /* the card's metadata chips on the photo */
  --chrome-grad: linear-gradient(180deg, #121620 0%, var(--chrome) 100%);
  --sh-chrome-soft: 0 1px 0 rgb(255 255 255 / .03), 0 10px 28px rgb(0 0 0 / .28);
  --font-hand: var(--hand);
  /* Care-label pictograms (mask shapes painted with currentColor). */
  --mask-tub: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5c1.5-1.4 3-1.4 4.5 0s3 1.4 4.5 0 3-1.4 4.5 0 3 1.4 4.5 0L19 19H5z'/><path d='M4 4l16 17M20 4 4 21'/></svg>");
  --mask-bleach: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4 21 19H3z'/><path d='M5 5l14 15M19 5 5 20'/></svg>");
  --mask-iron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 17h16c0-4-2.5-7-7-7H8l-1-3'/><path d='M5 5l14 15M19 5 5 20'/></svg>");
  --mask-scribble: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M4 40C18 38 34 30 44 18c4-5 6-10 6-14M50 4l-8 6M50 4l4 9'/></svg>");
  --mask-stamp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.5 1.72'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --mask-zigzag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'><path d='M0 16V8l7-3 6 5 6-6 8 5 6-6 8 6 6-3 8 5 7-8 7 6 8-4 6 5 8-6 7 4 7-3 8 5 7-2v16z'/></svg>");
  --mask-rope: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M-2 2 Q 50 26 102 2' fill='none' stroke='black' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linecap='round'/></svg>");
  /* Type: Inter Tight (heads, body, labels; --font-display = the head role), Anton (the wordmark), Caveat (notes only). */
  --font-display: var(--display);
  --font-sans: var(--body); --font-label: var(--label);
  --fs-h1: var(--fs-m); --fs-price-card: 15px;   /* --fs-h1: the page h1 step (scale, 3 above) */
  /* Numerals and pieces that carried their own size (Sleek 08.10.: set outside too, so no rule falls back to a poster size;
     the inside tier sets its own below): tile numeral, the listing's price, stat numerals, plan name, empty-state head,
     FAQ question / review head. */
  --fs-tile: 28px; --fs-price-l: 28px; --fs-price-m: 22px; --fs-num: 20px; --fs-plan: 18px; --fs-empty: 20px; --fs-sub-s: 16px;
  /* Shape (mockup radii) */
  --radius-sticker: var(--r-stamp); --radius-tile: var(--r-rules); --radius-card: var(--r-pcard); --radius-panel: var(--r-box);
  --radius-sheet: var(--r-empty); --radius-bubble: var(--r-pcard); --radius-full: 999px;
  /* Space + controls (Sleek 08.10.). Button: Inter Tight 600 14, padding 10/16 + 1 px border = 40 tall (phone 44); small
     34 (phone 40); radius 10; flat (no hard edge). Fields 42 (phone 44). */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  /* controls (docs/design-system.md §7.1): two page heights — small 36 (phone 44), standard 44 for keys AND fields — and the
     44 tap floor; 48 is the chrome's header key only. --control-btn / --control-field / --control-lg are aliases. */
  --control-sm: 36px; --control-md: 44px; --control-btn: 44px; --control-field: 44px;
  --control-lg: 44px;
  --btn-py: var(--space-2); --btn-px: var(--space-4);
  --btn-sm-py: var(--space-1); --btn-sm-px: var(--space-3);
  --r-btn: var(--r-m); --r-btn-sm: var(--r-m); --r-field: var(--r-m); --r-field-foot: var(--r-field); --r-chip: var(--r-m);   /* --r-field-foot: the filled field's lower corners (no borders 18.10.; round again since the underline went, owner 18.10.) */
  /* The column (mockup .wrap: max 1280 incl. 2 x 56 padding = 1168 content). Header, main and footer share it. */
  --panel-pad: 20px; --section-gap: 32px; --page-head-gap: 24px; --main-max: 1168px;
  --gutter: var(--wrap-pad);
  --col-pad: max(var(--gutter), calc((100% - var(--main-max)) / 2));
  /* Shell geometry (one phone breakpoint: <=700 / >=701, the mockup's container 700) */
  --header-h: var(--hdr-h);
  --flush-top: calc(var(--header-h) + env(safe-area-inset-top));
  --sticky-top: calc(var(--header-h) + var(--space-3));
  /* Wide member grid pages (owner 30.09.: "nicht so viel freie Flächen"): .pn-wide on the page root (layout.css) widens
     header, main and footer to --wide-max with --wide-gutter and tightens the page head (docs/design-v3-system.md §4.2a). */
  --wide-max: 1680px; --wide-gutter: 32px; --wide-head-gap: 16px; --wide-grid-gap: 16px;
  /* Member shell (docs/inner-grounding-01-10.md): every member page sits on the wide column; the page head is a band
     under the chrome (.pc-apphead), blocks below it keep one gap, page sections one bigger gap. */
  --app-top: 24px;          /* main top when the first block is its own anchor (profile cover, membership hero, chat panes) */
  --app-head-pb: 16px;      /* the head band's padding under its last line (above it: --app-top) */
  --app-gap: var(--stack-gap);         /* alias of --stack-gap: between panels, cards and bars inside a page */
  --app-sec-gap: var(--section-gap);   /* alias of --section-gap: between page sections */
  /* Row lists in a paper card (flush panels, alerts, chats, orders): the card keeps --list-pad, the rows are inset by
     --row-inset, so a row's avatar, the line between rows and the card head all start on the --panel-pad edge. */
  --list-pad: 8px; --row-inset: calc(var(--panel-pad) - var(--list-pad));
  --tabbar-h: 64px;
  --dock: calc(var(--space-4) + env(safe-area-inset-bottom));
  --dock-flush: env(safe-area-inset-bottom);   /* T17: a sticky bar that sits flush on the tab bar (no 16px air) */
  /* Motion */
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --ease-snap: cubic-bezier(.2,.9,.1,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-sway: cubic-bezier(.45,0,.55,1);
  --dur-press: 140ms; --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 450ms; --dur-enter: 600ms; --dur-print: 1400ms;
  --stagger: 70ms; --reveal-y: 16px;
  /* Vertical rhythm (mockup section paddings) */
  --sec-gap: 56px;        /* between landing sections (06.10.: 72) */
  --sec-gap-mega: 72px;   /* the big buy / sell blocks (06.10.: 96) */
  --sec-gap-stack: 32px;
  --sec-head-gap: 16px;   /* .sec-head margin-bottom */
  --mega-pad-top: 72px; --mega-pad-bot: 64px;
  --edge-h: 16px;
  /* Measures */
  --measure-prose: 640px; --measure-lede: 560px; --measure-note: 340px; --measure-mega: 14ch;
  /* Brand type scale */
  --fs-lede: 16px; --fs-sub: 14px; --fs-prose: 15.5px;
  /* art director 27.10.: the editorial family (buy, sell, about, safety, rules, FAQ, imprint, terms, guides) on one
     scale: lede, body, h2, h3, the gap between blocks, the extra room before a section head */
  --fs-ed-lede: 19px; --fs-ed-body: 17px; --fs-ed-h2: 26px; --fs-ed-h3: 19px; --ed-gap: 16px; --ed-sec: 32px;
  --fs-hand-s: 21px; --fs-hand: 24px; --fs-hand-l: 24px;
  --tr-label: 0em;   /* labels are sentence case, untracked (Sleek 08.10.; was .14em caps) */
  /* Tilts the mockup itself uses (stamp -9, sticker 7, note -1.2 / 1, care label -5, receipt 1.5, hand -2 / -3) */
  --tilt-xs: 0deg; --tilt-s: 0deg; --tilt-m: 0deg; --tilt-l: 0deg;   /* v3: no free tilt; only the mockup's own rotations (literal degrees on their components) */
  --tap: 44px;
  /* Landing glam pass (owner 30.09.: "sanfte Verläufe, mehr Glam, weniger KI-Slop"): geometry of the soft section edges */
  --lp-dome-h: 64px;                /* the flat arch a dark / pink block rises with over the section before it */
  --lp-lace-r: 11px;                /* the scalloped lace hem under the pink block */
  --lp-reveal-dur: 900ms;
}
/* ==========================================================================================================================
   DESIGN SYSTEM (owner 03.11.2026: «ein echtes Design-System bauen, damit neue Features nicht mehr scheiße aussehen»;
   docs/design-system.md, enforced by tests/design_system_test.php). The names below are the system; a new rule reads only
   these. Geometry (type, space, radii, controls, icons, avatars, motion) is the same in every theme and on every page; the
   colour ROLES are set per theme (the Modern Dark values in the member block at the foot of this file). The old names stay
   as aliases of these until wave 2 has moved every page file (the list: docs/design-system.md §3.2, §5, §7.1).
   ========================================================================================================================== */
:root{
  /* type: 7 sizes, whole pixels, px line heights; three weights */
  --fs-cap: 12px; --fs-meta: 13px; --fs-body: 15px; --fs-ui: 16px; --fs-title: 18px; --fs-display: 30px;
  --lh-cap: 16px; --lh-meta: 18px; --lh-body: 22px; --lh-ui: 24px; --lh-prose: 26px; --lh-title: 24px; --lh-h1: 30px; --lh-display: 36px;
  --w-regular: 400; --w-strong: 600; --w-bold: 700;
  --type-cap: 600 12px/16px var(--body); --type-meta: 400 13px/18px var(--body); --type-label: 600 13px/18px var(--body);
  --type-body: 400 15px/22px var(--body); --type-strong: 600 15px/22px var(--body); --type-ui: 400 16px/24px var(--body);
  --type-nav: 600 16px/24px var(--body);   /* owner decision 03.11.: the header nav on 600 (three weights) */
  --type-prose: 400 16px/26px var(--body); --type-title: 700 18px/24px var(--body);
  --type-h1: 700 24px/30px var(--body); --type-num: 700 24px/30px var(--body); --type-display: 700 30px/36px var(--body);
  /* space: the 4 px grid and its roles */
  --space-10: 40px; --space-16: 64px;
  --row-pad: 12px 16px; --head-gap: 12px; --stack-gap: 16px;
  --label-gap: 8px; --help-gap: 4px; --field-gap: 16px;
  /* shape: four radii */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-full: 999px;
  /* controls: two page heights, the tap floor, the chrome key */
  --header-key: 48px;
  /* icons and avatars */
  --icon-s: 16px; --icon-m: 20px; --icon-l: 24px;
  --avatar-xs: 24px; --avatar-s: 32px; --avatar-m: 40px; --avatar-l: 48px; --avatar-xl: 64px; --avatar-2xl: 96px;
  /* motion */
  --dur-1: 150ms; --dur-2: 200ms;
  /* layout */
  --rail-w: 360px; --prose-max: 720px;
  /* colour roles every theme has (the member dark block sets the real ones; light keeps its own until the owner's light
     decision, docs/design-system.md §19.4): the third surface step, the glyph grey, the one shadow of a float */
  --surface-3: var(--surface-2); --glyph-off: var(--ink-3); --shadow-e1: var(--sh-float);
  --hero-blush: var(--alt-spot-2);   /* the guest home hero (owner 04.11. AD pass): the picture's pink light spilling onto the copy under it (pink at 26 % in light, 16 % in dark: the alt look's soft light, no new colour); never a fill of its own */
  --art-glow: radial-gradient(closest-side, rgb(255 157 178 / .22), rgb(255 157 178 / .07) 55%, rgb(255 157 178 / 0));   /* brand light behind dolls / objects / devices on guest pages only (owner 03.11., §13a); never behind text, never on a card */
}
/* the home hero review variants (owner 05.11., landing.css «1b»; scoped to the home's root, so no other bundle carries them): the near-black stage of a / b and the slabs of c are the
   member chrome tone in BOTH themes with the member dark inks on it; the shades are that tone at alpha, the plum is the
   accent's light at 12 % over it (no new colour) */
.pn-lb--cm:is(.pn-hm){
  --hero-night: #0B0C0E; --hero-night-ink: #F5F5F7; --hero-night-ink-2: #A2A4AD; --hero-night-key: #26282E; --hero-night-key-2: #303239;
  --hero-poster-shade: radial-gradient(ellipse 55% 60% at 0% 88%, rgb(11 12 14 / .55), rgb(11 12 14 / 0)), linear-gradient(to bottom, rgb(11 12 14 / 0) 28%, rgb(11 12 14 / .5) 50%, rgb(11 12 14 / .86) 70%, #0B0C0E 100%);
  --hero-panel-shade: linear-gradient(to bottom, rgb(11 12 14 / 0) 60%, rgb(11 12 14 / .4));
  --hero-plum: radial-gradient(ellipse 45% 70% at 66% 50%, rgb(255 157 178 / .12), rgb(255 157 178 / 0) 75%), radial-gradient(ellipse 90% 120% at 60% 40%, rgb(255 157 178 / .12), rgb(255 157 178 / 0) 75%), #0B0C0E;
}
@media (max-width:700px){
  :root{--header-key: 44px; --type-display: 700 24px/30px var(--body)}
}
/* Accented capitals (Á É Í Ê Ñ) rise above the cap line, Ç and ¿ hang: the head line-heights open up a little in
   es/fr/it/pt, and the tape gets head room so the accent stays on the pink. */
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)){--lh-hero: 1.12; --lh-head: 1.18; --lh-sub: 1.24; --lh-tape: 1.32; --tape-pad: .04em .14em .06em}   /* the tape opens with the lines: pitch 1.32 = box (content area + pad .1), so no tape covers the line above (N4 #82) */
/* Colour roles per theme. Light = the mockup page (duck egg, paper cards, anthracite ink). */
:root, [data-theme="light"]{
  color-scheme: light;
  --accent: #00b3ff;
  --accent-press: #0094e0;
  --accent-soft: #a6e4ff;
  --accent-text: #0a4fb5;
  --on-accent: #0b1020;
  --pink-glyph: #275367;   /* visual audit VG-015 (26.10.): #284589 was 4.14:1 on the page ground, this is AA (4.5+) on bg, canvas and surface. night N8 #83: stars, step numbers, the price median on paper: 4.7:1 on surface, >= 3.7:1 on bg and canvas (pink-press is 2.4:1) */
  --blush: var(--accent);
  --focus-ring: var(--anthracite);
  --canvas: #d5dbe9; --bg: #e7eaf2; --surface: #FFFDF8; --sunken: #d5dbe9;
  --field: #FFFDF8; --field-in: #edf0f5;   /* tonal fields: paper on the duck ground, a duck tint inside a paper panel */
  --dkbox: #0b1020; --dkbox-tile: #121a2b;   /* the dark box (reach, hero stat, order card, go-live) and its tiles: anthracite on paper */
  --bubble-in: #FFFDF8;                      /* the chat in-bubble, day label, system line: paper on the duck-2 log */
  --ink: #0b1020; --ink-2: #495060; --ink-3: #686f7f;
  --line: rgba(128,128,128,.5); --line-2: rgba(128,128,128,.5);
  --line-3: var(--ink-3);
  --btn-line-edge: var(--ink);   /* outline-button frame: ink on light */
  --btn-line-bg: var(--surface);   /* UX 17.10. #41: the outline key's fill: paper on light */
  --pola-edge: var(--obj-paper);   /* UX 17.10. #43: the photo frame of the join wizard: the paper polaroid on light */
  --chrome: #0a0f1d; --chrome-2: #121a2b; --prem-bg: #0b1020;
  --online: #1f79a3; --success: #0A763C; --on-success: #FFFFFF;
  --warning: #8A5A00;
  --danger: #B8342A; --on-danger: #FFFFFF;
  --oxblood: var(--chrome-2);
  --ph-media: repeating-linear-gradient(135deg, #d8dce5 0 10px, #cdd2de 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #d8dce5 0 10px, #cdd2de 10px 20px);
  --ph-text: #686f7f;
  --prem-ring: transparent;
  --chrome-ring: transparent;
  --btn-ink: #252b39; --on-btn-ink: #FFFFFF; --btn-ink-edge: #06080e;   /* owner 01.10.: face lifted off the edge so the 6px hard shadow reads (was #0b1020 on #000) */
  --dk-bg: #0b1020; --dk-card: #121a2b; --dk-ink: #eaf0fa; --dk-ink-2: #9fb0c8;
  --tape: rgba(232,241,240,.85); --rule-ink: var(--ink); --star-edge: var(--accent-text);
  --scrim: rgba(16,23,25,.45);
  --sh-1: none;
  --sh-2: none;
  --sh-float: 0 30px 80px rgb(16 23 25 / .25);
  --sh-sheet: 0 -20px 60px rgb(16 23 25 / .25);
  /* Admin dashboard (design/v2/admin-mockup.html; dataviz-validated: CVD + normal-vision pass, Bestand hatched) */
  --adm-good: #1B7446; --adm-good-bg: #dbe2f3; --adm-bad: #B42336; --adm-bad-bg: #d1e5ee; --adm-neutral-bg: #e2e5ed;
  --adm-hover: #f0f2f8; --adm-grid: rgba(16,23,25,.08); --adm-hatch: rgba(255,255,255,.55);
  --adm-c-best: #9aa3b8; --adm-c-leg: #434b5f; --adm-c-pnew: #2e4f9d;
  --adm-av-a: #edf0f6; --adm-av-b: #c7cddb; --adm-tip-sh: 0 8px 24px rgba(0,0,0,.25); --adm-dlg-sh: 0 24px 64px rgba(0,0,0,.35);
  /* ---- landing glam pass (owner 30.09.): soft layered surfaces, satin, grain, sheen. Light. ---- */
  --lp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .06  0 0 0 0 .09  0 0 0 0 .1  0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(255 157 178 / .30), transparent 72%), radial-gradient(48% 60% at 6% 0%, rgb(255 253 248 / .95), transparent 70%), linear-gradient(180deg, #edf0f6 0%, #e7eaf2 62%, #e5e8f0 100%);
  --lp-real-bg: radial-gradient(34% 40% at 96% 46%, rgb(255 211 221 / .34), transparent 72%), linear-gradient(180deg, #e5e8f0 0%, #e7eaf2 30%, #e7eaf2 100%);
  --lp-real-bg-l: radial-gradient(34% 40% at 4% 50%, rgb(255 211 221 / .34), transparent 72%), linear-gradient(180deg, #e7eaf2 0%, #e7eaf2 100%);   /* owner 27.10.: the light from the other side on every second section */
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(255 157 178 / .20), transparent 72%), radial-gradient(40% 55% at 6% 4%, rgb(126 196 196 / .16), transparent 70%), radial-gradient(60% 40% at 50% 104%, rgb(255 157 178 / .08), transparent 70%), linear-gradient(172deg, #181e2b 0%, #10141d 48%, #070b16 100%);
  --lp-buy-line: var(--mline);   /* owner rule: grey 50 %, never white (was white .09) */
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(255 211 221 / .72), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgb(255 253 248 / .8), transparent 70%), linear-gradient(180deg, #e5e8f0 0%, #eeeff2 100%);
  --lp-sell-bg: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .20) 34%, rgb(255 255 255 / .04) 44%, transparent 52%, rgb(255 255 255 / .12) 70%, transparent 82%), radial-gradient(62% 70% at 12% 8%, #a8cdde 0%, transparent 72%), radial-gradient(56% 64% at 96% 96%, #3963c5 0%, transparent 72%), linear-gradient(180deg, #7693d7 0%, #00b3ff 55%, #577bce 100%);
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(255 211 221 / .55), transparent 72%), linear-gradient(180deg, #FFF7F5 0%, #FFFDF8 260px, #FFFDF8 calc(100% - 220px), #e7eaf2 100%);
  --lp-lace: #FFF7F5;              /* the lace hem = the laundry room's first paper tone */
  --lp-guides-bg: linear-gradient(180deg, #e7eaf2 0%, #e7eaf2 100%);
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(255 211 221 / .45), transparent 72%), linear-gradient(180deg, #e7eaf2 0%, #e2e6ee 100%);
  --lp-arch: radial-gradient(70% 55% at 32% 18%, #aebfe7 0%, transparent 70%), radial-gradient(60% 50% at 88% 90%, #4491b4 0%, transparent 70%), linear-gradient(165deg, #90bfd5 0%, #00b3ff 50%, #486fca 100%);
  --lp-arch-glow: 0 40px 90px -30px rgb(244 132 157 / .55);
  --lp-tape: linear-gradient(100deg, #8dbed4 0%, #00b3ff 38%, #9db2e3 52%, #00b3ff 66%, #567ace 100%);
  --lp-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .42) 48%, rgb(255 255 255 / .06) 56%, transparent 66%);
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(255 157 178 / .12), transparent 70%), linear-gradient(165deg, #1a202e 0%, #10141d 100%);
  --lp-box-cr: radial-gradient(80% 70% at 0% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(165deg, #FFFBF4 0%, #F7EEE2 100%);
  --lp-inner-hi: inset 0 1px 0 rgb(255 255 255 / .75);
  --lp-inner-hi-dk: inset 0 1px 0 rgb(255 255 255 / .07);
  --lp-card-lift: 0 22px 44px -22px rgb(16 23 25 / .35);
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(255 157 178 / .22), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgb(126 196 196 / .14), transparent 70%), linear-gradient(160deg, #191f2d 0%, #0a0f1d 100%);
  --lp-door-sell: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 38%, transparent 54%), radial-gradient(80% 90% at 0% 0%, #a8cdde 0%, transparent 70%), linear-gradient(160deg, #83b8d0 0%, #00b3ff 55%, #539cbe 100%);
  --lp-row-hover: linear-gradient(90deg, rgb(255 211 221 / .55), rgb(255 211 221 / 0) 80%);
  --lp-real2-bg: linear-gradient(180deg, #e7eaf2 0%, #e5e8f0 100%);
  --lp-fav-bg: rgb(255 255 255 / .72);
  --lp-chip-bg: rgb(255 253 248 / .72); --lp-chip-ink: var(--anthracite);
  --lp-step-sh: 0 1px 0 rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .35);
  --lp-marker: var(--pink);
  --lp-host-arch: linear-gradient(180deg, #d5dbe9 0%, rgb(215 231 229 / .35) 100%); --lp-host-rim: transparent;
  --lp-cut-rim: none;
  --alt-spot: rgb(255 122 150 / .46); --alt-spot-2: rgb(255 157 178 / .26);   /* alt-look hero: the light cone and its soft edge (owner 12.10. evening) */
  --lp-footer-bg: var(--chrome);
  --lp-num-ink: var(--pink-ink);
  --lp-hero-end: #e5e8f0;
  /* Member head band (docs/inner-grounding-01-10.md): the landing hero surface, quieter: paper with a soft pink glow on
     the right. One image (it is painted as a border-image across the full bleed, see layout.css). */
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #d8e0f4 0%, #FFF4F2 40%, #FFFDF8 100%);
  --app-ground: #e7eaf2;   /* the member page under the band (light: the duck egg, unchanged) */
}
[data-theme="dark"]{
  color-scheme: dark;
  --accent: #00b3ff;
  --accent-press: #0094e0;
  --accent-soft: #171d2c;
  --accent-text: #00b3ff;
  --on-accent: #0b1020;
  --pink-glyph: var(--pink-press);   /* night N8 #83: the brand pink reads on the dark grounds (light: a deeper pink) */
  --blush: var(--accent);
  --focus-ring: var(--accent);
  --canvas: #070b16; --bg: #0b1020; --surface: #121a2b; --sunken: #222939;   /* tonal pass 05.10.: the well one clear step over the panel */
  --field: #1b212e; --field-in: #282f40;   /* tonal fields: one step up on the ground, one more inside a panel */
  --dkbox: #121a2b; --dkbox-tile: #282f40;   /* dark: the dark box IS the panel tone, its tiles the field step (everything is anthracite here) */
  --bubble-in: #222939;                      /* the chat in-bubble: the well tone on the deep log */
  --ink: #eaf0fa; --ink-2: #9fb0c8; --ink-3: #6b7489;
  --line: rgba(128,128,128,.5); --line-2: rgba(128,128,128,.5);
  --line-3: var(--ink-3);
  --btn-line-edge: var(--line);   /* dark: grey 50 %, never a white frame (owner rule) */
  --btn-line-bg: var(--sunken);   /* dark: the tonal well */
  --pola-edge: var(--chrome-well-hover);   /* dark: a tonal frame, never white on black (owner rule) */
  --chrome: #0a0f1d; --chrome-2: #121a2b; --prem-bg: #0a0f1d;
  --online: #2FD27A; --success: #2FD27A; --on-success: #0b1020;
  --warning: #F2B84B;
  --danger: #FF8A7A; --on-danger: #0b1020;
  --oxblood: var(--line-2);
  --ph-media: repeating-linear-gradient(135deg, #1b212e 0 10px, #202636 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #1b212e 0 10px, #202636 10px 20px);
  --ph-text: #9fb0c8;
  --stamp-fill: #e7eaf2;   /* T43: paper objects keep their light look in dark (opaque, not 55 % over the dark ground) */
  --pink-text: var(--pink);
  --prem-ring: rgba(128,128,128,.5);
  --chrome-ring: rgba(128,128,128,.5);
  --btn-ink: #292e3b; --on-btn-ink: #FFFFFF; --btn-ink-edge: #07090f;   /* owner 05.10.: no pale white buttons on dark — slate face, white text */
  --dk-bg: #0a0f1d; --dk-card: #121a2b; --dk-ink: #eaf0fa; --dk-ink-2: #9fb0c8;
  --tape: rgba(232,241,240,.45); --rule-ink: var(--chrome-line); --star-edge: var(--accent);
  --scrim: rgba(5,8,9,.65);
  --sh-1: none;
  --sh-2: none;
  --sh-float: 0 0 0 1px rgba(128,128,128,.5), 0 30px 80px rgb(0 0 0 / .6);
  --sh-sheet: 0 0 0 1px rgba(128,128,128,.5), 0 -20px 60px rgb(0 0 0 / .6);
  --adm-good: #5CCB90; --adm-good-bg: rgba(92,203,144,.14); --adm-bad: #FF7F8B; --adm-bad-bg: rgba(255,127,139,.14); --adm-neutral-bg: #1d2330;
  --adm-hover: #181d29; --adm-grid: rgba(234,242,242,.07); --adm-hatch: rgba(0,0,0,.35);
  --adm-c-best: #40495e; --adm-c-leg: #79839a; --adm-c-pnew: #00b3ff;
  --adm-av-a: #232938; --adm-av-b: #121a2b; --adm-tip-sh: 0 8px 24px rgba(0,0,0,.5); --adm-dlg-sh: 0 24px 64px rgba(0,0,0,.65);
  /* ---- landing glam pass (owner 30.09.). Dark: deep anthracite with a faint cyan / pink glow, the pink block stays satin. ---- */
  --lp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .95  0 0 0 0 .95  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(255 157 178 / .16), transparent 72%), radial-gradient(48% 60% at 6% 0%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(180deg, #121723 0%, #10141d 60%, #0b1020 100%);
  --lp-real-bg: radial-gradient(ellipse 48% 46% at 100% 50%, rgb(255 157 178 / .075), transparent 75%), linear-gradient(180deg, #0b1020 0%, #0b1020 100%);
  --lp-real-bg-l: radial-gradient(ellipse 55% 46% at 0% 50%, rgb(255 157 178 / .085), transparent 75%), linear-gradient(180deg, #0b1020 0%, #0b1020 100%);   /* owner 27.10.: ambient pink from the left, centred so it fades before the section's edges (no seam) */
  --sh-card: 0 8px 24px rgb(0 0 0 / .18); --sh-card-hover: 0 14px 36px rgb(0 0 0 / .28); --sh-floating: 0 18px 48px rgb(0 0 0 / .32);
  --sh-pink: 0 6px 18px rgb(255 157 178 / .16); --card-rim: inset 0 0 0 1px rgb(255 255 255 / .045);
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(255 157 178 / .17), transparent 72%), radial-gradient(40% 55% at 6% 4%, rgb(126 196 196 / .14), transparent 70%), radial-gradient(60% 40% at 50% 104%, rgb(255 157 178 / .07), transparent 70%), linear-gradient(172deg, #191f2d 0%, #11151e 48%, #070b16 100%);
  --lp-buy-line: rgba(128,128,128,.5);
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(255 157 178 / .11), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgb(126 196 196 / .08), transparent 70%), linear-gradient(180deg, #121a2b 0%, #121620 100%);
  --lp-sell-bg: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .03) 44%, transparent 52%, rgb(255 255 255 / .07) 70%, transparent 82%), radial-gradient(62% 70% at 12% 8%, #70adc9 0%, transparent 72%), linear-gradient(160deg, #4896ba 0%, #3c60b5 55%, #415fa5 100%);
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(255 157 178 / .10), transparent 72%), linear-gradient(180deg, #181d2a 0%, #121a2b 260px, #121a2b calc(100% - 220px), #0b1020 100%);
  --lp-lace: #181d2a;
  --lp-guides-bg: linear-gradient(180deg, #0b1020 0%, #0b1020 100%);
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(255 157 178 / .08), transparent 72%), linear-gradient(180deg, #0b1020 0%, #0d1018 100%);
  --lp-arch: radial-gradient(70% 55% at 32% 18%, #aebfe7 0%, transparent 70%), radial-gradient(60% 50% at 88% 90%, #4491b4 0%, transparent 70%), linear-gradient(165deg, #90bfd5 0%, #00b3ff 50%, #486fca 100%);
  --lp-arch-glow: 0 40px 100px -30px rgb(255 157 178 / .35);
  --lp-tape: linear-gradient(100deg, #8dbed4 0%, #00b3ff 38%, #9db2e3 52%, #00b3ff 66%, #567ace 100%);
  --lp-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .32) 48%, rgb(255 255 255 / .05) 56%, transparent 66%);
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(255 157 178 / .10), transparent 70%), linear-gradient(165deg, #1c2230 0%, #11151e 100%);
  --lp-box-cr: radial-gradient(80% 70% at 0% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(165deg, #FFFBF4 0%, #F7EEE2 100%);
  --lp-inner-hi: inset 0 1px 0 rgb(255 255 255 / .10);
  --lp-inner-hi-dk: inset 0 1px 0 rgb(255 255 255 / .07);
  --lp-card-lift: 0 22px 44px -22px rgb(0 0 0 / .7);
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(255 157 178 / .18), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(160deg, #1c2230 0%, #11151e 100%);
  --lp-door-sell: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 38%, transparent 54%), radial-gradient(80% 90% at 0% 0%, #a8cdde 0%, transparent 70%), linear-gradient(160deg, #83b8d0 0%, #00b3ff 55%, #539cbe 100%);
  --lp-row-hover: linear-gradient(90deg, rgb(255 157 178 / .12), rgb(255 157 178 / 0) 80%);
  --lp-real2-bg: linear-gradient(180deg, #0b1020 0%, #0a0f1d 100%);
  --lp-fav-bg: rgb(16 23 25 / .55);
  --lp-chip-bg: rgb(255 255 255 / .06); --lp-chip-ink: var(--dk-ink);
  --lp-step-sh: 0 1px 0 rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .6);
  --lp-marker: rgb(255 157 178 / .45);
  --lp-host-arch: linear-gradient(180deg, #1f283d 0%, rgb(34 52 58 / .4) 100%); --lp-host-rim: rgb(255 157 178 / .25);
  --lp-cut-rim: drop-shadow(0 0 1px rgb(255 255 255 / .35));
  --alt-spot: rgb(255 157 178 / .52); --alt-spot-2: rgb(255 157 178 / .16);
  --lp-footer-bg: #090b11;
  --lp-num-ink: var(--pink);
  --lp-hero-end: #0b1020;
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1E2529 40%, #121a2b 100%);
  --app-ground: #070b16;   /* dark: one step under the chrome, so chrome, band, page and paper read as layers */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  color-scheme: dark;
  --accent: #00b3ff;
  --accent-press: #0094e0;
  --accent-soft: #171d2c;
  --accent-text: #00b3ff;
  --on-accent: #0b1020;
  --pink-glyph: var(--pink-press);   /* night N8 #83: the brand pink reads on the dark grounds (light: a deeper pink) */
  --blush: var(--accent);
  --focus-ring: var(--accent);
  --canvas: #070b16; --bg: #0b1020; --surface: #121a2b; --sunken: #222939;   /* tonal pass 05.10.: the well one clear step over the panel */
  --field: #1b212e; --field-in: #282f40;   /* tonal fields: one step up on the ground, one more inside a panel */
  --dkbox: #121a2b; --dkbox-tile: #282f40;   /* dark: the dark box IS the panel tone, its tiles the field step (everything is anthracite here) */
  --bubble-in: #222939;                      /* the chat in-bubble: the well tone on the deep log */
  --ink: #eaf0fa; --ink-2: #9fb0c8; --ink-3: #6b7489;
  --line: rgba(128,128,128,.5); --line-2: rgba(128,128,128,.5);
  --line-3: var(--ink-3);
  --btn-line-edge: var(--line);
  --btn-line-bg: var(--sunken);
  --pola-edge: var(--chrome-well-hover);
  --chrome: #0a0f1d; --chrome-2: #121a2b; --prem-bg: #0a0f1d;
  --online: #2FD27A; --success: #2FD27A; --on-success: #0b1020;
  --warning: #F2B84B;
  --danger: #FF8A7A; --on-danger: #0b1020;
  --oxblood: var(--line-2);
  --ph-media: repeating-linear-gradient(135deg, #1b212e 0 10px, #202636 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #1b212e 0 10px, #202636 10px 20px);
  --ph-text: #9fb0c8;
  --stamp-fill: #e7eaf2;   /* T43: paper objects keep their light look in dark (opaque, not 55 % over the dark ground) */
  --pink-text: var(--pink);
  --prem-ring: rgba(128,128,128,.5);
  --chrome-ring: rgba(128,128,128,.5);
  --btn-ink: #292e3b; --on-btn-ink: #FFFFFF; --btn-ink-edge: #07090f;   /* owner 05.10.: no pale white buttons on dark — slate face, white text */
  --dk-bg: #0a0f1d; --dk-card: #121a2b; --dk-ink: #eaf0fa; --dk-ink-2: #9fb0c8;
  --tape: rgba(232,241,240,.45); --rule-ink: var(--chrome-line); --star-edge: var(--accent);
  --scrim: rgba(5,8,9,.65);
  --sh-1: none;
  --sh-2: none;
  --sh-float: 0 0 0 1px rgba(128,128,128,.5), 0 30px 80px rgb(0 0 0 / .6);
  --sh-sheet: 0 0 0 1px rgba(128,128,128,.5), 0 -20px 60px rgb(0 0 0 / .6);
  --adm-good: #5CCB90; --adm-good-bg: rgba(92,203,144,.14); --adm-bad: #FF7F8B; --adm-bad-bg: rgba(255,127,139,.14); --adm-neutral-bg: #1d2330;
  --adm-hover: #181d29; --adm-grid: rgba(234,242,242,.07); --adm-hatch: rgba(0,0,0,.35);
  --adm-c-best: #40495e; --adm-c-leg: #79839a; --adm-c-pnew: #00b3ff;
  --adm-av-a: #232938; --adm-av-b: #121a2b; --adm-tip-sh: 0 8px 24px rgba(0,0,0,.5); --adm-dlg-sh: 0 24px 64px rgba(0,0,0,.65);
  /* ---- landing glam pass (owner 30.09.). Dark: deep anthracite with a faint cyan / pink glow, the pink block stays satin. ---- */
  --lp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .95  0 0 0 0 .95  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(255 157 178 / .16), transparent 72%), radial-gradient(48% 60% at 6% 0%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(180deg, #121723 0%, #10141d 60%, #0b1020 100%);
  --lp-real-bg: radial-gradient(ellipse 48% 46% at 100% 50%, rgb(255 157 178 / .075), transparent 75%), linear-gradient(180deg, #0b1020 0%, #0b1020 100%);
  --lp-real-bg-l: radial-gradient(ellipse 55% 46% at 0% 50%, rgb(255 157 178 / .085), transparent 75%), linear-gradient(180deg, #0b1020 0%, #0b1020 100%);   /* owner 27.10.: ambient pink from the left, centred so it fades before the section's edges (no seam) */
  --sh-card: 0 8px 24px rgb(0 0 0 / .18); --sh-card-hover: 0 14px 36px rgb(0 0 0 / .28); --sh-floating: 0 18px 48px rgb(0 0 0 / .32);
  --sh-pink: 0 6px 18px rgb(255 157 178 / .16); --card-rim: inset 0 0 0 1px rgb(255 255 255 / .045);
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(255 157 178 / .17), transparent 72%), radial-gradient(40% 55% at 6% 4%, rgb(126 196 196 / .14), transparent 70%), radial-gradient(60% 40% at 50% 104%, rgb(255 157 178 / .07), transparent 70%), linear-gradient(172deg, #191f2d 0%, #11151e 48%, #070b16 100%);
  --lp-buy-line: rgba(128,128,128,.5);
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(255 157 178 / .11), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgb(126 196 196 / .08), transparent 70%), linear-gradient(180deg, #121a2b 0%, #121620 100%);
  --lp-sell-bg: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .03) 44%, transparent 52%, rgb(255 255 255 / .07) 70%, transparent 82%), radial-gradient(62% 70% at 12% 8%, #70adc9 0%, transparent 72%), linear-gradient(160deg, #4896ba 0%, #3c60b5 55%, #415fa5 100%);
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(255 157 178 / .10), transparent 72%), linear-gradient(180deg, #181d2a 0%, #121a2b 260px, #121a2b calc(100% - 220px), #0b1020 100%);
  --lp-lace: #181d2a;
  --lp-guides-bg: linear-gradient(180deg, #0b1020 0%, #0b1020 100%);
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(255 157 178 / .08), transparent 72%), linear-gradient(180deg, #0b1020 0%, #0d1018 100%);
  --lp-arch: radial-gradient(70% 55% at 32% 18%, #aebfe7 0%, transparent 70%), radial-gradient(60% 50% at 88% 90%, #4491b4 0%, transparent 70%), linear-gradient(165deg, #90bfd5 0%, #00b3ff 50%, #486fca 100%);
  --lp-arch-glow: 0 40px 100px -30px rgb(255 157 178 / .35);
  --lp-tape: linear-gradient(100deg, #8dbed4 0%, #00b3ff 38%, #9db2e3 52%, #00b3ff 66%, #567ace 100%);
  --lp-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .32) 48%, rgb(255 255 255 / .05) 56%, transparent 66%);
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(255 157 178 / .10), transparent 70%), linear-gradient(165deg, #1c2230 0%, #11151e 100%);
  --lp-box-cr: radial-gradient(80% 70% at 0% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(165deg, #FFFBF4 0%, #F7EEE2 100%);
  --lp-inner-hi: inset 0 1px 0 rgb(255 255 255 / .10);
  --lp-inner-hi-dk: inset 0 1px 0 rgb(255 255 255 / .07);
  --lp-card-lift: 0 22px 44px -22px rgb(0 0 0 / .7);
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(255 157 178 / .18), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(160deg, #1c2230 0%, #11151e 100%);
  --lp-door-sell: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 38%, transparent 54%), radial-gradient(80% 90% at 0% 0%, #a8cdde 0%, transparent 70%), linear-gradient(160deg, #83b8d0 0%, #00b3ff 55%, #539cbe 100%);
  --lp-row-hover: linear-gradient(90deg, rgb(255 157 178 / .12), rgb(255 157 178 / 0) 80%);
  --lp-real2-bg: linear-gradient(180deg, #0b1020 0%, #0a0f1d 100%);
  --lp-fav-bg: rgb(16 23 25 / .55);
  --lp-chip-bg: rgb(255 255 255 / .06); --lp-chip-ink: var(--dk-ink);
  --lp-step-sh: 0 1px 0 rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .6);
  --lp-marker: rgb(255 157 178 / .45);
  --lp-host-arch: linear-gradient(180deg, #1f283d 0%, rgb(34 52 58 / .4) 100%); --lp-host-rim: rgb(255 157 178 / .25);
  --lp-cut-rim: drop-shadow(0 0 1px rgb(255 255 255 / .35));
  --alt-spot: rgb(255 157 178 / .52); --alt-spot-2: rgb(255 157 178 / .16);
  --lp-footer-bg: #090b11;
  --lp-num-ink: var(--pink);
  --lp-hero-end: #0b1020;
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1E2529 40%, #121a2b 100%);
  --app-ground: #070b16;   /* dark: one step under the chrome, so chrome, band, page and paper read as layers */
  }
}
/* PHONE (mockup @container page (max-width:700px)) */
@media (max-width:700px){
  :root{
    --wrap-pad: 16px; --hdr-h: 59px;
    --fs-xl: 40px; --fs-l: 32px;   /* AD pass 06.11.: whole pixels on phones (the clamp gave 40.56 at 390, 37.4 at 360) */
    --fs-m: 27px; --fs-section: 18px; --fs-subhead: 15px;
    --control-sm: 44px;   /* touch: every key 44 on a phone (visual audit VM-020, docs/design-system.md §7.1) */
    --panel-pad: 16px; --page-head-gap: 16px; --stack-gap: 12px;
    --section-gap: 24px;
    --header-h: var(--hdr-h); --gutter: var(--wrap-pad);
    --sticky-top: calc(var(--header-h) + env(safe-area-inset-top));
    --dock: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
    --dock-flush: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    --sec-gap: 36px; --sec-gap-mega: 44px; --sec-gap-stack: 28px;
    --mega-pad-top: 44px; --mega-pad-bot: 40px;
    --fs-lede: 15px; --fs-sub: 14px; --fs-prose: 15px;
    --fs-ed-lede: 17px; --fs-ed-body: 16px; --fs-ed-h2: 22px; --fs-ed-h3: 18px; --ed-sec: 24px;
    --fs-hand-l: 21px;
    --lp-dome-h: 30px; --lp-lace-r: 8px;
    --app-top: 16px; --app-head-pb: 12px;
    --list-pad: 4px;
  }
}
/* INSIDE TIER (owner 06.10.: the member area is a tool people use every day; Sleek 08.10.: the same face, a quieter scale;
   design system 03.11.: every step on the 7-step scale, docs/design-system.md §3.1).
   Set here, on the body, by overriding the scale tokens — no page sets its own size. Scope: every page of a logged-in
   member (the body without .pc-guest and .pn-joinbody), the wizards (.pn-wizbody) and the wish step of the buyer signup.
     page head   --fs-m        24, phone 24 (owner 03.11.)   (outside 34 / 27)
     section     --fs-section  18 = --fs-title               (outside 21 / 18)
     sub head    --fs-subhead  15 = --fs-body                (outside 16 / 15)
     action      --btn-fs      15, small 13                  (outside the same)
   Line-height 1.25 for the heads (accented languages 1.2 / 1.24). */
body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm),body.pn-joinbody:has(.pn-wishpanel){
  --fs-m: 24px; --fs-section: 18px; --fs-subhead: 15px; --btn-fs: 15px; --btn-sm-fs: 13px;
  --fs-h1: var(--fs-m); --lh-head: 1.25; --lh-sub: 1.2; --tr-h: -.01em; --tr-head: 0em; --tr-btn: 0em;
  /* Numerals and the pieces that carried their own size: a step of the inside scale, never more than the page head. */
  --fs-tile: 24px; --fs-price-l: 24px;                                                  /* = --type-num: dashboard tile numeral, the listing's price */
  --fs-num: 18px; --fs-price-m: 18px; --fs-plan: 18px; --fs-empty: 18px;   /* = --fs-title: stat numerals, price, plan name, empty-state head */
  --fs-price-card: 15px; --fs-sub-s: 15px;   /* = --fs-body */                         /* card price, FAQ question, review head */
  /* Badges and status tags (Free, In review, Premium): the cap voice (12/16 600), several stand on one screen. */
  --badge-font: 600 12px/16px var(--font-label); --badge-tr: 0em;   /* = --type-cap */
}
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) :is(body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm),body.pn-joinbody:has(.pn-wishpanel)){--lh-head: 1.3; --lh-sub: 1.24}
/* Selling moments inside (the wizards after the signup, the membership page, the Premium wall): one step louder than a
   tool page — the page head 30 / phone 26; everything else stays on the inside scale. */
body.pn-wizbody,body.pn-joinbody:has(.pn-wishpanel),body.pc-root:not(.pc-guest):has(.pn-main > :is(.pn-paysite,.pn-premwall)){--fs-m: 30px; --fs-h1: var(--fs-m); --btn-fs: 15px; --lh-head: 1.2; --tr-h: -.01em}
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) :is(body.pn-wizbody,body.pn-joinbody:has(.pn-wishpanel),body.pc-root:not(.pc-guest):has(.pn-main > :is(.pn-paysite,.pn-premwall))){--lh-head: 1.18}
@media (max-width:700px){
  /* phone page title 24 (owner decision 03.11.), section / card heads stay 18; the selling moments step down to 24 too */
  body.pn-wizbody,body.pn-joinbody:has(.pn-wishpanel),body.pc-root:not(.pc-guest):has(.pn-main > :is(.pn-paysite,.pn-premwall)){--fs-m: 24px}
}
/* NO BORDERS (owner 18.10.: "die ganzen Border überall scheiße […] mit Flächen machen, die sich unterscheiden"; specs
   design/v7/noborder/ad-report.md + color-report.md). Since 09.10. the member area separated by tone (the block below the
   member marker); since 18.10. every page does: guest pages, join and login, the member area, header and footer. This block
   sits OUTSIDE the member marker, so tools/css_guest.php keeps it in every guest bundle; admin (.pn-adm) keeps its lines.
   The ladder, each step readable without a line (dark: 1.12 to 1.26 between neighbours, measured by
   tools/look/tonal_shots.mjs measure and measure --on=guest):
     ground   --app-ground / --bg   the page (dark: member #070b16, guest #0b1020)
     band     --t-band              the page head band
     panel    --surface             panels, boxes, the join box, the chat page
     raised   --sunken              wells and tiles in a panel, the row under the pointer, the chat in-bubble
     overlay  --t-over              sheets, menus, dialogs (plus a soft shadow, never a ring)
   Controls are a veil of ink over whatever they stand on (--t-tint rest, --t-tint-2 pointer, --t-sel chosen), so a key is
   one step up from ANY surface without knowing it (src-css/tonal.css).
   Lines: --line, --line-2, --line-3, the outline key's edge, the chrome line and the rings are transparent, so every rule
   that drew its 1 px frame from them keeps its box and loses the line. What keeps an edge: text fields and selects
   (--t-field-edge, >= 3:1 against their surface, WCAG 1.4.11), focus rings, error states, checkboxes / radios / switches,
   the dashed drop outline while dragging, and --t-card-edge: the quiet ring on listing and seller cards (about 1.3:1;
   set it to transparent here, one line, and the cards lose it too). Header and footer: no line; dark = the near-black
   bar (--t-chrome) with a soft shadow under it (--sh-chrome), the footer one step off the page (--footer-bg). */
.pc-root:not(.pn-adm){
  --line: transparent; --line-2: transparent; --line-3: transparent; --btn-line-edge: transparent; --btn-line-bg: var(--t-tint);
  --chrome-line: transparent; --lp-buy-line: transparent; --prem-ring: transparent; --chrome-ring: transparent;
  --t-mute: rgba(128,128,128,.5);   /* the grey that was a line and is a fill here: the sheet's grab, an offline dot, a track */
  --t-band: #FFFDF8; --t-over: #FFFDF8; --t-over-2: #d0d6e5; --t-over-3: #c7cddd;
  --sunken: #d0d6e5; --field-in: #e7eaf2; --ink-3: #596072;   /* light: the well 1.16 on the page, 1.31 on paper; the quiet ink 4.8:1 on the page */
  --t-tint: color-mix(in srgb, var(--ink) 7%, transparent); --t-tint-2: color-mix(in srgb, var(--ink) 12%, transparent);
  --t-sel: var(--btn-ink); --on-t-sel: var(--on-btn-ink);
  --t-field-edge: #686f7f; --t-field-edge-over: #686f7f; --t-hair: rgb(16 23 25 / .1);
  --t-danger: color-mix(in srgb, var(--danger) 10%, transparent); --t-danger-2: color-mix(in srgb, var(--danger) 16%, transparent);
  --surface-2: color-mix(in srgb, var(--sunken) 89%, var(--ink));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --t-card-edge: rgb(128 128 128 / .22); --t-card-edge-hover: rgb(128 128 128 / .35);   /* listing + seller cards only: transparent = no edge */
  --t-chrome: var(--chrome); --footer-bg: var(--chrome); --sh-chrome: none;   /* light: the dark chrome on the light page separates itself */
  --lp-chip-bg: var(--t-tint);   /* the hero's chips: a veil one step up from any hero ground (was paper 72 % + a grey frame) */
  --sh-float: 0 24px 64px rgb(16 23 25 / .22); --sh-sheet: 0 -16px 48px rgb(16 23 25 / .22);
}
/* LIGHT CHROME (owner 04.11.2026: «koennen wir für navi header und den footer auch was helles nehmen … kann der artdirector sich
   da mal was schönes überlegen»). In light the chrome is no dark island any more: header, phone tab bar, footer, the member
   drawer's head and the guest sticky bars are paper — the member light theme's own panel tone — framed off the duck-egg page
   by the one grey 50 % hairline (--mline, never white). Their keys are duck-egg wells, words anthracite (17.8:1 on paper), the
   quiet words ink 2 (7.0:1 on paper, 6.2:1 in a well, 5.6:1 in the chosen well), the pink keys stay pink. Only the chrome
   tokens are re-pointed, on the chrome elements themselves (the member drawer's head: src-css/medrawer.css, member layer):
   every chrome rule (chrome.css, the plastik guest layer, the drawer) reads them, and the dark boxes and hero shades elsewhere that also read --chrome keep it. Dark: untouched (the
   selector never matches there). Palette: bar #FFFDF8, well #e7eaf2, well chosen #d5dbe9, ink #0b1020, ink 2 #495060. */
[data-theme="light"] :is(.pc-root,.pn-dobody):not(.pn-adm) :is(.pc-header,.pn-joinnav,.pn-tabbar,.pc-tabbar,.pc-footer,.pn-gfooter,.pn-cp-bar,.pn-dtbar,.pn-lbsticky){
  --lc-bar: var(--paper); --lc-well: var(--duck); --lc-well-hover: var(--duck-2); --lc-ink: var(--anthracite); --lc-ink-2: var(--muted-lt);   /* the mockup primitives: #FFFDF8, #e7eaf2, #d5dbe9, #0b1020, #495060 */
  --chrome: var(--lc-bar); --chrome-2: var(--lc-bar); --t-chrome: var(--lc-bar); --footer-bg: var(--lc-bar); --lp-footer-bg: var(--lc-bar); --prem-bg: var(--lc-bar);
  --on-chrome: var(--lc-ink); --on-chrome-2: var(--lc-ink-2);
  --chrome-well: var(--lc-well); --chrome-well-hover: var(--lc-well-hover); --chrome-press: var(--lc-well-hover);
  --chrome-tint: var(--lc-well); --chrome-tint-press: var(--lc-well-hover); --chrome-line: var(--mline); --sh-chrome: none;
}
[data-theme="dark"] .pc-root:not(.pn-adm){
  --surface: #172238; --sunken: #232a3c; --t-band: #141823; --t-over: #293145; --t-over-2: #2f384d; --t-over-3: #394259;
  --ink-3: #80889c;   /* the quiet ink, lifted with the panel: 4.9:1 on the panel, 6.2:1 on the page (colour report 18.10.) */
  --field: #141823; --field-in: #0f121b;
  --dkbox: #172238; --dkbox-tile: #232a3c; --bubble-in: #232a3c;
  --btn-ink: #374054; --accent-soft: #1c2438;   /* the chosen fill: 1.16:1 on the panel (was #171d2c, 1.01: it vanished) */
  --t-tint: color-mix(in srgb, var(--ink) 10%, transparent); --t-tint-2: color-mix(in srgb, var(--ink) 16%, transparent);
  --t-sel: var(--btn-ink); --on-t-sel: var(--on-btn-ink);   /* visual audit VM-016: the same chosen fill as light (was a pale 26 % veil) */
  --t-field-edge: #757e93; --t-field-edge-over: #7c859b; --t-hair: rgb(234 242 242 / .08);
  --prem-ring: transparent; --chrome-ring: transparent;
  --t-chrome: #030506; --footer-bg: #141823; --sh-chrome: 0 14px 28px -20px rgb(0 0 0 / .9);
  --lp-chip-bg: var(--t-tint);
  --sh-float: 0 24px 64px rgb(0 0 0 / .55); --sh-sheet: 0 -16px 48px rgb(0 0 0 / .55);
}
[data-theme="dark"] .pc-root:is(.pc-guest,.pn-joinbody){
  --app-ground: #0b1020; --field: #181d2a; --footer-bg: #030506;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pc-root:not(.pn-adm){
  --surface: #172238; --sunken: #232a3c; --t-band: #141823; --t-over: #293145; --t-over-2: #2f384d; --t-over-3: #394259;
  --ink-3: #80889c;   /* the quiet ink, lifted with the panel: 4.9:1 on the panel, 6.2:1 on the page (colour report 18.10.) */
  --field: #141823; --field-in: #0f121b;
  --dkbox: #172238; --dkbox-tile: #232a3c; --bubble-in: #232a3c;
  --btn-ink: #374054; --accent-soft: #1c2438;   /* the chosen fill: 1.16:1 on the panel (was #171d2c, 1.01: it vanished) */
  --t-tint: color-mix(in srgb, var(--ink) 10%, transparent); --t-tint-2: color-mix(in srgb, var(--ink) 16%, transparent);
  --t-sel: var(--btn-ink); --on-t-sel: var(--on-btn-ink);   /* visual audit VM-016: the same chosen fill as light (was a pale 26 % veil) */
  --t-field-edge: #757e93; --t-field-edge-over: #7c859b; --t-hair: rgb(234 242 242 / .08);
  --prem-ring: transparent; --chrome-ring: transparent;
  --t-chrome: #030506; --footer-bg: #141823; --sh-chrome: 0 14px 28px -20px rgb(0 0 0 / .9);
  --lp-chip-bg: var(--t-tint);
  --sh-float: 0 24px 64px rgb(0 0 0 / .55); --sh-sheet: 0 -16px 48px rgb(0 0 0 / .55);
  }
  :root:not([data-theme="light"]) .pc-root:is(.pc-guest,.pn-joinbody){
  --app-ground: #0b1020; --field: #181d2a; --footer-bg: #030506;
  }
}
/* @member-only */
/* The member area's own head band (layout.css .pc-apphead): dark, the band ends on --t-band. Member only (the guest
   bundles never carry it). The rest of the member tone (tonal surfaces inside, owner 09.10.) is the block above. */
[data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1D2328 40%, #141823 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1D2328 40%, #141823 100%);
  }
}
/* Modern Dark + Signature Pink (owner 01.11.2026) = the design system's colour roles (docs/design-system.md §2, §15). The member
   dark theme, written ONCE: tools/build_css.sh prints its "auto" twin (no data-theme, dark system) via tools/css_twin.php.
   tools/css_plastik.php projects the same block onto every guest page in the look (guests = the member area, owner 03.11.).
   Primitives first (--md-*, the only literals), then the roles every component reads, then the old names as aliases of the
   roles (wave 2 moves the page files onto the role names; then the aliases go). */
/* @dark-twin */
[data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
  /* primitives */
  --md-bg: #101114; --md-header: #0B0C0E; --md-card: #1B1D22; --md-input: #26282E; --md-hover: #303239;
  --md-ink: #F5F5F7; --md-ink-2: #A2A4AD; --md-ink-3: #8E919B; --md-glyph-off: #777A84;   /* ink-3 raised (was #777A84: 3.9:1 on a card, MCH-011); the old grey stays for glyphs only (empty stars, chevrons) */
  --md-on-pink: #101114; --md-pink-soft: rgb(255 157 178 / .12);
  --md-glass: rgb(11 12 14 / .5); --md-line: transparent;   /* owner 02.11.: no edges inside — cards, nav and keys part by surfaces */
  /* roles: surfaces (the «+1 step» rule: what lies on a surface is one step lighter), inks, accent, states */
  --canvas: var(--md-bg); --bg: var(--md-bg); --app-ground: var(--md-bg); --app-head-bg: var(--md-header);
  --chrome: var(--md-header); --surface: var(--md-card); --surface-2: var(--md-input); --surface-3: var(--md-hover);
  --ink: var(--md-ink); --ink-2: var(--md-ink-2); --ink-3: var(--md-ink-3); --glyph-off: var(--md-glyph-off);
  --on-accent: var(--md-on-pink); --accent-soft: var(--md-pink-soft); --focus-ring: var(--accent);
  --on-chrome: var(--ink); --on-chrome-2: var(--ink-2);   /* no duck-egg mint / blue grey on the chrome (MCH-003, MBY-010/011) */
  --success: #2FD27A; --danger: #FF8A7A; --warning: #F2B84B; --online: var(--success); --live: var(--success);
  --on-success: var(--md-on-pink); --on-danger: var(--md-on-pink);
  --glass: var(--md-glass); --scrim: rgb(5 5 7 / .66); --shadow-e1: 0 16px 48px rgb(0 0 0 / .5);
  --line: var(--md-line); --line-2: var(--md-line); --oxblood: var(--md-line);
  /* old names → the roles (aliases until wave 2) */
  --md-white: var(--md-ink); --md-meta: var(--md-ink-2); --md-sep: var(--md-hover); --md-row-line: var(--md-line);
  --md-pink-line: var(--accent);   /* was the 25 % focus ring (1.7:1); the ring is --focus-ring now */
  --md-shadow: none; --md-shadow-hover: none; --md-ease: var(--dur-1) ease-out;   /* e0: panels and cards carry no shadow (MCH-019) */
  --md-r-card: var(--r-l); --md-r-media: var(--r-m);   /* owner decision 03.11.: a feed card is 16 like every card */
  --anthracite: var(--md-on-pink);   /* ink on pink is one value (MCH-004, MCT-002) */
  --sunken: var(--surface-2); --field: var(--surface-2); --field-in: var(--surface-2);   /* a field on a panel is surface 2, never the hover tone (MSL-006) */
  --dkbox: var(--surface); --dkbox-tile: var(--surface-2); --bubble-in: var(--surface-2);
  --chrome-2: var(--surface); --prem-bg: var(--chrome);
  --chrome-well: var(--surface-2); --chrome-well-hover: var(--surface-3);
  --btn-ink: var(--surface-2); --on-btn-ink: var(--ink); --btn-ink-edge: var(--md-line); --btn-ink-hover: var(--surface-3); --btn-ink-hover-fx: none;
  --btn-line-bg: var(--surface-2); --btn-line-edge: var(--md-line);
  --dk-bg: var(--chrome); --dk-card: var(--surface); --dk-ink: var(--ink); --dk-ink-2: var(--ink-2);
  /* controls are one step up from what they stand on: rest surface 2, pointer surface 3 (src-css/tonal.css points a control's
     --sunken / --surface-2 at these); the white alpha veils are gone (MSL-007, MCH-010) */
  --t-tint: var(--surface-2); --t-tint-2: var(--surface-3); --t-sel: var(--surface-3); --on-t-sel: var(--ink);
  /* the kit's member-dark values (components.css reads them with the light value as the fallback) */
  --chip-sel: var(--accent-soft); --on-chip-sel: var(--ink);   /* a chosen filter chip: the accent's soft fill + ink, never pink text */
  --seg-on: var(--surface-3); --on-seg-on: var(--ink);
  --check-on: var(--accent); --on-check-on: var(--on-accent);
  --switch-off: var(--surface-3); --switch-knob: var(--ink-2); --switch-knob-sh: none; --switch-on: var(--ink-3); --switch-knob-on: var(--ink);   /* no white track, no cream knob (MSL-032/033/034); UX 433 G-095: on = a raised grey track + the light knob, pink stays the one key */
  --glass-key: var(--glass); --glass-key-ink: var(--ink); --glass-key-hover: var(--scard-glass-hover);   /* a key on a photo is glass, never a paper disc */
  --tile-num: var(--ink);   /* stat numerals in ink (pink is the one key) */
  --toast-bg: var(--surface-2); --toast-r: var(--r-l);   /* the toast is e1: surface 2 + the float shadow (MCH-166) */
  --white: var(--ink);   /* no #FFFFFF text inside (docs/design-system.md §2.2) */
  --t-mute: var(--surface-3);
  /* overlays (sheet, menu, dialog) are surface 2 with the one float shadow; what lies in them is surface 3 (see below) */
  --t-over: var(--surface-2); --t-over-2: var(--surface-3); --t-over-3: var(--surface-3);
  --t-field-edge: var(--md-line); --t-field-edge-over: var(--md-line);
  --sh-float: var(--shadow-e1); --sh-sheet: var(--shadow-e1); --sh-card: none; --sh-card-hover: none;
  --ph-media: var(--surface-2); --ph-media-2: var(--surface-2); --ph-text: var(--ink-2);
  /* photos: a quiet dark foot for the caption, never a pink wash (premium included) */
  --scard-shade: linear-gradient(180deg, rgb(11 12 14 / .12) 0%, rgb(11 12 14 / 0) 18%, rgb(11 12 14 / 0) 60%, rgb(11 12 14 / .14) 100%);
  --scard-cap-shade: linear-gradient(180deg, rgb(11 12 14 / 0) 0%, rgb(11 12 14 / .28) 30%, rgb(11 12 14 / .62) 62%, rgb(11 12 14 / .86) 100%);
  --scard-cap-blush: var(--scard-cap-shade); --pcard-cap-blush: var(--scard-cap-shade);
  --scard-glass: var(--glass); --scard-glass-hover: rgb(11 12 14 / .6); --chip-glass: var(--glass);
  /* the plastik look's warm roles, neutral here (its CI remap made them bordeaux) */
  --card-dk: var(--surface); --chrome-grad: var(--chrome); --t-band: var(--chrome); --footer-bg: var(--chrome);
  --pola-edge: var(--surface-2); --t-chrome: var(--chrome); --chrome-line: var(--md-line);
  --t-card-edge: var(--md-line); --t-card-edge-hover: var(--md-line); --t-hair: var(--md-line);
  /* avatar fallbacks: the two surface steps, no in-between greys (MCH-010, MSL-008, MBY-024) */
  --av-g0: var(--surface-2); --av-g1: var(--surface-3); --av-g2: var(--surface-2); --av-g3: var(--surface-3);
  --av-g4: var(--surface-2); --av-g5: var(--surface-3); --av-g6: var(--surface-2); --av-g7: var(--surface-3);
  --dk-veil: rgb(11 12 14 / .6); --sh-chrome: none;
  /* geometry of the member area (owner 02.11.: every member page on the feed's 1372; the header is 76 on every width) */
  --main-max: 1372px; --wrap-max: var(--main-max); --hdr-h: 76px; --header-h: 76px;
}
/* «+1 step» in an overlay: a sheet / menu / dialog is surface 2, so a field, a key or a chip in it is surface 3 (was a
   #303239 field on a #303239 sheet, docs/design-system.md §2.1) */
[data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-sheet,.pn-menu,dialog){
  --field: var(--surface-3); --field-in: var(--surface-3); --t-tint: var(--surface-3); --t-tint-2: var(--surface-3); --btn-line-bg: var(--surface-3); --btn-ink: var(--surface-3);
}
/* @end-dark-twin */
/* the auto twin (generated by tools/css_twin.php) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){--md-bg: #101114; --md-header: #0B0C0E; --md-card: #1B1D22; --md-input: #26282E; --md-hover: #303239; --md-ink: #F5F5F7; --md-ink-2: #A2A4AD; --md-ink-3: #8E919B; --md-glyph-off: #777A84; --md-on-pink: #101114; --md-pink-soft: rgb(255 157 178 / .12); --md-glass: rgb(11 12 14 / .5); --md-line: transparent; --canvas: var(--md-bg); --bg: var(--md-bg); --app-ground: var(--md-bg); --app-head-bg: var(--md-header); --chrome: var(--md-header); --surface: var(--md-card); --surface-2: var(--md-input); --surface-3: var(--md-hover); --ink: var(--md-ink); --ink-2: var(--md-ink-2); --ink-3: var(--md-ink-3); --glyph-off: var(--md-glyph-off); --on-accent: var(--md-on-pink); --accent-soft: var(--md-pink-soft); --focus-ring: var(--accent); --on-chrome: var(--ink); --on-chrome-2: var(--ink-2); --success: #2FD27A; --danger: #FF8A7A; --warning: #F2B84B; --online: var(--success); --live: var(--success); --on-success: var(--md-on-pink); --on-danger: var(--md-on-pink); --glass: var(--md-glass); --scrim: rgb(5 5 7 / .66); --shadow-e1: 0 16px 48px rgb(0 0 0 / .5); --line: var(--md-line); --line-2: var(--md-line); --oxblood: var(--md-line); --md-white: var(--md-ink); --md-meta: var(--md-ink-2); --md-sep: var(--md-hover); --md-row-line: var(--md-line); --md-pink-line: var(--accent); --md-shadow: none; --md-shadow-hover: none; --md-ease: var(--dur-1) ease-out; --md-r-card: var(--r-l); --md-r-media: var(--r-m); --anthracite: var(--md-on-pink); --sunken: var(--surface-2); --field: var(--surface-2); --field-in: var(--surface-2); --dkbox: var(--surface); --dkbox-tile: var(--surface-2); --bubble-in: var(--surface-2); --chrome-2: var(--surface); --prem-bg: var(--chrome); --chrome-well: var(--surface-2); --chrome-well-hover: var(--surface-3); --btn-ink: var(--surface-2); --on-btn-ink: var(--ink); --btn-ink-edge: var(--md-line); --btn-ink-hover: var(--surface-3); --btn-ink-hover-fx: none; --btn-line-bg: var(--surface-2); --btn-line-edge: var(--md-line); --dk-bg: var(--chrome); --dk-card: var(--surface); --dk-ink: var(--ink); --dk-ink-2: var(--ink-2); --t-tint: var(--surface-2); --t-tint-2: var(--surface-3); --t-sel: var(--surface-3); --on-t-sel: var(--ink); --chip-sel: var(--accent-soft); --on-chip-sel: var(--ink); --seg-on: var(--surface-3); --on-seg-on: var(--ink); --check-on: var(--accent); --on-check-on: var(--on-accent); --switch-off: var(--surface-3); --switch-knob: var(--ink-2); --switch-knob-sh: none; --switch-on: var(--ink-3); --switch-knob-on: var(--ink); --glass-key: var(--glass); --glass-key-ink: var(--ink); --glass-key-hover: var(--scard-glass-hover); --tile-num: var(--ink); --toast-bg: var(--surface-2); --toast-r: var(--r-l); --white: var(--ink); --t-mute: var(--surface-3); --t-over: var(--surface-2); --t-over-2: var(--surface-3); --t-over-3: var(--surface-3); --t-field-edge: var(--md-line); --t-field-edge-over: var(--md-line); --sh-float: var(--shadow-e1); --sh-sheet: var(--shadow-e1); --sh-card: none; --sh-card-hover: none; --ph-media: var(--surface-2); --ph-media-2: var(--surface-2); --ph-text: var(--ink-2); --scard-shade: linear-gradient(180deg, rgb(11 12 14 / .12) 0%, rgb(11 12 14 / 0) 18%, rgb(11 12 14 / 0) 60%, rgb(11 12 14 / .14) 100%); --scard-cap-shade: linear-gradient(180deg, rgb(11 12 14 / 0) 0%, rgb(11 12 14 / .28) 30%, rgb(11 12 14 / .62) 62%, rgb(11 12 14 / .86) 100%); --scard-cap-blush: var(--scard-cap-shade); --pcard-cap-blush: var(--scard-cap-shade); --scard-glass: var(--glass); --scard-glass-hover: rgb(11 12 14 / .6); --chip-glass: var(--glass); --card-dk: var(--surface); --chrome-grad: var(--chrome); --t-band: var(--chrome); --footer-bg: var(--chrome); --pola-edge: var(--surface-2); --t-chrome: var(--chrome); --chrome-line: var(--md-line); --t-card-edge: var(--md-line); --t-card-edge-hover: var(--md-line); --t-hair: var(--md-line); --av-g0: var(--surface-2); --av-g1: var(--surface-3); --av-g2: var(--surface-2); --av-g3: var(--surface-3); --av-g4: var(--surface-2); --av-g5: var(--surface-3); --av-g6: var(--surface-2); --av-g7: var(--surface-3); --dk-veil: rgb(11 12 14 / .6); --sh-chrome: none; --main-max: 1372px; --wrap-max: var(--main-max); --hdr-h: 76px; --header-h: 76px;}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-sheet,.pn-menu,dialog){--field: var(--surface-3); --field-in: var(--surface-3); --t-tint: var(--surface-3); --t-tint-2: var(--surface-3); --btn-line-bg: var(--surface-3); --btn-ink: var(--surface-3);}
}

/* UX 433 round 2 G-007 / G-118 (owner 05.11. «bau erstmal alles fertig»): a theme never moves the column — the member geometry
   (the feed's 1372 column, the 76 px header) in light too, as plastik/light.css says it for guests; the components are dark.css's
   light twin on the light role tokens (tools/css_twin.php) */
[data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){--main-max: 1372px; --wrap-max: var(--main-max); --hdr-h: 76px; --header-h: 76px;
  --chip-sel: var(--accent-soft); --on-chip-sel: var(--ink)}   /* a chosen filter chip as in dark: the accent's soft fill + ink (was the plastik look's black toggle) */

/* @end-member-only */

/* visual audit VD-024 (26.10.): the layer ladder — bars, header, phone nav, menus / sheets, drawers / overlays, toasts on top */
:root{--z-bar:20;--z-header:30;--z-nav:40;--z-menu:60;--z-drawer:75;--z-toast:80}
/* visual audit VD-011 round 6 (26.10.): one toast rule set: the gap over whatever it clears, and the floor on wide screens
   (no dock there). A page toast only says what it clears: calc(var(--dock) + <bar> + var(--toast-gap)). */
:root{--toast-gap:12px;--toast-low:32px}
/* panty.com v3 components: a literal port of design/v2/cast-mockup.html (<style> l.42-318, phone l.320-405) onto the
   pnew class names. docs/design-v3-system.md §2 maps every mockup selector to its class here. Every colour is a token.
   Archivo = display, heads, prices, labels, stickers, buttons (always an explicit font-stretch AFTER the font shorthand).
   Inter Tight = everything you read. Caveat = the handwritten notes only. The one line is --line (grey 50 %).
   Rotation only where the mockup rotates: stamp -9, sticker 7, care label -5, note -1.2 / 1, receipt 1.5, hand notes. */
.pc-root, .pc-root *, [class^="pc-"], [class^="pc-"] *{box-sizing:border-box}
.pc-root{font:var(--type-body);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* design system 03.11. (docs/design-system.md §7.2): every control takes the page face; a bare <button> fell back to the UA's
   Arial 13.33 (MCH-008, MCT-015, MSL-039, CONT-106). Zero specificity: every component's own font still wins. */
:where(.pc-root) :where(button,input,select,textarea){font:inherit;letter-spacing:inherit}
.pc-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.pc-stack{display:grid;gap:var(--space-4)}
/* Icons: Hugeicons sprite via pnew_icon()/pnewIco(). 24 nav/tabbar/icon buttons, 20 buttons, 16 inline meta. */
.pc-ico{display:inline-block;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.2em;flex-shrink:0}
.pc-ico--16{width:16px;height:16px}
.pc-ico--20{width:20px;height:20px}
.pc-ico--24{width:24px;height:24px}
.pc-muted{color:var(--ink-2)}
.pc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-nw{white-space:nowrap}

/* ==========================================================================
   Brand atoms (mockup "brand atoms")
   ========================================================================== */
/* .wrap: the column. max 1280 incl. 56 padding (phone 16). */
.pc-wrap{width:100%;max-width:calc(var(--main-max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
/* .logo: Archivo 900 26 wdth 80, the pink dot winks. Header 26 (phone 22), footer 22. */
/* The display face's stand-ins (docs/typo-system-06-10.md). Until Anton is there the Archivo file plays it, pinned to
   its narrowest width and heaviest weight and size-adjusted to Anton's measure, so a late swap moves neither a line
   break nor a box: 'Anton FB' for caps (measured with tools/type_verify.mjs: Anton's letters run .93x Archivo 900 at wdth
   62, its digits and currency signs 1.12x, its word space 2.13x — one face per group, by unicode-range), 'Anton FBL'
   for the lowercase wordmark (1.11x). Every stand-in carries Anton's own ascent and descent (1.18 / .33em, divided by
   its size-adjust), so the baseline of a button or a stamp sits where it will sit once Anton is there. 'Anton Tape' is Anton with its content box cut to the caps (Anton's own is 1.5em: ascent
   1.18, descent .33), so the pink of a taped line hugs the words and two taped lines never cover each other. */
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:93%;ascent-override:126.9%;descent-override:35.5%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:112%;ascent-override:105.4%;descent-override:29.5%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0023-0024,U+002C,U+0030-003A,U+003F,U+00B7,U+00BF,U+2019,U+20AC}   /* digits, $ €, ? ¿ and the small marks run wider in Anton */
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:133%;ascent-override:88.7%;descent-override:24.8%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0025,U+002D,U+002F,U+0040}   /* % - / @ */
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:213%;ascent-override:55.4%;descent-override:15.5%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0020,U+00A0}   /* Anton's word space is 2.2x Archivo's */
@font-face{font-family:'Anton FBL';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:111%;ascent-override:106.3%;descent-override:29.7%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Anton Tape';font-style:normal;font-weight:400 900;font-display:swap;ascent-override:92%;descent-override:7%;line-gap-override:0%;src:url(../fonts/Anton-normal-latin.woff2) format('woff2')}
.pc-logo{display:inline-flex;align-items:baseline;font:400 36px/1 'Pirata One',var(--display-lc);font-synthesis:none;letter-spacing:.005em;text-transform:lowercase;color:inherit;text-decoration:none;white-space:nowrap}
.pc-logo__dot{display:inline-block;flex:none;width:.3em;height:.3em;border-radius:50%;background:var(--pink);margin-left:.06em;animation:pc-wink 5s infinite}
@keyframes pc-wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
/* design system §11: nothing loops inside the member area (MCH-023); guests keep the wink */
body.pc-root:not(.pc-guest) .pc-logo__dot{animation:none}
/* .kicker + .tub: the label voice (text face 600, 11 px, .2em caps), the drawn wash tub in currentColor. */
.pc-kicker,.pn-kicker{display:inline-flex;align-items:center;gap:8px;font:var(--type-cap);letter-spacing:0;color:inherit}
.pc-tub{flex:none;width:18px;height:12px;border:2px solid currentColor;border-top:none;border-radius:0 0 6px 6px;position:relative}
.pc-tub::before{content:"";position:absolute;left:-4px;right:-4px;top:-2px;border-top:2px solid currentColor}
.pn-kicker .pn-tub{color:currentColor}
/* Heads (the display scale, tokens.css): .h-xl hero, .h-l statement, .h-m page head. Anton caps; the line-height comes with the size. */
.pc-h-xl,.pc-h-l,.pc-h-m,.pc-t-mega,.pc-t-display,.pc-t-h1{font-family:var(--font-display);font-weight:700;line-height:var(--lh-hero);letter-spacing:var(--tr-h);margin:0;overflow-wrap:break-word;hyphens:manual}
.pc-h-xl,.pc-t-mega{font-size:var(--fs-xl)}
.pc-h-l,.pc-t-display{font-size:var(--fs-l)}
.pc-h-m,.pc-t-h1{font-size:var(--fs-m);line-height:var(--lh-head)}
/* art director 27.10. (docs/variants-08-10.md: heads 700, hero / h1 800): a display class on a section head (h2, h3) is 700 */
:is(h2,h3):is(.pc-h-xl,.pc-h-l,.pc-h-m){font-weight:700}
/* Section head (card and panel heads): Anton caps, 34 (phone 30). */
.pc-h-card,.pc-t-section{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head);overflow-wrap:break-word;hyphens:manual}
.pc-t-h2{font:var(--type-h1);letter-spacing:var(--tr-h)}
.pc-t-title{font:var(--type-title);letter-spacing:0}
/* Small caps label (.pbox b.t / .care .n): the label voice, 11-12 px, tracked caps. */
.pc-t-label,.pc-overline{font:var(--type-cap);letter-spacing:0;color:var(--ink-2)}
.pc-sub{margin:0;color:var(--ink-2);font:var(--type-body)}
.pc-lede{margin:0;color:var(--ink-2);font:400 var(--fs-lede)/1.45 var(--font-sans);max-width:var(--measure-lede)}
/* .strike + .fix: the struck word (aria-hidden) with a pink pen line, the Caveat correction after it. */
.pc-strike{position:relative;display:inline-block;white-space:nowrap;text-decoration:none;opacity:.55}
.pc-strike::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.12em;background:var(--pink);transform:rotate(-4deg)}
.pc-fix{display:inline-block;font-family:var(--font-hand);font-weight:700;text-transform:none;color:var(--pink);font-size:.9em;letter-spacing:0;transform:rotate(-5deg) translateY(-.08em)}
.pc-on-pink .pc-strike::after{background:var(--anthracite)}
.pc-on-pink .pc-fix{color:var(--anthracite)}
/* .tape: the pink highlighter band behind a head line. */
.pc-hl{display:inline;background:var(--pink);color:var(--anthracite);font-family:var(--display-tape);padding:var(--tape-pad);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:var(--lh-tape)}
/* .hand: the Caveat note (always aria-hidden or a restatement). */
.pc-hand,.pn-hand{display:block;margin:0;font:700 var(--fs-hand)/1.1 var(--font-hand);color:var(--hand-ink);text-transform:none;letter-spacing:0}
.pc-on-pink .pc-hand{color:var(--anthracite)}
/* T13: a Caveat note inside a dark box stays pink, also when the box sits in a pink block (mockup .dk .hand). */
.pc-on-pink .pc-box--dk .pc-hand,.pc-box--dk .pc-hand{color:var(--pink)}
/* .illu: "Brand illustration · not a seller" (11 px Inter Tight, 60 %). */
.pc-illu{font:var(--type-cap);font-weight:var(--w-regular);letter-spacing:0;color:var(--ink-2);margin:0}   /* art director 27.10.: was opacity .6 (2.3–2.9:1) *
/* .fig / .obj: cut-outs float with the figure shadow; on anthracite the pink rim. */
.pc-fig,.pc-obj{filter:var(--fig-shadow)}
.pc-dk .pc-fig{filter:var(--rim-pink)}
.pc-obj{position:absolute;pointer-events:none;height:auto}
/* .arch: the pink arch with its dashed seam. */
.pc-arch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:560px;height:470px;background:var(--ph-arch);border-radius:280px 280px 0 0}
.pc-arch::after{content:"";position:absolute;inset:14px 14px 0;border:2px dashed var(--dash);border-bottom:none;border-radius:266px 266px 0 0}
/* .ptag: price type printed on the blank tag of an object (container units of the object box). */
.pc-ptag{position:absolute;left:50%;top:65%;transform:translate(-50%,-50%) rotate(var(--r,-14deg));font:700 16cqw/1 var(--font-display);color:var(--anthracite);letter-spacing:var(--tr-num);text-align:center;white-space:nowrap}
.pc-ptag small{display:block;font:700 max(10px,1.05cqw)/1 var(--font-sans);letter-spacing:0;margin-top:.35em;opacity:1}

/* ==========================================================================
   Buttons (mockup .btn): Archivo 800 15 wdth 95, .06em caps, pill, 17/26 padding + 2 px border = 53 tall
   (phone 15/20, 14 px = 48). --primary = .btn--pink (hard 6 px pink-press edge), --ink = .btn--ink (black edge),
   --line = .btn--line, --on-chrome = .btn--line-dk, --sm = .hdr .btn (12/18, 13 px, no edge). The label is optically
   centred: the trailing .06em letter-spacing is given back on the left (padding-left − padding-right = .06em).
   Design system 03.11. (docs/design-system.md §7.2): four variants — primary (the one pink key of a view), secondary
   (.pc-btn--secondary; --line, --ink and --soft are its aliases: one step up from what it stands on, never pale white),
   quiet (.pc-btn--quiet; --ghost is its alias: transparent, the step on the pointer), danger. Standard 44 (--control-md)
   at 600 15/22, small 36 (phone 44) at 600 13/18, radius --r-m, icon 20 (small 16) 8 from the label. Flat: no shadow,
   no gradient, no lift. The theme's colours come from the tokens (the member dark values: src-css/tokens.css + dark.css).
   ========================================================================== */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-btn);padding:var(--btn-py) var(--btn-px);border:1px solid transparent;border-radius:var(--r-btn);background:var(--sunken);color:var(--ink);font:600 var(--btn-fs)/22px var(--font-sans);letter-spacing:var(--tr-btn);text-decoration:none;white-space:nowrap;max-width:100%;cursor:pointer;transition:transform var(--dur-press) var(--ease-snap),box-shadow var(--dur-press) var(--ease-snap),background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pc-btn .pc-ico{width:var(--icon-m);height:var(--icon-m);margin-block:-2px;stroke-width:2}
.pc-btn .pc-arr{font-family:var(--font-sans);font-weight:700;letter-spacing:0}
/* visual audit VD-006 (26.10.): one fallback focus ring for every control without its own (zero specificity, so every
   component's own focus style still wins); the browser's thin default ring never shows */
/* design system 03.11. (docs/design-system.md §8): ONE ring — 2 px solid --focus-ring (the pink in dark: 9.6:1 on the ground,
   8.6 on a panel), offset 2 — replacing the 25 % ring, the 3 px rings and every bare outline:none (MCH-001/002, MCT-004/006,
   MSL-013/014, MBY-001/002). The mouse never shows it. */
:where(.pc-root) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
:where(.pc-root) :where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none}
.pc-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Primary = the one main action (.btn--pink); premium = primary plus a lock or star icon; ink = .btn--ink.
   The mockup's hard 6 px edge, literally: box-shadow 0 6px 0 (pink-press / black), 2 px transparent border, the label
   centred on the 53 px face (it is the box). Press = the key goes down onto its edge. */
.pc-btn--primary,.pc-btn--premium,.pc-btn--ink,.pc-btn--on-accent{border-color:transparent}
.pc-btn--primary,.pc-btn--premium{background:var(--accent);color:var(--on-accent)}
.pc-btn--primary:hover,.pc-btn--premium:hover{background:var(--accent-press)}
.pc-btn--ink{background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--line)}
.pc-btn--ink:hover{filter:var(--btn-ink-hover-fx,brightness(1.18));background:var(--btn-ink-hover,var(--btn-ink))}
.pc-btn--primary:active,.pc-btn--premium:active,.pc-btn--ink:active,.pc-btn--on-accent:active{transform:translateY(1px)}
.pc-btn--line,.pc-btn--secondary{background:var(--sunken);color:var(--ink);border-color:var(--line)}
/* UX 17.10. #41: on light the outline key is an ink frame on paper (it read as a washed-out mint pill); dark keeps the
   tonal well with the grey 50 % edge, the member area its tonal surfaces (tokens.css --btn-line-bg / --btn-line-edge). */
.pc-btn--line{background:var(--btn-line-bg);border-color:var(--btn-line-edge)}
.pc-btn--line:hover,.pc-btn--secondary:hover,.pc-btn--secondary.is-hover{background:var(--surface-2);color:var(--ink)}
.pc-btn--ghost,.pc-btn--quiet{background:transparent;color:var(--ink);border-color:transparent}
.pc-btn--ghost:hover,.pc-btn--ghost.is-hover,.pc-btn--quiet:hover{border-color:transparent;background:var(--t-tint)}
/* --soft is not a mockup button: it renders as .btn--line (secondary actions are line buttons, one pink per view). */
.pc-btn--soft{background:var(--sunken);color:var(--ink);border-color:var(--line)}
.pc-btn--soft:hover{background:var(--surface-2);color:var(--ink)}
.pc-btn--white{background:var(--cream);color:var(--anthracite);border-color:transparent}
.pc-btn--on-chrome{background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
.pc-btn--on-chrome:hover{border-color:transparent;background:var(--chrome-well-hover)}
.pc-btn--on-accent{background:var(--anthracite);color:var(--white)}
.pc-btn--danger{background:transparent;color:var(--danger);border-color:var(--danger-line)}
.pc-btn--danger:hover{background:var(--danger-soft)}
.pc-btn--danger.is-confirm{background:var(--danger);color:var(--on-danger);border-color:transparent}
/* Sizes. --sm = the header button (and .more): no edge. --lg = the mockup's content button (= default). */
.pc-btn--sm,.pc-btn--sm:is(.pc-btn--primary,.pc-btn--premium,.pc-btn--ink,.pc-btn--on-accent){min-height:var(--control-sm);padding:var(--btn-sm-py) var(--btn-sm-px);border-width:1px;border-radius:var(--r-btn-sm);font-size:var(--btn-sm-fs);line-height:18px;gap:var(--space-2);box-shadow:none}
.pc-btn--sm .pc-ico{width:var(--icon-s);height:var(--icon-s);margin-block:-2px}
.pc-btn--sm:active{transform:none}
.pc-btn--lg{min-height:var(--control-lg)}
.pc-btn--block{display:flex;width:100%}
.pc-btn__t{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* ui_btn clip: a long member name ends in … instead of pushing the key wider */
/* Phones: a big or full-width button whose label outgrows its box takes a second line instead of clipping. */
@media (max-width:700px){
  .pc-btn{white-space:normal;text-align:center;text-wrap:balance}
  /* Full-width buttons wrap as one inline run, so an icon stays next to the first word instead of pinned to the edge
     (a flex row keeps the wrapped text box full width and centres the lines away from the icon). */
  .pc-btn--block{display:block}
  .pc-btn--block > .pc-ico{display:inline-block;vertical-align:-4px;margin-inline:calc(var(--space-2) / 2)}   /* symmetric: works for a leading and a trailing icon */
  .pc-btn--block > .pc-count{vertical-align:1px;margin-left:var(--space-2)}
}
.pc-btn:disabled,.pc-btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
/* polish v3: a disabled pink key is a neutral waiting key (pink at .45 turned muddy mauve on dark, 1.41:1). */
.pc-btn:is(.pc-btn--primary,.pc-btn--premium):is(:disabled,.is-disabled){opacity:1;background:var(--surface-2);color:var(--ink-2);box-shadow:none}
.pc-spin{width:16px;height:16px;border-radius:var(--radius-full);border:2px solid currentColor;border-right-color:transparent;animation:pc-spin .7s linear infinite}
@keyframes pc-spin{to{transform:rotate(360deg)}}
/* Busy button (items / profile / chat JS set .is-busy while a request runs): a small spinner before the label. */
.pc-btn.is-busy{pointer-events:none}
.pc-btn.is-busy::before{content:"";width:14px;height:14px;border-radius:var(--radius-full);border:2px solid currentColor;border-right-color:transparent;animation:pc-spin .7s linear infinite}

/* Icon button: the mockup's round control (.calc__row button: 44 circle, 1 px line, transparent). On chrome the
   burger square (.burger: 40, radius 12). On photos a paper circle. */
/* Secondary link = link tier 3 (ui_more, §2.6; .pn-seeall is its alias): Inter Tight 700 14, a 2px underline in pink,
   the arrow glued to the last word (.pc-more__end never wraps), nudging 3px on hover. Tones: dk (anthracite: on-dark
   text, pink line), pink (on pink: ink text, ink line; never pink on pink). 44 tap via the ::after at the end of this file. */
.pc-more{display:inline;position:relative;font:var(--type-strong);color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color var(--dur-fast)}
.pc-more__end{white-space:nowrap}
.pc-more .pc-arr{display:inline-block;text-decoration:none;transition:transform var(--dur-fast)}
.pc-more:hover{text-decoration-color:currentColor}
.pc-more:hover .pc-arr{transform:translateX(3px)}
.pc-more:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pc-more--dk{color:var(--dk-ink)}
.pc-more--pink{color:var(--anthracite);text-decoration-color:var(--anthracite)}
@media (prefers-reduced-motion:reduce){.pc-more,.pc-more .pc-arr{transition:none}.pc-more:hover .pc-arr{transform:none}}
/* Tonal pass 05.10.: the round control is a sunken disc (no line); hover = one tone up. --plain is bare until hover,
   --glass (on photos) keeps the paper disc with the 50 % frame, --on-chrome is the chrome well. */
.pc-iconbtn{display:inline-grid;place-items:center;width:var(--control-md);height:var(--control-md);aspect-ratio:1;padding:0;flex:none;border-radius:50%;border:1px solid transparent;background:var(--sunken);color:var(--ink);cursor:pointer;position:relative;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pc-iconbtn .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pc-iconbtn:hover{background:var(--surface-2)}
.pc-iconbtn--raised{background:var(--surface)}
.pc-iconbtn--plain{background:transparent}
.pc-iconbtn--plain:hover{background:var(--sunken)}
.pc-iconbtn--glass{background:var(--glass-key,var(--paper));color:var(--glass-key-ink,var(--anthracite));border-color:var(--line)}
.pc-iconbtn--glass:hover{border-color:transparent;background:var(--glass-key-hover,var(--cream))}
.pc-iconbtn--on-chrome{width:var(--control-md);height:var(--control-md);border-radius:var(--r-icon);background:var(--chrome-well);color:var(--on-chrome)}
.pc-iconbtn--on-chrome:hover{background:var(--chrome-well-hover)}
.pc-iconbtn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.pc-iconbtn--primary:hover{background:var(--accent-press)}
.pc-iconbtn:focus-visible,.pc-remove:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Count dot: pink, ink numerals, ringed in the parent background (--count-ring). */
.pc-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--accent);color:var(--on-accent);font:600 12px/20px var(--body);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--count-ring,var(--bg))}
/* Remove on upload tiles: an ink 28 circle with a drawn X. */
.pc-remove{position:absolute;top:6px;right:6px;z-index:4;display:grid;place-items:center;width:28px;height:28px;min-width:28px;aspect-ratio:1;padding:0;flex:none;border-radius:50%;border:0;background:var(--anthracite);color:var(--white);cursor:pointer}
.pc-remove .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.2}
.pc-remove::before{content:"";position:absolute;inset:-8px;border-radius:50%}   /* the 44 tap floor on a 28 key (MSL-018) */
.pc-remove:hover{background:var(--danger);color:var(--on-danger)}

/* ==========================================================================
   Pills (mockup .tabs-app span / .chip / .tabs button): size to content, never clipped, 1 px line.
   ========================================================================== */
/* Filter / choice pill = .tabs-app span: Inter Tight 600 13, 10/14, selected = ink. */
.pc-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pc-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-sm);padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--r-chip);background:var(--sunken);color:var(--ink);font:var(--type-label);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pc-chip:hover{background:var(--surface-2)}
.pc-chip.is-selected,.pc-chip[aria-current],.pc-chip[aria-pressed="true"],.pc-chip:has(input:checked){background:var(--chip-sel,var(--btn-ink));color:var(--on-chip-sel,var(--on-btn-ink));border-color:transparent}   /* member dark: the accent's soft fill + ink (docs/design-system.md §7.4) */
.pc-chip--accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* .chip: the small paper pill (700 12, 8/12) with an optional live dot <b>. */
.pc-chip--sm,.pc-chip--live{min-height:var(--control-sm);padding:var(--space-2) var(--space-3);font:var(--type-label);background:var(--paper);color:var(--anthracite)}
.pc-chip--sm:has(input:checked),.pc-chip--sm.is-selected,.pc-chip--sm[aria-pressed="true"],.pc-chip--sm[aria-current]{background:var(--btn-ink);color:var(--on-btn-ink)}
.pc-chip--live{gap:8px;cursor:default}
/* a live chip that is a link (the hero count → the hub): the same look plus a chevron, pointer and the ink border on hover */
a.pc-chip--live{cursor:pointer}
a.pc-chip--live > .pc-ico{width:14px;height:14px;margin:0 -2px 0 -2px;transition:transform var(--dur-fast)}
a.pc-chip--live:hover{border-color:transparent;background:var(--t-tint-2)}
a.pc-chip--live:hover > .pc-ico{transform:translateX(2px)}
/* T42: chips are UI, not paper objects (design doc §3.10): in dark the small pill takes the dark surface like every other pill. */
[data-theme="dark"] .pc-chip--sm:not(.is-selected):not([aria-pressed="true"]):not([aria-current]):not(:has(input:checked)){background:var(--sunken);border-color:transparent;color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-chip--sm:not(.is-selected):not([aria-pressed="true"]):not([aria-current]):not(:has(input:checked)){background:var(--sunken);border-color:transparent;color:var(--ink)}}
.pc-chip--live > b{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live)}
.pc-chip input[type=radio],.pc-chip input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pc-chip:has(input:focus-visible),.pc-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-chipn{font-weight:600;opacity:.72}
@media (max-width:700px){
  .pc-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .pc-chips--scroll::-webkit-scrollbar{display:none}
  .pc-chips--scroll > *{flex:none}
}
/* Segmented tabs = .tabs-app: a row of pills, gap 8, the active one ink. Children: a, button, label, .pc-tab. */
.pc-seg,.pn-seg,.pc-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;margin:0;padding:0;border:0;background:transparent}
.pc-seg--md{min-height:var(--control-md)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label),.pc-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-sm);margin:0;padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--r-chip);background:var(--sunken);color:var(--ink);font:var(--type-label);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label):hover,.pc-tab:hover{background:var(--surface-2)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(.is-active,[aria-current="page"],[aria-current="true"],[aria-selected="true"],[aria-pressed="true"]),:is(.pc-seg,.pn-seg) > label:has(input:checked),.pc-tab.is-active,.pc-tab:has(input:checked){background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--btn-ink)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label):focus-visible,.pc-tab:focus-visible,.pc-tab:has(input:focus-visible),:is(.pc-seg,.pn-seg) > label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
:is(.pc-seg,.pn-seg) > label > input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
:is(.pc-seg,.pn-seg) > :is(button,a) .pc-ico,.pc-chip .pc-ico{width:var(--icon-s);height:var(--icon-s);margin-block:-2px}
/* A count or an icon inside a pill never makes it taller than the mockup's 35 (13 px line + 10/10 + 1/1). */
:is(.pc-seg,.pn-seg) > button:disabled{opacity:.45;cursor:not-allowed}
/* Chrome seg = the mockup tool bar (.tool .tabs): a chrome track, on-dark pills, the active one pink. */
.pc-seg.pc-seg--chrome{display:inline-flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1);border-radius:var(--r-m);background:var(--chrome);border:1px solid transparent}
.pc-seg.pc-seg--chrome > :is(a,button,label){min-height:var(--control-sm);padding:var(--space-2) var(--space-3);color:var(--on-chrome);background:var(--chrome-well)}
.pc-seg.pc-seg--chrome > :is(a,button,label):hover{background:var(--chrome-well-hover)}
.pc-seg.pc-seg--chrome > :is(.is-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]){background:var(--seg-on,var(--pink));color:var(--on-seg-on,var(--anthracite));border-color:transparent}   /* member dark: surface 3 + ink, pink is the one key */
/* Inline counts inside pills. */
.pc-count.pc-count--inline,.pn-seg__n{position:static;display:inline-block;min-width:20px;height:20px;margin-block:-3px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--accent);color:var(--on-accent);font:600 12px/20px var(--body);text-align:center;box-shadow:none}
:is(.pc-seg,.pn-seg) > .is-active :is(.pc-count--inline,.pn-seg__n),:is(.pc-seg,.pn-seg) > [aria-current] :is(.pc-count--inline,.pn-seg__n){background:var(--accent);color:var(--on-accent)}
/* Gold-bronze pill (owner 15.10.: the Premium choice on /ads/ and /sellers/): a modifier of the kit pill or chip, never its
   own component. Rest = light metal + dark bronze ink, chosen = dark bronze + pale gold ink and a gold ring, so the chosen
   state still reads at a glance. The slow sheen sweeps the first layer; no motion under prefers-reduced-motion. The
   selectors carry :hover so the kit's hover fill never replaces the metal. */
:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(a,button,label),:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(a,button,label):hover,.pc-chip.pc-chip--premium,.pc-chip.pc-chip--premium:hover{border-color:transparent;background:var(--prem-sheen) 100% 0/300% 100% no-repeat,var(--prem-metal);color:var(--prem-metal-ink);box-shadow:var(--prem-metal-bevel)}
:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(.is-active,[aria-current],[aria-pressed="true"]),:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(.is-active,[aria-current],[aria-pressed="true"]):hover,.pc-chip.pc-chip--premium:is(.is-selected,[aria-current],[aria-pressed="true"]),.pc-chip.pc-chip--premium:is(.is-selected,[aria-current],[aria-pressed="true"]):hover{background:var(--prem-sheen) 100% 0/300% 100% no-repeat,var(--prem-metal-dk);color:var(--prem-metal-dk-ink);box-shadow:var(--prem-metal-ring)}
@media (hover:hover){.pc-chip--premium:hover{filter:brightness(1.05)}}
@media (prefers-reduced-motion:no-preference){.pc-chip--premium{animation:pc-prem-sheen 5s ease-in-out 1s infinite}}
@keyframes pc-prem-sheen{0%{background-position:100% 0,0 0}45%,100%{background-position:0 0,0 0}}

/* ==========================================================================
   Labels, badges, stamps, stickers (mockup .real / .stamp / .sticker)
   ========================================================================== */
/* Badge = .real: ink label, radius 6, Archivo 800 11 wdth 90 .12em caps, 6/9. The generic badge is its duck twin. */
.pc-badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:var(--space-1) var(--space-2);border-radius:var(--r-label);font:var(--badge-font,600 11px/1 var(--font-label));letter-spacing:var(--badge-tr,.02em);white-space:nowrap;background:var(--sunken);color:var(--ink)}
.pc-badge .pc-ico{width:12px;height:12px}
.pc-real{background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pc-real::before{content:"✓";color:var(--pink)}
/* Premium = the same ink label with the pink star (--prem-ring on dark). */
.pc-badge--premium{background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pc-badge--premium .pc-ico{color:var(--pink);fill:currentColor;stroke:none}
.pc-badge--verified{background:var(--accent-soft);color:var(--ink)}
.pc-badge--accent{background:var(--accent);color:var(--on-accent)}
/* SH-01: the card chip stays off. N7 #93: the seal = legacy's fake / ID check */
.pc-verified{flex:none;width:16px;height:16px;color:var(--pink);vertical-align:-3px}
:not(.pc-scard__name)>.pc-verified{margin-left:4px}
.pn-vbadge .pc-ico{color:var(--pink)}
.pc-badge--verified:has(.pc-verified){display:none}
.pc-badge--online{background:transparent;padding:0;min-height:0;color:var(--ink-2);font:var(--type-cap);letter-spacing:0;text-transform:none}
.pc-badge--online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--online)}
.pc-badge--danger{background:transparent;padding:0;color:var(--danger)}
/* Lock pill on gated media: the ink label on the photo. */
.pc-lockpill{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:7px 11px;border-radius:var(--r-label);background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring);font:700 11px/1 var(--font-display);letter-spacing:0;white-space:nowrap}
.pc-lockpill .pc-ico{width:14px;height:14px;stroke-width:2.2}
/* .stamp: the rubber stamp, -9deg, ink on a duck veil. */
.pc-stamp,.pn-stamp{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:3px solid var(--anthracite);border-radius:var(--r-stamp);background:var(--stamp-fill);color:var(--anthracite);font:700 19px/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap;transform:rotate(-9deg)}
.pc-stamp .pc-tub,.pn-stamp .pn-tub{border-color:var(--anthracite);color:var(--anthracite)}
.pc-stamp--sm{padding:6px 8px;border-width:2px;font-size:15px}
/* .sticker: Archivo 800 12 wdth 90 .1em caps pill, +7deg, soft drop. Cream / black. */
.pc-sticker,.pn-sticker{display:inline-block;padding:10px 14px;border-radius:var(--radius-full);font:700 12px/1 var(--font-display);letter-spacing:0;white-space:nowrap;transform:rotate(7deg);box-shadow:var(--sh-sticker);background:var(--cream);color:var(--anthracite)}
.pn-sticker{position:absolute;z-index:3}
.pc-sticker--cream,.pn-sticker--cream,.pn-sticker--blush{background:var(--cream);color:var(--anthracite)}
.pc-sticker--black,.pn-sticker--black{background:var(--anthracite);color:var(--white)}
.pn-sticker--accent{background:var(--pink);color:var(--anthracite)}
.pn-sticker--static{position:static}
.pn-sticker--tilt{transform:rotate(7deg)}
/* Reserved: the stamp across the photo (the photo desaturated 40 %). */
.pn-tape{position:absolute;left:50%;top:50%;z-index:3;display:inline-flex;align-items:center;padding:8px 12px;border:3px solid var(--anthracite);border-radius:var(--r-stamp);background:var(--stamp-fill);color:var(--anthracite);font:700 15px/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap;transform:translate(-50%,-50%) rotate(-9deg);pointer-events:none}
.pn-tape > span + span{display:none}
/* adult (owner 05.10.): a porn cover comes pre-blurred from legacy; the lock pill names the way out (Premium). */
.pn-lock{position:absolute;left:50%;top:50%;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--accent);color:var(--ink);font:700 11px/1 var(--font-display);letter-spacing:0;transform:translate(-50%,-50%);box-shadow:var(--sh-float);pointer-events:none}
.pn-lock svg{width:14px;height:14px}
.is-locked .pc-media > img,.is-locked .pc-media > picture > img{transform:scale(1.04)}   /* hides the blur's soft edge */
.is-reserved .pc-media > img,.is-reserved .pc-media > picture > img{filter:grayscale(.4)}
/* Live pill = .chip with the live dot. */

.pn-livedot{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--live);animation:pn-pulse 1.6s ease-out infinite}
@keyframes pn-pulse{0%{box-shadow:0 0 0 0 var(--pulse-ring)}100%{box-shadow:0 0 0 10px transparent}}
.pn-ondot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2px var(--dot-ring,var(--surface))}

/* ==========================================================================
   Avatar (mockup .seller .av): a circle with the 1 px line on duck egg; photo or Archivo initial.
   ========================================================================== */
.pc-avatar{position:relative;flex:none;align-self:center;display:inline-grid;place-items:center;width:40px;height:40px;min-width:0;max-width:none;aspect-ratio:1;overflow:hidden;border-radius:50%;border:1px solid transparent;background:var(--av-g0);color:var(--av-ink);font:600 16px/1 var(--body);text-decoration:none}
.pc-avatar img{width:100%;height:100%;aspect-ratio:1;border-radius:inherit;object-fit:cover;object-position:50% 35%}
/* A17 (owner 18.10.): six muted tones, the initial in ink (pnew_avatar_tone: id % 6); g6 / g7 only for markup cached before */
.pc-avatar--g0{background:var(--av-g0);color:var(--av-ink)}
.pc-avatar--g1{background:var(--av-g1);color:var(--av-ink)}
.pc-avatar--g2{background:var(--av-g2);color:var(--av-ink)}
.pc-avatar--g3{background:var(--av-g3);color:var(--av-ink)}
.pc-avatar--g4{background:var(--av-g4);color:var(--av-ink)}
.pc-avatar--g5{background:var(--av-g5);color:var(--av-ink)}
.pc-avatar--g6{background:var(--av-g0);color:var(--av-ink)}
.pc-avatar--g7{background:var(--av-g1);color:var(--av-ink)}
.pc-avatar--sm{width:var(--avatar-s);height:var(--avatar-s);font-size:13px}
.pc-avatar--xs{width:var(--avatar-xs);height:var(--avatar-xs);font-size:12px}
.pc-avatar--lg{width:var(--avatar-2xl);height:var(--avatar-2xl);font-size:30px}
.pc-avatar--xl{width:118px;height:118px;font-size:44px}
/* Pink ring = "this is the seller" / online. */
.pc-avatar--ring{border:0}
.pc-avatar__dot{position:absolute;right:0;bottom:0;width:28%;height:28%;min-width:9px;min-height:9px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2px var(--surface)}
/* Story row: 64 rings (pink when new/online, line otherwise). */



/* Ticker: a flat pink band (no tilt), kicker type. Real facts only. */
.pn-ticker{display:flex;align-items:center;height:36px;margin:14px 0;overflow:hidden;background:var(--pink);color:var(--anthracite);border-radius:var(--radius-full)}
.pn-ticker__track{display:flex;flex:none;gap:26px;padding-inline-end:26px;white-space:nowrap;font:600 12px/1 var(--font-label);letter-spacing:0;animation:pn-marquee 26s linear infinite}
.pn-ticker__track > span{display:inline-flex;align-items:center;gap:26px}
.pn-ticker__track > span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--anthracite);opacity:.55}
@keyframes pn-marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   Notes, alerts, toast (mockup .rules is the info box)
   ========================================================================== */
.pc-rules{background:var(--surface);border:0;border-radius:var(--r-rules);padding:18px 22px;font-size:13px;color:var(--ink-2)}
.pc-rules b{color:var(--ink)}
/* Tonal pass 05.10.: an alert is a tonal note (surface on the ground, sunken in a panel: app.css), no line; danger = the
   danger-soft fill with the danger icon. */
.pc-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--r-rules);border:1px solid transparent;background:var(--surface);color:var(--ink);font:var(--type-body)}
.pc-alert b{font-weight:700}
.pc-alert .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m);margin-top:1px}
.pc-alert--success .pc-ico{color:var(--success)}
.pc-alert--warning .pc-ico{color:var(--warning)}
.pc-alert--danger{background:var(--danger-soft)}
.pc-alert--danger .pc-ico{color:var(--danger)}
.pc-alert[hidden]{display:none}   /* adml 03.10.: a hidden error box (data-lp-err …) showed as an empty red frame */
.pc-toast{display:inline-flex;align-items:center;gap:var(--space-3);min-height:48px;padding:0 var(--space-4);border-radius:var(--toast-r,999px);border:1px solid transparent;background:var(--toast-bg,var(--chrome));color:var(--on-chrome);box-shadow:var(--sh-float);font:var(--type-strong)}
.pc-toast button,.pc-toast a{border:0;background:transparent;color:var(--pink);font:600 13px/18px var(--body);letter-spacing:var(--tr-btn);text-decoration:none;cursor:pointer;padding:0}

/* ==========================================================================
   Page head (mockup .app .h-m + .sub) and progress steps
   ========================================================================== */


/* ==========================================================================
   Fields (tonal pass 05.10.: filled pills, not outlined boxes. The fill is --field on the ground and --field-in inside
   a panel / sheet / card (re-pointed below); the border stays declared, transparent, so focus and error colour it.
   Focus = the ink edge + the 3 px pink-soft ring. The label is the mockup small caps label.)
   ========================================================================== */
.pc-field{display:grid;gap:var(--label-gap);min-width:0}
.pc-label{font:var(--type-label);letter-spacing:0;color:var(--ink)}
:is(.pn-panel,.pn-chatpage,.pn-chatrail,.pn-sheet,.pn-menu,.pc-box,.pc-card,.pc-list,.pc-actionbar,.pn-phead,.pn-composer,.pn-mksheet,.pc-empty,.pn-empty){--field:var(--field-in)}
.pc-input{width:100%;min-height:var(--control-field);padding:0 var(--space-3);border-radius:var(--r-field);border:1px solid var(--line);background:var(--field);color:var(--ink);font:var(--type-ui);appearance:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background-color var(--dur-fast)}
.pc-input::placeholder{color:var(--ink-3);opacity:1}
/* the one ring (docs/design-system.md §8), never the 12 % halo (1.3:1, MCT-005) or a 1 px pink edge */
.pc-input:focus-visible,.pc-input.is-focus{outline:2px solid var(--focus-ring);outline-offset:2px}
textarea.pc-input{height:auto;min-height:88px;padding:var(--space-3);border-radius:var(--r-pcard);resize:vertical}
.pc-help{font:var(--type-meta);color:var(--ink-2)}
.pc-field > .pc-input + .pc-help,.pc-field > .pc-select + .pc-help,.pc-field > .pc-affix + .pc-help{margin-top:calc(var(--help-gap) - var(--label-gap))}   /* field → help 4 (CONT-037, MSL-031) */
/* error: a 2 px danger ring inside the field + the danger text; never pink, never the focus ring (docs/design-system.md §6) */
.pc-field.is-error .pc-input{border-color:transparent;box-shadow:inset 0 0 0 2px var(--danger)}
.pc-field.is-error .pc-help{color:var(--danger)}
.pc-input:disabled{background:var(--sunken);color:var(--ink-2);opacity:.7;cursor:not-allowed}
.pc-input[readonly]{background:transparent;border-color:var(--mline);color:var(--ink-2)}   /* visual audit VM-019: read-only reads as text in a frame, not as a disabled well */
.pc-affix{position:relative}
.pc-affix .pc-input{padding-right:52px}
.pc-affix > .pc-affix__btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);border-radius:var(--radius-full);cursor:pointer}
.pc-affix > .pc-affix__btn:hover{color:var(--ink)}
.pc-select{position:relative}
.pc-select .pc-input{padding-right:40px;cursor:pointer}
.pc-select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* .pc-selchip: a native select in the pill geometry (35, Inter Tight 600 13, the line; set = ink like a chosen pill). */
.pc-selchip{position:relative;display:inline-block;flex:none}
.pc-selchip .pc-input{width:auto;min-height:var(--control-sm);padding:0 36px 0 var(--space-3);background:var(--sunken);font:var(--type-label)}
.pc-selchip::after{right:16px;width:7px;height:7px}
.pc-selchip.is-set .pc-input{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pc-selchip.is-set::after{border-color:var(--on-btn-ink)}
/* Choice: 22 box / circle with the line, checked = ink. Toggle: 52x30 line track, pink when on, paper knob. */
.pc-choice{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--tap);font:var(--type-body);color:var(--ink);cursor:pointer}
.pc-check,.pc-radio{appearance:none;margin:0;flex:none;width:20px;height:20px;border:0;box-shadow:inset 0 0 0 2px var(--ink-3);background:var(--field);display:inline-grid;place-items:center;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.pc-check{border-radius:var(--r-s)}
.pc-radio{border-radius:50%}
.pc-check:checked,.pc-radio:checked{background:var(--check-on,var(--btn-ink));box-shadow:none}
.pc-check:checked::after{content:"";width:10px;height:5px;border-left:2px solid var(--on-check-on,var(--on-btn-ink));border-bottom:2px solid var(--on-check-on,var(--on-btn-ink));transform:translateY(-1px) rotate(-45deg)}
.pc-radio:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-check-on,var(--on-btn-ink))}
.pc-switch{appearance:none;margin:0;flex:none;position:relative;width:44px;height:24px;padding:0;border:0;border-radius:var(--radius-full);background:var(--switch-off,var(--surface-2));cursor:pointer;transition:background-color var(--dur-base),border-color var(--dur-base)}
.pc-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--switch-knob,var(--paper));box-shadow:var(--switch-knob-sh,var(--sh-knob));transition:transform var(--dur-base) var(--ease-snap)}
/* A8 (owner 18.10., innen-50): a switch that is on is ink (its knob the surface), not pink — pink stays for the one key per
   view and for unread; Settings had more pink than the pay page */
.pc-switch:checked{background:var(--switch-on,var(--ink));border-color:transparent}   /* visual audit VM-004: the ink fill alone; in dark the 1px ink edge read as a white line */
.pc-switch:checked::after{background:var(--switch-knob-on,var(--surface))}
.pc-switch:checked::after{transform:translateX(20px)}
button.pc-switch,i.pc-switch{margin-left:auto}
button.pc-switch::after,i.pc-switch::after{content:none}
button.pc-switch i,i.pc-switch i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--switch-knob,var(--paper));box-shadow:var(--switch-knob-sh,var(--sh-knob));transition:transform var(--dur-base) var(--ease-snap)}
button.pc-switch.is-on,button.pc-switch[aria-checked="true"],[aria-pressed="true"] > i.pc-switch{background:var(--switch-on,var(--ink));border-color:transparent}
button.pc-switch.is-on i,button.pc-switch[aria-checked="true"] i,[aria-pressed="true"] > i.pc-switch i{background:var(--switch-knob-on,var(--surface))}
button.pc-switch.is-on i,button.pc-switch[aria-checked="true"] i,[aria-pressed="true"] > i.pc-switch i{transform:translateX(20px)}
/* UX 17.10. #76: one switch everywhere. A row that is itself the control (the light / dark toggle in the member drawer and
   the guest menu: a link with aria-pressed) draws it as <i class="pc-switch" aria-hidden="true"><i></i></i>. */
@media (prefers-reduced-motion:reduce){.pc-switch,.pc-switch::after,.pc-switch i{transition:none}}
.pc-check:focus-visible,.pc-radio:focus-visible,.pc-switch:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Photo upload: dashed pcard slots. */


.pc-slot{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--r-pcard);overflow:hidden;background:var(--surface);border:1.5px dashed var(--line);display:grid;place-items:center;align-content:center;gap:4px;color:var(--ink-2);font:600 12px/1.3 var(--font-sans);cursor:pointer}
.pc-slot:hover{border-color:var(--line-3);color:var(--ink)}
.pc-slot.is-filled{border:1px solid var(--line);cursor:default}
.pc-slot__cover{position:absolute;left:6px;bottom:6px;z-index:3}

/* ==========================================================================
   Media + the missing-photo care label (mockup .ph stripes + .clabel-big). Never a drawn panty, never a woman.
   ========================================================================== */
.pc-media{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:var(--ph-media);color:var(--ph-text)}
/* photo house look (docs/photo-look-06-10.md): filter on the photo, ::before = colour pull, ::after = tone (paper x vignette x foot x grain).
   Every amount is its token x --photo-look x --photo-ease; no size, no layout, nothing to load.
   08.10. (#85): a pipeline photo may sit in a <picture> (an AVIF <source> in front of the same <img>, lib/imgvariant.php
   pnew_img_picture). The picture box is display:contents and every "> img" rule of a photo box also names "> picture > img". */
:is(.pc-media,.pc-scard__media,.pc-story__av,.pn-do-card) > picture{display:contents}
.pc-media > img,.pc-media > picture > img{z-index:2;object-position:50% 35%;transition:filter var(--dur-slow) var(--ease-out);filter:saturate(calc(1 - var(--photo-desat) * var(--photo-look) * var(--photo-ease))) contrast(calc(1 + var(--photo-contrast) * var(--photo-look) * var(--photo-ease))) brightness(calc(1 + var(--photo-lift) * var(--photo-look) * var(--photo-ease)))}
.pc-media:has(> img,> picture > img)::before,.pc-media:has(> img,> picture > img)::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;transition:opacity var(--dur-slow) var(--ease-out)}
.pc-media:has(> img,> picture > img)::before{opacity:calc(var(--photo-wash) * var(--photo-look) * var(--photo-ease));background:var(--photo-tint);mix-blend-mode:var(--photo-blend)}
.pc-media:has(> img,> picture > img)::after{opacity:calc(var(--photo-tone) * var(--photo-look) * var(--photo-ease));background:var(--photo-grain) 0 0/120px 120px,var(--photo-foot),var(--photo-shade);background-blend-mode:multiply;mix-blend-mode:var(--photo-tone-blend)}
@media (hover:hover){.pn-card-link:hover .pc-media{--photo-ease:var(--photo-hover)}}
@media (prefers-reduced-motion:reduce){.pc-media > img,.pc-media > picture > img,.pc-media::before,.pc-media::after{transition:none}}
.pn-gal__slide,.pn-gal__thumb,.pn-snap{--photo-look:0}   /* true colour where buyers judge the item: ad gallery, orders, offers, reviews (grading = cards and rails only) */
:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media::before,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media::after,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media::before,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media::after{content:none}   /* and no idle layers there */
:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media > img,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media > picture > img,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media > img,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media > picture > img{filter:none}
.pc-media:has(> .pc-nophoto){container-type:inline-size}
/* The care label (.clabel-big): cream, radius 6, dashed seam 5 px in, -5deg, logo + "no photo yet" + three symbols. */
.pc-nophoto{position:relative;z-index:1;display:grid;justify-items:start;gap:0;width:min(62%,190px);padding:12px 12px 11px;border-radius:var(--r-label);background:var(--cream);color:var(--anthracite);transform:rotate(-5deg);box-shadow:var(--sh-pola);font-size:14px}
.pc-nophoto::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--dash-2);border-radius:4px;pointer-events:none}
.pc-nophoto .pc-logo{font-size:1.15em;color:var(--anthracite)}
.pc-nophoto .pc-logo__dot{animation:none}
.pc-nophoto b{display:block;margin-top:.5em;font:600 .72em/1.15 var(--font-label);letter-spacing:0}
.pc-nophoto__syms{display:flex;gap:6px;margin-top:.6em}
.pc-nophoto__syms i{position:relative;width:14px;height:14px;border:2px solid var(--anthracite);border-radius:3px}
.pc-nophoto__syms i::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;background:var(--anthracite);transform:rotate(45deg)}
.pc-nophoto__syms i:nth-child(2){border-radius:50%}
.pc-nophoto__syms i:nth-child(3){border-radius:0;border-width:0 0 2px;width:12px}
@container (max-width:150px){.pc-nophoto{padding:8px;width:70%;font-size:11px}.pc-nophoto b,.pc-nophoto__syms{display:none}}
@container (max-width:80px){.pc-nophoto{padding:5px 6px;font-size:9px;transform:none}.pc-nophoto::before{inset:2px;border-width:1px}}
/* Retired: the drawn garment (svg_cut) now renders the care label; the class stays inert for old markup. */


/* ==========================================================================
   Listing card (adcard2 03.10., docs/adcard-03-10.md; the seller portrait's sibling). The photo IS the card: the 4:5
   photo fills the rounded frame (radius 20), the 50 % grey edge drawn over it (the link's ::after, the same edge on
   every card and in every state). On the photo: the price ticket top left (ink, cream tabular numerals; a label, not a
   button), the glass like top right, the RESERVED stamp, and the caption at the foot on a soft shade only as tall as it
   needs: PREMIUM (pink kicker) / the title, 2 lines max / a 22 px round avatar + "@name" and the glass photo count.
   Nothing under the photo, so every card in a row is the same size. The upper part of the photo stays unshaded, so the
   item's colour can still be judged (the ad page gallery stays true colour anyway).
   .pc-card alone stays the plain paper card for the wizard's storefront preview (.pn-wizcard).
   ========================================================================== */
.pc-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pcard);overflow:hidden;color:var(--ink);min-width:0}
.pc-card > .pn-card-link{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit;text-decoration:none}
.pc-card .pc-media{aspect-ratio:4/5;width:100%;max-width:100%;flex:none;border-radius:0}
.pc-card .pc-media > img,.pc-card .pc-media > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-card.pn-prodcard{display:block;background:none;border:0;border-radius:var(--r-pcard);overflow:visible;container:pc-card / inline-size}
.pn-prodcard > .pn-card-link{position:relative;display:block;min-width:0;border-radius:inherit;overflow:hidden;isolation:isolate;color:var(--scard-ink)}
.pn-prodcard > .pn-card-link::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--t-card-edge,transparent);transition:box-shadow var(--dur-fast);pointer-events:none}
.pn-prodcard .pc-media{border-radius:inherit}
.pn-prodcard .pc-media > img,.pn-prodcard .pc-media > picture > img{transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}
/* A missing photo: the care label rides a little higher, clear of the caption. */
.pn-prodcard .pc-media:has(> .pc-nophoto){padding-bottom:24%}
/* The price ticket: top left, never under the like (its width stops short of the like's column). */
.pc-card__ticket{position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 64px);min-height:28px;padding:4px 9px 4px 7px;border-radius:var(--r-label);background:var(--anthracite);color:var(--cream);box-shadow:0 0 0 1px var(--line),var(--scard-tshadow)}
.pc-card__ticket::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--scard-ink-3)}   /* the punched hole: a tag, not a button */
.pc-card__ticket .pc-price{line-height:1;color:inherit}
.pc-card__ticket .pn-askprice{min-width:0;font:600 11.5px/1.15 var(--font-sans);color:inherit;overflow-wrap:anywhere}
.pn-prodcard.is-reserved .pc-card__ticket{background:var(--scard-glass-hover);color:var(--scard-ink-2)}
/* The caption: bottom-anchored, so a kicker or a second title line grows it upwards; the card keeps its size. */
.pn-prodcard .pn-tape{top:40%}   /* the stamp sits above the caption */
.pc-card__cap{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;gap:5px;padding:14px 12px 11px;min-width:0;color:var(--scard-ink);text-shadow:var(--scard-tshadow)}
.pc-card__cap::before{content:"";position:absolute;inset:-26px 0 0;z-index:-1;background:var(--pcard-cap-shade);pointer-events:none}
.pn-prodcard .pc-card__title{margin:0;font:600 15px/1.25 var(--font-sans);color:var(--scard-ink);min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}   /* 2 lines max, the title attribute has the rest */
.pn-prodcard .pc-card__tier{order:-1;margin-bottom:-1px;font:600 11px/1 var(--font-label);letter-spacing:0;color:var(--pink);white-space:nowrap}
.pc-card__by{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px;font:500 12.5px/1.2 var(--font-sans);color:var(--scard-ink-2);white-space:nowrap}
.pc-card__by > .pc-avatar{width:22px;height:22px;border-color:var(--line);font-size:10px;text-shadow:none}
.pc-card__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* The mockup's "@nickname": the @ is drawn, never text (an @handle in text reads as contact data: pnew_item_contact). */
.pc-card__name::before{content:"@"}
.pc-card__detail{flex:none;white-space:pre}
/* The like: the seller portrait's glass disc (34, phone 32, 44+ hit area). Product photos are mostly light, so the
   glass rests one step darker (the portrait's hover glass) and the heart carries the caption shadow. */
.pc-card__fav,.pc-card .pc-card__fav{position:absolute;top:10px;right:10px;z-index:6;display:grid;place-items:center;padding:0;border-radius:50%;line-height:0;width:34px;height:34px;border:1px solid var(--line);background:var(--scard-glass-hover);color:var(--scard-ink);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transition:background-color var(--dur-fast),color var(--dur-fast),transform var(--dur-press)}
.pc-card__fav .pc-ico,.pc-card .pc-card__fav .pc-ico{display:block;width:18px;height:18px;margin:0;stroke-width:2.2;filter:drop-shadow(var(--scard-tshadow))}
.pc-card .pc-card__fav::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pc-card .pc-card__fav:hover{background:var(--glass-strong);border-color:var(--line)}
.pc-card .pc-card__fav:active{transform:scale(.92)}
.pc-card .pc-card__fav.is-on,.pc-card .pc-card__fav[aria-pressed="true"]{background:var(--scard-glass-hover);border-color:var(--line);color:var(--pink)}
.pc-card .pc-card__fav.is-on .pc-ico,.pc-card .pc-card__fav[aria-pressed="true"] .pc-ico{fill:currentColor}
.pc-card .pc-card__fav:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-prodcard:focus-within:has(.pn-card-link:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-prodcard .pn-card-link{outline:none}   /* the ring is the card's (above), never a second one on the link */
@media (hover:hover){.pn-prodcard:hover .pc-media > img,.pn-prodcard:hover .pc-media > picture > img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pn-prodcard .pc-media > img,.pn-prodcard .pc-media > picture > img,.pc-card .pc-card__fav{transition:none}}
/* Photo count: the small paper chip bottom right (gallery, feed); on a listing card a small glass chip at the end of
   the "@name" line (the name shortens first). */
.pn-photocount{position:absolute;right:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:5px 8px;border-radius:var(--radius-full);background:var(--paper);color:var(--anthracite);border:1px solid var(--line);font:700 11px/1 var(--font-sans)}
.pn-photocount .pc-ico{width:14px;height:14px}
.pn-prodcard .pn-photocount{position:static;flex:none;gap:3px;min-height:20px;margin-left:auto;padding:3px 7px 3px 6px;background:var(--scard-glass);color:var(--scard-ink);font:700 10.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-prodcard .pn-photocount .pc-ico{width:12px;height:12px}
@media (max-width:700px){
  .pc-card .pc-card__fav{top:8px;right:8px;width:32px;height:32px}.pc-card .pc-card__fav .pc-ico{width:17px;height:17px}
  .pn-photocount{right:8px;bottom:8px}
  .pc-card__ticket{top:8px;left:8px;min-height:26px;max-width:calc(100% - 58px)}
  .pc-card__cap{padding:12px 10px 9px;gap:4px}
  .pc-card__by{font-size:12px}
  .pn-prodcard .pc-card__tier{font-size:11px;letter-spacing:.06em}
}
/* Compact cards (rails and narrow grids, < 176 px): smaller type, the avatar 20, the photo count gives way. */
@container pc-card (max-width:175px){
  .pc-card__ticket{padding:3px 8px 3px 6px;gap:5px}
  .pc-card__ticket .pn-askprice{font-size:11px}
  .pc-card__cap{padding:10px 9px 8px;gap:4px}
  .pc-card__by{gap:5px;min-height:20px;font-size:11.5px}
  .pc-card__by > .pc-avatar{width:20px;height:20px;font-size:9px}
  .pn-prodcard .pc-card__by > .pn-photocount{display:none}
}
/* Top listing (owner 08.10., lib/top_data.php): the card's quiet glass label over the title — the photo count's glass,
   the 50 % grey edge, ink text; never pink (pink stays the one key). The listing page head shows .pn-topbadge (a .pc-badge). */
.pc-card__top{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:20px;padding:3px 7px 3px 6px;border-radius:var(--r-label);border:1px solid var(--line);background:var(--scard-glass);color:var(--scard-ink);font:600 10.5px/1 var(--font-sans);white-space:nowrap;text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pc-card__top .pc-ico{flex:none;width:12px;height:12px}
.pc-card__top > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pn-topbadge .pc-ico{width:12px;height:12px}
/* Ships first (09.10.): her badge in the profile head (quiet, never pink); on cards it is the .pc-card__top glass label */
.pn-sfbadge .pc-ico{width:14px;height:14px}
.pc-card__top + .pc-card__sf{margin-top:-2px}
/* The "Top listings" area over a grid (guest hub / facet / /ads/, member market): the section head and one row of
   listing cards as a snap scroller; half a card peeks out at the end, so the row reads as more. */
.pn-toparea{display:grid;gap:12px;min-width:0;margin:0 0 28px}
.pn-toparea > .pc-sechead{margin:0}
.pn-toparea__row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(168px,calc((100% - 4 * 16px) / 4.5),260px);gap:16px;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px}
.pn-toparea__row > *{min-width:0;scroll-snap-align:start}
/* The member market's wide column (layout.css .pn-wide: 4 / 5 / 6 / 7 columns): the area's cards keep the grid's width. */
@media (min-width:1280px){.pn-main > .pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 4 * 16px) / 5.4)}}
@media (min-width:1440px){.pn-main > .pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 5 * 16px) / 6.4)}}
@media (min-width:1800px){.pn-main > .pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 6 * 16px) / 7.4)}}
@media (max-width:700px){
  .pn-toparea{margin-bottom:20px}
  .pn-toparea__row{grid-auto-columns:calc((100% - 2 * 12px) / 2.3);gap:12px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}
/* Price: Archivo 900 wdth 80 tabular; the currency sits on the baseline at the same size ($38). */
.pc-price{font:700 var(--fs-price-card)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num);color:var(--ink);white-space:nowrap}
.pc-price__cur{font-size:1em;font-weight:inherit;vertical-align:baseline;line-height:inherit;margin:0}
.pc-price--l{font-size:var(--fs-price-l,40px)}
.pc-price--m{font-size:var(--fs-price-m,30px)}

/* ==========================================================================
   Seller card = a portrait (art-director pass 02.10., docs/sellercard-02-10.md). One surface: the photo fills the
   rounded 4:5 frame (object-position high: faces, not crops), the 50 % grey frame line is drawn over the photo (::after,
   the same edge on every card and in every state, premium included), the caption sits on the soft anthracite foot shade:
   PREMIUM kicker (pink, premium only), "@name" (Archivo 800, the @ quiet), meta (online dot + status / the country),
   "★ 4.9 · 14 listings". The like = a small glass disc top right, 44 px hit area. Hover: the photo zooms 3.5 %, the frame
   stays. No shadow (mockup cards carry none).
   ========================================================================== */
.pc-sellers{display:flex;gap:16px;flex-wrap:wrap}
.pc-sellers > .pc-scard{flex:none;width:176px}
.pc-scard{position:relative;display:block;min-width:0;aspect-ratio:4/5;border-radius:var(--r-pcard);overflow:hidden;isolation:isolate;background:var(--ph-media);color:var(--scard-ink)}
.pc-scard::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--t-card-edge,transparent);transition:box-shadow var(--dur-fast);pointer-events:none}
.pc-scard > .pn-card-link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.pc-scard > .pn-card-link::after{content:"";position:absolute;inset:0;z-index:3;background:var(--scard-shade);pointer-events:none}
.pc-scard__media{position:absolute;inset:0}
.pc-scard__media > img,.pc-scard__media > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform var(--dur-slow) var(--ease-out)}
.pc-scard__media:has(> .pc-nophoto){place-items:start center;padding-top:26%}
/* The caption: bottom-anchored, so a premium kicker or a second meta line grows it upwards; every card keeps its height. */
.pc-scard__cap{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;gap:var(--space-1,4px);padding:var(--space-4,16px);min-width:0;text-shadow:var(--scard-tshadow)}
.pc-scard__cap::before{content:"";position:absolute;inset:-56px 0 0;z-index:-1;background:var(--scard-cap-shade);pointer-events:none}
.pc-scard__tier{margin-bottom:2px;font:600 11px/1 var(--font-label);letter-spacing:0;color:var(--pink)}
.pc-scard__name{display:flex;align-items:center;gap:5px;min-width:0;font:700 17px/1.15 var(--font-sans);letter-spacing:0;color:var(--scard-ink)}
.pc-scard__name > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-scard__name > span::before{content:"@";margin-right:1px;font:500 .9em/1 var(--font-sans);color:var(--scard-ink-3)}
.pc-scard__meta,.pc-scard__score{display:block;min-width:0;font:500 12.5px/1.3 var(--font-sans);color:var(--scard-ink-2);overflow-wrap:anywhere}
.pc-scard__meta.is-online{color:var(--scard-ink);font-weight:600}
.pc-scard__meta.is-online::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--scard-online);box-shadow:var(--scard-online-halo);vertical-align:1px}
.pc-scard__score{color:var(--scard-ink);font-weight:600;font-variant-numeric:tabular-nums}
.pc-scard__star{color:var(--pink)}
/* The like: glass over the photo (blur), the grey 50 % rim, cream heart; on = the pink heart. */
.pc-scard .pc-card__fav{position:absolute;top:10px;right:10px;z-index:6;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--scard-glass);color:var(--scard-ink);line-height:0;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transition:background-color var(--dur-fast),color var(--dur-fast),transform var(--dur-press)}
.pc-scard .pc-card__fav .pc-ico{display:block;width:18px;height:18px;margin:0;stroke-width:2.2}
.pc-scard .pc-card__fav::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pc-scard .pc-card__fav:hover{background:var(--scard-glass-hover);border-color:var(--line)}
.pc-scard .pc-card__fav:active{transform:scale(.92)}
/* owner 12.10.: a blurred profile picture carries its reason, centred above the caption: the lock on the heart's glass, the label, one quiet line */
.pc-scard__private{position:absolute;left:50%;top:41%;z-index:6;display:grid;justify-items:center;gap:5px;width:max-content;max-width:calc(100% - 20px);transform:translate(-50%,-50%);color:var(--scard-ink);text-align:center;text-decoration:none;text-shadow:var(--scard-tshadow)}
.pc-scard__private::before{content:"";position:absolute;inset:-16px -22px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--scard-glass-hover),transparent)}   /* a soft dark halo: the cream type stays readable on a bright blurred photo */
.pc-scard__lock{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border:1px solid var(--line);border-radius:50%;background:var(--scard-glass);line-height:0;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transition:background-color var(--dur-fast),transform var(--dur-press)}
.pc-scard__lock .pc-ico{display:block;width:20px;height:20px;margin:0;stroke-width:2.2}
.pc-scard__private > b{font:700 14px/1.15 var(--font-sans)}
.pc-scard__private > small{font:500 12px/1.2 var(--font-sans);color:var(--scard-ink-2)}
.pc-scard__private:hover .pc-scard__lock{background:var(--scard-glass-hover)}
.pc-scard__private:active .pc-scard__lock{transform:scale(.92)}
.pc-scard__private:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:12px}
@media (max-width:700px){.pc-scard__lock{width:38px;height:38px}.pc-scard__lock .pc-ico{width:18px;height:18px}.pc-scard__private > b{font-size:13px}.pc-scard__private > small{font-size:11px}}
@media (prefers-reduced-motion:reduce){.pc-scard__lock{transition:none}}
.pc-scard .pc-card__fav.is-on,.pc-scard .pc-card__fav[aria-pressed="true"]{background:var(--scard-glass);border-color:var(--line);color:var(--pink)}
.pc-scard .pc-card__fav.is-on .pc-ico,.pc-scard .pc-card__fav[aria-pressed="true"] .pc-ico{fill:currentColor}
.pc-scard .pc-card__fav:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pc-scard:focus-within:has(.pn-card-link:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pc-scard .pn-card-link{outline:none}   /* the ring is the card's (above) */
@media (hover:hover){.pc-scard:hover .pc-scard__media > img,.pc-scard:hover .pc-scard__media > picture > img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pc-scard__media > img,.pc-scard__media > picture > img,.pc-scard .pc-card__fav{transition:none}}
/* The star disc on a video poster (video_item.php: .pc-scard__prem.pn-vitem__prem); the seller card itself shows Premium
   as the caption kicker since 02.10. */
.pc-scard__prem{position:absolute;top:14px;left:14px;z-index:4;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pink);color:var(--anthracite);box-shadow:0 0 0 2px var(--paper);line-height:0}
.pc-scard__prem .pc-ico{display:block;width:16px;height:16px;fill:currentColor}
@media (max-width:700px){
  .pc-sellers{gap:12px}.pc-sellers > .pc-scard{width:148px}
  .pc-scard .pc-card__fav{top:8px;right:8px;width:32px;height:32px}.pc-scard .pc-card__fav .pc-ico{width:17px;height:17px}
  .pc-scard .pc-card__fav::after{inset:-6px}
  .pc-scard__prem{top:12px;left:12px;width:26px;height:26px}.pc-scard__prem .pc-ico{width:14px;height:14px}
  .pc-scard__cap{padding:var(--space-3,12px);gap:2px;min-height:0}   /* owner 04.11.: the name sits at the bottom of the photo (no reserved foot row any more) */
  .pc-scard__tier{font-size:11px;letter-spacing:.06em}
  .pc-scard__meta,.pc-scard__score{font-size:11.5px}
}

/* ==========================================================================
   Premium row (owner 30.09.): story-style round avatars, the pink ring = premium, "@name" under it, the online dot for
   members. One line that slides sideways (snap, edge fade inside the gutter); the padding keeps ring + focus unclipped.
   ========================================================================== */
.pc-stories{display:flex;gap:18px;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 8px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,black var(--gutter),black calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,black var(--gutter),black calc(100% - var(--gutter)),transparent)}
.pc-stories::-webkit-scrollbar{display:none}
.pc-story{flex:none;width:88px;scroll-snap-align:start}
.pc-story__link{display:grid;justify-items:center;gap:8px;color:var(--ink);text-decoration:none;border-radius:var(--r-label)}
.pc-story__av{position:relative;display:block;width:80px;height:80px;padding:3px;border-radius:50%;border:2px solid transparent;background:var(--sunken);box-sizing:border-box}
.pc-story__av > img,.pc-story__av > picture > img,.pc-story__av > span[aria-hidden]{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 25%;background:var(--ph-media);color:var(--ph-text);font:700 20px/1 var(--font-display);}
.pc-story__dot{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2.5px var(--bg)}
.pc-story__name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12.5px/1.3 var(--font-sans)}
.pc-story__name::before{content:"@"}
.pc-story__link{outline:none}   /* the ring is the avatar's (below) */
.pc-story__link:focus-visible .pc-story__av{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (hover:hover){.pc-story__link:hover .pc-story__av{border-color:transparent}.pc-story__link:hover .pc-story__name{text-decoration:underline;text-underline-offset:2px}}
@media (max-width:700px){.pc-stories{gap:14px}.pc-story{width:74px}.pc-story__av{width:68px;height:68px}.pc-story__av > span[aria-hidden]{font-size:24px}}
/* Seller row on a paper list (tonal pass 05.10.: no line around the list, none between rows). */
.pc-list{background:var(--surface);border:1px solid transparent;border-radius:var(--r-box);padding:var(--space-2) var(--panel-pad)}
.pc-seller{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:10px 0}
.pc-seller__who{flex:1;min-width:0;display:grid;gap:2px}
.pc-seller__who b{display:flex;align-items:center;gap:6px;min-width:0;font:600 15px/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-seller__who span{font:400 12.5px/1.3 var(--font-sans);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   Paper objects: care card (.care), big care label (.clabel-big), note (.note + .mt), boxes, receipt, price box,
   doors, dark tiles, FAQ, strip, calculator, prose / masthead / toc
   ========================================================================== */
/* .care: cream, radius 8 8 18 18, dashed seam 6 px in. .n = step label, h3 = card head, p = 14 muted. */
.pc-care{position:relative;background:var(--cream);color:var(--anthracite);border-radius:8px 8px 18px 18px;padding:22px 20px 20px;list-style:none}
.pc-care::before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--dash);border-radius:5px 5px 14px 14px;pointer-events:none}
.pc-care__n{display:flex;align-items:baseline;gap:10px;font:600 11px/1 var(--font-label);letter-spacing:0;color:var(--muted-lt)}
.pc-care h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:10px 0 8px}
.pc-care p{margin:0;font-size:14px;color:var(--muted-lt)}
.pc-care .pc-obj{right:-14px;top:-58px;width:118px}
.pc-steps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pc-steps-grid--3{grid-template-columns:repeat(3,1fr)}
/* .clabel-big: the sewn-in label (logo, "Contents", a big word, three symbols, a line). -5deg. */
.pc-carelabel{position:relative;width:190px;background:var(--cream);color:var(--anthracite);border-radius:var(--r-label);padding:16px 16px 14px;transform:rotate(-5deg);box-shadow:var(--sh-label)}
.pc-carelabel::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--dash-2);border-radius:4px;pointer-events:none}
.pc-carelabel .pc-logo{font-size:18px}
.pc-carelabel p{margin:8px 0 0;font:600 12px/1.1 var(--font-label);letter-spacing:0}
.pc-carelabel__v{font:700 27px/var(--lh-head) var(--font-display);margin-top:2px}
.pc-carelabel small{font:600 12px/1.2 var(--font-sans)}
.pc-carelabel .pc-nophoto__syms{margin:10px 0 6px;gap:8px}
.pc-carelabel .pc-nophoto__syms i{width:18px;height:18px}
.pc-carelabel .pc-nophoto__syms i:nth-child(3){width:16px}
/* .note: paper, radius 4, taped (.mt), -1.2 / 0 / 1 deg in a row of three. */
.pc-notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc-note{position:relative;background:var(--paper);color:var(--anthracite);border-radius:var(--r-note);padding:26px 22px 20px;box-shadow:var(--sh-note)}
.pc-notes > .pc-note:nth-child(3n+1){transform:rotate(-1.2deg)}
.pc-notes > .pc-note:nth-child(3n){transform:rotate(1deg)}
.pc-mt{position:absolute;top:-12px;left:50%;width:86px;height:24px;margin-left:-43px;background:var(--mt-light);transform:rotate(-3deg)}
.pc-notes > .pc-note:nth-child(3n+2) .pc-mt{background:var(--mt-dark)}
.pc-care__num,.pc-note__n{font:700 33px/1 var(--font-display);letter-spacing:-.01em}
@media (max-width:700px){.pc-care__num,.pc-note__n{font-size:27px}}
.pc-note__n{display:block;color:var(--pink-press)}
.pc-note h3{font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);margin:4px 0 8px}
.pc-note p{margin:0;font-size:14px;color:var(--muted-lt)}
/* .box: radius 24, padding 26. Tonal (05.10.): no line; --dk anthracite (--dkbox, in dark the panel tone), --cr cream. */
.pc-box{position:relative;border-radius:var(--r-box);padding:var(--panel-pad);border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:0}
.pc-box h3,.pc-box__h{font:var(--type-title);margin:0 0 var(--head-gap)}
.pc-box--dk{background:var(--dkbox);color:var(--dk-ink)}
.pc-box--cr{background:var(--cream);color:var(--anthracite)}
.pc-box--cr p{color:var(--muted-lt)}
/* T14: zero specificity, so a page class inside a dark box (the calculator's pink result) keeps its own colour. */
:where(.pc-box--dk) p,:where(.pc-box--dk) small{color:var(--dk-ink-2)}
.pc-box .pc-hand{margin-top:14px}
.pc-priv{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px}
.pc-priv b{display:block;color:inherit}
.pc-priv small{color:var(--ink-2);font-size:12.5px}
.pc-box--dk .pc-priv b{color:var(--white)}
.pc-box--dk .pc-priv small{color:var(--dk-ink-2)}
/* Dark stat tile (.tile): card-dk, line, radius 22, 20/22. b = Archivo 900 54 wdth 75 pink. */
.pc-tiles{display:flex;gap:16px;flex-wrap:wrap}
.pc-tile{background:var(--dkbox-tile);color:var(--dk-ink);border:1px solid transparent;border-radius:var(--r-tile);padding:20px 22px;min-width:230px}
.pc-tile b{display:block;font:700 var(--fs-tile,24px)/30px var(--font-display);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--tile-num,var(--pink))}
.pc-tile p{margin:var(--space-1) 0 0;font:var(--type-body)}
.pc-tile small{color:var(--dk-ink-2);font-size:12px}
/* mockup phone .tile: min-width 0, flex 1 1 140px, padding 16, number 40 */
@media (max-width:700px){.pc-tile{min-width:0;flex:1 1 140px;padding:16px}.pc-tile b{font-size:var(--fs-tile,40px)}}
/* Receipt (.receipt): paper, line, zigzag foot, 1.5deg. Monospace like a till roll. */
.pc-receipt{position:relative;background:var(--paper);color:var(--anthracite);border:0;padding:28px 28px 36px;font:400 15px/22px var(--body);font-variant-numeric:tabular-nums;transform:rotate(1.5deg);box-shadow:var(--sh-receipt)}
.pc-receipt::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:var(--paper);-webkit-mask-image:conic-gradient(from -45deg at 50% 100%,black 90deg,transparent 0);mask-image:conic-gradient(from -45deg at 50% 100%,black 90deg,transparent 0);-webkit-mask-size:16px 100%;mask-size:16px 100%;-webkit-mask-position:50% 0;mask-position:50% 0}
/* polish v3: one mask for the torn edge (the two stacked gradient tiles left a hairline seam every 16px, dark ticks on dark). */
.pc-receipt__top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--line);padding-bottom:12px}
.pc-receipt .pc-logo{font-size:22px}
.pc-receipt__cnt{font:700 32px/1 var(--font-display);letter-spacing:var(--tr-num);margin:16px 0 4px}
.pc-receipt ul{list-style:none;margin:14px 0 0;padding:0}
.pc-receipt li{padding:10px 0;border-top:1px dashed var(--line)}
.pc-receipt li small{display:block;color:var(--muted-lt);font-size:11px;margin-top:4px}
.pc-receipt__foot{margin:14px 0 0;font-size:11px;color:var(--muted-lt)}
/* Price box (.pbox): paper, line, radius 22; rows dashed; the median row pink-press 40. */
.pc-pbox{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-tile);padding:30px 22px 22px}
.pc-pbox__t{font:600 12px/1.2 var(--font-label);letter-spacing:0}
.pc-pbox__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:0;padding:10px 0;margin:0;font-size:14px}
.pc-pbox__row b{font:700 22px/1 var(--font-display);letter-spacing:var(--tr-num)}
.pc-pbox__row.is-med b{color:var(--pink-glyph);font-size:29px}   /* night N8 #83: light 4.7:1 (pink-press was 2.3:1), dark unchanged */
.pc-pbox small{display:block;color:var(--ink-2);font-size:12px;margin-top:10px}
/* the price box foot (link tier 2, a content door): a caption and the full-width ink button, over a dashed rule */
.pc-pbox__foot{margin-top:18px;padding-top:16px;border-top:0}
.pc-pbox__more{margin:0 0 12px;font:500 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pc-pbox__foot .pc-btn{display:block;min-height:40px;padding-block:10px;white-space:normal;text-wrap:balance;text-align:center;line-height:1.15}   /* block: a wrapped label keeps the arrow on its last line, centred */
/* Doors (.door): radius 26, 28, line; buy = anthracite, sell = pink. */
.pc-doors{display:grid;grid-template-columns:1fr 1fr;gap:32px}   /* owner 05.10.: air between the two doors */
.pc-door{border-radius:var(--r-door);padding:28px;border:0;display:flex;flex-direction:column;gap:12px;text-align:left;background:var(--surface);color:var(--ink)}
.pc-door h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:0}
.pc-door p{margin:0;font-size:14px}
.pc-door--buy{background:var(--dk-bg);color:var(--dk-ink)}
.pc-door--buy p{color:var(--dk-ink-2)}
/* art director 27.10. (C-050, D-016): in dark the buy door was the page colour (1.0:1), an invisible card with padding */
[data-theme="dark"] .pc-door--buy{background:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-door--buy{background:var(--surface)}}
.pc-door--sell{background:var(--pink);color:var(--anthracite)}
.pc-door .pc-btn{align-self:flex-start;margin-top:6px}
/* FAQ (.faq details): line under each, summary = card head 26. */
.pc-faq details{margin:0 0 8px;padding:16px 18px;border-radius:var(--r-tile);background:var(--surface);max-width:860px}
.pc-faq summary{font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);cursor:pointer}
@media (max-width:700px){.pc-faq summary{font-size:var(--fs-sub-s,21px)}}
.pc-faq p{color:var(--ink-2);margin:10px 0 0}
/* Price strip (.strip): p25 / median / p75 tags on a bar. */
.pc-strip{position:relative;height:120px;margin:40px 0 20px;max-width:640px}
.pc-strip__bar{position:absolute;left:0;right:0;top:66px;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--chrome-2) 0 18%,var(--pink) 18% 78%,var(--chrome-2) 78%)}
.pc-strip__tg{position:absolute;top:0;transform:translateX(-50%);background:var(--cream);color:var(--anthracite);padding:8px 10px 7px 16px;border-radius:4px 10px 10px 4px;font:700 19px/1 var(--font-display);clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.pc-strip__tg small{display:block;font:700 9px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;margin-top:3px;opacity:.7;color:inherit}   /* night QA D6: inside a dark box (guide price figure) :where(.pc-box--dk) small painted the tag label dk-ink-2 on cream / pink (1.1:1) */
.pc-strip__tg.is-med{background:var(--pink);top:-6px;font-size:20px}
/* Stepper (.calc__row): 44 round buttons with the line, Archivo output. */
.pc-stepper{display:flex;align-items:center;gap:12px;margin:10px 0}
.pc-stepper button{width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:var(--sunken);color:inherit;font:700 20px/1 var(--font-sans);cursor:pointer}
.pc-stepper output{font:700 29px/1 var(--font-display);letter-spacing:var(--tr-num);min-width:36px;text-align:center}
/* Editorial: masthead (.mast), toc, prose with the pink-press drop cap. */
.pc-mast{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;font:600 12px/1 var(--font-sans);color:var(--ink-2);letter-spacing:0}
/* TOC = link tier 4 (list link, §2.6): a numbered index, no underline at rest; the number (01…) in Archivo pink-press,
   dashed rows, the text gets the 2px pink underline on hover, the 3px focus ring. */
.pc-toc{padding:16px 18px;border-radius:var(--r-tile);background:var(--surface);margin-top:30px}
.pc-toc b{font:600 12px/1 var(--font-label);letter-spacing:0}
.pc-toc ol{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:0;counter-reset:pc-toc}
.pc-toc li{counter-increment:pc-toc;border-bottom:0}
.pc-toc li a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;min-height:40px;padding:10px 0;font:600 14px/1.35 var(--font-sans);color:var(--ink);text-decoration:none;box-sizing:border-box}
.pc-toc li a::before{content:counter(pc-toc,decimal-leading-zero);font:700 12px/1.35 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--pink-glyph)}
.pc-toc li a:hover > span,.pc-toc li a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
.pc-toc li a[aria-current]{color:var(--pink-press)}
.pc-toc li a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pc-prose{font-size:var(--fs-prose);line-height:1.65;max-width:var(--measure-prose)}
.pc-prose h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:30px 0 8px}

/* ==========================================================================
   Section head (mockup .sec-head): label or kicker, h-m, muted line; action right, bottom aligned.
   ========================================================================== */
/* design system 03.11. (docs/design-system.md §9.2, MBY-032, MSL-022): the head and its «All …» key sit on one baseline (the
   key dropped 12 px below the head's centre: flex-end + a 12 px margin on the h2); head → content --head-gap 12. */
.pc-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-bottom:var(--head-gap);flex-wrap:wrap}
.pc-sechead > div{min-width:0}
.pc-sechead .pc-h-m,.pc-sechead h2{margin:var(--space-1) 0 0}
.pc-sechead > div > :first-child:is(h2,h1){margin-top:0}
.pc-sechead p{margin:var(--space-1) 0 0;color:var(--ink-2)}
.pc-sechead--sm{margin-bottom:var(--head-gap)}
.pc-sechead--sm .pc-h-card{margin:var(--space-1) 0 0}
.pc-sechead > div > :first-child.pc-h-card{margin-top:0}
.pc-sechead--sm p{font:var(--type-meta)}   /* the panel head's one muted line (the .pc-help size) */

/* ==========================================================================
   The app frame (mockup .app "Your corner"): page head, pill tabs, card grid, empty state cards, rules box
   ========================================================================== */

.pc-tabs-app{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.pc-empties{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
/* Empty state (.empty): a paper card, radius 28, 56/32/44, centred. Object 150 (shadow-fig), Archivo head 40,
   one sentence, one Caveat note, one button. Objects only: envelope, tag on a peg (with "$ ?"), empty peg, basket. */
.pc-empty,.pn-empty{background:var(--surface);border:1px solid transparent;border-radius:var(--r-empty);padding:var(--space-12) var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;color:var(--ink)}
.pc-empty__ob{position:relative;width:150px;margin-bottom:18px;filter:var(--fig-shadow);container-type:inline-size}
.pc-empty__ob img{display:block;width:100%;height:auto}
.pc-empty__ob .pc-ptag{left:50%;top:65%;--r:-14deg;font-size:16cqw}
.pc-empty h1,.pc-empty h2,.pc-empty h3,.pn-empty h1,.pn-empty h2,.pn-empty h3{font:var(--type-title);margin:0 0 var(--space-2);color:var(--ink);text-wrap:balance;overflow-wrap:break-word;hyphens:manual;max-width:100%}
.pc-empty p,.pn-empty p{margin:0;color:var(--ink-2);max-width:340px}
.pc-empty .pc-hand,.pn-empty .pc-hand{margin:14px 0 22px;transform:rotate(-3deg)}
/* inside the member area an empty state is a calm panel: no kraft-paper object, no hand note (owner 01.11. / 03.11.: no brown,
   no marker fonts inside; MCH-159/160, MCT-019) */
body.pc-root:not(.pc-guest) :is(.pc-empty,.pn-empty) :is(.pc-empty__ob,.pc-hand){display:none}
.pc-empty > .pc-btn:last-child,.pn-empty > .pc-btn:last-child{margin-bottom:6px}
.pc-empty__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin:var(--space-6) 0 0}   /* owner 02.11.: two keys side by side, never squeezed */
/* Brand objects in the empty state (legacy class names from pnew_object). */

/* mockup phone .empty: padding 40/22/32, head 32 */
@media (max-width:700px){.pc-empty,.pn-empty{padding:40px 22px 32px}:is(.pc-empty,.pn-empty) :is(h1,h2,h3){font-size:var(--fs-empty,32px)}}

/* ==========================================================================
   Chat (derived: bubbles are pill-cards; in = paper with the line, out = pink)
   ========================================================================== */

.pc-day{align-self:center;min-height:24px;padding:6px 10px;border-radius:var(--r-label);border:1px solid transparent;background:var(--bubble-in);font:600 10px/1 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pc-bubble{max-width:78%;padding:10px 14px;border-radius:var(--r-pcard);font:400 15px/1.4 var(--font-sans);overflow-wrap:anywhere}
.pc-bubble--in{align-self:flex-start;background:var(--bubble-in);color:var(--ink);border:1px solid transparent;border-bottom-left-radius:6px}
.pc-bubble--out{align-self:flex-end;background:var(--pink);color:var(--anthracite);border-bottom-right-radius:6px}
.pc-bubble__time{display:block;margin-top:3px;font:600 11px/1.2 var(--font-sans);opacity:.7;text-align:right}
.pc-overline{color:var(--ink-2)}
.pc-composer{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-3);background:var(--surface)}
.pc-composer .pc-input{min-height:44px}

/* ==========================================================================
   Header geometry (skin in chrome.css): mockup .hdr: chrome, line under it, 68 (phone 58), gap 32 (phone 12).
   ========================================================================== */
.pc-header{position:sticky;top:0;z-index:var(--z-header);display:flex;flex-wrap:nowrap;align-items:center;gap:32px;height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--col-pad) 0}
/* nav: Inter Tight 600 14, gap 26, on-dark at 85 %. */
.pc-nav{display:flex;align-items:center;gap:26px;font:600 14px/1 var(--font-sans)}
.pc-nav a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);text-decoration:none;white-space:nowrap}
.pc-search{flex:1;min-width:0;max-width:360px;display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;border-radius:var(--r-btn);font:600 13px/1 var(--font-sans)}
.pc-search .pc-ico{width:18px;height:18px}
.pc-search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-header__icons{display:flex;align-items:center;gap:10px}
.pn-header__avatar{width:40px;height:40px;font-size:15px;text-decoration:none}
@media (max-width:700px){.pc-nav,.pc-hide-sm,.pc-header .pc-hide-sm{display:none}.pc-header{gap:12px;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}}
@media (min-width:701px){.pc-show-sm{display:none !important}}
/* Burger (mockup .burger: 40, radius 12, line; the three bars drawn in CSS). A <details> menu on phones. */
.pc-burger{position:relative;flex:none}
.pc-burger > summary{list-style:none;position:relative;display:block;width:40px;height:40px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--r-icon);cursor:pointer}
.pc-burger > summary::-webkit-details-marker{display:none}
.pc-burger > summary::before,.pc-burger > summary::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--on-chrome);top:14px;box-shadow:0 5px 0 var(--on-chrome)}
.pc-burger > summary::after{top:24px;box-shadow:none}
.pc-burger[open] > summary::before{top:18px;box-shadow:none;transform:rotate(45deg)}
.pc-burger[open] > summary::after{top:18px;transform:rotate(-45deg)}
.pc-burger > summary:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pc-burger__menu{position:absolute;right:0;top:calc(100% + 10px);z-index:var(--z-nav);display:grid;min-width:220px;max-width:calc(100vw - 2 * var(--gutter));padding:8px;border-radius:var(--r-rules);background:var(--chrome);border:1px solid transparent;box-shadow:var(--sh-float)}
.pc-burger__menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-icon);color:var(--on-chrome);font:600 15px/1 var(--font-sans);text-decoration:none}
.pc-burger__menu a[aria-current]{color:var(--pink)}
/* audit 30.09.: a full-height sheet from the right over the scrim (the page under it takes no taps), the links as big
   rows with a chevron, the doors and the language pills at its foot */
.pc-burger[open]::before{content:"";position:fixed;inset:0;z-index:38;background:var(--scrim);cursor:default}
.pc-burger > summary{z-index:41}
.pc-burger[open] .pc-burger__menu{position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top));right:0;bottom:0;z-index:var(--z-nav);display:flex;flex-direction:column;gap:2px;width:min(86vw,380px);min-width:0;max-width:none;padding:14px 14px calc(18px + env(safe-area-inset-bottom));border-radius:0;border-width:1px 0 0 1px;overflow-y:auto;overscroll-behavior:contain}
.pc-burger__menu > a{min-height:56px;padding:0 10px;border-radius:var(--r-icon);font:700 20px/1 var(--font-display);letter-spacing:-.01em}
.pc-burger__menu > a .pc-ico{width:16px;height:16px;opacity:.6}
.pc-burger__foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;padding-top:24px}
.pc-header .pc-burger__foot .pc-btn{min-height:44px;padding:0 16px;justify-content:center;border-radius:var(--r-btn);font:600 14px/1 var(--font-sans);letter-spacing:0}
.pc-header .pc-burger__foot .pc-btn--primary{color:var(--anthracite)}
.pc-header .pc-burger__foot .pc-btn--primary:hover{background:var(--pink-press)}
.pc-burger__lang{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.pc-burger__lang a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--radius-full);color:var(--on-chrome);font:600 13px/1 var(--font-sans);text-decoration:none}
.pc-burger__menu a:hover{background:var(--chrome-2)}
@media (min-width:701px){.pc-burger{display:none}}
/* Footer geometry (mockup .ftr, art-director round 30.09.: a designed sitemap). Brand column + up to three link columns
   (Browse / Guides / Help & legal), then the language pills over the grey 50 % line. 56 / 40 padding, 13 px base.
   Links = link tier 4 (list links): no underline at rest, a 2px pink underline on hover, the 3px focus ring. */
.pc-footer{padding:56px var(--col-pad) 40px;font:400 13px/1.4 var(--font-sans)}
.pc-footer .pc-logo{font-size:26px}
.pc-footer a{text-decoration:none}
.pn-gfooter__grid{display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
@media (min-width:1101px){.pn-gfooter__grid:has(> .pn-gfooter__col--legal){grid-template-columns:minmax(240px,2fr) repeat(4,minmax(0,1fr))}}   /* guests: Help and Legal apart (home AD 03.11.) */
.pn-gfooter__brand{min-width:0}
.pn-gfooter__about{margin:14px 0 0;max-width:280px;font:400 13px/1.55 var(--font-sans)}
.pn-gfooter__adult{display:inline-flex;align-items:center;margin-top:18px;padding:6px 10px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--radius-full);font:600 11px/1 var(--font-label);letter-spacing:0}
.pn-gfooter__col{min-width:0}
.pn-gfooter__h{margin:0 0 16px;font:600 12px/1.3 var(--font-label);letter-spacing:0}
.pn-gfooter__col ul,.pn-gfooter__bar ul{list-style:none;margin:0;padding:0}
.pn-gfooter__col ul{display:grid;gap:12px}
.pn-gfooter__col a{display:inline-block;font:400 14px/1.2 var(--font-sans);text-underline-offset:4px;text-decoration-thickness:2px}
.pn-gfooter__col a:hover{text-decoration:underline;text-decoration-color:var(--pink)}
.pn-gfooter__bar{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:32px}   /* audit 30.09.: 32 above and below; tonal pass 05.10.: no line, the air is the break */
.pn-gfooter__bar ul{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.pn-gfooter__bar a{display:inline-flex;align-items:center;min-height:32px;padding:8px 14px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--radius-full);font:600 13px/1 var(--font-sans)}
.pn-gfooter__globe{flex:none;width:16px;height:16px}
@media (min-width:701px) and (max-width:1100px){
  .pn-gfooter__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
  .pn-gfooter__grid:has(> .pn-gfooter__col--legal){grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-gfooter__brand{grid-column:1 / -1}
  .pn-gfooter__about{max-width:520px}
}
/* owner 06.11. («mobile footer … total scheisse und überladen»): the groups are folds (templates/partials/footer.php) — on
   desktop always open and the head is a plain head; on phones one row each, closed, with a chevron; Legal one small line */
.pn-gfooter__fold > summary{display:block;list-style:none;cursor:default;pointer-events:none}
.pn-gfooter__fold > summary::-webkit-details-marker{display:none}
@media (max-width:700px){
  .pn-gfooter__grid,.pn-gfooter__grid:has(> .pn-gfooter__col--legal){grid-template-columns:minmax(0,1fr);gap:0}
  .pn-gfooter__brand{padding-bottom:20px}
  .pn-gfooter__about{margin-top:10px}
  .pn-gfooter__adult{margin-top:12px}
  .pn-gfooter__col--browse,.pn-gfooter__col--guides,.pn-gfooter__col--site,.pn-gfooter__col--legal{border-top:1px solid var(--t-hair)}
  .pc-footer .pn-gfooter__fold > summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;margin:0;pointer-events:auto;cursor:pointer}
  .pn-gfooter__fold > summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 4px 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  .pn-gfooter__fold[open] > summary::after{margin-bottom:0;margin-top:4px;transform:rotate(-135deg)}
  .pc-footer .pn-gfooter__fold ul{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 12px}
  .pc-footer .pn-gfooter__fold a{display:flex;align-items:center;min-height:40px}
  .pn-gfooter__dup{display:none}
  .pc-footer .pn-gfooter__col--legal .pn-gfooter__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .pc-footer .pn-gfooter__col--legal ul{display:flex;flex-wrap:wrap;gap:0 20px;padding:12px 0 0}
  .pc-footer .pn-gfooter__col--legal a{display:inline-flex;align-items:center;min-height:36px}
  .pc-footer .pn-gfooter__grid.pn-gfooter__grid{gap:0}   /* the folds sit flush: their own 52 px rows are the rhythm */
  .pc-footer .pn-gfooter__bar.pn-lang ul > li{flex:1 1 calc(33.333% - 8px);min-width:0}   /* 3 + 2, never a lone pill (C-059 made the row flex) */
  .pc-footer .pn-gfooter__bar.pn-lang ul > li > a{justify-content:center;width:100%}
  .pn-gfooter__bar{align-items:flex-start;margin-top:32px;padding-top:32px}
  .pn-gfooter__bar ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}   /* audit 30.09.: 3 + 2, never a lone pill */
  .pn-gfooter__bar a{justify-content:center;width:100%;padding-inline:8px}
  .pn-gfooter__globe{margin-top:8px}
}
/* T12 member footer: brand + Help & legal only (no guest browse / guide columns): two columns on desktop. */
/* UX 17.10. #80: on desktop the member footer is one column — the brand, then its links as one row under the logo (one
   link column in the middle of a wide footer left a lot of empty space). */
@media (min-width:701px){.pn-gfooter--member .pn-gfooter__grid{grid-template-columns:minmax(0,1fr);gap:28px}.pn-gfooter--member .pn-gfooter__brand{grid-column:auto}.pn-gfooter--member .pn-gfooter__about{max-width:520px}.pn-gfooter--member .pn-gfooter__col ul{display:flex;flex-wrap:wrap;gap:10px 28px}}

/* Tab bar geometry (phones, members): docked to the bottom, chrome with the line on top (derived from .ftr). */
.pc-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom)}
.pc-tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:min-content;padding:0;font:600 11px/1.15 var(--font-sans);text-decoration:none;white-space:nowrap}
.pn-tab__pill{display:grid;place-items:center;width:52px;height:30px;border-radius:var(--radius-full);border:1px solid transparent;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.pn-tab__pill .pc-ico{width:22px;height:22px}
.pn-tab__label{max-width:100%}
/* inside tier 06.10.: six tabs on a 320 px phone — the labels step down so the last one (es Rincón, fr Mon espace, pt Cantinho) stays on the screen */
@media (max-width:359px){.pc-tabbar{padding-inline:2px}.pc-tabbar a{font-size:10px;letter-spacing:-.01em}.pn-tab__pill{width:44px}}
.pc-tabbar .pc-count,.pn-tab__badge{top:-4px;right:auto;left:calc(50% + 8px)}

/* ==========================================================================
   Sheets + dialogs: paper, the line, radius 28 (phone: bottom sheet with a grabber; desktop: centred dialog)
   ========================================================================== */
.pn-sheet{background:var(--surface);color:var(--ink)}
dialog.pn-sheet{border:0;padding:10px 22px calc(30px + env(safe-area-inset-bottom));max-width:none;max-height:92svh;overflow:auto}
.pn-sheet__grab{display:block;width:40px;height:5px;margin:0 auto 14px;border-radius:3px;background:var(--t-mute,var(--line))}
.pn-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.pn-sheet__title,.pn-sheet h2{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head);color:var(--ink)}
.pn-sheet__body{font:400 14px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-sheet__acts{display:grid;gap:14px;margin-top:var(--space-5)}
dialog.pn-sheet::backdrop{background:var(--scrim);animation:pn-fade .5s both}
.pn-sheet.is-docked{border-radius:var(--r-empty) var(--r-empty) 0 0;box-shadow:var(--sh-sheet)}
@keyframes pn-fade{from{opacity:0}}
@keyframes pn-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:700px){
  dialog.pn-sheet{position:fixed;inset:auto 0 0 0;width:100%;margin:0;border-radius:var(--r-empty) var(--r-empty) 0 0;box-shadow:var(--sh-sheet)}
  dialog.pn-sheet[open]{animation:pn-sheet-up .48s var(--ease-sheet) both}
}
@media (min-width:701px){
  dialog.pn-sheet{width:min(520px,calc(100% - 48px));padding:28px 30px 30px;border-radius:var(--r-empty);box-shadow:var(--sh-float)}
  dialog.pn-sheet .pn-sheet__grab{display:none}
}

/* Skeletons: the stripes of the missing photo, same geometry as the real card. */
.pn-skel{position:relative;overflow:hidden;background:var(--sunken);border-radius:var(--radius-full)}
.pn-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--surface-veil) 50%,transparent 80%);transform:translateX(-100%);animation:pn-shimmer 1.4s linear infinite}
@keyframes pn-shimmer{to{transform:translateX(100%)}}
.pn-skelcard{border:1px solid transparent;border-radius:var(--r-pcard);overflow:hidden;background:var(--surface)}
.pn-skelcard > .pn-skel--media{aspect-ratio:4/5;border-radius:0;background:var(--ph-media)}
.pn-skelcard > .pn-skel--line{height:14px;margin:12px 14px 0;width:70%}
.pn-skelcard > .pn-skel--line + .pn-skel--line{width:40%;margin-bottom:14px}
.pn-skelrow{display:flex;align-items:center;gap:var(--space-3);min-height:64px}
.pn-skelrow > .pn-skel--av{width:44px;height:44px;flex:none;border-radius:50%}

/* Facts (partials/facts.php): the price-box rows (label left muted, value right ink); tonal pass 05.10.: no dashed
   line between rows, the row rhythm (48 min, label / value on one baseline) carries the list. */
.pc-facts{--facts-x:var(--panel-pad);container-type:inline-size;margin:0 calc(-1 * var(--facts-x)) calc(-1 * var(--space-2))}
.pc-facts__list{margin:0;display:grid;grid-template-columns:minmax(0,1fr)}
.pc-fact{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);min-width:0;min-height:48px;padding:var(--space-3) var(--facts-x)}
.pc-fact dt{flex:none;max-width:55%;font:400 14px/20px var(--font-sans);color:var(--ink-2)}
.pc-fact dd{margin:0;min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;font:700 15px/20px var(--font-sans);color:var(--ink);text-align:right;overflow-wrap:anywhere}
.pc-fact .pn-flag{flex:none;width:18px;height:18px;margin:0 8px 0 0;border-radius:var(--radius-full);object-fit:cover}
@container (min-width:520px){
  .pc-facts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-fact:nth-child(odd){padding-right:var(--space-5)}
  .pc-fact:nth-child(even){padding-left:var(--space-5)}
  .pc-fact.is-wide{grid-column:1 / -1;padding-right:var(--facts-x)}
}

/* ==========================================================================
   Legacy brand devices kept for page files, restyled to the mockup (docs/design-v3-system.md §2.9).
   ========================================================================== */
.pn-tub{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--mask-tub) center/contain no-repeat;mask:var(--mask-tub) center/contain no-repeat;vertical-align:-.12em}
/* Strike device (legacy markup): the struck word and the Caveat correction after it. */
@keyframes pn-slam{0%{transform:rotate(-24deg) scale(2.1);opacity:0}55%{opacity:1}100%{transform:rotate(-9deg) scale(1);opacity:1}}
@keyframes pn-slam-r{0%{transform:rotate(26deg) scale(2.1);opacity:0}55%{opacity:1}100%{transform:rotate(7deg) scale(1);opacity:1}}
@keyframes pn-sway{0%,100%{transform:rotate(var(--r,0deg))}50%{transform:rotate(calc(var(--r,0deg) * -1 + .6deg))}}
@keyframes pn-printout{from{clip-path:inset(0 0 100% 0);transform:rotate(1.5deg) translateY(-24px)}to{clip-path:inset(0 0 0 0);transform:rotate(1.5deg)}}
@keyframes pn-strike{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}
@keyframes pn-wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .pc-logo__dot{animation:none}
  .pn-ticker__track{animation:none;transform:none}
  .pn-livedot{animation:none}
  .pn-skel::after{animation:none;display:none}
  .pc-btn:active,.pc-btn:hover{transform:none}
}

/* followup: mask (Anhang E §2): the buyer token a free seller sees instead of a face (pnew_mask_avatar(),
   also settings, nudge sheet, paysite): an avatar tone from the server with the ink lock label on it. */
.pc-avatar.pn-mask{background:var(--pn-mask-bg);color:var(--on-prem)}
.pn-mask--t0{--pn-mask-bg:var(--av-g0)}
.pn-mask--t1{--pn-mask-bg:var(--av-g1)}
.pn-mask--t2{--pn-mask-bg:var(--av-g2)}
.pn-mask--t3{--pn-mask-bg:var(--av-g3)}
.pn-mask--t4{--pn-mask-bg:var(--av-g5)}
.pn-mask--t5{--pn-mask-bg:var(--av-g7)}
.pc-avatar.pn-mask > .pn-mask__lock{display:grid;place-items:center;width:54%;height:auto;aspect-ratio:1;line-height:0;border-radius:50%;background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pn-mask__lock .pc-ico{width:56%;height:auto;aspect-ratio:1;stroke-width:2.4}
.pc-avatar--xs.pn-mask > .pn-mask__lock{width:74%}
.pn-masktag{display:inline-flex;align-items:center;gap:4px;min-width:0;font:600 12px/16px var(--font-sans);color:var(--ink-2)}
.pn-masktag .pc-ico{flex:none;width:14px;height:14px}
.pn-maskname{color:var(--ink)}

/* ==========================================================================
   Action menu + toast (chat_ui.js: chats, settings, the member page). Desktop = a floating paper menu
   (the line, radius 18, the float shadow); phones = the kit bottom sheet. Toast = the kit chrome pill.
   ========================================================================== */
.pn-menuwrap{position:fixed;inset:0;z-index:var(--z-menu);pointer-events:none}
.pn-menu{position:fixed;min-width:240px;max-width:min(320px,calc(100vw - 16px));padding:var(--space-2);border-radius:var(--r-l);border:0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-float);pointer-events:auto;opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease}
.pn-menuwrap.is-on .pn-menu{opacity:1;transform:none}
.pn-menu__head{display:grid;gap:3px;padding:8px 12px 12px;margin-bottom:4px}
.pn-menu__head b{font:700 15px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-menu__head span{font:400 13px/1.4 var(--font-sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-menu__item{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:48px;padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:transparent;color:var(--ink);font:var(--type-strong);text-align:left;cursor:pointer}
.pn-menu__item:hover{background:var(--sunken)}
.pn-menu__item:focus-visible{background:var(--sunken);outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-menu__item .pc-ico{flex:none;color:var(--ink)}
.pn-menu__item.is-danger,.pn-menu__item.is-danger .pc-ico{color:var(--danger)}
.pn-menuwrap.is-sheet .pn-menu__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:auto;transition:opacity .5s ease}
.pn-menuwrap.is-sheet.is-on .pn-menu__scrim{opacity:1}
.pn-menuwrap.is-sheet .pn-menu.pn-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;min-width:0;padding:10px 18px calc(24px + env(safe-area-inset-bottom));border-radius:var(--r-empty) var(--r-empty) 0 0;box-shadow:var(--sh-sheet);transform:translateY(100%);transition:transform .48s var(--ease-sheet)}
/* support fix A 3 (03.11., Kristina_Milf): a long menu (her listings in «Send a listing») grew past the top of the phone screen
   and could not be scrolled — the sheet and the popover now stop at the screen and scroll inside; the head stays on top */
.pn-menu{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
.pn-menuwrap.is-sheet .pn-menu.pn-sheet{max-height:88vh;max-height:88dvh;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.pn-menuwrap.is-sheet .pn-menu__head{position:sticky;top:0;z-index:1;background:var(--surface);box-shadow:0 -10px 0 var(--surface)}
.pn-menuwrap.is-sheet.is-on .pn-menu{transform:none}
.pn-menuwrap.is-sheet .pn-menu__head{padding:0 4px 12px}
.pn-menuwrap.is-sheet .pn-menu__head b{font:700 var(--fs-section)/var(--lh-head) var(--font-display);text-wrap:balance}
.pn-menuwrap.is-sheet .pn-menu__item{min-height:48px;padding:0 var(--space-2);font:var(--type-strong)}
/* UX polish 23.10. UX-038: ONE toast definition (it was also in pages/account.css with z 60 and bottom = the dock, so the
   same toast sat differently per bundle). The pill look is spelled out here too, so a template toast without .pc-toast
   (settings, pay sheet, wizard) looks the same as the script ones; z 80 keeps it above sheets (70) and the drawer (75). */
.pn-toast{position:fixed;left:50%;bottom:max(var(--dock),calc(var(--toast-low) + env(safe-area-inset-bottom)));z-index:var(--z-toast);display:flex;align-items:center;max-width:calc(100vw - 32px);min-height:48px;padding:var(--space-3) var(--space-4);border-radius:var(--toast-r,999px);border:1px solid transparent;background:var(--toast-bg,var(--chrome));color:var(--on-chrome);box-shadow:var(--sh-float);font:var(--type-strong);text-align:center;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.pn-toast:empty{display:none}
.pn-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media (prefers-reduced-motion:reduce){.pn-toast{transition:none;transform:translate(-50%,0)}}
.pn-toast button{min-height:var(--tap)}
.pn-toast.is-bad{background:var(--danger);color:var(--on-danger);border-color:transparent}
.pn-toast.is-bad button{color:var(--on-danger);text-decoration:underline}

/* SH-15: iOS zooms into any field under 16px. On phones every text control is 16px, whatever a page sets. */
@media (max-width:700px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea,.pc-input{font-size:16px !important}
}
/* SH-18: touch feedback (hover never fires on touch; pressed is the only feedback there). */
.pc-root{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .pc-chip:active,.pc-seg > a:active,.pc-seg > button:active,.pn-seg > a:active,.pc-tab:active,.pc-iconbtn:active{border-color:var(--line-3)}
  .pn-prodcard:active .pc-media{opacity:.9}
  .pn-row:active,a.pn-tile:active{background:var(--sunken)}
  .pc-footer a:active,.pc-nav a:active{opacity:.7}
}

/* Line breaks: headings balance, running text is pretty; number + unit never split. */
.pc-root{hyphenate-limit-chars:8 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;-webkit-hyphenate-limit-lines:1}
:where(.pc-root){text-wrap-style:pretty}
:where(.pc-root) :where(h1,h2){text-wrap:balance}
:where(.pc-root) :where(h3,h4,p,li,dd,blockquote,figcaption){text-wrap:pretty}

/* ==========================================================================
   Tap floor on phones: small controls keep their look and get an invisible, centred 44×44 hit area.
   ========================================================================== */
@media (max-width:700px){
  .pc-header .pc-logo{min-height:var(--tap)}
  :where(.pc-btn--sm,.pc-chip,.pc-tab,.pc-seg > a,.pc-seg > button,.pc-seg > label,.pn-seg > a,.pn-seg > button,.pn-seg > label,.pn-backchip,.pn-seeall,.pc-more,.pc-footer a,.pn-gcrumbs .pn-crumbs a,button.pn-sheet__grab){position:relative}
  /* UX polish 23.10. UX-002 / UX-017: the 40 × 40 icon squares (header bell, burger, bag, search, "Options for …", follow, back,
     gallery arrows, share, filter) get the same invisible 44 hit area; UX-051: the sheet grab button (40 × 5) too. */
  :is(.pc-btn--sm,.pc-chip,.pc-tab,.pc-seg > a,.pc-seg > button,.pc-seg > label,.pn-seg > a,.pn-seg > button,.pn-seg > label,.pn-backchip,.pn-seeall,.pc-more,.pc-footer a,.pn-gcrumbs .pn-crumbs a,.pc-iconbtn,button.pn-sheet__grab)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));transform:translate(-50%,-50%)}
  /* UX-051: checkboxes and radios (22 × 22) reach 44 through ::before (their ::after is the tick / dot); the 52 × 30 switch
     grows to 60 × 44 the way button.pc-switch already does in account.css. */
  :where(.pc-check,.pc-radio){position:relative}
  :is(.pc-check,.pc-radio)::before{content:"";position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
  .pc-switch::before{content:"";position:absolute;inset:-7px -4px}
  /* UX 17.10. #34: footer links and breadcrumbs are 40 px rows themselves (they stood 16-17 px tall, the hit areas overlapped) */
  .pn-gfooter__col ul{gap:0}
  .pn-gfooter__col a{display:flex;align-items:center;min-height:40px}
  .pn-gcrumbs .pn-crumbs a{display:inline-flex;align-items:center;min-height:40px}
  /* A scrolling chip row clips on both axes: 5px of block padding (given back by the margin) lets the hit areas reach 44. */
  .pc-chips--scroll{padding-block:5px;margin-block:-5px}
  /* Keyboard open: the tabbar and landing sticky step aside, so they never float over the field. Owner 05.10.: a focused
     field alone (e.g. /ads/?focus=q) no longer hides the tabbar; body.pn-kbd comes from the visual viewport shrinking (icons.js). */
  body.pn-kbd :is(.pc-tabbar,.pn-lbsticky){visibility:hidden;opacity:0}
}
/* Empty state without a Caveat note: the button keeps the note's rhythm. */
.pc-empty > p + .pc-btn,.pn-empty > p + .pc-btn{margin-top:var(--space-6)}

/* ==========================================================================
   BRAND PREVIEW 05.10. (docs/brand-review-05-10.md 2, 14) + owner on the live cards: "die Cards dürfen nicht rumspringen"
   — no box under the photo. The caption sits ON the photo over the bottom shade (adcard2 03.10.), the title is ONE line
   with an ellipsis (the title attribute keeps the full text), the card is a fixed 3:4 so every card in a row has the
   same height whatever the copy. The price is a kraft tag (cream paper, the punched hole, -2°). Premium = a blush tint
   on the caption shade, no word, nothing below the photo. Seller portrait: @name bold on the photo, the rating as the
   glass chip bottom left, the listing count a tiny chip beside it; the same blush for Premium.
   ========================================================================== */
.pn-prodcard .pc-media{aspect-ratio:3/4}
/* UX 17.10. #36: two title lines in every grid, like the home page (one line cut "Soft white cotton pa…"); the card keeps its fixed 3:4, the caption grows upwards */
.pn-prodcard .pc-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;text-wrap:wrap}
.pc-card.is-premium .pc-card__cap::before{background:var(--pcard-cap-blush)}
.pc-card__ticket{top:12px;left:12px;min-height:30px;padding:5px 10px 5px 9px;border-radius:3px 6px 6px 3px;background:var(--cream);color:var(--anthracite);box-shadow:0 0 0 1px var(--line),var(--sh-label);transform:rotate(-2deg);transform-origin:0 50%}
.pc-card__ticket::before{width:7px;height:7px;box-shadow:inset 0 0 0 1.5px var(--anthracite),0 0 0 1px var(--cream)}
.pc-card__fx{font:600 11px/1 var(--font-sans);opacity:.7;white-space:nowrap}   /* UX 17.10. #26: "≈ $58" after a price in another currency, quieter than the price */
.pc-card__ticket .pc-price,.pc-card__ticket .pn-askprice{color:var(--anthracite)}
.pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-blush)}
.pc-scard__foot > .pc-scard__n{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--scard-glass);font:600 11.5px/1 var(--font-sans);color:var(--scard-ink-2);white-space:nowrap}

/* ---------- cart (owner 11.10., lib/cart.php): the bag on a listing card, the header bag with its count, the drawer ---------- */
.pn-cartbtn{position:relative}
.pn-cartbtn[hidden]{display:none}   /* a buyer has no cart (owner 13.10.): the icon button's own display would show it */
.pn-cartbtn__n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pink);color:var(--anthracite);font:700 11px/18px var(--font-sans);text-align:center}
.pn-cartbtn.is-bump{animation:pn-cart-bump .42s}
.pn-cartadd.is-on{background:var(--pink);color:var(--anthracite)}
@keyframes pn-cart-bump{40%{transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.pn-cartbtn.is-bump{animation:none}}
dialog.pn-cart{margin:0 0 0 auto;width:min(420px,100vw);height:100dvh;max-height:none;padding:16px 18px calc(18px + env(safe-area-inset-bottom));border-radius:0}
.pn-cart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pn-cart__list{list-style:none;margin:0;padding:0}
.pn-cart__row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.pn-cart__item{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:center;flex:1;min-width:0;color:inherit;text-decoration:none}
.pn-cart__item img{grid-row:1 / span 2;width:56px;height:70px;object-fit:cover;border-radius:8px;background:var(--sunken)}
.pn-cart__t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-cart__m{color:var(--ink-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-cart__foot{position:sticky;bottom:0;padding-top:14px;background:var(--surface)}
.pn-cart__note,.pn-cart__empty{margin:0 0 12px;color:var(--ink-2);font-size:14px;line-height:1.45}
.pn-cart__foot [hidden]{display:none}

/* UX-040 (23.10., package F): the global reduce block above shortens every animation to .001 ms. The join toast's
   still variant (pages/join.css pn-jointoast-still: fade only, no movement) ends hidden, so with "reduce motion" it
   was gone after .2 s and nobody could read it. It keeps its own 4.6 s; nothing in it moves. */
@media (prefers-reduced-motion:reduce){
  .pn-jointoast{animation-duration:4.6s !important}
}

/* ==========================================================================
   Art director pass 27.10. (outside, kit level). Each line names its finding (docs/visual-audit/ad-outside-27-10.md).
   ========================================================================== */
.pc-strip__tg small{font:600 11px/1 var(--font-sans);letter-spacing:0;text-transform:none;opacity:.8}   /* B-035: 9 px caps, the smallest type of the site */
.pc-care{min-width:0;overflow-wrap:anywhere}   /* B-053: es step cards ran 20 px out of their grid */
.pc-receipt{transform:none}   /* C-039: every line of the receipt sat slanted */
.pc-more{padding-block:6px}   /* C-033 (VG-028): a 17 px tall link; the hit area reaches 29 px, the line stays */
.pc-verified{color:var(--pink-glyph)}   /* D-051: the verified mark was 1.5:1 in light */
.pn-vbadge .pc-ico{color:var(--pink-glyph)}
.pn-gfooter__h{line-height:1.3}
@media (min-width:701px){.pn-gfooter__col--site ul{columns:2;column-gap:24px}.pn-gfooter__col--site li{break-inside:avoid}}   /* C-057: ten links in one column left 210 px under the others */
@media (max-width:700px){.pc-footer .pn-lang ul,.pn-gfooter .pn-lang ul{display:flex;flex-wrap:wrap;gap:8px;padding:0}}   /* C-059 */

/* ---------- Premium editorial pass (owner 27.10.: "sophisticated, atmospheric, premium editorial", same colours, same
   content). Outside only (.pc-guest): the member area keeps its tonal surfaces. Tokens in tokens.css (--sh-card*,
   --card-overlay, --btn-pink-grad, --chrome-grad, --lp-real-bg-l). ---------- */
/* photo cards: 16 px, no edge (a 4.5 % rim in dark only), a soft diffuse shadow, 3 px lift on hover, one overlay */
:where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard){border:0;border-radius:var(--r-card-x);box-shadow:var(--sh-card);transition:transform var(--dur-card) ease,box-shadow var(--dur-card) ease}
:where(.pc-guest) .pc-scard::after{box-shadow:var(--card-rim)}
:where(.pc-guest) .pc-card.pn-prodcard::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:var(--card-rim);pointer-events:none}
@media (hover:hover){
  :where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard):hover{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
  :where(.pc-guest) .pc-scard:hover :is(.pc-scard__media > img,.pc-scard__media > picture > img),:where(.pc-guest) .pn-prodcard:hover :is(.pc-media > img,.pc-media > picture > img){transform:scale(1.02)}
}
:where(.pc-guest) .pc-scard > .pn-card-link::after,:where(.pc-guest) .pn-prodcard .pc-media::after{content:"";position:absolute;inset:0;z-index:3;background:var(--card-overlay);pointer-events:none}
:where(.pc-guest) .pc-scard:not(.is-premium) .pc-scard__cap::before,:where(.pc-guest) .pn-prodcard:not(.is-premium) .pc-card__cap::before{background:var(--card-cap-scrim)}   /* a light photo under the caption: the words keep their contrast */
:where(.pc-guest) .pc-scard.is-premium .pc-scard__cap::before{background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 34%, transparent) 100%)}
:where(.pc-guest) .pn-prodcard.is-premium .pc-card__cap::before{background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 30%, transparent) 100%)}
/* the metadata: small translucent chips without an edge; the heart one glass circle, no ring */
:where(.pc-guest) .pc-scard__foot > .pc-scard__n{border-color:transparent;background:var(--chip-glass)}
:where(.pc-guest) :is(.pc-scard,.pc-card) .pc-card__fav,:where(.pc-guest) :is(.pc-scard,.pc-card) .pc-card__fav:hover{border-color:transparent;transition:background var(--dur-card) ease,transform var(--dur-card) ease}
/* the home rail scrolls on phones: room for the shadow and the lift, so neither is cut */
:where(.pc-guest) .pn-lp-sellrail{padding-block:8px 30px;margin-block:-8px -30px}
@media (prefers-reduced-motion:reduce){
  :where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard){transition:none}
  :where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard):hover{transform:none}
  :where(.pc-guest) .pc-scard:hover :is(.pc-scard__media > img,.pc-scard__media > picture > img),:where(.pc-guest) .pn-prodcard:hover :is(.pc-media > img,.pc-media > picture > img){transform:none}
}
/* buttons: the pink key on a restrained pink gradient + soft shadow; the secondary key a lifted dark surface, no edge */
:where(.pc-guest) :is(.pc-btn--primary,.pc-btn--pink):not(.pc-btn--on-accent){background:var(--btn-pink-grad);box-shadow:var(--sh-pink);transition:filter var(--dur-card) ease,box-shadow var(--dur-card) ease,transform var(--dur-card) ease}
:where(.pc-guest) :is(.pc-btn--primary,.pc-btn--pink):not(.pc-btn--on-accent):hover{background:var(--btn-pink-grad);filter:brightness(1.05);box-shadow:var(--sh-pink-hover)}
:where([data-theme="dark"] .pc-guest) .pc-btn--line,:where([data-theme="dark"]) .pc-guest .pc-header .pc-btn--ghost{border-color:transparent;background:var(--btn-dk-grad),var(--sunken)}
:where([data-theme="dark"] .pc-guest) .pc-btn--line:hover,:where([data-theme="dark"]) .pc-guest .pc-header .pc-btn--ghost:hover{background:var(--btn-dk-grad-hover),var(--sunken)}
@media (prefers-color-scheme:dark){
  :where(:root:not([data-theme="light"]) .pc-guest) .pc-btn--line,:where(:root:not([data-theme="light"])) .pc-guest .pc-header .pc-btn--ghost{border-color:transparent;background:var(--btn-dk-grad),var(--sunken)}
  :where(:root:not([data-theme="light"]) .pc-guest) .pc-btn--line:hover,:where(:root:not([data-theme="light"])) .pc-guest .pc-header .pc-btn--ghost:hover{background:var(--btn-dk-grad-hover),var(--sunken)}
}
/* the eyebrow: one system — small, the brand pink, the tub; a head's only accent is the site's name (.pc-brandword) */
:where(.pc-guest) .pc-sechead .pc-kicker{color:var(--pink-glyph);margin-bottom:10px}
.pc-brandword{color:var(--pink-glyph)}
/* headings that only receive focus from script (tabindex=-1: a step change, a sheet opening) never draw the ring — it read as a
   pink box around the h1 of the sign-up wizard (owner 04.11.) */
:is(h1,h2,h3)[tabindex="-1"]:focus{outline:none}
/* UX 433 G-105: "Questions? See help" — one link, a full finger high */
.pn-helpline__a{display:inline-flex;align-items:center;min-height:44px}
/* pnew page layout. Components come from components.css (pc-*); this file only arranges them (pn-*).
   One column (mockup .wrap): content is min(100% - 2 x --gutter, --main-max = 1168), flush with the header and footer.
   The page frame is the mockup's app frame (.app): duck egg, 48 on top, 88 below (phone 28 / 60). */
html{-webkit-text-size-adjust:100%;background:var(--canvas)}
body.pc-root{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);overflow-x:clip}
img{max-width:100%}
/* UX 17.10. #2: no browser blue. Every link takes its text's colour; a text link (an anchor without a class in the page,
   or .pc-link) is ink with the pink underline. Zero-specificity :where() so every component's own link rule wins. */
a{color:inherit}
.pc-link,:where(.pn-main) a:where(:not([class])){color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-main{flex:1;width:100%;max-width:calc(var(--main-max) + 2 * var(--gutter));margin:0 auto;padding:48px max(var(--gutter),env(safe-area-inset-right)) 88px max(var(--gutter),env(safe-area-inset-left));box-sizing:border-box}
.pn-header__end{margin-left:auto;display:flex;align-items:center;gap:12px}
/* Card grids: the mockup .pairs grid (5 x 18 gap on the 1168 column; phone 2 x 12). */
.pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
@media (min-width:1101px){.pn-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

.pn-section{margin-top:var(--sec-gap)}
:where(.pn-section) h2{margin:0 0 var(--sec-head-gap);font:700 var(--fs-m)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h);color:var(--ink);hyphens:manual;overflow-wrap:break-word}
.pn-more{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-8)}
.pn-main > .pn-empty{margin-top:var(--section-gap)}
.pc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-card-link{color:inherit;text-decoration:none}
a.pn-card-link:not(.pc-seller){display:block}
.pc-card>a.pn-card-link:not(.pc-seller){display:flex;flex-direction:column}
.pc-seller__who b{overflow-wrap:anywhere}
.pn-card-link:focus-visible,.pc-footer a:focus-visible,.pc-nav a:focus-visible,.pc-logo:focus-visible,.pn-search:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pn-lang{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.pn-about{margin:0;white-space:pre-line;max-width:62ch}
@media (max-width:700px){
  .pn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* Members: the tab bar is docked; the page leaves --dock free under the last content. */
  /* polish v3: the footer already clears the tab bar (chrome.css .pc-footer padding-bottom: --dock + 28px), so a page
     with a footer ends 48px above it; only footer-less member pages keep the dock clearance. */
  .pn-main{padding-top:var(--space-6);padding-bottom:var(--space-12)}
  /* owner 03.10.: logged in on a phone there is no footer (the tab bar is the nav), so every member page keeps the dock
     clearance itself. */
  body:not(:has(.pc-footer)) .pn-main,body:not(.pc-guest) .pn-main{padding-bottom:calc(var(--dock) + 60px)}
  /* Guests have no tab bar (the burger menu is their phone nav). */
  body.pc-guest{--dock:calc(16px + env(safe-area-inset-bottom))}
  body.pc-guest .pn-main{padding-bottom:60px}
}
a.pn-search{text-decoration:none;color:var(--ink-2);min-width:0;flex:1;max-width:360px}
.pn-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  .pn-search{display:none}
}
a.pc-chip{text-decoration:none}
a.pc-tab{text-decoration:none}

.pn-apphead p{max-width:60ch}

/* ---------- The member column + wide grid pages (.pn-wide on the page root: market, discover, videos, Your corner) ----------
   Owner 30.09.: "eher fullwidth … nicht so viel freie Flächen". Desktop: header, main and footer of every member page
   share the wide column (--wide-max 1680, --wide-gutter 32). On .pn-wide pages the card grids fill it: 3 (701) / 4 (1024)
   / 5 (1280) / 6 (1440) / 7 (1800) columns, one even --wide-grid-gap, equal heights. Phones keep the 16 gutter and
   2 columns (above). Guest + landing: never (they keep the 1168 column). */
@media (min-width:701px){
  /* Inner grounding 01.10. (docs/inner-grounding-01-10.md): every member page is on the wide column, not only the grid
     pages, so the logo, the h1, the panels and the footer share one left and one right edge on every page. */
  body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody),body.pc-root:has(.pn-main > .pn-wide),body.pc-guest{--gutter:var(--wide-gutter);--col-pad:max(var(--gutter),calc((100% - var(--main-max)) / 2))}   /* owner 05.10.: no full-width pages — every page keeps the landing column (--main-max); only the gutter changes */
  .pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wide-grid-gap);align-items:stretch}
}
@media (min-width:1024px){.pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(5,minmax(0,1fr))}}
/* owner 18.10.: on desktop the listing grids stay at 5 a row, the seller / profile grids at 6 (they used to grow to 6 and 7);
   the video lists keep growing as before */
@media (min-width:1280px){.pn-main > .pn-wide .pn-grid.pn-sellergrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1440px){.pn-main > .pn-wide .pn-vlist{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1800px){.pn-main > .pn-wide .pn-vlist{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* ==========================================================================
   MEMBER SHELL (inner grounding 01.10., docs/inner-grounding-01-10.md). Members only (body:not(.pc-guest)).
   0 chrome  header / tab bar / footer on the one wide column (above)
   1 band    the page head is a .pc-band (app.css): a full-bleed surface under the chrome, the grey 50 % line under it
   2 ground  --app-ground (light = duck egg; dark = one step under the chrome)
   3 paper   panels / cards, one gap (--app-gap) between them, page sections --app-sec-gap apart
   ========================================================================== */
body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody){--bg:var(--app-ground);--row-inset:calc(var(--panel-pad) - var(--list-pad));background:var(--bg)}   /* --row-inset is recomputed here, after the phone --panel-pad below */
/* Guest grounding 02.10. (docs/guest-grounding-02-10.md): a guest page whose root is .pn-gapp (hub, /ads/, sellers, ad,
   members-only, 404) runs on this shell too: the wide column (above), the ground, the band geometry. The editorial frame
   (landing, money pages, report, guides, imprint) keeps its own 1168 bands. --main-pb = the main's foot (a .pc-band--end
   or --fill paints down to the footer through it). */
body.pc-guest:has(.pn-main > .pn-gapp){--bg:var(--app-ground);--main-pb:88px;background:var(--bg)}
body.pc-guest:has(.pn-main > .pn-gapp) .pn-main{isolation:isolate;padding-top:var(--app-top);padding-bottom:var(--main-pb)}
@media (max-width:700px){body.pc-guest:has(.pn-main > .pn-gapp){--main-pb:60px}}
/* design system 03.11. (MSL-021): members' phone panels take the token's 16 (the 20 here overrode it) */
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main{isolation:isolate;padding-top:var(--app-top)}   /* isolation: the band's surface (z-index -1) paints over the page ground */
/* Page sections under the band (Sellers: Premium row, New today, favourites; ad: similar listings): one gap, one head.
   The h1 in the band is the only h-m on a member page; section heads on the page are the label + card head (30 / 26). */
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pn-premrow,body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pn-favs{margin:0 0 var(--app-sec-gap)}
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pc-sechead:not(.pc-sechead--sm){margin-bottom:var(--head-gap)}
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pc-sechead:not(.pc-sechead--sm) .pc-h-m{font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
/* ==========================================================================
   THE APP FRAME v3 (mockup .app "Your corner", docs/design-v3-system.md §4). The one rule every member page follows.
   --------------------------------------------------------------------------
   0  Chrome   header, footer, phone tab bar, dark boxes (--chrome / --dk-bg). Lines on chrome = --chrome-line.
   1  Page     duck egg (--bg). Page head (h-m + .sub), pill tabs, section heads and card grids sit directly on it.
   2  Card     paper (--surface), 1 px --line, NO shadow. Radius by role: listing card 20, tile/price box 22,
               panel/box 24, empty state 28. Padding 26 (phone 22).
   3  In card  only flat things: rows with a line between them, dashed fact rows, sunken tiles (--sunken, radius 18,
               no border). A card never holds another bordered card (the in-card block below flattens them).
   Page head: .pn-apphead (h1 = .h-m 44/32 + actions) with .pc-sub under it. Section head in a panel: ui_sechead size sm
   (card head 30/26). Section head on the page: .pn-sectionhead / .pc-sechead (h-m).
   ========================================================================== */

.pn-badgewrap{position:relative}
.pn-badgewrap .pc-count{position:absolute;top:-4px;right:-4px}
/* Avatars with a presence dot keep the circle but let the dot sit on the rim. */
.pc-avatar:has(.pc-avatar__dot){overflow:visible}
.pc-avatar:has(.pc-avatar__dot) img{border-radius:50%}
.pc-avatar__dot{box-shadow:0 0 0 2px var(--dot-ring,var(--surface))}

/* App column + page head (mockup .app .h-m + .sub + .tabs-app). */
.pn-app{width:100%;max-width:var(--wrap-max);margin:0 auto;display:grid;gap:var(--app-gap);align-content:start}   /* owner 05.10.: the member area is as wide as the landing page's .wrap (1280), never full-bleed */
.pn-app > *{min-width:0}
/* Layout primitives (inner grounding 01.10.): a member page body is composed of these, never of a page-own grid.
   .pn-stack   blocks one under the other, --app-gap apart
   .pn-split   the main column + the side card column (--split-side, 360) from 1000; one column when there is no side.
               .pn-split__side sticks under the header where the screen is tall enough to show all of it
   .pn-pair    two balanced columns from 1000 (each a .pn-stack); the last panel of each grows, so both end on one
               line; .pn-pair__wide spans both */
.pn-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-content:start;min-width:0}
.pn-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-items:start;min-width:0}
/* design system 03.11. (docs/design-system.md §4): a panel is never stretched to its neighbour's height — the stretch made
   empty panels (Settings: «Membership» as tall as «Alerts») */
.pn-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-items:start;min-width:0}
.pn-pair > .pn-stack{display:flex;flex-direction:column}
@media (min-width:1000px){
  .pn-split{grid-template-columns:minmax(0,1fr) var(--split-side,360px)}
  .pn-split:not(:has(> .pn-split__side)){grid-template-columns:minmax(0,1fr)}
  .pn-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-pair__wide{grid-column:1 / -1}
}
@media (min-width:1000px) and (min-height:1000px){.pn-split__side{position:sticky;top:var(--sticky-top)}}
/* .pn-split with a head row (guest grounding 02.10., docs/guest-grounding-02-10.md): .pn-split__head = the page-head
   band (.pc-band) over the main column; .pn-split__lead = the page's one fact card, standing IN the band over the side
   column (from 1000: its top on the head's first line, its right edge the side column's); .pn-split__side starts on
   the main column's first line. Every other child is the main column. Below 1000: head, main, lead, side (the lead
   never pushes the main column down on phones). The band's line closes the row; --app-gap to the main column. */
.pn-split:has(> .pn-split__head){grid-template-areas:"head" "main" "lead" "side"}
.pn-split:has(> .pn-split__head) > *{grid-area:main}
.pn-split > .pn-split__head{grid-area:head;align-self:stretch}
.pn-split > .pn-split__lead{grid-area:lead}
.pn-split:has(> .pn-split__head) > .pn-split__side{grid-area:side}
@media (min-width:1000px){
  .pn-split:has(> .pn-split__head){grid-template-columns:minmax(0,1fr) var(--split-side,360px);grid-template-areas:"head lead" "main side"}
  .pn-split:has(> .pn-split__head):not(:has(> .pn-split__side, > .pn-split__lead)){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main"}
  .pn-split > .pn-split__lead{align-self:start;margin-bottom:var(--app-head-pb)}
}
.pn-apphead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-5);min-height:44px}
.pn-apphead h1{margin:0;font:700 var(--fs-h1)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h);color:var(--ink);text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
.pn-apphead > p{margin:0;color:var(--ink-2);font:var(--type-body)}
.pn-apphead--stack{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:var(--space-2)}   /* innen 500 SEL-1: a floor for the one track, so a pill strip scrolls inside itself instead of widening the page */
/* The back pill reads as navigation above the title (inner grounding 01.10.: 12 + the 6 row gap). */
.pn-apphead--stack > .pn-backchip{margin-bottom:12px}
.pn-apphead__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-5)}
/* Back link: a small line pill (the .chip family) with an arrow. */
/* the back chip (docs/design-system.md §7.2): small key height (phone 44), a pill, surface 2, the label voice (MSL-037) */
.pn-backchip{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);padding:0 var(--space-3) 0 var(--space-2);border:1px solid transparent;border-radius:var(--radius-full);background:var(--sunken);font:var(--type-label);color:var(--ink);text-decoration:none;transition:background-color var(--dur-fast)}
.pn-backchip:hover{background:var(--surface-2)}
.pn-backchip .pc-ico{width:16px;height:16px}

/* Panel = the paper card that holds a section (layer 2): .pcard / .pbox skin, radius 24, 26 padding, no shadow.
   Tonal pass 05.10.: the panel is a lighter (dark) / paper (light) surface on the ground, no line (the border stays
   declared, transparent, so state rules that colour it keep working). */
.pn-panel,.pn-proftabs,.pn-chatpage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);box-shadow:none}
.pn-panel{padding:var(--panel-pad);min-width:0}
.pn-panel--flush{padding:var(--list-pad)}
/* Panel head = the kit section head at card size (ui_sechead([... 'size' => 'sm']), the landing's .sec-head): one
   component for page sections and panels (inner grounding 01.10. retired the hand-written .pn-panelhead). */
.pc-sechead :is(h2,h3):has(> .pn-count){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pn-panel--flush > .pc-sechead{padding:var(--row-inset) var(--row-inset) 0;margin-bottom:var(--space-2)}
.pn-panel--flush .pn-row{padding-inline:var(--row-inset)}
/* Count = the small label (.real geometry on duck). Hot = pink. */
.pn-count{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:var(--space-1) var(--space-2);border-radius:var(--r-label);background:var(--sunken);color:var(--ink);font:var(--type-cap);letter-spacing:0;font-variant-numeric:tabular-nums}
.pn-count--hot{background:var(--accent);color:var(--on-accent)}
.pn-count--hot{justify-content:center;min-width:20px;min-height:20px;padding:0 var(--space-1);border-radius:var(--radius-full);font:600 12px/20px var(--body)}   /* innen 500 CON-35: an unread number is the round .pc-count badge everywhere (side list, drawer, rails); a plain quantity (.pn-count) stays square */
/* See all = the .pbox link: Inter Tight 700 14, ink, with the arrow. */
/* «All …» = the quiet link on the head's baseline (docs/design-system.md §9.2) */
.pn-seeall{flex:none;align-self:baseline;display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-sm);font:var(--type-strong);color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px}
.pn-seeall:hover{text-decoration-color:var(--ink)}
.pn-seeall:focus-visible,.pn-backchip:focus-visible,.pn-row:focus-visible,.pn-slotbtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* An empty state is its own paper card (mockup .empty): a panel that wraps one loses its skin, the empty keeps its own. */
.pn-panel:has(> .pn-empty:only-child){padding:0;background:transparent;border:0}
.pn-panel.pn-empty{padding:var(--space-12) var(--space-6)}
.pn-panel.pn-empty p + p{margin-top:var(--space-3)}

/* Rows: min 64, NO line between them (tonal pass 05.10.: 2 px air, the hover / current tone and the icon wells set the
   rows apart), icon wells = the 44 round control as a sunken disc. */
/* rows (docs/design-system.md §9.3): --r-m, --row-pad, min 44; no line, 4 apart; hover = one step up */
.pn-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
.pn-row{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);margin:0;padding:var(--row-pad);border-radius:var(--r-rules);color:inherit;text-decoration:none;transition:background-color var(--dur-fast)}
.pn-row + .pn-row::before{content:none}
a.pn-row:hover{background:var(--sunken)}
a.pn-row:hover .pn-rowicon{background:var(--surface-2)}
.pn-row__main{flex:1;min-width:0;display:grid;gap:0;color:inherit;text-decoration:none}
.pn-row__main > b{font:var(--type-strong);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-row__main > span{font:var(--type-meta);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-chev{color:var(--glyph-off);flex:none}
.pn-rowicon{flex:none;display:grid;place-items:center;width:var(--avatar-m);height:var(--avatar-m);border-radius:50%;border:1px solid transparent;background:var(--sunken);color:var(--ink);transition:background-color var(--dur-fast)}
/* UX 17.10. #75: one circle for every kind (the tonal well, the ink icon); the kind shows in the icon's colour only:
   like (filled) and order / offer / review in pink, chat and the rest in ink. Was white, ink-filled and pink circles. */
.pn-rowicon--like,.pn-rowicon--order{color:var(--pink-text)}
.pn-rowicon--like .pc-ico{fill:currentColor}
.pn-rowicon--chat,.pn-rowicon--sys{color:var(--ink)}
/* the same circle for the hidden senders of "Here's what you're missing" (were six mask tones, light and dark, in one list) */
.pn-missrows .pc-avatar.pn-mask{--pn-mask-bg:var(--sunken);color:var(--ink)}
.pn-missrows .pc-avatar.pn-mask > .pn-mask__lock{width:80%;background:transparent;color:var(--ink);box-shadow:none}
.pn-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.pn-row.is-unread .pn-row__main > b{font-weight:var(--w-bold)}
.pn-row.is-unread .pn-row__main > span{color:var(--ink)}
/* Group labels (day buckets, settings groups): the kicker label. */
.pn-grouplabel{margin:var(--space-5) 0 var(--space-2);font:var(--type-cap);letter-spacing:0;color:var(--ink-2)}

/* ---------- Forms: fields stacked with gap 20, two short columns on desktop ---------- */
.pn-form{display:grid;gap:var(--space-5);max-width:none}
.pn-form > .pc-sechead{margin-bottom:0}
.pn-formrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:700px){.pn-formrow{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}}
.pn-form select.pc-input{padding-right:44px}
.pn-form textarea.pc-input{min-height:132px}
.pn-err{color:var(--danger)}
.pn-dangerrow{display:flex;justify-content:flex-end;margin:0}
/* Toggle row: label left, switch right. */
.pn-tgl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;font:var(--type-strong)}

/* Page-level alerts on the app column: a quiet paper note, never floating. */
.pn-main > .pc-alert,.pn-app > .pc-alert{align-items:center}
.pn-app > .pc-alert .pc-ico{margin-top:0;color:var(--ink-2)}
.pn-app > .pc-alert--danger .pc-ico{color:var(--danger)}

/* ---------- Phone rhythm for app pages ---------- */
@media (max-width:700px){
  .pn-row{padding:var(--space-3) var(--space-2)}
  .pn-panel.pn-empty{padding:var(--space-10) var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  .pn-row,.pn-seeall,.pn-backchip{transition:none}
}
/* layout.css makes every a.pn-card-link a block; app rows and chips keep their own display. */
a.pn-card-link.pn-row,a.pn-card-link.pn-chatwho{display:flex}
a.pn-card-link.pn-row__main{display:grid}
a.pn-card-link.pn-backchip{display:inline-flex}

/* ==========================================================================
   Shared building blocks for page groups (use these, do not invent new skins)
   ========================================================================== */
/* Section head on the page = mockup .sec-head: h-m, muted line, action bottom-right. */
.pn-sectionhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4);margin:0 0 var(--head-gap)}
.pn-sectionhead > div{min-width:0}
.pn-sectionhead h2{margin:0;font:700 var(--fs-m)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h);color:var(--ink);hyphens:manual;overflow-wrap:break-word}
.pn-sectionhead .pc-help,.pn-sectionhead p{margin:var(--space-1) 0 0;color:var(--ink-2)}
/* In-card tile: sunken, radius 18, no border, no shadow. */
.pn-tile{display:block;min-width:0;padding:var(--space-4);border-radius:var(--r-rules);background:var(--sunken);color:inherit;text-decoration:none}
a.pn-tile,button.pn-tile{transition:background-color var(--dur-fast)}
a.pn-tile:hover,button.pn-tile:hover{background:var(--surface-2)}
/* In-card divider and sub-group spacing. */


/* Sticky action bar (partials/ui_actionbar.php): in flow at the end of a form; on phones it sticks to the bottom of
   the viewport above the tab bar, with the line on top (never a fixed bar over content). */
/* Inner grounding 01.10.: desktop = a paper bar that closes the form (surface, the line, radius 24), not a lone line on the
   page ground; phones = the sticky dock on paper with the line on top. */
.pc-actionbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--row-inset) var(--space-3) var(--panel-pad);border:1px solid transparent;border-radius:var(--r-box);background:var(--surface)}
.pc-actionbar__note{margin-right:auto;font:var(--type-meta);color:var(--ink-2)}
@media (max-width:700px){
  .pc-actionbar{position:sticky;bottom:var(--dock-flush);z-index:var(--z-bar);margin-inline:calc(-1 * var(--gutter));padding:var(--space-3) var(--gutter);border-width:1px 0 0;border-radius:0;background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
  .pc-actionbar > .pc-btn{flex:1 1 auto}
}

/* ==========================================================================
   In-card variants: anything card-like placed inside a panel goes flat.
   ========================================================================== */
.pn-panel .pn-panel,.pn-panel .pc-list{padding:0;background:transparent;border:0;border-radius:0}
.pn-panel .pc-card:not(.pn-prodcard){background:var(--sunken);border-color:transparent;border-radius:var(--r-rules)}
.pn-panel .pc-alert{background:var(--sunken);border-color:transparent;border-radius:var(--r-rules)}
.pn-panel .pc-alert--danger{background:var(--danger-soft);color:var(--ink)}
@media (prefers-reduced-motion:reduce){a.pn-tile,button.pn-tile{transition:none}}
/* ui_apphead(): the mockup app frame rhythm (h-m, 6, .sub → the pill tabs). Without a band (the chat rail head): 30 / 22. */
.pc-apphead{margin-bottom:var(--page-head-gap)}
.pc-apphead:has(> .pc-apphead__tabs){margin-bottom:var(--space-6)}
.pc-apphead__tabs{margin-top:24px}

/* ==========================================================================
   Band (inner grounding 01.10., docs/inner-grounding-01-10.md): the page head's ground. A full-bleed surface directly
   under the chrome, the landing hero's paper with its soft glow (--app-head-bg), the grey 50 % line under it.
   ui_apphead() renders it (every member page head); ad.php (the back row) and member.php (profile head + view pills)
   use the classes directly. Paint only: the bleed is a border-image outset, so it never adds scroll width.
   .pc-band        the surface across the viewport          .pc-band--top   the page's first block: up to the chrome
   .pc-band--flat  plain --surface (continues a band above)  .pc-band--line  the line under it
   ========================================================================== */
.pc-band{position:relative}
.pc-band::before{content:"";position:absolute;z-index:-1;inset:0;border-image:var(--app-head-bg) fill 0 / / 0 50vw}
.pc-band--top::before{top:calc(-1 * var(--app-top))}
.pc-band--flat::before{border-image-source:linear-gradient(var(--surface),var(--surface))}
.pc-band--line::after{content:none}   /* tonal pass 05.10.: the band is set apart by its own tone, no line under it */
/* .pc-band--end   the band runs on to the footer (through the main's foot, --main-pb)
   .pc-band--fill  the band fills the page from the chrome to the footer, its content centred (a dead end: one card) */
.pc-band--end::before{bottom:calc(-1 * var(--main-pb,0px))}
.pc-band--fill::before{top:calc(-1 * var(--app-top));bottom:calc(-1 * var(--main-pb,0px))}
.pn-main:has(> .pc-band--fill){display:flex;flex-direction:column}
.pc-band--fill{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:stretch}   /* content pass 06.11.: one column that never grows past the band (the 404 card ran 480 px wide on a 390 phone) */
/* The page head in its band: the back pill, the h1 row, the one muted line, the view pills; --app-gap to the first block
   (inside a gap grid the grid gap is that space). */
.pc-apphead.pc-band{padding-bottom:var(--app-head-pb);margin-bottom:var(--app-gap)}
.pn-app > .pc-apphead.pc-band{margin-bottom:0}
.pc-apphead.pc-band > .pc-sub{margin:0}
.pc-apphead.pc-band .pc-apphead__tabs{margin-top:20px}
@media (max-width:700px){.pc-apphead.pc-band .pc-apphead__tabs{margin-top:16px}}

/* ---------- Follow / Following (owner 03.10., partials/follow_btn.php): a kit line button whose label is its state.
   Off = plus + "Follow", on = check + "Following". The button keeps one width while it flips (both labels share the
   cell), so the action row never jumps. */
.pn-follow{display:inline-grid;justify-items:center;align-items:center}
.pn-follow > span{grid-area:1/1;display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.pn-follow > span .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m)}
.pn-follow.pc-btn--sm > span{gap:8px}
.pn-follow.pc-btn--sm > span .pc-ico{width:16px;height:16px}
.pn-follow .pn-follow__on,.pn-follow.is-on .pn-follow__off{visibility:hidden}
.pn-follow.is-on .pn-follow__on{visibility:visible}
.pn-followtoast{gap:var(--space-4);white-space:nowrap}
.pn-followtoast button,.pn-followtoast a{flex:none;min-height:var(--tap);display:inline-flex;align-items:center}
/* ==========================================================================
   Cards v3 (docs/design-v3-system.md §2.5). The card skins live in components.css (.pc-card = mockup .pcard,
   .pc-scard = the seller card, .pc-stories = the Premium row). This file only places them in grids and styles the few
   card-only details.
   Owned by the lead AD with the components; page files never restyle a card.
   ========================================================================== */
.pc-card__title mark{background:none;color:inherit;font-weight:var(--w-bold);padding:0}   /* a search hit is bold in the card's own ink (no pink wash on a photo; the header panel and /search/ mark the same way) */
.pn-askprice{flex:none;font:var(--type-label);color:var(--ink-2)}
.pn-age{font-weight:var(--w-regular);color:var(--ink-2)}
.pn-flag{flex:none;width:var(--icon-s);height:var(--icon-s);aspect-ratio:1;border-radius:var(--r-full);object-fit:cover}
/* Seller cards in a grid fill their cell; in flex rows (the "Your corner" favourites) they keep the rail width. */
:is(.pn-grid,.pn-rail) > .pc-scard{width:100%}
.pn-corner__sellers > .pc-scard{flex:none;width:176px}
@media (max-width:700px){.pn-corner__sellers > .pc-scard{width:148px}}
/* The Premium row on top of the sellers pages (guest discover + members' /sellers/). */
.pn-premrow{margin:var(--section-gap) 0}   /* polish r1: the same 32 above (under the page head) and below */
.pn-premrow .pc-sechead{margin-bottom:var(--head-gap)}
/* Buyer row (sell home): the 52 avatar, pink ring when online, the name, the quiet status. */
.pn-buyerrow .pc-avatar{width:var(--avatar-l);height:var(--avatar-l);font-size:var(--fs-title)}
.pn-buyerrow .pn-buyerrow__name{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-buyerrow .pn-buyerrow__name > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pn-buyerrow .pn-flag{width:var(--icon-s);height:var(--icon-s);vertical-align:-2px}
/* A16 (owner 18.10.): the name and status take the row's room, the two round keys sit together at the right end */
.pn-buyerrow .pn-row__lead > .pn-row__main{flex:1 1 auto;min-width:0}
.pn-buyerrow--offer{column-gap:var(--space-2)}
.pn-sellhome .pn-buyerrow--offer .pn-buyerrow__acts{padding-left:0}   /* the chat key sits beside the offer key, not under the name */
.pn-buyerrow .pn-row__sub.is-online{color:var(--ink);font-weight:var(--w-strong)}
/* Listing cards in a grid (adcard2 03.10.): the caption sits on the photo, so rows keep the grid's own gap (the 30 / 22
   row gap of 02.10. made room for a caption under the frame, which is gone). */
/* polish r4: one soft poster for media without a picture of their own (a video with no poster, a locked photo with no
   blur copy). Design system 03.11.: a flat tonal tile (surface 2 → surface), no pink wash (§2.3); the lock or the play
   disc sits on top. Tokens only, both themes. */
.pn-softposter{position:absolute;inset:0;z-index:1;background:linear-gradient(165deg,var(--surface-2),var(--surface));pointer-events:none}   /* no blur / scale: nothing may widen the tile's scroll box */
/* AD3 03.10. (docs/ad3-03-10.md): the seller portrait keeps the owner's card rule (PFLICHT 6): the age beside the name,
   the rating as a glass chip bottom left (★ + the score, never a count), her country as a round flag chip bottom right.
   The chips share the like's glass (--scard-glass, blur, the 50 % grey rim), so the photo carries three quiet objects of
   one family. The foot row is the caption's last line; the caption still grows upwards from the bottom edge. */
.pc-scard__name > .pc-scard__age{flex:none;overflow:visible;margin-left:calc(-1 * var(--space-1));font:inherit;font-weight:var(--w-regular);color:var(--scard-ink-2)}   /* MBY-044 */
.pc-scard__name > .pc-scard__age::before{content:none}
.pc-scard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-1) var(--space-2);min-width:0;margin-top:var(--space-2)}   /* cards3 05.10.: the rating chip, then the tiny listing-count chip, both bottom left; UX 17.10. #37: + "Top rated", a narrow card wraps the row */
.pc-scard__foot > .pc-scard__score{display:inline-flex;flex:none;align-items:center;gap:var(--space-1);white-space:nowrap;height:24px;padding:0 var(--space-2);border:0;border-radius:var(--r-s);background:var(--scard-glass);font:var(--type-label);color:var(--scard-ink);text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pc-scard__foot > .pc-scard__score > span[aria-hidden]{display:inline-flex;align-items:center;gap:var(--space-1)}
.pc-scard__foot > .pc-scard__n{flex:0 1 auto;min-width:0;overflow:hidden;gap:var(--space-1);padding:0 var(--space-2);border-radius:var(--r-s)}   /* owner 12.10.: on a narrow card the count chip gives way, the rating never breaks into two lines */
.pc-scard__foot > .pc-scard__n > .pc-ico{width:var(--icon-s);height:var(--icon-s);flex:none}   /* UX 17.10. #4: a tag + the number, never cut words */
/* UX 17.10. #37: "Top rated" in the foot row (it was a rotated stamp over the photo); design system: a badge on the photo's
   glass like its two neighbours (--r-s, cap type), no cream label */
.pc-scard__foot > .pc-scard__top{display:inline-flex;flex:none;align-items:center;height:24px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--scard-glass);color:var(--scard-ink);font:var(--type-cap);white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pc-scard__foot .pc-scard__star{font-size:12px;line-height:1}
.pc-scard__flag{position:absolute;top:var(--space-3);left:var(--space-3);z-index:6;width:var(--icon-m);height:var(--icon-m);border-radius:var(--r-full);object-fit:cover;box-shadow:0 0 0 2px var(--scard-glass)}   /* MBY-116 */
/* pnew page group: market (landing, marketplace, search, ad detail, discover, buyer list). Design v2 "Bold Flesh"
   (docs/design-v2-system.md, plan §2.6 S1–S4, S7, S12). Page = --bg; panels = --surface; inside a panel only flat fills.
   Black = chrome only (buy bar, stat tiles, join bar). Tokens only; photo glass uses --glass / --glass-strong. */

/* The ticker runs full bleed on desktop, flat (§7.13, M:479). */
@media (min-width:701px){
  .pn-main > .pn-ticker{margin:var(--section-gap) calc(50% - 50vw);border-radius:0}
  }
/* Phone: the tilted band is scaled 1.03 (T1b); a little less bleed keeps its bounding box inside the viewport (no h-scroll).
   The scale grows with the width, so the inset does too (mobile UX: 6px fixed left a 1px scroll at 430). */
@media (max-width:700px){.pn-main > .pn-ticker{margin-inline:calc(max(6px,1.8vw) - var(--gutter))}}

/* Header search pill (a GET form to /ads/; chrome.css skins it on the black header). */
form.pn-search{position:relative;flex:1;min-width:0;max-width:940px;margin:0;cursor:text}
form.pn-search:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}   /* night N8 #87: keyboard focus ring on the in-page search (the input itself draws none) */
form.pn-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--ink);font:var(--type-ui);outline:none;appearance:none}
form.pn-search input::placeholder{color:var(--ink-2)}
form.pn-search input::-webkit-search-cancel-button,.pn-mksearch__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ========== v3 Market + discovery (docs/design-v3-system.md §4.1/§4.2; mockup .app, .tabs-app, .pairs, .sellers) ==========
   Placement only: every look comes from the kit (pc-seg pills, pc-chip, pc-btn, pc-card, pc-scard, pc-input, pn-sheet,
   pc-empty). Owner 30.09.: no filter sidebar, the page is .pn-wide (layout.css: the wide column + the 3–7 column grid).
   The head row: h1 … sort pills · Filters (owner 05.11.); under it only for a search / a filter: count · active chips. The filters live in ONE form (#pnMkSheet): the centred
   modal on desktop (scrolling body, sticky footer), the bottom sheet on phones (the kit .pn-sheet). */
.pn-mksentinel{height:1px;margin-bottom:-1px}
.pn-mktool{display:none}
.pn-mkmain{min-width:0}
/* The toolbar row (desktop): count and chips left, sort pills + Filters right; everything wraps. */
.pn-mkbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);min-height:var(--control-sm);margin:0 0 var(--wide-head-gap)}
.pn-mkcount{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2);min-width:0;margin:0;font:var(--type-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-mkcount__loose{font:var(--type-meta);color:var(--ink-2)}
.pn-mkactive{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0}
.pn-mkactive .pc-chip{min-height:var(--control-sm);padding-block:0}   /* MBY-057 */
.pn-mkactive .pc-chip .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-mkactive .pn-seeall{margin-left:var(--space-1);min-height:var(--control-sm);align-self:center}
.pn-mksort{justify-content:flex-end}
.pn-mkfilterbtn{flex:none}
.pn-grid > .pn-skelcard{min-width:0}
/* The listing cards fill their grid cell (one row = one height). */
.pn-mkgrid > *{min-width:0;height:100%}
/* MBY-048: the Top listings rail at the grid's card size (3 / 4 / 5), fading at its edge */
@media (min-width:701px){
  .pn-main > .pn-mk.pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 2 * var(--wide-grid-gap)) / 3);gap:var(--wide-grid-gap);-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}
}
@media (min-width:1024px){.pn-main > .pn-mk.pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 3 * var(--wide-grid-gap)) / 4)}}
@media (min-width:1280px){.pn-main > .pn-mk.pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 4 * var(--wide-grid-gap)) / 5)}}
/* Sellers found by a search: the mockup .sellers row under a .sec-head with the "Real sellers" label. */
.pn-mksellers{margin:0 0 var(--section-gap)}
/* T08: a search that found her but none of her ads: one muted line under the seller strip, no empty-state card */
.pn-mknoads{margin:calc(var(--section-gap) * -0.5) 0 var(--section-gap)}
/* Phone search field: the kit field (.pc-input, pill 50) with the icon inside and a round clear button. */
.pn-mksearch{position:relative;flex:1;min-width:0;margin:0}
.pn-mksearch__field{position:relative;display:flex;align-items:center;min-width:0}
.pn-mksearch__field > .pc-ico{position:absolute;left:var(--space-3);z-index:1;color:var(--ink-2);pointer-events:none}
.pn-mksearch .pc-input{padding:0 var(--space-4) 0 var(--space-10)}
.pn-mksearch .pc-input:has(~ .pn-clearq){padding-right:var(--space-12)}
.pn-clearq{position:absolute;right:var(--space-2);top:50%;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;border-radius:var(--r-full);background:var(--surface-3,var(--btn-ink));color:var(--ink);text-decoration:none}   /* MBY-058 */
.pn-clearq::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-full)}
.pn-clearq .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-clearq:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Recent searches: a floating menu (e1: surface 2 + --shadow-e1) under the search field. */
.pn-recent{position:absolute;top:calc(100% + var(--space-2));left:0;right:0;z-index:25;display:grid;gap:var(--space-2);padding:var(--space-4);background:var(--surface-2);border:0;border-radius:var(--r-l);box-shadow:var(--shadow-e1);color:var(--ink)}   /* e1: surface 2 + the float shadow */
.pn-recent[hidden]{display:none}
.pn-recent .pn-grouplabel{margin:0}
.pn-mkfilterbtn{flex:none}
/* The filter form: the kit sheet as a flex column; the pill groups scroll, the footer (Reset + Show N results) stays. */
dialog.pn-mksheet{display:none;overflow:hidden;padding:var(--space-2) 0 0;max-height:min(90svh,780px)}
dialog.pn-mksheet[open],dialog.pn-mksheet:target{display:flex}   /* QA m6: :target = the no-JS filter form */
dialog.pn-mksheet:target:not([open]){z-index:var(--z-toast)}   /* not in the top layer without JS: above the header and the bars */
.pn-mksheet__form{display:flex;flex-direction:column;width:100%;min-height:0;margin:0}
.pn-mksheet .pn-sheet__head{padding:0 var(--space-5)}
.pn-mksheet__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--space-5) var(--space-5)}
.pn-mkset{margin:0;padding:0;border:0;min-width:0}
.pn-mkset[hidden],.pn-mkset .pc-chips > label[hidden]{display:none}   /* round 2: size + fabric per category, empty options hidden */
.pn-mkset + .pn-mkset{margin-top:var(--space-6)}   /* MBY-064 */
.pn-mkset > legend.pn-grouplabel{margin:0;padding:0 0 var(--label-gap)}
.pn-mkcty{display:block;margin-top:var(--space-3)}   /* owner 18.10. ("gequetscht"): the "Other countries" select under the country chips gets the room of the set's other parts */
.pn-mksheet__btns{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
.pn-mksheet__btns > .pc-btn{justify-content:center;text-align:center;white-space:nowrap}
/* One chosen look (§7.4, MBY-027/061): accent-soft + ink + check in the sort row, the sheet and the sellers' row
   (beats items.css:511's white fill); the gold Premium pill keeps its metal (owner 15.10.) */
dialog.pn-mksheet .pn-mksheet__body :is(.pc-chips > .pc-chip:has(> input:checked),.pc-seg > label:has(> input:checked):not(.pc-chip--premium)),
.pn-mkhead__tools .pc-seg.pn-mksort > :is(.is-active,[aria-current]):not(.pc-chip--premium),
.pn-discbar .pc-seg > :is(.is-active,[aria-current],[aria-pressed="true"]):not(.pc-chip--premium){background:var(--chip-sel,var(--btn-ink));color:var(--on-chip-sel,var(--on-btn-ink))}
.pn-mkhead__tools .pc-seg.pn-mksort > :is(.is-active,[aria-current])::before,
.pn-discbar .pc-seg > :is(.is-active,[aria-current],[aria-pressed="true"]):not(:has(.pc-ico))::before{content:"";flex:none;width:10px;height:6px;margin-right:var(--space-1);border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
/* Sellers · Listings · Videos (partials/disc_switch.php) = view tabs (§7.4): text, the active one ink + 2 px accent (MBY-051) */
.pc-seg.pn-discseg{gap:var(--space-6)}
.pc-seg.pn-discseg > a,.pc-seg.pn-discseg > a:hover{min-height:var(--control-md);padding:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-2);font:var(--type-strong)}
.pc-seg.pn-discseg > a:hover{color:var(--ink)}
.pc-seg.pn-discseg > a:is(.is-active,[aria-current]){background:none;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:var(--space-2)}
@media (min-width:701px){
  /* Desktop: a centred modal, 560 wide, the body scrolls between the head and the sticky footer. */
  dialog.pn-mksheet{width:min(560px,calc(100% - 48px));max-height:min(86vh,820px);padding-top:var(--space-6)}
  .pn-mksheet .pn-sheet__head{margin-bottom:var(--space-4);padding-bottom:0}
  .pn-mksheet .pn-sheet__head,.pn-mksheet__body{padding-inline:var(--space-6)}
  .pn-mksheet__btns{padding:var(--space-4) var(--space-6) var(--space-5)}
}
@media (max-width:700px){
  /* The tool row sticks under the header (in flow; the grid scrolls under it only after the page head). */
  .pn-mktool{position:sticky;top:var(--pn-mktop,var(--header-h));z-index:var(--z-bar);display:flex;align-items:center;gap:var(--space-2);margin:0 calc(-1 * var(--gutter)) var(--space-2);padding:var(--space-2) var(--gutter);background:var(--bg)}
  .pn-mktool.is-stuck{box-shadow:0 10px 24px -14px var(--scrim)}
  .pn-mkbar{gap:var(--space-2);min-height:0;margin-bottom:var(--space-3)}
  .pn-mkcount{flex:1 1 100%}   /* MBY-055 */
  /* The active chips: one row that slides sideways (edge to edge), Reset at its end. */
  .pn-mkactive{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .pn-mkactive::-webkit-scrollbar{display:none}
  .pn-mkactive > *{flex:none;white-space:nowrap}
  .pn-mkbar:not(:has(.pn-mkcount,.pn-mkactive)){display:none}
  /* polish r1: phones use the desktop row too: the quiet Reset left, "Show N results" fills the rest (never wraps).
     MBY-062/063: both keys --control-md, one type size; Reset is the quiet key (ink, no fill), never a smaller key. */
  .pn-mksheet__btns{gap:var(--space-2);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom))}
  .pn-mksheet__btns > .pn-mksheet__reset{padding-inline:var(--space-3)}
  .pn-mksheet__btns > .pn-mksheet__go{padding-inline:var(--space-3)}
}

/* ---------- Discover (members' /sellers/): page head + Sellers | Videos pills, favourites row, filter pills, avatar grid ---------- */
.pn-discbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--section-gap)}
/* polish r1: the pills and the language chip share one wrapping row (2 rows at 360, not 3). The chip shows a pill-size
   label; the native select lies invisibly on top (it keeps the 16px iOS guard and stays the tap target). */
.pn-discbar > .pc-seg{display:contents}
.pn-langchip .pc-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer}
.pn-langchip__lab{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-10) 0 var(--space-3);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label);white-space:nowrap;transition:background-color var(--dur-1)}   /* MBY-112 */
.pn-langchip:hover .pn-langchip__lab{background:var(--surface-3,var(--surface-2))}
.pn-langchip.is-set .pn-langchip__lab{background:var(--chip-sel,var(--btn-ink));color:var(--on-chip-sel,var(--on-btn-ink))}   /* the one chosen look */
.pn-langchip:has(.pc-input:focus-visible) .pn-langchip__lab{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-langchip::after{z-index:2}
.pn-langchip{position:relative}   /* visual audit VM-002: the Premium wall's country chip sits outside the discovery bar; the invisible select needs its box there too */
.pn-favs{margin:0 0 var(--section-gap)}
/* The seller grid: seller cards in even columns, equal heights. On the wide member pages the columns come from
   layout.css (.pn-wide: 3 / 4 / 5 / 6 / 7); elsewhere 3, 4 from 900, 6 from 1200; 2 on a phone. */
.pn-grid.pn-sellergrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media (min-width:900px){.pn-grid.pn-sellergrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.pn-grid.pn-sellergrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:700px){
  .pn-grid.pn-sellergrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  /* The favourites row slides sideways on phones (the mockup .sellers row is one line). */
  .pn-favs .pn-sellerrail{display:flex;flex-wrap:nowrap;gap:var(--space-3);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:var(--space-1) var(--gutter) var(--space-2)}
  .pn-favs .pn-sellerrail::-webkit-scrollbar{display:none}
  .pn-favs .pn-sellerrail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}   /* UX polish 23.10. UX-066: the same edge fade as the hub rails */
  .pn-favs .pn-sellerrail > .pc-scard{flex:none;width:148px}
}
/* @member-only */
/* Owner 05.11. ("die Sort-Tabs auf Höhe von der Market-Headline"): the sort pills + Filters sit in the page head's row, right
   of the h1 and centred with it; no count row in plain browsing (templates/market.php; members only — a guest's /ads/ is the hub). */
.pn-mk .pn-apphead__row{align-items:center}
.pn-mkhead__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2) var(--space-3);min-width:0;margin-left:auto}
/* Owner 15.10. ("bei mobiler ansicht fehlen die ganzen buttons … premium und new … muss auf mobile sichtbar sein"): on a
   phone the sort pills (Premium first, then Newest, …) are one row right under the tool row, above the count and the
   grid; it slides sideways when it does not fit (edge to edge, no scrollbar) and fades at the right edge like the rails
   (MBY-052). The pills are 44 tall on phones (--control-sm), so no padding trick for the hit area. The Filters button stays in the tool row. */
@media (max-width:700px){
  /* Owner 05.11.: the pills are the head's last row — under the h1 (and her "New listing" key), under a buyer's
     Sellers · Listings · Videos; the Filters key is the tool row's. */
  .pn-mk .pn-apphead__row > .pc-row{display:contents}
  .pn-mk .pn-apphead:has(> .pc-apphead__tabs) > .pn-apphead__row{display:contents}
  .pn-mk .pn-apphead > .pc-apphead__tabs{order:1}
  .pn-mkhead__tools{display:block;flex:1 1 100%;order:2;min-width:0;margin:var(--space-2) 0 0}
  .pn-mkhead__tools > .pn-mkfilterbtn{display:none}
  .pn-mksort{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}
  .pn-mksort::-webkit-scrollbar{display:none}
  .pn-mksort > *{flex:none}
  /* Members' /sellers/ (the same owner note): the filter pills (Premium first) are one sideways row too; the country and
     the language selects wrap onto the row under it. */
  .pn-discbar > .pc-seg{display:flex;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}
  .pn-discbar > .pc-seg::-webkit-scrollbar{display:none}
  .pn-discbar > .pc-seg > *{flex:none}
}
/* @end-member-only */

/* ---------- Photo / video feed of a seller: the media card photo (4:5, --r-m, no edge) in the grid ---------- */
.pn-grid.pn-fdgrid{gap:var(--space-4)}
.pn-fdgrid .pn-fdtile{aspect-ratio:4/5;width:100%;padding:0;border:0;border-radius:var(--r-m);text-decoration:none;color:inherit}
.pn-fdgrid .pn-fdtile > video{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;background:var(--bg)}
.pn-fdgrid button.pn-fdtile{cursor:zoom-in}
.pn-fdgrid .pn-fdtile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-fdgrid .pn-fdtile--lock > img{filter:blur(28px);transform:scale(1.3)}
.pn-fdgrid .pn-fdtile--lock::after{content:"";position:absolute;inset:0;z-index:3;background:var(--media-dim)}
.pn-fdgrid .pn-fdtile--lock .pc-lockpill{position:relative;z-index:4}
.pn-fdgrid .pn-photocount{z-index:5}
@media (max-width:700px){.pn-grid.pn-fdgrid{gap:var(--space-3)}}
/* The gate: a dark box in flow at the end (mockup .box--dk), one pink action. */
.pn-fdgate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);margin-top:var(--section-gap)}
.pn-fdgate__txt{display:flex;align-items:center;gap:var(--space-3);min-width:0;margin:0;font:var(--type-strong)}
.pn-fdgate__txt .pc-ico{flex:none;color:var(--ink-2)}   /* pink is the one key beside it, never an icon */
@media (max-width:700px){.pn-fdgate > .pc-btn{flex:1 1 100%}}

/* ========== Ad detail (S4) ========== */

.pn-crumbs{display:none;flex:1;min-width:0;align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none;font:var(--type-label);color:var(--ink-2)}
.pn-crumbs li{display:flex;align-items:center;gap:var(--space-1);min-width:0}
.pn-crumbs li:last-child{flex:1;min-width:0}
.pn-crumbs a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pn-crumbs a:hover{color:var(--ink);text-decoration:underline}
.pn-crumbs a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}
.pn-crumbs [aria-current]{min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-crumbs .pn-chev{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--glyph-off)}
.pn-adshare{flex:none;display:inline-grid}
@media (min-width:701px){.pn-crumbs{display:flex}}
.pn-sharetoast{position:fixed;left:50%;bottom:calc(var(--dock) + 84px + var(--toast-gap));z-index:var(--z-toast);transform:translateX(-50%);pointer-events:none}
@media (min-width:701px){.pn-sharetoast{bottom:var(--toast-low)}}

/* Gallery: native swipe (scroll-snap). Desktop: 4:5, --r-l (it stands beside a panel), counter + thumbs. Phone: full-bleed 476 hero, story bars. */

.pn-gal{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--surface-2);box-shadow:none}
.pn-gal__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:inherit}
.pn-gal__track::-webkit-scrollbar{display:none}
.pn-gal__track:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-gal__slide{flex:0 0 100%;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always}
.pn-gal__slide > img,.pn-gal__slide > picture > img{object-position:50% 35%}
.pn-gal__count{position:absolute;top:var(--space-3);right:var(--space-3);z-index:5;display:inline-flex;align-items:center;height:24px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font:var(--type-cap);font-variant-numeric:tabular-nums;pointer-events:none}   /* a badge on glass (§9.1) */
.pn-gal__count b{font-weight:var(--w-strong)}
/* adult (owner 05.10.): the blurred slide carries the Premium door; the lock sits where the eye lands */
.pn-gal__lock{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);white-space:nowrap}
.pn-gal__slide.is-locked > img,.pn-gal__slide.is-locked > picture > img{transform:scale(1.04)}
.pn-gal__nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);background:var(--glass);color:var(--ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity var(--dur-1),background-color var(--dur-1)}
.pn-gal:hover .pn-gal__nav,.pn-gal__nav:focus-visible{opacity:1}
.pn-gal__nav:hover{background:var(--scard-glass-hover,var(--glass))}
.pn-gal__nav:active{transform:translateY(-50%)}
.pn-gal__nav--prev{left:var(--space-3)}
.pn-gal__nav--next{right:var(--space-3)}
.pn-gal__dots{display:none}
.pn-gal__bars{position:absolute;left:var(--space-4);right:var(--space-4);top:var(--space-3);z-index:5;display:flex;gap:var(--space-1);pointer-events:none}
.pn-gal__bars i{flex:1;height:3px;border-radius:var(--r-full);background:var(--media-track);transition:background-color var(--dur-1)}
.pn-gal__bars i.is-active{background:var(--ink)}
.pn-gal__thumbs{display:none}
.pn-gal__thumb{padding:0;border:0}
.pn-gal.is-single .pn-gal__count,.pn-gal.is-single .pn-gal__nav,.pn-gal.is-single .pn-gal__bars{display:none}
@media (hover:none){.pn-gal__nav{display:none}}
@media (min-width:701px){
  .pn-gal__bars{display:none}
  .pn-gal__thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
  .pn-gal__thumb{position:relative;width:76px;height:95px;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;cursor:pointer;opacity:.7;transition:opacity var(--dur-1)}
  .pn-gal__thumb:hover{opacity:.95}
  .pn-gal__thumb.is-active{opacity:1}
  .pn-gal__thumb:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  }
/* Attributes: build3 integrator (owner queue item 10) — the facts component (components.css), bleeding to the sheet edges. */
.pn-adfacts{margin-bottom:0}
.pn-ad__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);align-items:stretch}
.pn-ad__cta > :only-child{grid-column:1/-1}
.pn-ad__cta form{margin:0;display:grid;gap:var(--space-2)}
.pn-ad__cta #pnMsgForm{grid-column:1}
/* Reserved (followup: orders): a black pill next to the price, a calm disabled button, "view order" link. */

.pn-adorder--reserved[aria-disabled="true"]{gap:var(--space-2);background:var(--surface-2);color:var(--ink-2);box-shadow:none;cursor:not-allowed;pointer-events:none}
a.pn-adorder--mine{gap:var(--space-2);text-decoration:none}
.pn-adorder__offer .pc-input{width:100%}
/* ========== Buy bar (§7.14): the floating black pill; phones: always on, it replaces the tabbar ========== */

@media (max-width:899px){
  body.pn-has-adbar .pn-main{padding-bottom:calc(72px + 12px + env(safe-area-inset-bottom) + var(--space-8))}
}

/* ========== Ad detail on phones (M:719–754): full-bleed hero under glass buttons, overlapping --bg sheet ========== */
@media (max-width:700px){
  .pn-gal{border-radius:0}
  .pn-gal__slide{aspect-ratio:auto;height:476px}
  .pn-gal__count{display:none}
  .pn-gal__bars{top:calc(var(--space-3) + env(safe-area-inset-top))}
  /* The buy bar carries the main action (M:750). Once it is pinned, the panel's own CTA row is not shown twice: its forms
     stay in the DOM (the bar submits them via form=). The offer form stays visible, since the bar links to it. */
  body.pn-has-adbar .pn-ad__cta:not(:has(.pn-adorder__offer)){display:none}
  .pn-ad__cta{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .pn-ad__cta > *{flex:1 1 0;min-width:0}
  .pn-ad__cta .pc-btn--lg{height:var(--control-md);padding:0 var(--space-3)}
  .pn-ad__cta form:has(.pn-adorder__offer){flex-basis:100%}
}

/* ========== Buyer list (sell home, plan §2.7) ========== */
.pn-buyerrows{display:grid}
a.pn-card-link.pn-row__lead{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-row__lead:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-buyerrow:hover{background:var(--surface-2)}
.pn-buyerrow .pn-row__main > b{display:flex;align-items:center;gap:var(--space-2)}
.pn-rowbtn{flex:none;min-width:104px;justify-content:center}
/* offer: "Make offer" (soft pill) and, after her one offer to that buyer, the state chip in the same slot. */
.pn-buyerrow__acts{flex:none;display:flex;align-items:center;gap:var(--space-2)}
.pn-makeoffer .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
.pn-offerstate{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2);font:var(--type-label);white-space:nowrap;text-decoration:none}   /* a state chip: the chip's height, radius and type */
.pn-offerstate .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);stroke-width:2.4}
.pn-offerstate.is-open{background:var(--chip-sel,var(--accent-soft));color:var(--ink)}
.pn-offerstate.is-accepted{background:var(--surface-2);color:var(--ink)}
.pn-offerstate.is-accepted .pc-ico{color:var(--success)}
a.pn-offerstate:hover{text-decoration:underline}
a.pn-offerstate:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* The "Make offer" sheet (.pn-sheet): segmented item | custom, her items as picks, her photos as a strip. */
.pn-offersheet__form{display:grid;gap:var(--space-3)}
.pn-offersheet__form .pn-sheet__head{margin-bottom:0}
/* Its title takes the focus on open (T70) as a landmark, not a control: no ring after a tap or click (a keyboard user sees where he is). */
.pn-offersheet h2[tabindex="-1"]:focus:not(:focus-visible){outline:0}
.pn-offersheet__lede{margin:0}
.pn-offersheet__seg{justify-self:start}
.pn-offersheet__seg .pc-tab:has(input:checked){background:var(--seg-on,var(--btn-ink));color:var(--on-seg-on,var(--on-btn-ink))}   /* a segment: surface 3 + ink (§7.4), never the white fill */
.pn-offersheet__seg .pc-tab:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-offersheet__panel{display:grid;gap:var(--space-3);min-width:0;margin:0;padding:0;border:0}
.pn-offersheet__panel[hidden],.pn-offersheet [data-when][hidden]{display:none}
.pn-offersheet__form:has(input[name=mode][value=item]:checked) [data-panel=custom],
.pn-offersheet__form:has(input[name=mode][value=item]:checked) [data-when=custom],
.pn-offersheet__form:has(input[name=mode][value=custom]:checked) [data-panel=item],
.pn-offersheet__form:has(input[name=mode][value=custom]:checked) [data-when=item]{display:none}
.pn-offersheet__form[data-mode=custom] [data-when=item]{display:none}
.pn-offersheet__items{display:grid;gap:var(--space-2);max-height:min(40svh,300px);overflow:auto;padding:var(--space-1)}
.pn-offerpick{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border-radius:var(--r-m);background:var(--surface-2);cursor:pointer;transition:background-color var(--dur-1)}
.pn-offerpick:has(input:checked){background:var(--chip-sel,var(--accent-soft))}
.pn-offerpick.is-off{cursor:default;opacity:.6}   /* UX 433 S-081: shown with its reason, not pickable */
.pn-offerpick:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-offerpick__img{flex:none;width:44px;height:55px;border-radius:var(--r-s);overflow:hidden;background:var(--ph-media)}
.pn-offerpick__txt{flex:1;min-width:0;display:grid;gap:var(--space-1)}
/* 02.10. night QA: the seller must recognise the pair she offers: the title takes up to two lines, never an ellipsis at 360 */
.pn-offerpick__txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font:var(--type-strong);color:var(--ink);overflow-wrap:anywhere}
.pn-offerpick__txt span{font:var(--type-label);color:var(--ink-2)}
.pn-offerpick__tick{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--r-full);background:transparent;box-shadow:inset 0 0 0 2px var(--ink-3);color:transparent}   /* the kit radio: 20, a 2 px ink-3 ring off, accent on */
.pn-offerpick:has(input:checked) .pn-offerpick__tick{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.pn-offerpick__tick .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6}
.pn-offersheet__noitems{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--row-pad);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink-2)}
.pn-offersheet__pics{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-1);scrollbar-width:none}
.pn-offersheet__pics::-webkit-scrollbar{display:none}
.pn-offerpic{flex:none;position:relative;display:block;width:56px;height:70px;border-radius:var(--r-m);overflow:hidden;cursor:pointer;background:var(--surface-2)}
.pn-offerpic .pn-snap{display:block;width:100%;height:100%}
.pn-offerpic:has(input:checked){outline:2px solid var(--accent);outline-offset:-2px}   /* a chosen photo: the accent ring is its state mark */
.pn-offerpic:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-offerpic__none{display:grid;place-items:center;width:100%;height:100%;color:var(--ink-3)}
.pn-offersheet__price{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:end}
.pn-offersheet__price:has([data-when=custom][hidden]),.pn-offersheet__form:has(input[name=mode][value=item]:checked) .pn-offersheet__price{grid-template-columns:1fr}
.pn-offersheet__cur .pc-input{min-width:112px}
.pn-offersheet__err{margin:0;padding:var(--row-pad);border-radius:var(--r-m);background:var(--surface-2);color:var(--danger);font:var(--type-meta)}   /* an error is text in --danger on a note, never a red wash */
.pn-offersheet__err[hidden]{display:none}
.pn-offersheet__fine{margin:0;text-align:center}
.pn-offersheet__new{margin-top:var(--space-1)}   /* member launch: the door to the editor under her listings */
.pn-offerlimit__rows{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-offerlimit__rows li{display:flex;align-items:flex-start;gap:var(--space-2);font:var(--type-body);color:var(--ink)}
.pn-offerlimit__rows svg{flex:none;transform:translateY(1px);color:var(--success)}   /* a check is a state mark: success, the pink stays the key */
.pn-offersheet__form.is-busy{opacity:.7;pointer-events:none}
@media (min-width:900px){
  .pn-buyerrows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4)}
  .pn-buyerrows > .pn-row:nth-child(2)::before{display:none}
}

/* ========== Phones: app feel ========== */
@media (max-width:700px){
  .pn-buyerrow{flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .pn-gal__nav,.pn-gal__bars i,.pn-gal__thumb{transition:none}
}

/* ---------- Ad page (moved from chat.css in T7, same cascade position relative to market.css): Order (primary) beside Message (secondary) and the heart ---------- */
.pn-ad__cta:has(.pn-adorder){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.pn-ad__cta:has(.pn-adorder):not(:has(.pn-heart)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pn-ad__cta .pn-adorder:has(.pn-adorder__offer){grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.pn-adorder .pc-btn{gap:var(--space-2)}
.pn-adorder__offer{display:grid}
.pn-adorder__offer .pc-input{height:var(--control-md);font:var(--type-ui)}
.pn-adorder__err{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 0;padding:var(--row-pad);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-meta)}   /* a note with the danger icon (§2.4), no red wash */
.pn-adorder__err .pc-ico{flex:none;color:var(--danger)}
.pn-ad__cta form .pc-btn .pc-ico{flex:none}
/* polish-b 02.10.: the "Saved to your favourites · See all" toast after a heart on a pair (grid.js): one line, the link
   never wraps. The look is the kit toast. */
.pn-savetoast{gap:var(--space-4);white-space:nowrap}
.pn-savetoast a{flex:none;min-height:var(--control-sm);display:inline-flex;align-items:center}

/* ==========================================================================
   Premium wall (owner 05.10., pages/premium_wall.php, lib/premium_wall.php): the directory's seller grid for sellers,
   the first card is hers. "You here" = her own portrait dimmed under the pink plus disc, the caption in pink; the whole
   card is the way to the pay site. A Premium seller's own card carries the "You" pill where the heart sits.
   Kit only: the card frame, the pink disc of .pc-scard__prem, the kicker over the page head. No new colour.
   ========================================================================== */
.pn-premwall__count{margin:0;color:var(--ink-2);font:var(--type-label)}
.pn-apphead__kicker{margin-bottom:var(--space-2);color:var(--ink-2)}
.pn-youcard .pc-scard__media > img,.pn-youcard .pc-scard__media > picture > img{opacity:.38;filter:grayscale(.6)}
.pn-youcard .pc-scard__media > .pc-nophoto{opacity:.38}
.pn-youcard__plus{position:absolute;top:50%;left:50%;z-index:4;display:grid;place-items:center;width:64px;height:64px;margin:-48px 0 0 -32px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--scard-glass);line-height:0}   /* her one key on this page */
.pn-youcard__plus .pc-ico{display:block;width:var(--icon-l);height:var(--icon-l);stroke-width:2.6}
.pn-youcard__go{all:unset;cursor:pointer}
.pn-youcard .pc-scard__name{color:var(--scard-ink)}   /* pink is never text (docs/design-system.md §2.3) */
.pn-youcard .pc-scard__meta{color:var(--scard-ink)}
@media (hover:hover){.pn-youcard:hover .pn-youcard__plus{background:var(--accent-press)}.pn-youcard:hover .pc-scard__media > img,.pn-youcard:hover .pc-scard__media > picture > img{transform:none}}
.pc-scard__you{position:absolute;top:var(--space-3);right:var(--space-3);z-index:6;display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--accent);color:var(--on-accent);font:var(--type-cap);white-space:nowrap}   /* a state badge (§5 --r-s, §3 cap) */
@media (max-width:700px){
  .pn-youcard__plus{width:56px;height:56px;margin:-44px 0 0 -28px}
}
/* UX 433 B-056 (round 2): his own min–max range under the price chips, in the page's currency */
.pn-mkrange{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}
.pn-mkrange .pc-input{width:100%;box-sizing:border-box}
/* pnew page group: seller tools v3 (design/v2/cast-mockup.html, docs/design-v3-system.md §4) — My pairs, the ad editor,
   the seller home and the members-only dead end. This file only PLACES kit components (pc-*, pn-panel, pn-row, ui_*).
   Where a JS-owned element cannot carry a kit class (items.js repaints photo slots, the state label, the preview), the
   kit values are mirrored here from components.css and marked "mirrors". Tokens only.
   Design system P5 (03.11.): docs/design-system.md, tokens only. */

/* ---------- Shared: the page toast ---------- */
/* Toast = .pc-toast (surface 2, e1 shadow), fixed bottom centre; hidden while empty. */
.pn-itoast{position:fixed;left:50%;bottom:calc(var(--toast-low) + env(safe-area-inset-bottom));z-index:var(--z-toast);max-width:calc(100% - var(--space-8));transform:translate(-50%,var(--space-3));opacity:0;pointer-events:none;transition:opacity var(--dur-1) ease-out,transform var(--dur-2) ease-out}
.pn-itoast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pn-itoast.is-bad{background:var(--danger);color:var(--on-danger)}
.pn-itoast.is-bad a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pn-itoast:empty{display:none}

/* ==========================================================================
   My pairs: app head + pills (ui_apphead / ui_pills), one panel of rows (§9.2 / §9.3), empty = ui_empty
   ========================================================================== */
/* polish-s 02.10.: phones read h1 → line → "New listing" → pills (the button no longer splits the h1 from its line). */
@media (max-width:700px){
  .pn-myads .pn-apphead__row{display:contents}
  .pn-myads .pn-apphead > .pc-sub{order:1}
  .pn-myads .pn-apphead__row > .pc-row{order:2;margin-top:var(--space-3)}
  .pn-myads .pn-apphead > .pc-apphead__tabs{order:3}
  /* UX 01.11. SEL-29: the state pills stay one row that scrolls, with the settings tabs' edge fade (no two-row blob) */
  .pn-myads .pn-adfilter{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-right:var(--space-8);-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - var(--space-10)),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - var(--space-10)),transparent)}
  .pn-myads .pn-adfilter > *{flex:none}
}
.pn-myads .pn-adfilter .pn-chipn{color:var(--ink-2);font-weight:var(--w-regular);opacity:1}   /* MSL-049 */
.pn-adrows{margin:0;padding:0;list-style:none}
/* AD4 03.10.: desktop = two columns of rows, so a seller with 20 listings sees twice as many without scrolling. */
@media (min-width:1101px){
  .pn-adrows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8)}
  .pn-adrows > .pn-adrow:nth-child(2)::before{display:none}
}
.pn-adrow{gap:var(--space-4);min-height:96px}
.pn-adrow:has(a[href].pn-adrow__link:hover){background:var(--surface-2)}
.pn-adrow:has(a[href].pn-adrow__link:hover)::before,.pn-adrow:has(a[href].pn-adrow__link:hover) + .pn-adrow::before{opacity:0}
.pn-adrow__link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-4);align-self:stretch;margin:calc(var(--space-3) * -1) 0;padding:var(--space-3) 0;color:inherit;text-decoration:none;border-radius:var(--r-m)}
a.pn-adrow__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
a.pn-card-link.pn-adrow__link{display:flex}
/* Thumb: the card photo in small (4:5, 60 x 75), radius --r-m, no edge; no photo = the care label. */
.pn-adthumb{flex:none;width:60px;height:75px;border-radius:var(--r-m);border:0}
/* UX 433 S-050: a listing without a cover shows the empty cover slot (tonal, camera + "Cover"), never a logo tile that reads as a photo */
.pn-adthumb--add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--surface-2);color:var(--ink-2);font:var(--type-cap)}
.pn-adthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-adrow .pn-row__main{gap:var(--space-2)}
/* The title wraps in full (never clipped); the meta row wraps: price, state label, category, "existing ad". */
.pn-adrow .pn-row__main > b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font:var(--type-strong)}
.pn-admeta{display:flex !important;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);min-width:0;white-space:normal}
/* owner 02.10.: a draft without a title reads "Untitled draft" in the muted ink (My listings + the editor's resume panel) */
.pn-adrow .pn-row__main > b.pc-muted{color:var(--ink-2);font-weight:var(--w-regular)}
.pn-adrow .pn-row__main > .pn-admeta{overflow:visible;text-overflow:clip;white-space:normal}
.pn-admeta > *{flex:none}
.pn-admeta > .pc-badge{flex:0 1 auto;min-width:0;white-space:normal;text-align:left}   /* inside tier 06.10.: a long state (fr Sans photo de couverture) wraps inside the row instead of leaving the card */
.pn-adnoprice{font:var(--type-label);color:var(--ink-2)}
.pn-adcat{font:var(--type-meta);color:var(--ink-2)}
.pn-adcat{flex:0 1 auto}
/* State dot (MSL-036, no pink): live success, waiting ink 2, rejected danger, no photo glyph, sold ink. */
.pn-adstate i,.pn-itemstate i{flex:none;width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--success)}
.pn-adrow.is-paused .pn-adstate i,.pn-itemstate.is-paused i{background:var(--ink-2)}
.pn-adrow.is-draft .pn-adstate i,.pn-itemstate.is-new i,.pn-itemstate.is-draft i,.pn-adrow.is-reserved .pn-adstate i,.pn-itemstate.is-reserved i{background:var(--ink-2)}
.pn-adrow.is-sold .pn-adstate i,.pn-itemstate.is-sold i{background:var(--ink)}
.pn-adrow.is-paused .pn-adthumb img,.pn-adrow.is-sold .pn-adthumb img{filter:grayscale(.6);opacity:.55}
.pn-adrow.is-reserved .pn-adthumb img{filter:grayscale(.4)}
.pn-adrow.is-paused .pn-row__main > b,.pn-adrow.is-sold .pn-row__main > b{color:var(--ink-2)}
.pn-adrow__switch{flex:none;margin:0;display:flex}
.pn-adrow__switch .pc-switch::before,.pn-checkpanel .pc-switch::before{content:"";position:absolute;inset:calc(var(--space-2) * -1) calc(var(--space-1) * -1)}
.pn-adrow__go{flex:none}
.pn-adrow__lock{color:var(--ink-2)}

/* ==========================================================================
   Ad editor: app head (back chip, h1, sub), panels for photos / what / details, the aside (checklist or
   visibility, the preview = the listing card), ui_actionbar() at the end (§4.5)
   ========================================================================== */
.pn-itemstate{display:inline-flex;align-items:center;gap:var(--space-2)}
/* Body: the .pn-split primitive (app.css): the panels | the aside (checklist, preview), sticky on tall screens. */
.pn-itemnote{align-items:center}
.pn-itemnote a{color:var(--ink);font-weight:var(--w-bold);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
/* pcf QA 05.11.: "N listings are ready to publish" + its key — the key is a key (no link underline), on one line, below the text on a phone */
.pn-pcfbanner{flex-wrap:wrap}
.pn-pcfbanner > span{flex:1 1 180px;min-width:0}
.pn-pcfbanner a.pc-btn{text-decoration:none;white-space:nowrap}

/* ---------- Media: the cover 2 x 2 + 7 photo slots + 1 video slot, all 4:5 upload tiles ---------- */
.pn-photos{position:relative}
.pn-photos.is-error .pn-count{background:var(--danger);color:var(--on-danger)}
.pn-mediagrid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media (min-width:701px){.pn-mediagrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pn-photo,.pn-slot,.pn-vslot{position:relative;aspect-ratio:4/5;min-width:0;border-radius:var(--r-m);overflow:hidden}
.pn-mediagrid > :first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.pn-photo{background:var(--ph-media);border:0;cursor:grab;touch-action:manipulation;-webkit-touch-callout:none;transition:opacity var(--dur-1) ease-out,transform var(--dur-2) ease-out,box-shadow var(--dur-1) ease-out}
.pn-photo img,.pn-vslot img,.pn-vslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;transition:opacity var(--dur-1) ease-out}
.pn-photo form,.pn-vslot form{margin:0}
.pn-photo.is-lifted{z-index:6;cursor:grabbing;pointer-events:none;transition:box-shadow var(--dur-1) ease-out;transform:scale(1.04);box-shadow:var(--shadow-e1)}
.pn-mediagrid.is-sorting .pn-photo:not(.is-lifted){cursor:grabbing}
.pn-mediagrid.is-sorting .pn-photobtn,.pn-mediagrid.is-sorting .pc-remove{opacity:0}
html.pn-nosel,html.pn-nosel *{user-select:none;-webkit-user-select:none}
/* Cover (MSL-062): a straight glass chip. Scoped: profile.css has a global .pn-coverbadge. */
.pn-photo .pn-coverbadge,.pn-lislot .pn-coverbadge{position:absolute;left:var(--space-2);bottom:var(--space-2);z-index:3;display:none;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--ink);font:var(--type-cap);transform:none;box-shadow:none}
.pn-photo:first-child .pn-coverbadge{display:inline-block}
/* Photo keys (MSL-060/061): one glass disc, 36 visible, 44 to tap. */
.pn-photobtn{position:absolute;left:var(--space-2);bottom:var(--space-2);z-index:4;display:grid;place-items:center;width:calc(var(--tap) - var(--space-2));height:calc(var(--tap) - var(--space-2));aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--glass);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color var(--dur-1) ease-out,opacity var(--dur-1) ease-out}
.pn-photobtn .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.2}
.pn-photobtn:hover{background:var(--glass-strong)}
.pn-photobtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-photo:first-child .pn-photobtn,.pn-photo:first-child .pn-photo__cover{display:none}
.pn-photo .pc-remove,.pn-vslot .pc-remove,.pn-lislot .pc-remove{top:var(--space-2);right:var(--space-2);width:calc(var(--tap) - var(--space-2));height:calc(var(--tap) - var(--space-2));min-width:0;background:var(--glass);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity var(--dur-1) ease-out,background-color var(--dur-1) ease-out}
.pn-photo .pc-remove:hover,.pn-vslot .pc-remove:hover,.pn-lislot .pc-remove:hover{background:var(--glass-strong);color:var(--danger)}
.pn-photo .pc-remove::before,.pn-vslot .pc-remove::before,.pn-lislot .pc-remove::before{inset:calc(var(--space-1) * -1)}
.pn-photo .pc-remove::after,.pn-vslot .pc-remove::after,.pn-photobtn::after{content:"";position:absolute;inset:calc(var(--space-1) * -1)}
.pn-photobar{position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);z-index:4;display:none;height:var(--space-1);border-radius:var(--r-full);background:var(--glass);overflow:hidden}
.pn-photobar i{display:block;height:100%;border-radius:inherit;background:var(--ink);transform:scaleX(.04);transform-origin:left;transition:transform var(--dur-1) linear}
.pn-photo.is-uploading img{opacity:.55}
.pn-photo.is-uploading .pn-photobar,.pn-vslot.is-uploading .pn-photobar{display:block}
.pn-photo.is-uploading .pn-photobtn,.pn-photo.is-uploading .pn-coverbadge,.pn-photo.is-failed .pn-photobtn,.pn-photo.is-failed .pn-coverbadge{display:none}
.pn-photo.is-failed img{opacity:.35;filter:grayscale(1)}
/* Retry: the small secondary key (mirrors .pc-btn--secondary.pc-btn--sm). */
.pn-photoretry{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-sm);padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label);letter-spacing:0;cursor:pointer;white-space:nowrap}
.pn-photoretry:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-photoretry[hidden]{display:none}   /* QA D1: the pill only shows on a failed upload (it sat on every new photo and blocked dragging) */
/* Empty slots (mirrors .pc-slot): surface 2 (+1), no edge; the label breaks between words only. */
.pn-slot,.pn-vslot:not(.has-video):not(.is-uploading){border:0;background:var(--surface-2);transition:background-color var(--dur-1) ease-out}
.pn-slot__in{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--space-2);padding:var(--space-2);cursor:pointer;color:var(--ink-2);text-align:center;border-radius:inherit}
.pn-slot__in:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-slot__t{font:var(--type-label);color:var(--ink-2);overflow-wrap:normal;word-break:normal;hyphens:manual}
.pn-slot__sub{font:var(--type-cap);font-weight:var(--w-regular);color:var(--ink-2)}
.pn-slot:hover,.pn-vslot:not(.has-video):not(.is-uploading):hover{background:var(--surface-3)}
.pn-slot:hover .pn-slot__in{color:var(--ink)}
/* The next slot invites like the slot hover (ink text) on the same surface: no pink fill. The cover slot (first) adds the
   kit small pink button (.pc-btn--primary.pc-btn--sm). */
.pn-slot.is-next .pn-slot__in{color:var(--ink);gap:var(--space-3)}
.pn-slot.is-next .pn-slot__t{font:var(--type-label);letter-spacing:0;color:var(--ink)}
/* A long "Add photos" (fr/pt) takes a second line in the tile instead of clipping, at every width. */
.pn-slot__btn{white-space:nowrap;text-align:center;pointer-events:none}
/* The slots measure themselves: a narrow cover tile says "Add" (one line, never a 2-line pill), a narrow video slot
   drops the format hint (the file picker still filters by type). */
.pn-slot,.pn-vslot{container-type:inline-size}
.pn-slot__btns{display:none}
@container (max-width:210px){.pn-slot__btnl{display:none}.pn-slot__btns{display:inline}}
@container (max-width:90px){.pn-vslot .pn-slot__sub{display:none}}
/* The button's own bottom padding sits under its text: a step more on top keeps the text group optically centred. */
.pn-mediagrid > .pn-slot.is-next:first-child .pn-slot__in{padding-top:var(--space-5)}
.pn-mediagrid > .pn-slot.is-next:not(:first-child) .pn-slot__btn{display:none}
.pn-mediagrid > .pn-slot.is-next:not(:first-child) .pn-slot__t{font:var(--type-label);letter-spacing:0;text-transform:none}
/* Video slot: poster, the glass play disc, the duration label; while uploading the local clip shows under the bar. */
.pn-vslot{background:var(--ph-media)}
.pn-vslot.has-video,.pn-vslot.is-uploading{border:0}
.pn-vslot__play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%)}
.pn-vslot .pn-play{width:var(--space-10);height:var(--space-10);background:var(--glass);color:var(--ink);border:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none}
.pn-vslot .pn-dur{position:absolute;right:var(--space-2);bottom:var(--space-2);z-index:3;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--ink);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-vslot.is-uploading video{opacity:.6}
.pn-vslot__proc{position:absolute;left:var(--space-2);right:var(--space-2);bottom:var(--space-6);z-index:4;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--ink);font:var(--type-cap);text-align:center}
.pn-vslot__proc:empty{display:none}
.pn-dropcue{position:absolute;inset:0;z-index:5;display:none;place-items:center;border:0;border-radius:inherit;background:var(--scrim);font:var(--type-title);color:var(--ink);pointer-events:none}
.pn-photos.is-drop .pn-dropcue{display:grid}
.pn-photos > .pn-fielderr{margin:var(--space-3) 0 0;color:var(--danger);text-align:start}
.pn-upforms{display:contents}

/* ---------- Form panels: kit fields (.pc-field / .pc-label / .pc-input / .pc-select), chips = .pc-chip ---------- */
.pn-itemform{gap:var(--stack-gap)}
.pn-itemsec{display:grid;gap:var(--field-gap);min-width:0}
.pn-itemsec > .pc-sechead{margin-bottom:calc(var(--head-gap) - var(--field-gap))}
@media (min-width:561px){.pn-attr[data-attr="form"]{max-width:calc(50% - var(--space-2))}}
.pn-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.pn-counter{font:var(--w-regular) var(--fs-cap)/var(--lh-cap) var(--body);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-words{transition:color var(--dur-1) ease-out}
.pn-words.is-ok{color:var(--success)}
.pn-itemform .pn-fielderr{margin:0;text-align:start;justify-self:stretch}
.pn-attrs[hidden],.pn-attr[hidden]{display:none}
fieldset.pn-attr{min-width:0;margin:0;padding:0;border:0;display:grid;gap:var(--space-2)}
fieldset.pn-attr legend{float:left;width:100%;padding:0;margin:0 0 var(--space-2)}
.pn-unit{letter-spacing:0;color:var(--ink-2)}
/* Price: one flat field (surface 2, 44), the ring on the box only. */
.pn-pricebox{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);min-width:0;padding:0 var(--space-1);border:0;border-radius:var(--r-m);background:var(--surface-2);transition:box-shadow var(--dur-1) ease-out}
.pn-pricebox:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:none}
.pc-field.is-error .pn-pricebox{box-shadow:inset 0 0 0 2px var(--danger)}
/* polish r2: one ring only, on the rounded group; the inner number never draws the kit's square error ring. */
.pc-field.is-error .pn-pricebox .pc-input,.pc-field.is-error .pn-pricebox .pc-input:focus{border-color:transparent;box-shadow:none}
.pc-field.is-error .pn-pricebox:focus-within{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-pricebox .pc-input{flex:1;min-width:0;min-height:var(--control-md);padding:0 var(--space-3) 0 var(--space-1);border:0;border-radius:0;box-shadow:none;background:transparent;font:var(--type-ui);font-variant-numeric:tabular-nums}
/* polish-s 02.10.: the hint reads as a hint (field type, ink 3), never as a price already set */
.pn-pricebox .pc-input::placeholder{font:var(--type-ui);color:var(--ink-3)}
.pn-pricebox .pc-input{box-shadow:none;border:0;outline:0}   /* the ring is the box's (:focus-within above), §8 parent ring */
.pn-curseg{flex:none;flex-wrap:nowrap;gap:var(--space-1)}
.pn-curseg > label{min-width:calc(var(--tap) - var(--space-2))}

/* ---------- Aside: checklist / visibility / lock (rows in a panel), the preview card ---------- */
.pn-checklist{margin:0;padding:0;list-style:none}
.pn-checkpanel > .pc-sechead{margin-bottom:var(--space-2)}
.pn-checkpanel .pn-row{padding-inline:0}
.pn-checkpanel .pn-row + .pn-row::before{left:0;right:0}
.pn-checkrow{min-height:48px}
.pn-checkrow .pn-row__main > b{font-weight:var(--w-regular);white-space:normal}
.pn-checkdot{flex:none;display:grid;place-items:center;width:var(--icon-l);height:var(--icon-l);border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 2px var(--glyph-off);color:transparent;transition:background-color var(--dur-1) ease-out,color var(--dur-1) ease-out}
.pn-checkdot .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-checkrow.is-done .pn-checkdot{background:var(--surface-3);box-shadow:none;color:var(--success)}
.pn-checkrow.is-done .pn-row__main > b{color:var(--ink-2)}
.pn-checkpanel .pn-togglerow,.pn-checkpanel .pn-lockrow{min-height:64px;margin:0}
.pn-checkpanel .pn-row__main > span{white-space:normal}
/* Preview = the listing card itself (no sticker, mockup 1:1). */
.pn-prevwrap{display:grid;gap:var(--head-gap)}
.pn-prevhead{display:grid;gap:var(--space-1)}
.pn-prevhead h2,.pn-prevhead p{margin:0}
.pn-previewcard{pointer-events:none}
.pn-previewcard .pc-media > img[hidden],.pn-previewcard .pc-media > picture > img[hidden],.pn-prevcount[hidden]{display:none}
.pn-previewcard .pc-card__ticket:has(> .pc-price:empty){display:none}   /* no price typed yet: no empty ticket */
.pn-prevfacts{display:none}
.pn-prevtoggle{display:none;border:0}

/* ---------- End of the form: delete (quiet text key), the action bar (ui_actionbar, sticky on phones) ---------- */
.pn-itemdel{display:flex;justify-content:flex-start;margin:0}
.pn-actbar{display:contents}
.pn-itemedit > .pn-actbar > .pc-actionbar,.pn-itemedit .pc-actionbar{margin-top:0}
html:has(.pn-itemedit){scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.pn-itemsheet form{display:grid;margin:0}
.pn-itemsheet .pn-sheet__title{margin-bottom:var(--space-2)}
.pn-itemsheet .pn-sheet__body{margin:0}
.pn-liedit .pn-photos .pc-sechead p{max-width:65ch}   /* MSL-064 */

/* ---------- Tablet + phone: the aside folds under the form, the preview behind a toggle row ---------- */
@media (max-width:1023px){
  .pn-prevhead{display:none}
  .pn-prevtoggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:72px;padding:var(--space-4) var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
  .pn-prevtoggle > span{display:grid;gap:var(--space-1)}
  .pn-prevtoggle b{font:var(--type-title)}
  .pn-prevtoggle .pc-help{margin:0}
  .pn-prevtoggle .pc-ico{flex:none;transition:transform var(--dur-2) ease-out}
  .pn-prevtoggle[aria-expanded="true"] .pc-ico{transform:scaleY(-1)}
  .pn-prevtoggle:hover{background:var(--surface-2)}
  .pn-prevtoggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  .pn-prevwrap:not(.is-open) .pn-previewcard{display:none}
  .pn-previewcard{width:min(260px,66%);justify-self:center}
}
@media (max-width:700px){
  .pn-adrow{gap:var(--space-3)}
  .pn-adrow__link{gap:var(--space-3)}
  .pn-adrow__go{display:none}
  /* items.php's 4-column grid at 360: 61 px tiles take the cap step; the legacy 3 x 3 grid keeps 13 (MSL-057) */
  .pn-mediagrid:not(.pn-ligrid) .pn-slot__t{font:var(--type-cap)}
  .pn-slot:not(.is-next) .pn-slot__in > .pc-ico,.pn-vslot .pn-slot__in > .pc-ico{width:var(--icon-m);height:var(--icon-m)}
  .pn-vslot .pn-slot__sub{display:none}
  .pn-slot__btn{padding-inline:var(--space-3);font:var(--type-label)}
  /* Editors are a focused task (like the chat): the tabbar steps aside, the action bar is the one bottom bar (IT-04). */
  body:has(.pn-itemedit) .pn-tabbar{display:none}
  body:has(.pn-itemedit){--dock:env(safe-area-inset-bottom)}
  .pn-itemedit .pc-actionbar{gap:var(--space-2) var(--space-3);padding-top:var(--space-3);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));box-shadow:none}
  .pn-itemedit .pc-actionbar__note{flex-basis:100%;font:var(--type-meta)}
  .pn-itemedit .pc-actionbar__note:empty{display:none}
  .pn-itoast{bottom:calc(var(--dock) + var(--toast-gap))}
  .pn-itemedit .pn-itoast{bottom:calc(116px + var(--toast-gap) + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  /* My pairs rows: price + state on the first meta line, category + "existing ad" on the second, the thumb at the top of
     the row so a two-line title does not leave it floating. */
  .pn-adrow__link{align-items:flex-start}
  .pn-admeta{gap:var(--space-1) var(--space-2)}
  .pn-adlegacy.pc-badge{padding-inline:var(--space-2);letter-spacing:0}
}
@media (max-width:400px){
  /* 4 columns of 61-69 px tiles: 4 px side padding leaves 50+ px for the one-line label. */
  .pn-mediagrid > .pn-slot:not(:first-child) .pn-slot__in,.pn-vslot .pn-slot__in{padding-inline:var(--space-1)}
}

/* ==========================================================================
   Seller home: app head, the money box (.pc-box--dk + .pc-tiles of .pc-tile), nudges, buyer panels (§4.3)
   ========================================================================== */
.pn-shmoney{display:grid;gap:var(--space-4)}
.pn-shmoney > .pc-box__h{margin:0}
/* @member-only */
.pn-shmoney > .pn-shmoney__h2{margin-top:var(--space-2);font:var(--type-title)}   /* U22 (owner 18.10.): "Your listings live", the second head */
/* @end-member-only */
/* A grid, not the kit flex wrap: one row of equal tiles on wide screens, 2 x 2 from 1180 px down to 360 px
   (an odd last tile spans the row, so no orphan). */
.pn-shmoney__tiles{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-4)}
.pn-shmoney__tiles > li{display:flex;min-width:0}
@media (max-width:1180px){
  .pn-shmoney__tiles{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-shmoney__tiles > li:last-child:nth-child(odd){grid-column:1 / -1}
}
.pn-shmoney__tile{display:flex;flex:1;min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-shmoney__tile > .pc-tile{flex:1;min-width:0;transition:background-color var(--dur-1) ease-out}
.pn-shmoney__tile:hover > .pc-tile{background:var(--surface-3)}
.pn-shmoney__tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-shmoney__tile .pc-tile b{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pn-shmoney__tile.is-locked .pc-tile small{display:block;margin-top:var(--space-1);color:var(--ink-2)}
.pn-shmoney__note{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-shmoney__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-1)}
.pn-shmoney__act p{margin:0;max-width:420px;font:var(--type-meta);color:var(--ink-2)}
.pn-shnotice{align-items:center}
.pn-sellhome .pn-nudgestack{margin:0}
.pn-sellhome .pn-nudgestack:empty{display:none}
/* Buyer rows (partials/card_buyer.php): the "Make offer" action drops under the name when the row runs out of room, so
   the name and the status line are never cut. */
.pn-sellhome .pn-buyerrow{flex-wrap:wrap;row-gap:var(--space-2)}
.pn-sellhome a.pn-card-link.pn-row__lead{flex:1 1 200px}
.pn-sellhome .pn-buyerrow .pn-row__main > span{white-space:normal}
/* sellerchrome 02.10.: a capped buyer list ends in its "See all (n)" door, on the rows' inner edge. */
.pn-buyerdoor{margin-top:var(--space-3);padding:var(--row-inset)}
@media (max-width:700px){
  /* mockup phone .tile: min-width 0, flex 1 1 140 */
  .pn-shmoney__tiles{gap:var(--space-3)}
  .pn-shmoney__act .pc-btn{flex:1 1 100%}
  .pn-shmoney__act .pc-btn .pc-ico{display:none}   /* a wrapped label centres on its own; the star stays on wider screens */
  .pn-sellhome .pn-buyerrow__acts{padding-left:64px}   /* under the name: the 52 avatar + the 12 gap */
}
@media (max-width:380px){
  /* AD4 03.10.: two row actions (Premium: write + offer) were 307 px wide at 320 and pushed the page sideways in es /
     it / fr / pt. Under 380 the actions take the row under the buyer at full width and share it. */
  .pn-sellhome .pn-buyerrow__acts{flex:1 1 100%;min-width:0;padding-left:0}
  .pn-sellhome .pn-buyerrow__acts > .pc-btn{flex:1 1 0;min-width:0}
  .pn-shmoney__tiles{gap:var(--space-2)}
  .pn-shmoney__tile > .pc-tile{padding:var(--space-3)}
  .pn-shmoney__tile .pc-tile b{font:var(--type-num)}
}

/* ==========================================================================
   Members only (guests): the level-1 empty card centred in the frame, the quiet ways on under it (§4.7)
   ========================================================================== */
.pn-mo{display:grid;gap:var(--space-6);max-width:640px;margin:0 auto}
.pn-mo__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6);margin:0}
/* The dead end's head is the page h1 (--type-h1), not the title of an in-page empty card. */
.pn-mo .pc-empty h1{font:var(--type-h1)}

@media (prefers-reduced-motion:reduce){
  .pn-itoast,.pn-photo,.pn-photo img,.pn-photobar i,.pn-photobtn,.pn-slot,.pn-checkdot,.pn-prevtoggle .pc-ico,.pn-pricebox,.pn-shmoney__tile > .pc-tile{transition:none}
  .pn-photo.is-lifted{transform:none}
  .pc-btn.is-busy::before{animation-duration:2s}
}
.pn-photo:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}   /* QA D5: photos are keyboard stops (arrows reorder) */

/* ==========================================================================
   Legacy listings (docs/ml-items-03-10.md): My listings + the editor on legacy's rows for a launched seller.
   State dots = legacy's moderation (pnew_li_state): live (success), in review (ink 2), not approved (danger), no photo (glyph).
   ========================================================================== */
.pn-listate.is-review i,.pn-adrow.is-review .pn-adstate i,.pn-itemstate.is-review i{background:var(--warning)}   /* UX 433 G-106: waiting is amber, never the refusal's red */
.pn-listate.is-rejected i,.pn-adrow.is-rejected .pn-adstate i,.pn-itemstate.is-rejected i{background:var(--danger)}
.pn-listate.is-off i{background:var(--glyph-off)}   /* UX 433 S-030: a quiet state that needs nothing from her */
.pn-listate.is-nophoto i,.pn-adrow.is-nophoto .pn-adstate i,.pn-itemstate.is-nophoto i,.pn-listate.is-nudity i,.pn-adrow.is-nudity .pn-adstate i{background:var(--accent)}   /* UX 433 S-030: needs you = pink, as on the corner */
.pn-listate.is-ready i,.pn-adrow.is-ready .pn-adstate i{background:var(--accent)}   /* premium conversion experiment (night 05.11. #39): a draft waiting for Premium */
.pn-adrow.is-ready .pn-adthumb img{opacity:.72}   /* #104: a draft's thumb reads a little lighter than a live one (inside only, no border) */
.pn-adrow.is-rejected .pn-adthumb img{filter:grayscale(.6);opacity:.55}
.pn-liviews{white-space:nowrap}
.pn-lipager{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}
.pn-linote{margin:var(--space-3) 0 0;color:var(--ink-2)}
.pn-lilimit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
/* @member-only */
/* U10 (owner 18.10.): the Premium door under the daily limit line — on its own row, the text then the pink key */
.pn-lilimit__prem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);flex-basis:100%;margin:0;font:var(--type-strong);color:var(--ink)}
p.pn-lilimit__prem{justify-content:center;margin-top:var(--space-3)}
/* @end-member-only */
/* owner 06.10. ("wirkt schief"): a 3 × 3 grid. The cover takes two columns and two rows and STRETCHES to them; the five
   more photos fill the other five cells, so there is no empty cell either. Same grid on phones. */
.pn-ligrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-ligrid > :first-child{grid-column:1 / span 2;grid-row:1 / span 2;aspect-ratio:auto;height:100%}
@media (min-width:701px){
  .pn-ligrid{max-width:none;grid-template-columns:repeat(6,minmax(0,1fr))}
  .pn-ligrid > :first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/5;height:auto}
}
/* Empty slot = the field surface one step up from the panel (+1), no dashed edge; a photo = the media placeholder. */
.pn-lislot{position:relative;aspect-ratio:4/5;min-width:0;border-radius:var(--r-m);overflow:hidden;border:0;background:var(--surface-2);container-type:inline-size}
.pn-lislot.has-photo,.pn-lislot.is-picked{border:0;background:var(--ph-media)}
.pn-lislot__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-lislot.has-photo .pn-lislot__pick,.pn-lislot.is-picked .pn-lislot__pick{display:none}
.pn-lislot.has-photo .pn-coverbadge,.pn-lislot.is-picked .pn-coverbadge{display:inline-block}
.pn-lislot__swap{display:none}
.pn-lislot.has-photo .pn-lislot__swap,.pn-lislot.is-picked .pn-lislot__swap{display:grid}
.pn-lislot .pc-remove{position:absolute;z-index:4}
.pn-lislot.is-picked .pn-lislot__del{display:none}
.pn-lislot__pick .pn-slot__btn{white-space:nowrap}
.pn-lislot:not(:first-child) .pn-lislot__pick .pn-slot__btn{display:none}
.pn-lislot:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Offer details (MSL-084): two columns, a lone last select takes the whole row (no half-empty row) */
.pn-liattrs{display:grid;gap:var(--field-gap) var(--space-4)}
@media (min-width:701px){
  .pn-liattrs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-liattrs > .pn-attr:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1 / -1}
}
.pn-liattrs > [hidden]{display:none}
.pn-linoindex{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);cursor:pointer;font:var(--type-body);color:var(--ink)}
.pn-linoindex--hint{align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink-2);cursor:auto}
.pn-linoindex--hint > .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m);color:var(--ink-2)}
.pn-linoindex--hint a{color:var(--ink);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
.pn-lifixed{margin:0;font:var(--type-strong);color:var(--ink)}   /* innen 500 SEL-14: plain text (it cannot be changed), not a field look-alike */
.pn-licatfixed{margin:var(--space-1) 0 0}
/* A13 (owner 18.10.): Delete is a quiet text key under the form, on the panels' inner edge (MSL-086); the pink Save tops
   the side column on wide screens */
.pn-lidel{margin:0;padding:0 var(--panel-pad)}
.pn-lidel__btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0;border:0;background:none;font:var(--type-strong);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.pn-lidel__btn:hover{color:var(--danger);text-decoration-color:currentColor}
.pn-lidel__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-m)}
.pn-lisave{display:none}
/* innen 500 SEL-24: phones — an existing listing's status, views and "Move to top" come first, not under "Delete listing" */
@media (max-width:999px){.pn-liedit .pn-split > .pn-split__side--state{order:-1}}
/* innen 500 SEL-26: a link to #pnLiPrice / #pnPhotos / #pnBody lands below the sticky header, not under it */
.pn-liedit [id]{scroll-margin-top:calc(var(--sticky-top, 76px) + var(--space-3))}
@media (min-width:1000px){
  .pn-lisave{display:block}
  .pn-liedit .pn-actbar > .pc-actionbar{display:none}
  /* MSL-054: the side column (the one pink key on top) stays in view all the way down the form */
  .pn-liedit .pn-split{align-items:start}
  .pn-liedit .pn-split__side{position:sticky;top:var(--sticky-top)}
}
.pn-linoprice{margin:var(--help-gap) 0 0}
.pn-liedit .pn-formrow{align-items:start}
.pn-liedit .pn-formrow > .pc-field{align-content:start}   /* the price help line must not stretch the category field */
.pn-linoprice[hidden]{display:none}
.pn-listate-help{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;color:var(--ink-2)}
.pn-listatus > p + p{margin-top:var(--space-3)}
/* MSL-087: the status rail — state, the numbers, then its keys side by side */
.pn-listatus__acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-liedit .pn-itemnote[hidden]{display:none}
.pn-lislot__swap{left:auto;right:var(--space-2)}
.pn-liattrs .pc-select{display:block;width:100%}
.pn-liattrs .pc-select > .pc-input{width:100%}
.pn-lislot [hidden]{display:none}
.pn-lihow{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2)}
.pn-lihow li{display:flex;gap:var(--space-2);align-items:flex-start;font:var(--type-meta);color:var(--ink-2)}
.pn-lihow .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);translate:0 1px;color:var(--ink-2)}
.pn-lislot__rot{left:var(--space-2);top:var(--space-2);bottom:auto}
.pn-lislot.is-picked .pn-lislot__rot{display:none}
.pn-lislot.is-busy::after{content:"";position:absolute;left:50%;top:50%;z-index:5;width:28px;height:28px;margin:calc(var(--space-4) * -1) 0 0 calc(var(--space-4) * -1);border-radius:var(--r-full);border:3px solid var(--ink);border-right-color:transparent;animation:pc-spin .7s linear infinite}
.pn-lislot.is-busy .pn-lislot__pick{opacity:.3}
/* adml 03.10.: the Form select fills its cell in the two-column grid; the price select fills the price box (chevron at
   its edge). Move to top keeps its words on phones (A11 below). */
.pn-liattrs .pn-attr[data-attr="form"]{max-width:none}
.pn-liedit .pn-pricebox > .pc-select{flex:1;min-width:0}
.pn-liedit .pn-pricebox > .pc-select > .pc-input{width:100%;padding:0 var(--space-10) 0 var(--space-2);border-radius:0}
@media (prefers-reduced-motion:reduce){.pn-lislot.is-busy::after{animation-duration:2s}}
/* owner 03.10. ("unruhig und zerfleddert"): the price box is exactly as tall as the category select (44, MSL-070), its
   select speaks in the field font, and every field error starts flush with its label. */
.pn-liedit .pn-pricebox{height:var(--control-md);min-height:0}
.pn-liedit .pn-pricebox > .pc-select > .pc-input{min-height:0;height:var(--control-md);font:var(--type-ui)}
.pn-liedit .pn-itemform .pn-fielderr{padding:0;font-weight:var(--w-strong)}
/* Sleek 08.10.: badges are sentence case; this one's copy starts lowercase ("earlier listing"), so its first letter is set up */
.pc-badge.pn-adlegacy{display:inline-block}
.pc-badge.pn-adlegacy::first-letter{text-transform:uppercase}
/* night N6 08.10.: title ideas + starter text (#46), the price hint (#52), photo tips (#47). Kit chips (pc-chip--sm), 36
   tall (44 on phones, --control-sm), token-only. MSL-072: the "Title ideas" label is a field label (13/18 600 ink). */
.pn-lisug{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.pn-lisug[hidden],.pn-liprice[hidden],.pn-lisug__hint[hidden]{display:none}
.pn-lisug__l{flex-basis:100%;font:var(--type-label);color:var(--ink)}
.pn-lisug .pc-chips{gap:var(--space-2)}
.pn-lisug .pc-chip{min-height:var(--control-sm);white-space:normal;text-align:left}
.pn-lisug .pc-chip .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
.pn-lisug__hint{margin:var(--space-2) 0 0}
.pn-liprice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:0;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m)}
div.pn-liprice{background:var(--surface-2)}
.pn-liprice__t{display:flex;flex:1 1 220px;gap:var(--space-2);align-items:flex-start;margin:0;font:var(--type-meta);color:var(--ink)}
.pn-liprice__t .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);translate:0 1px;color:var(--ink-2)}
.pn-liprice .pc-chip{min-height:var(--control-sm);background:var(--surface-3)}
.pn-liprice__src{flex-basis:100%;font:var(--w-regular) var(--fs-cap)/var(--lh-cap) var(--body);color:var(--ink-2)}
.pn-litips{margin-top:var(--space-4);padding-top:0;border-top:0}
.pn-litips__h{margin:0 0 var(--space-2);font:var(--type-label);color:var(--ink)}
.pn-litips__list li.pn-litips__rule{color:var(--ink-2)}
/* UX 433 S-055 / S-056 / S-053: the tips fold, the rule line stays; required marks in the label; the copy block one line */
.pn-litips > summary.pn-litips__h{margin:0;cursor:pointer;list-style-position:inside}
.pn-litips[open] > summary.pn-litips__h{margin-bottom:var(--space-2)}
p.pn-litips__rule{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-3) 0 0;color:var(--ink-2)}
/* UX 433 S-057 (switch ux433_seller): the save key stays the quiet ink key while something is missing (the member layers paint
   every primary pink later, so this needs the editor's own scope) */
:root .pc-root .pn-liedit .pc-btn.pc-btn--primary.is-wait.is-wait,:root .pc-root .pn-actbar .pc-btn.pc-btn--primary.is-wait.is-wait{background:var(--btn-ink);color:var(--on-btn-ink);border-color:transparent}
.pn-req{margin-left:var(--space-1);font:var(--type-cap);font-weight:400;color:var(--ink-2)}
.pn-licopyfold__s{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font:var(--type-label);color:var(--ink-2);list-style:none}
.pn-licopyfold__s::-webkit-details-marker{display:none}
.pn-licopyfold[open] > .pn-licopyfold__s{margin-bottom:var(--space-3)}
@media (min-width:900px){
  .pn-liedit .pn-photos.pn-panel > .pn-litips{align-self:start;margin-top:0;padding:var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
}
/* writing help (owner 08.10., package WH, templates/partials/wh_coach.php, assets/js/writehelp.js): the warnings under the
   description and the coach (score ring, meter, one question with chips, Skip, the Top listing checklist). MSL-082: the
   coach is a note (surface 2, --r-m, 12 / 16), its chips one step up; no pink in it (the editor's Save stays the one).
   The question box keeps its height so taps never move the page. */
.pn-whw{display:grid;gap:var(--space-1);margin-top:var(--space-2)}
.pn-whw[hidden]{display:none}
.pn-whw__i{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;padding:0;border:0;background:transparent;border-radius:0;font:var(--type-meta);color:var(--ink)}
.pn-whw__i::before{content:"";flex:none;width:var(--space-2);height:var(--space-2);margin-top:var(--space-1);border-radius:50%;background:var(--warning)}
section.pn-whc{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2)}
.pn-whc__head{display:flex;gap:var(--space-3);align-items:center}
.pn-whc__ring{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--ink-2) calc(var(--wh-p,0) * 1%),var(--surface-3) 0)}
.pn-whc__ring::before{content:"";position:absolute;inset:var(--space-1);border-radius:50%;background:var(--surface-2)}
.pn-whc__ring{grid-auto-flow:row;align-content:center;gap:0}
.pn-whc__ring b{position:relative;font:var(--w-bold) var(--fs-body)/var(--lh-cap) var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-whc__of{position:relative;font:var(--w-regular) var(--fs-cap)/var(--lh-cap) var(--body);color:var(--ink-2);letter-spacing:0}   /* A15 (18.10.): the scale under the score */
.pn-whc__meterbox{flex:1;min-width:0}
.pn-whc__h{margin:0 0 var(--space-1);font:var(--type-strong);color:var(--ink)}
.pn-whc .pn-whc__meter{margin-top:0;max-width:320px}
.pn-whc .pn-whc__meter b{white-space:nowrap;font:var(--type-cap);color:var(--ink-2)}
.pn-whc .pn-whc__meter[data-q] .pn-meter__bars i:nth-child(n){height:var(--space-1);border-radius:var(--r-full);background:var(--surface-3)}
.pn-whc .pn-whc__meter:is([data-q="short"]) .pn-meter__bars i:nth-child(-n+1),.pn-whc .pn-whc__meter:is([data-q="good"]) .pn-meter__bars i:nth-child(-n+2),.pn-whc .pn-whc__meter:is([data-q="great"]) .pn-meter__bars i:nth-child(n){background:var(--ink-2)}
.pn-whc__n{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-whc__line{margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-whc__sug{--t-tint:var(--surface-3);display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:var(--space-2);min-height:104px;margin-top:var(--space-4);padding-top:0;border-top:0}
.pn-whc__sug[hidden]{display:none}
.pn-whc__q{flex-basis:100%;margin:0;font:var(--type-strong);color:var(--ink)}
.pn-whc__chips{display:contents}
.pn-whc__chips .pc-chip{min-height:var(--control-sm);white-space:normal;text-align:left}
.pn-whc__skip{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:transparent;color:var(--ink-2);font:var(--type-label);text-decoration:none;cursor:pointer}
.pn-whc__skip:hover{background:var(--surface-3);color:var(--ink)}
.pn-whc__skip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-whc__done{margin:var(--space-4) 0 0;padding-top:0;border-top:0}
.pn-whc__done[hidden]{display:none}
.pn-whc__sub{margin:var(--space-3) 0 0;font:var(--type-meta)}
.pn-whtop{margin-top:var(--space-4);padding-top:0;border-top:0}
.pn-whtop__h{margin:0 0 var(--space-2);font:var(--type-strong);color:var(--ink)}
.pn-whtop__list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-whtop__row{display:flex;gap:var(--space-2);align-items:flex-start;font:var(--type-meta);color:var(--ink-2)}
.pn-whtop__tick{flex:none;display:grid;place-items:center;width:var(--icon-m);height:var(--icon-m);margin-top:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px var(--glyph-off);color:transparent;transition:background-color var(--dur-1) ease-out,color var(--dur-1) ease-out}
.pn-whtop__tick .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-whtop__row.is-ok{color:var(--ink)}
.pn-whtop__row.is-ok .pn-whtop__tick{background:var(--surface-3);box-shadow:none;color:var(--success)}
.pn-whtop__t small{display:block;margin-top:0;font:var(--w-regular) var(--fs-cap)/var(--lh-cap) var(--body);color:var(--ink-2)}
.pn-whtop__t small[data-wh-topwords]{display:inline;margin:0 0 0 var(--space-1);font-variant-numeric:tabular-nums}
.pn-whtop__row.is-ok .pn-whtop__bad{display:none}
.pn-whtop__now{display:flex;gap:var(--space-2);align-items:center;margin:var(--space-3) 0 0;font:var(--type-label);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(var(--space-1));transition:opacity var(--dur-2) ease-out,transform var(--dur-2) ease-out,visibility 0s linear var(--dur-2)}
.pn-whtop__now.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pn-whtop__now .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--success)}
@media (prefers-reduced-motion:reduce){.pn-whtop__now{transition:none;transform:none}}
.pn-adrow__boost{flex:none}
/* "Do you ship first?" (owner 16.10., lib/sf_ask.php): one card above a new listing's editor */
.pn-sfq{margin-bottom:var(--space-4)}
.pn-sfq__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.pn-sfq__ic{flex:none;width:calc(var(--tap) - var(--space-2));height:calc(var(--tap) - var(--space-2));border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink)}
.pn-sfq__h{margin:0;font:var(--type-title);color:var(--ink)}
.pn-sfq__p{margin:0 0 var(--space-2);color:var(--ink-2)}
.pn-sfq__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.pn-sfq__acts form{margin:0}
.pn-panel.pn-licopy{gap:var(--head-gap)}
.pn-licopy .pn-licopy__h{gap:var(--space-2);font:var(--type-title)}
/* @member-only */
/* night list (owner 18.10., docs/innen-50-*-18-10.md): member pages only — no guest bundle carries this block */
/* A20 (owner 18.10.) + design system §7.4: a chosen chip in a sheet (filters, My content) = the soft accent fill, ink
   text and a drawn tick. Premium keeps the page pill's gold there. */
.pn-sheet :is(.pc-chips > .pc-chip:has(> input:checked),.pc-seg > label:has(> input:checked):not(.pc-chip--premium)){background:var(--accent-soft);color:var(--ink)}
.pn-sheet :is(.pc-chips > .pc-chip:has(> input:checked),.pc-seg > label:has(> input:checked))::before{content:"";flex:none;width:9px;height:5px;margin:0 var(--space-1) var(--space-1) 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.pn-sheet .pc-seg > label.pc-chip--premium:has(> input:checked){color:var(--on-prem,var(--on-accent))}
.pn-sheet__head h2[tabindex="-1"]:focus:not(:focus-visible){outline:none}   /* a title that takes the focus on open is no control: no ring for the pointer */
/* A11 + MSL-044/045/047/051: photo + text, help, then the keys on the text column, at the row's foot. */
.pn-limyads .pn-adrow{flex-direction:column;align-items:stretch;gap:var(--space-3)}
.pn-limyads .pn-adrow > .pn-adrow__link{flex:none;margin:0;padding:0}
.pn-adrow__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-2);flex:none}
.pn-limyads .pn-adrow__acts{order:2;margin-top:auto;padding-left:calc(60px + var(--space-4))}
.pn-limyads .pn-adrow > .pc-help{order:1;margin:0;padding-left:calc(60px + var(--space-4))}
/* UX 433 S-047: the row's delete, quiet text at the row's foot; S-068: the editor's state line on top (phones; wide screens have the side panel) */
.pn-limyads .pn-adrow > .pn-lirowdel{order:3;margin:0;padding-left:calc(60px + var(--space-4))}
.pn-listatusline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);color:var(--ink-2);font:var(--type-meta)}
@media (min-width:900px){.pn-listatusline{display:none}}
.pn-adrow:not(.pn-limyads .pn-adrow):has(> .pc-help){flex-wrap:wrap}
.pn-adrow:not(.pn-limyads .pn-adrow) > .pc-help{flex:1 1 100%;margin:0;padding-left:calc(64px + var(--space-4))}
@media (max-width:700px){
  .pn-limyads .pn-adrow__acts,.pn-limyads .pn-adrow > .pc-help,.pn-limyads .pn-adrow > .pn-lirowdel{padding-left:0}   /* phones: keys + help on the row's edge, the keys in one line */
  .pn-adrow:not(.pn-limyads .pn-adrow) > .pc-help{padding-left:0}
  .pn-adrow__acts .pn-adrow__go.pn-libump{display:inline-flex}   /* innen 500 CON-34: a pc-btn--sm among its siblings, with its words */
}
/* A12 (owner 18.10., innen-50): on phones a page with a save bar (member-only block: no guest bundle carries it) (.pc-actionbar: profile and listing editors) gives up the
   tab bar, so the two sticky bars never stack (~190 of 844 px hid the review note and the price tip); the bar is one row:
   the state line shrinks beside the key, and the listing editor's Cancel goes (the head's back link does the same). */
@media (max-width:700px){
  body:has(.pc-actionbar) .pn-tabbar{display:none}
  body:has(.pc-actionbar){--dock-flush:env(safe-area-inset-bottom)}
  .pc-actionbar{flex-wrap:nowrap;gap:var(--space-3)}
  .pc-actionbar > .pc-actionbar__note{flex:1 1 0;min-width:0;margin:0;font:var(--type-meta)}
  .pc-actionbar > .pc-btn{flex:0 0 auto}
  :is(.pn-itemedit) .pc-actionbar > .pc-btn--line{display:none}
  .pc-actionbar > .pc-actionbar__note:empty{display:none}
  .pc-actionbar > .pc-actionbar__note:empty ~ .pc-btn:not(.pc-btn--line){flex:1 1 auto}
}
/* @end-member-only */
/* @member-only */
/* owner 02.11. (price field "sieht im Arsch aus"; moved here from src-css/dark.css on 03.11., design system P0): one flat
   field — the box is the field (surface 2), the select inside is transparent, the currency pills carry no tray; the focus
   ring is the box's (2 px --focus-ring, docs/design-system.md §8), never a second ring on the input. Written once
   (tools/css_twin.php prints the "auto" twin). */
/* @dark-twin */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox{background:var(--surface-2);border:0;box-shadow:none;padding:0 var(--space-1)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:none}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-field.is-error .pn-pricebox{box-shadow:inset 0 0 0 2px var(--danger)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox .pn-curseg{background:transparent;box-shadow:none;padding:0;gap:var(--space-1)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox .pn-curseg > label{background:transparent;border:0;box-shadow:none;color:var(--ink-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox .pn-curseg > label:has(input:checked){background:var(--surface-3);color:var(--ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-pricebox > .pc-select,.pn-pricebox > .pc-select > .pc-input,.pn-pricebox .pc-input){background:transparent;border:0;box-shadow:none;outline:0}   /* the ring is the box's (above) */
/* @end-dark-twin */
/* the auto twin (generated by tools/css_twin.php) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox{background:var(--surface-2);border:0;box-shadow:none;padding:0 var(--space-1)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:none}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-field.is-error .pn-pricebox{box-shadow:inset 0 0 0 2px var(--danger)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox .pn-curseg{background:transparent;box-shadow:none;padding:0;gap:var(--space-1)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox .pn-curseg > label{background:transparent;border:0;box-shadow:none;color:var(--ink-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pricebox .pn-curseg > label:has(input:checked){background:var(--surface-3);color:var(--ink)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-pricebox > .pc-select,.pn-pricebox > .pc-select > .pc-input,.pn-pricebox .pc-input){background:transparent;border:0;box-shadow:none;outline:0}
}

/* @end-member-only */
/* UX 433 round 2 — S-058 / S-130: one measure per text: the meter bar and its line; the 0–100 score ring goes (listing and About me) */
.pn-whc .pn-whc__ring{display:none}
/* S-025: the first listing inside the set-up is the short form — cover, title, category, price, the words; details, writing
   coach, price hint, tips and title ideas come after the first save (in the normal editor) */
.pn-liedit--onb :is(#pnAttrs,.pn-whc,.pn-liprice,.pn-litips,.pn-lisug,.pn-lisug__hint){display:none !important}

/* PM 500 aussen-seo D (08.11., AS-039/AS-105): creators named under the members-only / gone card (templates/members_only.php) */
.pn-mo__creators{display:grid;gap:var(--space-3);margin-top:var(--space-6);text-align:center}
.pn-mo__creators-h{margin:0;font-size:var(--fs-ui);line-height:1.3}
/* pnew page group v3: chats, the thread, offers, orders, alerts (docs/design-v3-system.md §4.1 / §4.3 / §4.4).
   Built only from the kit (components.css, app.css) and the mockup (design/v2/cast-mockup.html). This file places
   the components; the only looks it adds are the chat-specific parts the mockup does not show, each derived from one
   mockup part (named in its comment). Tokens only, no colour literals.
   Surfaces
   - Inbox (every width): the app frame "Your corner": h1 + .sub + the pill tabs (Messages | Orders), a filter row
     (search pill + small paper chips), ONE paper panel of rows, or the .empty card (kraft envelope).
   - Thread: desktop = the chat list card (360) beside the thread card, gap 22 (the mockup .empties rhythm);
     tablet = the thread card alone; phone = the whole screen (no site header, no tab bar, like a native thread).
     Thread card = paper + line: head, the log on duck egg, the composer (or the docked paygate sheet) on paper.
   - In the log: paper bubbles in, pink bubbles out; day labels; status lines = the mockup .chip; order = the dark
     .box / .door--buy card; offer = the pink .door--sell card with the black .sticker.
   - Alerts: the app frame, the dark reach box with the mockup .tile numbers, ONE paper panel of day groups.
   The phone .tile rule, the action menu / toast (chat_ui.js, also settings + member) and the mask token
   (pnew_mask_avatar) are kit parts in components.css. */

/* ==========================================================================
   Shell
   ========================================================================== */
.pn-chatshell{width:100%;min-width:0;--list-pad:var(--space-1);--row-inset:calc(var(--panel-pad) - var(--list-pad))}   /* design system P4 (MCT-028 / MCT-033): one 4 px list inset, so a row (--r-m 12) sits concentric in its panel (--r-l 16) */
.pn-suppin{--list-pad:var(--space-1);--row-inset:calc(var(--panel-pad) - var(--list-pad))}
.pn-chatrail{min-width:0}
.pn-chatshell--inbox,.pn-chatshell--inbox.is-orders{max-width:none;margin:0}
.pn-chatshell--thread{flex:1;min-height:0;display:flex;flex-direction:column}
.pn-chatshell--thread > .pn-chatrail{display:none}

/* ==========================================================================
   Page views (Messages | Orders = .tabs-app) and their counters
   ========================================================================== */
.pn-maintabs{flex-wrap:wrap}
/* Orders counter: pink only when an order waits on me; a quiet label when it waits on the other side (CH-13). */
.pn-seg__n.is-quiet{background:var(--surface-2);color:var(--ink)}
.pn-maintabs > .is-active .pn-seg__n.is-quiet{background:var(--surface);color:var(--ink)}   /* QA m1: --ink flips with the theme (anthracite was 1.1:1 in dark) */
/* Filter chips (the .tabs-app pill as .pc-chip): the count is the pink pill; archived is only a quiet number. */
.pn-inbox__tabs .pn-seg__n{margin-left:var(--space-1)}
.pn-inbox__tabs .pn-seg__n[data-count="archived"]{background:var(--surface-2);color:var(--ink)}
.pn-inbox__tabs .pc-chip.is-selected .pn-seg__n[data-count="archived"]{background:var(--surface);color:var(--ink)}

/* ==========================================================================
   Paygate strip (free seller): the mockup .box--dk as one line: chrome, the line, the pink lock, the small pink button
   ========================================================================== */
.pn-paystrip{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-decoration:none}
.pn-paystrip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-paystrip__ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink)}
.pn-paystrip__txt{flex:1;min-width:0;display:grid;gap:var(--space-1)}
.pn-paystrip__txt b{font:var(--type-strong);color:var(--ink)}
.pn-paystrip__txt span{font:var(--type-meta);color:var(--ink-2)}
.pn-paystrip__cta{flex:none;background:var(--accent)}
/* Phones: the pink pill takes its own full-width row under the text (a long es/pt label never spills past the strip). */
@media (max-width:480px){.pn-paystrip{flex-wrap:wrap}.pn-paystrip__txt{flex-basis:calc(100% - 52px)}.pn-paystrip__cta{flex-basis:100%;margin-left:0;justify-content:center;max-width:100%;white-space:normal;text-align:center}}
/* UX polish D (UX-032): inside.css packs the strip into one row with the pill capped at 46 %, so "Answer with Premium"
   broke into two lines at 390 px and three at 320 px (49 / 65 px tall). On phones the pill takes its own full row again,
   one line; the compact strip (small lock, no sub line) stays as inside.css draws it. */
@media (max-width:480px){.pn-chatrail .pn-paystrip{flex-wrap:wrap}.pn-chatrail .pn-paystrip__txt{flex:1 1 calc(100% - 46px)}.pn-chatrail .pn-paystrip__cta{flex:1 1 100%;max-width:none;white-space:nowrap}}

/* ==========================================================================
   Filter row: the search pill (.pc-input with the glass on the left) + the small paper chips
   ========================================================================== */
.pn-inbox__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin:0 0 var(--space-4)}
/* UX polish D (UX-064): without the search (a free seller's masked inbox) the bar is only the ⋯; it sits close to the list
   it filters instead of floating alone between two 22 px gaps. Below the 1024 rail only; the rail keeps its own padding. */
@media (max-width:1023px){.pn-inbox__bar.is-menu:not(:has(> .pn-inbox__search)){margin-bottom:var(--space-2)}}
.pn-inbox__search{flex:1 1 260px;min-width:0;max-width:420px;margin:0}
.pn-inbox__search .pc-input{padding-left:var(--space-10)}
.pn-inbox__search .pc-input::-webkit-search-cancel-button{display:none}
.pn-inbox__glass{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);width:var(--icon-m);height:var(--icon-m);color:var(--ink-2);pointer-events:none}
.pn-inbox__clear{text-decoration:none}
.pn-inbox__tabs{flex:none}
.pn-inbox__tabs .pc-chip{min-height:var(--control-sm)}   /* MCT-021: the filter chips and "Select" share one height (36 desk, 44 phone) */
.pn-inbox__results{margin:0;font:var(--type-label);color:var(--ink-2)}

/* ==========================================================================
   Inbox rows (§4.3): one paper panel, avatar + name / time + one line, air between rows (tonal pass 05.10.)
   ========================================================================== */
.pn-chatrail__list{min-width:0}
.pn-chatpick{display:none}
.pn-threads.pn-panel,.pn-orders.pn-panel{padding:var(--list-pad)}
.pn-threadrow{padding:0;min-height:0;align-items:stretch;gap:0}
.pn-threadrow[hidden]{display:none}
/* Clear chats (owner 29.10.): the list's select mode — a check box before each row, a bar under the list */
.pn-inbox__select[aria-pressed="true"] .pc-ico{color:var(--ink)}
.pn-inbox__select[aria-pressed="true"]{background:var(--surface-3);color:var(--ink)}
.pn-threadrow__sel{display:flex;align-items:center;justify-content:center;flex:none;min-width:var(--tap);padding-inline-start:var(--row-inset);cursor:pointer}
.is-select .pn-threadrow__more{display:none}
.is-select .pn-threadrow__link{cursor:pointer}
.pn-selbar{position:sticky;bottom:calc(var(--dock, 0px) + var(--space-2));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-block-start:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-l);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-e1)}
.pn-selbar[hidden]{display:none}
.pn-selbar__n{flex:1 1 140px;font:var(--type-strong)}
.pn-selbar .pc-chip,.pn-selbar .pc-btn{min-height:var(--tap)}
.pn-selbar .pc-btn--danger{background:var(--surface-3);color:var(--danger)}
.pn-selbar .pc-btn--danger:disabled{opacity:1;background:var(--surface-3);color:var(--ink-2)}   /* MCT-035: a disabled key stays readable (was .45 = 2.5:1) */
.pn-threadrow:hover,.pn-threadrow.is-held,.pn-threadrow.is-current{background:var(--surface-2)}
.pn-threadrow__link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);min-height:72px;padding:var(--space-3) var(--row-inset);border-radius:inherit;color:inherit;text-decoration:none}
.pn-threadrow__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-threadrow .pc-avatar__dot{--dot-ring:var(--surface)}
.pn-threadrow:hover .pc-avatar__dot,.pn-threadrow.is-current .pc-avatar__dot{--dot-ring:var(--surface-2)}
.pn-threadrow .pn-row__main{gap:var(--space-1)}
.pn-row__main > .pn-threadrow__top,.pn-row__main > .pn-threadrow__bottom,.pn-row__main > .pn-threadrow__who{display:flex;align-items:center;gap:var(--space-2);min-width:0;white-space:normal;overflow:visible;font:inherit;color:inherit}
.pn-row__main > .pn-threadrow__top{align-items:baseline}
/* The name is the one text that may shorten: ellipsis + title attribute. */
.pn-threadrow__top b{flex:1 1 auto;min-width:0;font:var(--type-strong);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-threadrow__top time{flex:none;font:var(--type-cap);color:var(--ink-2);font-variant-numeric:tabular-nums;transition:opacity var(--dur-1)}
.pn-threadrow.is-unread .pn-threadrow__top b{font-weight:700}
.pn-threadrow.is-unread .pn-threadrow__top time{color:var(--ink)}
.pn-row__main > .pn-threadrow__who{font:var(--type-cap);color:var(--ink-2)}
.pn-threadrow__bottom{min-height:18px}
.pn-snippet{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-1);font:var(--type-meta);color:var(--ink-2)}
/* Snippet = a one-line clamp that breaks words (never a clipped string). */
.pn-snippet__t{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.pn-snippet__you{font-weight:var(--w-regular);color:var(--ink-2)}
.pn-threadrow.is-unread .pn-snippet{color:var(--ink)}
.pn-snippet__ico{flex:none}
.pn-snippet.is-locked .pn-snippet__t{color:var(--ink)}
.pn-snippet.is-locked .pn-snippet__ico{color:var(--ink)}
.pn-threadrow__tag{flex:none}
.pn-threadrow .pn-dot{transition:opacity var(--dur-1)}
/* Row menu: the round icon button floats over the time / dot corner on hover or focus (mouse); touch = long press. */
.pn-threadrow__more{position:absolute;top:50%;right:var(--space-3);z-index:1;margin:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--dur-1)}
.pn-threadrow:hover .pn-threadrow__more,.pn-threadrow:focus-within .pn-threadrow__more,.pn-threadrow__more[aria-expanded="true"]{opacity:1;pointer-events:auto}
.pn-threadrow:hover .pn-threadrow__top time,.pn-threadrow:hover .pn-dot,.pn-threadrow:focus-within .pn-threadrow__top time,.pn-threadrow:focus-within .pn-dot{opacity:0}
@media (hover:none){.pn-threadrow__more{display:none}.pn-threadrow:hover .pn-threadrow__top time,.pn-threadrow:hover .pn-dot,.pn-threadrow:focus-within .pn-threadrow__top time,.pn-threadrow:focus-within .pn-dot{opacity:1}}
.pn-threadrow.is-leaving{overflow:hidden;opacity:0;transition:height .2s ease,opacity .15s ease}
.pn-inbox__nohit{margin:0;padding:var(--space-8) var(--space-4);text-align:center;font:var(--type-body);color:var(--ink-2)}
.pn-inbox__morewrap{margin-top:var(--space-4)}

/* Ticks (snippet + bubbles): one check sent, two checks read. */
.pn-tick{flex:none;display:inline-flex}
.pn-tick .pc-ico{width:var(--icon-s);height:var(--icon-s);vertical-align:0;stroke-width:2.2}
.pn-tick:not(.is-read) .pn-tick__2,.pn-tick.is-read .pn-tick__1{display:none}
.pn-snippet .pn-tick{color:var(--ink-2)}
.pn-snippet .pn-tick.is-read{color:var(--ink)}

/* Blurred public faces (membership proof). */
.pc-avatar.is-blur img{filter:blur(6px) saturate(.8);transform:scale(1.15)}
.pc-avatar.is-blur{background:var(--surface-2);color:transparent}


/* ==========================================================================
   Orders tab: day-less groups (requested / accepted / shipped / closed) of flat rows in ONE paper panel
   ========================================================================== */
.pn-orders{display:grid;gap:0}
.pn-orders__sum{display:flex;margin:0;padding:var(--space-3) var(--row-inset) 0}
.pn-orders__sum[hidden]{display:none}
/* The open sum = the pink label (.pc-badge--accent look), set live by chat_inbox.js. */
.pn-orders__sum span{display:inline-flex;align-items:center;min-height:24px;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-2);color:var(--ink);font:var(--type-cap)}
.pn-orders__err{margin:0 0 var(--space-4)}
.pn-ogroup{display:grid}
.pn-ogroup__h.pn-grouplabel{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-5) var(--row-inset) var(--space-2)}
.pn-ogroup:first-of-type .pn-ogroup__h{padding-top:var(--space-3)}
/* Group count = the small duck label (app.css .pn-count geometry); chat_inbox.js creates it bare. */
.pn-ogroup__h > [data-n]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:0 var(--space-1);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-orow{position:relative;display:grid;gap:var(--space-3);padding:var(--space-3) var(--row-inset);border-radius:var(--r-m)}
.pn-orow:hover,.pn-orow.is-current{background:var(--surface-2)}
.pn-orow__link{display:flex;gap:var(--space-3);align-items:flex-start;min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-orow__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-orow__img{flex:none;width:56px;height:70px;border-radius:var(--r-s)}
.pn-orow__main{flex:1;min-width:0;display:grid;gap:var(--space-1)}
.pn-orow__top{display:flex;align-items:baseline;gap:var(--space-3);min-width:0}
/* The title has its own class so the price keeps the kit price face (ui_price: Archivo 900, 22). */
.pn-orow__title{flex:1;min-width:0;font:var(--type-strong);color:var(--ink);overflow-wrap:anywhere}
.pn-orow__top .pc-price{flex:none}
.pn-orow__price{display:none}
.pn-orow__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0;font:var(--type-meta);color:var(--ink-2)}
.pn-orow__whobox{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0;max-width:100%}
.pn-orow__who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
/* The masked buyer line is a message, not a name: it wraps instead of an ellipsis (es/fr/pt at 360). */
.pn-orow__who.pn-maskname{white-space:normal;overflow:visible;text-overflow:clip}
.pn-orow__meta time{flex:none;font-variant-numeric:tabular-nums}
.pn-orow__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-orow .pn-order__actions{margin-left:70px;max-width:440px}
.pn-order.is-busy,.pn-orow.is-busy{opacity:.6;pointer-events:none}
/* Status labels = kit badges (partials pick the modifier): done carries the live dot, closed stays quiet. */
.pn-ostatus--done::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--success)}
.pn-ostatus--closed{color:var(--ink-2)}

/* ==========================================================================
   Thread card: head, the log on duck egg, composer
   ========================================================================== */
body:has(.pn-chatpage){height:100vh;height:100dvh;min-height:0}
body:has(.pn-chatpage) .pn-main{display:flex;flex-direction:column;min-height:0;padding-bottom:var(--space-6)}
.pn-chatpage{position:relative;flex:1;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden}
.pn-chathead{flex:none;position:relative;z-index:3;display:flex;align-items:center;gap:var(--space-3);min-height:72px;padding:var(--space-3) var(--space-4);background:var(--surface)}
.pn-chathead__menu{flex:none;margin:0}
.pn-chathead > .pc-iconbtn{width:var(--control-md);height:var(--control-md)}   /* MCT-041: back + more are 44 at every width (was 40 on desktop) */
.pn-chatwho{flex:1;min-width:0;min-height:48px;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border-radius:var(--r-full);color:inherit;text-decoration:none;transition:background-color var(--dur-1)}
a.pn-chatwho:hover{background:var(--surface-2)}
a.pn-chatwho:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-chatwho .pc-avatar__dot{--dot-ring:var(--surface)}
.pn-chatwho__txt{min-width:0;display:grid;gap:var(--space-1)}
/* The page h1 is visually hidden (the h1 role size, so the h1 scale stays one); the name shows in the title role
   (--type-title 18/24) and is the one text that may shorten (ellipsis + title). */
.pn-chathead__h1{font:var(--type-h1)}
.pn-chatwho__name{display:block;margin:0;font:var(--type-title);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-chatwho__sub{font:var(--type-meta);color:var(--ink-2)}
.pn-chatwho__txt .pc-badge--online{justify-self:start}
.pn-chatwho__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);min-width:0}   /* night N1 #32: Premium badge + online / sub */
.pn-chatwho__txt .pn-masktag{flex-wrap:nowrap;align-items:flex-start}
/* The log: one tone under the card (--canvas: duck-2 in light, the deep ground in dark), so the in-bubbles (--bubble-in),
   the day labels and the order / offer cards stand on it by tone alone (tonal pass 05.10.). */
/* design system P4 (MCT-048 / MCT-062): one rhythm and one column — 4 px inside a sender's run, 12 on a sender switch,
   16 around cards, day labels and status lines; cards, notes and the intro are --thread-col wide, bubbles 78 % of it. */
.pn-msgs{--thread-col:min(100%,560px);--bubble-max:min(78%,436px);flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);background:var(--canvas);scroll-padding-bottom:var(--space-4)}
.pn-msgs > :is(.pn-msg--card,.pn-msg--order,.pn-msg--offer,.pn-msg--wish,.pn-msg--sys,.pn-deals,.pn-safeline,.pn-offwarn.pn-shnote,.pc-day){margin-block:var(--space-3) 0}
.pn-msgs > :is(.pn-msg--card,.pn-msg--order,.pn-msg--offer,.pn-msg--wish,.pn-msg--sys,.pn-deals,.pc-day) + .pn-msg{margin-top:var(--space-3)}
.pn-msgs > :first-child{margin-top:0}
/* UX polish D (UX-006): chat_ui.js sets .is-laying before chat_legacy.js lays the log out (day chips, grouped bubbles,
   the ⋯ keys) and drops it on the next frame, so the bubbles never jump after the first paint. Space and scroll stay. */
.pn-msgs.is-laying{visibility:hidden}
.pn-msgs .pc-day{flex:none;align-self:center;min-height:24px;padding:var(--space-1) var(--space-3);border:0;border-radius:var(--r-full);background:var(--surface-2);font:var(--type-cap);color:var(--ink-2)}
.pn-msgs .pc-day::first-letter{text-transform:uppercase}   /* the day label is sentence case ("today" in the copy); MCT-049: 12/16, was 10 px on a 1.0 line */
.pn-msgs .pc-day:first-child{margin-top:0}
.pn-chatempty{align-self:center;margin:auto 0;padding:var(--space-6);max-width:36ch;text-align:center;font:var(--type-body);color:var(--ink-2)}
.pn-older{flex:none;align-self:center;min-height:var(--control-md);margin-bottom:var(--space-2)}
.pn-older.is-busy{opacity:.6;cursor:progress}
.pn-chaterr{flex:none;margin:var(--space-2) var(--space-4) 0;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);font:var(--type-meta)}

/* Messages: bubbles 78 % of the thread column, the --r-s corner only at the end of a run (MCT-061). One bubble look:
   15/22, 8 / 12 inside, the time 12/16 in ink 2 (on pink: the on-pink ink), no opacity (MCT-059 / MCT-060). */
.pn-msg{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);flex:none;border-radius:var(--r-m);outline:0}
.pn-msg--out{align-items:flex-end}
.pn-msg.is-follow{margin-top:0}
.pn-msg.is-switch{margin-top:var(--space-2)}
.pn-msg:focus-visible .pc-bubble{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-msgs .pn-msg .pc-bubble{position:relative;max-width:var(--bubble-max);margin:0;padding:var(--space-2) var(--space-3);border:0;border-radius:var(--r-m);font:var(--type-body)}
.pn-msgs .pc-bubble--in{border-bottom-left-radius:var(--r-s)}
.pn-msgs .pc-bubble--out{border-bottom-right-radius:var(--r-s)}
.pn-msg.is-follow .pc-bubble--out{border-top-right-radius:var(--r-s)}
.pn-msg.is-follow .pc-bubble--in{border-top-left-radius:var(--r-s)}
.pn-msg.has-follow .pc-bubble--out{border-bottom-right-radius:var(--r-m)}
.pn-msg.has-follow .pc-bubble--in{border-bottom-left-radius:var(--r-m)}
.pn-msg.has-follow.is-follow .pc-bubble--out{border-bottom-right-radius:var(--r-s)}
.pn-msg.has-follow.is-follow .pc-bubble--in{border-bottom-left-radius:var(--r-s)}
.pn-bubble__text{white-space:normal}
.pc-bubble__time{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);min-height:16px}
/* Clock chips read "3:01 PM", never the tabular "03 : 01" (night CH-22). */
.pn-msgs .pc-bubble__time,.pn-sysline time{font-variant-numeric:normal}
.pn-msgs .pc-bubble__time{margin-top:var(--space-1);font:var(--type-cap);color:var(--ink-2);opacity:1}
.pn-msgs .pc-bubble--out .pc-bubble__time{color:var(--on-accent)}
/* MCT-101: the translation toggle in the time row is the time's own 12/16 in ink 2, its globe 16 (inside.css drew 10.5 px ink 3 at .7) */
.pn-msgs .pc-bubble__time .pn-lctr{font:var(--type-cap);color:var(--ink-2)}
.pn-msgs .pc-bubble--out .pc-bubble__time .pn-lctr{color:var(--on-accent)}
.pn-msgs .pc-bubble__time .pn-lctr .pn-lctr__g{width:var(--icon-s);height:var(--icon-s)}
.pc-bubble--out .pn-tick.is-read .pc-ico{stroke-width:2.6}
.pn-msg.is-held .pc-bubble{box-shadow:0 0 0 2px var(--accent-soft)}
.pn-msg.is-busy{opacity:.55}
.pn-msg.is-flash .pc-bubble{animation:pn-flash 1.2s ease}
@keyframes pn-flash{0%,40%{box-shadow:0 0 0 4px var(--accent-soft)}100%{box-shadow:0 0 0 4px transparent}}
.pn-msgs .pc-bubble.is-emoji{padding:0 var(--space-1);border:0;background:transparent;color:var(--ink);font:var(--type-display)}
.pn-msgs .pc-bubble.is-emoji .pc-bubble__time{color:var(--ink-2)}
/* Reply quote: above its bubble, the bubble shape (--r-m, the --r-s corner on the leading edge) (MCT-103). */
.pn-quote{display:flex;align-items:center;gap:var(--space-2);max-width:var(--bubble-max,min(78%,436px));min-height:44px;margin:0;padding:var(--space-1) var(--space-3);border:0;border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-s);background:var(--surface-2);color:var(--ink-2);font:var(--type-meta);text-align:left;cursor:pointer}
.pn-msg--out .pn-quote{flex-direction:row-reverse;text-align:right;border-radius:var(--r-m) var(--r-s) var(--r-s) var(--r-m)}
button.pn-quote:hover{background:var(--surface-3)}
.pn-msg.is-follow > .pn-quote{margin-top:var(--space-2)}
.pn-quote:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-quote.is-gone{cursor:default}
.pn-quote__txt{min-width:0;display:grid}
.pn-quote__txt b{font:var(--type-cap);color:var(--ink)}
.pn-quote__txt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-quote__img{flex:none;width:36px;height:36px;border-radius:var(--r-s);object-fit:cover}
/* Tombstone: neutral on both sides, one surface step under a bubble, no dashed edge (MCT-105). */
.pn-msgs .pn-msg.is-deleted .pc-bubble{background:var(--surface);color:var(--ink-2);border:0}
.pn-tomb{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-body)}
/* Photos: single + mosaic (2 side by side, 3 = one tall + two, 4+ = 2x2 with "+N"). Fixed boxes, nothing jumps. */
.pn-msgs .pc-bubble.has-photos{padding:var(--space-1)}
.pn-msgs .pc-bubble.has-photos .pn-bubble__text{padding:var(--space-2) var(--space-3) 0}
.pn-msgs .pc-bubble.has-photos > .pc-bubble__time{padding:0 var(--space-3) var(--space-1)}
.pn-msgs .pc-bubble.is-photo-only{padding:0;border:0;background:transparent}
.pn-msgs .pc-bubble.is-photo-only > .pc-bubble__time{position:absolute;right:var(--space-2);bottom:var(--space-2);margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--r-full);background:var(--glass);color:var(--ink)}
.pn-mosaic{display:grid;gap:var(--space-1);width:min(264px,62vw);border-radius:var(--r-m);overflow:hidden;background:var(--surface-2)}
.is-photo-only > .pn-mosaic{border-radius:var(--r-m)}
.pn-mosaic--1{aspect-ratio:4/5}
.pn-mosaic--2{grid-template-columns:1fr 1fr;aspect-ratio:3/2}
.pn-mosaic--3{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.pn-mosaic--3 .pn-mosaic__c:first-child{grid-row:span 2}
.pn-mosaic--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.pn-mosaic__c{position:relative;display:block;min-width:0;min-height:0;padding:0;border:0;background:var(--ph-media);cursor:zoom-in;overflow:hidden}
.pn-mosaic__c img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-mosaic__c.is-broken{cursor:default}
.pn-mosaic__c.is-broken img{visibility:hidden}
.pn-mosaic__c:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-mosaic__more{position:absolute;inset:0;display:grid;place-items:center;background:var(--glass-strong);color:var(--ink);font:var(--type-h1)}

/* Item reference: a bubble-shaped row (--r-m, surface 2), the photo --r-s, the label 12, title 15/22 600, price 13 (MCT-064). */
.pn-msg--card{align-items:center}
.pn-msg--out.pn-msg--card{align-items:flex-end}
.pn-msg--in.pn-msg--card{align-items:flex-start}
.pn-msg--ad{align-items:flex-start}
.pn-adcard{display:flex;align-items:center;gap:var(--space-3);width:var(--bubble-max,min(78%,436px));min-height:80px;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);text-decoration:none;transition:background-color var(--dur-1)}
a.pn-adcard:hover{background:var(--surface-3)}
a.pn-adcard:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-adcard__img{flex:none;width:52px;height:64px;border-radius:var(--r-s)}
.pn-adcard__img img{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-adcard__txt{flex:1;min-width:0;display:grid;gap:var(--space-1)}
.pn-adcard__txt > small{font:var(--type-cap);color:var(--ink-2)}
.pn-adcard__txt b{font:var(--type-strong);color:var(--ink);overflow-wrap:anywhere}
.pn-adcard__txt > span{font:var(--type-meta);color:var(--ink-2)}
.pn-adcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0}
.pn-adcard.is-gone{justify-content:center;text-align:center;min-height:0;padding:var(--space-3) var(--space-4);background:var(--surface);color:var(--ink-2)}
.pn-adcard__time{padding:0 var(--space-1);font:var(--type-cap);color:var(--ink-2)}
.pn-adcard__time .pn-tick.is-read{color:var(--ink-2)}

/* Hover "more" next to the bubble (mouse only; touch uses long press). */
.pn-msg__more{position:absolute;top:50%;display:grid;place-items:center;width:var(--control-sm);height:var(--control-sm);padding:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);cursor:pointer;opacity:0;transform:translateY(-50%);transition:opacity var(--dur-1)}
/* @member-only */
.pn-msg__more::after{content:"";position:absolute;inset:-4px;border-radius:50%}   /* UX polish D (UX-003): the finger gets 44 */
/* @end-member-only */
.pc-bubble--out > .pn-msg__more{right:calc(100% + var(--space-2))}
.pc-bubble--in > .pn-msg__more{left:calc(100% + var(--space-2))}
.pn-msg:hover .pn-msg__more,.pn-msg:focus-within .pn-msg__more,.pn-msg.is-held .pn-msg__more{opacity:1}
/* Optimistic send */
.pn-msg.is-pending .pc-bubble{opacity:.72}
.pn-msg.is-failed .pc-bubble{opacity:1;box-shadow:0 0 0 2px var(--danger)}
.pn-failed{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--type-cap);color:var(--danger)}
.pn-failed[hidden]{display:none}
.pn-failed button{min-height:var(--tap);padding:0 var(--space-2);border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
/* New messages: the chrome pill (the toast family), placed by chat_thread.js above the composer. */
.pn-newpill{position:absolute;left:50%;bottom:96px;z-index:5;min-height:var(--control-sm);padding:0 var(--space-4);border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);font:var(--type-label);box-shadow:var(--shadow-e1);transform:translateX(-50%);cursor:pointer}
.pn-newpill[hidden]{display:none}

/* Status lines (system messages) = the day label's pill: 12/16, 24 tall, surface 2, --r-full, centred (MCT-092). */
.pn-msg--sys{align-items:center}
.pn-sysline{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-1);max-width:var(--thread-col,92%);min-height:24px;margin:0;padding:var(--space-1) var(--space-3);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);font:var(--type-cap);text-align:center}
.pn-sysline .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);stroke-width:2.2}
.pn-sysline time{flex:none;white-space:nowrap;color:var(--ink-2)}
.pn-sysline time:not(:empty)::before{content:"· "}

/* Locked bubble (free seller): the bubble (surface 2) with neutral glyphs under a blur on one step down (surface, so the
   letter shape shows, MCT-069) and the 36 lock disc; the hint, length and time one 12/16 row style (MCT-070); the hint above,
   the link line (the .pbox link) under it. The filler never carries the real text; the whole bubble is the link. */
.pn-msgs .pn-lockbubble{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hint hint" "bub bub" "cta time";column-gap:var(--space-2);row-gap:var(--space-2);width:var(--bubble-max,min(78%,436px));max-width:none;padding:var(--space-3);color:var(--ink);text-decoration:none}
.pn-lockbubble__hint{grid-area:hint;display:flex;align-items:center;gap:var(--space-1);font:var(--type-cap);color:var(--ink-2)}
.pn-lockbubble__hint .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);stroke-width:2.4}
.pn-lockbubble__blur{grid-area:bub;display:block;max-height:84px;overflow:hidden;padding:var(--space-3);border-radius:var(--r-s);background:var(--surface);color:var(--ink-2);font:var(--type-body);overflow-wrap:anywhere;filter:blur(3px);user-select:none}
.pn-lockbubble__lk{grid-area:bub;place-self:center;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--chrome);color:var(--ink)}
.pn-lockbubble__lk .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6}
.pn-lockbubble__cta{grid-area:cta;align-self:center;font:var(--type-strong);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pn-msgs .pn-lockbubble > .pc-bubble__time{grid-area:time;align-self:center;margin:0}
.pn-lockbubble:hover .pn-lockbubble__cta{text-decoration-color:var(--ink-2)}
.pn-lockbubble:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* N7 #94 safety line; #3 preview (switch paygate_preview). A note (§9.4): surface 2, --r-m, 8 / 12 inside, 13/18, as wide as the
   thread column; its link gets a 44 hit area (MCT-050 / MCT-051 / MCT-052). */
.pn-safeline{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) auto;width:100%;max-width:560px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border:0;border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink-2)}
.pn-safeline>.pc-ico{flex:none;color:var(--ink)}
.pn-safeline + .pn-safeline{margin-top:0}   /* owner 05.11.: two stacked lines keep one gap, not two */
.pn-safeline__t{flex:1}
.pn-safeline a{position:relative;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-safeline a::before{content:"";position:absolute;inset:-13px -4px}
.pn-safeline__x .pc-ico{width:var(--icon-s);height:var(--icon-s)}
/* owner 12.10.: "Sold to him? Mark it" above the seller's composer once the thread looks like a sale */
.pn-dealhint{display:flex;align-items:center;gap:var(--space-2);margin:0 var(--space-3) var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink-2)}
.pn-dealhint[hidden]{display:none}
.pn-dealhint>.pc-ico{flex:none;color:var(--ink)}
.pn-dealhint__t{flex:1;min-width:0}
.pn-dealhint__go{flex:none}
.pn-dealhint__x .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.is-pv{filter:none}
.pn-lockbubble__pv{color:var(--ink)}
.pn-lockbubble__rest{filter:blur(3px)}
.is-pv+.pn-lockbubble__lk{place-self:center end;margin-right:var(--space-3)}
/* @member-only */
/* A3 (owner 18.10., docs/innen-50-ad-18-10.md): the sealed letter — who wrote, how long it is, her listing under it, and on
   the newest one the view's pink key right below; the paybar is then only its echo (chat_legacy.js shows it once the key
   scrolls away). The messages sit at the bottom of the thread, so no empty screen lies between the letter and the key. */
.pn-msgs .pn-lockbubble.pn-sealed{grid-template-areas:"hint hint" "bub bub" "len time" "cta cta"}
.pn-sealed__len{grid-area:len;align-self:center;font:var(--type-cap);color:var(--ink-2)}
.pn-msg.is-locked .pn-lccard{width:var(--bubble-max,min(78%,436px))}
.pn-lockkey{display:grid;gap:var(--space-2);width:var(--bubble-max,min(78%,436px));margin-top:var(--space-2)}
.pn-lockkey__t{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-msgs:has(.pn-lockkey) > :first-child{margin-top:auto}
.pn-paybar.is-echo:not(.is-shown){display:none}
.pn-chatpage:has(> .pn-paybar.is-echo)::after{content:none}
@media (max-width:700px){.pn-lockkey,.pn-msg.is-locked .pn-lccard,.pn-msgs .pn-lockbubble.pn-sealed{width:100%}}
/* UX 433 S-090 / S-092 (switch ux433_chat): a clean lock card (who, how long, "Read with Premium") and ONE locked composer
   — the Premium key and "or send a listing free" as a quiet line link */
.pn-sealed--clean{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);text-decoration:none}
.pn-sealed__line{display:flex;align-items:center;gap:var(--space-2);min-width:0;font:var(--type-body);color:var(--ink)}
.pn-sealed__line .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.pn-sealed__go{font:var(--type-label);color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-sealed--clean .pc-bubble__time{margin-left:auto}
.pn-paybar--one.pn-sheet{gap:var(--space-2);padding-top:var(--space-4)}
.pn-paybar--one .pn-paybar__acts{grid-template-columns:minmax(0,1fr)}
.pn-paybar__or{margin:0;text-align:center;font:var(--type-meta)}
.pn-paybar__or a{display:inline-flex;align-items:center;min-height:var(--control-sm);color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.pn-paybar__or a:hover{color:var(--ink)}
/* UX 433 G-050: a removed listing is one muted line; G-054: Unblock is a real key; G-058: the safety link has a finger-sized
   target; G-032: an unread row's snippet is bold; G-042: "Ask about it" under an offer */
.pn-adcard.is-gone.is-line{display:inline-flex;flex-direction:row;align-items:center;gap:var(--space-2);justify-content:flex-start;text-align:left;padding:var(--space-2) var(--space-3);font:var(--type-meta);border-radius:var(--r-m)}
.pn-adcard.is-gone.is-line .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
.pn-lcunblock{margin-left:var(--space-2);min-height:var(--control-sm)}
.pn-safeline__t a{display:inline-block;padding:var(--space-3) var(--space-1);margin:calc(-1 * var(--space-3)) calc(-1 * var(--space-1))}
.pn-threadrow.is-unread .pn-snippet__t{font-weight:600}
.pn-threadrow.is-dead .pn-row__main{opacity:.62}
.pn-threadrow__dead{flex:none;font:var(--type-cap)}
/* UX 433 round 2: the head's "Order" key (B-102), the composer's "+" tray (S-096), the lines above the composer (B-030,
   B-105, G-048), the legacy offer card (G-042), Select in the overflow menu (S-088) */
.pn-chathead__order{flex:none}
.pn-lcplus{position:relative;flex:none}
.pn-lcplus__sum{list-style:none;cursor:pointer}
.pn-lcplus__sum::-webkit-details-marker{display:none}
.pn-lcplus[open] > .pn-lcplus__sum{background:var(--surface-3)}
.pn-lcplus[open] > .pn-lcplus__sum .pc-ico{transform:rotate(45deg)}
.pn-lctray{position:absolute;left:0;bottom:calc(100% + var(--space-2));z-index:4;display:grid;gap:var(--space-1);min-width:200px;padding:var(--space-2);border-radius:var(--r-l);background:var(--surface-2);box-shadow:var(--sh-sheet)}
.pn-lctool{justify-content:flex-start;gap:var(--space-2);width:100%;min-height:var(--control-md);padding:0 var(--space-3);border:0;background:transparent;color:var(--ink);font:var(--type-label);cursor:pointer}
.pn-lctool:hover,.pn-lctool:focus-visible{background:var(--surface-3)}
.pn-lctool .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
.pn-photoask{margin-top:var(--space-3);text-align:left}
.pn-readfirst{margin:0 0 var(--space-2);padding:0 var(--space-4)}
.pn-lcoffercard{display:grid;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-inbox__lcmore{margin-inline-start:auto}
button.pn-inbox__mi{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
/* UX 433 S-093: older sales of the pair fold into one quiet line */
.pn-deals__more{display:grid;gap:var(--space-2)}
.pn-deals__sum{display:inline-flex;align-items:center;gap:var(--space-1);justify-self:center;min-height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--r-full);background:var(--surface-2);font:var(--type-meta);color:var(--ink-2);cursor:pointer;list-style:none}
.pn-deals__sum::-webkit-details-marker{display:none}
.pn-deals__sum .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-deals__more[open] .pn-deals__sum .pc-ico{transform:rotate(180deg)}
.pn-lcoffer__ask{margin-top:var(--space-2);gap:var(--space-1)}
.pn-lcoffer__ask .pc-ico{width:var(--icon-s);height:var(--icon-s)}
/* @end-member-only */

/* ==========================================================================
   Order card in the log = a panel (§9.2): surface, --r-l, --panel-pad, the thread column wide. Status label, the item
   (title 18, price in ink — pink is the one key, MCT-087), the 4-step track (done = ink, the current step pink, labels
   12/16 ink 2, MCT-088), the note, the next step as the one pink key + secondary keys.
   ========================================================================== */
.pn-msg--order{align-items:stretch}
.pn-order{width:var(--thread-col,min(100%,560px));align-self:center;display:grid;gap:var(--space-3);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);color:var(--ink);scroll-margin:96px}
.pn-order:target{animation:pn-flash 1.6s ease}
.pn-order__over{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);min-width:0;font:var(--type-cap);color:var(--ink-2)}
.pn-order__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);min-width:0}
.pn-order__id{flex:none;font-variant-numeric:tabular-nums}
.pn-order__role + .pn-order__id::before{content:"· "}
.pn-order__head{display:flex;gap:var(--space-3);align-items:center;min-width:0}
.pn-order__imglink{flex:none;display:block;border-radius:var(--r-s)}
.pn-order__img{flex:none;width:64px;height:80px;border-radius:var(--r-s)}
/* Order photo over the care label: a photo that cannot load leaves the label (night CH-11). */
.pn-snap{position:relative}
.pn-snap img{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:50% 35%;color:transparent}
.pn-order__txt{flex:1;min-width:0;display:grid;gap:var(--space-2)}
.pn-order__title{font:var(--type-title);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.pn-order__title:hover{text-decoration:underline}
.pn-order .pn-order__price.pn-order__price{color:var(--ink)}   /* 0,3,0: over inside.css :where() .pn-order .pn-order__price (pink) — P2 deletes that line */
.pn-order__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-order__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1);margin:0;padding:0;list-style:none}
.pn-order__track li{display:grid;gap:var(--space-2);min-width:0;font:var(--type-cap);color:var(--ink-2);overflow-wrap:anywhere;hyphens:auto}
.pn-order__track li::before{content:"";height:4px;border-radius:var(--r-full);background:var(--surface-2)}
.pn-order__track li.is-done::before{background:var(--ink-2)}
.pn-order__track li.is-done{color:var(--ink)}
.pn-order__track li.is-now{color:var(--ink)}
/* MCT-075: a label in a thread card is a quiet badge (surface 2 + ink); "your move" keeps the pink only as its 8 px dot */
.pn-msgs .pn-order .pc-badge--accent,.pn-onwdemo .pn-order .pc-badge--accent{background:var(--surface-2);color:var(--ink)}
.pn-order .pc-badge--accent.pn-order__move{gap:var(--space-2)}
.pn-order .pc-badge--accent.pn-order__move::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pn-order__track li.is-now::before{background:var(--accent)}
.pn-order__note{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);border:0;font:var(--type-body);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.pn-order__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.pn-order__actions.is-single{grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){.pn-order__actions.is-long{grid-template-columns:minmax(0,1fr)}.pn-order__actions.is-long > .is-next{order:-1}}
.pn-order__actions form{margin:0;display:grid}
/* polish-b 02.10.: nothing to do but wait (only Cancel / Decline for this viewer): one small line button at the start. */
.pn-order__actions.is-quiet{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start}
.pn-order__actions.is-quiet form{display:block}
.pn-order > .pn-order__actions{padding-bottom:0}
.pn-order__pay{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-order__gate{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);border:0;background:var(--surface-2);font:var(--type-label);color:var(--ink)}
.pn-order__gate .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--ink);stroke-width:2.4}
/* Seller cancel without JS: the reason travels with the form. */
.pn-order__why{margin:0 0 var(--space-2)}
.pn-order .pn-order__why .pc-label{color:var(--ink)}

/* ==========================================================================
   Offer card in the log = the order card's panel (surface, --r-l, --panel-pad): no pink surface, no cream note (§2.3,
   §9.4) — the seller's note is a note (surface 2), the buyer's Accept is the view's pink key.
   ========================================================================== */
.pn-msg--offer{align-items:stretch}
.pn-offer{width:var(--thread-col,min(100%,560px));align-self:center;display:grid;gap:var(--space-3);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);color:var(--ink);scroll-margin:96px}
.pn-offer:target{animation:pn-flash 1.6s ease}
.pn-offer__head{display:flex;gap:var(--space-4);align-items:center;min-width:0}
.pn-offer__media{position:relative;flex:none;padding:0 0 var(--space-2) var(--space-2)}
.pn-offer__imglink{display:block;border-radius:var(--r-s)}
.pn-offer__img{display:block;width:64px;height:80px;border-radius:var(--r-s)}
.pn-offer__sticker{position:absolute;left:0;bottom:0;z-index:4;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--ink);font:var(--type-cap);transform:none}
.pn-offer__txt{flex:1;min-width:0;display:grid;gap:var(--space-2)}
.pn-offer__over{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0;font:var(--type-cap);color:var(--ink-2)}
.pn-offer .pn-offer__tag{background:var(--surface-2);color:var(--ink)}
.pn-offer__title{font:var(--type-title);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.pn-offer__title:hover{text-decoration:underline}
.pn-offer .pn-offer__price{color:var(--ink)}
.pn-offer__note{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-body);white-space:pre-line;overflow-wrap:anywhere}
.pn-offer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-offer__link{font-weight:var(--w-strong);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-offer__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-3)}
.pn-offer__form{margin:0;display:grid;min-width:0}
.pn-offer__form .pc-btn{min-width:0;padding-inline:var(--space-3)}
.pn-offer__fine{margin:0;font:var(--type-cap);color:var(--ink-2)}
.pn-offer.is-declined,.pn-offer.is-expired{color:var(--ink-2)}
.pn-offer.is-declined .pn-offer__tag,.pn-offer.is-expired .pn-offer__tag{color:var(--ink-2)}
.pn-offer.is-declined .pn-offer__note,.pn-offer.is-expired .pn-offer__note{color:var(--ink-2)}
.pn-offer.is-busy{opacity:.6;pointer-events:none}

/* ==========================================================================
   Free seller's reply bar = the docked paygate sheet (kit .pn-sheet.is-docked), ONE order on every width and in every
   thread (MCT-129 / MCT-130): the head (18/24, visible on phones too), the one line with the 36 lock disc (13/18), then
   the Premium pink key + the secondary "send a listing" key, both 44. It docks under the log (no 18 px overlap, MCT-132).
   ========================================================================== */
.pn-chatpage:has(> .pn-paybar)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--shade-paygate)}
.pn-chatpage:has(> .pn-paybar) .pn-msgs{padding-bottom:var(--space-4)}
.pn-paybar.pn-sheet{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;margin:0;padding:var(--space-4) var(--space-6) var(--space-6)}
.pn-paybar__top{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);font:var(--type-meta);color:var(--ink-2)}
.pn-faces:empty{display:none}
.pn-paybar__lk{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--surface-3);color:var(--ink)}
.pn-paybar__lk .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6}
.pn-paybar__txt{min-width:0}
/* A3 (owner 18.10.): the heading comes first, then the line under it — on every width since P4 (one paybar) */
/* @member-only */
.pn-paybar .pn-paybar__h{order:-1;margin:0 0 var(--space-2);font:var(--type-title);color:var(--ink)}
/* @end-member-only */
/* The grab handle is a real button (tap = open / fold the sheet on phones): the 40 × 4 bar, a 44 tall hit area (MCT-131). */
.pn-paybar__grab{position:relative;order:-2;align-self:center;width:var(--space-10);height:4px;margin:0 0 var(--space-3);padding:0;border:0;border-radius:var(--r-full);cursor:pointer}
.pn-paybar__grab::before{content:"";position:absolute;inset:-20px -40px}
.pn-paybar__grab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (min-width:701px){.pn-paybar__grab{display:none}.pn-paybar.pn-sheet{padding-top:var(--space-6)}}

.pn-paybar__acts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:start}
.pn-paybar__acts > .pc-btn,.pn-paybar .pn-senditem > summary{min-width:0;min-height:var(--control-md)}
.pn-paybar .pn-senditem > summary{display:flex;align-items:center;justify-content:center}
.pn-senditem{position:relative}
.pn-senditem > summary{list-style:none;cursor:pointer}
.pn-senditem > summary::-webkit-details-marker{display:none}
.pn-senditem__list{position:absolute;right:0;bottom:calc(100% + var(--space-2));z-index:var(--z-bar);display:grid;gap:var(--space-1);width:min(320px,calc(100vw - var(--space-6)));max-height:min(360px,60vh);overflow-y:auto;padding:var(--space-2);border-radius:var(--r-l);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-e1)}
.pn-senditem__h{margin:0;padding:var(--space-2) var(--space-3)}
.pn-senditem__list form{margin:0}
.pn-senditem__btn{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--header-key);padding:var(--space-2) var(--space-3);border:0;border-radius:var(--r-m);background:transparent;color:var(--ink);font:var(--type-strong);text-align:left;cursor:pointer}
.pn-senditem__btn span{min-width:0;overflow-wrap:anywhere}
.pn-senditem__btn .pc-ico{flex:none;color:var(--ink-2)}
.pn-senditem__btn:hover,.pn-senditem__btn:focus-visible{background:var(--surface-3)}
.pn-senditem__h{font:var(--type-label);color:var(--ink-2)}

/* ==========================================================================
   Composer: surface 1, the field one step up (surface 2, --r-l 16 at any height, MCT-109), 44 keys with 20 icons
   (MCT-111), its sides on the thread's own inset (MCT-112); only Send is pink (MCT-113)
   ========================================================================== */
.pn-composer{position:relative;z-index:2;flex:none;display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-6) var(--space-4);background:var(--surface)}
.pn-composer.is-locked{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:0;padding:var(--space-4);text-align:center;color:var(--ink-2);font:var(--type-strong)}
.pn-composer.is-locked .pc-ico{flex:none}
.pn-composer__row{display:flex;align-items:flex-end;gap:var(--space-2)}
.pn-composer textarea.pc-input{flex:1;height:var(--control-md);min-height:var(--control-md);max-height:140px;padding:calc((var(--control-md) - var(--lh-body)) / 2) var(--space-4);border:0;border-radius:var(--r-l);background:var(--surface-2);resize:none;font:var(--type-body);overflow-y:auto}
.pn-composer .pc-iconbtn{width:var(--control-md);height:var(--control-md)}
.pn-attach{cursor:pointer}
.pn-attach:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-composer .pn-send .pc-ico{stroke-width:2.4}
.pn-composer .pc-iconbtn .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pn-composer__reply{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-s);background:var(--surface-2)}
.pn-composer__reply[hidden],.pn-composer__tray[hidden]{display:none}
.pn-composer__replytxt{flex:1;min-width:0;display:grid;font:var(--type-meta);color:var(--ink-2)}
.pn-composer__replytxt b{font:var(--type-cap);color:var(--ink)}
.pn-composer__replytxt span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-composer__reply img{flex:none;width:40px;height:40px;border-radius:var(--r-s);object-fit:cover}
.pn-composer .pc-remove::after{content:"";position:absolute;inset:-8px;border-radius:var(--r-full)}
.pn-composer__x.pc-remove{position:relative;top:auto;right:auto;margin:0 var(--space-2)}
.pn-composer__tray{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-2) var(--space-1) var(--space-1);scrollbar-width:none}
.pn-tray__c{position:relative;flex:none;width:72px;height:72px;border-radius:var(--r-s);overflow:visible}
.pn-tray__c img{width:100%;height:100%;border-radius:var(--r-s);object-fit:cover;background:var(--surface-2)}
.pn-tray__c .pc-remove{top:-6px;right:-6px}

/* Lightbox: the chrome backdrop, the chrome icon squares (the burger square). */
.pn-lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--backdrop);color:var(--on-chrome)}
.pn-lightbox::backdrop{background:var(--backdrop)}
.pn-lightbox[open]{display:grid;place-items:center}
.pn-lightbox img{max-width:min(94vw,1400px);max-height:86vh;max-height:86dvh;object-fit:contain;border-radius:var(--r-m)}
.pn-lightbox__btn{position:absolute;width:var(--header-key);height:var(--header-key);background:var(--surface-2);color:var(--ink)}
.pn-lightbox__close{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.pn-lightbox__prev{left:max(16px,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
.pn-lightbox__next{right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}
.pn-lightbox.is-single .pn-lightbox__prev,.pn-lightbox.is-single .pn-lightbox__next{display:none}
.pn-lightbox__n{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);font:var(--type-label);font-variant-numeric:tabular-nums}

/* Toast position on the chat pages (the menu, sheet and toast themselves are kit: components.css). */
body:has(.pn-chatpage) .pn-toast{bottom:calc(84px + var(--toast-gap) + env(safe-area-inset-bottom))}
@media (max-width:700px){body:has(.pn-inbox):not(:has(.pn-chatpage)) .pn-toast{bottom:calc(var(--dock) + var(--toast-gap))}}

/* ==========================================================================
   Alerts (§4.3): the app frame, the dark reach box with the mockup .tile numbers, ONE paper panel of day groups
   ========================================================================== */
.pn-reach__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5)}
.pn-reach__head .pc-box__h{margin:0}
/* The reach tiles share the dark box evenly in one row (any count), instead of the kit's 230 px flex wrap. */
.pn-reach__tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-4)}
.pn-reach__tiles > .pc-tile{min-width:0}
@media (max-width:420px){
  .pn-reach__tiles{gap:var(--space-2)}
  .pn-reach__tiles > .pc-tile{padding:var(--space-3)}
  .pn-reach__tiles > .pc-tile b{font:var(--type-num)}   /* MCH-163: tile numerals 24 in ink (tokens), never a 32 fallback */
  .pn-reach__tiles > .pc-tile p{margin-top:var(--space-1);font:var(--type-cap)}
}
.pn-alertlist.pn-panel{padding:var(--list-pad)}
/* Nothing visible in this filter: the panel steps back, the .empty card (#pnAlertsNone) takes its place. */
.pn-alertlist:not(:has([data-alert-group]:not([hidden]))){display:none}
.pn-alertgroup[hidden],.pn-alertlist .pn-alert[hidden]{display:none}
.pn-alertgroup .pn-grouplabel{margin:0;padding:var(--space-5) var(--row-inset) var(--space-2)}
.pn-alertgroup:first-child .pn-grouplabel{padding-top:var(--row-inset)}
.pn-alertgroup:not([hidden]) ~ .pn-alertgroup:not([hidden]){position:relative;margin-top:var(--space-3)}
.pn-alert{gap:var(--space-3);min-height:72px;padding:var(--space-3) var(--row-inset)}
.pn-alert .pn-row__main{gap:var(--space-1)}
.pn-row__main > .pn-al__txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;font:var(--type-body);color:var(--ink)}
.pn-al__txt b{font-weight:700}
.pn-alert.is-unread .pn-row__main > .pn-al__txt{font-weight:600}
.pn-row__main > .pn-al__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0;white-space:normal;overflow:visible;font:var(--type-meta);color:var(--ink-2)}
.pn-al__who{flex:none;display:inline-flex;align-items:center}
.pn-al__who .pc-avatar{box-shadow:0 0 0 2px var(--surface)}
.pn-al__who.is-stack .pc-avatar + .pc-avatar{margin-left:calc(-1 * var(--space-2))}
.pn-al__snip{flex:0 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
.pn-al__meta time{flex:none;font-variant-numeric:tabular-nums}
.pn-alert.is-unread .pn-al__meta time{color:var(--ink);font-weight:var(--w-strong)}
.pn-al__thumb{flex:none;width:44px;height:56px;border-radius:var(--r-s)}
.pn-alertsnone[hidden]{display:none}

/* ==========================================================================
   Tablet + desktop
   ========================================================================== */
@media (min-width:701px){
  .pn-chatpage{border-radius:var(--r-l)}
}
/* Desktop: the chat list card (360) beside the thread card, gap 16. The rail head, its bar and its rows keep one inset
   (--panel-pad) and one shape in the list view and beside a thread, so a click on a chat moves nothing (MCT-027 / -028). */
@media (min-width:1024px){
  .pn-chatshell--thread{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--stack-gap)}
  .pn-chatshell--thread > .pn-chatrail{display:flex}
  .pn-chatrail.is-rail{flex-direction:column;min-height:0;padding:0;overflow:hidden}
  .is-rail .pn-chatrail__head,.is-inboxrail > .pn-apphead{flex:none;display:grid;gap:var(--space-4);margin:0;padding:var(--panel-pad) var(--panel-pad) var(--space-4);min-height:0}
  .is-rail .pn-chatrail__title{margin:0}
  .is-rail .pn-paystrip{margin:0 var(--panel-pad) var(--space-4)}
  /* UX 21.10. UX5S-065: the inbox rail (360 px) keeps the strip's key — it was hidden, so on a laptop the pay strip was only text */
  .is-rail .pn-paystrip{flex-wrap:wrap}
  .is-rail .pn-paystrip__txt{flex-basis:calc(100% - 52px)}
  .is-rail .pn-paystrip__cta{flex-basis:100%;justify-content:center;margin-left:0}
  :is(.is-rail,.is-inboxrail) .pn-inbox__bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);margin:0;padding:0 var(--panel-pad) var(--space-4)}
  :is(.is-rail,.is-inboxrail) .pn-inbox__search{grid-column:1 / -1;max-width:none}
  .is-rail .pn-inbox__search{max-width:none}
  .is-rail .pn-chatrail__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--list-pad) var(--list-pad);scrollbar-width:thin}
  .is-rail .pn-threads.pn-panel,.is-rail .pn-orders.pn-panel{padding:0}
  .is-rail .pn-orow .pn-order__actions{margin-left:0}
  .is-rail .pn-inbox__morewrap{margin-top:var(--space-2)}
  .is-split .pn-chathead__back{display:none}
  /* polish r4: the messages inbox keeps the thread page's shape: the list as the 360 rail card (its page h1 in the
     rail head), the "pick a conversation" card beside it at the rail's height (content near its top). */
  .pn-chatshell--inbox.is-msgsplit{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--stack-gap);align-items:stretch}
  .pn-chatrail.is-inboxrail{display:flex;background:var(--surface);border:0;border-radius:var(--r-l)}
  .is-inboxrail .pc-apphead__tabs,.is-inboxrail > .pc-band .pc-apphead__tabs{margin:0}
  .is-inboxrail > .pc-band::before,.is-inboxrail > .pc-band::after{content:none}   /* inside the rail card: no page-head band */
  .is-inboxrail .pn-threads.pn-panel{padding:0;background:transparent;border-radius:0}
  .is-inboxrail .pn-chatrail__list{padding:0 var(--list-pad) var(--list-pad)}
  .is-inboxrail > :is(.pn-turnline,.pn-lccancelline){margin:0 var(--panel-pad) var(--space-4)}
  /* the thread page's rail title takes the page h1 size too, so the two heads match */
  :is(.is-rail .pn-chatrail__title,.is-inboxrail > .pn-apphead h1){font:var(--type-h1);letter-spacing:var(--tr-h)}
  .is-inboxrail > .pn-apphead .pc-sub{display:none}
  .is-inboxrail .pn-chatrail__list{overflow:visible}
  .pn-chatpick{display:flex;flex-direction:column;min-width:0}
  .pn-chatpick__in{flex:1;display:flex;flex-direction:column}
  .pn-chatpick .pc-empty{flex:1;justify-content:center;padding:var(--space-12) var(--space-6)}   /* MCT-037: centred, no 88 px drop */
  /* Desktop Orders (CH-10): the whole column is the list, one row = photo + text | buttons. */
  /* polish r4: text | price | buttons on the row's centre line, columns shared by the rows of a group (subgrid, so the
     prices line up); the buttons size to their labels (min 168, so single buttons of neighbouring groups line up). */
  .pn-chatshell--inbox.is-orders .pn-ogroup{grid-template-columns:minmax(0,1fr) auto auto}
  .pn-chatshell--inbox.is-orders .pn-ogroup > *{grid-column:1 / -1}
  .pn-chatshell--inbox.is-orders .pn-orow{grid-template-columns:subgrid;align-items:center;column-gap:var(--space-6)}
  .pn-chatshell--inbox.is-orders .pn-orow__price{justify-self:end}
  .pn-chatshell--inbox.is-orders .pn-orow__top .pc-price{display:none}
  .pn-chatshell--inbox.is-orders .pn-orow__price{display:block}
  .pn-chatshell--inbox.is-orders .pn-orow .pn-order__actions{margin-left:0;justify-self:end;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(168px,auto)}
}
@media (min-width:701px) and (max-width:1023px){
  .pn-chatshell--thread > .pn-chatrail{display:none}
}

/* ==========================================================================
   Phone: the thread is the whole screen (its own head on paper, no site header, no tab bar)
   ========================================================================== */
@media (max-width:700px){
  body:has(.pn-chatpage) .pc-header{display:none}
  body:has(.pn-chatpage) .pn-tabbar{display:none}
  body:has(.pn-chatpage){--dock:calc(var(--space-3) + env(safe-area-inset-bottom))}
  body:has(.pn-chatpage) .pn-main{padding:0}
  /* polish-b 02.10.: the member frame's --app-top (layout.css, 0,4,1) out-ranked the line above and left a 20 px strip of
     page ground over the thread head; the full-screen thread starts at the very top like a native one. */
  body.pc-root:not(.pc-guest):not(.pn-joinbody):has(.pn-chatpage) .pn-main{padding-top:0}
  .pn-chatpage{border:0;border-radius:0}
  /* MCT-042 / MCT-045: the phone head is the bar (chrome), 64 tall, 12 on both sides */
  .pn-chathead{min-height:64px;gap:var(--space-2);padding:max(var(--space-2),env(safe-area-inset-top)) var(--space-3) var(--space-2) max(var(--space-3),env(safe-area-inset-left));background:var(--chrome)}
  .pn-chatwho .pc-avatar__dot{--dot-ring:var(--chrome)}
  .pn-chatwho{padding-right:var(--space-2)}
  /* owner 04.11. ("was soll die gap da links beim avatar"): on the bar the head took the paper's ink — in the light theme the
     back key and the menu key were dark on dark (an empty gap before the avatar), the name nearly invisible, the verified
     mark dark red. Everything on the bar reads in the bar's own colours, in both themes. */
  .pn-chathead{color:var(--on-chrome)}
  .pn-chathead > .pc-iconbtn{background:var(--chrome-well);color:var(--on-chrome)}
  .pn-chathead > .pc-iconbtn:hover{background:var(--chrome-well-hover);color:var(--on-chrome)}
  a.pn-chatwho:hover{background:var(--chrome-well)}
  .pn-chatwho__name{color:var(--on-chrome)}
  .pn-chatwho__sub{color:var(--on-chrome-2)}
  .pn-chatwho__name .pc-verified{color:var(--pink)}
  .pn-msgs{padding:var(--space-4) var(--space-3)}
  /* round 2, audit 3 #63 (a layout fix for everyone): with the paybar echoing (hidden), the sealed card's key and its line
     were the last thing on screen, under the home indicator — the log keeps the dock's room at its end */
  .pn-chatpage:has(> .pn-paybar.is-echo:not(.is-shown)) .pn-msgs{padding-bottom:var(--dock)}
  .pn-composer{padding:var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom))}
  /* Docked = compact (head + line + Unlock + "Send a listing"); a tap on the handle opens the full sheet. The head stays
     visible (MCT-130: the bar's lead was a 13 px grey sentence, its heading for screen readers only). */
  .pn-paybar.pn-sheet{padding:var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))}
  .pn-paybar__top{margin-bottom:var(--space-3)}
  .pn-paybar.is-docked:not(.is-open) .pn-senditem > summary{width:var(--control-md);min-width:var(--control-md);padding:0;gap:0}
  .pn-paybar.is-docked:not(.is-open) .pn-senditem__t{display:none}   /* the summary keeps its aria-label */
  .pn-paybar.is-open .pn-paybar__acts{grid-template-columns:minmax(0,1fr)}
  .pn-paybar.is-open .pn-senditem > summary{width:100%}
  .pn-paybar.is-open .pn-senditem__list{left:0;right:auto}
  /* support 01.11. ("list won't scroll"): inside the bottom sheet (overflow:auto) a picker floating above the button was cut
     off and a swipe moved the sheet; on phones it sits in the flow under the button and scrolls on its own */
  .pn-paybar .pn-senditem__list{position:static;width:100%;max-height:min(300px,45svh);margin-top:var(--space-2);box-shadow:none;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .pn-inbox__search{flex-basis:100%;max-width:none}
  .pn-orow .pn-order__actions{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .pn-menu,.pn-menu__scrim,.pn-menuwrap.is-sheet .pn-menu.pn-sheet,.pn-toast,.pn-threadrow.is-leaving,.pn-msg__more,.pn-threadrow__more,.pn-threadrow__top time,.pn-threadrow .pn-dot,.pn-chatwho{transition:none}
  .pn-msg.is-flash .pc-bubble{animation:none;box-shadow:0 0 0 3px var(--accent-soft)}
  .pn-order:target,.pn-offer:target{animation:none}
}
/* Reviews (owner 01.10., docs/reviews.md): the rating state of a completed order — "Rate your order" (the next step: the
   pink button on the dark card, ink in the Orders list), or the stars given. The sheet: kit .pn-sheet, five big stars
   (reversed in the DOM so a hovered / checked star lights the ones before it), the text with its live count, the three
   checks as kit chips, one pink send. */
.pn-orate{display:grid;gap:var(--space-1);margin:0}
/* deals (owner 05.10., lib/deals.php): the handshake cards at the top of the thread — the order card's panel (surface,
   --r-l, --panel-pad, MCT-081), the round well (surface 2, ink icon) says the state (tag = sold, check = received, clock =
   not yet), the buttons sit on the buyer's card only: two keys of one height (MCT-083). */
.pn-deals{display:grid;gap:var(--space-3);width:var(--thread-col,min(100%,560px));align-self:center}
.pn-deal{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-deal__ico{flex:none;width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--surface-2);color:var(--ink)}
.pn-deal.is-declined .pn-deal__ico{background:var(--surface-2);color:var(--ink-2)}
.pn-deal__main{display:grid;gap:var(--space-1);min-width:0;flex:1}
.pn-deal__h{font:var(--type-strong);color:var(--ink)}
.pn-deal__item{font:var(--type-body);color:var(--ink);overflow-wrap:anywhere}
.pn-deal__line{font:var(--type-meta);color:var(--ink-2)}
.pn-deal__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.pn-deal__acts .pc-btn{min-height:var(--control-md)}
@media (max-width:700px){.pn-deal__acts .pc-btn{flex:1 1 0}}
.pn-deal__acts.is-busy{opacity:.6;pointer-events:none}
.pn-deal__rate{margin-top:var(--space-2)}
.pn-deal .pn-orate{margin-top:var(--space-2)}
/* Ships first (09.10., lib/ships_first.php): the label, the proof of shipping, the buyer record under the chat head, the
   proof sheet. Quiet surfaces and 50 % grey lines; the step buttons are the kit's (one pink key per card). */
.pn-deal__sf{align-self:flex-start;justify-self:start;display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;margin:var(--space-1) 0;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-2);font:var(--type-cap);color:var(--ink-2)}
.pn-deal__sf .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-deal__proof{display:grid;gap:var(--space-1);margin:var(--space-1) 0;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
.pn-deal__proofh{font:var(--type-cap);color:var(--ink-2)}
.pn-deal__track{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font:var(--type-meta);color:var(--ink);min-width:0}
.pn-deal__track code{font:var(--type-label);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pn-deal__track a,.pn-deal__photo span{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-deal__photo{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap);font:var(--type-meta)}
.pn-deal__photo img{flex:none;width:56px;height:56px;object-fit:cover;border-radius:var(--r-s)}
.pn-sfrep{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);overflow-x:auto;scrollbar-width:none;white-space:nowrap;background:var(--surface);font:var(--type-cap);color:var(--ink-2)}
.pn-sfrep > *{flex:none}
.pn-sfrep__h{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:600;color:var(--ink)}
.pn-sfrep__h .pc-ico,.pn-sfrep__block .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-sfrep__i b{margin-right:var(--space-1);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pn-sfrep__i.is-warn b,.pn-sfrep__block{color:var(--danger)}
.pn-sfrep__block{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:600}
.pn-sfrep--sheet{flex-wrap:wrap;white-space:normal;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-3)}
.pn-dealsheet__sf{padding:var(--space-3) 0;min-height:56px}
.pn-dealsheet__sf b{display:inline-flex;align-items:center;gap:var(--space-1)}
.pn-dealsheet__sfno{margin:0}
.pn-sfsheet__item{margin:0;font:var(--type-strong);color:var(--ink);overflow-wrap:anywhere}
.pn-sfsheet__row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.pn-sfsheet__file{align-self:flex-start;cursor:pointer;max-width:100%}
.pn-sfsheet__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-sfsheet[open]:not(:modal){position:fixed;inset:auto 0 0;z-index:50;margin:0 auto;max-height:90dvh;overflow:auto}
@media (max-width:560px){.pn-sfrep{padding:var(--space-2) var(--space-3)}.pn-sfsheet__row{grid-template-columns:1fr}}
.pn-lcsold{color:var(--ink)}   /* MCT-113: only Send is pink in the composer row */
.pn-orate__left{margin:0;font:var(--type-meta);color:var(--ink-2)}
p.pn-orate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font:var(--type-label);color:var(--ink-2)}
.pn-ratestars .pn-dtstars__off{color:var(--glyph-off)}   /* MCT-084: stars ink, the empty ones the glyph grey (§2.3) */
.pn-ratestars{font:var(--type-ui);letter-spacing:2px;color:var(--ink)}
.pn-orow .pn-orate{margin-left:72px;max-width:440px}
.pn-revsheet__form{display:grid;gap:var(--space-3)}
.pn-revsheet__form .pn-sheet__head{margin-bottom:0}
.pn-revsheet h2[tabindex="-1"]:focus:not(:focus-visible){outline:0}   /* a heading that only holds the start point */
.pn-revsheet__order{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border-radius:var(--r-m);background:var(--surface-3)}
.pn-revsheet__img{flex:none;width:44px;height:56px;border-radius:var(--r-s);overflow:hidden;background:var(--ph-media)}
.pn-revsheet__txt{flex:1;min-width:0;display:grid;gap:var(--space-1)}
.pn-revsheet__txt b{font:var(--type-strong);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-revsheet__txt span{font:var(--type-meta);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-revstars,.pn-revchecks{min-width:0;margin:0;padding:0;border:0}
.pn-revstars legend,.pn-revchecks legend{margin-bottom:var(--space-2);padding:0}
/* Innen 500 BUY-13: the stars are 1…5 in the DOM too (keys and screen readers in the order the eye reads); a star lights the ones before it through :has() */
.pn-revstars__row{display:flex;justify-content:flex-start;gap:var(--space-1)}
.pn-revstars__row label{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-full);color:var(--glyph-off);cursor:pointer;transition:color var(--dur-1)}
.pn-revstars__row label .pc-ico{width:32px;height:32px;stroke-width:1.8}
.pn-revstars__row:has(label:hover) label,.pn-revstars__row:not(:has(label:hover)):has(input:checked) label{color:var(--ink)}
.pn-revstars__row:has(label:hover) label .pc-ico,.pn-revstars__row:not(:has(label:hover)):has(input:checked) label .pc-ico{fill:currentColor}
.pn-revstars__row:has(label:hover) label:hover ~ label,.pn-revstars__row:not(:has(label:hover)) input:checked ~ input + label{color:var(--glyph-off)}
.pn-revstars__row:has(label:hover) label:hover ~ label .pc-ico,.pn-revstars__row:not(:has(label:hover)) input:checked ~ input + label .pc-ico{fill:none}
.pn-revstars__row input:focus-visible + label{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-revstars__row input[aria-invalid] ~ label{color:var(--danger)}
.pn-revstars__word{min-height:18px;margin:var(--space-1) 0 0;font:var(--type-label);color:var(--ink-2)}
.pn-revsheet__body{min-height:110px;resize:vertical}
.pn-revsheet__count{display:flex;justify-content:space-between;gap:var(--space-3);margin:var(--help-gap,var(--space-1)) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-revsheet__count [data-review-count]{flex:none;font-variant-numeric:tabular-nums}
.pn-revchecks__row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-revcheck .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6;opacity:.35}
.pn-revcheck:has(input:checked){background:var(--accent-soft);color:var(--ink)}
.pn-revcheck:has(input:checked) .pc-ico{opacity:1}
.pn-revcheck:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-revsheet__err{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-3);font:var(--type-label);color:var(--danger)}
.pn-revsheet__err[hidden]{display:none}
.pn-revsheet__fine{margin:0;text-align:left}
.pn-revsheet__form.is-busy button[type=submit]{opacity:.6;pointer-events:none}
@media (max-width:560px){.pn-orow .pn-orate{margin-left:0}}
/* legacy chat (docs/legacy-chat-03-10.md): the pnew thread on legacy rows. A legacy photo is a preview + one-time
   download (legacy's attachment.php), a listing/offer card can sit under a text bubble, the error line waits hidden. */
.pn-chaterr[hidden]{display:none}
.pn-lcatt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:0 0 var(--space-2)}
.pn-lcatt__img{display:block;width:120px;height:120px;object-fit:cover;border-radius:var(--r-s);background:var(--surface-2)}
.pn-lcatt__note{font:var(--type-meta);color:var(--ink-2)}
.pn-lcatt.is-gone{flex-direction:row;align-items:center;font:var(--type-meta);color:var(--ink-2)}
.pn-lcatt .pc-chip{min-height:var(--control-sm)}
.pn-msg > .pn-lcatt{margin:var(--space-2) 0 0}
.pn-lccard{display:flex;margin:var(--space-2) 0 0}
.pn-msg--out .pn-lccard{justify-content:flex-end}
.pn-lcorder{text-decoration:none;color:var(--ink)}
.pn-lcfile{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4)}
.pn-lcfile[hidden]{display:none}
.pn-lcfile__name{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink-2)}
.pn-composer.is-busy .pn-send{opacity:.5;pointer-events:none}
.pn-msg.is-busy{opacity:.5}
/* ad5 (docs/ad5-03-10.md): the legacy chat's last weaknesses.
   - First message: who you write to (the kit avatar, lg) and three starter pills (the .tabs-app pill) on the empty log.
   - The room left: a small paper pill in the field's bottom right corner (the mockup .chip), danger once over.
   - Lock lines (limit, blocked, gone, read only): icon + words as one left-aligned line, centred in the bar; read only
     adds its one pink key, "Reply on the classic page".
   - Send a listing: the sheet rows carry the listing's photo and price (pnew_lc_my_listings_shown). */
/* MCT-053: with cards or messages on the log, the intro steps back to its starter chips (left, a row above the composer) */
.pn-msgs:has(> .pn-msg, > .pn-deals) > .pn-lcfirst{align-self:stretch;align-items:flex-start;max-width:none;margin:var(--space-3) 0 0;padding:0}
.pn-msgs:has(> .pn-msg, > .pn-deals) > .pn-lcfirst > :not(.pn-lcfirst__chips){display:none}
.pn-msgs:has(> .pn-msg, > .pn-deals) > .pn-lcfirst > .pn-lcfirst__chips{justify-content:flex-start}
.pn-msgs:has(> .pn-msg, > .pn-deals) > p.pn-chatempty{margin:var(--space-6) 0 0}
.pn-lcfirst{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:var(--thread-col,100%);max-width:420px;padding:var(--space-6) var(--space-4)}
/* U5 (owner 18.10.): the listing his first message is about — one tonal line over the composer, × leaves it out */
.pn-lcabout{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-label);color:var(--ink)}
.pn-lcabout > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lcabout > svg{flex:none;color:var(--ink-2)}
.pn-lcabout__x.pc-remove{position:static;flex:none}
.pn-lcfirst__name{font:var(--type-title);color:var(--ink);overflow-wrap:anywhere}
.pn-lcfirst__t{margin:0 0 var(--space-2);font:var(--type-body);color:var(--ink-2)}
.pn-lcfirst__chips{justify-content:center;flex-wrap:wrap;gap:var(--space-2)}
.pn-lcfirst__chips .pc-chip{min-height:var(--control-sm);white-space:normal;text-align:center}
.pn-lcbody{position:relative;flex:1;min-width:0;display:flex}
.pn-lcbody > textarea.pc-input{flex:1;min-width:0}
/* fix-chatbox 26.10.: up to 3 keys (photo, Sold, listings) squeezed a seller's field to a sliver on phones; when the row
   cannot give it 160 px the keys take their own line above it (tests/chatbox_composer_test.php) */
form.pn-composer{container:pnlc / inline-size}
@container pnlc (max-width:389px){.pn-composer__row:has(> :nth-child(5)){flex-wrap:wrap}.pn-composer__row:has(> :nth-child(5)) > .pn-lcbody{flex:1 1 calc(100% - 56px)}}
@container pnlc (max-width:335px){.pn-composer__row:has(> :nth-child(4)){flex-wrap:wrap}.pn-composer__row:has(> :nth-child(4)) > .pn-lcbody{flex:1 1 calc(100% - 56px)}}
.pn-lccount{position:absolute;right:var(--space-3);bottom:var(--space-2);z-index:1;padding:var(--space-1) var(--space-2);border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2);font:var(--type-cap);font-variant-numeric:tabular-nums;pointer-events:none}
.pn-lccount[hidden]{display:none}
.pn-lcbody:has(.pn-lccount:not([hidden])) > textarea.pc-input{padding-right:72px}
.pn-lccount.is-over{color:var(--danger)}
.pn-composer.is-over textarea.pc-input{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-composer.is-locked{flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.pn-lclock{display:flex;align-items:flex-start;gap:var(--space-2);max-width:60ch;margin:0;text-align:left}
.pn-lclock .pc-ico{flex:none;margin-top:2px}
.pn-lclock time{color:var(--ink);font-weight:var(--w-strong)}
.pn-lcread__go{flex:none}
@media (max-width:700px){.pn-lcread{flex-direction:column;align-items:stretch}.pn-lcread .pn-lclock{align-self:center}.pn-lcread__go{width:100%}}
.pn-lcfile{padding:0 var(--space-2);gap:var(--space-3)}
.pn-lcfile .pn-tray__c{width:56px;height:56px}
.pn-menu__item.has-img{min-height:64px;padding:var(--space-2) var(--space-3)}
.pn-menu__img{flex:none;width:48px;height:48px;border-radius:var(--r-s);object-fit:cover;background:var(--surface-2)}
.pn-menu__two{display:grid;gap:var(--space-1);min-width:0}
.pn-menu__two > span{overflow-wrap:anywhere}
.pn-menu__two small{font:var(--type-meta);color:var(--ink-2)}
/* Guest message (owner 08.10., package GM, lib/guest_msg.php): the one line above his composer about the message he wrote
   to her as a guest (sending it / ready / it went out / try again / it cannot go from here, with his words quoted). */
.pn-gmnote{flex:none;display:grid;gap:var(--space-2);margin:var(--space-3) var(--space-4) 0;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink-2)}
.pn-gmnote__t{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0}
.pn-gmnote__t .pc-ico{flex:none;color:var(--ink)}
.pn-gmnote__t span{flex:1 1 200px;min-width:0}
.pn-gmnote[data-state="sent"]{color:var(--ink)}
.pn-gmnote__go{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
.pn-gmnote__go[hidden]{display:none}
.pn-gmnote__quote{margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-3);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}

/* ==========================================================================
   Support chat (owner 09.10., lib/support.php): the pinned conversation of the chat list, the conversation
   /account/support/ (templates/support.php): the "Team" chip, the topic picker, the help articles while he types,
   the automatic first answer, the screenshot. Everything else is the thread's own look above.
   ========================================================================== */
.pn-suppin.pn-panel{padding:var(--list-pad);margin-bottom:var(--space-1)}   /* MCT-026: the pinned row reads as the first row of the list under it */
.pn-suppin .pn-threadrow:hover .pn-threadrow__top time,.pn-suppin .pn-threadrow:hover .pn-dot,.pn-suppin .pn-threadrow:focus-within .pn-threadrow__top time,.pn-suppin .pn-threadrow:focus-within .pn-dot{opacity:1}   /* no row menu: nothing hides */
.pn-suppin .pn-threadrow__top b{flex:0 1 auto}
.pn-suppin .pn-threadrow__top time{margin-left:auto}
.pn-supav{background:var(--chrome)}
.pn-supav img{border-radius:inherit}
.pn-supteam{flex:none;gap:var(--space-1);min-height:20px;padding:var(--space-1) var(--space-2);border:0;background:var(--surface-2);color:var(--ink);font:var(--type-cap);letter-spacing:0;text-transform:none}
.pn-supteam .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink)}   /* UX 433 G-063: the Team chip at full ink (was 2.58:1) */
.pn-supname{display:flex;align-items:center;gap:var(--space-2);overflow:visible}
.pn-sup .pn-chatwho{cursor:default}
body:has(.pn-sup) .pn-suppin .pn-threadrow{background:var(--surface-2)}   /* MCT-136: the support row is the current row while its page is open */
.pn-supintro .pc-avatar{margin-bottom:var(--space-1)}
.pn-supauto .pc-bubble{display:grid;gap:var(--space-1)}
.pn-supauto__l{font:var(--type-cap);color:var(--ink-2)}
.pn-supauto__h{margin:var(--space-1) 0 0;font:var(--type-label);color:var(--ink)}
.pn-supauto__list{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
/* UX 20.10. UX-190: the status line under his first message, the articles folded below it */
.pn-supauto__more{margin:var(--space-1) auto 0;max-width:420px;font:var(--type-meta);color:var(--ink-2)}
.pn-supauto__more summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;justify-content:center;font-weight:var(--w-strong)}
.pn-supauto__more .pn-supauto__list{padding:0 var(--space-2)}
.pn-supauto__list a{display:flex;align-items:center;min-height:var(--tap);color:var(--ink);font:var(--type-strong);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.pn-sup .pn-bubble__text a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.pn-supatt{display:block;max-width:260px;border-radius:var(--r-m);overflow:hidden;background:var(--surface-2)}
.pn-supatt img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.pn-supatt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* the help articles above the composer (deflection): a note (surface 2, --r-m, 12 / 16), its rows 44 (MCT-137); the pink key stays the send button */
.pn-supsug{flex:none;display:grid;gap:var(--space-2);margin:var(--space-3) var(--space-4) 0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-supsug[hidden],.pn-supdone[hidden]{display:none}
.pn-supsug__h{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-supsug__list{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
.pn-supsug__list a{display:grid;gap:var(--space-1);min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);color:var(--ink);text-decoration:none}
.pn-supsug__list a:hover,.pn-supsug__list a:focus-visible{background:var(--surface-3)}
.pn-supsug__list b{font:var(--type-strong);text-decoration:underline;text-underline-offset:3px}
.pn-supsug__list span{font:var(--type-meta);color:var(--ink-2)}
.pn-supsug__yes{justify-self:start}
.pn-supdone{flex:none;display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) var(--space-4) 0;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-body);color:var(--ink)}
.pn-supdone .pc-ico{flex:none;color:var(--success)}
.pn-suptopics{min-width:0;margin:0;padding:0;border:0}
.pn-suptopics__l{padding:0;margin:0 0 var(--space-2);font:var(--type-label);color:var(--ink-2)}
.pn-suptopics .pc-chips{gap:var(--space-2)}
.pn-suptopics .pc-chip{min-height:var(--control-sm);white-space:nowrap;background:var(--surface-2)}   /* UX 433 G-062: a surface in both themes */
.pn-suptopics .pc-chip:has(input:checked){background:var(--accent-soft);color:var(--ink)}   /* MCT-115: the kit's chosen chip */
.pn-suptopics.is-missing .pn-suptopics__l{color:var(--danger)}
@media (max-width:700px){
  /* UX 433 G-062 (round 2): the topics wrap (every option seen, nothing behind an edge); two short rows at 390 px */
  .pn-suptopics .pc-chips{flex-wrap:wrap}
  .pn-supsug,.pn-supdone{margin-inline:var(--space-3)}
}
/* UX 20.10. UX-079: the line above the inbox when an order waits for him (Pay now, Did it arrive?) — no pink, a link row */
.pn-turnline{align-items:center;margin:0 0 var(--space-3);text-decoration:none;background:var(--surface-2)}
.pn-turnline:hover{background:var(--surface-3)}

.pc-bubble:has(.pn-lcard) .pc-bubble__time,.pc-bubble--card .pc-bubble__time{opacity:1;color:var(--ink-2)}   /* visual audit VM-015: 3.0:1 at 10.5 px on the thread ground before */

/* owner 30.10.: the warning under a message that points to another app (both sides see it); tokens only, no line */
.pn-offwarn{display:flex;gap:var(--space-2);align-items:flex-start;max-width:var(--bubble-max,min(78%,436px));margin:var(--space-2) 0 var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-meta)}
.pn-msg--out .pn-offwarn{margin-left:auto}
.pn-offwarn .pc-ico{flex:none;margin-top:1px;color:var(--warning)}

/* @member-only */
/* chat entrance (owner 07.11., lib/chat_inbox.php, partials/cin_*.php): the group row with icons above the conversations,
   a Basic seller's line «N buyers want to contact you», the open group's people. Tonal surfaces, no edges (owner 09.10.). */
.pn-cin{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-1);margin:0 0 var(--space-3);padding:var(--space-1);border-radius:var(--r-l);background:var(--surface-2)}
.pn-cin__chip{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-1);min-width:0;min-height:56px;padding:var(--space-2) 2px;border-radius:var(--r-m);color:var(--ink-2);text-align:center;text-decoration:none;transition:background-color var(--dur-1),color var(--dur-1)}
.pn-cin__chip:hover{background:var(--surface-3);color:var(--ink)}
.pn-cin__chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pn-cin__chip.is-selected{background:var(--accent);color:var(--on-accent)}
.pn-cin__top{display:inline-flex;align-items:center;gap:var(--space-1)}
.pn-cin__ico{flex:none}
.pn-cin__chip:not(.is-selected) .pn-cin__ico{color:var(--accent)}
.pn-cin__chip[data-cin="hot"]:not(.is-selected) .pn-cin__ico{color:var(--warning)}
.pn-cin__n{color:inherit;font:var(--type-label);font-weight:700;font-variant-numeric:tabular-nums}
.pn-cin__t{display:-webkit-box;max-width:100%;overflow:hidden;font:var(--type-cap);font-weight:600;line-height:1.2;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:break-word;hyphens:auto}
.pn-cin__lock{flex:none;opacity:.6}
.pn-cinfree{margin:0 0 var(--space-3);padding:var(--space-4);border-radius:var(--r-l);background:var(--accent-soft)}
.pn-cinfree__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.pn-cinfree__faces{flex:none;display:flex}
.pn-cinfree__faces .pc-avatar{filter:blur(3px);box-shadow:0 0 0 2px var(--surface)}
.pn-cinfree__faces .pc-avatar+.pc-avatar{margin-left:-12px}
.pn-cinfree__ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.pn-cinfree__txt{flex:1 1 220px;min-width:0}
.pn-cinfree__h{margin:0;color:var(--ink);font:var(--type-title)}
.pn-cinfree__p{margin:var(--space-1) 0 0;color:var(--ink-2);font:var(--type-meta)}
.pn-cinfree__cta{flex:none}
@media (max-width:599px){.pn-cinfree__cta{width:100%}}
.pn-cinfree__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.pn-cinfree__stat{display:flex;align-items:baseline;gap:var(--space-2);min-height:var(--tap);padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2);font:var(--type-meta);text-decoration:none}
.pn-cinfree__stat b{color:var(--ink);font:var(--type-title);font-variant-numeric:tabular-nums}
.pn-cinfree__stat:hover{background:var(--surface-3)}
.pn-cinfree__stat:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pn-cinlist__lead{margin:0 0 var(--space-3);color:var(--ink-2);font:var(--type-meta)}
.pn-cinlist__rows{margin:0;padding:0;list-style:none}
.pn-cinrow__who{display:flex;flex:1;align-items:center;gap:var(--space-3);min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-cinrow__who:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pn-cinrow__name{display:block;overflow:hidden;color:var(--ink);font:var(--type-strong);text-overflow:ellipsis;white-space:nowrap}
.pn-cinrow__meta{display:block;overflow:hidden;color:var(--ink-2);font:var(--type-meta);text-overflow:ellipsis;white-space:nowrap}
.pn-cinrow__spots{display:flex;align-items:center;gap:3px;margin-top:var(--space-1)}
.pn-cinrow__spots i{width:14px;height:4px;border-radius:var(--r-full);background:var(--surface-3)}
.pn-cinrow__spots i.is-used{background:var(--accent)}
.pn-cinrow__spots em{margin-left:var(--space-2);color:var(--accent);font:var(--type-cap);font-style:normal}
.pn-cinrow__form{flex:none;margin:0}
.pn-cinrow__go{flex:none}
@media (max-width:389px){.pn-cinrow__go span{display:none}.pn-cinrow__go{min-width:var(--tap);padding-inline:0}}
@media (min-width:1024px){
  :is(.is-rail,.is-inboxrail) :is(.pn-cin,.pn-cinlist__lead){margin-inline:var(--panel-pad)}
  :is(.is-rail,.is-inboxrail) .pn-cinfree{margin-inline:var(--panel-pad)}
}
/* @end-member-only */

/* PM 500 kaeufer deal (08.11., partials/deal_card.php, lib/deals.php): KF-010 his answer chosen in the "Did it arrive?" mail
   (?deal=&deal_a=) — the cards stay pinned on top of the thread until his tap (no edge: the accent-soft surface marks the
   card and the chosen key), the pay-first line and the "I have paid" key under his answers */
.pn-deals.has-pick{position:sticky;top:0;z-index:2}
.pn-deal.is-pick{background:var(--accent-soft,var(--surface-2))}
.pn-deal__pick{flex-basis:100%;margin:0;font:var(--type-meta);color:var(--ink)}
.pn-deal__acts .pc-btn.is-picked{box-shadow:0 0 0 3px var(--accent,var(--pink))}
.pn-deal__payfirst{flex-basis:100%;margin:0}
/* pnew page group: profile — storefront (member.php), photo/video feeds (feed.php), profile editor (profile_edit.php),
   the report sheet and the photo viewer. Design v2 "Bold Flesh" (docs/design-v2-system.md §7.26, plan §2.6 S8, §2.7).
   Tokens only. Shared primitives that other pages also use (.pn-play, .pn-dur, .pn-vslot, .pn-heart, .pn-flag,
   .pn-counter, .pn-fielderr, .pn-row--danger, .pn-gatebar) stay unscoped; everything else is scoped to its page. */

/* ========== Storefront ========== */



.pn-flag{width:16px;height:16px;border-radius:var(--r-full);object-fit:cover;margin-right:var(--space-2);vertical-align:-3px}
.pn-offers{margin-top:var(--space-2)}
/* Head (.pn-sf, art-director round, owner 29.09.): one dark card exactly as tall as its content, no dead band, no mega name.
   Background: her cover photo, else her avatar enlarged + blurred, else the skin placeholder, always under a chrome shade.
   The crisp avatar print sits at its native square (400 px source, shown at 220 max: never upscaled), name + facts beside it,
   the BIG counts and the actions on the right. Text is cream on the shade in both themes. */

/* Brand pass (harmony rules §8/§9): the head card's bottom edge is cut with the pinking shears (--mask-zigzag, --edge-h),
   the same edge the landing's black BUY block carries: paper teeth (--bg) bite into the card. The shade, cover and print are untouched. */

.pn-sf__name--l,.pn-sf__name--xl{font-size:var(--fs-display);line-height:var(--lh-display)}
/* The hero is chrome in both themes: its pills take the chrome roles like the offer chips (was --accent-soft, which flipped to maroon in dark) */

   /* wizard.css styles a bare .pn-offers as a 2-column grid */

/* Big heart (follow/save) and "more": 58 circles next to the large Message button. */

@keyframes pn-pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Tabs: chips (46), counts at .6, sticky under the header on a frosted strip. */

.pn-proftabs .pn-chipn{font-style:normal}

/* Main + 340 aside. */



/* Side card column (≥1100): stretches along the main column, its content sticks under the tabs (short viewports: static). */


/* build3: "Her details" = the facts component (components.css); the head sits closer to the first row. */

/* Brand pass (inner pages AD, harmony rules §9 "profile facts"): the panel is her care label. Sewn-in shape (square top,
   round bottom), a dashed inner seam, the tub symbol in the head. The rows stay the lead's facts component. */

   /* integrator 29.09.: "Message valentina_93" on two lines, the name whole */
/* About: paragraphs (emoji decoded upstream), balanced breaks; two newspaper columns next to the side card on wide screens. */
   /* beats .pn-prose--body 68ch (guest_detail.css loads later) */


/* build3 PR-P1: a long bio folds to six lines behind "Read more" (JS only; no JS = the full text), and one quiet
   contact note under a guest bio replaces the "contact hidden" pills inside her text. */


.pn-specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}

/* Her ads: the v2 product card, 4 columns next to the aside. */



/* Media tiles: 4:5 photos, 9:16 videos, radius 14, locked = server blur + veil + black lock pill. */

   /* = .pc-lockpill (SH-11) */


.pn-play{position:relative;z-index:5;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-full);background:var(--glass);color:var(--on-media);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pn-play .pc-ico{transform:translateX(2px);fill:currentColor}
.pn-play--sm{width:36px;height:36px}
.pn-dur{position:absolute;right:8px;bottom:8px;z-index:5;height:24px;padding:0 var(--space-2);border-radius:var(--r-full);background:var(--glass-strong);color:var(--on-media);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:var(--type-cap);line-height:24px;font-variant-numeric:tabular-nums}
/* Videos box (aside): 3 columns of 9:16. */

   /* main column now: small 9:16 tiles, up to 4 */


/* Reviews box: stars in accent, the quote at 14, the writer at 12 --ink-2, hairlines between. */

.pn-review{display:grid;gap:var(--space-1);padding:var(--space-3) 0;min-width:0}
.pn-review:first-child{padding-top:4px}
.pn-review:last-child{padding-bottom:0}
.pn-review h3{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-review p{margin:0;font:var(--type-body);color:var(--ink);overflow-wrap:anywhere}
.pn-review footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2);font:var(--type-cap);color:var(--ink-2)}
.pn-review footer b{font-weight:700;color:var(--ink-2)}
/* Review cards (owner 29.09.: quality first, no long single column): a grid of surface cards, text keeps its line breaks. */

/* Brand pass (harmony rules §9 "reviews"): the rating summary is a receipt slip (the landing receipt's paper, dashed
   rule and pinked bottom edge), tilted one step. No stickers and no notes in the list itself. */


/* Phone message bar: a floating chrome pill in the tabbar style, above the tabbar, once the head's button scrolled away. */


/* ---------- Tablet (701–1099): the aside stacks under the main column ---------- */


/* ---------- Phone ---------- */
@media (max-width:700px){
  /* Head on phones: full bleed; the avatar print next to name + facts, chips, the three counts on one ruled row, the actions. */
  
  .pn-sf__name--l,.pn-sf__name--xl{font-size:var(--fs-h1);line-height:var(--lh-h1)}
                               /* build3 UI-1: text >= 12 */
  
                   /* build3 UI-1: 44 tap target */
  
  .pn-specs{grid-template-columns:minmax(0,1fr)}
                    }

/* ========== Upload grids (profile editor media manager, v3): square tiles radius 20 (the .pcard radius), the add slot
   is the dashed paper slot (components .pc-slot) with the 44 round line control and a small label ========== */
.pn-uploadgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:700px){.pn-uploadgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.pn-uploadgrid .pc-slot{position:relative;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;display:grid;place-items:center}
.pn-uploadgrid .pc-slot.is-filled{border:0;background:var(--surface-2)}
.pn-uploadgrid .pc-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-uploadgrid .pc-slot form{margin:0}
.pn-uploadgrid .pc-remove{top:8px;right:8px}
.pn-slot-add{transition:border-color var(--dur-fast)}
.pn-slot-add:hover{background:var(--surface-3)}
/* polish r4: the add tile is the item form's slot (.pn-slot.is-next, items.css); on phones the caps label drops a size. */
@media (max-width:430px){.pn-uploadgrid .pn-slot-add .pn-slot__in{gap:var(--space-1);padding:var(--space-1)}.pn-uploadgrid .pn-slot-add .pn-slot__t{font-size:var(--fs-cap);letter-spacing:0}}
.pn-slotaction{position:absolute;left:8px;bottom:8px;z-index:4;margin:0}
.pn-slotbtn{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:var(--glass-strong);color:var(--on-media);font:var(--type-label);white-space:nowrap;cursor:pointer}
.pn-slotbtn:hover{background:var(--glass-strong)}
.pn-processing{position:absolute;left:8px;bottom:8px;z-index:4}
.pn-vslot{background:var(--surface-2)}
.pn-slot-empty{border:0;cursor:default;background:var(--surface-2)}
.pn-slot-empty:hover{border:0}

/* ========== Feeds (feed.php): tile grid + gate bar ========== */


/* Gate bar = floating black chrome bar (count text + accent Premium CTA; guest = primary Join). Also on /videos/ for guests. */



/* ========== Profile editor (v3, docs/design-v3-system.md §4.5) ==========
   Panels in two balanced columns on desktop (seller: photos | videos, about | offers, details full; buyer: photos |
   about, interests | budget), one column on phones. The field form is display:contents so its panels join the grid.
   Labels on the photo: the ink label (cover), 18+ and the duration as small labels, never tilted. */
.pn-pe{display:grid;gap:0;align-content:start;min-width:0}
.pn-pe > .pc-alert{margin-bottom:var(--stack-gap)}
/* DS P5 MSL-132: panels never stretch */
.pn-pe__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);align-items:start}
.pn-pe__form{display:contents}
@media (min-width:1000px){
  .pn-pe__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-pe__details{grid-column:1 / -1}
  .pn-pe__grid:not(.pn-pe__grid--seller) .pn-pe__details{grid-column:auto}
  /* DS P5 MSL-133: Photos + offers left, About beside both, Details under */
  .pn-lp .pn-pe__grid--seller{grid-template-rows:auto 1fr}
  .pn-lp .pn-pe__grid--seller > .pn-lp__photos{grid-column:1;grid-row:1}
  .pn-lp .pn-pe__grid--seller .pn-pe__about{grid-column:2;grid-row:1 / span 2}
  .pn-lp .pn-pe__grid--seller .pn-pe__offers{grid-column:1;grid-row:2}
  .pn-lp .pn-pe__grid--seller .pn-pe__details{grid-column:1 / -1;grid-row:3}
  /* polish r4: photos | videos share their rows (subgrid), so both add tiles start at the same height whatever the
     help length; the heads keep their titles on one line. */
  .pn-pe__grid:has(> .pn-mm--video) > .pn-mm{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .pn-pe__grid:has(> .pn-mm--video) > .pn-mm > .pc-sechead{align-self:start;align-items:flex-start}
  .pn-pe__grid:has(> .pn-mm--video) > .pn-mm > .pc-sechead .pn-count{align-self:flex-start;margin-top:var(--space-1)}
  /* owner 05.10. ("zuviel Luft"): the switch rows keep their 60 px beside the taller About you; the panel ends after
     the last switch instead of stretching the rows over the column's height (r4 rule reverted). */
  .pn-pe__offers{display:flex;flex-direction:column;align-self:start}
  .pn-pe__offers > .pn-rows{flex:0 0 auto;align-content:start}
}
.pn-pe .pn-panel{min-width:0}
.pn-pe .pn-form{align-content:start}
.pn-mm .pc-sechead .pn-count{white-space:nowrap}
.pn-mm--video .pn-uploadgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.pn-mm--video .pn-uploadgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* same slot size as the photos: 4 columns left a 63px slot at 360 */
.pn-mmtile{isolation:isolate}
.pn-mmtile__open{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:inherit}
.pn-mmtile__open:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-mmtile__rm{margin:0}
.pn-mm .pc-remove{z-index:5}
.pn-mm .pc-remove::before{content:"";position:absolute;inset:-8px;border-radius:var(--r-full)}
.pn-mmtile .pc-badge{pointer-events:none}
/* The first photo is the cover: the ink label (the mockup .real geometry) bottom left. */
.pn-coverbadge{display:none;position:absolute;left:8px;bottom:8px;z-index:4;background:var(--prem-bg);color:var(--on-prem)}
.pn-mm[data-kind=photo] [data-grid] > .pn-mmtile:first-child .pn-coverbadge{display:inline-flex}
.pn-adultbadge{display:none;position:absolute;left:8px;top:8px;z-index:4;background:var(--glass-strong);color:var(--on-media)}
.pn-mmtile[data-adult="1"] .pn-adultbadge{display:inline-flex}
.pn-mmtile .pn-dur{position:absolute;right:8px;bottom:8px;z-index:4;background:var(--glass-strong);color:var(--on-media)}
.pn-mmtile.is-pending img{opacity:.55}
.pn-mmprog{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;height:4px;border-radius:var(--r-full);background:var(--glass-strong);overflow:hidden}
.pn-mmprog i{display:block;height:100%;background:var(--accent);transform:scaleX(.04);transform-origin:left;transition:transform var(--dur-1) linear}
.pn-mmtile.is-failed{display:grid;place-items:center;align-content:center;gap:var(--space-2);padding:var(--space-3);background:var(--surface-2);border:0}
.pn-mmfail{font:var(--type-cap);color:var(--danger);text-align:center}
.pn-mmtile.is-leaving{opacity:0;transition:opacity var(--dur-1) ease-out}
.pn-slot-add[hidden],.pn-pe [hidden]{display:none !important}
.pn-mm__hint{margin:var(--space-4) 0 0}
.pn-mm__err{margin-top:var(--space-4)}
/* Fields: one panel per topic; switch rows use the shared 52 x 30 switch. */
.pn-pe .pc-select{display:block}
.pn-pe .pc-field{align-content:start}
.pn-pe__offers > .pc-sechead{margin-bottom:var(--space-2)}
.pn-pe__offers .pn-rows{margin:0 calc(-1 * var(--space-3))}
.pn-selectgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--field-gap) var(--space-4)}
.pn-switchrow{cursor:pointer;min-height:56px}
.pn-switchrow:hover{background:var(--surface-2)}
.pn-switchrow input.pc-switch{margin-left:auto}
.pn-switchrow .pn-row__main > b{white-space:normal}
.pn-counter{margin:0;justify-self:end;text-align:right;font-variant-numeric:tabular-nums}
.pn-fielderr{margin:0;font:var(--type-label)}
.pn-pe .pc-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}   /* §6: the error ring inside the field */
.pn-pe [data-save].is-busy{opacity:.7;cursor:progress}
/* The action bar (ui_actionbar): the save state left, the one pink button right. */
.pn-pe > .pc-actionbar{margin-top:var(--stack-gap)}
/* DS P5 MSL-150: sticky Save on desktop too */
@media (min-width:701px){.pn-pe > .pc-actionbar{position:sticky;bottom:var(--space-4);z-index:var(--z-bar);background:var(--surface-2);box-shadow:var(--shadow-e1)}}
.pn-pe__state.is-dirty{color:var(--ink)}
.pn-pe__state.is-dirty::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:1px}
.pn-pe__views{display:none}
@media (max-width:700px){
  .pn-pe__offers .pn-rows{margin:0 calc(-1 * var(--space-2))}
  .pn-pe > .pc-actionbar .pc-actionbar__note{flex:1 1 100%;margin:0}
  /* The head row keeps "View" beside the h1 (as My pairs keeps New pair), so the lead follows the title directly. */
  .pn-pe .pn-apphead__row{flex-wrap:nowrap;align-items:center}
  .pn-pe .pn-apphead__row > h1{flex:1 1 auto;min-width:0}
  .pn-pe .pn-apphead__row > .pc-row{flex:none}
  .pn-pe__viewl{display:none}
  .pn-pe__views{display:inline}
  /* With JS (profile.js adds .is-live), the bar stays away while nothing changed and slides up with the first edit;
     a full save folds it again (the toast confirms). Without JS it is always there. */
  .pn-pe.is-live.is-clean > .pc-actionbar{display:none}
  .pn-pe.is-live:not(.is-clean) > .pc-actionbar{animation:pn-pe-bar .32s var(--ease-sheet) both}
}
@keyframes pn-pe-bar{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pn-pe.is-live > .pc-actionbar{animation:none}}

/* Media sheet (the editor's tile options): the shared sheet with a thumb in the head and option rows. */
.pn-mmsheet .pn-sheet__head{justify-content:flex-start}
.pn-mmsheet .pn-sheet__head > div{flex:1;min-width:0}
.pn-mmsheet .pn-sheet__head h2{font:var(--type-title);letter-spacing:0}
.pn-mmsheet .pn-sheet__head .pc-help{margin:var(--space-1) 0 0}
.pn-sheet__thumb{flex:none;width:56px;height:72px;border-radius:var(--r-m);overflow:hidden;background:var(--surface-3)}
.pn-sheet__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.pn-mmsheet .pn-sheet__x{flex:none;width:var(--tap);height:var(--tap)}
.pn-mmsheet .pn-rows{padding-top:var(--space-2)}
.pn-mmsheet button.pn-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pn-mmsheet button.pn-row:hover,.pn-mmsheet label.pn-row:hover{background:var(--surface-3)}
.pn-mmsheet button.pn-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-mmsheet button.pn-row:disabled{opacity:.38;cursor:default;background:none}
.pn-mmsheet .pn-row[hidden]{display:none}
.pn-mmsheet .pn-row__main > span{white-space:normal}
.pn-rowicon--adult{font:700 var(--fs-meta)/1 var(--body)}
.pn-row--danger .pn-row__main > b,.pn-row--danger .pn-rowicon{color:var(--danger)}

/* Toast: the chrome pill (.pc-toast look), above the action bar / tab bar. */
.pn-ptoast{position:fixed;left:50%;bottom:calc(var(--dock) + 60px + var(--toast-gap));z-index:var(--z-toast);max-width:calc(100% - 32px);min-height:48px;display:flex;align-items:center;padding:var(--space-3) var(--space-5);border-radius:var(--r-l);border:0;background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-e1);font:var(--type-strong);text-align:center;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity var(--dur-1) ease-out,transform var(--dur-2) ease-out}
.pn-ptoast:empty{display:none}
.pn-ptoast.is-on{opacity:1;transform:translate(-50%,0)}
.pn-ptoast.is-bad{background:var(--danger);color:var(--on-danger)}

/* ========== Photo viewer (feed.php): black stage, glass nav ========== */
.pn-viewer{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--backdrop);color:var(--on-media)}
.pn-viewer[open]{display:grid;place-items:center}
.pn-viewer::backdrop{background:var(--scrim)}
.pn-viewer img{max-width:min(100%,1100px);max-height:100%;object-fit:contain;user-select:none}
.pn-viewer__nav{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;padding:0;border:0;border-radius:var(--r-full);background:var(--glass);color:var(--on-media);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer}
.pn-viewer__nav:hover{background:var(--glass-strong)}
.pn-viewer__nav:active{transform:scale(.9)}
.pn-viewer__prev{left:max(16px,env(safe-area-inset-left))}
.pn-viewer__next{right:max(16px,env(safe-area-inset-right))}
.pn-viewer.is-single .pn-viewer__nav,.pn-viewer.is-single .pn-viewer__pos{display:none}
.pn-viewer__x{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pn-viewer__x .pc-ico{width:20px;height:20px}
.pn-viewer__pos{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);height:30px;padding:0 var(--space-3);border-radius:var(--r-full);background:var(--glass);font:600 var(--fs-meta)/30px var(--body);font-variant-numeric:tabular-nums}
@media (max-width:700px){.pn-viewer__nav{display:none}}
/* photos lightbox (owner 05.10., partials/photo_viewer): a locked photo = its blurred copy (or the bare stage) under the
   Premium box; the profile's tiles and "All photos" open the same dialog. */
.pn-viewer img.is-blank{display:none}
.pn-viewer.is-locked img{filter:blur(40px) saturate(.8);transform:scale(1.25)}
.pn-viewer__lock{position:absolute;left:50%;top:50%;z-index:2;display:grid;gap:16px;justify-items:center;width:min(92%,400px);padding:24px;border-radius:var(--r-l);background:var(--glass-strong);color:var(--on-media);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center;transform:translate(-50%,-50%)}
.pn-viewer__lock[hidden]{display:none}
.pn-viewer__locktxt{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-strong)}
.pn-viewer__locktxt .pc-ico{flex:none;color:var(--on-media)}

/* ========== Report sheet (safety) and the profile "more" ========== */
/* The shared .pn-sheet (components.css): bottom sheet on phones, 520 dialog on desktop. The form scrolls, the buttons stick. */
dialog.pn-sheet.pn-safety{width:min(520px,calc(100% - 48px));max-height:min(88vh,780px);padding:0;overflow:hidden}
.pn-safety[open]{display:flex}
.pn-safety:target:not([open]){display:flex;position:fixed;inset:auto 0 0;z-index:70;margin:0 auto}   /* no-JS fallback */
.pn-sheet.pn-safety .pn-safety__form{display:flex;flex-direction:column;gap:0;width:100%;min-height:0;margin:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-2) var(--space-6) 0}
.pn-safety .pn-sheet__grab{flex:none}
.pn-safety .pn-sheet__head{align-items:flex-start;gap:var(--space-3);margin:0;padding:var(--space-2) 0 var(--space-4)}
.pn-safety .pn-sheet__head > div{flex:1;min-width:0}
.pn-safety .pn-sheet__head .pc-help{margin:var(--space-1) 0 0}
.pn-safety__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);background:var(--surface-3);color:var(--ink)}
.pn-safety .pn-sheet__x{flex:none;width:var(--tap);height:var(--tap);margin:0 calc(-1 * var(--space-1)) 0 0}
.pn-safety .pn-sheet__x .pc-ico{width:20px;height:20px}
.pn-safety__reasons{margin:0;padding:var(--space-2) 0 0;border:0;min-width:0}
.pn-safety__legend{display:block;width:100%;margin:0;padding:var(--space-3) 0 var(--space-2);font:var(--type-cap);letter-spacing:0;color:var(--ink-2)}
.pn-safety__reason{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:60px;margin:0 calc(-1 * var(--space-3));padding:var(--space-2) var(--space-3);border-radius:var(--r-m);cursor:pointer;transition:background-color var(--dur-1) ease-out}
.pn-safety__reason:hover{background:var(--surface-3)}
.pn-safety__reason:has(input:checked){background:var(--accent-soft)}
.pn-safety__reason:has(input:checked)::before,.pn-safety__reason:has(input:checked) + .pn-safety__reason::before{opacity:0}
.pn-safety__reason:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-safety__reason > span,.pn-safety__also > span{display:grid;gap:0;min-width:0}
.pn-safety__reason b,.pn-safety__also b{font:var(--type-strong);color:var(--ink)}
.pn-safety__reason b + span,.pn-safety__also b + span{font:var(--type-meta);color:var(--ink-2)}
.pn-safety__note{margin-top:var(--space-4)}
.pn-safety__note textarea.pc-input{min-height:88px;font-size:var(--fs-ui)}   /* 16px: no iOS zoom on focus */
.pn-safety__count{justify-self:end;font-variant-numeric:tabular-nums}
.pn-safety__also{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-3)}
.pn-safety__also .pc-check{margin-top:0}
.pn-safety__err{margin:var(--space-3) 0 0;font:var(--type-label);color:var(--danger)}
.pn-safety__btns{position:sticky;bottom:0;z-index:1;display:flex;justify-content:flex-end;gap:var(--space-3);margin:var(--space-4) calc(-1 * var(--space-6)) 0;padding:var(--space-3) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
@media (min-width:701px){.pn-safety .pn-sheet__grab{display:none}.pn-sheet.pn-safety .pn-safety__form{padding-top:var(--space-4)}}
/* member launch (owner 05.10.): block / report modals on legacy's handlers (partials/ml_safety). Same sheet; the states
   (ask / done) swap by the hidden attribute, which must beat every display rule of the parts. */
.pn-mls [hidden]{display:none !important}
.pn-mls .pn-sheet__head h2 + h2{margin-top:0}
.pn-mls__premium a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pn-mls .pn-safety__btns button.is-busy{opacity:.6;cursor:progress}
.pn-mls[data-mls-state="done"] .pn-safety__ico{background:var(--accent-soft)}
@media (max-width:700px){
  dialog.pn-sheet.pn-safety{width:100%;max-height:calc(100% - 24px)}
  .pn-sheet.pn-safety .pn-safety__form{padding:var(--space-2) var(--space-4) 0}
  .pn-safety__btns{margin:var(--space-4) calc(-1 * var(--space-4)) 0;padding-inline:var(--space-4)}
  .pn-safety__btns .pc-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .pn-slot-add,.pn-mmtile__open img,.pn-mmprog i,.pn-mmtile.is-leaving,.pn-ptoast,.pn-safety__reason{transition:none}
  .pn-mmtile__open:hover img{transform:none}
  }
.pn-mm .pn-count{gap:.3em}

/* ---------- Profile picture (owner 30.09.): the first block of the editor ----------
   The round picture (ui_avatar xl, pink ring) beside the head and one help line; the two buttons under the text
   ("Change picture" = the upload label as a kit .pc-btn, "Choose from my photos" = kit line button). Phone: 84 picture,
   the buttons take the full width under it. The picker sheet shows her photo tiles as round choices, the current one ringed. */
.pn-avpick{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"face body" "face acts" "face err";column-gap:var(--space-5);row-gap:var(--space-3);align-items:center;margin-bottom:var(--stack-gap)}
.pn-avpick [hidden]{display:none}
.pn-avpick__face{grid-area:face;display:grid;align-self:center}
.pn-avpick__body{grid-area:body;display:grid;gap:var(--space-2);min-width:0;align-self:end}
.pn-avpick__body h2{margin:0;font:var(--type-title);color:var(--ink);overflow-wrap:break-word}
.pn-avpick__body .pc-help{margin:0;max-width:56ch}
.pn-avpick__acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:var(--space-2);align-self:start;min-width:0}
.pn-avpick__up{display:flex;margin:0}
.pn-avpick__file{cursor:pointer}
.pn-avpick__file:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-avpick__err{grid-area:err;margin:0}
@media (max-width:640px){
  .pn-avpick{grid-template-areas:"face body" "acts acts" "err err";column-gap:var(--space-4)}
  .pn-avpick__face .pc-avatar--xl{width:var(--avatar-xl);height:var(--avatar-xl);font-size:var(--fs-h1)}
  .pn-pe .pn-avpick__body{align-self:center}
  .pn-avpick__acts{display:grid;grid-template-columns:minmax(0,1fr)}
  .pn-avpick__up,.pn-avpick__acts > .pc-btn{width:100%}   /* not the .pc-sr file input: at 100% it ran 37 px past the phone's edge (horizontal scroll) */
}
.pn-avsheet__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-2)}
.pn-avsheet__pick{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;border:3px solid transparent;border-radius:50%;overflow:hidden;background:var(--surface-3);cursor:pointer;transition:border-color var(--dur-fast)}
.pn-avsheet__pick img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-avsheet__pick:hover{border-color:var(--ink-3)}
.pn-avsheet__pick.is-current{border-color:transparent}
.pn-avsheet__pick:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (max-width:380px){.pn-avsheet__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.pn-avsheet__pick{transition:none}}
/* legacy profile + settings (docs/ml-profile-03-10.md): the pnew account pages on legacy's rows. Token-only. */
.pn-lp__note{margin-bottom:var(--stack-gap)}
.pn-lp__err{margin-bottom:var(--stack-gap)}
.pn-lptile__badge{position:absolute;left:8px;bottom:8px;z-index:2;max-width:calc(100% - 16px);white-space:normal;line-height:var(--lh-cap);text-align:left}
.pn-lptile.is-main{border-color:transparent}
.pn-lptile__acts{position:absolute;top:8px;right:8px;z-index:2;display:flex;flex-direction:column;gap:var(--space-1)}
.pn-lptile__acts .pc-iconbtn{background:var(--photo-key-bg);color:var(--white);border:0;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}   /* A14 (owner 18.10.): dark glass discs, readable on any photo in both themes (the cream discs of 05.10. outshone the photo) */
.pn-lptile__acts .pc-iconbtn:hover{background:var(--glass-strong);color:var(--white)}   /* on a photo: light glyph in both themes (owner A14, 18.10.) */
.pn-lp__date{border:0;padding:0;margin:0;min-width:0}
.pn-lp__date > legend{margin-bottom:var(--label-gap)}   /* owner 05.10.: a legend sits outside the fieldset's grid, so the field gap does not reach it */
.pn-lp__daterow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-2)}
.pn-lp__daterow[hidden],.pn-lp__dateone[hidden]{display:none}   /* UX 433 B-143: the native field or the three selects, never both */
.pn-lp__dateone{max-width:240px}
.pn-lp__privline{display:flex;align-items:center;gap:var(--space-1)}
.pn-lp__privline .pc-ico{flex:none;color:var(--ink-3)}
.pn-lp__form{display:grid;gap:var(--field-gap)}
.pn-lp__formacts{display:flex;justify-content:flex-end;padding-top:var(--space-1)}
/* adml 03.10.: photo tiles = badge top-left, the three actions one quiet row at the foot (they stacked over the badge);
   two columns on phones so three 34px actions fit beside each other. Date selects: room for "31" and "1990" at 360. */
.pn-lp__photos .pn-lptile__badge{top:8px;bottom:auto}
/* DS P5 MSL-136: photo keys 36 / phone 44 */
.pn-lp__photos .pn-lptile__acts{top:auto;left:8px;right:8px;bottom:8px;flex-direction:row;justify-content:flex-end;gap:var(--space-1)}
.pn-lp__photos .pn-lptile__acts .pc-iconbtn{width:var(--control-sm);height:var(--control-sm);min-width:var(--control-sm)}
.pn-lp__photos .pn-lptile__acts .pc-ico{width:var(--icon-m);height:var(--icon-m)}
@media (max-width:560px){.pn-lp__photos .pn-uploadgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px) and (max-width:1279px){.pn-lp__photos .pn-uploadgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pn-lp__daterow .pc-select > .pc-input{width:100%;padding-left:var(--space-3);padding-right:var(--space-10)}
.pn-lp__daterow .pc-select::after{right:var(--space-3)}
.pn-lp__daterow .pc-select{display:block;min-width:0}
.pn-setpanel > .pc-sechead + .pn-lp__form{margin-top:var(--space-3)}
@media (max-width:560px){.pn-lp__formacts:has(> .pc-btn + .pc-btn){flex-wrap:wrap;gap:var(--space-2)}.pn-lp__formacts:has(> .pc-btn + .pc-btn) > .pc-btn{flex:1 1 100%}}
@media (min-width:561px){.pn-lp__formacts{gap:var(--space-3)}}
/* adml layout_qa 03.10.: at 1024 the tiles are ~110 px wide; the three foot actions shrink with the tile instead of being cut */
.pn-lp__photos .pn-mmtile{container-type:inline-size}
@container (max-width:124px){
  .pn-lp__photos .pn-lptile__acts{left:4px;right:4px;bottom:4px;gap:0}
}

/* owner 05.10.: the avatar face is the upload trigger (label for #pnAvFile) */
.pn-avpick__face{cursor:pointer}
.pn-avpick__face:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:50%}
/* owner 05.10. (buyer picture): the card's own "Uploading …" line under the buttons; the button dims while it runs */
.pn-avpick__busy{flex-basis:100%;margin:0}
.pn-avpick__up[aria-busy="true"]{opacity:.6;pointer-events:none}

/* owner 05.10. ("Schließen-X nicht sichtbar"): the viewer's X is a solid cream disc with a dark glyph, above everything */
.pn-viewer__x{z-index:var(--z-bar);background:var(--on-media);color:var(--on-sticker);border:0;box-shadow:var(--shadow-e1)}
.pn-viewer__x:hover{background:var(--scard-ink-2)}

/* night L2 (08.10.): a seller's media in the legacy profile editor (templates/partials/lp_media.php) and the fake check page
   (templates/verify.php). Token-only; the tiles reuse .pn-lptile__badge, the albums the photo grid's .pn-lp__photos rules. */
.pn-lpmedia{display:grid;gap:var(--stack-gap);margin-top:var(--stack-gap);min-width:0}
.pn-mdvf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3) var(--space-4)}
.pn-mdvf__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);color:var(--ink-2)}
.pn-mdvf__ico.is-ok{color:var(--success)}
.pn-mdvf__t{min-width:0}
.pn-mdvf__t .pc-h-card{margin:0}
.pn-mdvf__t .pc-help{margin:var(--space-1) 0 0}
@media (max-width:560px){.pn-mdvf{grid-template-columns:auto minmax(0,1fr)}.pn-mdvf > .pc-more{grid-column:2;justify-self:start}}
.pn-mdgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4) var(--space-3);margin:0;padding:0;list-style:none}
@media (max-width:700px){.pn-mdgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}}
@media (max-width:560px){.pn-mdgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pn-mdgrid,.pn-lp__albums .pn-uploadgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pn-lpmedia > section,.pn-lp__photos{scroll-margin-top:calc(var(--header-h) + 16px)}
.pn-mdtile{display:grid;gap:var(--space-2);min-width:0}
.pn-mdtile__media{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2)}
.pn-mdtile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-mdtile .pn-lptile__badge{top:8px;bottom:auto}
.pn-mdtile.is-off .pn-mdtile__media img{opacity:.4}
.pn-mdtile__play{position:absolute;right:8px;bottom:8px;z-index:2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--glass-strong);color:var(--on-media)}
.pn-mdtile__cap{display:grid;gap:0;min-width:0;font:var(--type-meta);color:var(--ink-2)}
.pn-mdtile__cap b{overflow:hidden;font:var(--type-label);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.pn-mdalbum + .pn-mdalbum{margin-top:var(--space-8);padding-top:0;border-top:0}   /* no line inside: the gap separates the albums */
.pn-mdalbum__h{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--head-gap);font:var(--type-strong);color:var(--ink)}
.pn-mdalbum__h .pc-ico{color:var(--ink-2)}
/* DS P5 MSL-218: member column, 65ch text */
.pn-vf{display:grid;gap:var(--stack-gap)}
.pn-vf .pc-sub,.pn-vf .pc-help,.pn-vf__steps,.pn-vf__why,.pn-vf__privacy{max-width:65ch}
.pn-vf > .pn-apphead,.pn-vf > .pn-lp__err{margin-bottom:0}
.pn-vf__state{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3) var(--space-4)}
.pn-vf__state .pn-mdvf__ico{width:var(--avatar-l);height:var(--avatar-l)}
.pn-vf__statet{min-width:0}
.pn-vf__statet .pc-h-card{margin:0}   /* MSL-219: the head sits at the panel's own inset */
.pn-vf__statet .pc-sub{margin:var(--space-1) 0 0}
.pn-vf__badge{margin:var(--space-3) 0 0}
.pn-vf__steps{display:grid;gap:var(--space-3);margin:var(--space-4) 0 0;padding:0;list-style:none}
.pn-vf__steps > li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3)}
.pn-vf__steps > li > span:last-child{display:grid;gap:0;min-width:0;font:var(--type-meta);color:var(--ink-2)}
.pn-vf__steps b{font:var(--type-strong);color:var(--ink)}
/* DS P5 MSL-220: the one step numeral */
.pn-vf__n{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full);border:0;background:var(--surface-2);font:var(--type-cap);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-vf__up{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin-top:var(--space-6);padding-top:0;border-top:0}
.pn-vf__btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.pn-vf__busy{flex-basis:100%;margin:0}
.pn-vf__later{margin:var(--space-6) 0 0;padding-top:0;border-top:0}
.pn-vf__off{display:grid;justify-items:start;gap:var(--help-gap)}
.pn-vf__off .pc-help{margin:0}
@media (max-width:560px){.pn-vf__btn{width:100%}}
/* verified go-live (09.10., templates/verify.php, only with app/switch/verify_upload): refusal checklist, picker (phone:
   front camera + library; desktop: library), preview, privacy line, the home card's quiet "waiting" line */
.pn-vf__why{display:grid;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
.pn-vf__why > li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-2);font:var(--type-body);color:var(--ink)}
.pn-vf__why .pc-icon,.pn-vf__why svg{transform:translateY(3px);color:var(--ink-2)}
.pn-vf__pick,.pn-vf__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.pn-vf__pick[hidden],.pn-vf__preview[hidden],.pn-vf__prem[hidden]{display:none}
.pn-vf .pn-vf__coarse{display:none}
@media (pointer:coarse){.pn-vf .pn-vf__coarse{display:inline-flex}.pn-vf .pn-vf__fine{display:none}}
.pn-vf__preview{display:grid;gap:var(--space-3);flex-basis:100%}
.pn-vf__preview .pc-help{margin:0}
.pn-vf__img{display:block;width:100%;max-width:320px;max-height:420px;object-fit:contain;border:0;border-radius:var(--r-m);background:var(--surface-2)}
.pn-vf__prem{flex-basis:100%;font:var(--type-strong);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-vf__privacy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-2);margin:var(--space-4) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-vf__privacy svg{transform:translateY(1px)}

.pn-vf__privacy b{color:var(--ink);font-weight:600}
@media (max-width:560px){.pn-vf__pick .pn-vf__btn,.pn-vf__acts .pn-vf__btn{width:100%}}
/* @member-only */
/* UX 20.10. (owner: what still has to be filled in): the required mark beside the label, a missing group in red with its hint */
.pn-lp__req{margin-left:var(--space-1);font:var(--type-cap);letter-spacing:0;color:var(--ink-2);text-transform:none}
.pn-lp .is-missing .pc-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-lp .is-missing .pn-lp__req,.pn-lp__miss{color:var(--danger)}
.pn-lp__miss{font-weight:600}
/* @end-member-only */
/* design system P5 (03.11., MSL-196): the cancel and delete forms read at a form width, never stretched over 1372 px */
.pn-lp:is([data-lp-page="cancel"],[data-lp-page="sub"]) .pn-setpanel{max-width:640px}
/* UX 433 S-128: one "⋯" disc per photo; the actions open as a small labelled menu over the photo */
.pn-lptile__menu > summary{list-style:none;cursor:pointer}
.pn-lptile__menu > summary::-webkit-details-marker{display:none}
.pn-lptile__menu{align-items:flex-end}
.pn-lptile__list{position:absolute;right:0;bottom:calc(var(--tap) + var(--space-1));left:0;display:flex;flex-direction:column;gap:2px;padding:var(--space-1);border-radius:var(--r-m);background:var(--surface-3)}
.pn-lptile__menu:not(.pn-lp__photos *){min-width:170px}
.pn-lptile__item{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);padding:var(--space-1) var(--space-2);border-radius:var(--r-s);color:var(--ink);font:var(--type-meta);text-decoration:none}
.pn-lptile__item:hover{background:var(--surface-2)}
.pn-lp__photos .pn-lptile__menu{flex-direction:column;align-items:flex-end;justify-content:flex-end}
.pn-lp__photos .pn-lptile__menu[open]{z-index:5}
/* UX 433 S-126: the editor's sections as one row of jump chips; S-135: the in-page preview */
.pn-lpjump{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.pn-lppreview > summary{cursor:pointer;list-style:none}
.pn-lppreview > summary::-webkit-details-marker{display:none}
.pn-lppreview__frame{display:block;width:100%;height:min(80vh,900px);margin-top:var(--space-3);border:0;border-radius:var(--r-m);background:var(--surface-2)}
.pn-lptile:has(> .pn-lptile__menu[open]){overflow:visible;z-index:5}   /* UX 433 S-128: the open menu may reach over the tile edge */
/* UX 433 B-079: the quiet count of photos / videos a buyer who cannot buy Premium does not see (no lock, no key) */
.pn-dtmore{margin:var(--space-2) 0 0}
/* photos age (owner 05.11., lib/photos_age.php): the one quiet age key under the free photos (profile, photo page, feed post) */
/* @member-only */
.pn-pakey{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0}
.pn-pakey a{display:inline-flex;align-items:center;gap:var(--space-2);color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pn-pakey .pn-pakey__prem{font-weight:400}
/* @end-member-only */
/* UX 433 B-075 (round 2): the review's "…" (Report) sits quietly at the card's top right */
.pn-dtrev{position:relative}
.pn-revrep:has(> .pn-revmore){position:static}
.pn-revmore{position:absolute;top:var(--space-2);right:var(--space-2);list-style:none;color:var(--ink-2)}
.pn-revmore::-webkit-details-marker{display:none}
.pn-revrep[open] > .pn-revmore{color:var(--ink)}
/* ==========================================================================
   Videos /videos/ + /videos/<id>/ (detail slice v3, docs/design-v3-system.md §4). Placement only: every look is a kit
   component. One item node (.pn-vitem, partials/video_item.php) in four arrangements:
   - grid tile  = the listing card's language (card_ad.php, owner 05.10. "videocards beschissen"): the 4:5 poster IS the
                  card (radius 20, the 50 % line drawn over it, no paper box, no footer); on it the one corner label
                  (Free pink / the small glass lock chip), the glass play disc, and the caption at the bottom edge on
                  the card shade: PREMIUM kicker, her caption (2 lines), 22 px avatar + @name, the pink star score, the
                  glass view count. Locked = the blurred poster (the blur is the paygate) under the same shade.
   - phone feed = one anthracite .box (the mockup .dk block: radius 24, the line) with scroll snap; text on-dark,
                  the rail = 44 circles with the chrome line (the .calc__row buttons) and their label under them.
   - detail / lightbox = the player (radius 20, the line) + a side column: strip, caption, line pills with icon + label,
                  the unlock panel = .box--dk.
   Rotation: none (the care label on a missing poster is the kit's -5deg).
   JS hooks (videos.js): .pn-vpage[.is-feed], #pnVList, .pn-vitem(__media|__poster|__stage), .pn-vlike, .pn-vsound,
   .pn-vshare, .pn-vsolo, .pn-vbox(__body), #pnVSheet, #pnVMore, .pn-vtoast, .pn-vskel, .pn-vburst, .pn-vunavail.
   ========================================================================== */
.pn-vpage{--vtile-ratio:4/5;--vfeed-h:calc(100svh - var(--header-h) - var(--tabbar-h) - 16px);display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start;min-width:0}
.pn-vpage > *{min-width:0}
.pn-vhead .pn-apphead{margin:0}

/* Seller head (?s=): a panel with the big strip and the actions. */
.pn-vseller{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.pn-vseller__act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1 1 280px;max-width:420px}   /* polish r3: side by side, equal width, no ragged stack */
.pn-vseller__act > .pc-btn{justify-content:center;min-width:0}
@media (max-width:560px){.pn-vseller__act{max-width:none}}
/* Phones: the labels would break inside two half-width pills ("VIEW / PROFILE"), so both run full width, one per row. */
@media (max-width:440px){.pn-vseller__act{flex-basis:100%;grid-template-columns:minmax(0,1fr)}}

/* Tool row (T64): filter chips left, the sort select chip right; phones: sort chip, layout, filter. Everything wraps. */
.pn-vbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.pn-vchips{display:flex;flex-wrap:wrap;gap:8px}
.pn-vsort{display:flex;align-items:center;gap:8px;margin:0 0 0 auto}
/* T27: the page's one pink "Unlock all videos" (grid); on the phone feed the first locked item's panel carries it. */
.pn-vunlock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.pn-vunlock__txt{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-strong);color:var(--ink)}
.pn-vunlock__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:0;background:var(--surface-2);color:var(--ink)}
.pn-vunlock__ico .pc-ico{width:16px;height:16px}
@media (max-width:520px){.pn-vunlock > .pc-btn{flex:1 1 100%}.pn-vunlock > .pc-btn .pc-ico{display:none}}   /* layout_qa: a full-width CTA on phones, no icon stranded beside a wrapped label */
.pn-vbar__tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.pn-vsortchip .pc-ico{width:16px;height:16px}
.pn-vsortchip,.pn-vviewbtn,.pn-vbar__sheet{display:none}
@media (max-width:1023px){
  .pn-vsort{display:none}
  .pn-vsortchip{display:inline-flex}
  .pn-vviewbtn{display:inline-grid}
}
@media (min-width:1024px){.pn-vbar__tools{display:none}}

/* ---------- grid: the .pairs grid of .pcard tiles ---------- */
.pn-vlist,.pn-vsolo,.pn-vbox__body{list-style:none;margin:0;padding:0}
/* T27: tiles of one row share the height (stretch), the caption line is reserved, so rows never go ragged. */
.pn-vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-items:stretch}
@media (min-width:1101px){.pn-vlist{--dt-cols:repeat(5,minmax(0,1fr));grid-template-columns:var(--dt-cols)}}
/* polish r1: "Up next" on the video page ends on a full row in the 5-column range (the short tail steps aside; "More"
   brings it back in order). */
@media (min-width:1101px){.pn-vdetail #pnVList > :nth-child(5n+6):nth-last-child(-n+4),.pn-vdetail #pnVList > :nth-child(5n+6):nth-last-child(-n+4) ~ *{display:none}}
@media (max-width:700px){.pn-vlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.pn-vitem{position:relative;min-width:0;display:grid;align-content:start}
/* vcard 05.10.: no paper box around the tile; the poster frame carries the radius and the 50 % line (= .pn-prodcard). The
   container lets the caption step down in narrow cells like the listing card's. */
.pn-vlist > .pn-vitem{background:none;border:0;border-radius:var(--r-m);overflow:visible;container:pn-vitem / inline-size}
.pn-vlist > .pn-vitem > .pn-vitem__media{border-radius:var(--r-m);clip-path:inset(0 round var(--r-m))}
.pn-vlist > .pn-vitem > .pn-vitem__media::before{content:"";position:absolute;inset:0;z-index:7;border-radius:inherit;box-shadow:inset 0 0 0 0 transparent;pointer-events:none}
.pn-vlist > .pn-vitem:has(> .pn-vitem__media:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-vlist > .pn-vitem > .pn-vitem__media:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring)}
.pn-vitem__media{position:relative;display:grid;place-items:center;aspect-ratio:var(--vtile-ratio);overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.pn-vitem__media:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-vitem__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform var(--dur-slow) var(--ease-out)}
.is-locked .pn-vitem__poster,.is-teaser .pn-vitem__poster{filter:blur(24px) saturate(.85);transform:scale(1.3)}
/* The lift = the listing card's (the photo grows a touch under the still frame); the blurred poster keeps its overscan. */
@media (hover:hover){
  .pn-vlist > .pn-vitem:hover .pn-vitem__poster{transform:scale(1.035)}
  .pn-vlist > .pn-vitem:is(.is-locked,.is-teaser):hover .pn-vitem__poster{transform:scale(1.16)}
}
.pn-vitem__shade{display:none}
/* Locked / teaser tiles: the dark foot over the blur (--media-shade), so the wash reads as a poster, not a grey panel. */
.pn-vlist > .pn-vitem:is(.is-locked,.is-teaser) > .pn-vitem__media > .pn-vitem__shade{display:block;position:absolute;inset:0;z-index:3;background:var(--media-shade);pointer-events:none}
/* Labels top left, wrapping (Premium, Free, New). */
.pn-vitem__chips{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;pointer-events:none}
/* vcard 05.10.: the lock = a small glass chip in the label corner (pink kicker type on the strong glass, legible on a bright
   blur in light too), never a centred pill. Player and lightbox move it to the foot of the blurred player. */
.pn-vitem__lock{position:absolute;top:10px;left:10px;z-index:6;display:inline-flex;align-items:center;gap:var(--space-1);height:24px;max-width:calc(100% - 20px);padding:0 var(--space-2);border:0;border-radius:var(--r-full);background:var(--glass-strong);color:var(--on-media);font:600 12px/1 var(--body);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-vitem__lock .pc-ico{flex:none;width:12px;height:12px;stroke-width:2.2}
/* Play: the paper circle (44, the line), shown on hover. */
/* vcard 05.10.: the play disc = the like button's glass (--scard-glass, blur, the 50 % line), always on the grid tile. */
.pn-vitem__play{position:absolute;left:50%;top:50%;z-index:6;display:grid;place-items:center;width:44px;height:44px;margin:0;translate:-50% -50%;border-radius:50%;border:0;background:var(--scard-glass);color:var(--scard-ink);opacity:1;transition:opacity var(--dur-fast),background-color var(--dur-fast);pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-vitem__play .pc-ico{width:20px;height:20px;fill:currentColor;stroke:none;transform:translateX(2px);filter:drop-shadow(var(--scard-tshadow))}
@media (hover:hover){.pn-vitem__media:hover .pn-vitem__play{background:var(--scard-glass-hover)}}
/* polish r4: a tile without a poster shows its play disc on the soft poster (grid, detail; the phone feed keeps its own). */
.pn-vpage:not(.is-feed) .pn-vitem.is-noposter .pn-vitem__play{opacity:1}
.pn-vitem.is-scrubbing .pn-vitem__play{opacity:0}
.pn-vitem__scrub{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;height:3px;border-radius:var(--r-full);background:var(--media-track);opacity:0;transition:opacity var(--dur-fast)}
.pn-vitem__scrub i{display:block;width:var(--scrub,0%);height:100%;border-radius:inherit;background:var(--paper)}
.pn-vitem.is-scrubbing .pn-vitem__scrub{opacity:1}
.pn-vitem__progress,.pn-vitem__rail,.pn-vitem__stage,.pn-vgate{display:none}
/* Body (.pcard__b): strip, time · views, the caption in full, "+n more" chip. */
.pn-vitem__meta{display:grid;gap:4px;min-width:0;padding:12px 12px 12px}
.pn-vitem__title{margin:0;font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-vitem__views .pn-sep{margin:0 4px}
.pn-vitem__views .pc-ico{width:13px;height:13px;margin-right:4px;vertical-align:-2px}
.pn-vitem__desc{margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink);overflow-wrap:break-word;text-wrap:pretty}
.pn-vitem__desc:empty{display:none}
.pn-vlist > .pn-vitem .pn-vitem__desc{display:block;min-height:1.4em}
/* vcard 05.10.: the grid tile has no body; its strip, time and caption live in .pn-vitem__cap on the poster (feed, player
   and lightbox keep the body and hide the cap, below). */
.pn-vlist > .pn-vitem > .pn-vitem__meta{display:none}
.pn-vitem__cap{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-3) var(--space-3);min-width:0;color:var(--scard-ink);text-shadow:var(--scard-tshadow);pointer-events:none}
.pn-vitem__cap::before{content:"";position:absolute;inset:-26px 0 0;z-index:-1;background:var(--pcard-cap-shade);pointer-events:none}
.pn-vlist > .pn-vitem.is-noposter .pn-vitem__cap::before{background:var(--pcard-cap-shade),var(--media-shade)}   /* the soft poster is near white in light: a deeper foot under the kicker */
.pn-vitem__tier{order:-1;margin-bottom:0;font:600 12px/16px var(--body);letter-spacing:0;color:var(--scard-ink-2);white-space:nowrap}
.pn-vitem__ctitle{margin:0;min-width:0;font:var(--type-strong);color:var(--scard-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}   /* 2 lines max, the title attribute has the rest */
.pn-vitem__by{display:flex;align-items:center;gap:var(--space-2);min-width:0;min-height:24px;font:400 13px/18px var(--body);color:var(--scard-ink-2);white-space:nowrap}
.pn-vitem__by > .pc-avatar{width:var(--avatar-xs);height:var(--avatar-xs);border-color:transparent;font-size:12px;text-shadow:none}
.pn-vitem__cav--brand{background:var(--surface-2);color:var(--ink);font:600 12px/1 var(--body);text-transform:none}
.pn-vitem__cav--brand > i{position:absolute;right:4px;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--pink)}   /* the wordmark's dot */
.pn-vitem__cname{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--scard-ink)}
.pn-vitem__cname:not(.is-brand)::before{content:"@"}
.pn-vitem__cname.is-brand{font-weight:600;color:var(--scard-ink-2)}
.pn-vitem__cscore{flex:none;display:inline-flex;align-items:center;gap:var(--space-1);font-weight:700;color:var(--scard-ink)}
.pn-vitem__cscore .pc-ico{width:12px;height:12px;color:var(--scard-ink);fill:currentColor;stroke:none;filter:drop-shadow(var(--scard-tshadow))}
.pn-vitem__cviews{flex:none;display:inline-flex;align-items:center;gap:var(--space-1);min-height:20px;margin-left:auto;padding:var(--space-1) var(--space-2);border:0;border-radius:var(--r-full);background:var(--scard-glass);color:var(--scard-ink);font:600 12px/1 var(--body);font-variant-numeric:tabular-nums;text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-vitem__cviews > span[aria-hidden]{display:inline-flex;align-items:center;gap:var(--space-1)}
.pn-vitem__cviews .pc-ico{width:12px;height:12px}
@media (max-width:700px){
  .pn-vitem__cap{padding:var(--space-3) var(--space-2) var(--space-2);gap:var(--space-1)}
  .pn-vitem__ctitle{font-size:var(--fs-meta);line-height:var(--lh-meta)}
  .pn-vitem__by{font-size:var(--fs-cap)}
  .pn-vitem__tier{font-size:var(--fs-cap);letter-spacing:0}
  .pn-vitem__lock{top:8px;left:8px}
  .pn-vitem__chips{top:8px;left:8px;right:8px}
}
/* Narrow cells (2 columns on a 360 / 390 phone): smaller type, the view count steps aside — as the listing card's count. */
@container pn-vitem (max-width:175px){
  .pn-vitem__cap{padding:var(--space-2);gap:var(--space-1)}
  .pn-vitem__ctitle{font-size:var(--fs-meta);line-height:var(--lh-meta)}
  .pn-vitem__by{gap:var(--space-1);min-height:20px;font-size:var(--fs-cap)}
  .pn-vitem__by > .pc-avatar{width:20px;height:20px;font-size:var(--fs-cap)}
  .pn-vitem__cviews{display:none}
}

/* Seller strip: avatar 22, @name 600 13 (ellipsis + title), age, flag, score. */
.pn-vstrip{display:flex;align-items:center;gap:var(--space-2);min-width:0;color:var(--ink);text-decoration:none;font:var(--type-label)}
.pn-vstrip__who{display:grid;gap:0;min-width:0}
.pn-vstrip__line{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-vstrip__name{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.pn-vstrip .pn-vstrip__name::before{content:"@"}
.pn-vstrip__age{flex:none;font-weight:400;color:var(--ink-2)}
/* polish r4: the seller's Premium on a video card = the seller card's star disc top left of the poster (.pc-scard__prem),
   never a second star next to the rating. The feed and the player keep it clear of their own corner labels. */
.pn-vitem__prem .pc-ico{stroke:none}
.pn-vstrip .pn-flag{flex:none;width:14px;height:14px;margin:0;border-radius:50%;object-fit:cover}
.pn-vstrip__score{flex:none;display:inline-flex;align-items:center;gap:var(--space-1);font-weight:700}
.pn-vstrip__score .pc-ico{width:12px;height:12px;color:var(--pink-glyph);fill:currentColor;stroke:none}
.pn-vstrip__status{font:var(--type-meta);color:var(--ink-2)}
.pn-vstrip--lg{gap:var(--space-3);font-size:var(--fs-ui)}
.pn-vstrip--lg .pn-vstrip__line{gap:8px}
.pn-vstrip--lg .pc-badge{flex:none}
@media (max-width:440px){.pn-vstrip--lg .pn-vstrip__line{flex-wrap:wrap;row-gap:4px}}   /* polish r3: the Premium label steps to its own row before @name shortens */
.pn-vstrip.is-collection{gap:var(--space-2);color:var(--ink-2);font:var(--type-cap)}
.pn-vstrip.is-collection .pc-ico{flex:none;width:14px;height:14px}
a.pn-vstrip:hover .pn-vstrip__name{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
a.pn-vstrip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}
@media (max-width:700px){.pn-vlist .pn-vstrip__score,.pn-vlist .pn-vstrip .pn-flag{display:none}}

/* Unlock panel = .box--dk (pc-box pc-box--dk): lock circle, card head, one line, the button, a quiet link. */
.pn-vgate{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;text-align:center}
.pn-vgate__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--chrome-line);color:var(--pink)}
.pn-vgate .pn-vgate__h{margin:4px 0 0;max-width:22ch;color:inherit;text-wrap:balance}
.pn-vgate__fomo{margin:0;max-width:34ch;font:var(--type-body)}
.pn-vgate .pc-btn{margin-top:8px;max-width:340px}
.pn-vgate__free{display:inline-flex;align-items:center;min-height:var(--tap);font:var(--type-strong);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pn-vgate__free:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Rail buttons (feed, detail, lightbox). The label is always real text; how it sits depends on the arrangement. */
.pn-vrail{text-decoration:none}
.pn-vrail--av{position:relative;display:inline-flex;align-items:center;gap:8px;color:inherit}
.pn-vrail__plus{display:none}
.pn-vlike.is-on .pc-ico{fill:currentColor}
.pn-vsound .pc-ico + .pc-ico,.pn-vsound[aria-pressed="true"] .pc-ico:first-child{display:none}
.pn-vsound[aria-pressed="true"] .pc-ico + .pc-ico{display:block}

/* Stage: the one <video>/<iframe> while an item plays. */
.pn-vitem__stage video,.pn-vitem__stage iframe{display:block;width:100%;height:100%;border:0;background:var(--bg);object-fit:cover}
.pn-vitem.is-landscape .pn-vitem__stage video{object-fit:contain;background:transparent}
.pn-vunavail{position:absolute;inset:0;z-index:7;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;color:var(--on-chrome);background:var(--backdrop);font:var(--type-strong)}
.pn-vunavail .pc-ico{width:24px;height:24px;color:var(--ink-2)}
/* Like burst: the pink heart pops and fades (no tilt). */
.pn-vburst{position:absolute;left:50%;top:50%;z-index:8;width:112px;height:112px;margin:-56px 0 0 -56px;color:var(--pink);pointer-events:none;animation:pn-vburst .8s var(--ease-pop) forwards}
.pn-vburst .pc-ico{width:110px;height:110px;fill:currentColor;stroke:currentColor}
@keyframes pn-vburst{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:translateY(-120px) scale(1.25);opacity:0}}
/* Skeletons while the next page loads: the tile geometry with the kit shimmer. */
.pn-vskel{pointer-events:none}
.pn-vskel .pn-vitem__media{background:var(--ph-media)}
.pn-vskel i{position:relative;overflow:hidden;display:block;height:12px;width:70%;margin:12px 12px 12px;border-radius:var(--r-full);background:var(--surface-2)}
.pn-vskel .pn-vitem__media::after,.pn-vskel i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--surface-veil) 50%,transparent 80%);transform:translateX(-100%);animation:pn-shimmer 1.4s linear infinite}
.pn-vend{margin:32px 0 0;text-align:center;color:var(--ink-2)}

/* ---------- phone feed (< 1024): one anthracite box, one video per swipe ---------- */
@media (max-width:1023px){
  .pn-vpage.is-feed .pn-vlist{display:block;height:var(--vfeed-h);overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r-l);background:var(--dk-bg);scrollbar-width:none}
  .pn-vpage.is-feed .pn-vlist::-webkit-scrollbar{display:none}
  .pn-vpage.is-feed .pn-vlist:focus:not(:focus-visible){outline:none}
  .pn-vpage.is-feed .pn-vlist:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  .pn-vpage.is-feed > .pn-vmore{display:none}
  .is-feed .pn-vlist > .pn-vitem{display:block;height:var(--vfeed-h);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--dk-bg);border:0;border-radius:0;color:var(--dk-ink);content-visibility:auto;contain-intrinsic-size:auto var(--vfeed-h)}
  .is-feed .pn-vitem__media{position:absolute;inset:0;aspect-ratio:auto}
  .is-feed .pn-vitem__shade{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--shade-card)}
  .is-feed .pn-vitem__stage{display:block;position:absolute;inset:0;z-index:1}
  .is-feed .pn-vitem__stage[hidden]{display:none}
  .is-feed .pn-vitem.is-landscape .pn-vitem__poster{filter:blur(16px) brightness(.7);transform:scale(1.15)}
  .is-feed .pn-vitem__chips{top:14px;left:14px;right:80px}
  .is-feed .pn-vitem__lock,.is-feed .pn-vitem__scrub{display:none}
  /* vcard 05.10.: the feed keeps its own look: no rounded frame or line on the poster, the body strip on the dark
     shade, the poster caption off, the lock chip centred when it is the only hint. */
  .is-feed .pn-vlist > .pn-vitem{container-type:normal}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__media{border-radius:0;clip-path:inset(0)}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__media::before{content:none}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__media > .pn-vitem__shade{background:var(--shade-card)}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__meta{display:grid}
  .is-feed .pn-vitem__cap{display:none}
  .is-feed .pn-vitem__lock{top:50%;left:50%;transform:translate(-50%,-50%)}
  /* T27: one pink per page: only the first locked item of the feed shows the unlock panel, the next ones the lock pill. */
  .is-feed .pn-vitem.is-locked ~ .pn-vitem.is-locked .pn-vgate{display:none}
  .is-feed .pn-vitem.is-locked ~ .pn-vitem.is-locked .pn-vitem__lock{display:inline-flex}
  .pn-vpage.is-feed > .pn-vunlock{display:none}
  .is-feed .pn-vitem__play{opacity:0}
  .is-feed .pn-vitem.is-paused .pn-vitem__play{opacity:1}
  .is-feed .pn-vitem__progress{display:block;position:absolute;left:0;right:0;bottom:0;z-index:6;height:3px;background:var(--media-track)}
  .is-feed .pn-vitem__progress i{display:block;width:var(--p,0%);height:100%;background:var(--pink)}
  /* Text bottom left, on dark. */
  .is-feed .pn-vitem__meta{position:absolute;left:16px;right:84px;bottom:18px;z-index:5;gap:8px;padding:0}
  /* T16: on-media colours only for strips that sit on the video; the ?s= seller head (.pn-vseller, paper) keeps the ink. */
  .is-feed .pn-vitem .pn-vstrip,.is-feed .pn-vitem__desc{color:var(--on-media)}
  .is-feed .pn-vitem .pn-vstrip{font-size:var(--fs-body)}
  .is-feed .pn-vitem .pn-vstrip .pc-avatar{display:none}
  .is-feed .pn-vitem .pn-vstrip__age,.is-feed .pn-vitem__title,.is-feed .pn-vitem .pn-vstrip.is-collection{color:var(--on-media-2)}
  .is-feed .pn-vitem__desc{font-size:var(--fs-body);line-height:var(--lh-body)}
  /* Rail (right): her avatar with the pink ring, then the 44 circles with the chrome line, each with its label. */
  .is-feed .pn-vitem__rail{display:flex;flex-direction:column;align-items:center;gap:12px;position:absolute;right:10px;bottom:24px;z-index:5}
  .is-feed .pn-vrail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:72px;height:auto;min-width:0;text-align:center;padding:0;border:0;border-radius:0;background:none;color:var(--on-media);font:var(--type-cap)}
  .is-feed .pn-vrail .pc-ico{box-sizing:content-box;width:var(--icon-l);height:var(--icon-l);padding:var(--space-2);border:1px solid var(--chrome-line);border-radius:50%;background:var(--glass)}
  .is-feed .pn-vrail:hover .pc-ico{border-color:transparent}
  .is-feed .pn-vlike.is-on .pc-ico{background:var(--accent);border-color:transparent;color:var(--on-accent)}
  .is-feed .pn-vrail--av .pc-avatar{width:44px;height:44px;border:0}
  .is-feed .pn-vrail__plus{display:none}
  .is-feed .pn-vrail:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:var(--r-s)}
  .is-feed .pn-vsound[hidden]{display:none}
  .is-feed .pn-vgate{display:grid;position:absolute;left:16px;right:84px;top:50%;z-index:6;max-width:340px;margin:0 auto;transform:translateY(-50%)}
  .is-feed .pn-vskel{height:var(--vfeed-h)}
  .is-feed .pn-vskel .pn-vitem__media{position:absolute;inset:0;aspect-ratio:auto;background:var(--dk-card)}
  .is-feed .pn-vend{padding:32px 16px;color:var(--dk-ink-2);scroll-snap-align:end}
}

/* ---------- detail (.pn-vsolo) and lightbox (.pn-vbox): the player + a side column ---------- */
.pn-vsolo .pn-vitem,.pn-vbox .pn-vitem{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "gate" "meta" "rail";gap:16px}
.pn-vsolo .pn-vitem__media,.pn-vsolo .pn-vitem__stage,.pn-vbox .pn-vitem__media,.pn-vbox .pn-vitem__stage{grid-area:stage;justify-self:center;width:min(100%,calc(78svh * 9 / 16));aspect-ratio:9/16;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;isolation:isolate;background:var(--anthracite)}   /* owner 30.09.: the rounded corners must clip the poster and the blur */
.pn-vsolo .pn-vitem__stage,.pn-vbox .pn-vitem__stage{display:block;position:relative;z-index:6;overflow:hidden}
.pn-vsolo .pn-vitem__stage[hidden],.pn-vbox .pn-vitem__stage[hidden]{display:none}
.pn-vsolo .pn-vitem__play,.pn-vbox .pn-vitem__play{opacity:1}
.pn-vsolo .pn-vitem__meta,.pn-vbox .pn-vitem__meta{grid-area:meta;gap:8px;padding:0}
.pn-vsolo .pn-vstrip .pc-avatar,.pn-vbox .pn-vstrip .pc-avatar{width:var(--avatar-m);height:var(--avatar-m);font-size:var(--fs-ui);border:0}
.pn-vsolo .pn-vstrip,.pn-vbox .pn-vstrip{font-size:var(--fs-ui)}
.pn-vsolo .pn-vitem__title,.pn-vbox .pn-vitem__title{font-size:var(--fs-meta)}
.pn-vsolo .pn-vitem__desc,.pn-vbox .pn-vitem__desc{font-size:var(--fs-ui);line-height:var(--lh-prose)}
.pn-vsolo .pn-vitem__rail,.pn-vbox .pn-vitem__rail{grid-area:rail;display:flex;flex-wrap:wrap;gap:8px}
/* Rail as line pills (.tabs-app look): icon + label, 44 tall. */
.pn-vsolo .pn-vrail,.pn-vbox .pn-vrail{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:auto;height:var(--control-md);padding:0 var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label);white-space:nowrap;cursor:pointer}
.pn-vsolo .pn-vrail:hover,.pn-vbox .pn-vrail:hover{background:var(--surface-3)}
.pn-vsolo .pn-vrail .pc-ico,.pn-vbox .pn-vrail .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pn-vsolo .pn-vrail--av,.pn-vbox .pn-vrail--av{padding-left:var(--space-1)}
.pn-vsolo .pn-vrail--av .pc-avatar,.pn-vbox .pn-vrail--av .pc-avatar{width:var(--avatar-s);height:var(--avatar-s);font-size:var(--fs-meta)}
.pn-vsolo .pn-vlike.is-on,.pn-vbox .pn-vlike.is-on{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.pn-vsolo .pn-vsound,.pn-vbox .pn-vsound{display:none}
.pn-vsolo .pn-vgate,.pn-vbox .pn-vgate{grid-area:gate;display:grid}
.pn-vsolo .pn-vitem__chips,.pn-vbox .pn-vitem__chips{top:14px;left:14px;right:14px}
.pn-vsolo .pn-vitem:not(.is-open) .pn-vitem__media,.pn-vbox .pn-vitem:not(.is-open) .pn-vitem__media{aspect-ratio:4/5;width:min(100%,calc(46svh * 4 / 5))}
.pn-vsolo .pn-vitem__lock,.pn-vbox .pn-vitem__lock{left:50%;top:auto;bottom:16px;transform:translateX(-50%)}
/* vcard 05.10.: the player and the lightbox keep the strip column; the poster caption is the grid's, and a locked player
   shows the lock chip + the unlock panel, no play disc. */
.pn-vsolo .pn-vitem__cap,.pn-vbox .pn-vitem__cap{display:none}
.pn-vsolo .pn-vitem:not(.is-open) .pn-vitem__play,.pn-vbox .pn-vitem:not(.is-open) .pn-vitem__play{display:none}
@media (min-width:1024px){
  .pn-vsolo .pn-vitem,.pn-vbox .pn-vitem{grid-template-columns:auto minmax(300px,420px);grid-template-rows:auto auto 1fr;grid-template-areas:"stage meta" "stage rail" "stage gate";justify-content:start;column-gap:40px;row-gap:16px;align-items:start}
  .pn-vsolo .pn-vitem__media,.pn-vsolo .pn-vitem__stage{width:auto;height:max(420px,min(calc(100vh - 240px),780px))}
  .pn-vbox .pn-vitem{justify-content:center}
  .pn-vbox .pn-vitem__media,.pn-vbox .pn-vitem__stage{width:auto;height:min(84vh,860px)}
  /* Detail page: the player flush with the content column's left edge, the side column takes the rest. */
  .pn-vsolo .pn-vitem{grid-template-columns:auto minmax(320px,1fr);justify-content:stretch}
  .pn-vsolo .pn-vitem:not(.is-open) .pn-vitem__media,.pn-vbox .pn-vitem:not(.is-open) .pn-vitem__media{width:clamp(280px,calc(60svh * 4 / 5),440px);height:auto}
}
.pn-vsec{margin-top:var(--sec-gap)}
.pn-vsec .pn-vlist + .pn-more{margin-top:24px}
/* polish r4: section heads at the profile's section scale (30 / 26): the h1 stays the one big head of the page. */
.pn-vsec > .pc-sechead .pc-h-m{font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0}

/* Lightbox: the backdrop, text on chrome, chrome squares for close / prev / next. */
.pn-vbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:40px 96px 40px 40px;border:0;border-radius:0;background:var(--backdrop);color:var(--on-chrome);box-shadow:none;overflow:auto}
.pn-vbox::backdrop{background:var(--scrim)}
.pn-vbox .pn-vstrip,.pn-vbox .pn-vitem__desc{color:var(--on-chrome)}
.pn-vbox .pn-vstrip__age,.pn-vbox .pn-vitem__title,.pn-vbox .pn-vstrip__status{color:var(--on-chrome-2)}
.pn-vbox .pn-vrail{border-color:var(--chrome-line);color:var(--on-chrome)}
.pn-vbox .pn-vrail:hover{border-color:transparent}
.pn-vbox__x{position:absolute;top:20px;right:20px;z-index:9}
.pn-vbox__nav{position:absolute;right:20px;z-index:9}
.pn-vbox__prev{top:calc(50% - 50px)}
.pn-vbox__next{top:calc(50% + 10px)}

/* Filter sheet (.pn-sheet): kicker labels over chip groups. */
.pn-vsheet__in{display:grid;gap:12px}
.pn-vsheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.pn-vsheet__head h2{margin:0}
.pn-vsheet__x{position:relative;top:auto;right:auto}
.pn-vsheet__label{margin:8px 0 0;font:var(--type-label);letter-spacing:0;color:var(--ink)}
.pn-vsheet .pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-vsheet .pc-chip .pc-ico{width:16px;height:16px}
.pn-vsheet .pc-btn--block{margin-top:12px}

/* Toast (limit, offline, copied): the kit toast above the dock. */
.pn-vtoast{position:fixed;left:50%;bottom:calc(var(--dock) + var(--toast-gap));z-index:var(--z-toast);transform:translateX(-50%);max-width:calc(100vw - 32px)}
.pn-vtoast[hidden]{display:none}
@media (min-width:701px){.pn-vtoast{bottom:var(--toast-low)}}

@media (prefers-reduced-motion:reduce){
  .pn-vskel .pn-vitem__media::after,.pn-vskel i::after{animation:none}
  .pn-vburst{display:none}
  .pn-vitem__play,.pn-vitem__scrub,.pn-vitem__poster,.pn-vlist > .pn-vitem{transition:none}
}

/* Phone feed: one compact tool row (the Sellers | Videos tabs left, layout + filter right), then the feed fills the
   rest of the viewport (videos.js fit()). The page head and the chip rows live in the filter sheet meanwhile. */
@media (max-width:1023px){
  .pn-main:has(> .pn-vpage.is-feed){padding-top:12px}
  .pn-vpage.is-feed{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .pn-vpage.is-feed > *{grid-column:1 / -1}
  .pn-vpage.is-feed > .pn-vhead{grid-column:1;align-self:center}
  .pn-vpage.is-feed > .pn-vbar{grid-column:2;grid-row:1;align-self:center}
  .pn-vpage.is-feed > .pn-vseller{grid-row:2}
  .pn-vpage.is-feed .pn-vhead .pn-apphead__row,.pn-vpage.is-feed .pn-vhead .pc-sub,.pn-vpage.is-feed .pn-vhead .pn-backchip{display:none}
  .pn-vpage.is-feed .pn-vhead .pc-apphead__tabs{margin-top:0}
  .pn-vpage.is-feed > .pn-vbar > .pn-vchips,.pn-vpage.is-feed .pn-vsortchip{display:none}
  .pn-vpage.is-feed .pn-vbar__sheet{display:inline-grid}
}
.pn-vunavail .pc-btn{color:var(--on-chrome);border-color:var(--chrome-line)}
.pn-vunavail .pc-btn:hover{border-color:transparent;background:transparent;color:var(--on-chrome)}
/* QA fixes: the poster may scale (blur) without widening the tile's scroll box; captions and the "+n more" chip wrap in
   narrow tiles; the collection label is not a name, so it wraps too; the unlock button fits the feed on one line. */
.pn-vitem__media.pc-media{overflow:visible;clip-path:inset(0)}
/* polish r1: the grid rule above must not undo the owner's 30.09. rounded clip on the player page and in the lightbox. */
.pn-vsolo .pn-vitem__media.pc-media,.pn-vbox .pn-vitem__media.pc-media{contain:paint;clip-path:inset(0 round var(--r-m))}   /* paint containment: the scaled blur never widens the page */
@media (max-width:700px){.pn-vsolo .pn-vitem.is-locked:not(.is-open) .pn-vitem__media{width:100%}}   /* the locked blur lines up with the gate card */
.pn-vitem__desc{overflow-wrap:anywhere}
.pn-vstrip.is-collection .pn-vstrip__name{white-space:normal;overflow:visible}
@media (max-width:1023px){
  .is-feed .pn-vgate{padding:16px}
  .is-feed .pn-vgate .pc-btn{padding-inline:12px;white-space:normal;text-wrap:balance;text-align:center}   /* layout_qa: the label overflowed the 188 px gate on 360 / 390 */
  .is-feed .pn-vgate .pc-btn .pc-ico{display:none}
}

/* ---------- polish r4: the single video page ----------
   The h1 is the video (her short caption, which then leaves the side column; else @handle). The actions are even: on
   phones two equal columns (the long "custom video" pill takes the last row whole), from 701 the share button is the
   icon square at the end of the pill row (its name stays in aria-label + title), so no pill is ever left alone. */
.pn-vdetail.is-captioned > .pn-vsolo .pn-vitem__desc{display:none}
@media (max-width:700px){
  .pn-vsolo .pn-vitem__rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pn-vsolo .pn-vrail{width:100%;min-width:0;padding-inline:12px}
  .pn-vsolo .pn-vrail[form="pnVCustom"]{order:1;grid-column:1 / -1}
  .pn-vsolo .pn-vitem__rail > .pn-vshare:first-child{grid-column:1 / -1}   /* her own video: share alone, full width */
}
@media (min-width:701px){
  :is(.pn-vsolo,.pn-vbox) .pn-vshare{width:44px;padding:0}
  :is(.pn-vsolo,.pn-vbox) .pn-vshare .pn-vrail__t{display:none}   /* the name stays in aria-label + title */
}
/* ≥ 1024, open video: "More from @x" moves into the column beside the 9:16 player (one row of tiles under the actions),
   so the side column is not 500px of empty paper. The player spans the rows (subgrid); the last side row takes the
   rest of its height. Locked: the unlock panel fills the column and the rail stays below. */
@media (min-width:1024px){
  .pn-vdetail.has-side{grid-template-columns:auto minmax(320px,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:40px}
  .pn-vdetail.has-side > *{grid-column:1 / -1}
  .pn-vdetail.has-side > .pn-vhead{grid-row:1}
  .pn-vdetail.has-side > .pn-vsolo{display:contents}
  .pn-vdetail.has-side > .pn-vsolo > .pn-vitem{grid-column:1 / -1;grid-row:2 / span 3;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-template-areas:"stage meta" "stage rail" "stage .";row-gap:16px}
  .pn-vdetail.has-side > .pn-vsec--more{grid-column:2;grid-row:4;align-self:start;margin-top:12px}
  .pn-vdetail.has-side > .pn-vsec--next{grid-row:5}
  .pn-vdetail.has-side > .pn-vsec--more .pc-sechead{margin-bottom:12px}
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist{--dt-cols:repeat(2,minmax(0,1fr));--dt-gap:12px}
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist > :nth-child(n+3){display:none}
}
@media (min-width:1280px){
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist{--dt-cols:repeat(3,minmax(0,1fr))}
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist > :nth-child(3){display:grid}
}
/* UX 433 B-080 (round 2): the rail's "…" — Ask for a custom video and Share, opened as a small tonal menu beside the rail */
.pn-vmore{position:relative}
.pn-vmore > summary{list-style:none;cursor:pointer}
.pn-vmore > summary::-webkit-details-marker{display:none}
.pn-vmore__menu{position:absolute;right:calc(100% + var(--space-2));bottom:0;z-index:5;display:grid;min-width:220px;padding:var(--space-2);border-radius:var(--r-m);background:var(--surface-3);box-shadow:var(--shadow-e1)}
.pn-vmore__row{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border:0;border-radius:var(--r-s);background:transparent;color:var(--ink);font:var(--type-strong);text-align:left;text-decoration:none;cursor:pointer}
.pn-vmore__row:hover{background:var(--surface-2)}
/* pnew page group: account (v3, docs/design-v3-system.md §4) — "Your corner" (me), settings, the account frame the
   alerts page sits on, the hero stat (alerts FOMO, seller nudge card) and the chrome toast.
   The mockup app frame (design/v2/cast-mockup.html .app): ui_apphead (h-m + .sub + .tabs-app), then the view.
   Places kit components only: no new colour, radius, font size, button or pill look. */

/* ---------- Your corner (/account/): the active view + the account side card ---------- */
.pn-corner{display:grid;gap:0;align-content:start;min-width:0}
.pn-corner .pn-stack > .pn-nudgestack{margin:0}
.pn-corner__view{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
/* View panels: the paper card with the card head (30 / 26) and a count label, the see-all link bottom right. */
/* My listings: the listing card (adcard2 03.10.: the photo is the card, so already flat inside the panel) 4 across on
   desktop, 2 on phones (mockup .pairs gap 18 / 12), the last tile = the dashed upload slot "New ad" (as tall as a photo).
   The caption's last line is the state (dot + word) where buyers see "@name". Paused and draft photos rest dimmed, sold
   ones lose some colour, and the price ticket goes quiet. */
.pn-corner__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-4)}
.pc-slot.pn-corner__add{aspect-ratio:4/5;height:auto;gap:var(--space-2);padding:var(--space-3);color:var(--ink);font:var(--type-label);text-decoration:none;text-align:center}
.pc-slot.pn-corner__add .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-mypair__state{gap:var(--space-2);font-weight:var(--w-strong)}
.pn-mypair__state i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--scard-ink-3)}
.pn-mypair.is-live .pn-mypair__state i{background:var(--success)}
.pn-mypair.is-draft .pn-mypair__state i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--scard-ink-2)}
.pn-mypair.is-reserved .pn-mypair__state i,.pn-mypair.is-sold .pn-mypair__state i{background:var(--accent)}
.pn-mypair.is-paused .pc-media > img,.pn-mypair.is-paused .pc-media > picture > img,.pn-mypair.is-draft .pc-media > img,.pn-mypair.is-draft .pc-media > picture > img{opacity:.6}
.pn-mypair.is-sold .pc-media > img,.pn-mypair.is-sold .pc-media > picture > img{filter:grayscale(.4)}
.pn-mypair:is(.is-paused,.is-draft,.is-sold) .pc-card__ticket{background:var(--scard-glass-hover);color:var(--scard-ink-2)}
.pn-mypair.is-live .pn-mypair__state{color:var(--scard-ink)}
/* Favourites: the seller tiles in a row (mockup .sellers gap 26 / 14). */
.pn-corner__sellers{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.pn-corner__favstrip{margin-top:var(--stack-gap)}
.pn-corner__favstrip:not(.pn-panel) > .pc-sechead{margin-bottom:var(--head-gap)}   /* MBY-122: the followed sellers' cards stand on the page under their head, never a card in a card */
.pn-corner__favdoor{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-5)}
.pn-corner__favdoor > .pc-sechead{margin:0;flex:1 1 280px}
.pn-corner__favdoor .pc-help{margin:var(--space-1) 0 0;max-width:52ch}
.pn-corner__sellers > .pc-sellertile{flex:none}
/* polish-b 02.10.: Saved pairs = the listing cards straight on the page (no card in a card), the sm head of the panels
   over them; columns by width (the wide-grid column counts are for full-width grids, this one sits beside the side card). */
.pn-corner .pn-split .pn-corner__savedgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--wide-grid-gap)}
.pn-corner__saved > .pc-sechead{margin-bottom:var(--space-4)}
.pn-corner__saved + .pn-panel{margin-top:var(--stack-gap)}
/* Latest chats: the app rows; the unread dot sits before the chevron. */
.pn-corner__panel .pn-rows{padding-bottom:var(--space-1)}
.pn-cornerchat .pc-avatar{flex:none}
/* The preview wraps (long words break anywhere); the name is one line with an ellipsis and its title, as in the
   chats list (owner rule: only names may shorten). */
.pn-cornerchat .pn-row__main > span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pn-cornerchat .pn-row__main > b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* innen 500 CON-11: the preview is the Chats row's one-line clamp with its tick and time */
.pn-cornerchat .pn-cornerchat__line{display:flex;align-items:center;gap:var(--space-1);min-width:0}
.pn-cornerchat .pn-cornerchat__t{flex:1;font:var(--type-meta);min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.pn-cornerchat .pn-cornerchat__at{flex:none;font:var(--type-meta);color:var(--ink-3)}   /* the time stamp: 13, ink-3, like the feed's (MCH-095) */
/* MCH-087 / MCH-088: the "Finish your profile" line keeps the panel's inset, so every card's content starts on the same edge */
.pn-corner .pn-clline{padding:var(--space-3) var(--panel-pad)}
.pn-corner .pn-clline__t{font:var(--type-body)}
@media (max-width:700px){
  .pn-corner__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pn-corner .pn-split .pn-corner__savedgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pn-corner__sellers{gap:var(--space-3)}
}

/* ---------- Me: the profile card of the side column ---------- */
.pn-mehead{display:grid;gap:var(--space-5)}
.pn-mehead__link{display:flex;align-items:center;gap:var(--space-4);min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-m)}
/* MCH-097: the account card's picture is a profile card's 64, not the profile head's 96 */
.pn-mehead__link > .pn-mehead__av{width:var(--avatar-xl);height:var(--avatar-xl);font-size:var(--fs-h1)}
.pn-mehead__who{flex:1;display:grid;justify-items:start;gap:var(--space-1);min-width:0}
/* The name = the card head (--type-title); "@" by CSS like the seller tile, never in the text. Long handles wrap. */
.pn-mehead__who > b{max-width:100%;font:var(--type-title);color:var(--ink);overflow-wrap:anywhere}
.pn-mehead__who > b::before{content:"@"}
.pn-mehead__link:hover .pn-mehead__who > b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.pn-mehead__badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2)}
.pn-mehead__since{font:var(--type-meta);color:var(--ink-2)}
/* Owner 30.09.: no profile picture yet — a small camera button sits on the avatar's lower right (the avatar is 64 and
   centred in the row, so the button follows it however the name wraps); it leads to the editor's picture block. */
.pn-mehead__top{position:relative;min-width:0}
.pn-mehead__cam{position:absolute;left:calc(var(--avatar-xl) - var(--space-6));top:calc(50% + var(--space-1));width:32px;height:32px;background:var(--surface-2);border-color:transparent;color:var(--ink)}
.pn-mehead__cam::after{content:"";position:absolute;inset:-6px}   /* 44 to hit */
.pn-mehead__cam .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-mehead__cam:hover{background:var(--surface-3)}
/* The counter: a stat tile = a note (surface 2, --r-m), the number --type-num in ink, the label --type-meta; values never clip, labels wrap. */
.pn-mehead__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.pn-mehead__stats.is-one{grid-template-columns:minmax(0,1fr)}
/* polish r4: "All read" is a quiet meta line (no fill, no tile), not a control. */
.pn-mehead__allread{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-mehead__allread .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--success)}
.pn-mehead__stats > a{display:grid;gap:var(--space-1);align-content:center;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:inherit;text-decoration:none;transition:background-color var(--dur-1)}
.pn-mehead__stats > a:hover{background:var(--surface-3);box-shadow:none}   /* a step up (owner 05.10.: no light mint hover on dark) */
.pn-mehead__stats b{max-width:100%;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-mehead__stats span{max-width:100%;font:var(--type-meta);color:var(--ink-2);overflow-wrap:anywhere;text-wrap:balance}

/* ---------- Account sheet (the side card of Your corner): grouped rows ---------- */
/* One sheet per column: groups separated by air and the kicker-type group label (tonal pass 05.10.: no inset line). */
.pn-acctsec{min-width:0;scroll-margin-top:calc(var(--header-h) + var(--space-4))}
.pn-acctsheet .pn-grouplabel{margin:0;padding:var(--space-3) var(--row-inset) var(--space-2)}   /* list pad 8 + 12 = the panel's 20 (MCH-098) */
.pn-acctsheet > .pn-acctsec{position:relative}
.pn-acctsheet > .pn-acctsec:not([hidden]) ~ .pn-acctsec:not([hidden]){margin-top:var(--space-1)}   /* groups 16 apart (4 + the label's 12), MCH-098 */
.pn-acctsheet .pn-rows{padding-bottom:var(--space-1)}
/* Menu sub lines wrap (it/fr/pt are long) instead of clipping with an ellipsis. */
.pn-acctsheet .pn-row__main > span:not([class]){white-space:normal;text-overflow:clip}
.pn-acctsheet .pn-row .pc-badge{flex:none}

/* ---------- Hero stat (alerts FOMO, seller nudge card): the dark box with the tile number (mockup .box--dk + .tile) ---------- */
.pn-herostat{position:relative;display:grid;gap:var(--space-4);margin:0;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--dkbox);color:var(--dk-ink)}
.pn-herostat p{margin:0}
.pn-herostat__main{display:grid;justify-items:start;gap:var(--space-2);min-width:0}
.pn-herostat__n{font:var(--type-display);letter-spacing:var(--tr-h);color:var(--dk-ink);font-variant-numeric:tabular-nums}   /* the one hero number of the view, in ink (pink is for the one key, MCH-105) */
.pn-herostat__l{max-width:none;margin:0;font:var(--type-title);color:var(--dk-ink);overflow-wrap:break-word;hyphens:manual}
.pn-herostat__pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-herostat__pill{display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:0 var(--space-3);border:0;background:var(--dkbox-tile);border-radius:var(--r-full);color:var(--dk-ink);font:var(--type-label)}
.pn-herostat__pill b{font-weight:var(--w-bold);color:var(--dk-ink);font-variant-numeric:tabular-nums}
.pn-herostat__pill .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.pc-btn.pn-herostat__cta:not(.pc-btn--primary):not(.pc-btn--premium){border-color:transparent;color:var(--ink);background:var(--surface-2)}   /* a secondary key (§7.2): surface 2, never transparent with an edge */
.pc-btn.pn-herostat__cta:not(.pc-btn--primary):not(.pc-btn--premium):hover{border-color:transparent;background:var(--surface-3)}
@media (min-width:701px){
  .pn-herostat{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--space-6)}
  .pn-herostat__main{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:var(--space-4)}
  .pn-herostat__l{margin:0 0 var(--space-1)}
  .pn-herostat__pills{grid-column:1}
  .pn-herostat__cta.pc-btn--block{grid-column:2;grid-row:1 / span 2;align-self:end;width:auto}
}

/* ---------- Alerts page (templates/alerts.php, lalerts.php; the page sits on this frame) ----------
   design system P3 (MCH-163, MCH-164): the reach box's tiles are notes with the number in ink (pink is for the one key);
   an alert row is the kit row — text 15, the time 13 in ink-3, a photo without a frame. The older alert rules in
   src-css/pages/chat.css (P4) come before this file and lose to it; they go when P4 tidies chat.css. */
.pn-alert{gap:var(--space-3);min-height:64px}
.pn-alertspage .pn-row__main > .pn-al__txt{font:var(--type-body)}
.pn-alertspage .pn-al__meta time{color:var(--ink-3)}
.pn-alertspage .pn-al__thumb{border:0;border-radius:var(--r-m)}
.pn-alertspage .pn-reach .pc-tile{padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m)}
.pn-alertspage .pn-reach .pc-tile b{color:var(--ink)}
.pn-alertspage .pn-reach .pc-tile p{margin-top:var(--space-1);font:var(--type-meta);color:var(--ink-2)}
/* Filtering hides rows/groups with [hidden]; the line is drawn only between rows that are visible. */
.pn-acctsheet > .pn-acctsec[hidden]{display:none}


/* ---------- Settings: the groups as panels in two balanced columns (≥1000), one column on phones ---------- */
.pn-set{display:grid;gap:0;align-content:start;min-width:0}
/* The groups sit in the .pn-pair primitive (app.css): two balanced columns from 1000, Blocked spans both. */
@media (min-width:1000px){
  .pn-set__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-set__wide{grid-column:1 / -1}
}
/* polish r4: the section pills are jump links; from 1024 every group is on screen in the two columns, so they go. */
@media (min-width:1024px){.pn-set .pc-apphead__tabs:has(> [data-spy]){display:none}}
.pn-setpanel{scroll-margin-top:calc(var(--header-h) + var(--space-4))}
.pn-setpanel > .pc-sechead{margin-bottom:var(--space-2)}
.pn-setpanel .pn-rows{margin:0 calc(-1 * var(--space-3))}
.pn-setpanel .pn-rows .pn-row{padding-inline:var(--space-3)}
.pn-togglerow{cursor:pointer;min-height:68px;margin:0}
.pn-togglerow .pn-row__main > span{white-space:normal}
.pn-togglerow:hover{background:var(--surface-2)}
.pn-row.is-locked{cursor:default}
.pn-row.is-locked .pn-row__main > b{color:var(--ink-2)}
.pn-lock-ico{flex:none;color:var(--ink-3)}
.pn-row.pn-row--danger .pn-row__main > b{color:var(--danger)}
.pn-setpanel a.pn-row .pc-badge{flex:none}
/* Help lines wrap (fr "Comparer les offres et les prix" beside the plan pill) instead of an ellipsis. */
.pn-setpanel .pn-row__main > span{white-space:normal;overflow:visible;text-overflow:clip}
/* A bigger hit area around the 52 x 30 switch without changing its look. */
button.pc-switch::before{content:"";position:absolute;inset:-7px -4px}
/* Blocked members: the same rows; the empty line and the lede are plain muted text. */
.pn-blocklede{margin:0 0 var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-blockempty{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-2) 0;font:var(--type-strong);color:var(--ink-2)}
.pn-blockempty[hidden],.pn-blocklist[hidden]{display:none}
.pn-blockempty .pc-ico{flex:none;color:var(--success)}
.pn-blocklist{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.pn-pair__wide .pn-blocklist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}}
.pn-blockrow{min-height:64px;transition:opacity var(--dur-2) ease-out,transform var(--dur-2) ease-out}
.pn-blockrow.is-leaving{opacity:0;transform:translateX(12px)}
.pn-blockrow .pc-avatar{flex:none;width:var(--avatar-m);height:var(--avatar-m)}
.pn-blockrow .pn-mask__lock{width:24px;height:24px}
.pn-blockrow__name{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-blockrow__name:hover b{text-decoration:underline}
.pn-blockrow form{flex:none;margin:0}
/* UX 433 (owner 04.11.): settings in ONE column, one order on every screen (G-078); each part below. */
.pn-set--one .pn-set__col{max-width:760px;width:100%}
.pn-setuser .pn-row__main > span{font:var(--type-body);color:var(--ink)}
.pn-setuser__lock{flex:none;display:inline-grid;place-items:center;color:var(--ink-3)}
.pn-setfact > .pc-ico{flex:none;color:var(--ink-2)}
/* "Change password" folds (S-153): its own small form under one row; the eye sits in the field (G-083) */
.pn-setpw{margin:var(--space-2) calc(-1 * var(--space-3)) 0}
.pn-setpw > summary{list-style:none;cursor:pointer;padding-inline:var(--space-3)}
.pn-setpw > summary::-webkit-details-marker{display:none}
.pn-setpw > summary .pn-chev{transition:transform var(--dur-base)}
.pn-setpw[open] > summary .pn-chev{transform:rotate(180deg)}
.pn-setpw__body{display:grid;gap:var(--space-3);padding:var(--space-2) var(--space-3) 0}
.pn-pwbox{position:relative;display:block}
.pn-pwbox > .pc-input{padding-right:52px}
.pn-pwbox__eye{position:absolute;top:50%;right:4px;transform:translateY(-50%)}
.pn-pwbox__eye[aria-pressed="true"]{color:var(--ink)}
.pn-pwrules{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:var(--space-2) 0 0;padding:0;list-style:none;font:var(--type-meta);color:var(--ink-3)}
.pn-pwrules li{display:inline-flex;align-items:center;gap:var(--space-1)}
.pn-pwrules li .pc-ico{opacity:.35}
.pn-pwrules li.is-ok{color:var(--success)}
.pn-pwrules li.is-ok .pc-ico{opacity:1}
/* an error under the control it is about (G-082 / G-109) */
.pn-u4s-err{margin:var(--space-1) 0 0;color:var(--danger);font:var(--type-meta)}
.pn-u4s-err[hidden]{display:none}
/* «Who sees my shop» (S-151): one radio row per choice, its cost as the subtitle */
.pn-u4svis__set{margin:0;padding:0;border:0;min-width:0}
.pn-u4svis__h{display:block;margin:0 0 var(--space-1);padding:0}
.pn-radiorow{cursor:pointer;align-items:flex-start;gap:var(--space-3);min-height:64px}
.pn-radiorow > .pc-radio{margin-top:2px}
.pn-radiorow:hover{background:var(--surface-2)}
/* Settings › Selling (S-155): its parts in one panel */
.pn-setsell .pn-setsub{margin-top:var(--space-2)}
.pn-setpay > summary{list-style:none;cursor:pointer}
.pn-setpay > summary::-webkit-details-marker{display:none}
.pn-setpay__act{flex:none;font:var(--type-strong);color:var(--ink)}
.pn-setpay[open] .pn-setpay__act{visibility:hidden}
.pn-setpay__form{display:grid;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-3)}
.pn-setship{display:grid;gap:var(--space-1);margin-top:var(--space-3)}
.pn-setship .pc-input{max-width:160px}
/* B-138 / G-092: a mail switch that only matters while "Email me about new messages" is on: greyed and drawn as off */
.pn-set .is-paused .pc-switch,.pn-set .pn-switchrow.is-paused .pc-switch{background:var(--switch-off,var(--surface-2))}
.pn-set .is-paused .pc-switch::after,.pn-set .pn-switchrow.is-paused .pc-switch::after{transform:none;background:var(--switch-knob,var(--paper))}
.pn-set .is-paused .pn-row__main,.pn-set .pn-switchrow.is-paused .pn-row__main{opacity:.5}
/* G-090: adding an address — closed it is the key, open it is the form (the key goes) */
.pn-sva-edit--add[open] > summary{display:none}
/* G-079: the account Save waits until something changed — then it reads as waiting, not as the pink key */
:root .pc-root .pn-set .pc-btn--primary:disabled,:root:not([data-theme="light"]) .pc-root .pn-set .pc-btn--primary:disabled{background:var(--surface-2);color:var(--ink-3);opacity:1}
/* B-141: closing the account sits apart at the end */
.pn-setdanger .pn-row--danger .pc-ico{color:var(--danger)}

/* Toast: one definition in components.css (UX polish 23.10. UX-038; it was doubled here with z 60) */

@media (prefers-reduced-motion:reduce){
  .pn-mehead__stats > a,.pn-blockrow{transition:none}
}

/* ---------- Your corner > Following / Followers (owner 03.10.) ----------
   The rows are sell-home's buyer rows (partials/card_buyer, partials/row_follow) in the corner's narrower column: the
   same wrap rules as .pn-sellhome (the actions drop under the name, the name and the status line are never cut), one
   column until the column is wide enough for two. */
.pn-corner .pn-buyerrow{flex-wrap:wrap;row-gap:var(--space-2)}
.pn-corner a.pn-card-link.pn-row__lead{flex:1 1 200px}
.pn-corner .pn-buyerrow .pn-row__main > span{white-space:normal}
.pn-followrow .pn-follow{min-width:132px}
.pn-followsaved{margin-top:var(--space-6)}
.pn-followlock{display:grid;gap:var(--space-4);justify-items:start}
.pn-followlock__text{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ink-2);font:var(--type-body)}
.pn-followlock__text .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--ink)}
@media (min-width:900px) and (max-width:1279px){
  .pn-corner .pn-buyerrows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .pn-corner .pn-buyerrow__acts{padding-left:64px}   /* under the name: the 52 avatar + the 12 gap */
}
@media (max-width:380px){
  .pn-corner .pn-buyerrow__acts{flex:1 1 100%;min-width:0;padding-left:0}
  .pn-corner .pn-buyerrow__acts > .pc-btn,.pn-corner .pn-buyerrow__acts .pn-follow{flex:1 1 0;min-width:0}
}

/* ---------- legacy home (docs/ml-home-03-10.md): Your corner, lists, onboarding on legacy's rows ---------- */
.pn-lhstats{padding:var(--panel-pad)}
.pn-lhstats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
@media (min-width:720px){.pn-lhstats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:720px){.pn-lhstats__grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}   /* A9: a buyer has two tiles */
/* A9 (owner 18.10.): a buyer's home has listing pictures to buy — the cards of the market, two across on phones, four on wide screens */
.pn-lhpicks{display:grid;gap:var(--space-3);padding:var(--panel-pad)}
.pn-lhpicks > .pn-sechead,.pn-lhpicks > .pc-sechead{margin:0}
.pn-lhpicks__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media (min-width:720px){.pn-lhpicks__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pn-lhstat{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico n" "l l";align-items:center;gap:var(--space-1) var(--space-2);min-height:84px;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:inherit;text-decoration:none;transition:background-color var(--dur-1)}
.pn-lhstat:hover{background:var(--surface-3);box-shadow:none}
div.pn-lhstat:hover{background:var(--surface-2)}   /* UX 433 S-031: a figure without a list is not a link */   /* a step up (owner 05.10.: no light mint hover on dark) */
.pn-lhstat__ico{grid-area:ico;display:grid;place-items:center;color:var(--ink-2)}
.pn-lhstat__n{grid-area:n;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-lhstat__l{grid-area:l;min-width:0;font:var(--type-label);color:var(--ink-2);overflow-wrap:anywhere}
.pn-lhstat:has(.pn-lhstat__sub){grid-template-areas:"ico n" "l l" "s s"}   /* UX 433 round 2 S-034 / S-033: the tile's second line */
.pn-lhstat__sub{grid-area:s;min-width:0;font:var(--type-meta);color:var(--ink-3);overflow-wrap:anywhere}
.pn-lhstat.is-hot .pn-lhstat__ico{color:var(--accent)}   /* the unread mark is the icon; the number stays ink (MCH-105) */
.pn-lhempty{display:grid;justify-items:start;gap:var(--space-2);padding:0 var(--space-3) var(--space-3)}
.pn-lhads__sum{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0;padding:0 var(--space-3) var(--space-2)}
.pn-lhads__foot{padding:var(--space-2) var(--space-3) var(--space-3)}
.pn-lhstate{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-label);color:var(--ink-2)}
.pn-lhstate > i{width:8px;height:8px;border-radius:50%;background:var(--glyph-off);flex:none}
.pn-lhstate--live > i{background:var(--success)}
.pn-lhstate--review > i{background:var(--warning)}
.pn-lhstate__ico{flex:none}   /* UX 433 G-106: In review = amber clock, Not approved = red alert */
.pn-lhstate--review > .pn-lhstate__ico{color:var(--warning)}
.pn-lhstate--rejected > .pn-lhstate__ico{color:var(--danger)}
.pn-lhstate--rejected{color:var(--danger)}
.pn-lhstate--nophoto > i,.pn-lhstate--nudity > i{background:var(--accent)}   /* UX 433 S-030: needs you = pink; waiting = amber (G-106), one palette with My listings */
.pn-lhstate--rejected > i{background:var(--danger)}   /* U27 (18.10.): My listings' states and dots (items.css .pn-listate) */
.pn-pcfdash .pn-lhstate.pn-lhstate--ready > i{background:var(--accent)}   /* premium conversion experiment (night 05.11. #39): "Ready to publish" has its own accent dot, never the grey of an off state (above tonal.css's off-state rule by specificity, so the shared tonal layer stays as it is) */
/* pcf QA 05.11. (browser walk): the meta rows of her corner's cards and of "Your listing is ready" — icon and words side by side
   with a gap (they ran into each other), no browser margin between the rows; a row's state chip wraps instead of being cut */
.pn-pcfdash--profile{gap:var(--space-3)}
.pn-pcfdash .pn-lhwait__meta,.pn-pcfready .pn-lhwait__meta{display:flex;align-items:flex-start;gap:var(--space-2);margin:0}
.pn-pcfdash .pn-lhwait__meta > svg,.pn-pcfready .pn-lhwait__meta > svg{flex:none;margin-top:1px}
.pn-pcfdash .pn-row__main > .pn-lhstate{white-space:normal}
.pn-pcfready .pn-lhwait__meta.pn-lhwait__ad{align-items:center}
.pn-pcfready .pn-lihow + .pn-wiznext__h{margin-top:var(--space-4)}   /* the onboarding's "Premium adds" head stands apart from the free list above it */
/* U4 (owner 18.10.): the listings nobody sees — one line on a tonal step (no frame), the fix a link */
.pn-lhfix{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0 var(--space-3) var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-label);color:var(--ink)}
.pn-lhfix > svg{flex:none;color:var(--ink-2)}
.pn-lhfix > span{flex:1 1 200px;min-width:0}
.pn-lhfix a{color:var(--ink);font-weight:var(--w-bold);text-decoration:underline;text-underline-offset:3px}
.pn-lhad__img{flex:none;width:56px;height:70px;border-radius:var(--r-m);overflow:hidden}
.pn-lhad__img img{width:100%;height:100%;object-fit:cover;display:block}
.pn-lhad__noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--ink-2);background:var(--surface-2)}
.pn-lhad .pn-row__main > b.pn-lhad__t{display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere}
/* Sales 500 VKF-054 / VKF-072 (switches vkf054, vkf072): a listing row's views and interest; her day line under the head */
.pn-lhad__stats{display:block;font:var(--type-cap);font-weight:var(--w-regular);color:var(--ink-2)}
.pn-lhad .pn-row__main > .pn-lhad__fix{display:block;white-space:normal;overflow:visible;font:var(--type-label);color:var(--ink);text-decoration:underline;text-underline-offset:2px}   /* UX 01.11. SEL-31: the row's fix, whole */
.pn-lhday{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-lhday > svg{flex:none}
.pn-lhwait__ad{display:flex;align-items:center;gap:var(--space-2)}   /* VKF-069 (switch vkf069): her listing in the waiting card */
.pn-lhwait__adimg{width:40px;height:50px}
.pn-lpwait{margin:0 0 var(--space-3)}   /* VKF-091 (switch vkf091): the profile editor's strip, outside a panel */
.pn-lhplan{display:grid;gap:var(--space-2);padding:var(--panel-pad)}
/* owner 07.10.: the free seller's waiting buyers, the first panel of her home */
.pn-lhwait{display:grid;gap:var(--space-2);padding:var(--panel-pad);background:var(--surface);border-radius:var(--r-l)}   /* a panel; no pink wash (§2.3) */
.pn-lhwait .pc-h-s{font:var(--type-title)}
.pn-lhwait h2,.pn-lhwait p{margin:0}
.pn-lhwait__meta{color:var(--ink-2);font:var(--type-label)}
.pn-lhwait__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
/* night N1 (08.10.): the week line (#6) and her direct orders (#7) inside the waiting card: quiet ink, the order line a link */
.pn-lhwait__week,.pn-lhwait__orders{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-2);font-weight:var(--w-strong)}
.pn-lhwait__week svg,.pn-lhwait__orders svg{flex:none;color:var(--ink-2)}
.pn-lhwait__orders a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-3);min-height:24px;display:inline-flex;align-items:center}
.pn-lhwait__orders a:hover{text-decoration-color:var(--accent)}
@media (max-width:700px){.pn-lhwait__orders a{min-height:var(--tap)}}   /* phone: the link is a 44 px touch target */
/* night N1 #31: "Your privacy" on a seller's home (the rows of the account sheet, one quiet nickname line) */
.pn-lhpriv .pn-lhpriv__nick{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-2) var(--space-3) var(--space-3);color:var(--ink-2);font:var(--type-label)}
.pn-lhplan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.pn-lhplan__head h2{margin:0;font:var(--type-title)}   /* h2.pc-h-s: the panel head (Sleek 08.10.; it had no rule and fell back to the browser 1.5em) */
.pn-lhplan .pc-btn{justify-self:start}
.pn-lhrows ul{margin:0;padding:0;list-style:none}
.pn-lhrow{flex-wrap:wrap;row-gap:8px}
.pn-lhrow__who{display:flex;align-items:center;gap:var(--space-3);flex:1 1 220px;min-width:0;color:inherit;text-decoration:none}
.pn-lhrow__who:focus-visible{border-radius:var(--r-m)}
.pn-lhrow__who .pn-row__main{min-width:0}
.pn-lhrow__who .pn-row__main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lhrow__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}
.pn-lhpager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3)}
.pn-lhpills{max-width:100%;overflow-x:auto}
@media (max-width:480px){
  .pn-lhrow__acts{flex:1 1 100%;margin-left:0;padding-left:52px}
}
/* onboarding (legacy's /services/step1–3 in the wizard look) */
.pn-lhphoto{display:block;cursor:pointer}
.pn-lhphoto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.pn-lhphoto.is-filled .pn-lhphoto__img{display:block}
.pn-lhphoto.is-filled .pn-crop__empty{display:none}
.pn-lhphoto__busy{position:absolute;inset:0;display:none;background:var(--scrim)}
.pn-lhphoto.is-busy .pn-lhphoto__busy{display:block}
.pn-lhphoto:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-lhoffer{border:0;margin:var(--space-4) 0 0;padding:0;min-width:0}
.pn-lhoffer .pn-offertile{min-height:72px}
.pn-lhoffer .pn-offertile:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-lhdone{display:grid;justify-items:center;text-align:center;gap:var(--space-2);padding-top:var(--space-4)}
.pn-lhdone__mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.pn-lhdone__acts{display:grid;gap:var(--space-2);width:100%;max-width:420px;margin-top:var(--space-3)}
/* night 05.10. (legacy twin of the seller wizard, docs/wizard-seller-audit-05-10.md): one pink key per screen. Step 1:
   "Choose photo" while the tile is empty, "Continue" once a photo is in (html.js flips the dock, the plain form keeps
   both for no-script browsers); the listing step holds the pnew editor in the wizard column; the go-live screen. */
.js .pn-wiz--lh:not(.has-photo) .pn-dock__filled{display:none}
.js .pn-wiz--lh.has-photo .pn-dock__empty{display:none}
.pn-wiz--lh .pn-dock__filled{display:block}
.pn-wiz--lh .pn-dock__empty{display:flex}
.pn-wiz--lh .pn-lhphoto{flex-shrink:0}
.pn-wiz--lh .pn-starters{gap:var(--space-2);margin-top:var(--space-3)}
.pn-wiz--lh .pn-lhoffer{margin-top:var(--space-4)}
.pn-wiz--lh .pn-wizfield{margin-top:var(--space-5)}
.pn-wiz--lhlisting{max-width:800px}
/* owner 05.10.: air between the head and the editor's first panel */
.pn-wiz.pn-wiz--lhlisting .pn-hero{margin:0 0 var(--space-6)}   /* (was: the tape H1 and the editor's first panel */
.pn-liedit--onb{max-width:none}
.pn-liedit--onb .pn-split{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.pn-liedit--onb .pn-panel{margin:0}
.pn-liedit--onb .pn-stack{gap:var(--space-3)}
.pn-liedit--onb .pn-ligrid{max-width:none}
.pn-liedit__how{margin:var(--space-3) 0 0}
.pn-liedit--onb .pn-dock .pc-actionbar__note{margin:0 0 var(--space-2);text-align:center}
.pn-liedit--onb .pn-dock .pc-actionbar__note:empty{display:none}
.pn-lhlive{position:relative}
.pn-lhlive__sticker{position:absolute;right:0;top:0;transform:none}   /* straight (§1: no tilted objects) */
.pn-lhlive .pn-wiznext{margin-top:var(--space-4)}
.pn-lhlive > .pn-hero{padding-right:120px}
@media (min-width:701px){.pn-wiz--lh .pn-dock__empty .pc-btn--block{width:auto;display:inline-flex}}
/* owner 05.10. ("gequetscht"): the follow lists are one narrow column on wide screens (a row spanning 1900px reads
   squeezed), and the panel does not repeat the page title — the page head already says Following / Followers. */
.pn-lp[data-lp-page="follow"] .pn-corner__panel{max-width:960px}
.pn-lp[data-lp-page="follow"] .pn-corner__panel > .pc-sechead{display:none}
/* owner 05.10. ("klebt oben dran"): the follow lists' panel keeps the app gap under the head band */
.pn-lp[data-lp-page="follow"] .pn-corner__panel{margin-top:var(--stack-gap)}

/* bio page (owner 08.10., partials/bio_card.php): the "My page" card on her dashboard — her address in full, Copy link,
   Share, Edit page; a free seller one quiet line to Premium. Secondary keys only (the dashboard keeps its one pink key). */
.pn-biocard{display:grid;gap:var(--space-3);padding:var(--panel-pad)}
.pn-biocard__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pn-biocard__head .pc-h-s{margin:0;margin-right:auto;font:var(--type-title)}   /* h2.pc-h-s had no rule: the browser's 22.5 px (MCH-083) */
.pn-biocard__live{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-label);color:var(--success)}
.pn-biocard__live i{width:8px;height:8px;border-radius:50%;background:var(--success)}
.pn-biocard__addr{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-strong);color:var(--ink-2);overflow-wrap:anywhere}
.pn-biocard__addr b{font-weight:var(--w-bold);color:var(--ink)}
.pn-biocard__acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.pn-biocard__acts .pc-btn{width:100%;padding-inline:var(--space-2)}
.pn-biocard__acts .pc-btn.is-done{color:var(--success)}
.pn-biocard__up{margin:0}
.pn-biocard__done:empty{display:none}
.pn-biocard__done{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:420px){
  .pn-biocard__acts{grid-template-columns:1fr 1fr}
  .pn-biocard__acts .pn-biocard__edit{grid-column:1 / -1}
}

/* ==========================================================================
   My content (owner 09.10., templates/my_content.php, lib/my_content.php): a seller's videos as a grid — thumbnail,
   state chip, date · views · likes, the "where it shows" button (→ the choice sheet) and Remove (→ the confirm sheet);
   the card on her dashboard (templates/partials/mc_card.php). Token-only. No pink key: every change is one tap, saved.
   ========================================================================== */
.pn-mc__panel{display:grid;gap:var(--space-4);padding:var(--panel-pad)}
.pn-mc__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.pn-mc__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0}
.pn-mc__stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}   /* UX 01.11. SEL-42: the page's tiles without "Videos" */
.pn-mc__stats > div{display:grid;gap:var(--space-1);align-content:center;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2)}   /* a stat tile = a note (MCH-090, MCH-091) */
.pn-mc__stats dt{font:var(--type-cap);color:var(--ink-2)}
.pn-mc__stats dd{margin:0;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-mc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-3);margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-mc__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6) var(--space-4)}}
@media (min-width:1024px){.pn-mc__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.pn-mc__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pn-mc__more{display:flex;justify-content:center;margin:0}
.pn-mc__more[hidden]{display:none}
.pn-mctile{display:grid;gap:var(--space-2);align-content:start;min-width:0;transition:opacity var(--dur-1)}
.pn-mctile.is-busy{opacity:.6}
.pn-mctile__media{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border:0;border-radius:var(--r-m);background:var(--ph-media);color:var(--ink-2)}
.pn-mctile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-1)}
.pn-mctile.is-hidden .pn-mctile__media img,.pn-mctile.is-off .pn-mctile__media img,.pn-mctile.is-failed .pn-mctile__media img{opacity:.35}
.pn-mctile__state{position:absolute;left:var(--space-2);top:var(--space-2);z-index:2;max-width:calc(100% - 64px);white-space:normal;line-height:1.2;text-align:left}
.pn-mctile.is-saved .pn-mctile__media{box-shadow:inset 0 0 0 2px var(--success)}   /* the saved flash: a state ring, no frame */
.pn-mctile__cap{display:grid;gap:0;min-width:0;font:var(--type-cap);font-weight:var(--w-regular);color:var(--ink-2)}
.pn-mctile__cap b{overflow:hidden;font:var(--type-label);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.pn-mctile__acts{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-mcvis{flex:1;min-width:0;justify-content:space-between;gap:var(--space-2);padding-inline:var(--space-3);letter-spacing:0}
.pn-mcvis > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mcvis .pc-ico{flex:none}
.pn-mctile.is-hidden .pn-mcvis{color:var(--ink-2)}
.pn-mctile__none{flex:1;min-width:0;font:var(--type-cap);font-weight:var(--w-regular);color:var(--ink-2)}
/* A14 (owner 18.10., innen-50): the remove key on a photo / video is the standard round remove button — a dark glass disc
   with a drawn X (never the brightest thing on the tile, as the cream disc was) */
.pn-mcdel{position:absolute;top:var(--space-1);right:var(--space-1);z-index:2;width:36px;height:36px;min-width:36px;padding:0;border:0;border-radius:50%;background:var(--photo-key-bg);color:var(--on-media);box-shadow:none}   /* the house's dark photo key (A14) */
.pn-mcdel::after{content:"";position:absolute;inset:-4px}   /* 44 to hit */
.pn-mcdel:hover{background:var(--chrome)}
.pn-mcdel .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-mcsheet .pn-sheet__head{align-items:flex-start}
.pn-mcsheet .pn-sheet__head > div{flex:1;min-width:0}
.pn-mcsheet .pn-sheet__head .pc-help{margin:var(--space-1) 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mcsheet .pn-sheet__x{flex:none;width:var(--control-md);height:var(--control-md)}
.pn-mcsheet button.pn-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pn-mcsheet button.pn-row:hover{background:var(--surface-3)}
.pn-mcsheet button.pn-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-mcsheet .pn-row__main > span{white-space:normal}
.pn-mcsheet__on{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);visibility:hidden}   /* the chosen mark (§7.4) */
.pn-mcsheet button.pn-row[aria-checked="true"]{background:var(--surface-3)}
.pn-mcsheet button.pn-row[aria-checked="true"] .pn-mcsheet__on{visibility:visible}
.pn-mcsheet--del form{display:grid;margin:0}
.pn-mcsheet--del .pn-sheet__title{margin-bottom:var(--space-2)}
.pn-mcsheet--del .pn-sheet__body{margin:0}
@media (min-width:701px){dialog.pn-mcsheet{width:min(440px,calc(100% - 32px))}}
.pn-mccard{display:grid;gap:var(--head-gap);padding:var(--panel-pad)}   /* the panel's inset like every card beside it (MCH-087) */
.pn-mccard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.pn-mccard__head .pc-h-s{margin:0;font:var(--type-title);color:var(--ink)}   /* h2.pc-h-s had no rule: the browser's 22.5 px (MCH-083) */
/* phase 2a: select mode (the checkbox on the thumbnail, the sticky bar above the phone tab bar) and the removed view */
.pn-mctile__pick{position:absolute;inset:0;z-index:3;display:none;align-items:flex-start;justify-content:flex-end;padding:var(--space-2);cursor:pointer}
.pn-mctile__pick .pc-check{width:24px;height:24px;border-radius:var(--r-s);box-shadow:var(--shadow-e1)}
.pn-mc.is-select .pn-mctile__pick{display:flex}
.pn-mc.is-select .pn-mcdel,.pn-mc.is-select .pn-mctile__acts{display:none}
.pn-mctile.is-picked .pn-mctile__media{outline:2px solid var(--accent);outline-offset:2px}
.pn-mc.is-working .pn-mc__grid{opacity:.6;pointer-events:none}
.pn-mctile.is-removed .pn-mctile__media img{opacity:.35}
.pn-mcrestore{flex:1;min-width:0}
.pn-mcbar{position:sticky;bottom:calc(var(--dock, 0px) + var(--space-3));z-index:var(--z-nav);display:grid;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-l);background:var(--surface-2);box-shadow:var(--shadow-e1)}   /* e1 (§6) */
.pn-mcbar[hidden]{display:none}
/* phase 2b: the Photos tab (two stat tiles; the tile's key says and switches On profile / Hidden) */
.pn-mc__stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-mcphoto.is-private .pn-mctile__media img,.pn-mcphoto.is-review .pn-mctile__media img{opacity:.6}
.pn-mc.is-select .pn-ptoast{bottom:calc(var(--dock) + 178px + var(--toast-gap))}   /* the result line clears the bar */
.pn-mcbar__n{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-mcbar__link{padding:0;border:0;background:none;color:var(--ink-2);font:var(--type-label);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-mcbar__link[hidden]{display:none}
.pn-mcbar__acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-mcbar__acts .pc-btn:disabled{opacity:.45;cursor:default}
@media (min-width:701px){.pn-mcbar{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
/* innen 500 SEL-48: Select all is a text link in the count line (gone once all are ticked); the photo keys' short words and
   Remove as its icon only on a phone, so the keys stay one row and the bar takes ~90 px instead of a third of the screen */
.pn-mcbar__n{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-3);row-gap:0}
.pn-mcbar__all:disabled{display:none}
.pn-mcbar__short{display:none}
@media (max-width:480px){
  .pn-mcbar{gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .pn-mcbar__acts{flex-wrap:nowrap;gap:var(--space-2)}
  .pn-mcbar__acts .pc-btn{flex:0 1 auto;min-width:0;padding-inline:var(--space-3)}
  .pn-mcbar__long{display:none}
  .pn-mcbar__short{display:inline}
  .pn-mcbar [data-mc-bulk-del]{flex:none;padding-inline:var(--space-2)}
  .pn-mcbar [data-mc-bulk-del] .pc-btn__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pn-mcbar [data-mc-select-done]{margin-left:auto}
  .pn-mc.is-select .pn-ptoast{bottom:calc(var(--dock) + 112px + var(--toast-gap))}
}
/* innen 500 SEL-60: the where-sheet's way to the gallery (her own videos only) */
.pn-mcsheet__see{margin:var(--space-3) 0 0;text-align:center}
.pn-mcsheet__see a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.pn-mctile,.pn-mctile__media img{transition:none}}
/* Video promotion (owner 09.10., templates/partials/vu_card.php): the upload card. Stage (drop zone → first frame → percent →
   check) beside the body with the one key of the moment; the rules under a 1 px grey line. Phone first: the stage is a
   flat strip on top and grows to 16:9 once a frame is in it; from 701 px it stands as a 4:5 tile on the left. */
.pn-vu{display:grid;gap:0;padding:0;overflow:hidden}
.pn-vu__main{display:grid;gap:var(--space-4);padding:var(--panel-pad)}
.pn-vu__stage{position:relative;display:grid;place-items:center;aspect-ratio:21/9;overflow:hidden;border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2);text-align:center;font:var(--type-meta);cursor:pointer;transition:background-color var(--dur-1) ease-out}
.pn-vu__stage.has-thumb{aspect-ratio:16/9}
.pn-vu__stage.is-over{background:var(--surface-3);color:var(--ink)}
.pn-vu__stage:hover{color:var(--ink)}
.pn-vu__idle{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-3)}
.pn-vu__idle .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-vu__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-vu__stage.has-thumb .pn-vu__idle{display:none}
.pn-vu__len{position:absolute;right:var(--space-2);bottom:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--on-media);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-vu__pct{position:absolute;inset:0;display:grid;place-items:center;background:var(--glass-strong);color:var(--on-media);font:var(--type-display);font-variant-numeric:tabular-nums}
.pn-vu__badge{position:absolute;left:var(--space-2);top:var(--space-2);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--success);color:var(--on-success)}
.pn-vu__pct[hidden],.pn-vu__len[hidden],.pn-vu__badge[hidden],.pn-vu__thumb[hidden]{display:none}
.pn-vu:not([data-state="idle"]):not([data-state="chosen"]):not([data-state="error"]) .pn-vu__stage{cursor:default;pointer-events:none}
.pn-vu:not([data-state="uploading"]) .pn-vu__pct{display:none}
.pn-vu__body{display:grid;gap:var(--space-3);align-content:center;min-width:0}
.pn-vu__body h2,.pn-vu__body p{margin:0}
.pn-vu__kicker{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-label);color:var(--ink-2)}   /* a kicker is a label in ink-2, never pink (§3.1) */
.pn-vu__pane{display:grid;gap:var(--space-3);min-width:0}
.pn-vu__pane[hidden]{display:none}
.pn-vu__pane:focus:not(:focus-visible){outline:none}
.pn-vu__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.pn-vu__acts label.pc-btn{cursor:pointer}
.pn-vu__acts > [hidden]{display:none}
.pn-vu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pn-vu:has(.pn-vu__input:focus-visible) .pn-vu__pane:not([hidden]) label.pc-btn{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-vu__drop{display:none}
.pn-vu__link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-3)}
.pn-vu__link:hover{text-decoration-color:var(--accent)}
.pn-vu__pending{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-meta)}
.pn-vu__pending .pc-ico{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-vu__file{display:grid;gap:0;min-width:0}
.pn-vu__file b{font:var(--type-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-vu__file span{color:var(--ink-2);font:var(--type-meta);font-variant-numeric:tabular-nums}
.pn-vu__now{display:flex;align-items:flex-start;gap:var(--space-2);font:var(--type-ui);font-weight:var(--w-strong);color:var(--ink)}
.pn-vu__now .pc-ico{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-vu__now--ok .pc-ico{color:var(--success)}
.pn-vu__now--err{font:var(--type-body)}
.pn-vu__now--err .pc-ico{color:var(--danger)}
.pn-vu__bar{position:relative;height:8px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.pn-vu__bar i{position:absolute;inset:0 auto 0 0;width:var(--vu-p,0%);border-radius:inherit;background:var(--accent);transition:width .25s linear}
.pn-vu__bar.is-wait i{width:38%;background:var(--accent);transform:translateX(-100%);animation:pn-pb-run 1.2s ease-in-out infinite}   /* a solid pink run (the post box's), no accent gradient (tools/build_css.sh guard) */
.pn-vu__line{min-height:18px;color:var(--ink-2);font:var(--type-meta);font-variant-numeric:tabular-nums}
.pn-vu__spin{flex:none;width:var(--icon-m);height:var(--icon-m);margin-top:1px;border-radius:50%;border:2px solid var(--surface-3);border-top-color:var(--accent);animation:pc-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.pn-vu__bar.is-wait i{animation:none;transform:none;background:var(--accent);opacity:.5}.pn-vu__spin{animation:none}.pn-vu__bar i{transition:none}}
.pn-vu__rules{display:grid;gap:var(--space-2);padding:var(--space-3) var(--panel-pad) var(--space-4);border-top:0}
.pn-vu__rules p{margin:0}
.pn-vu__rulesh{display:flex;align-items:center;gap:var(--space-2);font:var(--type-label);color:var(--ink)}
.pn-vu__rulesh .pc-ico{color:var(--ink-2)}
.pn-vu__rulelist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1) var(--space-6);color:var(--ink-2);font:var(--type-meta)}
.pn-vu__rulelist li{position:relative;padding-left:var(--space-3)}
.pn-vu__rulelist li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.pn-vu__nojs{margin:0;padding:0 var(--panel-pad) var(--space-4)}
.pn-vu .pc-btn{min-height:var(--control-md)}
.pn-mc > .pn-vu{margin-bottom:var(--stack-gap)}
/* UX 01.11. SEL-17: My content → Posts (partials/mc_posts.php) — her posts as rows, the state badge of My listings, Delete */
.pn-mcposts__panel{display:block;padding:var(--space-2) 0}
.pn-mcposts__list{margin:0;padding:0;list-style:none}
.pn-mcpost{gap:var(--space-4)}
.pn-mcpost__media{position:relative;display:grid;place-items:center;overflow:hidden;color:var(--ink-3)}
.pn-mcpost__play{position:absolute;right:var(--space-1);bottom:var(--space-1);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--glass);color:var(--on-media)}
.pn-mcpost .pn-row__main > b.pn-mcpost__tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.pn-mcpost .pn-row__main > .pn-admeta{overflow:visible;white-space:normal}
.pn-mcpost__del{flex:none}
.pn-mcpost[aria-busy="true"]{opacity:.5;pointer-events:none}
.pn-mcposts__note{margin:var(--space-3) 0 0}
@media (max-width:520px){.pn-mcpost__del .pc-btn__t{display:none}}
@media (max-width:700px){.pn-vu[data-state="idle"] .pn-vu__stage,.pn-vu[data-state="error"] .pn-vu__stage:not(.has-thumb){display:none}}
@media (min-width:701px){
  .pn-vu__main{grid-template-columns:220px minmax(0,1fr);gap:var(--space-6)}
  .pn-vu__stage,.pn-vu__stage.has-thumb{aspect-ratio:4/5}
  .pn-vu__rulelist{grid-template-columns:1fr 1fr}
  .pn-vu .pc-btn{min-height:var(--control-md)}
}
@media (hover:hover) and (pointer:fine){.pn-vu__drop{display:inline}.pn-vu__tap{display:none}}
/* saved delivery address (owner 16.10., lib/saved_addr.php): the settings section */
.pn-sva-edit{margin-top:var(--space-3)}
.pn-sva-edit > summary{list-style:none;cursor:pointer;width:max-content}
.pn-sva-edit > summary::-webkit-details-marker{display:none}
.pn-sva-form{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.pn-sva-del{margin-top:var(--space-3)}
/* Verkäufe 500 MKT-062 / MKT-066 (lib/mkt_more.php, switches mkt062 / mkt066): her market's number and her invite link in the corner */
.pn-lhmarket{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2)}
.pn-lhmarket > svg{flex:none;color:var(--ink-2)}
.pn-lhinvite{display:grid;gap:var(--space-2)}
.pn-lhinvite__url{width:100%;min-width:0;font:var(--type-label)}
/* @member-only */
/* Modern Dark of the seller home (owner 02.11.; moved here from src-css/dark.css on 03.11., design system P0): written once
   (tools/css_twin.php prints the "auto" twin). P3 owns this block in wave 2. */
/* @dark-twin */
/* owner 02.11. (Buyers page: "kompakter mit einzelnen Cards"): the money box is no box — a row of single cards, the key under
   it. A card is a panel (surface 1, --r-l); its number --type-num in ink (pink is for the one key, docs/design-system.md §2.3) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards{gap:var(--space-3);padding:0;background:none;box-shadow:none;border-radius:0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-3)}   /* auto-fit: one tile spans the row instead of a lone 218 px card (MCH-103) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles > li:last-child:nth-child(odd){grid-column:auto}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile{border-radius:var(--r-l)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile > .pc-tile{display:grid;align-content:start;gap:var(--space-1);padding:var(--space-4) var(--space-5);border-radius:var(--r-l);background:var(--surface)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile:hover > .pc-tile{background:var(--surface-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile b{margin:0;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile p{margin:0;font:var(--type-body);color:var(--ink-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile small{margin-top:0;font:var(--type-meta);color:var(--ink-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-1) 0 0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__act p{margin:0;font:var(--type-body);color:var(--ink-2)}
@media (max-width:700px){[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* owner 02.11. (Buyers page, "weniger Fläche"): buyer wishes as single cards side by side, the key at each card's foot */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail{padding:0;background:none;box-shadow:none;border-radius:0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail > :is(.pn-mc__head,header,div:first-child){padding-inline:0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishrail__list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-3);padding:0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishtile{align-content:start;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--r-l);background:var(--surface)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishtile__acts{justify-content:flex-start;margin-top:auto}
/* @end-dark-twin */
/* the auto twin (generated by tools/css_twin.php) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards{gap:var(--space-3);padding:0;background:none;box-shadow:none;border-radius:0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-3)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles > li:last-child:nth-child(odd){grid-column:auto}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile{border-radius:var(--r-l)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile > .pc-tile{display:grid;align-content:start;gap:var(--space-1);padding:var(--space-4) var(--space-5);border-radius:var(--r-l);background:var(--surface)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile:hover > .pc-tile{background:var(--surface-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile b{margin:0;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile p{margin:0;font:var(--type-body);color:var(--ink-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile small{margin-top:0;font:var(--type-meta);color:var(--ink-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-1) 0 0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__act p{margin:0;font:var(--type-body);color:var(--ink-2)}
@media (max-width:700px){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail{padding:0;background:none;box-shadow:none;border-radius:0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail > :is(.pn-mc__head,header,div:first-child){padding-inline:0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishrail__list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-3);padding:0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishtile{align-content:start;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--r-l);background:var(--surface)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishtile__acts{justify-content:flex-start;margin-top:auto}
}

/* owner 05.11. (Buyers page in light: «falsche Farben in der light»): light shows the same single cards as dark, no anthracite box on paper */
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards{gap:var(--space-3);padding:0;background:none;box-shadow:none;border-radius:0}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-3)}   /* auto-fit: one tile spans the row instead of a lone 218 px card (MCH-103) */
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles > li:last-child:nth-child(odd){grid-column:auto}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile{border-radius:var(--r-l)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile > .pc-tile{display:grid;align-content:start;gap:var(--space-1);padding:var(--space-4) var(--space-5);border-radius:var(--r-l);background:var(--surface)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tile:hover > .pc-tile{background:var(--surface-2)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile b{margin:0;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile p{margin:0;font:var(--type-body);color:var(--ink-2)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pc-tile small{margin-top:0;font:var(--type-meta);color:var(--ink-2)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-1) 0 0}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__act p{margin:0;font:var(--type-body);color:var(--ink-2)}
@media (max-width:700px){[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-shmoney--cards .pn-shmoney__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail{padding:0;background:none;box-shadow:none;border-radius:0}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail > :is(.pn-mc__head,header,div:first-child){padding-inline:0}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishrail__list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-3);padding:0}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishtile{align-content:start;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--r-l);background:var(--surface)}
[data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-sellhome .pn-wishrail .pn-wishtile__acts{justify-content:flex-start;margin-top:auto}
/* @end-member-only */

.pn-biocard__lab{margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}   /* UX 433 G-101 */
/* UX 433 S-143: on My reviews "Report" is a quiet meta link (as on the profile), never the pink-underlined main link */
.pn-myrevs .pn-revreport{min-height:var(--control-sm);font:var(--type-meta);color:var(--ink-2);text-decoration:none}
.pn-myrevs .pn-revreport:hover{color:var(--ink);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px}
/* UX 433 S-080: the Buyers filter row (chips + country select) */
.pn-bfilter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:0 var(--panel-pad) var(--space-3)}
.pn-bfilter .pc-chip.is-on{background:var(--chip-sel,var(--accent-soft));color:var(--ink)}
.pn-bfilter__c{min-width:0;flex:0 1 220px}
.pn-bfilter__c .pc-input{min-height:var(--control-sm)}
.pn-bfilter__none{padding:0 var(--panel-pad) var(--space-4);margin:0}

/* UX 433 round 2 G-078: one section at a time — phones: the list, then one section with "← Settings"; desktop: list + section */
.pn-setgrid{display:grid;gap:var(--space-4);align-items:start;min-width:0}
.pn-setnav .pn-rows{margin:0;padding:0;list-style:none}
.pn-setnav .pn-row{min-height:60px;text-decoration:none;color:inherit}
.pn-setnav .pn-row__main > span{white-space:normal}
.pn-setnav .pn-row[aria-current]{background:var(--surface-2)}
.pn-setback{display:none;align-items:center;gap:var(--space-1);min-height:44px;margin-bottom:var(--space-2);color:var(--ink-2);font:var(--type-strong);text-decoration:none}
.pn-set--sub .pn-setpanel{display:none}
.pn-set--sub[data-sec="set-account"] #set-account,.pn-set--sub[data-sec="set-privacy"] #set-privacy,.pn-set--sub[data-sec="set-sell"] #set-sell,.pn-set--sub[data-sec="set-addr"] #set-addr,.pn-set--sub[data-sec="set-wns"] #set-wns,.pn-set--sub[data-sec="set-ctr"] #set-ctr,.pn-set--sub[data-sec="set-mails"] #set-mails,.pn-set--sub[data-sec="set-notif"] #set-notif,.pn-set--sub[data-sec="set-look"] #set-look,.pn-set--sub[data-sec="set-blocked"] #set-blocked,.pn-set--sub[data-sec="set-close"] #set-close{display:block}
.pn-setlook__h{margin:var(--space-3) 0 var(--space-1)}
.pn-setlook{margin:0;padding:0;list-style:none}
.pn-setlook .pn-row{text-decoration:none;color:inherit}
.pn-setlook .pn-row[aria-current] .pc-ico{color:var(--ink)}
.pn-setnews{margin-top:var(--space-2)}
@media (max-width:999px){
  .pn-setnav{border-radius:var(--r-l);background:var(--surface)}
  .pn-set--sub[data-sec] .pn-setnav,.pn-set--sub[data-sec] > .pc-apphead{display:none}
  .pn-set--sub[data-sec] .pn-setback{display:inline-flex}
}
@media (min-width:1000px){
  .pn-setgrid{grid-template-columns:280px minmax(0,760px)}
  .pn-setnav{position:sticky;top:calc(var(--header-h) + var(--space-4));border-radius:var(--r-l);background:var(--surface);padding:var(--space-2) 0}
  .pn-set--sub:not([data-sec]) #set-account{display:block}
  .pn-set--sub:not([data-sec]) .pn-setnav li:first-child .pn-row{background:var(--surface-2)}
}
/* signup: D — paysite (/membership/) and the pay step S9. Design system P5 (03.11., docs/design-system.md): one panel family,
   no picture (the pink arch and the envelope are gone, MSL-199), no Caveat note, ONE pink key per view — the pay key with the
   plans (rail on desktop, the pay bar on phones); the hero's own pay key is a secondary key (MSL-197). Prices, the plan ring,
   the kicker, the h1 tail and "Save n %" are ink (§2.3). Plans = surface-2 tiles, selected = surface-3 (no ring), one radio
   style, the "Recommended" badge sits under the plan name (no rotated sticker). Phone pay bar = surface-2, no shadow, sticky
   at the end of the form, above the tab bar (in flow, not fixed). Tokens only (§3–§7). */

/* ---------- Frame ---------- */
.pn-paysite{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);min-width:0}
.pn-paysite > *{min-width:0}
.pn-paysite.is-busy [data-pay-go]{opacity:.7;pointer-events:none}
.pn-paysite__alert{margin:0}
/* Sales 50 P2 (18.10.): the refusal line with its reason's sentence and one quiet action under it */
.pn-paysite__declt{flex:1;min-width:0}.pn-paysite__declt > p{margin:0}.pn-paysite__declt > .pn-paysite__declact{margin-top:var(--space-2)}
.pn-num{font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.pn-paysite .pc-ico.pn-starfill{fill:currentColor}

/* ---------- Hero: one panel, text only (MSL-199 / MSL-200) ---------- */
.pn-paysite__hero.pc-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink)}
.pn-memhero__txt{display:grid;justify-items:start;align-content:start;gap:var(--space-4);min-width:0}
/* justify-items:start sizes each line by its content: cap them at the column so a long es/pt head or eyebrow wraps inside. */
.pn-memhero__txt > *{max-width:100%;min-width:0;overflow-wrap:anywhere}
.pn-paysite__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0}
.pn-paysite__hero .pc-kicker{font:var(--type-label);color:var(--ink-2)}   /* a kicker is --type-label in ink-2, never pink (MSL-114 / §3.1) */
.pn-paysite__h{max-width:24ch;margin:0;font:var(--type-display);letter-spacing:-.01em;color:var(--ink)}   /* selling moment: 30 / phone 24, 700 (MSL-027/028/198) */
.pn-paysite__hnum{color:var(--ink)}
/* 01.10.2026: "Start your business." + the tail ("Buyers are waiting." / her number / the open-order value) on its own line, ink. */
.pn-paysite__h.pn-paysite__h--biz{max-width:24ch}
.pn-paysite__htail{display:block;color:var(--ink)}
/* Her shop in numbers: stat tiles (note + --type-num ink), up to 4 in a row, 2 on phones. */
.pc-tiles.pn-paysite__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:var(--space-3);width:100%;margin:0;padding:0;list-style:none}
.pn-paysite__tile{display:flex;min-width:0}
.pn-paysite__tile > .pc-tile{flex:1;min-width:0;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink)}
.pn-paysite__tile .pc-tile b{font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.pn-paysite__tile .pc-tile p{font:var(--type-meta);color:var(--ink-2)}
.pn-paysite__tile.is-locked .pc-tile small{display:block;margin-top:var(--space-1);font:var(--type-cap);color:var(--ink-2)}
.pn-paysite__lede{max-width:560px;margin:0;font:var(--type-prose);color:var(--ink-2)}
.pn-paysite__facts{display:flex;flex-wrap:wrap;gap:var(--space-2);min-width:0}
.pn-paysite__lines{display:contents;margin:0;padding:0;list-style:none}
.pn-paysite__facts .pn-paysite__chips{display:contents}
/* T65: the live stats are the kit .pc-chip--live; the number bold. A wrapped chip keeps its dot on the first line (MSL-201). */
.pc-chip--live .pn-num,.pc-chip--live span > b{font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.pn-paysite__facts .pc-chip--live{align-items:flex-start;color:var(--ink)}
.pn-paysite__facts .pc-chip--live > b{margin-top:var(--space-1)}
.pn-paysite__lines .pc-chip{white-space:normal;text-align:left}
.pn-paysite__faces{display:flex;padding-left:var(--space-2)}
.pn-paysite__faces .pc-avatar.pn-memhero__face{width:var(--avatar-m);height:var(--avatar-m);margin-left:calc(-1 * var(--space-2));border:0;box-shadow:0 0 0 2px var(--surface)}
.pn-paysite__faces .pn-memhero__face.is-blur img{filter:blur(4px);transform:scale(1.15)}
/* @member-only */
/* A5 (owner 18.10.): three blurred faces, a "+N" disc for the rest, and the sentence that says who they are */
.pn-paysite__wrote{display:flex;align-items:center;gap:var(--space-3);margin:0;font:var(--type-strong);color:var(--ink)}
.pn-paysite__faces .pn-paysite__facemore{display:grid;place-items:center;background:var(--surface-2);color:var(--ink);font:var(--type-label);font-variant-numeric:tabular-nums}
/* A5: the live numbers and "N sellers are Premium" as one group — two by two on a phone; from 1000 px the proof line
   lives in the plan rail, so the hero drops its copy */
@media (max-width:700px){.pn-paysite__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.pn-paysite__facts .pc-chip--live{min-width:0;white-space:normal;text-align:left}}
@media (min-width:1000px){.pn-paysite__live--proof{display:none}}
/* Sales 50 P3 (18.10.): the choice sheet after two refusals (built by the pay page's script); its "later" is a button styled as the page's quiet link */
button.pn-later.pn-paychoose__later{border:0;background:none;cursor:pointer}
/* @end-member-only */
.pn-paysite__from,.pn-paysite__discreet,.pn-paysite__waitdone{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-paysite__from{font:var(--type-strong);color:var(--ink)}
.pn-paysite__from .pc-ico,.pn-paysite__discreet .pc-ico,.pn-paysite__waitdone .pc-ico{flex:none;color:var(--ink-2)}
/* the plan card names every price already: no third "Premium: $19/month" line beside it (MSL-202) */
.pn-paysite:has(.pn-paysite__side) .pn-paysite__from{display:none}
.pn-paysite__waitdone{color:var(--ink)}
.pn-paysite__soon{font:var(--type-body)}
.pn-paysite__buyeracts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-1)}
.pn-paysite__usd .pc-ico{flex:none}
@media (max-width:700px){
  .pn-paysite__buyeracts{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .pn-paysite__buyeracts .pc-btn{width:100%;justify-content:center}
  .pc-tiles.pn-paysite__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-paysite__tiles > li:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------- Body: panels | the sticky plan card (≥1000) ---------- */
.pn-paysite__body{--split-side:380px}
@media (max-width:999px){.pn-paysite__body > .pn-paysite__side{order:-1}}   /* owner 03.11.: "oben muss Choose your plan stehen" */   /* the .pn-split primitive (app.css) with the 380 plan card */
@media (min-width:1000px){
  .pn-paysite__body:not(:has(> .pn-split__side)) .pn-paysite__bens.pn-benefits2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}   /* buyer path / active: no plan card, the panels take the row */
  .pn-proofchip.pn-paysite__proofphone{display:none}
}
@media (max-width:999px){
  .pn-proofchip.pn-paysite__proofrail{display:none}
  /* One column: the plans first (order -1 above), then the head and what Premium opens; the pay bar carries the CTA. */
  .pn-paysite__main{display:contents}
  .pn-paysite__missing{order:1}.pn-paysite__proofphone{order:2}.pn-paysite__ben{order:3}.pn-paysite__terms{order:5}.pn-faq{order:6}
  .pn-paysite:has(.pn-psbar) .pn-paysite__sideacts{display:none}
}
.pn-paysite__sect{min-width:0;margin:0}
.pn-paysite__label{display:block;margin:0 0 var(--head-gap)}

/* What she is missing: masked rows, the blurred filler, the time and the ink lock label. */
.pn-missrows{margin:0 calc(-1 * var(--space-3))}
.pn-missrow .pc-avatar{flex:none;width:var(--avatar-m);height:var(--avatar-m)}
.pn-missrow__tx > b{white-space:normal;overflow-wrap:anywhere}
.pn-row__main > .pn-missrow__blur{display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere;filter:blur(4px);user-select:none}
.pn-missrow__end{flex:none;display:grid;justify-items:end;gap:var(--space-1);font:var(--type-cap);font-weight:var(--w-regular);color:var(--ink-2)}
.pn-missrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Phones: the time and the "Premium only" pill go under the text, so the hint keeps its width. */
@media (max-width:480px){
  .pn-missrow{flex-wrap:wrap}
  .pn-missrow__end{flex:1 1 100%;grid-auto-flow:column;justify-content:start;align-items:center;gap:var(--space-2);padding-left:var(--space-16)}
}

/* What Premium opens: rows with the 44 round line control, two across on wide panels (MSL-211: 16 / 24 rhythm). */
.pn-benefits2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4) var(--space-6)}
@media (min-width:701px){.pn-paysite__bens.pn-benefits2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-benefit{display:grid;grid-template-columns:var(--tap) minmax(0,1fr);column-gap:var(--space-3);row-gap:0;align-content:start}
.pn-benefit .pn-rowicon{grid-row:span 2}
.pn-benefit b{font:var(--type-strong);color:var(--ink)}
.pn-benefit > span:not(.pn-rowicon){font:var(--type-meta);color:var(--ink-2)}

/* The terms: a panel with its head (MSL-212; was the dashed rules box). */
.pn-terms{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2) var(--space-6);margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-terms li{display:flex;gap:var(--space-2);font:var(--type-meta);color:var(--ink)}
.pn-terms .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);translate:0 1px;color:var(--ink-2)}

/* FAQ: ONE panel, the questions are rows in it (MSL-213; was a stack of panels). Open row = surface 2. */
.pn-faq{margin:0}
.pn-faq.pn-panel{display:grid;gap:var(--space-1);padding:var(--space-2)}
.pn-faq details{max-width:none;margin:0;padding:0;border-radius:var(--r-m);background:transparent}
.pn-faq details[open]{background:var(--surface-2)}
.pn-faq details:not([open]) > p{display:none}   /* a closed answer has no box (no phantom rect under the pay bar) */
.pn-faq summary,.pn-faq.pc-faq details > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--control-md);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);list-style:none;font:var(--type-strong);color:var(--ink);overflow-wrap:break-word;cursor:pointer}
.pn-faq details:not([open]) > summary:hover{background:var(--surface-2)}
.pn-faq summary::-webkit-details-marker{display:none}
.pn-faq summary .pc-ico{flex:none;color:var(--glyph-off);transition:transform var(--dur-2) ease-out}
.pn-faq details[open] summary .pc-ico{transform:rotate(180deg)}
.pn-faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-faq p{margin:0;padding:0 var(--space-4) var(--space-4);font:var(--type-body);color:var(--ink-2)}
.pn-faq p a{color:var(--ink);font-weight:var(--w-strong);text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
/* the Pix guide inside the plan card: one surface-2 row */
.pn-brguide details{background:var(--surface-2)}

/* ---------- The plan card ---------- */
.pn-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-content:start}
.pn-plans > .pc-sechead{margin-bottom:0}
.pn-paysite__sideacts{display:grid;gap:var(--space-2)}
.pn-paysite__sideacts .pc-btn{justify-content:center;white-space:normal;text-align:center}
.pn-plans__fine{margin:0;text-align:center}
/* Sales 50 P14 (18.10.): what half of the listings here are priced at, next to one month of Premium (over the plans) */
.pn-paysite__salemonth{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-paysite__salemonth .pc-ico{flex:none;translate:0 1px}
/* Sales 50 P10 (18.10.): "why not now?" under "Not now": a small question, tonal chips, the tapped chip's answer */
.pn-paysite__why{display:grid;gap:var(--space-2);margin-top:var(--space-1);justify-items:center;text-align:center}
.pn-paysite__why[hidden],.pn-paysite__whya[hidden]{display:none}
.pn-paysite__whyq{margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-paysite__whychips{justify-content:center}
.pn-paysite__whya{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-proofchip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink)}
.pn-proofchip .pc-badge{flex:none}
.pn-proofchip .pn-num{font:var(--type-strong);font-variant-numeric:tabular-nums}
.pn-devnote{margin:0;padding:var(--space-2) var(--space-3);background:var(--surface-2);border-radius:var(--r-m);font:var(--type-meta);color:var(--ink-2)}

/* Plan picker (§4.13 C): the method segment, then one radio tile per plan (MSL-203: one radio, one tile style). */
.pn-planpick{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);min-width:0}
.pn-planpick [hidden]{display:none}
.pc-seg.pn-planpick__seg{display:grid;grid-template-columns:1fr 1fr}
.pn-planlist{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
.pn-plan{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:center;padding:var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:background-color var(--dur-1) ease-out}
.pn-plan:hover{background:var(--surface-3)}
/* selected = one step up, no ring (the pink ring was a fourth pink object; tonal.css / inside.css still draw it, so this wins by weight) */
.pn-paysite .pn-planlist > .pn-plan:has(input:checked){background:var(--surface-3);box-shadow:none}
.pn-plan:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-plan__main{display:grid;justify-items:start;gap:var(--space-1);min-width:0}
.pn-plan__days{display:block;font:var(--type-title);color:inherit;white-space:nowrap}
.pn-plan__pm{font:var(--type-meta);color:var(--ink-2)}
.pn-plan__end{display:grid;justify-items:end;gap:var(--space-1);text-align:right}
.pn-plan__price{font:var(--type-num);font-variant-numeric:tabular-nums;color:inherit}
.pn-plan__was{display:grid;justify-items:end;gap:var(--space-1);font:var(--type-cap);font-weight:var(--w-regular);color:var(--ink-2);white-space:nowrap}
.pn-plan__was s{text-decoration-thickness:1px}
.pn-plan__save{font:var(--type-cap);color:var(--ink)}
.pn-plan__terms{grid-column:2 / 4;font:var(--type-meta);color:var(--ink-2)}
.pn-plan__badge.pc-badge{background:var(--surface);color:var(--ink)}   /* "Recommended": a flat badge under the plan name (MSL-206) */
.pn-plan.is-disabled{opacity:.5;cursor:not-allowed}
/* night N1 #10 (08.10.): every renewing plan leads with its per-month price ("$9.99/month", "$19/month": MSL-205 one unit) */
.pn-plan__price--pm{display:inline-flex;align-items:baseline;gap:0;white-space:nowrap}
.pn-plan__price--pm > .pn-plan__unit:last-child{margin-left:var(--space-1)}.pn-plan__price--pm > .pn-plan__unit:first-child{margin-right:var(--space-1)}
.pn-plan__unit{font:var(--type-meta);color:var(--ink-2)}
.pn-planpick .pn-plans__fine{display:flex;gap:var(--space-2);text-align:left;font:var(--type-meta);color:var(--ink-2)}
.pn-planpick .pn-plans__fine[hidden]{display:none}
.pn-planpick .pn-plans__fine .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);translate:0 1px}
@media (max-width:400px){
  .pn-plan{padding:var(--space-4) var(--space-3);column-gap:var(--space-2)}
}

/* Trust row under the CTA (owner 01.10.): small check lines, only what is true for the plans on offer. */
.pn-paytrust{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin:0;padding:var(--space-3) 0 0;list-style:none}
.pn-paytrust li{display:flex;align-items:flex-start;gap:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-paytrust .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);translate:0 1px;color:var(--ink-2)}
.pn-paysite--golive .pn-paytrust{margin-top:var(--space-4)}
.pn-paytrust__all{font-weight:var(--w-strong);color:var(--ink);white-space:nowrap}   /* UX 01.11. SEL-47: "On every plan" after a free feature */

/* "I'll pay later" / "Not now": a 44 px quiet text button, underlined (MSL-209). */
.pn-later{display:inline-flex;align-items:center;justify-content:center;justify-self:center;min-height:var(--tap);padding:0 var(--space-4);font:var(--type-strong);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}
.pn-later:hover{color:var(--ink)}
.pn-later:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-full)}
.pn-later__sub{margin:calc(-1 * var(--space-1)) 0 0;text-align:center;font:var(--type-meta);color:var(--ink-2)}

/* ---------- Phone pay bar: tonal (surface 2), no shadow, sticky above the tab bar (MSL-214) ---------- */
.pn-psbar{display:none}
@media (max-width:999px){
  .pn-psbar{position:sticky;bottom:var(--dock);z-index:var(--z-bar);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1) var(--space-3);margin:0 calc(-1 * var(--gutter));padding:var(--space-3) var(--gutter);background:var(--surface-2);box-shadow:none}
  .pn-psbar__plan{display:grid;gap:var(--space-1);min-width:0;margin:0}
  .pn-psbar__price{font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
  .pn-psbar__plan small{font:var(--type-meta);color:var(--ink-2)}
  .pn-later.pn-psbar__later{grid-column:1 / -1;min-height:var(--control-sm);font:var(--type-label)}
  .pn-later.pn-psbar__tocrypto{grid-column:1 / -1;gap:var(--space-2);min-height:var(--control-sm);font:var(--type-label)}
  .pn-psbar__tocrypto[hidden]{display:none}
}
@media (max-width:999px) and (min-width:701px){.pn-psbar{bottom:0}}
/* AD4 03.10.: under 380 px (320 in es / fr / pt, 360 in fr / pt) "Assinar Premium" covered the price. There the plan
   line (price + plan, one baseline) sits on top and the key takes the full row under it. */
@media (max-width:379px){
  .pn-psbar{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .pn-psbar__plan{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2)}
  .pn-psbar__go{width:100%}
}
/* Phones: the pay bar replaces the tab bar (paysite.js sets body.pn-has-adbar, the ad page's rule), so it sits on the edge. */
@media (max-width:700px){body.pn-has-adbar .pn-psbar{bottom:0;padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}}
/* polish-b 02.10.: at the end of the page the bar (in flow) is the last thing before the footer, like the ad page's bar:
   no 116 px strip of empty page ground under it (the frame's dock padding is for the tab bar, which is hidden here). */
@media (max-width:700px){body.pn-has-adbar .pn-main:has(.pn-psbar){padding-bottom:0}}

/* ---------- S9 Go live (inside the wizard): one panel, status chip, the docked CTA ---------- */
.pn-golive{position:relative;overflow:hidden;container-type:inline-size;display:grid;justify-items:start;gap:var(--space-4);padding:var(--space-6) var(--space-5);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink)}
.pn-statuspill--chrome{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);margin:0;padding:0 var(--space-3);border:0;background:var(--surface-2);border-radius:var(--r-full);color:var(--ink);font:var(--type-label)}
.pn-statuspill__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--success)}
.pc-t-mega.pn-golive__h{margin:0;font:var(--type-display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere;hyphens:manual}
.pc-t-mega.pn-golive__h:focus:not(:focus-visible){outline:none}   /* focus target on step change (tabindex -1), not a control */
.pn-golive__tail{display:block;font-style:normal;color:var(--ink)}
.pn-golive__body{max-width:44ch;margin:0;font:var(--type-prose);color:var(--ink-2)}
.pn-golive__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0}
.pn-paysite--golive{gap:0}
.pn-paysite--golive .pn-paysite__sect{padding:var(--space-6) 0 0}
.pn-paysite--golive .pn-faq{margin-top:var(--space-6)}
.pn-paydock{position:sticky;bottom:0;z-index:var(--z-bar);display:grid;gap:var(--space-2);margin-top:var(--space-8);padding:var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface);box-shadow:none}
.pn-paydock .pc-btn{justify-content:center;white-space:normal;text-align:center}
.pn-paysite--golive .pn-paysite__dev{margin:var(--space-4) 0 0}
@media (min-width:701px){
  .pn-golive{padding:var(--space-10)}
  .pn-paysite--golive{max-width:720px;margin-inline:auto;width:100%}
}


@media (prefers-reduced-motion:reduce){
  .pn-faq summary .pc-ico,.pn-plan{transition:none}
}

/* ---------- build3 SH-1: seller home money head (partials/sellhome_head.php) ---------- */
/* Her money before the buyer list: big Archivo numbers on sunken tiles, the locked "buyers wrote you" tile in chrome
   with an accent lock, the Premium CTA naming the number. Tiles wrap: 2 per row on phones, up to 5 in a row on desktop. */
   /* typographer QA: a long CTA label never widens the panel past the phone (es/fr/it/pt) */


.pn-paysite__tocrypto{gap:var(--space-2)}
/* Sales 500 VKF-058 / VKF-092 (switches vkf058, vkf092): one quiet tip above the key */
.pn-paysite__sstip{display:flex;align-items:flex-start;gap:var(--space-2);margin:0}
.pn-paysite__sstip > svg{flex:none;translate:0 2px}
.pn-paysite__sstip a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
.pn-paysite__heropay{display:none}
@media (min-width:1000px){.pn-paysite__heropay{display:flex}}
/* Verkäufe 500 PAY-051–100 (night 22./23.10., lib/pay_late.php): each rule styles a help that shows only behind its switch */
/* PAY-056: what happens after the tap, three quiet numbered steps under the pay button */
.pn-paysite__after{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-paysite__afterh{margin:0 0 var(--space-1);font-weight:var(--w-strong);color:var(--ink)}
.pn-paysite__after ol{margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-1)}
/* PAY-054: the wish door's card with the wish's chips over the hero */
.pn-paysite__wish{display:grid;gap:var(--space-2)}
.pn-paysite__wishh{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-body);color:var(--ink)}
.pn-paysite__wishh small{color:var(--ink-2)}
.pn-paysite__wish .pc-chip{cursor:default}
.pn-paysite__wish .pc-sub{margin:0}
/* PAY-094: her last payments, folded, one quiet row each (date · way · term | state | action) */
.pn-paysite__paysh{cursor:pointer;font:var(--type-strong);color:var(--ink)}
.pn-paysite__payl{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2)}
.pn-paysite__payl li{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);align-items:baseline;font:var(--type-meta);color:var(--ink-2)}
.pn-paysite__payl b{font-weight:var(--w-strong);color:var(--ink)}
/* Verkäufe 500 MKT-090 (switch mkt090): the support line under the plan card */
.pn-paysite__ask{margin:var(--space-1) 0 0;text-align:center}
/* signup + auth: the join pages on the member system (docs/design-system.md; design system P8, 03.11.). Tokens only.
   Join bar = the header (chrome, the grey 50 % hairline, templates/join_layout.php). Switch /join/ = two member panels.
   Forms (/join/buyer/, the seller account step, /account/login/, /account/lostpass/) = the member head (plain h1, the
   muted line; no tape, no hand note) over one panel: fields 44 px on surface 2, labels 13/600, help 13 under the field,
   one pink key per form, every other key the member secondary, the same height. No tabbar, no footer on /join/*. */

/* ---------- shell: the join bar = the header ---------- */
.pn-joinbody{background:var(--bg)}
.pn-joinnav{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:var(--space-3);min-height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));background:var(--t-chrome,var(--chrome));color:var(--on-chrome);border-bottom:1px solid var(--chrome-line);box-shadow:var(--sh-chrome,none)}
.pn-joinnav .pc-logo{color:var(--on-chrome);font-size:40px}   /* the site header's wordmark (§12: 46, phones 40) */
.pn-joinnav .pc-logo:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-joinnav__label{flex:1;min-width:0;color:var(--on-chrome);text-align:center}
.pn-joinnav__end{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.pn-joinnav__have{font:var(--type-label);color:var(--on-chrome-2)}
.pn-joinnav .pc-btn--ghost{border-color:transparent;background:var(--chrome-well);color:var(--on-chrome)}
.pn-joinnav .pc-btn--ghost:hover{border-color:transparent;background:var(--chrome-well-hover)}
.pn-joinnav .pc-btn--ghost:focus-visible,.pn-joinnav .pc-iconbtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-joinnav .pc-iconbtn{width:var(--tap);height:var(--tap);border-radius:var(--r-full);border:0;background:var(--chrome-well);color:var(--on-chrome)}
@media (min-width:701px){
  .pn-joinnav{padding-inline:var(--col-pad);gap:var(--space-8)}
  .pn-joinnav .pc-logo{font-size:46px}
}
.pn-main.pn-join{padding-top:var(--space-12);padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom))}
@media (max-width:700px){.pn-main.pn-join{padding-top:var(--space-6);padding-bottom:calc(var(--space-12) + env(safe-area-inset-bottom))}}

/* The accent word of a wizard head (lib/wizard.php pnew_wizard_em): plain words since the design system (no tape, §1.6).
   The 18+ mark = a member badge. */
.pn-accent-text{font-style:normal;background:none;color:inherit;padding:0}
.pn-adult{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);margin:0 var(--space-1) 0 0;border-radius:var(--r-s);background:var(--surface-2);color:var(--ink);font:var(--type-cap);letter-spacing:0;vertical-align:1px}

/* ---------- S0 switch /join/: two member panels, one key each ---------- */
.pn-joinswitch{display:block;max-width:860px;margin:0 auto;padding:0}
.pn-joinswitch__h{margin:0 0 var(--space-2);text-wrap:balance;overflow-wrap:normal;hyphens:manual}
.pn-joinswitch__h{outline:none}   /* a heading focused by script for screen readers (tabindex -1) is no control: no ring */
.pn-joinswitch__lead{display:block;max-width:48ch;margin:0 0 var(--space-6)}
.pn-doors.pc-doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack-gap);margin-top:var(--space-6);text-align:left}
.pn-door.pc-door{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:none;transition:background-color var(--dur-1) ease-out}
.pn-door.pc-door:hover{background:var(--surface-2)}
.pn-door.pc-door:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-door.is-intent{outline:0;background:var(--surface-2)}
.pn-door__h{margin:0;font:var(--type-title);color:inherit}
.pn-door.pc-door p{margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-door__obj,.pn-door__obj--tag{display:none}   /* no 3D props on a form page (§13) */
.pn-door__live{align-self:flex-start}
.pn-door .pn-door__cta{align-self:flex-start;margin-top:var(--space-1)}
/* both doors on one row grid (subgrid): the live pill row, the head, the text, the key line up across doors */
@media (min-width:701px){
  .pn-doors.pc-doors{grid-template-rows:auto auto 1fr auto;row-gap:0}
  .pn-door.pc-door{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--space-3);align-content:start}
  .pn-door__live{grid-row:1;justify-self:start;align-self:start}
  .pn-door__h{grid-row:2}
  .pn-door.pc-door > p{grid-row:3}
  .pn-door .pn-door__cta{grid-row:4;justify-self:start}
}
.pn-joinfoot{margin:var(--space-6) 0 0;padding:0;font:var(--type-meta);color:var(--ink-2)}
.pn-joinfoot a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
@media (max-width:700px){.pn-doors.pc-doors{grid-template-columns:minmax(0,1fr);gap:var(--stack-gap)}}
@media (prefers-reduced-motion:reduce){.pn-door.pc-door{transition:none}}
.pn-door--buy.pc-door,.pn-door--sell.pc-door,.pn-doors .pc-door,.pn-doors .pn-door--sell.pc-door{background:var(--surface);border-color:transparent;box-shadow:none}
@media (min-width:701px){.pn-main.pn-join--switch{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - var(--header-h) - 1px);padding-bottom:var(--space-16)}}

/* ---------- the forms: member head + one panel ---------- */
.pn-join--form{display:flex;flex-direction:column}
/* 448 px = a 400 px form inside the panel's 24 px: Google's button is at most 400 wide, so it fills the form like every
   other key (audit CONT-023 / HOME-139) */
.pn-joinpanel{display:flex;flex-direction:column;flex:1;width:100%;max-width:448px;margin:0 auto}
.pn-joinhead{margin:0 0 var(--space-6);padding:0}
.pn-joinhead__h{margin:0 0 var(--space-2);text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
.pn-joinhead__h{outline:none}   /* the same */
.pn-joinhead__h em{display:inline;font-style:normal}
.pn-joinhead__lede{margin:0;max-width:48ch;font:var(--type-body);color:var(--ink-2)}
.pn-joinhead__hand{display:none}   /* no hand notes on a form (audit CONT-051 / HOME-135); the templates no longer print one */
/* role switch under the head (owner 06.10.; audit HOME-136): a member segment — the track surface 2, the form on screen
   surface 3 + ink. Pink stays the form's one key. */
.pn-joinrole{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);margin:0 0 var(--stack-gap);padding:var(--space-1);border-radius:var(--r-m);background:var(--surface-2)}
.pn-joinrole > a{display:flex;align-items:center;justify-content:center;min-height:calc(var(--tap) - 8px);padding:0 var(--space-3);border-radius:var(--r-s);color:var(--ink-2);font:var(--type-label);text-align:center;text-decoration:none;transition:background-color var(--dur-1) ease-out,color var(--dur-1) ease-out}
.pn-joinrole > a:hover{color:var(--ink)}
.pn-joinrole > a[aria-current="page"]{background:var(--surface-3);color:var(--ink)}
.pn-joinrole > a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
@media (max-width:700px){.pn-joinrole > a{min-height:var(--tap)}}
@media (prefers-reduced-motion:reduce){.pn-joinrole > a{transition:none}}
.pn-joinbox.pn-panel{padding:var(--space-6);border-radius:var(--r-l)}
@media (max-width:700px){.pn-joinbox.pn-panel{padding:var(--panel-pad)}}
.pn-joinbox .pn-joinfield:first-of-type{margin-top:0}
.pn-joinform{display:flex;flex-direction:column;flex:1}
.pn-joinform p{margin:0}
.pn-joinfield{margin-top:var(--field-gap)}
.pn-joinform .pc-field{gap:var(--label-gap)}
.pn-joinform .pc-label{display:block;font:var(--type-label);color:var(--ink)}
.pn-joinaffix{position:relative}
.pn-joinaffix .pc-input{padding-right:var(--space-12)}
.pn-joinaffix--pw .pc-input{padding-right:96px}
.pn-joinform .pc-help{margin-top:calc(var(--help-gap) - var(--label-gap));padding:0;font:var(--type-meta);color:var(--ink-2);text-align:left}
.pn-joinform .pc-help.is-ok{color:var(--ink);font-weight:var(--w-strong)}
.pn-joinfield.is-error .pc-input{border-color:transparent;box-shadow:inset 0 0 0 2px var(--danger)}
.pn-joinfield.is-error .pc-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:inset 0 0 0 2px var(--danger)}
.pn-joinfield.is-error > .pc-help{display:none}
.pn-okmark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--success);color:var(--on-success);flex:none}
.pn-okmark .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-joinaffix .pn-okmark{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);pointer-events:none}
.pn-okmark[hidden]{display:none}
/* Show / Hide (audit HOME-144 / CONT-046): a quiet small key inside the field, 36 high, centred on the field; its hit area
   is 44 (the ::before), on every width */
.pn-pwtoggle.pc-btn{position:absolute;right:var(--space-1);top:var(--space-1);bottom:var(--space-1);min-height:0;height:auto;padding:0 var(--space-3);border:0;border-radius:var(--r-s);background:transparent;color:var(--ink);font:var(--type-label);box-shadow:none;transform:none}
.pn-pwtoggle.pc-btn:hover{background:var(--surface-3)}
.pn-pwtoggle.pc-btn:active{transform:none}
.pn-pwtoggle.pc-btn::before{content:"";position:absolute;inset:-4px 0}
.pn-pwtoggle.pc-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-fielderr{display:flex;gap:var(--space-2);align-items:flex-start;margin:calc(var(--help-gap) - var(--label-gap)) 0 0;padding:0;color:var(--danger);font:var(--type-meta)}
.pn-fielderr[hidden]{display:none}
.pn-fielderr .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);margin-top:1px;stroke-width:2.6}
.pn-fielderr a,.pn-formerr a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pn-fielderr--form{margin-top:var(--space-4)}
.pn-typo{align-self:flex-start}
.pn-typo[hidden]{display:none}
.pn-sugg{margin-top:0}
.pn-sugg[hidden]{display:none}
.pn-checks{margin-top:var(--space-3)}
.pn-checks .pn-joinfield{margin-top:0}
.pn-joinform .pn-checkrow{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap);padding:var(--space-3) 0;font:var(--type-body);color:var(--ink);cursor:pointer}
.pn-joinform .pn-checkrow .pc-check{margin-top:1px}
.pn-checks .pn-joinfield + .pn-joinfield .pn-checkrow{padding-top:0}
/* a tick-box error sits under its own label text and keeps the next box at its distance */
.pn-checks .pn-joinfield > .pn-fielderr{margin:0 0 var(--space-2);padding-left:var(--space-8)}
.pn-joinform .pn-checkrow a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-joinfield.is-error .pc-check{box-shadow:inset 0 0 0 2px var(--danger)}
/* the dock stays in flow on every width (a sticky dock covered the Terms / Privacy line in the first phone viewport) */
.pn-joindock{position:static;z-index:var(--z-bar);display:flex;flex-direction:column;gap:var(--space-1);margin:var(--space-6) 0 0;padding:0 0 env(safe-area-inset-bottom);background:none}
.pn-fixcount{margin:0 0 var(--space-2);text-align:center;color:var(--danger);font:var(--type-label)}
.pn-fixcount[hidden],.pn-formerr[hidden]{display:none}
/* a form error = a note (surface 2) with danger ink, never a tinted block */
.pn-formerr{display:block;margin:0 0 var(--space-2);padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--danger);font:var(--type-label);text-align:left}
.pn-joincta.is-busy{opacity:.75;cursor:progress}
/* one key height in every auth form (audit CONT-022 / 023, HOME-143): the member key, 44 */
.pn-joinpanel .pc-btn--lg{min-height:var(--control-md);font:var(--type-strong)}
.pn-devchip{display:flex;gap:var(--space-2);align-items:center;justify-content:center;margin:var(--space-1) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);border:0;background:var(--surface-2);color:var(--ink-2);font:var(--type-cap);text-align:center}
.pn-devchip b{font:var(--type-cap);letter-spacing:0;color:var(--ink)}
.pn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* mail login 07.10.: the confirmation page has no field above its one button, so the dock keeps no distance to one */
.pn-authform > input[type=hidden] + .pn-joindock{margin-top:0}

/* ---------- "You're in" toast: once, then it leaves by itself (e1: surface 2 + shadow) ---------- */
.pn-jointoast{position:fixed;left:50%;top:calc(var(--header-h) + env(safe-area-inset-top) + 12px);z-index:var(--z-toast);display:inline-flex;align-items:center;gap:var(--space-2);max-width:calc(100% - 32px);min-height:var(--tap);padding:var(--space-1) var(--space-4) var(--space-1) var(--space-1);border-radius:var(--r-full);border:0;background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-e1,var(--sh-float));font:var(--type-strong);pointer-events:none;transform:translateX(-50%);animation:pn-jointoast 4.6s var(--ease-pop) both .2s}
.pn-jointoast__dev{margin-left:var(--space-2);padding-left:0;border-left:0;color:var(--ink-2);font:var(--type-cap);letter-spacing:0}
@keyframes pn-jointoast{0%{opacity:0;transform:translate(-50%,-14px)}10%,86%{opacity:1;transform:translate(-50%,0);visibility:visible}100%{opacity:0;transform:translate(-50%,-8px);visibility:hidden}}
@keyframes pn-jointoast-still{0%,86%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.pn-jointoast{animation-name:pn-jointoast-still;transform:translateX(-50%)}}

/* ---------- auth (docs/auth-03-10.md): login + lost password on the buyer form's frame. Tokens only. ----------
   Legacy's info message = a note with the check; legacy's errors = .pn-formerr. "Forgot your password?" sits right under
   the password; the other ways (sign up / back to log in / help) sit under the panel as plain lines in the form's column. */
.pn-authnote{display:flex;gap:var(--space-2);align-items:flex-start;margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-body)}
.pn-authnote[hidden],.pn-authresend[hidden],.pn-authdone[hidden],.pn-authform[hidden]{display:none}
.pn-authnote .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);margin-top:3px;stroke-width:2.6;color:var(--success)}
.pn-authform .pn-joinfield + .pn-joinfield{margin-top:var(--field-gap)}
.pn-authrow{display:flex;justify-content:flex-start;margin-top:var(--space-2)}
/* one text-link style around the forms (audit CONT-047): ink 600, the pink underline; standalone links get a 44 hit row */
.pn-authlink,.pn-authalt a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-authlink{display:inline-flex;align-items:center;min-height:var(--tap);font:var(--type-label)}
.pn-authlink:hover,.pn-authalt a:hover{text-decoration-color:var(--ink)}
.pn-authlink:focus-visible,.pn-authalt a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}
.pn-authresend{margin:0 0 var(--space-3)}
.pn-authalt{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);min-height:var(--tap);margin:var(--space-4) 0 0;color:var(--ink-2);font:var(--type-body)}
.pn-authalt a{display:inline-flex;align-items:center;min-height:var(--tap)}
/* the help line under the form (join_layout.php prints it in main): in the form's column, not on the page edge (audit HOME-148) */
.pn-main.pn-join > .pn-authalt{width:100%;max-width:448px;margin-left:auto;margin-right:auto}
.pn-authdone{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-3) 0 var(--space-1);text-align:center}
/* owner 03.10.: after "created" only the success state shows — the register form (its own grid display beat [hidden]) goes */
form[data-legacy="register"][hidden],.pn-joinform[hidden]{display:none}
.pn-authpanel:has(.pn-authdone:not([hidden])) :is(.pn-rcnote,.pn-joinform__alt){display:none}
.pn-authdone > .pc-btn{align-self:stretch}
.pn-authdone__h{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;margin:0;font:var(--type-title);color:var(--ink);outline:none}
.pn-authdone__h .pc-ico{flex:none;box-sizing:content-box;width:var(--icon-l);height:var(--icon-l);padding:var(--space-4);border-radius:var(--r-full);background:var(--surface-2);color:var(--success);stroke-width:2.8}
.pn-authdone__p{margin:0;max-width:44ch;color:var(--ink-2);font:var(--type-body);text-wrap:balance}
.pn-authpanel:has(.pn-authdone:not([hidden])) .pn-authalt{display:none}
body.pn-joinbody .grecaptcha-badge{visibility:hidden}   /* auth stage 2: the notice under the button replaces Google's floating badge (Google allows it) */
.pn-rcnote{margin:var(--space-4) 0 0;color:var(--ink-2);font:var(--type-meta);text-wrap:balance}
.pn-rcnote a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.pn-rc{position:absolute;width:0;height:0;overflow:hidden}
.pn-authalt--in{margin-top:var(--space-1)}
/* login link (owner 07.10., lib/login_link.php): "Email me a login link", the quiet second way in. Closed: the member
   secondary key under the pink one. Open: one line of copy, the address field and its send key. */
.pn-authmore{margin:var(--space-3) 0 0}
.pn-authmore[hidden]{display:none}
.pn-authmore > summary{list-style:none;cursor:pointer;user-select:none}
.pn-authmore > summary::-webkit-details-marker{display:none}
.pn-authmore > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-authmore[open] > summary{display:none}
.pn-authmore.is-fixed > summary{display:none}   /* the expired-link page opens it at once (was an inline <style> in partials/auth_link.php) */
.pn-authmore__form{margin-top:var(--space-6);padding-top:0;border-top:0}
.pn-authmore__form > .pn-authmore__sub{margin:0 0 var(--space-4);padding:0;color:var(--ink-2);font:var(--type-body)}
.pn-authmore__form .pn-joindock{margin-top:var(--space-4)}
/* the lost-password page (audit CONT-049): "Or reset your password instead" opens the second form as a group label with air */
.pn-authlost__instead.pc-help{margin:var(--space-6) 0 var(--space-3);font:var(--type-label);color:var(--ink-2)}
.pn-joindock > .pn-rcnote{margin-top:var(--space-4)}
/* Verkäufe 500 NACH-008 (switch buyer_join_noname): the buyer's name arrives filled in, folded to one line; Change or an error opens the field */
.pn-qname__line{margin:0;font:var(--type-body);color:var(--ink)}
.pn-qname__change{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;cursor:pointer}
.pn-qname:not(.is-error):not(:has(.pn-qname__t:checked)) > :not(.pn-qname__line):not(.pn-qname__t){display:none}
.pn-qname:has(.pn-qname__t:checked) .pn-qname__line,.pn-qname.is-error .pn-qname__line{display:none}
.pn-qname__t:focus-visible + .pn-qname__line .pn-qname__change{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Google (13.10., lib/google_login.php): its own button as one more key of the form — full form width (400), the same
   gap as every key; "or" is a quiet label with air, no hairlines inside the panel (audit CONT-048 / HOME-140). The rules
   were inline <style> blocks in auth_login.php and partials/join_account.php. */
.pn-authgoogle{margin-top:var(--space-4)}
.pn-authgoogle--join{margin:0 0 var(--space-4)}
.pn-authgoogle__or{display:block;margin:0 0 var(--space-4);color:var(--ink-2);font:var(--type-meta);text-align:center}
.pn-authgoogle--join .pn-authgoogle__or{margin:var(--space-4) 0 0}
.pn-authgoogle__btn{display:flex;justify-content:center;min-height:var(--control-md)}
.pn-authgoogle__btn > div,.pn-authgoogle__btn iframe{max-width:100%}
.pn-authgoogle__sub{margin:var(--space-2) 0 0;text-align:center}
.pn-authgoogle .pn-formerr a{text-decoration:underline}
.pn-linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* PM 500 aussen-seo B (08.11.) */
/* AS-002: 7.4 % of the form's visitors signed up; on a phone the first field sat at 802 px (role tiles + a 200 px scene above it).
   Phones: the two role tiles shrink to one slim row (no figures, no small line), the single step card goes (the head names the
   step), the head one size down, the scene moves under the form. The frame is lib/chero.php's (switch join_hero); desktop unchanged.
   One class more than src-css/plastik/site.css (.pk-site.pn-joinbody), so the order of the bundles does not matter. */
@media (max-width: 600px) {
  .pk-site.pn-joinbody .pkj-x { grid-template-areas: "role" "main" "stage"; }
  .pk-site.pn-joinbody .pkj-role { padding-top: var(--space-3); padding-bottom: 0; }
  .pk-site.pn-joinbody .pkj-role__t { min-height: 44px; padding: var(--space-2) var(--space-3); justify-content: center; text-align: center; }
  .pk-site.pn-joinbody .pkj-role__fig, .pk-site.pn-joinbody .pkj-role__t small { display: none; }
  .pk-site.pn-joinbody .pkj-x__main { padding-top: var(--space-4); }
  .pk-site.pn-joinbody .pkj-x__main .pkj-steps { display: none; }
  .pk-site.pn-joinbody .pkj-x__main h1 { font-size: var(--fs-l) !important; }
  .pk-site.pn-joinbody .pkj-x .pn-joinhead { margin-bottom: var(--space-4); }
}
/* AS-079 / AS-120: the line that names the creator he came from (join + login head) */
.pn-joinctx{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font:var(--type-meta);color:var(--ink-2)}
.pn-joinctx b{color:var(--ink);font-weight:700}
/* AS-101: the second door on the login page (sellers) */
.pn-authalt--sell{margin-top:var(--space-2)}
/* signup: B — the seller wizard (docs/spec-pnew-signup.md §4.4–4.15, mockup design/v2/signup-paysite.html, §16.3 map).
   Black wizard header with the three-phase bar, docked CTAs on phones, the live preview on desktop (>=1200).
   Tokens only; the full-screen chrome pages (under 18, expired, the S10 hero) stay black in both themes.
   night 05.10. (docs/wizard-seller-audit-05-10.md): no S8 intro chrome any more, six photo slots, the S4 helper line is
   gone, the "You're in" toast never covers the desktop dock, the done page has a "What happens next" panel.
   design system P5 (03.11., docs/design-system.md): Inter on the type scale only (--type-*), the 4 px grid (--space-*),
   radii --r-s / --r-m / --r-l / --r-full, controls 44 / 36 (tap 44 on phones), no edges inside, fields and tiles one tone
   up, ONE pink key per screen: no cream step label, no hand note, no pink highlighter, no pink numerals / ticks / bars. */

.pn-wizbody{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;margin:0;background:var(--bg);--wizbar-h:108px;--col-pad:max(var(--gutter),calc((100% - var(--main-max)) / 2))}   /* P5 MSL-099: the bar sits on the member column (1372) */
body.pn-wizbody--stop{background:var(--chrome)}   /* T33: beats layout.css body.pc-root (no duck strip) */
.pn-wiz{flex:1;display:flex;flex-direction:column;width:100%;max-width:592px;margin:0 auto;padding:var(--space-4) var(--space-4) 0;box-sizing:border-box}
.pn-wiz--golive,.pn-wiz--done,.pn-wizbody--stop .pn-wiz{max-width:none;padding:0}
/* night 05.10. (audit #1): the step's blocks never shrink under the sticky dock (the S1 proof tile lost its last line) */
.pn-wizstep > .pn-crop,.pn-wizstep > .pn-wiz__proof,.pn-wizstep > .pn-lede,.pn-wizstep > .pn-note{flex-shrink:0}
/* S1 on a 390×844 phone: head, lede, tile, proof and the two-key dock fit in one viewport */
@media (max-width:700px){.pn-wiz--photo .pn-crop{width:208px;margin:var(--space-3) auto var(--space-2)}.pn-wiz--photo .pn-wiz__proof{padding:var(--space-3) var(--space-4);gap:var(--space-3)}.pn-wiz--photo .pn-wiz__proof .pn-proof__big{font:var(--type-num)}}
.pn-wizstep{display:flex;flex-direction:column;flex:1;min-width:0}
.pn-wizstep--narrow{width:100%;max-width:560px;margin:0 auto;padding:0 var(--space-4);box-sizing:border-box}
.pn-wiz--preview .pn-wizstep--narrow{padding:0}
@media (max-width:700px){.pn-wiz:not(.pn-wiz--done) .pn-wizstep--narrow{padding:0}}   /* polish r1: .pn-wiz already holds the 16 px gutter (done: .pn-wiz has none) */
.pn-wizgrid{display:flex;flex-direction:column;flex:1;min-width:0}
.pn-wizcol{display:flex;flex-direction:column;flex:1;min-width:0}

/* ---------- black wizard header: back · logo · title · close, the phase bar inside; the grey 50 % hairline under it ---------- */
.pc-header.pn-wizbar{display:block;position:sticky;top:0;z-index:var(--z-header);height:auto;padding:env(safe-area-inset-top) var(--gutter) var(--space-3);gap:0;background:var(--chrome);color:var(--on-chrome);border:0;border-bottom:1px solid var(--chrome-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* T31: one signup header — the logo on the left at every width, the step title centred, one action on the right */
.pn-wizbar__row{display:grid;grid-template-columns:44px auto minmax(0,1fr) auto auto 44px;grid-template-rows:60px auto;grid-template-areas:"back logo title saved prev close" "phase phase phase phase phase phase";align-items:center;gap:0 var(--space-2)}
.pn-wizbar__back,.pn-wizbar__gap{grid-area:back}
.pn-wizbar__gap{width:var(--tap);height:var(--tap)}
.pc-header.pn-wizbar .pc-logo.pn-wizbar__logo{display:inline-flex;grid-area:logo;color:var(--on-chrome);font-size:22px}
.pn-wizbar__title{grid-area:title;color:var(--on-chrome);text-align:center;text-wrap:balance;font:var(--type-label)}
.pn-wizbar__prev{grid-area:prev}
.pn-wizbar__close{grid-area:close}
.pn-wizbar__exit{display:none}
.pc-header.pn-wizbar .pc-iconbtn--on-chrome{width:var(--tap);height:var(--tap);border-radius:var(--r-full);border:0;background:transparent;color:var(--on-chrome)}
.pc-header.pn-wizbar .pc-iconbtn--on-chrome:hover{background:var(--surface-2)}
.pn-saved{grid-area:saved;display:inline-flex;align-items:center;gap:var(--space-1);font:var(--type-cap);color:var(--on-chrome-2);animation:pn-saved-in var(--dur-1) ease-out}
.pn-saved .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--success);stroke-width:3}
.pn-saved[hidden]{display:none}
@keyframes pn-saved-in{from{opacity:0;transform:translateY(4px)}}
.pn-phase{grid-area:phase;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-phase--4{grid-template-columns:repeat(4,minmax(0,1fr))}   /* UX 433 S-017: the seller set-up's one track of four */
.pn-phase__seg{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.pn-phase__tr{display:block;height:4px;border-radius:var(--r-full);background:var(--chrome-well);overflow:hidden}
.pn-phase__tr i{display:block;height:100%;border-radius:var(--r-full);background:var(--accent);transition:width var(--dur-2) ease-out}
.pn-phase__lbl{font:var(--type-cap);color:var(--on-chrome-2);text-wrap:balance;hyphens:manual}
.pn-phase__seg[aria-current] .pn-phase__lbl{color:var(--on-chrome)}
@media (min-width:701px){
  .pn-wizbody{--wizbar-h:77px}
  .pc-header.pn-wizbar{padding:env(safe-area-inset-top) var(--col-pad) 0}
  .pn-wizbar__row{grid-template-columns:minmax(max-content,1fr) minmax(0,520px) minmax(max-content,1fr);grid-template-rows:76px;grid-template-areas:"logo phase end";height:76px;padding:0;gap:0 var(--space-8)}
  .pc-header.pn-wizbar .pc-logo.pn-wizbar__logo{display:inline-flex;justify-self:start;font-size:26px}
  .pn-wizbar__back,.pn-wizbar__gap,.pn-wizbar__title,.pn-wizbar__close{display:none}
  .pn-phase{margin:0;padding:0;align-self:center}
  /* polish r1: saved, preview and exit are one flex group in the end track */
  .pn-wizbar__end{grid-area:end;justify-self:end;display:flex;align-items:center;gap:var(--space-4);min-width:0}
  .pn-saved{font:var(--type-label);white-space:nowrap}
  /* P5 MSL-100: "Finish later" is a header key like the member header's (pill, 48, 16 px), never a 36 px square */
  .pc-header.pn-wizbar .pn-wizbar__end > .pn-wizbar__exit{display:inline-flex;flex:none;white-space:nowrap;min-height:var(--header-key);padding:0 var(--space-5);border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);font:var(--type-nav)}
  .pc-header.pn-wizbar .pn-wizbar__end > .pn-wizbar__exit:hover{background:var(--surface-3)}
  .pn-saved:not([hidden]) ~ .pn-wizbar__prev{display:none}
}
@media (max-width:700px){.pn-wizbar__end{display:contents}}   /* phones: saved / prev keep their own grid areas */
@media (min-width:1200px){.pn-wizbar__prev{display:none}}

/* ---------- step body ---------- */
.pn-wiz .pn-hero{margin:0}
.pn-wiz .pn-stop.pn-hero{margin-inline:auto}   /* signup: integration — full-screen pages centred at desktop width */
.pn-wiz .pn-stop.pn-hero{box-shadow:0 0 0 100vmax var(--chrome);clip-path:inset(0 -100vmax)}   /* the black runs edge to edge */
.pn-wiz .pn-hero h1{margin:0}
/* The heading takes focus programmatically on every step change (spec §4 Motion): no ring for a pointer, the kit ring for the keyboard */
.pn-wiz h1[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.pn-lede{margin:var(--space-2) 0 0;max-width:34ch;color:var(--ink-2);font:var(--type-body)}
.pn-wizfield{margin-top:var(--field-gap)}
.pn-wizfield.pc-field{gap:var(--label-gap);border:0;padding:0;min-width:0}
.pn-wizfield legend{padding:0;margin-bottom:var(--label-gap)}
/* polish-s 02.10.: help / message lines under a field sit on the field's own gap */
.pn-wizfield > p.pc-help{margin:0}
.pn-wiz .pc-input{font:var(--type-ui)}
.pn-lblrow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.pn-lblrow small{font:var(--type-meta);color:var(--ink-2)}   /* MSL-074: one counter style, 13/400 ink-2 */
.pn-fieldmsg:empty{display:none}
.pn-wizfield.is-error .pc-input{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-wizfield.is-error .pn-fieldmsg{display:flex;gap:var(--space-1);color:var(--danger);font-weight:var(--w-strong)}
.pn-wizfield.is-ok .pn-fieldmsg{color:var(--ink);font-weight:var(--w-strong)}
.pn-fielderr{margin:var(--space-2) 0 0;text-align:center;color:var(--danger);font:var(--type-label)}
.pn-fielderr:empty{display:none}
.pn-inlinecta{margin-top:var(--space-5)}
.pn-note{display:flex;gap:var(--space-2);align-items:center;justify-content:center;margin:var(--space-3) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-note .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
/* S7 (sales-50 18.10.): "a buyer just wrote to you" — P5 MSL-098: under the head as part of the lede, body size, ink */
.pn-lhwrote{justify-content:flex-start;align-items:flex-start;margin:var(--space-2) 0 0;text-align:left;font:var(--type-body);color:var(--ink)}
.pn-lhwrote .pc-ico{margin-top:var(--space-1)}
/* Sales 500 group C (22.10., lib/first_buyer.php): step 1's face line (VKF-002), its second ask on "Add later" (VKF-001) */
.pn-lhnoface{margin:var(--space-2) 0 0}
.pn-lhskip{display:grid;gap:var(--space-3);justify-content:stretch;margin:var(--space-1) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface);font:var(--type-body);color:var(--ink);text-align:left}
.pn-lhskip[hidden],.js .pn-wiz--lh.has-photo .pn-lhskip{display:none}
.pn-lhskip p{margin:0}
.pn-lhskip__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
/* Sales 500 VKF-066 / VKF-077 / VKF-061 / VKF-068 (lib/seller_start.php): "Take a photo" on phones only; the About
   field's 80-character line; the notes on "You're live". Used only while their switches are on */
.pn-dock .pn-lhcam{display:none}
@media (hover:none) and (pointer:coarse){.pn-dock .pn-lhcam{display:inline-flex}}
.pn-lhabout80{display:grid;gap:var(--space-1);margin:var(--space-1) 0 0}
.pn-lhabout80__bar{display:block;height:4px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.pn-lhabout80__bar > i{display:block;height:100%;width:0;background:var(--ink-2);transition:width var(--dur-2) ease-out}
.pn-lhabout80.is-done .pn-lhabout80__bar > i{background:var(--success)}
.pn-lhbr,.pn-lhasbuyer{justify-content:flex-start;align-items:flex-start;margin:var(--space-3) 0 0;text-align:left}
.pn-lhbr a,.pn-lhasbuyer a{color:inherit;font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}

/* ---------- dock (§16.3 pn-dock): sticky on phones, inline row on desktop ---------- */
/* T15: opaque page ground, so step content never shows through Skip / Continue while it scrolls under the sticky dock;
   no line on top (no edges inside) */
.pn-dock{position:sticky;bottom:0;z-index:var(--z-bar);display:flex;flex-direction:column;gap:var(--space-1);margin:auto calc(-1 * var(--gutter)) 0;padding:var(--space-3) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));background:var(--bg);border-top:0}
.pn-dock__row{display:flex;gap:var(--space-2)}
.pn-dock__row .pc-btn{flex:1}
.pn-dock__skip,.pn-dock__edit{flex:0 0 auto !important}
.pn-dock__back{display:none !important}
.pn-dock__empty{display:flex;flex-direction:column;gap:var(--space-2)}
.pn-dock__later{align-self:center}
.pn-dock__filled{display:none}
.pn-wiz.has-photo .pn-dock__filled{display:block}
.pn-wiz.has-photo .pn-dock__empty{display:none}
.pn-dock--stack{align-items:stretch}
.pn-dock--stack .pn-later{align-self:center}
.pn-dock--form{margin-top:auto}
.pn-wiz .pn-dock .pn-fixcount:empty{display:none}
/* P5 MSL-112 / MSL-106: every "later" / "skip" in the wizard is the kit's quiet key (44 tall, 600 15 ink, no underline) —
   one look next to the dock's one pink key */
.pn-wiz .pn-later{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--space-4);border:0;border-radius:var(--r-m);background:transparent;color:var(--ink);font:var(--type-strong);text-decoration:none;cursor:pointer}
.pn-wiz .pn-later:hover{background:var(--surface)}
/* mobile UX: a focused field scrolls clear of the sticky dock instead of sliding under it */
@media (max-width:700px){html:has(.pn-wiz .pn-dock){scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom))}}
/* UX polish E 23.10. (UX-028, UX-047): phones only — the photo dock's two keys share a row from about 360 px, "Add later"
   centred under them; the lede keeps clear of the step object */
@media (max-width:700px){
  .pn-dock__empty{flex-direction:row;flex-wrap:wrap;gap:0 var(--space-2)}
  .pn-dock__empty > .pc-btn{flex:1 1 150px;width:auto;min-width:0;margin-bottom:var(--space-2)}
  .pn-dock__empty::after{content:"";order:1;flex:0 0 100%;height:0}
  .pn-dock__empty > .pn-dock__later{order:2;margin-inline:auto}
  .pn-wiz.has-obj > .pn-wizstep > .pn-lede{padding-right:108px}
}
/* polish r1: the read-only "account created" summary: its Continue follows in flow on phones */
.pn-wiz [data-wiz=summary] .pn-note{justify-content:flex-start;padding-left:var(--space-1)}
@media (max-width:700px){.pn-wiz [data-wiz=summary] .pn-dock{position:static;margin:var(--space-8) 0 0;padding:0 0 calc(var(--space-6) + env(safe-area-inset-bottom));background:none}}
@media (min-width:701px){
  .pn-wiz:not(.pn-wiz--done){padding-top:var(--space-12)}
  .pn-wizbody--stop .pn-wiz.pn-wiz{padding-top:0}   /* T33: the full-screen black pages start at the top */
  .pn-lede{font:var(--type-ui);max-width:44ch}
  /* P5 MSL-102: ONE dock layout on every step — in flow under the form, Back on the left, the keys right, natural widths */
  .pn-dock{position:static;margin:var(--space-8) 0 var(--space-12);padding:0;background:none}
  .pn-dock__row{align-items:center;justify-content:flex-end}
  .pn-dock__row .pc-btn{flex:0 0 auto}
  .pn-dock__back{display:inline-flex !important;margin-right:auto}
  .pn-dock__row .pn-dock__next:only-child,.pn-dock__row .pn-dock__skip + .pn-dock__next{margin-left:0}
  .pn-dock__empty{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end}
  .pn-dock__empty .pc-btn--block{width:auto;display:inline-flex}
  .pn-dock__filled .pc-btn--block{display:flex;width:max-content;max-width:none;margin:0 0 0 auto}
  .pn-dock--stack{align-items:flex-start}
  .pn-dock--stack .pc-btn--block{width:100%;max-width:420px}
  .pn-dock--stack .pn-later{align-self:flex-start}
}

/* ---------- S1 photo crop (pn-crop) — P5 MSL-101: a plain media tile, no ring, no drop shadow ---------- */
.pn-crop{position:relative;width:228px;max-width:calc(100% - 20px);aspect-ratio:4/5;margin:var(--space-6) auto var(--space-3);border-radius:var(--r-l);overflow:hidden;background:var(--ph-media);box-shadow:none;touch-action:none;isolation:isolate}
.pn-crop.is-crop,.pn-crop.is-drag{transform:none}
.pn-crop.is-drag{outline:2px dashed var(--accent);outline-offset:4px}
.pn-crop__empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--space-3);cursor:pointer;color:var(--ink);text-align:center;padding:var(--space-4)}
.pn-crop__cam{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--scrim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pn-crop__drop{display:none;font:var(--type-label);color:var(--ph-text)}
.pn-crop__canvas,.pn-crop__img{position:absolute;inset:0;width:100%;height:100%;display:none;object-fit:cover}
.pn-crop.is-filled .pn-crop__img{display:block}
.pn-crop.is-crop .pn-crop__canvas{display:block;cursor:grab}
.pn-crop.is-crop .pn-crop__img{display:none}
.pn-crop.is-filled .pn-crop__empty,.pn-crop.is-crop .pn-crop__empty{display:none}
.pn-crop__thirds{position:absolute;inset:0;z-index:4;pointer-events:none;display:none;
  background:linear-gradient(to right,transparent calc(33.33% - .5px),var(--media-rule) calc(33.33% - .5px),var(--media-rule) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),var(--media-rule) calc(66.66% - .5px),var(--media-rule) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(to bottom,transparent calc(33.33% - .5px),var(--media-rule) calc(33.33% - .5px),var(--media-rule) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),var(--media-rule) calc(66.66% - .5px),var(--media-rule) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.pn-crop.is-crop .pn-crop__thirds{display:block}
.pn-crop__good{display:none;position:absolute;left:var(--space-3);top:var(--space-3);z-index:6;background:var(--glass);color:var(--ink)}   /* a glass badge inside the tile (.pn-crop clips) */
.pn-crop__tools{position:absolute;right:var(--space-3);top:var(--space-3);z-index:5;display:none;flex-direction:column;gap:var(--space-2)}
.pn-crop__tools .pc-iconbtn{width:var(--tap);height:var(--tap);cursor:pointer}
.pn-crop__tools .pc-iconbtn .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pn-crop.is-filled .pn-crop__good,.pn-crop.is-crop .pn-crop__good{display:inline-flex}
.pn-crop.is-filled .pn-crop__tools,.pn-crop.is-crop .pn-crop__tools{display:flex}
.pn-crop__hint{position:absolute;left:50%;bottom:var(--space-3);z-index:5;display:none;gap:var(--space-2);align-items:center;min-height:32px;max-width:calc(100% - 24px);padding:var(--space-1) var(--space-3);border-radius:var(--r-full);background:var(--scrim);color:var(--ink);font:var(--type-cap);text-align:center;text-wrap:balance;width:max-content;transform:translateX(-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pn-crop.is-crop .pn-crop__hint{display:flex}
.pn-crop__hint > svg{flex:none}   /* polish-s 02.10.: long hints (es, fr) wrap inside the photo instead of being cut */
.pn-crop__exif{display:none}
.pn-wiz.has-photo .pn-crop__exif{display:flex}
.pn-wiz__proof{margin:0 0 var(--space-3)}
@media (min-width:701px){.pn-crop{width:300px;transform:none}.pn-crop.is-crop,.pn-crop.is-drag{transform:none}.pn-crop__drop{display:block}}

/* ---------- S2 name and age ---------- */
.pn-atfield{position:relative}
.pn-atfield__at{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--ink-3);font:var(--type-ui);pointer-events:none}
.pn-atfield .pc-input{padding-left:36px;padding-right:52px}
.pn-atfield .pn-okmark{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);display:none}
.pn-wizfield.is-ok .pn-atfield .pn-okmark{display:inline-grid}
.pn-sugg{gap:var(--space-2);margin-top:var(--space-1)}
.pn-sugg[hidden]{display:none}
.pn-bday{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:var(--space-2);margin-top:var(--space-2)}
.pn-bday__f{position:relative;display:block}
.pn-bday__l{position:absolute;top:-8px;left:50%;z-index:1;transform:translateX(-50%);padding:0 var(--space-1);border-radius:var(--r-s);background:var(--bg);color:var(--ink-2);font:var(--type-cap);white-space:nowrap}
.pn-bday .pc-input{padding:0;text-align:center;font:var(--type-title);font-variant-numeric:tabular-nums}
.pn-ageecho{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
/* polish r2: the under-18 check asks before it stops (a typo never locks the wizard) */
.pn-u18ask{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-u18ask[hidden]{display:none}
.pn-u18ask__t{margin:0 0 var(--space-3);font:var(--type-strong)}
.pn-u18ask__btns{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-ageecho[hidden]{display:none}
.pn-ageecho__n{flex:none;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-3);color:var(--ink);font:var(--type-num);font-variant-numeric:tabular-nums}   /* a tile numeral in ink, never a pink tape */
.pn-ageecho p{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-ageecho b{color:var(--ink);font-weight:var(--w-strong)}

/* ---------- S3 recap + the fallback account form ---------- */
.pn-recap{display:flex;align-items:center;gap:var(--space-2);align-self:flex-start;margin:var(--space-4) 0 0;padding:var(--space-1) var(--space-4) var(--space-1) var(--space-1);border-radius:var(--r-full);background:var(--surface);font:var(--type-strong)}
.pn-recap[hidden]{display:none}
.pn-recap__ph{width:var(--avatar-s);height:var(--avatar-s);border-radius:50%;background:var(--ph-media-2) center/cover no-repeat;flex:none}
.pn-recap span:not(.pn-recap__ph){color:var(--ink-2);font-weight:var(--w-regular)}
.pn-wizform{display:flex;flex-direction:column;flex:1}
.pn-wizform .pn-checks{margin-top:var(--space-3)}
.pn-wizform .pn-checkrow{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap);padding:var(--space-2) var(--space-1);font:var(--type-body);cursor:pointer}
.pn-wizform .pn-checkrow a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:2px}
.pn-wizform .pn-checkrow.is-error .pc-check{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-pwfield{position:relative}
.pn-pwfield .pc-input{padding-right:96px}

/* ---------- S4 offer tiles — P5 MSL-103: a tile one tone up; chosen = the selected tone + an ink tick (no pink, no white) ---------- */
.pn-offers{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-4)}
.pn-offertile{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--space-3);min-height:84px;padding:var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface);color:var(--ink);font:var(--type-strong);text-align:left;overflow:hidden;cursor:pointer;transition:background-color var(--dur-1) ease-out}
.pn-offertile:focus-visible,.pn-offertile:focus-within:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-offertile__ico.pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-offertile__t{position:relative;z-index:2;max-width:100%;overflow-wrap:anywhere;hyphens:manual}
.pn-offertile__tick{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-3);color:transparent}
.pn-offertile__tick .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-offertile.is-selected{background:var(--surface-3);color:var(--ink)}
.pn-offertile.is-selected .pn-offertile__tick{background:var(--ink);color:var(--bg);box-shadow:none}
.pn-offertile--wide{grid-column:span 2;min-height:96px;padding-right:128px}
.pn-offertile__art{position:absolute;right:52px;bottom:-16px;width:112px;transform:none;pointer-events:none}
.pn-offertile__art .pn-obj{display:block;width:100%;height:auto;filter:none}
.pn-selicon{position:relative}
.pn-selicon > .pc-ico{position:absolute;left:var(--space-3);top:50%;z-index:1;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.pn-selicon .pc-input{padding-left:44px}

/* ---------- S5 about ---------- */
.pn-about.pc-input{min-height:132px;padding:var(--space-3);border-radius:var(--r-m);font:var(--type-ui)}
.pn-meter{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.pn-meter__bars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-1);flex:1}
.pn-meter__bars i{height:4px;border-radius:var(--r-full);background:var(--surface-2)}
.pn-meter[data-q="short"] .pn-meter__bars i:nth-child(-n+1),.pn-meter[data-q="good"] .pn-meter__bars i:nth-child(-n+2),.pn-meter[data-q="great"] .pn-meter__bars i{background:var(--ink-2)}   /* a bar in ink, never a second pink object */
.pn-meter[data-q="great"] .pn-meter__bars i{background:var(--ink)}
.pn-meter b{font:var(--type-cap);color:var(--ink-2)}
.pn-meter[data-q="empty"]{visibility:hidden}   /* night 05.10. (audit #7): no verdict before she typed; the row keeps its height */
/* P5 MSL-104: the starter chips are the kit's small chip (36 on desktop, 44 on phones), 8 apart */
.pn-starters,.pn-wiz .pn-starters{gap:var(--space-2);margin-top:var(--space-3)}
.pn-wiz .pn-starter.pc-chip{min-height:var(--control-sm);padding:0 var(--space-3);font:var(--type-label)}
.pn-starter.pc-chip:hover{border-color:transparent}
.pn-starter .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6}
.pn-details{margin-top:var(--space-6);padding-top:var(--space-4);border-top:0}
.pn-details > summary{list-style:none;cursor:pointer;min-height:var(--tap);align-items:center}
.pn-details > summary::-webkit-details-marker{display:none}
.pn-details > summary .pc-ico{margin-left:auto;transition:transform var(--dur-2) ease-out}
.pn-details[open] > summary .pc-ico{transform:rotate(180deg)}
.pn-grp{margin-top:var(--space-3)}
.pn-grp .pc-t-label{margin:0 0 var(--space-2)}
.pn-grp .pc-chips{gap:var(--space-2)}
.pn-detchip.pc-chip{gap:var(--space-2)}

/* ---------- S6 photos ---------- */
.pn-goal{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-3) 0 0;font:var(--type-strong)}
.pn-goal__dots{display:flex;gap:var(--space-1);flex:none}
.pn-goal__dots i{width:24px;height:4px;border-radius:var(--r-full);background:var(--surface-2)}
.pn-goal__dots i.is-on{background:var(--ink)}
.pn-wizgrid__photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}
.pn-wiz .pc-slot{aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden;position:relative}
.pn-wiz .pc-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-wiz .pc-slot.is-filled{cursor:grab}
.pn-wizslot__add{display:grid;place-items:center;align-content:center;gap:var(--space-1);width:100%;height:100%;cursor:pointer;color:inherit;font:var(--type-label);text-align:center;padding:var(--space-1)}
.pn-slot__menu.pc-iconbtn{position:absolute;right:var(--space-2);bottom:var(--space-2);z-index:5;width:var(--control-sm);height:var(--control-sm)}
.pn-slot__menu .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pc-slot.is-dragging{opacity:.45}
.pc-slot.is-over{outline:2px solid var(--accent);outline-offset:2px}
.pc-slot.is-up > img{filter:saturate(.6)}
.pn-pring{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:var(--scrim)}
.pn-pring > span{--p:0;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--media-track) 0)}
.pn-pring b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--scrim);color:var(--ink);font:var(--type-label)}
.pn-pring.is-fail{background:var(--scrim)}
.pn-pring .pc-btn{min-height:var(--control-sm)}
/* polish r2: the picker labels are keyboard buttons (tabindex=0, role=button): the kit focus ring, inside where the tile clips */
.pn-mediapick__add:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-wizslot__add:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;border-radius:inherit}
.pn-wizmenu{position:fixed;z-index:var(--z-menu);min-width:208px;padding:var(--space-2);border-radius:var(--r-l);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-e1)}
.pn-wizmenu[hidden]{display:none}
.pn-wizmenu button{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:48px;padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:transparent;color:inherit;font:var(--type-strong);text-align:left;cursor:pointer}
.pn-wizmenu button:hover{background:var(--surface-3)}
.pn-wizmenu button:focus-visible{background:var(--surface-3);outline:2px solid var(--focus-ring);outline-offset:-2px}
@media (min-width:701px){.pn-wizgrid__photos{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* night 05.10.: six slots = two rows of three at every width */
/* polish-s 02.10.: on a narrow tile the cover label is the star alone (the word stays for screen readers) */
.pn-wizgrid__photos > .pc-slot{container-type:inline-size}
@container (max-width:150px){.pn-wizgrid__photos .pc-slot__cover{gap:0;padding:var(--space-1) var(--space-2);font-size:0;letter-spacing:0}}

/* ---------- live preview (desktop right column, phone sheet) + strength ---------- */
.pn-wizprev{display:none}
.pn-wizprev.is-open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast);max-height:86vh;overflow:auto;padding:var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface-2);box-shadow:var(--shadow-e1),0 0 0 100vmax var(--scrim);animation:pn-sheet-up var(--dur-2) ease-out}
@keyframes pn-sheet-up{from{transform:translateY(100%)}}
.pn-wizprev__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.pn-wizprev__label{display:flex;align-items:center;gap:var(--space-2)}
.pn-wizprev--inline{display:block;margin-top:var(--space-4)}
/* storefront top (mockup .scard): cover banner, avatar, name · age · country, offer chips, About, detail tiles */
.pn-wizcard.pc-card{overflow:hidden;border-radius:var(--r-l);background:var(--surface);box-shadow:none}
.pn-wizcard__cover{position:relative;height:132px;background:var(--ph-media);overflow:hidden}
.pn-wizcard__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pn-wizcard__new{position:absolute;right:var(--space-3);top:var(--space-3);z-index:3}
.pn-wizcard__body{position:relative;padding:0 var(--space-4) var(--space-4)}
.pn-wizcard__av{display:block;width:var(--avatar-xl);height:var(--avatar-xl);margin:-32px 0 var(--space-2);border-radius:50%;overflow:hidden;background:var(--ph-media);box-shadow:none}
.pn-wizcard__av img{width:100%;height:100%;object-fit:cover}
/* no photo yet: her initial on the avatar tone (Inter 600) */
.pn-wizcard__av-i{display:grid;place-items:center;width:100%;height:100%;background:var(--surface-2);color:var(--ink);font:var(--type-h1);font-weight:var(--w-strong)}
.pn-wizcard__av img ~ .pn-wizcard__av-i{display:none}
.pn-wizcard__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2);margin:0 0 var(--space-2);font:var(--type-title);overflow-wrap:anywhere}
.pn-wizcard__name b{font-weight:var(--w-bold)}
.pn-wizcard__name .pn-age{margin-left:-8px}
.pn-wizcard__name [data-live="country"]{font:var(--type-label);color:var(--ink-2)}
.pn-wizcard .pn-wizstore__chips{margin:0}
.pn-wizprev__strength.pn-panel{margin-top:var(--space-4);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);border:0}
.pn-wizprev__strength .pn-strength{margin:0}
.pn-wizprev__label .pn-ondot{background:var(--success);box-shadow:none}
.pn-wizstore__chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.pn-wizstore__chips [hidden],.pn-wizstore__facts [hidden],.pn-wizstore__about[hidden]{display:none}
.pn-wizstore__about{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-wizstore__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:var(--space-3) 0 0}
.pn-wizstore__facts > div{padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);min-width:0}
.pn-wizstore__facts dt{font:var(--type-cap);color:var(--ink-2)}
.pn-wizstore__facts dd{margin:var(--space-1) 0 0;font:var(--type-label);overflow-wrap:anywhere}
.pn-strength{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4)}
.pn-strength__txt{min-width:0}
.pn-strength .pc-t-title{margin:0 0 var(--space-2)}
.pn-misschips{gap:var(--space-2)}
/* polish r2: under 10 % the next item is the headline (no 0 % ring); a flat panel, no wash */
.pn-strength--start{display:block;padding:var(--space-4);border-radius:var(--r-l);background:var(--surface);border:0}
.pn-wizprev__strength .pn-strength--start{padding:0;background:none}
.pn-strength__k{margin:0 0 var(--space-1)}
.pn-strength--start .pc-t-title{margin:0 0 var(--space-3)}
.pn-strength__go{margin:0 0 var(--space-3)}
.pn-strength--start .pn-misschips:last-child{margin-bottom:0}
.pn-wiz .pn-ring{--p:0;display:grid;place-items:center;flex:none;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--surface-2) 0)}
.pn-wiz .pn-ring b{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--bg);font:var(--type-h1);font-variant-numeric:tabular-nums}
.pn-wiz .pn-ring small{font:var(--type-cap)}
.pn-wiz .pn-ring--md{width:56px;height:56px}
.pn-wiz .pn-ring--md b{width:44px;height:44px;font:var(--type-title);background:var(--surface)}
.pn-wiz .pn-ring--sm{width:52px;height:52px;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--chrome-2) 0)}
.pn-wiz .pn-ring--sm b{width:40px;height:40px;font:var(--type-strong);background:var(--chrome);color:var(--on-chrome)}
@media (min-width:1200px){
  .pn-wiz--wide{max-width:1120px;padding-inline:var(--space-8)}
  .pn-wiz--wide .pn-wizgrid{display:grid;grid-template-columns:minmax(0,560px) 400px;justify-content:center;gap:96px;align-items:start}
  .pn-wiz--wide .pn-wizprev{display:block;position:sticky;top:calc(var(--wizbar-h) + var(--space-6));align-self:start}
  .pn-wiz--wide .pn-wizprev__close{display:none}
}

/* ---------- S8 first ad: quality bar (AD6), media pick, price, the cohort proof as on S1 ---------- */
.pn-wiz button.pn-later{border:0;background:transparent;cursor:pointer}
.pn-wiz .pn-proof.pn-wiz__proof--ad{margin:var(--space-4) 0 0}
.pn-qbar{position:sticky;top:calc(var(--wizbar-h) + var(--space-2));z-index:10;display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--chrome);color:var(--on-chrome);box-shadow:var(--shadow-e1)}
.pn-qbar__ticks{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:0;padding:0;list-style:none;font:var(--type-cap);color:var(--on-chrome-2)}
.pn-qbar__ticks li{display:flex;align-items:center;gap:var(--space-1)}
.pn-qbar__ticks .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-qbar__ticks li.is-ok{color:var(--on-chrome)}
.pn-qbar__ticks li.is-ok .pc-ico{color:var(--success)}
.pn-mediapick{display:flex;gap:var(--space-2);margin:var(--space-3) calc(-1 * var(--space-4)) 0;padding:var(--space-1) var(--space-4);list-style:none;overflow-x:auto;scrollbar-width:none}
.pn-mediapick::-webkit-scrollbar{display:none}
.pn-mediapick > li{flex:none;width:84px}
.pn-mediapick__it.pc-slot{display:block;width:84px;padding:0;border:0;cursor:pointer}
.pn-mediapick__it.is-upload{cursor:default}
/* T35: not picked = a glass "+" (tap to add); picked = the order number on the accent (a selection mark, like a ticked box) */
.pn-mediapick__n{position:absolute;top:var(--space-2);left:var(--space-2);z-index:6;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--scrim);color:transparent;font:var(--type-cap)}
.pn-mediapick__it.is-on .pn-mediapick__n{background:var(--accent);color:var(--on-accent)}
.pn-mediapick__it.is-upload .pn-mediapick__n{display:none}
.pn-mediapick__n .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-mediapick__n b{font:inherit}
.pn-mediapick__it:not(.is-on) .pn-mediapick__n{background:var(--glass);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pn-mediapick__it:not(.is-on) .pn-mediapick__n b,.pn-mediapick__it.is-on .pn-mediapick__n .pc-ico{display:none}
.pn-mediapick__add.pc-slot{display:grid;width:84px;cursor:pointer}
.pn-mediapick > li[hidden]{display:none}
/* night 05.10.: the first photo of the listing wears the cover tag (star only on the 84 px tile, the word for screen readers) */
.pn-mediapick .pn-mediapick__cover{left:var(--space-1);bottom:var(--space-1);gap:0;padding:var(--space-1) var(--space-2);font-size:0;letter-spacing:0}
.pn-mediapick__add span{font:var(--type-label)}
/* S8 price: the item editor's .pn-pricebox + .pn-curseg (items.css), AD4 03.10. */
.pn-wiz .pn-statuspill:not(.pn-statuspill--chrome){display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;min-height:32px;margin:var(--space-4) 0 0;padding:0 var(--space-3);border-radius:var(--r-full);background:var(--surface);font:var(--type-label)}
.pn-wiz .pn-statuspill__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--success)}
.pn-wizprev--ad{display:none !important}
.pn-dock--stack .pn-fixcount{margin:0 0 var(--space-2);text-align:center}   /* night 05.10. (audit #11): the count sits right above the key */

/* ---------- S9 fallback hero (Team D's partial replaces it) ---------- */
.pn-golivefb{padding:var(--space-2) var(--space-4) var(--space-6);background:var(--chrome);color:var(--on-chrome)}
.pn-golivefb .pc-t-mega{margin-top:var(--space-3);font:var(--type-display);letter-spacing:var(--tr-h);color:var(--on-chrome)}
.pn-golivefb p:last-child{margin:var(--space-3) 0 0;max-width:36ch;color:var(--on-chrome-2);font:var(--type-body)}
.pn-wiz--golive .pn-wizstep > .pn-dock{margin:auto 0 0}
/* T02: the go-live pay step sits in the page gutter like every other step; polish r4: the pay row is in flow right under
   the plans (owner rule: no bar covering content); from 701 px one row: the key left, "I'll pay later" + its line right. */
.pn-wiz--golive .pn-paysite--golive{padding:var(--gutter) var(--gutter) 0;box-sizing:border-box}
.pn-wiz--golive .pn-paydock{position:static;z-index:auto;margin-top:var(--space-5);padding:0;border-top:0;background:none}
@media (min-width:701px){
  .pn-wiz--golive .pn-paysite--golive{padding-top:0}
  .pn-wiz--golive .pn-paydock{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-5);row-gap:var(--space-1)}
  .pn-wiz--golive .pn-paydock .pc-btn{grid-row:1 / 3}
  .pn-wiz--golive .pn-paydock .pn-later{justify-self:start;min-height:var(--tap);padding:0 var(--space-1);align-self:end}
  .pn-wiz--golive .pn-paydock .pn-later__sub{margin:0;padding:0 var(--space-1);text-align:left;align-self:start}
  .pn-wiz--golive .pn-paydock .pn-later:only-of-type:last-child{grid-row:1 / 3;align-self:center}
}

/* P5 MSL-092 / MSL-093 / MSL-095: no care-label step marker and no hand note — the phase bar is the one progress display
   (the step is named in the bar's accessible label). onboard.php no longer prints the line; join_seller.php still prints
   the hand note in it, so the line stays hidden here. */
.pn-wiztag{display:none}

/* ---------- S10 done: "What happens next" (audit #13) — P5 MSL-108: a plain panel, numerals in ink on a tile tone ---------- */
.pn-wiznext.pn-panel{position:relative;z-index:2;margin:0 0 var(--space-4);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);border:0}
.pn-wiznext__h{margin:0 0 var(--head-gap);font:var(--type-title);color:var(--ink)}
.pn-wiznext__rows{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
.pn-wiznext__rows li{display:flex;align-items:flex-start;gap:var(--space-3);font:var(--type-body);color:var(--ink-2)}
.pn-wiznext__n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--ink);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-wiznext__link{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:2px}
/* UX 433 S-020 (switch ux433_seller): the set-up's end as status rows — done / waiting / to do / locked, no sales text */
.pn-uxsrows{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
.pn-uxsrows__r{display:flex;align-items:flex-start;gap:var(--space-3);font:var(--type-body);color:var(--ink-2)}
.pn-uxsrows__ico{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--ink-2)}
.pn-uxsrows__r.is-done .pn-uxsrows__ico{color:var(--live)}
.pn-uxsrows__r.is-todo{color:var(--ink)}
.pn-uxsrows__r.is-todo .pn-uxsrows__ico{color:var(--accent)}
.pn-uxsprem{display:inline-flex;align-items:center;gap:var(--space-2)}

/* ---------- S10 done ---------- */
.pn-donehero{position:relative;overflow:hidden;padding:calc(env(safe-area-inset-top) + 64px) max(16px,calc((100% - 528px) / 2)) var(--space-10);background:var(--chrome);color:var(--on-chrome)}
.pn-donehero .pc-t-mega{font:var(--type-display);letter-spacing:var(--tr-h);color:var(--on-chrome);overflow-wrap:anywhere}
.pn-donehero .pc-t-mega:focus:not(:focus-visible){outline:none}
.pn-donehero p{margin:var(--space-2) 0 0;max-width:30ch;color:var(--on-chrome-2);font:var(--type-body)}
.pn-donehero__sticker{position:absolute;right:max(24px,calc((100% - 528px) / 2));top:calc(env(safe-area-inset-top) + 24px)}   /* a plain badge, never a tilted sticker */
.pn-wiz--done .pn-wizstep{margin-top:calc(-1 * var(--space-4));position:relative;z-index:2}

/* ---------- under 18 / expired (pn-stop) ---------- */
.pn-stop{width:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);min-height:100vh;min-height:100dvh;max-width:592px;margin:0 auto;padding:var(--space-6);box-sizing:border-box;background:var(--chrome);color:var(--on-chrome)}
.pn-stop .pc-t-mega{font:var(--type-display);letter-spacing:var(--tr-h);color:var(--on-chrome);overflow-wrap:anywhere}
.pn-stop .pc-t-mega:focus:not(:focus-visible){outline:none}
.pn-stop p{margin:0;max-width:28ch;color:var(--on-chrome-2);font:var(--type-ui)}
.pn-stop .pc-btn{align-self:flex-start;margin-top:var(--space-3)}
.pn-stop__acts{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.pn-stop .pc-btn--line{background:var(--surface-2);color:var(--ink);border-color:transparent}
.pn-stop .pc-btn--line:hover{background:var(--surface-3);color:var(--ink)}
.pn-stop__badge{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--surface-2);color:var(--ink);font:var(--type-h1)}
.pn-stop__badge .pc-ico{width:36px;height:36px}

/* ---------- S4 "You're in" toast ---------- */
.pn-toastwrap{position:fixed;left:0;right:0;bottom:calc(112px + var(--toast-gap) + env(safe-area-inset-bottom));z-index:var(--z-toast);display:flex;justify-content:center;pointer-events:none}
.pn-intoast.pc-toast{gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-4) 0 var(--space-2);animation:pn-toast-in var(--dur-2) ease-out both var(--dur-1)}
.pn-toastwrap[hidden]{display:none}
.pn-toastwrap.is-gone{opacity:0;transition:opacity var(--dur-2)}
@keyframes pn-toast-in{from{transform:translateY(30px);opacity:0}}
@media (min-width:701px){.pn-toastwrap{top:calc(var(--wizbar-h) + var(--space-4));bottom:auto;justify-content:flex-end;padding-right:var(--col-pad)}}   /* night 05.10. (audit #6): top right under the bar */

@media (prefers-reduced-motion:reduce){
  .pn-phase__tr i,.pn-offertile,.pn-saved,.pn-wizprev.is-open,.pn-intoast.pc-toast,.pn-offertile.is-selected .pn-offertile__tick,.pn-crop,.pn-details > summary .pc-ico,.pn-toastwrap.is-gone,.pn-lhabout80__bar > i{transition:none;animation:none}
}

/* S1 on desktop (agency P-8): the words and actions on the left, the photo on the right. The step and its dock become grid
   items (display:contents); the order stays the DOM order. */
@media (min-width:1200px){
  .pn-wiz--photo{display:grid;grid-template-columns:minmax(0,560px) 400px;grid-template-rows:repeat(8,min-content) 1fr;column-gap:96px;justify-content:center;max-width:1120px;padding-inline:var(--space-8);align-items:start}
  .pn-wiz--photo > .pn-wizstep,.pn-wiz--photo > .pn-dock{display:contents}
  .pn-wiz--photo .pn-wizstep > *,.pn-wiz--photo .pn-dock > *{grid-column:1}
  .pn-wiz--photo .pn-crop{grid-column:2;grid-row:1 / -1;width:320px;margin:var(--space-6) auto var(--space-8)}
  .pn-wiz--photo .pn-lede{max-width:var(--measure-lede)}
  .pn-wiz--photo .pn-wiz__proof{margin:var(--space-6) 0 0;max-width:420px}
  .pn-wiz--photo .pn-dock__empty{justify-content:flex-start;align-items:center;margin:var(--space-5) 0 var(--space-8)}
  .pn-wiz--photo .pn-dock__filled{margin:var(--space-5) 0 var(--space-8)}
  .pn-wiz--photo .pn-dock__filled .pc-btn--block{margin:0}
  .pn-wiz--photo .pn-crop__exif{justify-content:flex-start}
}

/* ==========================================================================
   v3 → design system P5: step heads are the selling moment's display head (--type-display 30, phones 24, Inter 700,
   sentence case); words wrap only at spaces. P5 MSL-096: the "*accent*" words stay plain — no pink highlighter (the pink
   belongs to the key). One object per step, 96 px, top right — flat, never tilted or shadowed.
   ========================================================================== */
.pn-wiz .pn-hero .pc-t-display,.pn-wiz .pn-hero .pc-t-mega{font:var(--type-display);letter-spacing:var(--tr-h);overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.pn-wiz .pn-hero .pn-accent-text,.pn-wiz .pn-hero em,.pn-stop .pn-accent-text,.pn-donehero .pn-accent-text,.pn-golivefb .pn-accent-text{font-style:normal;background:none;color:inherit;padding:0}
.pn-wiz{position:relative}
.pn-wizobj{position:absolute;right:var(--space-4);top:64px;z-index:2;width:96px;filter:none;pointer-events:none}
.pn-wizobj img{display:block;width:100%;height:auto}
.pn-wiz.has-obj > .pn-wizstep .pn-hero,.pn-wiz.has-obj > form > .pn-hero{padding-right:108px}
.pn-wizobj__label.pc-carelabel{width:96px;padding:var(--space-2);transform:none;background:var(--surface-2);color:var(--ink);box-shadow:none;border-radius:var(--r-m)}
.pn-wizobj__label.pc-carelabel::before{display:none}
.pn-wizobj__label .pc-logo{font-size:14px}
.pn-wizobj__label p{margin-top:var(--space-2);font:var(--type-cap)}
.pn-wizobj__label .pc-carelabel__v{font:var(--type-h1)}
.pn-wizobj__label .pc-nophoto__syms{margin:var(--space-2) 0 0;gap:var(--space-1)}
.pn-wizobj__label .pc-nophoto__syms i{width:12px;height:12px}
.pn-donehero{position:relative}
.pn-wizobj--done{top:auto;bottom:var(--space-6);right:max(24px,calc((100% - 528px) / 2))}   /* T33: anchored to the 528 column (with the headline) */
/* polish r2: headline and line keep clear of the 96 px object */
.pn-donehero > :is(h1,p){max-width:calc(100% - 112px)}
@media (min-width:701px){
  .pn-wizobj{right:0;top:96px}
  .pn-wizobj.pn-wizobj--done{top:auto;right:max(24px,calc((100% - 528px) / 2))}
}

/* polish r3: the selected plan in "Go live" is the paysite ring (tonal.css), never a near-white edge */
.pn-wiz .pn-plan:hover{border-color:transparent}
.pn-wiz .pn-plan:has(input:checked){border-color:transparent}

/* ==========================================================================
   polish r4: ONE step frame for all steps from 1200 px (the .pn-wiz--wide grid: form 560 | aside 400, gap 96,
   1056 wide, centred). The form column always starts at the frame's left edge, so the heading never jumps sideways
   between steps. Steps without an aside leave it empty; the black done page keeps its ground edge to edge.
   ========================================================================== */
@media (min-width:701px){
  .pn-wiz .pn-wizstep--narrow{padding-inline:0}
  .pn-donehero{padding-inline:max(16px,calc((100% - 560px) / 2))}
  .pn-donehero__sticker{right:max(24px,calc((100% - 560px) / 2))}
  .pn-wizobj.pn-wizobj--done{right:max(24px,calc((100% - 560px) / 2))}
}
@media (min-width:1200px){
  .pn-wiz:is(.pn-wiz--name,.pn-wiz--account,.pn-wiz--preview,.pn-wiz--summary):not(.pn-wiz--wide){max-width:1120px;padding-inline:var(--space-8)}
  .pn-wiz:is(.pn-wiz--name,.pn-wiz--account,.pn-wiz--preview,.pn-wiz--summary):not(.pn-wiz--wide) > .pn-wizstep{width:100%;max-width:1056px;margin-inline:auto;padding:0 496px 0 0;box-sizing:border-box}
  .pn-wiz--golive .pn-paysite--golive{max-width:1120px;padding-inline:var(--space-8) 528px}
  .pn-donehero{padding-inline:calc((100% - 1056px) / 2) calc((100% - 1056px) / 2 + 496px)}
  .pn-wiz--done > .pn-wizstep--narrow{max-width:1120px;padding:0 528px 0 32px}
  .pn-donehero__sticker,.pn-wizobj.pn-wizobj--done{right:calc((100% - 1056px) / 2 + 496px)}
}

/* P5: the legacy onboarding (onboard.php, /services/step1–3) rides on account.css's .pn-lh* block (P3's file); its 3 px
   rings and the step-3 tilted sticker are corrected here until that block moves into this file. */
.pn-wiz--lh .pn-lhphoto:focus-within{outline:2px solid var(--focus-ring);outline-offset:4px}
.pn-wiz--lh .pn-lhoffer .pn-offertile:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-wiz--lh .pn-lhoffer .pn-offertile{min-height:72px}
/* P5 MSL-110: the go-live keys follow the panel in flow (no 220 px empty band above three stacked keys) */
.pn-lhlive .pn-dock--stack{position:static;margin:var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom));padding:0;background:none;gap:var(--space-2)}
.pn-lhlive .pn-wiznext{margin-top:var(--space-4)}
.pn-lhlive > .pn-hero{padding-right:0}
@media (min-width:701px){.pn-lhlive .pn-dock--stack{margin:var(--space-8) 0 var(--space-12)}}
/* ---------- signup C: post-signup nudges (docs/spec-pnew-signup.md §7) ----------
   Checklist .pn-nudgecl = a panel with the card head, the ring and plain rows. Next-step card .pn-nudgecard = the hero
   stat (account.css). Takeover .pn-nudgesheet = the shared sheet. Buyer chip .pn-nudgechip and proof tile .pn-proof =
   notes. Live counts use the kit chip (ui_live, components.css). Self-contained: the checklist rows do not lean on items.css.
   design system P5 (03.11., docs/design-system.md): the type scale only, the 4 px grid, --r-s / --r-m / --r-l, no edges
   inside (rows apart by space, not lines), the kit focus ring, numerals in ink (never pink), no paper label on the wizard. */

/* Stack on sell_home / me: checklist, then the card, then the page. */
.pn-nudgestack{display:grid;gap:var(--stack-gap);margin:0 0 var(--section-gap)}
.pn-nudgestack:empty{display:none}

/* ---- Checklist ---- */
.pn-nudgecl{padding:var(--panel-pad) var(--panel-pad) var(--space-2);border-radius:var(--r-l);box-shadow:none}
.pn-nudgecl__head{display:flex;align-items:center;gap:var(--space-4);min-height:56px;margin-bottom:var(--head-gap)}
/* night N6 08.10. + L2: the first-sale guide and the Verified badge link side by side under the rows, wrapping on phones */
.pn-nudgecl__guide{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin:var(--space-2) 0 var(--space-3);padding-top:var(--space-3);border-top:0}
.pn-nudgecl__t{flex:1;min-width:0}
.pn-nudgecl__t h2{margin:0;font:var(--type-title);color:var(--ink);hyphens:manual}
/* T55: at <=400 the fold and close keys sit in the card's top-right corner, so the heading gets the whole row */
@media (max-width:400px){
  .pn-nudgecl{position:relative}
  .pn-nudgecl__head{gap:var(--space-3);padding-right:96px}
  .pn-nudgecl .pn-ring{width:48px;height:48px}
  .pn-nudgecl .pn-ring b{width:40px;height:40px;font:var(--type-strong)}
  .pn-nudgecl__head .pn-nudgecl__fold,.pn-nudgecl__head .pn-nudgecl__x{position:absolute;top:var(--space-2);right:var(--space-2);width:var(--tap);height:var(--tap)}
  .pn-nudgecl__head:has(.pn-nudgecl__x) .pn-nudgecl__fold{right:52px}
}
.pn-nudgecl__next{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2);overflow-wrap:anywhere}
.pn-nudgecl__proof{margin:0 0 var(--space-3);font:var(--type-meta);color:var(--ink-2);overflow-wrap:anywhere}   /* new-seller signals M2: the cohort line */
.pn-nudgecl .pn-ring{--p:0;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--surface-2) 0)}
.pn-nudgecl .pn-ring b{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--ink);font:var(--type-strong);font-variant-numeric:tabular-nums}
.pn-nudgecl .pn-ring small{font:var(--type-cap)}
.pn-nudgecl__fold,.pn-nudgecl__x{width:var(--tap);height:var(--tap);background:transparent;color:var(--ink)}
.pn-nudgecl__fold:hover,.pn-nudgecl__x:hover{background:var(--surface-2)}
.pn-nudgecl__fold .pc-ico,.pn-nudgecl__x .pc-ico{width:var(--icon-m);height:var(--icon-m);transition:transform var(--dur-2) ease-out}
.pn-nudgecl__fold[aria-expanded="false"] .pc-ico{transform:rotate(-90deg)}
.pn-nudgecl__head form{display:contents}
.pn-nudgecl__rows{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
.pn-nudgecl__rows[hidden]{display:none}
.pn-nudgecl__rows > li{border-top:0}
.pn-nudgecl .pn-checkrow{display:flex;align-items:center;gap:var(--space-3);min-height:48px;padding:0 var(--space-2);border-radius:var(--r-m);color:inherit;text-decoration:none}
.pn-nudgecl .pn-checkrow::before{display:none}
.pn-nudgecl a.pn-checkrow:hover{background:var(--surface-2)}
.pn-nudgecl a.pn-checkrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-nudgecl .pn-checkrow .pn-row__main > b{font:var(--type-strong);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.pn-nudgecl .pn-checkdot{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-3);background:transparent;color:transparent}
.pn-nudgecl .pn-checkdot .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:3}
.pn-nudgecl .pn-checkrow.is-done .pn-checkdot{background:var(--surface-3);box-shadow:none;color:var(--ink)}
.pn-nudgecl .pn-checkrow.is-done .pn-row__main > b{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--ink-3)}
/* "Add" = the quiet "all" link (600, ink, underline in ink) */
.pn-nudgecl__go{flex:none;margin-left:auto;font:var(--type-label);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-nudgecl a.pn-checkrow:hover .pn-nudgecl__go{text-decoration-color:var(--ink)}
.pn-nudgecl--wizard{position:relative;z-index:2}

/* ---- Next-step card: the hero stat variant (account.css) ---- */
.pn-nudgecard p{margin:0}
.pn-nudgecard form{margin:0}
.pn-nudgecard__h{margin:0;padding-right:48px;font:var(--type-h1);color:var(--dk-ink)}
.pn-nudgecard__body{max-width:44ch;font:var(--type-body);color:var(--dk-ink-2)}
.pn-nudgecard__proof{max-width:48ch;font:var(--type-meta);color:var(--dk-ink-2)}
.pn-nudgecard__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-nudgecard__h .pn-nudgecard__sticker{position:relative;top:-4px;margin-left:var(--space-2);vertical-align:middle;transform:none;box-shadow:none;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-2);color:var(--ink);font:var(--type-cap)}   /* a badge, never a tilted cream sticker */
.pn-nudgecard--promo{gap:var(--space-4)}
/* The close form sits out of the grid flow (no empty row); its button is pinned to the corner. */
.pn-nudgecard > form:has(.pn-nudgecard__x){position:absolute;top:var(--space-3);right:var(--space-3);z-index:2}
.pn-nudgecard__x{width:var(--tap);height:var(--tap);border-color:transparent;background:transparent;color:var(--dk-ink)}
.pn-nudgecard__x:hover{background:var(--surface-2)}
.pn-nudgecard__x .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pn-nudgecard--views .pn-herostat__main,.pn-nudgecard--waiting .pn-herostat__main{padding-right:48px}
.pn-nudgecard .pn-herostat__l{margin:var(--space-1) 0 0}
.pn-nudgecard__later{display:block;width:100%;min-height:var(--tap);margin:0;padding:0 var(--space-4);border:0;border-radius:var(--r-m);background:transparent;color:var(--dk-ink);font:var(--type-strong);cursor:pointer}   /* the kit's quiet key */
.pn-nudgecard__later:hover{background:var(--surface-2)}
.pn-nudgecard__later:focus-visible,.pn-nudgecard__x:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Actions: the CTA and "Not now" as one block (phone: full width under the text). */
.pn-nudgecard__acts{display:grid;gap:var(--space-1);min-width:0}
.pn-nudgecard__acts .pn-herostat__cta{width:100%}
@media (min-width:701px){
  /* Desktop: text left, actions right, spanning exactly the rows that render (--rows from the partial), bottom-aligned. */
  .pn-nudgecard{grid-template-columns:minmax(0,1fr) auto;align-items:start;align-content:start}
  .pn-nudgecard > *:not(.pn-nudgecard__acts){grid-column:1}
  .pn-nudgecard > .pn-nudgecard__acts{grid-column:2;grid-row:1 / span var(--rows,2);align-self:end;min-width:240px}
  .pn-nudgecard__acts .pn-herostat__cta.pc-btn--block{grid-column:auto;grid-row:auto;width:100%}
  .pn-nudgecard .pn-herostat__l{margin:0 0 var(--space-1)}
  .pn-nudgecard:has(.pn-nudgecard__x) > .pn-nudgecard__acts{margin-right:52px}
}

/* ---- Takeover sheet (first buyer message): the shared sheet ---- */
.pn-nudgesheet__new{margin-bottom:var(--space-3)}
.pn-nudgesheet__who{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3)}
.pn-nudgesheet__av.pc-avatar{width:var(--avatar-m);height:var(--avatar-m);filter:blur(1.5px)}
.pn-nudgesheet__who p{margin:0;display:grid;gap:var(--space-1);font:var(--type-meta);color:var(--ink-2)}
.pn-nudgesheet__who b{font-weight:var(--w-strong);color:var(--ink);overflow-wrap:anywhere}
.pn-nudgesheet__h{margin-bottom:var(--space-2);max-width:15ch}
.pn-nudgesheet__h:focus:not(:focus-visible){outline:none}   /* programmatic focus target (tabindex=-1) for screen readers */
.pn-nudgesheet__later{display:block;width:100%;min-height:var(--tap);margin:var(--space-1) 0 0;padding:0 var(--space-4);border:0;border-radius:var(--r-m);background:transparent;color:var(--ink);font:var(--type-strong);cursor:pointer}   /* the kit's quiet key */
.pn-nudgesheet__later:hover{background:var(--surface-3)}
.pn-nudgesheet form{margin:0}

/* ---- Buyer chip (the only buyer follow-up): a note row ---- */
.pn-nudgechip{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface);border:0}
.pn-nudgechip__main{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-nudgechip__main:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-nudgechip__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--ink)}
.pn-nudgechip__ico .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pn-nudgechip__txt{display:grid;gap:var(--space-1);min-width:0}
.pn-nudgechip__txt b{font:var(--type-strong);color:var(--ink);overflow-wrap:anywhere}
.pn-nudgechip__txt small{font:var(--type-meta);color:var(--ink-2)}
.pn-nudgechip form{margin:0}
.pn-nudgechip__x{width:var(--tap);height:var(--tap);background:transparent;color:var(--ink)}
/* Verkäufe 500 NACH-004 (switch buyer_first_write): the seller chip — her listing photo, her name, "Message her" */
.pn-nudgechip__img{flex:none;width:48px;height:48px;border-radius:var(--r-m);object-fit:cover}
.pn-nudgechip__cta{flex:none;margin-left:auto}
@media (max-width:420px){.pn-nudgechip--fw .pn-nudgechip__main{flex-wrap:wrap}.pn-nudgechip--fw .pn-nudgechip__cta{margin-left:60px}}
.pn-nudgechip__x:hover{background:var(--surface-2)}
.pn-nudgechip__x .pc-ico{width:var(--icon-m);height:var(--icon-m)}

/* ---- Proof tile: one honest cohort line (the wizard's S1 / S8 intro) — a note, the number in ink ---- */
.pn-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-4);margin:var(--space-4) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface);border:0}
.pn-proof__big{font:var(--type-num);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-proof p{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-proof p b{font-weight:var(--w-strong);color:var(--ink)}
/* On the wizard steps the proof is the same note (P5 MSL-092: no paper label, no dashed seam, no pink number). */
.pn-wiz .pn-proof.pn-wiz__proof{position:relative;display:grid;width:auto;border:0;border-radius:var(--r-m);background:var(--surface);box-shadow:none}

@media (max-width:700px){
  .pn-nudgecl{padding:var(--panel-pad) var(--panel-pad) var(--space-1)}
}
@media (prefers-reduced-motion:reduce){
  .pn-nudgecl__fold .pc-ico{transition:none}
}
/* ==========================================================================
   Guest pages on the v3 kit (design/v2/cast-mockup.html, docs/design-v3-system.md §4): the used-panties hub, facets,
   /ads/ and Discover for guests. The app frame head (.app .h-m + .sub), the pill row (.tabs-app), v3 listing cards and
   seller tiles, the side column (paper panels, the .pbox prices, the join door = .door--buy, trust rows = .priv on
   paper with the 44 round icon well), the pager (line button + page pills), the editorial text (kicker + prose).
   This file only places components. Tokens only. One breakpoint: <=700 / >=701.
   ========================================================================== */

/* ---------- small labels + breadcrumbs ---------- */
.pn-glabel{display:block;font:var(--type-cap);letter-spacing:0;color:var(--ink-2)}
.pn-gcrumbs{margin:0 0 var(--space-4)}
.pn-gcrumbs .pn-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0;padding:0;list-style:none;font:var(--type-cap);color:var(--ink-2)}
.pn-gcrumbs .pn-crumbs li{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-gcrumbs .pn-crumbs a{color:var(--ink-2);text-decoration:none}
.pn-gcrumbs .pn-crumbs a:hover{color:var(--ink);text-decoration:underline}
.pn-gcrumbs .pn-crumbs [aria-current]{color:var(--ink);white-space:normal;overflow:visible}   /* wave 2: a long current crumb (guide title) wraps instead of an ellipsis (market.css .pn-crumbs) */
.pn-gcrumbs .pn-chev{width:var(--icon-s);height:var(--icon-s)}

/* ---------- hub / Discover head (.app .h-m + .sub), facets (.tabs-app) ----------
   Guest grounding 02.10. (docs/guest-grounding-02-10.md): the head is the page-head band (.pc-band, app.css) over the
   main column of the .pn-split frame: crumbs, the title (h1 + count), the text (lead, strike line, intro, ask), the
   facet pills closing the band. From 1440 title | text side by side, so the band row is used up to the lead card. */
.pn-hubhead{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;gap:0;margin:0;padding-bottom:var(--app-head-pb)}
.pn-hubhead > .pn-gcrumbs{margin:0 0 var(--space-3)}
.pn-hubhead__b{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.pn-hubhead__t{display:grid;gap:var(--space-2);align-content:start;min-width:0}
.pn-hubhead__t .pc-sub{margin:0}
.pn-hubhead__x{display:grid;gap:var(--space-3);align-content:start;min-width:0;margin-top:var(--space-3)}
.pn-hubhead .pc-h-m{margin:0}
.pn-hubhead__x > *{margin:0}
.pn-hubhead__x > .pn-hubask{margin-top:var(--space-1)}
/* Beside a taller lead card (from 1000) the title + text block stands in the middle of the band (crumbs on top, the
   facet pills on the line), never hung from the crumbs over an empty foot. From 1440 title | text side by side, both
   zones on one top line (the h1 beside the strike line / the intro's first line, never sunk to the text's foot). */
@media (min-width:1000px){.pn-hubhead{grid-template-rows:auto 1fr}.pn-hubhead > .pn-hubhead__b{align-self:center}}
@media (min-width:1440px){
  .pn-hubhead__b{grid-template-columns:minmax(0,1fr) min(600px,56%);column-gap:48px;align-items:start}
  .pn-hubhead__x{margin-top:0}
  .pn-hubhead__t:only-child{grid-column:1 / -1}
  /* a one-line lead (/ads/) stays under the title: two zones only for a text block */
  .pn-hubhead__b:has(> .pn-hubhead__x > p.pn-hubintro:only-child){grid-template-columns:minmax(0,1fr)}
  .pn-hubhead__b:has(> .pn-hubhead__x > p.pn-hubintro:only-child) > .pn-hubhead__x{margin-top:12px}
}
.pn-hubintro,.pn-hubhead p.pn-hubintro{max-width:68ch;margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-hubintro p{margin:0}
.pn-hubintro p + p{margin-top:var(--space-3)}
.pn-hubintro a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}   /* design system P9 (ADULT-054): the member link, no pink underline */
.pn-hubintro .pn-draftband{margin:0 0 var(--space-3)}
/* adult post hubs (owner 02.11., docs/seo-hubs-02-11.md §2.3): the line to the clean buyer guide under the intro, and the
   row of all posts / the topics after the text (the hub's own chips) */
.pn-hubguide{max-width:68ch;margin:var(--space-3) 0 0;font:var(--type-strong)}
.pn-hubguide a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}
.pn-hubmore{margin-block:var(--space-6) var(--space-12)}
.pn-hubmore .pn-facets{margin:0}
.pn-hubhead .pn-hubk{margin:0;font:var(--type-title);color:var(--ink)}
.pn-hubask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.pn-hubask ul{margin:0;padding:0;list-style:none}
/* polish r4: the questions read as quoted words (ink-2, dot-separated), never as pills that look like filters */
.pn-hubask__qs{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
.pn-hubask__qs li{font:var(--type-label);color:var(--ink-2)}
/* polish 02.10.: no "·" between the questions: on a wrap it opened the next line on its own; the quote marks part them */
.pn-facets{margin:var(--space-5) 0 0}
.pn-facets .pn-chipn{font-weight:var(--w-regular);color:var(--ink-2)}   /* design system P9 (ADULT-028 / 148): the count in ink-2, no opacity */
.pn-facets > .is-active .pn-chipn,.pn-facets > [aria-current] .pn-chipn{color:inherit}

/* ---------- hub layout = the .pn-split frame (app.css): head band | lead card, main (grid + pager) | side column ----------
   Guest grounding 02.10.: the side column is 300 (360 from 1440, the members' split side); the grid takes its columns
   from the main column's own width (container pn-gmain): 2 / 3 / 4 / 6, so 12 cards before the seller row and 24 per
   page always end on full rows; the members' wide grid gap. */
.pn-hub{--split-side:300px}
@media (min-width:1440px){.pn-hub{--split-side:360px}}
.pn-hub__main,.pn-hubaside{min-width:0}
.pn-hub__main{container:pn-gmain / inline-size}
.pn-hubaside{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-content:start}   /* T40: the panels never outgrow the side column */
/* owner 12.10.: the sellers filter bar: three chips over the grid; on a phone one row that swipes */
.pn-sfilter{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.pn-sfilter__chip{min-height:var(--control-sm);padding:0 var(--space-3);border-color:var(--line);text-decoration:none;white-space:nowrap}
.pn-sfilter__chip .pc-ico{width:var(--icon-s);height:var(--icon-s);margin:0}
/* UX 17.10. #40: one chip style for the three (no gold, no pink fill); the chosen one is tonal — the lighter surface, an ink rim —
   with the pink tick in place of its icon, so it reads at a glance in both themes */
.pn-sfilter__chip[aria-current]{background:var(--surface-2);color:var(--ink);border-color:transparent}
.pn-sfilter__chip[aria-current] .pc-ico{color:var(--pink-glyph)}
@media (max-width:700px){.pn-sfilter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) var(--space-3);padding:0 var(--gutter)}.pn-sfilter::-webkit-scrollbar{display:none}}
.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:701px){.pn-hubgrid,.pn-discgrid{gap:var(--wide-grid-gap)}}
@container pn-gmain (max-width:519px){.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pn-gmain (min-width:840px){.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container pn-gmain (min-width:1220px){.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1000px){.pn-hubaside{position:sticky;top:var(--sticky-top)}}
/* AD2 03.10.: tablets (701–999) stack the side column under the grid: two panels per row instead of four full-width
   cards (1,100 px of stacked boxes on an iPad); an odd last panel takes the row. */
@media (min-width:701px) and (max-width:999px){
  .pn-hub:not(.pn-disc--guest) > .pn-hubaside{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .pn-hub:not(.pn-disc--guest) > .pn-hubaside > :last-child:nth-child(odd){grid-column:1 / -1}
}
/* the seller row after 12 cards (mockup .sec-head + .sellers); T38: the rail is clipped inside the main column and
   fades at the right edge, so a cut avatar reads as "scroll for more" */
.pn-gridbreak{grid-column:1 / -1;min-width:0;padding:var(--space-4) 0 var(--space-2)}
.pn-gridbreak .pn-hpola__rail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}
.pn-hpola__rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:4px;margin-block:-4px}
.pn-hpola__rail::-webkit-scrollbar{display:none}
.pn-hubstories{margin:0 0 var(--app-gap)}
/* side panels: numbers (.tile type on paper), the prices (.pbox rows), the countries */
.pn-hubaside .pn-panel,.pn-hubsel{display:grid;gap:var(--space-3);min-width:0}
.pn-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.pn-minis b{display:block;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-minis span{display:block;margin-top:var(--space-1);font:var(--type-cap);color:var(--ink-2)}
.pn-pricefacts{display:block}
.pn-hubsel .pn-pricefacts{padding-top:var(--space-3)}
/* In the band (from 1000) the lead card is the selection at a glance: the three prices as cells under the three numbers
   (same columns), the source line and the report link under them. AD2 03.10.: tablets too (701–999: the card follows
   the grid at the full column width, where three dashed 600 px rows read as a form). */
@media (min-width:701px){
  .pn-hubsel .pn-pricefacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;align-items:start}
  .pn-hubsel .pn-pricefacts > :not(.pc-pbox__row){grid-column:1 / -1}
  .pn-hubsel .pn-pricefacts > .pc-pbox__t{margin-bottom:var(--space-3)}
  .pn-hubsel .pc-pbox__row{display:grid;align-content:start;gap:var(--space-1);padding:0;border:0;font:var(--type-cap);color:var(--ink-2)}
  .pn-hubsel .pc-pbox__row b{order:-1;display:flex;align-items:flex-end;min-height:var(--space-10);font:var(--type-num);color:var(--ink)}
  .pn-hubsel .pn-pricefacts small{margin-top:var(--space-3)}
}
.pn-pricefacts small{display:block;margin-top:var(--space-3);font:var(--type-cap);color:var(--ink-2)}
/* polish 02.10.: the median is information, not decoration: the darker pink for text (>= 4.5:1 on paper; dark = pink),
   as on the landing's price card and the Drawer Report, never the 2.3:1 pink-press */
.pn-pricefacts .pc-pbox__row.is-med b{color:var(--ink)}   /* design system P9: numbers in ink, never pink (§2.3) */
.pn-hubprice{display:inline-block;margin-top:var(--space-3);font:var(--type-strong);color:var(--ink)}
.pn-countries__h{margin:0;padding-top:var(--space-3)}
.pn-panel > .pn-countries__h:first-child{padding-top:0}
.pn-countries{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-countries li{display:flex;align-items:center;gap:var(--space-2);font:var(--type-strong);color:var(--ink)}
.pn-countries li span{flex:1;min-width:0}
.pn-countries li b{font-weight:var(--w-bold);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-countries .pn-flag{flex:none;width:var(--icon-s);height:var(--icon-s);border-radius:50%}

/* ---------- content doors (polish 02.10., link tier 2): a section's see-all = the line button in the head (desktop),
   the same door full width after the content on phones (the landing's .pn-lp-door--top / --end) ---------- */
.pn-gdoor--end{display:none}
@media (max-width:700px){
  .pc-sechead .pn-gdoor--top{display:none}
  .pn-gdoor--end{display:flex;margin-top:var(--space-4)}
}

/* ---------- the join door (mockup .door--buy) ---------- */
.pn-promo{align-items:stretch}
.pn-promo .pn-promo__label{align-self:flex-start}
.pn-promo h2{margin:0;font:var(--type-title);color:inherit;overflow-wrap:break-word;hyphens:manual}
.pn-promo p{margin:0;font:var(--type-body)}
.pn-promo .pc-btn{margin-top:var(--space-1)}
.pn-promo small{display:block;text-align:left;font:var(--type-meta);color:var(--dk-ink-2)}   /* design system P9 (ADULT-066): every line of the box left-aligned */
.pn-promo small a{color:var(--dk-ink)}   /* UX-071 (23.10.): the "House rules" link took layout.css's --ink (anthracite in the light theme) on the dark door: 1:1, invisible */
.pn-promo__keys{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}   /* join box: Join free | Start selling, the same size (owner 04.11.) */
.pn-promo__keys .pc-btn{min-width:0;white-space:normal}

/* ---------- trust block: ONE layout everywhere (design system P9, ADULT-017 / 018 / 067 / 115, owner: surfaces only) ----------
   The four true statements as one grid that fills its box: a 360 side column holds one column, the profile's main column
   and the full-width strip under the market grid hold four. No hairlines between the points, no second design per page;
   the box around it is the caller's panel (.pn-panel / .pn-dttrustblock = Fläche 1). Icon well = Fläche 2 (+1 step). */
.pn-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-4) var(--space-6);margin:0;padding:0;list-style:none}
.pn-trust__item{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0;padding:0;border:0;box-shadow:none}
.pn-trust .pn-rowicon{flex:none;display:grid;place-items:center;width:var(--avatar-m);height:var(--avatar-m);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink)}
.pn-trust__item b{display:block;font:var(--type-strong);color:var(--ink)}
.pn-trust__item span:not(.pn-rowicon){display:block;margin-top:var(--space-1);font:var(--type-meta);color:var(--ink-2)}
.pn-trust--stack{grid-template-columns:minmax(0,1fr)}

/* ---------- pager (design system P9, ADULT-040 / 041 / 065 / 014): the member "Show more" secondary key, then the page
   links as quiet small keys on the page ground — no capsule fill, never pink: the current page is the segment's active
   tone (Fläche 3 + ink). A wrap is a plain second line. ---------- */
.pn-pager{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-top:var(--space-8)}
.pn-pager__pages{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);max-width:100%;margin:0;padding:0;background:none}
.pn-pager__pages > :is(a,span){display:inline-flex;align-items:center;justify-content:center;min-width:var(--control-sm);min-height:var(--control-sm);padding:0 var(--space-2);border-radius:var(--r-m);font:var(--type-label);color:var(--ink-2);text-decoration:none;background:none}
.pn-pager__pages > a:hover{background:var(--surface-2);color:var(--ink)}
.pn-pager__pages > a[aria-current]{background:var(--surface-3);color:var(--ink)}
.pn-pager__step{gap:var(--space-1);padding-inline:var(--space-3)}
.pn-pager__pages > span.is-gap{padding:0 var(--space-1);color:var(--ink-2)}
@media (max-width:700px){.pn-pager__pages > a.is-far{display:none}.pn-pager__step span{display:none}.pn-pager__pages > :is(a,span){min-width:var(--tap);min-height:var(--tap)}}
.pn-pager small{font:var(--type-label);color:var(--ink-2)}

/* ---------- editorial text (mockup .laundry: the kicker left, the prose column) ---------- */
.pn-seotext{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-12);align-items:start;margin-top:var(--section-gap);padding-top:var(--space-10)}
/* Guest grounding 02.10.: the hub's tail on the paper band (the landing's Laundry Room surface) down to the footer;
   the band's edge replaces the line; the prose keeps its measure on the wide column. */
.pn-seotext.pc-band{margin-top:var(--section-gap);padding:var(--space-12) 0 0}
.pn-seotext.pc-band .pn-prose{max-width:var(--measure-prose)}
.pn-seotext__side{position:sticky;top:var(--sticky-top);display:grid;gap:var(--space-3);justify-items:start}
/* AD2 03.10.: tablets (701–1023): the 280 kicker column left the hub's prose a 380 px strip with an empty half page
   beside it; the kicker sits over the prose, which keeps its measure. */
@media (min-width:701px) and (max-width:1023px){
  .pn-ghub > .pn-seotext{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .pn-ghub > .pn-seotext .pn-seotext__side{position:static}
}
.pn-draftband{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label)}   /* T41 */
.pn-draftband .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--warning)}
.pn-prose{color:var(--ink)}
.pn-prose p{margin:0}
.pn-prose p + p,.pn-prose ul + p,.pn-prose ol + p{margin-top:var(--space-4)}
.pn-prose h2,.pn-prose h3{margin:var(--space-8) 0 var(--space-3);font:var(--type-h1);letter-spacing:0;color:var(--ink);hyphens:manual}   /* design system §13: editorial h2 = h1 step 24, h3 = title 18 */
.pn-prose h3{font:var(--type-title)}
.pn-prose > h2:first-child,.pn-prose > h3:first-child{margin-top:0}
.pn-prose a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}
.pn-prose ul,.pn-prose ol{margin:var(--space-3) 0;padding:0;list-style:none}
.pn-prose li{position:relative;margin-top:var(--space-2);padding-left:var(--space-5)}
.pn-prose ul > li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink-2)}
.pn-prose ol{counter-reset:pn-ol}
.pn-prose ol > li{counter-increment:pn-ol;padding-left:var(--space-8)}
.pn-prose ol > li::before{content:counter(pn-ol);position:absolute;left:0;top:0;font:var(--type-label);color:var(--ink-2)}   /* §2.3: numbers never pink */
.pn-prose strong{font-weight:700}

/* ---------- proof tiles (kept for the wizard and the nudges: the dark .tile) ---------- */
.pn-proof{display:flex;flex-direction:column;gap:var(--space-3)}
.pn-proof__tile{padding:var(--space-4);border:0;border-radius:var(--r-m);background:var(--dk-card);color:var(--dk-ink)}
.pn-proof__tile b{display:block;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--dk-ink)}
.pn-proof__tile span{display:block;margin-top:var(--space-1);font:var(--type-label);color:var(--dk-ink-2)}
.pn-proof__note{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-proof__note .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}

@media (max-width:700px){
  .pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-facets{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:var(--space-1) var(--gutter);margin-block:var(--space-3) calc(-1 * var(--space-1));scrollbar-width:none}
  .pn-facets::-webkit-scrollbar{display:none}
  .pn-facets > *{flex:none}
  .pn-hpola__rail{gap:var(--space-3);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .pn-hubstories .pn-hpola__rail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}   /* UX polish 23.10. UX-066: the hub's seller rail fades at the edge like the grid-break rail (.pn-gridbreak above), so it reads as scrollable */
  .pn-seotext{grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding-top:var(--space-8)}
  .pn-seotext.pc-band{padding-top:var(--space-8)}
  .pn-seotext__side{position:static}
  .pn-prose h2{font:var(--type-title)}
}

/* ---------- guest Discover (owner 30.09.: "zu viel freie Fläche", Premium row out): the head opens the main column,
   the join door stands beside it from the first line, the grid follows a two-sentence lead ---------- */
.pn-dischead__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4)}
.pn-dischead__t .pc-sub{margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-disc--guest .pn-hubintro{max-width:64ch;margin:0;font:var(--type-ui);text-wrap:pretty}
.pn-draftband--sm{display:inline-flex;align-items:center;margin:0 0 var(--space-3);padding:var(--space-1) var(--space-3);border-radius:var(--r-full);font:var(--type-cap)}
.pn-draftband--sm .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-hubintro .pn-draftband--sm{margin:0 0 var(--space-3)}
@media (max-width:700px){.pn-disc--guest .pn-hubintro{font:var(--type-body)}}

/* polish r4: the guest sellers grid ends on a full row (a lone card under full rows read unfinished): a short last row
   is trimmed per column count; the first row always stays. Guest grounding 02.10.: the column count follows the main
   column (container pn-gmain: 2 / 3 / 4 / 6), so the trim does too. */
@container pn-gmain (max-width:519px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child) ~ *{display:none}}
@container pn-gmain (min-width:520px) and (max-width:839px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child) ~ *{display:none}}
@container pn-gmain (min-width:840px) and (max-width:1219px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child) ~ *{display:none}}
@container pn-gmain (min-width:1220px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(6n+1):nth-last-child(-n+5):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(6n+1):nth-last-child(-n+5):not(:first-child) ~ *{display:none}}
/* owner 12.10.: the heading over the sellers of the other language sites */
.pn-discmore{margin:var(--space-8) 0 var(--space-3)}
/* owner 05.10.: a row without a flag ("Other") keeps the flag column, so the labels line up */
.pn-countries .pn-flag--none{display:inline-block;width:var(--icon-s);height:var(--icon-s);border-radius:50%;background:var(--surface-2);flex:none}

/* community mode (owner 25.10., templates/cm_home.php): the six "what happens here" panels in three columns, two on tablets, one on phones */
.pn-cmhome__features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4,16px)}
.pn-cmhome__features .pc-h-s{display:flex;align-items:center;gap:var(--space-2)}
.pn-cmhome__keys{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.pn-cmhome .pn-dischead__t .pc-kicker{display:block;margin:0 0 var(--space-2)}
/* home audit 26.10.: the kicker over the h1 (the head row was a flex line), the content over the full width once the trust
   aside is gone (the join box keeps the band's right column), the steps and the guides without the browser's list look */
.pn-cmhome .pn-dischead__t{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:1000px){.pn-split.pn-cmhome:has(> .pn-split__head){grid-template-areas:"head lead" "main main"}}
.pn-cmhome__steps,.pn-cmhome ul.pn-stack{list-style:none;padding:0;margin:0}
.pn-cmfeed__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.pn-cmfeed__item{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:var(--space-3);align-items:baseline}
.pn-cmfeed__item time{white-space:nowrap}
@media (max-width:1024px){.pn-cmhome__features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pn-cmhome__features{grid-template-columns:minmax(0,1fr)}}
/* art director 27.10. C-048 / C-049: the creators head stacks at every width (the 300 px h1 beside a lede at x 484 read as
   two heads), the side column rides along instead of ending 894 px above the grid */
.pn-dischead__t{display:grid;gap:var(--space-2);justify-items:start}
.pn-dischead__t .pc-sub{max-width:60ch}
@media (min-width:1101px){.pn-split > aside,.pn-split > .pn-split__side{position:sticky;top:calc(var(--sticky-top) + 12px);align-self:start}}
/* UX 200 GST-42 (assets/js/guest.js): the line that names the page in the browser's language, under the header */
.pn-langhint{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;margin:var(--space-2) var(--space-4) 0;padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);border-radius:var(--r-m);background:var(--surface);color:var(--ink);font:var(--type-body)}
.pn-langhint a{font-weight:var(--w-strong)}

/* ---------- adult market head (design system P9, owner 03.11. "dieselben Cards wie innen"): at 1440 the join box stood
   ~100 px taller than the head band (h1, intro, cut chips), so ~100 px of empty band lay between the chips and the grid.
   The box in the head is the compact member panel (panel pad, title step, meta lines), and the chips sit on the band's
   foot right above the grid: the band is as tall as the box, the chips close it. ---------- */
.pn-amk > .pn-split__lead .pn-promo{gap:var(--space-2);padding:var(--panel-pad)}
.pn-amk > .pn-split__lead .pn-promo p{font:var(--type-meta);color:var(--dk-ink-2)}
@media (min-width:1000px){
  .pn-amk > .pn-split__head{display:flex;flex-direction:column;padding-bottom:0}
  .pn-amk > .pn-split__head > .pn-amk__facets{margin-top:auto;padding-top:var(--space-4)}
  .pn-amk > .pn-split__lead{margin-bottom:0}
}

/* ---------- chip row (design system P9, ADULT-026 / 027 / 029 / 138, §7.4 chip): the cut / fabric filters and the link rows
   under hubs and topics as member chips on the page ground — no capsule, Fläche 2, r-m, label type; the chosen filter is
   the soft accent fill with ink (never a pink key). Phones: one row that slides, 44 px targets, bled to both edges. ---------- */
.pn-chiprow{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0;background:none;border-radius:0}
.pn-chiprow > .pn-facet{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label);text-decoration:none;white-space:nowrap;box-shadow:none}
.pn-chiprow > .pn-facet:hover{background:var(--surface-3)}
.pn-chiprow > .pn-facet:is(.is-active,[aria-current]){background:var(--accent-soft);color:var(--ink)}
@media (max-width:700px){
  .pn-chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .pn-chiprow > .pn-facet{flex:none;min-height:var(--tap)}
  .pn-amk .pn-amk__facets.pn-chiprow{padding-inline:0}   /* the plastik layer pins this row's margin to 0 (no bleed): no inner gutter either */
}
/* hub push (owner 05.11., lib/hub_push.php, assets/js/hub_push.js): the doll that pushes the first row into place; drawn only
   with the switch, placed by the script (left / top / size), moved by transform + opacity only, never under the finger */
.pn-hpush{position:absolute;z-index:4;pointer-events:none}
.pn-hpush > img{position:absolute;bottom:0;height:100%;max-width:none;filter:var(--sh-cut);transform-origin:50% 100%}
.pn-hpush__p{left:0;width:100%}
.pn-hpush > i{position:absolute;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,var(--ground-shadow),transparent)}
@media (prefers-reduced-motion:reduce){.pn-hpush{display:none !important}}
/* ==========================================================================
   seo D: guest ad page, guest profile, members-only page (docs/spec-pnew-guest-seo.md §9.4–§9.7,
   docs/design-v2-guest-seo.md §3, mockup design/v2/guest-seo.html). Tokens only. One breakpoint: ≤700 / ≥701.
   ========================================================================== */

/* ---- masked contact chip: a 26px sunken pill with a 13px lock (server-side masking, §3.4) ---- */
.pn-masked{display:inline-flex;align-items:center;gap:var(--space-1);height:24px;padding:0 var(--space-2);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2);font:var(--type-label);vertical-align:2px;white-space:nowrap}
.pn-masked .pc-ico{width:var(--icon-s);height:var(--icon-s)}

/* ---- About the seller (.pn-sellertrust): avatar row + one quality review in the bubble shape 22 22 22 7 ---- */
.pn-sellertrust{display:grid;gap:var(--space-3);box-shadow:none;background:var(--surface)}
.pn-sellertrust__quote{padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}   /* design system P9: the review card as a Note inside the panel, no bubble shape */
.pn-sellertrust__quote blockquote{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink)}
.pn-sellertrust__quote small{display:block;margin-top:var(--space-2);font:var(--type-meta);color:var(--ink-2)}

/* ---- review rows (profile) and quote card (landing, C may reuse) ---- */
.pn-review h3{margin:var(--space-1) 0 0;font:var(--type-strong);letter-spacing:0;color:var(--ink)}
.pn-review blockquote{margin:var(--space-1) 0 0;font:var(--type-body);color:var(--ink);overflow-wrap:anywhere}
.pn-quote{margin:0;padding:var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-quote blockquote{margin:var(--space-2) 0 0;font:var(--type-body)}
.pn-quote figcaption{margin-top:var(--space-2);font:var(--type-meta);color:var(--ink-2)}

/* ---- guest storefront (.pn-store--guest), art-director round: crumbs above the head, photos teaser + trust in the main
   column, the join box + her details in the sticky side card ---- */
.pn-store--guest .pn-gcrumbs{margin:0 0 var(--space-3)}
/* polish 02.10.: on the app shell (.pn-gapp) the crumb row is the page-head band, the guest ad's geometry; on phones the
   row is hidden and the head meets the chrome (the shell's --app-top, not the old fixed 28) */
.pn-store--guest.pn-gapp > .pn-dttop.pc-band{margin-bottom:var(--app-gap);padding:var(--space-2) 0 var(--space-3);min-height:0;align-items:center}   /* owner 05.10.: a compact bar, crumbs and share button on one axis */
.pn-store--guest.pn-gapp > .pn-dttop.pc-band .pn-gcrumbs{margin:0}
@media (max-width:700px){.pn-store--guest.pn-gapp > .pn-dttop + .pn-phead > .pn-dthead{margin-top:calc(-1 * var(--app-top))}}

/* polish r4: the side column rides along (the /sellers/ .pn-hubaside pattern) instead of leaving 600–1,200 px of empty
   column. guest.js sets --stick-h (the aside's height): an aside taller than the viewport sticks with its foot in view
   instead of hiding it under the fold. The trust row in the main column goes 2 × 2 (it wrapped to four lines in four). */
@media (min-width:1024px){
  .pn-store--guest .pn-dtprof__side,.pn-dtad--guest .pn-dtad__side{position:sticky;top:min(var(--sticky-top),calc(100vh - var(--stick-h,0px) - var(--space-4)));align-self:start}
}
/* polish r4: the rating pill in the head takes the kit focus ring, not the browser's 1 px blue */
.pn-store--guest .pn-dtrate--pill:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

@media (max-width:700px){
  .pn-store--guest .pn-gcrumbs{display:none}
  /* §9.5: on phones the sticky CTA replaces the tabbar for guests (always visible, like the ad buy bar). It is
     position:sticky (in flow), so the page needs no reserve under it: it docks flush on the footer (polish r1). */
  body:has(.pn-store--guest) .pn-tabbar{display:none}
  body:has(.pn-store--guest) .pn-main{padding-bottom:0}
}

/* polish r3 / 02.10.: the guest profile's section pills wrapped instead of swiping (owner rule: pills never clipped);
   AD3 03.10.: that rule now holds for every profile view and lives with the head card (detail.css, phones). */

/* polish r4: the guest ad's two card rows ("more from her", "similar") end on full rows: fixed column counts per
   width (the kit's auto-fill gave 5 + 3 and 4 + 1) and a short last row trimmed; the first row always stays. */
@media (max-width:700px){.pn-dtad--guest .pn-grid > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child) ~ *{display:none}}
@media (min-width:701px) and (max-width:959px){.pn-dtad--guest .pn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pn-dtad--guest .pn-grid > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child) ~ *{display:none}}
@media (min-width:960px) and (max-width:1099px){.pn-dtad--guest .pn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pn-dtad--guest .pn-grid > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child) ~ *{display:none}}
@media (min-width:1101px){.pn-dtad--guest .pn-grid > :nth-child(5n+1):nth-last-child(-n+4):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(5n+1):nth-last-child(-n+4):not(:first-child) ~ *{display:none}}

/* Design system P9 (03.11.): the trust points under her photos = the ONE trust block of every guest page (guest.css
   .pn-trust: a grid that fills its box, no hairlines between the points, owner 02.11. "no edges inside") in a member panel.
   The creator line under the page starts at the content's left edge. */
.pn-store--guest .pn-dttrustblock{padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-store--guest + .pn-dtsell,.pn-store--guest .pn-dtsell{justify-content:flex-start;padding-top:0;border-top:0;font:var(--type-body)}

/* Her profile for guests (design system P9). ADULT-119: the cover is the plain tonal band (owner 25.10.: never the blur of
   her picture; member_guest.php passes kind plain), no stripes, no tub.
   Owner 04.11. ("außen das Profil muss GENAU aussehen wie innen, die Tabber z.B."): the guest profile is the members' profile
   (templates/member_guest.php = member.php's markup) — the section tabs keep the members' pills (no guest underline any more),
   her cards keep the members' card radius (not the guest grids' --r-card-x). */
.pn-store--guest .pn-dtcover--plain{background:var(--surface-2)}
.pn-store--guest .pn-dtcover--plain::after,.pn-store--guest .pn-dtcover--plain .pn-dtcover__tag{display:none}
.pn-store--guest .pn-dtcards > .pc-card.pn-prodcard{border-radius:var(--r-pcard)}
.pn-store--guest .pn-dtblock > .pc-sechead:not(.pc-sechead--sm) .pc-h-m{line-height:var(--lh-head)}   /* the members' section head (body:not(.pc-guest) … .pc-sechead .pc-h-m): 18 on --lh-head */
/* ==========================================================================
   Guest landing + /sell + /buy + 404 art = design/v2/cast-mockup.html, ported 1:1 (owner 30.09.: "so will ich das haben").
   This file only PLACES the v3 kit (components.css): section backgrounds, paddings, grids and the cast / object
   positions, every value read off the mockup's <style> (desktop l.95-300, phone @container 700 l.320-405).
   The mockup is one 1440 frame and one 390 frame; 701-1100 (not in the mockup) keeps the desktop parts and gives the
   art column less room. Tokens only. Rotations only where the mockup rotates (stamp, sticker, notes, receipt, care
   label, hand notes, the tag objects, the lipstick, the envelope).
   Cast (cast-and-props.md §2): ROXY hero, JESS buy, MARA sell + /sell head, VIVIENNE Laundry Room + /sell worth,
   JESS J2 /buy intro, ROXY R2 404. Never in grids.
   ========================================================================== */

/* ---------- the landing runs edge to edge (its sections carry the column: .pc-wrap = mockup .wrap) ---------- */
body:has(.pn-lb) .pn-main,body:has(.pn-lpm) .pn-main{max-width:none;padding:0}
.pn-lb,.pn-lpm{position:relative}
.pn-lb h2,.pn-lb h3,.pn-lpm h2,.pn-lpm h3{text-wrap:balance}
.pn-lb img,.pn-lpm img{display:block}
.pn-lp-ctas{display:flex;flex-wrap:wrap;gap:14px}
.pn-lp-cta{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:28px;margin-top:44px}
/* the CTA row (art-director round 30.09.): the button | a stack of the fine print alone and a link row (ui_more), no dots */
.pn-lp-cta__stack{min-width:0}
.pn-lp-cta__stack > p:first-child{margin:0;max-width:440px;font:400 13px/1.5 var(--font-sans)}
.pn-lp-cta__links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin:10px 0 0}
.pn-lp-cta__have{font:400 13px/1.5 var(--font-sans)}
.pn-lp-cta__have .pc-more{font-size:13px}
/* content doors (link tier 2): the section-head line button on desktop, the same door after the content on phones */
.pn-lp-door--end{display:none}
/* "Browse by fabric and cut": the open cat-10 facet hubs as chips with their counts, the pink chip to the hub last */
.pn-lp-browse{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px}
.pn-lp-browse__h{font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pn-lp-browse__row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pn-lp-browse__chip{min-height:40px;padding:10px 16px;font:600 15px/1 var(--font-sans)}
.pn-lp-browse__n{margin-left:8px;font:700 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- 1 hero (.hero) ---------- */
.pn-lp-hero{background:var(--bg);color:var(--ink);padding:56px 0 0;overflow:hidden}
.pn-lp-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 700px;gap:16px;align-items:end}   /* owner 05.10.: the figure fills more of the hero */
.pn-lp-hero__copy{padding-bottom:72px;min-width:0}
.pn-lp-hero__chip{cursor:pointer;text-decoration:none}
.pn-lp-hero__chip--trust{cursor:default;gap:8px}   /* alt-look hero (owner 12.10. evening): the promise instead of the count, a lock for the live dot */
.pn-lp-hero__chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-lp-hero__h{margin:18px 0}
.pn-lp-hero__sub{margin:0 0 12px;max-width:520px;font-size:18px;line-height:1.45;color:var(--ink-2)}
.pn-lp-hero__lede{margin:0 0 30px;max-width:520px;font-size:16px;line-height:1.5;color:var(--ink-2)}   /* owner 05.10.: the second hero line */
.pn-lp-hero__count{margin:22px 0 0;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-lp-hero__art{position:relative;height:740px;margin:0}
.pn-lp-b1{position:absolute;left:50%;bottom:0;width:860px;transform:translateX(-50%)}
.pn-lp-b1 img{width:100%;height:auto;filter:drop-shadow(0 22px 28px var(--ground-shadow)) drop-shadow(0 2px 2px var(--ground-shadow))}   /* owner 05.10.: the cut-out sits on a soft ground shadow instead of looking pasted on */
.pn-lp-b1::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:46px;border-radius:50%;background:radial-gradient(closest-side,var(--ground-shadow),transparent);opacity:.9;pointer-events:none}
/* T50: the hero price tag = mockup .ptag on the blank paper tag (wide: 58.5 / 75 %, -2°; portrait: 35.8 / 69 %, 12°). */
.pn-lp-b1{container-type:inline-size}
.pn-lp-b1 picture{display:block}
.pc-ptag.pn-lp-b1__tag{left:58.5%;top:75%;--r:-2deg;font-size:13px}
.pn-lp-b1__tag small{font-size:13px}
/* hero r5 (owner 11.10.): the lying creator shot. Her blank tag is small, so the price alone sits on it; size and stamp
   for the desktop row: after the 1101 / 1440 blocks below */
.pn-lp-b1--r5 .pc-ptag.pn-lp-b1__tag{left:11.9%;top:55%;--r:9deg;font-size:13px}
.pn-lp-b1--r5 .pn-lp-b1__tag small{display:none}
.pn-lp-hero__stamp{position:absolute;left:0;top:120px}
.pn-lp-hero__sticker{position:absolute;left:230px;top:44px}
.pn-lp-hero__illu{position:absolute;right:12px;bottom:12px;z-index:3;color:var(--ink)}
/* every cast label sits at its figure's foot, bottom right, on the veil chip (one rule for hero, buy, sell) */
.pn-lp-hero__illu,.pn-lp-buy__illu,.pn-lp-sell__illu{padding:3px 7px;border-radius:8px;background:var(--bg-veil);opacity:1;white-space:nowrap}
.pn-lp-hero__illu > *,.pn-lp-buy__illu,.pn-lp-sell__illu{line-height:1.2}

/* ---------- 2 + 3 real listings, real sellers (.real-sec) ---------- */
.pn-lp-real{background:var(--bg);color:var(--ink);padding:72px 0 64px;border-top:1px solid var(--line)}
.pn-lp-real--next{padding-top:0;border-top:0}
.pn-lp-sellrail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:4px;margin-block:-4px}
.pn-lp-sellrail::-webkit-scrollbar{display:none}
.pn-lp-sellrail > .pc-scard{flex:none}
/* from 1101: exactly six v3 seller cards (6 x 176 = 1056 on the 1168 column), spread, nothing cut; the door takes the rest */
@media (min-width:1101px){
  .pn-lp-sellrail{overflow:visible;justify-content:space-between;gap:0}
  .pn-lp-sellrail:not(.pn-lp-sellgrid) > :nth-child(n+7){display:none}
}
/* below: a rail that runs to the screen edge, so the cut reads as "swipe", never as a layout accident */
@media (max-width:1100px){
  .pn-lp-sellrail{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory}
  .pn-lp-sellrail > .pc-scard{scroll-snap-align:start}
}

/* ---------- 4 buyer block (.buy, anthracite) ---------- */
.pn-lp-buy{position:relative;overflow:hidden;background:var(--dk-bg);color:var(--dk-ink);padding:96px 0 88px}
.pn-lp-buy__top{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:40px;align-items:end}
.pn-lp-buy__main{min-width:0}
.pn-lp-buy .pc-kicker{color:var(--pink)}
.pn-lp-buy__h{margin:18px 0 20px;color:var(--white)}
.pn-lp-buy__lede{margin:0 0 16px;max-width:600px;font-size:18px;color:var(--dk-ink-2)}
/* owner 05.10.: the three questions and the Caveat answer "Just ask her." before the two figures */
.pn-lp-buy__ask{margin:0;max-width:600px;font-size:16px;line-height:1.5;color:var(--dk-ink)}
.pn-lp-buy__note{margin:8px 0 30px}
/* the "how" heads (buying: on anthracite; selling: on pink) over the four care steps */
.pn-lp-how__h{margin:0 0 24px}
.pn-lp-buy .pn-lp-how__h{color:var(--white)}
.pn-lp-sell .pn-lp-how__h{color:var(--anthracite)}
.pn-lp-sellhow{margin-top:56px}
.pn-lp-buy__art{position:relative;height:500px}
.pn-lp-buy__jess{position:absolute;right:0;bottom:-120px;height:560px;width:auto;filter:var(--rim-pink)}
.pn-lp-buy__label{position:absolute;left:0;bottom:40px;z-index:2}
.pn-lp-buy__illu{position:absolute;right:12px;bottom:12px;z-index:3;color:var(--dk-ink);background:var(--dk-veil)}
.pn-lp-how{position:relative;z-index:2;margin-top:72px}
.pn-lp-how__note{margin:0 0 20px;transform:rotate(-2deg);transform-origin:left}
.pn-lp-step{position:relative}
.pn-lp-step__obj{right:-14px;top:-58px;width:118px}
.pn-lp-step__obj--env{right:-10px;top:-50px;width:124px;transform:rotate(8deg)}
.pn-lp-buy .pn-lp-cta__stack > p:first-child,.pn-lp-buy .pn-lp-cta__have{color:var(--dk-ink-2)}
@media (min-width:1101px){.pn-lp-step:nth-child(2){padding-right:118px}}

/* ---------- 5 receipt (.proof) ---------- */
.pn-lp-proof{background:var(--bg);color:var(--ink);padding:88px 0;overflow:hidden}
.pn-lp-proof__wrap{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:60px;align-items:start}
.pn-lp-proof__copy{min-width:0;padding-top:40px}
.pn-lp-proof__h{margin:0}
.pn-lp-proof__p{margin:20px 0 0;max-width:460px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.pn-lp-proof__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:22px 0 0}
.pn-lp-proof__h em{font-style:normal;color:inherit;background:linear-gradient(transparent 58%,var(--pink) 58% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn-lp-proof__h em{padding:0 .06em}
/* dark: light type on the pink marker reads like a strike; the marker becomes the full .tape band (anthracite type) */
[data-theme="dark"] .pn-lp-proof__h em{background:var(--pink);color:var(--anthracite)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lp-proof__h em{background:var(--pink);color:var(--anthracite)}}
.pn-lp-receipt__obj{right:-64px;bottom:-40px;width:120px;transform:rotate(-24deg);z-index:2}
.pn-lp-receipt q{quotes:"\201C" "\201D"}
.pn-lp-receipt .pn-quotes{display:block;list-style:none;margin:14px 0 0;padding:0}
/* a seller name inside a quote: the receipt's own type, a dotted ink line, the pink line on hover (one link per quote) */
.pn-lp-receipt__name{color:var(--anthracite);font:inherit;font-weight:700;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
.pn-lp-receipt__name:hover{text-decoration:underline solid var(--pink);text-decoration-thickness:2px}
.pn-lp-receipt__name::before{content:"@"}

/* ---------- 6 seller block (.sell, pink) ---------- */
.pn-lp-sell{position:relative;overflow:hidden;background:var(--pink);color:var(--anthracite);padding:96px 0 88px}
.pn-lp-sell__top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head art" "lede art" "proof art";grid-template-rows:1fr auto auto;column-gap:40px;align-items:end}
.pn-lp-sell__head{grid-area:head;min-width:0;position:relative}   /* T48: the sticker anchors to the head (mockup .sell__head), not the grid */
.pn-lp-sell__lede{grid-area:lede;margin:0 0 18px;max-width:560px;font-size:18px}
.pn-lp-sell__lede > p{margin:0 0 10px}   /* owner 05.10.: three lede lines */
.pn-lp-sell__lede > p:last-child{margin-bottom:0}
.pn-lp-sell__art{grid-area:art;position:relative;height:520px}
.pn-lp-sell__proof{grid-area:proof;margin:0}
.pn-lp-sell__h{margin:18px 0 22px;color:var(--anthracite)}
.pn-lp-sell__sticker{position:absolute;left:390px;top:-14px}   /* on the kicker line, now anchored to the head block */
.pn-lp-sell .pc-fix{margin-right:.3em}   /* T49: the rotated Caveat fix never runs into the next word (fr "portées ! culottes") */
.pn-lp-sell__mara{position:absolute;right:40px;bottom:-150px;height:620px;width:auto}
.pn-lp-sell__illu{position:absolute;right:12px;bottom:12px;z-index:3;color:var(--anthracite);background:var(--pink-veil)}
.pn-lp-sell .pc-chip--live{border-color:transparent}
.pn-lp-notes{position:relative;z-index:2;margin-top:56px}
.pn-lp-boxes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}   /* polish r1: the same thirds as .pc-notes above, gutters line up */
.pn-lp-paid{display:flex;flex-direction:column}
.pn-lp-paid .pn-lp-paid__big{display:flex;align-items:baseline;gap:10px;margin:0;font:700 30px/1 var(--font-display);color:var(--anthracite)}
.pn-lp-paid .pn-lp-paid__big span{font-size:18px}
.pn-lp-paid .pn-lp-paid__big .pn-lp-paid__num{font-size:inherit;white-space:nowrap}
.pn-lp-paid p{font-size:15px;margin:10px 0 0}
.pn-lp-paid > p:last-child{margin-top:auto;padding-top:10px}
/* owner 05.10.: every box is one block of the copy — a lede under its head, its own CTA at the foot */
.pn-lp-box__p{margin:0 0 16px;font-size:15px;line-height:1.5}
.pc-box--dk .pn-lp-box__p{color:var(--dk-ink-2)}
/* REDAKTION (no calculator): two boxes share the row, no empty pink third column */
@media (min-width:701px){.pn-lp-boxes:not(:has(.pn-lp-calc)){grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-lp-calc .pc-box__h{padding-right:64px}
.pn-lp-calc small{display:block;color:var(--dk-ink-2);font-size:12px}
.pn-lp-calc__stack{right:20px;bottom:44px;width:112px}
/* T47: the fine print keeps clear of the panty stack (it sat on "income.") */
@media (min-width:701px){.pn-lp-calc > small:last-child{position:relative;z-index:1;padding-right:130px}}
/* art-director pass, night of 13.10.: the calculator is a cream box now, and these two rules still painted for the dark one —
   the median stood white on cream, unreadable in both themes. Cream: the box's own ink; the dark box keeps the light one. */
.pn-lp-calc__eq{margin:0;color:var(--muted-lt)}
.pn-lp-calc__eq b{color:var(--anthracite)}
.pc-box--dk .pn-lp-calc__eq{color:var(--dk-ink-2)}
.pc-box--dk .pn-lp-calc__eq b{color:var(--white)}
.pn-lp-calc .pn-lp-calc__res{margin:6px 0;font:700 30px/1 var(--font-display);letter-spacing:var(--tr-num);color:var(--pink)}   /* beats .pc-box--dk p */
.pn-lp-calc .pc-stepper button{color:var(--dk-ink)}
.pn-lp-calc .pc-stepper button:hover{border-color:transparent}
.pn-lp-calc .pc-stepper button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- 7 the Laundry Room (.laundry) ---------- */
.pn-lp-laundry.pn-seotext{display:block;margin:0;padding:0 0 96px;gap:0;background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
.pn-lp-laundry--tail.pn-seotext{padding-top:0;border-top:0}
.pn-lp-mast .pc-kicker{color:var(--ink)}
.pn-lp-mast__mini,.pn-lp-mast__illu{display:none}
.pn-lp-lgrid{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:48px;margin-top:40px}
.pn-lp-laundry--tail .pn-lp-lgrid{margin-top:0}
.pn-lp-lgrid__side,.pn-lp-lgrid__main{min-width:0}
.pn-lp-lgrid__side .pn-draftband{margin:0 0 16px}
.pn-lp-host{position:relative;height:360px;margin:0 0 22px}
.pn-lp-host::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:240px;border-radius:999px 999px 16px 16px;background:var(--sunken)}
.pn-lp-host__img{position:absolute;left:50%;bottom:0;height:350px;width:auto;transform:translateX(-50%)}
.pn-lp-host__illu{position:absolute;left:0;bottom:-18px;color:var(--ink)}
.pn-lp-laundry .pc-toc a{color:var(--ink)}
/* the TOC = an index card under the text and the price box (grid row 2, columns 2-3), two columns of numbered rows;
   the side column (VIVIENNE) spans both rows. On phones: a closed fold before the article (the summary chip). */
.pn-lp-lgrid__side{grid-row:1 / span 2}
.pn-lp-lgrid__toc{grid-column:2 / -1;grid-row:2;min-width:0}
@media (min-width:1101px){.pn-lp-laundry:not(.pn-lp-laundry--tail) .pn-lp-lgrid:not(:has(.pn-lp-lgrid__facts)) .pn-lp-lgrid__main{grid-column:2 / -1}}   /* pt: no price box, no empty column */
@media (min-width:701px){
  .pn-lp-lgrid__toc .pc-toc{margin:0;padding:22px 24px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  .pn-lp-lgrid__toc .pc-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .pn-lp-lgrid__toc .pc-toc li:nth-last-child(-n+2):nth-child(odd),.pn-lp-lgrid__toc .pc-toc li:last-child{border-bottom:0}
}
.pn-lp-tocfold > summary{list-style:none}
.pn-lp-tocfold > summary::-webkit-details-marker{display:none}
.pn-lp-tocfold__n{font:700 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-lp-tocfold__sum .pc-ico{transition:transform var(--dur-fast)}
.pn-lp-tocfold[open] .pn-lp-tocfold__sum .pc-ico{transform:rotate(180deg)}
@media (min-width:701px){.pn-lp-tocfold > summary{display:none}}
/* the head breaks between words only (pt CONSTRANGEDORA, fr PORTÉES): no letter alone on a line */
.pn-lp-laundry__h{margin:0 0 20px;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.pn-lp-mast--tail{margin-bottom:40px}
.pn-lp-laundry .pc-prose{color:var(--ink)}
.pn-lp-laundry .pc-prose > :first-child{margin-top:0}
.pn-lp-laundry .pc-prose h2,.pn-lp-laundry .pc-prose h3{margin:30px 0 8px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink)}
.pn-lp-laundry .pc-prose a{color:var(--ink)}
.pn-lp-laundry .pc-prose p.pn-drop::first-letter{float:left;margin:8px 10px 0 0;font:700 30px/1 var(--font-display);color:var(--pink-glyph)}
.pn-laundry__rest > summary{list-style:none}
.pn-laundry__rest > summary::-webkit-details-marker{display:none}
.pn-laundry__rest[open] > summary{display:none}
.pn-lp-more{margin-top:10px}
/* polish r4: "Keep reading" is the kit --sm button as it is (41 px), the same size and type as the report door beside it */
.pn-lp-pbox{margin-top:40px}
.pn-lp-laundry--tail.pn-seotext{padding-top:64px}
/* the report door on one line in the narrow price box (a two-line pill read unfinished): tighter tracking, same type */
.pn-lp-pbox .pc-pbox__foot .pn-lp-pbox__go{display:flex;align-items:center;justify-content:center;min-height:0;padding-block:12px;line-height:1;white-space:nowrap;letter-spacing:.05em;padding-inline:12px}   /* polish r4: the kit --sm height (41), like "Keep reading" */
.pn-lp-pbox__obj{left:50%;top:-78px;width:92px;margin-left:-46px;transform:rotate(-4deg)}
/* owner 05.10. BUYING GUIDE: two columns (VIVIENNE | the guide), the lede, the "Learn about" topic chips, the closing
   line and the ink door under the prose */
.pn-lp-lgrid--guide{grid-template-columns:280px minmax(0,1fr)}
.pn-lp-lgrid--guide .pn-lp-lgrid__side{grid-row:auto}
.pn-lp-laundry__lede{margin:0 0 20px;max-width:640px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.pn-lp-topics{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 28px}
.pn-lp-topics__h{font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pn-lp-topics__row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pn-lp-topics__chip{cursor:default;background:var(--surface);color:var(--ink)}
.pn-lp-laundry__close{margin:28px 0 0;max-width:640px;font:600 16px/1.5 var(--font-sans);color:var(--ink)}
.pn-lp-laundry__cta{margin:18px 0 0}

/* ---------- 7c PRICE REPORT (owner 05.10.): anthracite, the copy left, the price box right ---------- */
.pn-lp-report{position:relative;background:var(--lp-grain) 0 0/160px 160px,var(--lp-buy-bg);color:var(--dk-ink);padding:var(--lp-pad) 0}
.pn-lp-report__wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:center}
.pn-lp-report__copy{min-width:0}
.pn-lp-report .pc-kicker{color:var(--pink)}
.pn-lp-report__h{margin:18px 0 20px;color:var(--white)}
.pn-lp-report__p{margin:0;max-width:560px;font-size:18px;line-height:1.5;color:var(--dk-ink-2)}
.pn-lp-report__note{margin:18px 0 0}
.pn-lp-report__cta{margin:26px 0 0}
.pn-lp-report .pn-lp-pbox{margin-top:48px}
.pn-lp-report .pc-pbox{box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}

/* ---------- 8 join (.join + .doors) ---------- */
.pn-lp-join{position:relative;background:var(--bg);color:var(--ink);padding:110px 0 96px;text-align:center}
.pn-lp-join__head{max-width:720px;margin:0 0 28px}
.pn-lp-join__p{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.pn-lp-join__h{margin:10px 0 30px}
.pn-lp-doors{max-width:860px;margin:0 auto;text-align:left}
.pn-lp-doors .pc-door p{margin:0 0 10px;font-size:15px;line-height:1.45;min-height:2.9em}
.pn-lp-doors .pc-door--sell p{color:var(--anthracite);opacity:.82}

/* ---------- /sell (.sp-hero, .worth, .ship, .faq) + /buy intro, one template (money.php) ---------- */
.pn-lpm-hero{background:var(--bg);color:var(--ink);padding:64px 0 0;overflow:hidden}
.pn-lpm-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:30px;align-items:end}
.pn-lpm-hero__copy{padding-bottom:72px;min-width:0}
.pn-lpm-hero__copy .pn-gcrumbs,.pn-lpm-hero__copy .pn-crumbs{margin:0 0 18px}
.pn-lpm-hero__h{margin:18px 0 22px}
.pn-lpm-hero__k{margin:0 0 18px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink)}
.pn-lpm-hero__lede{margin:0 0 28px;max-width:560px;font-size:18px;line-height:1.45;color:var(--ink-2)}
.pn-lpm-art{position:relative;height:560px;margin:0}
.pn-lpm-art .pc-arch{width:400px;height:430px;border-radius:999px 999px 0 0;background:var(--sunken)}
.pn-lpm-art .pc-arch::after{border-radius:999px 999px 0 0}
.pn-lpm-art__fig{position:absolute;left:50%;bottom:-30px;height:560px;width:auto;transform:translateX(-50%)}
.pn-lpm-art__obj{left:10px;bottom:70px;width:150px;transform:rotate(-10deg);z-index:2}
/* T22: the mandatory label sits on the veil (as on the phone hero), fully opaque, so the robe never shows through it. */
.pn-lpm-art__illu{position:absolute;right:0;bottom:12px;z-index:4;padding:3px 6px;border-radius:8px;background:var(--bg-veil);color:var(--ink-2);opacity:1}
.pn-lpm-art--buy .pn-lpm-art__fig{bottom:0;height:460px}
.pn-lpm-art--buy .pn-lpm-art__obj{width:96px;left:auto;right:10px;bottom:40px;transform:rotate(-24deg)}
/* polish r1: the localized money-page titles run 5-6 lines at 92 px (es, fr) and pushed the first CTA under the fold:
   the money h1 is capped (the landing hero keeps 92), the copy column is wider, and the copy starts at the top of the
   hero (crumbs at the same height as on the other guest pages) while the art keeps standing on the hero's floor */
.pn-lpm-hero:not(.pn-lpm-hero--report) .pn-lpm-hero__h.pc-h-xl{font-size:var(--fs-l)}   /* visual audit VG-010: one title scale (was up to 72 px) */
@media (max-width:700px){.pn-lpm-hero:not(.pn-lpm-hero--report) .pn-lpm-hero__h.pc-h-xl{font-size:var(--fs-l)}}
@media (min-width:701px){.pn-lpm-hero__copy{align-self:start}.pn-lpm-art{align-self:end}}
@media (min-width:1101px){
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr) 440px}
  /* the Drawer Report's copy is short (title + one line): a lower art so no empty band opens under the copy */
  .pn-lpm-art--report{height:480px}
  .pn-lpm-art--report .pn-lpm-art__fig{height:480px}
  .pn-lpm-art--report .pc-arch{width:360px;height:380px;border-radius:999px 999px 0 0}
  .pn-lpm-art--report .pc-arch::after{border-radius:999px 999px 0 0}
}
.pn-lpm-worth{background:var(--dk-bg);color:var(--dk-ink);padding:88px 0 0;overflow:hidden;scroll-margin-top:var(--sticky-top)}
.pn-lpm-worth__wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:end}
.pn-lpm-worth__copy{min-width:0;padding-bottom:40px}
.pn-lpm-worth .pc-kicker{color:var(--pink)}
.pn-lpm-worth__h{margin:16px 0 18px;color:var(--white)}
.pn-lpm-worth__copy > p{margin:0 0 12px;max-width:580px;font-size:16px;color:var(--dk-ink-2)}
.pn-lpm-worth__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px}   /* AD1 03.10.: tier-3 links (ui_more dk) */
.pn-lpm-worth .pc-hand{margin:0;font-size:24px}
.pn-lpm-worth__art{position:relative;height:470px}
.pn-lpm-worth__art img{position:absolute;right:10px;bottom:-4px;height:460px;width:auto;filter:var(--rim-pink)}
.pn-lpm-worth__art .pc-illu{position:absolute;right:0;top:0;color:var(--dk-ink)}
/* UX 17.10. #39: the price tags of lib/landing.php pnew_lp_tags (cream / anthracite in both themes) */
.pn-ptags{display:block;width:100%;height:auto;overflow:visible}
.pn-ptags__tag{fill:var(--cream);stroke:var(--anthracite);stroke-width:1.5}
.pn-ptags__tag.is-pink{fill:var(--pink)}
.pn-ptags__dash{fill:none;stroke:var(--dash);stroke-width:1.2;stroke-dasharray:3 3}
.pn-ptags__ring{fill:none;stroke:var(--pink);stroke-width:3}
.pn-ptags__tag.is-pink + .pn-ptags__dash + .pn-ptags__ring{stroke:var(--cream)}
.pn-ptags__str{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round}
.pn-ptags__nail{fill:var(--anthracite);stroke:var(--pink);stroke-width:2}
.pn-ptags__p{font-family:var(--font-display);font-weight:700;fill:var(--anthracite);font-variant-numeric:tabular-nums}
.pn-ptags__s{font:700 12px/1 var(--font-sans);fill:var(--anthracite)}
.pn-lpm-worth__art--tags{display:flex;align-items:center;justify-content:center;height:auto;min-height:0;padding:20px 0}
.pn-lpm-worth__art--tags .pn-ptags{max-width:300px}
.pn-lpm-art--tags{display:flex;align-items:flex-end;justify-content:center}
.pn-lpm-art--tags .pn-ptags{position:relative;z-index:1;max-width:380px;margin-bottom:40px}
.pn-lpm-ship{background:var(--bg);color:var(--ink);padding:88px 0;overflow:hidden}
.pn-lpm-ship .pc-steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pn-lpm-ship .pc-steps-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-lpm-ship__h{margin:0 0 30px}
.pn-lpm-ship .pc-steps-grid{margin-top:58px}
.pn-lpm-ship .pc-care{padding-right:96px}
.pn-lpm-ship .pc-obj{top:-44px;right:-14px;width:100px}
.pn-lpm-ship .pn-lpm-ship__env{transform:rotate(8deg)}
.pn-lpm-ship .pn-lpm-ship__stack{width:92px}
/* the guide body (the SEO sections: every question answered first) on the Laundry Room grid */
.pn-lpm-guide{background:var(--surface);color:var(--ink);padding:72px 0 88px;border-top:1px solid var(--line)}
.pn-lpm-guide__grid{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:48px}
.pn-lpm-guide__grid > *{min-width:0}
.pn-lpm-guide .pc-toc{margin-top:0;align-self:start}
.pn-lpm-guide :is(.pc-toc,.pc-pbox,.pc-faq details){background:var(--sunken)}   /* no borders 18.10.: the section is the panel tone, so its boxes are wells (they had only a line to stand out) */
.pn-lpm-guide .pc-toc a{color:var(--ink)}
.pn-lpm-guide .pc-box .pc-btn{margin-top:18px}
.pn-lpm-guide .pc-box h3{margin-bottom:12px}
.pn-lpm-guide .pc-box > p{margin:0;font-size:15px}
.pn-lpm-rail{display:grid;gap:18px;align-content:start}
.pn-lpm-rail .pc-pbox ul{list-style:none;margin:10px 0 0;padding:0}
.pn-lpm-rail .pc-pbox li{border-bottom:0}
.pn-lpm-rail .pc-pbox li a{display:flex;justify-content:space-between;gap:10px;margin:0 -10px;padding:12px 10px;border-radius:var(--r-icon);font:700 15px/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
.pn-lpm-rail .pc-pbox li a:hover{background:var(--t-tint)}
.pn-lpm-rail .pc-pbox li a:hover > span:first-child{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}   /* owner 27.10. "hover ist kaputt": the tint keeps its 10 px inset, only the words underline, never the arrow */
.pn-lpm-faq{background:var(--bg);color:var(--ink);padding:72px 0;border-top:1px solid var(--line)}
.pn-lpm-faq__h{margin:0 0 10px}
.pn-lpm-faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px}
.pn-lpm-faq summary::-webkit-details-marker{display:none}
.pn-lpm-faq summary::after{content:"+";flex:none;font-family:var(--font-sans);font-weight:700}
.pn-lpm-faq details[open] summary::after{content:"−"}
.pn-lpm-faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}

/* ---------- 404 = the .empty card with ROXY R2 (the one woman on an empty state: cast-and-props §2) ---------- */
.pn-lp-404{max-width:720px;margin:0 auto}
.pn-lp-404__art{position:relative;width:220px;height:250px;margin:0 0 6px;overflow:hidden;border-radius:0 0 16px 16px}
.pn-lp-404__art .pc-arch{width:200px;height:200px;border-radius:999px 999px 0 0}
.pn-lp-404__art .pc-arch::after{inset:10px 10px 0;border-radius:999px 999px 0 0}
.pn-lp-404__roxy{position:absolute;left:0;top:0;width:220px;height:auto}
.pn-lp-404__illu{margin:0 0 18px;color:var(--ink)}
.pn-lp-404 h1{font-size:var(--fs-h1)}   /* the page h1 = the h-m role (44 / 32) */
.pn-nf__links{margin-top:26px}   /* polish 02.10.: the guest 404's other ways on, the members-only row under the card */
/* ---------- kept: the arrow nudge used by the wizard and the paysite buttons ---------- */


/* ================= 701-1100: the desktop parts, the art columns get less room ================= */
@media (min-width:701px){.pn-lp-pairs{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-pairs{gap:12px}
  .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr) 400px}
  .pn-lp-hero__art{height:480px}
  .pn-lp-hero__art .pc-arch{width:380px;height:330px;border-radius:999px 999px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lp-b1{width:470px}
  .pn-lp-hero__stamp{top:60px}
  .pn-lp-hero__sticker{left:auto;right:0;top:20px}
  .pn-lp-buy__tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .pn-lp-buy__top{grid-template-columns:minmax(0,1fr) 340px}
  .pn-lp-buy__jess{height:480px;bottom:-100px}
  .pn-lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:60px}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px}
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr) 240px}
  .pn-lp-sell__sticker{left:auto;right:0}
  .pn-lp-sell__mara{right:0;height:520px}
  .pn-lp-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-lp-calc{grid-column:1 / -1}
  .pn-lp-lgrid,.pn-lpm-guide__grid{grid-template-columns:240px minmax(0,1fr)}
  .pn-lp-lgrid__facts,.pn-lpm-rail{grid-column:2}
  .pn-lp-lgrid__side{grid-row:1 / span 3}
  .pn-lp-lgrid__facts{grid-row:2}
  .pn-lp-lgrid__toc{grid-column:2;grid-row:3}
  .pn-lp-lgrid__toc .pc-toc ol{grid-template-columns:minmax(0,1fr)}
  .pn-lp-lgrid__toc .pc-toc li:nth-last-child(-n+2):nth-child(odd){border-bottom:1px dashed var(--line)}
  /* with the price box in column 2, the index card fills the hole under VIVIENNE instead of a third row (no empty left column) */
  .pn-lp-lgrid:has(.pn-lp-lgrid__facts):has(.pn-lp-lgrid__toc) .pn-lp-lgrid__side{grid-row:1}
  .pn-lp-lgrid:has(.pn-lp-lgrid__facts) .pn-lp-lgrid__toc{grid-column:1;grid-row:2;align-self:start}
  .pn-lp-lgrid:has(.pn-lp-lgrid__facts) .pn-lp-lgrid__toc .pc-toc{padding:20px 18px 8px}
  .pn-lp-laundry__h{font-size:30px}   /* polish 02.10.: the column is 300 px at 701: pt "constrangedora" at 48 ran 84 px out of it (page scrolled sideways) */
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr) 360px}
  .pn-lpm-art{height:480px}
  .pn-lpm-art .pc-arch{width:320px;height:360px;border-radius:999px 999px 0 0}
  .pn-lpm-art .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lpm-art__fig{height:480px}
  .pn-lpm-worth__wrap{grid-template-columns:minmax(0,1fr) 300px}
  .pn-lpm-worth__art img{height:400px}
  .pn-lpm-ship .pc-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:60px}
}

/* ================= PHONE (mockup @container page (max-width:700px)) ================= */
@media (max-width:700px){
  body:has(.pn-lb) .pn-main,body:has(.pn-lpm) .pn-main{padding-bottom:var(--dock)}
  .pn-lpm-hero .pc-arr{display:none}   /* a wrapping label stays centred: the arrow goes on phones */
  .pn-lp-hero{padding-top:26px}
  .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lp-hero__copy{padding-bottom:10px}
  .pn-lp-hero__sub{font-size:16px;margin-bottom:22px}
  .pn-lp-hero__art{height:420px;margin:0 -16px}
  .pn-lp-hero__art .pc-arch{width:270px;height:300px;border-radius:999px 999px 0 0}
  .pn-lp-hero__art .pc-arch::after{inset:10px 10px 0;border-radius:999px 999px 0 0}
  .pn-lp-b1{width:240px}
  .pc-ptag.pn-lp-b1__tag{left:35.8%;top:69%;--r:12deg;font-size:13px}
  .pn-lp-b1__tag small{font-size:13px}
  .pn-lp-b1--r5 .pc-ptag.pn-lp-b1__tag{display:none}   /* r5 at 240 px: the tag is 15 px wide, no type fits */
  .pn-lp-hero__stamp{left:12px;top:40px;padding:6px 8px;border-width:2px;font-size:15px}
  .pn-lp-hero__sticker{left:auto;right:12px;top:14px;padding:8px 10px;font-size:12px}
  .pn-lp-hero__illu{right:16px;bottom:8px}
  .pn-lp-cta{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .pn-lp-hero .pn-lp-ctas > .pc-btn{flex:1 1 auto}   /* two doors share the row; a wrapped door fills it (fr, es): no ragged pair of pills */
  .pn-lp-real .pc-sechead > .pn-lp-door--top{display:none}
  .pn-lp-door--end{display:flex;margin-top:18px}
  .pn-lp-browse{display:block;margin-top:24px}
  .pn-lp-browse__h{display:block;margin-bottom:10px}
  .pn-lp-browse__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(-1 * var(--gutter));padding:5px var(--gutter);scroll-padding-inline:var(--gutter);margin-block:-5px;-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 24px),transparent)}
  .pn-lp-browse__row::-webkit-scrollbar{display:none}
  .pn-lp-browse__row > li{flex:none;scroll-snap-align:start}
  .pn-lp-proof__copy{padding-top:0}
  .pn-lp-proof__p{font-size:16px}
  .pn-lp-lgrid__side{order:-2;grid-row:auto}
  .pn-lp-lgrid__toc{order:-1;grid-column:auto;grid-row:auto}
  .pn-lp-tocfold{margin:0 0 20px}
  .pn-lp-tocfold .pc-toc{margin-top:12px;padding-top:0;border-top:0}
  .pn-lp-tocfold .pc-toc > b{display:none}
  .pn-lp-tocfold__sum{gap:8px}
  .pn-lp-real{padding:48px 0 44px}
  .pn-lp-real--next{padding-top:0}
  .pn-lp-pairs:not(.pn-lp-pairs--4) > :nth-child(n+5){display:none}
  .pn-lp-sellrail{gap:14px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .pn-lp-buy{padding:64px 0 60px}
  .pn-lp-buy__top{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lp-buy__lede{font-size:16px}
  .pn-lp-buy .pc-tile{min-width:0;flex:1 1 140px;padding:16px}
  .pn-lp-buy__art{height:300px;margin:26px -16px 0}
  .pn-lp-buy__jess{height:340px;right:-6px;bottom:-60px}   /* her arm stays inside the screen */
  .pn-lp-buy__label{left:16px;bottom:24px;width:160px;padding:13px}
  .pn-lp-buy__label .pc-carelabel__v{font-size:18px}
  .pn-lp-buy__illu{right:16px;bottom:8px}
  .pn-lp-how__note{font-size:18px;margin-bottom:14px}
  .pn-lp-steps{grid-template-columns:minmax(0,1fr);gap:8px}
  .pn-lp-step__obj{width:80px;top:-24px;right:-4px}
  .pn-lp-step__obj--env{width:84px;top:-18px}
  .pn-lp-proof{padding:60px 0}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .pn-lp-receipt{padding:18px 18px 22px;margin-right:12px}
  /* T46: on phones the lipstick lies on the top-right corner (overlapping it by ~20 px, cast-and-props §2), clear of the footnote */
  .pn-lp-receipt__obj{width:84px;right:-14px;top:-56px;bottom:auto}
  .pn-lp-sell{padding:64px 0 60px}
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr) 130px;grid-template-areas:"head head" "lede art" "proof proof";grid-template-rows:auto auto auto;column-gap:8px;align-items:start}
  .pn-lp-sell__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}   /* kicker + sticker share a row; a long kicker (es, it) pushes the sticker under it, never under the sticker */
  .pn-lp-sell__head > .pn-lp-sell__h{flex:0 0 100%;margin-top:10px}
  .pn-lp-sell__sticker{position:static;margin-left:auto;font-size:12px}
  .pn-lp-sell__lede{font-size:15px}
  .pn-lp-sell__art{height:260px;margin-right:-16px;overflow:hidden}
  .pn-lp-sell__mara{height:340px;right:-30px;bottom:auto;top:0}
  .pn-lp-sell__illu{right:8px;top:8px;bottom:auto;max-width:none;text-align:center;font-size:12px}   /* two clean lines, no dangling dot; top: the art fades out at the bottom (T25) */
  .pn-lp-sell__illu .pc-illu__a,.pn-lp-sell__illu .pc-illu__b{display:block}
  .pn-lp-sell__illu .pc-illu__sep{display:none}
  .pn-lp-notes{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:28px}
  /* T25: Mara's knee crop never stands free: the live chip moves into the lede column (no dead pink band), the figure
     column runs the full height of the top grid, and the first taped note overlaps the bottom of the figure (as the
     next row does on desktop). The figure is always taller than its clip, so no cut edge shows. */
  .pn-lp-sell__top{grid-template-areas:"head head" "lede art" "proof art";grid-template-rows:auto auto 1fr}
  .pn-lp-sell__art{z-index:1;align-self:stretch;height:auto;min-height:260px;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 44px),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 44px),transparent)}
  .pn-lp-sell__mara{height:max(340px,calc(100% + 60px))}
  .pn-lp-sell__proof{align-self:start;margin:4px 0 56px}
  .pn-lp-sell__proof .pc-chip{white-space:normal;text-align:left;line-height:1.25}
  .pn-lp-sell .pn-lp-notes{position:relative;z-index:2;margin-top:-48px}
  .pn-lp-paid .pn-lp-paid__big{font-size:30px}
  .pn-lp-boxes{grid-template-columns:minmax(0,1fr);gap:16px}
  .pn-lp-laundry.pn-seotext{padding-bottom:64px}
  .pn-lp-mast{padding:14px 0 0}
  .pn-lp-mast__meta{display:none}
  .pn-lp-lgrid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:24px}
  .pn-lp-host{display:none}
  .pn-lp-laundry--tail .pn-lp-lgrid__side{display:none}
  .pn-lp-laundry--tail.pn-seotext{padding-top:40px}
  .pn-lp-mast--tail{margin-bottom:24px}
  .pn-lp-pbox{margin-top:96px}   /* the pegged pair hangs clear of the "Keep reading" button */
  .pn-lp-join{padding:80px 0 64px}
  .pn-lp-doors{grid-template-columns:minmax(0,1fr)}
  .pn-lp-doors .pc-door h3{font-size:24px}
  .pn-lpm-hero{padding-top:30px}
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr)}
  .pn-lpm-hero__lede{font-size:16px}
  .pn-lpm-hero__copy{padding-bottom:0}
  .pn-lpm-art{height:380px;margin:10px -16px 0}
  .pn-lpm-art .pc-arch{width:250px;height:280px;border-radius:999px 999px 0 0}
  .pn-lpm-art .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lpm-art__fig{height:380px;bottom:-22px}
  .pn-lpm-art--buy .pn-lpm-art__fig{height:300px;bottom:0}
  .pn-lpm-art__obj{width:96px;left:18px;bottom:40px}
  .pn-lpm-art--buy .pn-lpm-art__obj{width:72px;left:auto;right:18px}
  .pn-lpm-art__illu{right:16px}
  .pn-lpm-worth{padding-top:60px}
  .pn-lpm-worth__wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lpm-worth__copy{padding-bottom:0}
  .pn-lpm-worth .pc-strip{height:110px;margin:30px 0 12px}
  .pn-lpm-worth .pc-strip__tg{font-size:16px}
  .pn-lpm-worth .pc-strip__tg.is-med{font-size:18px}
  .pn-lpm-worth__art{height:300px;margin:0 -16px}
  .pn-lpm-worth__art img{height:300px;right:0}
  .pn-lpm-worth__art--tags{height:auto;margin:0;padding:28px 0 0}
  .pn-lpm-worth__art--tags .pn-ptags{max-width:230px}
  .pn-lpm-art--tags{height:300px}
  .pn-lpm-art--tags .pn-ptags{max-width:300px;margin-bottom:24px}
  .pn-lpm-worth__art .pc-illu{right:16px;top:auto;bottom:8px;left:16px}
  .pn-lpm-ship{padding:60px 0}
  .pn-lpm-ship .pc-steps-grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:40px}
  .pn-lpm-ship .pc-care{padding-right:78px}
  .pn-lpm-ship .pc-obj{width:76px;top:-18px;right:-6px}
  .pn-lpm-guide{padding:48px 0 60px}
  .pn-lpm-guide__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pn-lpm-faq{padding:48px 0}
  .pn-lpm-faq .pc-faq summary{font-size:18px}
}
/* the live chips size to their content (dot + number + words), so they start left: nothing to centre */
.pn-lb .pc-chip--live,.pn-lpm .pc-chip--live{justify-content:flex-start}
.pn-lpm-faq summary .pn-lpm-faq__q{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.pn-lpm-faq p{max-width:720px}
/* the rail CTA box (a .box--dk in a 300 column): its buttons take a second line instead of clipping */
.pn-lpm-ctabox{display:grid;gap:14px}
.pn-lpm-ctabox h3{margin:0}
.pn-lpm-ctabox > p{margin:0;font-size:15px}
.pn-lpm-ctabox__btns{display:grid;gap:14px}
.pn-lpm-ctabox .pc-btn{white-space:normal;text-align:center;line-height:1.15;text-wrap:balance}

/* ================= dark: the hero stamp keeps pink ink on a dark plate (it sits on the pink arch from 1101 px); no seams (audit 30.09. Top 2: the surfaces
   are staggered by their own gradients, --lp-*-bg in tokens.css, so no hairline has to separate them) ================= */
[data-theme="dark"] .pn-lp-hero__stamp{background:var(--bg);border-color:var(--pink);color:var(--pink)}
[data-theme="dark"] .pn-lp-hero__stamp .pc-tub{border-color:var(--pink);color:var(--pink)}
[data-theme="dark"] .pn-lp-receipt__name{color:var(--anthracite)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pn-lp-hero__stamp{background:var(--bg);border-color:var(--pink);color:var(--pink)}
  :root:not([data-theme="light"]) .pn-lp-hero__stamp .pc-tub{border-color:var(--pink);color:var(--pink)}
}

/* ================= GLAM PASS + AUDIT 30.09. (owner: "sanfte Verläufe in den Flächen, mehr Glam, weniger KI-Slop";
   docs/landing-audit-30-09.md; notes in docs/landing-glam-notes.md) =================
   Every surface is a layered token (tokens.css --lp-*, light + dark) over a 160 px grain tile; the dark and the pink
   block rise with a flat arch (the brand's arch motif) instead of a hard cut; no hairline between sections. One prop
   per section at most, no stickers, no tilted paper, one rhythm (--lp-pad). Cast labels stand under the art, never on
   a figure. Motion: a sheen on the big pink / ink buttons and the doors, a gentle rise of each section's content once
   in view (landing.js .is-armed / .is-in); reduced motion: nothing moves. */

.pn-lb{--lp-pad:clamp(56px,6vw,80px)}
body:has(.pn-lb) .pc-logo__dot{animation:none}   /* audit: the dot does not wink on the landing */
body:has(.pn-lb) .pn-gfooter{background:var(--lp-footer-bg)}

/* ---- type: tighter display tracking, balanced ledes, and a display word never breaks inside itself ---- */
.pn-lb :is(.pc-h-xl,.pc-h-l,.pc-h-m){font-kerning:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}
.pn-lb :is(.pn-lp-hero__sub,.pn-lp-buy__lede,.pn-lp-sell__lede,.pn-lp-proof__p){text-wrap:pretty}
.pn-lb .pc-strike::after{left:0;right:0}   /* pt "VELHAS": the pen line stays inside the column */
.pn-lb .pc-sechead .pc-real{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
:is(.pn-lp-buy,.pn-lp-sell) .pc-kicker::after{content:"";flex:none;width:44px;height:1px;margin-left:6px;background:currentColor;opacity:.55}

/* ---- the cast labels (audit Top 5): under the art box, right, one line, 11 px, quiet; never on a figure ---- */
.pn-lp-hero__illu,.pn-lp-buy__illu,.pn-lp-sell__illu{top:auto;left:auto;right:0;bottom:0;padding:0;border-radius:0;background:none;font-size:12px;opacity:1;white-space:nowrap;color:var(--ink-2)}   /* AA at 11 px in both themes */
.pn-lp-buy__illu{color:var(--dk-ink-2)}
.pn-lp-sell__illu{color:var(--anthracite)}   /* >= 5.5:1 on both pinks */

/* ---- 1 hero: blush light on duck egg, the satin arch with its glow, the satin tape over the whole second sentence ---- */
.pn-lp-hero{position:relative;background:var(--lp-grain) 0 0/160px 160px,var(--lp-hero-bg)}
.pn-lp-hero__art{--foot:28px}
.pn-lp-hero__art .pc-arch{bottom:var(--foot);background:var(--lp-arch);box-shadow:var(--lp-arch-glow)}
.pn-lp-hero__art .pc-arch{-webkit-mask-image:linear-gradient(var(--ink) 84%,transparent);mask-image:linear-gradient(var(--ink) 84%,transparent)}
.pn-lp-b1 picture{-webkit-mask-image:linear-gradient(var(--ink) 95%,transparent);mask-image:linear-gradient(var(--ink) 95%,transparent)}   /* owner 05.10.: the figure stays solid, only its last edge melts into the ground */
.pn-lp-b1{bottom:var(--foot)}
.pn-lp-hero__illu{bottom:6px}
.pn-lp-hero .pc-hl{background:var(--lp-tape)}
.pn-lp-hero__chip.pc-chip--live,.pn-lp-hero__chip--trust{background:var(--lp-chip-bg);color:var(--lp-chip-ink);border-color:var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pn-lp-hero__sub{max-width:30em}
.pn-lp-hero__count{font-size:15px}
.pn-lp-b1__tag small{font-size:12px;opacity:1}   /* audit: "worn" was 7.5 px; full ink for AA (polish r3) */
@media (min-width:1101px){.pn-lp-hero__stamp{top:180px}}   /* at the arch's edge, not in the air */

/* ---- 2 + 3 real pairs / sellers: one soft glow, no line; the sellers share the pairs' five-column grid ---- */
.pn-lp-real{position:relative;border-top:0;padding:var(--lp-pad) 0 calc(var(--lp-pad) - 16px);background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg)}
.pn-lp-real--next{padding-top:0;background:var(--lp-grain) 0 0/160px 160px,var(--lp-real2-bg)}
@media (min-width:1101px){
  .pn-lp-sellrail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;justify-content:stretch}
  .pn-lp-sellrail > .pc-scard{width:auto}
  .pn-lp-sellrail:not(.pn-lp-sellgrid) > :nth-child(n+6){display:none}
}
@media (min-width:701px){.pn-lp-real .pc-sechead{flex-wrap:nowrap;align-items:flex-end}.pn-lp-real .pc-sechead > .pc-btn{flex:none}}
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-pairs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-lp-pairs > :nth-child(n+9){display:none}
}

/* ---- 4 buyer block: deep anthracite with a cyan and a pink glow, rising with a flat arch ---- */
.pn-lp-buy{z-index:1;margin-top:calc(-1 * var(--lp-dome-h));padding:calc(var(--lp-pad) + var(--lp-dome-h)) 0 var(--lp-pad);background:var(--lp-grain) 0 0/160px 160px,var(--lp-buy-bg);border-top-left-radius:50% var(--lp-dome-h);border-top-right-radius:50% var(--lp-dome-h)}
.pn-lp-hero + .pn-lp-buy{margin-top:0;padding-top:var(--lp-pad);border-radius:0}
.pn-lp-buy .pc-fix{margin-right:.18em}   /* "smell" never touches "HER" */
.pn-lp-buy__art{margin-bottom:26px}
.pn-lp-buy__jess{bottom:0;height:540px;-webkit-mask-image:linear-gradient(var(--ink) 93%,transparent);mask-image:linear-gradient(var(--ink) 93%,transparent)}
.pn-lp-buy__illu{bottom:-24px}
/* polish r1: two columns (>= 960): the copy starts at the top next to Jess instead of sitting on the art's baseline
   (that left ~290 px of empty arch above the kicker); the kicker lands ~120 px under the arch crest */
@media (min-width:960px){
  .pn-lp-buy__top{align-items:start}
  .pn-lp-buy{padding-top:calc(var(--lp-pad) + var(--lp-dome-h) - 40px)}
  .pn-lp-hero + .pn-lp-buy{padding-top:var(--lp-pad)}
}
/* the two numbers read as an editorial pair of figures, not as KPI tiles */
.pn-lp-buy .pn-lp-buy__tiles{gap:0}
.pn-lp-buy .pc-tile{min-width:0;margin:0 30px 0 0;padding:2px 30px 2px 0;border:0;border-right:1px solid var(--lp-buy-line);border-radius:0;background:transparent}
.pn-lp-buy .pc-tile:last-child{margin-right:0;padding-right:0;border-right:0}
.pn-lp-buy .pc-tile b{font-size:30px;background:var(--lp-tape);-webkit-background-clip:text;background-clip:text;color:transparent}
.pn-lp-buy .pc-tile p{margin-top:8px;font-size:15px;color:var(--dk-ink)}
/* the four steps: plain cream labels, one soft shadow, no dashed inner line, no props */
.pn-lp-how{margin-top:64px}
.pn-lp-steps{align-items:stretch}
.pn-lp-step{box-shadow:var(--lp-step-sh)}
.pn-lp-step::before{content:none}
@media (min-width:1101px){.pn-lp-step:nth-child(2){padding-right:20px}}
.pn-lp-cta{align-items:center}
.pn-lp-cta__stack > p:first-child,.pn-lp-cta__have,.pn-lp-cta__have .pc-more,.pn-lp-cta__links .pc-more{font-size:15px}

/* ---- 5 receipt: blush light; the receipt lies straight (−0.4°), quotes in the sans, only its head in mono ---- */
.pn-lp-proof{position:relative;z-index:2;overflow:clip visible;padding:var(--lp-pad) 0;background:var(--lp-grain) 0 0/160px 160px,var(--lp-proof-bg)}
.pn-lp-receipt{transform:rotate(-.4deg);font:400 15px/1.5 var(--font-sans)}
.pn-lp-receipt .pc-receipt__top small{font:500 12px/1.2 var(--body);font-variant-numeric:tabular-nums;letter-spacing:0}
.pn-lp-receipt q{font-size:15px}
.pn-lp-receipt li small{font-size:12px}
@media (min-width:1101px){.pn-lp-proof__wrap{align-items:center}.pn-lp-proof__copy{padding-top:0}}
/* the marker: the same pink stripe under the words in light and dark (dark: a softer pink so light type stays legible) */
.pn-lp-proof__h em,[data-theme="dark"] .pn-lp-proof__h em{background:linear-gradient(transparent 60%,var(--lp-marker) 60% 90%,transparent 90%);color:inherit}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lp-proof__h em{background:linear-gradient(transparent 60%,var(--lp-marker) 60% 90%,transparent 90%);color:inherit}}

/* ---- 6 seller block: satin pink with a sheen, rising with the same flat arch; one prop, straight notes ---- */
.pn-lp-sell{z-index:3;margin-top:calc(-1 * var(--lp-dome-h));padding:calc(var(--lp-pad) + var(--lp-dome-h)) 0 var(--lp-pad);background:var(--lp-grain) 0 0/160px 160px,var(--lp-sell-bg);border-top-left-radius:50% var(--lp-dome-h);border-top-right-radius:50% var(--lp-dome-h)}
.pn-lp-hero + .pn-lp-sell{margin-top:0;padding-top:var(--lp-pad);border-radius:0}
.pn-lp-sell__top{align-items:start;grid-template-rows:auto auto 1fr}
.pn-lp-sell__head{padding-top:12px}
.pn-lp-sell__art{height:470px;margin-bottom:26px}
.pn-lp-sell__mara{bottom:0;height:500px;-webkit-mask-image:linear-gradient(var(--ink) 93%,transparent);mask-image:linear-gradient(var(--ink) 93%,transparent)}
.pn-lp-sell__illu{bottom:-22px}
.pn-lp-sell .pc-fix{margin-right:.22em}
.pn-lp-notes{margin-top:48px}
.pn-lp-notes > .pc-note:nth-child(n){transform:none}
.pn-lp-notes > .pc-note:nth-child(n) .pc-mt{background:var(--mt-light);transform:none}
.pn-lp-sell .pc-box--dk{border-color:transparent;background:var(--lp-box-dk);box-shadow:var(--lp-inner-hi-dk),var(--lp-card-lift)}
.pn-lp-sell .pc-box--cr{border-color:transparent;background:var(--lp-box-cr);box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
.pn-lp-sell .pc-priv small{font-size:15px;color:var(--dk-ink-2)}
.pn-lp-paid > p:last-child{margin-top:12px;padding-top:0}
.pn-lp-calc__stack{top:14px;right:14px;bottom:auto;width:96px}
.pn-lp-calc .pc-box__h{padding-right:100px}
@media (min-width:701px){.pn-lp-calc > small:last-child{padding-right:0}}
.pn-lp-calc .pn-lp-box__p{padding-right:100px}   /* art-director pass 13.10.: the stack's lower edge lay over the first line of the lede; the lede keeps clear of it like the head */

/* ---- 7 the Laundry Room: warm paper, a lace hem under the pink block (scallops + eyelets) ---- */
.pn-lp-laundry.pn-seotext{position:relative;z-index:4;border-top:0;padding-bottom:var(--lp-pad);background:var(--lp-grain) 0 0/160px 160px,var(--lp-laundry-bg)}
.pn-lp-sell + .pn-lp-laundry.pn-seotext{background:radial-gradient(circle,var(--pink) 1.6px,transparent 2.3px) 0 3px/calc(2 * var(--lp-lace-r)) 8px repeat-x,var(--lp-grain) 0 0/160px 160px,var(--lp-laundry-bg)}
.pn-lp-sell + .pn-lp-laundry::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--lp-lace-r));height:var(--lp-lace-r);pointer-events:none;
  background:radial-gradient(circle at 50% 100%,var(--lp-lace) calc(var(--lp-lace-r) - .5px),transparent var(--lp-lace-r)) 0 0/calc(2 * var(--lp-lace-r)) var(--lp-lace-r) repeat-x}
.pn-lp-sell + .pn-lp-laundry .pn-lp-mast{padding-top:24px}
/* HYBRID / REDAKTION: the Laundry Room follows the hero; the hero's ground melts into the paper (no straight seam) */
.pn-lp-hero + .pn-lp-laundry.pn-seotext{background:linear-gradient(180deg,var(--lp-hero-end) 0,transparent 200px),var(--lp-grain) 0 0/160px 160px,var(--lp-laundry-bg)}
.pn-lp-host::before{background:var(--lp-host-arch);box-shadow:inset 0 0 0 1px var(--lp-host-rim)}
.pn-lp-host__img{filter:var(--lp-cut-rim)}
.pn-lp-host__illu{color:var(--ink-2);opacity:1}
@media (min-width:1101px){.pn-lp-lgrid__side{position:sticky;top:96px;align-self:start}}
.pn-lp-laundry .pc-pbox,.pn-lp-lgrid__toc .pc-toc{box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
.pn-lp-laundry .pc-pbox__row.is-med b,.pn-lp-laundry .pc-toc li::before,.pn-lp-laundry .pc-toc li > a::before{color:var(--lp-num-ink)}
.pn-lp-pbox__obj{filter:var(--lp-cut-rim)}
.pn-lp-lgrid__side .pn-draftband{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:5px 10px;border-radius:var(--radius-full);font-size:12px;line-height:1.2}
.pn-lp-lgrid__side .pn-draftband .pc-ico{width:14px;height:14px}

/* a section a dome rises over keeps its content clear of the arch */
.pn-lb > section:has(+ :is(.pn-lp-buy,.pn-lp-sell)){padding-bottom:calc(var(--lp-pad) + var(--lp-dome-h))}

/* ---- 7b "Read up first": an editorial index — the head left, three numbered rows right; the whole row is the link,
   a 40 px arrow pill at its end; no props ---- */
.pn-lp-guides{position:relative;color:var(--ink);padding:var(--lp-pad) 0;background:var(--lp-grain) 0 0/160px 160px,var(--lp-guides-bg)}
.pn-lp-laundry + .pn-lp-guides{padding-top:calc(var(--lp-pad) / 2)}
.pn-lp-guides + .pn-lp-join{padding-top:calc(var(--lp-pad) / 2)}
.pn-lp-guides:has(+ .pn-lp-join){padding-bottom:calc(var(--lp-pad) / 2)}
.pn-lp-guides__wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.pn-lp-guides__head .pc-h-m{margin:0}
.pn-lp-guides__p{margin:14px 0 0;max-width:36em;font-size:16px;line-height:1.5;color:var(--ink-2)}   /* owner 05.10.: the lede under the head */
.pn-lp-mgrid{list-style:none;margin:0;padding:0;counter-reset:lpg}
.pn-lp-mcard{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:20px;min-height:0;padding:24px 4px;border-bottom:1px solid var(--line);color:var(--ink);counter-increment:lpg;
  background:var(--lp-row-hover) 0 0/0% 100% no-repeat;transition:background-size var(--dur-slow) var(--ease-out)}
.pn-lp-mcard:first-child{border-top:1px solid var(--line)}
.pn-lp-mcard::before{content:counter(lpg,decimal-leading-zero);font:800 13px/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--lp-num-ink)}
.pn-lp-mcard__body{min-width:0}
.pn-lp-mcard__h{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head)}
.pn-lp-mcard__p{margin:8px 0 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* owner 05.10.: each row's tier-3 link ("Read the buying guide →") is the row's one link; its ::after covers the row */
.pn-lp-mcard__more{display:inline-block;margin-top:14px}
.pn-lp-mcard__more::after{content:"";position:absolute;inset:0;z-index:2}
.pn-lp-mcard__more:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}   /* the ring on the link itself (§8) */
.pn-lp-mcard:hover{background-size:100% 100%}
.pn-lp-mcard:hover .pn-lp-mcard__more{text-decoration-color:currentColor}
.pn-lp-mcard:hover .pn-lp-mcard__more .pc-arr{transform:translateX(3px)}
@media (min-width:1101px){
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .pn-lp-mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
  .pn-lp-mgrid--2,.pn-lp-mgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-lp-mcard{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;row-gap:14px;padding:22px 4px 26px;border-top:1px solid var(--line);border-bottom:0}
  .pn-lp-mcard::before{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.pn-lp-mcard{transition:none}.pn-lp-mcard:hover .pn-lp-mcard__more .pc-arr{transform:none}}

/* ---- 8 join: left on the column, the tag beside the head, two doors across the full width ---- */
.pn-lp-join{padding:var(--lp-pad) 0 calc(var(--lp-pad) + 8px);text-align:left;background:var(--lp-grain) 0 0/160px 160px,var(--lp-join-bg)}
.pn-lp-join .pc-wrap{display:block}   /* owner 05.10.: the head and its lede, then the two doors across the full width (no tag) */
.pn-lp-join__h{margin:0}
.pn-lp-doors{max-width:none;margin:0;gap:16px}
.pn-lp-doors .pc-door{position:relative;isolation:isolate;border-color:transparent;gap:10px;box-shadow:var(--lp-inner-hi-dk),var(--lp-card-lift);transition:transform var(--dur-slow) var(--ease-out)}
.pn-lp-doors .pc-door p{min-height:0;margin:0}
.pn-lp-doors .pc-door .pc-btn{margin-top:20px}
.pn-lp-doors .pc-door--buy{background:var(--lp-door-buy)}
.pn-lp-doors .pc-door--sell{background:var(--lp-door-sell);box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
.pn-lp-doors .pc-door:hover{transform:translateY(-3px)}

/* ---- the sheen: pink / ink buttons and the doors (a light band slides across on hover; never on small buttons) ---- */
.pn-lb .pc-btn:is(.pc-btn--primary,.pc-btn--ink,.pc-btn--on-accent):not(.pc-btn--sm),.pn-lp-doors .pc-door{position:relative;isolation:isolate}
.pn-lb .pc-btn:is(.pc-btn--primary,.pc-btn--ink,.pc-btn--on-accent):not(.pc-btn--sm)::after,.pn-lp-doors .pc-door::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--lp-sheen) no-repeat;background-size:260% 100%;background-position:130% 0;transition:background-position 900ms var(--ease-out)}
.pn-lb .pc-btn:is(.pc-btn--primary,.pc-btn--ink,.pc-btn--on-accent):not(.pc-btn--sm):hover::after,.pn-lp-doors .pc-door:hover::after{background-position:-30% 0}

/* ---- reveal: each armed section's content rises once in view (landing.js); reduced motion: static ---- */
@media (prefers-reduced-motion:no-preference){
  .pn-lb .is-armed > .pc-wrap{transition:opacity var(--lp-reveal-dur) var(--ease-out),transform var(--lp-reveal-dur) var(--ease-out)}
  .pn-lb .is-armed:not(.is-in) > .pc-wrap{opacity:0;transform:translateY(var(--reveal-y))}
}
@media (prefers-reduced-motion:reduce){.pn-lp-doors .pc-door,.pn-lb .pc-btn::after,.pn-lp-doors .pc-door::after{transition:none}.pn-lp-doors .pc-door:hover{transform:none}}

/* ---- tablet 701-1100 (audit Top 1): 701-959 stacks hero, buy head and receipt; words never break inside ---- */
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .pn-lp-report__wrap{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  .pn-lp-buy__jess{height:460px}
  .pn-lp-sell__mara{height:480px}
  .pn-lp-steps{row-gap:16px}
}
@media (min-width:701px) and (max-width:959px){
  .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .pn-lp-hero__copy{padding-bottom:8px}
  .pn-lp-hero__art{width:100%;max-width:560px;height:440px;justify-self:center}
  .pn-lp-hero__art .pc-arch{width:420px;height:330px;border-radius:999px 999px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lp-b1{width:540px}
  .pn-lp-hero__stamp{left:0;top:40px}
  .pn-lp-buy__top{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lp-buy__art{height:420px;margin-top:24px}
  .pn-lp-buy__jess{right:40px;height:440px}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .pn-lp-receipt{max-width:460px;margin-right:12px}
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"head head" "lede art" "proof art"}
}

/* ---- phone ---- */
@media (max-width:700px){
  .pn-lp-hero__art{--foot:24px}
  .pn-lp-hero__illu{right:16px;bottom:4px}
  .pn-lp-b1__tag small{display:none}
  .pn-lp-buy__art{height:320px;margin:26px -16px 26px}
  .pn-lp-buy__jess{right:10px;height:340px}
  .pn-lp-buy__illu{right:16px;bottom:-22px}
  .pn-lp-buy .pc-tile{margin-right:18px;padding-right:18px}
  .pn-lp-how{margin-top:30px}
  /* Mara under the lede, 200 px, centred, her label under her (audit: it sat on her face) */
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lede" "proof" "art";grid-template-rows:auto}
  .pn-lp-sell__art{justify-self:center;width:200px;height:300px;min-height:0;margin:8px 0 26px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pn-lp-sell__mara{left:50%;right:auto;top:auto;bottom:0;height:300px;transform:translateX(-50%)}
  .pn-lp-sell__illu{right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%);text-align:center;font-size:12px}
  .pn-lp-sell__illu .pc-illu__a,.pn-lp-sell__illu .pc-illu__b{display:inline}
  .pn-lp-sell__illu .pc-illu__sep{display:inline}
  .pn-lp-sell__proof{margin:4px 0 0}
  .pn-lp-sell .pn-lp-notes{margin-top:24px}
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .pn-lp-mcard{grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:20px 0}
  .pn-lp-join__head{margin-bottom:16px}
  .pn-lp-report__wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .pn-lp-report__p{font-size:16px}
  /* the es / it / fr report door (34+ characters) ran out of its pill at 360-390: full width, a balanced two-line label */
  .pn-lp-report__cta .pc-btn{display:block;width:100%;white-space:normal;text-align:center;text-wrap:balance;line-height:1.15}   /* block (not flex): the arrow stays in the label's line, the wrapped label stays centred */
  .pn-lp-lgrid--guide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:379px){
  .pn-lp-buy .pn-lp-buy__tiles{flex-direction:column;gap:18px}
  .pn-lp-buy .pc-tile{margin:0;padding:0 0 18px;border-right:0;border-bottom:1px solid var(--lp-buy-line)}
  .pn-lp-buy .pc-tile:last-child{padding-bottom:0;border-bottom:0}
}

/* ---- AD1 03.10. (docs/ad1-03-10.md) ---- */
/* F1 tablet 701-1100: the money / report hero gave the copy 266 px at 768 next to a 360 px art column: the report h1
   broke inside "PANTIES" and left the "?" alone, the fr / it / es / pt pink CTA ran out of its pill. The art column
   now follows the screen (220 at 701, 330 at 1100), the arch scales with it, the report h1 is sized to its column. */
@media (min-width:701px) and (max-width:1100px){
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr) clamp(220px,30vw,330px);gap:24px}
  .pn-lpm-art,.pn-lpm-art--report{height:clamp(400px,44vw,480px)}
  .pn-lpm-art .pc-arch,.pn-lpm-art--report .pc-arch{width:100%;height:auto;aspect-ratio:8 / 9;border-radius:999px 999px 0 0}
  .pn-lpm-art .pc-arch::after,.pn-lpm-art--report .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lpm-art__fig,.pn-lpm-art--report .pn-lpm-art__fig{height:clamp(400px,44vw,480px)}
  .pn-lpm-art--buy .pn-lpm-art__fig{height:clamp(340px,38vw,440px)}
  .pn-lpm-art__obj{width:clamp(96px,11vw,130px);left:0}
  .pn-lpm-hero--report .pn-lpm-hero__h.pc-h-l{font-size:30px}
  .pn-lpm-hero .pn-lp-ctas > .pc-btn{max-width:100%}
}
/* F4 phones: the two hero doors of /sell and /buy share a row while they fit, else each fills it (the landing hero's
   rule), never a ragged pair of pills hanging off the left edge. */
@media (max-width:700px){.pn-lpm-hero .pn-lp-ctas > .pc-btn{flex:1 1 auto}}
/* F6 the step cards keep the 96 px object lane only where a card carries an object: es "Encuéntrala" ran 30 px
   into the empty lane of the first card on every desktop width. */
.pn-lpm-ship .pc-care:not(:has(> .pc-obj)){padding-right:20px}
/* F3 the rail CTA box (money pages, guides, report): the box is 248 px inside; the 15 px button label wrapped to two
   lines in most languages. The rail button takes the kit's small type (13, as the report rail already did) and a
   balanced wrap where a language still needs two lines; the report's second way on is a tier-3 link under it. */
@media (min-width:701px){
  .pn-lpm-ctabox{padding:22px}
  .pn-lpm-ctabox .pc-btn{padding-inline:14px;font-size:13px}
  .pn-lpm-ctabox__alt{margin:4px 0 0;text-align:center}
}
/* F7 tablet: es "palabras." ran 25 px out of the proof column at 1024 (76 px head in a 464 column), the section heads
   next to their door ran 4-7 px out at 701 (es, fr). Both heads scale with the column between 701 and 1100. */
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-proof__h.pc-h-l{font-size:30px}
  .pn-lp-real .pc-sechead .pc-h-m{font-size:30px}
}

/* UX 17.10. #35: the wordmark over the join head is gone (the footer's logo followed right under it) */
.pn-lp-mast__meta{font-size:12px;letter-spacing:.2em}   /* the kicker's measure (the label voice) */

/* ================= HERO COMPOSITION from 1101 (owner 05.10. on the live hero at 1280-2000: "oben rechts zu viel freie
   Fläche, die Figur muss weiter hoch, das sieht hingeklatscht aus") =================
   One baseline system for both columns: the art column stretches to the copy column's height (no 740 px box hanging at the
   bottom of a taller row), the figure stands on the ground (--foot) and is scaled so ROXY's head reaches the top of the
   wrap, level with the H1 (920 px cut-out = 713 px tall + the foot = the row); her hands and knees sit on the CTA line.
   The figure is anchored to the right edge of the wrap plus the gutter, so her fingertips end at the viewport edge at 1280
   and nothing is cut; below 1280 the cut-out shrinks with the viewport so her heels never run into the copy. The arch is
   bigger and higher (620 x 600, right-anchored so it sits behind her torso, not centred in an empty column); her head
   rises over it. The stamp sits on the arch's left shoulder (half on the pink, half on the ground), not in the air.
   The hero is tighter (padding 32 / copy foot 32, H1 82 px at 1280 and 92 from 1440) so both CTAs are in the fold at
   1280 x 800. Tokens, the ground shadow, the 95 % fade, the cast label: unchanged. */
@media (min-width:1101px){
  .pn-lp-hero{padding-top:32px}
  .pn-lp-hero__wrap{align-items:stretch;gap:16px}
  .pn-lp-hero__copy{padding-bottom:32px}
  .pn-lp-hero__h{margin:10px 0 18px}
  .pn-lp-hero__lede{margin-bottom:24px}
  .pn-lp-hero__art{height:auto;min-height:760px}
  .pn-lp-b1{left:auto;right:calc(-1 * var(--gutter));transform:none;width:min(920px,calc(100vw - 360px))}
  .pn-lp-hero__art .pc-arch{left:auto;right:-26px;transform:none;width:620px;height:600px;border-radius:999px 999px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lp-hero__stamp{left:48px;top:auto;bottom:calc(var(--foot) + 470px)}
}
/* from 1440 the H1 is 92 px and the row 50 px taller: the cut-out grows with it (980 = 760 tall + the foot), the arch too,
   so her head stays level with the H1 and no band opens over it; her fingertips end 80 px inside the viewport. */
@media (min-width:1440px){
  .pn-lp-b1{width:980px}
  .pn-lp-hero__art .pc-arch{width:660px;height:640px;border-radius:999px 999px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lp-hero__stamp{bottom:calc(var(--foot) + 505px)}
}
/* hero r5 (owner 11.10.) on the desktop row: she lies across the frame, so the cut-out is narrower than ROXY's (her hand
   and the panties stay clear of the copy) and the stamp sits on the arch at the top right, never on her face */
@media (min-width:1101px){
  .pn-lp-b1--r5{width:min(760px,calc(100vw - 500px))}
  .pn-lp-hero__art--r5 .pn-lp-hero__stamp{left:auto;right:36px;bottom:auto;top:104px}
}
@media (min-width:1440px){
  .pn-lp-b1--r5{width:820px}
}
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-hero__art--r5 .pn-lp-hero__stamp{left:-36px;top:4px}   /* screenshot check: at left 0 its corner touched her hair */
}

/* ==========================================================================
   BRAND PREVIEW 05.10. (docs/brand-review-05-10.md, owner: "setzt mal alle um als Screenshot") — the 15 proposals in one
   build, for the decision from screenshots. Numbers = the review's list.
   ========================================================================== */
/* 1 one kicker system: tub + caps label + hairline in every section; ink on light, pink on every dark ground, ink on pink / paper */
.pn-lb .pc-kicker{color:var(--ink)}
.pn-lb .pc-kicker::after{content:"";flex:none;width:44px;height:1px;margin-left:6px;background:currentColor;opacity:.55}
[data-theme="dark"] .pn-lb .pc-kicker{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lb .pc-kicker{color:var(--pink)}}
.pn-lb .pc-dk .pc-kicker,.pn-lb .pn-lp-laundry .pc-kicker,.pn-lb .pn-lp-report .pc-kicker{color:var(--pink)}
.pn-lb .pc-on-pink .pc-kicker,.pn-lb .pc-box--cr .pc-kicker{color:var(--anthracite)}
.pn-lb .pc-sechead .pc-kicker{margin-bottom:4px}
.pn-lb .pn-lp-proof .pc-kicker,.pn-lb .pn-lp-guides .pc-kicker,.pn-lb .pn-lp-join .pc-kicker{margin-bottom:16px}
/* 4 step numbers: the numeral in the display face (components.css .pc-care__num), the word in the label voice */
.pn-lb .pc-care__num{color:var(--anthracite)}
.pn-lb .pc-care h3{margin-top:8px}
/* 5 stamp family: the calculator's stamp under the stack (the hero keeps DO NOT WASH, the seller cards TOP RATED) */
.pn-lb .pn-lp-calc{overflow:hidden}
.pn-lb .pn-lp-calc__stamp{position:absolute;right:22px;bottom:150px;z-index:2}   /* beside the sum, clear of the copy and the stack */
@media (min-width:701px){.pn-lb .pn-lp-calc > small{padding-right:104px}}   /* art-director pass 13.10.: the stamp lay over the end of the note */
/* 7 hand notes: one size, one place (after the lede), never more than three on the page */
.pn-lb .pc-hand{font-size:24px}
/* 8 the marker underline is gone: the tape is the one highlight */
.pn-lb .pn-lp-proof__h em,[data-theme="dark"] .pn-lb .pn-lp-proof__h em{background:none;padding:0}
/* 9 final CTA: the wordmark stamp over the head (was typo c only) */
/* 10 guides index: cream paper cards with a Pirata numeral, back in the paper family */
.pn-lb .pn-lp-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:lpg}
.pn-lb .pn-lp-mcard{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;row-gap:0;padding:22px 20px 22px;border:0;border-radius:12px 12px 16px 16px;background:var(--cream);color:var(--anthracite);box-shadow:var(--lp-step-sh)}
.pn-lb .pn-lp-mcard:first-child{border-top:0}
.pn-lb .pn-lp-mcard::before{content:counter(lpg,decimal-leading-zero);grid-column:1;font:700 30px/1 var(--font-display);font-variant-numeric:normal;letter-spacing:-.01em;color:var(--anthracite);margin-bottom:10px}
.pn-lb .pn-lp-mcard__p{color:var(--muted-lt)}
.pn-lb .pn-lp-mcard__more{color:var(--anthracite)}
.pn-lb .pn-lp-mcard:hover{background:var(--cream)}
/* 11 the guide figure stands on a filled arch (the brand's arch, dimmer), not a contour */
.pn-lb .pn-lp-host::before{background:var(--lp-arch);box-shadow:var(--lp-arch-glow)}
/* 12 the three sell boxes on one paper surface (template: .pc-box--cr); the calculator's controls in ink */
.pn-lb .pc-box--cr .pn-lp-box__p,.pn-lb .pc-box--cr .pc-priv small,.pn-lb .pn-lp-calc small{color:var(--muted-lt)}
.pn-lb .pc-box--cr .pc-priv b{color:var(--anthracite)}
.pn-lb .pn-lp-calc .pc-stepper button{color:var(--anthracite);border-color:transparent;background:var(--obj-fill)}
.pn-lb .pn-lp-calc .pc-stepper button:hover{border-color:transparent;background:var(--media-dim)}
.pn-lb .pn-lp-calc .pn-lp-calc__res{color:var(--pink-glyph)}
@media (max-width:700px){
  .pn-lb .pn-lp-mgrid{grid-template-columns:minmax(0,1fr)}
  .pn-lb .pn-lp-mcard{padding:18px 16px 18px}
  .pn-lb .pn-lp-mcard::before{font-size:24px}
}

/* ---- homepage v2 (owner brief 10.10., lib/landing.php pnew_lb_v2): the stats strip, eight listings 4 across, eight sellers 4 x 2, three seller benefits, the folded guide, the FAQ ---- */
.pn-lp-stats{position:relative;z-index:2;padding:20px 0 4px;background:var(--bg)}
.pn-lp-stats__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pn-lp-stats__i{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:16px;background:var(--surface)}
.pn-lp-stats__i b{font:700 24px/1.15 var(--font-display);color:var(--ink)}
.pn-lp-stats__i span{font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-lb .pn-lp-sellgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;margin-inline:0;padding-inline:0;justify-content:stretch}
.pn-lb .pn-lp-sellgrid > .pc-scard{width:auto}
.pn-lp-sellben__premium{margin:18px 0 0;max-width:720px;font:400 15px/1.55 var(--font-sans)}
.pn-lp-topics__row--v2{margin:16px 0 20px}
.pn-laundry__rest--v2{margin-top:20px}
.pn-laundry__rest--v2[open] > summary{display:inline-flex}
.pn-lp-faq{position:relative;padding:var(--lp-pad) 0;background:var(--bg);color:var(--ink)}
.pn-lp-faq__wrap{max-width:860px}
.pn-lp-faq__h{margin:0 0 20px}
.pn-lp-faq__i{border-radius:12px;background:var(--surface);margin-top:8px}
.pn-lp-faq__i > summary{cursor:pointer;padding:14px 18px;font:600 16px/1.4 var(--font-sans);list-style:none}
.pn-lp-faq__i > summary::-webkit-details-marker{display:none}
.pn-lp-faq__i > summary::after{content:"+";float:right;font-weight:400}
.pn-lp-faq__i[open] > summary::after{content:"\2212"}
.pn-lp-faq__i > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-lp-faq__i > p{margin:0;padding:0 18px 16px;font:400 15px/1.6 var(--font-sans);color:var(--ink-2)}
.pn-lp-faq__more{margin:20px 0 0}
@media (min-width:701px){
  .pn-lb .pn-lp-pairs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-lb .pn-lp-sellgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .pn-lb .pn-lp-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-lb .pn-lp-boxes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  /* phones: the page must get shorter, not longer — three stats cells in one row, the sellers as one swipe row, the buying steps and the guide cards 2 x 2 */
  .pn-lp-stats{padding:14px 0 0}
  .pn-lp-stats__row{gap:8px}
  .pn-lp-stats__i{padding:10px 10px 11px}
  .pn-lp-stats__i b{font-size:18px}
  .pn-lp-stats__i span{font-size:12px;line-height:1.3}
  .pn-lb--v2 .pn-lp-sellgrid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .pn-lb--v2 .pn-lp-sellgrid::-webkit-scrollbar{display:none}
  .pn-lb--v2 .pn-lp-sellgrid > .pc-scard{flex:none;width:148px;scroll-snap-align:start}
  .pn-lb--v2 #how .pn-lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pn-lb--v2 .pn-lp-mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
/* Raw backgrounds (owner 12.10., mockup design/v8/raw-backgrounds.html; lib/landing.php pnew_raw_bg(), switch raw_bg):
   one large flash photo is half of an area and fades out towards the text only. No cut-out, so it works on any area
   colour; the crop per slot is object-position. --raw-h: the height the photo covers (a long block shows it at its top). */
.pn-raw{position:relative;overflow:hidden;isolation:isolate;--raw-h:100%;--raw-w:66%}
.pn-raw > .pc-wrap{position:relative;z-index:1}
.pn-raw__bg{position:absolute;z-index:0;top:0;right:0;width:var(--raw-w);height:var(--raw-h);max-width:none;object-fit:cover;object-position:50% 30%;filter:contrast(1.14) saturate(1.12) brightness(1.04);
  -webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) 34%),linear-gradient(to right,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,var(--ink) 34%),linear-gradient(to right,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent);mask-composite:intersect}
.pn-raw--l .pn-raw__bg{right:auto;left:0;
  -webkit-mask-image:linear-gradient(to left,transparent 0,var(--ink) 34%),linear-gradient(to left,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent);
  mask-image:linear-gradient(to left,transparent 0,var(--ink) 34%),linear-gradient(to left,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent)}
/* the loop over the still (pnew_raw_video): invisible until landing.js has a playable frame; reduced motion keeps the photo */
.pn-raw__vid{opacity:0;transition:opacity .6s ease}
.pn-raw__vid.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.pn-raw__vid{display:none}}
.pn-raw__illu{position:absolute;z-index:1;top:calc(var(--raw-h) - 34px);right:20px;color:var(--dk-ink)}
.pn-raw--l .pn-raw__illu{right:auto;left:20px}
/* owner 12.10. ("the fade is too abrupt"): the fade is two gradients of different length multiplied (soft start, no new colour), and on the dark
   areas the photo's black takes the area colour (lighten), so the photo has no edge at all */
.pn-raw--hero .pn-raw__bg,.pn-raw--guides .pn-raw__bg,.pn-raw--buy .pn-raw__bg{mix-blend-mode:lighten}
/* hero: an area with a photo is dark in both themes (the flash look lives on black) */
.pn-raw--hero{--bg:var(--dk-bg);--ink:var(--dk-ink);--ink-2:var(--dk-ink-2);background:var(--dk-bg);color:var(--dk-ink);padding-top:0}
.pn-raw--hero .pn-lp-hero__wrap{grid-template-columns:minmax(0,560px);align-items:center;min-height:660px}
.pn-raw--hero .pn-lp-hero__copy{padding:72px 0}
.pn-raw__bg--hero{object-position:6% 28%}
/* buyer block: the photo left, the head and the lede in the right half; the steps below run on the plain block */
.pn-raw--buy{--raw-h:640px;--raw-w:62%}
.pn-raw--buy .pn-lp-buy__top{grid-template-columns:minmax(0,1fr) minmax(0,520px);min-height:500px;align-items:center}
.pn-raw--buy .pn-lp-buy__main{grid-column:2}
.pn-raw__bg--buy{object-position:18% 30%}
/* seller block (pink): the photo's dark room fades into the pink */
.pn-raw--sell{--raw-h:620px;--raw-w:60%}
.pn-raw--sell .pn-lp-sell__top{grid-template-columns:minmax(0,560px);grid-template-areas:"head" "lede" "proof";min-height:470px;align-content:center}
.pn-raw__bg--sell{object-position:38% 30%}
/* guides index head: the same dark area as the landing hero */
.pn-raw--guides{--bg:var(--dk-bg);--ink:var(--dk-ink);--ink-2:var(--dk-ink-2);background:var(--dk-bg);color:var(--dk-ink);--raw-w:60%}
.pn-raw--guides .pn-gdx__head{display:grid;align-content:center;min-height:440px;padding-bottom:56px}
.pn-raw--guides .pn-gdx__head > *{max-width:560px}
.pn-raw__bg--guides{object-position:45% 30%}
/* 404: the photo is the top of the card, faded out downwards only */
.pn-raw--nf{height:320px;width:100%;align-self:stretch;margin:0 0 6px;border-radius:16px;--raw-w:100%}
.pn-raw--nf .pn-raw__bg{-webkit-mask-image:linear-gradient(to bottom,var(--ink) 62%,transparent);mask-image:linear-gradient(to bottom,var(--ink) 62%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
.pn-raw__bg--nf{object-position:14% 30%}
/* Alt look (owner 12.10. evening, pnew_alt_on()): the hero carries a lying cut-out figure instead of the photo: it lies on the
   hero's lower edge in the right two thirds, the copy stands left. The pink room pictures of the other slots are daylight
   shots: no flash grading, their own crops. */
.pn-raw--hero.pn-alt{--bg:inherit;--ink:inherit;--ink-2:inherit;background:var(--lp-grain) 0 0/160px 160px,var(--lp-hero-bg);color:var(--ink)}   /* a cut-out needs no black ground: this hero follows the theme; the figure ends on the right where the navigation ends, and is as large as the copy beside it allows (owner 12.10.: "kann groesser") */
/* the hero's moving ground (owner 12.10. evening, mockup design/v8/hero-anim.html, he chose 4 "Spot"): one soft light cone from above
   swings slowly over her; the grain is the hero's own. Still with reduced motion. */
.pn-alt__spot{position:absolute;inset:0;z-index:0;pointer-events:none;background:conic-gradient(from 196deg at 78% -12%,transparent 0 6deg,var(--alt-spot-2) 14deg,var(--alt-spot) 24deg,var(--alt-spot-2) 34deg,transparent 44deg);filter:blur(22px);transform-origin:78% -12%;animation:pnAltSpot 13s ease-in-out infinite alternate}
@keyframes pnAltSpot{from{transform:rotate(-9deg)}to{transform:rotate(11deg)}}
@media (prefers-reduced-motion:reduce){.pn-alt__spot{animation:none}}
.pn-alt .pn-alt__art{position:absolute;z-index:0;right:max(var(--gutter),calc((100% - var(--main-max)) / 2));bottom:26px;width:min(64%,1140px);filter:drop-shadow(0 22px 28px var(--ground-shadow))}
.pn-alt .pn-alt__fig{display:block;width:100%;height:auto;max-width:none;filter:var(--lp-cut-rim)}   /* dark theme: the rim keeps her black plush ears and socks readable */
.pn-alt .pn-raw__illu{top:auto;bottom:10px;color:var(--ink-2)}
.pn-raw__bg--alt{filter:none}
.pn-raw__bg--alt.pn-raw__bg--buy{object-position:10% 40%}
.pn-raw__bg--alt.pn-raw__bg--sell{object-position:70% 40%}
.pn-raw__bg--alt.pn-raw__bg--guides{object-position:70% 40%}
.pn-raw__bg--alt.pn-raw__bg--nf{object-position:20% 22%}
@media (max-width:700px){
  /* phones: the photo lies on top over the full width and runs out downwards into the text */
  .pn-raw{--raw-w:100%}
  .pn-raw__bg,.pn-raw--l .pn-raw__bg{left:0;right:0;width:100%;height:var(--raw-ph,340px);
    -webkit-mask-image:linear-gradient(to bottom,var(--ink) 44%,transparent),linear-gradient(to bottom,var(--ink) 66%,transparent);mask-image:linear-gradient(to bottom,var(--ink) 44%,transparent),linear-gradient(to bottom,var(--ink) 66%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
  .pn-raw__illu{display:none}
  .pn-raw > .pc-wrap{padding-top:calc(var(--raw-ph,340px) - 40px)}
  .pn-raw--hero .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-raw--hero .pn-lp-hero__copy{padding:0 0 44px}
  .pn-raw--buy .pn-lp-buy__top{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-raw--buy .pn-lp-buy__main{grid-column:1}
  .pn-raw--buy,.pn-raw--sell{padding-top:0}
  .pn-raw--sell .pn-lp-sell__top{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-raw__bg--hero{object-position:50% 25%}
  .pn-raw__bg--buy{object-position:22% 25%}
  .pn-raw__bg--sell{object-position:38% 25%}
  .pn-raw--guides .pn-gdx__head{min-height:0;padding-bottom:36px}
  .pn-raw--nf{height:240px}
  .pn-raw--nf > .pn-raw__bg{height:100%}
}
@media (max-width:700px){
  .pn-alt{--raw-ph:312px}
  .pn-alt__spot{background:conic-gradient(from 190deg at 62% -6%,transparent 0 8deg,var(--alt-spot-2) 18deg,var(--alt-spot) 30deg,var(--alt-spot-2) 42deg,transparent 52deg);transform-origin:62% -6%;height:420px;bottom:auto}
  .pn-alt .pn-alt__art{left:50%;right:auto;top:18px;bottom:auto;transform:translateX(-58%);width:min(118%,520px)}   /* phones: larger than the screen is wide, her socks run off the left edge */
  .pn-raw__bg--alt.pn-raw__bg--buy{object-position:18% 30%}
  .pn-raw__bg--alt.pn-raw__bg--sell,.pn-raw__bg--alt.pn-raw__bg--guides{object-position:72% 30%}
}

/* ==========================================================================
   Home audit 13.10. (owner: "ja bau das"): UX expert + art director on the guest home page. Their points 1, 2, 4, 5,
   6, 11 (the ways to sign up, the first phone screen), 23 (card titles) and 49 (four layout faults).
   ========================================================================== */
/* hero: the seller way and the proof under the doors are text — the outlined chip read as a third button */
.pn-lp-hero__sell{margin:16px 0 0;font:500 15px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-lp-hero__facts{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
.pn-lp-hero__fact{display:block;font:500 15px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-lp-hero__fact--lock{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
/* final doors: browsing is the quiet way under the sign-up */
.pn-lp-door__more{margin:14px 0 0}
/* reviews end with the buyer sign-up on phones (below); wide screens keep the header's door in view */
.pn-lp-proof__cta{display:none;margin:0}
/* the home page's listing cards: two title lines, so "worn 3 days" is read (the card keeps its fixed 3:4, the caption
   sits on the photo). Every other grid keeps the one line of the card spec (components.css, adcard2 03.10.) */
.pn-lp-pairs .pn-prodcard .pc-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;text-wrap:wrap;text-overflow:clip;overflow-wrap:anywhere}
/* the two figures of the buy block stay side by side: the second one wrapped under the first and left the divider alone */
@media (min-width:1101px){
  .pn-lp-buy .pn-lp-buy__tiles{flex-wrap:nowrap}
  .pn-lp-buy .pc-tile{flex:0 1 auto}
}
/* the three safety cards fill their row (they sat in the four-column grid of the steps and left a hole) */
@media (min-width:701px){.pn-lp-how--safe .pn-lp-steps,#how .pn-lp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* UX 17.10. #18: three buying steps too */
/* the phone bar: hidden unless the script shows it */
.pn-lbsticky{display:none}
@media (max-width:700px){
  /* first screen: no empty band under the hero, the listings' lede goes (the cards say it) */
  .pn-lp-real.pn-pairs .pc-sechead p,.pn-lp-hero + .pn-lp-real.pn-pairs .pc-sechead .pc-kicker{display:none}
  .pn-lb .pn-raw--hero.pn-alt .pn-lp-hero__copy{padding-bottom:20px}
  .pn-lb .pn-lp-hero + .pn-lp-real.pn-pairs{padding-top:22px}
  .pn-lp-hero + .pn-lp-real.pn-pairs .pc-sechead{margin-bottom:14px}
  .pn-lp-hero + .pn-lp-real.pn-pairs .pc-sechead .pc-h-m{margin-top:0}
  .pn-lp-hero__sell{margin-top:14px}
  .pn-lp-proof__cta{display:block}
  .pn-lp-proof__cta .pc-btn{display:flex;width:100%;justify-content:center}
  /* the pegged pair of the price box hangs clear of the full-width report button above it */
  .pn-lp-report .pn-lp-pbox{margin-top:104px}
  /* rows that scroll sideways fade out at the edge instead of ending in half a word */
  .pn-lp-browse__row,.pn-lp-sellrail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 36px),transparent);mask-image:linear-gradient(to right,black calc(100% - 36px),transparent)}
  .pn-lbsticky:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:flex;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);box-shadow:var(--sh-float)}
  .pn-lbsticky .pc-btn{flex:1 1 0;min-width:0;min-height:48px;justify-content:center;white-space:nowrap}
  /* UX 17.10. #1: no extra room in the footer — the bar hides while the footer is on screen (landing.js) */
  /* UX 17.10. #16: shorter on a phone (the price box repeats the buy tile, the review note the lede; lower pictures) */
  .pn-lb .pn-lp-report .pn-lp-pbox,.pn-lb .pn-lp-proof__note{display:none}
  .pn-lb .pn-lp-buy__art{height:220px}
  .pn-lb .pn-lp-sell__art{height:220px;min-height:0}
  .pn-lb :is(.pn-raw--buy,.pn-raw--sell){--raw-ph:240px}
}

/* UX 17.10. #16 follow-up (owner 17.10.: "ja", about eight phone screens instead of eleven): phones only, denser blocks.
   Every word stays in the HTML (the SEO text is never display:none); on phones the calculator, the extra receipt quotes,
   the guide's brand illustration and the handwritten privacy sign-off go; desktop is untouched. */
@media (max-width:700px){
  .pn-lb{--lp-pad:32px}
  .pn-lb :is(.pn-raw--buy,.pn-raw--sell){--raw-ph:180px}
  /* buy: two figures in one low row, the steps as rows (number | head + line), the safety trio as one list */
  .pn-lb .pn-lp-buy .pc-tile b{font-size:30px}
  .pn-lb .pn-lp-buy .pc-tile p{margin-top:4px}
  .pn-lb .pn-lp-buy__jess{height:250px;bottom:-30px}   /* inside her 220 px box: she stood over the second figure */
  .pn-lb .pn-lp-sell__mara{height:236px}
  .pn-lb .pn-lp-how__h{margin-bottom:14px}
  .pn-lb .pn-lp-buy .pn-lp-step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:10px 14px 11px 10px}
  .pn-lb .pn-lp-buy .pn-lp-step::before{inset:4px}
  .pn-lb .pn-lp-buy .pn-lp-step .pc-care__n{grid-row:1 / 3;flex-direction:column;align-items:center;gap:3px;padding-top:2px}
  .pn-lb .pn-lp-buy .pn-lp-step h3{margin:0 0 2px}
  .pn-lb .pn-lp-buy .pn-lp-step p{font-size:13px;line-height:1.45}   /* the safety rows too (.pn-lp-step) */
  .pn-lb .pn-lp-how--safe .pn-lp-steps{gap:0;border-radius:12px 12px 16px 16px;background:var(--cream);overflow:hidden}
  .pn-lb .pn-lp-buy .pn-lp-safe__i{display:block;padding:10px 16px 11px;border-radius:0;background:none;box-shadow:none}
  .pn-lb .pn-lp-buy .pn-lp-safe__i::before{display:none}
  .pn-lb .pn-lp-buy .pn-lp-safe__i + .pn-lp-safe__i{border-top:1px solid var(--line)}
  .pn-lb .pn-lp-buy .pn-lp-cta{margin-top:28px;row-gap:10px}
  /* reviews: one quote on the receipt (the others stay for wide screens) */
  .pn-lb .pn-lp-proof__p{margin-top:12px}
  .pn-lb .pn-lp-proof__links{margin-top:12px}
  .pn-lb .pn-lp-receipt .pn-quotes > li:nth-child(n+2){display:none}
  /* sell: no calculator, the privacy box as four short rows */
  .pn-lb .pn-lp-sell__head{padding-top:0}
  .pn-lb .pn-lp-sell__head > .pn-lp-sell__h{margin-bottom:16px}
  .pn-lb .pn-lp-sell__lede{margin-bottom:16px}
  .pn-lb .pn-lp-calc,.pn-lb .pn-lp-priv > .pc-hand{display:none}
  .pn-lb .pn-lp-boxes{margin-top:24px}
  .pn-lb .pn-lp-priv .pc-box__h{margin-bottom:8px}
  .pn-lb .pn-lp-priv .pn-lp-box__p{margin:0 0 10px;font-size:15px}
  .pn-lb .pn-lp-priv .pc-priv{gap:0}
  .pn-lb .pn-lp-priv .pc-priv > li{padding:7px 0;border-top:1px solid var(--line);line-height:1.4}
  .pn-lb .pn-lp-priv .pc-priv b{display:inline}
  .pn-lb .pn-lp-priv .pc-priv b::after{content:" · "}
  /* guide: the kicker alone over the text, the topics as one swipe row */
  .pn-lb .pn-lp-lgrid--guide{margin-top:16px}
  .pn-lb .pn-lp-laundry__lede{font-size:16px;margin-bottom:16px}
  .pn-lb .pn-lp-topics{margin-bottom:16px}
  .pn-lb .pn-lp-topics__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(to right,black calc(100% - 36px),transparent);mask-image:linear-gradient(to right,black calc(100% - 36px),transparent)}
  .pn-lb .pn-lp-topics__row::-webkit-scrollbar{display:none}
  .pn-lb .pn-lp-topics__row > li{flex:none}
  .pn-lb .pn-lp-laundry__close{margin-top:20px}
  /* prices + the last block: the same rhythm, smaller doors */
  .pn-lb .pn-lp-report__cta{margin-top:18px}
  .pn-lb .pn-lp-doors{gap:12px}
  .pn-lb .pn-lp-doors .pc-door{padding:20px;gap:8px}
  .pn-lb .pn-lp-doors .pc-door p{min-height:0;margin-bottom:4px}
  .pn-lb .pn-lp-doors .pn-lbdoor__cta{margin-top:8px}
}

/* ---------- design system P8 (03.11.): the sell / buy guides, one layout on every host (templates/money.php +
   cm_guide.php, audit HOME-089 / 099 / 118). One ground (no darker hero band with a glow, no surface band under the
   guide): the boxes are member panels on the ground (the guest layer's .pc-box / .pc-pbox / .pc-toc = surface 1).
   Hero = crumbs, kicker, h1, the plain line, the lede, the key pair (primary + member secondary). The rail = TOC, the
   closing call as a panel (its head, its line, one key), the related rows (a chevron, never "→").
   ".pn-gd.pn-mpg" outranks guide.css's ".pn-gd …" frame rules where this page differs. ---------- */
.pn-gd.pn-mpg .pn-lpm-hero{padding-top:var(--space-12);background:var(--bg)}
.pn-gd.pn-mpg .pn-gd-hero__copy{padding-bottom:var(--space-8)}
.pn-gd.pn-mpg .pn-lpm-hero__h{margin:var(--space-4) 0 var(--space-3);max-width:30ch;text-wrap:balance}
.pn-gd.pn-mpg .pn-lpm-hero__k{margin:0 0 var(--space-3);font:var(--type-strong);color:var(--ink)}
.pn-gd.pn-mpg .pn-lpm-hero__lede{margin:0;max-width:var(--measure-lede,560px);font:var(--type-prose);color:var(--ink-2)}
.pn-gd.pn-mpg .pn-lpm-hero .pn-lp-ctas{gap:var(--space-3);margin-top:var(--space-6)}
.pn-gd.pn-mpg .pn-lpm-hero .pn-lp-ctas:empty{display:none}
@media (min-width:701px){.pn-gd.pn-mpg .pn-lpm-hero .pn-lp-ctas{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr}}   /* the pair as wide as its longer key: the primary never the smaller one (HOME-120) */
.pn-lpm-main{background:var(--bg);color:var(--ink);padding:var(--space-8) 0 var(--space-16)}
.pn-lpm-main .pc-toc{margin-top:0;align-self:start}
.pn-lpm-main .pc-toc a{color:var(--ink)}
.pn-gd.pn-mpg .pn-lpm-rail{gap:var(--stack-gap)}
.pn-gd.pn-mpg .pn-lpm-rail .pc-box{padding:var(--panel-pad);border-radius:var(--r-l)}
.pn-lpm-ctabox .pn-lpm-ctabox__h{margin:0 0 var(--space-2);font:var(--type-title);color:var(--ink);text-wrap:balance}
.pn-gd.pn-mpg .pn-lpm-ctabox > p{margin:0;font:var(--type-body);color:var(--ink-2)}
/* the closing call ends the text column (both templates): a member panel, the key pair inline, full width on phones */
.pn-gd.pn-mpg .pn-lpm-ctabox{max-width:var(--measure-prose);margin:var(--space-8) 0 0;padding:var(--panel-pad);border-radius:var(--r-l)}
.pn-gd.pn-mpg .pn-lpm-ctabox > *{margin-top:0;margin-bottom:0}
.pn-gd.pn-mpg .pn-lpm-ctabox .pc-btn{margin:var(--space-4) var(--space-2) 0 0;font:var(--type-strong);text-decoration:none}
.pn-gd.pn-mpg .pn-lpm-ctabox > .pn-lpm-ctabox__fine{margin-top:var(--space-3);font:var(--type-meta)}
.pn-gd.pn-mpg .pn-lpm-rail .pc-pbox li a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--tap);margin:0 calc(-1 * var(--space-2));padding:var(--space-2);border-radius:var(--r-m);font:var(--type-strong);color:var(--ink)}
.pn-gd.pn-mpg .pn-lpm-rail .pc-pbox li a:hover{background:var(--surface-2)}
.pn-gd.pn-mpg .pn-lpm-rail .pc-pbox li a > .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--glyph-off)}
.pn-gd.pn-mpg .pn-lpm-rail .pc-pbox__t{font:var(--type-label);color:var(--ink-2)}
/* steps: three member panels in one row (number label 12, head 18, line 15), no props */
.pn-gd.pn-mpg .pn-lpm-ship{padding:var(--space-8) 0;background:var(--bg)}
.pn-gd.pn-mpg .pn-lpm-ship__h{margin:0 0 var(--head-gap)}
.pn-gd.pn-mpg .pn-lpm-ship .pc-steps-grid{gap:var(--stack-gap);margin-top:0}
.pn-gd.pn-mpg .pn-lpm-ship .pc-care{padding:var(--panel-pad);border-radius:var(--r-l)}
.pn-gd.pn-mpg .pn-lpm-ship .pc-care h3{margin:var(--space-2) 0 var(--space-1);font:var(--type-title)}
.pn-gd.pn-mpg .pn-lpm-ship .pc-care p{margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-gd.pn-mpg .pn-lpm-ship .pc-care__n{font:var(--type-cap);color:var(--ink-2)}
/* one type scale on both guide templates (audit HOME-103, §13): every section h2 24/30 (phones 18/24), questions and
   panel heads 18/24, the text 16/26, the TOC 13/600 (phones 15 in 44 px rows) */
.pn-gd.pn-mpg :is(.pn-gd-body.pn-prose > h2,.pn-mp__sec > .pn-mp__h,.pn-lpm-ship__h,.pn-gd-faq .pn-lpm-faq__h){font:var(--type-h1);letter-spacing:-.01em;text-wrap:balance}
.pn-gd.pn-mpg :is(.pn-gd-body.pn-prose > h3,.pn-mp__sec .pn-mp__q,.pn-gd-faq summary,.pn-gd-faq .pn-lpm-faq__q){font:var(--type-title)}
.pn-gd.pn-mpg :is(.pn-gd-body.pn-prose,.pn-lpm-body) :is(p,li){font:var(--type-prose)}
.pn-gd.pn-mpg :is(.pn-gd-body.pn-prose,.pn-lpm-body) :is(.pn-mp__list--steps,.pn-gd-body > ol) > li{font:var(--type-body)}
.pn-gd.pn-mpg .pn-gd-faq__a > *{font:var(--type-prose)}
.pn-gd.pn-mpg .pc-toc li a{font:var(--type-label)}
.pn-gd.pn-mpg .pc-toc > b{font:var(--type-label);color:var(--ink-2)}
.pn-gd.pn-mpg .pn-gd-callout{font:var(--type-body)}
.pn-gd.pn-mpg .pn-gd-callout p{font:var(--type-body)}
@media (max-width:700px){
  .pn-gd.pn-mpg :is(.pn-gd-body.pn-prose > h2,.pn-mp__sec > .pn-mp__h,.pn-lpm-ship__h,.pn-gd-faq .pn-lpm-faq__h){font:var(--type-title)}
}
/* numerals (TOC, numbered steps) in ink, never pink (§2.3); the steps are notes: surface 2 on the ground's panel tone */
.pn-gd.pn-mpg .pc-toc li a::before,.pn-gd.pn-mpg .pn-mp__list--steps > li::before,.pn-gd.pn-mpg .pn-gd-body > ol > li::before{color:var(--ink-2);font:var(--type-label);font-variant-numeric:tabular-nums}
.pn-gd.pn-mpg :is(.pn-mp__list--steps,.pn-gd-body > ol) > li{padding:var(--space-3) var(--space-4) var(--space-3) var(--space-12);border-radius:var(--r-m);background:var(--surface);font:var(--type-body)}
.pn-gd.pn-mpg :is(.pn-mp__list--steps,.pn-gd-body > ol) > li::before{left:var(--space-4);top:var(--space-3)}
/* "What should a post tell you?": her questions as member chips (not links), the label 13 */
.pn-mp__chips .pn-glabel{margin:0 0 var(--space-2);font:var(--type-label);color:var(--ink-2)}
.pn-mp__chips ul{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-mp__chips li{margin:0;padding:0}
.pn-mp__chips li::before{content:none}
.pn-mp__ask.pc-chip{cursor:default;white-space:normal;text-align:left}
/* the FAQ on the ground, its questions as member panels with a 44 px summary row */
.pn-gd.pn-mpg .pn-gd-faq{padding:0 0 var(--space-16);background:var(--bg)}
.pn-gd.pn-mpg .pn-gd-faq details{border-radius:var(--r-l)}
.pn-gd.pn-mpg .pn-gd-faq summary{min-height:var(--tap);align-items:center}
.pn-gd.pn-mpg .pn-gd-faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (max-width:700px){
  .pn-gd.pn-mpg .pn-lpm-hero{padding-top:var(--space-6)}
  .pn-gd.pn-mpg .pn-lpm-hero .pn-lp-ctas{flex-direction:column}
  .pn-gd.pn-mpg .pn-lpm-hero .pn-lp-ctas > .pc-btn{width:100%}
  .pn-gd.pn-mpg .pn-lpm-ctabox .pc-btn{display:flex;width:100%;margin-right:0}
  .pn-lpm-main{padding:var(--space-6) 0 var(--space-12)}
  .pn-gd.pn-mpg .pn-lpm-ship .pc-steps-grid{grid-template-columns:minmax(0,1fr)}
  /* phone tap targets (audit HOME-126): the TOC rows and the rail rows 44 */
  .pn-gd.pn-mpg .pc-toc li a{min-height:var(--tap);padding-block:var(--space-2);font:var(--type-strong)}
}

/* ---------- the guest home (templates/plastik/home.php + plastik/reviews.php, reg_cta.php, hs_*.php): one layout system
   (owner 04.11.: «unruhig, kein Rhythmus, überall kleine Schrift … wuchtiger und besser lesbar, mit Konzept»; art direction
   rhythm pass, docs/design-system.md §13b). Every element, picture, link and text of the art direction (§13a) stays; what
   changed is the order of space and type:
   - one column: the 1372 column of the member area, gutter 56 / 16; every head starts on its left edge (no right-hand or
     centred heads, no zig-zag of the copy). Two-column sections all split 5 : 7 (copy left, picture right); the art sits in
     the centre of its column, never pinned to the far edge.
   - one section build: head (kicker, h2, lede) → content → action. One section step (--hm-sec 120 / 72), head to content
     --hm-gap (56 / 32), content to action --hm-act (48 / 32); two sections on the same ground share one step, never two.
   - one type ladder for the home (desktop / phone): display 800 64/68 · 40/44; section head 800 44/50 · 30/36; panel head
     700 30/36 · 24/30; item head 700 20/28 · 18/26; lede 400 20/32 · 20/30; body 400 18/28 (both); small 16/24 · 15/22.
     Nothing under 15 px but the device screens' own miniature UI (plastik.css, decoration).
   - two item patterns: a list row (well left, text right) inside a copy column, a grid item (well on top) in a grid of
     columns. Keys 56 high (52 on phones, full width). Wells 48 with the 24 glyph.
   Every selector is ".pn-lb--cm :is(…)": tools/css_guest.php builds the guest bundles from the classes of the templates it
   scans and never reads templates/plastik/*.php; .pn-lb--cm (the home's root) is a class only the home bundle keeps, so these
   rules ride in the home bundle (and so in pnew-plastik.css), not in every guest page's. Tonal surfaces only, no edge. */
.pn-lb--cm:is(.pn-hm){
  --hm-sec: 120px; --hm-gap: 56px; --hm-act: 48px; --hm-col: 64px; --hm-grid-gap: 40px 48px; --hm-sub: 96px; --hm-pad: 40px;
  --hm-h1-font: 800 64px/68px var(--body); --hm-h2-font: 800 44px/50px var(--body); --hm-h3-font: 700 30px/36px var(--body);
  --hm-h4-font: 700 20px/28px var(--body); --hm-lede-font: 400 20px/32px var(--body); --hm-body-font: 400 18px/28px var(--body);
  --hm-small-font: 400 16px/24px var(--body); --hm-label-font: 600 16px/24px var(--body); --hm-key-font: 600 18px/24px var(--body);
  --hm-key-h: 56px; --hm-well: 48px;
  overflow-x:clip;   /* the light around the art never widens the page */
}
@media (max-width:700px){
  .pn-lb--cm:is(.pn-hm){
    --hm-sec: 72px; --hm-gap: 32px; --hm-act: 32px; --hm-col: 32px; --hm-grid-gap: 28px; --hm-sub: 56px; --hm-pad: 24px;
    --hm-h1-font: 800 40px/44px var(--body); --hm-h2-font: 800 30px/36px var(--body); --hm-h3-font: 700 24px/30px var(--body);
    --hm-h4-font: 700 18px/26px var(--body); --hm-lede-font: 400 20px/30px var(--body);
    --hm-small-font: 400 15px/22px var(--body); --hm-label-font: 600 15px/22px var(--body); --hm-key-h: 52px; --hm-well: 44px;
  }
}
.pn-lb--cm:is(.pn-hm) :is(ol,ul){margin:0;padding:0;list-style:none}
.pn-lb--cm:is(.pn-hm) li::before{content:none}

/* sections: one step; a band (surface) carries its own step top and bottom, two ground sections share one */
.pn-lb--cm :is(.pn-hm-sec){padding:var(--hm-sec) 0;background:var(--bg);color:var(--ink);scroll-margin-top:var(--header-h)}
.pn-lb--cm :is(.pn-hm-sec:not(.pn-hm-band) + .pn-hm-sec:not(.pn-hm-band)){padding-top:0}
.pn-lb--cm :is(.pn-hm-band){background:var(--surface)}
.pn-lb--cm :is(.pn-hm-band .pn-hm-card,.pn-hm-band .pn-hm-note){background:var(--surface-2)}
.pn-lb--cm :is(.pn-hm-band .pn-hm-well,.pn-hm-band .pn-hm-rows .pn-hm-well){background:var(--surface-3)}

/* the head: kicker, h2, lede — on the column's left edge, one measure */
.pn-lb--cm :is(.pn-hm-head){max-width:880px;min-width:0}
.pn-lb--cm :is(.pn-hm-head) .pc-kicker{display:block;margin:0 0 var(--space-3);font:var(--hm-label-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-head__h){margin:0;font:var(--hm-h2-font);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pn-lb--cm :is(.pn-hm-head__p){margin:var(--space-5) 0 0;max-width:680px;font:var(--hm-lede-font);color:var(--ink-2);text-wrap:pretty}
.pn-lb--cm :is(.pn-hm-head__p + .pn-hm-head__p){margin-top:var(--space-4)}
.pn-lb--cm:is(.pn-hm) :is(.pn-hm-head + *,.pn-hm-headrow + *){margin-top:var(--hm-gap)}   /* over the list reset above */
.pn-lb--cm:is(.pn-hm) :is(.pn-hm-head + .pn-hm-head__p){margin-top:var(--space-4)}   /* a second lede paragraph after the head (For women) */
.pn-lb--cm :is(.pn-hm-headrow){display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6)}
.pn-lb--cm :is(.pn-hm-headrow .pn-hm-head){flex:1 1 auto}
.pn-lb--cm :is(.pn-hm-headrow__go){flex:none}

/* actions: keys 56, the text links, fine print — always after the content, one gap */
.pn-lb--cm :is(.pn-hm-keys){display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);margin-top:var(--hm-act)}
.pn-lb--cm :is(.pn-hm-keys) .pc-btn{min-height:var(--hm-key-h);padding:0 var(--space-8);font:var(--hm-key-font);text-decoration:none}
.pn-lb--cm :is(.pn-hm-fine){margin:var(--space-4) 0 0;max-width:680px;font:var(--hm-small-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-links){display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);margin:var(--hm-act) 0 0}
.pn-lb--cm :is(.pn-hm-link){display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);font:var(--hm-label-font);font-size:18px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.pn-lb--cm :is(.pn-hm-link:hover){text-decoration-color:var(--ink)}
.pn-lb--cm :is(.pn-hm-keys .pn-hm-link){min-height:var(--hm-key-h)}
.pn-lb--cm :is(.pn-hm-link:focus-visible,.pn-hm-gcard:focus-visible,.pn-hm-faq__q:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}

/* wells: 48, the 24 glyph */
.pn-lb--cm :is(.pn-hm-well){display:inline-grid;place-items:center;flex:none;width:var(--hm-well);height:var(--hm-well);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-well) .pc-ico{width:var(--icon-l,24px);height:var(--icon-l,24px)}
.pn-lb--cm :is(.pn-hm-rows .pn-hm-well){background:var(--surface)}
.pn-lb--cm :is(.pn-hm-well--n){font:var(--hm-h4-font);color:var(--ink);font-variant-numeric:tabular-nums}

/* item pattern 1, the list row (in a copy column): well left, head + line right */
.pn-lb--cm :is(.pn-hm-rows){display:grid;gap:var(--space-8)}
.pn-lb--cm :is(.pn-hm-row){display:flex;align-items:flex-start;gap:var(--space-5)}
.pn-lb--cm :is(.pn-hm-row__h){display:block;padding-top:var(--space-2);font:var(--hm-h4-font);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-row__p){display:block;margin-top:var(--space-1);font:var(--hm-body-font);color:var(--ink-2)}
/* item pattern 2, the grid item (rows in columns): well on top */
.pn-lb--cm :is(.pn-hm-rows--2,.pn-hm-rows--3,.pn-hm-rows--5){grid-template-columns:minmax(0,1fr);gap:var(--hm-grid-gap)}
@media (min-width:701px){
  .pn-lb--cm :is(.pn-hm-rows--2 > .pn-hm-row,.pn-hm-rows--3 > .pn-hm-row,.pn-hm-rows--5 > .pn-hm-row){flex-direction:column;gap:var(--space-4)}
  .pn-lb--cm :is(.pn-hm-rows--2 .pn-hm-row__h,.pn-hm-rows--3 .pn-hm-row__h,.pn-hm-rows--5 .pn-hm-row__h){padding-top:0}
  .pn-lb--cm :is(.pn-hm-rows--2,.pn-hm-rows--3){grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-lb--cm :is(.pn-hm-rows--5){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1101px){
  .pn-lb--cm :is(.pn-hm-rows--3,.pn-hm-trust .pn-hm-rows--2){grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-lb--cm :is(.pn-hm-op .pn-hm-rows--2){grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-lb--cm :is(.pn-hm-rows--5){grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--space-8)}
}

/* cards (steps, quotes, safety tiles, guide cards, the join doors): member panels, 32 inside */
.pn-lb--cm :is(.pn-hm-grid){display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr)}
.pn-lb--cm :is(.pn-hm-card){display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);min-width:0;padding:var(--space-8);border-radius:var(--r-l);background:var(--surface);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-card__n){font:var(--hm-label-font);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-lb--cm :is(.pn-hm-card__h){margin:0;font:var(--hm-h4-font);color:var(--ink);text-wrap:balance}
.pn-lb--cm :is(.pn-hm-card__p){margin:0;max-width:60ch;font:var(--hm-body-font);color:var(--ink-2)}
@media (min-width:701px){.pn-lb--cm :is(.pn-hm-grid--2,.pn-hm-grid--3,.pn-hm-grid--4){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1101px){
  .pn-lb--cm :is(.pn-hm-grid--3){grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-lb--cm :is(.pn-hm-grid--4){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* the brand art (§13a): the light behind, never behind text, never on a card */
.pn-lb--cm :is(.pn-hm-art){position:relative;isolation:isolate}
.pn-lb--cm :is(.pn-hm-art)::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;background:var(--art-glow);pointer-events:none}
.pn-lb--cm :is(.pn-hm-art--left)::before{inset:-10% -14%}
.pn-lb--cm :is(.pn-hm-obj,.pn-hm-prop,.pn-hm-doll__img){display:block;object-fit:contain;filter:drop-shadow(var(--shadow-e1));pointer-events:none;user-select:none}
.pn-lb--cm :is(.pn-hm-obj){width:112px;height:112px}
.pn-lb--cm :is(.pn-hm-obj--narrow){width:128px;height:128px;margin:-8px 0 -8px -8px}   /* optical size: a narrow object gets +16 */
.pn-lb--cm :is(.pn-hm-obj--rosette,.pn-hm-obj--star){width:160px;height:160px;flex:none}

/* 1 hero (art director 04.11., owner «der bereich gefällt mir überhaupt nicht»): ONE opening. The picture full-bleed; its pink
   light spills onto the ground under it (--hero-blush, fading back to the page), so the copy reads as the picture's caption, not
   as a flat band. Under it one block, 7 : 5, the two columns share their top line (kicker = lede) and their bottom line (keys =
   the last fact row). Left: kicker, h1, the line, the two keys. Right: the lede in ink, the six facts as a quiet list (icon +
   words, no pill, no button look; the four safety facts link to the safety page). Phones: everything under the picture. */
.pn-lb--cm :is(.pn-hm-hero){--hm-hero-img:520px;position:relative;padding:0;background:linear-gradient(to bottom,transparent var(--hm-hero-img),var(--hero-blush) var(--hm-hero-img),transparent 100%),var(--bg);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-stage){position:relative;margin:0}
.pn-lb--cm :is(.pn-hm-stage picture){display:block}
.pn-lb--cm :is(.pn-hm-hero__img){display:block;width:100%;height:var(--hm-hero-img);object-fit:cover;object-position:50% 34%}
.pn-lb--cm :is(.pn-hm-stage)::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 72%,var(--hero-blush)),linear-gradient(to bottom,transparent 72%,var(--bg));pointer-events:none}   /* only the last edge fades (owner 04.11. «sieht beschissen aus»), into the blush the copy stands on: no seam */
.pn-lb--cm :is(.pn-hm-hero__wrap){position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10);margin-top:var(--space-8)}
.pn-lb--cm :is(.pn-hm-hero__copy,.pn-hm-hero__side){min-width:0}
.pn-lb--cm :is(.pn-hm-hero__copy) .pc-kicker{display:block;font:var(--hm-label-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-hero__h){margin:var(--space-3) 0 0;font:var(--hm-h1-font);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.pn-lb--cm :is(.pn-hm-hero__sub){margin:var(--space-4) 0 var(--space-8);font:var(--hm-h4-font);font-size:24px;line-height:32px;color:var(--ink)}
.pn-lb--cm :is(.pn-hm-hero .pn-hm-keys){margin-top:auto;column-gap:var(--space-4)}   /* the keys sit on the block's bottom line, with the last facts row */
.pn-lb--cm :is(.pn-hm-hero + .pn-hm-sec){padding-top:var(--hm-sub)}   /* the hero closes on its own bottom line: one sub-step to the next head, no dead band */
.pn-lb--cm :is(.pn-hm-hero__copy,.pn-hm-hero__side){display:flex;flex-direction:column}
.pn-lb--cm :is(.pn-hm-hero__side){justify-content:space-between;gap:var(--space-6)}
.pn-lb--cm :is(.pn-hm-hero__lede){margin:0;max-width:56ch;font:var(--hm-lede-font);color:var(--ink);text-wrap:pretty}
.pn-lb--cm :is(.pn-hm-hero ul.pn-hm-facts){display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:var(--space-2) var(--space-12);margin:0;padding:0;list-style:none}
.pn-lb--cm :is(.pn-hm-fact){display:flex;align-items:flex-start;gap:var(--space-3);font:var(--hm-label-font);color:var(--ink);text-decoration:none}
.pn-lb--cm :is(.pn-hm-fact) .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m);margin-top:2px;color:var(--accent-text)}
.pn-lb--cm :is(a.pn-hm-fact:hover) > span{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-lb--cm :is(a.pn-hm-fact:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}
@media (min-width:768px){.pn-lb--cm :is(.pn-hm-hero .pn-hm-keys){display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;align-self:flex-start}}   /* the doors pair: equal widths (HOME-043); under 768 the fr pair (672) would not fit, it wraps */
@media (min-width:701px) and (max-width:1023px){.pn-lb--cm :is(.pn-hm-hero){--hm-hero-img:440px}}
@media (min-width:701px) and (max-width:1279px){.pn-lb--cm :is(.pn-hm-hero ul.pn-hm-facts){grid-template-columns:repeat(3,minmax(0,max-content))}}   /* one column: the facts three to a row under the lede */
@media (min-width:1280px){   /* the 7 : 5 block from 1280: below it the fr / it / pt keys pair outgrows the seven column and the five column squeezes the facts */
  .pn-lb--cm :is(.pn-hm-hero__wrap){grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--hm-col);align-items:stretch}
}

/* 1b hero review variants (owner 05.11. «Das sieht scheiße aus … Der Bereich muss cooler sein»; templates/plastik/home_hero.php,
   switch hero_look, lib/plastik.php pnew_plk_hero). The same words as today's hero, three stages. The poster tier of the type
   (96 desktop / 56 phone, §13b) is for these heads only. Text on the picture always stands on a scrim (>= 4.5 : 1 in both
   themes); a and b are near-black in both themes (they re-set the ink tokens for their keys and facts), c keeps the page's
   ground and puts the head on solid slabs. One motion moment at most (c: the slabs rise once), none with reduced motion. */
.pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--a,.pn-hm-hero.pn-hm-hero--b){--ink:var(--hero-night-ink);--ink-2:var(--hero-night-ink-2);--accent-text:var(--accent);--sunken:var(--hero-night-key);--surface-2:var(--hero-night-key-2);--t-tint:var(--hero-night-key);--t-tint-2:var(--hero-night-key-2);--line:transparent;color:var(--hero-night-ink)}
.pn-lb--cm :is(.pn-hm-hero__kick){display:block;font:var(--hm-label-font);color:var(--accent-text)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__h,.pn-hm-hero--b .pn-hm-hero__h,.pn-hm-hero--c .pn-hm-hero__h){margin:var(--space-3) 0 0;font:800 96px/92px var(--body);letter-spacing:-.045em;text-wrap:balance}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__h,.pn-hm-hero--b .pn-hm-hero__h){color:var(--hero-night-ink)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__ln,.pn-hm-hero--b .pn-hm-hero__ln,.pn-hm-hero--c .pn-hm-hero__ln){display:block}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__hl,.pn-hm-hero--b .pn-hm-hero__hl){color:var(--accent)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__sub,.pn-hm-hero--b .pn-hm-hero__sub){margin:var(--space-5) 0 0;font:700 24px/30px var(--body);color:var(--hero-night-ink)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-keys,.pn-hm-hero--b .pn-hm-keys,.pn-hm-hero--c .pn-hm-keys){margin-top:var(--space-8)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-fact,.pn-hm-hero--b .pn-hm-fact){color:var(--hero-night-ink)}

/* a «Poster»: the picture is the stage; the copy starts on its lower part and runs on into the near-black under it */
.pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--a){--hm-hero-img:clamp(460px,calc(100svh - var(--header-h) - 184px),680px);--hm-a-lift:280px;display:grid;grid-template-columns:minmax(0,1fr);background:var(--hero-night)}
.pn-lb--cm :is(.pn-hm-hero--a > .pn-hm-stage,.pn-hm-hero--a > .pn-hm-hero__wrap){grid-area:1/1}
.pn-lb--cm :is(.pn-hm-hero--a > .pn-hm-stage){align-self:start}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__img){height:var(--hm-hero-img);object-position:50% 26%}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-stage)::after{background:var(--hero-poster-shade)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__wrap){margin-top:calc(var(--hm-hero-img) - var(--hm-a-lift));padding-bottom:var(--space-10);grid-template-columns:minmax(0,1fr);align-items:end}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__side){justify-content:flex-end}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__lede){max-width:40ch;font:400 18px/28px var(--body);color:var(--hero-night-ink)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__strip){grid-area:2/1;background:var(--hero-night)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__strip ul.pn-hm-facts){display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3) var(--space-8);padding:var(--space-5) 0}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-fact){align-items:center;font:600 15px/22px var(--body)}
.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-fact) .pc-ico{margin-top:0}
@media (min-width:1280px){.pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__wrap){grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--hm-col)}}   /* the lede beside the keys; below 1280 under them */

/* b «Split stage»: a near-black plum block (the accent's light at 12 % over the chrome tone) with the type, the picture a tall
   framed panel beside it — a magazine cover */
.pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--b){padding:var(--space-12) 0;background:var(--hero-plum)}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__wrap){margin-top:0;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--hm-col);align-items:center}
.pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--b){display:flex;align-items:center;min-height:min(calc(100svh - var(--header-h)),880px)}   /* the cover fills the first screen (svh: no shift when the bar moves) */
.pn-lb--cm :is(.pn-hm-hero--b > .pc-wrap){flex:1 1 auto}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-stage){border-radius:var(--r-l);overflow:hidden;aspect-ratio:4 / 5;box-shadow:var(--shadow-e1)}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-stage)::after{background:var(--hero-panel-shade)}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-stage picture){height:100%}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__img){height:100%;object-position:50% 48%}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__lede){margin:var(--space-5) 0 0;max-width:46ch;font:400 18px/28px var(--body);color:var(--hero-night-ink-2)}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero .pn-hm-keys,.pn-hm-hero--b .pn-hm-keys){margin-top:var(--space-8)}
.pn-lb--cm :is(.pn-hm-hero--b ul.pn-hm-facts){grid-template-columns:repeat(3,minmax(0,max-content));gap:var(--space-3) var(--space-8);margin-top:var(--space-8);padding-top:var(--space-6)}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-fact){font:600 15px/22px var(--body);color:var(--hero-night-ink-2)}
.pn-lb--cm :is(.pn-hm-hero--b .pn-hm-fact) .pc-ico{margin-top:1px}

/* c «Cover lines»: the picture framed in the column, the head on two solid black slabs breaking out of its lower edge */
.pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--c){padding:var(--space-6) 0 0;background:var(--bg)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__wrap){margin-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-stage){border-radius:var(--r-l);overflow:hidden}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__img){height:clamp(400px,calc(100svh - var(--header-h) - 256px),580px);object-position:50% 26%}   /* the keys stay in the first screen */
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-stage)::after{background:var(--hero-panel-shade)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__copy){position:relative;z-index:1;margin:-196px 0 0 var(--space-10);align-items:flex-start}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__kick){display:inline-block;padding:var(--space-1) var(--space-4);background:var(--hero-night);color:var(--accent)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__h){margin:0;line-height:112px}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__tx){padding:0 var(--space-6);background:var(--hero-night);color:var(--hero-night-ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* a wrapped line (es / fr on phones) gets its own slab */
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__hl){margin-left:var(--space-16)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__hl .pn-hm-hero__tx){color:var(--accent)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__foot){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);margin-top:var(--space-8)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__sub){margin:0;font:700 24px/30px var(--body);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__lede){margin:0;max-width:46ch;font:400 18px/28px var(--body);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-hero--c ul.pn-hm-facts){display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);margin-top:var(--space-10);padding:var(--space-5) 0}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-fact){align-items:center;font:600 15px/22px var(--body)}
.pn-lb--cm :is(.pn-hm-hero--c .pn-hm-fact) .pc-ico{margin-top:0}
@media (min-width:1024px){
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__foot){grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--hm-col);align-items:start}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__foot .pn-hm-hero__lede){justify-self:end}
}
@media (prefers-reduced-motion:no-preference){
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__ln){animation:pn-hm-slab .5s cubic-bezier(.2,.7,.2,1) both}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__hl){animation-delay:.12s}
}
@keyframes pn-hm-slab{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* the variants between phone and desktop: the poster tier steps down to the display size */
@media (min-width:701px) and (max-width:1023px){
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__h,.pn-hm-hero--b .pn-hm-hero__h,.pn-hm-hero--c .pn-hm-hero__h){font-size:64px;line-height:64px}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__h){line-height:76px}
  .pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--a){--hm-hero-img:520px;--hm-a-lift:220px}
  .pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__wrap){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-10)}
  .pn-lb--cm :is(.pn-hm-hero--b ul.pn-hm-facts){grid-template-columns:repeat(2,minmax(0,max-content))}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__img){height:440px}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__copy){margin-top:-132px;margin-left:var(--space-6)}
}
@media (min-width:1024px) and (max-width:1279px){
  .pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__h,.pn-hm-hero--c .pn-hm-hero__h){font-size:64px;line-height:64px}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__h){line-height:76px}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__copy){margin-top:-132px}
}
/* phones: still the poster — the type 56, keys full width, nothing under 15 */
@media (max-width:700px){
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__h,.pn-hm-hero--b .pn-hm-hero__h,.pn-hm-hero--c .pn-hm-hero__h){font-size:56px;line-height:54px;letter-spacing:-.04em}
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__sub,.pn-hm-hero--b .pn-hm-hero__sub,.pn-hm-hero--c .pn-hm-hero__sub){font-size:18px;line-height:26px}
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-keys,.pn-hm-hero--b .pn-hm-keys,.pn-hm-hero--c .pn-hm-keys){margin-top:var(--space-6)}
  .pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--a){--hm-hero-img:580px;--hm-a-lift:164px}
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__img){object-position:50% 30%}
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__wrap){padding-bottom:var(--space-8);gap:var(--space-6)}
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__strip ul.pn-hm-facts){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4)}
  .pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--b){padding:var(--space-4) 0 var(--space-10)}
  .pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__wrap){grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .pn-lb--cm :is(.pn-hm-hero--b .pn-hm-stage){order:-1;aspect-ratio:auto;height:300px}
  .pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__img){object-position:50% 52%}
  .pn-lb--cm :is(.pn-hm-hero--b .pn-hm-hero__lede){order:1;margin-top:var(--space-8)}
  .pn-lb--cm :is(.pn-hm-hero--b ul.pn-hm-facts){order:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4)}
  .pn-lb--cm :is(.pn-hm-hero.pn-hm-hero--c){padding-top:var(--space-4)}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__img){height:440px;object-position:50% 30%}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__copy){margin:-120px calc(-1 * var(--gutter)) 0}   /* the slabs bleed off the left edge, the words stay on the gutter */
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__h){line-height:64px}
  /* es / it / fr / pt heads run to four lines at 56: on phones they take the display 44, so the keys stay in the first screen */
  .pn-lb--cm :is(.pn-hm-hero--a .pn-hm-hero__h:not(:lang(en)),.pn-hm-hero--b .pn-hm-hero__h:not(:lang(en)),.pn-hm-hero--c .pn-hm-hero__h:not(:lang(en))){font-size:44px;line-height:46px;letter-spacing:-.035em}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__h:not(:lang(en))){line-height:54px}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__tx){padding:0 var(--gutter)}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__kick){margin-left:0}
  .pn-lb--cm :is(.pn-hm-hero--c .pn-hm-hero__hl){margin-left:0}
  .pn-lb--cm :is(.pn-hm-hero--c ul.pn-hm-facts){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4);margin-top:var(--space-8)}
}

/* two-column sections: copy 5, art 7, the art in the middle of its column; the copy starts at the top */
.pn-lb--cm :is(.pn-hm-split__wrap,.pn-hm-guides){display:grid;gap:var(--hm-gap) var(--hm-col);grid-template-columns:minmax(0,1fr);align-items:center}
.pn-lb--cm :is(.pn-hm-split__copy,.pn-hm-guides__copy){min-width:0;align-self:start}
.pn-lb--cm :is(.pn-hm-split__art,.pn-hm-doll){margin:0;min-width:0;justify-self:center}
.pn-lb--cm :is(.pn-hm-doll){display:flex;flex-direction:column;align-items:center}
.pn-lb--cm :is(.pn-hm-doll) img{display:block;width:auto;max-width:100%;height:auto}
@media (min-width:1101px){
  .pn-lb--cm :is(.pn-hm-split__wrap--buy,.pn-hm-split__wrap--doll,.pn-hm-guides){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
@media (min-width:1240px){
  .pn-lb--cm :is(.pn-hm-split__wrap){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
@media (max-width:1239px){.pn-lb--cm :is(.pn-hm-split__art){order:-1}}   /* the device scenes stack over the copy: the art first */
@media (max-width:1100px){.pn-lb--cm :is(.pn-hm-split__wrap--buy > .pn-hm-doll,.pn-hm-split__wrap--doll > .pn-hm-doll,.pn-hm-guides > .pn-hm-doll){order:-1}}

/* 2 + 3 the device scenes (plastik.css draws them): straight, the art sets the height; one prop each */
.pn-lb--cm :is(.pn-hm-split__art){align-self:center;width:100%}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2){max-width:772px;margin:0 auto}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2 .pk-dev){transform:none}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2--feed){min-height:0;height:440px}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2--feed .pk-dev--laptop){left:0;top:72px;width:600px;transform:none}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2--feed .pk-dev--front){left:auto;right:0;top:0;transform:none}
.pn-lb--cm :is(.pn-hm-prop--alien){position:absolute;z-index:2;left:-8px;top:356px;width:112px;height:112px}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal){min-height:0;height:600px;max-width:504px}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal .pk-dev:not(.pk-dev--front)){left:0;top:0;transform:none}
.pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal .pk-dev--front){left:268px;top:48px;transform:none}
.pn-lb--cm :is(.pn-hm-prop--gift){position:absolute;z-index:2;left:50%;top:448px;width:144px;height:144px;margin-left:-72px}
.pn-lb--cm :is(.pn-hm-note-cap){display:block;margin:var(--space-4) 0 0;font:var(--hm-small-font);color:var(--ink-3);text-align:center}

/* 4 how to sell (+ The Panty Game): four step cards, each its object */
.pn-lb--cm :is(.pn-hm-step .pn-hm-obj){margin-bottom:var(--space-2);filter:none}   /* on a card: no shadow (it drew the picture's faint square) */
.pn-lb--cm :is(.pn-hm-step .pn-hm-obj--narrow){margin:-8px 0 var(--space-1) -8px}

/* 6 for buyers: the doll in the 7, the note under both */
.pn-lb--cm :is(.pn-hm-doll--wide .pn-hm-doll__img){width:100%;max-width:680px;height:auto}
.pn-lb--cm :is(.pn-hm-note){display:flex;align-items:flex-start;gap:var(--space-5);margin:var(--hm-gap) 0 0;padding:var(--space-8);border-radius:var(--r-l);background:var(--surface);font:var(--hm-body-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-note) > span:last-child{padding-top:var(--space-2)}
.pn-lb--cm :is(.pn-hm-note) b{color:var(--ink);font-weight:var(--w-strong)}
.pn-lb--cm :is(.pn-hm-note .pn-hm-well){background:var(--surface-2)}

/* 7 trust: the head with the rosette beside it, the six items in three columns, the links */
/* features (owner 07.11. «der bereich wirkt total verloren und schwebend», art director): the head, its lede and the phone hold
   the left; the six sit on ONE panel (a surface, no edge), each with the brand's own object — nothing floats on the bare band */
.pn-lb--cm :is(.pn-hm-feat){display:grid;gap:var(--hm-gap)}
.pn-lb--cm:is(.pn-hm) :is(.pn-hm-feat__art){display:none;margin:0}
.pn-lb--cm :is(.pn-hm-feat__panel){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin:0;padding:var(--space-3);list-style:none;border-radius:var(--r-l);background:var(--surface)}
.pn-lb--cm :is(.pn-hm-feat__item){display:flex;align-items:center;gap:var(--space-4);min-width:0;padding:var(--space-4);border-radius:var(--r-m)}
.pn-lb--cm :is(.pn-hm-feat__obj){flex:none;width:64px;height:64px;object-fit:contain}
.pn-lb--cm :is(.pn-hm-feat__item .pn-hm-row__h){padding-top:0}
.pn-lb--cm :is(.pn-hm-feat__item .pn-hm-well){background:var(--surface-2)}
@media (min-width:701px){
  .pn-lb--cm :is(.pn-hm-feat__panel){grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-4)}
}
@media (min-width:1101px){
  .pn-lb--cm :is(.pn-hm-feat){grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--hm-col);align-items:center}
  .pn-lb--cm:is(.pn-hm) :is(.pn-hm-feat__art){display:block;width:fit-content;margin-top:var(--hm-gap)}   /* the glow sits behind the phone, not beside it */
  .pn-lb--cm :is(.pn-hm-feat__phone){display:block;width:288px;height:288px;object-fit:contain}
  .pn-lb--cm :is(.pn-hm-feat__panel){padding:var(--space-5)}
  .pn-lb--cm :is(.pn-hm-feat__item){align-items:flex-start;padding:var(--space-5)}
}
.pn-lb--cm :is(.pn-hm-trust){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head art" "rows rows" "links links";column-gap:var(--space-6);align-items:end}
.pn-lb--cm :is(.pn-hm-trust > .pn-hm-head){grid-area:head}
.pn-lb--cm:is(.pn-hm) :is(.pn-hm-trust__art){grid-area:art;display:grid;place-items:center;margin:0}
.pn-lb--cm :is(.pn-hm-trust > .pn-hm-rows){grid-area:rows;margin-top:var(--hm-gap)}
.pn-lb--cm :is(.pn-hm-trust > .pn-hm-links){grid-area:links}

/* 8 reviews: the star beside the head, stars over the quote */
.pn-lb--cm :is(.pn-hm-stars){display:inline-flex;gap:2px;color:var(--ink)}
.pn-lb--cm :is(.pn-hm-stars .pc-ico){width:var(--icon-m);height:var(--icon-m)}
.pn-lb--cm :is(.pn-hm-quote){justify-content:space-between}
.pn-lb--cm :is(.pn-hm-quotes){align-items:start}   /* cards sized to their quote (owner 03.11.) */
.pn-lb--cm :is(.pn-hm-quote__q){margin:0}
.pn-lb--cm :is(.pn-hm-quote__q p){margin:0;font:var(--hm-body-font);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-quote__who){margin:var(--space-2) 0 0;font:var(--hm-small-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-quote__who a){display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--ink-3);text-decoration-thickness:1px;text-underline-offset:4px}
.pn-lb--cm :is(.pn-hm-count){margin:var(--space-6) 0 0;max-width:680px;font:var(--hm-small-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-count b){color:var(--ink);font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.pn-lb--cm :is(.pn-hm-keys--quiet) .pc-btn{min-height:var(--tap);padding:0;background:none;color:var(--ink);font:var(--hm-label-font);font-size:18px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}   /* «See all profiles» reads as the home's text link */

/* 9 for women: the pink doll on her stage with the cream panty; the boundaries as a sub-block (panel head, five items) */
.pn-lb--cm :is(.pn-hm-doll--stage){position:relative}
.pn-lb--cm :is(.pn-hm-doll--stage .pn-hm-doll__img){width:auto;height:560px;max-height:none}
.pn-lb--cm :is(.pn-hm-doll .pn-hm-prop--panty){position:absolute;z-index:2;left:-32px;bottom:24px;width:150px;height:auto;max-height:none}
.pn-lb--cm :is(.pn-hm-bounds){margin-top:var(--hm-sub)}
.pn-lb--cm :is(.pn-hm-block__h){margin:0;font:var(--hm-h3-font);letter-spacing:-.01em;color:var(--ink)}
.pn-lb--cm :is(.pn-hm-block__p){margin:var(--space-3) 0 0;font:var(--hm-lede-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-block__p + .pn-hm-rows){margin-top:var(--space-10)}

/* 10 guides: the blonde in the 7; join: two doors, a prop in each, the key at the foot */
.pn-lb--cm :is(.pn-hm-doll--short .pn-hm-doll__img){width:auto;height:480px;max-height:none}
.pn-lb--cm :is(.pn-hm-door){position:relative;gap:var(--space-4);padding:var(--hm-pad)}
.pn-lb--cm :is(.pn-hm-door > .pn-hm-card__h){font:var(--hm-h3-font);letter-spacing:-.01em}
.pn-lb--cm :is(.pn-hm-door > .pn-hm-card__h,.pn-hm-door .pn-hm-card__p){padding-right:152px}
.pn-lb--cm :is(.pn-hm-door .pn-hm-card__p){margin-bottom:var(--space-4)}
.pn-lb--cm :is(.pn-hm-door) .pc-btn{margin-top:auto;min-height:var(--hm-key-h);padding:0 var(--space-8);font:var(--hm-key-font)}
.pn-lb--cm :is(.pn-hm-prop--door){position:absolute;top:var(--space-6);right:var(--space-6);width:128px;height:128px}

/* home SEO (owner 04.11., lib/home_seo.php, only with pnew/switch/home_seo): «New on panty.com» (her post cards, no ticket, no
   heart), «Buy and sell safely» (four tiles), the guides as cards, the FAQ (native <details>), «Who runs panty.com» (one panel) */
.pn-lb--cm :is(.pn-hm-strip){display:grid;gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-lb--cm :is(.pn-hm-strip > li){min-width:0}
.pn-lb--cm :is(.pn-hm-strip .pc-card__when){display:block;margin-top:2px;font:400 15px/22px var(--body);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-strip .pc-card__title){font:700 18px/24px var(--body)}   /* her post on the home: the title, the name and the time word read (18 / 15), never the 12 of a dense grid */
.pn-lb--cm :is(.pn-hm-strip .pc-card__name){font:600 15px/22px var(--body)}
.pn-lb--cm :is(.pn-hm-strip .pc-card__cap)::before{background:var(--card-cap-scrim-strong)}
.pn-lb--cm :is(.pn-hm-tile .pn-hm-obj,.pn-hm-gcard .pn-hm-obj){width:88px;height:88px;margin-bottom:var(--space-2);filter:none}
.pn-lb--cm :is(.pn-hm-gcards > li){display:flex;min-width:0}
.pn-lb--cm :is(.pn-hm-gcard){width:100%;text-decoration:none;transition:background-color .15s}
.pn-lb--cm :is(.pn-hm-gcard:hover){background:var(--surface-2)}
.pn-lb--cm :is(.pn-hm-faq){display:grid;gap:var(--space-3)}
.pn-lb--cm :is(.pn-hm-faqside + .pn-hm-faq){margin-top:var(--hm-gap)}
.pn-lb--cm :is(.pn-hm-faqart){display:block;width:200px;height:auto;margin:var(--hm-act) auto 0;filter:drop-shadow(var(--shadow-e1));pointer-events:none;user-select:none}   /* owner 04.11.: a free-standing object beside the FAQ (the bunny with the question mark) */
@media (min-width:901px){.pn-lb--cm :is(.pn-hm-faqart){width:240px;margin:var(--space-6) 0 0}}   /* owner 04.11.: the FAQ's lede + help link beside the questions (stacked on phones) */
.pn-lb--cm :is(.pn-hm-faq__item){border-radius:var(--r-l);background:var(--surface)}
.pn-lb--cm :is(.pn-hm-faq__q){display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px;padding:var(--space-4) var(--space-6);border-radius:var(--r-l);cursor:pointer;list-style:none}
.pn-lb--cm :is(.pn-hm-faq__q)::-webkit-details-marker{display:none}
.pn-lb--cm :is(.pn-hm-faq__q)::marker{content:none}
.pn-lb--cm :is(.pn-hm-faq__h){margin:0;font:var(--hm-h4-font);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-faq__chev){flex:none;width:var(--icon-l,24px);height:var(--icon-l,24px);color:var(--ink-2);transition:transform .15s}
.pn-lb--cm :is(.pn-hm-faq__item[open] .pn-hm-faq__chev){transform:rotate(180deg)}
.pn-lb--cm :is(.pn-hm-faq__a){padding:0 var(--space-6) var(--space-6)}
.pn-lb--cm :is(.pn-hm-faq__a p){margin:0;max-width:65ch;font:var(--hm-body-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-faq__a .pn-hm-link){margin-top:var(--space-2)}
.pn-lb--cm :is(.pn-hm-op){padding:var(--hm-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-lb--cm :is(.pn-hm-op .pn-hm-rows .pn-hm-well){background:var(--surface-2)}
@media (prefers-reduced-motion:reduce){.pn-lb--cm :is(.pn-hm-faq__chev,.pn-hm-gcard){transition:none}}
@media (min-width:901px){.pn-lb--cm :is(.pn-hm-strip){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.pn-lb--cm :is(.pn-hm-strip){grid-template-columns:repeat(6,minmax(0,1fr))}}   /* owner 04.11.: six a row, two rows of twelve */
@media (min-width:1101px){
  .pn-lb--cm :is(.pn-hm-faqwrap){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--hm-col);align-items:start}
  .pn-lb--cm :is(.pn-hm-faqwrap > .pn-hm-faqside + .pn-hm-faq){margin-top:0}
}

/* the register doors (owner 04.11.: «fettes cta … 2 spaltig "Register as Seller" "Register as Buyer" muss schick aussehen und
   ballern», lib/home_reg.php, templates/plastik/reg_cta.php, only with pnew/switch/home_reg): two equal panels on the ground.
   Each panel: its art group (§13a: the main object 200 + a companion 96) out of the top corner, who it is for (label), the panel
   head, one lede line, three ticks, the key across the panel. The seller key is the one pink key of the view, the buyer key the
   secondary of the same size. Tonal surfaces only, no edge, no light on a card. */
.pn-lb--cm :is(.pn-hm-reg__grid){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.pn-lb--cm :is(.pn-hm-reg__door){position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--space-12) var(--hm-pad) var(--hm-pad);border-radius:var(--r-l);background:var(--surface);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-reg__door--sell){background:var(--accent-soft)}   /* the seller's door carries the brand's soft pink (the chosen fill, §2.3): the one pink key sits on it */
.pn-lb--cm :is(.pn-hm-reg__art){position:absolute;top:calc(-1 * var(--space-10));right:var(--space-6);width:200px;height:200px;pointer-events:none}
.pn-lb--cm :is(.pn-hm-reg__obj){display:block;width:200px;height:200px;object-fit:contain}
.pn-lb--cm :is(.pn-hm-reg__obj2){position:absolute;left:calc(-1 * var(--space-8));bottom:var(--space-2);width:96px;height:96px;object-fit:contain}
.pn-lb--cm :is(.pn-hm-reg__for,.pn-hm-reg__h,.pn-hm-reg__p){max-width:calc(100% - 232px)}
.pn-lb--cm :is(.pn-hm-reg__for){margin:0;font:var(--hm-label-font);color:var(--ink-2)}
.pn-lb--cm :is(.pn-hm-reg__h){margin:var(--space-3) 0 0;font:var(--hm-h3-font);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.pn-lb--cm :is(.pn-hm-reg__p){margin:var(--space-4) 0 0;font:var(--hm-body-font);color:var(--ink-2)}
.pn-lb--cm :is(ul.pn-hm-reg__ticks){display:grid;gap:var(--space-4);margin:var(--space-8) 0 var(--space-10);padding:0;list-style:none}   /* ul: one step over the home's list reset */
.pn-lb--cm :is(.pn-hm-reg__ticks li){display:flex;align-items:center;gap:var(--space-4);font:var(--hm-h4-font);font-weight:var(--w-strong);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-reg__tick){display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-reg__door--sell .pn-hm-reg__tick){background:var(--surface)}
.pn-lb--cm :is(.pn-hm-reg__tick .pc-ico){width:var(--icon-m);height:var(--icon-m)}
.pn-lb--cm :is(.pn-hm-reg__go){width:100%;min-height:var(--hm-key-h);margin-top:auto;font:var(--hm-key-font);text-decoration:none}
.pn-lb--cm :is(.pn-hm-reg__door--buy .pn-hm-reg__go){background:var(--surface-3);color:var(--ink)}   /* the strong secondary: two steps up from its panel, the pink key's size */
.pn-lb--cm :is(.pn-hm-reg__door--buy .pn-hm-reg__go:hover){background:var(--surface-2);color:var(--ink)}
.pn-lb--cm :is(.pn-hm-hero + .pn-hm-reg){padding-top:calc(var(--hm-sec) + var(--space-10))}   /* the art stands out of the panels' top */
@media (min-width:901px){.pn-lb--cm :is(.pn-hm-reg__grid){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* phones: one column, keys full width; rows of cards and items swipe, a part of the next one in view */
@media (max-width:700px){
  .pn-lb--cm :is(.pn-hm-keys){flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .pn-lb--cm :is(.pn-hm-keys) .pc-btn{width:100%}
  .pn-lb--cm :is(.pn-hm-keys .pn-hm-link){align-self:flex-start;min-height:var(--tap)}
  .pn-lb--cm :is(.pn-hm-headrow){align-items:flex-start}
  .pn-lb--cm :is(.pn-hm-obj--rosette,.pn-hm-obj--star){width:88px;height:88px}
  .pn-lb--cm :is(.pn-hm-obj){width:88px;height:88px}
  .pn-lb--cm :is(.pn-hm-obj--narrow){width:100px;height:100px;margin:-6px 0 -6px -6px}
  .pn-lb--cm :is(.pn-hm-card){padding:var(--space-6)}
  /* hero: the copy fully under the picture (coordinator 04.11.: never text on the fade); the facts two to a row */
  .pn-lb--cm :is(.pn-hm-hero){--hm-hero-img:400px}
  .pn-lb--cm :is(.pn-hm-hero__img){object-position:50% 30%}
  .pn-lb--cm :is(.pn-hm-hero__wrap){gap:var(--space-8)}
  .pn-lb--cm :is(.pn-hm-hero__sub){font-size:18px;line-height:26px}
  .pn-lb--cm :is(.pn-hm-hero__side){gap:var(--space-6)}
  .pn-lb--cm :is(.pn-hm-hero ul.pn-hm-facts){grid-template-columns:minmax(0,1fr)}
  /* the feed scene: the phone alone (the laptop would be a cramped miniature), the alien at its lower left */
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2){margin:0 auto;overflow:visible}
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--feed){width:200px;height:428px}
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--feed .pk-dev--laptop){display:none}
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--feed .pk-dev--front){right:0;top:0;transform:scale(.85);transform-origin:100% 0}
  .pn-lb--cm :is(.pn-hm-prop--alien){left:-40px;top:auto;bottom:16px;width:72px;height:72px}
  /* the deal scene: the two phones at 200, overlapping by 40, the giftbox 96 */
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal){width:320px;max-width:100%;height:420px}
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal .pk-dev){transform:scale(.75);transform-origin:0 0}
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal .pk-dev:not(.pk-dev--front)){left:0;top:0;transform:scale(.75);transform-origin:0 0}
  .pn-lb--cm :is(.pn-hm-split__art .pk-stage2--deal .pk-dev--front){left:143px;top:40px}
  .pn-lb--cm :is(.pn-hm-prop--gift){top:330px;width:96px;height:96px;margin-left:-48px}
  /* swipe rows: steps, quotes, tiles, guide cards, post cards; item rows become panels there */
  .pn-lb--cm :is(.pn-hm-rail){display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .pn-lb--cm :is(.pn-hm-rail > li){flex:0 0 296px;scroll-snap-align:start}
  .pn-lb--cm :is(.pn-hm-rail > .pn-hm-row){flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--r-l);background:var(--surface-2)}
  .pn-lb--cm :is(.pn-hm-rail > .pn-hm-row .pn-hm-row__h){padding-top:0}
  .pn-lb--cm :is(.pn-hm-rail > .pn-hm-row .pn-hm-well){background:var(--surface-3)}
  .pn-lb--cm :is(.pn-hm-sec:not(.pn-hm-band) .pn-hm-rail > .pn-hm-row){background:var(--surface)}
  .pn-lb--cm :is(.pn-hm-sec:not(.pn-hm-band) .pn-hm-rail > .pn-hm-row .pn-hm-well){background:var(--surface-2)}
  .pn-lb--cm :is(.pn-hm-strip.pn-hm-rail > li){flex-basis:220px}
  /* the dolls: over the head, sized to the phone */
  .pn-lb--cm :is(.pn-hm-doll--wide .pn-hm-doll__img){max-width:358px;margin:0 auto}
  .pn-lb--cm :is(.pn-hm-doll--stage .pn-hm-doll__img){height:340px}
  .pn-lb--cm :is(.pn-hm-doll .pn-hm-prop--panty){left:-24px;bottom:16px;width:100px}
  .pn-lb--cm :is(.pn-hm-doll--short .pn-hm-doll__img){height:300px}
  .pn-lb--cm :is(.pn-hm-note){padding:var(--space-6);gap:var(--space-4)}
  .pn-lb--cm :is(.pn-hm-trust){column-gap:var(--space-3);align-items:start}
  /* doors: the prop beside the head, the text under it full width */
  .pn-lb--cm :is(.pn-hm-prop--door){top:var(--space-5);right:var(--space-5);width:88px;height:88px}
  .pn-lb--cm :is(.pn-hm-door > .pn-hm-card__h){padding-right:100px;min-height:64px}
  .pn-lb--cm :is(.pn-hm-door .pn-hm-card__p){padding-right:0}
  .pn-lb--cm :is(.pn-hm-faq__q){padding:var(--space-4) var(--space-5)}
  .pn-lb--cm :is(.pn-hm-faq__a){padding:0 var(--space-5) var(--space-5)}
  .pn-lb--cm :is(.pn-hm-new .pn-hm-headrow){flex-direction:column;gap:var(--space-2)}
  .pn-lb--cm :is(.pn-hm-strip.pn-hm-rail){display:flex}
  /* register doors */
  .pn-lb--cm :is(.pn-hm-reg__grid){gap:var(--space-4)}
  .pn-lb--cm :is(.pn-hm-reg__door){padding:var(--space-6) var(--hm-pad) var(--hm-pad)}
  .pn-lb--cm :is(.pn-hm-reg__art){top:var(--space-4);right:var(--space-3);width:112px;height:112px}
  .pn-lb--cm :is(.pn-hm-reg__obj){width:112px;height:112px}
  .pn-lb--cm :is(.pn-hm-reg__obj2){left:calc(-1 * var(--space-5));bottom:calc(-1 * var(--space-2));width:56px;height:56px}
  .pn-lb--cm :is(.pn-hm-reg__for,.pn-hm-reg__h){max-width:calc(100% - 120px)}
  .pn-lb--cm :is(.pn-hm-reg__p){max-width:none}
  .pn-lb--cm :is(.pn-hm-hero + .pn-hm-reg){padding-top:var(--hm-sec)}
  .pn-lb--cm :is(ul.pn-hm-reg__ticks){margin:var(--space-6) 0 var(--space-8)}
}

/* ---------- design system P8 (03.11.): the 404 card (templates/notfound.php; audit HOME-128..130) = the member empty
   state: a panel on the ground (no glow, no darker band), the head 24, the line 15 ink-2, no hand note restating the
   head, one key; the other ways as the text links under it. Three classes outrank the look's ".pk-site .pc-empty". */
.pc-empty.pn-empty.pn-lp-404{width:100%;max-width:480px;padding:var(--space-8) var(--panel-pad);border-radius:var(--r-l);background:var(--surface);background-image:none;box-shadow:none}
.pc-empty.pn-empty.pn-lp-404 h1{margin:0;font:var(--type-h1);color:var(--ink)}
.pc-empty.pn-empty.pn-lp-404 > p{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink-2)}
.pc-empty.pn-empty.pn-lp-404 :is(.pc-hand,.pn-hand){display:none}
.pc-empty.pn-empty.pn-lp-404 > .pc-btn{margin-top:var(--space-6);min-height:var(--control-md);font:var(--type-strong)}
.pn-gapp.pn-gfill.pc-band:has(> .pn-lp-404){background:none}
.pn-nf__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-6)}
.pn-nf__links > a{display:inline-block;padding:var(--space-3) 0;line-height:20px}   /* 44 px rows; inline-block keeps the space inside ui_more's two spans */

/* PM 500 aussen-seo lead (08.11.): the hero's fan door as a text link under the two keys (AS-006); the home FAQ shows six
   questions, the rest behind «More questions» (AS-023). Tokens only. */
.pn-lb--cm :is(.pn-hm-hero__buy){margin:var(--space-4) 0 0;font-weight:600;font-size:var(--fs-ui);line-height:24px}
.pn-lb--cm :is(.pn-hm-hero__buy .pn-hm-link){color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-lb--cm :is(.pn-hm-faq__more[open]){display:grid;gap:var(--space-3)}
.pn-lb--cm :is(.pn-hm-faq__more > summary){display:block;list-style:none;cursor:pointer;margin:var(--space-2) 0;padding:var(--space-3) 0;font-weight:600;font-size:var(--fs-ui);line-height:24px}
.pn-lb--cm :is(.pn-hm-faq__more > summary::-webkit-details-marker){display:none}
.pn-lb--cm :is(.pn-hm-faq__more[open] > summary){display:none}
/* ==========================================================================
   The guide body of /sell, /buy and the Drawer Report (money_section.php, report_body.php) on the v3 kit: the mockup's
   Laundry Room prose (.prose h3 = Archivo 900 28 wdth 75 caps, 17 / 1.65 text), the step label (.care .n) over each
   section head, the price box rows (.pbox: dashed lines, the median pink-press) for the tables, paper cards with the
   line for the quotes, the pills (.chip) for the tags, the receipt (.receipt) for the report's short answer.
   The page frames are in landing.css (.pn-lpm-*). Tokens only.
   ========================================================================== */
.pn-lpm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;min-width:0}
.pn-mp__sec{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;font:400 var(--fs-prose)/1.65 var(--font-sans);color:var(--ink);scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-mp__sec p{margin:0;max-width:var(--measure-prose)}
.pn-mp__sec p a:not([class]){color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-mp__sec > p:not(:lang(en)),.pn-mp__list > li:not(:lang(en)){-webkit-hyphens:auto;hyphens:auto}
/* UX 17.10. #44: no section number over the heading (the TOC numbers the page), the step lists count 01, 02 like the TOC; #45: the answer that opens a section is plain prose (one lead per page: the hero lede) */
.pn-mp__h{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink);hyphens:manual;overflow-wrap:break-word}
h3.pn-mp__h{font-size:18px}
.pn-mp__q{margin:10px 0 0;font:700 18px/1.3 var(--font-sans);color:var(--ink)}
.pn-mp__lead{max-width:var(--measure-prose)}
.pn-mp__note{font:400 15px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-mp__list{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:var(--measure-prose)}
.pn-mp__list > li{position:relative;padding-left:22px}
ul.pn-mp__list > li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
/* numbered steps: the big pink-press number of the mockup's notes (.note .n), in line */
.pn-mp__list--steps{gap:14px;counter-reset:pn-mp}
.pn-mp__list--steps > li{min-height:34px;padding-left:44px;counter-increment:pn-mp}
.pn-mp__list--steps > li::before{content:counter(pn-mp,decimal-leading-zero);position:absolute;left:0;top:.2em;width:32px;font:700 15px/1.35 var(--font-display);color:var(--pink-glyph)}
/* tables = .pbox rows: dashed lines, the caption as the small-caps title, the median column pink-press */
.pn-mp__tw{max-width:100%;overflow-x:auto;scrollbar-width:thin}
.pn-mp__table{width:100%;border-collapse:collapse;font:400 15px/1.35 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-mp__table caption:not(.pc-sr),.pn-mp__cap{padding:0 0 8px;text-align:left;font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink)}
.pn-mp__cap{margin:0;text-wrap:balance}   /* polish r1: the visible caption sits above the scroller, never cut with it */
@media (max-width:700px){
  .pn-mp__table .is-opt{display:none}
  .pn-mp__table thead th,.pn-mp__table th[scope="row"]{white-space:normal;vertical-align:bottom}   /* long pt / fr headers wrap */
  .pn-mp__table th[scope="row"]{vertical-align:middle}
  .pn-mp__bar{width:24px;margin-right:6px}
}
.pn-mp__table th,.pn-mp__table td{padding:10px 12px;text-align:right;white-space:nowrap;border-bottom:1px dashed var(--line)}
.pn-mp__table th:first-child{padding-left:0}
.pn-mp__table tr > :last-child{padding-right:0}
.pn-mp__table thead th{font:700 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-mp__table th[scope="row"],.pn-mp__table thead th:first-child{text-align:left;font-weight:700}
.pn-mp__table .is-med{font:700 15px/1 var(--font-display);color:var(--pink-text)}   /* T41: >= 4.5:1 */
.pn-mp__table thead .is-med{font:700 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-mp__bar{position:relative;display:inline-block;width:40px;height:6px;margin-right:8px;overflow:hidden;border-radius:8px;vertical-align:.12em;background:var(--sunken)}
.pn-mp__bar::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w,0) * 100%);background:var(--pink)}
/* quotes: paper cards with the line (.pcard skin) */
.pn-mp__quotes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pn-mp__quote{display:grid;align-content:space-between;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--bg)}
.pn-mp__quote blockquote{margin:0;font:400 15px/1.5 var(--font-sans);color:var(--ink)}
.pn-mp__stars{display:inline-flex;gap:2px;color:var(--pink-text)}
.pn-mp__stars .is-on{fill:currentColor}
.pn-mp__stars .is-off{opacity:.25}
.pn-mp__chips{display:grid;gap:8px}
.pn-mp__chips ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
/* polish 02.10.: the questions to ask her read as quoted words (the hub's "Ask her" line), never as pills that look like
   filters next to real chip links */
.pn-mp__chips ul:has(> li > .pn-mp__ask){gap:4px 18px}
.pn-mp__ask{font:600 15px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-mp__links{margin:0;padding:0;list-style:none;display:grid;justify-items:start;gap:14px}   /* AD1 03.10.: kit tier-3 links (ui_more) */
.pn-mp__links .pc-more{font-size:15px}
.pn-mp__report{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:26px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--bg)}
/* the page's strike lines (K3 on /sell, K5 on the report, K4 on the hub): the struck word + the Caveat correction */
.pn-mp__k .pc-fix,.pn-hubk .pc-fix{white-space:nowrap;line-height:.9;color:var(--pink-text)}
.pn-lpm-hero__k .pc-fix{color:var(--pink-text)}   /* night QA D5: the money hero strike line (sell / buy) sits on the light hero too */
/* the report's short answer = the receipt (.receipt: paper, line, zigzag foot, 1.5°) */
.pn-rep__sum{display:grid;gap:14px;max-width:520px;margin:0 0 12px;counter-increment:none}
.pn-rep__sumh{margin:0;font:600 12px/1.3 var(--font-sans);letter-spacing:0;color:var(--muted-lt)}
.pn-rep__fig{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;margin:0;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.pn-rep__fig > div{min-width:0}
.pn-rep__fig dt{font:600 12px/1.2 var(--font-sans);color:var(--muted-lt)}
.pn-rep__fig dd{margin:4px 0 0;font:700 30px/1 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--anthracite)}
.pn-rep__fig > div + div{text-align:right}
.pn-rep__fig > div + div dd{font-size:18px;color:var(--muted-lt)}
.pn-rep__sum ul{margin:0;padding:0;list-style:none;display:grid}
.pn-rep__sum li{padding:10px 0;border-top:1px dashed var(--line)}
.pn-rep__sum li:first-child{border-top:0;padding-top:0}
.pn-rep__mast{margin:0 0 18px;padding:0 0 12px}
.pn-rep__mast .pc-kicker{color:var(--ink);line-height:1.4;align-items:flex-start}   /* polish 02.10.: the edition line wraps on phones: real leading, the tub on the first line */
.pn-rep__mast .pc-kicker .pc-tub{margin-top:2px}
@media (max-width:900px){.pn-mp__quotes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .pn-lpm-body{gap:40px}
  .pn-mp__h{font-size:18px}
  .pn-mp__table th,.pn-mp__table td{padding:10px 8px}
  .pn-mp__table th:first-child{position:sticky;left:0;z-index:1;padding-right:10px;background:var(--surface)}
  .pn-mp__report{padding:18px}
  .pn-mp__report .pn-mp__table th:first-child{background:var(--bg)}
  .pn-rep__fig dd{font-size:24px}
  .pn-rep__fig > div + div dd{font-size:18px}
}

/* ---------- T21: the report page on two columns (TOC + rail | the report) ---------- */
/* The side column holds the TOC, the dark CTA box and "Read next" (sticky while it fits); the report column gets ~800 px,
   so the tables are not cut. Phones: the wrapper dissolves (TOC, report, rail as before). */
.pn-lpm--report .pn-lpm-guide__grid{grid-template-columns:300px minmax(0,1fr)}   /* AD1 F3: the rail as wide as the money rail (was 280) */
.pn-rep__side{display:grid;gap:28px;align-content:start;min-width:0}
.pn-rep__side .pn-lpm-rail{grid-column:auto}
@media (min-width:701px){
  /* the side column runs the full report height; the CTA box + "Read next" stick below the TOC (they fit any screen) */
  .pn-rep__side{align-self:stretch;align-content:start}
  .pn-rep__side .pn-lpm-rail{position:sticky;top:calc(var(--sticky-top) + 12px)}
  .pn-lpm--report .pn-lpm-body{grid-column:2;grid-row:1}
  .pn-lpm--report .pn-lpm-ctabox{padding:22px}
  .pn-lpm--report .pn-lpm-ctabox .pc-btn{padding-inline:14px;font-size:13px}
}
@media (min-width:701px) and (max-width:1100px){.pn-lpm--report .pn-lpm-guide__grid{grid-template-columns:240px minmax(0,1fr);gap:32px}}
@media (max-width:700px){
  .pn-lpm--report .pn-lpm-guide__grid{grid-template-columns:minmax(0,1fr)}
  .pn-rep__side{display:contents}
  .pn-lpm--report .pn-lpm-toc{order:1}
  .pn-lpm--report .pn-lpm-body{order:2}
  .pn-lpm--report .pn-lpm-rail{order:3}
}
.pn-rep__ctak{margin:0 0 4px;font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);color:var(--dk-ink)}
.pn-lpm-ctabox .pc-btn{white-space:normal;text-align:center}
/* T19: the money pages' rail CTA is one line of 2-3 words now: the kit button height (53), not the wrapped 1.15 lines. */
.pn-mp-ctabox .pc-btn{line-height:1}
/* The table scroller: a right-edge fade while more columns hide to the right (report.js sets data-more). */
.pn-mp__tw[data-more]{-webkit-mask-image:linear-gradient(to right,black calc(100% - 36px),transparent);mask-image:linear-gradient(to right,black calc(100% - 36px),transparent)}
/* Quotes: one column whenever the report column itself is narrower than 700 (not the viewport). */
.pn-lpm-body{container-type:inline-size}
@container (max-width:700px){.pn-mp__quotes{grid-template-columns:minmax(0,1fr)}}
/* Upsells (owner 05.10.): the ladder = the .pbox rows with a "+" gutter (the pair row without one), the hub link as a
   tier-3 link under the label on phones; the worked order = a receipt-shaped list with the sum; the calculator = the
   landing's dark box (.pc-box--dk + .pc-stepper) with the add-on switches as dashed rows. Tokens only. */
.pn-rep__lad th[scope="row"]{white-space:normal;padding-left:26px;text-indent:-26px}
.pn-rep__lad .is-pair th[scope="row"]{font-weight:800}
.pn-rep__lad-plus{display:inline-block;width:26px;text-indent:0;font:700 15px/1 var(--font-display);color:var(--pink-text)}
.pn-rep__lad-see{margin-left:10px;font-size:13px;text-indent:0;white-space:nowrap}
.pn-rep__lad td{vertical-align:middle}
@media (max-width:700px){
  .pn-rep__lad-see{display:block;margin:4px 0 0 26px}
  .pn-rep__lad td:last-child{white-space:normal;font-size:12px;color:var(--ink-2)}
}
.pn-rep__ex{margin:0;max-width:420px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface);font:500 15px/1.45 var(--body);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-rep__ex-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-top:1px dashed var(--line)}
.pn-rep__ex-row:first-child{border-top:0;padding-top:0}
.pn-rep__ex-row dt{padding-left:26px;text-indent:-26px}
.pn-rep__ex-row dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-rep__ex-row.is-total{margin-top:6px;padding-top:14px;border-top:0;background:var(--sunken);font-weight:700}
.pn-rep__ex-row.is-total dt{font-weight:700;padding-left:0;text-indent:0}
.pn-rep__ex-row.is-total dd{font:700 18px/1 var(--font-display);color:var(--pink-text)}
.pn-rep__calc{max-width:520px}
/* three classes: guide.css's ".pn-lpm-guide .pc-box > p{font-size:15px}" comes later in the cascade and must not shrink the sum */
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-p{margin:0 0 6px;font-size:15px;color:var(--dk-ink-2)}
.pn-rep__calc .pc-stepper button{color:var(--dk-ink)}
.pn-rep__calc .pc-stepper button:hover{border-color:transparent}
.pn-rep__calc .pc-stepper button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-rep__calc-add{margin:6px 0 10px;padding:0;border:0;min-width:0}
.pn-rep__calc-add legend{padding:0;margin:0 0 4px;font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--dk-ink-2)}
.pn-rep__calc-base,.pn-rep__calc-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--dk-ink)}
.pn-rep__calc-base b,.pn-rep__calc-opt b{font:700 15px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--white)}
.pn-rep__calc-opt{cursor:pointer}
.pn-rep__calc-opt > span{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.pn-rep__calc-opt input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--pink)}
.pn-rep__calc-opt .pn-rep__lad-plus{width:auto;color:var(--pink)}
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-eq{margin:8px 0 0;font-size:15px;color:var(--dk-ink-2)}
.pn-rep__calc .pn-rep__calc-eq b{color:var(--white)}
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-res{margin:6px 0;font:700 30px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--pink)}
.pn-rep__calc small{display:block;color:var(--dk-ink-2);font-size:12px}
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-cta{margin:18px 0 0}
@media (max-width:700px){.pn-mp__sec .pn-rep__calc > .pn-rep__calc-res{font-size:30px}}
/* UX polish 23.10. (UX-004): the FAQ question was the only tap target in its box, 19–20 px tall. The summary now spans
   the box's own padding (same negative margin back), so the whole box opens it and nothing moves: closed the box keeps
   its height, open the answer keeps its 10 px (the summary's -16 bottom margin and the answer's +10 collapse to -6,
   after the 16 px padding). Every .pc-faq details carries 16/18 (components.css). */
.pc-faq details > summary{margin:-16px -18px;padding:16px 18px;border-radius:inherit}
/* ==========================================================================
   guides: the guide index /<base>/ and one guide /<base>/<slug>/ (templates/guides.php, guide.php; lib/guides.php).
   Places kit parts only (docs/design-v3-system.md §2): the money pages' reading frame (.pn-lpm-hero, .pn-lpm-guide grid,
   .pc-toc, the dark CTA .pc-box--dk, the related .pc-pbox, .pc-faq — landing.css + report.css), the cream .pc-box for
   the lead answer, the .pc-strip on a dark box for {{figure:price}}, the .pbox table rows of report.css (.pn-mp__table)
   for data and Markdown tables, callouts on the 1 px line with a 4 px role bar (tip pink, note line, warning, safety
   success), the Draft pill = .pc-badge--accent. The index rows reuse the landing's "Read up first" row language
   (numbered rows between lines, the title is the row's link, a 40 px arrow pill). Tokens only; no shadow, no rotation.
   ========================================================================== */
.pn-gd-hero{padding-top:48px}
.pn-gd-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:end}
.pn-gd-hero__copy{min-width:0;padding-bottom:56px}
.pn-gd-hero__tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pn-gd-hero__h{margin:18px 0 18px;text-wrap:balance}
.pn-gd .pn-lpm-hero:not(.pn-lpm-hero--report) .pn-gd-hero__h.pc-h-xl{font-size:var(--fs-l)}   /* visual audit VG-010: one title scale (was up to 64 px) */
.pn-gd-by{display:inline-flex;align-items:center;gap:8px;margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-gd-by .pc-ico{flex:none;color:var(--ink-2)}
.pn-gd-band{margin:16px 0 0;max-width:var(--measure-lede)}
.pn-gd-pill{flex:none}
.pn-gd-lead{margin:0 0 56px;display:grid;gap:12px}
.pn-gd-lead__h{margin:0;font:var(--type-label);letter-spacing:0;color:var(--anthracite)}
.pn-gd-lead__a{margin:0;font:var(--type-title);color:var(--anthracite)}
.pn-gd-lead__a a{color:inherit;text-decoration:underline;text-decoration-color:var(--pink-press);text-decoration-thickness:2px;text-underline-offset:3px}

/* the body: the report's section head type for h2 (Archivo 900 caps), prose 17 / 1.65 */
.pn-gd-body{min-width:0;max-width:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.pn-gd-body > *{margin:0;max-width:var(--measure-prose)}
.pn-gd-body > :is(.pn-mp__tw,.pn-gd-fig,.pn-mp__cap){max-width:none}
.pn-gd-body h2{margin:var(--space-8) 0 0;font:var(--type-h1);letter-spacing:0;color:var(--ink);overflow-wrap:break-word;scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-gd-body > h2:first-child{margin-top:0}
.pn-gd-body h3{margin:14px 0 0;font:var(--type-title);text-transform:none;color:var(--ink)}
.pn-gd-body :is(ul,ol){padding:0;list-style:none;display:grid;gap:8px}
.pn-gd-body :is(ul,ol) > li{position:relative;padding-left:22px}
.pn-gd-body ul > li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--ink-2)}
.pn-gd-body ol{counter-reset:pn-gd}
.pn-gd-body ol > li{padding-left:36px;counter-increment:pn-gd}
.pn-gd-body ol > li::before{content:counter(pn-gd);position:absolute;left:0;top:0;width:24px;text-align:center;font:var(--type-label);color:var(--ink-2)}
.pn-gd-body a:not([class]),.pn-gd-faq__a a:not([class]){color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}
.pn-gd-num{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-gd-table--text th,.pn-gd-table--text td{text-align:left;white-space:normal;vertical-align:top}
.pn-gd-table--text thead th{white-space:nowrap}

/* callouts: paper, the 1 px line, a 4 px role bar on the left, the label in kicker type */
.pn-gd-callout{display:grid;gap:var(--space-2);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink);font:var(--type-prose)}
.pn-gd-callout > :is(p,ul,ol){margin:0}
.pn-gd-callout__k{display:flex;align-items:center;gap:8px;font:var(--type-cap);letter-spacing:0}
.pn-gd-callout__k .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m)}
.pn-gd-callout--tip .pn-gd-callout__k .pc-ico{color:var(--ink)}
.pn-gd-callout--warning .pn-gd-callout__k .pc-ico{color:var(--warning)}
.pn-gd-callout--safety .pn-gd-callout__k .pc-ico{color:var(--success)}

/* {{figure:price}}: the mockup .worth strip on the dark box */
.pn-gd-fig{margin:8px 0;padding:22px 26px 24px;overflow:hidden}
.pn-gd-fig__strip{margin:26px 0 8px}
.pn-gd-fig__cap{margin:0;max-width:var(--measure-prose);font:var(--type-body);color:var(--dk-ink-2)}

/* the TOC rides along on wide screens */
@media (min-width:1101px){.pn-gd-toc{position:sticky;top:calc(var(--sticky-top) + 12px);align-self:start}}
.pn-gd-faq__a{display:grid;gap:10px;margin-top:10px}
.pn-gd-faq__a > *{margin:0;max-width:720px;color:var(--ink-2)}

/* the index: numbered rows between lines (the landing's "Read up first" rows) */
.pn-gdx__head{padding-bottom:56px}
.pn-gdx__head .pn-lpm-hero__lede{margin:0}
.pn-gdx__rows{list-style:none;margin:0;padding:0;counter-reset:gdx;max-width:960px}
.pn-gdx__row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 40px;align-items:center;column-gap:20px;padding:var(--space-5);border-radius:var(--r-l);background:var(--surface);counter-increment:gdx}
.pn-gdx__row::before{content:counter(gdx,decimal-leading-zero);align-self:start;padding-top:calc(clamp(24px,2.4vw,32px) * .49 - 6px);font:var(--type-label);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--pink-text)}   /* polish 02.10.: on the title's first line (was centred on the whole row); text pink (was 2.3:1 pink-press) */
.pn-gdx__body{min-width:0;display:grid;gap:8px;justify-items:start}
.pn-gdx__h{margin:0;font:var(--type-title);text-wrap:balance}
.pn-gdx__h a{color:var(--ink);text-decoration:none}
.pn-gdx__h a::after{content:"";position:absolute;inset:0;z-index:1}
.pn-gdx__h a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-gdx__p{margin:0;max-width:62ch;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}
/* 02.10. guest grounding: from 1000 a row runs the full 1168 column (owner: no empty right half): the title (+ Draft
   pill) left, the lead right on its own column, the arrow pill on the column's edge. */
@media (min-width:1000px){
  .pn-gdx__rows{max-width:none}
  .pn-gdx__body{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;row-gap:8px;align-items:start}
  .pn-gdx__body > .pn-gdx__h,.pn-gdx__body > .pn-gd-pill{grid-column:1}
  .pn-gdx__body > .pn-gdx__p{grid-column:2;grid-row:1 / span 2}
}
.pn-gdx__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);font:var(--type-title);transition:background-color var(--dur-fast),color var(--dur-fast)}   /* polish 02.10.: the ring is the line button's edge (ink on light, grey 50 % in dark, never a white ring) */
/* polish 02.10.: phones = the landing's "Read up first" row: the number and the arrow on one top line, the title, pill
   and lead below on the full width (the 44 px number column took a sixth of a 390 screen, the lead ran 40 % narrower) */
@media (max-width:700px){
  .pn-gdx__row{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"n go" "b b";align-items:center;row-gap:12px;padding:22px 0}
  .pn-gdx__row::before{grid-area:n;align-self:center;padding-top:0}
  .pn-gdx__body{grid-area:b}
  .pn-gdx__go{grid-area:go;width:36px;height:36px;font-size:var(--fs-ui)}
}
.pn-gdx__row:hover{background:var(--surface-2)}
.pn-gdx__row:hover .pn-gdx__go{background:var(--surface-3);color:var(--ink)}
.pn-gdx__row:hover .pn-gdx__h a{text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}

/* links into the guides from other pages: the hub side column, the landing's "Read up first" with a fourth row */
/* owner 12.10. evening ("da ist zuviel luft"): 45px lay between the small title and the first row; the title's own margins go, the rows are a little tighter */
.pn-gd-hubbox .pc-pbox__t{margin:0 0 2px}
.pn-gd-hubbox ul{list-style:none;margin:0 0 10px;padding:0}
.pn-gd-hubbox li a{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font:var(--type-strong);color:var(--ink);text-decoration:none}
.pn-gd-hubbox li a:hover{text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:1101px){.pn-lp-mgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (min-width:701px) and (max-width:1100px){
  .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
}
@media (max-width:700px){
  .pn-gd-hero{padding-top:32px}
  .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-gd-hero__copy{padding-bottom:28px}
  .pn-gd .pn-lpm-hero:not(.pn-lpm-hero--report) .pn-gd-hero__h.pc-h-xl{font-size:var(--fs-l)}
  .pn-gd-lead{margin-bottom:40px}
  .pn-gd-lead__a{font-size:var(--fs-ui)}
  .pn-gd-body h2{font-size:var(--fs-title)}
  .pn-gd-toc:empty{display:none}
  .pn-gd-fig{padding:18px}
  .pn-gdx__head{padding-bottom:32px}
  .pn-gdx__row{column-gap:12px}
}

/* the sources box (front matter cite:): a dashed list at the end of the body, the label is the link */
.pn-gd-sources{display:grid;gap:var(--space-2);margin-top:var(--space-6);padding-top:0}
.pn-gd-body .pn-gd-sources__h{margin:0;font:var(--type-cap);letter-spacing:0}
.pn-gd-body .pn-gd-sources ol{margin:0;padding:0;list-style:none;display:grid;gap:0}
.pn-gd-body .pn-gd-sources li{padding:var(--space-1) 0;font:var(--type-meta);color:var(--ink-2)}
.pn-gd-body .pn-gd-sources li::before{content:none}

/* legalpages: legacy's help / FAQ, terms and privacy (templates/legal_page.php) in this frame. The text column stacks
   legacy's prose (.pn-gd-body type) and the FAQ accordion (.pc-faq, the money pages' +/− summary at the question size of
   the mobile FAQ); the question is the summary's h2 in the summary's type. Tokens only. */
.pn-lg-main{min-width:0;display:grid;gap:28px;align-content:start}
.pn-lg-faq{max-width:var(--measure-prose)}
.pn-lg-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);min-height:var(--space-6)}
.pn-lg-faq summary::-webkit-details-marker{display:none}
.pn-lg-faq summary::after{content:"+";flex:none;color:var(--ink-2)}
.pn-lg-faq details[open] summary::after{content:"−"}
.pn-lg-faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-lg-faq__q{margin:0;min-width:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;overflow-wrap:break-word;scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-lg-faq__a{margin-top:12px}
.pn-lg-faq__a > *{color:var(--ink-2)}
.pn-lg-body hr{width:100%;height:0;margin:var(--space-4) 0;border:0}   /* no rules inside: the gap is the break */
.pn-lg-body :is(table){border-collapse:collapse}
.pn-lg-body :is(th,td){padding:var(--space-2) var(--space-3);border:0;text-align:left;vertical-align:top}
.pn-lg-body tr:nth-child(odd) > :is(th,td){background:var(--surface)}
/* "How creators work" (owner 27.10., lib/creator_voices.php): each creator's excerpt as a quiet tonal card, her name under it */
.pn-lg-body blockquote{margin:var(--space-3) 0;padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-lg-body blockquote p{margin:0;max-width:var(--measure-prose);font:var(--type-ui);color:var(--ink)}
.pn-lg-body blockquote p + p{margin-top:8px;font:var(--type-strong);color:var(--ink-2)}
/* L3 (owner 08.10., "no legacy anywhere", lib/legacy_pages.php): legacy's editorial pages keep their own photos and YouTube
   embeds in the legal pages' frame; the contact / content-complaint forms and /unsubscribe use the same frame. */
.pn-l3-img{display:block;width:auto;max-width:100%;height:auto;margin:var(--space-2) 0;border-radius:var(--r-m)}
.pn-l3-video{display:block;position:relative;width:100%;max-width:var(--measure-prose);aspect-ratio:16/9;margin:var(--space-2) 0;border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.pn-l3-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pn-l3c__main{display:grid;gap:var(--space-6);align-content:start;max-width:var(--prose-max)}
.pn-l3c__form{display:grid;gap:var(--field-gap);max-width:560px;padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-l3c__form[hidden],.pn-l3c__done[hidden]{display:none}
.pn-l3c__seg{flex-direction:column;align-items:stretch}
.pn-l3c__seg > a{justify-content:flex-start;min-height:var(--control-md);background:var(--surface-2);border-color:transparent;color:var(--ink-2)}
.pn-l3c__seg > a[aria-current="page"]{background:var(--surface-3);border-color:transparent;color:var(--ink)}
.pn-l3c__coderow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.pn-l3c__img{display:block;width:120px;height:var(--control-md);border:0;border-radius:var(--r-m)}
.pn-l3c__codein{width:9em;flex:0 0 auto}
.pn-l3c__send{justify-self:start}
.pn-l3c__done{display:grid;gap:var(--space-3);max-width:560px;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-l3c__done:focus:not(:focus-visible){outline:none}
.pn-l3c__done p{margin:0;color:var(--ink-2)}
.pn-l3c__done-h{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-title)}
.pn-l3c__done-h .pc-ico{flex:none;width:var(--icon-l);height:var(--icon-l);color:var(--success)}
.pn-l3m__cta{margin-top:var(--space-1)}
@media (max-width:700px){
  .pn-l3c__seg{flex-direction:row;flex-wrap:wrap}
  .pn-l3c__seg > a{flex:1 1 auto;justify-content:center;min-height:var(--tap)}
  .pn-l3c__send{justify-self:stretch}
  .pn-l3c__coderow .pc-btn{min-height:var(--tap)}
}
/* affiliate (owner 09.10., lib/affiliate_join.php): CCBill's signup form in the site's look — its tables become a stack
   (label over field) on phones and a two-column grid on wide screens; only looks change, never a field. Apply now. */
.pn-affj{max-width:var(--measure-prose)}
/* owner 14.10.: our own sign-up forms for CCBill (templates/partners.php .pn-affown) */
.pn-affown{display:grid;gap:16px;max-width:var(--measure-prose)}
.pn-affown__new{display:grid;gap:10px;padding:20px;border-radius:var(--r-l);background:var(--surface-2)}
.pn-affown__new p,.pn-affown__login p{margin:0;color:var(--ink-2);font:var(--type-body)}
.pn-affown__h{font:var(--type-title)!important;color:var(--ink)!important}
.pn-affown__fine{display:flex;gap:6px;align-items:center;font-size:var(--fs-meta)!important}
.pn-affown__has{padding:4px 0}
.pn-affown__has summary{cursor:pointer;font:var(--type-strong);color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-affown__login{display:grid;gap:12px;margin-top:12px;max-width:360px}
.pn-affj fieldset,fieldset.pn-affj{border:0;margin:0;padding:0;min-width:0}
.pn-affj__form{display:grid;gap:16px}
.pn-affj table,.pn-affj tbody,.pn-affj thead,.pn-affj tfoot{display:block;width:100%;border:0}
.pn-affj tr{display:grid;gap:8px;padding:0 0 14px}
.pn-affj td,.pn-affj th{display:block;padding:0;border:0;text-align:left;font:var(--type-body);color:var(--ink)}
.pn-affj tr > td:first-child:not(:last-child){font:var(--type-label);color:var(--ink)}
.pn-affj p,.pn-affj__h{margin:0;color:var(--ink-2);font:var(--type-body)}
.pn-affj__h{font-weight:700;color:var(--ink);font-size:var(--fs-ui)}
.pn-affj .pc-input{max-width:100%}
.pn-affj__check{width:20px;height:20px;margin:0 8px 0 0;vertical-align:middle;accent-color:var(--accent)}
.pn-affj a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-affj__send{justify-self:start;margin-top:4px}
.pn-affj input[type=submit],.pn-affj input[type=image]{cursor:pointer}
@media (min-width:701px){
  .pn-affj tr{grid-template-columns:minmax(140px,220px) minmax(0,1fr);align-items:center;column-gap:16px}
  .pn-affj td[colspan],.pn-affj tr > td:only-child{grid-column:1/-1}
}
.pn-affap{display:grid;gap:18px;max-width:var(--measure-prose)}
.pn-affap__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pn-affap__consent{display:flex;gap:12px;align-items:flex-start;font:var(--type-body);color:var(--ink-2);min-height:44px}
.pn-affap__consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.pn-affap__consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-affap__send{justify-self:start}
.pn-affap__done{display:grid;gap:var(--space-3);max-width:560px;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-affap__done:focus:not(:focus-visible){outline:none}
.pn-affap__done p{margin:0;color:var(--ink-2)}
.pn-affap__done-h{display:flex;align-items:center;gap:10px;font:var(--type-title);color:var(--ink) !important}
.pn-affap__done-h .pc-ico{flex:none;color:var(--success)}
@media (max-width:700px){.pn-affap__send,.pn-affj__send{justify-self:stretch;min-height:44px}}
/* affiliate (owner 09.10., lib/affiliate_view.php): the stats module — the partner's dashboard and /pnew-admin/partners/. */
.pn-afs{display:grid;gap:16px;min-width:0}
.pn-afs__range{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end}
.pn-afs__seg{display:flex;flex-wrap:wrap;gap:6px}
.pn-afs__seg a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-chip);font:var(--type-label);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pn-afs__seg a:hover{color:var(--ink);border-color:transparent;background:var(--t-tint-2)}
.pn-afs__seg a[aria-current="true"]{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pn-afs__seg--sm a{min-height:34px;padding:0 10px}
.pn-afs__custom{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.pn-afs__custom label{display:grid;gap:6px;font:var(--type-label);color:var(--ink)}
.pn-afs__custom .pc-input{width:auto;min-width:150px}
.pn-afs__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pn-afs__chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border-radius:var(--r-chip);background:var(--accent-soft);color:var(--ink);font:var(--type-label);text-decoration:none}
.pn-afs__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pn-afs__kpi{display:grid;gap:4px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-pcard);min-width:0}
.pn-afs__kl{font:var(--type-cap);color:var(--ink-2)}
.pn-afs__kpi b{font:var(--type-h1);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pn-afs__kpi small{font:var(--type-meta);color:var(--ink-2)}
.pn-afs__kpi--revenue b,.pn-afs__kpi--est b{color:var(--accent-text)}
.pn-afs__empty{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-pcard);color:var(--ink-2);font:var(--type-body)}
.pn-afs__panel{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-pcard);min-width:0}
.pn-afs__panel h3{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-afs__ph{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.pn-afs__note,.pn-afs__csv{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-afs__csv a{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--ink);font-weight:600;text-decoration:none}
.pn-afch{display:block;width:100%;height:auto;max-height:240px}
.pn-afch__bar{fill:var(--accent)}
.pn-afch__bar:hover{fill:var(--accent-press)}
.pn-afch__base{stroke:var(--t-hair,var(--line));stroke-width:1}
.pn-afch__lbl{fill:var(--ink-2);font:var(--type-meta)}
.pn-afs__funnel{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pn-afs__funnel li{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr) auto 64px;gap:10px;align-items:center;font:var(--type-meta);color:var(--ink)}
.pn-afs__fb{display:block;height:10px;border-radius:999px;background:var(--sunken);overflow:hidden}
.pn-afs__fb i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.pn-afs__funnel b{font-variant-numeric:tabular-nums}
.pn-afs__funnel small{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.pn-afs__tbl{display:block;max-width:100%}
.pn-afs__tbl > * + *{margin-top:10px}
.pn-afs__tbl summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;cursor:pointer;list-style:none}
.pn-afs__tbl summary::-webkit-details-marker{display:none}
.pn-afs__tbl summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin:0 6px 4px auto}
.pn-afs__tbl[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.pn-afs__n{font:var(--type-cap);color:var(--ink-2)}
.pn-afs__tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-chip)}
.pn-afs__tw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pn-afs__table{width:100%;border-collapse:collapse;font:var(--type-meta);font-variant-numeric:tabular-nums}
.pn-afs__table th,.pn-afs__table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;color:var(--ink)}
.pn-afs__table thead th{font:var(--type-cap);color:var(--ink-2);background:var(--sunken)}
.pn-afs__table th:first-child{text-align:left;position:sticky;left:0;background:var(--bg)}
.pn-afs__table thead th:first-child{background:var(--sunken)}
.pn-afs__table tbody tr:last-child > *{border-bottom:0}
.pn-afs__table a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
@media (min-width:701px){.pn-afs__kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1101px){.pn-afs__kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:700px){
  .pn-afs__seg a{min-height:44px}
  .pn-afs__custom{width:100%}
  .pn-afs__custom label{flex:1 1 40%}
  .pn-afs__custom .pc-input{width:100%;min-width:0}
  .pn-afs__funnel li{grid-template-columns:minmax(80px,110px) minmax(0,1fr) auto;row-gap:2px}
  .pn-afs__funnel small{grid-column:3}
}
/* affiliate (owner 09.10.): the partner's dashboard (templates/partners_stats.php). One pink key: "Copy link". */
.pn-afd__wrap{display:grid;gap:28px;padding-top:8px;padding-bottom:48px}
.pn-afd__nav{display:flex;gap:6px;overflow-x:auto;padding:8px 0;position:sticky;top:var(--header-h);z-index:2;background:var(--bg);border-bottom:1px solid var(--line)}
.pn-afd__nav a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-chip);font:var(--type-strong);color:var(--ink-2);text-decoration:none}
.pn-afd__nav a:hover{color:var(--ink);background:var(--sunken)}
.pn-afd__flash{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:var(--r-pcard);border:1px solid var(--line);font:var(--type-body);color:var(--ink)}
.pn-afd__flash .pc-ico{flex:none}
.pn-afd__flash.is-ok .pc-ico{color:var(--accent)}
.pn-afd__flash.is-err{border-color:transparent;background:var(--t-danger,var(--danger-soft))}
.pn-afd__flash.is-err .pc-ico{color:var(--danger)}
.pn-afd__flash.is-info{background:var(--sunken)}
.pn-afd__start,.pn-afd__sec{display:grid;gap:14px;scroll-margin-top:calc(var(--header-h) + 64px);min-width:0}
.pn-afd__start{padding:18px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-afd__start h2,.pn-afd__sec h2{margin:0;font:var(--type-h1);color:var(--ink)}
.pn-afd__h3{margin:8px 0 0;font:var(--type-strong);color:var(--ink)}
.pn-afd__steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:afd}
.pn-afd__steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;counter-increment:afd;font:var(--type-body);color:var(--ink-2)}
.pn-afd__steps li::before{content:counter(afd);grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--sunken);color:var(--ink);font:var(--type-label)}
.pn-afd__steps b{color:var(--ink);font-weight:700}
.pn-afd__money{display:flex;gap:10px;align-items:flex-start;margin:0;font:var(--type-body);color:var(--ink)}
.pn-afd__money .pc-ico{flex:none;color:var(--accent)}
.pn-afd__money a,.pn-afd__clink{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pn-afd__p{margin:0;max-width:var(--measure-prose);font:var(--type-body);color:var(--ink-2)}
.pn-afd__note,.pn-afd__small{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-afd__builder,.pn-afd__bfilter,.pn-afd__cadd,.pn-afd__pbform{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.pn-afd__brow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pn-afd__out{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-afd__code{font:var(--type-meta);font-variant-numeric:tabular-nums;min-height:auto;resize:vertical;word-break:break-all}
.pn-afd__banners{display:grid;gap:14px;margin:0;padding:0;list-style:none;grid-template-columns:minmax(0,1fr);align-items:start}
.pn-afd__banner{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-pcard);min-width:0}
.pn-afd__bimg{display:grid;place-items:center;padding:10px;border-radius:var(--r-chip);background:var(--sunken);overflow:hidden}
.pn-afd__bimg img{display:block;max-width:100%;height:auto}
.pn-afd__bmeta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-afd__bmeta b{color:var(--ink)}
.pn-afd__banner .pc-btn{justify-self:start}
.pn-afd__camps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pn-afd__camp{padding:12px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-afd__camp.is-archived{opacity:.65}
.pn-afd__crow{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.pn-afd__crow .pc-input{flex:1 1 200px;width:auto}
.pn-afd__slug{font:var(--type-label);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-afd__clink{font-size:var(--fs-body);min-height:40px;display:inline-flex;align-items:center}
.pn-afd__macros{display:grid;gap:6px 16px;margin:0;grid-template-columns:minmax(0,1fr)}
.pn-afd__macros div{display:flex;gap:10px;align-items:baseline;font:var(--type-meta);color:var(--ink-2)}
.pn-afd__macros dt{flex:none;min-width:96px}
.pn-afd__macros code{color:var(--ink);font:var(--type-label);font-variant-numeric:tabular-nums}
.pn-afd__macros dd{margin:0}
.pn-afd__pburls{display:grid;gap:6px;margin:0;padding:0;list-style:none;font:var(--type-meta);color:var(--ink-2)}
.pn-afd__pburls code{display:block;overflow-wrap:anywhere;color:var(--ink)}
.pn-afd__faq{display:grid;gap:0;max-width:var(--measure-prose);border-top:1px solid var(--line)}
.pn-afd__faq details{border-bottom:1px solid var(--line)}
.pn-afd__faq summary{display:flex;align-items:center;min-height:48px;padding:10px 0;cursor:pointer;font:var(--type-strong);color:var(--ink)}
.pn-afd__faq p{margin:0 0 14px;font:var(--type-body);color:var(--ink-2)}
@media (min-width:701px){
  .pn-afd__builder{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
  .pn-afd__builder .pn-afd__brow{grid-column:1/-1}
  .pn-afd__bfilter{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
  .pn-afd__cadd{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:start}
  .pn-afd__cadd .pn-afd__brow{padding-top:25px}
  .pn-afd__banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-afd__macros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1101px){.pn-afd__banners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .pn-afd__brow .pc-btn,.pn-afd__banner .pc-btn{min-height:44px}
  .pn-afd__brow > .pc-btn{flex:1 1 auto}
  .pn-afd__crow .pc-btn{min-height:44px}
}

/* ==========================================================================
   One editorial frame (art director pass 27.10., owner: "unterschiedliche Schriftgrößen, Grafiken reißen Lücken, Kraut
   und Rüben"). Every .pn-gd page (about, safety, rules, FAQ, imprint, terms, privacy, help, press, contact, the guides and
   the two community guides) shares: a one-column hero when it holds no art (no empty 400 px art slot), one head stack, one
   type scale (--fs-ed-*), one block rhythm (grid gap --ed-gap, a heading adds --ed-sec; the prose margins of guest.css no
   longer add up inside the grid), a text column on the reading measure flush with the h1, and the side column (TOC on
   top, the related box sticky under it) on the right from 1101; one column below that.
   ========================================================================== */
/* hero */
.pn-gd .pn-gd-hero__wrap:not(:has(> :nth-child(2))){grid-template-columns:minmax(0,1fr)}
.pn-gd .pn-gd-hero__copy{padding-bottom:48px}
.pn-gd .pn-lpm-hero:not(.pn-lpm-hero--report) .pn-gd-hero__h{max-width:24ch;margin:18px 0}
.pn-gd .pn-lpm-hero__lede{margin:0;max-width:var(--measure-lede);font:var(--type-ui);color:var(--ink-2)}   /* CONT-094: lede 16 in ink-2, below the h1 */
.pn-gd .pn-lpm-guide{padding-top:56px}
@media (max-width:700px){
  .pn-gd .pn-gd-hero__copy{padding-bottom:32px}
  .pn-gd .pn-lpm-guide{padding:40px 0 calc(60px + var(--dock))}
  body:has(.pn-gd) .pn-main{padding-bottom:0}   /* the panel runs to the footer: no strip of page ground between them */
}

/* the body: one size, one rhythm */
.pn-gd .pn-gd-body{gap:var(--space-4);font:var(--type-prose)}
.pn-gd .pn-gd-body.pn-prose > *,.pn-gd .pn-gd-body.pn-prose li{margin:0}
.pn-gd .pn-gd-body.pn-prose > :is(h2,h3){margin-top:var(--space-8)}
.pn-gd .pn-gd-body.pn-prose > :is(h2,h3):first-child{margin-top:0}
.pn-gd .pn-gd-body.pn-prose h2{font:var(--type-h1);letter-spacing:0}   /* design system P9 (§13): editorial h2 = the h1 step 24, h3 = title 18 */
.pn-gd .pn-gd-body.pn-prose h3{font:var(--type-title);letter-spacing:0}
.pn-gd .pn-gd-body.pn-prose > h3{margin-top:var(--space-4)}
.pn-gd .pn-gd-body.pn-prose strong{font-weight:700}
.pn-gd .pn-gd-body :is(ul,ol){gap:10px}
/* numbered steps: the community guide's card list for every page (was a bare 20 px numeral hanging above the line) */
.pn-gd .pn-gd-body:not(.pn-lg-body) > ol > li{padding:var(--space-3) var(--space-4) var(--space-3) 52px;border-radius:var(--r-m);background:var(--surface)}
.pn-gd .pn-gd-body:not(.pn-lg-body) > ol > li::before{content:counter(pn-gd);left:var(--space-4);top:var(--space-3);display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full);background:var(--surface-2);font:var(--type-cap);color:var(--ink)}   /* CONT-072: one numbered-list style (never pink, no leading zero) */
.pn-gd .pn-gd-callout{font:var(--type-prose)}
.pn-gd .pn-gd-callout p{font-weight:400}

/* the side column */
.pn-gd .pn-lpm-guide__grid > div.pn-gd-toc:not(:has(*)){display:none}   /* the FAQ / guide placeholder held an empty column */
.pn-gd .pc-toc li a::before{color:var(--ink-2)}   /* CONT-133: the TOC numeral quiet, never pink */
.pn-gd .pn-lpm-rail .pc-pbox{padding:var(--panel-pad)}
.pn-gd .pn-lpm-rail .pc-pbox__t{font:var(--type-label);color:var(--ink-2)}
.pn-gd .pn-lpm-rail .pc-pbox li a{font-weight:var(--w-strong);min-height:var(--tap);padding-block:var(--space-2);align-items:center}
@media (min-width:1101px){
  .pn-gd .pn-lpm-guide__grid{grid-template-columns:minmax(0,var(--measure-prose)) 300px;grid-template-rows:auto 1fr;justify-content:space-between;column-gap:48px;row-gap:18px}
  .pn-gd .pn-lpm-guide__grid > *{grid-column:1;grid-row:1 / span 2}
  .pn-gd .pn-lpm-guide__grid > .pn-gd-toc{grid-column:2;grid-row:1;position:static}
  .pn-gd .pn-lpm-guide__grid > .pn-gd-rail{grid-column:2;grid-row:2;position:sticky;top:calc(var(--sticky-top) + 12px);align-self:start}
}
@media (max-width:1100px){
  .pn-gd .pn-lpm-guide__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pn-gd .pn-lpm-guide__grid > *{grid-column:auto;max-width:var(--measure-prose)}
}

/* FAQ (legal_page kind faq): questions on the h3 step, wrapped evenly, answers in body ink; no straight line on a round card */
.pn-gd .pn-lg-faq summary{font:var(--type-title);letter-spacing:0}
.pn-gd .pn-lg-faq__q{text-wrap:pretty}
.pn-gd .pn-lg-faq details:first-child{border-top:0}
.pn-gd .pn-lg-faq__a > *,.pn-gd .pn-gd-faq__a > *{color:var(--ink)}

/* guides (art director B, 27.10.) */
.pn-gd .pn-gd-hero__wrap{align-items:start}   /* B-005: crumbs, kicker and h1 at one height on every guide (was bottom-aligned to the answer box) */
@media (min-width:701px) and (max-width:1100px){.pn-gd:not(.pn-mpg) .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr)}.pn-gd .pn-gd-lead{max-width:var(--measure-prose)}}   /* B-007: es/it/fr h1s ran 5 lines next to the box */
.pn-gd .pn-gd-lead{padding:var(--panel-pad);border-radius:var(--r-l)}
.pn-gd .pn-gd-lead__a{font-weight:400}   /* B-027 */
[data-theme="dark"] .pn-gd .pn-gd-lead{background:var(--surface);box-shadow:none}
[data-theme="dark"] .pn-gd .pn-gd-lead :is(.pn-gd-lead__h,.pn-gd-lead__a){color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-gd .pn-gd-lead{background:var(--surface);box-shadow:none}:root:not([data-theme="light"]) .pn-gd .pn-gd-lead :is(.pn-gd-lead__h,.pn-gd-lead__a){color:var(--ink)}}   /* B-026: no cream slab in the dark hero */
[data-theme="dark"] .pn-gd .pn-lpm-guide{--dkbox:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-gd .pn-lpm-guide{--dkbox:var(--bg)}}   /* B-001/002: the price figure and the rail call were the panel's own colour */
.pn-gd .pn-lpm-rail .pc-box{padding:var(--panel-pad);border-radius:var(--r-l)}

.pn-gd .pn-lpm-rail .pc-pbox ul{margin-top:var(--space-2)}
/* callouts: no bent 4 px border on a round card; a well like the TOC, the role bar inset */
.pn-gd .pn-gd-callout{border:0;border-radius:var(--r-l);background:var(--surface);box-shadow:none;padding:var(--panel-pad)}   /* CONT-057: a panel, no coloured edge; the role is the icon colour */
/* tables: hairline rows (the dashed line went transparent), cells that fit the measure, the fade always on phones */
.pn-gd .pn-mp__table :is(th,td){border-bottom:0;box-shadow:none;padding:var(--space-3) var(--space-2)}
.pn-gd .pn-mp__table tbody tr:nth-child(odd) > :is(th,td){background:var(--surface)}
.pn-gd .pn-mp__table .is-med{font:var(--type-strong)}   /* B-037 */
.pn-gd .pn-gd-fig__cap{font:var(--type-meta);color:var(--ink-2)}
@media (max-width:700px){
  .pn-gd .pn-mp__tw{-webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);mask-image:linear-gradient(to right,black calc(100% - 28px),transparent)}
  .pn-gd .pn-mp__table thead th{font-size:var(--fs-cap);padding-block:6px}
  .pn-gd .pn-gd-lead{margin-bottom:28px}
}
/* sources: quiet references, a hairline between */
.pn-gd .pn-gd-body .pn-gd-sources li{padding:var(--space-1) 0;font:var(--type-meta);text-wrap:pretty}
.pn-gd .pn-gd-sources a{font-weight:400;text-decoration-thickness:1px}
/* the guide FAQ: in the text column, the h2 / h3 steps of the body */
.pn-gd .pn-gd-faq{padding:0 0 var(--space-16);background:none}
.pn-gd .pn-gd-faq .pn-lpm-faq__h{margin:0 0 var(--head-gap);font:var(--type-h1);letter-spacing:0}   /* CONT-088: "Questions" is an h2 like the others */
.pn-gd .pn-gd-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);font:var(--type-strong)}
.pn-gd .pn-gd-faq .pn-lpm-faq__q{font:inherit;text-wrap:pretty}
.pn-gd .pn-gd-faq.pn-gd-faq details,.pn-gd .pn-lg-faq.pn-lg-faq details{max-width:var(--prose-max);padding:var(--space-4) var(--panel-pad);border:0;border-radius:var(--r-l);background-color:var(--surface)}
.pn-gd .pn-gd-faq__a > *{max-width:none;font:var(--type-prose)}
@media (max-width:700px){.pn-gd .pn-gd-faq{padding-bottom:calc(48px + var(--dock))}}
/* the index */
.pn-gdx__rows{display:grid;gap:var(--space-2)}
.pn-gdx__row::before{font:var(--type-label);letter-spacing:0;color:var(--ink-2)}   /* §2.3: numbers never pink */
.pn-gdx__h{font-size:var(--fs-ed-h3);text-wrap:pretty}
.pn-gdx__go{align-self:start}
.pn-gdx .pn-lpm-guide{padding-top:40px}
@media (min-width:1000px){.pn-gdx__body{grid-template-columns:minmax(0,4fr) minmax(0,5fr);column-gap:40px}}
@media (min-width:701px) and (max-width:999px){.pn-gdx__p{max-width:none}}
.pn-draftband{font-weight:600}
/* B-025 / A-042: on phones the TOC put up to 480 px of links before the first sentence: compact rows (36 px) */
@media (max-width:700px){
  .pn-gd .pc-toc{padding:12px 16px}
  .pn-gd .pc-toc ol{margin-top:6px}
  .pn-gd .pc-toc li a{min-height:36px;padding:7px 0;font-size:var(--fs-body)}
}

/* The language guides in the frame (art director pass 27.10.: es / it / fr / pt buy and sell ran the old three columns,
   text 492 px wide and 328 px right of the h1, heads 21, text 14 / 15 / 16). templates/money.php carries .pn-gd now; its
   sections (money_section.php) take the editorial scale: one gap inside a section, a head adds --ed-sec, the steps are the
   English guides' numbered cards, the quotes and notes sit on the sunken tile like the callouts. */
.pn-gd .pn-lpm-body{gap:var(--space-12)}
.pn-gd .pn-mp__sec{gap:var(--space-4);font:var(--type-prose)}
.pn-gd .pn-mp__sec :is(p,.pn-mp__list,.pn-mp__answer){max-width:none}
.pn-gd .pn-mp__h{font:var(--type-h1);letter-spacing:0}
.pn-gd .pn-mp__q{margin:var(--space-4) 0 0;font:var(--type-title);letter-spacing:0}
.pn-gd .pn-mp__note{font:var(--type-meta)}
.pn-gd .pn-mp__list{gap:10px}
.pn-gd .pn-mp__list--steps > li{min-height:0;padding:var(--space-3) var(--space-4) var(--space-3) 52px;border-radius:var(--r-m);background:var(--surface)}
.pn-gd .pn-mp__list--steps > li::before{left:var(--space-4);top:var(--space-3);display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full);background:var(--surface-2);font:var(--type-cap);color:var(--ink)}
.pn-gd .pn-mp__quotes{grid-template-columns:minmax(0,1fr);gap:10px}
.pn-gd .pn-mp__quote{padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-gd .pn-mp__quote blockquote{font:var(--type-prose)}
.pn-gd .pn-mp__links .pc-more{font:var(--type-strong)}
.pn-gd .pn-mp__ask{font:var(--type-body)}

/* ==========================================================================
   Design system P9 (03.11., docs/design-system.md §13, AD-CONTENT D/E/F): one ground under every editorial page — the
   reading band is the page ground, so every panel on it (TOC, related box, the help vote, the FAQ, the callouts, the
   forms) is one step above it and visible (CONT-056 / 060 / 071 / 077). Prose and rail on the member split: the text on
   the 720 measure, the rail 360, 48 between them, the pair centred-left in the 1372 frame (CONT-074).
   ========================================================================== */
.pn-gd:not(.pn-mpg) .pn-lpm-guide{background:var(--bg)}
[data-theme="dark"] .pn-gd:not(.pn-mpg) .pn-lpm-guide{background:var(--bg)}
@media (min-width:1101px){
  .pn-gd .pn-lpm-guide__grid{grid-template-columns:minmax(0,var(--prose-max)) var(--rail-w);justify-content:start;column-gap:var(--space-12)}
}
.pn-gd .pn-gd-body > *{max-width:var(--prose-max)}
.pn-gd .pn-lpm-rail :is(.pc-toc,.pc-pbox,.pc-box){border-radius:var(--r-l)}
/* the help search (CONT-018 / 019): the member field (r-m, Fläche 2, 44) and the key beside it on the same height */
.pn-gd .pn-help__searchbox{min-height:var(--control-md);border-radius:var(--r-m);background:var(--surface-2)}
.pn-gd .pn-help__search .pn-help__go{min-height:var(--control-md);border-radius:var(--r-m)}
/* the help vote and every help panel: Fläche 1 on the ground, the member panel shape */
.pn-gd .pn-help__vote{padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
/* safety page (templates/plastik/safety.php): the legal small print in the closing block — that block is a dark member
   panel since 02.11., but the old blush-band inks stayed (2.4 : 1 text, ~1 : 1 links). Ink-2 and ink on it (CONT-101). */
.pk-site .pk-sec--blush .pks-end .pk-small{color:var(--ink-2)}
.pk-site .pk-sec--blush .pks-end .pk-small a:not(.pc-btn){color:var(--ink);text-decoration-color:var(--ink-2)}

/* the contact / copyright / report-photo forms (CONT-007 / 019 / 075, §7.3): the kit field inside the form panel — 44 high,
   r-m, Fläche 2 on the panel's Fläche 1 (+1 step; the guest layer paints every field Fläche 3 at 42 / r10, so the rule
   names it fully). Label 8 above, help 4 below, errors in danger with the 2 px inner ring (the kit's .pc-field.is-error). */
html[data-plk] body.pc-root.pc-guest.pk-site .pn-gd .pn-l3c__form :is(.pc-input,.pc-select,textarea.pc-input){min-height:var(--control-md);border-radius:var(--r-m);background-color:var(--surface-2)}
.pn-gd .pn-l3c__form .pc-field{display:grid;gap:var(--label-gap)}
.pn-gd .pn-l3c__form .pc-field > .pc-help{margin-top:calc(var(--help-gap) - var(--label-gap))}
/* the form's own error line (CONT-038 / 040): a Note (Fläche 2, r-m) with the text in danger — never a tinted wash, never pink */
.pn-gd .pn-l3c__form .pn-formerr{margin:0;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--danger);font:var(--type-label)}
.pn-gd .pn-l3c__form .pn-formerr[hidden]{display:none}
/* the help index (templates/help.php): topic rows as member panels with the line icon in a 40 disc (CONT-061 / 082 / 112),
   no glow, no tilt; the no-results state = the member empty state (CONT-118) */
.pk-site .pn-gd .pn-help__cat{grid-template-columns:var(--avatar-m) minmax(0,1fr);gap:var(--space-1) var(--space-3);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);transition:background-color var(--dur-1) ease-out}
.pk-site .pn-gd .pn-help__cat:hover{transform:none;background:var(--surface-2)}
.pk-site .pn-gd .pn-help__ico{width:var(--avatar-m);height:var(--avatar-m);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink)}
.pk-site .pn-gd .pn-help__none{gap:var(--space-3);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-gd .pn-help__noneico{display:grid;place-items:center;width:var(--avatar-m);height:var(--avatar-m);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2)}
.pn-gd .pn-help__none p{font:var(--type-body)}

/* PM 500 aussen-seo C */
/* 08.11. (AS-093): the fan sign-up text link under the buyer guide's key (or alone in the rail) */
.pn-gd-fan{margin:12px 0 0;font-size:var(--fs-sub);line-height:1.4;text-align:center}
.pn-gd-fan a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Detail pages (detail slice v3): ad (members + guests), seller profile (members + guests), members-only. Scope .pn-dt.
   This file places kit components (components.css / app.css); design system P6 (03.11., docs/design-system.md): panels
   --r-l without edges, media --r-m, notes surface 2, type / space / radius from the tokens only. Some JS hooks keep old
   class names that market.css / profile.css / guest_detail.css style too (.pn-gal*, .pn-ad__cta, .pn-proftabs,
   #pnStickyCta): the rules below restate what the page needs with a stronger selector. */
.pn-dt{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0}
.pn-dt > *{min-width:0}
.pn-dtat::before{content:"@"}

/* ---------- top row ---------- */
.pn-dttop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--page-head-gap)}
.pn-dttop .pn-adshare{flex:none}
.pn-dt .pn-gcrumbs{flex:1;min-width:0}
.pn-dt .pn-gcrumbs .pn-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0;padding:0;list-style:none;font:var(--type-label);color:var(--ink-2)}
.pn-dt .pn-gcrumbs .pn-crumbs li{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}
.pn-dt .pn-gcrumbs .pn-crumbs a{color:var(--ink-2);text-decoration:none}
.pn-dt .pn-gcrumbs .pn-crumbs a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent)}
.pn-dt .pn-gcrumbs .pn-crumbs [aria-current]{color:var(--ink);white-space:normal;overflow:visible}
.pn-dt .pn-gcrumbs .pn-chev{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--glyph-off)}

/* ---------- ad: gallery + side card + description ---------- */
.pn-dtad__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "side" "desc";gap:var(--space-6);margin:0}
.pn-dtad__gal{grid-area:gal;min-width:0}
.pn-dtad__side{grid-area:side;min-width:0}
.pn-dtdesc{grid-area:desc}
@media (min-width:1024px){
  .pn-dtad__grid{grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr);grid-template-rows:auto 1fr;grid-template-areas:"gal side" "desc side";column-gap:var(--space-10);align-items:start}
}
/* AD2 03.10.: tablets (701–1023) get the desktop composition at tablet scale. One column put a 704 × 880 photo first,
   so on an iPad the title, price, seller and the action started below the first screen. Now photo | buy card side by
   side, the description under the photo; the card head steps down to the section size so a long title stays 3–4 lines. */
@media (min-width:701px) and (max-width:1023px){
  .pn-dtad__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"gal side" "desc side";column-gap:var(--space-6);align-items:start}
  .pn-dtad__grid .pn-dtbuy__h{font:var(--type-title)}
  /* The card is 300–470 wide here: a guest's heart only leads to the same signup as the greeting (the bar drops it on
     small phones for the same reason), so the greeting takes the row; a label that still outgrows its button takes a
     second line, as the kit does on phones (fr / es at 701–800). */
  .pn-dt.pn-dtad--guest .pn-dtbuy .pn-dtcta{grid-template-columns:minmax(0,1fr)}
  .pn-dt.pn-dtad--guest .pn-dtbuy .pn-dtcta > .pn-dtlike{display:none}
  .pn-dt .pn-dtbuy .pn-dtcta .pc-btn{white-space:normal;text-align:center;text-wrap:balance}
}
/* owner 13.10. (docs/unterseiten-50-13-10.md point 20): the guest ad's card is two panels (templates/ad_guest.php): the buy
   panel (kicker, title, price, key) and the info panel. UX 17.10. #23: the buy panel alone is the side column; the info
   panel (label, seller, the short trust block) follows the description in the main column, on every width. */
.pn-dtad--guest .pn-dtad__side{display:grid;gap:var(--stack-gap);align-content:start}
.pn-dtad--guest .pn-dtbuy--info > :first-child{margin-top:0}   /* the label opens the panel: no gap of a row that follows a price */
.pn-dtbuy__fx{margin-left:var(--space-2);font:var(--type-body);color:var(--ink-2);white-space:nowrap}   /* UX 17.10. #26: "≈ $58", quieter than her price */
.pn-dtask__sub{margin:var(--space-2) 0 0}   /* UX 17.10. #30: who gets the request */
/* UX 17.10. #22: a long description folds to six lines; the fade says there is more, "Read more" opens it (market.js) */
.pn-dtdesc__text.is-folded{max-height:calc(6 * var(--lh-prose));overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--lh-prose)),transparent);mask-image:linear-gradient(to bottom,black calc(100% - var(--lh-prose)),transparent)}   /* UX polish 23.10. UX-049: only the sixth line fades (it covered 2.4 lines: read as broken text) */
/* polish r1: the buy card rides beside the description, so its actions stay in reach (only where it fits the screen). */
@media (min-width:1024px) and (min-height:800px){
  .pn-dtad__grid > .pn-dtad__side{position:sticky;top:calc(var(--flush-top) + var(--space-6))}
}

/* Gallery (partials/detail_gallery.php). */
.pn-dtgal{display:grid;gap:var(--space-3)}
.pn-dt .pn-gal{position:relative;overflow:hidden;border:0;border-radius:var(--r-l);background:var(--surface);box-shadow:none}   /* MBY-072 */
.pn-dt .pn-gal__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:inherit}
.pn-dt .pn-gal__track::-webkit-scrollbar{display:none}
.pn-dt .pn-gal__track:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-dt .pn-gal__slide{flex:0 0 100%;width:100%;height:auto;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always}
.pn-dt .pn-gal .pn-gal__count{top:auto;left:auto;right:var(--space-3);bottom:var(--space-3);height:24px;background:var(--scard-glass);color:var(--scard-ink);font:var(--type-cap);font-variant-numeric:tabular-nums}   /* a badge on the photo's glass, no paper chip */
.pn-dt .pn-gal .pn-gal__count b{font-weight:var(--w-strong)}
/* owner 13.10. (same list, point 22): on a phone the counter was hidden (market.css: the full-bleed hero has bars), the
   arrows go on touch screens (hover:none) and dots and bars are off on this page: nothing said there are more photos. */
@media (max-width:700px){.pn-dt .pn-gal .pn-gal__count{display:inline-flex}}
.pn-dt .pn-gal .pn-gal__nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);opacity:1;background:var(--scard-glass);color:var(--scard-ink)}   /* a key on a photo is glass (§9.1), never a paper disc */
.pn-dt .pn-gal .pn-gal__nav:hover{background:var(--scard-glass-hover,var(--scard-glass));border-color:transparent}
.pn-dt .pn-gal .pn-gal__nav:active{transform:translateY(-50%)}
.pn-dt .pn-gal .pn-gal__nav--prev{left:var(--space-3)}
.pn-dt .pn-gal .pn-gal__nav--next{right:var(--space-3)}
.pn-dt .pn-gal__dots,.pn-dt .pn-gal__bars{display:none}
.pn-dt .pn-gal.is-single .pn-gal__count,.pn-dt .pn-gal.is-single .pn-gal__nav{display:none}
@media (hover:none){.pn-dt .pn-gal .pn-gal__nav{display:none}}
/* AD2 03.10.: desktop photo stage. The 4:5 frame at the column width ran 870–1,075 px tall, so on a 1440 × 900 or
   1920 × 1080 screen the lower fifth of the photo (and its count) sat under the fold. From 1024 the stage is never
   taller than the screen under the page head; the photo is shown whole (contain, true colour) on the card paper, and
   where the frame is already short enough nothing changes (125cqw = the 4:5 height). Missing photo: the care label. */
@media (min-width:1024px){
  .pn-dt .pn-dtgal{container-type:inline-size}
  .pn-dt .pn-gal__slide{aspect-ratio:auto;height:min(125cqw,max(520px,calc(100svh - var(--flush-top) - 152px)))}
  .pn-dt .pn-gal__slide:has(> img,> picture > img){background:var(--surface)}
  .pn-dt .pn-gal__slide > img,.pn-dt .pn-gal__slide > picture > img{object-fit:cover;object-position:50% 40%}   /* owner 03.10.: the photo fills the frame, no bars */
}
.pn-dtgal__stamp{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);pointer-events:none}
.pn-dt .pn-gal__thumbs{display:none}
@media (min-width:701px){
  .pn-dt .pn-gal__thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0}
  .pn-dt .pn-gal__thumbs .pn-gal__thumb{position:relative;flex:none;width:64px;height:auto;aspect-ratio:4/5;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;background:var(--ph-media);opacity:.6;box-shadow:none;cursor:pointer;transition:opacity var(--dur-1)}
  .pn-dt .pn-gal__thumbs .pn-gal__thumb.is-active{opacity:1}
  .pn-dt .pn-gal__thumbs .pn-gal__thumb:not(.is-active):hover{opacity:.9}   /* no borders 18.10.: the active thumb is full strength, the others step back (no pink double ring) */
  .pn-dt .pn-gal__thumbs .pn-gal__thumb:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
}

/* Side card. */
.pn-dtbuy{display:block}
.pn-dtbuy__kick{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}   /* MBY-075 */
.pn-dtbuy__when{margin-left:auto;font:var(--type-meta);color:var(--ink-2)}
.pn-dtbuy__h{margin:0}
.pn-dtbuy__hand{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink-2)}   /* MBY-077 MBY-155 */
.pn-dtbuy__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3);margin:var(--space-4) 0 0}
.pn-dtbuy__price .pn-askprice{font:var(--type-strong);color:var(--ink-2)}
.pn-dtbuy__res .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-dtbuy__note{margin:var(--space-3) 0 0}
.pn-dtbuy__mine{display:none;margin:var(--space-2) 0 0}
/* Seller row: avatar with the pink ring, @name (the only thing that may shorten), one muted line, chevron. */
.pn-dtseller{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-5) 0 0;padding:var(--row-pad);border-radius:var(--r-m);background:var(--surface-2);color:inherit;text-decoration:none;transition:background-color var(--dur-1)}   /* MBY-080 */
a.pn-dtseller:hover{background:var(--surface-3,var(--surface-2))}
.pn-dtseller__who{flex:1;min-width:0;display:grid;gap:0}
.pn-dtseller__who > b{min-width:0;font:var(--type-strong);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-dtseller__who > span{font:var(--type-meta);color:var(--ink-2)}
a.pn-dtseller:hover .pn-dtseller__who > b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
a.pn-dtseller:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-m)}
.pn-dtseller .pn-chev{flex:none}
/* "On the label": the kicker with the tub over the facts rows. */
.pn-dtlabel{margin:var(--space-5) 0 0}
.pn-dtlabel__h{margin:0 0 var(--space-1)}
/* polish r4: the label rows keep the panel inset like the seller row's lines (no edge-to-edge dashed line). */
.pn-dtlabel .pc-facts{--facts-x:0}
/* polish r1: the facts stay label-over-value when the kit splits them into two columns (a wide card), so "Lace" never
   reads into the next label. Same look as the profile's facts grid. */
@container (min-width:520px){
  .pn-dtbuy .pc-fact{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;min-height:0}
  .pn-dtbuy .pc-fact dt{max-width:none;font:var(--type-meta);color:var(--ink-2)}   /* MBY-081 */
  .pn-dtbuy .pc-fact dd{justify-content:flex-start;text-align:left;font:var(--type-strong)}
}
/* Actions: the one pink (block) + the like square to its right; line buttons under it. */
.pn-dt .pn-dtbuy .pn-ad__cta.pn-dtcta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-3);margin:var(--space-6) 0 0}
.pn-dt .pn-dtbuy .pn-dtcta > *{grid-column:1;min-width:0}
.pn-dt .pn-dtbuy .pn-dtcta > .pn-dtlike{grid-column:2;grid-row:1}
/* polish-b 02.10.: with an order button the pink action takes the full row and the heart pairs with Message under it
   (it hung beside the pink button and left a hole beside Message). */
.pn-dt .pn-dtbuy .pn-dtcta:has(> .pn-adorder) > .pn-adorder{grid-column:1 / -1}
.pn-dt .pn-dtbuy .pn-dtcta:has(> .pn-adorder) > .pn-dtlike{grid-row:2}
.pn-dt .pn-dtbuy .pn-dtcta form{display:grid;gap:var(--space-3);margin:0}
.pn-dt .pn-dtbuy .pn-dtcta .pn-adorder__offer .pc-input{width:100%}
.pn-dtlike{width:var(--control-md);height:var(--control-md)}
.pn-dtlike.is-on,.pn-dtlike[aria-pressed="true"]{border-color:transparent;color:var(--accent)}   /* a saved heart is a state mark (the filled pink icon), not a second pink key beside Order */
.pn-dtlike.is-on .pc-ico,.pn-dtlike[aria-pressed="true"] .pc-ico{fill:currentColor}
.pn-dt .pn-adorder__err{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0}
.pn-dt .pn-dtcta .is-disabled{pointer-events:none}
/* owner 08.10. (#34): "Ask her and similar women" under the action row (the outline button, never the pink; only with the direct order switch) */
.pn-dt .pn-dtbuy .pn-dtask{margin-top:var(--space-3)}
.pn-dtsafe{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-5) 0 0;padding-top:0;font:var(--type-meta);color:var(--ink-2)}
.pn-dtsafe .pc-ico{flex:none;color:var(--ink)}
.pn-dtsafe b{color:var(--ink);font-weight:var(--w-strong)}
.pn-dtsafe + .pn-dtsafe{margin-top:var(--space-3);padding-top:0;border-top:0}
/* Description: the panel with the card head; the seller's own words at reading size. */
.pn-dtprose{font:var(--type-prose);color:var(--ink);max-width:var(--measure-prose)}   /* MBY-084 */
.pn-dtprose p{margin:0}
.pn-dtprose p + p{margin-top:var(--space-4)}
.pn-dtdesc__alt{margin-top:var(--space-4);padding-top:0}
.pn-dtdesc__tr{margin:var(--space-4) 0 0}

/* ---------- rails (More from / Similar) = .sec-head + the .pairs grid ---------- */
.pn-dtrail{margin-top:var(--section-gap)}
/* the quiet seller line under a public listing or profile (owner 12.10. evening: "huebsch und dezent") */
.pn-dtsell{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);justify-content:center;align-items:baseline;margin:var(--section-gap) 0 0;padding-top:var(--space-5);border-top:0;font:var(--type-meta);color:var(--ink-2)}
.pn-dtrail .pc-sechead{margin-bottom:var(--head-gap)}
/* polish r4: rail heads take the profile's section scale (30 / 26), so the page h1 stays the one big head. */
.pn-dtrail > .pc-sechead .pc-h-m{font:var(--type-title);letter-spacing:0}
/* AD2 03.10.: "More from @name" with no other listing of hers (partials/more_none.php): one row on the paper, avatar |
   the line | her profile as the line door; phones stack the door full width under the line. */
.pn-dtnone{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}   /* a panel */
.pn-dtnone__txt{flex:1 1 220px;min-width:0;margin:0;font:var(--type-body);color:var(--ink)}
.pn-dtnone .pc-avatar{flex:none}
@media (max-width:700px){.pn-dtnone__btn{flex:1 1 100%}}
/* polish r1: 12 similar pairs fill 2, 3, 4 and 6 columns; in the 5-column range the short last row steps aside, on
   phones 8 (4 full rows). */
@media (min-width:701px) and (max-width:1023px){
  .pn-dtsim .pn-grid{--dt-cols:repeat(3,minmax(0,1fr));grid-template-columns:var(--dt-cols)}
  .pn-dtsim .pn-grid > :nth-child(3n+4):nth-last-child(-n+2),.pn-dtsim .pn-grid > :nth-child(3n+4):nth-last-child(-n+2) ~ *{display:none}
}
@media (min-width:1024px) and (max-width:1099px){
  .pn-dtsim .pn-grid{--dt-cols:repeat(4,minmax(0,1fr));grid-template-columns:var(--dt-cols)}
  .pn-dtsim .pn-grid > :nth-child(4n+5):nth-last-child(-n+3),.pn-dtsim .pn-grid > :nth-child(4n+5):nth-last-child(-n+3) ~ *{display:none}
}
@media (min-width:1101px){.pn-dtsim .pn-grid{--dt-cols:repeat(5,minmax(0,1fr));grid-template-columns:var(--dt-cols)}}   /* the member column is wide now: 5 even columns, 2 full rows */
@media (min-width:1101px){.pn-dtsim .pn-grid > :nth-child(5n+6):nth-last-child(-n+4),.pn-dtsim .pn-grid > :nth-child(5n+6):nth-last-child(-n+4) ~ *{display:none}}
@media (max-width:700px){
  .pn-dtsim .pn-grid > :nth-child(n+9){display:none}
  .pn-dtsim .pn-grid:not(:has(> :nth-child(8))) > :nth-child(2n+3):last-child{display:none}   /* an odd short list: no lone card */
}

/* ---------- action bar (#pnAdBar, #pnStickyCta): the header skin, in flow, sticky at the bottom ---------- */
.pn-dtbar{position:sticky;bottom:0;z-index:var(--z-bar);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:var(--section-gap) calc(-1 * var(--gutter)) 0;padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface);color:var(--ink);border-top:0;box-shadow:var(--shadow-e1)}   /* MBY-079 */
.pn-dtbar[hidden]{display:none}
.pn-dtbar__price{flex:1 1 auto;min-width:0;display:grid;gap:0}
.pn-dtbar__price .pc-price{color:var(--ink)}
.pn-dtbar__price .pn-askprice{font:var(--type-strong);color:var(--ink)}
.pn-dtbar__price small{font:var(--type-meta);color:var(--ink-2)}
.pn-dtbar__acts{flex:none;display:flex;align-items:center;gap:var(--space-2)}
.pn-dtbar__ico.is-on,.pn-dtbar__ico[aria-pressed="true"]{border-color:transparent;color:var(--accent)}
.pn-dtbar__ico.is-on .pc-ico,.pn-dtbar__ico[aria-pressed="true"] .pc-ico{fill:currentColor}
.pn-dtbar .is-disabled{opacity:.6}
@media (max-width:374px){.pn-dtbar__acts{gap:var(--space-1)}.pn-dtbar .pn-dtbar__ico:first-child:not(:only-child){display:none}}
.pn-dtad--guest .pn-dtbar__price{min-width:110px}   /* T62: never a 92px column of three lines */
.pn-dtad--guest .pn-dtbar__price small{white-space:nowrap}
@media (max-width:429px){.pn-dtad--guest .pn-dtbar .pn-dtbar__ico{display:none}}   /* guests: the heart only leads to the signup; the greeting needs the room */
/* T62: phones: the ad's last crumb is the h1 again, so the trail stops at the category and stays on one line. */
@media (max-width:700px){.pn-dtad .pn-gcrumbs .pn-crumbs > li:last-child{display:none}}
/* Phones: market.js pins the bar and hides the tab bar (body.pn-has-adbar); the side card's actions step aside
   (an offer field stays: it is part of the order form the bar submits). */
.pn-dtbar.is-away{display:none}   /* UX 17.10. #14: the order form on screen is its own key (market.js) */
@media (max-width:700px){
  body.pn-has-adbar .pn-main:has(> .pn-dtad),body.pc-guest.pn-has-adbar .pn-main:has(> .pn-gapp > .pn-dtbar){padding-bottom:0}   /* UX 17.10. #14: no dark gap between the bar and the foot (beats the guest app shell's --main-pb, layout.css) */
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-ad__cta.pn-dtcta:not(:has(.pn-adorder__offer)){display:none}
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-ad__cta.pn-dtcta:has(.pn-adorder__offer){display:grid}
  /* polish r4: the buttons live in the bar; her order state moves under the price.
     AD2 03.10.: the order note ("Ordering is free. You agree on payment …") stays in the card under the facts and the
     bar carries the price alone: as the bar's sub line it ran to four 12 px lines beside three buttons. */
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-dtbuy__note.is-mine{display:none}
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-dtbuy__mine{display:block}
  .pn-dtad:not(.pn-dtad--guest) .pn-dtbar__price small{display:none}
}

/* ---------- profile head card (partials/profile_head.php, docs/profile-page-02-10.md) ----------
   Owner 02.10.: ONE framed unit for guests and members. ≥ 700 a panel (--r-l): cover clipped by its top, the avatar half
   on the cover edge, identity | actions on one row, the stat strip and the tabs as its foot rows. < 700: a full-bleed
   surface band, the tabs the sticky row under it (no strip on phones: the counts are on the tabs). */
.pn-phead{--ph-pad:var(--panel-pad);--av:var(--avatar-2xl);--av-gap:var(--space-6);--cover-h:128px;margin:0 0 var(--stack-gap);border:0;border-radius:var(--r-l);background:var(--surface);min-width:0}   /* MBY-087 */
.pn-dthead{display:grid;grid-template-columns:var(--av) minmax(0,1fr) auto;grid-template-areas:"cover cover cover" "av who act" "stats stats stats";column-gap:var(--av-gap);align-items:start;margin:0;padding:0 var(--ph-pad)}
@media (min-width:701px){.pn-phead.is-nostats > .pn-dthead{padding-bottom:var(--space-6)}}
.pn-dthead__av{grid-area:av;position:relative;z-index:1;margin-top:calc(var(--av) / -2)}
.pn-dthead .pn-dthead__av .pc-avatar--xl{width:var(--av);height:var(--av);font-size:var(--fs-display);box-shadow:0 0 0 4px var(--surface)}   /* MBY-089 */
.pn-dthead__who{grid-area:who;min-width:0;display:grid;justify-items:start;gap:0;padding-top:var(--space-5)}
.pn-dthead__id{display:grid;justify-items:start;min-width:0;max-width:100%}
.pn-dthead__kick{margin:0 0 var(--space-2)}
.pn-dthead__kickrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:0 0 var(--space-2)}   /* night N1 #32: the kicker + a Premium seller's badge */
.pn-dthead__kickrow .pn-dthead__kick{margin:0}
.pn-dthead__name{margin:0;max-width:100%;overflow-wrap:anywhere}   /* night QA D3: a long name never widens the head */
.pn-dthead__hand{margin:var(--space-1) 0 0;font:var(--type-body);color:var(--ink-2)}   /* MBY-091 MBY-155 */
.pn-dthead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:var(--space-3) 0 0;font:var(--type-meta);color:var(--ink-2)}   /* MBY-092 */
.pn-dtcountry{display:inline-flex;align-items:center;gap:var(--space-1)}
.pn-dtcountry .pn-flag{flex:none;width:var(--icon-s);height:var(--icon-s);margin:0;border-radius:var(--r-full);object-fit:cover}
.pn-dtrate{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--ink);font:var(--type-label);text-decoration:none}
a.pn-dtrate:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-dtrate .pc-ico{color:var(--ink);fill:currentColor;stroke:none}   /* MBY-100 */
.pn-dtrate--big{gap:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-dtrate--big b{font:var(--type-title);color:var(--ink)}   /* MBY-108 */
/* Rating = a small pill (the review count is in the tab; screen readers get it inside the link). */
.pn-dtrate--pill{gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border:0;border-radius:var(--r-s);background:var(--surface-2);font:var(--type-label);font-variant-numeric:tabular-nums}   /* a badge (§5 --r-s) */
.pn-dtrate--pill .pc-ico{width:var(--icon-s);height:var(--icon-s)}
a.pn-dtrate--pill:hover{text-decoration:none;background:var(--surface-3,var(--surface-2))}
.pn-dtchips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
/* polish r4: what she offers = quiet tags. MBY-109: static tags look like tags, not keys: 28 tall, --r-s, cap-label type
   (the chips and keys are 36 / 44 and --r-m). */
.pn-dtchips .pc-chip,.pn-dtchips .pc-chip:hover{min-height:28px;padding:0 var(--space-2);gap:var(--space-1);cursor:default;border-color:transparent;border-radius:var(--r-s);background:var(--surface-2);color:var(--ink);font:var(--type-label)}
.pn-dtchips .pc-chip::after{content:none}
.pn-dtchips .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-dthead__since{font:inherit;color:inherit}
.pn-dthead__act{grid-area:act;align-self:end;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:var(--space-2);padding-top:var(--space-5)}
.pn-dtform{display:contents}
.pn-dtmore{width:var(--control-md);height:var(--control-md)}
.pn-dthead__act .pn-dtmore{border-radius:var(--r-m)}   /* MBY-093 */
/* A7 (owner 18.10.): Block / Report in one ⋯ menu on the launched member's profile — a tonal float, no frame; Message takes the room */
/* A7 menu (review 18.10.): its own class — .pn-dtsafe is the safety notice above (22 px top margin), which pushed the ⋯ key below Message */
.pn-dtsafemenu{position:relative;display:flex;flex:none;align-self:center;margin:0}
.pn-dtsafemenu > summary{list-style:none;cursor:pointer}
.pn-dtsafemenu > summary::-webkit-details-marker{display:none}
.pn-dtsafemenu__menu{position:absolute;right:0;top:calc(100% + var(--space-2));z-index:var(--z-header);display:grid;min-width:200px;padding:var(--space-1);border-radius:var(--r-l);background:var(--surface-2);box-shadow:var(--shadow-e1)}   /* e1 menu */
.pn-dtsafemenu__i{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:none;font:var(--type-strong);color:var(--ink);text-align:left;cursor:pointer}
.pn-dtsafemenu__i:hover{background:var(--surface-3,var(--surface))}
.pn-dtsafemenu__i:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-dtsafemenu__i > svg{flex:none;color:var(--ink-2)}
.pn-dthead__act:has(> .pn-dtsafemenu) > .pc-btn--primary{flex:1 1 auto}
/* Stat strip: the card's first foot row. Equal cells (the strip always spans the card), each centred: the number
   (--type-title, ink) with its label (--type-meta, ink 2) on one baseline, on a surface 2 band (tonal pass 05.10.: no lines between the cells). The actions sit on the row above it,
   bottom right (on the strip line, like the identity's last line), so the head reads as one block standing on the strip. */
.pn-dtstats{grid-area:stats;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:var(--space-5) calc(-1 * var(--ph-pad)) 0;padding:0;background:var(--surface-2)}
.pn-dtstats__i{display:flex;flex-direction:row-reverse;justify-content:center;align-items:baseline;gap:var(--space-2);min-width:0;padding:var(--space-3) var(--ph-pad)}
.pn-dtstats dt{font:var(--type-meta);color:var(--ink-2)}
.pn-dtstats dd{margin:0;font:var(--type-title);color:var(--ink);font-variant-numeric:tabular-nums}   /* MBY-094 */
.pn-dtstats dd a{color:inherit;text-decoration:none}
.pn-dtstats dd a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
/* Notes (blocked / paused / private) inside the card, on its inner edge. */
.pn-phead > .pc-alert{margin:0 var(--ph-pad) var(--space-5);align-items:center}

/* Cover banner (partials/profile_cover): clipped by the card's top corners, no frame of its own; a soft shade at the foot. */
.pn-dtcover{grid-area:cover;position:relative;overflow:hidden;height:var(--cover-h);margin:0 calc(-1 * var(--ph-pad));border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface-2)}   /* MBY-088 */
.pn-dtcover--photo{height:clamp(150px,15vw,220px)}
.pn-dtcover > img,.pn-dtcover > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.pn-dtcover--blur > img,.pn-dtcover--blur > picture > img{filter:blur(44px) saturate(1.15);transform:scale(1.35)}
.pn-dtcover::after{content:"";position:absolute;inset:0;background:var(--shade-cover);pointer-events:none}
.pn-dtcover--plain{background:var(--stripes-cover)}
.pn-dtcover--plain::after{background:var(--shade-cover-plain)}
/* The care label on the fallback: the tub mark on the photo's glass, top right (design system: no paper tag, no tilt). */
.pn-dtcover__tag{position:absolute;top:var(--space-4);right:var(--space-5);z-index:1;display:grid;place-items:center;width:44px;height:56px;border:0;border-radius:var(--r-s);background:var(--scard-glass);color:var(--scard-ink)}
.pn-dtcover__tag .pc-tub{width:20px;height:13px}

/* Tabs = the card foot (≥ 700): a static row on the line. */
.pn-dt .pn-proftabs.pn-dttabs{position:static;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:var(--space-3) var(--ph-pad);background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.pn-dt .pn-proftabs.pn-dttabs .pc-tab .pc-count--inline{margin-left:var(--space-1)}

/* Tablet (700–1023): avatar + identity on one axis, then meta, chips and the action row from the card's inner edge. */
@media (max-width:1023px){
  .pn-phead{--av-gap:var(--space-5)}
  .pn-dthead{grid-template-columns:var(--av) minmax(0,1fr);grid-template-areas:"cover cover" "av id" "meta meta" "chips chips" "act act" "stats stats"}
  .pn-dthead__who{display:contents}
  .pn-dthead__id{grid-area:id;align-self:start;padding-top:var(--space-4)}
  .pn-dthead__meta{grid-area:meta;margin:var(--space-3) 0 0}
  /* AD3 03.10.: what she offers wraps (owner: pills never clipped); the swipe row cut the fourth tag ("Budg…") at the edge */
  .pn-dtchips{grid-area:chips;flex-wrap:wrap;margin:var(--space-3) 0 0}
  .pn-dtchips > li{flex:none}
  .pn-dthead__act{justify-content:flex-start;padding-top:var(--space-4)}
  .pn-dthead__act > .pc-btn,.pn-dthead__act > .pn-dtform > .pc-btn{flex:0 1 320px;min-width:0}
  .pn-dtstats{margin-top:var(--space-4)}
}
/* Phones: no card. The head is a full-bleed surface band from the chrome (the wrapper steps aside, so the tabs can stick
   to the page), cover edge to edge, avatar 88 + name on one axis, one full-width action row; the counts are on the tabs. */
@media (max-width:700px){
  .pn-phead{--ph-pad:var(--gutter);--av:var(--avatar-2xl);--av-gap:var(--space-3);--cover-h:112px;display:contents}
  .pn-dthead{margin:0 calc(-1 * var(--gutter));padding-bottom:var(--space-4);background:var(--surface)}
  .pn-dtprof > .pn-phead:first-child > .pn-dthead{margin-top:calc(-1 * var(--app-top))}
  .pn-store--guest > .pn-dttop + .pn-phead > .pn-dthead{margin-top:-28px}
  .pn-dtcover{border-radius:0}
  .pn-dtcover--photo{height:clamp(140px,40vw,180px)}
  .pn-dthead__id{padding-top:var(--space-3)}
  .pn-dthead__name--long{font-size:var(--fs-title)}   /* night QA D3: 13+ letters in a row ("Lamasmorbosadeaqui") */
  .pn-dthead__kick{margin-bottom:var(--space-2)}
  .pn-dthead__meta{gap:var(--space-1) var(--space-3);margin-top:var(--space-3)}
  .pn-dthead__act{padding-top:var(--space-3)}
  .pn-dthead__act > .pc-btn,.pn-dthead__act > .pn-dtform:first-child > .pc-btn{flex:1 1 auto;min-width:0}
  /* owner 05.10.: on phones Message is a round pink chat icon (the twin of Block / Report), never a clipped label */
  .pn-dthead__act > .pc-btn--pink,.pn-dthead__act > .pn-dtform:first-child > .pc-btn--pink{flex:none;width:var(--control-md);height:var(--control-md);min-height:0;padding:0;gap:0;border-radius:var(--r-m);font-size:0;letter-spacing:0}   /* MBY-093 */
  .pn-dthead__act > .pc-btn--pink > .pc-ico,.pn-dthead__act > .pn-dtform:first-child > .pc-btn--pink > .pc-ico{width:var(--icon-l);height:var(--icon-l)}
  .pn-dtstats{display:none}
  /* inside tier 06.10.: a member's Message is a labelled button (the guest's is the round icon above); on a 320 px phone the row wraps instead of cutting the label */
  @media (max-width:359px){body:not(.pc-guest) .pn-dthead__act{flex-wrap:wrap}body:not(.pc-guest) .pn-dthead__act > :is(.pc-btn--primary,.pn-follow){min-width:max-content}}
  .pn-dtcover__tag{top:var(--space-3);right:var(--space-4);width:40px;height:48px}
  .pn-phead > .pc-alert{margin:0 0 var(--space-3)}
  /* AD3 03.10.: one rule for guests and members (owner: pills wrap, never clipped): the members' swipe row cut "Reviews"
     at the screen edge while the guests' row wrapped. "About" is the section right under the head, so its pill steps
     aside on phones; the rest fits one row in most profiles and wraps cleanly in the others. */
  .pn-dt .pn-proftabs.pn-dttabs{position:sticky;top:var(--flush-top);z-index:15;flex-wrap:wrap;gap:var(--space-2);max-width:none;margin:0 calc(-1 * var(--gutter)) var(--stack-gap);padding:var(--space-1) var(--gutter);overflow:visible;background:var(--surface);box-shadow:0 10px 24px -14px var(--scrim)}   /* UX polish 23.10. UX-029: 6 (was 10) top and bottom: the pinned strip 47 px, not 55 (header + strip + tab bar were 178 px of a phone) */
  .pn-dt .pn-proftabs.pn-dttabs .pc-tab{flex:none;padding:0 var(--space-3)}
  body:not(.pc-guest) .pn-dt .pn-proftabs.pn-dttabs{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}   /* MBY-095 */
  .pn-dt .pn-proftabs.pn-dttabs .pc-tab[href="#about"]:not(:only-child){display:none}
  .pn-dtprof .pn-dtblock{scroll-margin-top:calc(var(--flush-top) + 72px)}
  /* the notes stand on the band too (they follow the head in the page flow) */
  .pn-phead > .pc-alert{position:relative}
}
/* Guests on phones: the crumbs are hidden (guest_detail.css), so their empty row goes too and the cover meets the header. */
@media (max-width:700px){.pn-store--guest > .pn-dttop{display:none}}
.pn-dtprivate{align-items:center}

/* Body = the member-shell .pn-split (main + 360 side card, --stack-gap) of .pn-stack columns (app.css). Both columns open
   with a card on the same top line (About / the join card / "Her details"); sections in the main column --section-gap. */
.pn-dtprof > .pn-dtprof__grid{align-items:start}
.pn-dtprof .pn-dtprof__main{gap:var(--section-gap)}
.pn-dtprof__side{min-width:0}
.pn-dtblock{scroll-margin-top:calc(var(--flush-top) + 16px);min-width:0}
.pn-dtblock > .pc-sechead{margin-bottom:var(--head-gap)}
.pn-dtblock > .pc-sechead .pn-count{align-self:center}
/* Cards in the main column: one grid cell per card, never stretched (MBY-086: one listing filled the 996 column at
   996 × 1328). auto-fill keeps the empty tracks, so 1 to 3 cards stand at a card's size (5 across in the member column at 1440, 4 in the guest column, 2 on phones). */
.pn-dt .pn-grid.pn-dtcards{--dt-cols:repeat(auto-fill,minmax(180px,1fr));--dt-gap:var(--space-4);grid-template-columns:var(--dt-cols);gap:var(--dt-gap)}
@media (max-width:700px){.pn-dt .pn-grid.pn-dtcards{--dt-cols:repeat(2,minmax(0,1fr));--dt-gap:var(--space-3)}}
/* About: long bios fold (profile.js adds .is-folded); the fold is a fade, the button a see-all link. */
.pn-dtabout.is-folded{max-height:calc(7 * var(--lh-prose));overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--lh-prose)),transparent);mask-image:linear-gradient(to bottom,black calc(100% - var(--lh-prose)),transparent)}   /* UX polish 23.10. UX-049: the last line fades, as on the listing */
.pn-dtmorebtn{margin-top:var(--space-3);padding:0;border:0;background:none;cursor:pointer}
.pn-dtmorebtn[hidden]{display:none}
/* Photo / video tiles: media (4:5, --r-m, no edge); on a locked one the lock badge. */
.pn-dttiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:700px){.pn-dttiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}
.pn-dttile{position:relative;aspect-ratio:4/5;border:0;border-radius:var(--r-m);text-decoration:none;color:inherit}
.pn-dttile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-dttile.is-locked > img{filter:blur(26px) saturate(.8);transform:scale(1.3)}

.pn-dttile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-dttile__lock{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%)}
.pn-dttile__play{position:absolute;left:50%;top:50%;z-index:4;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:var(--r-full);border:0;background:var(--scard-glass);color:var(--scard-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}   /* MBY-098 */
.pn-dttile__play .pc-ico{fill:currentColor;translate:1px 0}
/* Reviews: base rows (the profile cards are restyled in the compact block below; the ad seller box keeps rows). */
.pn-dtrevs{margin:0;padding:var(--space-2) var(--panel-pad);list-style:none;background:var(--surface);border:0;border-radius:var(--r-l)}
.pn-dtrev,.pn-dtrevs > .pn-review{padding:var(--space-4) 0}
.pn-dtrev h3,.pn-review h3{margin:var(--space-2) 0 0;font:var(--type-strong);color:var(--ink);overflow-wrap:break-word}   /* MBY-102 */
.pn-dtrev p,.pn-review p{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink);overflow-wrap:break-word}
.pn-dtrev blockquote,.pn-review blockquote{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink);overflow-wrap:break-word}
.pn-dtrev blockquote p,.pn-review blockquote p{margin:0}
.pn-dtrev__by,.pn-dt .pn-dtrev .pn-dtrev__by,.pn-dt .pn-review .pn-dtrev__by{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-dtrev__by b{color:var(--ink);font-weight:var(--w-strong)}
.pn-dtstars{display:inline-block;font:400 var(--fs-ui)/1 var(--body);letter-spacing:2px;color:var(--ink)}   /* MBY-100 */
.pn-dtstars__off{color:var(--glyph-off)}
.pn-dtnorev{margin:0}
/* Facts side card: kicker + card head over the facts rows. */
.pn-dtfacts__h{margin:var(--space-2) 0 var(--space-2);font:var(--type-title);color:var(--ink)}

/* Contact bar on the profile (#pnStickyCta): the action bar skin, phones only, shown once the head's actions scroll away. */
.pn-dtsticky{display:none}
@media (max-width:700px){
  .pn-dtsticky{display:flex;justify-content:flex-start;bottom:calc(var(--dock) - 16px);visibility:hidden}
  .pn-dtsticky.is-on{visibility:visible}
  body.pn-has-adbar .pn-dtsticky{bottom:0}   /* polish r1: pinned, it replaces the tab bar (profile.js), so it sits on the edge */
  .pn-dtsticky .pc-avatar{flex:none}
  .pn-dtsticky__name{flex:1;min-width:0;font:var(--type-strong);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- guest additions (ad_guest, member_guest) ---------- */
.pn-dt .pn-dtbuy .pn-dtcta > .pn-dtcta__msg{grid-column:1 / -1}
.pn-dtbuy__ship{font:var(--type-meta);color:var(--ink-2)}
.pn-dtlocknote{display:flex;align-items:flex-start;gap:var(--space-2)}
.pn-dtlocknote .pc-ico{flex:none;translate:0 2px}
.pn-dttrust{margin:var(--space-5) 0 0}
.pn-dttrust .pn-dtseller{margin:0}
.pn-dttrust .pn-dtseller__who .pn-flag{display:inline-block;width:var(--icon-s);height:var(--icon-s);margin:0 var(--space-1) 0 0;border-radius:50%;vertical-align:-2px;object-fit:cover}
div.pn-dtseller{color:inherit}
.pn-dttrust .pn-sellertrust__quote{padding:var(--space-3) 0 0;border-top:0}
.pn-dtdesc--guest{display:grid;gap:var(--stack-gap);align-content:start;min-width:0}
.pn-dtcontactnote{margin-top:var(--space-4)}
/* "n more listings" card: the listing card's frame with the stripes and the ink lock label, the two lines as its caption
   on the photo (adcard2 03.10.), so it is exactly as big as its siblings. */
.pn-dtmorecard .pc-media{aspect-ratio:4/5;place-items:start center;padding-top:26%}
.pn-dtmorecard .pc-lockpill{position:relative;z-index:3}
.pn-dtmorecard .pc-card__cap h3{margin:0;font:var(--type-strong);color:var(--scard-ink)}
.pn-dtmorecard .pc-card__cap p{margin:0;font:var(--type-meta);color:var(--scard-ink-2)}
/* Locked photos: four striped tiles with the lock label across them. */
.pn-dtlocked{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.pn-dtlocked .pn-dttile{background:var(--ph-media)}
.pn-dtlocked__pill{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%)}
.pn-dtlocked__txt{margin:var(--space-4) 0 0;font:var(--type-body);color:var(--ink-2)}
@media (max-width:700px){.pn-dtlocked{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-dttrustblock{min-width:0}
.pn-dthead .pc-avatar__dot{width:var(--icon-m);height:var(--icon-m);right:var(--space-1);bottom:var(--space-1)}

/* ---------- compact profile (owner 30.09.: "more compact, not so much empty space") ----------
   Tighter rhythm, card-size section heads, 6 tiles in a row (3 on phones, never a half row), reviews as compact cards
   (a swipe row on phones), the facts as a two-column definition grid. Scope: .pn-dtprof (member + guest profile). */
.pn-dtprof .pn-dtblock > .pc-sechead{align-items:center;margin-bottom:var(--head-gap);gap:var(--space-3)}   /* MBY-096 */
.pn-dtprof .pn-dtblock > .pc-sechead .pc-h-m{margin-top:0;font:var(--type-title);letter-spacing:0}
.pn-dtprof .pn-dtblock > .pc-sechead .pc-kicker{font:var(--type-cap)}
.pn-dtprof .pn-dtabout.is-folded{max-height:calc(5 * var(--lh-prose))}
.pn-dtprof .pn-dtmorebtn{margin-top:var(--space-2)}
/* adcard2 03.10.: a lone listing is an ordinary card in the grid (the photo is the card; the wide row of polish r1 had
   the caption beside the photo, which no longer exists). */
/* Tiles: 6 across (≥ 700), 3 across on phones; 4 or 5 tiles on a phone show 3 (the see-all link has the rest). */
.pn-dtprof .pn-dttiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
.pn-dtprof .pn-dttile{border-radius:var(--r-m)}
.pn-dtprof .pn-dtlocked{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
.pn-dtprof .pn-dtlocked .pn-dttile{aspect-ratio:4/5}
/* Tiles are small now: the lock label keeps only its lock (the text stays for screen readers). */
.pn-dtprof .pn-dttile__lock{gap:0;padding:var(--space-2);font-size:0;letter-spacing:0}
/* Reviews (owner 30.09.): compact cards, stars and writer on one meta line, the title, the text (long texts fold to 5
   lines, profile.js). Design system 03.11. (MBY-099): a panel grid, two columns from 700, each card at its own height. */
.pn-dtprof .pn-dtrevs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--stack-gap);padding:0;background:none;border:0;border-radius:0}
.pn-dtprof .pn-dtrevs:has(> :only-child){grid-template-columns:minmax(0,1fr)}
/* owner 13.10. (docs/unterseiten-50-13-10.md point 31): the fold under the first six reviews — its word is a line button, gone once open */
.pn-dtrevmore{margin-top:var(--space-3)}
.pn-dtrevmore > summary{list-style:none;cursor:pointer}
.pn-dtrevmore > summary::-webkit-details-marker{display:none}
.pn-dtrevmore[open] > summary{display:none}
.pn-dtprof .pn-dtrevs > :is(.pn-dtrev,.pn-review){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"stars by" "title title" "body body" "more more";align-items:center;align-content:start;column-gap:var(--space-2);row-gap:0;min-width:0;margin:0;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-dtprof .pn-dtrevs .pn-dtstars{grid-area:stars;font-size:var(--fs-body);letter-spacing:1px}
.pn-dtprof .pn-dtrevs .pn-dtrev__by{grid-area:by;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0;margin:0;padding:0;font:var(--type-meta);color:var(--ink-2)}   /* MBY-101 */
.pn-dtprof .pn-dtrevs .pn-dtrev__by::before{content:"·";color:var(--glyph-off)}
.pn-dtprof .pn-dtrevs .pn-dtrev__by b{font-weight:var(--w-strong);color:var(--ink)}
.pn-dtprof .pn-dtrevs > .pn-dtrev .pn-dtrev__by{margin-top:var(--space-2)}
.pn-dtprof .pn-dtrevs > .pn-dtrev .pn-dtrev__by::before{content:none}
.pn-dtprof .pn-dtrevs > .pn-dtrev .pn-dtrev__by time:not(:empty)::before{content:"·";margin-right:var(--space-2);color:var(--glyph-off)}
.pn-dtprof .pn-dtrevs :is(.pn-dtrev,.pn-review) h3{grid-area:title;margin:var(--space-3) 0 0;font:var(--type-strong)}   /* MBY-102 */
.pn-dtprof .pn-dtrevs :is(.pn-dtrev,.pn-review) > :is(p:not(.pn-dtrev__by),blockquote){grid-area:body;max-width:68ch;margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink)}   /* MBY-103 */
.pn-dtprof .pn-dtrevs :is(.pn-dtrev,.pn-review) blockquote p{margin:0;font:inherit}
.pn-dtprof .pn-dtrevs .is-folded{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.pn-dtprof .pn-dtrevs .pn-dtrevmore{grid-area:more;justify-self:start;margin-top:var(--space-2)}
/* Facts: a two-column definition grid (label over value), in the 340 side card too. */
.pn-dtprof .pn-panel.pn-dtfacts{padding-bottom:calc(var(--panel-pad) - var(--space-2))}
.pn-dtprof .pn-dtfacts .pc-facts{--facts-x:var(--panel-pad)}
.pn-dtprof .pn-dtfacts .pc-facts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-dtprof .pn-dtfacts .pc-fact{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;min-height:0;padding:var(--space-2) var(--facts-x)}
.pn-dtprof .pn-dtfacts .pc-fact:nth-child(2){border-top:0}
.pn-dtprof .pn-dtfacts .pc-fact:nth-child(odd){padding-right:var(--space-2)}
.pn-dtprof .pn-dtfacts .pc-fact:nth-child(even){padding-left:var(--space-2)}
.pn-dtprof .pn-dtfacts .pc-fact.is-wide{grid-column:1 / -1;padding-right:var(--facts-x)}
.pn-dtprof .pn-dtfacts .pc-fact dt{max-width:none;font:var(--type-meta);color:var(--ink-2)}   /* MBY-081 */
.pn-dtprof .pn-dtfacts .pc-fact dd{justify-content:flex-start;text-align:left;font:var(--type-strong)}
.pn-dtprof .pn-dtfacts .pc-fact .pn-flag{width:var(--icon-s);height:var(--icon-s);margin-right:var(--space-1)}
@media (max-width:700px){
  .pn-dtprof .pn-dttiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
  .pn-dtprof .pn-dttiles:not(:has(> :nth-child(6))) > :nth-child(n+4){display:none}
  .pn-dtprof .pn-dtlocked{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
  .pn-dtprof .pn-dtlocked > .pn-dttile:nth-child(n+4){display:none}
  /* Reviews: stacked cards. */
  .pn-dtprof .pn-dtrevs{grid-template-columns:minmax(0,1fr)}
  .pn-dtprof .pn-dtrevs .is-folded{-webkit-line-clamp:4}
}

/* polish r4 / 01.10.: member detail pages share the wide chrome (.pn-wide + .pn-wdt); grids name their columns in --dt-cols / --dt-gap. */
@media (min-width:701px){
  .pn-main > .pn-wdt :is(.pn-grid,.pn-vlist){grid-template-columns:var(--dt-cols,repeat(auto-fill,minmax(200px,1fr)));gap:var(--dt-gap,var(--space-4))}
}
/* Reviews (owner 01.10., docs/reviews.md): a pnew review on the members' profile — "Verified order" in the meta line, the
   buyer's checks as small chips, the seller's one reply (indented, a quiet card), Reply (her own profile, a details fold)
   and Report (other members). They span the review card's full width. */
.pn-revverified{gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--surface-2);color:var(--ink-2)}
.pn-revverified .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6}
.pn-revtags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
/* MBY-105: the buyer's checks are static tags (24, --r-s, cap type, the check as a state mark), not chips that read as toggles */
.pn-revtags .pc-chip{min-height:24px;padding:0 var(--space-2);gap:var(--space-1);border-radius:var(--r-s);font:var(--type-cap);cursor:default}
.pn-revtags .pc-chip::after{content:none}
.pn-revtags .pc-ico{width:var(--icon-s);height:var(--icon-s);stroke-width:2.6;color:var(--success)}
/* her answer = a note (§9.4, MBY-104): surface 2, --r-m on every corner, the row padding */
.pn-revreply{margin:var(--space-3) 0 0;padding:var(--row-pad);border:0;border-radius:var(--r-m);background:var(--surface-2)}
.pn-revreply b{display:block;font:var(--type-label);color:var(--ink)}
.pn-revreply p{margin:var(--space-1) 0 0;font:var(--type-body);color:var(--ink);overflow-wrap:break-word}
.pn-revacts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0}
/* MBY-106 / MBY-107: Reply, Report, Delete and «translated · original» are quiet links (meta, ink 2, no pink line) — five
   reviews no longer carry five pink underlines; the hover underlines in ink */
.pn-dt :is(.pn-revacts .pn-seeall,.pn-revreport,.pn-tr__sum){min-height:var(--control-sm);font:var(--type-meta);color:var(--ink-2);text-decoration:none}
.pn-dt :is(.pn-revacts .pn-seeall,.pn-revreport,.pn-tr__sum):hover{color:var(--ink);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px}
.pn-dt .pn-tr__sum .pn-tr__show{text-decoration:none}
.pn-dt .pn-tr__sum:hover .pn-tr__show{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px}
.pn-dt .pn-dtrevs .pn-tr .pn-tr__orig{margin:var(--space-1) 0 0;padding:var(--row-pad);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-body);color:var(--ink-2)}   /* the original text = a note, the review's body type */
.pn-revacts form{margin:0}
.pn-revreplyform{flex:0 1 auto;min-width:0}
.pn-revreplyform[open]{flex-basis:100%}   /* AD3: Reply and Report share one row; the open form takes the row */
.pn-revreplyform summary{display:inline-flex;align-items:center;gap:var(--space-1);cursor:pointer;list-style:none}
.pn-revreplyform summary::-webkit-details-marker{display:none}
.pn-revreplyform[open] summary{margin-bottom:var(--space-2)}
.pn-revreplyform form{display:grid;gap:var(--space-2)}
.pn-revreplyform form .pc-btn{justify-self:start}
/* review answer (owner 03.11., partials/review_answer.php): the help line with its 0/300 counter, the answer's own keys under it */
.pn-ra-help{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.pn-ra-n{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-ra .pn-ra-acts{margin-top:var(--space-2)}
.pn-revreport{display:inline-flex;align-items:center;gap:var(--space-1);border:0;background:none;padding:0;cursor:pointer;color:var(--ink-2)}
.pn-revreport:disabled{cursor:default;opacity:.7}
.pn-revacts:has(details[open]) form[data-review-report]{order:2}
.pn-dtprof .pn-dtrevs :is(.pn-revtags,.pn-revreply,.pn-revacts){grid-column:1 / -1}
.pn-dtpaused{margin:0 0 var(--space-4)}
.pn-dtprof .pn-dtrevs > .pn-review{grid-template-areas:"stars by" "title title" "tags tags" "body body" "more more" "reply reply" "acts acts"}
.pn-dtprof .pn-dtrevs > .pn-dtrev{grid-template-columns:minmax(0,1fr);grid-template-areas:"stars" "by" "title" "tags" "body" "more" "reply" "acts"}
.pn-dtprof .pn-dtrevs .pn-revtags{grid-area:tags}
.pn-dtprof .pn-dtrevs :is(.pn-revreply,.pn-ra-g){grid-area:reply}   /* review answer (03.11.): her answer for guests stands where her reply stands for members */
.pn-dtprof .pn-dtrevs .pn-revacts{grid-area:acts}
/* A locked tile's blurred photo is scaled (no blurred edge) inside its own clipping box, so the link itself never overflows. */
.pn-dttile__img{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.pn-dttile__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.8);transform:scale(1.3)}
/* ---------- inner grounding 01.10.: the member detail heads stand on the page-head band (.pc-band, app.css) ----------
   Ad: the back row is the band. The profile head is its own anchor since 02.10. (the head card, docs/profile-page-02-10.md). */
.pn-dtad > .pn-dttop.pc-band{margin-bottom:var(--stack-gap);padding-bottom:var(--app-head-pb)}
/* owner 12.10. evening on the public listing ("wirkt schief, nicht mittig oder zu gross"): the crumbs carried their own 18px below and sat 9px
   above the share key. Both stand on the band's middle now: as much room below as the band has above, no margin on the crumbs, a smaller key. */
.pn-dtad--guest > .pn-dttop.pc-band{padding-bottom:var(--app-top)}
.pn-dtad--guest > .pn-dttop.pc-band .pn-gcrumbs{margin:0}
.pn-dtad--guest > .pn-dttop.pc-band .pn-adshare{width:var(--control-sm);height:var(--control-sm)}
.pn-dtad > section.pn-dtrail{margin-top:var(--section-gap)}


/* follow (owner 03.10.): the Follow button keeps its own width next to Message (Message takes the rest of the row) */
.pn-dthead__act > .pn-followform > .pn-follow,.pn-dthead__act > a.pn-follow{flex:none}
/* owner 05.10. ("Review ist gequetscht"): the quote card got a tonal fill, so it needs real inner padding and air between stars, text and the by-line */
.pn-dt .pn-quote.pn-dtrev,.pn-dt .pn-sellertrust__quote.pn-dtrev{padding:var(--panel-pad)}
.pn-dt .pn-quote.pn-dtrev blockquote,.pn-dt .pn-sellertrust__quote.pn-dtrev blockquote{margin-top:var(--space-3)}
.pn-dt .pn-quote.pn-dtrev .pn-dtrev__by,.pn-dt .pn-sellertrust__quote.pn-dtrev .pn-dtrev__by{margin-top:var(--space-3)}
/* Guest message (owner 08.10., package GM, lib/guest_msg.php): "Write to <name>" on a guest listing and profile, in the
   join box's place. One panel: her avatar and the head, the message, the email "for her answer", the one consent line,
   ONE pink key; after the send the calm answer ("Check your inbox") with his own words quoted. */
.pn-gm{display:grid;gap:var(--space-4);text-align:left;scroll-margin-top:calc(var(--header-h) + var(--space-4))}
.pn-gm__head{display:flex;gap:var(--space-3);align-items:center;min-width:0}
.pn-gm__head .pc-avatar{flex:none}
.pn-gm__ht{min-width:0}
.pn-gm__h{margin:0;font:var(--type-title);color:var(--ink);overflow-wrap:anywhere}
.pn-gm__sub{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-gm__form{display:grid;gap:var(--field-gap);min-width:0}
.pn-gm__form[hidden]{display:none}
.pn-gm__field{display:grid;gap:var(--label-gap);min-width:0}
.pn-gm .pn-gm__text{min-height:132px;padding:var(--space-3);border-radius:var(--r-m);font:var(--type-ui)}
.pn-gm .pc-input{font:var(--type-ui)}
.pn-gm__label small{font:var(--type-meta);color:var(--ink-2)}
.pn-gm__count{margin:0;text-align:right;font:var(--type-cap);color:var(--ink-2)}
.pn-gm .pn-checkrow,.pn-l3c__form .pn-checkrow{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap);padding:0;font:var(--type-meta);color:var(--ink-2);cursor:pointer}
.pn-gm .pn-checkrow .pc-check{margin-top:0}
.pn-gm .pn-checkrow a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-gm .pn-fielderr{display:flex;align-items:flex-start;gap:var(--space-1);margin:0;padding:0;font:var(--type-label);color:var(--danger);text-align:left}   /* never the wizard's centred error line */
.pn-gm .pn-fielderr .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);translate:0 1px}
.pn-gm .pn-fielderr[hidden]{display:none}
.pn-gm__send{margin-top:0}
.pn-gm__done{display:grid;gap:var(--space-2);justify-items:start;outline:none}
.pn-gm__done[hidden]{display:none}
.pn-gm__ok{display:inline-grid;place-items:center;width:var(--avatar-m);height:var(--avatar-m);border-radius:var(--r-full);background:var(--surface-2);color:var(--success)}   /* a done mark is success (§2.4); the one pink is the send key */
.pn-gm__dh{margin:var(--space-1) 0 0;font:var(--type-title);color:var(--ink)}
.pn-gm__dp{margin:0;font:var(--type-body);color:var(--ink)}
.pn-gm__quote{margin:var(--space-1) 0;padding:var(--row-pad);border:0;border-radius:var(--r-m);background:var(--surface-2);font:var(--type-body);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;max-width:100%}
.pn-gm__done .pc-help a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
.pn-gm.is-sent .pn-gm__head{opacity:.9}
@media (max-width:700px){
  .pn-gm .pc-input:not(textarea),.pn-gm .pc-btn{min-height:var(--control-md)}
}

/* art director pass 27.10. (group D, the guest profile kit) */
/* D-025 (whole rows by auto-fit) is withdrawn by the design system (MBY-086, P1): auto-fit let one card stretch over the
   whole column (996 × 1328). The cards keep their cell (auto-fill above); a short row ends early. */
/* D-026: three reviews in two columns left a 390 × 180 hole; one column until there are four */
.pn-dtprof .pn-dtrevs:not(:has(> :nth-child(4))){grid-template-columns:minmax(0,1fr)}
/* D-031 / D-032: one fact takes the row; facts sit side by side at their own width */
.pn-dtprof .pn-dtfacts .pc-facts__list:has(> :only-child){grid-template-columns:minmax(0,1fr)}
@media (min-width:701px) and (max-width:1100px){.pn-dtprof .pn-dtfacts .pc-facts__list{grid-template-columns:repeat(auto-fill,minmax(140px,max-content));column-gap:var(--space-8)}}
.pn-dtprof .pc-door{padding:var(--panel-pad)}   /* D-017: the side stack's text edges line up */
/* UX 433 B-065: "+ shipping" after the member price, as on the guest page; B-073: one listing on her profile at full width (max one large card) */
.pn-dtbuy__ship{margin-left:var(--space-2);font:var(--type-meta);color:var(--ink-2);white-space:nowrap}
.pn-dt .pn-grid.pn-dtcards.is-one{--dt-cols:minmax(0,420px)}
/* Community mode (owner 25.10.): the guest listing as her post (templates/cm_ad_post.php), from the approved mockup
   design/v2/listing-post-guest.html v2. Design system P9 (03.11., docs/design-system.md): every value from the tokens,
   the member area is the source of truth — one page frame (1372), the photo on a fixed ratio (never the window's height),
   flat keys, plain avatars (no story ring), member chips, one review card (cmprof.css), no Caveat. pn-cp-* only. */
.pn-cp{max-width:none;margin:0;padding:var(--space-3) 0 0}   /* ADULT-012: the page frame gives width and gutter */
.pn-cp .pn-dtcrumbs,.pn-cp nav[aria-label]{margin:0 0 var(--space-3)}
.pn-cp-post{display:grid;gap:var(--space-4)}

/* creator row (ADULT-077 / 078): a plain avatar disc, name + one meta line, Follow = the member secondary key */
.pn-cp-who{display:flex;align-items:center;gap:var(--space-3)}
.pn-cp-av{flex:none;display:block;width:var(--avatar-l);height:var(--avatar-l);padding:0;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.pn-cp-av > span,.pn-cp-av > img{display:grid;place-items:center;width:100%;height:100%;border:0;border-radius:var(--r-full);background:var(--surface-2);font:var(--type-title);color:var(--ink);object-fit:cover}
.pn-cp-who__t{display:grid;gap:0;min-width:0}
.pn-cp-who__n{display:flex;align-items:center;gap:var(--space-1);font:var(--type-strong);color:var(--ink);text-decoration:none}
.pn-cp-who__n .pc-verified{margin-left:0}
.pn-cp-who__m{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-cp-st{font-weight:var(--w-strong);color:var(--ink)}   /* §2.3: the rating number in ink */
.pn-cp-follow{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-height:var(--control-sm);padding:0 var(--space-4);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label);cursor:pointer}
.pn-cp-follow:hover{background:var(--surface-3)}

/* gallery (ADULT-072 / 094): swipe on phones (4:5), a square on the desktop — never sized by the window's height */
.pn-cp-gal{position:relative;margin-top:var(--space-3);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.pn-cp-gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pn-cp-gal__track::-webkit-scrollbar{display:none}
.pn-cp-gal__track img{display:block;flex:0 0 100%;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center}
.pn-cp-gal__n{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--ink);font:var(--type-cap)}   /* the member photo-count chip, bottom right */
.pn-cp-dots{display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-3) 0 0}
.pn-cp-dots i{width:6px;height:6px;border-radius:var(--r-full);background:var(--surface-3)}
.pn-cp-dots i.is-on{width:16px;background:var(--ink-2)}
.pn-cp-thumbs{display:none}

/* actions under the photo (ADULT-083): save and share as member icon keys (filled, the message key is the one CTA) */
.pn-cp-acts{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.pn-cp-ib{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);cursor:pointer}
.pn-cp-ib:hover{background:var(--surface-3)}
.pn-cp-ib svg{width:var(--icon-m);height:var(--icon-m)}
.pn-cp-views{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;font:var(--type-meta);color:var(--ink-2)}
.pn-cp-views svg{width:var(--icon-s);height:var(--icon-s)}

/* right column */
.pn-cp-side{display:block;min-width:0}

/* her post: title, her words, facts (ADULT-079 / 092 / 093) */
.pn-cp-story-blk{margin-top:var(--space-4)}
.pn-cp-h{max-width:22ch;margin:0;font:var(--type-h1);letter-spacing:0;text-wrap:balance;color:var(--ink)}
.pn-cp-hand{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 var(--space-2);font:var(--type-label);color:var(--ink-2)}   /* the label in Inter, no script face, no arrow */
.pn-cp-hand svg{display:none}
.pn-cp-story{position:relative;max-width:68ch;font:var(--type-prose);color:var(--ink)}
.pn-cp-story p{margin:0 0 var(--space-3)}
.pn-cp-story p:last-child{margin-bottom:0}
.pn-cp-story.is-clamped{max-height:calc(var(--lh-prose) * 7);overflow:hidden;
  -webkit-mask-image:linear-gradient(black calc(100% - 52px),transparent);mask-image:linear-gradient(black calc(100% - 52px),transparent)}
.pn-cp-more{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink);font:var(--type-label);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:3px;cursor:pointer}
.pn-cp-more svg{width:var(--icon-s);height:var(--icon-s);transition:transform var(--dur-2) ease-out}
.pn-cp-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.pn-cp-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);max-width:68ch;margin-top:var(--space-4)}
.pn-cp-tag{display:inline-flex;align-items:center;min-height:var(--space-8);padding:0 var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2);font:var(--type-label)}
.pn-cp-tag b{font-weight:var(--w-strong);color:var(--ink-2)}   /* the '#' quiet, never pink */

/* the one action */
.pn-cp-cta-blk{margin-top:var(--space-6)}
.pn-cp-btn{display:flex;width:100%;gap:var(--space-2)}   /* ui_btn pink (pc-btn--primary) carries the look; here only the width */
.pn-cp-btn svg{width:var(--icon-m);height:var(--icon-m)}
.pn-cp-deal{margin:var(--space-2) 0 0;text-align:left;font:var(--type-meta);color:var(--ink-2);text-wrap:pretty}   /* ADULT-076: left, 8 under the key */

/* members about her: the review card of cmprof.css inside a panel (+1 step) */
.pn-cp-proof{margin-top:var(--space-6);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-cp-proof__h{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--head-gap)}
.pn-cp-proof__h h2{margin:0;font:var(--type-title);color:var(--ink)}
.pn-cp-proof__score{margin-left:auto;white-space:nowrap;font:var(--type-label);color:var(--ink)}
.pn-cp-proof__score small{font:var(--type-meta);color:var(--ink-2)}
.pn-cp-proof > .pn-cp-more{margin-top:var(--space-2)}

/* how posts are checked: quiet meta lines on the page ground; Report is a quiet key, aligned with the text */
.pn-cp-safe{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding:0;background:none}
.pn-cp-line{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-cp-line > svg{flex:none;width:var(--icon-s);height:var(--icon-s);margin-top:1px;color:var(--ink-2)}
.pn-cp-line--seal > .pc-verified{margin-left:0;color:var(--ink)}
.pn-cp-line b{font-weight:var(--w-strong);color:var(--ink)}
.pn-cp-report{display:inline-flex;align-items:center;gap:var(--space-2);justify-self:start;min-height:var(--tap);margin:0;font:var(--type-label);color:var(--ink-2);text-decoration:none}   /* ADULT-082: no hanging indent */
.pn-cp-report svg{width:var(--icon-s);height:var(--icon-s)}
.pn-cp-report:hover{color:var(--ink)}

/* more posts by her: the member card grid (plastik layer: 5 a row from 1280) */
.pn-cp-rail{display:grid;gap:var(--head-gap);margin-top:var(--section-gap)}
.pn-cp-rail__h{display:flex;align-items:baseline;gap:var(--space-3)}
.pn-cp-rail__h h2{margin:0;font:var(--type-title);color:var(--ink)}
.pn-cp-rail__h a{margin-left:auto;font:var(--type-label);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:3px}
.pn-cp-teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.pn-cp-tz{display:grid;gap:var(--space-2);align-content:start;color:var(--ink);text-decoration:none}
.pn-cp-tz img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-m);background:var(--surface)}
.pn-cp-tz span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:var(--type-strong);color:var(--ink)}

/* the creator door: one quiet line, the link in ink (ADULT-086) */
.pn-cp-sell{margin:var(--section-gap) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-cp-sell a{font-weight:var(--w-strong);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:3px}

/* sticky bar (phone) */
.pn-cp-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--chrome);border-top:1px solid var(--chrome-line)}
.pn-cp-mini{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-cp-mini .pn-cp-av{width:var(--avatar-s);height:var(--avatar-s)}
.pn-cp-mini .pn-cp-av > span{font:var(--type-label)}
.pn-cp-mini b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--type-label);color:var(--ink)}
.pn-cp-bar .pn-cp-btn{flex:0 0 auto;width:auto;margin-left:auto}

/* desktop: two columns of one frame; the photo square sticks while her text scrolls */
@media (min-width:960px){
  .pn-cp{padding-top:var(--space-5)}
  .pn-cp-post{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:start}
  .pn-cp-gcol{position:sticky;top:calc(var(--sticky-top) + var(--space-3));align-self:start}
  .pn-cp-gcol > .pn-cp-who{display:none}
  .pn-cp-gcol .pn-cp-gal{margin-top:0}
  .pn-cp-gal__track img{aspect-ratio:1/1}
  .pn-cp-dots{display:none}
  .pn-cp-thumbs{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
  .pn-cp-thumbs button{flex:0 0 64px;width:64px;height:64px;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;background:var(--surface);opacity:.6;cursor:pointer}
  .pn-cp-thumbs button.is-on{opacity:1;box-shadow:inset 0 0 0 2px var(--ink)}
  .pn-cp-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
  .pn-cp-story-blk{margin-top:var(--space-6)}
  .pn-cp-story.is-clamped{max-height:calc(var(--lh-prose) * 8)}
  .pn-cp-cta-blk .pn-cp-btn{display:inline-flex;width:auto}   /* owner 26.10.: a key, not a pink bar across the column */
  .pn-cp-teasers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-cp-bar{display:none}
}
@media (max-width:959px){
  .pn-cp-post{grid-template-columns:minmax(0,1fr)}
  .pn-cp-side > .pn-cp-who--side{display:none}
  .pn-cp-cta-blk .pn-cp-btn{display:none}   /* the phone bar carries the one message key */
  .pn-cp-cta-blk .pn-cp-deal{margin-top:0}
}
@media (min-width:701px) and (max-width:959px){
  .pn-cp-gcol{width:100%;max-width:480px}
  .pn-cp-bar{display:none}
  .pn-cp-cta-blk .pn-cp-btn{display:inline-flex;width:auto}
}
@media (max-width:700px){body:has(.pn-cp-bar) .pn-gfooter{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
.pn-cp-btn:focus-visible,.pn-cp-follow:focus-visible,.pn-cp-ib:focus-visible,.pn-cp-more:focus-visible,.pn-cp-report:focus-visible,.pn-cp-tz:focus-visible,.pn-cp-thumbs button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pn-cp-more svg{transition:none}}

/* PM 500 aussen-seo helper A (08.11.)
   AS-076 (owner spec 03.10. «title on the photo»): on phones her title stands above the photo, right under her creator row.
   The two desktop columns stay as they are; on a phone the column wrappers step aside (display: contents) so the post is one
   flex column in source order, and only the creator row and the H1 move up front.
   AS-065: the guest profile's H1 carries her role under the name (templates/member_guest.php), in the meta voice. */
@media (max-width:700px){
  .pn-cp-post{display:flex;flex-direction:column;gap:0}
  .pn-cp-gcol,.pn-cp-side,.pn-cp-story-blk{display:contents}
  .pn-cp-gcol > .pn-cp-who{order:-2}
  .pn-cp-h{order:-1;margin-top:var(--space-3)}
  .pn-cp-hand{margin-top:var(--space-4)}
}
.pn-dthead__name .pn-dthead__role{display:block;margin-top:var(--space-1);font:var(--type-meta);letter-spacing:0;text-transform:none;color:var(--ink-2)}
/* The editorial guides of community mode (owner 26.10., templates/cm_guide.php). Design system P8 (03.11.): the en guides
   share one layout with the language guides (templates/money.php); their frame lives in landing.css ("the sell / buy
   guides, one layout on every host") and guide.css. No marker on the h1, no brand figure, no pink closing block: the
   closing call is the member panel of the money pages. Here only the h1's measure. Tokens only. */
.pn-gd .pn-cg__h{text-wrap:balance}

/* PM 500 aussen-seo lead (08.11., AS-005): the fan door of the buying guide as a text link under the keys and the closing call */
.pn-gd .pn-cg__join{margin:var(--space-4) 0 0;font-weight:600;font-size:var(--fs-ui);line-height:24px}
/* The Panty Game (owner 26.10., community mode only, templates/partials/landing_game.php): the creators' four steps,
   compact (owner: "total Platzverschwendung … nicht kompakt genug"). Desktop: four steps side by side, a small scene over
   each text. Tablets: two by two. Phones: one row per step, the scene left, the text right. Every scene is drawn at its
   natural size inside .pn-pg__fit and scaled into a fixed frame, so it reads the same on every screen.
   Site tokens only (light + dark). pn-pg-* only. */
.pn-pg{background:var(--bg);color:var(--ink);padding:64px 0 56px}
.pn-pg__head{max-width:640px}
.pn-pg__h{margin:6px 0 0}
.pn-pg__h em{font-style:normal;color:inherit;padding:0 .06em;background:linear-gradient(transparent 58%,var(--pink) 58% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme="dark"] .pn-pg__h em{background:var(--pink);color:var(--anthracite)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-pg__h em{background:var(--pink);color:var(--anthracite)}}
.pn-pg__sub{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--ink-2)}

/* the steps */
.pn-pg__steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.pn-pg__step{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border-radius:var(--r-box);background:var(--surface)}
.pn-pg__n{display:block;font:600 13px/1 var(--font-label);color:var(--pink-glyph)}
.pn-pg__sh{margin:5px 0 4px;font:700 18px/1.15 var(--font-display);letter-spacing:var(--tr-head);color:var(--ink)}
.pn-pg__sp{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}

/* a scene: a fixed frame, the composition scaled into it */
.pn-pg__vis{position:relative;display:grid;place-items:center;height:132px;border-radius:var(--r-box);background:var(--sunken);overflow:hidden}
.pn-pg__fit{display:grid;place-items:center;transform:scale(.46);transform-origin:center}
.pn-pg__card{background:var(--surface);border-radius:var(--r-box);box-shadow:0 18px 36px -26px var(--scrim)}
.pn-pg__av{display:block;flex:none;border-radius:50%;overflow:hidden;background:var(--sunken)}
.pn-pg__av img{display:block;width:100%;height:100%;object-fit:cover}
.pn-pg__av--lg{width:76px;height:76px;margin:-38px auto 8px;border:4px solid var(--surface)}
.pn-pg__av--sm{width:34px;height:34px}
.pn-pg__av--blank{background:var(--pink-soft)}
.pn-pg__name{display:inline-flex;align-items:center;gap:4px;min-width:0;font-weight:700;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-pg__name--blank{display:inline-block;width:110px;height:12px;border-radius:var(--r-label);background:var(--sunken)}
.pn-pg__ver{flex:none;color:var(--pink-glyph)}
.pn-pg__pic{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-box);background:var(--sunken)}
.pn-pg__ptitle{display:block;padding:8px 4px 2px;font-weight:700;font-size:13px;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 01 her profile */
.pn-pg__prof{width:240px;padding:0 0 14px;text-align:center;overflow:hidden}
.pn-pg__band{display:block;height:56px;background:var(--pink-soft)}
.pn-pg__meta{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.pn-pg__label{display:block;margin:12px 16px 8px;text-align:left;font:600 12px/1 var(--font-label);color:var(--ink-3)}
.pn-pg__ths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 16px}
.pn-pg__th{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-btn);background:var(--sunken)}

/* 02 a post catches an eye, her profile one tap away */
.pn-pg__vis--2 .pn-pg__fit{width:300px;height:300px}
.pn-pg__post{width:190px;padding:8px;transform:rotate(-2.5deg) translateX(-34px)}
.pn-pg__link{position:absolute;left:calc(50% + 8px);bottom:84px;width:70px;height:48px;border:2px dashed var(--pink-glyph);border-color:var(--pink-glyph) var(--pink-glyph) transparent transparent;border-radius:0 16px 0 0;opacity:.8}   /* the dashed arc from her post to her profile chip (CSS, no inline svg) */
.pn-pg__chip{position:absolute;right:0;bottom:22px;display:flex;align-items:center;gap:8px;max-width:240px;padding:7px 7px 7px 8px;border-radius:var(--radius-full)}
.pn-pg__follow{flex:none;padding:6px 12px;border-radius:var(--radius-full);background:var(--pink);color:var(--anthracite);font-weight:700;font-size:12px}

/* 03 a private conversation (an illustration) */
.pn-pg__chat{display:grid;gap:8px;width:280px;padding:14px}
.pn-pg__chathd{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:15px;color:var(--ink)}
.pn-pg__tag{margin-left:auto;padding:4px 8px;border-radius:var(--radius-full);background:var(--sunken);font:600 12px/1 var(--font-label);color:var(--ink-3)}
.pn-pg__b{max-width:82%;padding:9px 13px;border-radius:var(--r-box);font-size:15px;line-height:1.35}
.pn-pg__b--her{justify-self:start;background:var(--sunken);color:var(--ink);border-bottom-left-radius:8px}
.pn-pg__b--me{justify-self:end;background:var(--pink);color:var(--anthracite);border-bottom-right-radius:8px}

/* 04 her post, her call */
.pn-pg__final{display:grid;gap:8px;width:230px;padding:10px}
.pn-pg__fhd{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 2px 0}
.pn-pg__msg{display:flex;align-items:center;justify-content:center;gap:6px;min-height:20px;padding:10px;border-radius:var(--radius-full);background:var(--pink);color:var(--anthracite);font-weight:700;font-size:13px}

/* motion (script on): the chat lines come one after another once the block is in view */
.pn-pg.is-live .pn-pg__b{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.pn-pg.is-live.is-in .pn-pg__b{opacity:1;transform:none}
.pn-pg.is-live .pn-pg__b:nth-child(3){transition-delay:.45s}
.pn-pg.is-live .pn-pg__b:nth-child(4){transition-delay:.9s}

.pn-pg__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:24px 0 0}
.pn-pg__cta small{font-size:13px;color:var(--ink-3)}

@media (min-width:701px){
  .pn-pg__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-pg__step{grid-template-columns:1fr;align-items:start;align-content:start;gap:12px;padding:12px 12px 16px}
  .pn-pg__vis{height:180px}
  .pn-pg__fit{transform:scale(.6)}
  .pn-pg__txt{padding:0 4px}
}
@media (min-width:1101px){
  .pn-pg__steps{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .pn-pg *{transition:none!important}
  .pn-pg.is-live .pn-pg__b{opacity:1;transform:none}
}

/* the community home around the game (art director + PM review 26.10.): the pink block lost its calculator, so "Stay
   private" takes the whole row with its four points side by side; the reviews' join button gets air under the receipt */
.pn-lb--cm .pn-lp-boxes{grid-template-columns:minmax(0,1fr)}
@media (min-width:701px){.pn-lb--cm .pn-lp-priv .pc-priv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px}}
.pn-lb--cm .pn-lp-proof__cta{margin-top:24px}
/* the pink block's fine print under its button (community mode, owner's copy 26.10.) */
.pn-lp-sell__fine{display:block;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--anthracite);opacity:.78}

/* visual audit 26.10.: VG-001 the dark-theme kicker rule (pink) outranked the on-pink rule, so "For women" was pink on pink
   (1.13:1); VG-005 on phones the illustration covered the pink block's fine print by 8 px; VG-014 the step scenes were cut */
:root:not([data-theme="x"]) .pn-lb .pc-on-pink .pc-kicker,:root:not([data-theme="x"]) .pn-lb .pc-box--cr .pc-kicker{color:var(--anthracite)}
@media (max-width:700px){.pn-lb--cm .pn-lp-sell__art{margin-top:32px}}
@media (max-width:700px){.pn-pg__vis{height:150px}.pn-pg__fit{transform:scale(.4)}}
@media (max-width:700px){.pn-lb--cm :is(.pn-lp-sell__proof,.pn-pg__cta,.pn-lp-laundry__cta,.pn-lp-cta,.pn-lp-proof__cta) .pc-btn{display:flex;width:100%}}   /* VG-012: one width for section keys on phones */
.pn-lb--cm .pn-lp-hero__h{text-wrap:balance}   /* VG-021: the 452 px copy column never fits the second sentence on one line; balanced lines instead of a lone "them." */
/* visual audit VG-011 (26.10.): profiles and "New on panty.com" are two light sections back to back — 64 + 80 px read as a
   hole; the strip follows the profiles at one section gap. The 144 px before the dark and the pink block stay: they are
   the room for those blocks' domes (negative margin-top). */
.pn-lb--cm .pn-line + .pn-lp-fresh{padding-top:0}

/* ==========================================================================
   Art director pass 27.10. (group C: community home, creators, header, footer). Owner: "Kraut und Rüben".
   ========================================================================== */
/* C-001: the game scenes sat off centre and cut — a grid track kept the unscaled size; the scene is placed absolutely and
   scaled from its centre, scene 4 (the tallest) one step smaller so it fits its frame */
.pn-pg__vis{display:block}
.pn-pg__fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--pg-s,.46))}
.pn-pg__vis--4 .pn-pg__fit{--pg-s:.42}
@media (min-width:701px){.pn-pg__fit{--pg-s:.6}.pn-pg__vis--4 .pn-pg__fit{--pg-s:.4}}
@media (max-width:700px){.pn-pg__fit{--pg-s:.4}.pn-pg__vis--4 .pn-pg__fit{--pg-s:.36}}
/* C-012: the game takes the home's section rhythm (was a fixed 64 / 56) */
.pn-lb--cm .pn-pg{padding:var(--lp-pad) 0}
/* C-013 / C-014 / C-044: seven dark and four light grounds met in straight seams; every ordinary section stands on the
   profiles' ground now, only the dark block and the pink block keep their own (their domes mark the change) */
.pn-lb--cm :is(.pn-lp-proof,.pn-lp-guides,.pn-lp-join,.pn-lp-laundry.pn-seotext,.pn-pg){background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg)}
/* C-002: the tablet clamps made the headings bigger than on desktop (69 px at 1100 against 44 at 1440) */
@media (min-width:701px) and (max-width:1100px){
  .pn-lb--cm .pn-lp-proof__h.pc-h-l{font-size:var(--fs-l)}
  .pn-lb--cm .pn-lp-real .pc-sechead .pc-h-m{font-size:var(--fs-m)}
}
/* C-003: every top-level section head of the community home on one step (34 and 44 px mixed); the boxes' heads below it */
.pn-lb--cm :is(.pn-lp-real,.pn-lp-fresh,.pn-lp-join) .pc-sechead .pc-h-m,.pn-lb--cm .pn-lp-join__h.pc-h-m{font-size:var(--fs-l)}
.pn-lb--cm .pn-lp-buy .pn-lp-how__h{font-size:var(--fs-section);color:var(--dk-ink)}   /* C-004: no pure white, a box head */
/* C-006: one lede on the home */
.pn-lb--cm :is(.pn-lp-buy__lede,.pn-lp-proof__p,.pn-pg__sub,.pc-sechead p){font-size:var(--fs-ed-lede);line-height:1.5;color:var(--ink-2)}
.pn-lb--cm .pn-lp-buy :is(.pn-lp-buy__lede){color:var(--dk-ink-2)}
/* C-011: the profiles' kicker stood 9 px under the hero caption */
.pn-lb--cm .pn-lp-hero + .pn-lp-real--next{padding-top:calc(var(--lp-pad) / 2)}
/* C-022: in light the guides kicker was pink on cream (1.6:1) */
.pn-lb .pn-lp-laundry .pc-kicker{color:var(--ink)}
[data-theme="dark"] .pn-lb .pn-lp-laundry .pc-kicker{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lb .pn-lp-laundry .pc-kicker{color:var(--pink)}}
.pn-lp-mast__meta{font:600 12px/1 var(--font-label);letter-spacing:0;color:var(--ink-3)}   /* C-023: the only tracked caps label */
/* C-029: cream cards inside the dark block → the block's own surface */
.pn-lb--cm .pc-dk .pc-care{background:var(--dk-card);color:var(--dk-ink);border-radius:var(--r-box);box-shadow:none}
.pn-lb--cm .pc-dk .pc-care::before,.pn-lb--cm .pc-dk .pc-care::after{display:none}
/* C-036: the door keys take the full width on phones like every other section key */
@media (max-width:700px){.pn-lb--cm .pn-lp-doors .pc-door .pc-btn{display:flex;width:100%}}
/* C-017 / C-043: on phones the members figure ran 30 px out of its box and the caption sat on her legs */
@media (max-width:700px){
  .pn-lb--cm .pn-lp-buy__jess{height:100%;bottom:0;right:0}
  .pn-lb--cm .pn-lp-buy__art .pc-illu{position:static;margin-top:6px;text-align:right}
}
/* C-056: one footer colour on every page (the home had its own darker one) */
body:has(.pn-lb) .pn-gfooter{background:var(--chrome)}
@media (min-width:701px) and (max-width:1100px){.pn-lb--cm .pn-lp-laundry__h{font-size:30px}}   /* C-002: never above the desktop size; still narrow for long pt words at 701 */
/* C-029 follow-up: the step cards on the dark block's own card tone need the block's inks (the cream card's grey was 1.4:1 there) */
.pn-lb--cm .pc-dk .pc-care h3{color:var(--dk-ink)}
.pn-lb--cm .pc-dk .pc-care p{color:var(--dk-ink-2)}
.pn-lb--cm .pc-dk .pc-care__n{color:var(--pink)}
.pn-lb--cm .pc-dk .pc-care__n *{color:inherit;opacity:1}
.pn-lb--cm .pc-dk .pc-care__num{color:var(--pink)}
.pn-lb--cm .pn-lp-buy__jess,.pn-lb--cm .pn-lp-buy__jess img{filter:none}   /* C-016: the 40 px rim shadow lit the alpha noise of the cut-out into a dark rectangle */
/* C-028: step titles at 19 px untracked like every head of that size */
.pn-pg__sh{letter-spacing:0}
/* C-041: the game's highlight is the hero's tape in both themes (light had an underline marker) */
.pn-pg__h em{background:var(--pink);color:var(--anthracite);padding:0 .08em}
/* C-045: the guides kicker 24 px under the lace edge while the others have the section padding */
.pn-lb--cm .pn-lp-sell + .pn-lp-laundry.pn-seotext{padding-top:var(--lp-pad)}
/* C-027: post captions start on one line whether the title runs one or two lines */
.pn-lb--cm .pn-lp-pairs .pn-prodcard .pc-card__title{min-height:2lh}
@media (min-width:701px) and (max-width:959px){.pn-lb--cm .pc-dk .pc-care h3{min-height:2lh}}   /* C-031: card bodies start on one line at 768 */

/* premium editorial pass (owner 27.10.): the community home's ordinary sections take the ambient pink from alternating
   sides (--lp-real-bg right, --lp-real-bg-l left), centred so it fades out before each edge: depth without a seam. */
.pn-lb--cm :is(#sellers,.pn-lp-proof,.pn-lp-laundry.pn-seotext){background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg-l)}
.pn-lb--cm :is(#fresh,.pn-pg,.pn-lp-join){background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg)}

/* ==========================================================================
   Home 100 pass (owner 27.10.: "die Startseite sieht unruhig und zusammengeflickt aus", list in
   docs/visual-audit/startseite-100-27-10.md). Community home only (.pn-lb--cm). One rhythm, one head line, one card
   family, one accent per head; the dark and the pink block are straight bands (no domes, no lace hem).
   ========================================================================== */
.pn-lb--cm{--cm-sec:clamp(40px,5vw,64px);--cm-band:clamp(56px,7vw,96px);--cm-gap:20px}
/* A 1-9, F 83-85: every ordinary section the same air above and below; the bands their own, larger air; no overlap */
.pn-lb--cm > section{margin-top:0}
.pn-lb--cm :is(.pn-lp-real,.pn-lp-real--next,.pn-lp-fresh,.pn-line + .pn-lp-fresh,.pn-lp-proof,.pn-pg,.pn-lp-laundry.pn-seotext,.pn-lp-sell + .pn-lp-laundry.pn-seotext,.pn-lp-hero + .pn-lp-real--next,.pn-lp-join){padding:var(--cm-sec) 0}
.pn-lb--cm > section:has(+ :is(.pn-lp-buy,.pn-lp-sell)){padding-bottom:var(--cm-sec)}
.pn-lb--cm :is(.pn-lp-buy,.pn-lp-sell),.pn-lb--cm :is(.pn-lp-buy,.pn-lp-sell).pn-raw{margin-top:0;border-radius:0;padding:var(--cm-band) 0}
.pn-lb--cm .pn-lp-join{padding-bottom:calc(var(--cm-sec) + 16px)}
.pn-lb--cm .pn-lp-sell + .pn-lp-laundry::before{display:none}

/* B 12-13, C 33-34, 43: one head stack everywhere — kicker, 14 px, head, 12 px, lede, 32 px, the content */
.pn-lb.pn-lb--cm .pc-wrap .pc-kicker:has(+ h2){display:flex;width:fit-content;margin:0 0 14px}
.pn-lb--cm .pc-kicker + h2{margin-top:0}
.pn-lb--cm :is(.pc-sechead h2,.pn-lp-buy__h,.pn-pg__h,.pn-lp-sell__h,.pn-lp-gcm__h,.pn-lp-join__h){font-size:var(--fs-l);line-height:1.08}
.pn-lb--cm :is(.pc-sechead h2 + p,.pn-lp-buy__h + .pn-lp-buy__lede,.pn-pg__h + .pn-pg__sub,.pn-lp-join__h + .pn-lp-join__p,.pn-lp-gcm__h + .pn-lp-gcm__lede){margin-top:12px}
.pn-lb--cm .pc-sechead{margin-bottom:32px}
.pn-lb--cm .pn-pg__steps{margin-top:32px}
.pn-lb--cm .pn-lp-join__head{margin-bottom:32px}
.pn-lb--cm :is(.pn-lp-buy__lede,.pn-lp-buy__ask,.pn-lp-sell__lede p,.pn-lp-gcm__lede,.pn-lp-join__p,.pn-pg__sub,.pc-sechead p){font-size:var(--fs-ed-lede);line-height:1.5;color:var(--ink-2)}
.pn-lb--cm .pn-lp-buy :is(.pn-lp-buy__lede,.pn-lp-buy__ask){color:var(--dk-ink-2)}
.pn-lb--cm .pn-lp-sell .pn-lp-sell__lede p{color:var(--anthracite)}
.pn-lb--cm :is(.pn-lp-buy__ask,.pn-lp-sell__lede p + p){margin-top:10px}
.pn-lb--cm :is(.pn-lp-sell__fine,.pn-pg__cta small,.pn-lp-cta__stack p,.pn-lp-cta__stack > p:first-child){font-size:15px;line-height:1.5}

/* D 51-52: one text pink (the kicker's) for the brand word; the tape belongs to the hero's h1 alone */
.pn-lb--cm .pc-brandword{color:var(--pink-glyph)}
[data-theme="dark"] .pn-lb--cm .pc-brandword{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lb--cm .pc-brandword{color:var(--pink)}}
.pn-lb--cm .pn-pg__h .pc-brandword{background:none;padding:0}
/* D 53: the hero tape flat (no sheen), one pink, lines cut cleanly */
.pn-lb--cm .pn-lp-hero .pc-hl{background:var(--pink)}

/* B 20-21, E 71: profiles and posts on one four-column grid from 701 px (no cut card at 1100); phones keep the swipe rail */
@media (min-width:701px){
  .pn-lb--cm .pn-lp-sellrail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cm-gap);overflow:visible;margin-inline:0;padding-inline:0}
  .pn-lb--cm .pn-lp-sellrail > .pc-scard{width:auto}
  .pn-lb--cm .pn-lp-sellrail > :nth-child(n+5){display:none}
  .pn-lb--cm .pn-lp-pairs{gap:var(--cm-gap)}
}

/* E 66-68, 78: one card family — 16 px corners, the card shadow, no edge, one lift on hover */
.pn-lb--cm :is(.pc-dk .pc-care,.pn-pg__step,.pn-lp-q,.pn-lp-doors .pc-door,.pn-lp-sell .pn-lp-priv){border:0;border-radius:var(--r-card-x);box-shadow:var(--sh-card)}
.pn-lb--cm .pn-lp-doors{gap:var(--cm-gap)}
.pn-lb--cm .pn-lp-doors .pc-door::after{display:none}   /* D 59: no sheen spot */
.pn-lb--cm .pn-lp-doors .pc-door--buy{background:var(--dk-card)}
.pn-lb--cm .pn-lp-doors .pc-door--sell{background:var(--pink)}
.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step){transition:transform var(--dur-card) var(--ease-out),box-shadow var(--dur-card) var(--ease-out)}
.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step):hover{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
@media (prefers-reduced-motion:reduce){.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step){transition:none}.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step):hover{transform:none}}
.pn-lb--cm .pc-dk .pn-lp-steps{align-items:stretch}

/* B 16, 19, F 89: the members band reads like the women's band — copy on the content line left, the photo right (mirrored,
   so she still faces the copy), its width capped on very wide screens; the label at the photo's lower right */
@media (min-width:1101px){
  .pn-lb--cm .pn-raw--buy{--raw-w:min(62%,1120px)}
  .pn-lb--cm .pn-raw--buy .pn-raw__bg{left:auto;right:0;transform:scaleX(-1)}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__top{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__main{grid-column:1}
  .pn-lb--cm :is(.pn-raw--l,.pn-raw--sell) .pn-raw__illu{left:auto;right:max(var(--gutter),calc((100% - var(--main-max)) / 2))}
}
/* C 37, 39-40: "How it works" / "What we check" as eyebrow lines, the steps numbered like the game's (13 px, pink) */
.pn-lb--cm .pn-lp-buy .pn-lp-how{margin-top:56px}
.pn-lb--cm .pn-lp-buy .pn-lp-how--safe{margin-top:40px}
.pn-lb--cm .pn-lp-buy .pn-lp-how__h{margin:0 0 16px;font:600 13px/1.2 var(--font-label);letter-spacing:0;color:var(--pink)}
.pn-lb--cm .pc-dk .pc-care__n{display:block;margin:0 0 6px;font:600 13px/1.2 var(--font-label);white-space:nowrap}
.pn-lb--cm .pc-dk .pc-care__num{font:inherit;letter-spacing:0}
.pn-lb--cm .pc-dk .pc-care__lbl{color:var(--dk-ink-2)}
.pn-lb--cm .pc-dk .pc-care__lbl::before{content:" · "}
.pn-lb--cm .pc-dk .pc-care h3{margin:0 0 6px;font-size:18px;line-height:1.2;letter-spacing:0}
.pn-lb--cm .pc-dk .pc-care p{font-size:15px;line-height:1.45}
.pn-lb--cm .pn-lp-buy .pn-lp-cta{margin-top:40px}

/* E 57-58, 79-80: the women's band without paper — "Stay private" a dark tile on the pink, no edge, no double shadow */
.pn-lb--cm .pn-lp-sell .pn-lp-priv{background:var(--dk-card);color:var(--dk-ink)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv :is(.pc-box__h,b){color:var(--dk-ink)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv :is(.pn-lp-box__p,small){color:var(--dk-ink-2)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-box__h{font-size:var(--fs-section)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv li::before{border-color:var(--dk-ink-2)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv::before,.pn-lb--cm .pn-lp-sell .pn-lp-priv::after{display:none}
.pn-lb--cm .pn-lp-sell .pn-lp-notes,.pn-lb--cm .pn-lp-sell .pn-lp-boxes{margin-top:48px}

/* member reviews (landing_receipt, community mode): three dark quote tiles under the section head, the count under them */
.pn-lp-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--cm-gap)}
.pn-lp-q{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:24px;background:var(--surface);color:var(--ink)}
.pn-lp-q q{display:block;font-size:16px;line-height:1.5;quotes:"\201C" "\201D"}
.pn-lp-q small{font-size:13px;line-height:1.4;color:var(--ink-3)}
.pn-lp-q small b{font-weight:600;color:var(--ink-2)}
.pn-lp-q small a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.pn-lp-qfoot{margin:24px 0 0;max-width:68ch;font-size:15px;line-height:1.5;color:var(--ink-3)}
.pn-lp-qfoot b{font-weight:700;color:var(--ink)}
.pn-lb--cm .pn-lp-proof--cm .pn-lp-proof__cta{margin-top:20px}
@media (min-width:701px){.pn-lb--cm .pn-lp-proof--cm .pc-sechead{flex-wrap:nowrap;align-items:flex-end}.pn-lb--cm .pn-lp-proof--cm .pc-sechead > .pc-btn{flex:none}}
@media (max-width:700px){.pn-lb--cm .pn-lp-proof--cm .pc-sechead > .pn-lp-door--top{display:none}.pn-lb--cm .pn-lp-proof--cm .pn-lp-door--end{display:flex;margin-top:18px}}

/* guides (landing_edit, community mode): the copy on the content line, her figure beside it, no arch, no chips */
.pn-lp-gcm__wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end}
.pn-lp-gcm__copy{max-width:640px}
.pn-lp-gcm__h{margin:0}
.pn-lp-gcm__two{margin-top:20px}
.pn-lp-gcm__two p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.pn-lp-gcm__two p + p{margin-top:8px}
.pn-lp-gcm__two b{color:var(--ink)}
.pn-lp-gcm__go{margin:24px 0 0}
.pn-lp-gcm__fig{margin:0;display:grid;justify-items:end;gap:6px}
.pn-lp-gcm__img{display:block;width:auto;height:220px;filter:var(--lp-cut-rim)}
.pn-lp-gcm__fig .pc-illu{position:static;font-size:12px;color:var(--ink-2);opacity:1}
@media (min-width:960px){
  .pn-lp-gcm__wrap{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:48px;align-items:center}
  .pn-lp-gcm__fig{justify-self:center}
  .pn-lp-gcm__img{height:380px}
}
/* B 23: the hero lede ran behind her foot — the copy column narrower, the lying figure a little smaller on wide screens */
@media (min-width:1101px){
  .pn-lb--cm .pn-lp-hero__sub{max-width:30rem}
  .pn-lb--cm .pn-alt .pn-alt__art{width:min(58%,1040px)}
}
/* phones (A 6, C 40, E 69-70): the members band's steps and checks are the same separate dark tiles as on desktop — the
   number line over the title (no 40 px number column that cut "Message"), no cream list with white corners */
@media (max-width:700px){
  .pn-lb--cm .pn-lp-buy .pn-lp-steps{gap:10px}
  .pn-lb--cm .pn-lp-buy .pn-lp-step,.pn-lb--cm .pn-lp-buy .pn-lp-safe__i{display:block;padding:16px 18px;border-radius:var(--r-card-x);background:var(--dk-card);box-shadow:var(--sh-card)}
  .pn-lb--cm .pn-lp-buy .pn-lp-safe__i + .pn-lp-safe__i{border-top:0}
  .pn-lb--cm .pn-lp-buy .pn-lp-how--safe .pn-lp-steps{border-radius:0;background:none;overflow:visible}
  .pn-lb--cm .pn-lp-buy .pn-lp-step .pc-care__n{display:block;padding:0}
  .pn-lb--cm .pn-lp-buy .pn-lp-how{margin-top:40px}
  .pn-lb--cm .pn-lp-buy .pn-lp-how--safe{margin-top:32px}
}
/* tablets 701-1100: the copy ran over both band photos — the photo on top over the full width, the copy under it (the phone
   order, a taller photo) */
@media (min-width:701px) and (max-width:1100px){
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell){--raw-w:100%;--raw-ph:440px;padding-top:0}
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell) .pn-raw__bg{left:0;right:0;width:100%;height:var(--raw-ph);transform:none;
    -webkit-mask-image:linear-gradient(to bottom,var(--ink) 50%,transparent),linear-gradient(to bottom,var(--ink) 70%,transparent);mask-image:linear-gradient(to bottom,var(--ink) 50%,transparent),linear-gradient(to bottom,var(--ink) 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell) > .pc-wrap{padding-top:calc(var(--raw-ph) - 48px)}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__top,.pn-lb--cm .pn-raw--sell .pn-lp-sell__top{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__main{grid-column:1;max-width:640px}
  .pn-lb--cm .pn-raw--sell .pn-lp-sell__top > *{max-width:640px}
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell) .pn-raw__illu{top:calc(var(--raw-ph) - 80px);bottom:auto;left:auto;right:var(--gutter)}
  .pn-lb--cm .pn-raw__bg--alt.pn-raw__bg--buy{object-position:30% 35%}
  .pn-lb--cm .pn-raw__bg--alt.pn-raw__bg--sell{object-position:70% 30%}
}
@media (min-width:701px) and (max-width:959px){
  .pn-lp-gcm__wrap{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
  .pn-lp-gcm__img{height:300px}
}
@media (max-width:700px){.pn-lp-gcm__fig{justify-items:center}}
.pn-lp-gcm__fig .pc-illu{white-space:nowrap}
/* owner 27.10. ("da fehlen Icons um rechts die Fläche zu füllen"): "Stay private" — each point with its icon well, as the
   trust row of the creators page; no list bullet */
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-priv li{display:flex;align-items:flex-start;gap:14px;padding-left:0}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-priv li::before{display:none}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pn-rowicon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--chrome-well);color:var(--dk-ink)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-priv li > div{min-width:0}
/* Community mode (owner 25.10.): the Top 100 creators (templates/cm_top.php, design/v2/top100-guest-cm.html) and the
   category pages as posts (partials/cm_hub_main.php + partials/cm_postcard.php, design/v2/hub-postcard-cm.html). Layout,
   sizes and spacing are the mockups'; colours are the site tokens of the same names, so both follow the light and dark

/* ---------- Top 100 ---------- */
.pn-ctp{max-width:none;margin:0;padding:var(--space-3) 0 var(--space-12)}   /* design system P9: the one 1372 page frame */
.pn-ctp-hd{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.pn-ctp-hd h1{margin:0;font:var(--type-display);letter-spacing:0;color:var(--ink)}
.pn-ctp-hd h1 small{display:block;margin-bottom:var(--space-2);font:var(--type-label);color:var(--ink-2)}   /* the kicker: label type in ink-2, never pink */
.pn-ctp-lead{max-width:60ch;margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-ctp-rule{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-1) 0 0;padding:0;list-style:none;counter-reset:r}
.pn-ctp-rule li{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);padding:0 var(--space-3) 0 var(--space-2);border-radius:var(--r-m);background:var(--surface);font:var(--type-label);color:var(--ink-2)}
.pn-ctp-rule li::before{counter-increment:r;content:counter(r);display:grid;place-items:center;width:var(--avatar-xs);height:var(--avatar-xs);border-radius:var(--r-full);background:var(--surface-2);font:var(--type-cap);color:var(--ink)}
.pn-ctp-list{display:grid;gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}
.pn-ctp-ent{position:relative;display:grid;grid-template-columns:22px 104px minmax(0,1fr) 20px;grid-template-areas:"rk ph tx go";column-gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--r-l);background:var(--surface)}
.pn-ctp-ent:hover{background:var(--surface-2)}
.pn-ctp-cover{position:absolute;inset:0;border-radius:inherit;z-index:1}
.pn-ctp-rk{grid-area:rk;text-align:center;font:var(--type-title);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-ctp-ent.is-top .pn-ctp-rk{color:var(--ink)}   /* §2.3: numbers never pink */
/* her profile picture, the row's main picture (owner 25.10.: "top 100 sind profile"), 4:5 with the house edge line */
.pn-ctp-ph{grid-area:ph;position:relative;display:block;width:104px;aspect-ratio:3/4;border-radius:var(--r-m);overflow:hidden;background:var(--surface-2)}
.pn-ctp-ph picture,.pn-ctp-ph img{display:block;width:100%;height:100%;object-fit:cover}
.pn-ctp-tx{grid-area:tx;display:grid;gap:0;min-width:0}
.pn-ctp-nm{display:flex;align-items:center;gap:var(--space-1);min-width:0;font:var(--type-strong);color:var(--ink)}
.pn-ctp-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--w-strong)}
.pn-ctp-nm b::before{content:'@'}   /* ADULT-062: one colour for the handle */
.pn-ctp-nm .pc-verified{width:var(--icon-s);height:var(--icon-s);margin-left:0}
.pn-ctp-rt{font:var(--type-meta);color:var(--ink-2)}
.pn-ctp-st{font-weight:var(--w-strong);color:var(--ink)}
.pn-ctp-mt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-ctp-mt img{width:var(--icon-s);height:var(--icon-s);border-radius:var(--r-full)}
.pn-ctp-go{grid-area:go;width:var(--icon-m);height:var(--icon-m);color:var(--glyph-off)}
.pn-ctp-go svg{width:var(--icon-m);height:var(--icon-m)}
.pn-ctp-pager{display:grid;justify-items:center;gap:var(--space-3);margin-top:var(--space-8)}
.pn-ctp-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);padding:0;background:none}
.pn-ctp-pages a,.pn-ctp-pages span{display:grid;place-items:center;min-width:var(--control-sm);height:var(--control-sm);padding:0 var(--space-2);border-radius:var(--r-m);font:var(--type-label);color:var(--ink-2);text-decoration:none}
.pn-ctp-pages a:hover{background:var(--surface-2);color:var(--ink)}
.pn-ctp-pages a[aria-current]{background:var(--surface-3);color:var(--ink)}
.pn-ctp-pages .pn-ctp-nx svg{width:var(--icon-s);height:var(--icon-s)}
.pn-ctp-pages span{color:var(--ink-2)}
.pn-ctp-pager small{font:var(--type-cap);color:var(--ink-2)}
.pn-ctp-side{display:grid;gap:var(--stack-gap);margin-top:var(--space-8);align-content:start}
.pn-ctp-how{padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-ctp-how h2{margin:0 0 var(--head-gap);font:var(--type-title);color:var(--ink)}
.pn-ctp-how p{margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-ctp-safe{display:grid;gap:var(--space-2);padding:0;background:none}
.pn-ctp-line{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-ctp-line > svg{flex:none;width:var(--icon-s);height:var(--icon-s);margin-top:1px;color:var(--ink-2)}
.pn-ctp-line--seal > .pc-verified{margin-left:0;color:var(--ink)}
.pn-ctp-line b{font-weight:var(--w-strong);color:var(--ink)}

@media (min-width:960px){
  .pn-ctp{padding:var(--space-5) 0 var(--space-12)}
  .pn-ctp-page{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:var(--space-10);align-items:start}
  .pn-ctp-side{position:sticky;top:calc(var(--sticky-top) + var(--space-3));margin-top:0}
  .pn-ctp-ent{grid-template-columns:40px 120px minmax(0,1fr) 20px;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-2);column-gap:var(--space-4)}
  .pn-ctp-ph{width:120px}
}

/* owner 26.10. ("4 pro Reihe"): the original creators grid in community mode never goes past four a row */
@container pn-gmain (min-width:840px){.pn-disc--cm .pn-discgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the side column narrows the main column under the container step, so the four columns follow the screen width */
@media (min-width:1101px){.pn-disc--cm .pn-discgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* creators audit 27.10. (owner: "ungepflegt und unruhig"), community mode only (.pn-disc--cm):
   the head = the home's h1 over its lede (one column, it read as two heads); the grid over the full width under the
   head | join band — beside the trust column the main column was 655 px, its container step trimmed the cards to a
   three-column count (18 of 20 shown in four columns: a half last row); the trust rows one strip under the grid at the
   page's reading sizes; every card the same dark foot (eight of twenty carried the pink Premium foot) */
.pn-disc--cm .pn-hubhead__b{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.pn-disc--cm .pn-dischead__t h1{font:var(--type-display);letter-spacing:0}   /* the guest hero step (30, phone 24) */
.pn-disc--cm .pn-hubintro{max-width:60ch}
@media (min-width:1000px){
  .pn-split.pn-disc--cm:has(> .pn-split__head){grid-template-areas:"head lead" "main main" "side side"}
  .pn-disc--cm > .pn-split__side{position:static}
  .pn-disc--cm .pn-trust--stack{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}   /* the one trust block (guest.css): four across under the grid */
}
@media (max-width:999px){.pn-split.pn-disc--cm:has(> .pn-split__head){grid-template-areas:"head" "lead" "main" "side"}}
.pn-disc--cm .pc-scard.is-premium .pc-scard__cap::before,.pn-lb--cm .pc-scard.is-premium .pc-scard__cap::before{background:var(--card-cap-scrim)}
/* "How creators work" panel in the creators page's side column (owner 27.10.) */
.pn-cvpanel{display:grid;gap:var(--space-2)}
.pn-cvpanel p{margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-cvpanel__go{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--type-label);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:3px}
/* Community mode (owner 25.10.): her profile (templates/cm_member_post.php) and her reviews page (templates/cm_member_reviews.php)
   for guests, from the mockups design/v2/profile-guest-cm.html and reviews-guest-cm.html. The parts both share with her
   post page live in cmpost.css. Design system P9 (03.11., docs/design-system.md): tokens only, the member area is the source
   of truth; the cover is a plain tonal band (owner 25.10.: never the blur of her picture); avatars are plain discs; and
   THE review card of every guest page is defined here, once (ADULT-044 / 045 / 047 / 080 / 106 / 127 / 128 / 132).
   pn-cpr-* / pn-cmr-* + the shared review card. */

/* ==========================================================================
   The one review card (hub "What her community says", her profile, her reviews page, her post, the cm profile side):
   stars + the one byline on the first line, an optional title, her words at body size, her answer one step up.
   On the page ground = an e0 card (Fläche 1, r-l, panel padding); inside a panel = a Note (Fläche 2, r-m) (+1 step).
   Lists: two columns from 701 where the column is wide (hub, profile), never CSS columns, panels never stretched.
   The prefix body.pc-root.pc-guest out-ranks the member profile's list rules (detail.css) for guests only.
   ========================================================================== */
body.pc-root.pc-guest :is(.pn-dtrevs,.pn-cmr-bubbles,.pn-cpr-bubbles){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);align-items:start;columns:auto;margin:0;padding:0;list-style:none;background:none;border:0;border-radius:0}
@media (min-width:701px){body.pc-root.pc-guest .pn-dtrevs:has(> :nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"stars by" "title title" "body body" "more more" "answer answer";align-items:center;align-content:start;column-gap:var(--space-2);row-gap:0;min-width:0;margin:0;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);box-shadow:none;break-inside:auto}
body.pc-root.pc-guest :is(.pn-cp-proof,.pn-panel) :is(.pn-dtrevs > .pn-review,.pn-cp-bubble){padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > :is(.pn-dtstars,.pn-cp-stars){grid-area:stars;display:inline-block;margin:0;font:var(--type-label);letter-spacing:2px;color:var(--ink)}   /* §2.3: stars filled ink, empty glyph-off */
body.pc-root.pc-guest :is(.pn-dtstars__off,.pn-cp-stars s,.pn-cmr-sum__stars s){color:var(--glyph-off);text-decoration:none}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > .pn-dtrev__by{grid-area:by;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0;margin:0;padding:0;font:var(--type-meta);color:var(--ink-2)}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > .pn-dtrev__by::before{content:"·";color:var(--ink-2)}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > :is(.pn-dtstars,.pn-cp-stars) ~ .pn-dtrev__by{grid-area:by}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > .pn-dtrev__by:first-child{grid-column:1 / -1}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > .pn-dtrev__by:first-child::before{content:none}
body.pc-root.pc-guest .pn-dtrev__by a{color:var(--ink);font-weight:var(--w-regular);text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}   /* ADULT-045: the name a plain ink link */
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > h3{grid-area:title;margin:var(--space-2) 0 0;font:var(--type-strong);letter-spacing:0;color:var(--ink);overflow-wrap:break-word}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > blockquote{grid-area:body;max-width:none;margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink);overflow-wrap:break-word}   /* ADULT-127: the text fills its card */
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > blockquote p{margin:0;font:inherit}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > .pn-dtrevmore{grid-area:more;justify-self:start;margin-top:var(--space-2)}
body.pc-root.pc-guest :is(.pn-dtrevs > .pn-review,.pn-cp-bubble) > .pn-ra-g{grid-area:answer}
/* her answer (owner 03.11., partials/review_answer_guest.php): one tonal step above the card it sits in, no edge */
.pn-ra-g{margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
:is(.pn-cp-proof,.pn-panel) .pn-ra-g{background:var(--surface-3)}
.pn-ra-g b{display:block;font:var(--type-label);color:var(--ink)}
.pn-ra-g p{margin:var(--space-1) 0 0;font:var(--type-body);color:var(--ink);overflow-wrap:break-word}
/* the hub's block: on the content edge, the section gap above it (ADULT-042 / 043) */
.pn-hubquotes{margin-top:var(--section-gap)}
.pn-hubquotes .pc-sechead{margin-bottom:var(--head-gap)}

/* ==========================================================================
   Her profile (cm_member_post.php)
   ========================================================================== */
.pn-cpr{max-width:none;margin:0;padding:var(--space-3) 0 0}   /* ADULT-012: the one 1372 page frame */
.pn-cpr .pn-dtcrumbs,.pn-cpr nav[aria-label]{margin:0 0 var(--space-3)}

/* avatar (ADULT-078): a plain disc, no story ring */
.pn-cpr-av{flex:none;display:block;width:var(--avatar-l);height:var(--avatar-l);padding:0;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.pn-cpr-av > span,.pn-cpr-av > img{display:grid;place-items:center;width:100%;height:100%;border:0;border-radius:var(--r-full);background:var(--surface-2);font:var(--type-title);color:var(--ink);object-fit:cover}
.pn-cp-mini .pn-cpr-av{width:var(--avatar-s);height:var(--avatar-s)}

/* profile head: a plain tonal cover band (owner 25.10.), the avatar seated on its edge */
.pn-cpr-head{position:relative;margin-top:var(--space-3);padding-bottom:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.pn-cpr-cover{height:112px;background:var(--surface-2)}
.pn-cpr-head__body{display:grid;gap:var(--space-3);padding:0 var(--panel-pad)}
.pn-cpr-av--xl{position:relative;width:var(--avatar-2xl);height:var(--avatar-2xl);margin-top:-48px;box-shadow:0 0 0 4px var(--surface)}
.pn-cpr-av--xl > span,.pn-cpr-av--xl > img{font:var(--type-display)}
.pn-cpr-kick{margin:0 0 var(--space-1);font:var(--type-label);color:var(--ink-2)}
.pn-cpr-head h1{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-h1);letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.pn-cpr-head h1 .pc-verified{width:var(--icon-m);height:var(--icon-m);margin-left:0}
.pn-cpr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin-top:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-cpr-st{font-weight:var(--w-strong);color:var(--ink);text-decoration:none}
.pn-cpr-st:hover{text-decoration:underline}
.pn-cpr-meta i{font-style:normal;color:var(--ink-2)}
.pn-cpr-social{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin-top:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-cpr-social span{display:inline-flex;align-items:center;gap:var(--space-2)}
.pn-cpr-social svg{width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.pn-cpr-social b{font-weight:var(--w-strong);color:var(--ink)}
.pn-cpr-head__acts{display:flex;align-items:center;gap:var(--space-3)}
.pn-cpr-head__acts .pn-cp-btn{flex:1 1 auto;min-width:0}
.pn-cpr-head__acts .pn-cp-follow{flex:none;min-height:var(--control-md);margin-left:0}
.pn-cpr-deal-row{padding:0 var(--panel-pad)}
.pn-cpr-deal-row .pn-cp-deal{margin:var(--space-3) 0 0}

/* below the head */
.pn-cpr-grid{display:grid;gap:0;margin-top:var(--space-2)}
.pn-cpr-main,.pn-cpr-side{display:block;min-width:0}
.pn-cpr-about{margin-top:var(--space-8)}
.pn-cpr-sec-h,:is(.pn-cp-proof__h,.pn-cp-rail__h,.pn-cpr-rail__h,.pn-cmr-list__h) h2{margin:0;font:var(--type-title);letter-spacing:0;color:var(--ink)}
.pn-cpr-about .pn-cp-hand{margin:var(--space-3) 0 var(--space-2)}
.pn-cpr-story.is-clamped{max-height:calc(var(--lh-prose) * 6)}
.pn-cpr-about > .pn-cp-more{margin-top:var(--space-1)}
.pn-cpr-iv{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) 0 0;font:var(--type-label);color:var(--ink-2)}   /* her interview (owner 27.10.) */
.pn-cpr-iv a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:3px}

/* her posts */
.pn-cpr-posts{display:grid;gap:var(--head-gap);margin-top:var(--space-8)}
.pn-cpr-rail__h{display:flex;align-items:baseline;gap:var(--space-3)}
.pn-cpr-n{margin-left:auto;font:var(--type-meta);color:var(--ink-2)}
.pn-cpr-teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.pn-cpr-lockpic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:100%;aspect-ratio:3/4;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);text-align:center}
.pn-cpr-lockpic svg{width:var(--icon-l);height:var(--icon-l);color:var(--ink)}
.pn-cpr-lockpic b,.pn-cpr-lockpic small{display:block}
.pn-cpr-lockpic b{font:var(--type-strong);color:var(--ink)}
.pn-cpr-lockpic small{font:var(--type-meta);color:var(--ink-2)}
.pn-cpr-photos{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--r-l);background:var(--surface)}
.pn-cpr-photos > svg{width:var(--icon-m);height:var(--icon-m);color:var(--ink-2)}
.pn-cpr-photos span{font:var(--type-body);color:var(--ink-2)}
.pn-cpr-photos b{color:var(--ink)}
.pn-cpr-photos a{margin-left:auto;white-space:nowrap;font:var(--type-label);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:3px}

/* ==========================================================================
   Her reviews page (cm_member_reviews.php): the summary rides along on the left, the list of review cards on the right
   ========================================================================== */
.pn-cmr-who{display:flex;align-items:center;gap:var(--space-3)}
.pn-cmr-av{width:var(--avatar-xl);height:var(--avatar-xl)}
.pn-cmr-av > span,.pn-cmr-av > img{font:var(--type-h1)}
.pn-cmr-who h1{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-h1);letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.pn-cmr-who h1 .pc-verified{width:var(--icon-m);height:var(--icon-m);margin-left:0}
.pn-cmr-who .pn-cpr-meta{margin-top:var(--space-1)}
.pn-cmr-head{display:grid;gap:var(--space-4);margin-top:var(--space-3)}
.pn-cmr-sum{display:grid;justify-items:start;gap:var(--space-1);max-width:var(--rail-w);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-cmr-sum b{font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}   /* ADULT-129: the h1 step, not 44 */
.pn-cmr-sum__stars{font:var(--type-label);letter-spacing:2px;color:var(--ink)}
.pn-cmr-sum small{font:var(--type-meta);color:var(--ink-2)}
.pn-cmr-toprof{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);font:var(--type-label);text-decoration:none;justify-self:start}   /* ADULT-130: the member back chip, not a pink link */
.pn-cmr-toprof:hover{background:var(--surface-3)}
.pn-cmr-toprof svg{width:var(--icon-s);height:var(--icon-s)}
.pn-cmr-list{margin-top:var(--space-8)}
.pn-cmr-list__h{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--head-gap)}
.pn-cmr-list__h span{margin-left:auto;white-space:nowrap;font:var(--type-meta);color:var(--ink-2)}
.pn-cmr-pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-top:var(--space-6)}
.pn-cmr-pager a,.pn-cmr-pager span{display:inline-grid;place-items:center;min-width:var(--control-sm);height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--r-m);font:var(--type-label);color:var(--ink-2);text-decoration:none}
.pn-cmr-pager a:hover{background:var(--surface-2);color:var(--ink)}
.pn-cmr-pager span[aria-current]{background:var(--surface-3);color:var(--ink)}   /* never pink */
.pn-cmr-pager .pn-cmr-next{margin-left:auto}
.pn-cmr-safe{margin-top:var(--space-6)}

@media (min-width:960px){
  .pn-cpr{padding-top:var(--space-5)}
  .pn-cpr-cover{height:160px}
  .pn-cpr-head__body{display:flex;align-items:flex-end;gap:var(--space-5)}
  .pn-cpr-av--xl{margin-top:-48px}
  .pn-cpr-head__id{min-width:0}
  .pn-cpr-head__acts{margin-left:auto}
  .pn-cpr-head__acts .pn-cp-btn{flex:0 0 auto;width:auto}
  .pn-cpr-deal-row{display:flex;justify-content:flex-end}
  .pn-cpr-deal-row .pn-cp-deal{max-width:46ch;text-align:right}
  .pn-cpr-grid{grid-template-columns:minmax(0,1fr) var(--rail-w);gap:var(--space-12);align-items:start;margin-top:0}
  .pn-cpr-side{position:sticky;top:calc(var(--sticky-top) + var(--space-3))}
  .pn-cpr-teasers{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
  .pn-cpr-side .pn-cp-proof{margin-top:var(--space-8)}
  /* ADULT-126: the side (summary, back chip, checks) rides along beside the list */
  .pn-cmr-grid{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--space-12);align-items:start}
  .pn-cmr-side{grid-column:1;grid-row:1;position:sticky;top:calc(var(--sticky-top) + var(--space-3))}
  .pn-cmr-list{grid-column:2;grid-row:1 / span 2;margin-top:var(--space-3)}
  .pn-cmr-safe{grid-column:1;grid-row:2;margin-top:var(--space-4)}
}
@media (max-width:959px){.pn-cpr-deal-row{text-align:left}}
@media (max-width:700px){:is(.pn-cp,.pn-cpr) :is(.pn-dtcrumbs,nav[aria-label]) li:last-child{display:none}}
.pn-cp,.pn-cpr{padding-bottom:0}
.pn-cmr-toprof:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* ==========================================================================
   wish (owner 05.10., lib/wish.php): the buyer wizard's last step, the done screen, the request card in the chat, the
   buyers-hub rail, Matches and the dashboard card. Tokens only; dark theme first (the default). After chat + join +
   wizard in the cascade: the card is the order card's panel (.pn-order), the form reuses the join panel and the wizard dock.
   ========================================================================== */

/* ---------- the form (join shell panel + /account/wish/) ---------- */
.pn-wishpanel{max-width:640px}
.pn-wishbox.pn-panel{padding:var(--panel-pad)}
.pn-wishform{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);min-width:0}   /* 06.10.: the one column never grows past the panel (fr/it/pt chip rows pushed it to 409 px at 390) */
.pn-wishfield{margin:0;padding:0;border:0;min-width:0}
.pn-wishlegend{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3);margin:0 0 var(--label-gap,var(--space-2));padding:0;width:100%;font:var(--type-label);color:var(--ink)}
.pn-wishlegend > small{font:var(--type-meta);color:var(--ink-2)}
.pn-wishchips{gap:var(--space-2)}
.pn-wishchip{min-height:var(--control-sm);padding:0 var(--space-3);border:0;background:var(--surface-2);color:var(--ink);font:var(--type-label);cursor:pointer;user-select:none}   /* ux pass 05.10.: 44 px tap targets */
.pn-wishchip .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.pn-wishchip:hover{background:var(--surface-3)}
.pn-wishchip:has(input:checked){background:var(--accent-soft);color:var(--ink)}
.pn-wishchip:has(input:checked) .pc-ico{color:var(--ink)}
.pn-wishchip:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
/* MCT-166: the budget chips sit in the same two-up grid on phones, never one ragged chip per line */
@media (max-width:480px){.pn-wishchips--budget{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pn-wishchips--budget .pn-wishchip{justify-content:center;white-space:normal;text-align:center}}
.pn-wishfield.is-error .pn-wishchips{padding:var(--space-2);margin:calc(-1 * var(--space-2));border-radius:var(--r-m);box-shadow:inset 0 0 0 2px var(--danger)}
.pn-wishtext{min-height:132px;resize:vertical}
.pn-wishcount{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-wishcount.is-ok{color:var(--ink-2);font-weight:var(--w-strong)}
.pn-wishcount.is-ok::before{content:"✓ "}
.pn-wishtoggles{display:grid;gap:var(--space-1)}
.pn-wishtoggle{display:flex;gap:var(--space-3);align-items:center;min-height:var(--tap);padding:var(--space-2) 0;font:var(--type-body);color:var(--ink);cursor:pointer}
.pn-wishtoggle .pc-check{margin:0}
/* my wish to new sellers (owner 02.11., lib/wish_ns.php, decision C): "Send new members my wish", preselected, with its plain line */
.pn-wnsfield{margin:0}
.pn-wnsrow{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap);padding:var(--space-2) 0;cursor:pointer}
.pn-wnsrow .pc-check{flex:none;margin:2px 0 0}
.pn-wnsrow__t{display:grid;gap:var(--space-1);min-width:0}
.pn-wnsrow__t b{font:var(--type-strong);color:var(--ink)}
.pn-wnsrow__t small{font:var(--type-meta);color:var(--ink-2)}
.pn-wishform .pn-fielderr{display:flex;align-items:flex-start;gap:var(--space-1);margin:var(--space-2) 0 0;font:var(--type-label);color:var(--danger);text-align:left}   /* ux pass 05.10.: never the wizard's centred error line */
.pn-wishform .pc-field.is-error .pc-help{color:var(--ink-2)}   /* ux pass 05.10.: the error line says it; the help stays quiet (one red line per field) */
.pn-wishform .pn-fielderr[hidden]{display:none}
.pn-wishform .pn-fielderr .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);margin-top:1px}
.pn-wishform .pc-help{margin:var(--help-gap,var(--space-1)) 0 0}
/* One short screen: the dock sits at the end of the form (never sticky over the extras), the kit's two-button row. */
.pn-wishdock{position:static;margin:var(--space-2) 0 0;padding:0 0 env(safe-area-inset-bottom);background:none;border-top:0}
.pn-wishdock .pn-dock__row{flex-wrap:wrap-reverse}.pn-wishdock .pn-dock__row .pc-btn{flex:1 1 auto;min-width:0}   /* 06.10.: side by side while both labels fit, else the main button on top and Back under it (fr/it/pt labels ran out of the button) */
.pn-wishdock .pn-dock__skip{flex:0 0 auto}
.pn-wishdock .pc-btn{min-height:var(--control-md)}   /* MCT-164: the house height (was the 48 lg key) */
.pn-wishdock .pn-fixcount{margin:0 0 var(--space-2);text-align:center;color:var(--danger);font:var(--type-label)}
.pn-wishdock .pn-fixcount[hidden],.pn-wishdock .pn-formerr[hidden]{display:none}
.pn-wishdock .pn-formerr{margin:0 0 var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:var(--danger);font:var(--type-label);text-align:center}
.pn-wishcta{white-space:nowrap}
.pn-wishcta.is-busy{opacity:.7}
@media (max-width:420px){.pn-wishdock .pn-wishcta .pc-ico{display:none}}   /* phone: the label on one line, no arrow */
.pn-wishpage .pn-wishbox{max-width:640px;margin-inline:auto}
.pn-wishpage > .pn-apphead,.pn-wishpage > .pc-alert{max-width:640px;margin-inline:auto}
.pn-wishwithdraw__go{margin:0 0 var(--space-3);font:var(--type-meta)}   /* UX 433 B-114: a quiet line link above the form (was the panel's foot, a danger key) */
.pn-wishwithdraw__go a{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-sm);color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.pn-wishwithdraw__go .pc-ico{width:var(--icon-s);height:var(--icon-s)}

/* ---------- done: "You now follow N sellers who sell what you want" ---------- */
.pn-wishdone{display:grid;gap:var(--space-4);justify-items:start;text-align:left}
.pn-wishdone__sticker{transform:none}
.pn-wishdone__h{margin:0;text-wrap:balance;max-width:16ch}
.pn-wishdone__h:focus:not(:focus-visible){outline:0}
.pn-wishdone__p{max-width:44ch}
.pn-wishdone__hand.pc-hand{display:none}
.pn-wishfaces{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:var(--space-1) 0 0;padding:0 0 0 var(--space-3);list-style:none}   /* ux pass 05.10.: one row, the "+N" never drops under the faces */
.pn-wishfaces > li{margin-left:calc(-1 * var(--space-3));flex:none}
@media (max-width:420px){.pn-wishfaces{padding-left:var(--space-4)}.pn-wishfaces > li{margin-left:calc(-1 * var(--space-4))}}   /* phone: eight faces + "+N" inside the panel */
.pn-wishfaces .pc-avatar{box-shadow:0 0 0 2px var(--surface)}
.pn-wishfaces__more{display:inline-grid;place-items:center;width:var(--avatar-m);height:var(--avatar-m);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2);font:var(--type-cap);box-shadow:0 0 0 2px var(--surface)}
.pn-wishfaces > li.pn-wishfaces__more{margin-left:var(--space-1)}   /* the count stands beside the row, never under the last face */
.pn-wishdone__acts{display:grid;gap:var(--space-2);width:100%;max-width:420px;margin-top:var(--space-2)}

/* ---------- the request card in the thread: the order card's panel in the thread column; its label a quiet badge (surface 2 +
   ink, MCT-075), chips 13/18 600 on surface 2 (MCT-072), keys 44 and full width on phones (MCT-079) ---------- */
.pn-msg--wish{align-items:center}
/* MCT-073: his first wish (in / out) sits in the same centred column as every card (inside.css drew 90 % / 480, off-centre) */
.pn-msgs .pn-msg--wish.pn-msg--wishfirst:is(.pn-msg--in,.pn-msg--out){align-items:center}
.pn-msgs .pn-msg--wishfirst .pn-wishcard{width:var(--thread-col,min(100%,560px))}
.pn-wishcard{width:var(--thread-col,min(100%,560px));gap:var(--space-3)}
.pn-wishcard .pn-order__over .pc-badge--accent .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink)}
.pn-wishcard__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-wishcard .pn-wishcard__chip{min-height:var(--control-sm);padding:0 var(--space-3);background:var(--surface-2);color:var(--ink);font:var(--type-label);cursor:default}
.pn-wishcard__chip .pc-ico,.pn-wishsum .pc-chip .pc-ico,.pn-wishstat .pc-chip .pc-ico,.pn-wishtile .pc-chip .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-wishcard__text{margin:0;font:var(--type-body);color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.pn-wishcard__extras .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.pn-wishcard__acts{display:flex;gap:var(--space-2);flex-wrap:wrap}
.pn-wishcard__acts .pc-btn{min-width:120px;min-height:var(--control-md)}
@media (max-width:700px){.pn-wishcard__acts{flex-direction:column;align-items:stretch}.pn-wishcard__acts > *{width:100%}}
/* MCT-133: with the paybar docked under the log, the cards' grey "Reply with Premium" keys step back — the bar's pink key is
   the view's one paygate key */
.pn-chatpage:has(> .pn-paybar:not(.is-echo)) .pn-cardgate{display:none}

/* ---------- the buyers hub rail (one tonal tile per wish; ux pass 05.10.: no hairline grid, owner rule) ---------- */
/* A4 (owner 18.10., innen-50): the wishes are rows of the panel, not cards inside a card — every second row one tonal step
   darker, the first and last rows rounded with the panel */
.pn-wishrail__list{display:grid;gap:0;margin:0;padding:0 0 var(--space-2);list-style:none}
.pn-wishtile{display:grid;gap:var(--space-2);padding:var(--space-4) var(--row-inset);border-radius:0;background:transparent}
.pn-wishtile:nth-child(even){background:var(--surface-2)}
.pn-wishtile:last-child{border-radius:0 0 var(--r-l) var(--r-l)}
.pn-wishtile__who{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-wishtile__name{font:var(--type-strong);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
a.pn-wishtile__name:hover{text-decoration:underline;text-underline-offset:3px}
.pn-wishtile__when{margin-left:auto;flex:none;font:var(--type-cap);color:var(--ink-2)}
.pn-wishtile__text{margin:0;font:var(--type-body);color:var(--ink);overflow-wrap:anywhere}
.pn-wishtile__extras{display:flex;align-items:center;gap:var(--space-1);margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-wishtile__extras .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.pn-wishtile__acts{display:flex;justify-content:flex-end}
.pn-wishtile__acts form{margin:0}
.pn-wishtile__acts .pc-btn{min-height:var(--control-sm)}

/* ---------- Matches ---------- */
.pn-wishsum{display:grid;gap:var(--space-3)}
.pn-wishsum__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);min-width:0}
.pn-wishsum__head > .pc-btn{flex:none;white-space:nowrap}   /* the small edit key keeps one line (es "Editar deseo" wrapped to 47 px; N4 #82) */
.pn-wishsum__head h2,.pn-wishstat__head h2{display:flex;align-items:center;gap:var(--space-2);margin:0}
.pn-wishsum__head h2 .pc-ico,.pn-wishstat__head h2 .pc-ico{width:var(--icon-m);height:var(--icon-m);color:var(--ink-2)}
.pn-wishsum__line,.pn-wishstat__line{margin:var(--space-1) 0 0;font:var(--type-label);color:var(--ink-2)}
.pn-wishsum .pc-chip,.pn-wishstat .pc-chip{cursor:default;background:var(--surface-2)}   /* ux pass 05.10.: a chip on paper keeps its pill in the light theme too */
.pn-wishtile .pc-chip{background:var(--surface-3);cursor:default}
.pn-wishsum__extra{background:var(--surface-2);color:var(--ink-2)}
.pn-wishsum__text,.pn-wishstat__text{margin:0;font:var(--type-body);color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.pn-matches .pn-wishsum{margin-bottom:var(--section-gap)}
.pn-matchgrid{align-items:start}
.pn-match{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);min-width:0}   /* the cell, never the foot's max-content, sizes the column */
.pn-match > .pc-scard{width:100%;max-width:none}   /* the portrait fills its grid cell (the grid rule targets direct children only) */
/* ux pass 05.10.: one full-width key under every portrait, the same row height on every card; "Read her reply" in pink ink. */
.pn-match__foot{display:grid;min-width:0}
.pn-match__foot form{margin:0;display:grid}
.pn-match__key{min-height:var(--control-md);padding-inline:var(--space-3);white-space:normal;text-align:center}
/* @member-only */
/* A10 (owner 18.10.): no wine-red reply style any more; "Top rated" on the photo is a tonal pill, not a cream sticker */
.pn-match .pc-scard__foot > .pc-scard__top{background:var(--glass);color:var(--ink)}
/* UX 433 S-091 (switch ux433_chat): an order request's "Accept with Premium" stays on its card beside the free "Decline" */
.pn-chatpage:has(> .pn-paybar:not(.is-echo)) .pn-cardgate.pn-cardgate--keep{display:inline-flex}
.pn-wishcard__teaser .pc-ico{width:var(--icon-s);height:var(--icon-s);margin-right:var(--space-1);vertical-align:-3px;color:var(--ink-2)}
/* UX 433 B-098 / G-043: his own wish in a chat — one tonal line that opens on tap (no edges, no keys) */
.pn-wishline{width:var(--thread-col,min(100%,560px));border-radius:var(--r-l);background:var(--surface-2);color:var(--ink)}
.pn-msg--wishfirst .pn-wishline{margin-left:auto}
.pn-wishline__sum{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-4);font:var(--type-label);cursor:pointer;list-style:none}
.pn-wishline__sum::-webkit-details-marker{display:none}
.pn-wishline__sum:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-l)}
.pn-wishline__sum .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
.pn-wishline__k{flex:none;font-weight:600}
.pn-wishline__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.pn-wishline__chev{margin-left:auto;color:var(--ink-2);transition:transform .15s}
.pn-wishline[open] .pn-wishline__chev{transform:rotate(180deg)}
.pn-wishline__body{display:grid;gap:var(--space-2);padding:0 var(--space-4) var(--space-4)}
.pn-wishline__extras,.pn-wishline__time{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-wishline__extras .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-wishline__time a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-wishdone__fa{margin:0}
.pn-wishchip__fx{display:block;font:var(--type-cap);color:var(--ink-2)}   /* UX 433 B-111 */
.pn-wishchip:has(.pn-wishchip__fx){min-height:var(--control-md);padding-block:var(--space-1);line-height:1.2}
@media (max-width:700px){.pn-wishcard__acts > form > .pc-btn{width:100%}}
/* @end-member-only */

/* ---------- the dashboard card ---------- */
.pn-wishstat{display:grid;gap:var(--space-3)}
.pn-wishstat__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.pn-wishstat--empty .pc-btn{justify-self:start}
/* Verkäufe 500 NACH-006 (switch wish_card_home): the wish card on the buyer home — the step's chip rows in one surface */
.pn-wishhome{display:grid;gap:var(--space-3);margin:0 0 var(--space-4);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-wishhome__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
.pn-wishhome__head form{margin:0}
.pn-wishhome__h{margin:0;font:var(--type-title);color:var(--ink);text-wrap:balance}
.pn-wishhome__p{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-wishhome__form{display:grid;gap:var(--space-3)}
.pn-wishhome__row{margin:0;padding:0;border:0;min-width:0}
.pn-wishhome__row .pc-label{margin:0 0 var(--label-gap,var(--space-2))}
.pn-wishhome__row .pn-wishchip{min-height:var(--control-sm);padding:0 var(--space-3)}
.pn-wishhome__send{justify-self:start}

/* @member-only */
/* ---------- wish 200 (owner 03.11.) ---------- */
/* wish 200 WB-05 / WB-08 (owner 03.11.): on phones Send stays in view — the dock sticks to the bottom on the panel surface it sits in
   (no edge: tonal surfaces), above the app's tab bar where there is one; Skip is a quiet text key under Send (44 px to tap). */
@media (max-width:600px){
  .pn-wishdock{position:sticky;bottom:0;z-index:var(--z-bar);padding:var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface, var(--bg))}
  body:has(.pn-tabbar) .pn-wishdock{bottom:calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom));padding-bottom:var(--space-3)}
}
.pn-wishskip{display:block;min-height:var(--tap);margin:var(--space-1) auto 0;padding:var(--space-3) var(--space-4);border:0;background:none;color:var(--ink-2);font:var(--type-strong);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-wishskip:hover{color:var(--ink)}
.pn-wishskip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}
/* point 2: his wish's honest state under the summary line */
.pn-wishstat__active,.pn-wishsum__active{margin:var(--space-1) 0 0}
/* point 12 (WS-18): a seller's in-page notice of a new buyer wish — the kit's toast pill as a link into his chat; it fades by
   itself (no script), with reduced motion it leaves without moving */
.pn-wishtoast{gap:var(--space-2);width:max-content;max-width:calc(100vw - var(--space-8));text-align:left;text-decoration:none;animation:pnWishToast 12s ease forwards}
.pn-wishtoast .pc-ico{flex:none;color:var(--ink)}
.pn-wishtoast__t{min-width:0}
.pn-wishtoast__t small{font-weight:var(--w-regular);color:var(--ink-2)}
.pn-wishtoast__go{flex:none;color:var(--ink);font:var(--type-label);text-decoration:underline;text-underline-offset:3px}
.pn-wishtoast:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@keyframes pnWishToast{0%{opacity:0;transform:translate(-50%,12px)}4%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,12px);visibility:hidden}}
@keyframes pnWishToastStill{0%,99%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.pn-wishtoast{animation:pnWishToastStill 12s steps(1,end) forwards}}
/* @end-member-only */

/* PM 500 kaeufer wish (08.11., templates/partials/wish_form.php): KF-104 the no-contact line over his text, KF-035 / KF-111 the
   tap-to-add sentences (shown by wish.js), KF-035 "Don't know yet" as the budget's last chip */
.pn-kfwish-nocontact{display:flex;gap:var(--space-1);align-items:flex-start;margin:0 0 var(--space-1)}
.pn-kfwish-nocontact svg{flex:none;margin-top:3px}
.pn-kfwish-ex{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}
.pn-kfwish-ex[hidden]{display:none}
.pn-kfwish-ex>.pc-help{flex-basis:100%;margin:0}
.pn-kfwish-exchip{height:auto;min-height:var(--control-sm,32px);padding-block:var(--space-1);white-space:normal;text-align:left;line-height:1.3;cursor:pointer}
.pn-kfwish-exchip:disabled{opacity:.45;cursor:default}
.pn-wishchips--budget .pn-kfwish-dunno{grid-column:1 / -1}
/* Direct order wizard /order/ (owner 06.10., docs/direct-order-06-10.md). A literal port of the approved mockup
   design/v2/direct-order-wizard.html: the same boxes, sizes and motion, class by class (.wz → .pn-do, .tile →
   .pn-do-tile …), its literal colours and fonts replaced by the tokens they are. The page is always dark
   (templates/direct_order.php sets data-theme="dark"; a member's wizard is .pn-do.pc-root, design system P4). */
.pn-dobody{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:var(--type-body);-webkit-font-smoothing:antialiased}
html:has(> .pn-dobody){background:var(--canvas)}
.pn-do, .pn-do *{box-sizing:border-box}
.pn-do button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pn-do{position:relative;min-height:100vh;padding-bottom:108px;overflow:clip;background:var(--bg);color:var(--ink)}
.pn-do::before{content:none}
.pn-do-top{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);background:var(--bg)}
.pn-do-back{position:relative;width:var(--control-md);height:var(--control-md);border-radius:var(--r-full);border:0;background:var(--surface-2);color:var(--ink);display:grid;place-items:center}
.pn-do-back::after{content:none}   /* UX polish E UX-063: a 44 px hit area, the 40 px disc unchanged */
.pn-do-back[disabled]{opacity:0;pointer-events:none}
.pn-do-back svg{width:var(--icon-m);height:var(--icon-m)}
/* UX 17.10. #8: back and close share one 44 px slot; close shows only while the back is off (step 1, the end) */
.pn-do-nav{display:grid;width:var(--control-md);height:var(--control-md)}
.pn-do-nav > *{grid-area:1/1}
.pn-do-close{color:var(--ink);text-decoration:none}
.pn-do-close[hidden]{display:none}
.pn-do-logo{font:400 24px/1 var(--display-lc);letter-spacing:.4px;color:var(--ink);text-decoration:none}
.pn-do-logo i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:2px}
.pn-do-free{min-width:var(--control-md);justify-content:center}   /* UX polish E UX-063: "Free" is the kit label (.pc-badge), not loose 11.5 px text; it still balances the 40 px close key so the logo stays centred */
.pn-do-bar{height:4px;background:var(--surface-2)}
.pn-do-bar i{display:block;height:100%;width:12%;background:var(--accent);transition:width .3s ease-out}
.pn-do-stage{position:relative;max-width:520px;margin:0 auto;padding:var(--space-6) var(--space-4) 0}
.pn-do-screen{animation:pn-do-in .26s ease-out both}
.pn-do-screen.is-out{animation:pn-do-out .2s ease-in both}
@keyframes pn-do-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pn-do-out{to{opacity:0;transform:translateX(-24px)}}
.pn-do-kicker{margin:0 0 var(--space-3);font:var(--type-label);color:var(--ink-2)}
.pn-do-q{margin:0;font:var(--type-display);letter-spacing:var(--tr-h,-.01em);overflow-wrap:break-word;outline:0}
.pn-do-q mark{background:none;color:inherit;padding:0}
.pn-do-aside{display:none}
.pn-do-sub{margin:var(--space-3) 0 0;font:var(--type-body);color:var(--ink-2)}
.pn-do-sub b{color:var(--ink)}
.pn-do-opts{margin:var(--space-6) 0 0}
.pn-do-tiles{display:grid;gap:var(--space-2)}
.pn-do-tile{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:72px;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-align:left;transition:background var(--dur-1)}
.pn-do-tile:active,.pn-do-chip:active,.pn-do-rung:active{transform:none}
.pn-do-tile b{display:block;font:var(--type-strong);color:var(--ink)}
.pn-do-tile small{display:block;margin-top:var(--space-1);font:var(--type-meta);color:var(--ink-2)}
.pn-do-tile i{flex:none;width:24px;height:24px;border-radius:var(--r-full);box-shadow:inset 0 0 0 2px var(--ink-3);display:grid;place-items:center;color:transparent}
.pn-do-tile i svg{width:var(--icon-s);height:var(--icon-s)}
.pn-do-tile.is-on{background:var(--surface-3);color:var(--ink)}
.pn-do-tile.is-on b{color:var(--ink)}
.pn-do-tile.is-on small{color:var(--ink-2)}
.pn-do-tile.is-on i{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.pn-do-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-do-chip{min-height:var(--control-md);padding:0 var(--space-4);border-radius:var(--r-m);border:0;background:var(--surface-2);color:var(--ink);font:var(--type-label);transition:background var(--dur-1)}
.pn-do-chip.is-on{background:var(--accent-soft);color:var(--ink)}
.pn-do-chip--ghost{background:transparent;color:var(--ink-2)}
.pn-do-chip--ghost.is-on{background:var(--accent-soft);color:var(--ink)}
.pn-do-chip--big{min-height:var(--control-md);padding:0 var(--space-4);font:var(--type-strong)}
.pn-do-ladder{position:relative;display:grid;gap:var(--space-2);padding-left:var(--space-4)}
.pn-do-ladder::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r-full);background:var(--surface-2)}
.pn-do-ladder::after{content:"";position:absolute;left:0;top:0;width:4px;border-radius:var(--r-full);height:calc(var(--do-fill, 0) * 1%);background:var(--accent);transition:height .26s ease-out}
.pn-do-rung{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:0 var(--space-4);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink-2);text-align:left;transition:transform .12s,background .14s,color .14s}
.pn-do .pn-do-rung{color:var(--ink-2)}
.pn-do-rung b{font:var(--type-strong)}
.pn-do-rung span{font:var(--type-meta);text-align:right;max-width:46%}
.pn-do-rung:nth-child(1){min-height:64px}
.pn-do-rung:nth-child(2){min-height:72px}
.pn-do-rung:nth-child(2) b{font:var(--type-strong)}
.pn-do-rung:nth-child(3){min-height:80px}
.pn-do-rung:nth-child(3) b{font:var(--type-title)}
.pn-do-rung:nth-child(4){min-height:88px}
.pn-do-rung:nth-child(4) b{font:var(--type-title)}
.pn-do .pn-do-rung.is-lit:nth-child(1){background:var(--surface-3);color:var(--ink)}
.pn-do .pn-do-rung.is-lit:nth-child(2){background:var(--surface-3);color:var(--ink)}
.pn-do .pn-do-rung.is-lit:nth-child(3){background:var(--surface-3);color:var(--ink)}
.pn-do .pn-do-rung.is-lit:nth-child(4){background:var(--surface-3);color:var(--ink)}
.pn-do-step{display:flex;align-items:center;justify-content:center;gap:var(--space-6);margin:var(--space-2) 0 var(--space-1)}
.pn-do-step button{width:var(--header-key);height:var(--header-key);border-radius:var(--r-full);border:0;background:var(--surface-2);color:var(--ink);font:var(--type-h1)}
.pn-do-step b{min-width:150px;text-align:center;font:var(--type-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-do-unit{display:block;text-align:center;margin:0 0 var(--space-5);font:var(--type-cap);letter-spacing:0;color:var(--ink-2)}
.pn-do-chips--center{justify-content:center}
.pn-do-tools{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-4)}
.pn-do-tool{min-height:var(--control-sm);padding:0 var(--space-4);border-radius:var(--r-m);border:0;background:transparent;color:var(--ink);font:var(--type-label)}
.pn-do-tool--main{background:var(--surface-2)}
.pn-do-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-4)}
.pn-do-card{position:relative;display:block;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;background:var(--surface);aspect-ratio:3/4;text-align:left;outline:2px solid transparent;outline-offset:-2px;transition:outline-color var(--dur-1)}
.pn-do-card:active{transform:none}
.pn-do-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-do-card::after{content:"";position:absolute;inset:0;background:var(--scard-cap-shade,var(--do-card-shade))}
.pn-do-card.is-on{outline-color:var(--accent)}
.pn-do-card.is-on img{filter:none}
.pn-do-card--ph{background:var(--ph-media)}
.pn-do-card--ph::after{content:none}
.pn-do-pick{position:absolute;z-index:1;top:var(--space-2);right:var(--space-2);width:var(--control-sm);height:var(--control-sm);border-radius:var(--r-full);display:grid;place-items:center;background:var(--glass);color:transparent;transition:background var(--dur-1),color var(--dur-1)}
.pn-do-pick svg{width:var(--icon-m);height:var(--icon-m)}
.pn-do-card.is-on .pn-do-pick{background:var(--accent);color:var(--on-accent)}
@keyframes pn-do-pop{from{transform:scale(.6)}to{transform:scale(1)}}
.pn-do-foot{position:absolute;z-index:1;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);color:var(--ink)}
.pn-do-foot strong{display:block;font:var(--type-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-do-foot em{font:var(--type-meta);font-style:normal;color:var(--ink-2)}
.pn-do-badge{position:absolute;z-index:1;top:var(--space-2);left:var(--space-2);display:inline-block;max-width:calc(100% - 56px);white-space:normal;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass);font:var(--type-cap);color:var(--ink)}   /* night N8 #61: a long label (fr "En ligne récemment") wraps to two lines instead of being cut at the card edge */
.pn-do-badge i{display:inline-block;vertical-align:1px;margin-right:var(--space-1);width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.pn-do-badge b{font-weight:var(--w-strong)}
.pn-do-badge--f{background:var(--glass);color:var(--ink)}
.pn-do-badge--f i{background:var(--accent)}
.pn-do-badge--t1 i{background:var(--success)}
.pn-do-badge--t1 b{color:var(--ink)}
.pn-do-badge--t2 i{background:var(--accent)}
.pn-do-badge--t2 b{color:var(--ink)}
.pn-do-badge--t3 i{background:var(--warning)}
.pn-do-badge--t3 b{color:var(--ink)}
.pn-do-note{margin:var(--space-4) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-do-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-do-err{margin:var(--space-3) 0 0;font:var(--type-label);color:var(--danger)}
.pn-do-err a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-do-order{padding:var(--space-4);border-radius:var(--r-l);background:var(--surface)}
.pn-do-order__k{margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-do-order__l{margin:var(--space-3) 0 0;font:var(--type-title)}
.pn-do-order__l small{display:block;margin-top:var(--space-1);font:var(--type-body);color:var(--ink-2)}
.pn-do-order__m{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:var(--space-4) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-do-order__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 0}
.pn-do-faces{display:flex}
.pn-do-faces img{width:var(--avatar-s);height:var(--avatar-s);border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface);margin-left:calc(-1 * var(--space-2));background:var(--surface-2)}
.pn-do-faces img:first-child{margin-left:0}
.pn-do-faces span{display:grid;place-items:center;min-width:var(--avatar-s);height:var(--avatar-s);padding:0 var(--space-2);margin-left:calc(-1 * var(--space-2));border-radius:var(--r-full);background:var(--surface-2);box-shadow:0 0 0 2px var(--surface);font:var(--type-cap);color:var(--ink)}
.pn-do-label{display:block;margin:var(--space-6) 0 var(--label-gap,var(--space-2));font:var(--type-label);color:var(--ink)}
.pn-do-in{width:100%;height:var(--control-md);padding:0 var(--space-3);border-radius:var(--r-m);border:0;background:var(--surface-2);color:var(--ink);font:var(--type-ui)}
.pn-do-in:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-do-in::placeholder{color:var(--ink-3)}
.pn-do-in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-do-fine{display:flex;gap:var(--space-2);align-items:flex-start;margin:var(--space-4) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-do-fine input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:0}
.pn-do-fine a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-do-state{display:grid;gap:var(--space-2);margin:var(--space-4) 0 0}
.pn-do-state div{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border-radius:var(--r-m);background:var(--surface);font:var(--type-meta)}
.pn-do-state img{flex:none;width:var(--avatar-s);height:var(--avatar-s);border-radius:50%;object-fit:cover;background:var(--surface-2)}
.pn-do-state b{flex:1;min-width:0;font-weight:var(--w-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-do-state span{font:var(--type-meta);color:var(--ink-2)}
.pn-do-gets{display:grid;gap:var(--space-3);margin:var(--space-6) 0 0}
.pn-do-mail{padding:var(--space-4);border-radius:var(--r-l);background:var(--surface);color:var(--ink)}
.pn-do-tag{display:inline-block;margin:0 0 var(--space-3);padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-2);color:var(--ink-2);font:var(--type-cap)}
.pn-do-mail .pn-do-tag{background:var(--surface-2);color:var(--ink-2)}
.pn-do-mail p{margin:0}
.pn-do-mail__s{font:var(--type-label);color:var(--ink-2)}
.pn-do-mail .pn-do-mail__h{margin:var(--space-2) 0;font:var(--type-title)}
.pn-do-mail .pn-do-mail__b{margin:0 0 var(--space-4);font:var(--type-meta)}
.pn-do-pbtn{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--r-m);background:var(--accent-soft);color:var(--ink);font:var(--type-label)}
.pn-do-gbtn{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);font:var(--type-label)}
.pn-do-dock{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface)}
.pn-do-dock__in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:var(--space-3)}
.pn-do-sum{flex:1;min-width:0}
.pn-do-sum b{display:block;font:var(--type-strong);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-do-sum b.is-roll{animation:pn-do-roll .2s ease-out}
@keyframes pn-do-roll{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pn-do-sum > span{display:block;margin-top:var(--space-1);font:var(--type-meta);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.pn-do-sum > span.is-flash{color:var(--ink)}
.pn-do .pn-do-cta{flex:none;max-width:100%;min-height:var(--control-md);padding:0 var(--space-4);border:0;border-radius:var(--r-m);background:var(--accent);color:var(--on-accent);font:var(--type-strong);white-space:nowrap;display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;transition:background var(--dur-1)}
.pn-do .pn-do-cta:hover{background:var(--accent-press)}
.pn-do .pn-do-cta:active{transform:none}
.pn-do .pn-do-cta span{font-family:var(--body)}   /* the arrow is a plain glyph */
.pn-do .pn-do-cta[hidden]{display:none}
/* Sleek 08.10.: a disabled Next is the neutral waiting key (the tonal well, grey text), never a faded pink */
.pn-do .pn-do-cta[disabled]{opacity:1;background:var(--surface-2);color:var(--ink-2);cursor:not-allowed;transform:none}
.pn-do-side{display:none}
@media (max-width:700px){.pn-do-q{font:var(--type-h1)}}   /* the selling head is 24 on phones (§3.1) */
@media (max-width:379px){
  .pn-do-step{gap:var(--space-3)}
  .pn-do-step b{min-width:120px}
  .pn-do-rung span{max-width:52%}
}
@media (min-width:1080px){
  .pn-do{display:grid;grid-template-columns:480px minmax(0,1fr);gap:0;padding-bottom:0;min-height:100vh}
  .pn-do-left{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--bg)}
  .pn-do-stage{flex:1;overflow:auto;width:100%;padding:var(--space-8) var(--space-8) var(--space-5)}
  .pn-do-dock{position:static;background:var(--bg);padding:var(--space-4) var(--space-8) var(--space-6)}
  .pn-do-dock__in{max-width:none}
  .pn-do-side{display:block;padding:var(--space-8) var(--space-8) var(--space-16);background:var(--surface)}
  .pn-do-side .pn-do-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);transition:opacity .3s}
  .pn-do-side.is-dim .pn-do-grid{opacity:.55;pointer-events:none}
  .pn-do-side h2{margin:0 0 var(--space-2);font:var(--type-title);color:var(--ink)}
  .pn-do-side p{margin:0 0 var(--space-4);font:var(--type-meta);color:var(--ink-2)}
  .pn-do .pn-do-phone{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pn-do *, .pn-do::before, .pn-do *::before, .pn-do *::after{animation:none !important;transition:none !important}
}
/* the order card at the top of her chat (partials/do_card.php, cart_card.php, onw_card.php; the order card's panel) and the
   buyer's status line. The lead line is 13/18 ink 2 (never pink text, MCT-077 / MCT-094); the items are rows: title 15/22
   600, the price 13/18 under it; a listing link is the whole row (44 to tap, no pink underline, MCT-078). */
.pn-docard__k{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-docard__lines{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.pn-docard__lines a{position:relative;color:inherit;text-decoration:none}
.pn-docard__lines a::after{content:"";position:absolute;inset:-12px 0}
.pn-docard__lines a:hover{text-decoration:underline;text-underline-offset:3px}
.pn-docard__lines b{display:block;font:var(--type-strong);color:var(--ink)}
.pn-docard__lines span{display:block;margin-top:2px;font:var(--type-meta);color:var(--ink-2);overflow-wrap:anywhere}
.pn-docard .pn-wishcard__acts form{margin:0}
.pn-docard .pn-order__bar .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
/* owner 07.10.: the door to the wizard on a logged-in buyer's home (partials/do_door.php): the wish card's quiet panel */
.pn-dodoor{display:grid;gap:var(--space-2)}
.pn-dodoor__k{display:flex;align-items:center;gap:var(--space-1);margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-dodoor__k .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
.pn-dodoor h2,.pn-dodoor .pc-sub{margin:0}
.pn-dodoor .pc-btn{justify-self:start;margin-top:var(--space-1)}
.pn-dostat{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-dostat .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
/* owner 08.10. (#59): the link to his chats in his status line */
.pn-dostat a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* owner 08.10. (#37): three women to say hi to on a buyer's last onboarding step (templates/onboard.php) */
.pn-dohello{display:grid;gap:var(--space-2);text-align:left}
.pn-dohello h2,.pn-dohello .pc-sub{margin:0}
.pn-dohello__rows{display:grid;gap:var(--space-2);margin:var(--space-1) 0 0;padding:0;list-style:none}
.pn-dohello__row{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.pn-dohello__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--type-strong)}
.pn-dohello__row .pc-btn{flex:none}
/* UX 433 B-044: his note under the listing on her request card */
.pn-docard__note{display:block;margin-top:var(--space-1);font:var(--type-meta);color:var(--ink-2);quotes:"“" "”"}
/* UX-433 B-115 (round 2, switch ux433_pay): a member's wizard inside the member layout — the layout's header stays on top,
   the tab bar under the dock; no logo row of its own */
.pn-do--shell{min-height:0;padding-bottom:calc(108px + var(--tabbar-h) + env(safe-area-inset-bottom))}
.pn-do--shell .pn-do-top{position:static}
.pn-do--shell .pn-do-logo{display:none}
@media (max-width:700px){.pn-do--shell .pn-do-dock{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}}
@media (min-width:701px){.pn-do--shell{padding-bottom:108px}}
@media (min-width:1080px){
  .pn-do--shell{min-height:calc(100vh - var(--header-h));padding-bottom:0}
  .pn-do--shell .pn-do-left{top:var(--header-h);height:calc(100vh - var(--header-h))}
}
/* Topic pages (owner 27.10., templates/topic.php, lib/topics.php; mockup design/v10/topic/dirty-panties-pics.html).
   pn-tp-* only. The hero is the guides' (pn-gd-hero, guide.css) with the join box beside the copy; the posts are the member
   card (partials/card_ad, no price), never price tags or garment specs. Design system P9 (03.11.): tokens only — member
   panels (Fläche 1, r-l, no shadow), numbers in ink, grey bars, the quotes on the one review card, a dark closing panel
   with the one flat pink key (ADULT-133..139). */

.pn-tp-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start}
@media (min-width:1001px){.pn-tp-hero__wrap{grid-template-columns:minmax(0,1fr) var(--rail-w);gap:var(--space-10)}}
.pn-tp-hero .pn-lpm-hero__lede{max-width:60ch}

.pn-tp-sec{padding:var(--section-gap) 0 0}
.pn-tp-sec .pc-sechead{margin-bottom:var(--head-gap)}

/* the numbers: member panels, three a row from 1001; the number on the h1 step in ink, the bars grey */
.pn-tp-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);margin:0;padding:0;list-style:none;align-items:start}
@media (min-width:701px){.pn-tp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){.pn-tp-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pn-tp-stats > li{padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);box-shadow:none}
.pn-tp-stats b{display:block;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-tp-stats span{display:block;margin-top:var(--space-2);font:var(--type-body);color:var(--ink-2)}
.pn-tp-bars{display:grid;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
.pn-tp-bars li{display:grid;grid-template-columns:96px minmax(0,1fr) 28px;align-items:center;gap:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-tp-bars li span{margin:0;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-tp-bars i{display:block;width:var(--w);height:8px;border-radius:var(--r-full);background:var(--surface-3)}
.pn-tp-bars li:first-child i{background:var(--ink-2)}
.pn-tp-bars em{font-style:normal;text-align:right;color:var(--ink-2)}

/* posts: the member card grid (plastik layer: 5 a row from 1280); the older social card stays styled for safety */
.pn-tp-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-tp-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}}
@media (min-width:1001px){.pn-tp-posts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pn-tp-post{display:grid;gap:var(--space-2);align-content:start;color:var(--ink);text-decoration:none}
.pn-tp-post__by{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.pn-tp-post__by img,.pn-tp-post__by i{flex:none;width:var(--avatar-xs);height:var(--avatar-xs);border-radius:var(--r-full);object-fit:cover;background:var(--surface-2)}
.pn-tp-post__by b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--type-label)}
.pn-tp-post__ph{display:block;aspect-ratio:3/4;border-radius:var(--r-m);overflow:hidden;background:var(--surface-2)}
.pn-tp-post__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-2) ease-out}
.pn-tp-post:hover .pn-tp-post__ph img{transform:scale(1.02)}
.pn-tp-post__cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:var(--type-strong)}
.pn-tp-post small{font:var(--type-meta);color:var(--ink-2)}
.pn-tp-post:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-m)}

/* creators: the creators page's cards */
.pn-tp-creators{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:701px){.pn-tp-creators{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}}
@media (min-width:1001px){.pn-tp-creators{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* reviews (ADULT-139): the one review card of cmprof.css — Fläche 1, r-l, the byline as meta, her words at body size,
   no pink curly quotes */
.pn-tp-quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);align-items:start;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-tp-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-tp-quotes li{display:flex;flex-direction:column-reverse;gap:var(--space-2);padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);color:var(--ink)}
.pn-tp-quotes q{display:block;font:var(--type-body);color:var(--ink);quotes:none}
.pn-tp-quotes q::before,.pn-tp-quotes q::after{content:none}
.pn-tp-quotes small{display:block;margin:0;font:var(--type-meta);color:var(--ink-2)}

/* how it works: three panels, the step number quiet */
.pn-tp-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);margin:0;padding:0;list-style:none;align-items:start}
@media (min-width:701px){.pn-tp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pn-tp-steps li{padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface);box-shadow:none}
.pn-tp-steps em{display:inline-grid;place-items:center;width:var(--avatar-xs);height:var(--avatar-xs);border-radius:var(--r-full);background:var(--surface-2);font:var(--type-cap);font-style:normal;color:var(--ink)}
.pn-tp-steps b{display:block;margin-top:var(--space-3);font:var(--type-title);color:var(--ink)}
.pn-tp-steps p{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--ink-2)}

/* questions (ADULT-137): the reading measure of every prose block; each a panel on the ground */
.pn-tp-faq{display:grid;gap:var(--space-2);max-width:var(--prose-max)}
.pn-tp-faq details{padding:var(--space-4) var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-tp-faq summary{cursor:pointer;min-height:var(--space-6);font:var(--type-strong);color:var(--ink)}
.pn-tp-faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-tp-faq p{margin:var(--space-3) 0 0;font:var(--type-body);color:var(--ink-2)}

/* the closing block (ADULT-136): the dark member surface, never a pink band; the one flat pink key */
.pn-tp-band{margin-top:var(--section-gap);padding:var(--space-12) 0;background:var(--surface);color:var(--ink)}
.pn-tp-band h2{margin:0;font:var(--type-h1);color:var(--ink)}
.pn-tp-band p{max-width:56ch;margin:var(--space-3) 0 var(--space-5);font:var(--type-body);color:var(--ink-2)}
/* adult post hubs (owner 02.11., spec §2.5): the way up to the posts hub and the cut / fabric pages */
.pn-tp-hub .pn-facets{margin:0}
/* Feed (owner 13.10., lib/livefeed.php; mockup design/v8/feed.html): one column of cards, the live strip above it, the rails beside
   it from 1100 px. pn-lf-* / pn-lfr-* / pn-pb-* / pn-fs-* only.
   Design system wave 2 P3 (03.11., docs/design-system.md): every card is a panel (§9.2: surface 1, --r-l, no edge, no shadow),
   heads on the scale (block head --type-title), post text --type-body, time stamps --ink-3, notes inside a card are notes
   (§9.4: surface 2, --r-m) — no paper sign, stamp, tape, receipt or hand note; Inter only (no monospace); tokens only.
   The rails' rules live here too (they were an inline <style> in templates/partials/lf_rails.php), and so do the post
   pieces that were inline in templates/livefeed.php (mosaic, video tile, receipt). */
/* @member-only */
/* UX 17.10.: the whole feed is a member page (templates/livefeed.php, partials/lf_rails, postbox, pb_post), so none of it rides in a guest bundle */

/* ============ the column: live strip, cards, the post's parts ============ */
.pn-lf{max-width:660px;margin:0 auto;padding:0 0 var(--space-12)}
/* the live strip: one panel; on a phone one slim line (UX 17.10. #53) that scrolls and fades at the right edge instead of being cut (MCH-134) */
.pn-lf__live{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);margin:0 0 var(--stack-gap);padding:var(--space-3) var(--space-4);border-radius:var(--r-l);background:var(--surface);font:var(--type-meta);color:var(--ink-2)}
.pn-lf__live:empty{display:none}   /* UX 433 B-041: a buyer's feed has no ticker */
.pn-lf__live strong{color:var(--ink);font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.pn-lf__live b{display:inline-block;width:8px;height:8px;margin-right:var(--space-2);border-radius:50%;background:var(--success)}
.pn-lf__card{margin:0 0 var(--stack-gap);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
/* the head: avatar 48, the name (600 15) over the action line (13), the time word on the right in ink-3 (13) */
.pn-lf__hd{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4)}
.pn-lf__av{flex:none;width:var(--avatar-l);height:var(--avatar-l);border-radius:50%;object-fit:cover}
.pn-lf__who{flex:1 1 auto;display:grid;min-width:0;color:var(--ink)}
.pn-lf__who b{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0;font:var(--type-strong);color:var(--ink)}
.pn-lf__who b a{display:inline-block;max-width:100%;padding-block:var(--space-3);margin-block:calc(-1 * var(--space-3));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* a 46 px tall hit on the name; a long @name ends in "…" (the title keeps it) */
.pn-lf__who small{display:block;font:var(--type-meta);color:var(--ink-2)}
.pn-lf__face{flex:none;display:block;border-radius:50%}
.pn-lf__who a{color:inherit;text-decoration:none}
.pn-lf__who a:hover{text-decoration:underline}
.pn-lf__badge{display:inline-flex;align-items:center;min-height:20px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--surface-2);color:var(--ink-2);font:var(--type-cap)}   /* sentence case, one badge geometry (MCH-126) */
.pn-lf__when{flex:none;margin-left:auto;font:var(--type-meta);color:var(--ink-3)}
.pn-lf__tx{margin:0;padding:0 var(--space-4) var(--space-4);font:var(--type-body);color:var(--ink)}
/* the news post: the headline in ink, no pink highlighter block (MCH-124) */
.pn-lf__tape{display:block;font:var(--type-title);color:var(--ink)}
/* a character's sign: a note in the card (surface 2, --r-m) — no cream paper, no stamp border, no rotation (MCH-123) */
.pn-lf__sign{display:grid;justify-items:center;gap:var(--space-1);margin:0 var(--space-4) var(--space-4);padding:var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink);text-align:center}
.pn-lf__stamp{font:var(--type-label);color:var(--ink-2)}
.pn-lf__big{display:block;max-width:100%;font:var(--type-h1);letter-spacing:var(--tr-h);color:var(--ink);overflow-wrap:anywhere}
.pn-lf__sign small{display:block;font:var(--type-meta);color:var(--ink-2)}
/* Penny's receipt as a note: Inter, tabular numbers, no dashed edge, no capitals (MCH-125) */
.pn-lf__rcpt{margin:0 var(--space-4) var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-body);color:var(--ink)}
.pn-lf__rcpt > b{display:block;margin:0 0 var(--space-1);font:var(--type-label);color:var(--ink-2)}
.pn-lf__rcpt dl{margin:0}
.pn-lf__rcpt div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-1) 0}
.pn-lf__rcpt dt{color:var(--ink-2)}
.pn-lf__rcpt dd{margin:0;font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.pn-lf__ad{padding:0 var(--space-4) var(--space-4)}
.pn-lf__ad .pc-card{width:100%;max-width:none}
.pn-lf__ad .pc-card .pc-media{aspect-ratio:1/1}
.pn-lf__ft{margin:0;padding:0 var(--space-4) var(--space-4)}
/* the photo mosaic and the video tile of a post (were inline in templates/livefeed.php): media inside a card = --r-m */
.pn-lf__mos{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);margin:0 var(--space-4) var(--space-4);border-radius:var(--r-m);overflow:hidden}
.pn-lf__mos--1{grid-template-columns:1fr}
.pn-lf__mos a{display:block;aspect-ratio:1/1;background:var(--surface-2)}
.pn-lf__mos--1 a{aspect-ratio:4/5}
.pn-lf__mos--3 a:first-child{grid-column:1/3;aspect-ratio:2/1}
.pn-lf__mos img,.pn-lf__newface img{display:block;width:100%;height:100%;object-fit:cover}
.pn-lf__lockline{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-2)}
.pn-lf__newface{display:block;width:min(260px,62%);aspect-ratio:1/1;margin:var(--space-1) auto var(--space-4);border-radius:50%;overflow:hidden;background:var(--surface-2)}
.pn-lf__vid{position:relative;display:block;margin:0 var(--space-4) var(--space-4);aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden;background:var(--chrome)}
.pn-lf__vposter,.pn-lf__vid video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pn-lf__vplay{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--header-key);height:var(--header-key);margin:calc(var(--header-key) / -2) 0 0 calc(var(--header-key) / -2);border-radius:50%;background:var(--glass);color:var(--on-media)}
.pn-lf__vid.is-playing .pn-lf__vplay{display:none}
.pn-lf__vlock{position:absolute;left:var(--space-3);top:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--on-media);font:var(--type-cap)}
/* UX-016 (23.10.): the video tile's ring sits inside, because the post card clips (overflow:hidden) */
.pn-lf__vid:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* UX 17.10. #50: the foot of a post is ONE key (Order request, else Message) at the standard 44 and round 44 icon keys beside it
   (message, follow) — all tops on one line (MCH-127, MCH-128). No frames inside (tonal surfaces, owner 09.10.). */
.pn-lf__acts{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4) var(--space-4)}
.pn-lf__acts:empty{display:none}
.pn-lf__acts > :first-child{flex:1 1 auto;min-width:0}
.pn-lf__acts > .pn-lf__ico,.pn-lf__acts > .pn-followform,.pn-lf__acts > .pn-follow--icon{flex:none}
.pn-lf__acts form{display:flex;margin:0}
.pn-lf__acts > :first-child.pc-btn{width:100%;min-width:0;white-space:nowrap}
.pn-lf__acts .pc-iconbtn{width:var(--control-md);height:var(--control-md);background:var(--surface-2);color:var(--ink-2);transition:color var(--dur-1),background-color var(--dur-1)}
.pn-lf__acts .pc-iconbtn:hover{background:var(--surface-3);color:var(--ink)}
.pn-lf__acts .pn-follow--icon.is-on{color:var(--accent)}
.pn-lf__order[disabled]{cursor:default}
.pn-lf__order.is-sent,.pn-lf__order.is-no{background:var(--surface-2);border-color:transparent;color:var(--ink-2);box-shadow:none}
.pn-lf__order[aria-busy]{opacity:.6}
/* the foot note: once, left like the column (MCH-141) */
.pn-lf__note{margin:var(--space-4) 0 0;font:var(--type-meta);color:var(--ink-2)}
/* an empty filter: the kit's empty panel (title, one key); the empty text line is not drawn (MCH-140) */
.pn-lf__col > .pc-empty{margin:0 0 var(--stack-gap)}
.pn-lf__col > .pc-empty > p:empty{display:none}
@media (max-width:700px){.pn-lf__ad .pc-card .pc-media{aspect-ratio:4/5}}
@media (max-width:700px){.pn-lf__live{flex-wrap:nowrap;gap:var(--space-4);padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--space-8)),transparent);mask-image:linear-gradient(90deg,black calc(100% - var(--space-8)),transparent)}.pn-lf__live::-webkit-scrollbar{display:none}.pn-lf__live > span{flex:none}}
@media (min-width:701px){.pn-lf__mos--1 a,.pn-lf__vid{aspect-ratio:1/1}}
/* UX 17.10. #54: a post fits the desktop screen — the picture is capped at 64 % of its height (cover crops, nothing stretches) */
@media (min-width:701px){.pn-lf__ad .pc-card .pc-media,.pn-lf__vid,.pn-lf__mos--1 a{max-height:64vh;width:100%}}
.pn-lf__end{margin:var(--space-2) var(--space-4) var(--space-4)}   /* UX 200 BUY-26: the end of the week, the way on */
.pn-lf__end .pc-sub{flex-basis:100%;margin:0;text-align:center}
/* owner 02.11.: the feed filter (All · Following · Videos …) as a chip row on phones and tablets; from 1100 px the left rail
   carries it. The kit chip as it is: --control-sm (44 on a phone, MCH-133) */
.pn-lf__fl{margin:0 0 var(--stack-gap)}
.pn-lf__fl .pc-chip{flex:none}
@media (min-width:1100px){.pn-lf__fl{display:none}}
/* owner 02.11. ("die Card ist Scheiße … kein Kreis, links die Hälfte der Card das Bild, rechts geil ihre Profilangaben"): a new
   picture / new here post — her picture as a 4:5 half on the left, her name, age, country, activity and two stat tiles on the
   right; the house scale (name --type-title, numbers --type-num in ink, the star ink) (MCH-139) */
.pn-lf__pro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:stretch;margin:0 var(--space-4) var(--space-4)}
.pn-lf__proimg{display:block;align-self:start;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-m);background:var(--surface-2)}
.pn-lf__proimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-2) ease-out}
.pn-lf__proimg:hover img{transform:scale(1.02)}
.pn-lf__probody{display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);min-width:0}
.pn-lf__proname{margin:0;font:var(--type-title);color:var(--ink);overflow-wrap:anywhere}
.pn-lf__proname a{color:inherit;text-decoration:none}
.pn-lf__proname span{font-weight:var(--w-regular);color:var(--ink-2)}
.pn-lf__proline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:0;font:var(--type-body);color:var(--ink-2)}
.pn-lf__proflag{width:var(--icon-s);height:var(--icon-s);border-radius:50%;object-fit:cover}
.pn-lf__prostat{display:inline-flex;align-items:center;gap:var(--space-2)}
.pn-lf__prostat.is-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success)}
.pn-lf__prostats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:0}
.pn-lf__prostats > div{display:grid;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-lf__prostats dt{font:var(--type-cap);color:var(--ink-2)}
.pn-lf__prostats dd{margin:0;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-lf__prostats dd small{font:var(--type-label);color:var(--ink-2)}
.pn-lf__prostar{margin-right:var(--space-1);color:var(--ink)}
.pn-lf__protop{align-self:flex-start;display:inline-flex;align-items:center;min-height:24px;margin:0;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--surface-2);color:var(--ink);font:var(--type-label)}
.pn-lf__prosince{margin:0;font:var(--type-meta);color:var(--ink-2)}
@media (max-width:560px){
  .pn-lf__pro{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-3)}
  .pn-lf__probody{gap:var(--space-2)}
  .pn-lf__proline{font:var(--type-meta)}
  .pn-lf__prostats{grid-template-columns:1fr}
  .pn-lf__prostats > div{padding:var(--space-2) var(--space-3)}
  .pn-lf__prostats dd{font:var(--type-title)}
}

/* @end-member-only */

/* @member-only */
/* POST BOX (mockup design/v9/postbox, 16.10.) — the seller's composer at the top of /feed/.
   Composed from the kit and the feed's own classes: the box = a .pn-lf__card · avatar = .pc-avatar · keys = .pc-btn ·
   field = textarea.pc-input · thumbnails = the photo frame + .pc-remove · add slot = .pc-slot · confirm = .pc-check ·
   sheets = dialog.pn-sheet · upgrade = .pc-chip.pc-chip--premium · her published post = .pn-lf__card + the feed classes. */
.pn-pb{padding:var(--space-4) var(--space-4) var(--space-3)}
.pn-pb__row{display:flex;align-items:center;gap:var(--space-3)}
.pn-pb__row > .pc-avatar{flex:none;width:var(--avatar-l);height:var(--avatar-l)}
/* the prompt is a button that looks like the field it opens: tonal, no edge, the round post-box prompt (§5) */
.pn-pb__prompt{flex:1;min-width:0;display:flex;align-items:center;min-height:var(--avatar-l);padding:0 var(--space-4);border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2);font:var(--type-ui);text-align:left;cursor:text;transition:background-color var(--dur-1)}
.pn-pb__prompt:hover{background:var(--surface-3)}
.pn-pb__prompt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* tools: Photos · Video (the kit's quiet keys, a step up on hover) and, for a free seller, the day's counter on the right */
.pn-pb__tools{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0 calc(var(--avatar-l) + var(--space-3));color:var(--ink-2)}
.pn-pb__tools .pc-btn--ghost{padding:0 var(--space-3);color:var(--ink);font:var(--type-label)}
.pn-pb__tools .pc-btn--ghost:hover{color:var(--ink)}
.pn-pb__tools .pc-btn--ghost .pc-ico{color:var(--ink)}
/* the day's counter (free sellers only): two quiet pips + the words. Never pink, never a warning. */
.pn-pb__cs{display:none}
.pn-pb__count{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;font:var(--type-meta);color:var(--ink-2);white-space:nowrap}
.pn-pb__pips{display:inline-flex;gap:var(--space-1)}
.pn-pb__pips i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--glyph-off)}
.pn-pb__pips i.is-used{background:var(--ink-2);box-shadow:none}
/* the limit is reached (free seller, 2 of 2 today): a note */
.pn-pb.is-full .pn-pb__prompt{cursor:default;background:var(--surface-2);color:var(--ink-3)}
.pn-pb.is-full .pn-pb__row .pc-avatar{opacity:.7}
.pn-pb__full{margin:var(--space-3) 0 var(--space-2);padding:var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-pb__full b{display:block;font:var(--type-strong);color:var(--ink)}
.pn-pb__full p{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-pb__fullfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4)}
/* the gold pill at key size: the kit's .pc-chip--premium (metal, sheen, reduced-motion rule) — only its size here */
.pc-chip.pc-chip--premium.pn-pb__gold{min-height:var(--tap);padding:0 var(--space-4);gap:var(--space-2);font:var(--type-strong);font-weight:var(--w-bold)}
.pn-pb__gold .pc-ico{width:var(--icon-m);height:var(--icon-m)}
/* the composer: one dialog. Phone = the kit bottom sheet (showModal), full height; desktop = the same dialog opened in place
   inside the box (show(), non-modal) */
dialog.pn-sheet.pn-pbsheet{padding:var(--space-2) 0 0;overflow:hidden}
dialog.pn-pbsheet[open]{display:flex;flex-direction:column}
.pn-pbsheet > form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.pn-pbsheet .pn-sheet__head{margin:0;padding:0 var(--space-4) var(--space-3) var(--space-5)}
.pn-pbsheet__x{flex:none}
.pn-pbsheet__sub{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.pn-pbsheet__sub .pn-pb__count{margin:0}
.pn-pbsheet__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-1) var(--space-5) var(--space-4)}
.pn-pb__who{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3)}
.pn-pb__who .pc-avatar{width:var(--avatar-m);height:var(--avatar-m)}
.pn-pb__who b{font:var(--type-strong)}
/* the field: the kit textarea, grows with the text; the soft count sits in its corner */
.pn-pb__field{position:relative}
.pn-pb__field textarea.pc-input{display:block;min-height:152px;padding:var(--space-3) var(--space-4) var(--space-8);resize:none;font:var(--type-ui)}
.pn-pb__len{position:absolute;right:var(--space-4);bottom:var(--space-3);font:var(--type-cap);font-variant-numeric:tabular-nums;color:var(--ink-3);pointer-events:none}
.pn-pb__len.is-near{color:var(--ink-2)}
/* the house rule: one quiet line, the shield, a link to the full rules */
.pn-pb__rule{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-3) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-pb__rule .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s);margin-top:1px;color:var(--glyph-off)}
.pn-pb__rule a{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px;white-space:nowrap}
.pn-pb__rule a:hover{color:var(--ink)}
/* the foot: what to add, and the one pink key. On a phone it is the sheet's last row, so with the keyboard open it rests on the
   keyboard (the sheet follows window.visualViewport). */
.pn-pbsheet__foot{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface)}
.pn-pbsheet__foot .pc-btn--ghost{padding-inline:var(--space-3)}
.pn-pbsheet__foot .pc-btn--ghost[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.pn-pbsheet__post{margin-left:auto;min-width:96px}
.pn-pbsheet__cancel{display:none}
.pn-pbsheet__foot .pn-pb__count{display:none}
/* media: up to 4 photos, or 1 video */
.pn-pb__media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}
.pn-pb__media > li{min-width:0}
.pn-pb__media > li > .pc-slot{width:100%;height:100%}
.pn-pb__thumb{position:relative;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:var(--surface-2);touch-action:none}
.pn-pb__thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pn-pb__thumb .pc-remove{top:var(--space-1);right:var(--space-1)}
.pn-pb__thumb .pc-remove::after{content:"";position:absolute;inset:-8px}
.pn-pb__thumb.is-uploading img{opacity:.55}
.pn-pb__bar{position:absolute;left:var(--space-2);right:var(--space-2);bottom:var(--space-2);height:4px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.pn-pb__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--accent);transform:scaleX(var(--p,.5));transform-origin:left}
.pn-pb__media .pc-slot{aspect-ratio:1;border-radius:var(--r-m);font:var(--type-cap)}
.pn-pb__media .pc-slot .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-pb__hint{margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}
/* one video: its poster, the feed's play disc, length + size */
.pn-pb__vid{position:relative;margin:var(--space-4) 0 0;width:min(100%,260px);aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden;background:var(--surface-2)}
.pn-pb__vid img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pn-pb__vid .pc-remove{top:var(--space-2);right:var(--space-2)}
.pn-pb__vid .pc-remove::after{content:"";position:absolute;inset:-8px}
.pn-pb__vlen{position:absolute;left:var(--space-2);bottom:var(--space-2);display:inline-flex;align-items:center;gap:var(--space-2);min-height:24px;padding:0 var(--space-2);border-radius:var(--r-full);background:var(--glass);color:var(--on-media);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-pb__vmeta{margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}
/* phone: the sheet is (almost) the whole screen; the tab bar steps aside (chrome.css, dialog.pn-sheet[open]) */
@media (max-width:700px){
  .pn-pb__tools{margin-left:0}
  .pn-pb__tools .pn-pb__cl{display:none}
  .pn-pb__tools .pn-pb__cs{display:inline}
  dialog.pn-sheet.pn-pbsheet{height:auto;max-height:calc(100svh - 24px)}
  .pn-pbsheet__body{flex:0 1 auto}
  /* keyboard open: lib JS sets --pb-kb (the keyboard's height from visualViewport); the sheet ends on the keyboard */
  dialog.pn-sheet.pn-pbsheet.is-kb{bottom:var(--pb-kb);height:auto;max-height:calc(100svh - var(--pb-kb) - 24px);border-radius:var(--r-l) var(--r-l) 0 0}
  .pn-pbsheet.is-kb .pn-pb__field textarea.pc-input{min-height:96px}
}
/* desktop: the same dialog, opened in place in the box (not a modal) */
@media (min-width:701px){
  .pn-pb.is-open > .pn-pb__row,.pn-pb.is-open > .pn-pb__tools{display:none}
  .pn-pb.is-open{padding:0}
  .pn-pb dialog.pn-sheet.pn-pbsheet:not(:modal){position:static;inset:auto;width:auto;max-width:none;max-height:none;margin:0;padding:var(--space-4) var(--space-4) 0;border-radius:0;box-shadow:none;background:transparent;color:inherit}
  .pn-pb .pn-pbsheet:not(:modal) .pn-sheet__grab,.pn-pb .pn-pbsheet:not(:modal) .pn-sheet__head{display:none}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__body{display:grid;grid-template-columns:var(--avatar-l) minmax(0,1fr);gap:0 var(--space-3);padding:0 0 var(--space-3);overflow:visible}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__who{grid-row:1/span 4;align-self:start;margin:0}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__who .pc-avatar{width:var(--avatar-l);height:var(--avatar-l)}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__who b{display:none}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__field textarea.pc-input{min-height:112px}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__foot{margin:0 calc(-1 * var(--space-4));padding:var(--space-2) var(--space-4) var(--space-3) calc(var(--space-4) + var(--avatar-l) + var(--space-3));background:transparent}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__foot .pn-pb__cs{display:none}
  .pn-pb__count{display:inline-flex;margin-left:var(--space-3)}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__post{margin-left:0}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__cancel{display:inline-flex;margin-left:auto}
  .pn-pb__vid{width:220px}
}
/* the video rules: a kit sheet BEFORE the file picker; group heads are labels in sentence case */
/* the video rules sheet (owner 04.11. «sieht total beschissen aus»): two calm panels — what fits, what doesn't — each item with
   its sign in a small round well, the consent as one row, one pink key */
.pn-pbrules .pn-sheet__head{align-items:center}
.pn-pbrules__lede{margin:0 0 var(--space-4);font:var(--type-ui);color:var(--ink-2);max-width:44ch}
.pn-pbrules__grp{margin:0 0 var(--space-3);padding:var(--space-4);border-radius:var(--r-l);background:var(--surface-2)}
.pn-pbrules__h{margin:0 0 var(--space-3);font:var(--type-strong);color:var(--ink)}
.pn-pbrules__grp ul{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.pn-pbrules__grp li{display:grid;grid-template-columns:var(--icon-l) 1fr;align-items:start;gap:var(--space-3);padding:0;font:var(--type-ui);color:var(--ink-2)}
.pn-pbrules__grp li .pc-ico{width:var(--icon-l);height:var(--icon-l);padding:4px;border-radius:var(--r-full);box-sizing:border-box}
.pn-pbrules__grp--ok li .pc-ico{color:var(--success);background:var(--surface-3)}
.pn-pbrules__grp--no li .pc-ico{color:var(--ink-2);background:var(--surface-3)}
.pn-pbrules__grp li span{padding-top:2px}
.pn-pbrules__ack{display:flex;align-items:center;gap:var(--space-3);min-height:56px;margin:var(--space-1) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--r-l);background:var(--surface-2);font:var(--type-ui);color:var(--ink);cursor:pointer}
.pn-pbrules__ack:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent)}
.pn-pbrules__ack:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-pbrules .pn-sheet__acts{margin-top:var(--space-4)}
/* her post in the feed (kind "post": text first, then the feed's mosaic / video); her "…" key is a 44 icon key */
.pn-lf__card--post{position:relative}
.pn-lf__card--post .pn-lf__tx{white-space:pre-line}
.pn-lf__card--post .pn-lf__hd .pc-iconbtn{width:var(--control-md);height:var(--control-md);margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0;background:transparent}
.pn-lf__card--post .pn-lf__hd .pc-iconbtn:hover{background:var(--surface-2)}
/* the neutral posting moment: the same for every post (upload + a fixed short beat), then the card is simply there */
.pn-lf__card.is-posting .pn-lf__mos,.pn-lf__card.is-posting .pn-lf__vid{opacity:.6}
.pn-pb__run{position:absolute;left:0;right:0;top:0;height:4px;background:var(--surface-2);overflow:hidden}
.pn-pb__run i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:var(--r-full);background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.pn-pb__run i{animation:pn-pb-run 1.2s ease-in-out infinite}}
@keyframes pn-pb-run{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.pn-lf__card.is-posting .pn-lf__who small{display:inline-flex;align-items:center;gap:var(--space-2)}
/* the delete question under her "…" (not in the mockup): the kit sheet, the rules sheet's lede line */
.pn-pbdel .pn-sheet__acts{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
/* innen 500 SEL-53: after her first post of the day, the box says where her posts are listed (My content → Posts) */
.pn-pb__tools .pn-pb__mine{margin-left:var(--space-3);font:var(--type-meta);white-space:nowrap}
.pn-pb__tools > .pn-pb__mine:nth-child(3){margin-left:auto}
.pn-pb__minep{margin:var(--space-3) 0 0}
@media (max-width:700px){.pn-pb__tools:has(.pn-pb__mine){flex-wrap:wrap}.pn-pb__tools .pn-pb__mine{order:3;flex-basis:100%;margin:var(--space-2) 0 0}}

/* ---- feed slider (owner 18.10., lib/feed_slider.php, partials/lf_slider.php) ============
   The Premium sellers as one row of the directory's seller card, under the post box. One panel like a post; its head is a
   block head (--type-title, MCH-117); the cards keep their 4:5 portrait from the first byte; the arrows only where there is a
   pointer to use them (phones swipe). Her own card's label is quiet glass, never pink. */
.pn-fs{margin:0 0 var(--stack-gap);padding:var(--space-4) 0;border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.pn-fs__head{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);margin:0 var(--space-4) var(--head-gap)}
.pc-h-card.pn-fs__h{flex:1 1 auto;min-width:0;margin:0;font:var(--type-title);letter-spacing:0;color:var(--ink)}
.pn-fs__all{flex:none}
.pn-fs__nav{display:none;flex:none;gap:var(--space-2)}
@media (min-width:701px) and (hover:hover) and (pointer:fine){.pn-fs__nav{display:inline-flex}}
.pn-fs__arr{background:var(--surface-2);color:var(--ink);border:none}
.pn-fs__arr:hover{background:var(--surface-3)}
.pn-fs__arr[disabled]{opacity:.38;cursor:default}
.pn-fs__row{display:flex;gap:var(--space-3);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-4);padding:0 var(--space-4) 2px;scrollbar-width:none}
.pn-fs__row::-webkit-scrollbar{display:none}
.pn-fs__row > .pc-scard{flex:none;width:148px;scroll-snap-align:start}
.pn-fs__row.is-drag{scroll-snap-type:none;cursor:grabbing}
.pn-fs__row.is-drag .pn-card-link{pointer-events:none}
.pn-fs__join .pn-youcard__plus{top:var(--space-4);width:var(--avatar-l);height:var(--avatar-l);margin:0 0 0 calc(var(--avatar-l) / -2)}   /* owner 02.11.: the plus high in the card, never over "You here?" */
.pn-fs__join .pn-youcard__plus .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-fs__price{color:var(--on-media);font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.pc-scard__you--quiet{background:var(--glass);color:var(--on-media);font-weight:var(--w-strong)}
@media (max-width:700px){.pn-fs__row{gap:var(--space-2)}.pn-fs__row > .pc-scard{width:140px}}

/* ============ the box's door on her dashboard and My listings (owner 27.10., partials/postbox_door.php) ============
   the box's row and tools as links into /feed/#post, under a card head; "New" until her first post */
.pn-pb.pn-pbdoor{padding:var(--panel-pad) var(--panel-pad) var(--space-3)}
.pn-pbdoor__head{display:flex;align-items:center;gap:var(--space-2)}
.pn-pbdoor__head .pc-h-card{margin:0;font:var(--type-title)}
.pn-pbdoor__new{display:inline-flex;align-items:center;min-height:20px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--accent);color:var(--on-accent);font:var(--type-cap)}
.pn-pbdoor__sub{margin:var(--space-1) 0 var(--space-4)}
a.pn-pb__prompt{text-decoration:none}
.pn-pbdoor.is-full .pn-pb__row{margin-bottom:var(--space-2)}

/* ============ the rails (desktop from 1100 px; partials/lf_rails.php) ============
   Under 1100 px nothing changes: the rails are not shown and .pn-lfr is a plain block. 1100–1259: the column and ONE rail of
   276; the filter and the sellers seen lately stand as a bar over both. From 1260: 240 · 1fr · 332 with 24 between
   (docs/design-system.md §12; MCH-142). Every block is a panel (surface 1, --r-l, --panel-pad, MCH-149); block heads
   --type-title, inner heads --type-label; names --type-strong, sub lines --type-meta; avatars 32 in lists, 40 for the one
   person who waits, 48 on my card (MCH-148); numbers --type-num in ink (MCH-151). */
.pn-lfr__rail{display:none}
.pn-lfturn{padding:var(--panel-pad)}   /* UX 01.11. SEL-19: "Your turn" in the column under 1100 px (templates/livefeed.php) */
@media (min-width:1100px){
  .pn-lfturn{display:none}
  .pn-lfr{display:grid;grid-template-columns:minmax(0,660px) 276px;grid-template-rows:auto 1fr;grid-template-areas:"left left" "feed right";gap:var(--space-4) var(--space-6);justify-content:center;align-items:start}
  .pn-lfr > .pn-lf{grid-area:feed;max-width:none;margin:0;min-width:0}
  .pn-lfr > .pn-lf > .pn-lf__live{display:none}   /* its three counts stand in the right rail */
  .pn-lfr__rail{display:flex;flex-direction:column;gap:var(--stack-gap);align-self:stretch;min-width:0}
  .pn-lfr__rail--l{grid-area:left}
  .pn-lfr__rail--r{grid-area:right}
}
@media (min-width:1260px){
  .pn-lfr{grid-template-columns:240px minmax(0,1fr) 332px;grid-template-rows:auto;grid-template-areas:"left feed right";gap:0 var(--space-6)}
}
.pn-lfr__head,.pn-lfr__tail{display:grid;gap:var(--stack-gap);min-width:0}
.pn-lfr__head:empty,.pn-lfr__tail:empty{display:none}
.pn-lfr__tail{position:sticky;top:calc(var(--header-h) + var(--space-6))}   /* the head scrolls away, the tail stays: no block is ever cut, nothing scrolls inside */
/* ---- shared */
.pn-lfr__rail{font:var(--type-body);color:var(--ink)}
.pn-lfr__blk,.pn-lfr__seen,.pn-lfr__mine,.pn-lfr__rcpt{min-width:0;padding:var(--panel-pad);border-radius:var(--r-l);background:var(--surface)}
.pn-lfr__rail :where(ul,dl,dd,p,h2,h3){margin:0;padding:0;list-style:none}
.pn-lfr__h{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--head-gap);font:var(--type-title);color:var(--ink)}
.pn-lfr__h .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m);color:var(--ink-2)}
.pn-lfr__h--live i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--success)}
.pn-lfr__h--in{margin:var(--space-5) 0 var(--space-2);font:var(--type-label);color:var(--ink-2)}
.pn-lfr__sub,.pn-lfr__tx,.pn-lfr__none{font:var(--type-meta);color:var(--ink-2)}
.pn-lfr__none + .pn-lfr__sub{margin-top:var(--space-1)}
.pn-lfr__tx{margin-bottom:var(--space-4)}
.pn-lfr__foot{margin-top:var(--space-3)}
.pn-lfr__none--ok{display:flex;align-items:flex-start;gap:var(--space-2)}
.pn-lfr__none--ok .pc-ico{flex:none;margin-top:1px;color:var(--success)}
.pn-lfr__ch{flex:none;width:var(--avatar-s);height:var(--avatar-s);border-radius:50%;object-fit:cover}
/* ---- my card: a 48 avatar, the @name on one line ("…" when long, the title keeps it; MCH-144), two count rows */
.pn-lfr__meid{display:flex;align-items:center;gap:var(--space-3);min-width:0;margin:0 0 var(--space-3);color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-lfr__meav{flex:none;width:var(--avatar-l);height:var(--avatar-l);font-size:var(--fs-title);font-weight:var(--w-strong)}
.pn-lfr__mename{display:grid;min-width:0;justify-items:start}
.pn-lfr__mename b{max-width:100%;font:var(--type-title);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfr__mename small{font:var(--type-meta);color:var(--ink-2)}
.pn-lfr__stats{display:grid;gap:var(--space-1);margin-inline:calc(-1 * var(--space-3))}
.pn-lfr__stats a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3);border-radius:var(--r-m);color:inherit;font:var(--type-body);text-decoration:none;transition:background-color var(--dur-1)}
.pn-lfr__stats a:hover{background:var(--surface-2)}
.pn-lfr__stats span{min-width:0}
.pn-lfr__mecta{margin:var(--space-3) 0 0}
/* ---- the feed filter: rows like the drawer's (600 15, 44 high, icons 20; MCH-145); the current one a step up with the pink icon */
.pn-lfr__nav{display:grid;gap:var(--space-1)}
.pn-lfr__nav a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);padding:0 var(--space-4);border-radius:var(--r-m);color:var(--ink);font:var(--type-strong);text-decoration:none;transition:background-color var(--dur-1)}
.pn-lfr__nav a .pc-ico{flex:none;width:var(--icon-m);height:var(--icon-m);color:var(--ink-2)}
.pn-lfr__nav a:hover{background:var(--surface-2)}
.pn-lfr__nav a[aria-current]{background:var(--surface-3);color:var(--ink)}
.pn-lfr__nav a[aria-current] .pc-ico{color:inherit}
/* ---- a buyer's "Your last visits" and a seller's "Your week": the same panel in the same slot (MCH-153) */
.pn-lfr__seen{--dot-ring:var(--surface)}
.pn-lfr__seen ul{display:grid;gap:var(--space-1);margin-inline:calc(-1 * var(--space-3))}
.pn-lfr__seen a,.pn-lfr__rcpthd{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);padding:var(--space-1) var(--space-3);border-radius:var(--r-m);color:inherit;text-decoration:none;transition:background-color var(--dur-1)}
.pn-lfr__seen a:hover{background:var(--surface-2)}
.pn-lfr__stx,.pn-lfr__rcpthd span{display:grid;min-width:0}
.pn-lfr__seen b,.pn-lfr__rcpthd b{font:var(--type-strong);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfr__seen small,.pn-lfr__rcpthd small{font:var(--type-meta);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfr__seen small.is-on{display:flex;align-items:center;gap:var(--space-2)}
.pn-lfr__seen small i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--success)}
.pn-lfr__sav{flex:none;width:var(--avatar-s);height:var(--avatar-s);font-size:var(--fs-meta)}
.pn-lfr__seen .pc-avatar__dot{display:none}   /* the row says "Reachable" in words; the dot on the picture stands in where the words are left out (bar, low window) */
/* ---- the last 24 hours (one line per label, MCH-152), and the new faces (no lift on hover, MCH-131) */
.pn-lfr__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.pn-lfr__nums li{display:grid;gap:var(--space-1);align-content:start;min-width:0}
.pn-lfr__nums b{font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-lfr__nums span{font:var(--type-meta);color:var(--ink-2)}
.pn-lfr__faces{display:flex;justify-content:space-between}
/* ---- the video tile: the picture runs to the block's edge, the link stands under it */
.pn-lfr__video{padding:0 0 var(--panel-pad);overflow:hidden}
.pn-lfr__video .pn-lfr__vid{position:relative;display:block;aspect-ratio:1/1;margin:0;overflow:hidden;border-radius:0;background:var(--surface-2)}
.pn-lfr__vid img,.pn-lfr__vid video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pn-lfr__vid::after{content:"";position:absolute;inset:0;background:var(--pcard-cap-shade);pointer-events:none}
.pn-lfr__rail .pn-lfr__vid:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}   /* the ring inside the picture: the block cuts what stands outside */
.pn-lfr__video .pn-lfr__vplay{z-index:1;width:var(--control-md);height:var(--control-md);margin:calc(var(--control-md) / -2) 0 0 calc(var(--control-md) / -2)}
.pn-lfr__vby{position:absolute;z-index:1;left:var(--space-4);right:var(--space-4);bottom:var(--space-3);font:var(--type-label);color:var(--on-media);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfr__vlock{position:absolute;z-index:1;left:var(--space-3);top:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:var(--r-s);background:var(--glass);color:var(--on-media);font:var(--type-cap)}
.pn-lfr__vlock .pc-ico{width:var(--icon-s);height:var(--icon-s)}
.pn-lfr__video .pn-lfr__foot{padding-inline:var(--panel-pad)}
/* ---- behind the lock: a block head with the lock icon (no tilted pink sticker, MCH-150), the counts in ink, a secondary key */
.pn-lfr__lockn{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);font:var(--type-meta);color:var(--ink-2)}
.pn-lfr__lockn b{display:block;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-lfr__lockt{margin:var(--space-2) 0 var(--space-4);font:var(--type-meta);color:var(--ink-2)}
/* ---- reachable */
.pn-lfr__reach ul{display:grid;gap:var(--space-1);margin-inline:calc(-1 * var(--space-2))}
.pn-lfr__reach li{display:flex;align-items:center;gap:var(--space-1);min-width:0}
.pn-lfr__person{flex:1;display:flex;align-items:center;gap:var(--space-3);min-width:0;min-height:var(--control-md);padding:var(--space-1) var(--space-2);border-radius:var(--r-m);color:inherit;text-decoration:none;transition:background-color var(--dur-1)}
.pn-lfr__person:hover{background:var(--surface-2)}
.pn-lfr__pav{flex:none;width:var(--avatar-s);height:var(--avatar-s);font-size:var(--fs-meta)}
.pn-lfr__person b{min-width:0;font:var(--type-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfr__fav{flex:none;display:inline-grid;color:var(--ink-2)}
.pn-lfr__fav .pc-ico{width:var(--icon-s);height:var(--icon-s);fill:currentColor}
/* the write key = the kit's round icon key: 44, surface 2, a step up on hover (MCH-155) */
.pn-lfr__write{flex:none;display:grid;place-items:center;width:var(--control-md);height:var(--control-md);border-radius:50%;background:var(--surface-2);color:var(--ink);transition:background-color var(--dur-1)}
.pn-lfr__write:hover{background:var(--surface-3)}
/* ---- a seller's rail: your turn, the checklist, Penny's receipt */
.pn-lfr__turnrow{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.pn-lfr__turnrow > .pc-avatar{flex:none;width:var(--avatar-m);height:var(--avatar-m)}
.pn-lfr__turnrow p{display:grid;min-width:0;font:var(--type-meta);color:var(--ink-2)}
.pn-lfr__turnrow b{font:var(--type-strong);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfr__turnrow small{font:var(--type-meta);color:var(--ink-3)}
.pn-lfr__checkhd{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.pn-lfr__checkhd .pn-lfr__h{margin-bottom:0}
/* the ring: 44, the number and its % in one 12 px line (no 8.75 px glyph, MCH-156) */
.pn-lfr__ring{--p:0;flex:none;display:grid;place-items:center;width:var(--control-md);height:var(--control-md);border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--surface-3) 0)}
.pn-lfr__ring b{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--ink);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-lfr__ring small{font:inherit}
.pn-lfr__check{padding-bottom:var(--space-3)}
.pn-lfr__check ul{display:grid;margin-inline:calc(-1 * var(--space-2))}
.pn-lfr__check li a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--control-md);padding:var(--space-1) var(--space-2);border-radius:var(--r-m);color:inherit;font:var(--type-body);text-decoration:none;transition:background-color var(--dur-1)}
.pn-lfr__check li a:hover{background:var(--surface-2)}
.pn-lfr__check li b{flex:none;font:var(--type-strong);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
/* Penny: her head line, then the numbers as a note (no paper receipt, no monospace, inner heads are labels; MCH-154) */
.pn-lfr__rcpthd{min-height:0;padding:0;margin-bottom:var(--head-gap)}
.pn-lfr__paper{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2);font:var(--type-body)}
.pn-lfr__paper :is(h2,h3){margin:0 0 var(--space-1);font:var(--type-label);color:var(--ink-2)}
.pn-lfr__paper h3{margin-top:var(--space-3)}
.pn-lfr__paper dl div{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-1) 0}
.pn-lfr__paper dd{color:var(--ink);font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
/* ---- one rail (1100–1259): the left rail is a bar — the filter as chips, the sellers seen lately as a labelled row of pictures
   (their names stay for a screen reader and as a tooltip, the green dot says who is reachable); my card is the header's */
@media (min-width:1100px) and (max-width:1259px){
  .pn-lfr__rail--l .pn-lfr__head{display:none}
  .pn-lfr__rail--l .pn-lfr__tail{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-6)}
  .pn-lfr__nav{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .pn-lfr__nav a{gap:var(--space-2);min-height:var(--control-sm);padding:0 var(--space-3);background:var(--surface-2);font:var(--type-label)}
  .pn-lfr__nav a:hover{background:var(--surface-3)}
  .pn-lfr__nav a[aria-current]{background:var(--accent-soft)}
  .pn-lfr__nav a .pc-ico{width:var(--icon-s);height:var(--icon-s)}
  .pn-lfr__seen{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;background:none}
  .pn-lfr__seen .pn-lfr__h{margin:0;font:var(--type-label);color:var(--ink-2);white-space:nowrap}   /* without it the row reads as a second "New faces" */
  .pn-lfr__seen ul{display:flex;gap:var(--space-1);margin:0}
  .pn-lfr__seen a{min-height:0;padding:var(--space-1);border-radius:50%}
  .pn-lfr__seen li:nth-child(n+5){display:none}   /* four pictures: the English bar had 3 px to spare with five and could break while the font loads */
  .pn-lfr__seen .pc-avatar__dot{display:block}
  .pn-lfr__stx{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pn-lfr__mine{display:none}
}
/* ---- a low window: the tails get shorter so that they still fit under the header; lower still, nothing sticks */
@media (min-width:1260px) and (max-height:699px){
  .pn-lfr__seen .pn-lfr__sav{width:var(--avatar-xs);height:var(--avatar-xs);font-size:var(--fs-cap)}
  .pn-lfr__seen small,.pn-lfr__seen small.is-on{display:none}   /* every row one line (the word "Reachable" kept its line before and made the rows uneven) */
  .pn-lfr__seen .pc-avatar__dot{display:block}
}
@media (max-height:699px){
  .pn-lfr__reach li:nth-child(n+5){display:none}
}
@media (max-height:639px){
  .pn-lfr__tail{position:static}
}
/* @end-member-only */

/* @member-only */
/* Modern Dark of the feed (owner 01.11. / 02.11.; moved here from src-css/dark.css on 03.11., design system P0): only what has
   to outrank the kit's dark card rules is left here — the Premium row's seller card (owner 02.11.: photo, heart, @name + age,
   the stars; no flag, badge, Reachable, Top rated, listing count) and the page gutter of the rails. Written once
   (tools/css_twin.php prints the "auto" twin). */
/* @dark-twin */
@media (min-width:1260px){
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm):has(.pn-lfr){--gutter:34px}
}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a[aria-current] .pc-ico{color:var(--accent)}   /* the active rail icon (§2.3); light keeps the ink: pink on its light step is 1.5 : 1 */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs .pc-scard{border-radius:var(--r-m)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard:not(.pn-youcard) :is(.pc-scard__flag,.pc-verified,.pc-scard__meta,.pc-scard__top,.pc-scard__n){display:none}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__name{display:flex;justify-content:flex-start;width:100%;max-width:100%;min-width:0;white-space:nowrap;font:var(--type-strong)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__name > span:first-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* the name gives way, the age always shows */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__name > .pc-scard__age{flex:none;color:var(--ink-2);font-weight:var(--w-regular)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard:not(.pn-youcard) .pc-scard__foot{position:absolute;top:var(--space-2);left:var(--space-2);z-index:5;margin:0;gap:0}   /* owner 02.11.: the stars top left, the heart's twin */
/* the stars: a flat glass chip in the cap size, no blur (MCH-130) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__score{display:inline-flex;align-items:center;gap:var(--space-1);height:24px;min-height:0;padding:0 var(--space-2);border-radius:var(--r-full);background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;font:var(--type-cap);color:var(--ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard:not(.pn-youcard) .pc-scard__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 var(--space-3) var(--space-3);text-align:left}   /* owner 02.11.: the name at the foot, left */
/* the heart: 36 to see, 44 to hit (MCH-129) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-card__fav{width:36px;height:36px;top:var(--space-2);right:var(--space-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-card__fav::after{content:"";position:absolute;inset:-4px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-card__fav .pc-ico{width:var(--icon-s);height:var(--icon-s)}
/* @end-dark-twin */
/* the auto twin (generated by tools/css_twin.php) */
@media (prefers-color-scheme: dark){
@media (min-width:1260px){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm):has(.pn-lfr){--gutter:34px}
}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a[aria-current] .pc-ico{color:var(--accent)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs .pc-scard{border-radius:var(--r-m)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard:not(.pn-youcard) :is(.pc-scard__flag,.pc-verified,.pc-scard__meta,.pc-scard__top,.pc-scard__n){display:none}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__name{display:flex;justify-content:flex-start;width:100%;max-width:100%;min-width:0;white-space:nowrap;font:var(--type-strong)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__name > span:first-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__name > .pc-scard__age{flex:none;color:var(--ink-2);font-weight:var(--w-regular)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard:not(.pn-youcard) .pc-scard__foot{position:absolute;top:var(--space-2);left:var(--space-2);z-index:5;margin:0;gap:0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-scard__score{display:inline-flex;align-items:center;gap:var(--space-1);height:24px;min-height:0;padding:0 var(--space-2);border-radius:var(--r-full);background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;font:var(--type-cap);color:var(--ink)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard:not(.pn-youcard) .pc-scard__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 var(--space-3) var(--space-3);text-align:left}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-card__fav{width:36px;height:36px;top:var(--space-2);right:var(--space-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-card__fav::after{content:"";position:absolute;inset:-4px}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__row > .pc-scard .pc-card__fav .pc-ico{width:var(--icon-s);height:var(--icon-s)}
}

/* @end-member-only */
/* UX 433 B-044 (switch ux433_buyer): the order request's sheet, the undo key and the way to the chat after sending */
.pn-lfsheet__in{display:grid;gap:var(--space-3);min-width:0}
.pn-lfsheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.pn-lfsheet__head h2{margin:0}
.pn-lfsheet__item{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-lfsheet__item b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lfsheet__in textarea{box-sizing:border-box;width:100%;resize:vertical;min-height:84px}
.pn-lf__acts > .pn-lf__undo,.pn-lf__acts > .pn-lf__sentlink{flex:none}
.pn-lf__sentlink{font:var(--type-strong);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* UX 433 B-049 (round 2): the older listings under the feed's week, the market's grid */
.pn-lf__older{display:grid;gap:var(--space-4);margin-top:var(--stack-gap)}
.pn-lf__older h2{margin:0}

/* owner 05.11. («sieht beschissen aus hier kein text ausser "You here?" dann zur paysite»): the join card says one thing — the pink
   plus in the middle of her faded picture, «You here?» large under it on a dark veil, the whole card opens the pay page */
.pn-fs__join .pc-scard__media::after{content:"";position:absolute;inset:0;background:var(--card-cap-scrim-strong);pointer-events:none}
.pn-fs__join .pn-youcard__plus{top:40%;margin:calc(var(--avatar-l) / -2) 0 0 calc(var(--avatar-l) / -2);box-shadow:var(--shadow-e1)}
.pn-fs__row > .pn-fs__join .pc-scard__cap{position:absolute;inset:auto 0 var(--space-5) 0;z-index:3;display:flex;justify-content:center;padding:0 var(--space-3);background:none}
.pn-fs__row > .pn-fs__join .pn-youcard__name{font:var(--type-title);font-weight:var(--w-bold);color:var(--on-media);text-align:center;white-space:nowrap}
/* Promo studio (owner 28.10., templates/partials/mc_promo.php; owner 29.10. 13:30: the original left, five variants right,
   a tap opens the sheet): pn-pst-* only. Tonal surfaces inside (owner 09.10.): panels on the page surface, rows one step
   darker, no extra borders. Tokens only; nothing under 13 px; every target 44 px on the phone. */
.pn-pst__panel{margin-block-end:var(--space-4)}
.pn-pst__as{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);background:var(--surface-2)}
.pn-pst__as label{font-weight:600}.pn-pst__as .pc-input{flex:1 1 160px;max-width:260px}
.pn-pst__owner{font:var(--type-label);color:var(--ink-2);padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-3)}
.pn-pst__asbar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-block-end:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-l);background:var(--surface-2);color:var(--ink);font:var(--type-label)}
.pn-pst__asbar a{color:inherit;min-height:var(--tap);display:inline-flex;align-items:center}
.pn-pst__count,.pn-pst__langnote{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-pst__list{display:grid;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
.pn-pst__row{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);grid-template-areas:"orig out" "orig act" "prog prog";gap:var(--space-2) var(--space-4);align-items:start;background:var(--surface-2);border-radius:var(--r-m);padding:var(--space-3)}
.pn-pst__orig{grid-area:orig;display:flex;gap:var(--space-3);align-items:flex-start;min-width:0}
.pn-pst__thumb{flex:none;width:120px;height:120px;object-fit:cover;border-radius:var(--r-m);background:var(--surface-3)}
.pn-pst__thumb--none{display:grid;place-items:center;overflow:hidden}.pn-pst__thumb--none .pc-nophoto{transform:scale(.6)}
.pn-pst__meta{min-width:0}
.pn-pst__title{margin:0;font:var(--type-strong);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pn-pst__meta small{display:block;margin-block-start:0;font:var(--type-meta);color:var(--ink-2)}
.pn-pst__origlabel{display:block;margin-block-start:var(--space-2);font:var(--type-meta);color:var(--ink-2)}
.pn-pst__out{grid-area:out;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
.pn-pst__tile{appearance:none;display:block;width:100%;padding:0;border:0;background:var(--surface-3);border-radius:var(--r-s);overflow:hidden;cursor:zoom-in;text-align:center;color:var(--ink-2);font:var(--type-label)}
.pn-pst__tile img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pn-pst__tile > span{display:block;padding:var(--space-1) var(--space-1) var(--space-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-pst__tile:hover img{opacity:.92}
.pn-pst__tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-pst__tile--wait{aspect-ratio:4/5.5;background:linear-gradient(100deg,var(--surface-3) 30%,var(--surface-2) 50%,var(--surface-3) 70%);background-size:220% 100%;animation:pn-pst-shimmer 1.6s linear infinite}
.pn-pst__row:not([data-state="building"]) .pn-pst__tile--wait{animation:none;opacity:.5}
@keyframes pn-pst-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.pn-pst__act{grid-area:act;display:grid;justify-items:start}
.pn-pst__state{display:none;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pn-pst__row[data-state="building"] [data-st="building"],.pn-pst__row[data-state="failed"] [data-st="failed"],.pn-pst__row[data-state="none"] [data-st="note"]{display:flex}
.pn-pst__hint{font:var(--type-meta);color:var(--ink-2);text-wrap:balance}.pn-pst__hint:empty{display:none}
.pn-pst__st{display:inline-flex;align-items:center;min-height:24px;font:var(--type-cap);border-radius:var(--r-s);padding:var(--space-1) var(--space-2);white-space:nowrap;background:var(--surface-3);color:var(--ink)}
.pn-pst__st--no{color:var(--danger)}
.pn-pst__prog{grid-area:prog;display:none;height:4px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.pn-pst__row[data-state="building"] .pn-pst__prog{display:block}
.pn-pst__prog i{display:block;height:100%;width:32%;min-width:24px;border-radius:var(--r-full);background:var(--accent);animation:pn-pst-slide 1.6s var(--ease-out,ease-in-out) infinite}
@keyframes pn-pst-slide{from{transform:translateX(-110%)}to{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.pn-pst__prog i,.pn-pst__tile--wait{animation:none}.pn-pst__prog i{width:100%;opacity:.6}}
.pn-pst__me .pn-pst__row{margin-block-start:var(--space-3)}
.pn-pst__thumb--me{border-radius:50%}
.pn-pst__nophoto{display:block;margin-block-start:var(--space-2)}
.pn-pst__locked{display:grid;gap:var(--space-3)}
.pn-pst__gold{margin-block-start:var(--space-3)}
.pn-pst__next,.pn-pst__foot{margin-block-start:var(--space-4)}
.pn-pst__zoom.pn-sheet{max-width:min(92vw,560px)}
.pn-pst__zoomlabel{font:var(--type-label);color:var(--ink-2)}
.pn-pst__fmt{display:flex;gap:var(--space-2);margin-block-end:var(--space-3)}
.pn-pst__fmt .pc-chip{flex:1 1 0;min-height:var(--tap);background:var(--surface-3);color:var(--ink);border-color:transparent}
.pn-pst__fmt .pc-chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);border-color:transparent}
.pn-pst__zoomimg{display:block;width:100%;height:auto;max-height:62svh;object-fit:contain;border-radius:var(--r-m);background:var(--surface-3)}
.pn-pst__where{margin:var(--space-2) 0 0;font:var(--type-meta)}.pn-pst__where:empty{display:none}
.pn-pst__zoombtns{display:flex;gap:var(--space-2);margin-block-start:var(--space-3)}.pn-pst__zoombtns > *{flex:1 1 0}
.pn-pst__zoombtns .pc-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.pn-pst__row--mag{grid-template-columns:minmax(0,1fr);grid-template-areas:"out" "act" "prog"}   /* her magazine (owner 30.10.): the cover big, the pages as a strip, the PDF */
.pn-pst__row--mag .pn-pst__out{display:block}
.pn-pst__magbody{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:var(--space-4);align-items:start}
.pn-pst__tile--wait.pn-pst__magcover{aspect-ratio:4/5.5}
.pn-pst__magcover > span{font:var(--type-label)}
.pn-pst__magside{display:grid;gap:var(--space-3);min-width:0}
.pn-pst__maglabel{margin:0;font:var(--type-label);color:var(--ink-2)}
.pn-pst__magstrip{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:var(--space-1);overscroll-behavior-x:contain}
.pn-pst__magstrip > .pn-pst__tile{flex:0 0 116px;scroll-snap-align:start}
.pn-pst__magstrip > .pn-pst__tile--wait{aspect-ratio:4/5.5}
.pn-pst__magbtns{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-pst__magbtns > *{min-height:var(--tap);flex:0 1 auto}
.pn-pst__magbtns .pc-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.pn-pst__fmt[hidden]{display:none}
.pn-pst__kitbody{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:var(--space-4);align-items:start}   /* her album kit (owner 30.10.): the reel left, the calendar right */
.pn-pst__kitreel{display:grid;gap:var(--space-2);align-content:start;min-width:0}
.pn-pst__tile--wait.pn-pst__kitreel{aspect-ratio:9/16}
.pn-pst__reel{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-m);background:var(--surface-3)}
.pn-pst__kitreel .pn-pst__magbtns > *{flex:1 1 0}
@media (max-width:900px){
  .pn-pst__row{grid-template-columns:minmax(0,1fr);grid-template-areas:"orig" "out" "act" "prog"}
  .pn-pst__thumb{width:88px;height:88px}
  .pn-pst__out{gap:var(--space-1)}
}
@media (max-width:700px){
  .pn-pst__out{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
  .pn-pst__magbody{grid-template-columns:minmax(0,1fr)}
  .pn-pst__magcover{max-width:320px;width:100%;justify-self:center}
  .pn-pst__magbtns > *{flex:1 1 0}
  .pn-pst__kitbody{grid-template-columns:minmax(0,1fr)}
  .pn-pst__kitreel{max-width:280px;width:100%;justify-self:center}
  .pn-pst__gold{width:100%}
}
/* Her choice (owner 31.10.: "Im Promo-Studio soll ihr Content gelistet werden und da entscheidet sie, was sie generiert.";
   switch promo_pick, partials/mc_promo_pick.php): "Your content" with Listings and Photos. Tonal surfaces, no lines; the
   chosen photo carries the pink ring; the sticky bar sits above the tab bar like the bulk bar of My content. */
.pn-pst__tabs{display:flex;gap:var(--space-1);margin:var(--space-3) 0 0;padding:var(--space-1);border-radius:var(--r-m);background:var(--surface-2);width:max-content;max-width:100%}
.pn-pst__tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-sm);padding:0 var(--space-4);border:0;border-radius:var(--r-s);background:transparent;color:var(--ink-2);font:var(--type-label);cursor:pointer}
.pn-pst__tab[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.pn-pst__tab:focus-visible,.pn-pst__src:focus-visible,.pn-pst__ph:focus-visible,.pn-pst__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-pst__tabn{min-width:20px;padding:var(--space-1);border-radius:var(--r-full);background:var(--surface-3);color:var(--ink-2);font:var(--type-cap);text-align:center}
.pn-pst__tab[aria-selected="true"] .pn-pst__tabn{background:var(--surface-2);color:var(--ink)}
.pn-pst__pane{margin-block-start:var(--space-3)}
.pn-pst__pane[hidden],.pn-pst__panel[hidden]{display:none}
.pn-pst__orig--pick{flex-direction:column;align-items:stretch;gap:var(--space-3)}
.pn-pst__srcs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-pst__src{appearance:none;flex:none;width:64px;height:64px;padding:0;border:0;border-radius:var(--r-m);background:var(--surface-3);overflow:hidden;cursor:pointer;opacity:.62;transition:opacity var(--dur-1)}
.pn-pst__src img{display:block;width:100%;height:100%;object-fit:cover}
.pn-pst__src:hover{opacity:.9}
.pn-pst__src[aria-checked="true"]{opacity:1;outline:2px solid var(--ink);outline-offset:2px}
.pn-pst__make{display:grid;gap:var(--space-1);justify-items:start}
.pn-pst__rule{margin:0;font:var(--type-meta);color:var(--ink-2)}.pn-pst__rule:empty{display:none}
.pn-pst__row--pick .pn-pst__out:empty{display:none}
.pn-pst__row[data-state="building"] .pn-pst__make,.pn-pst__row[data-state="failed"] .pn-pst__make{display:none}
.pn-pst__panehelp{margin:0 0 var(--space-3)}
.pn-pst__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-pst__ph{appearance:none;position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-m);background:var(--surface-2);overflow:hidden;cursor:pointer}
.pn-pst__ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pn-pst__ph[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:-2px}
.pn-pst__check{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--glass);box-shadow:inset 0 0 0 2px var(--on-media)}
.pn-pst__ph[aria-pressed="true"] .pn-pst__check{background:var(--accent);box-shadow:none}
.pn-pst__ph[aria-pressed="true"] .pn-pst__check::after{content:"";position:absolute;left:10px;top:5px;width:6px;height:12px;border:solid var(--on-accent);border-width:0 3px 3px 0;transform:rotate(45deg)}
.pn-pst__phtag{position:absolute;left:8px;right:8px;bottom:8px;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass-strong);color:var(--on-media);font:var(--type-label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-pst__bar{position:sticky;bottom:var(--dock);z-index:2;display:grid;gap:var(--space-2);margin-block-start:var(--space-3);padding:var(--space-3);border-radius:var(--r-l);background:var(--surface-2);box-shadow:var(--shadow-e1)}
.pn-pst__barhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:28px}
.pn-pst__barcount{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-pst__clear{appearance:none;min-height:var(--tap);margin-block:calc(-1 * var(--space-2));padding:0 var(--space-2);border:0;background:none;color:var(--ink-2);font:var(--type-label);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-pst__clear[hidden]{display:none}
.pn-pst__baracts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.pn-pst__go{flex-direction:column;gap:0;white-space:normal;text-align:center;min-height:var(--tap)}
.pn-pst__golabel{font-weight:700}
.pn-pst__gorule{font:var(--type-meta)}.pn-pst__gorule:empty{display:none}
@media (max-width:700px){
  .pn-pst__tabs{width:100%}.pn-pst__tab{flex:1 1 0;padding:0 var(--space-2)}
  .pn-pst__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-pst__baracts{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .pn-pst__go{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:0 var(--space-2);text-align:left}
  .pn-pst__makebtn{width:100%}.pn-pst__make{justify-items:stretch}
}
/* owner 02.11. ("nicht im Feed posten oder in Anzeigen"): one calm tonal note under the head where she creates, one quiet
   line in the sheet where she downloads and shares — the small pink dot, no edge, no alert colour */
.pn-pst__outside{display:flex;align-items:flex-start;gap:var(--space-3);margin-block:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2)}
.pn-pst__outside p{margin:0;font:var(--type-body)}
.pn-pst__outside b{display:block;margin-block-end:0;font-weight:600;color:var(--ink)}
.pn-pst__outdot{flex:none;width:8px;height:8px;margin-block-start:8px;border-radius:50%;background:var(--accent)}
.pn-pst__outnote{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}
.pn-pst__outnote .pn-pst__outdot{margin-block-start:4px}
/* owner 02.11. ("total unruhig und rumpelig"): the listing cards of "Your content" are calm and even — one height per row,
   the title in two lines, the price under it, square thumbs (the chosen one bright with a small pink dot, never a ring),
   one quiet full-width key at the foot of every card */
.pc-root .pn-pst__pick .pn-pst__list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pc-root .pn-pst__pick .pn-pst__row--pick{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.pc-root .pn-pst__pick .pn-pst__orig--pick{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-3)}
.pc-root .pn-pst__pick .pn-pst__meta{display:grid;gap:var(--space-1);min-width:0}
.pc-root .pn-pst__pick .pn-pst__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:44px;margin:0;font:var(--type-strong);overflow-wrap:anywhere}
.pc-root .pn-pst__pick .pn-pst__meta small{font:var(--type-meta);color:var(--ink-2)}
.pc-root .pn-pst__pick .pn-pst__srcs{gap:8px}
.pc-root .pn-pst__pick .pn-pst__src{position:relative;width:56px;height:56px;border-radius:var(--r-m);opacity:.45;outline:0;overflow:visible}
.pc-root .pn-pst__pick .pn-pst__src img{border-radius:var(--r-m)}
.pc-root .pn-pst__pick .pn-pst__src[aria-checked="true"]{opacity:1;outline:0}
.pc-root .pn-pst__pick .pn-pst__src[aria-checked="true"]::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface-2)}
.pc-root .pn-pst__pick .pn-pst__src:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pc-root .pn-pst__pick .pn-pst__make{align-self:stretch;width:100%;margin-top:auto;justify-items:stretch}
.pc-root .pn-pst__pick .pn-pst__makebtn{width:100%}
@media (max-width:700px){.pc-root .pn-pst__pick .pn-pst__title{min-height:0}}
/* App chrome (docs/design-system.md §6, §7.2, §12): header, phone tab bar and footer on the chrome with the grey 50 %
   hairline (--mline). Keys: pills / circles of --header-key; current page: a 2 px accent underline or mark; focus on the
   chrome: 2 px accent (the light theme's --focus-ring is dark). After the page files, before dark.css. */

/* ---------- Header (all widths): chrome, the hairline under it ---------- */
.pc-header{background:var(--t-chrome,var(--chrome));color:var(--on-chrome);border-bottom:1px solid var(--hline);box-shadow:none;--count-ring:var(--t-chrome,var(--chrome))}
.pc-header .pc-logo{color:var(--on-chrome)}
.pc-header .pc-nav{gap:var(--space-6)}
.pc-header .pc-nav a{color:var(--on-chrome)}
.pc-header .pc-nav a.is-active,.pc-header .pc-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:var(--space-2)}
.pc-header .pc-nav .pc-count{position:static;box-shadow:none}
.pc-header .pn-header__end{gap:var(--space-3)}
.pc-header .pc-header__icons{gap:var(--space-2)}
.pc-header .pc-search,.pc-header form.pn-search{flex:1 1 auto;max-width:360px;height:var(--control-md);border-radius:var(--r-m);border:0;background:var(--chrome-well);color:var(--on-chrome-2);box-shadow:none}
.pc-header .pc-search:hover,.pc-header form.pn-search:hover{background:var(--chrome-well-hover)}
.pc-header .pc-search .pc-ico{width:var(--icon-m);height:var(--icon-m);color:var(--on-chrome-2)}
.pc-header form.pn-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--on-chrome);font:var(--type-ui);outline:none}
.pc-header form.pn-search input::placeholder{color:var(--on-chrome-2);opacity:1}
.pc-header form.pn-search:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* T32: the search takes the flexible space, and its placeholder is a CSS layer (long / short) that hides once she
   types, so no language is cut mid-word at 1024. */
.pc-header .pc-search,.pc-header form.pn-search{flex:1 1 200px;min-width:0;max-width:360px}
.pc-header form.pn-search{position:relative}
.pn-search__ph{position:absolute;left:var(--space-10);right:var(--space-4);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--on-chrome-2);font:var(--type-ui);white-space:nowrap}
.pn-search__ph-s{display:none}
.pc-header form.pn-search input:not(:placeholder-shown) + .pn-search__ph{display:none}
@media (max-width:1100px){.pn-search__ph-l{display:none}.pn-search__ph-s{display:inline}}
/* T20: header buttons never wrap (fr "Inscription gratuite" went to two lines at 360; phones show the short label). */
.pc-header .pc-btn{white-space:nowrap}
.pc-header .pc-iconbtn{width:var(--header-key);height:var(--header-key);border-radius:var(--r-full);border:0;background:var(--chrome-well);color:var(--on-chrome)}
.pc-header .pc-iconbtn .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pc-header .pc-iconbtn:hover{background:var(--chrome-well-hover)}
.pc-header .pc-btn{min-height:var(--header-key);padding:0 var(--space-5);border-width:0;border-radius:var(--r-full);margin-bottom:0;font:var(--type-nav);gap:var(--space-2);box-shadow:none;transform:none}
.pc-header .pc-btn .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pc-header .pc-btn--ghost{border-color:transparent;background:var(--chrome-well);color:var(--on-chrome)}   /* no borders 18.10.: "Log in" is a chrome well, not an outlined ghost */
.pc-header .pc-btn--ghost:hover{border-color:transparent;background:var(--chrome-well-hover)}
.pc-header .pc-btn--primary{border-color:transparent}
.pc-header .pn-header__avatar{border:0}
.pc-header .pn-header__avatar.pc-avatar--ring{border:0}   /* no borders 18.10.: one pink key per view, no pink ring */
.pc-header .pc-logo:focus-visible,.pc-header .pc-nav a:focus-visible,.pc-header .pc-iconbtn:focus-visible,.pc-header .pn-header__avatar:focus-visible,.pc-header .pc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:701px){.pc-header .pn-appbar__search{display:none}}
/* Owner 30.09.: the light/dark key; both icons in one grid cell, the theme picks moon or sun */
.pc-header .pn-themebtn > .pc-ico{grid-area:1 / 1}
.pc-header .pn-themebtn__sun{display:none}
:root[data-theme="dark"] .pc-header .pn-themebtn__sun{display:block}
:root[data-theme="dark"] .pc-header .pn-themebtn__moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pc-header .pn-themebtn__sun{display:block}
  :root:not([data-theme="light"]) .pc-header .pn-themebtn__moon{display:none}
}
/* Seller phones: "Start earning" = the small pink header button, one line. */
.pc-header .pn-header__earn{white-space:nowrap;padding-inline:var(--space-3)}
/* The header join pill never wraps (the phone short label: header.php, nav.join_short). */
.pc-header .pn-header__join{white-space:nowrap}
/* Between 701 and 1100 the member header (nav + search + New ad + icons) gets tighter gaps so it stays on the column. */
@media (min-width:701px) and (max-width:1100px){
  .pc-header{gap:var(--space-4)}
  .pc-nav{gap:var(--space-4)}
  .pc-header .pc-search,.pc-header form.pn-search{max-width:220px}
}
/* AD4 03.10. (docs/ad4-03-10.md): on a small tablet the seller header (nav + search + "Post in market" + icons) needs
   780-815 px in es / it / fr / pt, so 701-800 scrolled sideways on every seller page. Up to 860 the key is its plus
   circle (the label stays the accessible name: font-size 0, not display none). */
@media (min-width:701px) and (max-width:860px){
  .pc-header .pn-header__new{width:var(--header-key);padding:0;gap:0;justify-content:center}
  /* UX polish 23.10. UX-057: the label is sr-only (its span, header.php) instead of font-size:0 — readers and zoom keep a real text. */
  .pc-header .pn-header__newlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* UX 17.10. #31: a guest's phone header keeps the bag, "Join free" and the menu; light / dark is a row in the menu
   (header.php .pc-burger__theme, the house switch), as the members have it in their drawer. */
@media (max-width:700px){
  .pc-header:has(.pc-burger) .pn-themebtn{display:none}
}
.pc-header .pc-burger__foot > .pc-burger__theme{flex:1 1 100%;min-height:var(--tap);padding:0 var(--space-2) 0 var(--space-3);background:var(--chrome-well);border-radius:var(--r-m)}
.pc-burger__theme .pc-switch{background:var(--chrome-well-hover)}
.pc-burger__theme[aria-pressed="true"] .pc-switch{background:var(--accent)}
/* AD4 03.10.: at 320 a free seller's header (theme + My listings square + "Start earning") needed 332-357 px in en / it /
   pt. Under 341 the theme switch steps aside while "Start earning" is drawn (system dark still applies); the two keys
   and the one pink key stay. */
@media (max-width:340px){
  .pc-header:has(.pn-header__earn) .pn-themebtn{display:none}
  .pc-header .pn-header__earn{padding-inline:var(--space-2)}
}
/* UX 100 merge 17.10.: the fixed "New listing" key (#84) beside the bell (#83) and the menu button needs 102-127 px in pt / it / fr;
   under 341 px it is the "+" alone (its name stays the aria-label), above it the words alone. */
.pc-header .pn-header__earn > svg{display:none}
@media (max-width:340px){
  .pc-header .pn-header__earn > svg{display:block}
  .pc-header .pn-header__earn{width:var(--header-key);padding:0;justify-content:center}
  .pc-header .pn-header__earnlbl{display:none}
}
/* AD4 03.10.: at 320 the labelled "My listings" line button (Premium / paygate header) ran 2-8 px past the edge in fr / pt. */
@media (max-width:340px){
  .pc-header .pc-btn.pn-header__items{padding-inline:var(--space-3);gap:var(--space-1)}
}
/* visual audit VM-001 (26.10.): on the listing editor the header holds one more key, so at 375-390 it still ran 3-6 px past the
   edge; the labelled "My listings" key becomes its round key up to 400 px there too (the label stays for readers) */
@media (max-width:400px){
  .pc-header:has(.pn-header__items) .pc-btn.pn-header__items:not(:only-child){width:var(--header-key);padding:0;gap:0;justify-content:center}
  .pc-header:has(.pn-header__items) .pc-btn.pn-header__items:not(:only-child) .pn-header__itemslbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:340px){
  /* UX polish 23.10. UX-001: at 320 the labelled "My listings" key (111 px) beside the pay key, the bell and the drawer
     button ran the header to 371-391 px (the page scrolled sideways). Under 341 it is its round key; the label stays
     the link's text for readers (sr-only). */
  .pc-header .pc-btn.pn-header__items{width:var(--header-key);padding:0;gap:0;justify-content:center}
  .pc-header .pn-header__itemslbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Polish-g 02.10. (docs/polish-guest-02-10.md): guests on a small tablet (701-960) get the phone header: the nav and
   "Log in" move into the burger (it already holds both). The full guest header needs 780-900 px in es / it / fr (fr:
   "Inscription gratuite"), so on a 768 iPad the pink Join was cut at the edge and the page scrolled sideways. */
@media (min-width:701px) and (max-width:960px){
  body.pc-guest .pc-header{justify-content:space-between}
  body.pc-guest .pc-header .pc-nav,body.pc-guest .pc-header .pc-header__icons > .pc-btn--ghost{display:none}
  body.pc-guest .pc-header .pn-header__end{display:flex;align-items:center;gap:var(--space-2)}
  body.pc-guest .pc-header .pc-burger.pc-show-sm{display:block !important}
}
/* Phone (§12): logo 46 (under 381: 40), the nav and the login move into the burger menu (guests) / the tab bar (members). */
@media (max-width:700px){
  .pc-header{justify-content:space-between}
  .pc-header .pc-logo{font-size:46px;min-height:0}
  .pc-header .pn-header__end{display:flex;align-items:center;gap:var(--space-2)}
  .pc-header .pn-header__avatar{display:none}
  .pc-header .pc-header__icons{gap:var(--space-2)}
}
/* 360: logo + search + theme + Join + burger fit without a horizontal scroll */
@media (max-width:380px){
  .pc-header .pc-logo{font-size:40px}
  .pc-header .pn-header__end,.pc-header .pc-header__icons{gap:var(--space-1)}
  .pc-header .pn-header__join{padding-inline:var(--space-3)}
}

/* Light chrome (owner 04.11.2026, tokens.css «LIGHT CHROME»: the header on paper). The current page's icon key keeps its pink
   fill (tonal.css: --accent-soft) and draws its glyph in the deep pink of the light theme (--pink-glyph, 5.0:1 on that fill;
   the brand pink would be 1.5:1); a nav word under the pointer turns to the light theme's pink ink (--accent-text, 5.7:1 on
   paper), as it turns pink in dark. */
[data-theme="light"] .pc-root:not(.pn-adm) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]),
[data-theme="light"] .pc-root:not(.pn-adm) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]) svg,
[data-theme="light"] .pc-root:not(.pn-adm) .pc-header .pn-hsearch__key:has(+ .pn-hsearch:popover-open){color:var(--pink-glyph)}
[data-theme="light"] .pc-root:not(.pn-adm) .pc-header .pc-nav a:hover{color:var(--accent-text)}
/* focus on the light chrome: the light theme's own ring (--focus-ring, anthracite), as on the page — the brand pink ring of
   the dark chrome would be 1.9:1 on paper */
[data-theme="light"] .pc-root:not(.pn-adm) :is(.pc-header,.pn-tabbar,.pc-footer) :focus-visible{outline-color:var(--focus-ring)}

/* ---------- Burger menu (guests on phones) ---------- */
.pc-header .pc-burger__menu .pc-count{position:static;box-shadow:none}
/* Polish-g 02.10.: the two doors at the sheet's foot share a row while they fit and stack full width when they do not
   (fr "Inscription gratuite" + "Se connecter" ran out of the 335 px sheet: "Se conne|" cut at its edge) */
.pc-header .pc-burger__foot{display:flex;flex-wrap:wrap}
.pc-header .pc-burger__foot > .pc-btn{flex:1 1 auto}
.pc-header .pc-burger__foot > .pc-burger__lang{flex:1 1 100%}

/* ---------- Tab bar (members on phones, §12): chrome, the hairline on top, the current tab a tonal pill ---------- */
.pn-tabbar{background:var(--t-chrome,var(--chrome));border-top:1px solid var(--mline);box-shadow:none;--count-ring:var(--t-chrome,var(--chrome))}
.pn-tabbar a{color:var(--on-chrome-2)}
.pn-tabbar a:hover{color:var(--on-chrome)}
.pn-tabbar a.is-active,.pn-tabbar a[aria-current="page"]{color:var(--on-chrome)}
.pn-tabbar a.is-active .pn-tab__pill,.pn-tabbar a[aria-current="page"] .pn-tab__pill{background:var(--chrome-well-hover);border-color:transparent;color:var(--on-chrome)}   /* A8 (owner 18.10.): tonal, not pink */
.pn-tabbar .pc-count{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 2px var(--count-ring)}
/* Over the full-bleed video feed the bar turns to glass (videos.css switches it on via body:has(.pn-vpage.is-feed)). */
.pn-tabbar.is-glass{background:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);--count-ring:var(--glass-strong)}
@media (min-width:701px){.pn-tabbar{display:none}}
/* The buy bar replaces the tab bar on ad detail; chat threads hide it in chat.css. */
@media (max-width:700px){body.pn-has-adbar .pn-tabbar{display:none}}
/* A modal sheet is the one layer on top: the member tab bar steps aside while it is open. */
body:has(dialog.pn-sheet[open]) .pn-tabbar,body:has(dialog.pn-sheet:target) .pn-tabbar{display:none}   /* QA m6: also the no-JS filter sheet */
/* T17: where no tab bar shows on phones, a flush sticky bar (--dock-flush) sits on the safe area instead. */
@media (max-width:700px){body.pc-guest,body.pn-has-adbar,body:has(.pn-itemedit),body:has(.pn-chatpage),body:has(.pn-store--guest){--dock-flush:env(safe-area-inset-bottom)}}

/* ---------- Footer (§12): chrome, the hairline on top, the inks of the chrome ---------- */
.pc-footer{padding:var(--space-8) var(--col-pad) var(--space-6);background:var(--footer-bg,var(--chrome));border-top:1px solid var(--mline);color:var(--on-chrome-2);font:var(--type-meta)}
.pc-footer a{color:var(--on-chrome-2)}
.pc-footer a:hover{color:var(--on-chrome)}
.pc-footer .pc-logo{font-size:30px;color:var(--on-chrome)}
.pc-footer .pn-gfooter__about{margin:var(--space-3) 0 0;font:var(--type-meta)}
.pc-footer .pn-gfooter__h{margin:0 0 var(--space-3);font:var(--type-cap);color:var(--on-chrome)}
.pc-footer .pn-gfooter__col a{font:var(--type-meta)}
.pc-footer .pn-gfooter__adult{min-height:24px;margin-top:var(--space-4);padding:var(--space-1) var(--space-2);border:0;border-radius:var(--r-s);background:var(--chrome-well);color:var(--on-chrome);font:var(--type-cap)}
.pc-footer .pn-gfooter__bar{gap:var(--space-3);margin-top:var(--space-6);padding-top:0}
.pc-footer .pn-gfooter__bar ul{gap:var(--space-2)}
.pc-footer .pn-gfooter__bar a{min-height:var(--control-sm);padding:0 var(--space-3);border:0;border-radius:var(--r-full);background:var(--chrome-well);font:var(--type-label)}
.pc-footer .pn-gfooter__bar a:hover{background:var(--chrome-well-hover)}
.pc-footer .pn-gfooter__globe{width:var(--icon-s);height:var(--icon-s)}
/* the current language: the fill only */
.pc-footer .pn-lang a[aria-current],.pc-burger__lang a[aria-current]{background:var(--chrome-well-hover);border-color:transparent;color:var(--on-chrome)}
.pc-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:701px){.pc-footer .pn-gfooter--member .pn-gfooter__grid,.pn-gfooter--member .pn-gfooter__grid{gap:var(--space-6)}.pn-gfooter--member .pn-gfooter__col ul{gap:var(--space-2) var(--space-6)}}
@media (max-width:700px){
  .pc-footer{padding:var(--space-8) var(--gutter) calc(var(--dock) + var(--space-6))}
  .pc-footer .pn-gfooter__grid{gap:var(--space-6)}
  .pc-footer .pn-gfooter__bar{margin-top:var(--space-6);padding-top:0}
  .pc-footer .pn-gfooter__globe{margin-top:var(--space-3)}
  body:not(.pc-guest) .pc-footer{display:none}   /* owner 03.10.: no footer for members on phones */
}
/* Header and footer content sit on the one column (--col-pad) at every desktop width. */
@media (min-width:701px){.pc-header,.pc-footer{padding-inline:var(--col-pad)}}
/* QA m7: skip link — off screen until it gets keyboard focus, then above the header. */
.pc-skip{position:absolute;left:var(--gutter);top:var(--space-3);z-index:var(--z-toast);transform:translateY(-200%)}
.pc-skip:focus,.pc-skip:focus-visible{transform:none;outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:700px){.pc-search,.pc-header .pc-search,.pc-header form.pn-search{height:var(--control-md)}}


/* creator door (owner 27.10.): the header key only where the row has room for it beside Log in and Join free; tablets and phones reach it in the menu */
.pc-btn.pn-header__creator{display:none}
@media (min-width:1360px){.pc-btn.pn-header__creator{display:inline-flex}}
/* NO BORDERS (owner 18.10., design/v7/noborder/ad-report.md): the tonal rules for every page — guest pages, join and
   login, the member area. Sections 1-5 were the member layer's own (src-css/inside.css, owner 09.10.); they moved here,
   outside the member marker, so the guest bundles (tools/css_guest.php) carry them too. The tokens are the NO BORDERS block
   in tokens.css (--line transparent, the ladder, the veils). Every rule is scoped through :where(), so it weighs what the
   component's own rule weighs and a page rule that is more specific still wins. Admin (.pn-adm) keeps its lines.
   Loaded after chrome.css and before inside.css (tools/build_css.sh). */

/* 1 · Controls: one step up from whatever they stand on. The kit's controls paint themselves with --sunken (rest) and
   --surface-2 (pointer); here those two names point at the veil ON the control itself, so the control's own rules do
   the painting and a page rule that gives a control another face (the paper disc on a photo, a pink key) is untouched.
   The line, secondary and soft buttons, chips, tabs, segments, the back chip, the round icon button, the row's icon
   disc and the stepper all follow; none has a frame (--line is transparent). */
:where(.pc-root:not(.pn-adm)) :is(.pc-btn,.pc-chip,.pc-tab,.pn-backchip,.pn-rowicon,.pc-iconbtn,.pc-stepper button),
:where(.pc-root:not(.pn-adm)) :is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label){--sunken:var(--t-tint);--surface-2:var(--t-tint-2)}
:where(.pc-root:not(.pn-adm)) :is(.pc-btn--ghost,.pc-iconbtn--plain,.pc-stepper button):hover{background:var(--t-tint);border-color:transparent}
/* destructive: the colour stays the cue, as a wash instead of a frame */
:where(.pc-root:not(.pn-adm)) .pc-btn--danger{background:var(--t-danger);border-color:transparent}
:where(.pc-root:not(.pn-adm)) .pc-btn--danger:hover{background:var(--t-danger-2)}
/* the keys on the chrome (header, dark bars): the chrome well, like the header's icon squares */
:where(.pc-root:not(.pn-adm)) :is(.pc-header .pc-btn--ghost,.pc-btn--on-chrome,.pn-stop .pc-btn--line,.pn-vbox .pn-vrail){background:var(--chrome-well);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pc-header .pc-btn--ghost,.pc-btn--on-chrome,.pn-stop .pc-btn--line,.pn-vbox .pn-vrail,.pn-vunavail .pc-btn,.pc-header.pn-wizbar .pc-iconbtn--on-chrome,.pn-wizbar__exit):hover{background:var(--chrome-well-hover);border-color:transparent}
/* where you are, on the chrome: the accent's soft fill and the pink glyph, not a pink frame */
:where(.pc-root:not(.pn-adm)) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]){background:var(--accent-soft);border-color:transparent}

/* 2 · Chosen: a fill, never a frame. Chips, tabs and segments paint "chosen" with --btn-ink; on them it is --t-sel,
   two clear steps over the veil. A chosen plan is the accent's soft fill instead of a pink frame. */
:where(.pc-root:not(.pn-adm)) :is(.pc-chip,.pc-tab,.pc-selchip),
:where(.pc-root:not(.pn-adm)) :is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label){--btn-ink:var(--t-sel);--on-btn-ink:var(--on-t-sel)}
:where(.pc-root:not(.pn-adm)) :is(.pc-chip.is-selected,.pc-chip[aria-current],.pc-chip[aria-pressed="true"],.pc-chip:has(input:checked),.pc-tab.is-active,.pc-tab:has(input:checked),.pc-selchip.is-set .pc-input),
:where(.pc-root:not(.pn-adm)) :is(.pc-seg,.pn-seg,.pc-tabs) > :is(.is-active,[aria-current="page"],[aria-current="true"],[aria-selected="true"],[aria-pressed="true"],label:has(input:checked)){border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-plan,.pn-wiz .pn-plan):has(input:checked){border-color:transparent;box-shadow:inset 0 0 0 2px var(--accent)}   /* visual audit VM-018: a ring, no fill */
/* AD 20.10. AD-200: the chosen recommended plan sits on --accent-soft too, so its on-dark texts (pale label, grey billed
   line, pink price and saving) fell to about 1.5:1 in light. Chosen = every text in ink (in dark --ink is the light ink,
   so both themes read), the saving an ink chip. */
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked){--dk-ink:var(--ink);--dk-ink-2:var(--ink-2);color:var(--ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) :is(.pn-plan__price,.pn-plan__days,.pn-plan__pm){color:var(--ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) .pn-plan__save{display:inline-block;padding:3px 7px;border-radius:var(--radius-full);background:var(--btn-ink);color:var(--on-btn-ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) input.pc-radio:checked{background:var(--btn-ink);border-color:var(--btn-ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) input.pc-radio:checked::after{background:var(--on-btn-ink)}

/* 3 · Fields: the one frame that stays. A filled, inset field plus a 1 px edge at 3:1 against the surface it stands on
   (WCAG 1.4.11); the focus ring is the component's own. An empty upload slot is a veil, not a dashed box. */
/* UX 17.10. #74: no frame at rest. The field is its tonal fill; the 3:1 edge (--t-field-edge) is a 1 px line under it,
   the full frame + ring come with focus (components.css .pc-input:focus, items.css .pn-pricebox:focus-within), red with an
   error. A fill alone cannot reach 3:1 here: in dark even black on the panel is 1.4:1. */
/* owner 18.10. (screenshot of the listing editor: "die Forms haben noch so hässliche Striche"): no line under a field at rest
   either; the darker fill is the field, the frame + ring still come with focus, red with an error. */
:where(.pc-root:not(.pn-adm)) :is(.pc-input,.pn-pricebox){border-color:transparent;box-shadow:none}
/* no borders 18.10. (AD report 3c): the filled-field shape. Under a radius on all four corners the 1 px edge curled up at
   both ends and read as a stray underline; with a small foot radius it is an intentional baseline. */
:where(.pc-root:not(.pn-adm)) :is(.pc-input,.pn-pricebox){border-radius:var(--r-field) var(--r-field) var(--r-field-foot) var(--r-field-foot)}
:where(.pc-root:not(.pn-adm)) .pc-slot:not(.is-filled){background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) .pc-slot:not(.is-filled):hover{background:var(--t-tint-2)}
/* AD 20.10. AD-161: the item editor's empty photo slots and the video slot had no visible area (surface on surface, edge
   transparent) — the same tinted tile as .pc-slot and the legacy editor's .pn-lislot */
:where(.pc-root:not(.pn-adm)) :is(.pn-slot,.pn-vslot:not(.has-video):not(.is-uploading)){background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-slot,.pn-vslot:not(.has-video):not(.is-uploading)):hover{background:var(--t-tint-2)}

/* 4 · Overlays: their own tone, the lightest container, and the only soft shadow inside (--sh-float / --sh-sheet). */
:where(.pc-root:not(.pn-adm)) :is(.pn-sheet,.pn-menu,dialog){--surface:var(--t-over);--sunken:var(--t-over-2);--surface-2:var(--t-over-3);--t-field-edge:var(--t-field-edge-over);--ink-3:var(--ink-2)}
/* 5 · Pieces that were a frame and nothing else: the veil takes the frame's place; where the grey line was a fill
   (the sheet's grab, the offline dot, a declined deal) it is --t-mute; a radio tick keeps its ring. */
:where(.pc-root:not(.pn-adm)) :is(.pn-safeline,.pn-liprice,.pn-whc,.pn-vunlock__ico,.pn-vgate__ico,.pn-rowbtn.pc-btn--ghost,.pn-match__key.pc-btn--ghost,.pn-lislot,.pn-slot-add){background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-rowbtn.pc-btn--ghost,.pn-match__key.pc-btn--ghost,.pn-lislot:not(.is-filled),.pn-slot-add):hover{background:var(--t-tint-2)}
:where(.pc-root:not(.pn-adm)) .pn-vsolo .pn-vrail{background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-vsolo .pn-vrail,.pn-offertile,.pn-starter.pc-chip):hover{background:var(--t-tint-2);border-color:transparent}
/* the reply that waits (Matches): the accent's soft fill and pink text; the pointer makes it the pink key */
:where(.pc-root:not(.pn-adm)) :is(.pn-sheet__grab,.pn-lhstate:not(.pn-lhstate--live,.pn-lhstate--review,.pn-lhstate--rejected,.pn-lhstate--nophoto,.pn-lhstate--nudity) > i){background:var(--t-mute)}
:where(.pc-root:not(.pn-adm)) .pn-deal.is-declined .pn-deal__ico{background:var(--t-mute)}
:where(.pc-root:not(.pn-adm)) .pn-offerpick__tick{box-shadow:inset 0 0 0 2px var(--ink-3)}


/* 6 · No borders (owner 18.10.): what lost its frame and needs a fill or a cue of its own.
   Listing and seller cards keep only the quiet edge (--t-card-edge, tokens.css); under the pointer it rises a little. */
@media (hover:hover){
  :where(.pc-root:not(.pn-adm)) .pn-prodcard:hover > .pn-card-link::after,:where(.pc-root:not(.pn-adm)) .pc-scard:hover::after{box-shadow:inset 0 0 0 1px var(--t-card-edge-hover)}
}
/* a review inside a panel: the well, one level only (it was an outlined card in a panel) */
:where(.pc-root:not(.pn-adm)) .pn-panel .pn-review{margin-bottom:8px;padding-inline:16px;border-radius:var(--r-tile);background:var(--sunken)}
/* inline code, the price box's typical row: wells instead of outlines and dashes */
:where(.pc-root:not(.pn-adm)) :not(pre) > code{border-color:transparent;background:var(--sunken);border-radius:var(--r-label)}
/* the phone's sticky buy bar and the burger menu float on their shadow, not on a ring */
:where(.pc-root:not(.pn-adm)) .pc-burger__menu{border-color:transparent}
:where(.pc-root:not(.pn-adm)) .pc-stepper button:hover{background:var(--t-tint-2)}
/* dark boxes (the buy door, the dark box, the hero stat, go-live, the buy band, the worth box): anthracite in light too, so
   a kit key in them takes the on-dark veil and ink. Before 18.10. the outline key was a paper face there; the page veil
   (ink 7 %, dark in light) and the ink label would vanish on anthracite (the guest profile's "Join free", light). */
:where(.pc-root:not(.pn-adm)) :is(.pc-door--buy,.pn-door--buy,.pc-box--dk,.pn-herostat,.pn-golive,.pn-lp-buy,.pn-lpm-worth) :is(.pc-btn--line,.pc-btn--secondary,.pc-btn--soft,.pc-chip,.pc-iconbtn:not(.pc-iconbtn--primary,.pc-iconbtn--glass),.pc-stepper button){--ink:var(--dk-ink);--sunken:var(--chrome-tint);--surface-2:var(--chrome-tint-press);--btn-line-bg:var(--chrome-tint)}
/* AD 21.10. AD5G-001/002: the partner application, the copyright / report notices (.pn-l3c) and the partner login sit on the
   guide's paper: their fields were paper on paper (no edge), so only the labels showed. Inside these forms a field is the
   panel's well (--field-in), as in every other panel (components.css). */
:where(.pc-root:not(.pn-adm)) :is(.pn-affap,.pn-affown__new,.pn-affown__login,.pn-l3c__form){--field:var(--field-in)}
/* AD5G-022: the listing photo's frame was a transparent 1 px border over the gallery's own surface, so a lighter seam ran
   round the photo (in dark a grey stroke). Now the same quiet grey ring as the listing cards (--t-card-edge, owner: grey
   50 %, never white, never removed), drawn over the page, not over the gallery's fill. */
:where(.pc-root:not(.pn-adm)) .pn-dt .pn-gal{border-color:var(--t-card-edge,transparent);background-clip:padding-box}
/* @member-only */
/* TONAL SURFACES INSIDE (owner 09.10., docs/variants-08-10.md "Tonal surfaces inside"). The member area's own layer:
   last in pnew.css, never in a guest bundle (tools/css_guest.php drops the block between the markers). Its tokens are
   the member block at the foot of tokens.css; there --line is transparent, so every panel, card, box, tile and badge
   that drew a 1 px frame from it keeps its box and loses the line. No borders (owner 18.10.): the controls-as-veil,
   chosen-as-fill, field, overlay and frame-to-veil rules (sections 1-5) moved to src-css/tonal.css, which every page
   loads (guest bundles too); what is left here is member-only.
   Every rule is scoped to the member body through :where(), so it weighs what the component's own rule weighs and a
   page rule that is more specific still wins. A new component built from the kit classes inherits all of it. */

/* 6 · One pink key per view (owner 10.10.): the seller's header keys ("New listing" on phones
   and desktop, UX 17.10. #84) step down to the chrome well whenever the page's own content shows a pink key at that size — read from the
   page itself, so a new page needs no list (pnew_header_keys keeps its named cases). Never hidden, only lighter. Not
   counted: a key in a closed dialog or a [hidden] block, a disabled one, one kept for the other size (.pc-hide-sm /
   .pc-show-sm). Breakpoints = components.css (700 / 701). */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-hide-sm,.pc-hide-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay){background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-hide-sm,.pc-hide-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay):hover{background:var(--chrome-well-hover)}
  /* 7 · The head band (back chip + jump pills, partials/ui_apphead.php): every control keeps the 44 px tap floor
     (components.css), and wrapped pill rows sit 12 px apart, so two rows' 44 px hit areas meet and never overlap. */
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-apphead__tabs :is(.pc-seg,.pn-seg){row-gap:12px}
}
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-show-sm,.pc-show-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay){background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-show-sm,.pc-show-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay):hover{background:var(--chrome-well-hover)}
}
/* owner 14.10.: "Recently active" beside @name (members only, so here in the member layer; text only — no dot). On a narrow line the word gives way before
   the name (ellipsis), so @name stays readable. The middle dot is decoration (empty alt text). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-card__act{flex:0 4 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-cap);color:var(--scard-ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-card__act::before{content:"\00b7\00a0";content:"\00b7\00a0" / ""}
/* support as a member (owner 14.10., lib/support_dm.php): only the support account's own thread — the German line under a message
   and its composer tools (write in German, AI draft). Members never get these classes. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr{display:grid;gap:2px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr__l{font:var(--type-cap);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr[data-pending] .pn-sdmtr__t{opacity:.7}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr[hidden]{display:none}   /* UX 433 G-057: the chat translation under the original, hidden until her tap */
/* Chat + content translation (owner 18.10., lib/chat_tr.php, lib/content_tr.php): the meta line beside a time or date — the
   time's own font, --ink-3 (own chat bubble: the time's colour), no pink, no frame, no fill, 6 px to the time; a 32 px tap
   area laid invisibly over the line. The same hint in the chat (.pn-lctr) and on listings, profiles, reviews, wishes (.pn-trhint). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint){position:relative;display:inline-flex;align-items:center;gap:var(--space-1);margin:0 var(--space-1) 0 0;padding:0;border:0;background:none;font:var(--type-cap);color:var(--ink-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lctr{font:inherit}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-bubble--out .pn-lctr{color:inherit}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint)::before{content:"";position:absolute;inset:-10px -6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint) .pn-lctr__g{width:12px;height:12px;flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-s)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint)[disabled]{cursor:progress}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trhint[hidden],:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__orig[hidden]{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trhint{margin:0 0 0 6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trline{margin:6px 0 0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trline .pn-trhint{margin:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm{display:grid;gap:8px;margin:0 0 8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__de{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__lang{flex:1 1 auto;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__note,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__msg{margin:0;font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__msg.is-bad{color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__panel{display:grid;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r-m)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__panel[hidden]{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__h{margin:0;font:var(--type-strong);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__sub{margin:0;font:var(--type-cap);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) blockquote.pn-sdm__de{margin:0;padding:6px 10px;border-left:3px solid var(--line);font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__out{width:100%;min-height:72px;resize:vertical}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__acts{display:flex;flex-wrap:wrap;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__warn{margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--danger-soft);color:var(--ink);font:var(--type-meta)}
/* old support requests (owner 15.10., lib/support_backlog.php): the support account's list "Alte Anfragen" (/account/chats/?sdm=backlog,
   partials/sdm_backlog.php) and the note above its composer. Tonal: entries on a lighter surface, the note to check first on the danger tint. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl{display:grid;gap:12px;padding:16px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__h{margin:0;display:flex;align-items:center;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__sub,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__l,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__meta{margin:0;font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__l{font-weight:600;font-size:12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__none{margin:0;display:flex;align-items:center;gap:var(--space-2);font:var(--type-body);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__item{display:grid;gap:var(--space-2);justify-items:start;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__item.is-done{padding:8px 12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__top{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2);font:var(--type-body);color:var(--ink);min-width:0;max-width:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__name{font-weight:600;overflow-wrap:anywhere}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__check{margin:0;display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--danger-soft);color:var(--ink);font:var(--type-meta)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__check .pc-ico{flex:0 0 auto;margin-top:2px;color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__de{margin:0;padding:0 0 0 10px;border-left:3px solid var(--line);white-space:pre-line;overflow-wrap:anywhere;font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__done>summary{cursor:pointer;font:var(--type-label);color:var(--ink-2);padding:var(--space-1) 0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__done>.pn-sbl__list{margin-top:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__bl{display:flex;gap:6px;align-items:flex-start}
/* Support-Dashboard (owner 15.10., lib/support_dash.php, partials/sdm_dash.php): the support account's own /account/home.
   Third round ("mit Tabbern", "mach Grids daraus"): tabs as the kit's seg pills (scrolling sideways on phones), tiles and
   picture tiles on the well surface of the panel, flags on the picture, the bulk bar a sticky overlay surface above the
   dock; warnings on the danger tint. Only the minor list is blurred, on its list class, until the one uncover link. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd{--sdd-pad:16px;display:grid;gap:14px;padding:var(--sdd-pad);margin:0 0 16px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(h2,h3,h4,p){margin:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__head{display:grid;gap:4px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sub{font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__group{grid-column:1/-1;padding:var(--space-2) 0 0;font:var(--type-meta);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pane{display:grid;gap:12px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--sdd-pad));padding:3px var(--sdd-pad)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tabs::-webkit-scrollbar{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__tabs,.pn-sdd__subtabs) > a{flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__subtabs > a{min-height:30px;padding:6px 10px;font-size:12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pc-seg) > a .pn-seg__n.is-zero{background:var(--t-tint-2);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__warn,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flash{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--t-danger);color:var(--ink);font:var(--type-meta)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__warn .pc-ico,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flash.is-bad .pc-ico{flex:0 0 auto;margin-top:2px;color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flash:not(.is-bad){background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__none{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4);border-radius:var(--r-m);background:var(--sunken);color:var(--ink-2);font:var(--type-body)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__l{font-weight:600;color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico n" "l l" "s s";align-items:center;gap:6px 10px;min-height:112px;padding:var(--space-3);border-radius:var(--r-m);background:var(--sunken);color:var(--ink);text-decoration:none;transition:background-color var(--dur-1)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile:hover{background:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile:focus-visible,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__all:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tico{grid-area:ico;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-m);background:var(--t-tint);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile.is-hot .pn-sdd__tico{background:var(--t-danger);color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tn{grid-area:n;justify-self:end;font:var(--type-num);font-variant-numeric:tabular-nums;color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile.is-open .pn-sdd__tn{color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tl{grid-area:l;font:var(--type-strong)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__ts{grid-area:s;font:400 12px/16px var(--body);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__uncover{display:flex}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__uncover .pc-btn{display:inline-flex;align-items:center;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__listwrap{display:grid;gap:10px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__item{container-type:inline-size;display:flex;flex-direction:column;gap:6px;min-width:0;padding:var(--space-2);border-radius:var(--r-m);background:var(--sunken)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pic{position:relative;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__th{display:block;width:100%;height:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__th img{display:block;width:100%;height:100%;object-fit:cover}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list--blur .pn-sdd__th img{filter:blur(14px);transform:scale(1.15)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__th--none{display:grid;place-items:center;color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pick{position:absolute;top:0;left:0;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pick::before{content:"";position:absolute;top:7px;left:7px;width:30px;height:30px;border-radius:var(--r-s);background:var(--surface);opacity:.92}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pick input,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__spick input{position:relative;width:20px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__nmore{position:absolute;top:var(--space-2);right:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--glass-strong);color:var(--white);font:var(--type-cap)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flags{position:absolute;left:6px;right:6px;bottom:6px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flag{max-width:100%;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:var(--type-cap);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flag.is-bad{background:var(--danger);color:var(--on-danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det{min-width:0;font:400 12px/16px var(--body);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det > summary,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sdet > summary{position:relative;display:block;list-style:none;cursor:pointer;padding-right:16px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det > summary{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__det,.pn-sdd__sdet) > summary::-webkit-details-marker{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__det,.pn-sdd__sdet) > summary::after{content:"";position:absolute;right:4px;top:50%;width:6px;height:6px;border:solid var(--ink-2);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__det,.pn-sdd__sdet)[open] > summary::after{transform:translateY(-20%) rotate(-135deg)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det[open] > summary{white-space:normal}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__detin{display:grid;gap:var(--space-1);margin-top:var(--space-2);padding:var(--space-2);border-radius:var(--r-s);background:var(--t-tint);overflow-wrap:anywhere}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__extra{display:flex;flex-wrap:wrap;gap:4px 10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__extra a,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__meta a,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__shead a,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__mhead a{color:inherit}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__meta{font:400 12px/16px var(--body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__meta b{font-weight:600;color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__acts,.pn-sdd__sacts) .pc-btn{width:100%;min-height:34px;padding:0 6px;gap:4px;justify-content:center;font-size:12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__acts,.pn-sdd__sacts) .pc-ico{width:16px;height:16px}
@container (max-width:175px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__acts .pc-ico{display:none}}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bulk{position:sticky;bottom:var(--dock);z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:var(--space-3);border-radius:var(--r-l);background:var(--t-over);box-shadow:var(--shadow-e1)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__all{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);margin-right:auto;font:var(--type-label);color:var(--ink);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bbtns{display:flex;flex-wrap:wrap;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__senders{list-style:none;margin:0;padding:0;display:grid;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__snd{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pick main" ". acts" ". det";align-items:center;gap:4px 6px;padding:var(--space-2) var(--space-3) var(--space-2) 0;border-radius:var(--r-m);background:var(--sunken)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__spick{grid-area:pick;display:grid;place-items:center;width:40px;height:40px;cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__smain{grid-area:main;display:grid;gap:2px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__shead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font:var(--type-body);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sinfo{font-size:12px;color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__prev{font:var(--type-meta);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sacts{grid-area:acts;display:grid;grid-template-columns:1fr 1fr;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sdet{grid-area:det;min-width:0;font:400 12px/16px var(--body)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sdet > summary{display:inline-block;padding:4px 16px 4px 0;font-weight:600;color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__msgs{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__msgs > li{padding:var(--space-2) var(--space-3);border-radius:var(--r-s);background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__mhead{font:var(--type-cap);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__mtext{margin-top:var(--space-1)!important;font:var(--type-meta);color:var(--ink);overflow-wrap:anywhere}
@media (max-width:400px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd{--sdd-pad:12px}}
@media (max-width:559px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bulk{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 10px}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bbtns .pc-btn{min-height:40px;padding:6px 8px;white-space:normal;line-height:1.15;text-align:center;justify-content:center}}
@media (min-width:560px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(3,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(4,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__snd{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pick main acts" ". det det"}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sacts{display:flex}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sacts .pc-btn{width:auto;padding:0 10px}}
@media (min-width:1000px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd{--sdd-pad:20px}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(5,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles{grid-template-columns:repeat(5,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles--two{grid-template-columns:repeat(2,minmax(0,280px))}}
@media (min-width:1200px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Translation line (UX 17.10. #69 reviews, #95 buyer wishes; partials/tr_line.php): a quiet second line under the text.
   "Translated · Show original" folds the original out as a sunken box; "Translate" is the link-style key. Members only. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr{margin:6px 0 0;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn{align-self:auto;gap:var(--space-2);min-height:32px;font:var(--type-label);color:var(--ink-2);text-decoration:none;cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn{border:0;background:none;padding:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn > span,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__show{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn:disabled{cursor:default;opacity:.75}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn:disabled > span{text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum{list-style:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum::-webkit-details-marker{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum .pn-tr__show::before{content:"·";display:inline-block;margin-right:6px;color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr[open] .pn-tr__show{text-decoration-color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr .pn-tr__orig{margin:var(--space-2) 0 0;padding:var(--space-3);border-radius:var(--r-m);background:var(--t-tint);font:var(--type-body);color:var(--ink-2);overflow-wrap:anywhere;white-space:pre-line}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtprof .pn-dtrevs > .pn-dtrev{grid-template-areas:"stars" "by" "title" "tags" "body" "more" "tr" "reply" "acts"}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtprof .pn-dtrevs > .pn-dtrev > .pn-tr{grid-area:tr;justify-self:start}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishcard .pn-tr :is(.pn-tr__sum,.pn-tr__orig){color:var(--dk-ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishcard .pn-tr .pn-tr__orig{background:var(--dk-veil)}
/* UX 17.10. (M2: chats, orders, settings, profile, wish, /order/, videos, archive) */
/* #7: "About me" over its cap: the counter turns red (the warning line under it is a .pn-fielderr) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-counter.is-over{color:var(--danger);font-weight:600}
/* #63: one row in the inbox: search + the open filter chip + the ⋯ menu (Unread / Archived), tonal like the row menu */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__bar.is-menu{flex-wrap:nowrap;justify-content:flex-end;gap:10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__bar.is-menu .pn-inbox__search{flex:1 1 0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-rail .pn-inbox__bar.is-menu{display:flex}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__on{flex:none;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more{position:relative;flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more > summary{list-style:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more > summary::-webkit-details-marker{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more[open] > summary{background:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-header);display:grid;min-width:240px;max-width:min(320px,calc(100vw - 32px));padding:var(--space-2);border-radius:var(--r-l);background:var(--t-over);color:var(--ink);box-shadow:var(--shadow-e1)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi{display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-12);padding:0 var(--space-3);border-radius:var(--r-m);color:var(--ink);font:var(--type-strong);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi:hover,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi.is-selected{background:var(--t-over-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi > span:first-of-type{flex:1}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi .pn-seg__n[data-count="archived"]{background:var(--t-over-3);color:var(--ink)}
/* #64/#65: the settings jump pills (phones; desktop hides them) are one row that scrolls sideways, never two lines */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-6px calc(-1 * var(--gutter));padding:6px var(--gutter)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg::-webkit-scrollbar{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set > .pc-apphead,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set .pc-apphead__tabs:has(> [data-spy]){min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg > a{flex:none;white-space:nowrap}
/* UX polish C (23.10., UX-018 / UX-046): on phones the jump pills are 40 tall (a thumb target like the small buttons) and the
   row fades out at its right edge, so a cut pill reads as "more to the right"; the padding behind the fade keeps the last
   pill fully readable once the row is scrolled to its end. */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg{padding-right:calc(var(--gutter) + 28px);-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 36px),transparent)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg > a{min-height:40px}
}
/* #71: one status set for orders: a neutral chip + a dot (grey ring = requested, green ring = accepted / sent, green =
   arrived, none = closed); pink stays for "Your move" and the next-step button */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ostatus{background:var(--sunken);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ostatus:not(.pn-ostatus--closed)::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--online)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ostatus--requested::before{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-ostatus--accepted,.pn-ostatus--shipped)::before{background:transparent!important;box-shadow:inset 0 0 0 2px var(--online)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-order .pn-ostatus{background:var(--dkbox-tile);color:var(--dk-ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-order .pn-ostatus--requested::before{box-shadow:inset 0 0 0 1.5px var(--dk-ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-orow__meta .pn-order__move{flex:none}
/* #72: the Premium sheet under a thread lays no veil over the messages, only its shadow */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-chatpage:has(> .pn-paybar)::after{content:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.pn-sheet{box-shadow:var(--sh-sheet)}
/* #90: one paygate per screen. In a thread the bottom bar is the one: no "Read with Premium" on each bubble (the lock stays,
   the bubble still leads there), no second note under the locked Accept. The list keeps one slim strip on phones. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-chatpage:has(> .pn-paybar) :is(.pn-lockbubble__cta,.pn-order__gate){display:none}
/* round 2 (night 05.11.), inside only so the guest bundles keep their bytes: audit 2 #104 — his request form waits closed on
   the listing page until its key opens it in place; audit 3 #92 — "Your Premium ended {date}" centred in the log (arm "new") */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-gm[hidden]{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lcended{align-self:center}
/* round 2, audit 3 #62 (arm "new" only, .is-pcf): the sealed card is a link — on hover / keyboard focus it says where it goes */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-chatpage:has(> .pn-paybar) .pn-lockbubble.is-pcf:is(:hover,:focus-visible) .pn-lockbubble__cta{display:inline}
@media (max-width:480px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip{flex-wrap:nowrap;min-height:0;gap:10px;padding:10px 10px 10px 12px}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__ico{width:36px;height:36px}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__txt{flex:1 1 auto}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__txt span{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__cta{flex:0 1 auto;flex-basis:auto;max-width:46%;white-space:normal;text-align:center;line-height:1.2}
}
/* #91: "Send a listing (free)" is a real button with its words beside "Answer with Premium" (stacked under it on phones) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked:not(.is-open) .pn-senditem > summary,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar .pn-senditem > summary{width:auto;min-width:0;padding-inline:18px;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked:not(.is-open) .pn-senditem__t,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar .pn-senditem__t{display:inline}
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked .pn-paybar__acts,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar__acts{grid-template-columns:minmax(0,1fr)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked:not(.is-open) .pn-senditem > summary,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar .pn-senditem > summary{width:100%}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked .pn-senditem__list{left:0;right:auto}
}
/* #92: "Send a listing" right under the reach numbers */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-reach__act{display:flex;justify-content:flex-end;margin-top:14px}
/* #77: /videos/ (members only): the rail's white labels stay readable on a light frame (a soft scrim behind the rail,
   a shadow under each label); the feed rail exists below 1024 px only (videos.css) */
@media (max-width:1023px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-feed .pn-vitem__rail::before{content:"";position:absolute;z-index:-1;inset:-48px -10px -24px -28px;background:linear-gradient(to left,var(--scrim),transparent);pointer-events:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-feed .pn-vrail{text-shadow:0 1px 3px var(--scrim)}
}
/* #79: her offers sit in the "Details" card now, under the facts */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtfacts__oh{margin:18px 0 10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtfacts__offers{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* #100: the profile editor's short selects (figure, hair, bust, orientation, eyes) sit two by two on phones */
@media (max-width:559px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-pe .pn-selectgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-3)}
}
/* #73: light theme inside: the order card in a thread, "Your reach" and the chat list's Premium strip are light surfaces
   with their pink accents, no heavy ink blocks. Their dark-box tokens map to the page's own tones; the dark theme (and
   auto-dark) inherits the house values again, so it is unchanged (every rule starts with the member scope). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-order,.pn-reach,.pn-paystrip){--dkbox:var(--surface);--dkbox-tile:var(--sunken);--dk-ink:var(--ink);--dk-ink-2:var(--ink-2);--chrome:var(--surface);--on-chrome:var(--ink);--on-chrome-2:var(--ink-2);--chrome-line:var(--line);--chrome-tint:var(--sunken);--chrome-well:var(--sunken);--chrome-well-hover:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is([data-theme="dark"] *) :is(.pn-order,.pn-reach,.pn-paystrip){--dkbox:inherit;--dkbox-tile:inherit;--dk-ink:inherit;--dk-ink-2:inherit;--chrome:inherit;--on-chrome:inherit;--on-chrome-2:inherit;--chrome-line:inherit;--chrome-tint:inherit;--chrome-well:inherit;--chrome-well-hover:inherit}
@media (prefers-color-scheme: dark){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:root:not([data-theme="light"]) *) :is(.pn-order,.pn-reach,.pn-paystrip){--dkbox:inherit;--dkbox-tile:inherit;--dk-ink:inherit;--dk-ink-2:inherit;--chrome:inherit;--on-chrome:inherit;--on-chrome-2:inherit;--chrome-line:inherit;--chrome-tint:inherit;--chrome-well:inherit;--chrome-well-hover:inherit}
}
/* #73 → design system §2.3: figures in ink, never pink */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-order .pn-order__price,.pn-reach .pc-tile b){color:var(--ink)}

/* UX 17.10. #67: "Sellers you follow" on Your corner is as wide as its cards (three cards left half a desktop panel empty), and
   a Premium seller is told apart by her badge only, not by a caption tinted unlike the others beside it */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-corner__favstrip{width:fit-content;max-width:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-corner__sellers .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
/* UX 17.10. #70: pink is for what is unread; a total on a key (Filters 2) stands in the tonal veil */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-btn > .pc-count--inline{background:var(--t-tint-2);color:var(--ink)}
/* UX 17.10. #60: a member's profile tabs are ONE row that scrolls sideways on phones (they wrapped to two rows and the
   sticky bar cost 100 px); a pill that does not fit stands half out at the edge, so the row reads as more to swipe */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dt .pn-proftabs.pn-dttabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dt .pn-proftabs.pn-dttabs::-webkit-scrollbar{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dt .pn-proftabs.pn-dttabs .pc-tab:last-child{margin-right:24px}
}
/* UX 17.10. seller side (S1). #89 My listings: the pause switch carries its own word ("Live" / "Paused", items.js repaints
   it through [data-state]) instead of a chip beside it; the row's numbers ("312 views · 1 interested") stay a quiet line. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrow__switch{align-items:center;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrow__swl{font:var(--type-cap);color:var(--ink-2);white-space:nowrap}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrow.is-live .pn-adrow__swl{color:var(--ink)}
/* #86 the listing editor's photo slots: every empty slot shows its key, a round "+" in the ink of the house's keys on the
   slot's tonal surface; the cover's is the big one. Desktop: the phone's 3 × 3 grid with the big cover (two columns, two
   rows) at 456 px, the photo tips beside it, instead of six equal tiles in a row. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot__plus{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-full);background:var(--btn-ink);color:var(--on-btn-ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ligrid > :first-child .pn-lislot__plus{width:52px;height:52px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot .pn-slot__t{color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot:not(.has-photo,.is-picked):hover .pn-lislot__plus{transform:scale(1.06)}
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ligrid{max-width:456px;grid-template-columns:repeat(3,minmax(0,1fr))}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ligrid > :first-child{grid-column:1 / span 2;grid-row:1 / span 2;aspect-ratio:auto;height:100%}
}
@media (min-width:900px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos{display:grid;grid-template-columns:minmax(0,456px) minmax(0,1fr);column-gap:var(--space-6);align-items:start}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos > *{grid-column:1 / -1}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos > .pn-ligrid{grid-column:1;grid-row:2}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos > .pn-litips{grid-column:2;grid-row:2;margin-top:0}
}
@media (prefers-reduced-motion:reduce){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot:not(.has-photo,.is-picked):hover .pn-lislot__plus{transform:none}}
/* #15 the editors' save key while must-haves are open ("Save listing (2 left)", items_legacy.js / items.js .is-wait): a quiet
   tonal key with ink text, never pale, never disabled (a tap lands on the first open field). #88: the "Good to know" rows
   for the photo and the words tick along with the counter. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-btn--primary.is-wait{background:var(--btn-ink);color:var(--on-btn-ink);border-color:transparent}   /* visual audit VM-005 (owner 26.10.): the ink key, never a pale veil */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-btn--primary.is-wait:hover{background:var(--btn-ink);color:var(--on-btn-ink);filter:brightness(1.12)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lihow li.is-done .pc-ico{color:var(--success)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lihow li.is-done > span{color:var(--ink-2)}
/* #24 the listing editor's Shipping field (switch ship_cost): the listing's currency sign beside a short amount field */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship{margin-top:var(--space-4)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship__box{display:flex;align-items:center;gap:8px;max-width:220px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship__cur{flex:none;display:grid;place-items:center;min-width:40px;height:var(--control-md);padding:0 var(--space-3);border-radius:var(--r-full);background:var(--t-tint);font:var(--type-strong);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship__box > .pc-input{flex:1;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship .pc-help{margin-top:6px}
/* #87 "Copy from an earlier listing" above a new listing: one compact panel, her listings in a select and the ink "Copy" key */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy{display:grid;gap:10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__h{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-strong);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__h .pc-ico{color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row{display:flex;gap:8px;align-items:center}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row > .pc-select{flex:1;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row > .pc-select > .pc-input{width:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row > .pc-btn{flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__help{margin:0}
/* #93 buyer rows: the whole row is the offer, a small tag icon at its right end (tonal), no column of "Make offer" buttons */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow--offer > a.pn-card-link.pn-row__lead{flex:1 1 auto;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow__go{flex:none;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--t-tint);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow--offer:hover .pn-buyerrow__go{background:var(--t-tint-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow:not(.pn-buyerrow--offer) .pn-buyerrow__go{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow__acts[hidden]{display:none}
@media (max-width:700px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sellhome .pn-buyerrow--offer{flex-wrap:nowrap}}
/* #94 her corner: "Finish your profile" as one line (small ring, the steps left, a chevron) — the card is on the Buyers home */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--ink);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline:hover{background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline .pn-ring--sm{--p:0;flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,var(--surface) 9px,transparent 10px),conic-gradient(var(--accent) calc(var(--p) * 1%),var(--t-tint-2) 0)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline__t{flex:1;min-width:0;display:flex;flex-wrap:wrap;column-gap:var(--space-2);font:var(--type-body);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline__t > b{font-weight:600;color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline > .pc-ico{flex:none;color:var(--ink-2)}
/* #97 the seller's Premium page: the chosen plan is the accent's soft fill WITH the pink ring (one clear signal on the
   recommended, preselected plan); the live pills on the dark hero are tonal (the chrome well), not white; the phone pay
   bar is one row (~72 px): "Not now" moves out of it into the page, under the plans. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite .pn-plan:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite__hero .pc-chip--live{background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
@media (max-width:999px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-later.pn-psbar__later{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite:has(.pn-psbar) .pn-paysite__sideacts{display:grid}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite:has(.pn-psbar) .pn-paysite__sideacts > :not(.pn-paysite__sidelater){display:none}
}
/* #98 My content: the eye is the visibility switch (pressed = buyers see it), "where" is the small key beside it; the
   corner card without videos is one sentence and "Add a video" instead of three zero tiles */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-mcwhere{flex:none;width:36px;height:36px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-mcvis[aria-pressed="false"] .pc-ico{opacity:.45}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-mccard__empty{margin:8px 0 0}
/* Owner 20.10. (members only: guests have no header search, so it stays out of the guest bundles): the header search is a magnifier square + popover (header.php). The popover lies in the top layer just under
   the bar, one wide field on the chrome surface; the page dims behind it. Open, the key stays pressed. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch{--on-chrome:var(--ink);--on-chrome-2:var(--ink-2);--chrome-well:var(--t-over-2);--chrome-well-hover:var(--t-over-2);position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top)) 0 auto;width:min(640px,calc(100% - 32px));height:auto;margin:var(--space-2) auto 0;padding:var(--space-2);border:0;border-radius:var(--r-l);background:var(--t-over);color:var(--ink);box-shadow:var(--shadow-e1);overflow:visible}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch::backdrop{background:var(--scrim)}
/* 22.10.: closed by default in every browser. Without popover support (iOS < 17, Android WebView < 114) the UA rule
   [popover]:not(:popover-open){display:none} does not exist and the panel lay open over the page since x0330; chat.js then
   toggles .is-open instead (it is raised above the page, the top layer does not exist there). Keep :popover-open in its own rule:
   a browser that does not know it drops the whole rule. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch:not(.is-open){display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch:popover-open{display:block}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch.is-open{display:block;z-index:var(--z-drawer)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-hsearch form.pn-search{flex:none;width:100%;max-width:none;height:var(--control-md);gap:var(--space-3);padding:0 var(--space-4)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch .pn-search__ph{left:var(--space-12)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch .pn-search__ph-l{display:inline}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch .pn-search__ph-s{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-hsearch__key:has(+ .pn-hsearch:popover-open){background:var(--chrome-well-hover);color:var(--accent)}
/* AD-041 / UX-193 (20.10.): the member header (up to 8 nav links, search, theme, New listing, Start earning, chats, bell,
   avatar) needed 955-1121 px at 768 and up to 1302 px at 1280 in pt, so on an iPad or a small laptop the pay key, chats,
   bell and avatar lay behind the clipped edge. Where it does not fit the nav links go behind one "Menu" key (header.php:
   a native popover with the same links + light / dark). Every other key stays in the bar, "Start earning" first among them. English needs the full bar from 1101,
   es / fr / it / pt (longer words) from 1361. Phones (<= 700) keep their own header, wide screens the full one. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__key{display:none}
/* owner 27.10.: the feed for a seller with the post box, beside the Menu key wherever the nav folds (header.php) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navpin{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navpin{flex:none;gap:var(--space-2);padding-inline:var(--space-4)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key{flex:none;gap:var(--space-2);padding-inline:var(--space-4)}
/* the current page on a key (icon keys, the avatar on Your corner): the nav's 2 px accent underline as a short mark under it
   (MCH-029 / MCH-030); the avatar's picture keeps its circle (img border-radius:inherit), so its box may show the mark */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header :is(.pc-iconbtn,.pn-header__avatar){position:relative}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-header__avatar{overflow:visible}
/* owner 04.11. («nur die Textlinks mit Unterstrich, nicht die Icons und der Avatar — Icons einfach rosa einfärben»): an active
   header icon is tinted pink, the avatar gets a 2 px pink ring; no underline under keys */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]){color:var(--accent)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]) svg{color:var(--accent)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-header__avatar:is(.is-active,[aria-current="page"]){box-shadow:0 0 0 2px var(--accent)}
/* Ships first v2 (16.10., lib/sfo_view.php): the orders that wait for the member beside a nav link; the one count badge (§7.4) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navcount{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:var(--space-2);padding:0 var(--space-1);border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);font:var(--type-cap);font-variant-numeric:tabular-nums}
/* the current page behind the folded nav: the header's 2 px accent mark under the key (chrome.css), not an inset line in a pill */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header :is(.pn-navmore__key,.pn-navpin){position:relative}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header :is(.pn-navmore__key,.pn-navpin).is-active::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--space-2));width:var(--icon-l);height:2px;margin-left:calc(var(--icon-l) / -2);border-radius:var(--r-full);background:var(--accent);pointer-events:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key:has(+ .pn-navmore:popover-open){background:var(--chrome-well-hover)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__key .pn-navcount{margin-left:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore{--on-chrome:var(--ink);--chrome-well:var(--t-over-2);--chrome-well-hover:var(--t-over-2);position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top) + var(--space-2)) auto auto var(--col-pad);width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - var(--header-h) - var(--space-8));height:auto;margin:0;padding:var(--space-2);border:0;border-radius:var(--r-l);background:var(--t-over);color:var(--ink);box-shadow:var(--shadow-e1);overflow-y:auto;overscroll-behavior:contain}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore:not(.is-open){display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore:popover-open{display:grid;gap:var(--space-1)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore.is-open{display:grid;gap:var(--space-1);z-index:var(--z-drawer)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore::backdrop{background:transparent}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-12);padding:0 var(--space-3);border-radius:var(--r-m);color:var(--ink);font:var(--type-strong);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a:hover{background:var(--t-over-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a[aria-current="page"]{background:var(--t-over-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > .pn-navmore__theme{justify-content:space-between;margin-top:var(--space-2)}
@media (min-width:701px) and (max-width:1100px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pc-nav{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navpin{display:inline-flex}
}
@media (min-width:1101px) and (max-width:1360px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-header .pc-nav{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-header .pn-navmore__key,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-header .pn-navpin{display:inline-flex}
}
/* chat.js sets .is-tight where the full bar is still too wide at a larger width (an extra slot, e.g. Orders) */
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-tight .pc-nav{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-tight .pn-navmore__key,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-tight .pn-navpin{display:inline-flex}
}
/* up to 860 the theme toggle is the menu's row only ("New listing" is its "+" square there already, chrome.css) */
@media (min-width:701px) and (max-width:860px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-themebtn{display:none}}
/* owner 05.11. (seller header 1005 px wide at 900, 838 at 768, es / fr / pt up to 1105 at 1100: every seller page scrolled
   sideways): where the nav is folded, the bar's own keys fold too — light / dark goes to the Menu's row, "New listing", Menu
   and the seller's Feed key become their icon squares (the words stay their accessible names). "Start earning" keeps its
   words here (medrawer.css: its crown only up to 820). chat.js adds .is-compact where a bar is still wider (long counts, an
   extra slot) at any width. */
@media (min-width:701px) and (max-width:1100px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-themebtn{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header :is(.pn-header__new,.pn-navmore__key,.pn-navpin){width:var(--header-key);min-width:var(--header-key);padding:0;gap:0;justify-content:center}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header :is(.pn-header__newlbl,.pn-navmore__lbl,.pn-navpin__lbl){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key .pn-navcount{position:absolute;top:calc(-1 * var(--space-1));right:calc(-1 * var(--space-1))}
}
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-compact .pn-themebtn{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-compact :is(.pn-header__new,.pn-navmore__key,.pn-navpin){width:var(--header-key);min-width:var(--header-key);padding:0;gap:0;justify-content:center}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-compact :is(.pn-header__newlbl,.pn-navmore__lbl,.pn-navpin__lbl){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-compact .pn-navmore__key .pn-navcount{position:absolute;top:calc(-1 * var(--space-1));right:calc(-1 * var(--space-1))}
}
/* visual audit VM-003 (owner 26.10.): text fields and selects keep a visible edge — the owner's 50 % grey, never white */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-input:not(:focus):not(.is-focus){border-color:var(--t-mute)}
/* UX 200 ACC-45 (01.11.): the legacy chat at the hourly limit — the line above a read-only composer whose send key is off */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lclimit{margin:var(--space-3) var(--space-4) 0;color:var(--ink-2);font:var(--type-label)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-composer.is-limit .pn-send:disabled{opacity:.4;cursor:default}
/* UX 200 ACC-13 (01.11.): "Not in your recent chats" with the key that asks the server */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__nohit .pc-btn{margin-left:8px;vertical-align:middle}
/* UX 200 ACC-10 (01.11.): legacy's [order] shortcode without a page: a status line, not a pill */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lcorder.is-line{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink-2);font:var(--type-label)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lcorder.is-line .pc-ico{flex:none;width:var(--icon-s);height:var(--icon-s)}
/* UX 200 ACC-12 (02.11.): "Seen" under his newest own message in the legacy chat, quiet like the bubble's time */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lcseen{margin:0 var(--space-1);color:var(--ink-2);font:var(--type-cap)}
/* UX 200 ACC-28 (01.11.): a switch form's Save keys, hidden by legacy_profile.js (the switches save at once), stay hidden */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lp__formacts[hidden]{display:none}
/* UX 200 BUY-4 (02.11.): the "Tell me when it opens" form sits in the gate box as its button would (a block key stays full width) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-waitdoor{display:contents}
/* UX 200 BUY-46 (02.11.): the listing's quiet Report key sits with Share at the right end of the top row */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dttop .pn-adreport{margin-left:auto;margin-right:8px}
/* UX 200 BUY-15 (02.11.): a saved listing that went away — a quiet tile at the end of the saved grid (no picture, its label, Message her) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-savedgone{position:relative;display:grid;align-content:start;gap:10px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-savedgone__ph{aspect-ratio:4/5;width:100%;border-radius:var(--r-m)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-savedgone__txt{display:grid;gap:var(--space-1);min-width:0;color:var(--ink-2);font:var(--type-meta)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-savedgone .pc-card__fav[aria-pressed="true"]{color:var(--accent)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-savedgone .pc-card__fav[aria-pressed="true"] .pc-ico{fill:currentColor}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-savedgone__txt b{overflow:hidden;color:var(--ink);font-weight:700;white-space:nowrap;text-overflow:ellipsis}
/* my wish to new sellers (owner 02.11., lib/wish_ns.php), member pages only: a Basic seller's wish card and hub tile are the
   category teaser (decision B); the wish as the thread's first message sits on its sender's side (point 6); the wish
   form's "Send new members my wish" (decision C); point 7: "Tell everyone what you're looking for", one quiet tonal card */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishcard__teaser{margin:0;font:var(--type-body);color:var(--dk-ink);overflow-wrap:anywhere}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-msg--wish.pn-msg--wishfirst.pn-msg--out{align-items:flex-end}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-msg--wish.pn-msg--wishfirst.pn-msg--in{align-items:flex-start}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-msg--wishfirst .pn-wishcard{width:min(90%,480px)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishtile__teaser{display:flex;gap:8px;align-items:flex-start;font-weight:500}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishtile__teaser .pc-ico{flex:none;width:14px;height:14px;margin-top:4px;color:var(--pink-text)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge{display:flex;gap:12px;align-items:flex-start;width:100%;max-width:520px;margin:var(--space-3) auto var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--r-l);background:var(--sunken);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__ico{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--pink-text)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__ico .pc-ico{width:var(--icon-m);height:var(--icon-m)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__main{display:grid;gap:6px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__h{font:700 15px/22px var(--body);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__t{margin:0;font:var(--type-body);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wnsnudge__off{margin:0}
/* innen 500 CON-15 (owner's standing order): header, footer and the phone tab bar keep a grey 50 % hairline in every member
   theme (light too; dark.css restates it for its own selectors) — never white, never transparent */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header{border-bottom-color:var(--hline)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pc-footer,.pc-tabbar){border-top-color:var(--mline)}
/* innen 500 CON-33, CON-53: the rating pill on her profile, the review author link and the seller strip under each video get the
   invisible 44 px hit area of components.css's phone tap floor (their look stays) */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(a.pn-dtrate--pill,a.pn-vstrip--sm,.pn-dtrev__by a){position:relative}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(a.pn-dtrate--pill,a.pn-vstrip--sm,.pn-dtrev__by a)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));transform:translate(-50%,-50%)}
}
/* innen 500 CON-63: a details card with one select (a buyer's budget) gives it the whole row, so "Budget up to …" is not cut */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-pe .pn-selectgrid > .pc-field:only-child{grid-column:1/-1}
/* owner 05.11.: hairlines in lists («dezente edge-to-edge Hairlines … überall wo Listen sind»). ONE rule for every member list
   of rows: .pn-rows (buyers, chats + the rail beside a thread, alerts, followers / visitors, my listings, reviews, settings,
   the drawer), .pn-ogroup (orders) and the support chat's help suggestions (.pn-supsug__list). A 1 px --mline at --lhair-o (grey 16 %,
   fading out at both ends, owner 06.11. «andeuten statt hart trennen»; the same in dark and light, never white) between two shown rows, none above the first or below the
   last. It runs to the card's edge (--hair-x = the card's side padding; 0 = the list's own edge), in the middle of the row
   gap (--hair-gap). A lit row (hover, current, chosen) drops the two lines that touch its rounded surface. Cards keep
   their rule: no edges, surfaces only (owner 18.10.). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-panel--flush,.pn-alertlist,.pn-threads,.pn-orders,.pn-suppin){--hair-x:var(--list-pad)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-setpanel{--hair-x:calc(var(--panel-pad) - var(--space-3))}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-checkpanel{--hair-x:var(--panel-pad)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-md__body{--hair-x:var(--space-2);--hair-gap:0px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ogroup{--hair-gap:0px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :where(:is(.pn-rows,.pn-ogroup,.pn-supsug__list) > :is(.pn-row,li,.pn-orow)){position:relative}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-rows,.pn-ogroup,.pn-supsug__list) > :is(.pn-row,li,.pn-orow):not([hidden]) ~ :is(.pn-row,li,.pn-orow):not([hidden])::before{content:"";position:absolute;top:calc(var(--hair-gap,var(--space-1)) / -2);left:calc(-1 * var(--hair-l,var(--hair-x,0px)));right:calc(-1 * var(--hair-r,var(--hair-x,0px)));height:1px;background:linear-gradient(90deg,transparent,var(--mline) 14%,var(--mline) 86%,transparent);opacity:var(--lhair-o);pointer-events:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-rows,.pn-ogroup,.pn-supsug__list) > :where(a.pn-row:hover,button.pn-row:hover,label.pn-row:hover,.pn-buyerrow:hover,.pn-threadrow:hover,.pn-orow:hover,.is-current,.is-held,[aria-current],[aria-checked="true"])::before,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-rows,.pn-ogroup,.pn-supsug__list) > :where(a.pn-row:hover,button.pn-row:hover,label.pn-row:hover,.pn-buyerrow:hover,.pn-threadrow:hover,.pn-orow:hover,.is-current,.is-held,[aria-current],[aria-checked="true"]) + *::before,
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-rows,.pn-ogroup,.pn-supsug__list) > :where(li:has(> :is(a:hover,[aria-current])))::before,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-rows,.pn-ogroup,.pn-supsug__list) > :where(li:has(> :is(a:hover,[aria-current]))) + *::before{opacity:0}   /* + a row in an li (settings, look, help suggestions); my listings: items.css */
/* desktop chat rail (chat.css, 1024+): the support pin is the list's first row in the same card, so a line under it too */
@media (min-width:1024px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-rail .pn-suppin + .pn-threads > .pn-row:first-child::before{content:"";position:absolute;top:calc(var(--space-1) / -2);left:calc(-1 * var(--list-pad));right:calc(-1 * var(--list-pad));height:1px;background:linear-gradient(90deg,transparent,var(--mline) 14%,var(--mline) 86%,transparent);opacity:var(--lhair-o);pointer-events:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-rail .pn-suppin:has(> .pn-threadrow:hover) + .pn-threads > .pn-row:first-child::before{opacity:0}
}
/* the two-column lists (buyers from 900, my listings from 1101): a line per column, the halves meet in the column gap;
   a lit row drops the line above it and the one below it in its column (two siblings on) */
@media (min-width:900px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrows > :nth-child(odd){--hair-r:calc(var(--space-4) / 2)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrows > :nth-child(even){--hair-l:calc(var(--space-4) / 2)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrows > .pn-buyerrow:hover + *::before{opacity:var(--lhair-o)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrows > .pn-buyerrow:hover + * + *::before{opacity:0}
}
@media (min-width:1101px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrows > :nth-child(odd){--hair-r:calc(var(--space-8) / 2)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrows > :nth-child(even){--hair-l:calc(var(--space-8) / 2)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrows > .pn-adrow:has(a[href].pn-adrow__link:hover) + *::before{opacity:var(--lhair-o)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrows > .pn-adrow:has(a[href].pn-adrow__link:hover) + * + *::before{opacity:0}
}
@media (min-width:1000px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set--sub:not([data-sec]) .pn-setnav li:first-child + li::before{opacity:0}}   /* the first section stands lit while none is chosen (account.css) */
/* @end-member-only */
/* @member-only */
/* MEMBER DRAWER ON PHONES (owner 15.10.; partials/medrawer.php, opened by the phone header's avatar .pn-mdbtn). An e1 layer
   (docs/design-system.md §6): surface 2 + the float shadow, --r-l, the head on the chrome, everything on the sheet one step
   up; one 16 inset (MCH-065). Member layer only (tools/css_guest.php drops it), phone only (from 701 nothing shows). */

/* ---------- the trigger: a 44 px target, the 34 px avatar, a pink dot when something is new */
.pn-mdbtn{position:relative;flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);margin-right:calc(-1 * var(--space-1));border-radius:50%;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pn-mdbtn__av{width:34px;height:34px;border:0;font:var(--type-strong)}
.pn-mdbtn__dot{position:absolute;top:var(--space-1);right:var(--space-1);width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--chrome)}   /* MCH-046: an 8 px dot, as every unread dot */
.pn-mdbtn:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.pn-mdbtn:active .pn-mdbtn__av{transform:scale(.94)}
@media (max-width:700px){
  /* on phones the members' icon keys and the desktop avatar are hidden already: the row keeps only the bell (UX 17.10.
     #83: Alerts left the tab bar for the header, as on the desktop) */
  .pc-root:not(.pc-guest) .pc-header .pc-header__icons{display:contents}
  .pc-root:not(.pc-guest) .pc-header .pc-header__icons > :not(.pn-header__bell){display:none}
  /* the bell takes the key "My listings" had beside a free seller's pink key: logo + key + key + bell + avatar
     needed 384 px in pt and 364 in it at 360. One rule for every language; My listings stays first in the drawer */
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__earn):has(.pn-header__bell) .pn-header__items{display:none}
  /* UX 17.10. #56: on phones Your corner is its tiles (chats, wish, following) only; the account card and the whole menu
     list under them were the drawer a second time (unread chats stood four times on one page). Desktop keeps its aside. */
  .pc-root:has(.pn-md) .pn-corner > .pn-split > .pn-split__side{display:none}
  /* light / dark moves into the drawer's foot: with the avatar a free seller's header (theme + My listings + "Start
     earning" + avatar) needed 364 px in it and 384 px in pt at 360. One rule for every member, so the toggle is always
     in the same place; the header keeps the role's own keys. */
  .pc-root:not(.pc-guest) .pc-header:has(.pn-mdbtn) .pn-themebtn{display:none}
}

/* ---------- the members' tab bar (§12, MCH-051..053): labels --type-cap, the pill 56 x 32 with the 24 px icon, the ring on
   the link; a toast keeps --toast-gap over it (MCH-168). The bar's colours: chrome.css */
.pn-tabbar a{gap:var(--space-1);font:var(--type-cap);border-radius:var(--r-m)}
.pn-tabbar .pn-tab__pill{width:56px;height:var(--space-8);border:0}
.pn-tabbar .pn-tab__pill .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-tabbar .pn-tab__label{overflow:hidden;text-overflow:ellipsis}
.pn-tabbar a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:359px){.pn-tabbar .pn-tab__pill{width:var(--space-12)}}
@media (max-width:700px){:where(body:not(.pc-guest,.pn-has-adbar):has(.pn-tabbar)) .pn-toast{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--toast-gap))}}

/* ---------- the layer: hidden until #pnMe is the target (no JS) or .is-open (chat.js) */
.pn-md{position:fixed;inset:0;z-index:var(--z-drawer);overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s linear var(--dur-2)}   /* hidden only once the sheet has slid out; overflow:hidden (17.10.): the sheet parked beside the screen can never widen the page */
.pn-md:target,.pn-md.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
/* UX 433 round 2 G-009: the desktop avatar opens the same sheet (no width hides it any more) */
html:has(.pn-md:is(:target,.is-open)),html:has(.pn-md:is(:target,.is-open)) body{overflow:hidden}
.pn-md__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-1) ease-out;cursor:default}
.pn-md:is(:target,.is-open) .pn-md__scrim{opacity:1}
/* «+1 step» on the sheet: --sunken / --surface-2 / --t-tint / keys → --t-over-2 (surface 3) */
.pn-md__sheet{--surface:var(--t-over);--sunken:var(--t-over-2);--surface-2:var(--t-over-3);--t-tint:var(--t-over-2);--t-tint-2:var(--t-over-3);--btn-line-bg:var(--t-over-2);--btn-ink:var(--t-over-2);--ink-3:var(--ink-2);
  position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(88vw,384px);
  border-radius:var(--r-l) 0 0 var(--r-l);background:var(--t-over);color:var(--ink);box-shadow:var(--shadow-e1);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;outline:none;
  transform:translateX(104%);transition:transform var(--dur-2) ease-out}
.pn-md:is(:target,.is-open) .pn-md__sheet{transform:none}
/* UX polish C (23.10., UX-050): parked beside the screen, the closed sheet still counted into the page's scroll width (445 on a
   390 phone). Hidden only after it has slid out (visibility waits for the transform), so opening and closing animate as before. */
.pn-md:not(:target):not(.is-open) .pn-md__sheet{visibility:hidden;transition:transform var(--dur-2) ease-out,visibility 0s linear var(--dur-2)}

/* ---------- head: my card on the chrome, the header's colour carried into the sheet */
.pn-md__head{position:relative;display:grid;gap:var(--space-4);padding:calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) var(--space-5);background:var(--chrome);color:var(--on-chrome);--count-ring:var(--chrome)}
/* the close key is a header icon key: transparent on the chrome, the chrome well on the pointer (MCH-069) */
.pn-md__close{position:absolute;top:calc(env(safe-area-inset-top) + var(--space-3));right:var(--space-3);display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;background:transparent;color:var(--on-chrome);text-decoration:none}
.pn-md__close:hover{background:var(--chrome-well)}
.pn-md__close .pc-ico{width:var(--icon-l);height:var(--icon-l)}
.pn-md__me{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding-right:var(--space-12);color:inherit;text-decoration:none;border-radius:var(--r-m)}
.pn-md__av{width:var(--avatar-l);height:var(--avatar-l);border:0;font:var(--type-title)}   /* §10: the drawer's avatar is --avatar-l 48 */
.pn-md__who{flex:1;display:grid;justify-items:start;gap:var(--space-1);min-width:0}
.pn-md__name{max-width:100%;font:var(--type-title);color:var(--on-chrome);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* MCH-060: a sheet head (--type-title 18), Inter */
.pn-md__name::before{content:"@";color:var(--accent)}
.pn-md__me:hover .pn-md__name{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:var(--space-1)}
.pn-md__badges{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.pn-md__head .pc-badge{background:var(--chrome-well);color:var(--on-chrome);box-shadow:none}
/* what is new: one pill each (the count badge + its word), never a "0" (MCH-062: the count = the one count badge, 20 /
   --type-cap; the word --type-label; padding 12 / 16) */
.pn-md__stats{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-md__stats > a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-4) 0 var(--space-3);border-radius:var(--r-full);background:var(--chrome-well);color:var(--on-chrome);font:var(--type-label);text-decoration:none}
.pn-md__stats > a:hover{background:var(--chrome-well-hover)}
.pn-md__stats b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 var(--space-1);border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-md__allread{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--on-chrome-2)}
.pn-md__allread .pc-ico{width:var(--icon-s);height:var(--icon-s);color:var(--accent)}
/* UX 433 round 2 S-004: the phone "+" on the editor it opens: in its place, marked as the page, not a key */
.pc-root:not(.pc-guest) .pc-header .pn-header__earn.is-here{pointer-events:none;background:var(--chrome-well-hover);color:var(--on-chrome)}
/* UX 433 round 2 G-122: on touch screens an inline link in a member page's text (a "See why", "Unblock", "Help" in a line) gets a
   44 px tall tap area without moving a pixel: an invisible hit box around it (the link itself keeps its line height) */
@media (pointer:coarse){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-main :is(p,dd,small,label,.pc-sub,.pc-help,.pn-row__main) a:is(:not([class]),.pc-more){position:relative}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-main :is(p,dd,small,label,.pc-sub,.pc-help,.pn-row__main) a:is(:not([class]),.pc-more)::after{content:"";position:absolute;inset:-12px -6px}
}
/* UX 433 round 2 B-004: where the header shows its nav (Sellers · Videos · Listings), the page's own Sellers / Listings / Videos
   pills are the same switch a second time — they step aside; where the nav folds into "Menu" (the widths and languages of
   inside.css, or .is-tight from chat.js) they stay the visible switch */
@media (min-width:1361px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pc-header:not(.is-tight) .pc-nav) .pn-discseg{display:none}}
@media (min-width:1101px) and (max-width:1360px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):lang(en):has(.pc-header:not(.is-tight) .pc-nav) .pn-discseg{display:none}}
/* owner 05.11. (the market head is one row): where the view tabs are hidden, their empty row on the market goes too */
@media (min-width:1361px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pc-header:not(.is-tight) .pc-nav) .pn-mk .pc-apphead__tabs:has(> .pn-discseg){display:none}}
@media (min-width:1101px) and (max-width:1360px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):lang(en):has(.pc-header:not(.is-tight) .pc-nav) .pn-mk .pc-apphead__tabs:has(> .pn-discseg){display:none}}
/* UX 433 G-016: the "back to Your corner" pill is desktop-only (ui_apphead marks it .pc-hide-sm; app.css's display would keep it) */
@media (max-width:700px){.pn-backchip.pc-hide-sm{display:none}}
/* UX 433 G-018: the head carries both states, chat.js shows the true one */
.pn-md__stats[hidden],.pn-md__stats > a[hidden],.pn-md__allread[hidden]{display:none}

/* ---------- body: the aside's groups as the kit's rows (app.css .pn-row, §9.3: 12 tall padding, --r-m, the 40 well, 20 icon) */
.pn-md__body{display:grid;gap:var(--space-1);padding:0 var(--space-2) var(--space-2)}
.pn-md__sec .pn-grouplabel{margin:0;padding:var(--space-4) var(--space-2) var(--space-2)}
.pn-md__body .pn-rows{display:grid;gap:0}
.pn-md__row.pn-row{gap:var(--space-3);padding:var(--space-3) var(--space-2);border-radius:var(--r-m)}
.pn-md__row .pn-rowicon{width:var(--avatar-m);height:var(--avatar-m)}
.pn-md__row .pn-rowicon .pc-ico{width:var(--icon-m);height:var(--icon-m)}
.pn-md__row .pn-row__main > b{font:var(--type-strong)}
.pn-md__row .pn-row__main > span{font:var(--type-meta);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}   /* fr / pt sub lines take a second line instead of an ellipsis mid-word */
.pn-md__row .pc-badge{flex:none}
.pn-md__row .pn-chev{width:var(--icon-m);height:var(--icon-m);color:var(--glyph-off)}

/* ---------- foot: light / dark as a row, the language pills, Log out (no block of its own: one sheet, one tone, MCH-059) */
.pn-md__foot{display:grid;gap:var(--space-3);margin-top:auto;padding:var(--space-2) var(--space-2) calc(env(safe-area-inset-bottom) + var(--space-4))}
.pn-md__theme{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);padding:var(--space-2);border-radius:var(--r-m);color:var(--ink);text-decoration:none;font:var(--type-strong)}
.pn-md__theme:hover{background:var(--sunken)}
.pn-md__theme .pn-rowicon{width:var(--avatar-m);height:var(--avatar-m)}
.pn-md__themel{flex:1;min-width:0}   /* its switch is the house one (UX 17.10. #76, components.css .pc-switch) */
/* the languages: one row of pills (MCH-058 / MCH-078): --type-label, the 44 tap height, the current one the next tone */
.pn-md__lang{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);margin:0 var(--space-2);padding:0;list-style:none}
.pn-md__lang a{display:grid;place-items:center;min-height:var(--tap);border-radius:var(--r-full);color:var(--ink-2);font:var(--type-label);text-decoration:none;white-space:nowrap;overflow:hidden}
.pn-md__lang a:hover{color:var(--ink);background:var(--sunken)}
.pn-md__lang a[aria-current]{background:var(--sunken);color:var(--ink)}
/* UX 433 round 2 G-025: the same five language keys as a Settings row (lsettings.php .pn-setlang) */
.pn-setlang.pn-setlang{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);align-items:start}
.pn-setlang .pn-md__lang{width:100%;max-width:320px;margin:0}
.pn-md__out.pc-btn{width:auto;min-height:var(--tap);margin:0 var(--space-2);justify-content:center}
.pn-md :is(.pn-md__close,.pn-md__me,.pn-md__stats > a,.pn-md__theme,.pn-md__lang a):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-md__head :is(.pn-md__close,.pn-md__me,.pn-md__stats > a):focus-visible{outline-color:var(--accent)}
.pn-md__body .pn-row:focus-visible,.pn-md__theme:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  .pn-md,.pn-md__scrim,.pn-md__sheet{transition:none}
}
/* Earn key (owner 17.10., header.php pn-header__pay; member drawer layer, never in a guest bundle): a free seller's pink pay key, one line. On phones the
   "New listing" key is its "+" circle beside it (its name stays the aria-label) and the pay key shows its short form (the
   waiting buyers' number beside a chat icon, or one word; the full label is the aria-label), so logo + "+" + pay key +
   bell + menu fit from 361 px; below see the 360 px rule. */
.pc-root:not(.pc-guest) .pc-header .pn-header__pay{white-space:nowrap;padding-inline:var(--space-3)}
.pc-root:not(.pc-guest) .pc-header .pn-header__payshort{display:none;align-items:center;gap:var(--space-1)}
@media (max-width:700px){
  .pc-root:not(.pc-guest) .pc-header .pn-header__earn > svg{display:block}
  /* owner 05.11.: the round "+" on every member phone header — on /membership/ (no pay key there) the labelled key ran 14 px past the edge */
  /* the phone "+" (MCH-041, owner: "oval statt Kreis"): round 44 x 44, the 24 plus centred (dark.css's padding cannot widen it) */
  .pc-root:not(.pc-guest) .pc-header .pn-header__earn{width:var(--header-key);min-width:var(--header-key);height:var(--header-key);padding:0;justify-content:center;border-radius:var(--r-full)}
  .pc-root:not(.pc-guest) .pc-header .pn-header__earn > svg{flex:none;width:var(--icon-l);height:var(--icon-l)}
  .pc-root:not(.pc-guest) .pc-header .pn-header__earnlbl{display:none}
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-themebtn{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__paylong{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__payshort{display:inline-flex}
  /* UX 433 G-001 / S-001 / G-120: "Start earning" is a round pink crown key on phones (its words stay its name): in dark the word
     was cut to "E…", in light it pushed the menu 11 px off the screen and every seller page scrolled sideways (the class thrice:
     dark.css's 430 px padding rule must not widen it) */
  .pc-root:not(.pc-guest) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay[data-kind="earn"]{width:var(--header-key);min-width:var(--header-key);height:var(--header-key);padding:0;justify-content:center;border-radius:var(--r-full)}
  .pc-root:not(.pc-guest) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay[data-kind="earn"] .pc-ico{flex:none;width:var(--icon-l);height:var(--icon-l)}
  .pc-root:not(.pc-guest) .pc-header .pn-header__end{min-width:0}
}
/* owner 05.11.: on a small tablet (701-820) logo + Menu + Feed + search + "+" + the pay key + chats + bell + avatar still need
   up to 791 px (pt) with every other key folded (inside.css): there the pay key takes its phone form — the round pink crown, or
   the waiting buyers' short line; it stays pink, its words stay its name. chat.js adds .is-mini where a bar is still too wide. */
@media (min-width:701px) and (max-width:820px){
  .pc-root:not(.pc-guest) .pc-header .pn-header__paylong{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__payshort{display:inline-flex}
  .pc-root:not(.pc-guest) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay[data-kind="earn"]{width:var(--header-key);min-width:var(--header-key);height:var(--header-key);padding:0;justify-content:center;border-radius:var(--r-full)}
  .pc-root:not(.pc-guest) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay[data-kind="earn"] .pc-ico{flex:none;width:var(--icon-l);height:var(--icon-l)}
}
@media (min-width:701px){
  .pc-root:not(.pc-guest) .pc-header.is-mini .pn-header__paylong{display:none}
  .pc-root:not(.pc-guest) .pc-header.is-mini .pn-header__payshort{display:inline-flex}
  .pc-root:not(.pc-guest) .pc-header.is-mini .pn-header__pay.pn-header__pay.pn-header__pay[data-kind="earn"]{width:var(--header-key);min-width:var(--header-key);height:var(--header-key);padding:0;justify-content:center;border-radius:var(--r-full)}
  .pc-root:not(.pc-guest) .pc-header.is-mini .pn-header__pay.pn-header__pay.pn-header__pay[data-kind="earn"] .pc-ico{flex:none;width:var(--icon-l);height:var(--icon-l)}
}
/* up to 360 px logo + "+" + the pay key + bell + menu need 325-370 px in fr / it / pt: there the pay key keeps the place
   and the "+" steps aside (New listing stays on My listings and on the desktop header) */
@media (max-width:360px){
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-header__earn{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__pay{padding-inline:var(--space-2)}
}
/* light chrome (owner 04.11.2026, tokens.css «LIGHT CHROME»): the drawer's head is the header's paper, so one grey 50 % hairline
   parts it from the sheet below (as the header from the page); and the header's paid door stays THE pink key on every page in
   light too, as dark.css paints it in dark (owner 01.11.: «stays pink on every page») — on the paper header a demoted pay key
   would be one more duck-egg pill */
[data-theme="light"] .pc-root:not(.pc-guest,.pn-adm) .pn-md__head{--chrome:var(--paper);--on-chrome:var(--anthracite);--on-chrome-2:var(--muted-lt);--chrome-well:var(--duck);--chrome-well-hover:var(--duck-2);border-bottom:1px solid var(--mline)}
[data-theme="light"] .pc-root:not(.pc-guest,.pn-adm) .pn-md__head :focus-visible{outline-color:var(--focus-ring)}
[data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay{background:var(--accent);color:var(--on-accent);border-color:transparent}
[data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay:hover{background:var(--accent-press);color:var(--on-accent)}
/* UX 433 G-104: the member footer is one row — Help · Terms · Privacy · Legal notice, then the languages */
.pc-footer.pn-gfooter--min{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6)}
.pn-gfooter--min .pn-gfooter__row ul{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);margin:0;padding:0;list-style:none}
.pn-gfooter--min .pn-gfooter__row a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font:var(--type-meta);text-decoration:none}
.pn-gfooter--min .pn-gfooter__row a:hover{color:var(--ink);text-decoration:underline}
.pc-footer.pn-gfooter--min .pn-gfooter__bar{margin-top:0}
/* UX 433 G-108: the member 404's search field, above the card's key */
.pn-nf__search{display:flex;align-items:center;gap:var(--space-2);width:100%;max-width:420px;margin:0 auto var(--space-4);padding:0 var(--space-4);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2)}
.pn-nf__search input{flex:1;min-width:0;min-height:44px;border:0;background:none;color:var(--ink);font:var(--type-body);outline:none}
.pn-nf__search:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
/* @end-member-only */
/* @member-only */
/* MODERN DARK + SIGNATURE PINK (owner 01.11.2026, "Panty – Modern Dark UI Redesign", reference /Users/extraplanet/dev/pcom/neu.jpg),
   since 03.11. the theme layer of the design system (docs/design-system.md). The member area's dark theme only: neutral
   anthracite surfaces, white and greys, the brand pink as the one accent. The colours are TOKENS (src-css/tokens.css, the
   member block: --surface, --surface-2, --surface-3, --ink …); this file only holds what the tokens cannot say, and the rules
   that must outrank the plastik look's own components (src-css/plastik/site.css) for members and — through
   tools/css_plastik.php, which projects this file onto the guest body — for guests.
   Written ONCE: tools/build_css.sh prints the "auto" twin (no data-theme on a dark system) through tools/css_twin.php
   (the hand-copied second block of 01.11.–03.11. is gone, MCH-021, MSL-017, MCT-016, MBY-025).
   The page-own rules that lived here (the feed and its rails, the seller home's money cards and wishes, the price field of
   the listing editor) moved into their page files on 03.11. (pages/livefeed.css, pages/account.css, pages/items.css). */
/* @dark-twin */

/* @light-twin */
/* header: the deepest tone (tokens), the nav in ink with the pink underline on the current page */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{color:var(--ink);transition:color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link:hover{color:var(--accent)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link.is-active,
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link[aria-current]{color:var(--ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{background:transparent;color:var(--ink);transition:background-color var(--md-ease),color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:hover{background:var(--surface-2);color:var(--accent)}
/* owner 04.11.: the current page's header icon is pink (no underline under keys); the avatar of Your corner gets a pink ring */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]){color:var(--accent)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar:is(.is-active,[aria-current="page"]){box-shadow:0 0 0 2px var(--accent)}
/* the header's paid door ("3 buyers waiting" / "Start earning") is THE accent and stays pink on every page (owner 01.11.) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay{box-shadow:none;background:var(--accent);color:var(--on-accent);border-color:transparent;border-radius:var(--r-full);font-weight:var(--w-bold);transition:background-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay:hover{background:var(--accent-press);color:var(--on-accent)}
/* "New listing" and the other header keys: secondary, never competing with the pink one */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key){background:var(--surface-2);color:var(--ink);border:1px solid var(--md-line);border-radius:var(--r-full);transition:background-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key):hover{background:var(--surface-3)}
/* sizes measured on the reference (owner: "Breite, Schriftgröße und Schriftarten 1:1"), on the system's steps */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{min-height:var(--header-h)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{font:var(--type-nav);letter-spacing:0}   /* owner decision 03.11.: the nav on 600 */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__pay,.pn-header__earn,.pn-header__new,.pn-navpin,.pn-navmore__key){min-height:var(--header-key);padding:0 var(--space-5);font:var(--type-nav)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:var(--header-key);height:var(--header-key)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn .pc-ico{width:var(--icon-l);height:var(--icon-l)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar{width:44px;height:44px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:46px}
/* innen 500 CON-19: on phones the header ran 9-29 px past the edge in it / fr ("Guadagna", "Gagnez"): the earn key keeps its
   place and its pink, only its padding and the gaps step down; should a word still not fit, the label shrinks with an
   ellipsis (its full name stays the aria-label) instead of pushing the menu key off the screen */
@media (max-width:430px){
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__end{min-width:0;gap:var(--space-1)}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__end .pc-header__icons{gap:var(--space-1)}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay{min-width:0;flex:0 1 auto;padding:0 var(--space-3);font:700 15px/22px var(--body)}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__payshort{min-width:0;max-width:100%}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__paytxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:44px;height:44px}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{flex-shrink:0}
}
@media (max-width:380px){[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:40px}}

/* keys (docs/design-system.md §7.2): flat — no sheen, gradient, inset highlight or lift (owner 02.11.: "der muss flat");
   primary = the pink, secondary = one step up from what it stands on (--t-tint: surface 2 on a panel, surface 3 in a sheet),
   quiet = transparent with the step on the pointer, danger = the danger ink. Never a pale white key (owner 02.11.). These
   outrank the plastik look's silver pills (src-css/plastik/site.css) for members, and — projected — for guests. */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn{box-shadow:none;text-shadow:none;transition:background-color var(--md-ease),color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn:not(.pc-btn--primary,.pc-btn--premium){background-image:none}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary:hover{background:var(--accent-press)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--secondary,.pc-btn--line,.pc-btn--ink,.pc-btn--soft,.pc-btn--on-chrome):not(.pn-header__pay){background-color:var(--t-tint);color:var(--ink);border:1px solid var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--secondary,.pc-btn--line,.pc-btn--ink,.pc-btn--soft,.pc-btn--on-chrome):not(.pn-header__pay):hover{background-color:var(--t-tint-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay){background-color:transparent;color:var(--ink);border:1px solid var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay):hover{background-color:var(--t-tint)}
/* a quiet key on the chrome (the guest header's «Log in») stays a secondary key there (docs/design-system.md §13) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay){background-color:var(--surface-2)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay):hover{background-color:var(--surface-3)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--danger:not(.is-confirm){background-color:transparent;color:var(--danger);border:1px solid var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--danger:not(.is-confirm):hover{background-color:var(--t-tint)}
/* a surface-2 block that holds keys (her review answer, partials/review_answer.php): the keys in it are surface 3 (+1 step) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-ra{--t-tint:var(--surface-3);--t-tint-2:var(--surface-3)}

/* cards (docs/design-system.md §9.1): the seller card's caption on a dark foot (no pink filter), ink name, glass chips,
   the heart on glass; no lift, no scale */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{color:var(--scard-ink);font-size:var(--fs-title)}   /* owner 05.11. «farbprobleme»: words on her photo take the photo ink (cream in light too; ink was anthracite in the light twin) */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{color:var(--scard-ink-2);font-size:var(--fs-body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-scard__score,.pc-scard__n){background:var(--glass);color:var(--scard-ink);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav{background:var(--glass);border-color:transparent;color:var(--scard-ink);transition:background-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav:hover{background:var(--scard-glass-hover)}

/* the like when it is on, with one small pop (--dur-2) */
@keyframes pn-md-like{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-like,.pc-card__fav)[aria-pressed="true"] .pc-ico{color:var(--accent);animation:pn-md-like var(--dur-2) ease-out}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) *{animation:none !important;transition:none !important}
}
/* header, footer and the phone tab bar keep one grey 50 % hairline (the owner's standing order: grey 50 %, never white, never
   removed — innen 500 CON-15, confirmed 03.11.); in the plastik look its floating tab bar keeps its own inset grey 50 % ring
   (plastik/site.css), so the box-shadow reset skips .pk-site */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{border-bottom-color:var(--hline)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-footer,.pn-gfooter){border-top-color:var(--mline)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-tabbar{border-top-color:var(--mline)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm,.pk-site) .pc-tabbar{box-shadow:none}
/* @end-light-twin */
/* the light twin (generated by tools/css_twin.php, UX 433 G-118) */
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{color:var(--ink);transition:color var(--md-ease)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link:hover{color:var(--accent)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link.is-active, [data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link[aria-current]{color:var(--ink)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{background:transparent;color:var(--ink);transition:background-color var(--md-ease),color var(--md-ease)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:hover{background:var(--surface-2);color:var(--accent)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]){color:var(--accent)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar:is(.is-active,[aria-current="page"]){box-shadow:0 0 0 2px var(--accent)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay{box-shadow:none;background:var(--accent);color:var(--on-accent);border-color:transparent;border-radius:var(--r-full);font-weight:var(--w-bold);transition:background-color var(--md-ease)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay:hover{background:var(--accent-press);color:var(--on-accent)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key){background:var(--surface-2);color:var(--ink);border:1px solid var(--md-line);border-radius:var(--r-full);transition:background-color var(--md-ease)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key):hover{background:var(--surface-3)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{min-height:var(--header-h)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{font:var(--type-nav);letter-spacing:0}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__pay,.pn-header__earn,.pn-header__new,.pn-navpin,.pn-navmore__key){min-height:var(--header-key);padding:0 var(--space-5);font:var(--type-nav)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:var(--header-key);height:var(--header-key)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn .pc-ico{width:var(--icon-l);height:var(--icon-l)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar{width:44px;height:44px}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:46px}
@media (max-width:430px){
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__end{min-width:0;gap:var(--space-1)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__end .pc-header__icons{gap:var(--space-1)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay{min-width:0;flex:0 1 auto;padding:0 var(--space-3);font:700 15px/22px var(--body)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__payshort{min-width:0;max-width:100%}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__paytxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:44px;height:44px}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{flex-shrink:0}
}
@media (max-width:380px){
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:40px}
}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn{box-shadow:none;text-shadow:none;transition:background-color var(--md-ease),color var(--md-ease)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn:not(.pc-btn--primary,.pc-btn--premium){background-image:none}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary:hover{background:var(--accent-press)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--secondary,.pc-btn--line,.pc-btn--ink,.pc-btn--soft,.pc-btn--on-chrome):not(.pn-header__pay){background-color:var(--t-tint);color:var(--ink);border:1px solid var(--md-line)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--secondary,.pc-btn--line,.pc-btn--ink,.pc-btn--soft,.pc-btn--on-chrome):not(.pn-header__pay):hover{background-color:var(--t-tint-2)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay){background-color:transparent;color:var(--ink);border:1px solid var(--md-line)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay):hover{background-color:var(--t-tint)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay){background-color:var(--surface-2)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay):hover{background-color:var(--surface-3)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--danger:not(.is-confirm){background-color:transparent;color:var(--danger);border:1px solid var(--md-line)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--danger:not(.is-confirm):hover{background-color:var(--t-tint)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-ra{--t-tint:var(--surface-3);--t-tint-2:var(--surface-3)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{color:var(--scard-ink);font-size:var(--fs-title)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{color:var(--scard-ink-2);font-size:var(--fs-body)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-scard__score,.pc-scard__n){background:var(--glass);color:var(--scard-ink);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav{background:var(--glass);border-color:transparent;color:var(--scard-ink);transition:background-color var(--md-ease)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav:hover{background:var(--scard-glass-hover)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-like,.pc-card__fav)[aria-pressed="true"] .pc-ico{color:var(--accent);animation:pn-md-like var(--dur-2) ease-out}
@media (prefers-reduced-motion: reduce){
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) *{animation:none !important;transition:none !important}
}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{border-bottom-color:var(--hline)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-footer,.pn-gfooter){border-top-color:var(--mline)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-tabbar{border-top-color:var(--mline)}
[data-theme="light"][data-theme="light"][data-theme="light"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm,.pk-site) .pc-tabbar{box-shadow:none}

/* @end-dark-twin */
/* the auto twin (generated by tools/css_twin.php) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{color:var(--ink);transition:color var(--md-ease)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link:hover{color:var(--accent)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link.is-active, :root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link[aria-current]{color:var(--ink)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{background:transparent;color:var(--ink);transition:background-color var(--md-ease),color var(--md-ease)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:hover{background:var(--surface-2);color:var(--accent)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]){color:var(--accent)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar:is(.is-active,[aria-current="page"]){box-shadow:0 0 0 2px var(--accent)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay{box-shadow:none;background:var(--accent);color:var(--on-accent);border-color:transparent;border-radius:var(--r-full);font-weight:var(--w-bold);transition:background-color var(--md-ease)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay:hover{background:var(--accent-press);color:var(--on-accent)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key){background:var(--surface-2);color:var(--ink);border:1px solid var(--md-line);border-radius:var(--r-full);transition:background-color var(--md-ease)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key):hover{background:var(--surface-3)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{min-height:var(--header-h)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{font:var(--type-nav);letter-spacing:0}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__pay,.pn-header__earn,.pn-header__new,.pn-navpin,.pn-navmore__key){min-height:var(--header-key);padding:0 var(--space-5);font:var(--type-nav)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:var(--header-key);height:var(--header-key)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn .pc-ico{width:var(--icon-l);height:var(--icon-l)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar{width:44px;height:44px}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:46px}
@media (max-width:430px){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__end{min-width:0;gap:var(--space-1)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__end .pc-header__icons{gap:var(--space-1)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay{min-width:0;flex:0 1 auto;padding:0 var(--space-3);font:700 15px/22px var(--body)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__payshort{min-width:0;max-width:100%}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__paytxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:44px;height:44px}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{flex-shrink:0}
}
@media (max-width:380px){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:40px}
}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn{box-shadow:none;text-shadow:none;transition:background-color var(--md-ease),color var(--md-ease)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn:not(.pc-btn--primary,.pc-btn--premium){background-image:none}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary:hover{background:var(--accent-press)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--secondary,.pc-btn--line,.pc-btn--ink,.pc-btn--soft,.pc-btn--on-chrome):not(.pn-header__pay){background-color:var(--t-tint);color:var(--ink);border:1px solid var(--md-line)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--secondary,.pc-btn--line,.pc-btn--ink,.pc-btn--soft,.pc-btn--on-chrome):not(.pn-header__pay):hover{background-color:var(--t-tint-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay){background-color:transparent;color:var(--ink);border:1px solid var(--md-line)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay):hover{background-color:var(--t-tint)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay){background-color:var(--surface-2)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pc-btn--quiet,.pc-btn--ghost):not(.pn-header__pay):hover{background-color:var(--surface-3)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--danger:not(.is-confirm){background-color:transparent;color:var(--danger);border:1px solid var(--md-line)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--danger:not(.is-confirm):hover{background-color:var(--t-tint)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-ra{--t-tint:var(--surface-3);--t-tint-2:var(--surface-3)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{color:var(--scard-ink);font-size:var(--fs-title)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{color:var(--scard-ink-2);font-size:var(--fs-body)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-scard__score,.pc-scard__n){background:var(--glass);color:var(--scard-ink);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav{background:var(--glass);border-color:transparent;color:var(--scard-ink);transition:background-color var(--md-ease)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav:hover{background:var(--scard-glass-hover)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-like,.pc-card__fav)[aria-pressed="true"] .pc-ico{color:var(--accent);animation:pn-md-like var(--dur-2) ease-out}
@media (prefers-reduced-motion: reduce){
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) *{animation:none !important;transition:none !important}
}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{border-bottom-color:var(--hline)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-footer,.pn-gfooter){border-top-color:var(--mline)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-tabbar{border-top-color:var(--mline)}
:root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm,.pk-site) .pc-tabbar{box-shadow:none}
}


/* the plastik look's blush pill glow (and its member twin) never on the pay key here: one flat pink accent */
html[data-plk][data-plk]:not([data-theme="light"]) body.pk-site.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay{box-shadow:none}
/* @end-member-only */
/* @member-only */
/* OUTSIDE ESCROW — HER / HIS ORDER CARD (owner 03.11., templates/partials/onw_card.php .pn-esccard; escrow audit fixes 03.11.,
   audits B-021 / B-022 / D-034..D-046). Inside the member area: Inter, sentence case, no edges — surfaces only (owner 09.10. /
   18.10.). The payout step is one surface-2 step with a real heading; the steps are numbered dots; the "I don't want escrow"
   and cancel actions are quiet text keys, never a second button of the same weight; dispute and late read as warnings. */
/* design system P4 (03.11.): no pink text for states or warnings (MCT-094) — the state line is 13/18 ink 2 with its icon, a
   warning is ink on a note (surface 2) with the warning icon, a negative state the danger icon; one radius outside (--r-l,
   the card) and one inside (--r-m) (MCT-099); the tracking field in Inter, tabular (MCT-096); the quiet keys 13/18 600 in ink 2
   with a 44 hit (MCT-098); the focus ring is the one ring (§8). Wording unchanged. */
.pn-esccard .pn-docard__k{display:flex;align-items:flex-start;gap:var(--space-2)}
.pn-esccard .pn-docard__k > svg{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-esccard .pn-docard__k--warn{padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);color:var(--ink)}
.pn-esccard .pn-docard__k--warn > svg{color:var(--warning)}
.pn-esccard__hint{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-3) 0 0;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink)}
.pn-esccard__hint > svg{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-esccard__two{display:inline-block;padding:var(--space-1) var(--space-2);border-radius:var(--r-s);background:var(--surface-2);font:var(--type-cap)}
.pn-esccard__quiet{display:inline-flex;align-items:center;min-height:var(--tap);margin:0;padding:0;border:0;background:none;font:var(--type-label);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-esccard__quiet:hover{color:var(--ink)}
.pn-esccard__quiet--in{position:relative;min-height:0;margin:0 0 0 var(--space-2);padding:0}
.pn-esccard__quiet--in::after{content:"";position:absolute;inset:-12px -4px}
.pn-esccard__confirm{display:grid;gap:var(--space-2);margin-top:var(--space-2);padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
.pn-esccard__confirm[hidden]{display:none}
.pn-esccard__to{font-variant-numeric:tabular-nums}
.pn-esccard__prem a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
.pn-esccard .pn-onwcard__addr + .pc-help{margin-top:var(--help-gap,var(--space-1))}
/* the payout step: one surface, a heading, the field first, the "I don't have one" help after the key (D-041) */
.pn-escpay{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--r-m);background:var(--surface-2)}
.pn-escpay[hidden]{display:none}
.pn-escpay__h{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-escpay .pc-help{margin:0}
.pn-escpay .pc-btn{justify-self:start}
.pn-escpay .pc-input{background:var(--surface-3)}   /* +1 step: a field on the surface-2 step is surface 3 */
.pn-escpay__in{font:var(--type-ui);font-variant-numeric:tabular-nums}
.pn-escpay__in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-escpay__how > summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);font:var(--type-label);color:var(--ink);cursor:pointer}
.pn-escpay__how > summary::-webkit-details-marker{display:none}
.pn-escpay__how > summary > svg{color:var(--ink-2);transition:transform var(--dur-1) ease-out}
.pn-escpay__how[open] > summary > svg{transform:rotate(180deg)}
.pn-escpay__steps{list-style:none;margin:var(--space-1) 0 var(--space-2);padding:0;display:grid;gap:var(--space-2);counter-reset:esc}
.pn-escpay__steps li{display:grid;grid-template-columns:24px 1fr;gap:var(--space-2);font:var(--type-meta);color:var(--ink-2);counter-increment:esc}
.pn-escpay__steps li::before{content:counter(esc);width:24px;height:24px;border-radius:var(--r-full);background:var(--surface-3);color:var(--ink);display:grid;place-items:center;font:var(--type-cap)}
/* the ship form + his address on her accepted order: labels and the "(optional)" note 13/18, fields and the key 44, the
   address on a note (MCT-096 / MCT-097) */
.pn-onwcard__ship .pc-label small,.pn-onwcard .pc-label small{font:var(--type-meta);color:var(--ink-2)}
.pn-onwcard__ship .pc-btn{min-height:var(--control-md)}
.pn-onwcard__ship .pc-input{min-height:var(--control-md)}
/* "Request an offer" card (night 05.11., partials/pcfo_card.php .pn-pcfocard, arm "new" only): the same rule as the escrow
   card — the grid gap is the rhythm. The help lines' own 13 px margins, the facts list's 8 and the forms' 12 stood on top of
   it (12–38 px between rows at 390 and 1440); the forms are grids with the same gap; a label sits on its chips at the label
   gap; stacked quiet keys keep their 44 hit without the row gap between them. Surfaces and type unchanged, no edges. */
.pn-pcfocard > *,.pn-pcfocard > .pn-onwcard__ship,.pn-pcfocard > .pn-onw__facts{margin-block:0}
.pn-pcfocard form{display:grid;gap:var(--space-3)}
.pn-pcfocard form > p,.pn-pcfocard form > .pc-field{margin-block:0}
.pn-pcfocard .pn-onwcard__ship{gap:var(--space-3);margin-block:0}
.pn-pcfocard form > .pc-label + .pc-chips{margin-top:calc(var(--label-gap) - var(--space-3))}
.pn-pcfocard .pc-field > .pc-help{margin-bottom:0}
.pn-pcfocard > details + details{margin-top:calc(-1 * var(--space-3))}
/* escrow simplification 05.11. (partials/esc_card.php): one card for every escrow order — the amount as the headline, what it
   is for, the "checking your payment" note, the quiet "I can't deliver" fold; a finished card folds to one line */
.pn-esccard__head{display:grid;gap:2px;margin:0}
.pn-esccard__head b{font:var(--type-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-esccard__head span{font:var(--type-meta);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-esccard__for{margin:0;font:var(--type-meta);color:var(--ink-2);overflow-wrap:anywhere}
.pn-esccard__check{display:grid;grid-template-columns:16px 1fr;gap:var(--space-2);align-items:start;margin:0;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink)}
.pn-esccard__check > svg{margin-top:1px;color:var(--ink-2)}
.pn-esccard [hidden]{display:none}
.pn-esccard > .pn-escsteps,.pn-esccard > .pn-onwcard__ship,.pn-esccard > details{margin-block:0}
.pn-esccard__addtrack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
.pn-esccard__addtrack .pc-btn{justify-self:start}
.pn-escdone > summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:var(--space-2) var(--space-3);border-radius:var(--r-l);background:var(--surface-2);cursor:pointer;color:var(--ink-2)}
.pn-escdone > summary::-webkit-details-marker{display:none}
.pn-escdone__t{display:grid;gap:2px;min-width:0;flex:1}
.pn-escdone__t b{font:var(--type-label);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-escdone__t span{font:var(--type-cap);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-escdone__chev{flex:none;transition:transform var(--dur-1) ease-out}
.pn-escdone[open] > summary{margin-bottom:var(--space-2)}
.pn-escdone[open] .pn-escdone__chev{transform:rotate(180deg)}
/* @end-member-only */
/* escrow go-live pass (night task 04.11.): the card is a grid, its gap is the rhythm — the help lines' own 13 px margins and the
   hint's top margin doubled it (25–40 px between the quiet lines at 390 and 1440) */
.pn-esccard > .pc-help,.pn-esccard > .pn-esccard__hint{margin-block:0}
/* @member-only */
/* «GETTING PAID» — the seller's setup page /account/escrow/ (owner 05.11., templates/esc_setup.php, lib/esc_setup.php).
   One column of panels on the settings page's measure (.pn-set--one), surfaces only, no edges; the state rows wrap (their
   sub-lines are sentences, not labels); the four wallet steps are numbered dots as on the escrow card's payout step; the
   never-ask note is ink on a surface-2 note with the lock; the address field in Inter, tabular; one pink key (Save address). */
.pn-escs{max-width:820px;margin-inline:auto}   /* a calm step page: one reading measure on wide screens */
.pn-escs__col{gap:var(--space-4)}
.pn-escs__col > .pc-alert{margin:0}
.pn-escs__state{display:grid;gap:var(--space-1);padding-block:var(--space-2)}
.pn-escs__onform{margin:0}
.pn-escs__row{align-items:flex-start;padding-inline:var(--space-3)}
.pn-escs__row .pn-row__main > b,.pn-escs__row .pn-row__main > span{white-space:normal;overflow:visible}
.pn-escs__row .pc-switch{flex:none;align-self:center}
.pn-escs__ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink-2)}
.pn-escs__ico.is-ok{color:var(--success)}
.pn-escs__ico.is-miss{color:var(--warning)}
.pn-escs__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pn-escs__sec{display:grid;gap:var(--space-3)}
.pn-escs__sec > *{margin:0}
.pn-escs__p{font:var(--type-body);color:var(--ink)}
.pn-escs__steps{list-style:none;padding:0;display:grid;gap:var(--space-3)}
.pn-escs__steps li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);align-items:start}
.pn-escs__n{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);font:var(--type-cap)}
.pn-escs__st{display:grid;gap:2px;min-width:0}
.pn-escs__st > b{font:var(--type-strong);color:var(--ink)}
.pn-escs__st > span{font:var(--type-meta);color:var(--ink-2)}
/* «Getting paid» (friction audit 05.11.): how escrow works as three numbered lines, where she can use it, the steps folded once
   her address is set (the escrow card's fold voice), My escrow payments as a third state row */
.pn-escs__how{margin:0;padding:0 0 0 var(--space-5);display:grid;gap:var(--space-2);font:var(--type-body);color:var(--ink)}
.pn-escs__how li::marker{color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-escs__where{color:var(--ink-2)}
.pn-escs__row .pn-chev{flex:none;align-self:center;color:var(--ink-2)}
.pn-escs__fold{display:grid;gap:var(--space-3)}
.pn-escs__fold > summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);font:var(--type-label);color:var(--ink);cursor:pointer}
.pn-escs__fold > summary::-webkit-details-marker{display:none}
.pn-escs__fold > summary > svg{color:var(--ink-2);transition:transform var(--dur-1) ease-out}
.pn-escs__fold[open] > summary > svg{transform:rotate(180deg)}
.pn-escs__fold > p,.pn-escs__fold > ol{margin:0}
.pn-escs__fold[open] > summary{margin-bottom:var(--space-2)}
.pn-escs__never{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);font:var(--type-meta);color:var(--ink)}
.pn-escs__never > svg{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-escs__has{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:var(--type-body);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-escs__quiet{display:inline-flex;align-items:center;min-height:var(--tap);margin:0;padding:0;border:0;background:none;font:var(--type-label);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-escs__quiet:hover{color:var(--ink)}
.pn-escs__addr{display:grid;gap:var(--space-2)}
.pn-escs__addr[hidden]{display:none}
.pn-escs__addr > *{margin:0}
.pn-escs .pn-fielderr{margin:0;text-align:start}
.pn-escs__in{font:var(--type-ui);font-variant-numeric:tabular-nums}
.pn-escs__in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.pn-escs__msg{min-height:0;font:var(--type-meta);color:var(--ink-2)}
.pn-escs__msg:empty{display:none}
.pn-escs__msg.is-ok{display:flex;align-items:center;gap:var(--space-1);color:var(--ink)}
.pn-escs__msg.is-ok > svg{color:var(--success)}
.pn-escs__addr .pn-escs__acts{margin-top:var(--space-1)}
.pn-escs__help a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* @end-member-only */
/* @member-only */
/* ESCROW, SIMPLE (owner 05.11., lib/chat_escrow.php): her "Escrow payment" sheet beside the composer (partials/cesc_sheet.php),
   the four-step bar of an escrow payment with its one sentence (partials/esc_steps.php, the chat card and the overview), the
   tracking line of her ship form and "My escrow payments" (templates/escrow_list.php). Inside: Inter, sentence case, no
   edges — surfaces only; no pink for states (the one pink key stays the view's action); warnings ink on a note. */
/* escrow simplification 05.11. (friction audit seller #26 / #28 / #33): the panel sits right above the composer in the page
   flow — it never covers the composer — with its own head and close key; long content scrolls inside it */
.pn-cesc{margin:0 var(--space-3) var(--space-2);padding:0 var(--space-4) var(--space-4);border-radius:var(--r-m);background:var(--surface-2);max-height:min(60vh,560px);overflow:auto;overscroll-behavior:contain}
.pn-cesc[hidden]{display:none}
.pn-cesc__top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:0 calc(-1 * var(--space-4)) var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--surface-2)}
.pn-cesc__h{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-strong);color:var(--ink)}
.pn-cesc__h > svg{color:var(--ink-2)}
.pn-cesc__form{display:grid;gap:var(--space-3)}
.pn-cesc__form > *,.pn-cesc > .pc-help{margin:0}
.pn-cesc__first{margin:0;font:var(--type-meta);color:var(--ink-2)}
.pn-cesc__amt{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-3);max-width:420px}
.pn-cesc__amt .pc-field{margin:0}
.pn-cesc .pc-input{background:var(--surface-3);min-height:var(--control-md)}
.pn-cesc #pnCescA{font-variant-numeric:tabular-nums}
.pn-cesc__recv{margin:0;font:var(--type-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-cesc__recv:empty{display:none}
.pn-cesc .pc-btn{justify-self:start}
.pn-cesc .pn-fielderr[hidden]{display:none}
.pn-cesc__payout{display:grid;grid-template-columns:16px 1fr;gap:var(--space-2);align-items:start;margin:0;font:var(--type-meta);color:var(--ink)}
.pn-cesc__payout > svg{margin-top:1px;color:var(--ink-2)}
.pn-cesc__payout a{color:var(--ink);font-weight:var(--w-strong);text-decoration:underline;text-underline-offset:3px}
.pn-cesc__vault > summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);cursor:pointer}
.pn-cesc__vault > summary::-webkit-details-marker{display:none}
.pn-cesc__vault > summary > svg{color:var(--ink-2);transition:transform var(--dur-1) ease-out}
.pn-cesc__vault[open] > summary > svg{transform:rotate(180deg)}
.pn-cesc__vault > .pc-help{margin:0 0 var(--space-2)}
.pn-cesc__facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.pn-cesc__facts li{display:grid;grid-template-columns:16px 1fr;gap:var(--space-2);align-items:start;font:var(--type-meta);color:var(--ink-2)}
.pn-cesc__facts li > svg{margin-top:1px}
/* her entry in the composer's "+" menu: the first-time line under its name */
.pn-lcesc .pn-lctool__t small{display:block;font:var(--type-cap);color:var(--ink-2)}
/* one pink key per view (seller #27): while her panel is open its Send is the pink key, the composer's send steps back */
.pn-cesc:not([hidden]) ~ .pn-composer .pn-send{background:var(--surface-3);color:var(--ink)}
/* the four steps: one row of four on a note, the current step in ink, the done ones with a check, the end mark ✕ / ⚠ */
.pn-escsteps{display:grid;gap:var(--space-2)}
.pn-escsteps__bar{list-style:none;margin:0;padding:var(--space-3);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);border-radius:var(--r-m);background:var(--surface-2);counter-reset:none}
.pn-escsteps__s{display:grid;justify-items:start;gap:var(--space-1);min-width:0;font:var(--type-cap);color:var(--ink-3)}
.pn-escsteps__dot{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full);background:var(--surface-3);color:var(--ink-2);font:var(--type-cap);font-variant-numeric:tabular-nums}
.pn-escsteps__t{display:grid;gap:2px;overflow-wrap:anywhere}
.pn-escsteps__t small{font:var(--type-cap);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-escsteps__s.is-done,.pn-escsteps__s.is-now,.pn-escsteps__s.is-warn{color:var(--ink)}
.pn-escsteps__s.is-done .pn-escsteps__dot{background:var(--ink);color:var(--surface)}
.pn-escsteps__s.is-now .pn-escsteps__dot{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}   /* now = a ring, done = filled with a tick */
.pn-escsteps__s.is-now .pn-escsteps__t,.pn-escsteps__s.is-warn .pn-escsteps__t{font-weight:var(--w-strong)}
.pn-escsteps__s.is-warn .pn-escsteps__dot,.pn-escsteps__s.is-dispute .pn-escsteps__dot{background:var(--surface-3);color:var(--warning)}
.pn-escsteps__s.is-dispute,.pn-escsteps__s.is-cancel{color:var(--ink)}
.pn-escsteps__s.is-cancel .pn-escsteps__dot{background:var(--surface-3);color:var(--danger)}
.pn-escsteps__line{margin:0;font:var(--type-meta);color:var(--ink)}
.pn-escsteps__line.is-warn{padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
.pn-escsteps__due{display:grid;grid-template-columns:16px 1fr;gap:var(--space-2);align-items:start;margin:0;font:var(--type-meta);color:var(--ink)}
.pn-escsteps__due > svg{margin-top:1px;color:var(--ink-2)}
.pn-escsteps--n3 .pn-escsteps__bar{grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-escsteps--sm .pn-escsteps__bar{padding:var(--space-2)}
.pn-escsteps--sm .pn-escsteps__dot{width:20px;height:20px}
.pn-escsteps--sm .pn-escsteps__line{color:var(--ink-2)}
/* her ship form: the tracking number asked for clearly (still optional) */
.pn-esccard__track{display:grid;grid-template-columns:16px 1fr;gap:var(--space-2);align-items:start;margin:0}
.pn-esccard__track > svg{margin-top:1px;color:var(--warning)}
.pn-esccard__all{margin:0}
.pn-esccard__all a,.pn-escl__head{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* My escrow payments: one row per payment, the bar inside it, surfaces only */
.pn-escl__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.pn-escl__row{display:grid;gap:var(--space-2);padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
.pn-escl__row .pn-escsteps__bar{background:var(--surface-3)}
.pn-escl__row .pn-escsteps__dot{background:var(--surface-2)}
.pn-escl__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--tap);text-decoration:none}
.pn-escl__who{display:grid;gap:2px;min-width:0}
.pn-escl__who b{font:var(--type-strong);font-variant-numeric:tabular-nums}
.pn-escl__who span{font:var(--type-meta);color:var(--ink-2)}
.pn-escl__for,.pn-escl__claim,.pn-escl__note{margin:0}
.pn-escl__claim{display:grid;grid-template-columns:16px 1fr;gap:var(--space-2);align-items:start}
@media (max-width:480px){   /* escrow simplification 05.11.: the bar stays one row (a 2 × 2 grid read like two columns) */
  .pn-escsteps__bar{gap:var(--space-1);padding:var(--space-2)}
}
/* @end-member-only */
/* @member-only */
/* MY ESCROW PAYMENTS, simpler (owner 05.11., templates/escrow_list.php, lib/esc_list.php): the summary as four quiet figures on
   one surface (two by two on phones), each running payment's one action under its bar, finished payments as single lines,
   her file evidence folded. Surfaces only, no edges, Inter, tabular figures; no pink here. */
.pn-escl__sum{display:grid;gap:var(--space-3)}
.pn-escl__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:0}
.pn-escl__stats > div{display:grid;gap:2px;padding:var(--space-3);border-radius:var(--r-m);background:var(--surface-2);min-width:0}
.pn-escl__stats dt{font:var(--type-meta);color:var(--ink-2)}
.pn-escl__stats dd{margin:0;font:var(--type-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-escl__setup{margin:0}
.pn-escl__setup a,.pn-escl__empty a,.pn-escl__dl{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-escl__empty{display:grid;gap:var(--space-2)}
.pn-escl__empty > *{margin:0}
.pn-escl__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pn-escl__act .pc-btn > svg{width:16px;height:16px}
.pn-escl__act .pc-help{margin:0}
.pn-escl__files > summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);font:var(--type-label);color:var(--ink);cursor:pointer}
.pn-escl__files > summary::-webkit-details-marker{display:none}
.pn-escl__files > summary > svg{color:var(--ink-2);transition:transform var(--dur-1) ease-out}
.pn-escl__files[open] > summary > svg{transform:rotate(180deg)}
.pn-escl__done{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.pn-escl__done > li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-m);background:var(--surface-2)}
.pn-escl__line{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;align-content:center;gap:var(--space-3);min-height:var(--tap);color:var(--ink);text-decoration:none}
.pn-escl__line > b{font:var(--type-strong);font-variant-numeric:tabular-nums}
.pn-escl__lw{font:var(--type-meta);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-escl__le{font:var(--type-meta);color:var(--ink-2);white-space:nowrap}
.pn-escl__dl{flex:none;font:var(--type-label)}
@media (max-width:700px){
  .pn-escl__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-escl__line{grid-template-columns:auto minmax(0,1fr);row-gap:0}
  .pn-escl__le{grid-column:1 / -1;white-space:normal}
}
/* @end-member-only */
/* @member-only */
/* PHOTO CHECK (owner 03.11.2026, lib/photo_check.php, docs/konzept-03-11-fotocheck-upload.md): the chip that says what visitors
   get of a photo — on the editor's photo slots (over the photo, dark glass so it reads on any picture), beside the state on
   My listings and under her profile picture (a tonal pill) — and the line under the cover when visitors do not see it.
   Inside the member area: Inter (the page face), sentence case, no edges — surfaces only; anthracite + the one pink. The dot:
   pink = visitors see it, half = members only, a cross = not allowed, a turning ring = checking. */
.pn-pcchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-2);border-radius:var(--r-full);font:var(--type-cap);letter-spacing:0;text-transform:none;white-space:nowrap;background:var(--photo-key-bg);color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pn-pcchip[hidden]{display:none}
.pn-pcchip__t{overflow:hidden;text-overflow:ellipsis}
.pn-pcchip > i,.pn-pcnote__h > i{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:currentColor}
.pn-pcchip.is-visible > i{background:var(--accent)}
.pn-pcchip.is-members > i,.pn-pcnote.is-members .pn-pcnote__h > i{background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.pn-pcchip.is-no > i,.pn-pcnote.is-no .pn-pcnote__h > i{border-radius:0;background:linear-gradient(45deg,transparent 42%,currentColor 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,currentColor 42% 58%,transparent 58%)}
.pn-pcchip.is-wait > i{background:conic-gradient(currentColor 0 30%,transparent 0);box-shadow:inset 0 0 0 1.5px var(--t-tint-2);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),currentColor calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),currentColor calc(100% - 2px));animation:pn-pcspin .9s linear infinite}
@keyframes pn-pcspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pn-pcchip.is-wait > i{animation:none}}
/* on a photo slot: bottom left, clear of rotate / remove (top) and the swap key (bottom right); on the cover above its
   sticker. A narrow slot (the small ones on a phone) keeps the dot only — the words stay for screen readers and the title. */
.pn-lislot .pn-pcchip{position:absolute;left:8px;bottom:8px;z-index:3;max-width:calc(100% - 52px)}
.pn-lislot[data-slot="1"] .pn-pcchip{bottom:50px}
.pn-lislot:not(.has-photo,.is-picked) .pn-pcchip{display:none}
@container (max-width:150px){.pn-lislot .pn-pcchip{padding:6px}.pn-lislot .pn-pcchip .pn-pcchip__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* beside the state (My listings) and under her profile picture: the tonal pill of the page */
.pn-pcchip--row{background:var(--t-tint);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.pn-pcav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0}
.pn-pcav__why:empty{display:none}
.pn-pcintro{margin:10px 0 0}
/* the cover visitors do not see: one sunken surface under the photos — what, why, the way out */
.pn-pcnote{margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--t-tint);color:var(--ink)}   /* a note (docs/design-system.md §9.4) */
.pn-pcnote[hidden]{display:none}
.pn-pcnote__h{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-strong);text-transform:none}
.pn-pcnote__why{margin:var(--space-1) 0 0 17px;font:var(--type-meta);color:var(--ink-2)}
.pn-pcnote__why [data-pc-why]:empty{display:none}
.pn-pcnote__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0 17px}
.pn-pcnote__wrong{font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.pn-pcnote__wrong:hover{color:var(--ink)}
@media (max-width:480px){.pn-pcnote__why,.pn-pcnote__acts{margin-left:0}}
/* @end-member-only */