/* PMM Candidate · Sales Channels · Exec sales-channels-20260906-021118-eff28b · Storyboard STB-SC r2 · Direction B′
   Page-scoped Contained Composite styles. Part 1 is the Composite kit KIT-v1 (2026-09-04) mounted unchanged;
   Part 2 is the sequencer output for seed eff28b-4, the page's only geometry, scoped to desktop;
   Part 3 is the mobile geometry recorded in the Storyboard contract. No narrative typography is redefined here. */
/* pmm-composite.css · Composite UI kit · KIT-v1 (2026-09-04)
   Atoms and tokens for every below-hero Contained Composite. Pages assemble these
   classes; they never restyle them. Geometry is emitted per section by the sequencer
   and is the only CSS a page may add. Rules: Composite CMP-GEO-01/02, Visual V20–V25. */
.pmm-ui {
  --cui-title: 16px; --cui-primary: 15px; --cui-support: 13px; --cui-aux: 12px;
  --ui-ink: #0f172a; --ui-ink2: #475569; --ui-ink3: #94a3b8;
  --ui-line: #e2e8f0; --ui-line2: #eef2f6; --ui-brand: #1f5fe0; --ui-ctl: #d3d9e1;
  --ui-plate: linear-gradient(135deg,#eef1f5 0%,#e2e7ee 100%); --ui-card: #fff; --ui-avatar: #e2e8f0; --ui-avatar-ink: #334155; --ui-soft: #f4f6f8;
}
/* Composite root and Canvas never clip (Composite Active rule 16) */
.pmm-ui .cmp { position: relative; width: 100%; color: var(--ui-ink); overflow: visible; }
.pmm-ui .cmp-canvas { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: visible; clip-path: none; }
.pmm-ui .cmp-field { position: absolute; overflow: hidden; border-radius: 20px; }
.pmm-ui .cmp-plate { background-image: var(--ui-plate); }
.pmm-ui .section-bg-gray .cmp-plate { background-image: linear-gradient(135deg,#ffffff 0%,#e6eaf0 100%); }
.pmm-ui .cmp-field-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmm-ui .cmp-anchor { position: absolute; border-radius: 16px; background: var(--ui-card); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 28px 64px -12px rgba(15,23,42,.22); overflow: hidden; font-size: var(--cui-primary); line-height: 1.35; transform: none; }
/* dark Anchor: only inside the page's black section over an evening Scene (Visual V22) */
.pmm-ui .cmp-dark { --ui-ctl: #ffffff2e; --ui-ink: #f1f5f9; --ui-ink2: #b6c0d0; --ui-ink3: #7d8a9e; --ui-line: #ffffff1a; --ui-line2: #ffffff12; --ui-card: #182235; --ui-avatar: #2a3650; --ui-avatar-ink: #e2e8f0; --ui-soft: #1f2b41; }
.pmm-ui .cmp-dark .cmp-anchor { box-shadow: 0 1px 2px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
/* atoms */
.pmm-ui .ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); }
.pmm-ui .ui-title { font-size: var(--cui-title); font-weight: 700; letter-spacing: -0.01em; display: block; }
.pmm-ui .ui-sub { font-size: var(--cui-support); color: var(--ui-ink2); display: block; }
.pmm-ui .ui-row { display: flex; align-items: center; gap: 10px; }
.pmm-ui .ui-grow { flex: 1; min-width: 0; }
.pmm-ui .ui-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmm-ui .ui-body { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.pmm-ui .ui-body-soft { background: var(--ui-soft); border-top: 1px solid var(--ui-line2); }
.pmm-ui .ui-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ui-avatar); color: var(--ui-avatar-ink); display: flex; align-items: center; justify-content: center; font-size: var(--cui-aux); font-weight: 700; flex: none; position: relative; }
.pmm-ui .ui-avatar .ui-ch { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ui-card); background: #fff; overflow: hidden; }
.pmm-ui .ui-avatar .ui-ch img { width: 100%; height: 100%; display: block; }
/* list rows: hairline dividers, never boxes */
.pmm-ui .ui-line { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--ui-line2); }
.pmm-ui .ui-line.is-last, .pmm-ui .ui-conv:last-child, .pmm-ui .ui-prow.is-last { border-bottom: 0; padding-bottom: 18px; }
.pmm-ui .ui-conv { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ui-line2); align-items: center; }
.pmm-ui .ui-nm { font-size: var(--cui-primary); font-weight: 600; display: block; }
.pmm-ui .ui-pv { font-size: var(--cui-support); color: var(--ui-ink2); display: block; margin-top: 1px; }
.pmm-ui .ui-row.ui-pv { display: flex; margin-top: 0; }
.pmm-ui .ui-val { font-size: var(--cui-primary); font-weight: 700; white-space: nowrap; }
.pmm-ui .ui-lbl { font-size: var(--cui-aux); font-weight: 700; letter-spacing: .06em; color: var(--ui-ink3); }
/* chips: filled neutral pills, no border, no accent */
.pmm-ui .ui-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--cui-aux); font-weight: 600; border-radius: 999px; padding: 4px 10px; white-space: nowrap; background: var(--ui-soft); color: var(--ui-ink2); }
/* buttons: 40 / 34 px, one primary per Composite */
.pmm-ui .ui-btn { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; border-radius: 8px; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; flex: none; line-height: 1; }
.pmm-ui .ui-btn-pri { background: var(--ui-brand); color: #fff; }
.pmm-ui .ui-btn-out { background: var(--ui-card); border-color: var(--ui-ctl); color: var(--ui-ink); }
.pmm-ui .ui-btn-sm { font-size: 13px; min-height: 34px; padding: 0 12px; }
.pmm-ui .ui-search { display: flex; align-items: center; gap: 9px; border: 1px solid var(--ui-line); border-radius: 10px; padding: 9px 12px; font-size: var(--cui-primary); color: var(--ui-ink3); background: var(--ui-card); }
.pmm-ui .ui-search .ui-grow { color: var(--ui-ink); }
/* the only bordered boxes allowed inside a card: a selectable option or a search result, never nested */
.pmm-ui .ui-opt { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 12px; }
.pmm-ui .ui-compose { border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pmm-ui .ui-compose-ph { color: var(--ui-ink3); }
.pmm-ui .ui-opt.is-on { border-color: var(--ui-ink); background: var(--ui-soft); }
.pmm-ui .ui-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 12px; }
.pmm-ui .ui-toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--ui-brand); position: relative; flex: none; }
.pmm-ui .ui-toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pmm-ui .ui-toggle.is-off { background: #cbd5e1; } .pmm-ui .ui-toggle.is-off::after { right: auto; left: 3px; }
.pmm-ui .ui-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ui-ctl); flex: none; background: var(--ui-card); }
.pmm-ui .ui-radio.is-on { border: 6px solid var(--ui-brand); }
.pmm-ui .ui-bar { height: 6px; border-radius: 999px; background: var(--ui-soft); overflow: hidden; }
.pmm-ui .ui-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ui-brand); }
.pmm-ui .ui-prow { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--ui-line2); }
.pmm-ui .ui-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--ui-soft); }
.pmm-ui .ui-pname { font-size: var(--cui-primary); font-weight: 600; display: block; }
.pmm-ui .ui-pmeta { font-size: var(--cui-support); color: var(--ui-ink2); display: block; margin-top: 1px; }
.pmm-ui .ui-pprice { font-size: var(--cui-primary); font-weight: 700; white-space: nowrap; }
.pmm-ui .ui-stats { display: flex; gap: 10px; }
.pmm-ui .ui-stat { flex: 1; background: var(--ui-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pmm-ui .ui-ctabs { display: flex; gap: 18px; border-bottom: 1px solid var(--ui-line); padding: 0 18px; }
.pmm-ui .ui-ctab { font-size: var(--cui-primary); font-weight: 600; color: var(--ui-ink3); padding: 9px 0; border-bottom: 2px solid transparent; }
.pmm-ui .ui-ctab.is-on { color: var(--ui-ink); border-bottom-color: var(--ui-ink); }
.pmm-ui .ui-bubble { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 14px; border-top-left-radius: 4px; padding: 12px 14px; font-size: var(--cui-primary); line-height: 1.45; }
/* channel marks: official assets only, 16–18 px */
.pmm-ui .ui-chan { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pmm-ui .ui-chan img, .pmm-ui .ui-chbtn img { width: 16px; height: 16px; border-radius: 4px; }
.pmm-ui .ui-chs { display: flex; flex-direction: column; gap: 8px; }
.pmm-ui .ui-chbtn { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 1px solid var(--ui-ctl); border-radius: 8px; background: var(--ui-card); font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1; }
.pmm-ui .ui-chbtn.is-on { border-color: var(--ui-ink); background: var(--ui-soft); }
.pmm-ui svg.ui-i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--ui-ink2); }
.pmm-ui svg.ui-i.is-sm { width: 14px; height: 14px; }
.pmm-ui .ui-btn-pri svg.ui-i { color: #fff; }
/* device Anchor (Composite CMP-GEO-02 · Device variant) · iPhone 15 Pro proportions. */
.pmm-ui .ui-device { position: absolute; width: 42%; aspect-ratio: 70.6 / 146.6; border-radius: 14% / 6.75%; background: #2a2c31; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 2.5px #101215, 0 1px 2px rgba(15,23,42,.1), 0 30px 70px -14px rgba(15,23,42,.4); }
.pmm-ui .ui-device .ui-screen { position: absolute; inset: 1.01% 2.1%; border-radius: 12% / 5.8%; background: var(--ui-card); overflow: hidden; display: flex; flex-direction: column; }
.pmm-ui .ui-device .ui-island { position: absolute; left: 50%; top: 1.9%; width: 26%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #0b0c0f; z-index: 3; }
.pmm-ui .ui-device .ui-statusbar { height: 8.2%; flex: none; }
.pmm-ui .ui-device i.ui-key { position: absolute; width: 1%; background: #3a3d43; border-radius: 1px; box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.pmm-ui .ui-device i.k-vup { left: -1%; top: 23.5%; height: 7.4%; }
.pmm-ui .ui-device i.k-vdn { left: -1%; top: 32.4%; height: 7.4%; }
.pmm-ui .ui-device i.k-power { right: -1%; top: 26.5%; height: 11.8%; }
.pmm-ui .ui-device .ui-screen > .ui-foot { margin-top: auto; border-top: 1px solid var(--ui-line2); padding: 12px 16px 28px; }
.pmm-ui .ui-device .ui-btn { box-sizing: border-box; width: 100%; }
.pmm-ui .ui-device .ui-homebar { position: absolute; left: 50%; bottom: 1.6%; width: 36%; height: .6%; transform: translateX(-50%); border-radius: 999px; background: #0f172a; opacity: .85; z-index: 3; }
/* mobile: internal layers restack; nothing is scaled */
@media (max-width: 1023px) {
  .pmm-ui .cmp .cmp-canvas { aspect-ratio: auto; display: flex; flex-direction: column; }
  .pmm-ui .cmp .cmp-field { position: relative; inset: auto; width: 100%; height: 160px; flex: none; }
  .pmm-ui .cmp .cmp-field img { object-position: center; }
  .pmm-ui .cmp .cmp-anchor { position: relative; inset: auto; width: auto; margin: -40px 12px 0; z-index: 2; }
}

/* Part 2 · sequencer geometry · desktop only */
@media (min-width: 1024px) {
/* pmm sequencer · seed eff28b-r6-1 · one Composite per channel family, Sell on Live before
   Get Discovered and Order Forms after it, so the two Device Composites sit two sections
   apart and enter from opposite sides. */
/* marketplace · edge · card left · depth 13.2% · width 76.8% · h 0.715 */
.pmm-ui .cmp-marketplace .cmp-field { left:19.2%; right:0; top:0; bottom:0; } .pmm-ui .cmp-marketplace .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-marketplace .cmp-anchor { left:0; top:17.7%; width:76.8%; transform:none; }
/* social · cornerA · bottom · card right · depth 9.4% · width 60.1% · h 0.759 */
.pmm-ui .cmp-social .cmp-field { right:49.3%; left:0; bottom:27.4%; top:0; } .pmm-ui .cmp-social .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-social .cmp-anchor { right:0; bottom:0; width:60.1%; transform:none; }
/* live · edge · card right · Device variant · depth 15.6% · width 41.4% · h 1.246
   Field and phone carry the same photograph: the room behind the camera and the stream the
   viewer sees, at different distances, so the two planes echo. */
.pmm-ui .cmp-live .cmp-field { right:21.6%; left:0; top:0; bottom:0; } .pmm-ui .cmp-live .cmp-field img { object-position:24% 55%; }
.pmm-ui .cmp-live .cmp-anchor { right:0; top:-15.3%; width:41.4%; transform:none; }
/* discovery · cornerA · top · card left · depth 11.8% · width 62% · h 0.811
   (Field widened by hand so the Scene carries the frame rather than a narrow strip) */
.pmm-ui .cmp-discovery .cmp-field { left:22%; right:0; top:10%; bottom:0; } .pmm-ui .cmp-discovery .cmp-field img { object-position:88% 50%; }
.pmm-ui .cmp-discovery .cmp-anchor { left:0; top:14%; width:62%; transform:none; }
/* orderforms · edge · card left · Device variant · depth 8% · width 39.5% · h 1.246 */
.pmm-ui .cmp-orderforms .cmp-field { left:14%; right:0; top:0; bottom:0; } .pmm-ui .cmp-orderforms .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-orderforms .cmp-anchor { left:0; top:-15.3%; width:39.5%; transform:none; }
/* referrals · inset · card right · depth 14.1% · width 76.5% · h 0.64 */
.pmm-ui .cmp-referrals .cmp-field { left:0; right:0; top:0; bottom:0; } .pmm-ui .cmp-referrals .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-referrals .cmp-anchor { right:14.1%; bottom:14.1%; width:76.5%; transform:none; }
/* record: [{"id":"marketplace","shape":"edge","orientation":"left","depth":13.2,"width":76.8,"h":0.715},{"id":"social","shape":"cornerA","orientation":"right-bottom","depth":9.4,"width":60.1,"h":0.759},{"id":"live","shape":"edge","orientation":"right","depth":15.6,"width":41.4,"h":1.246},{"id":"discovery","shape":"cornerA","orientation":"left-top","depth":11.8,"width":64.8,"h":0.811},{"id":"orderforms","shape":"edge","orientation":"left","depth":8,"width":39.5,"h":1.246},{"id":"referrals","shape":"inset","orientation":"right","depth":14.1,"width":76.5,"h":0.64}] */

/* satellite placement, desktop · each tile sits over blank Field area beside its Anchor */
.pmm-ui .cmp-marketplace .cmp-sat-1 { left:79%; top:6%; }
.pmm-ui .cmp-marketplace .cmp-sat-2 { left:88%; top:31%; }
.pmm-ui .cmp-marketplace .cmp-sat-3 { left:80%; top:57%; }
.pmm-ui .cmp-social .cmp-sat-1 { left:5%; top:8%; }
.pmm-ui .cmp-social .cmp-sat-2 { left:21%; top:34%; }
.pmm-ui .cmp-live .cmp-sat-1 { left:5%; top:60%; }
.pmm-ui .cmp-live .cmp-sat-2 { left:20%; top:78%; }
.pmm-ui .cmp-discovery .cmp-sat-1 { left:63%; top:16%; }
.pmm-ui .cmp-discovery .cmp-sat-2 { left:70%; top:40%; }
.pmm-ui .cmp-orderforms .cmp-sat-1 { left:44%; top:8%; }
.pmm-ui .cmp-orderforms .cmp-sat-2 { left:58%; top:28%; }
.pmm-ui .cmp-orderforms .cmp-sat-3 { left:45%; top:52%; }
.pmm-ui .cmp-orderforms .cmp-sat-4 { left:59%; top:74%; }
.pmm-ui .cmp-referrals .cmp-sat-1 { left:2%; top:4%; }
.pmm-ui .cmp-referrals .cmp-sat-2 { left:17%; top:2%; }
}

/* Part 3 · page layout hooks on non-atom wrappers.
   cmp-sat: channel-icon satellite layers, approved by Frost in conversation on 2026-09-06
   ("别理") over the Composite v2 satellite default of 0; recorded as an approved deviation in
   the Production Plan. Each satellite is its own layer over blank Field area, staggered, and
   names a channel of that section's family.
   sc-live-video: the stream fills the phone screen in the Sell on Live Anchor, which is
   the view a customer watching the live actually sees. */
.pmm-ui .sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pmm-ui .sc-status { display: inline-flex; }
.pmm-ui .cmp-field-plate { background-image: var(--ui-plate); }
/* Sell on Live: the stream fills the phone screen and the live information sits over it,
   the way a customer watching a live session sees it. These are page-scoped classes for a
   customer-facing surface; no kit atom is restyled, and the type ladder and single accent hold. */
.pmm-ui .sc-live-shot { position: absolute; inset: 0; overflow: hidden; }
/* the phone streams a much closer crop than the Field, so the two planes read as the
   room and the stream rather than the same photograph twice */
.pmm-ui .sc-live-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 46%; display: block; }
.pmm-ui .sc-live-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,13,22,.55) 0%, rgba(9,13,22,0) 26%, rgba(9,13,22,0) 44%, rgba(9,13,22,.72) 100%); }
.pmm-ui .sc-live-top { position: absolute; left: 12px; right: 12px; top: 34px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.pmm-ui .sc-live-top .ui-chan img { width: 22px; height: 22px; border-radius: 6px; }
.pmm-ui .sc-live-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.pmm-ui .sc-live-badge { font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px 9px; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.pmm-ui .sc-live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; }
.pmm-ui .sc-live-hearts { position: absolute; right: 12px; bottom: 132px; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; z-index: 2; }
.pmm-ui .sc-live-heart { width: 16px; height: 16px; opacity: .9; }
.pmm-ui .sc-live-heart:nth-child(2) { width: 12px; opacity: .6; margin-right: 12px; }
.pmm-ui .sc-live-heart:nth-child(3) { width: 10px; opacity: .4; margin-right: 4px; }
.pmm-ui .sc-live-bottom { position: absolute; left: 12px; right: 12px; bottom: 26px; display: flex; flex-direction: column; gap: 7px; z-index: 2; }
.pmm-ui .sc-live-comment { font-size: 13px; color: rgba(255,255,255,.92); }
.pmm-ui .sc-live-comment:first-child { opacity: .62; }
.pmm-ui .sc-live-card { margin-top: 3px; }
.pmm-ui .sc-live-comment b { font-weight: 700; color: #fff; }
.pmm-ui .sc-live-card { display: flex; align-items: center; gap: 10px; background: var(--ui-card); border-radius: 12px; padding: 8px 10px; }
.pmm-ui .sc-live-card img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
.pmm-ui .sc-live-card .ui-pname { font-size: 15px; font-weight: 600; display: block; }
.pmm-ui .sc-live-card .ui-pmeta { font-size: 13px; color: var(--ui-ink2); display: block; }
/* the Admin channel icons are opaque squares, so the tile is the icon itself:
   clipped to a rounded square with a soft shadow, no plate behind it. The 28% radius
   matches the footer Ask AI tiles (36 px box, 10 px radius). */
.pmm-ui .cmp-sat { position: absolute; width: 8.6%; aspect-ratio: 1 / 1; border-radius: 28%; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 10px 24px -8px rgba(15,23,42,.32); }
.pmm-ui .cmp-sat img { width: 100%; height: 100%; display: block; }

@media (max-width: 1023px) {
  /* the Anchor fills the canvas below roughly a fifth of its height, so satellites sit in the Field strip above it */
  .pmm-ui .sc-status { display: none; }
  .pmm-ui .sc-tiles { grid-template-columns: 1fr; }
  .pmm-ui .sc-cols { flex-direction: column; }
  .pmm-ui .cmp-orderforms .cmp-anchor { width: 70%; margin: -40px auto 0; }
  .pmm-ui .cmp-sat { width: 10.5%; }
  .pmm-ui .cmp .cmp-sat-1 { left: 3%; top: 3%; }
  .pmm-ui .cmp .cmp-sat-2 { left: 28%; top: 8%; }
  .pmm-ui .cmp .cmp-sat-3 { left: 53%; top: 2%; }
  .pmm-ui .cmp .cmp-sat-4 { left: 78%; top: 7%; }
}