/* portal-panels.css — the detail panels (portal-panels.js; views design §8, phase P4).
 *
 * Container-agnostic: the two-column layout is a CONTAINER query on .pp-host, never a viewport
 * query, so the same node reads well in the 64rem overlay dialog, the 28rem docked panel (P5)
 * and the full SHARED_PROFILE page (P6). Only `visible_on` (a per-panel DEVICE class choice from
 * the layout document, §8.5) uses the viewport. rem only, --pt-* tokens, 2.75rem touch floor.
 */
.pp-host { container: pp-host / inline-size; width: 100%; }
.pp-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem; width: 100%; max-width: 96rem; margin: 0 auto; }
.pp-zone { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
@container pp-host (min-width: 48rem) {
  .pp-doc { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    grid-template-areas: "hero main" "side main" "side footer"; grid-template-rows: auto 1fr auto; align-items: start; }
  .pp-zone-hero { grid-area: hero; }
  .pp-zone-side { grid-area: side; }
  .pp-zone-main { grid-area: main; }
  .pp-zone-footer { grid-area: footer; }
  .pp-sticky { position: sticky; top: 0; }
}
/* PORTRAIT (a person type, portal-panels.js arrangementOf; owner rule 2026-10-03): the photo
   column on the LEFT (20-24rem: the 4:5 photo, its thumbnails, then the side panels: trust,
   kundli, suitability...), the text column on the RIGHT (name, key facts, the ONE Action Box,
   the sections), the footer (related, "More from your search") closing the text column. Never
   three columns. Two columns from a 40rem CONTAINER, so a 48rem (768px) frame, whose content box
   (or the 64rem overlay dialog it opens) is narrower than 48rem once padding is taken, already reads photo left / text
   right. The 1fr middle row absorbs the text column's height, so the side panels sit right under
   the photo (no gap). */
@container pp-host (min-width: 40rem) {
  .pp-doc[data-arrangement="portrait"] { grid-template-columns: clamp(20rem, 40%, 24rem) minmax(0, 1fr);
    grid-template-areas: "hero main" "side main" "side footer"; grid-template-rows: auto 1fr auto; align-items: start; }
  .pp-doc[data-arrangement="portrait"] > .pp-zone-hero { grid-area: hero; }
  .pp-doc[data-arrangement="portrait"] > .pp-zone-side { grid-area: side; }
  .pp-doc[data-arrangement="portrait"] > .pp-zone-main { grid-area: main; }
  .pp-doc[data-arrangement="portrait"] > .pp-zone-footer { grid-area: footer; }
  /* WP2 owner preview (1.7) on a portrait doc: the banner is its own row across both columns,
     above the photo, from the same 40rem the two columns start at (the generic has-preview
     rule below starts at 48rem, so without this it would fall to an implicit last row) */
  .pp-doc[data-arrangement="portrait"].has-preview { grid-template-areas: "preview preview" "hero main" "side main" "side footer";
    grid-template-rows: auto auto 1fr auto; }
  .pp-doc[data-arrangement="portrait"].has-preview > .pp-preview { grid-area: preview; margin: 0; }
  /* the overlay's summary keeps its photo the width of its column (the 16rem cap is one column's) */
  .pp-doc[data-arrangement="portrait"][data-surface="mini_detail"] .pp-hero-media .pp-hero-img,
  .pp-doc[data-arrangement="portrait"][data-surface="mini_detail"] .pp-hero-media > .pp-hero-ph,
  .pp-doc[data-arrangement="portrait"][data-surface="mini_detail"] .pp-hero-media .pp-thumbs { width: 100%; }
}

/* hero media: the main item in the frame, then up to 4 thumbnails ("+N more"). The hero frame is PORTRAIT 4:5 -
   the browse card's frame (portal-views.css .ar-portrait), on the profile page and in the overlay
   alike (owner, 2026-10-02: the 4:3 frame cut portrait photos' heads off). object-fit: cover,
   biased to the top (50% 20%) unless the item carries a focal point (portal-panels.js focalCss,
   an inline object-position). The frames and their aspects: docs/PHOTO_FRAMES.md. */
.pp-hero-media { display: flex; flex-direction: column; gap: .5rem; }
.pp-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--pt-radius-lg); background: var(--pt-surface-3); }
.pp-hero-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--pt-radius-lg); background: var(--pt-surface-3);
  color: var(--pt-muted); font-size: .82rem; }
