/* ---------------------------------------------------------------------------
   Performer page: rail, fact pills, about block, spec table, FAQ.

   Loaded via $pageCss on performer pages (both live and offline - the about
   block and spec table render in both states).

   Built entirely from the existing custom properties so it inherits the theme.
   Nothing here hardcodes a colour except the live-green, which has no token.
   --------------------------------------------------------------------------- */

/* ---- row width ----

   ONE KNOB in use: --pf-rail sets the right column - rail AND spec table, so
   they stay on the same edge down the page. 360px is what lets the share strip
   put its label and button on one line; 300 could not.

   --pf-max is OFF by default. Capping the row was tried and reverted: it made
   the player look cramped and boxed-in against a wide viewport, and the point
   of the rail change was to widen the rail, not to shrink the page. The player
   takes whatever the rail leaves, as it did originally. Set --pf-max to a px
   value on .pf-row if that ever needs revisiting. */
.pf-row, .pf-about-row { max-width: var(--pf-max, none); }

.pf-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: stretch;
}

/* Player column. The basis keeps it wide at any width the cap allows; the
   min-width is what lets it drop below the rail on a phone. */
.pf-main {
  flex: 1 1 680px;
  min-width: 300px;
}

/* Offline pages only. The row is align-items:stretch, so .pf-main already has
   the full row height - but the block inside it kept its own 340px and the two
   columns finished at different heights. Making the column a flex container
   lets the block claim what is left.
   Deliberately NOT applied to live pages: that column holds a 16/9 player,
   which must keep its own height rather than stretch to match the rail. */
.pf-main.is-offline { display: flex; flex-direction: column; }
.pf-main.is-offline > .pf-offline { flex: 1 1 auto; }

/* ---- offline block ----
   min-height, NOT aspect-ratio 16/9. It inherited the ratio from the player
   slot it replaced, which meant ~650px of mostly empty panel on a wide screen -
   there is no video here whose proportions need preserving. 340 is enough to
   stay level with the rail without the void. */
.pf-offline {
  min-height: 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 12px;
}

/* Deliberately grey and still. A pulsing dot means "happening now" everywhere
   else on this page; here it means the opposite. */
.pf-off-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .7;
}

.pf-off-h {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
}
.pf-off-user { color: var(--muted); font-weight: 600; }

.pf-off-sub {
  color: var(--muted);
  /* 34ch, so "but 20,783 models are live this second" breaks between phrases
     rather than splitting the number off its noun. */
  max-width: 34ch;
  line-height: 1.6;
  margin: 0;
}
.pf-off-sub b { color: var(--text); }

/* Pill, not a rectangle - every other button on the page is a rounded rect, so
   this reads as a different kind of action rather than another CTA. The glow
   is what makes it the only thing to look at on an otherwise empty panel. */
.pf-off-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--accent2));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 0 34px rgba(240, 53, 121, .38);
}
.pf-off-cta:hover { filter: brightness(1.08); }

@media (max-width: 620px) {
  .pf-off-h   { font-size: 20px; }
  .pf-offline { min-height: 260px; }
}

/* ---- rail ---- */

.pf-rail {
  flex: 0 0 var(--pf-rail, 360px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px;
}

.pf-live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--live);
  margin-bottom: 12px;
}
.pf-live .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}
.pf-live.off { color: var(--muted); }
.pf-live.off .dot { background: var(--muted); }



/* Primary CTA. The FREE badge rides the top-right corner rather than sitting
   inside the button, so the label stays centred at any name length. */
.pf-cta-wrap { position: relative; }

.pf-cta {
  display: block;
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  background: linear-gradient(90deg, var(--pink), var(--accent2));
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 12px;
  border-radius: 9px;
  letter-spacing: .2px;
  /* Long usernames would otherwise push the button wider than the rail. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-cta:hover { filter: brightness(1.08); }

.pf-badge {
  position: absolute;
  /* Above the button. :hover puts a filter on .pf-cta, which promotes it to a
     new stacking context - and since it comes later in the DOM it then painted
     over this badge, so the badge vanished on mouseover. */
  z-index: 2;
  top: -9px; right: -4px;
  background: #143a24;
  color: var(--live);
  border: 1px solid #2c6b45;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* One row, equal halves. A lone child stretches to full width, so the same
   markup covers "share strip present" and "goal moved it elsewhere". */
.pf-rail-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.pf-rail-actions > * { flex: 1 1 0; min-width: 0; }
/* One child today - share moved under the player, where it has the width to be
   seen. Kept as a flex row so a second action can join without a rewrite. */

.pf-secondary {
  display: block;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.pf-secondary:hover { background: rgba(255, 255, 255, .08); }

/* Fact pills. Two per row at 300px, one when the label is long - which is why
   they wrap rather than sitting in a fixed grid. */
.pf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--muted);
}
.pf-pill b { color: var(--text); font-weight: 600; }
a.pf-pill:hover { border-color: var(--pink); }

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* Trust list. Deliberately plain - ticks and one line each. Anything more
   ornate reads as marketing, which is the opposite of the point. */
