/* ==========================================================================
   Percio Data — Expert Network design system
   --------------------------------------------------------------------------
   Tokens taken from the live perciodata.com stylesheet (a Tailwind/shadcn
   theme) and converted from HSL to hex, so the two properties are visibly the
   same product rather than merely similar:

       --background 210 45% 95%   --foreground 210 25% 25%
       --primary    210 65% 55%   --accent     205 75% 50%
       --border     210 20% 88%   --radius     0.75rem
       Inter, weights 400 / 500 / 700 / 900

   Two deliberate departures, both required by the brief's WCAG-AA line:

   1. The site's --primary (#428CD7) carries white text at 3.52:1, below the
      4.5:1 needed for normal text. Interactive blue is darkened along the same
      hue to #2261A0 (6.39:1). The lighter brand blue is kept as --pd-brand for
      large display type and decorative fills, where 3:1 is the AA bar.
   2. Body text is #2A3947 rather than #304050 — a touch darker, so long-form
      prose on the tinted background clears AA comfortably.

   Everything else is the site's own palette.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --pd-brand:        #428CD7;   /* site --primary; display/decorative only */
  --pd-brand-deep:   #2E73B8;   /* site --hero-gradient */
  --pd-accent:       #208FDF;   /* site --accent */

  /* Interactive blue: same hue, AA-compliant with white text. */
  --pd-primary:      #2261A0;
  --pd-primary-hover:#1C4F82;
  --pd-primary-soft: #EAF2FB;
  --pd-primary-line: #C4DCF2;

  /* Neutrals — the site's cool blue-grey ramp, not a warm one. */
  --pd-n-25:  #F7F9FC;
  --pd-n-50:  #EDF2F8;   /* site --background */
  --pd-n-100: #F0F2F5;   /* site --muted */
  --pd-n-200: #E6EBF0;   /* site --secondary */
  --pd-n-300: #DAE0E7;   /* site --border */
  --pd-n-400: #A8B4C0;
  --pd-n-500: #627384;   /* site --muted-foreground */
  --pd-n-600: #4A5A6A;
  --pd-n-700: #304050;   /* site --foreground */
  --pd-n-800: #2A3947;
  --pd-n-900: #1D2935;   /* site dark --card */
  --pd-n-950: #141F29;   /* site dark --background */
  --pd-white: #FFFFFF;

  /* Semantic. Desaturated to sit beside the brand blue without shouting. */
  --pd-positive:     #1A7F4B;
  --pd-positive-bg:  #EDF8F1;
  --pd-positive-br:  #BFE3CE;
  --pd-attention:    #9A5B00;
  --pd-attention-bg: #FDF6EA;
  --pd-attention-br: #F0DBB4;
  --pd-critical:     #B3261E;
  --pd-critical-bg:  #FDF0EF;
  --pd-critical-br:  #F2C6C2;
  --pd-info:         var(--pd-primary);
  --pd-info-bg:      var(--pd-primary-soft);
  --pd-info-br:      var(--pd-primary-line);

  /* Surfaces */
  --pd-bg:         var(--pd-n-50);
  --pd-surface:    var(--pd-white);
  --pd-surface-2:  var(--pd-n-25);
  --pd-border:     var(--pd-n-300);
  --pd-border-str: #C6D0DA;
  --pd-text:       var(--pd-n-800);
  --pd-text-soft:  var(--pd-n-600);
  --pd-text-mute:  var(--pd-n-500);

  /* Type — Inter, as the site loads it. */
  --pd-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --pd-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Shape — the site's 0.75rem radius. */
  --pd-radius:      0.75rem;
  --pd-radius-sm:   0.5rem;
  --pd-radius-lg:   1rem;
  --pd-radius-pill: 999px;

  /* Shadows, matching the site's --card-shadow scale. Borders do the
     structural work; shadow only signals genuine elevation. */
  --pd-shadow-sm: 0 1px 3px 0 rgb(16 30 45 / .06), 0 1px 2px -1px rgb(16 30 45 / .06);
  --pd-shadow-md: 0 4px 10px -2px rgb(16 30 45 / .08), 0 2px 4px -2px rgb(16 30 45 / .05);
  --pd-shadow-lg: 0 10px 15px -3px rgb(16 30 45 / .10), 0 4px 6px -4px rgb(16 30 45 / .10);

  --pd-focus: 0 0 0 3px rgb(34 97 160 / .30);
  --pd-transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

