/* Shared composition layer for the Partner Network.
   The design system stylesheet owns tokens and components. This file owns how they are
   put together: the masthead, the footer, page rhythm, and motion. Every value here
   comes from a design-system token; nothing invents a colour, a size or a radius. */

/* ----------------------------------------------------------------- motion
   Cross-document transitions. Transform and opacity only, one duration, and the whole
   thing switches off for anyone who asks for reduced motion. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: pn-out var(--sa-duration) var(--sa-ease) both; }
::view-transition-new(root) { animation: pn-in var(--sa-duration) var(--sa-ease) both; }

@keyframes pn-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes pn-in { from { opacity: 0; transform: translateY(6px); } }

/* The masthead and the progress bar stay put while the page beneath them changes. */
.sa-masthead { view-transition-name: pn-masthead; }
.pn-progress { view-transition-name: pn-progress; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------- navigation progress
   A hairline that fills while the next page is being fetched. It is the only
   loading affordance a server-rendered site needs. */
.pn-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: var(--sa-line-width-heavy);
  background: var(--sa-fill);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; z-index: calc(var(--sa-z-sticky) + 1);
  pointer-events: none;
}
.pn-progress[data-state="loading"] {
  opacity: 1;
  animation: pn-progress-grow 1.6s var(--sa-ease) forwards;
}
.pn-progress[data-state="done"] {
  opacity: 0; transform: scaleX(1);
  transition: opacity var(--sa-duration) var(--sa-ease);
}
@keyframes pn-progress-grow {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(0.75); }
  100% { transform: scaleX(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-progress[data-state="loading"] { animation: none; transform: scaleX(0.5); }
}

/* --------------------------------------------------------------- the masthead */
.pn-nav__start { display: flex; align-items: center; gap: var(--sa-space-md); min-inline-size: 0; }
.pn-nav__logo { display: block; block-size: 24px; }
.pn-nav__divider {
  inline-size: var(--sa-line-width); block-size: 20px;
  background: var(--sa-line); flex: none;
}
.pn-nav__where {
  font-size: var(--sa-size-body-sm); letter-spacing: var(--sa-track-meta);
  text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pn-nav__links { display: flex; gap: var(--sa-space-xl); justify-content: center; flex-wrap: wrap; }
.pn-nav__end { display: flex; align-items: center; gap: var(--sa-space-md); justify-content: flex-end; }
.pn-nav__who { font-size: var(--sa-size-body-sm); white-space: nowrap; }

/* The persistent search control. Looks like a field, behaves like a button. */
.pn-search-open {
  display: inline-flex; align-items: center; gap: var(--sa-space-xs);
  min-block-size: var(--sa-control-height-sm);
  padding-inline: var(--sa-space-sm);
  border: var(--sa-line-width) solid var(--sa-line);
  background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: var(--sa-size-body-sm);
}
.pn-search-open kbd {
  font: inherit; font-size: var(--sa-size-body-sm);
  letter-spacing: var(--sa-track-meta); opacity: .7;
}
.pn-search-open:hover { background: var(--sa-fill); color: var(--sa-on-fill); }
.pn-search-open:hover .sa-icon { color: var(--sa-on-fill); }

@media (max-width: 860px) {
  .sa-masthead { grid-template-columns: 1fr auto; row-gap: var(--sa-space-sm); }
  .pn-nav__links { grid-column: 1 / -1; justify-content: flex-start; gap: var(--sa-space-lg); }
  .pn-nav__where, .pn-nav__who { display: none; }
}

/* ----------------------------------------------------------------- the footer */
.pn-foot { border-block-start: var(--sa-line-width) solid var(--sa-line); }
.pn-foot__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sa-gutter); align-items: start;
}
.pn-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sa-space-xs); }
.pn-foot__mark { block-size: 22px; display: block; margin-block-end: var(--sa-space-md); }

/* -------------------------------------------------------------- page furniture */
/* One heading block: eyebrow, two-part heading, at most one lede. */
.pn-head { margin-block-end: var(--sa-space-2xl); }
.pn-head .sa-lede { margin-block-start: var(--sa-space-md); }

/* Definition list with a fixed label column, so every row shares a baseline.
   This is what stops the alignment drifting on detail pages. */