.pp-hero-ph i { font-size: 1.6rem; }
/* S1: why the photos are withheld + the unlock, under the placeholder ("3 photos - visible once
   you both accept" [Send interest]) */
.pp-hero-lock { padding: .1rem .15rem 0; }
.pp-hero-lock .pp-lock { color: var(--pt-text); font-size: .85rem; }
/* the overlay / docked panel summary (mini_detail): the same 4:5 frame, at most 16rem wide, so the
   Action Box under it stays within reach of the dialog's first screen */
.pp-doc[data-surface="mini_detail"] .pp-hero-media .pp-hero-img,
.pp-doc[data-surface="mini_detail"] .pp-hero-media > .pp-hero-ph { width: min(100%, 16rem); margin-inline: auto; }
/* the gallery's thumbnails (IndianMarriage's .im-gallery__thumbs, profile-photo-frame.css): up to
   four SQUARE buttons in one row under the frame, as wide as the frame; activating one swaps it
   into the frame (portal-panels.js heroMediaPanel). The thumbnail photo is anchored like IM's
   .im-photo-thumb (50% 25%) unless the item carries a focal point. */
.pp-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; }
.pp-doc[data-surface="mini_detail"] .pp-hero-media .pp-thumbs { width: min(100%, 16rem); margin-inline: auto; }
.pp-thumb { position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--pt-touch-min); aspect-ratio: 1 / 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 0; border-radius: var(--pt-radius-md); background: var(--pt-surface-3); color: var(--pt-muted); }
.pp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
/* visually hidden, still read: "Showing photo 4 of 5" after a swap */
.pp-live { position: absolute; width: .0625rem; height: .0625rem; margin: -.0625rem; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pp-thumb-play { position: absolute; inset: auto .2rem .2rem auto; font-size: .7rem; color: var(--pt-on-accent); }
.pp-more-count { color: var(--pt-muted); font-size: .78rem; }
.pp-video { display: block; width: 100%; border-radius: var(--pt-radius-md); background: var(--pt-surface-3); }

/* header */
.pp-header { display: flex; flex-direction: column; gap: .4rem; }
.pp-title { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.pp-sub { color: var(--pt-muted); font-size: .85rem; }
.pp-facts { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--pt-text); font-size: .85rem; }
.pp-badges { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.pp-badge, .pp-status { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: 999rem;
  font-size: .68rem; background: var(--pt-surface-3); color: var(--pt-muted); }
.pp-status.tone-good, .pp-tone.tone-good { background: var(--pt-good-bg); color: var(--pt-good); }
.pp-status.tone-warn, .pp-tone.tone-warn { background: var(--pt-warn-bg); color: var(--pt-warn); }
.pp-status.tone-bad, .pp-tone.tone-bad { background: var(--pt-bad-bg); color: var(--pt-bad); }
.pp-status.tone-neutral, .pp-tone.tone-neutral { background: var(--pt-neutral-bg); color: var(--pt-neutral); }
.pp-tone { display: inline-flex; padding: .1rem .45rem; border-radius: 999rem; font-size: .72rem; font-weight: 700; }

/* THE ACTION BOX (owner, 2026-10-02): ONE bordered "Actions" card, the same on the profile page
   and in the overlay. The record-action run inside it (PortalActions, FULL mode) lays its buttons
   out in zones (portal-actions.css); the card is a SIZE CONTAINER, so a narrow column turns every
   grid in it into one column. In a phone's fixed bottom bar the host flattens the card back into
   the one-row strip (portal-profile.css .pf-foot, portal-detail.css .br-detail-foot). */
.pp-action-box { container: pp-actions / inline-size; display: flex; flex-direction: column; gap: .65rem;
  padding: .85rem; border: .0625rem solid var(--pt-line-2); border-radius: var(--pt-radius-lg); background: var(--pt-surface); }
/* a record with nothing to act on (its run is [hidden] until a later record_actions set fills it in
   place) shows no empty frame */
.pp-action-box:not(:has(> .pp-ab-top, > .pp-ab-nav, > .br-ra:not([hidden]))) { display: none; }
.pp-ab-title { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-faint); }
/* the host's links ("View full profile", a store deep link) and the header's primary_action */
.pp-ab-top { display: flex; flex-wrap: wrap; gap: .5rem; }
/* C4: the type's one privacy line under the buttons (ObjectTypeSpec.action_note) */
.pp-ab-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: var(--pt-muted); font-size: .78rem; line-height: 1.4; }
.pp-ab-note > i { margin-top: .15rem; color: var(--pt-faint); }
.pp-ab-top > * { flex: 1 1 auto; justify-content: center; }
/* link / tool anchors with no run to sit in (else they are slotted into the run's grid) */
.pp-ab-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pp-action-box .pp-nav-action { min-width: 0; justify-content: center; text-align: center; }
/* an anchor slotted into the run's grid looks like the buttons beside it */
.br-ra-full .pp-nav-action { padding: .35rem .6rem; font-weight: 600; line-height: 1.2; background: var(--pt-surface); }
@container pp-actions (max-width: 17.99rem) { .pp-ab-nav { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .pp-ab-nav { grid-template-columns: minmax(0, 1fr); } }
.pp-nav-action { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--pt-touch-min);
  padding: .4rem .8rem; border-radius: var(--pt-radius-md); border: .0625rem solid var(--pt-line-2);
  color: var(--pt-text); text-decoration: none; font-size: .85rem; }