/* Base ------------------------------------------------------------------ */
.pd {
  font-family: var(--pd-font);
  color: var(--pd-text);
  background: var(--pd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums lining-nums;
}
.pd *, .pd *::before, .pd *::after { box-sizing: border-box; }

/* Base element styles are wrapped in :where(), which contributes ZERO
   specificity, so ANY component class beats them automatically and for good.
   Written as plain `.pd h1` / `.pd a` these were (0,1,1) and silently beat every
   single-class component: link-buttons rendered blue-on-blue, the selected
   filter chip rendered as a blank blue pill, help text lost its margin in 71
   places, and the hero headline rendered at half its intended size. Patching
   each collision individually did not scale — three of them shipped anyway.
   Do not remove the :where() wrappers. */
:where(.pd) :where(h1, h2, h3, h4) {
  font-weight: 700;
  letter-spacing: -0.021em;
  color: var(--pd-n-700);
  margin: 0;
  line-height: 1.2;
}
:where(.pd) :where(h1) { font-size: 1.875rem; }
:where(.pd) :where(h2) { font-size: 1.3125rem; }
:where(.pd) :where(h3) { font-size: 1.0625rem; letter-spacing: -0.014em; }
:where(.pd) :where(p)  { margin: 0; line-height: 1.65; }
:where(.pd) :where(a)  { color: var(--pd-primary); }

/* Display type: 900 is the site's heaviest weight and is used for the hero. */
.pd-display {
  font-size: clamp(2.125rem, 4.5vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.pd-lede { font-size: 1.0625rem; color: var(--pd-text-soft); line-height: 1.7; }
.pd-muted { color: var(--pd-text-mute); }
.pd-small { font-size: 0.8125rem; }
.pd-mono { font-family: var(--pd-font-mono); font-size: 0.8125rem; }
.pd-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pd-text-mute);
}

/* Accessibility: focus is always visible. Never remove this. */
.pd :focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--pd-focus);
  border-radius: var(--pd-radius-sm);
}
.pd-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--pd-n-900); color: var(--pd-white);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--pd-radius-sm) 0;
}
.pd-skip-link:focus { left: 0; }
.pd-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Layout ---------------------------------------------------------------- */
.pd-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pd-container-narrow { max-width: 760px; }
.pd-container-wide { max-width: 1440px; }
.pd-stack > * + * { margin-top: 16px; }
.pd-stack-lg > * + * { margin-top: 28px; }
.pd-row { display: flex; align-items: center; gap: 12px; }
.pd-row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-grid { display: grid; column-gap: 20px; row-gap: 32px; }
.pd-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pd-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pd-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .pd-grid-3, .pd-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .pd-grid-2, .pd-grid-3, .pd-grid-4 { grid-template-columns: minmax(0,1fr); }
  .pd-container { padding: 0 16px; }
  .pd h1 { font-size: 1.625rem; }
}

