/* Lend-a-Hand section + interactive mini-demos — PleasePray redesign, Phase 4.
   Fully standalone: requires only tokens.css (shared color/radius/motion
   tokens) and components.css (.pp-eyebrow, .pp-store-chip) to be linked
   first. Deliberately does NOT depend on phone-demo.css's load order or
   its internals — the 2-3 iOS SMS-preview colors it needs are redeclared
   locally below instead of reused from there.

   Everything is scoped under the top-level .pp-lend class (put on the
   section itself) plus a `pp-lend-` prefix on every descendant class, so
   nothing here can leak onto/collide with the rest of the host page. */

.pp-lend {
  position: relative;
  padding: 100px 20px 120px;
  /* Local-only custom properties — approximate iOS system colors used by
     the SMS-preview bubbles in each demo panel. Not shared with/aliased to
     phone-demo.css's own copies on purpose (see file header). */
  --pp-lend-sms-link: #007AFF;
  --pp-lend-sms-bubble: #E9E9EB;
  --pp-lend-sms-text: #000;
  --pp-lend-panel: #15110C;
  --pp-lend-gold: #C2A24E;
  --pp-lend-gold-soft: #E6CF8E;
  --pp-lend-checkout-bg: #FBFAF6;
}

.pp-lend-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.pp-lend-head {
  max-width: 760px;
}

