/* ============================================================
   ProviderPath — Design System
   providerpath.org · v1.0 · Locked palette (2026-08-23)

   Load order:
     1. This file
     2. Google Fonts: Source Serif 4 (400,600,700) + Work Sans (400,500,600)

   <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Surfaces */
  --pp-canvas:        #F9F7F2;  /* Warm Cream — page background */
  --pp-surface:       #FFFFFF;  /* Soft White — cards, panels */
  --pp-surface-2:     #F0EDE6;  /* Warm Gray — insets, field fills */
  --pp-line:          #E5E1D8;  /* Border */
  --pp-line-strong:   #D8D2C4;  /* Derived — input outlines */

  /* Text */
  --pp-ink-900:       #2C2C2A;  /* Warm Charcoal — headings, body */
  --pp-ink-700:       #5C5C58;  /* Supporting text, labels */
  --pp-ink-500:       #8A8A85;  /* Placeholders and disabled text ONLY — 3.24:1 on cream, never body copy */
  --pp-ink-300:       #B5B5AF;  /* Derived — disabled text */

  /* Sage */
  --pp-sage-900:      #2F4A3B;  /* Derived — dark panels */
  --pp-sage-800:      #3D6151;  /* Derived — headings on tinted surfaces */
  --pp-sage-700:      #4A7260;  /* Primary Dark — button fills, hover (5.5:1 on white) */
  --pp-sage-600:      #5B8A72;  /* Primary — progress, success, focus ring. NOT for text: 3.68:1 on cream */
  --pp-sage-400:      #9CBCA9;  /* Derived — connector lines */
  --pp-sage-200:      #C7DACE;  /* Derived — tinted borders; as text, only on sage-900 (6.6:1), never on sage-700 */
  --pp-sage-100:      #E8F0EC;  /* Sage Mist — selected backgrounds, progress track */
  --pp-sage-50:       #F2F7F4;  /* Derived — quiet panels */

  /* Sky */
  --pp-sky-700:       #3F6E97;  /* Derived — link text (5.40:1 white · 5.04:1 cream) */
  --pp-sky-500:       #6B9AC4;  /* Accent Blue — icons, decorative fills */
  --pp-sky-100:       #E6EEF6;  /* Derived — informational notice background */

  /* Clay */
  --pp-clay-700:      #9E6353;  /* Derived — coral text */
  --pp-clay-500:      #D4A59A;  /* Muted Coral — gentle highlights */
  --pp-clay-100:      #F7ECE8;  /* Derived — notice background */

  /* Semantic */
  --pp-success:       #5B8A72;
  --pp-warning:       #D4A84B;
  --pp-error:         #C17B6B;
  --pp-error-text:    #9E5341;  /* Derived — error copy (5.57:1 white · 5.21:1 cream) */
  --pp-error-bg:      #F7EAE6;
  --pp-focus:         #5B8A72;

  /* Type */
  --pp-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pp-sans:  'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pp-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --pp-fs-display: 54px;
  --pp-fs-h1:      36px;
  --pp-fs-h2:      28px;
  --pp-fs-h3:      21px;
  --pp-fs-lead:    21px;
  --pp-fs-body:    19px;
  --pp-fs-small:   16px;
  --pp-fs-eyebrow: 13px;

  /* Space — 4px base */
  --pp-s1:  4px;  --pp-s2:  8px;  --pp-s3: 12px; --pp-s4: 16px;
  --pp-s5: 24px;  --pp-s6: 32px;  --pp-s7: 40px; --pp-s8: 56px;
  --pp-s9: 72px;  --pp-s10: 96px;

  /* Radius */
  --pp-r-sm:   8px;   /* small controls */
  --pp-r-md:  12px;   /* buttons, inputs */
  --pp-r-lg:  16px;   /* cards */
  --pp-r-xl:  24px;   /* full panels */
  --pp-r-full: 999px;

  /* Elevation */
  --pp-shadow-soft: 0 1px 2px rgba(60,50,38,.05), 0 2px 8px rgba(60,50,38,.04);
  --pp-shadow-lift: 0 2px 4px rgba(60,50,38,.06), 0 10px 28px rgba(60,50,38,.07);

  /* Layout */
  --pp-shell:  1180px;  /* desktop page shell */
  --pp-column:  680px;  /* reading column inside guided paths */
  --pp-rail:    260px;  /* step rail */
}

/* ---------- 2. Base ---------- */

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

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