/* Cards ----------------------------------------------------------------- */
.pd-card {
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  padding: 22px;
  box-shadow: var(--pd-shadow-sm);
}
.pd-card-flush { padding: 0; overflow: hidden; }
.pd-card-link {
  display: block; text-decoration: none; color: inherit;
  transition: var(--pd-transition);
}
.pd-card-link:hover {
  border-color: var(--pd-primary-line);
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-1px);
}
.pd-card-header {
  padding: 16px 22px; border-bottom: 1px solid var(--pd-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pd-card-body { padding: 22px; }

/* Buttons --------------------------------------------------------------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  padding: 10px 20px; border-radius: var(--pd-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: var(--pd-transition); white-space: nowrap; line-height: 1.4;
  color: var(--pd-text);
}
.pd-btn-primary { background: var(--pd-primary); color: var(--pd-white); }
.pd-btn-primary:hover { background: var(--pd-primary-hover); color: var(--pd-white); }
.pd-btn-secondary {
  background: var(--pd-surface); color: var(--pd-n-700); border-color: var(--pd-border-str);
}
.pd-btn-secondary:hover { background: var(--pd-n-100); border-color: var(--pd-n-400); }
.pd-btn-ghost { background: transparent; color: var(--pd-text-soft); }
.pd-btn-ghost:hover { background: var(--pd-n-100); color: var(--pd-n-700); }
.pd-btn-danger { background: var(--pd-critical); color: var(--pd-white); }
.pd-btn-danger:hover { filter: brightness(.92); }
.pd-btn-sm { padding: 6px 13px; font-size: 0.8125rem; }
.pd-btn-lg { padding: 13px 28px; font-size: 1rem; }
.pd-btn:disabled, .pd-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}
.pd-btn-block { width: 100%; }

/* Forms ----------------------------------------------------------------- */
.pd-field { display: block; }

/* Vertical rhythm inside forms.
   Spacing lives on the CONTAINER, not on .pd-field. Forms interleave single
   fields with .pd-grid rows, so an adjacent-sibling rule keyed to one class
   silently skipped 21 gaps across the product: a field following a grid matched
   nothing and got no margin at all, leaving its label sitting directly on the
   inputs above it. `> * + *` spaces every child whatever it is. */
.pd-fieldset > * + *,
form:not(.pd-row):not(.pd-filters) > * + * { margin-top: 32px; }

/* The same pairs outside a fieldset, for forms built straight into a card. */
.pd-field + .pd-field,
.pd-field + .pd-grid,
.pd-grid  + .pd-field,
.pd-grid  + .pd-grid { margin-top: 32px; }
/* Inside a grid the gap already does the spacing. Without this reset the
   stacking margin also applies to grid siblings, so every field after the
   first in a row sits 18px lower than its neighbours. */
.pd-grid > .pd-field + .pd-field { margin-top: 0; }
/* Grid items stretch to the tallest in the row by default. A field with help
   text underneath would then stretch its neighbour, and anything set to grow
   inside that neighbour pushes its input out of line. Sizing each field to its
   own content keeps every input in a row on the same baseline. */
.pd-grid > .pd-field { align-self: start; }
.pd-label {
  display: block; font-size: 0.875rem; font-weight: 600;
  margin-bottom: 8px; color: var(--pd-n-700);
}
.pd-required { color: var(--pd-critical); margin-left: 2px; }
.pd-help { font-size: 0.8125rem; color: var(--pd-text-mute); margin-top: 7px; line-height: 1.55; }
.pd-input, .pd-select, .pd-textarea {
  /* Explicit line-height so an <input> and a <select> compute the same height;
     left to the default they differ by a pixel and sit unevenly side by side. */
  width: 100%; font-family: inherit; font-size: 0.9375rem; line-height: 1.4;
  color: var(--pd-text);
  background: var(--pd-surface); border: 1px solid var(--pd-border-str);
  border-radius: var(--pd-radius-sm); padding: 10px 13px;
  transition: var(--pd-transition);
}
.pd-input::placeholder, .pd-textarea::placeholder { color: var(--pd-n-400); }
.pd-input:focus, .pd-select:focus, .pd-textarea:focus {
  border-color: var(--pd-primary); outline: none; box-shadow: var(--pd-focus);
}
.pd-input[aria-invalid="true"], .pd-textarea[aria-invalid="true"] {
  border-color: var(--pd-critical);
}
.pd-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* Selects.
   Without an appearance reset the browser draws its own control: a different
   height from the text inputs beside it and an OS chevron that ignores the
   palette. The arrow below is an inline SVG in the muted text colour, and the
   right padding reserves room for it so a long option never runs underneath. */
.pd-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23627384' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.pd-select:hover { border-color: var(--pd-n-400); }
/* The arrow is decorative; keep it from washing out on a disabled control. */
.pd-select:disabled { cursor: not-allowed; opacity: .55; }
/* Compact selects in table rows need the arrow pulled in to match. */
.pd-select.pd-input-sm { padding-right: 32px; background-position: right 10px center; }
/* Native option lists follow the OS, but this keeps the closed control legible
   where a page sets a different colour on its container. */
.pd-select option { color: var(--pd-text); background: var(--pd-surface); }

/* A companion field that appears only when its select is on "Other".
   These pages carry no JavaScript by design (they run under a stricter CSP than
   the legacy app), so the toggle is pure CSS via :has() on the checked option.
   The @supports guard matters: where :has() is unavailable the field simply
   stays visible. Hiding the only way to answer, silently, would be worse than
   always showing it. */
@supports selector(:has(*)) {
  .pd-other-field { display: none; }
  .pd-field:has(select option[value="other"]:checked) + .pd-other-field { display: block; }
}

/* An interview template is only meaningful for an AI interview step. Shown for
   every step type, the field read as required for all of them. Same @supports
   guard as above: without :has() the field simply stays visible, which is the
   safe direction — hiding the only way to set it would be worse. */
@supports selector(:has(*)) {
  /* Hidden by default, then revealed for the one step type it applies to.
     Order matters: both selectors have equal specificity, so the reveal must
     come second. */
  form:has(#step_type) .pd-interview-only { display: none; }
  form:has(#step_type option[value="ai_interview"]:checked) .pd-interview-only { display: block; }
}

/* Compact control for inline forms in table rows. Must be defined AFTER
   .pd-input: templates previously reached for .pd-btn-sm to shrink an input,
   but .pd-input is declared later at equal specificity, so its 10px padding
   won and the field rendered a full head taller than the small button beside
   it. Line height matches .pd-btn so the two align exactly. */
.pd-input-sm, select.pd-input-sm {
  padding: 6px 13px; font-size: 0.8125rem; line-height: 1.4;
}
.pd-error { color: var(--pd-critical); font-size: 0.8125rem; margin-top: 6px; }
.pd-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; }
.pd-checkbox input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--pd-primary); }
.pd-fieldset { border: 0; padding: 0; margin: 0; }
.pd-fieldset legend {
  font-size: 0.9375rem; font-weight: 700; padding: 0; margin-bottom: 10px;
  color: var(--pd-n-700); letter-spacing: -0.011em;
}

/* Badges ---------------------------------------------------------------- */
.pd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: .005em;
  padding: 3px 10px; border-radius: var(--pd-radius-pill);
  border: 1px solid var(--pd-border); background: var(--pd-n-100);
  color: var(--pd-text-soft); white-space: nowrap;
}
.pd-badge-positive  { background: var(--pd-positive-bg);  color: var(--pd-positive);  border-color: var(--pd-positive-br); }
.pd-badge-attention { background: var(--pd-attention-bg); color: var(--pd-attention); border-color: var(--pd-attention-br); }
.pd-badge-critical  { background: var(--pd-critical-bg);  color: var(--pd-critical);  border-color: var(--pd-critical-br); }
.pd-badge-info      { background: var(--pd-info-bg);      color: var(--pd-info);      border-color: var(--pd-info-br); }
.pd-badge-solid     { background: var(--pd-primary); color: var(--pd-white); border-color: var(--pd-primary); }

