/* Portrait Public Panel — mobile-first (brief Phase 2: phones are the
   PRIMARY target for this surface; desktop enhances). Skeleton rows render
   a lock treatment over NOTHING — locked evidence never reaches the page. */

.pp-search, .pp-report { max-width: 100%; font-size: 16px; }

/* search */
.pp-searchbox { position: relative; }
.pp-input {
  width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid #d5dbe4;
  border-radius: 10px; outline: none; transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box; background: #fff;
}
.pp-input:focus { border-color: #253c58; box-shadow: 0 0 0 3px rgba(37,60,88,.15); }

/* item 7 — the search field is the page's primary call-to-action: a bold
   amber pill, larger and more inviting than a plain input. */
.pp-searchbox .pp-input {
  padding: 18px 26px; font-size: 17px; font-weight: 500;
  border: 3px solid #FFBF00; border-radius: 999px;
  box-shadow: 0 8px 26px rgba(16,24,40,.22);
}
.pp-searchbox .pp-input::placeholder { color: #9aa4b2; font-weight: 400; }
.pp-searchbox .pp-input:focus {
  border-color: #FFBF00;
  box-shadow: 0 0 0 4px rgba(255,191,0,.28), 0 8px 26px rgba(16,24,40,.22);
}
/* Overlay dropdown: absolutely positioned under the input so it floats over
   following content instead of expanding the container / pushing the page
   down. Internal scroll (max-height + overflow-y) preserved. z-index sits
   above page content but well below fixed chat/overlay widgets (z ~9999+). */
.pp-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid #d5dbe4;
  border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.14);
  /* Outer rounded shell CLIPS its content (incl. the scrollbar's visual
     bounds) to the rounded corners — removes the white sliver a square
     native scrollbar left against the radius. Scroll lives on the inner. */
  overflow: hidden;
}
.pp-dropdown-scroll {
  max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Neat scrollbar that sits flush (belt-and-braces with the clip above). */
  scrollbar-width: thin; scrollbar-color: #c7cfda transparent;
}
.pp-dropdown-scroll::-webkit-scrollbar { width: 9px; }
.pp-dropdown-scroll::-webkit-scrollbar-track { background: transparent; }
.pp-dropdown-scroll::-webkit-scrollbar-thumb {
  background: #c7cfda; border-radius: 8px; border: 2px solid #fff;
}
@media (max-width: 480px) {
  /* Small screens: keep the overlay within the viewport height. */
  .pp-dropdown-scroll { max-height: 55vh; }
}
.pp-drop-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 12px 14px; border: 0; border-bottom: 1px solid #eef1f5; background: #fff;
  cursor: pointer; transition: background .15s;
}
.pp-drop-row:hover, .pp-drop-row:focus { background: #f4f7fb; }
.pp-drop-addr { font-weight: 600; color: #1a2233; }
.pp-drop-desc { font-size: 13px; color: #5c6675; }
.pp-drop-empty { padding: 14px; color: #5c6675; font-size: 14px; }
.pp-badge {
  align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pp-badge-saving { background: #e7f7ef; color: #157a4c; }
.pp-badge-neutral { background: #eef1f5; color: #5c6675; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pp-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #253c58; color: #fff;
  padding: 6px 8px 6px 12px; border-radius: 999px; font-size: 13px;
  animation: pp-pop .25s ease;
}
/* item 5 — the remove (×) glyph flex-centred in its oval. */
.pp-chip-x {
  border: 0; background: rgba(255,255,255,.25); color: #fff; border-radius: 50%;
  width: 20px; height: 20px; padding: 0; line-height: 1; cursor: pointer;
  font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
/* item 6 — give the primary button's amber glow room to fall off softly. */
.pp-actions { margin-top: 14px; padding-bottom: 18px; }
.pp-cap-note { margin-top: 10px; font-size: 13px; color: #8a5b00; background: #fff7e6; border-radius: 8px; padding: 10px 12px; }
.pp-btn {
  border: 0; border-radius: 10px; padding: 14px 22px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: transform .12s ease, box-shadow .2s; width: 100%;
}
.pp-btn:active { transform: scale(.98); }
.pp-btn-primary { background: #FFC53D; color: #1a2233; box-shadow: 0 6px 24px rgba(255,191,0,.45), 0 2px 8px rgba(255,191,0,.22); }
.pp-btn-primary:hover { box-shadow: 0 10px 32px rgba(255,191,0,.55), 0 3px 10px rgba(255,191,0,.3); }

/* progress */
.pp-progress { height: 4px; border-radius: 4px; background: #eef1f5; overflow: hidden; margin-top: 8px; }
/* item 4 — brand amber loading bar, matching the platform's other
   progress indicators. */
.pp-progress-bar {
  height: 100%; width: 38%; border-radius: 4px; background: linear-gradient(90deg,#FFBF00,#FFD24D);
  animation: pp-indeterminate 1.1s ease-in-out infinite;
}
.pp-loader { padding: 26px 0; }
.pp-loader-title { font-size: 17px; font-weight: 600; color: #1a2233; margin-bottom: 10px; }

/* report cards */
.pp-card {
  background: #fff; border: 1px solid #e4e8ee; border-radius: 14px; padding: 18px;
  margin: 14px 0; box-shadow: 0 2px 10px rgba(16,24,40,.05);
}
.pp-fade { opacity: 0; transform: translateY(10px); animation: pp-in .45s ease forwards; }
.pp-agg-head { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: #5c6675; }
.pp-agg-rv { font-size: 22px; font-weight: 800; color: #1a2233; margin: 4px 0 8px; }
.pp-addr { font-size: 19px; margin: 0 0 2px; color: #1a2233; }
.pp-desc { color: #5c6675; font-size: 14px; margin-bottom: 8px; }
.pp-facts { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: #38404d; margin-bottom: 10px; }
.pp-pill { border-radius: 10px; padding: 10px 14px; font-size: 15px; margin-top: 4px; }
.pp-pill-saving { background: #e7f7ef; color: #11603c; font-weight: 700; }
.pp-pill-cta { background: #eef4ff; color: #24457a; }
.pp-pill-cta a { color: #24457a; font-weight: 700; }
.pp-opps { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.pp-opp { background: #fff2d6; color: #7a5200; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.pp-h3 { font-size: 16px; margin: 18px 0 8px; color: #1a2233; }

/* teaser tables + skeletons */
.pp-tease { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.pp-table th {
  text-align: left; padding: 8px; color: #5c6675; font-weight: 600;
  border-bottom: 2px solid #e4e8ee; white-space: nowrap;
}
.pp-table td { padding: 9px 8px; border-bottom: 1px solid #eef1f5; color: #1a2233; }
.pp-row-real { background: #fbfdff; }
.pp-row-skeleton td { padding: 9px 8px; }
.pp-skel {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg,#eef1f5 25%,#e0e5ec 45%,#eef1f5 65%);
  background-size: 200% 100%; animation: pp-shimmer 1.4s infinite; filter: blur(1px);
}
.pp-lock-note { font-size: 13px; color: #5c6675; padding: 8px 2px; }

/* comparables */
.pp-comps { display: grid; gap: 8px; }
.pp-comp {
  display: flex; flex-direction: column; gap: 2px; border: 1px solid #eef1f5;
  border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #38404d;
}
.pp-comp b { color: #1a2233; font-size: 14px; }
.pp-comp-rv { font-weight: 700; color: #157a4c; }
.pp-comp-locked { background: #f7f9fc; color: #5c6675; border-style: dashed; }
.pp-map { height: 260px; border-radius: 12px; margin-top: 10px; background: #eef1f5; }

/* lead capture + disclaimer */
.pp-lead-form { display: grid; gap: 10px; margin-top: 8px; }
.pp-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #38404d; }
.pp-consent input { margin-top: 2px; }
.pp-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }
.pp-disclaimer {
  font-size: 12px; color: #7a828e; margin: 18px 0 8px; padding: 12px 14px;
  background: #f7f9fc; border-radius: 10px; line-height: 1.5;
}
.pp-empty { padding: 22px; text-align: center; color: #5c6675; }
.pp-muted { color: #5c6675; font-size: 14px; }
.pp-hidden { display: none !important; }

@keyframes pp-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 105%; } }
@keyframes pp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pp-in { to { opacity: 1; transform: none; } }
@keyframes pp-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* desktop enhancements */
@media (min-width: 720px) {
  .pp-btn { width: auto; }
  .pp-card { padding: 24px; }
  .pp-addr { font-size: 22px; }
  .pp-comps { grid-template-columns: repeat(2, 1fr); }
  .pp-map { height: 340px; }
  .pp-lead-form { grid-template-columns: 1fr 1fr; }
  .pp-lead-form .pp-consent, .pp-lead-form .pp-btn { grid-column: 1 / -1; }
}

/* Phase 3: upload control */
.pp-file { display: block; width: 100%; padding: 12px; border: 2px dashed #d5dbe4; border-radius: 10px; background: #f9fafc; font-size: 14px; box-sizing: border-box; margin-top: 8px; }
.pp-file:hover { border-color: #253c58; }

/* Phase 4: sign-up form */
.pp-signup-form { display: grid; gap: 10px; margin-top: 12px; }
.pp-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #38404d; font-weight: 600; }
.pp-sig { border: 2px dashed #d5dbe4; border-radius: 10px; background: #fff; width: 100%; touch-action: none; }
.pp-sig-clear { margin-top: 6px; }
.pp-btn-ghost { background: #eef1f5; color: #38404d; box-shadow: none; padding: 8px 14px; font-size: 13px; width: auto; }
@media (min-width: 720px) {
  .pp-signup-form { grid-template-columns: 1fr 1fr; }
  .pp-signup-form .pp-sig-field, .pp-signup-form .pp-consent, .pp-signup-form .pp-btn[type=submit] { grid-column: 1 / -1; }
}

/* Phase 6: share + cross-sell */
.pp-share-row { display: flex; gap: 8px; margin-top: 8px; }
.pp-share-row .pp-input { flex: 1; font-size: 13px; }
.pp-share-row .pp-btn { width: auto; white-space: nowrap; }
.pp-share a { color: #24457a; font-weight: 600; }

/* item 2 — in-page booking (real Bitform id 8) revealed in the routing card */
.pp-booking-embed { margin-top: 12px; }
.pp-route .pp-booking-embed form { max-width: 100%; }

/* Task 1 — Book Survey page: in-page eligibility result (survey/sign-up embed) */
.pp-book-result { margin-top: 4px; }
.pp-signup-embed, .pp-booking-embed { margin-top: 4px; }