body {
  margin: 0;
  background: var(--pp-canvas);
  color: var(--pp-ink-900);
  font-family: var(--pp-sans);
  font-size: var(--pp-fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 { font-family: var(--pp-serif); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--pp-fs-h1); line-height: 1.18; letter-spacing: -0.018em; }
h2 { font-size: var(--pp-fs-h2); line-height: 1.25; letter-spacing: -0.015em; }
h3 { font-family: var(--pp-sans); font-weight: 600; font-size: var(--pp-fs-h3); line-height: 1.4; margin: 0; }

p { margin: 0 0 var(--pp-s4); max-width: 66ch; text-wrap: pretty; }

a { color: var(--pp-sky-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--pp-sage-700); }

:focus-visible {
  outline: 2px solid var(--pp-focus);
  outline-offset: 2px;
  border-radius: var(--pp-r-sm);
}

.pp-display { font-family: var(--pp-serif); font-weight: 600; font-size: var(--pp-fs-display); line-height: 1.12; letter-spacing: -0.022em; }
.pp-lead    { font-size: var(--pp-fs-lead); line-height: 1.65; color: var(--pp-ink-700); max-width: 46ch; }
.pp-small   { font-size: var(--pp-fs-small); line-height: 1.6; color: var(--pp-ink-700); }
.pp-muted   { color: var(--pp-ink-700); }   /* NOT ink-500 — that fails AA on cream */
.pp-eyebrow {
  font-size: var(--pp-fs-eyebrow); font-weight: 600; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pp-sage-700);
}

/* ---------- 3. Layout ---------- */

.pp-shell { max-width: var(--pp-shell); margin: 0 auto; padding: 0 var(--pp-s7); }
.pp-section { margin: 0 0 var(--pp-s9); }
.pp-stack   { display: flex; flex-direction: column; gap: var(--pp-s5); }
.pp-row     { display: flex; align-items: center; gap: var(--pp-s4); }
.pp-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-s5); }
.pp-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pp-s4); }

/* Guided path: step rail + reading column */
.pp-path-layout {
  display: grid;
  grid-template-columns: var(--pp-rail) minmax(0, var(--pp-column));
  gap: var(--pp-s8);
  align-items: start;
}

/* ---------- 4. Buttons ---------- */

