/* Copyright Nige Ltd. Author: Nigel Hamilton. */
/* =========================================================================
   Paydance CSS
   GDS-grade clarity (generous type, restrained colour, real focus states)
   meeting the Paydance brand kit (Linear/Notion/Stripe softness: whitespace,
   rounded corners, subtle shadows, gentle transitions).

   Three-party colour system, aligned to the brand palette:
     purple  = Paydance / shared timeline / orchestration   (--paydance-indigo)
     blue    = tenant / action requested / awaiting          (--paydance-blue)
     green   = counterparty / approved / paid / progressing  (--paydance-green)
     ink     = primary text                                  (--paydance-ink)
   ========================================================================= */

/* --------- Tokens ------------------------------------------------------- */
/* The design-token core (palette, type scale, spacing, radii, elevation,
   responsive type bump, dark-mode token values) lives in its own file so a
   new page or surface can pull it in standalone. Keep token *values* there;
   component-level dark tweaks stay below. */
@import url("paydance-tokens.css");

/* --------- Reset / base ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 600;
  line-height: var(--lh-head);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--s-4) 0; }

a {
  color: var(--party-tenant-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

/* Focus — Paydance recipe */
*:focus { outline: none; }
*:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg-paper);
}
a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink-strong);
}

/* Skip link */
.pd-skip {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--ink-strong);
  color: var(--bg-card);
  padding: var(--s-3) var(--s-4);
}
.pd-skip:focus {
  left: var(--s-3);
  top: var(--s-3);
  z-index: 1000;
}

/* --------- Shell / layout ---------------------------------------------- */

.pd-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pd-shell__main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
}

@media (min-width: 720px) {
  .pd-shell__main { padding: var(--s-6) var(--s-5); }
}

.pd-shell__footer {
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}

/* --------- Tenant header ---------------------------------------------- */

.pd-tenant-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4);
  /* A thin tenant-accent bar at the very top of the chrome. Falls back to the
     Paydance indigo (--tenant-accent is always set by the staff layout). This
     is the ONLY place the accent touches the header frame — the timeline,
     dance cards, and status palette keep the fixed three-party colours. */
  border-top: 3px solid var(--tenant-accent, var(--paydance-indigo));
}

/* The org mark: the tenant's favicon, ringed in their accent. Chrome only. */
.pd-tenant-mark {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px var(--tenant-accent, var(--paydance-indigo));
  object-fit: contain;
}

.pd-tenant-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.pd-tenant-header__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--ink-strong);
  font-weight: 600;
  text-decoration: none;
}

.pd-tenant-avatar {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--party-tenant-soft);
  color: var(--party-tenant-strong);
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

.pd-party-avatar {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--party-counter-soft);
  color: var(--party-counter-strong);
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

.pd-tenant-header__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-meta);
  color: var(--ink-mute);
}

.pd-role-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  background: var(--party-tenant-soft);
  color: var(--party-tenant-strong);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
}

/* --------- Account menu (staff header) -------------------------------- */
/* One accessible dropdown replaces the row of header links. Native <details>
   does the open/close; a tiny script (usermenu.js) adds outside-click + Esc. */

.pd-usermenu {
  position: relative;
  margin-left: auto;
}

.pd-usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  background: var(--party-tenant-soft);
  color: var(--party-tenant-strong);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.pd-usermenu__trigger::-webkit-details-marker { display: none; }
.pd-usermenu__trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pd-usermenu__chevron {
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pd-usermenu__chevron { transition: transform var(--ease); }
}
.pd-usermenu[open] .pd-usermenu__chevron { transform: rotate(180deg); }

.pd-usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: var(--s-2);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-usermenu__panel a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-meta);
  white-space: nowrap;
}
.pd-usermenu__panel a:hover,
.pd-usermenu__panel a:focus {
  background: var(--party-tenant-soft);
  color: var(--party-tenant-strong);
}

.pd-usermenu__label {
  padding: var(--s-1) var(--s-3);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pd-usermenu__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-2) 0;
}

/* --------- Page header ------------------------------------------------ */

.pd-page-header {
  margin-bottom: var(--s-6);
}

.pd-page-header__back {
  display: inline-block;
  font-size: var(--t-meta);
  margin-bottom: var(--s-3);
}

.pd-page-header__title {
  margin: 0;
}

.pd-page-header__meta {
  margin-top: var(--s-2);
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

/* --------- Breadcrumbs ---------------------------------------------- */
.pd-breadcrumbs { margin-bottom: var(--s-5); }
.pd-breadcrumbs__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin: 0; padding: 0; list-style: none;
  font-size: var(--t-meta);
}
.pd-breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; }
.pd-breadcrumbs__item + .pd-breadcrumbs__item::before {
  content: "\203A";            /* › sharp chevron */
  margin-right: var(--s-2);
  color: var(--rule-strong);
  font-weight: 600;
}
.pd-breadcrumbs__link {
  color: var(--ink-mute); text-decoration: none;
  white-space: nowrap; border-radius: 4px;
  transition: color var(--ease);
}
.pd-breadcrumbs__link:hover { color: var(--party-paydance); text-decoration: underline; text-underline-offset: 3px; }
.pd-breadcrumbs__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pd-breadcrumbs__current {
  color: var(--ink-strong); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch;
}
@media (max-width: 540px) { .pd-breadcrumbs__current { max-width: 22ch; } }

/* --------- Page section ---------------------------------------------- */

.pd-page-section {
  margin-bottom: var(--s-7);
}

.pd-page-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.pd-page-section__title {
  font-size: var(--t-h3);
  font-weight: 600;
  margin: 0;
}

.pd-page-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--ink-strong);
  color: var(--bg-card);
  font-size: 13px;
  font-weight: 700;
}

.pd-page-section__see-all {
  margin-top: var(--s-3);
  display: inline-block;
}

/* --------- Actor chip & timeline dots --------------------------------- */

.pd-actor-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-meta);
  color: var(--ink);
}

.pd-actor-chip::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: var(--r-pill);
  background: var(--ink-mute);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.pd-actor-chip--tenant::before   { background: var(--party-tenant); }
.pd-actor-chip--party::before    { background: var(--party-counter); }
.pd-actor-chip--paydance::before { background: var(--party-paydance); }
.pd-actor-chip--system::before   { background: var(--party-paydance); opacity: 0.5; }

/* --------- Status pill ----------------------------------------------- */

.pd-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  border: 2px solid currentColor;
  background: var(--bg-card);
}

.pd-status--checking,
.pd-status--ready,
.pd-status--approved {
  color: var(--party-tenant-strong);
}

.pd-status--waiting,
.pd-status--query {
  color: var(--party-counter-strong);
}

.pd-status--paid,
.pd-status--closed {
  color: var(--party-counter-strong);
  background: var(--party-counter-soft);
}

.pd-status--paydance {
  color: var(--party-paydance-strong);
}

/* --------- Owner line ------------------------------------------------ */

.pd-owner-line {
  font-size: var(--t-meta);
  color: var(--ink-mute);
}

/* --------- Queue lane / dance card ----------------------------------- */

.pd-queue-lane__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-dance-card {
  display: block;
  position: relative;                /* anchor for the stretched title link */
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: border-left-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.pd-dance-card:hover {
  border-left-color: var(--party-tenant);
  box-shadow: var(--shadow-lift);
}

/* Stretched-link pattern: the dance title is the primary link, and its
   ::after overlay (z-index:0) covers the whole card — the card is clickable
   to the dance with no nested <a>. Any real link inside the card (the
   supplier name, future links) sits above the overlay at z-index:1 and stays
   independently clickable. */
.pd-dance-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
}
.pd-dance-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pd-dance-card__title:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.pd-dance-card__supplier,
.pd-dance-card__supplier-text,
.pd-dance-card__period,
.pd-dance-card .pd-status,
.pd-dance-card__arrow { position: relative; z-index: 1; }
.pd-dance-card__supplier {
  color: var(--party-tenant-strong);
  text-decoration: none;
}
.pd-dance-card__supplier:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-dance-card__supplier:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.pd-dance-card__meta {
  margin: var(--s-2) 0 0;
  font-size: var(--t-meta);
  color: var(--ink-mute);
}
.pd-dance-card__period { color: var(--ink-mute); }

.pd-dance-card--needs-checking { border-left-color: var(--party-tenant); }
.pd-dance-card--ready-to-pay   { border-left-color: var(--party-tenant); }
.pd-dance-card--waiting-party  { border-left-color: var(--party-counter); }
.pd-dance-card--paid           { border-left-color: var(--party-counter); }

.pd-dance-card__top {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pd-dance-card__party {
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--ink-strong);
}

.pd-dance-card__ref {
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

.pd-dance-card__amount {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-strong);
  font-size: var(--t-h3);
}

.pd-dance-card__bottom {
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* --------- Dance detail header --------------------------------------- */

.pd-dance-header {
  margin-bottom: var(--s-6);
}

.pd-dance-header__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.pd-dance-header__title h1 { margin: 0; }

.pd-dance-header__amount {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--t-h1);
  color: var(--ink-strong);
  font-weight: 600;
}

/* --------- NOW card -------------------------------------------------- */

.pd-now-card {
  background: var(--party-tenant-soft);
  border: 1px solid var(--party-tenant);
  border-radius: var(--r-card);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
  box-shadow: var(--shadow-card);
}

.pd-now-card--party {
  background: var(--party-counter-soft);
  border-color: var(--party-counter);
}

.pd-now-card--paydance {
  background: var(--party-paydance-soft);
  border-color: var(--party-paydance);
}

.pd-now-card__prev {
  font-size: var(--t-meta);
  color: var(--ink-mute);
  margin: 0 0 var(--s-2) 0;
}

.pd-now-card__prev span {
  color: var(--ink);
}

.pd-now-card__label {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--party-tenant-strong);
  margin-bottom: var(--s-2);
}

.pd-now-card--party .pd-now-card__label    { color: var(--party-counter-strong); }
.pd-now-card--paydance .pd-now-card__label { color: var(--party-paydance-strong); }

.pd-now-card__heading {
  font-size: var(--t-h2);
  color: var(--ink-strong);
  margin: 0 0 var(--s-2) 0;
}

.pd-now-card__detail {
  margin: 0 0 var(--s-4) 0;
  color: var(--ink);
}

.pd-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.pd-action-bar__secondary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-mute);
}