.pp-nav-action.is-primary, .pp-tool { background: var(--pt-accent-bg); border-color: var(--pt-accent-line); color: var(--pt-accent-ink); font-weight: 700; }
.pp-nav-action.is-disabled { color: var(--pt-faint); flex-wrap: wrap; }
.pp-nav-reason { flex-basis: 100%; font-size: .74rem; }
.pp-nav-action:focus-visible, .pp-link:focus-visible, .pp-thumb:focus-visible, .pp-sect-toggle:focus-visible,
.pp-more:focus-visible, .pp-lock-cta:focus-visible, .pp-gallery-link:focus-visible, .pp-chip.is-link:focus-visible {
  outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }

/* match insight */
.pp-match { display: flex; flex-direction: column; gap: .35rem; padding: .75rem; border-radius: var(--pt-radius-md); background: var(--pt-surface-2); }
.pp-match-head { display: flex; align-items: center; gap: .5rem; }
.pp-match-score { font-weight: 800; }
.pp-match-why { margin: 0; padding-left: 1.1rem; font-size: .8rem; color: var(--pt-muted); }

/* sections */
.pp-section { border-top: .0625rem solid var(--pt-line); }
.pp-sect-h { margin: 0; font-size: .95rem; font-weight: 700; }
.pp-sect-h:not(:has(button)) { padding: .75rem 0 .5rem; }
.pp-sect-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: var(--pt-touch-min);
  padding: .5rem 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pp-chev { margin-left: auto; color: var(--pt-faint); transition: transform var(--pt-transition-fast); }
.pp-sect-toggle[aria-expanded="false"] .pp-chev { transform: rotate(-90deg); }
.pp-sect-body { padding: 0 0 .9rem; }
.pp-sect-body[hidden] { display: none; }
.pp-empty { margin: 0; color: var(--pt-muted); font-size: .85rem; }
/* lazy sections (API 1.5): loading / nothing to show / error + retry, read on first expand */
.pp-lazy-msg { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--pt-muted); font-size: .85rem; }
.pp-lazy-error { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--pt-muted); font-size: .85rem; }
.pp-lazy-retry { min-height: var(--pt-touch-min); padding: .35rem .8rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-text); font: inherit; cursor: pointer; }
.pp-lazy-retry:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }

/* kv / key facts */
.pp-kv { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: .4rem .9rem; margin: 0; }
.pp-kv-row { display: contents; }
.pp-kv dt { color: var(--pt-faint); font-size: .78rem; }
.pp-kv dd { margin: 0; font-size: .85rem; }
.pp-kv dt i { margin-right: .35rem; }