.pp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pp-s2);
  height: 56px; padding: 0 30px;
  border: 0; border-radius: var(--pp-r-md);
  font: 600 18px/1 var(--pp-sans);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.pp-btn--primary   { background: var(--pp-sage-700); color: #fff; box-shadow: var(--pp-shadow-soft); }
.pp-btn--primary:hover { background: var(--pp-sage-800); }

.pp-btn--secondary { background: transparent; color: var(--pp-sage-700); border: 1.5px solid var(--pp-sage-700); }
.pp-btn--secondary:hover { background: var(--pp-sage-50); }

.pp-btn--quiet {
  background: transparent; color: var(--pp-sky-700);
  padding: 0 22px; text-decoration: underline; text-underline-offset: 4px;
}
.pp-btn--quiet:hover { color: var(--pp-sage-700); }

.pp-btn--lg { height: 64px; padding: 0 34px; font-size: 19px; }
.pp-btn--sm {
  height: 44px; padding: 0 20px; font: 500 16px/1 var(--pp-sans);
  border-radius: var(--pp-r-sm); border: 1.5px solid var(--pp-line-strong);
  background: var(--pp-surface); color: var(--pp-ink-900);
}
.pp-btn--block { width: 100%; height: 60px; font-size: 19px; }

/* On a sage-700 fill (.pp-card--primary) the standard primary button would be
   invisible — it inverts to a cream fill with a dark sage label (6.24:1). */
.pp-btn--on-primary,
.pp-card--primary .pp-btn--primary {
  background: var(--pp-canvas); color: var(--pp-sage-800); box-shadow: none;
}
.pp-btn--on-primary:hover,
.pp-card--primary .pp-btn--primary:hover { background: #fff; color: var(--pp-sage-900); }

.pp-card--primary .pp-btn--secondary,
.pp-card--dark .pp-btn--secondary {
  color: #fff; border-color: rgba(255,255,255,.55);
}
.pp-card--primary .pp-btn--secondary:hover,
.pp-card--dark .pp-btn--secondary:hover { background: rgba(255,255,255,.12); }

.pp-btn:disabled,
.pp-btn[aria-disabled="true"] {
  background: var(--pp-surface-2); color: var(--pp-ink-300);
  border-color: transparent; box-shadow: none; cursor: not-allowed;
}

/* ---------- 5. Cards & notices ---------- */

.pp-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  padding: var(--pp-s6);
  box-shadow: var(--pp-shadow-soft);
}
.pp-card--flat  { box-shadow: none; }
.pp-card--panel { border-radius: var(--pp-r-xl); padding: var(--pp-s8); }
.pp-card--done  { background: var(--pp-sage-50); border-color: var(--pp-sage-200); box-shadow: none; }
.pp-card--dark  { background: var(--pp-sage-900); border-color: transparent; color: #fff; }
.pp-card--dark h1, .pp-card--dark h2 { color: #fff; }
.pp-card--dark p  { color: var(--pp-sage-200); }
.pp-card--dark .pp-eyebrow { color: var(--pp-sage-400); }

/* Primary-fill card: sage-700 background. Text must be near-white — sage-200 measures 3.7:1 here. */
.pp-card--primary { background: var(--pp-sage-700); border-color: transparent; color: #fff; box-shadow: var(--pp-shadow-lift); }
.pp-card--primary h1, .pp-card--primary h2 { color: #fff; }
.pp-card--primary p { color: #E4EEE8; }
.pp-card--primary .pp-eyebrow { color: var(--pp-sage-50); }

.pp-step-num {
  flex: none; width: 48px; height: 48px; border-radius: var(--pp-r-full);
  display: flex; align-items: center; justify-content: center;
  font: 600 20px/1 var(--pp-sans);
  background: var(--pp-sage-100); color: var(--pp-sage-800);
}
.pp-step-num--done    { background: var(--pp-sage-700); color: #fff; }
.pp-step-num--current { background: var(--pp-surface); color: var(--pp-sage-800); border: 2.5px solid var(--pp-sage-700); }
.pp-step-num--todo    { background: var(--pp-surface-2); color: var(--pp-ink-500); }

.pp-notice {
  border-radius: var(--pp-r-lg);
  padding: var(--pp-s5) 26px;
}
.pp-notice__title { font: 600 15px/1.4 var(--pp-sans); margin: 0 0 var(--pp-s2); }
.pp-notice p { margin: 0; color: var(--pp-ink-700); font-size: var(--pp-fs-small); line-height: 1.6; }

.pp-notice--info    { background: var(--pp-sky-100); }
.pp-notice--info    .pp-notice__title { color: var(--pp-sky-700); }
.pp-notice--caution { background: var(--pp-clay-100); }
.pp-notice--caution .pp-notice__title { color: var(--pp-clay-700); }
.pp-notice--error   { background: var(--pp-error-bg); }
.pp-notice--error   .pp-notice__title { color: var(--pp-error-text); }

/* ---------- 6. Forms ---------- */

.pp-field { margin: 0 0 26px; }
.pp-label { display: block; font: 600 17px/1.4 var(--pp-sans); margin: 0 0 var(--pp-s2); }
.pp-help  { font-size: var(--pp-fs-small); line-height: 1.6; color: var(--pp-ink-700); margin: 10px 0 0; }
.pp-error { font-size: var(--pp-fs-small); line-height: 1.6; color: var(--pp-error-text); margin: 10px 0 0; }

.pp-input, .pp-select {
  width: 100%; height: 60px; padding: 0 18px;
  border: 1.5px solid var(--pp-line-strong);
  border-radius: var(--pp-r-md);
  background: var(--pp-surface);
  font: 400 19px/1 var(--pp-sans);
  color: var(--pp-ink-900);
}
.pp-input::placeholder { color: var(--pp-ink-500); }
.pp-input:focus, .pp-select:focus { border-color: var(--pp-sage-600); outline: none; box-shadow: 0 0 0 3px rgba(91,138,114,.22); }
.pp-input[aria-invalid="true"] { border-color: var(--pp-error); }
.pp-select { appearance: none; padding-right: 44px; }

/* Checklist row — whole row is the target */
.pp-check {
  display: flex; align-items: center; gap: 18px;
  min-height: 64px; padding: 0 20px;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-line-strong);
  border-radius: var(--pp-r-md);
  font-size: 18px; line-height: 1.5;
  cursor: pointer;
}
.pp-check + .pp-check { margin-top: var(--pp-s3); }
.pp-check__box {
  flex: none; width: 30px; height: 30px; border-radius: var(--pp-r-sm);
  border: 1.5px solid var(--pp-line-strong); background: var(--pp-surface);
  display: flex; align-items: center; justify-content: center;
  font: 600 17px/1 var(--pp-sans); color: transparent;
}
.pp-check[data-checked="true"] {
  background: var(--pp-sage-50);
  border-color: var(--pp-sage-200);
  color: var(--pp-sage-800);
}
.pp-check[data-checked="true"] .pp-check__box {
  background: var(--pp-sage-700); border-color: var(--pp-sage-700); color: #fff;
}

/* ---------- 7. Progress ---------- */

.pp-progress {
  height: 12px; border-radius: var(--pp-r-full);
  background: var(--pp-surface-2); overflow: hidden;
}
.pp-progress__fill {
  height: 100%; border-radius: var(--pp-r-full);
  background: var(--pp-sage-600);
  transition: width .4s ease;
}

.pp-steps { display: flex; align-items: flex-start; }
.pp-steps__item {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--pp-s3);
  text-align: center;
}
.pp-steps__item::after {
  content: ""; position: absolute; top: 22px; left: 50%;
  width: 100%; height: 2px; background: var(--pp-line-strong);
}
.pp-steps__item:last-child::after { display: none; }
.pp-steps__item[data-state="done"]::after { background: var(--pp-sage-400); }
.pp-steps__dot {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: var(--pp-r-full);
  display: flex; align-items: center; justify-content: center;
  font: 600 18px/1 var(--pp-sans);
  background: var(--pp-surface-2); color: var(--pp-ink-500);
}
.pp-steps__item[data-state="done"]    .pp-steps__dot { background: var(--pp-sage-700); color: #fff; }
.pp-steps__item[data-state="current"] .pp-steps__dot { background: var(--pp-surface); color: var(--pp-sage-800); border: 2.5px solid var(--pp-sage-700); }
.pp-steps__label { font: 500 15px/1.4 var(--pp-sans); color: var(--pp-ink-700); max-width: 14ch; }
.pp-steps__item[data-state="current"] .pp-steps__label { font-weight: 600; color: var(--pp-sage-800); }

.pp-deadline {
  display: flex; align-items: center; gap: var(--pp-s4);
  min-height: 56px; padding: 0 18px;
  background: var(--pp-surface-2); border-radius: var(--pp-r-md);
  font: 500 17px/1.4 var(--pp-sans);
}
.pp-deadline + .pp-deadline { margin-top: var(--pp-s3); }
.pp-deadline__dot { flex: none; width: 10px; height: 10px; border-radius: var(--pp-r-full); background: var(--pp-ink-300); }
.pp-deadline__when { margin-left: auto; font: 600 16px/1.4 var(--pp-sans); color: var(--pp-ink-700); }
.pp-deadline--soon { background: var(--pp-clay-100); }
.pp-deadline--soon .pp-deadline__dot  { background: var(--pp-clay-500); }
.pp-deadline--soon .pp-deadline__when { color: var(--pp-clay-700); }

/* ---------- 8. Chips & pills ---------- */

.pp-chip {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 14px;
  border-radius: var(--pp-r-full);
  background: var(--pp-surface-2); color: var(--pp-ink-700);
  font: 400 15px/1 var(--pp-sans);
}
.pp-pill {
  display: inline-flex; align-items: center; gap: var(--pp-s2);
  height: 36px; padding: 0 14px;
  border-radius: var(--pp-r-full);
  background: var(--pp-sage-50); border: 1px solid var(--pp-sage-200);
  font: 600 14px/1 var(--pp-sans); color: var(--pp-sage-800);
}

/* ---------- 9. Responsive ---------- */

@media (max-width: 1023px) {
  .pp-path-layout { grid-template-columns: minmax(0, 1fr); gap: var(--pp-s6); }
  .pp-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 719px) {
  :root {
    --pp-fs-display: 34px;
    --pp-fs-h1:      28px;
    --pp-fs-h2:      24px;
    --pp-fs-lead:    19px;
    --pp-fs-body:    18px;   /* mobile floor — never lower */
  }
  .pp-shell   { padding: 0 20px; }
  .pp-section { margin: 0 0 var(--pp-s8); }
  .pp-grid-2, .pp-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pp-card    { padding: var(--pp-s5); }
  .pp-card--panel { padding: var(--pp-s6) var(--pp-s5); }
  .pp-btn     { width: 100%; height: 60px; font-size: 19px; }
  .pp-btn--sm { width: auto; height: 44px; font-size: 16px; }
  .pp-steps   { display: none; }   /* replaced by the linear bar on mobile */
}

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

/* ---------- 10. Print ---------- */

@media print {
  body { background: #fff; font-size: 12pt; }
  .pp-btn, nav, .pp-no-print { display: none !important; }
  .pp-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .pp-check { break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}