.pd-action-bar__sep {
  color: var(--ink-mute);
}

/* NOW card — inline action / query-with-textarea variants */
.pd-now-card__action { display: inline-flex; margin: 0; }
.pd-now-card__query  { display: inline-block; }
.pd-now-card__query > summary { list-style: none; cursor: pointer; }
.pd-now-card__query > summary::-webkit-details-marker { display: none; }
.pd-now-card__query-form {
  margin-top: var(--s-4);
  max-width: none;
}

/* --------- Buttons --------------------------------------------------- */

.pd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  min-height: 56px;
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--r-control);
  cursor: pointer;
  text-decoration: none;
  background: var(--party-tenant);
  color: #fff;
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}

.pd-button:hover { background: var(--party-tenant-strong); }
.pd-button:active { transform: translateY(1px); }

.pd-button--primary { /* default */ }

.pd-button--paid {
  background: var(--party-counter);
}
.pd-button--paid:hover { background: var(--party-counter-strong); }

.pd-button--secondary {
  background: transparent;
  color: var(--party-tenant-strong);
  border-color: var(--party-tenant-strong);
}
.pd-button--secondary:hover {
  background: var(--party-tenant-soft);
}

.pd-button--tertiary {
  background: transparent;
  color: var(--party-tenant-strong);
  border-color: transparent;
  text-decoration: underline;
  min-height: auto;
  padding: var(--s-2) 0;
}
.pd-button--tertiary:hover {
  background: transparent;
  color: var(--party-paydance);
  text-decoration-thickness: 2px;
}

@media (max-width: 719px) {
  .pd-button--primary, .pd-button--paid {
    width: 100%;
  }
}

/* --------- Evidence list -------------------------------------------- */

.pd-evidence-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .pd-evidence-list {
    grid-template-columns: 1fr 1fr;
  }
}

.pd-evidence-item {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pd-evidence-item__name {
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
}

.pd-evidence-item__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

.pd-evidence-item--superseded { opacity: 0.7; }
.pd-evidence-item--superseded .pd-evidence-item__name { color: var(--ink-mute); }

/* --------- List pattern --------------------------------------------- */
/* A flat primary-vs-meta list — used for pending invitations and any
   place we want a quiet row of "thing · context" pairs. */

.pd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.pd-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}

.pd-list__primary {
  font-weight: 600;
  color: var(--ink-strong);
}

.pd-list__meta {
  font-size: var(--t-meta);
  color: var(--ink-mute);
}

/* --------- Notes ---------------------------------------------------- */

.pd-note-list {
  background: var(--bg-card);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-card);
  padding: var(--s-4);
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

.pd-note-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.pd-note-item:last-child { border-bottom: 0; }

/* --------- Dance detail surface ------------------------------------- */
/* Spacing helpers used inside the staff dance-detail collapsibles —
   keeps the upload form, notes list and "add note" link breathing
   against the surrounding evidence cards. */

.pd-dance__upload    { margin-top: var(--s-5); }
.pd-dance__notes     { list-style: none; margin: 0; padding: var(--s-4); }
.pd-dance__notes-add { margin-top: var(--s-4); }

/* --------- Forms ---------------------------------------------------- */

.pd-form { max-width: 640px; }

.pd-field {
  margin-bottom: var(--s-5);
}

.pd-label {
  display: block;
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--ink-strong);
  margin-bottom: var(--s-2);
}

.pd-help {
  display: block;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  margin-top: var(--s-2);
}

.pd-error {
  display: block;
  color: var(--error);
  font-size: var(--t-meta);
  margin-top: var(--s-2);
  font-weight: 600;
}

/* Success-shaped sister to .pd-error — a calm green banner. */
.pd-notice {
  background: var(--party-counter-soft);
  border: 1px solid var(--party-counter);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  color: var(--ink-strong);
  margin-bottom: var(--s-5);
}

/* --------- Confirmation flash --------------------------------------- */
/* The in-app "dance step in miniature": after a dance action, a calm banner
   at the top of the page content saying WHAT JUST HAPPENED (filled actor dot +
   bold did line) and WHAT HAPPENS NEXT (hollow ring + muted next line). It is
   the UI sibling of the email "dance excerpt". A left accent rule carries the
   actor colour. Token-driven, so dark mode just works. Not a corner toast: it
   stays until dismissed or the next navigation. */
.pd-flash {
  --pd-flash-accent: var(--party-paydance);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pd-flash-accent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  position: relative;
}

/* Actor colour drives the left accent + the filled "did" dot. */
.pd-flash--tenant     { --pd-flash-accent: var(--party-tenant); }
.pd-flash--party      { --pd-flash-accent: var(--party-counter); }
.pd-flash--paydance   { --pd-flash-accent: var(--party-paydance); }
.pd-flash--bookkeeper { --pd-flash-accent: var(--waiting-amber); }
/* Attention/validation flashes (a nudge, not a blocker) take the amber
   "needs attention" accent + dot. Amber = waiting/needs-attention; red is
   reserved for serious blockers, which these are not. */
.pd-flash--attention  { --pd-flash-accent: var(--waiting-amber); }

/* The two beats stack: row 1 the filled dot + did text, row 2 the hollow ring
   + next text. The left accent rule is the visual spine connecting them. */
.pd-flash__beats {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--s-5);   /* keep text clear of the dismiss x */
}

.pd-flash__did,
.pd-flash__next,
.pd-flash__action {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
}

.pd-flash__next   { margin-top: var(--s-1); }
.pd-flash__action { margin-top: var(--s-2); }

/* Beat 1 — a 12px filled dot in the actor colour, bold ink "did" text. */
.pd-flash__did-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pd-flash-accent);
  align-self: center;
}
.pd-flash__did-text {
  font-weight: 700;
  color: var(--ink-strong);
  font-size: var(--t-body);
}

/* Beat 2 — a 10px hollow ring, muted "next" text. */
.pd-flash__next-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ink-mute);
  align-self: center;
  /* nudge the ring to line up under the larger did dot */
  margin-left: 1px;
}
.pd-flash__next-text {
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

/* A small follow-up link, when an action is supplied. */
.pd-flash__action-link {
  font-size: var(--t-meta);
  color: var(--party-paydance-strong);
}

/* The dismiss x — quiet, top-right, keyboard-focusable. */
.pd-flash__dismiss {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  color: var(--ink-mute);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: var(--s-1);
}
.pd-flash__dismiss:hover { color: var(--ink-strong); }
.pd-flash__dismiss:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Gentle fade/slide-down on mount; reduced-motion users get none. */
@media (prefers-reduced-motion: no-preference) {
  .pd-flash {
    animation: pd-flash-in 240ms var(--ease) both;
  }
  @keyframes pd-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.pd-input, .pd-textarea, .pd-money-input, .pd-date-input {
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-strong);
  background: var(--bg-card);
  border: 2px solid var(--ink-strong);
  border-radius: var(--r-control);
}

.pd-textarea { min-height: 120px; resize: vertical; }

/* Native <select> shares .pd-input chrome but needs the OS appearance
   stripped and our own chevron painted in. */
select.pd-input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--ink-strong) 50%),
    linear-gradient(135deg, var(--ink-strong) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: calc(var(--s-4) + 24px);
}

.pd-form__actions {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* Short calm intro line above a form section (e.g. supplier payment details). */
.pd-section-intro { color: var(--ink-mute); font-size: var(--t-meta); margin: 0 0 var(--s-4); line-height: var(--lh-body); }

/* Supplier payment-details form: two fields side by side on wider screens */
.pd-field-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 480px) { .pd-field-row { grid-template-columns: 1fr 1fr; } }

/* --------- Radio / Checkbox row ------------------------------------- */
/* Inline label-wraps-input form primitives — used for radio groups
   (inbox triage) and single checkbox affordances (new-dance form). */

.pd-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  font-size: var(--t-body);
}

.pd-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-strong);
  font-weight: 600;
}

/* --------- Inbound-address chip ------------------------------------- */
/* The monospaced forwarding-address chip shown on onboarding-done and
   any other "here's the email address to point your invoices at" surface. */

.pd-inbound-address {
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-body);
  color: var(--ink-strong);
  word-break: break-all;
}

.pd-inbound-address__label {
  display: block;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-2);
}

/* --------- Empty state --------------------------------------------- */

.pd-empty {
  background: var(--bg-card);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-card);
  padding: var(--s-5);
  color: var(--ink-mute);
  font-size: var(--t-body);
  text-align: center;
}

/* --------- Billing card -------------------------------------------- */
/* The staff billing surface. Chrome only — never references the
   timeline/dance/status palette. */

.pd-billing-card {
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-card);
  padding: var(--s-5);
}

.pd-billing-card__price {
  font-size: var(--t-h3);
  color: var(--ink-strong);
  margin: 0 0 var(--s-2);
}

.pd-billing-card__plan {
  color: var(--ink-mute);
  margin: 0 0 var(--s-5);
}

.pd-billing-facts {
  margin: 0 0 var(--s-5);
  padding: 0;
}

.pd-billing-facts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}
.pd-billing-facts__row:first-child { border-top: 0; }

.pd-billing-facts dt { color: var(--ink-mute); margin: 0; }
.pd-billing-facts dd { color: var(--ink-strong); margin: 0; font-weight: 600; }

.pd-billing-card__note {
  margin: var(--s-3) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

/* --------- Billing nudge banner ------------------------------------ */
/* Soft, dismissible-style nudge in the staff chrome above <main>. Blue
   "action requested" tone — never the timeline palette. Never blocks. */

.pd-billing-nudge {
  background: var(--party-tenant-soft);
  border-bottom: 1px solid var(--party-tenant);
  color: var(--ink-strong);
}

.pd-billing-nudge__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-meta);
}

.pd-billing-nudge__text { margin: 0; }

.pd-billing-nudge__action {
  flex: none;
  color: var(--party-tenant-strong);
  font-weight: 600;
  white-space: nowrap;
}

/* --------- Uncertainty banner -------------------------------------- */

.pd-uncertainty-banner {
  background: var(--party-paydance-soft);
  border: 1px solid var(--party-paydance);
  border-radius: var(--r-card);
  padding: var(--s-4);
  color: var(--ink-strong);
  margin-bottom: var(--s-4);
}

.pd-uncertainty-banner__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--party-paydance-strong);
  letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}