/* locks: the label is not secret, the value never arrives */
.pp-lock { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--pt-muted); font-size: .82rem; }
.pp-lock-ico { color: var(--pt-faint); }
.pp-lock-count { color: var(--pt-faint); }
.pp-lock-cta { min-height: var(--pt-touch-min); padding: .35rem .8rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-accent-line); background: var(--pt-accent-bg); color: var(--pt-accent-ink); font: inherit; cursor: pointer; }
.pp-lock-cta.is-disabled { border-color: var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-muted); cursor: not-allowed; }
.pp-lock-why { flex-basis: 100%; color: var(--pt-faint); font-size: .76rem; }
.pp-section.is-locked .pp-sect-body { padding-top: .25rem; }

/* prose: plain text, paragraphs, clamped to 8 lines with "Show more" */
.pp-prose { line-height: 1.55; font-size: .85rem; color: var(--pt-text); }
.pp-prose p { margin: 0 0 .6rem; }
.pp-prose p:last-child { margin-bottom: 0; }
.pp-prose.pp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.pp-more { min-height: var(--pt-touch-min); padding: 0; border: 0; background: none; color: var(--pt-accent-strong);
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }

/* table / comparison */
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pp-table caption { text-align: start; color: var(--pt-muted); padding-bottom: .4rem; }
.pp-table th, .pp-table td { padding: .45rem .6rem; border-bottom: .0625rem solid var(--pt-line); text-align: start; vertical-align: top; }
.pp-table thead th { color: var(--pt-faint); font-weight: 700; }
.pp-met { display: inline-flex; align-items: center; gap: .35rem; }
.pp-met.is-met { color: var(--pt-good); }
.pp-met.is-unmet { color: var(--pt-bad); }
.pp-met.is-unknown { color: var(--pt-muted); }

/* tags */
.pp-tags { display: flex; flex-direction: column; gap: .75rem; }
.pp-tag-h { color: var(--pt-faint); font-size: .78rem; margin-bottom: .35rem; }
.pp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pp-chip { display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: 999rem;
  background: var(--pt-surface-3); color: var(--pt-text); font-size: .78rem; }
.pp-chip.is-link { min-height: var(--pt-touch-min); text-decoration: none; }

/* gallery */
.pp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.pp-gallery-item { min-width: 0; }
.pp-gallery-item figure { margin: 0; }
.pp-gallery-link { display: block; border-radius: var(--pt-radius-md); }
.pp-gallery-media { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--pt-radius-md); background: var(--pt-surface-3); }
.pp-gallery-item figcaption { padding-top: .25rem; color: var(--pt-muted); font-size: .74rem; }
.pp-dur { margin-left: .35rem; color: var(--pt-faint); }

/* score / timeline / links / related */
.pp-score { display: flex; flex-direction: column; gap: .5rem; }
.pp-score-head { display: flex; align-items: center; gap: .5rem; }
.pp-score-v { font-weight: 800; }
.pp-meter { width: 100%; height: .6rem; }
.pp-timeline { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .6rem; font-size: .85rem; }
.pp-timeline time { display: block; color: var(--pt-faint); font-size: .74rem; }
.pp-timeline p { margin: .2rem 0 0; }
.pp-links, .pp-related ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pp-link, .pp-related-item { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--pt-touch-min); font-size: .82rem; }
.pp-related-h { margin: .5rem 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pt-faint); }

/* P6: the related records as mini tiles; the photo / name links to the full profile */
.pp-related .pp-related-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .75rem;
  margin: 0; padding: 0; list-style: none; }
.pp-related-tile { display: flex; flex-direction: column; gap: .3rem; min-height: var(--pt-touch-min); color: var(--pt-text);
  text-decoration: none; border-radius: var(--pt-radius-md); }
.pp-tile-img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: var(--pt-radius-md); background: var(--pt-surface-3); color: var(--pt-muted); }
.pp-tile-title { font-size: .82rem; font-weight: 700; }
.pp-tile-sub { font-size: .74rem; color: var(--pt-muted); }
.pp-related-tile:focus-visible, .pp-profile-link:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }
/* "More from your search" (owner, 2026-10-02): the search the viewer came from, in the profile
   page's right column, the current record highlighted; Previous / Next step through it. Header-only
   rows (photo by its own image_state, title, subtitle) */