.pn-def { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--sa-space-sm) var(--sa-space-lg); }
.pn-def dt {
  font-size: var(--sa-size-body-sm); letter-spacing: var(--sa-track-meta);
  text-transform: uppercase; margin: 0;
}
.pn-def dd { margin: 0; }
@media (max-width: 620px) { .pn-def { grid-template-columns: 1fr; gap: var(--sa-space-2xs); } }

/* A figure and its label. Used for rates, counts and earnings. */
.pn-figure { display: block; }
.pn-figure__value { font-variant-numeric: tabular-nums; }

/* Rows of fields that must line up even when only one carries helper text. */
.pn-row { display: grid; gap: var(--sa-space-lg); align-items: start; }
.pn-row--2 { grid-template-columns: 1fr 1fr; }
.pn-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .pn-row--2, .pn-row--3 { grid-template-columns: 1fr; } }
/* Reserves the helper line so labels and inputs align across a row. */
.pn-row .sa-field { block-size: 100%; }

/* Equal-column choice grids. Fixes labels wrapping mid-phrase. */
.pn-choices { display: grid; gap: var(--sa-space-sm); }
.pn-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pn-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-choices .sa-check { white-space: nowrap; }
@media (max-width: 780px) { .pn-choices--4, .pn-choices--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pn-choices .sa-check { white-space: normal; } }

/* Centred blocks centre as a set: eyebrow, heading, body and button together. */
.pn-centred { text-align: center; max-inline-size: var(--sa-measure-tight); margin-inline: auto; }
.pn-centred > * { margin-inline: auto; }

/* Images fade in once decoded rather than snapping in. */
.pn-img { opacity: 0; transition: opacity var(--sa-duration-slow) var(--sa-ease); }
.pn-img[data-loaded="true"], .pn-img.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pn-img { opacity: 1; transition: none; } }

/* A dignified cover for a partner with no banner. Never a placeholder graphic. */
.pn-cover {
  border: var(--sa-line-width) solid var(--sa-line);
  padding: var(--sa-space-3xl) var(--sa-space-lg);
  display: grid; gap: var(--sa-space-sm); place-items: start;
}

/* Sticky rail for detail pages and long forms. */
.pn-rail { position: sticky; top: var(--sa-space-2xl); }
@media (max-width: 1080px) { .pn-rail { position: static; } }

.pn-split { display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: var(--sa-gutter); align-items: start; }
@media (max-width: 1080px) { .pn-split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- toasts */
.pn-toasts {
  position: fixed; inset-block-end: var(--sa-space-lg); inset-inline-end: var(--sa-space-lg);
  display: grid; gap: var(--sa-space-xs); z-index: var(--sa-z-overlay); max-inline-size: 22rem;
}
.pn-toast {
  padding: var(--sa-space-sm) var(--sa-space-md);
  border: var(--sa-line-width) solid var(--sa-line);
  font-size: var(--sa-size-body-sm);
  animation: pn-toast-in var(--sa-duration) var(--sa-ease) both;
}
@keyframes pn-toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .pn-toast { animation: none; } }
@media (max-width: 620px) { .pn-toasts { inset-inline: var(--sa-space-md); max-inline-size: none; } }

/* ------------------------------------------------------------- command palette */
.pn-palette { max-inline-size: 40rem; inline-size: 100%; }
.pn-palette__results { margin-block-start: var(--sa-space-lg); max-block-size: 52vh; overflow-y: auto; display: grid; gap: var(--sa-space-2xs); }
.pn-palette__results .sa-eyebrow { margin-block: var(--sa-space-sm) var(--sa-space-2xs); }
.pn-palette__item {
  display: grid; gap: 2px; padding: var(--sa-space-sm) var(--sa-space-md);
  text-decoration: none; color: inherit;
  border-inline-start: var(--sa-line-width-heavy) solid transparent;
}
.pn-palette__item[aria-selected="true"], .pn-palette__item:hover {
  background: var(--sa-bg-alt, rgba(0,0,0,.04));
  border-inline-start-color: var(--sa-line);
}
.pn-palette__name { font-size: var(--sa-size-body-lg); }

/* ---------------------------------------------------------- directory cards */
.pn-card { display: flex; flex-direction: column; position: relative; }
.pn-card__media { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.pn-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pn-card__body { display: flex; flex-direction: column; gap: var(--sa-space-xs); padding: var(--sa-space-lg); flex: 1; }
.pn-card__foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sa-space-md);
  margin-block-start: auto; padding-block-start: var(--sa-space-md);
}
.pn-card__hit { position: absolute; inset: 0; z-index: 1; }
.pn-card__foot .sa-btn, .pn-card .sa-btn { position: relative; z-index: 2; }