/* --------- Party-facing -------------------------------------------- */

.pd-party-shell .pd-shell__main {
  max-width: 640px;
}

.pd-party-status-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-card);
}

.pd-party-status-card__greeting {
  font-size: var(--t-h3);
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.pd-party-status-card__headline {
  font-size: var(--t-state);
  color: var(--ink-strong);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--s-5) 0;
}

.pd-party-status-card__status-label {
  font-size: var(--t-meta);
  color: var(--ink-mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pd-party-status-card__status-value {
  font-size: var(--t-h2);
  color: var(--ink-strong);
  font-weight: 600;
  margin-bottom: var(--s-5);
}

.pd-party-evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pd-party-evidence li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--ink);
}

.pd-party-evidence li:last-child { border-bottom: 0; }

/* --------- Receipt-style values (paid state) ----------------------- */

.pd-receipt {
  border-top: 2px solid var(--ink-strong);
  border-bottom: 2px solid var(--ink-strong);
  padding: var(--s-4) 0;
  margin: var(--s-5) 0;
}

.pd-receipt__row {
  display: flex;
  justify-content: space-between;
  padding: var(--s-2) 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
}

.pd-receipt__label { color: var(--ink-mute); }
.pd-receipt__value { color: var(--ink-strong); font-weight: 600; }

/* --------- Collapsible section (<details>/<summary>) --------------- */

.pd-collapsible {
  margin-bottom: var(--s-6);
  border-bottom: 2px solid var(--ink-strong);
}

.pd-collapsible__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-strong);
}

.pd-collapsible__summary::-webkit-details-marker { display: none; }

.pd-collapsible__summary::before {
  content: "▸";
  display: inline-block;
  color: var(--ink-mute);
  font-size: 0.8em;
  transition: transform 120ms ease;
}
.pd-collapsible[open] > .pd-collapsible__summary::before { transform: rotate(90deg); }

.pd-collapsible__hint {
  font-weight: 400;
  font-size: var(--t-meta);
  color: var(--ink-mute);
}

.pd-collapsible__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--ink-strong);
  color: var(--bg-card);
  font-size: 13px;
  font-weight: 700;
}

.pd-collapsible__body {
  padding: var(--s-3) 0 var(--s-5) 0;
}

/* --------- Growth card (paid/closed party state only — §16) -------- */

.pd-growth-card {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--party-paydance-soft);
  border: 1px solid var(--party-paydance);
  border-radius: var(--r-card);
}

.pd-growth-card__line {
  color: var(--ink-strong);
  margin-bottom: var(--s-4);
}

.pd-growth-card__prompt {
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.pd-growth-card__cta {
  margin-bottom: var(--s-5);
}

.pd-growth-card .pd-button--secondary {
  border-color: var(--party-paydance-strong);
  color: var(--party-paydance-strong);
}
.pd-growth-card .pd-button--secondary:hover {
  background: #fff;
}

.pd-growth-card__share {
  font-size: var(--t-meta);
  color: var(--ink-mute);
}
.pd-growth-card__share a { color: var(--party-paydance-strong); }

/* --------- Sign-in shell ------------------------------------------- */

.pd-signin-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pd-signin {
  width: 100%;
  max-width: 420px;
  margin: var(--s-8) auto var(--s-7);
  padding: 0 var(--s-4);
  flex: 1 0 auto;
}

.pd-signin__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink-strong);
  margin-bottom: var(--s-6);
  line-height: 1;
}
.pd-signin__brand:hover { color: var(--party-paydance); }
.pd-signin__brand:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--r-control);
}

.pd-signin__brand-mark {
  width: 96px;
  height: 96px;
  display: block;
}

.pd-signin__brand-wordmark {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}

.pd-signin h1 { margin-bottom: var(--s-3); }
.pd-signin p  { color: var(--ink); }
.pd-signin .pd-form { margin-top: var(--s-5); max-width: none; }
.pd-signin .pd-button--primary { width: 100%; margin-top: var(--s-2); }

/* --------- Passkeys (sign-in CTA + security page) ------------------ */

/* The passkey call-to-action sits in the signin card and spans the column,
   matching the full-width primary button below it. */
.pd-passkey-cta {
  width: 100%;
  margin-top: var(--s-5);
}

/* "or use your email" divider between the passkey CTA and the email form. */
.pd-auth__or {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-small, 14px);
}
.pd-auth__or::before,
.pd-auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line, var(--ink-mute));
  opacity: 0.4;
}

.pd-passkey-error {
  margin-top: var(--s-3);
  color: var(--error);
  font-size: var(--t-small, 14px);
}
.pd-passkey-note {
  margin-top: var(--s-3);
  color: var(--ink-mute);
  font-size: var(--t-small, 14px);
}

.pd-security h1 { margin-bottom: var(--s-3); }

.pd-passkey-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-passkey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--line, var(--ink-mute));
  border-radius: var(--r-control);
}
.pd-passkey__detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.pd-passkey__label {
  font-weight: 600;
  color: var(--ink-strong);
}
.pd-passkey__meta {
  font-size: var(--t-small, 14px);
  color: var(--ink-mute);
}
/* "Remove" is a quiet, destructive action — tertiary button tinted error. */
.pd-passkey__remove {
  color: var(--error);
  min-height: auto;
}
.pd-passkey__remove:hover {
  color: var(--error);
}

.pd-passkey-empty {
  margin-top: var(--s-6);
  color: var(--ink-mute);
}

.pd-security__back {
  margin-top: var(--s-6);
}

/* --------- Visually hidden ----------------------------------------- */

.pd-vh {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --------- Logo / brand marks -------------------------------------- */

.pd-logo-full   { display: block; height: 28px; width: auto; }
.pd-logo-device { display: inline-block; height: 24px; width: 24px; vertical-align: middle; }
.pd-shell__footer .pd-logo-device { height: 16px; width: 16px; opacity: 0.7; margin-right: 6px; }

/* --------- Inbox ---------------------------------------------------- */
/* Two stacked sections — "New suppliers" (unmatched_sender, amber accent to
   read as needs-attention) and "Needs review" (a known sender we couldn't
   place). Each item is a calm card; the unmatched card lays its two resolve
   paths side by side on wide screens, stacked below. */

.pd-inbox-section { margin-bottom: var(--s-6); }

.pd-inbox-section__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  margin: 0 0 var(--s-1);
  color: var(--ink-strong);
}
.pd-inbox-section__intro {
  margin: 0 0 var(--s-4);
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

.pd-inbox-item {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--party-paydance);
  border-radius: var(--r-card);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-card);
}
.pd-inbox-item--unmatched { border-left-color: var(--waiting-amber); }

.pd-inbox-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.pd-inbox-item__from { color: var(--ink-strong); }
.pd-inbox-item__time {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  white-space: nowrap;
}
.pd-inbox-item__subject { margin: var(--s-1) 0 0; color: var(--ink); }
.pd-inbox-item__summary {
  margin: var(--s-2) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
}

/* The unmatched card's two resolve paths: single column, then a two-column
   grid with a divider between them from 720px up. */
.pd-inbox-item__actions {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 720px) {
  .pd-inbox-item__actions:has(.pd-inbox-item__path + .pd-inbox-item__path) {
    grid-template-columns: 1fr 1fr;
  }
  .pd-inbox-item__path + .pd-inbox-item__path {
    border-left: 1px solid var(--rule);
    padding-left: var(--s-5);
  }
}

.pd-inbox-item__path-title {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-3);
}
.pd-inbox-item__path .pd-button { width: 100%; }
.pd-inbox-item__path .pd-field { margin-bottom: var(--s-3); }

.pd-inbox-item__ignore { margin-top: var(--s-3); text-align: right; }

/* The needs_review card keeps the simple inline radio form. */
.pd-inbox-item__form {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.pd-inbox-item__form .pd-button { margin-top: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .pd-inbox-item, .pd-inbox-item .pd-button { transition: none; }
}

/* --------- Dark mode (initial pass — kept simple; refine later) ----- */

@media (prefers-color-scheme: dark) {
  /* dark-mode token *values* live in paydance-tokens.css; this block only
     carries the handful of component-level tweaks that go with them. */

  /* the focus ring's paper-coloured inset must follow the dark paper */
  *:focus-visible { box-shadow: 0 0 0 2px var(--bg-paper); }

  /* keep filled-button text legible */
  .pd-button { color: #0E0E1A; }
  .pd-button--secondary, .pd-button--tertiary { color: var(--party-tenant-strong); }

  /* status pill on its own (now dark-tinted) background */
  .pd-status--paid, .pd-status--closed { background: var(--party-counter-soft); }

  /* the brand device mark sits fine on dark; the full logo SVG is colour, keep as-is */
}

/* =========================================================================
   Onboarding shell — scoped polish for the 4-page /start flow.
   Honors the brand voice (calm-premium-practical) and the UX guide
   principles 9 (mobile-first) + 18 (rounded cards, soft shadows, generous
   spacing, strong but calm primary buttons). Reuses existing brand tokens;
   only resizes/restyles inputs and buttons inside .pd-onboarding.
   ========================================================================= */

.pd-onboarding {
  max-width: 540px;
  margin: 0 auto;
  padding: clamp(32px, 6vh, 80px) 0;
}

.pd-ob-step {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}

/* Big chunky inputs — scoped so other forms unchanged */
.pd-onboarding .pd-input {
  font-size: 22px;
  font-weight: 500;
  padding: 18px 20px;
  line-height: 1.3;
  border-width: 2px;
  border-radius: var(--r-control);
}
@media (min-width: 720px) {
  .pd-onboarding .pd-input { font-size: 26px; padding: 20px 22px; }
}

/* The passcode moment — chunkier, letter-spaced, centered */
.pd-onboarding .pd-input--code {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
}
@media (min-width: 720px) {
  .pd-onboarding .pd-input--code { font-size: 40px; }
}

/* Large pressable buttons with clear reactive states */
.pd-onboarding .pd-button {
  font-size: 18px;
  font-weight: 600;
  padding: 18px 32px;
  min-height: 56px;
  min-width: 220px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
@media (min-width: 720px) {
  .pd-onboarding .pd-button {
    font-size: 20px;
    padding: 20px 36px;
    min-height: 64px;
  }
}
.pd-onboarding .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
.pd-onboarding .pd-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.pd-onboarding .pd-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(8, 8, 50, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  .pd-onboarding .pd-button,
  .pd-onboarding .pd-input { transition: none; }
  .pd-onboarding .pd-button:hover { transform: none; }
}

/* Inbound-address plaque on /start/done */
.pd-onboarding .pd-ob-plaque {
  background: var(--bg-card);
  border: 2px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0 var(--s-5);
}
.pd-ob-plaque__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-2);
}
.pd-ob-plaque__value {
  font-family: var(--font-ui);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  color: var(--ink-strong);
  word-break: break-all;
  line-height: 1.3;
  margin: 0;
}

/* Quiet italic note (only on /start page 1) */
.pd-ob-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body);
  color: var(--ink-mute);
  margin: var(--s-7) 0 0;
}