.pf-trust {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pf-trust div {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pf-trust .tick { color: var(--live); font-weight: 800; flex: none; }

/* ---- about block ---- */

.pf-about-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 6px;
}

/* The similar-cams grid below is deliberately NOT capped - it is the widest
   thing on the page and benefits from every column it can fit. Capping it too
   would waste the space the shorter player just freed up. */

/* Holds the prose AND the faq, so they stack in one column beside the spec
   table instead of the faq starting below whichever column is taller. */
.pf-about-main {
  flex: 1 1 380px;
  min-width: 280px;
}

.pf-about-prose {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px 18px;
}
.pf-about-prose p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 12px;
}
.pf-about-prose p:last-child { margin-bottom: 0; }
.pf-about-prose b { color: var(--text); font-weight: 600; }
.pf-about-prose a { color: var(--pink2); }
.pf-about-prose q { color: var(--pink2); font-style: italic; }

/* Matches the rail above it, so the page keeps one right-hand column. */
.pf-spec {
  flex: 0 0 var(--pf-rail, 360px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 16px;
}
.pf-spec table { width: 100%; font-size: 13px; }
.pf-spec td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pf-spec tr:last-child td { border-bottom: 0; }
.pf-spec td:first-child { color: var(--muted); }
.pf-spec td:last-child { text-align: right; color: var(--text); font-weight: 600; }
/* Matches the LIVE badge on the cards rather than the browser-default green.
   The rail's "Live right now" line stays green deliberately - that one sits
   beside a green dot and reads as a status light; this is a table value and
   reads better in the site's own accent. */
.pf-spec .ok { color: var(--pink2); }

/* ---- faq ---- */

.pf-faq { margin-top: 12px; }
.pf-faq details:last-child { margin-bottom: 0; }

.pf-faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 8px;
}

.pf-faq summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pf-faq summary::-webkit-details-marker { display: none; }

/* The +/- is CSS, not markup, so the answer text stays clean for a crawler. */
.pf-faq summary::after {
  content: '+';
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  flex: none;
}
.pf-faq details[open] summary::after { content: '\2212'; }

.pf-faq .a {
  padding: 0 16px 15px;
  color: var(--muted);
  line-height: 1.7;
}
.pf-faq .a a { color: var(--pink2); }

/* Collapse the rail + spec + about columns to a full-width single stack at the
   SAME 900px the player uses for its full-bleed treatment (see performer.php).
   Below 900 the two-column layout only had ~360-500px per column, which on a
   tablet in portrait (iPad ~834px) left a wide player sitting on top of two
   cramped skinny columns. Matching the breakpoints makes the whole page go
   single-column together, so the CTA, About, FAQ and spec table each take the
   full width — the layout the reference sites use at this size. */
@media (max-width: 900px) {
  .pf-rail, .pf-spec, .pf-about-main { flex: 1 1 100%; }
}

/* ---- Microsoft Surface Duo / dual-screen foldables, held open spanned ----
   Spanned, the viewport is ~1114px — WIDER than the 900px collapse above, so
   without this rule the page falls back to the desktop two-column layout, which
   on a device with a left filter sidebar leaves the player + rail sitting off to
   the right and getting sliced by the hinge. The fix is the SAME as the iPad
   one: collapse the rail, spec table and About column to a full-width single
   stack, so the page reads as one clean column instead of cramped side-by-side
   panels.
   Two triggers, because a rule scoped only to the fold would miss most testing:
     1. `spanning: single-fold-vertical` — a REAL dual-screen device, or Chrome
        DevTools with the dual-screen toggle ON, reporting a vertical fold.
     2. a narrow 1050-1140px width band — device-PREVIEW tools (and the real
        device in browsers that don't expose the fold) render the page FLAT at
        the spanned width with no fold signal, so trigger #1 never fires there.
        The band is deliberately narrow: it catches the Duo's ~1114px but stays
        clear of 1024px (iPad / laptop landscape).
   NOTE: the left CAMS-FILTERS sidebar is styled in the shared shell/layout CSS,
   not here. To make this width look fully like the iPad (no sidebar, true
   full-width column), that sidebar also needs to be hidden at this width in the
   shell CSS — this file can only collapse the performer columns. */
@media (spanning: single-fold-vertical),
       (min-width: 1050px) and (max-width: 1140px) {
  .pf-rail, .pf-spec, .pf-about-main { flex: 1 1 100%; }
}