/* Tables ---------------------------------------------------------------- */
.pd-table-wrap {
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
  background: var(--pd-surface); overflow-x: auto; box-shadow: var(--pd-shadow-sm);
}
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pd-table th {
  text-align: left; font-weight: 600; color: var(--pd-text-mute);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 12px 16px; border-bottom: 1px solid var(--pd-border);
  background: var(--pd-surface-2); white-space: nowrap;
}
.pd-table td { padding: 13px 16px; border-bottom: 1px solid var(--pd-n-100); vertical-align: middle; }
.pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-table tbody tr:hover { background: var(--pd-surface-2); }
.pd-table-numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* Empty states ---------------------------------------------------------- */
.pd-empty {
  text-align: center; padding: 56px 24px;
  border: 1px dashed var(--pd-border-str); border-radius: var(--pd-radius);
  background: var(--pd-surface);
}
.pd-empty h3 { margin-bottom: 8px; }
.pd-empty p { color: var(--pd-text-mute); max-width: 46ch; margin: 0 auto; }
.pd-empty .pd-btn { margin-top: 20px; }

/* Navigation ------------------------------------------------------------ */
.pd-topbar {
  background: rgb(255 255 255 / .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pd-border);
  position: sticky; top: 0; z-index: 30;
}
.pd-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 24px; }
.pd-wordmark {
  font-size: 0.9375rem; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pd-n-700); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px; flex: none;
}
.pd-wordmark span { font-weight: 400; color: var(--pd-primary); letter-spacing: .04em; }
.pd-nav { display: flex; align-items: center; gap: 4px; }
.pd-nav a {
  font-size: 0.875rem; font-weight: 500; color: var(--pd-text-soft);
  text-decoration: none; padding: 7px 12px; border-radius: var(--pd-radius-sm);
  transition: var(--pd-transition);
}
.pd-nav a:hover { background: var(--pd-n-100); color: var(--pd-n-700); }
.pd-nav a[aria-current="page"] { background: var(--pd-primary-soft); color: var(--pd-primary); font-weight: 600; }