/* Trailing paragraph above the dashboard button on /start/done */
.pd-ob-trailing {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-6);
}

/* =========================================================================
   Dashboard — scoped polish for /o/:org/staff/ (Staff#index).
   Reuses brand tokens; adds richer card chrome, lane subheaders,
   reactive hover, and an empty-state block that surfaces the inbound
   address. Scoped under .pd-dashboard so other staff pages that share
   pd-dance-card / pd-page-section are untouched.
   ========================================================================= */

.pd-dashboard { display: flex; flex-direction: column; gap: var(--s-7); }

.pd-dashboard .pd-page-header { margin-bottom: var(--s-2); }

.pd-dashboard .pd-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.pd-dashboard .pd-action-bar .pd-button {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 22px;
  min-height: 48px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.06), 0 4px 12px rgba(8, 8, 50, 0.08);
  transition: transform 80ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.pd-dashboard .pd-action-bar .pd-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(8, 8, 50, 0.10), 0 10px 22px rgba(8, 8, 50, 0.14);
}
.pd-dashboard .pd-action-bar .pd-button:active { transform: translateY(0); }
.pd-dashboard .pd-action-bar .pd-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Lane headers — title + blurb + count */
.pd-dashboard .pd-dash-lane__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.pd-dashboard .pd-dash-lane__title-block { display: flex; flex-direction: column; gap: var(--s-1); }
.pd-dashboard .pd-page-section__title { margin: 0; }
.pd-dashboard .pd-dash-lane__blurb {
  font-size: var(--t-meta);
  color: var(--ink-mute);
  margin: 0;
  max-width: 56ch;
  line-height: var(--lh-body);
}
.pd-dashboard .pd-dash-lane__count {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  min-width: 32px;
  text-align: center;
  flex: 0 0 auto;
}

/* Lane list spacing */
.pd-dashboard .pd-dash-lane__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Card — chunkier, reactive, with a next-step line */
.pd-dashboard .pd-dance-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(8, 8, 50, 0.04), 0 3px 10px rgba(8, 8, 50, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 80ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.pd-dashboard .pd-dance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(8, 8, 50, 0.10), 0 12px 28px rgba(8, 8, 50, 0.14);
  border-color: var(--rule-strong);
}
.pd-dashboard .pd-dance-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-dashboard .pd-dance-card { transition: none; }
  .pd-dashboard .pd-dance-card:hover { transform: none; }
}

.pd-dashboard .pd-dance-card__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}
.pd-dashboard .pd-dance-card__title {
  grid-column: 1;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.2;
}
.pd-dashboard .pd-dance-card__meta {
  margin: var(--s-1) 0 0;
  font-size: var(--t-meta);
}
.pd-dashboard .pd-dance-card__amount {
  grid-column: 2;
  align-self: baseline;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}

.pd-dashboard .pd-dance-card__next {
  font-size: var(--t-meta);
  color: var(--ink);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.pd-dashboard .pd-dance-card__next-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: var(--s-2);
}

.pd-dashboard .pd-dance-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.pd-dashboard .pd-dance-card__arrow {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--ink-mute);
  margin-left: auto;
  transition: transform 160ms ease, color 160ms ease;
}
.pd-dashboard .pd-dance-card:hover .pd-dance-card__arrow {
  transform: translateX(3px);
  color: var(--party-paydance);
}

/* Waiting lanes — amber tint left rail */
.pd-dashboard .pd-dance-card--needs-checking { border-left: 4px solid var(--waiting-amber); }
.pd-dashboard .pd-dance-card--waiting-party  { border-left: 4px solid var(--waiting-amber); }
.pd-dashboard .pd-dance-card--ready-to-pay   { border-left: 4px solid var(--party-paydance); }
.pd-dashboard .pd-dance-card--paid           { border-left: 4px solid var(--party-counter); }

/* Status pill — amber for waiting/checking states */
.pd-dashboard .pd-status--checking,
.pd-dashboard .pd-status--waiting,
.pd-dashboard .pd-status--query {
  background: var(--waiting-amber-soft);
  color: var(--waiting-amber-strong);
}

/* Empty state */
.pd-dashboard .pd-dash-empty {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-7) var(--s-6);
  text-align: left;
  max-width: 640px;
}
.pd-dashboard .pd-dash-empty__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0 0 var(--s-3);
}
.pd-dashboard .pd-dash-empty__body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.pd-dashboard .pd-dash-empty__plaque {
  background: var(--bg-paper);
  border: 2px solid var(--rule);
  border-radius: var(--r-control);
  padding: var(--s-4) var(--s-5);
}
.pd-dashboard .pd-dash-empty__plaque-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-2);
}
.pd-dashboard .pd-dash-empty__plaque-value {
  font-family: var(--font-ui);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 600;
  color: var(--ink-strong);
  word-break: break-all;
  margin: 0;
}

/* Mobile — tighter spacing, stacked card grid */
@media (max-width: 600px) {
  .pd-dashboard .pd-dance-card { padding: var(--s-4) var(--s-5); }
  .pd-dashboard .pd-dance-card__title { font-size: 18px; }
  .pd-dashboard .pd-dance-card__amount { font-size: 20px; }
  .pd-dashboard .pd-dash-empty { padding: var(--s-6) var(--s-5); }
}

/* =========================================================================
   Supplier profile — /o/:org/staff/supplier/:ppid (Staff#supplier).
   Reuses the dashboard card + queue-lane chrome; adds an email link and a
   small template badge in the header. Scoped under .pd-supplier.
   ========================================================================= */

.pd-supplier .pd-page-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.pd-supplier__email {
  color: var(--party-tenant-strong);
  text-decoration: none;
}
.pd-supplier__email:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-supplier__email:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.pd-supplier__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--party-tenant);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--party-tenant-strong);
  background: var(--bg-card);
}
.pd-supplier__badge--none {
  border-color: var(--rule-strong);
  color: var(--ink-mute);
}

/* =========================================================================
   Staff member profile — /o/:org/staff/member/:user_id (Staff#member).
   Reuses the page header, page sections, role pills and form chrome. Adds
   a muted email link, a caption, and a row of role pills. Scoped to
   .pd-member.
   ========================================================================= */

.pd-member__email {
  color: var(--ink-mute);
  text-decoration: none;
}
.pd-member__email:hover { color: var(--party-tenant-strong); text-decoration: underline; text-underline-offset: 3px; }
.pd-member__email:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.pd-member__caption {
  margin: 0 0 var(--s-3);
  color: var(--ink-mute);
  font-size: var(--t-meta);
}
.pd-member__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pd-member__empty {
  margin: 0;
  color: var(--ink-mute);
}

/* =========================================================================
   Public homepage — scoped polish for templates/public/index.html.ep.
   Reuses brand tokens; adds a hero block, a simple Received → Checked →
   Approved → Paid spine, a value grid, and a closing CTA. All sizing
   scoped under .pd-home so other public pages (terms, privacy, how-it-
   works) are untouched.
   ========================================================================= */

.pd-home {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

/* Hero */
.pd-home-hero {
  padding: clamp(32px, 6vh, 80px) 0 var(--s-6);
  max-width: 760px;
}
.pd-home-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.pd-home-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  margin: 0 0 var(--s-5);
}
.pd-home-hero__sub {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s-6);
  max-width: 60ch;
}
.pd-home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.pd-home-hero__cta .pd-button {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 28px;
  min-height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.pd-home-hero__cta .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
.pd-home-hero__cta .pd-button:active { transform: translateY(0); }
.pd-home-hero__cta .pd-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-home-hero__cta .pd-button { transition: none; }
  .pd-home-hero__cta .pd-button:hover { transform: none; }
}

/* Spine — Received → Checked → Approved → Paid */
.pd-home-spine {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pd-home-spine__step {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  position: relative;
}
.pd-home-spine__step + .pd-home-spine__step::before {
  content: '→';
  display: inline-block;
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--party-paydance);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.pd-home-spine__step:nth-child(1) { border-left: 3px solid var(--party-tenant); }
.pd-home-spine__step:nth-child(2) { border-left: 3px solid var(--waiting-amber); }
.pd-home-spine__step:nth-child(3) { border-left: 3px solid var(--party-paydance); }
.pd-home-spine__step:nth-child(4) { border-left: 3px solid var(--party-counter); }

/* Values */
.pd-home-values {
  padding: var(--s-6) 0;
}
.pd-home-values__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0 0 var(--s-4);
  max-width: 24ch;
}
.pd-home-values__intro {
  font-size: var(--t-lead, 18px);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-7);
  max-width: 60ch;
}
.pd-home-values__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 720px) {
  .pd-home-values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}
