/* 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);
}

/* ---------------------------------------------------------------- the page frame
   The design system's hairline frame now wraps the masthead, the page and the footer
   together, so the two side rules run unbroken from the top of the window to the bottom
   instead of stopping where the content does. */
.pn-shell { display: flex; flex-direction: column; min-block-size: 100vh; }
.pn-shell > main { flex: 1; }

/* ---------------------------------------------------------------------- the footer */
.pn-foot__grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  padding-block: var(--sa-space-4xl) var(--sa-space-2xl);
}
@media (max-width: 780px) { .pn-foot__grid { grid-template-columns: 1fr; } }
.pn-foot__brand { max-inline-size: 34ch; }
.pn-foot__label { margin-block-end: var(--sa-space-md); }
.pn-foot__list a { text-decoration: none; }
.pn-foot__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pn-foot__base {
  display: flex; justify-content: space-between; gap: var(--sa-space-md); flex-wrap: wrap;
  padding-block: var(--sa-space-lg);
  border-block-start: var(--sa-line-width) solid var(--sa-line);
}
.pn-foot__base p { margin: 0; }

/* ------------------------------------------------- admin: tier and featured control */
.pn-status { display: flex; gap: var(--sa-space-xs); align-items: center; margin: 0; flex-wrap: wrap; }
.pn-status .sa-select { min-inline-size: 11rem; }
/* Marks the single featured partner in the admin list. */
.pn-lead-mark { display: inline; margin-inline-start: var(--sa-space-xs); }

/* ============================================================ review corrections */

/* The search palette opens from every page, so the rule that lets it close has to be
   global. It previously lived in the directory's own page styles, which meant the close
   button did nothing anywhere else: `hidden` was set but .sa-overlay is display:grid. */
.sa-overlay[hidden] { display: none !important; }
.pn-card[hidden] { display: none !important; }

/* Brackets are the only hover and active state for clickable text. Underlines are never
   used anywhere, for hover or for marking the current item. */
a:hover, a:focus-visible,
.pn-steps a, .pn-foot__list a, .pn-foot__base a { text-decoration: none; }

.pn-steps a, .pn-foot__list a, .pn-foot__base a {
  position: relative;
  transition: opacity var(--sa-duration) var(--sa-ease);
}
.pn-steps a::before, .pn-foot__list a::before, .pn-foot__base a::before { content: "[\00a0"; }
.pn-steps a::after, .pn-foot__list a::after, .pn-foot__base a::after { content: "\00a0]"; }
.pn-steps a::before, .pn-steps a::after,
.pn-foot__list a::before, .pn-foot__list a::after,
.pn-foot__base a::before, .pn-foot__base a::after {
  opacity: 0;
  transition: opacity var(--sa-duration) var(--sa-ease);
}
.pn-steps a:hover::before, .pn-steps a:hover::after,
.pn-steps a:focus-visible::before, .pn-steps a:focus-visible::after,
.pn-steps a[aria-current="true"]::before, .pn-steps a[aria-current="true"]::after,
.pn-steps a[aria-current="step"]::before, .pn-steps a[aria-current="step"]::after,
.pn-foot__list a:hover::before, .pn-foot__list a:hover::after,
.pn-foot__list a:focus-visible::before, .pn-foot__list a:focus-visible::after,
.pn-foot__base a:hover::before, .pn-foot__base a:hover::after,
.pn-foot__base a:focus-visible::before, .pn-foot__base a:focus-visible::after { opacity: 1; }
/* The current step is marked by its brackets, never by an underline. */
.pn-steps a[aria-current="true"], .pn-steps a[aria-current="step"] {
  font-weight: var(--sa-weight-medium); text-decoration: none;
}

/* Choice cells sat on different baselines when one label wrapped and the others did not. */
.pn-choices .sa-check { align-items: center; }
.pn-choices > * { align-self: stretch; }

/* The masthead tail was evenly spaced, so the account name read as another control.
   The search control keeps the group's air; the name and sign out sit closer together. */
.pn-nav__end { gap: var(--sa-space-lg); }
.pn-nav__who { margin-inline-start: var(--sa-space-xs); opacity: .75; }
.pn-nav__end .sa-tab { margin-inline-start: calc(var(--sa-space-sm) * -1); }

/* ---------------------------------------------------------------- the ink footer */
.pn-foot { border-block-start: 0; }
.pn-foot__grid { padding-block: var(--sa-space-3xl) var(--sa-space-xl); }
.pn-foot__base { border-block-start-color: var(--sa-line); }

/* The design system underlines .sa-link on hover, which outranks a plain `a:hover` rule.
   Brackets are the only hover state in this product, and .sa-link already draws them. */
.sa-link:hover, .sa-link:focus-visible,
.pn-foot__list a:hover, .pn-foot__list a:focus-visible,
.pn-steps a:hover, .pn-steps a:focus-visible,
.sa-tab:hover, .sa-tab:focus-visible { text-decoration: none !important; }

/* The mark is an SVG now, so it scales rather than blurring. */
.pn-nav__logo { block-size: 22px; inline-size: auto; }
.pn-foot__mark { block-size: 22px; inline-size: auto; }

/* The legal line sits alone on the closing rule. */
.pn-foot__base { justify-content: flex-start; }

/* ------------------------------------------------- footer link alignment
   The hover brackets are pseudo-elements. At opacity 0 they still take up space, which
   pushed every link right by the width of "[ " and left the column titles out of line
   with their own items. Hanging them outside the box fixes the alignment: the text keeps
   one left edge whether the brackets show or not. */
.pn-foot__list a,
.pn-steps a { position: relative; display: inline-block; }

.pn-foot__list a::before, .pn-steps a::before {
  position: absolute; inset-inline-end: 100%; padding-inline-end: 0.25em;
}
.pn-foot__list a::after, .pn-steps a::after {
  position: absolute; inset-inline-start: 100%; padding-inline-start: 0.25em;
}

/* Air between a column title and its first item. */
.pn-foot__grid .sa-eyebrow { display: block; margin-block-end: var(--sa-space-md); }
.pn-foot__list { gap: var(--sa-space-sm); }