/* url-onboard.css — "Paste your URL" onboarding (component-scoped, uo- prefix).
   Loaded on index.html alongside homepage-v7.css + main.css (design tokens
   available). All selectors are uo-scoped to avoid the homepage-v7.css cascade
   traps documented in CLAUDE.md. */

.uo-container,
.uo-container * { box-sizing: border-box; }

/* ── Slim inline "paste your website" bar (3rd option, under both cards) ──── */
.uo-hero, .uo-hero * { box-sizing: border-box; }
.uo-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 10px 8px 14px;
  border: 1.5px solid rgba(45,106,79,0.32);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(45,106,79,0.06), rgba(45,106,79,0.02));
}
.uo-hero__lead {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--forest-mid, #2d6a4f);
  white-space: nowrap;
}
.uo-hero__icon { width: 15px; height: 15px; }
.uo-hero__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border, #d6d3cd);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px; /* ≥16px avoids iOS zoom */
  background: #fff;
  color: var(--ink, #1c1917);
}
.uo-hero__input:focus {
  outline: none;
  border-color: var(--forest-mid, #2d6a4f);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.15);
}
.uo-hero__input--err { border-color: #b91c1c; }
.uo-hero__go {
  flex: 0 0 auto;
  background: var(--forest, #1b4332);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.uo-hero__go:hover { background: var(--forest-mid, #2d6a4f); }
.uo-hero__err { margin: 8px 2px 0; font-size: 13px; color: #b91c1c; }
.uo-hero__note { margin: 8px 2px 0; font-size: 12px; color: var(--ink-3, #6b7280); text-align: center; }

/* Mobile: stack so the input is full-width and never blocked by the lead/button. */
@media (max-width: 560px) {
  .uo-hero { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .uo-hero__lead { width: 100%; font-size: 13px; }
  .uo-hero__input { flex: 1 1 100%; }
  .uo-hero__go { flex: 1 1 100%; padding: 13px; font-size: 15px; }
}

/* ── Container + panels ──────────────────────────────────────────────────── */
.uo-container { padding: 8px 4px 4px; }
.uo-panel { animation: uo-fade 0.25s ease; }
@keyframes uo-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.uo-back {
  background: none;
  border: none;
  color: var(--ink-3, #6b7280);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 2px;
  margin-bottom: 4px;
}
.uo-back:hover { color: var(--forest-mid, #2d6a4f); }

/* ── Input ───────────────────────────────────────────────────────────────── */
.uo-form { display: flex; gap: 10px; margin-top: 6px; }
.uo-url-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  font-size: 16px; /* ≥16px avoids iOS zoom-on-focus */
  border: 1.5px solid var(--border, #d6d3cd);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #1a1a1a);
}
.uo-url-input:focus {
  outline: none;
  border-color: var(--forest-mid, #2d6a4f);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.15);
}
.uo-submit {
  flex: 0 0 auto;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--forest, #1b4332);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.uo-submit:hover { background: var(--forest-mid, #2d6a4f); }
.uo-submit:active { transform: translateY(1px); }
.uo-submit:disabled { opacity: 0.6; cursor: default; }

.uo-note {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: var(--ink-3, #6b7280);
}
.uo-error {
  margin: 10px 2px 0;
  font-size: 13.5px;
  color: #b91c1c;
}
.uo-text-link {
  display: inline-block;
  margin-top: 20px;
  background: none;
  border: none;
  padding: 2px;
  font-size: 14px;
  color: var(--forest-mid, #2d6a4f);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Loading narrative ───────────────────────────────────────────────────── */
.uo-panel--loading { text-align: center; padding: 28px 12px 20px; }
.uo-spinner {
  width: 40px; height: 40px;
  margin: 0 auto 18px;
  border: 3px solid rgba(45,106,79,0.18);
  border-top-color: var(--forest-mid, #2d6a4f);
  border-radius: 50%;
  animation: uo-spin 0.8s linear infinite;
}
@keyframes uo-spin { to { transform: rotate(360deg); } }
.uo-loading-text {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  min-height: 24px;
  transition: opacity 0.2s ease;
}
.uo-loading-ticker {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--forest-mid, #2d6a4f);
  min-height: 18px;
  opacity: 0.9;
}
.uo-loading-time { margin: 8px 0 0; font-size: 12px; color: var(--ink-3, #6b7280); }
@media (prefers-reduced-motion: reduce) {
  .uo-spinner { animation: none; border-top-color: rgba(45,106,79,0.18); }
  .uo-panel { animation: none; }
}

/* ── Province ask + single-tap option pills ──────────────────────────────── */
.uo-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.uo-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* a11y touch target */
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1c1917);
  background: #fff;
  border: 1.5px solid var(--border, #d6d3cd);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.uo-pill:hover { border-color: var(--forest-mid, #2d6a4f); }
.uo-pill--on { border-color: var(--forest, #1b4332); background: var(--forest, #1b4332); color: #fff; font-weight: 600; }

/* ── Editable profile pills on the results page ──────────────────────────── */
.uo-rp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.uo-rp__lbl { font-size: 12px; color: var(--ink-3, #6b7280); }
.uo-rp__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--forest, #1b4332);
  background: #fff; border: 1.5px solid rgba(45,106,79,0.35); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.uo-rp__pill:hover { border-color: var(--forest-mid, #2d6a4f); background: rgba(45,106,79,0.05); }
.uo-rp__edit { color: var(--ink-3, #6b7280); font-weight: 400; font-size: 12px; }
.uo-rp__editor { flex: 1 1 100%; margin-top: 8px; padding: 12px; background: var(--parchment, #faf7f2); border: 1px solid var(--border, #d6d3cd); border-radius: 12px; }
.uo-rp__editlbl { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3, #6b7280); }
.uo-rp__editor .uo-pill { font-size: 13px; padding: 7px 12px; }

/* ── "Updating…" overlay during an inline re-match ───────────────────────── */
.advanced-quiz [data-step="results"] { position: relative; }
.uo-updating {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 90px; gap: 14px;
  background: rgba(250,247,242,0.84);
  border-radius: 16px; color: var(--ink, #1c1917); font-size: 15px; font-weight: 600;
}
.uo-updating p { margin: 0; }
/* .uo-updating sets display:flex, which would override the [hidden] attribute's
   display:none — so the overlay would stay (invisible-ish) and intercept clicks.
   This restores the hidden semantics. */
.uo-updating[hidden] { display: none; }

/* ── Personalized "why this fits you" line on result cards (.cb) ──────────── */
.cb__why {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
  background: rgba(45,106,79,0.06);
  border-left: 3px solid var(--forest-mid, #2d6a4f);
  border-radius: 0 8px 8px 0;
}
.cb__why::before {
  content: "Why this fits you";
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--forest-mid, #2d6a4f);
  margin-bottom: 3px;
}
/* Gate the personalized reason on locked (pre-signup) cards — match the .cb blur
   (homepage-v7.css:8116 blurs title/org/amount/reason-pill but not .cb__why). */
.cb--locked .cb__why { filter: blur(5px); user-select: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .uo-form { flex-direction: column; }
  .uo-submit { width: 100%; }
}