/* TrustPay site: "A reputation that follows you" (#profiles). Section-scoped (linked from _src/profiles.html;
   profiles.js plays the ring once and cycles the features).
   v8 (client r8, 3 Oct): no fake dashboard. Left: headline + the three features. Right: one composition on the page
   ground: Sam's profile card (pale tone) with his payment link card (forest) over its lower-right corner. Depth from
   overlap and tone only: no shadows, no borders. The feature that is on tints its part of the cards.
     >= 1200  two columns (copy | composition)
     < 1200   stacked: copy, then the composition centred
     <= 640   the cards stack, the link card overlapping the profile card by 28 px (--pf-ov) */

.pf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.4vw, 64px); align-items: center; }

/* ---------------------------------------------------------------- the features */
.pf-feats { display: grid; gap: 6px; margin-top: clamp(28px, 3vw, 40px); max-width: 420px; }
.pf-feats button {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 14px 16px 14px 14px;
  border: 0; border-radius: 22px; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color var(--t2) var(--ease);
}
.pf-feats button > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ground-2); color: var(--brand-text);
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease); }
.pf-feats .i { width: 24px; height: 24px; }
.pf-feats b { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pf-feats small { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.pf-feats button[aria-pressed="true"] { background: var(--ground-2); }
.pf-feats button[aria-pressed="true"] > i { background: var(--brand); color: var(--on-brand); }

/* ---------------------------------------------------------------- the composition */
/* r10 (client: "not proper hover or focus"): the two cards sit in one grid; the link card starts --pf-ov above the
   profile card's bottom edge, so the overlap is the same at every card height. Hover, focus or the matching feature
   brings one card to the front (z-index, opaque, small lift); the other steps back (scale down, quieter tone) and
   slides off the overlap, so no text is ever covered or seen through the other card. */
.pf-comp {
  --pf-ov: 44px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(300px, 100%); grid-template-rows: auto var(--pf-ov) auto;
  width: 100%; max-width: 664px; justify-self: end;
}
.pf-card { margin: 0; }
.pf-comp .pf-card { position: relative; transition: transform .55s var(--ease), background-color .55s var(--ease), z-index 0s .18s; }
.pf-comp .pf-card:focus-visible { border-radius: 32px; }
.pf-comp .pf-link:focus-visible { border-radius: 28px; }
.pf-comp .pf-prof { grid-column: 1 / -1; grid-row: 1 / 3; justify-self: start; z-index: 1; transform-origin: 0 0; background: rgb(255 255 255 / .5); }
.pf-comp .pf-link { grid-column: 2; grid-row: 2 / 4; z-index: 1; transform-origin: 100% 100%; background: var(--night-2); }
/* in front: opaque, lifted */
.pf-grid:not([data-pf-on="link"]) .pf-prof { z-index: 2; background: #F4FBF7; transform: translate3d(0, -4px, 0); }
.pf-grid[data-pf-on="link"] .pf-link { z-index: 2; background: var(--night); transform: translate3d(0, -8px, 0); }
/* stepping back: off the overlap, a little smaller */
.pf-grid:not([data-pf-on="link"]) .pf-link { transform: translate3d(0, 16px, 0) scale(.97); }
.pf-grid[data-pf-on="link"] .pf-prof { transform: scale(.97); }
.pf-prof {
  display: grid; grid-template-columns: minmax(0, 1fr) 156px; grid-template-areas: "who score" "stats score" "deals ."; column-gap: 28px; row-gap: 22px;
  width: min(100%, 560px); padding: 30px 32px 32px; border-radius: 32px; background: var(--ground-2); color: var(--ink);
  font: 400 15px/1.4 var(--sans); letter-spacing: -.005em;
}
/* r9 (client: one container level): the picked feature is shown without an inner tile: its zone steps forward
   (scale, transform only; colours and contrast never change) */
.pf-zone { border-radius: 18px; transition: transform .55s var(--ease); }
.pf-prof [data-zone="handle"] { transform-origin: 0 50%; }
.pf-grid[data-pf-on="handle"] .pf-prof [data-zone="handle"],
.pf-grid[data-pf-on="score"] .pf-prof [data-zone="score"] { transform: scale(1.06); }

.pf-who { grid-area: who; display: flex; align-items: center; gap: 16px; min-width: 0; }
.pf-av { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; font: 650 20px/1 var(--sans); letter-spacing: -.01em; }
.pf-handle { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.pf-who small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.pf-who code { font: 500 .95em/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }

.pf-score { grid-area: score; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.pf-ringbox { position: relative; display: grid; place-items: center; width: 136px; height: 136px; }
.pf-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke-width: 12; }
.pf-ring circle:first-child { stroke: var(--field); }
.pf-ring circle + circle { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: calc(326.73 * (1 - var(--p, .92))); }
.pf-ringbox b { position: relative; font-size: 50px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.pf-score-t small { display: block; color: var(--muted); font-size: 13.5px; }
.pf-score-t b { display: block; margin-top: 1px; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }

.pf-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin: 0; }
.pf-stats dt { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.pf-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }

.pf-deals { grid-area: deals; display: grid; gap: 4px; }
.pf-deals li { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 12px; align-items: center; min-height: 40px; }
.pf-deals li > span { overflow: hidden; font-size: 15px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.pf-deals li > b { font-size: 15px; font-weight: 600; }
.pf-tag { display: inline-flex; align-items: center; justify-self: end; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px;
  font: 650 13px/1 var(--sans); font-style: normal; }
.pf-tag .i { width: 13px; height: 13px; }
.pf-tag.pf-lock { background: var(--lock-soft); color: var(--lock-text); }
.pf-tag.pf-done { background: var(--paid-soft); color: var(--paid-text); }

/* the payment link: forest, over the profile card's lower-right corner (under the ring, where the card is empty) */
.pf-link {
  padding: 24px 24px 22px; border-radius: 28px;
  background: var(--night); color: var(--night-ink); font: 400 15px/1.4 var(--sans); letter-spacing: -.005em;
}
.pf-link > div { display: grid; }
.pf-url { display: inline-flex; align-items: center; gap: 7px; color: var(--night-muted); font-size: 13.5px; transition: color .45s var(--ease); }
.pf-url .i { width: 16px; height: 16px; }
.pf-what { margin-top: 18px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.pf-amt { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; font-size: 40px; font-weight: 700; letter-spacing: -.045em; line-height: 1.1; }
.pf-amt small { color: var(--night-muted); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.pf-terms { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--night-ink); font-size: 14px; }
.pf-terms > span { display: inline-flex; align-items: center; gap: 6px; }
.pf-terms .i { width: 16px; height: 16px; color: var(--brand); }
.pf-fund { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 20px; border-radius: 99px;
  background: var(--brand); color: var(--on-brand); font-size: 16px; font-weight: 650; }
.pf-fund .i { width: 17px; height: 17px; }
.pf-grid[data-pf-on="link"] .pf-url { color: var(--brand); }

/* ---------------------------------------------------------------- stacked */
@media (max-width: 1199px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
  .pf-feats { margin-top: 0; max-width: none; }
  .pf-comp { justify-self: center; }
}
@media (max-width: 860px) {
  .pf-copy { grid-template-columns: minmax(0, 1fr); }
  .pf-feats { margin-top: 4px; }
}
@media (max-width: 640px) {
  .pf-feats button { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 10px; }
  .pf-feats button > i { width: 44px; height: 44px; }
  .pf-feats b { font-size: 18px; }
  .pf-feats small { font-size: 14.5px; }
  .pf-comp { --pf-ov: 28px; grid-template-columns: 24px minmax(0, 1fr); }
  .pf-prof { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who who" "stats score" "deals deals"; column-gap: 12px; row-gap: 20px; width: 100%; padding: 22px 20px 24px; border-radius: 28px; }
  .pf-av { width: 52px; height: 52px; font-size: 18px; }
  .pf-handle { font-size: 25px; }
  .pf-who small { font-size: 13px; white-space: normal; }
  .pf-score { align-self: center; gap: 8px; }
  .pf-ringbox { width: 104px; height: 104px; }
  .pf-ringbox b { font-size: 38px; }
  .pf-score-t small { font-size: 12.5px; }
  .pf-score-t b { font-size: 15px; }
  .pf-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; align-self: center; }
  .pf-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .pf-stats dd { font-size: 19px; }
  .pf-deals li { grid-template-columns: minmax(0, 1fr) auto 80px; gap: 10px; }
  .pf-deals li > span, .pf-deals li > b { font-size: 14px; }
  .pf-comp .pf-prof:focus-visible { border-radius: 28px; }
  .pf-grid:not([data-pf-on="link"]) .pf-link { transform: translate3d(0, 4px, 0) scale(.97); }
  .pf-grid[data-pf-on="link"] .pf-link { transform: translate3d(0, -6px, 0); }
  .pf-amt { font-size: 36px; }
}

/* motion: the ring fills and the numbers count once on view (profiles.js) */
@media (prefers-reduced-motion: reduce) { .pf-zone, .pf-comp .pf-card { transition: none; } }