.pp-search-results { display: flex; flex-direction: column; gap: .5rem; }
.pp-search-results .pp-related-h { margin: 0; }
.pp-sr-nav { display: flex; align-items: center; gap: .5rem; }
.pp-sr-step { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--pt-touch-min); padding: 0 .75rem;
  border: .0625rem solid var(--pt-line); border-radius: var(--pt-radius-md); background: var(--pt-surface);
  color: var(--pt-text); font-size: .82rem; font-weight: 600; text-decoration: none; }
.pp-sr-step.is-next { flex-direction: row-reverse; }
.pp-sr-step.is-off { visibility: hidden; }
a.pp-sr-step:hover { border-color: var(--pt-accent-line); }
.pp-sr-pos { flex: 1; text-align: center; color: var(--pt-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.pp-sr-list { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pp-sr-item { display: flex; align-items: center; gap: .6rem; min-height: var(--pt-touch-min); padding: .3rem .4rem;
  border: .0625rem solid transparent; border-radius: var(--pt-radius-md); color: var(--pt-text); text-decoration: none; }
a.pp-sr-item:hover { background: var(--pt-surface-2); }
.pp-sr-item.is-current { border-color: var(--pt-accent-line); background: var(--pt-accent-wash); }
.pp-sr-img { display: flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  object-fit: cover; border-radius: var(--pt-radius-md); background: var(--pt-surface-3); color: var(--pt-muted); }
.pp-sr-text { display: flex; flex-direction: column; min-width: 0; }
.pp-sr-title, .pp-sr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sr-title { font-size: .82rem; font-weight: 700; }
.pp-sr-sub { font-size: .74rem; color: var(--pt-muted); }
.pp-sr-note { margin: 0; color: var(--pt-muted); font-size: .82rem; }
.pp-sr-item:focus-visible, .pp-sr-step:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }
.pp-title-link { display: inline-flex; align-items: center; min-height: var(--pt-touch-min); color: inherit; text-decoration: none; }
.pp-title-link:hover { text-decoration: underline; }
.pp-hero-link { display: block; border-radius: var(--pt-radius-lg); }
.pp-gallery-withheld .pp-hero-ph { aspect-ratio: 16 / 9; }

/* visible_on (layout document, §8.5): a panel is hidden on the device classes it does not list */
@media (max-width: 47.99rem) { .pp-panel[data-pp-hide~="phone"] { display: none; } }
@media (min-width: 48rem) and (max-width: 71.99rem) { .pp-panel[data-pp-hide~="tablet"] { display: none; } }
@media (min-width: 72rem) and (max-width: 99.99rem) { html:not(.ui-tv) .pp-panel[data-pp-hide~="desktop"] { display: none; } }
@media (min-width: 100rem) { html:not(.ui-tv) .pp-panel[data-pp-hide~="wide"] { display: none; } }
html.ui-tv .pp-panel[data-pp-hide~="tv"] { display: none; }

@media (prefers-reduced-motion: reduce) { .pp-chev { transition: none; } }

/* ---- P7 media (views design §7.3, §11): gallery tiles, the hero's viewer button, the overlay's
   video chip, and the LIGHTBOX (portal-media.js). rem only; every control >= 2.75rem. ---- */
.pp-gallery-open { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--pt-radius-md); background: var(--pt-surface-3); color: var(--pt-muted); min-height: var(--pt-touch-min); }
.pp-gallery-open .pp-gallery-media { border-radius: inherit; }
.pp-gallery-glyph { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.pp-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex;
  align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999rem;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1rem; pointer-events: none; }
.pp-dur { margin-left: .4rem; font-variant-numeric: tabular-nums; }
.pp-hero-stage .pp-hero-img { cursor: zoom-in; }
.pp-hero-stage .pp-video { cursor: auto; }
.pp-hero-open, .pp-video-chip, .pp-more-open { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  min-height: var(--pt-touch-min); min-width: var(--pt-touch-min); padding: .35rem .8rem; cursor: pointer;
  border: .0625rem solid var(--pt-line-2); border-radius: var(--pt-radius-md); background: var(--pt-surface-2);
  color: var(--pt-text); font: inherit; font-size: .82rem; }
.pp-more-open { color: var(--pt-muted); }
.pp-gallery-open:focus-visible, .pp-hero-open:focus-visible, .pp-video-chip:focus-visible, .pp-more-open:focus-visible {
  outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }

.pm-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(8, 10, 14, .96); color: #f5f7fa; outline: none; }
.pm-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; }
.pm-lb-count { font-size: .9rem; font-variant-numeric: tabular-nums; }
.pm-lb-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem;
  min-height: 0; padding: 0 .5rem; }