/* ------------------------------------------------------------ shortlist tray */
.pn-tray {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--sa-z-overlay);
  border-block-start: var(--sa-line-width) solid var(--sa-line);
  padding-block: var(--sa-space-md);
  animation: pn-tray-in var(--sa-duration) var(--sa-ease) both;
}
@keyframes pn-tray-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .pn-tray { animation: none; } }
.pn-tray__inner { display: flex; align-items: center; gap: var(--sa-space-lg); flex-wrap: wrap; }
.pn-tray__names { flex: 1; min-inline-size: 12rem; margin: 0; }
.pn-tray__acts { display: flex; gap: var(--sa-space-sm); }
body.pn-tray-open { padding-block-end: 7rem; }

.pn-draft {
  position: fixed; inset-inline: 0; inset-block-end: 6rem; z-index: var(--sa-z-overlay);
  border-block: var(--sa-line-width) solid var(--sa-line);
  padding-block: var(--sa-space-lg); max-block-size: 50vh; overflow-y: auto;
}
.pn-draft__head { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--sa-space-md); }
.pn-draft__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sa-space-md);
  padding-block: var(--sa-space-sm);
  border-block-start: var(--sa-line-width) solid var(--sa-line);
  flex-wrap: wrap;
}
.pn-draft__acts { display: flex; gap: var(--sa-space-sm); }

/* --------------------------------------------------------------- form rail */
.pn-formgrid { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: var(--sa-space-3xl); align-items: start; }
@media (max-width: 900px) { .pn-formgrid { grid-template-columns: 1fr; gap: var(--sa-space-xl); } }
.pn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sa-space-xs); }
.pn-steps a { display: block; padding-block: var(--sa-space-2xs); text-decoration: none; color: inherit; font-size: var(--sa-size-body-sm); }
.pn-steps a[aria-current="true"] { font-weight: var(--sa-weight-medium); text-decoration: underline; text-underline-offset: 4px; }

/* The design system adds a 32px top margin to a field following another field. Inside a
   row that pushes the second field off the shared baseline, so it is reset here once
   rather than with an inline style on every paired field. */
.pn-row > .sa-field + .sa-field,
.pn-row .sa-field { margin-top: 0; }

/* ------------------------------------------------- corrections after review
   1. Nav links fell back to the browser's default link colour, which rendered the
      masthead purple. `.sa-tab` never sets a colour and these are anchors, not buttons.
   2. The bracket glyphs already mark the current page, so the underline is redundant.
   3. A long testimonial set at display size wraps into a wall of italic serif. Display
      sizes are for short pull quotes; anything longer reads at body size on a real
      measure. */
.sa-tab,
.pn-foot__list a,
.pn-nav__links a,
.pn-steps a,
.pn-card a { color: inherit; text-decoration: none; }
.sa-tab:visited,
.pn-foot__list a:visited { color: inherit; }

.sa-tabs { border-bottom: 0; }
.sa-tab { border-bottom: 0; }
.sa-tab[aria-selected="true"] { border-bottom-color: transparent; }

/* A testimonial, not a pull quote. */
.pn-quote {
  font-family: var(--sa-font-display);
  font-size: var(--sa-size-body-lg);
  font-style: italic;
  font-weight: var(--sa-weight-regular);
  line-height: var(--sa-leading-body);
  letter-spacing: 0;
  max-inline-size: var(--sa-measure);
  margin: 0;
}
.pn-quote--short { font-size: var(--sa-size-display-4); line-height: var(--sa-leading-tight); }

/* The label under a figure.
   `.sa-stat__label` draws its own square brackets in CSS, so any number using it reads as
   "[COMMISSION]". A bracket never belongs on a number, so figures use this instead: the
   same quiet uppercase label, without the brackets. Defined here rather than on one page
   so every figure in the product matches. */
.pn-kicker {
  display: block;
  font-family: var(--sa-font-text);
  font-size: var(--sa-size-body-sm);
  font-weight: var(--sa-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--sa-track-bracket);
  margin-top: var(--sa-space-sm);
}