.pd-sidebar {
  width: 236px; flex: none; border-right: 1px solid var(--pd-border);
  background: var(--pd-surface); padding: 20px 12px; min-height: calc(100vh - 62px);
}
.pd-sidebar a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.875rem; font-weight: 500; color: var(--pd-text-soft);
  text-decoration: none; padding: 8px 12px; border-radius: var(--pd-radius-sm);
  margin-bottom: 2px; transition: var(--pd-transition);
}
.pd-sidebar a:hover { background: var(--pd-n-100); color: var(--pd-n-700); }
.pd-sidebar a[aria-current="page"] {
  background: var(--pd-primary-soft); color: var(--pd-primary); font-weight: 600;
}
.pd-sidebar-group {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--pd-n-400); padding: 18px 12px 6px; font-weight: 700;
}
.pd-sidebar-count {
  font-size: 0.75rem; color: var(--pd-text-mute);
  background: var(--pd-n-100); border-radius: var(--pd-radius-pill); padding: 1px 8px;
}
.pd-shell { display: flex; align-items: flex-start; }
.pd-shell-main { flex: 1; min-width: 0; padding: 28px 32px 64px; }
@media (max-width: 900px) {
  .pd-sidebar { display: none; }
  .pd-shell-main { padding: 20px 16px 48px; }
}

/* Page header ----------------------------------------------------------- */
.pd-page-header { margin-bottom: 24px; }
.pd-page-header .pd-row-between { align-items: flex-start; }
.pd-breadcrumb { font-size: 0.8125rem; color: var(--pd-text-mute); margin-bottom: 10px; }
.pd-breadcrumb a { color: inherit; text-decoration: none; }
.pd-breadcrumb a:hover { color: var(--pd-primary); text-decoration: underline; }

/* Stats ----------------------------------------------------------------- */
.pd-stat {
  background: var(--pd-surface); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius); padding: 18px 20px; box-shadow: var(--pd-shadow-sm);
}
.pd-stat-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pd-text-mute); font-weight: 600;
}
.pd-stat-value {
  font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em;
  margin-top: 6px; color: var(--pd-n-700); font-variant-numeric: tabular-nums;
}
.pd-stat-note { font-size: 0.8125rem; color: var(--pd-text-mute); margin-top: 4px; }

/* Checklist ------------------------------------------------------------- */
.pd-check { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pd-n-100); }
.pd-check:last-child { border-bottom: 0; }
.pd-check-mark {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  border: 1.5px solid var(--pd-border-str); color: var(--pd-n-400);
}
.pd-check-done .pd-check-mark {
  background: var(--pd-positive-bg); border-color: var(--pd-positive-br); color: var(--pd-positive);
}
.pd-check-body { flex: 1; min-width: 0; }
.pd-check-label { font-size: 0.9375rem; font-weight: 600; color: var(--pd-n-700); }
.pd-check-detail { font-size: 0.8125rem; color: var(--pd-text-mute); margin-top: 2px; line-height: 1.55; }

/* Timeline -------------------------------------------------------------- */
.pd-timeline { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.pd-timeline li {
  flex: 1; position: relative; padding-top: 26px; text-align: center;
  font-size: 0.8125rem; color: var(--pd-text-mute);
}
.pd-timeline li::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pd-surface); border: 2px solid var(--pd-border-str); z-index: 1;
}
.pd-timeline li::after {
  content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px;
  background: var(--pd-border); z-index: 0;
}
.pd-timeline li:last-child::after { display: none; }
.pd-timeline .is-complete::before { background: var(--pd-primary); border-color: var(--pd-primary); }
.pd-timeline .is-complete::after { background: var(--pd-primary); }
.pd-timeline .is-current::before { border-color: var(--pd-primary); box-shadow: 0 0 0 4px var(--pd-primary-soft); }
.pd-timeline .is-current { color: var(--pd-primary); font-weight: 600; }
.pd-timeline .is-unreachable { opacity: .4; }

/* Filters --------------------------------------------------------------- */
.pd-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pd-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem;
  font-weight: 500; padding: 6px 13px; border-radius: var(--pd-radius-pill);
  border: 1px solid var(--pd-border-str); background: var(--pd-surface);
  color: var(--pd-text-soft); text-decoration: none; cursor: pointer;
  transition: var(--pd-transition);
}
.pd-chip:hover { background: var(--pd-n-100); border-color: var(--pd-n-400); }
.pd-chip[aria-pressed="true"], .pd-chip.is-active {
  background: var(--pd-primary); border-color: var(--pd-primary); color: var(--pd-white);
}