.pp-lend-h2 {
  margin: 16px 0 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.pp-lend-body {
  margin: 18px 0 0;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pp-lend [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Sticky-overlapping card stack (spec's `stack` values).

   At >=1080px every card pins at top:108px with increasing z-index, and
   22vh of scroll separates them, so each later card slides up over the
   one before it. Each card's folder tab sits 44px above its top edge at a
   staggered left offset (0 / 200 / 400px), so as the cards stack the three
   tabs line up left-to-right like a row of folder tabs. The last card is
   a full viewport tall (minus the pin offset) and centers its content, so
   it fully covers the earlier cards once it lands.

   Below 1080px the cards are ordinary blocks 64px apart, each with its
   tab flush left.
   --------------------------------------------------------------------- */

.pp-lend-stack {
  position: relative;
  margin-top: 96px;
}

.pp-lend-card {
  position: relative;
  color: var(--white);
  padding: 28px 20px;
  border-radius: 0 24px 24px 24px;
  box-shadow: 0 -10px 40px -24px rgba(34, 38, 46, 0.5);
  margin-bottom: 64px;
  box-sizing: border-box;
}
.pp-lend-card:last-child { margin-bottom: 0; }
.pp-lend-gap { display: none; }

.pp-lend-card--give { background: #4E66AB; z-index: 1; }
.pp-lend-card--serve { background: #42599A; z-index: 2; }
.pp-lend-card--meal {
  background: #364B88;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pp-lend-tab {
  position: absolute;
  top: -44px;
  left: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 14px 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.pp-lend-card--give .pp-lend-tab { background: #4E66AB; }
.pp-lend-card--serve .pp-lend-tab { background: #42599A; }
.pp-lend-card--meal .pp-lend-tab { background: #364B88; }
.pp-lend-tab iconify-icon { width: 18px; height: 18px; flex: none; }

.pp-lend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

@media (min-width: 1080px) {
  .pp-lend-card {
    position: sticky;
    /* --pp-lend-top / --pp-lend-h are set by the section's script so the
       stack (tabs included) sits centered in the space below the fixed
       header, and every card is the same height so each one fully covers
       the one beneath it. 108px / auto are the no-JS fallbacks. */
    top: var(--pp-lend-top, 108px);
    min-height: var(--pp-lend-h, auto);
    padding: 48px;
    margin-bottom: 0;
  }
  /* Scroll distance between cards. Spacer elements rather than card
     margins: a sticky card can't travel past its own margin, so margins
     would make the earlier cards let go before the last one. */
  .pp-lend-gap { display: block; height: 22vh; }
  .pp-lend-card--serve, .pp-lend-card--meal { border-radius: 24px; }

  /* When it fits (the section script adds .is-pin-head), the intro heading
     stays on screen while the cards stack beneath it. Otherwise it scrolls
     away normally; the cards never cover it.
     --pp-lend-head-top / --pp-lend-hm come from the section script: hm is
     an extra bottom margin that makes the heading let go at the same moment
     as the cards (a sticky box can't move past its own margin), and the
     stack's top margin subtracts it back so the layout doesn't change. */
  .pp-lend-inner.is-pin-head .pp-lend-head {
    position: sticky;
    top: var(--pp-lend-head-top, 92px);
    z-index: 0;
    margin-bottom: var(--pp-lend-hm, 0px);
  }
  .pp-lend-stack { margin-top: calc(96px - var(--pp-lend-hm, 0px)); }
  /* Room after the last card so Meal Plan lands and holds with all three
     tabs lined up before the section scrolls away. */
  .pp-lend-stack::after { content: ''; display: block; height: 40vh; }
  .pp-lend-card { display: flex; flex-direction: column; justify-content: center; }
  .pp-lend-card--serve .pp-lend-tab { left: 200px; }
  .pp-lend-card--meal .pp-lend-tab { left: 400px; }
  .pp-lend-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}

.pp-lend-h3 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pp-lend-card-body {
  margin: 16px 0 0;
  max-width: 520px;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.pp-lend-checklist {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.pp-lend-checklist li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pp-lend-check-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pp-lend-check-badge iconify-icon { width: 13px; height: 13px; }

.pp-lend-cta-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.pp-lend-android-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}
.pp-lend-android-link:hover { color: var(--white); text-decoration: underline; }

.pp-lend-disclaimer {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------------------------------------------------------------------
   Dark demo panel (shared shell for all 3 widgets — mounted by
   lend-demos.js, see mountGive/mountServe/mountMeal below).
   --------------------------------------------------------------------- */

.pp-lend-demo {
  position: relative;
  border-radius: 22px;
  background: var(--pp-lend-panel, #15110C);
  color: var(--white);
  padding: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.pp-lend-demo-glow {
  position: absolute;
  left: 50%;
  top: -140px;
  width: 380px;
  height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 128, 0.34), rgba(255, 176, 84, 0.08) 40%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.pp-lend-demo-inner { position: relative; }

.pp-lend-demo-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-lend-demo-saint-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(194, 162, 78, 0.16);
  box-shadow: 0 0 0 1.5px var(--pp-lend-gold, #C2A24E);
  color: var(--pp-lend-gold-soft, #E6CF8E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: none;
}
.pp-lend-demo-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-lend-gold, #C2A24E);
}
.pp-lend-demo-title { font-size: 20px; font-weight: 600; }

.pp-lend-demo-stats {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.pp-lend-demo-stats iconify-icon, .pp-lend-demo-stats .pp-lend-icon-inline { width: 14px; height: 14px; display: block; }
.pp-lend-demo-stats .pp-lend-dot { margin: 0 4px; }

.pp-lend-demo-progress {
  margin-top: 16px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.pp-lend-demo-progress-bar {
  height: 100%;
  background: var(--pp-lend-gold, #C2A24E);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-lend-demo-raised-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.pp-lend-demo-raised { font-weight: 600; }
.pp-lend-demo-need { color: rgba(255, 255, 255, 0.6); text-align: right; }

.pp-lend-demo-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pp-lend-demo-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Give: amount chips */
.pp-lend-chip-row { margin-top: 10px; display: flex; gap: 8px; }
.pp-lend-chip {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pp-lend-chip:hover { background: rgba(255, 255, 255, 0.12); }
.pp-lend-chip.is-active {
  background: var(--pp-lend-gold, #C2A24E);
  border-color: var(--pp-lend-gold, #C2A24E);
  color: var(--ink);
}

/* Give: tip toggle */
.pp-lend-tip-row {
  margin-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.pp-lend-tip-line { flex: 1; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.pp-lend-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s;
  flex: none;
}
.pp-lend-tip-row.is-on .pp-lend-switch { background: var(--pp-lend-gold, #C2A24E); }
.pp-lend-switch-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.2s;
}
.pp-lend-tip-row.is-on .pp-lend-switch-knob { transform: translateX(18px); }

/* Shared primary action button inside a demo panel */
.pp-lend-demo-btn-primary {
  margin-top: 16px;
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  border: 0;
  background: var(--pp-lend-gold, #C2A24E);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.pp-lend-demo-btn-primary.is-idle { opacity: 0.45; cursor: default; }
.pp-lend-demo-btn-primary:not(.is-idle):active { transform: scale(0.98); }
.pp-lend-slot-list + .pp-lend-demo-btn-primary { margin-top: 14px; }

.pp-lend-reset {
  margin-top: 12px;
  border: 0;
  background: none;
  padding: 6px 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-lend-gold-soft, #E6CF8E);
  cursor: pointer;
}
.pp-lend-reset:hover { text-decoration: underline; }

/* Entrance used by panels that appear on a step change (spec's ppSlideUp). */
.pp-lend-anim { animation: ppLendSlideUp 0.3s ease-out both; }
@keyframes ppLendSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

/* Checkout / confirmation card (light panel inside the dark demo) */
.pp-lend-checkout {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: var(--pp-lend-checkout-bg, #FBFAF6);
  color: var(--ink);
}
.pp-lend-checkout--meal { margin-top: 14px; padding: 14px; font-size: 14px; }
.pp-lend-checkout-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8F99;
}
.pp-lend-checkout-text { margin-top: 6px; }
.pp-lend-checkout-row {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}
.pp-lend-checkout-row--tip { margin-top: 6px; }
.pp-lend-checkout-row span:last-child { font-weight: 600; }
.pp-lend-checkout-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E4E2DB;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
}
.pp-lend-checkout-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }

/* SMS preview bubble */
.pp-lend-sms-label {
  margin-top: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pp-lend-sms-bubble {
  margin-top: 6px;
  border-radius: 18px;
  background: var(--pp-lend-sms-bubble, #E9E9EB);
  padding: 8px 14px;
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  color: var(--pp-lend-sms-text, #000);
}
.pp-lend-sms-bubble .pp-lend-sms-link { color: var(--pp-lend-sms-link, #007AFF); word-break: break-all; }

/* Serve: task row + day buttons */
.pp-lend-task-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pp-lend-task-name { font-size: 16px; font-weight: 600; }
.pp-lend-task-meta { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

.pp-lend-slot-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pp-lend-slot-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.pp-lend-slot-btn .pp-lend-slot-meta { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.pp-lend-slot-btn.is-selected {
  background: rgba(194, 162, 78, 0.16);
  border-color: var(--pp-lend-gold, #C2A24E);
}
.pp-lend-slot-btn.is-selected .pp-lend-slot-meta { color: var(--pp-lend-gold-soft, #E6CF8E); }
.pp-lend-slot-btn.is-full { opacity: 0.45; }
.pp-lend-slot-btn:disabled { cursor: default; }

/* Meal: task block, night grid + branch buttons */
.pp-lend-task-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pp-lend-task-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-lend-task-sub { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }

.pp-lend-night-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.pp-lend-night-btn {
  min-height: 64px;
  padding: 6px 0;
  border-radius: 12px;
  border: 1px solid rgba(194, 162, 78, 0.75);
  background: transparent;
  color: var(--white);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pp-lend-night-btn .pp-lend-night-d1 { font-size: 11px; font-weight: 600; }
.pp-lend-night-btn .pp-lend-night-d2 { font-size: 18px; font-weight: 700; line-height: 1.1; }
.pp-lend-night-btn .pp-lend-night-st { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.pp-lend-night-btn.is-covered {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}
.pp-lend-night-btn.is-selected {
  background: var(--pp-lend-gold, #C2A24E);
  border-color: var(--pp-lend-gold, #C2A24E);
  color: var(--ink);
}
.pp-lend-night-btn:disabled { cursor: default; }

.pp-lend-meal-prompt { margin: 12px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.65); }
.pp-lend-meal-sel { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }

.pp-lend-branch-row { margin-top: 10px; display: flex; gap: 8px; }
.pp-lend-branch-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  background: var(--pp-lend-gold, #C2A24E);
  color: var(--ink);
}
.pp-lend-branch-btn--ghost {
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--white);
}

.pp-lend-dropoff {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--pp-lend-checkout-bg, #FBFAF6);
  color: var(--ink);
}
.pp-lend-dropoff-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8F99;
}
.pp-lend-dropoff-addr {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}
.pp-lend-dropoff-addr iconify-icon { width: 16px; height: 16px; display: block; color: var(--gold-dark); }
.pp-lend-dropoff-contact { margin-top: 4px; font-size: 13.5px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .pp-lend-anim { animation: none; }
  .pp-lend-demo-progress-bar, .pp-lend-switch, .pp-lend-switch-knob { transition: none; }
}