/* PMM Candidate · Broadcasts & Engagement · Exec broadcasts-engagement-20260906-033156-dbe485 · Variant A · Storyboard STB-BE r1
   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 dbe485-120, the page's only geometry, scoped to desktop;
   Part 3 is layout on non-atom wrappers only. No narrative typography is defined 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 · seed dbe485-120 · desktop only */
/* sequencer output scoped to the desktop layout; the kit mobile restack applies below 1024px */
@media (min-width: 1024px) {
/* pmm sequencer · seed dbe485-120 */
/* s1 · cornerA · bottom · card left · depth 10.1% · width 67.4% · h 0.803 */
.pmm-ui .cmp-s1 .cmp-field { left:42.7%; right:0; bottom:28.1%; top:0; } .pmm-ui .cmp-s1 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s1 .cmp-anchor { left:0; bottom:0; width:67.4%; transform:none; }
/* s2 · cornerF · top · card right · depth 6.3% · width 49.5% · h 0.754 */
.pmm-ui .cmp-s2 .cmp-field { right:14.3%; left:0; top:12.3%; bottom:0; } .pmm-ui .cmp-s2 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s2 .cmp-anchor { right:0; top:0; width:49.5%; transform:none; }
/* s3 · edge · card left · depth 12.5% · width 60.5% · h 0.834 */
.pmm-ui .cmp-s3 .cmp-field { left:18.5%; right:0; top:0; bottom:0; } .pmm-ui .cmp-s3 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s3 .cmp-anchor { left:0; top:9.8%; width:60.5%; transform:none; }
/* s4 · cornerA · top · card right · depth 8.7% · width 67.6% · h 0.826 */
.pmm-ui .cmp-s4 .cmp-field { right:41.1%; left:0; top:26.7%; bottom:0; } .pmm-ui .cmp-s4 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s4 .cmp-anchor { right:0; top:0; width:67.6%; transform:none; }
/* s5 · cornerF · bottom · card left · depth 14.8% · width 60.7% · h 0.597 */
.pmm-ui .cmp-s5 .cmp-field { left:22.8%; right:0; bottom:20.8%; top:0; } .pmm-ui .cmp-s5 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s5 .cmp-anchor { left:0; bottom:0; width:60.7%; transform:none; }
/* s6 · cornerA · top · card right · depth 11% · width 61.7% · h 0.81 */
.pmm-ui .cmp-s6 .cmp-field { right:49.3%; left:0; top:29%; bottom:0; } .pmm-ui .cmp-s6 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s6 .cmp-anchor { right:0; top:0; width:61.7%; transform:none; }
/* s7 · edge · card left · depth 7.2% · width 62.8% · h 0.826 */
.pmm-ui .cmp-s7 .cmp-field { left:13.2%; right:0; top:0; bottom:0; } .pmm-ui .cmp-s7 .cmp-field img { object-position:100% 50%; }
.pmm-ui .cmp-s7 .cmp-anchor { left:0; top:10.3%; width:62.8%; transform:none; }
/* s8 · cornerF · bottom · card right · depth 13.4% · width 61.8% · h 0.78 */
.pmm-ui .cmp-s8 .cmp-field { right:21.4%; left:0; bottom:19.4%; top:0; } .pmm-ui .cmp-s8 .cmp-field img { object-position:0% 50%; }
.pmm-ui .cmp-s8 .cmp-anchor { right:0; bottom:0; width:61.8%; transform:none; }
/* record: [{"id":"s1","shape":"cornerA","orientation":"left-bottom","depth":10.1,"width":67.4,"h":0.803},{"id":"s2","shape":"cornerF","orientation":"right-top","depth":6.3,"width":49.5,"h":0.754},{"id":"s3","shape":"edge","orientation":"left","depth":12.5,"width":60.5,"h":0.834},{"id":"s4","shape":"cornerA","orientation":"right-top","depth":8.7,"width":67.6,"h":0.826},{"id":"s5","shape":"cornerF","orientation":"left-bottom","depth":14.8,"width":60.7,"h":0.597},{"id":"s6","shape":"cornerA","orientation":"right-top","depth":11,"width":61.7,"h":0.81},{"id":"s7","shape":"edge","orientation":"left","depth":7.2,"width":62.8,"h":0.826},{"id":"s8","shape":"cornerF","orientation":"right-bottom","depth":13.4,"width":61.8,"h":0.78}] */
}

/* Part 3 · layout hooks on non-atom wrappers only (no atom is restyled) */
.pmm-ui .be-and { display: flex; align-items: center; gap: 10px; padding: 4px 18px; }
.pmm-ui .be-and i { flex: 1; height: 1px; background: var(--ui-line2); }
.pmm-ui .be-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pmm-ui .be-then { display: flex; flex-direction: column; gap: 6px; }