/* Concept C: Search and found. One card over a blurred sample-photo neighborhood, a search modal,
   then the visitor's home becomes the full background with a confirm card. */

body.concept-c { background: #0a1c38; position: relative; min-height: 100vh; min-height: 100dvh; }
.cc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cc-blur { inset: -40px; filter: blur(14px) saturate(1.05); transition: opacity .9s ease; }
.cc-house { opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 1.6s ease; }
.cc-scrim {
  position: absolute; inset: 0; transition: background .9s ease;
  background: radial-gradient(120% 90% at 50% 20%, rgba(10, 28, 56, .38) 0%, rgba(10, 28, 56, .62) 100%);
}
body[data-found] .cc-blur { opacity: 0; }
body[data-found] .cc-house { opacity: 1; transform: none; }
body[data-found] .cc-scrim { background: linear-gradient(180deg, rgba(10, 24, 46, .42) 0%, rgba(10, 24, 46, 0) 24%, rgba(10, 24, 46, 0) 58%, rgba(10, 24, 46, .3) 100%); }

.cc-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 16px 20px; }
.cc-illus { position: absolute; z-index: 2; right: 12px; top: 64px; bottom: auto; }

.cc-main {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); padding: 8px 14px 18px;
}
.cc-card {
  width: 100%; max-width: 580px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
  padding: 22px 18px; display: flex; flex-direction: column; gap: 14px;
}
.cc-card h1 { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.cc-sub { font-size: 15px; color: var(--muted); }
.cc-form { display: flex; flex-direction: column; gap: 14px; }
.cc-chips .field-label { margin-bottom: 8px; }
.cc-chip-row { display: flex; flex-direction: column; gap: 8px; }
.cc-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 10px;
}
.cc-chip-q { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.cc-seg { display: inline-flex; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; gap: 2px; margin-left: auto; }
.cc-seg button {
  border: 0; background: transparent; border-radius: 999px; padding: 7px 9px; min-height: 36px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.cc-seg button:hover { color: var(--ink); background: var(--blue-soft); }
.cc-seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.cc-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
.cc-submit { white-space: nowrap; }
.cc-form .field-error, .cc-form .field-hint { margin-top: -6px; }

.cc-footer { width: 100%; max-width: 580px; text-align: center; }
.cc-footer .legal-links { justify-content: center; }

/* found */
body[data-screen="found"] .cc-main, body[data-screen="handoff"] .cc-main { justify-content: flex-end; }
.cc-found { max-width: 440px; animation: shf-in .5s ease both; }
.cc-found-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--green); background: #e9f7ee; padding: 5px 12px 5px 8px; border-radius: 99px; }
.cc-found-pill svg { width: 16px; height: 16px; }
.cc-found-city { color: var(--muted); margin-top: -8px; }
.cc-found .btn--ghost { align-self: center; }

/* modal */
.cc-modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 16, 31, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: cc-fade .3s ease both;
}
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
.cc-modal-card {
  width: min(380px, 100%); background: #fff; border-radius: 24px; padding: 28px 24px 24px; text-align: center;
  box-shadow: 0 30px 70px -20px rgba(2, 20, 50, .55); display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: shf-in .35s ease both;
}
.cc-modal-card:focus { outline: none; }
.cc-radar { position: relative; width: 140px; height: 140px; margin-bottom: 10px; }
.cc-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(0, 112, 255, .35); transform: translate(-50%, -50%); }
.cc-ring.r1 { width: 46px; height: 46px; } .cc-ring.r2 { width: 92px; height: 92px; } .cc-ring.r3 { width: 138px; height: 138px; background: radial-gradient(circle, rgba(232, 241, 255, .9), rgba(232, 241, 255, .3)); }
.cc-sweep {
  position: absolute; inset: 1px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 112, 255, .45), rgba(0, 112, 255, 0) 30%);
  animation: shf-spin 1.8s linear infinite;
}
.cc-pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; color: var(--blue-bright); transform: translate(-50%, -100%); animation: cc-drop 1.2s .2s ease both; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
@keyframes cc-drop { 0% { transform: translate(-50%, -260%); opacity: 0; } 60% { transform: translate(-50%, -90%); opacity: 1; } 100% { transform: translate(-50%, -100%); } }
.cc-done { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--green); color: #fff; display: none; place-items: center; }
.cc-done svg { width: 38px; height: 38px; }
.cc-modal[data-phase="found"] .cc-ring, .cc-modal[data-phase="found"] .cc-sweep, .cc-modal[data-phase="found"] .cc-pin { display: none; }
.cc-modal[data-phase="found"] .cc-done { display: grid; animation: cc-pop .5s ease both; }
@keyframes cc-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.cc-modal-kicker { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-bright); }
.cc-modal-card h2 { font-size: 21px; line-height: 1.25; font-weight: 700; }
.cc-modal-addr { font-size: 14px; color: var(--muted); }
.cc-modal-progress { width: 100%; margin: 8px 0 6px; }
.cc-modal-progress > span { animation: shf-fill 2.4s ease-in-out forwards; }
.cc-modal[data-phase="found"] .cc-modal-progress > span { width: 100%; background: var(--green); animation: none; }
.cc-checklist { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cc-checklist li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.cc-checklist li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9d5e6; flex: none; }
.cc-checklist li[data-done]::before {
  border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.cc-checklist li[data-done] { color: var(--ink); }

@media (min-width: 560px) {
  .cc-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .cc-submit { width: auto; padding-inline: 22px; }
  .cc-card { padding: 28px; }
}
@media (min-width: 768px) {
  .cc-header { padding: 24px 40px; }
  .cc-illus { right: 40px; top: 84px; }
  .cc-main { min-height: calc(100vh - 84px); min-height: calc(100dvh - 84px); padding: 8px 40px 28px; }
  .cc-card h1 { font-size: 34px; }
  body[data-screen="handoff"] .cc-card { max-width: 520px; }
}
@media (min-width: 1024px) {
  body[data-screen="found"] .cc-main, body[data-screen="handoff"] .cc-main { align-items: flex-start; justify-content: center; }
  body[data-screen="found"] .cc-footer, body[data-screen="handoff"] .cc-footer { align-self: flex-start; }
}

body[data-screen="handoff"] .cc-illus { display: none; }