@media (min-width: 1100px) {
  .pd-home-values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pd-home-value {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
  box-shadow: 0 1px 2px rgba(8, 8, 50, 0.04), 0 3px 10px rgba(8, 8, 50, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-home-value__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.25;
}
.pd-home-value__body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}

/* Closing band */
.pd-home-close {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.pd-home-close__promise {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.3;
  color: var(--ink-strong);
  margin: 0;
  max-width: 42ch;
}
.pd-home-close .pd-button {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 28px;
  min-height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.pd-home-close .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
.pd-home-close .pd-button:active { transform: translateY(0); }
.pd-home-close .pd-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-home-close .pd-button { transition: none; }
  .pd-home-close .pd-button:hover { transform: none; }
}

/* Mobile tightening */
@media (max-width: 600px) {
  .pd-home { gap: var(--s-7); }
  .pd-home-hero { padding-top: var(--s-6); }
  .pd-home-hero__cta { flex-direction: column; align-items: stretch; }
  .pd-home-hero__cta .pd-button { text-align: center; }
  .pd-home-value { padding: var(--s-4) var(--s-5); }
}

/* =========================================================================
   Dance detail — scoped polish for templates/staff/dance.html.ep.
   Reuses brand tokens; restructures the page around UX guide §12
   (header → status panel → documents → timeline → notes → actions) and
   surfaces the timeline as the centrepiece per §1. All sizing scoped
   under .pd-dance.
   ========================================================================= */

.pd-dance {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Header */
.pd-dance .pd-dance-header { padding-bottom: var(--s-4); }
.pd-dance .pd-page-header__back {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: var(--s-4);
}
.pd-dance .pd-page-header__back:hover { color: var(--party-paydance); }

.pd-dance .pd-dance-header__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.pd-dance .pd-dance-header__h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0;
}
.pd-dance .pd-dance-header__amount {
  font-family: var(--font-ui);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.pd-dance .pd-dance-header__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.pd-dance .pd-dance-header__ref {
  font-size: var(--t-meta);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pd-dance .pd-dance-header__status {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
}
/* Next-step card — chunkier, reactive */
.pd-dance .pd-now-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-6) var(--s-6);
  box-shadow: 0 1px 2px rgba(8, 8, 50, 0.04), 0 4px 14px rgba(8, 8, 50, 0.08);
}
.pd-dance .pd-now-card__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-3);
}
.pd-dance .pd-now-card__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  color: var(--ink-strong);
  margin: 0 0 var(--s-5);
}
.pd-dance .pd-now-card .pd-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.pd-dance .pd-now-card .pd-button {
  font-size: 17px;
  font-weight: 600;
  padding: 14px 24px;
  min-height: 52px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 14px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.pd-dance .pd-now-card .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 24px rgba(8, 8, 50, 0.16);
}
.pd-dance .pd-now-card .pd-button:active { transform: translateY(0); }
.pd-dance .pd-now-card .pd-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-dance .pd-now-card .pd-button { transition: none; }
  .pd-dance .pd-now-card .pd-button:hover { transform: none; }
}
.pd-dance .pd-now-card__query[open] summary { margin-bottom: var(--s-4); }
.pd-dance .pd-now-card__query-form { margin-top: var(--s-4); }

/* =========================================================================
   The Dance Card rail — a HORIZONTAL row of cards. Past cards (left, quiet)
   -> the Current Card (centre, dominant, where the action happens) -> Next
   cards (right, subdued). DOM order stays chronological past -> now -> next;
   the placement is layout. The glyph + the per-performer accent carry status;
   chrome stays calm. Token-driven so dark mode + the accent carry through.
   ========================================================================= */
.pd-dance .pd-dance__rail { min-width: 0; }

/* The scroll viewport. With JS off it is a plain horizontally-scrollable list;
   the arrows + position indicator are a progressive enhancement. */
.pd-rail-wrap { position: relative; }
.pd-rail {
  list-style: none;
  margin: 0;
  padding: var(--s-2) var(--s-1) var(--s-4);
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pd-rail:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-card); }

/* A card. The accent rides the top edge; the body is calm. */
.pd-rail-card {
  position: relative;
  flex: 0 0 auto;
  width: 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  scroll-snap-align: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-4) var(--s-5);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

/* The per-performer accent — calm, on the top edge + the glyph colour. */
.pd-rail-card--party      { border-top-color: var(--party-counter); }
.pd-rail-card--tenant     { border-top-color: var(--party-tenant); }
.pd-rail-card--paydance   { border-top-color: var(--party-paydance); }
.pd-rail-card--bookkeeper { border-top-color: var(--waiting-amber); }

/* The status glyph — a small marker that names the status in text too. */
.pd-rail-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-mute);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
}
.pd-rail-card--party      .pd-rail-card__glyph { color: var(--party-counter-strong); }
.pd-rail-card--tenant     .pd-rail-card__glyph { color: var(--party-tenant-strong); }
.pd-rail-card--paydance   .pd-rail-card__glyph { color: var(--party-paydance-strong); }
.pd-rail-card--bookkeeper .pd-rail-card__glyph { color: var(--waiting-amber-strong); }
.pd-rail-card__glyph--done    { background: var(--party-counter-soft); border-color: transparent; }
.pd-rail-card__glyph--queried { background: var(--waiting-amber-soft);  border-color: transparent; color: var(--waiting-amber-strong); }
.pd-rail-card__glyph--current { font-size: 18px; }

.pd-rail-card__title {
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--ink-strong);
  line-height: 1.3;
}
.pd-rail-card__title--link { color: inherit; text-decoration: none; }
.pd-rail-card__title--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-rail-card__title--link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.pd-rail-card__by { font-size: var(--t-meta); color: var(--ink-mute); }
.pd-rail-card__by a { color: var(--ink); text-decoration: none; }
.pd-rail-card__by a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-rail-card__by a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.pd-rail-card__explain { margin: 0; font-size: var(--t-meta); color: var(--ink); line-height: var(--lh-body); }
.pd-rail-card__explain--next { color: var(--ink-mute); }

.pd-rail-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-size: 13px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  padding-top: var(--s-2);
}

/* PAST — done, quiet. The card recedes; the glyph + accent still read. */
.pd-rail-card--past {
  background: var(--bg-paper);
  box-shadow: none;
}
.pd-rail-card--past .pd-rail-card__title { font-weight: 500; color: var(--ink); }

/* NEXT — pending, subdued. No actions. */
.pd-rail-card--next {
  background: var(--bg-paper);
  box-shadow: none;
  opacity: 0.92;
}
.pd-rail-card--next .pd-rail-card__title { font-weight: 500; color: var(--ink-mute); }

/* CURRENT — the dominant, elevated centre of attention. Larger, lifted, and
   bordered in the performer accent; it carries the evidence links, the AI
   panel and the action bar. */
.pd-rail-card--current {
  width: 22rem;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--party-tenant);
  border-top-width: 3px;
  box-shadow: 0 2px 6px rgba(8, 8, 50, 0.06), 0 10px 26px rgba(8, 8, 50, 0.10);
}
.pd-rail-card--current.pd-rail-card--party      { border-color: var(--party-counter); }
.pd-rail-card--current.pd-rail-card--paydance   { border-color: var(--party-paydance); }
.pd-rail-card--current.pd-rail-card--bookkeeper { border-color: var(--waiting-amber); }
.pd-rail-card--current .pd-rail-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.25;
}
.pd-rail-card--current .pd-rail-card__explain { font-size: var(--t-body); }

/* The action sits ON the Current Card — chunky, reactive buttons. */
.pd-rail-card--current .pd-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
}
.pd-rail-card--current .pd-button {
  font-size: 17px;
  font-weight: 600;
  padding: 14px 24px;
  min-height: 52px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 14px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.pd-rail-card--current .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 24px rgba(8, 8, 50, 0.16);
}
.pd-rail-card--current .pd-button:active { transform: translateY(0); }
.pd-rail-card--current .pd-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pd-rail-card--current .pd-button { transition: none; }
  .pd-rail-card--current .pd-button:hover { transform: none; }
}
.pd-rail-card--current .pd-now-card__query { display: inline-block; }
.pd-rail-card--current .pd-now-card__query > summary { list-style: none; cursor: pointer; }
.pd-rail-card--current .pd-now-card__query > summary::-webkit-details-marker { display: none; }
.pd-rail-card--current .pd-now-card__query[open] summary { margin-bottom: var(--s-4); }
.pd-rail-card--current .pd-now-card__query-form { margin-top: var(--s-4); max-width: none; }
.pd-rail-card--current .pd-now-card__action { display: inline-flex; margin: 0; }

/* The calm fallback when there is no active step (a closed / settled dance). */
.pd-rail__empty {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.25;
  color: var(--ink);
}
.pd-rail-card--current:has(.pd-rail__empty) {
  border-color: var(--rule);
  border-top-color: var(--rule-strong);
}

/* Rail navigation — prev/next arrows (enhancement) + the position indicator. */
.pd-rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-strong);
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.pd-rail__arrow[hidden] { display: none; }
.pd-rail__arrow:hover { background: var(--bg-paper); }
.pd-rail__arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-rail__arrow--prev { left: calc(-1 * var(--s-2)); }
.pd-rail__arrow--next { right: calc(-1 * var(--s-2)); }

.pd-rail__position {
  margin: var(--s-2) 0 0;
  text-align: center;
  font-size: var(--t-meta);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pd-rail__position-now { font-weight: 600; color: var(--ink-strong); }

/* The supplier-facing Dance Card rail reuses the shared .pd-rail chrome; only
   the surrounding spacing + the "Action needed from you" flag are party-specific.
   The supplier rail's Now card glyph reads as the current/queried state. */
.pd-party-rail { margin: 0 0 var(--s-6); }
.pd-rail-card__glyph--next { background: var(--bg-paper); }
.pd-rail-card__action-flag {
  align-self: flex-start;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--waiting-amber-strong);
  background: var(--waiting-amber-soft);
  border-radius: var(--r-pill);
  padding: 2px var(--s-2);
}

/* Evidence trail — the chronological event log, collapsed by default and
   secondary to the rail (it reuses the pd-collapsible panel chrome). */
.pd-evidence-trail__updated {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-meta);
  color: var(--ink-mute);
  margin-left: var(--s-2);
}
.pd-evidence-trail__list { list-style: none; margin: 0; padding: 0; }
.pd-evidence-trail__item {
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.pd-evidence-trail__item:last-child { border-bottom: 0; }
.pd-evidence-trail__time {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: var(--t-meta);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pd-evidence-trail__line { min-width: 0; overflow-wrap: anywhere; }
.pd-evidence-trail__lead {
  font-weight: 600;
  color: var(--ink-strong);
  margin-right: var(--s-2);
}
.pd-evidence-trail__body { color: var(--ink); }

/* Collapsible panels (Documents, Internal notes) */
.pd-dance .pd-dance__panel {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(8, 8, 50, 0.04), 0 3px 10px rgba(8, 8, 50, 0.06);
  overflow: hidden;
}
.pd-dance .pd-collapsible__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-strong);
  transition: background 160ms ease;
}
.pd-dance .pd-collapsible__summary::-webkit-details-marker { display: none; }
.pd-dance .pd-collapsible__summary:hover { background: var(--bg-paper); }
.pd-dance .pd-collapsible__summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-mute);
  transition: transform 160ms ease;
}
.pd-dance .pd-dance__panel[open] .pd-collapsible__summary::after {
  content: '−';
  transform: none;
}
.pd-dance .pd-collapsible__count {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  min-width: 30px;
  text-align: center;
}
.pd-dance .pd-collapsible__body { padding: 0 var(--s-6) var(--s-5); }