.pm-lb-stage { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%;
  touch-action: pan-y; }
.pm-lb-media { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pm-lb-video { width: 100%; max-height: 100%; background: #000; }
.pm-lb-broken { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #c7ccd4; font-size: .95rem; }
.pm-lb-broken i { font-size: 2rem; }
.pm-lb-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  padding: 0; cursor: pointer; border: .0625rem solid rgba(255, 255, 255, .35); border-radius: 999rem;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.1rem; }
.pm-lb-btn[hidden] { display: none; }
.pm-lb-btn:hover { background: rgba(255, 255, 255, .18); }
.pm-lb-btn:focus-visible { outline: .1875rem solid #8ab4ff; outline-offset: .1875rem; }
.pm-lb-caption { margin: 0; padding: .6rem 1rem 1rem; text-align: center; font-size: .9rem; color: #dfe3ea; }
/* phones: the stage takes the width; the arrows ride over its edges */
@media (max-width: 47.99rem) {
  .pm-lb-body { grid-template-columns: minmax(0, 1fr); padding: 0; position: relative; }
  .pm-lb-prev, .pm-lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; background: rgba(0, 0, 0, .45); }
  .pm-lb-prev { left: .4rem; }
  .pm-lb-next { right: .4rem; }
}
/* TV (10-foot): bigger targets and type, an unmistakable focus ring */
html.ui-tv .pm-lb-btn { width: 4rem; height: 4rem; font-size: 1.6rem; }
html.ui-tv .pm-lb-count, html.ui-tv .pm-lb-caption { font-size: 1.25rem; }
html.ui-tv .pm-lb-btn:focus { outline: .25rem solid #ffd166; outline-offset: .25rem; }
html.ui-tv .pp-hero-open, html.ui-tv .pp-video-chip, html.ui-tv .pp-more-open { min-height: 3.5rem; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .pm-lightbox, .pm-lb-media { transition: none; animation: none; } }

/* ---- library API 1.7 (WP2) ---------------------------------------------------------------- */
/* a lock's LINK call-to-action ("See plans"): the CTA button's look, as an anchor */
.pp-lock-link { display: inline-flex; align-items: center; text-decoration: none; }
/* score pills beside the status chip ("86% match", "24/36 Guna"): text, never colour alone */
.pp-score { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999rem;
  font-size: .72rem; font-weight: 700; background: var(--pt-accent-bg); color: var(--pt-accent-ink);
  border: .0625rem solid var(--pt-accent-line); font-variant-numeric: tabular-nums; }
/* the OWNER PREVIEW banner: first in the document, static (not a live region); sticky on phones */
.pp-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0 0 .75rem;
  padding: .65rem .85rem; border: .0625rem solid var(--pt-warn); border-radius: var(--pt-radius-md);
  background: var(--pt-warn-bg); color: var(--pt-text); font-size: .85rem; }
.pp-preview-ico { color: var(--pt-warn); flex: none; }
.pp-preview-text { margin: 0; flex: 1 1 12rem; min-width: 0; }
.pp-preview-exit { display: inline-flex; align-items: center; min-height: var(--pt-touch-min); padding: 0 .75rem;
  border-radius: var(--pt-radius-md); border: .0625rem solid var(--pt-line-2); background: var(--pt-surface);
  color: var(--pt-text); font-weight: 700; text-decoration: none; }
.pp-preview-exit:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }
@media (max-width: 47.99rem) {
  .pp-preview { position: sticky; top: 0; z-index: 2; }
}
/* in the two-column layout the banner is its own row, across both columns, above the hero */
@container pp-host (min-width: 48rem) {
  .pp-doc.has-preview { grid-template-areas: "preview preview" "hero main" "side main" "side footer";
    grid-template-rows: auto auto 1fr auto; }
  .pp-doc.has-preview > .pp-preview { grid-area: preview; margin: 0; }
}