/* Notices --------------------------------------------------------------- */
.pd-notice {
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
  padding: 14px 16px; font-size: 0.875rem; background: var(--pd-surface-2);
  display: flex; gap: 12px; align-items: flex-start; line-height: 1.6;
}
.pd-notice-attention { background: var(--pd-attention-bg); border-color: var(--pd-attention-br); color: var(--pd-attention); }
.pd-notice-critical  { background: var(--pd-critical-bg);  border-color: var(--pd-critical-br);  color: var(--pd-critical); }
.pd-notice-positive  { background: var(--pd-positive-bg);  border-color: var(--pd-positive-br);  color: var(--pd-positive); }
.pd-notice-info      { background: var(--pd-info-bg);      border-color: var(--pd-info-br);      color: var(--pd-info); }
.pd-notice strong { font-weight: 700; }
.pd-notice a { color: inherit; text-decoration: underline; }

/* Hero — the site's blue gradient, dark enough for white text at AA. ----- */
.pd-hero {
  background: linear-gradient(160deg, var(--pd-brand-deep) 0%, var(--pd-primary-hover) 100%);
  color: var(--pd-white);
  padding: 76px 0 84px;
  position: relative;
  overflow: hidden;
}
.pd-hero::after {
  /* A single soft highlight. Restraint over decoration. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 78% 12%, rgb(255 255 255 / .13), transparent 70%);
}
.pd-hero > * { position: relative; z-index: 1; }
.pd-hero h1 { color: var(--pd-white); }
.pd-hero .pd-lede { color: rgb(255 255 255 / .84); }
.pd-hero .pd-eyebrow { color: rgb(255 255 255 / .70); }
.pd-hero .pd-btn-primary { background: var(--pd-white); color: var(--pd-primary-hover); }
.pd-hero .pd-btn-primary:hover { background: var(--pd-n-100); color: var(--pd-primary-hover); }
.pd-hero .pd-btn-secondary {
  background: rgb(255 255 255 / .10); color: var(--pd-white);
  border-color: rgb(255 255 255 / .34);
}
.pd-hero .pd-btn-secondary:hover { background: rgb(255 255 255 / .18); color: var(--pd-white); }
.pd-hero .pd-wordmark, .pd-hero .pd-wordmark span { color: var(--pd-white); }

/* Footer ---------------------------------------------------------------- */
.pd-footer {
  border-top: 1px solid var(--pd-border); background: var(--pd-surface);
  padding: 32px 0; margin-top: 64px; font-size: 0.8125rem; color: var(--pd-text-mute);
}
.pd-footer a { color: inherit; text-decoration: none; }
.pd-footer a:hover { color: var(--pd-primary); text-decoration: underline; }

/* Prose ----------------------------------------------------------------- */
.pd-prose { max-width: 68ch; line-height: 1.72; color: var(--pd-n-800); }
.pd-prose h2 { margin: 34px 0 12px; font-size: 1.1875rem; }
.pd-prose h3 { margin: 26px 0 8px; }
.pd-prose p + p { margin-top: 15px; }
.pd-prose ul, .pd-prose ol { margin: 12px 0; padding-left: 22px; }
.pd-prose li + li { margin-top: 8px; }
.pd-prose li::marker { color: var(--pd-n-400); }
.pd-prose a { color: var(--pd-primary); }

/* Print: agreements and reports should print cleanly. */
@media print {
  .pd-topbar, .pd-sidebar, .pd-footer, .pd-btn { display: none !important; }
  .pd { background: #fff; }
  .pd-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}


/* ---- File inputs -------------------------------------------------------
   `type="file"` renders a native button that ignores almost all styling and
   looks a decade old. The wrapper is styled as a drop target and the button
   part is restyled through ::file-selector-button so it matches pd-btn. */
.pd-file {
  width: 100%; font-family: inherit; font-size: 0.9375rem; color: var(--pd-text);
  background: var(--pd-n-50); border: 1px dashed var(--pd-border-str);
  border-radius: var(--pd-radius-sm); padding: 14px;
  transition: var(--pd-transition); cursor: pointer;
}
.pd-file:hover { border-color: var(--pd-primary); background: var(--pd-surface); }
.pd-file:focus-visible {
  border-color: var(--pd-primary); outline: none; box-shadow: var(--pd-focus);
}
.pd-file::file-selector-button {
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--pd-surface); background: var(--pd-primary);
  border: 0; border-radius: 999px; padding: 8px 16px; margin-right: 14px;
  cursor: pointer; transition: var(--pd-transition);
}
.pd-file::file-selector-button:hover { background: var(--pd-primary-hover); }