/* Documents list */
.pd-dance .pd-evidence-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.pd-dance .pd-evidence-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.pd-dance .pd-evidence-item:last-child { border-bottom: 0; }
.pd-dance .pd-evidence-item__name {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink-strong);
  text-decoration: none;
}
.pd-dance .pd-evidence-item__name:hover { color: var(--party-paydance); text-decoration: underline; text-underline-offset: 3px; }
.pd-dance .pd-evidence-item__meta {
  display: flex;
  gap: var(--s-4);
  font-size: var(--t-meta);
  color: var(--ink-mute);
}
.pd-dance .pd-evidence-item--superseded .pd-evidence-item__name del { color: var(--ink-mute); }

/* Upload form inside the documents panel */
.pd-dance .pd-dance__upload {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.pd-dance .pd-dance__upload .pd-button {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 22px;
  min-height: 48px;
  border-radius: 10px;
}

/* Notes list */
.pd-dance .pd-note-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.pd-dance .pd-note-item {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.pd-dance .pd-note-item:last-child { margin-bottom: 0; }
.pd-dance .pd-dance__notes-add {
  margin: 0;
  font-size: var(--t-meta);
}
.pd-dance .pd-dance__notes-add a {
  color: var(--party-paydance);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

/* Empty states inside panels */
.pd-dance .pd-empty {
  font-size: var(--t-meta);
  color: var(--ink-mute);
  font-style: italic;
  padding: var(--s-4) 0;
}

/* Mobile (< 720px): the rail becomes a swipeable carousel. Cards fill nearly
   the viewport and snap firmly to centre; the "<n> of <m>" indicator is the
   navigator (the arrows still work but the swipe leads). */
@media (max-width: 719px) {
  .pd-rail { scroll-snap-type: x mandatory; gap: var(--s-3); }
  .pd-rail-card { width: 84vw; max-width: 22rem; }
  .pd-rail-card--current { width: 84vw; max-width: 22rem; }
}

/* Mobile tightening */
@media (max-width: 600px) {
  .pd-dance { gap: var(--s-5); }
  .pd-dance .pd-collapsible__summary { padding: var(--s-4) var(--s-5); font-size: 18px; }
  .pd-dance .pd-collapsible__body { padding: 0 var(--s-5) var(--s-5); }
  .pd-rail-card { padding: var(--s-4); }
  .pd-rail-card--current { padding: var(--s-4); }
}

/* =========================================================================
   Public header brand mark — larger device icon + text wordmark.
   Scoped to .pd-public-brand inside the public layout's header. Staff
   chrome (uses .pd-tenant-header__brand without .pd-public-brand) keeps
   its current size/treatment.
   ========================================================================= */

.pd-public-shell .pd-tenant-header { padding: var(--s-4) var(--s-5); }

@media (min-width: 720px) {
  .pd-public-shell .pd-tenant-header { padding: var(--s-5) var(--s-7); }
}

.pd-public-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink-strong);
  line-height: 1;
}
.pd-public-brand:hover { color: var(--party-paydance); }
.pd-public-brand:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--r-control);
}

.pd-public-brand__mark {
  display: block;
  width: clamp(40px, 6vw, 56px);
  height: clamp(40px, 6vw, 56px);
  flex: 0 0 auto;
}

.pd-public-brand__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.01em;
  color: inherit;
}

/* Small screens — still readable, less imposing */
@media (max-width: 480px) {
  .pd-public-brand { gap: var(--s-2); }
  .pd-public-brand__mark { width: 36px; height: 36px; }
  .pd-public-brand__wordmark { font-size: 22px; }
}

/* =========================================================================
   Payment-rules explainer — scoped polish for templates/public/payment_rules.html.ep.
   Reuses brand tokens; mirrors the homepage's restrained hero + card
   patterns. Scoped under .pd-explainer so other public pages stay
   untouched.
   ========================================================================= */

.pd-explainer {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}

/* Hero */
.pd-explainer-hero {
  padding: clamp(32px, 6vh, 64px) 0 var(--s-4);
  max-width: 740px;
}
.pd-explainer-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.pd-explainer-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  margin: 0 0 var(--s-4);
}
.pd-explainer-hero__sub {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

/* Sections */
.pd-explainer-section { max-width: 740px; }
.pd-explainer-section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.5vw, 32px);
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 0 0 var(--s-4);
}
.pd-explainer-section__lead {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-5);
  max-width: 60ch;
}

/* Facts list */
.pd-explainer-facts {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.pd-explainer-fact { display: flex; flex-direction: column; gap: var(--s-2); }
.pd-explainer-facts__term {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink-strong);
  margin: 0;
}
.pd-explainer-facts__def {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

/* Tiers */
.pd-explainer-tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-explainer-tier {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
@media (min-width: 720px) {
  .pd-explainer-tier {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s-5);
  }
}
.pd-explainer-tier__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-strong);
  flex: 0 0 80px;
}
.pd-explainer-tier__desc {
  font-size: var(--t-body);
  color: var(--ink);
  line-height: var(--lh-body);
}

/* How list */
.pd-explainer-how {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 720px) {
  .pd-explainer-how { grid-template-columns: repeat(3, 1fr); }
}
.pd-explainer-how__item {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  box-shadow: 0 1px 2px rgba(8, 8, 50, 0.04), 0 3px 10px rgba(8, 8, 50, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pd-explainer-how__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.3;
}
.pd-explainer-how__body {
  font-size: var(--t-meta);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}

.pd-explainer-disclaimer {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin: var(--s-6) 0 0;
  max-width: 60ch;
}

/* CTA band */
.pd-explainer-cta {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.pd-explainer-cta__promise {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.3;
  color: var(--ink-strong);
  margin: 0;
  max-width: 42ch;
}
.pd-explainer-cta .pd-button {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 28px;
  min-height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease;
}
.pd-explainer-cta .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .pd-explainer-cta .pd-button { transition: none; }
  .pd-explainer-cta .pd-button:hover { transform: none; }
}

/* Sources */
.pd-explainer-sources { max-width: 740px; }
.pd-explainer-sources__title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.pd-explainer-sources__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-explainer-sources__list li { font-size: var(--t-meta); }
.pd-explainer-sources__list a {
  color: var(--party-paydance);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pd-explainer-sources__list a:hover { text-decoration-thickness: 2px; }

/* Mobile tighten */
@media (max-width: 600px) {
  .pd-explainer { gap: var(--s-6); }
  .pd-explainer-section__title { font-size: 24px; }
  .pd-explainer-facts__term { font-size: 18px; }
}

/* =========================================================================
   Explainer helpers used by /about — small additions on top of the
   existing .pd-explainer chrome. Scoped to .pd-explainer-* so other
   pages stay untouched.
   ========================================================================= */

/* Body paragraphs inside a section that come AFTER the lead */
.pd-explainer-section p:not(.pd-explainer-section__lead) {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  max-width: 60ch;
}
.pd-explainer-section p:not(.pd-explainer-section__lead):last-child {
  margin-bottom: 0;
}

/* Inline link inside section copy */
.pd-explainer-link {
  color: var(--party-paydance);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pd-explainer-link:hover { text-decoration-thickness: 2px; }

/* Points list (How it's run) */
.pd-explainer-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-explainer-points li {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  padding-left: var(--s-5);
  position: relative;
  max-width: 60ch;
}
.pd-explainer-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--party-paydance);
  font-weight: 700;
}

/* Contact list (Get in touch) */
.pd-explainer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-explainer-contact li {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
@media (min-width: 720px) {
  .pd-explainer-contact li {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s-4);
  }
}
.pd-explainer-contact__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex: 0 0 100px;
}
.pd-explainer-contact a {
  color: var(--party-paydance);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-size: var(--t-body);
}
.pd-explainer-contact a:hover { text-decoration-thickness: 2px; }

/* =========================================================================
   Pricing — scoped polish for templates/public/pricing.html.ep.
   Reuses brand tokens. Mobile-first, SSR-only. All sizing scoped under
   .pd-pricing.
   ========================================================================= */

.pd-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
}

/* Hero */
.pd-pricing-hero {
  padding: clamp(32px, 6vh, 64px) 0 var(--s-4);
  max-width: 760px;
}
.pd-pricing-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.pd-pricing-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  margin: 0 0 var(--s-5);
}
.pd-pricing-hero__sub {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  max-width: 60ch;
}
.pd-pricing-hero__payer {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--party-paydance);
  margin: 0 0 var(--s-6);
}
.pd-pricing-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.pd-pricing-hero__cta .pd-button {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 28px;
  min-height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease;
}
.pd-pricing-hero__cta .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
.pd-pricing-hero__cta .pd-button:active { transform: translateY(0); }
.pd-pricing-hero__cta .pd-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-pricing-hero__cta .pd-button { transition: none; }
  .pd-pricing-hero__cta .pd-button:hover { transform: none; }
}

/* The pricing card — single prominent card */
.pd-pricing-card {
  background: var(--bg-card);
  border: 2px solid var(--rule);
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 4px 8px rgba(8, 8, 50, 0.06), 0 12px 32px rgba(8, 8, 50, 0.10);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: relative;
}
.pd-pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  border: 2px solid var(--party-paydance);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.pd-pricing-card:hover::before { opacity: 0.4; }

.pd-pricing-card__plan {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--party-paydance);
  margin: 0;
}
.pd-pricing-card__price {
  font-family: var(--font-display);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}
.pd-pricing-card__price-major {
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.015em;
  line-height: 1;
}
.pd-pricing-card__price-suffix {
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
}
.pd-pricing-card__price-vat {
  flex-basis: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
  margin-top: var(--s-1);
}
.pd-pricing-card__desc {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
.pd-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 720px) {
  .pd-pricing-card__features {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-5);
  }
}
.pd-pricing-card__features li {
  font-size: var(--t-body);
  color: var(--ink);
  padding-left: 28px;
  position: relative;
  line-height: 1.5;
}
.pd-pricing-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--party-counter);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.pd-pricing-card__overage {
  font-size: var(--t-meta);
  color: var(--ink-mute);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.pd-pricing-card__cta {
  align-self: flex-start;
  font-size: 18px;
  font-weight: 600;
  padding: 16px 28px;
  min-height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease;
}
.pd-pricing-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
.pd-pricing-card__cta:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pd-pricing-card__cta { transition: none; }
  .pd-pricing-card__cta:hover { transform: none; }
}

