/* ScaleLounge portals V2: client Affiliate program (inventory C23, C24).
 * The figures take the metric tiles of page 13 (one lead tile), the kit the card of page 28. Every
 * colour comes from the tokens, so both themes and the lead tile need nothing here. */

html.pv-app .pvx-aff {
  display: grid;
  gap: var(--pv-gap);
}

html.pv-app .pvx-aff__notice {
  padding: 14px 18px;
  color: var(--pv-text-secondary);
}

html.pv-app .pvx-aff__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pv-gap);
}

html.pv-app .pvx-aff__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--pv-gap);
  align-items: start;
}

html.pv-app .pvx-aff__grid .pv-card .pv-card__body,
html.pv-app .pvx-aff__kit .pv-card__body,
html.pv-app .pvx-aff__w9 .pv-card__body {
  display: grid;
  gap: 14px;
}

/* ---- Your link -------------------------------------------------------------------------------- */
html.pv-app .pvx-aff__off {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--pv-radius);
  background: var(--pv-status-attention-bg);
  color: var(--pv-status-attention-text);
  font-weight: 600;
}

html.pv-app .pvx-aff__off .pv-icon {
  flex: none;
  margin-top: 2px;
}

html.pv-app .pvx-aff__linkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
}

html.pv-app .pvx-aff__url {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html.pv-app .pvx-aff__urltext {
  font-weight: 600;
  overflow-wrap: anywhere;
}

html.pv-app .pvx-aff__codeword {
  color: var(--pv-text);
  font-family: var(--pv-font-mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: 0.04em;
}

html.pv-app .pvx-aff__pages {
  display: grid;
  gap: 4px;
  list-style: none;
}

html.pv-app .pvx-aff__pages[hidden] {
  display: none;
}

html.pv-app .pvx-aff__pagerow {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 6px 0;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pvx-aff__pagename {
  font-weight: 600;
}

html.pv-app .pvx-aff__w9ok {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pv-status-success-text);
}

/* ---- How it works and the earnings -------------------------------------------------------------- */
html.pv-app .pvx-aff__fees .pv-dl__row dd,
html.pv-app .pvx-aff__sums .pv-dl__row dd {
  font-weight: 600;
}

html.pv-app .pvx-aff__sub {
  margin-bottom: 6px;
  color: var(--pv-text-meta);
  font-family: var(--pv-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.pv-app .pvx-aff__lines {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

html.pv-app .pvx-aff__linelist {
  display: grid;
  gap: 2px;
  list-style: none;
}

html.pv-app .pvx-aff__line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pvx-aff__line > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html.pv-app .pvx-aff__linetitle {
  font-weight: 600;
}

/* ---- Referrals and an introduction --------------------------------------------------------------- */
html.pv-app .pvx-aff__signups {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

html.pv-app .pvx-aff__reftrail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
}

html.pv-app .pvx-aff__fee {
  font-weight: 600;
}

/* The fee and its state take their own line when the row is narrow, so the text keeps its width. */
html.pv-app .pvx-aff__reflist .pv-row {
  flex-wrap: wrap;
  align-items: flex-start;
}

html.pv-app .pvx-aff__reflist .pv-row__main {
  flex: 1 1 10rem;
  min-width: 0;
}

html.pv-app .pvx-aff__intro {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pvx-aff__introform,
html.pv-app .pvx-aff__payform {
  display: grid;
  gap: 14px;
}

html.pv-app .pvx-aff__payform .pv-field[hidden] {
  display: none;
}

/* ---- The marketing kit (page 28) ---------------------------------------------------------------- */
html.pv-app .pvx-aff__disc {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
}

html.pv-app .pvx-aff__disctitle {
  font-weight: 600;
}

html.pv-app .pvx-aff__quote {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--pv-text);
  font-style: italic;
}

html.pv-app .pvx-aff__kitbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 28px;
}

html.pv-app .pvx-aff__kitbar .pv-seg[hidden] {
  display: none;
}

html.pv-app .pvx-aff__kitgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pv-gap);
  list-style: none;
}

html.pv-app .pvx-aff__kititem {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
}

html.pv-app .pvx-aff__kitimg {
  width: 96px;
  height: auto;
  aspect-ratio: 1122 / 1402;
  border-radius: var(--pv-radius-xs);
  object-fit: cover;
}

html.pv-app .pvx-aff__kitgrid--stories .pvx-aff__kitimg {
  aspect-ratio: 941 / 1672;
}

html.pv-app .pvx-aff__kittext {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

html.pv-app .pvx-aff__kittitle {
  font-size: 17px;
  line-height: 1.3;
}

html.pv-app .pvx-aff__caption {
  display: -webkit-box;
  overflow: hidden;
  color: var(--pv-text-secondary);
  font-size: 14px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

html.pv-app .pvx-aff__kitacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

@container pvmain (max-width: 1100px) {
  html.pv-app .pvx-aff__kitgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container pvmain (max-width: 860px) {
  html.pv-app .pvx-aff__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pvx-aff__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container pvmain (max-width: 600px) {
  html.pv-app .pvx-aff__kitgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pvx-aff__reftrail {
    justify-content: flex-start;
    width: 100%;
    padding-left: 38px;
  }
  html.pv-app .pvx-aff__pagerow {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  html.pv-app .pvx-aff__pagerow .pvx-aff__urltext {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@container pvmain (max-width: 380px) {
  html.pv-app .pvx-aff__kititem {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  html.pv-app .pvx-aff__kitimg {
    width: 72px;
  }
}

/* ---- LIVE (slice 27c): today's whole area -------------------------------------------------------- */
/* Every card body here is one column that takes what the card has, so nothing inside it widens the page. */
html.pv-app .pvx-aff .pv-card__body {
  grid-template-columns: minmax(0, 1fr);
}

/* Today's status lines are sentences ("Client, fee earned at their second monthly payment"): on a phone
   they wrap inside their chip rather than run past the card. */
html.pv-app .pvx-aff__reftrail .pv-pill {
  max-width: 100%;
  white-space: normal;
}

/* Five figures, as today's At a glance: five across, then three, then two. */
html.pv-app .pvx-aff__tiles.pvx-aff__tiles--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html.pv-app .pvx-aff__welcome .pv-card__body,
html.pv-app .pvx-aff__pay .pv-card__body,
html.pv-app .pvx-aff__earn .pv-card__body {
  display: grid;
  gap: 14px;
}

html.pv-app .pvx-aff__steps {
  display: grid;
  gap: 12px;
  padding-left: 1.3em;
}

html.pv-app .pvx-aff__steptitle,
html.pv-app .pvx-aff__notetitle,
html.pv-app .pvx-aff__tiletitle {
  font-weight: 600;
}

html.pv-app .pvx-aff__note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
}

html.pv-app .pvx-aff__notetext {
  white-space: pre-wrap;
}

html.pv-app .pvx-aff__err {
  color: var(--pv-status-danger-text);
  font-weight: 600;
}

html.pv-app .pvx-aff__err:empty {
  display: none;
}

html.pv-app .pvx-aff__owed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--pv-radius);
  background: var(--pv-status-danger-bg);
  color: var(--pv-status-danger-text);
  font-weight: 600;
}

html.pv-app .pvx-aff__links {
  display: grid;
  gap: 8px;
}

html.pv-app .pvx-aff__cur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

html.pv-app .pvx-aff__handle {
  overflow-wrap: anywhere;
}

/* The kit: a larger preview opens from the thumbnail, and a text keeps its own line breaks. */
html.pv-app .pvx-aff__kitgrid.pvx-aff__kitgrid--live {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The text column takes what is left, so a long Copy label wraps inside it instead of widening the page. */
html.pv-app .pvx-aff__kitgrid--live .pvx-aff__kittext {
  grid-template-columns: minmax(0, 1fr);
}

html.pv-app .pvx-aff__kitgrid--live .pvx-aff__kitimg {
  height: auto;
  aspect-ratio: auto;
}

html.pv-app .pvx-aff__shot {
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--pv-radius-xs);
  background: none;
  color: var(--pv-text-meta);
  cursor: zoom-in;
}

html.pv-app span.pvx-aff__shot {
  cursor: default;
}

html.pv-app .pvx-aff__caption.pvx-aff__caption--full {
  display: block;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

html.pv-app .pvx-aff__caphead {
  color: var(--pv-text-meta);
  font-size: 13px;
  font-weight: 600;
}

html.pv-app .pvx-aff__reflink {
  color: var(--pv-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

html.pv-app .pvx-aff__pending {
  color: var(--pv-text-meta);
  font-style: italic;
}

html.pv-app .pvx-aff__panel {
  display: grid;
  gap: 14px;
}

html.pv-app .pvx-aff__panel[hidden] {
  display: none;
}

html.pv-app .pvx-aff__share {
  border-top: 1px solid var(--pv-divider);
  padding-top: 10px;
}

html.pv-app .pvx-aff__sharesum {
  cursor: pointer;
  font-weight: 600;
}

html.pv-app .pvx-aff__sharebody {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

html.pv-app .pvx-aff__sharehead {
  font-size: 15px;
}

html.pv-app .pvx-aff__sharesteps {
  display: grid;
  gap: 6px;
  padding-left: 1.3em;
}

html.pv-app .pvx-aff__kv {
  display: grid;
  gap: 10px;
}

html.pv-app .pvx-aff__kvrow dt {
  color: var(--pv-text-meta);
  font-size: 13px;
  font-weight: 600;
}

html.pv-app .pvx-aff__kvrow dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

html.pv-app .pvx-aff__files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pv-gap);
  list-style: none;
}

html.pv-app .pvx-aff__tile {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
}

html.pv-app .pvx-aff__tilethumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--pv-radius-xs);
  background: var(--pv-surface-muted);
}

html.pv-app .pvx-aff__tileimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.pv-app .pvx-aff__tileicon {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--pv-text-meta);
  font-weight: 600;
}

html.pv-app .pvx-aff__texts {
  display: grid;
  gap: 12px;
  list-style: none;
}

html.pv-app .pvx-aff__textitem {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
}

html.pv-app .pvx-aff__texthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

html.pv-app .pvx-aff__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html.pv-app .pvx-aff__dlgimg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
  border-radius: var(--pv-radius-xs);
}

@container pvmain (max-width: 1100px) {
  html.pv-app .pvx-aff__tiles.pvx-aff__tiles--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Earned takes two places, so five figures fill their rows: two and one, then three; or one, then two by two. */
  html.pv-app .pvx-aff__tiles--five > .pv-lead {
    grid-column: span 2;
  }
}

@container pvmain (max-width: 860px) {
  html.pv-app .pvx-aff__tiles.pvx-aff__tiles--five,
  html.pv-app .pvx-aff__files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.pv-app .pvx-aff__kitgrid.pvx-aff__kitgrid--live {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container pvmain (max-width: 600px) {
  html.pv-app .pvx-aff__kitgrid.pvx-aff__kitgrid--live,
  html.pv-app .pvx-aff__files,
  html.pv-app .pvx-aff__kitgrid--live .pvx-aff__kititem {
    grid-template-columns: minmax(0, 1fr);
  }
}