/* Sections */
.pd-pricing-section { max-width: 740px; }
.pd-pricing-section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.5vw, 32px);
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 0 0 var(--s-4);
}
.pd-pricing-section__lead {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  max-width: 60ch;
}
.pd-pricing-section p:not(.pd-pricing-section__lead):not(.pd-pricing-section__example) {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  max-width: 60ch;
}
.pd-pricing-section p:last-child { margin-bottom: 0; }
.pd-pricing-section__example {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--party-tenant);
  background: var(--party-tenant-soft);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  max-width: 60ch;
}
.pd-pricing-section__example strong {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
}

.pd-pricing-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pd-pricing-bullets li {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  padding-left: var(--s-5);
  position: relative;
}
.pd-pricing-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--party-paydance);
  font-weight: 700;
}

/* Callout (green) */
.pd-pricing-callout {
  list-style: none;
  padding: var(--s-5) var(--s-6);
  margin: var(--s-5) 0 0;
  background: var(--party-counter-soft);
  border-left: 4px solid var(--party-counter);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pd-pricing-callout li {
  font-size: var(--t-body);
  color: var(--ink-strong);
  font-weight: 500;
  line-height: 1.4;
}

/* Comparison table */
.pd-pricing-compare { max-width: 740px; }
.pd-pricing-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
  margin-top: var(--s-3);
}
.pd-pricing-compare__table th,
.pd-pricing-compare__table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.pd-pricing-compare__table thead th {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid var(--rule);
}
.pd-pricing-compare__table tbody th {
  font-weight: 500;
  color: var(--ink-strong);
}
.pd-pricing-compare__cell {
  font-size: 18px;
  font-weight: 600;
  width: 30%;
}
.pd-pricing-compare__cell--no  { color: var(--ink-mute); }
.pd-pricing-compare__cell--yes { color: var(--party-counter); }

/* Stacked card layout on mobile */
@media (max-width: 600px) {
  .pd-pricing-compare__table thead { display: none; }
  .pd-pricing-compare__table tbody tr {
    display: block;
    border: 1px solid var(--rule);
    border-radius: var(--r-control);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--bg-card);
  }
  .pd-pricing-compare__table tbody th {
    display: block;
    padding: 0 0 var(--s-2) 0;
    border: 0;
    font-family: var(--font-display);
    font-size: 17px;
  }
  .pd-pricing-compare__table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s-1) 0;
    border: 0;
    font-size: 16px;
  }
  .pd-pricing-compare__table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
}

/* FAQ */
.pd-pricing-faq { max-width: 740px; }
.pd-pricing-faq__list {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.pd-pricing-faq__item {
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.pd-pricing-faq__item:last-child { border-bottom: 0; }
.pd-pricing-faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink-strong);
  margin: 0 0 var(--s-2);
  line-height: 1.3;
}
.pd-pricing-faq__a {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

/* Final CTA */
.pd-pricing-final {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.pd-pricing-final__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 0;
}
.pd-pricing-final__body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}
.pd-pricing-final .pd-button {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 28px;
  min-height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(8, 8, 50, 0.08), 0 6px 16px rgba(8, 8, 50, 0.10);
  transition: transform 80ms ease, box-shadow 160ms ease;
}
.pd-pricing-final .pd-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(8, 8, 50, 0.14), 0 14px 28px rgba(8, 8, 50, 0.18);
}
.pd-pricing-final__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pd-pricing-final .pd-button { transition: none; }
  .pd-pricing-final .pd-button:hover { transform: none; }
}

/* Mobile tighten */
@media (max-width: 600px) {
  .pd-pricing { gap: var(--s-6); }
  .pd-pricing-card { padding: var(--s-5); }
  .pd-pricing-hero__cta { flex-direction: column; align-items: stretch; }
  .pd-pricing-hero__cta .pd-button { text-align: center; }
  .pd-pricing-card__cta { align-self: stretch; text-align: center; }
}

/* =========================================================================
   How-it-works dance-timeline figure — the SVG showing the four
   checkpoints with party-coloured arcs. Sits beneath the page header.
   Scoped under .pd-howit-figure.
   ========================================================================= */

.pd-howit-figure {
  margin: var(--s-6) auto 0;
  padding: 0;
  max-width: 420px;
}

.pd-howit-figure__svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .pd-howit-figure {
    margin-top: var(--s-5);
    max-width: 300px;
  }
}

/* =========================================================================
   Marketing ribbon backdrop — the logo's dP "dancing ribbons" scaled to
   the whole page as a calm, brand-forward atmosphere. Opt-in per page via
   the `marketing => 1` stash flag, which adds `.pd-public-shell--marketing`
   to <body>. Every selector here is scoped under that class, so the app,
   sign-in and onboarding surfaces are untouched.
   ========================================================================= */

.pd-public-shell--marketing { position: relative; }

/* The dance sits behind the hero/first fold, then fades to clean paper so
   the content below reads on white. Anchored to the top of the page (not
   the viewport), so it scrolls away with the hero. */
.pd-ribbons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 640px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
  mask-image: linear-gradient(to bottom, #000 50%, transparent);
}
.pd-ribbons svg { width: 100%; height: 100%; display: block; }

.pd-ribbons__field { opacity: 0.10; }
.pd-ribbons__rib--indigo { stroke: var(--paydance-indigo); }
.pd-ribbons__rib--blue   { stroke: var(--paydance-blue); }
.pd-ribbons__rib--green  { stroke: var(--paydance-green); }
.pd-ribbons__bead        { fill: var(--paydance-indigo); opacity: 0.10; }

/* Keep the header, content and footer above the backdrop. */
.pd-public-shell--marketing .pd-tenant-header,
.pd-public-shell--marketing .pd-shell__main,
.pd-public-shell--marketing .pd-shell__footer {
  position: relative;
  z-index: 1;
}

/* The dance breathes — a slow, tiny drift. Stilled for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .pd-ribbons__field {
    transform-box: fill-box;
    transform-origin: center;
    animation: pd-ribbon-drift 38s ease-in-out infinite alternate;
  }
}
@keyframes pd-ribbon-drift {
  from { transform: translateY(0) rotate(-0.5deg); }
  to   { transform: translateY(-14px) rotate(0.5deg); }
}

/* Lighter touch on small screens, where the hero band is shorter. */
@media (max-width: 600px) {
  .pd-ribbons { height: 520px; }
  .pd-ribbons__field { opacity: 0.07; }
}


/* Inline step-evidence links in the now-card: open the document to review and act in one place. */
.pd-now-card__evidence { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-4); }
.pd-now-card__evidence-link { font-size: var(--t-meta); font-weight: 600; color: var(--party-tenant-strong); text-decoration: underline; text-underline-offset: 3px; }

/* AI timesheet-vs-invoice verdict panel — one compact note above the action bar
   on a check-timesheet NOW step. Tones reuse the three-party soft fills so it
   reads consistently with the rest of the now-card. */
.pd-now-card__ai-check {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius-2, 8px);
  background: var(--bg-card);
}
.pd-now-card__ai-check--supports    { background: var(--party-counter-soft); border-left-color: var(--party-counter-strong); }
.pd-now-card__ai-check--discrepancy { background: var(--waiting-amber-soft);  border-left-color: var(--waiting-amber-strong); }
.pd-now-card__ai-check--unclear     { border-left-color: var(--rule-strong); }
.pd-now-card__ai-check--muted       { border-left-color: var(--rule); color: var(--ink-soft, inherit); }
.pd-now-card__ai-check-head {
  margin: 0;
  font-size: var(--t-meta);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--s-2, 6px);
}
.pd-now-card__ai-check-icon { font-weight: 700; }
.pd-now-card__ai-check-summary { margin: var(--s-2, 6px) 0 0; font-size: var(--t-meta); }
.pd-now-card__ai-check-money   { margin: var(--s-2, 6px) 0 0; font-size: var(--t-meta); font-weight: 600; }

/* =========================================================================
   Dashboard widgets — the action-focused home (Staff#index).
   A "your next steps" hero + a grid of stat cards (Inbox, Waiting,
   Suppliers, Recently paid), each a count + one-line desc linking to the
   deeper list. Calm, premium; brand tokens only. Mobile-first single
   column; the stat grid grows to 2 then 4 across.
   ========================================================================= */

.pd-dash-widgets { display: flex; flex-direction: column; gap: var(--s-5); }

.pd-dash-stats { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .pd-dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pd-dash-stats { grid-template-columns: repeat(4, 1fr); } }

.pd-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.pd-widget__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pd-widget__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  line-height: 1;
}

/* Hero - your next steps */
.pd-widget--hero {
  gap: var(--s-4);
  padding: var(--s-6);
  border-top: 3px solid var(--tenant-accent, var(--paydance-indigo));
}
.pd-widget__hero-body { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.pd-widget__count--xl { font-size: 56px; }
.pd-widget__caption { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.pd-widget__empty { margin: 0; font-size: var(--t-meta); color: var(--ink-mute); max-width: 52ch; line-height: var(--lh-body); }

.pd-widget__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pd-widget__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, background-color 160ms ease, transform 80ms ease;
}
.pd-widget__row:hover { border-color: var(--rule-strong); background: var(--bg-paper); transform: translateX(2px); }
.pd-widget__row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-widget__row-label { font-weight: 600; color: var(--ink-strong); }
.pd-widget__row-n {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--party-tenant-strong);
  background: var(--party-tenant-soft);
  border-radius: var(--r-pill);
  min-width: 28px;
  padding: 2px 10px;
  text-align: center;
}
.pd-widget__row-arrow { color: var(--ink-mute); font-family: var(--font-ui); }

.pd-widget__more { font-size: var(--t-meta); font-weight: 600; color: var(--party-paydance); text-decoration: none; }
.pd-widget__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Stat cards */
.pd-widget--stat {
  gap: var(--s-2);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  border-top: 3px solid var(--rule-strong);
  transition: transform 80ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.pd-widget--stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pd-widget--stat:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-widget--stat .pd-widget__count { font-size: 40px; }
.pd-widget__desc { font-size: var(--t-meta); color: var(--ink-mute); line-height: var(--lh-body); }
.pd-widget__arrow {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--ink-mute);
  transition: transform 160ms ease, color 160ms ease;
}
.pd-widget--stat:hover .pd-widget__arrow { transform: translateX(3px); color: var(--party-paydance); }

.pd-widget--inbox     { border-top-color: var(--party-tenant); }
.pd-widget--inbox     .pd-widget__count { color: var(--party-tenant-strong); }
.pd-widget--waiting   { border-top-color: var(--waiting-amber); }
.pd-widget--waiting   .pd-widget__count { color: var(--waiting-amber-strong); }
.pd-widget--suppliers { border-top-color: var(--party-counter); }
.pd-widget--suppliers .pd-widget__count { color: var(--party-counter-strong); }
.pd-widget--paid      { border-top-color: var(--party-counter); }
.pd-widget--paid      .pd-widget__count { color: var(--party-counter-strong); }

/* Suppliers list */
.pd-suppliers { display: flex; flex-direction: column; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.pd-supplier-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 80ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.pd-supplier-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }
.pd-supplier-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-supplier-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-supplier-row__name { font-size: 18px; font-weight: 600; color: var(--ink-strong); }
.pd-supplier-row__email { font-size: var(--t-meta); color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; }
.pd-supplier-row__meta { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.pd-supplier-row__count { font-size: var(--t-meta); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.pd-supplier-row__arrow { color: var(--ink-mute); font-family: var(--font-ui); font-size: 18px; }
.pd-supplier-row__new {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--party-counter-strong);
  background: var(--party-counter-soft);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .pd-widget--stat, .pd-widget--stat:hover,
  .pd-widget__row, .pd-widget__row:hover,
  .pd-widget__arrow,
  .pd-supplier-row, .pd-supplier-row:hover { transition: none; transform: none; }
}

/* =========================================================================
   Speed badges + promptness reward + richer supplier rows.
   Speed badges celebrate how fast a dance went from invoice received to
   paid (Lightning <=2d, Quickstep <=5d, Prompt <=10d); slower earns no
   badge (never punitive). Plus the dashboard "Waiting on others" hero row
   and supplier rows carrying outstanding + last activity.
   ========================================================================= */

.pd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pd-badge--lightning { color: var(--party-paydance-strong); background: var(--party-paydance-soft); }
.pd-badge--quickstep { color: var(--party-tenant-strong);   background: var(--party-tenant-soft); }
.pd-badge--prompt    { color: var(--party-counter-strong);  background: var(--party-counter-soft); }

/* Hero "Waiting on others" row - amber, distinct from the action rows */
.pd-widget__row--waiting .pd-widget__row-n {
  color: var(--waiting-amber-strong);
  background: var(--waiting-amber-soft);
}

/* Paying-promptly reward widget (a non-link card in the stat grid) */
.pd-widget--prompt {
  gap: var(--s-2);
  padding: var(--s-5);
  border-top: 3px solid var(--party-counter);
}
.pd-widget--prompt .pd-widget__count { color: var(--party-counter-strong); font-size: 40px; }
.pd-widget__standing { margin-top: var(--s-1); }
.pd-widget__nudge {
  margin: var(--s-2) 0 0;
  font-size: var(--t-meta);
  color: var(--ink-mute);
  line-height: var(--lh-body);
}

/* Suppliers list - richer rows (outstanding + last activity) */
.pd-supplier-row__last { font-size: var(--t-meta); color: var(--ink-mute); }
.pd-supplier-row__stats {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  text-align: right;
}
.pd-supplier-row__outstanding {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.pd-supplier-row__meta { margin-left: var(--s-4); }

@media (max-width: 560px) {
  .pd-supplier-row { flex-wrap: wrap; }
  .pd-supplier-row__stats { margin-left: 0; align-items: flex-start; text-align: left; }
}

/* Payee paid-celebration moment (party dance page) - a warm "paid in N days"
   panel with the speed badge and a one-tap "Say thanks". Green = paid. */
.pd-celebrate {
  background: var(--party-counter-soft);
  border: 1px solid var(--party-counter);
  border-radius: var(--r-card);
  padding: var(--s-5);
  margin: var(--s-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-celebrate__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pd-celebrate__days {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--party-counter-strong);
}
.pd-celebrate__line { margin: 0; color: var(--ink); line-height: var(--lh-body); }
.pd-celebrate__done { margin: 0; font-weight: 600; color: var(--party-counter-strong); }
.pd-celebrate__form { margin: 0; }

/* Pay step — the self-sufficient "pay to" panel: amount + account + a fraud
   warning when bank details changed since the invoice arrived + verify links
   to the invoice and source email. Shown on the pay now-card and pay screen. */
.pd-pay-to {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
  margin: 0 0 var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pd-pay-to__amount-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.pd-pay-to__label { font-weight: 600; color: var(--ink-strong); }
.pd-pay-to__amount { font-size: var(--t-h2); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.pd-pay-to__bank { margin: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.pd-pay-to__row { display: flex; gap: var(--s-3); }
.pd-pay-to__row dt { flex: 0 0 116px; color: var(--ink-mute); font-size: var(--t-meta); }
.pd-pay-to__row dd { margin: 0; color: var(--ink-strong); }
.pd-pay-to__num { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pd-pay-to__missing { margin: 0; font-size: var(--t-meta); color: var(--ink-mute); }
.pd-pay-to__verify { display: flex; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.pd-pay-to__verify-link { font-size: var(--t-meta); font-weight: 600; color: var(--party-tenant-strong); text-decoration: none; }
.pd-pay-to__verify-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.pd-pay-warning {
  background: #FCEDEA;
  border: 1px solid var(--error);
  border-radius: var(--r-control);
  padding: var(--s-4);
}
.pd-pay-warning__head { margin: 0 0 var(--s-1); font-weight: 700; color: var(--error); }
.pd-pay-warning__body { margin: 0; font-size: var(--t-meta); color: var(--ink); line-height: var(--lh-body); }

.pd-email-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  color: var(--ink);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  padding: var(--s-4);
  max-height: 420px;
  overflow: auto;
}

/* Pay step - AI cross-check of the invoice-stated account vs the on-file
   account: a calm match tick, and the "read from the invoice" pre-fill card
   (the mismatch case reuses .pd-pay-warning). */
.pd-pay-match {
  margin: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--party-counter-strong);
}
.pd-pay-invoice-acct {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-control);
  background: var(--bg-paper);
  padding: var(--s-4);
}
.pd-pay-invoice-acct__head { margin: 0 0 var(--s-2); font-size: var(--t-meta); font-weight: 600; color: var(--ink-strong); }
.pd-pay-invoice-acct__form { margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }

/* Step aging chip - how long the current step has been waiting. Amber from 3
   days, red from 7. Shown on dance cards + the current card. */
.pd-age-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.pd-age-chip--amber { color: var(--waiting-amber-strong); background: var(--waiting-amber-soft); }
.pd-age-chip--red   { color: var(--error); background: #FCEDEA; }
.pd-now-card__remind { margin: 0; }

/* Bookkeeper Paid Ledger - a calm read-only table + period controls. The
   table scrolls sideways on small screens rather than cramping. */
.pd-ledger-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-4) 0 var(--s-5);
}
.pd-ledger-picks { display: flex; gap: var(--s-3); }
.pd-ledger-picks a { font-size: var(--t-meta); font-weight: 600; color: var(--party-paydance); text-decoration: none; }
.pd-ledger-picks a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-ledger-range { display: flex; align-items: end; gap: var(--s-3); flex-wrap: wrap; }
.pd-ledger-range label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-meta); color: var(--ink-mute); }
.pd-ledger-export { margin-left: auto; }

.pd-ledger-scroll { overflow-x: auto; }
.pd-ledger {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  font-size: var(--t-meta);
}
.pd-ledger th, .pd-ledger td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.pd-ledger th { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.pd-ledger tbody tr:last-child td { border-bottom: 0; }
.pd-ledger__num { text-align: right; font-variant-numeric: tabular-nums; }

/* Bookkeeper client list - the meta-dance home. One calm row per client,
   plus the add-a-client invite card. Lives in the signin (no-org) shell, so
   widen that column when this page is inside it (progressive: without :has
   support the rows simply wrap in the narrow column). */
.pd-signin:has(.pd-clients) { max-width: 720px; }
.pd-clients { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pd-client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-4) var(--s-5);
}
.pd-client-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-client-row__name { font-size: 18px; font-weight: 600; color: var(--ink-strong); }
.pd-client-row__meta { font-size: var(--t-meta); color: var(--ink-mute); }
.pd-client-row__awaiting { color: var(--waiting-amber-strong); font-weight: 600; }
.pd-client-row__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.pd-invite-client {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-card);
  background: var(--bg-paper);
  padding: var(--s-5);
  max-width: 560px;
}
.pd-invite-client__title { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.pd-invite-client__blurb { margin: 0 0 var(--s-4); font-size: var(--t-meta); color: var(--ink-mute); line-height: var(--lh-body); }

/* Ledger category cell - a compact inline select (+ a Save button that JS
   hides, keeping the no-JS path honest). */
.pd-ledger__cat { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.pd-ledger__cat-select { font-size: var(--t-meta); padding: 4px 8px; min-width: 150px; }

/* Payee payment details - the self-service form, the index nudge, and the
   pay-card trust line ("Confirmed by Ursula ..."). */
.pd-details-confirmed { margin: 0 0 var(--s-4); font-size: var(--t-meta); font-weight: 600; color: var(--party-counter-strong); }
.pd-details-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-card);
  background: var(--bg-paper);
  padding: var(--s-4) var(--s-5);
  margin: 0 0 var(--s-5);
}
.pd-details-nudge__line { margin: 0; font-size: var(--t-meta); color: var(--ink); line-height: var(--lh-body); max-width: 48ch; }
.pd-details-link { margin: var(--s-6) 0 0; font-size: var(--t-meta); }
.pd-details-link a { color: var(--ink-mute); }
.pd-pay-confirmed { margin: 0; font-size: var(--t-meta); font-weight: 600; color: var(--party-counter-strong); }
.pd-pay-confirmed--staff { color: var(--ink-mute); font-weight: 400; }