/**
 * QuickLead Casa Free Tools — shared shell/form/result styling.
 *
 * Loaded after ../verticals/landing.css on every Free Tools page, and reuses
 * its design tokens (--primary, --radius-*, --shadow-soft, --surface, etc.)
 * rather than redefining them, so the tools visibly belong to the same
 * product as the rest of quicklead.tools. This file only adds what the
 * vertical landings don't already have: the tool shell/breadcrumb, form
 * controls (including the accessible yes/no/unknown tri-state control),
 * result badges/checklists, the QuickLead bridge CTA, and the hub grid.
 */

html, body { overflow-x: hidden; }

/* landing.css itself never styles .mobile-nav (the <details>/<summary>
   mobile menu) at all - every existing page repeats this block in its own
   page-level <style>. This is that block's shared home for the four Free
   Tools pages. */
.mobile-nav { display: none; }

.mobile-nav summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted-strong);
  font-weight: 700;
  font-size: 14px;
}

.mobile-nav summary::-webkit-details-marker { display: none; }

.mobile-nav[open] summary { background: var(--primary-soft); color: var(--primary-dark); }

.mobile-nav-panel {
  display: grid;
  gap: 4px;
  padding: 10px 4px 4px;
}

.mobile-nav-panel a {
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--muted-strong);
  font-weight: 700;
  font-size: 15px;
}

.mobile-nav-panel a.btn {
  margin-top: 6px;
  text-align: center;
}

/* Grid/flex children default to min-width:auto, which lets their content's
   min-content size force the track wider than the viewport on narrow
   screens — the same overflow trap every vertical landing already guards
   against. */
.tools-hero,
.compare-grid,
.compare-column,
.criteria-columns,
.field-row,
.tools-hub-grid {
  min-width: 0;
}

/* ---------- Local semantic colour tokens ---------- */
/* landing.css defines --ok-soft/--ok-text but no warn/danger pair - added
   here, scoped to this stylesheet, rather than touching the shared file
   every other public page also loads. */
.free-tools-page {
  --warn-soft: #fff6dd;
  --warn-text: #8a6a12;
  --danger-soft: #fdecec;
  --danger-text: #b3261e;
}

/* ---------- Breadcrumb / shell ---------- */
.tools-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 28px 0 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.tools-crumb a {
  color: var(--muted-strong);
}

.tools-crumb a:hover { color: var(--primary-dark); }

.tools-crumb .is-current { color: var(--text); }

.tools-hero {
  max-width: 760px;
  padding-bottom: 8px;
}

.tools-hero h1 {
  margin: 16px 0 14px;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.tools-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

/* ---------- QuickLead bridge CTA ---------- */
.bridge-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 26px 0;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  border: 1px solid #d8e6fc;
}

.bridge-cta-copy h2,
.bridge-cta-copy strong.bridge-cta-title {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.bridge-cta-copy p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.6;
}

.bridge-cta .btn { white-space: nowrap; }

.bridge-cta-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Form shell ---------- */
.tool-form {
  margin-top: 8px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.tool-form h2 {
  margin: 0 0 18px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.field-group {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.field-group:last-child { margin-bottom: 0; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label,
.field legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-strong);
}

.field input[type="text"],
.field input[type="number"],
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.tri-option input:focus-visible + span,
.checkbox-option input:focus-visible + span {
  outline: 3px solid #9fc0fb;
  outline-offset: 2px;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Accessible yes/no/unknown control: three real radio inputs (keyboard and
   screen-reader native) visually presented as a segmented group. Unknown is
   a first-class, equally-sized option - never a smaller/greyed afterthought
   that reads as "probably no". */
.tri-control {
  display: grid;
  gap: 8px;
}

.tri-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tri-option {
  position: relative;
}

.tri-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tri-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.tri-option input:checked + span {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.tri-option input:checked + span::before {
  content: "✓ ";
}

/* ---------- Checkbox list (priorities, importance-style multi-select) ---------- */
.checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.checkbox-option {
  position: relative;
}

.checkbox-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox-option span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.checkbox-option span::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #ffffff;
}

.checkbox-option input:checked + span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.checkbox-option input:checked + span::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.tool-form .btn-primary {
  margin-top: 4px;
  width: 100%;
}

@media (min-width: 560px) {
  .tool-form .btn-primary { width: auto; }
}

/* ---------- Result panel ---------- */
.result-panel {
  margin-top: 24px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.result-panel[hidden] { display: none; }

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-badge.is-positive { background: var(--ok-soft); color: var(--ok-text); }
.result-badge.is-neutral { background: var(--warn-soft, #fff6dd); color: var(--warn-text, #8a6a12); }
.result-badge.is-negative { background: var(--danger-soft, #fdecec); color: var(--danger-text, #b3261e); }

.result-subtext {
  margin: 12px 0 0;
  color: var(--muted-strong);
  font-size: 16px;
  line-height: 1.6;
}

.result-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.result-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-strong);
}

.result-row .status-icon {
  flex: 0 0 auto;
  font-weight: 900;
}

/* Every status is named in the row's own text (see the per-tool <script>),
   so colour/icon are reinforcement, never the only signal. */
.result-row.is-pass { background: var(--ok-soft); }
.result-row.is-pass .status-icon { color: var(--ok-text); }
.result-row.is-fail { background: var(--danger-soft, #fdecec); }
.result-row.is-fail .status-icon { color: var(--danger-text, #b3261e); }
.result-row.is-verify,
.result-row.is-soft-miss { background: var(--warn-soft, #fff6dd); }
.result-row.is-verify .status-icon,
.result-row.is-soft-miss .status-icon { color: var(--warn-text, #8a6a12); }

.result-section-title {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.result-section-title:first-child { margin-top: 0; }

/* ---------- Should I Visit This Home? factual quick check ----------
   The result reuses .result-list/.result-row (defined above) and
   .result-summary/.result-section-title (defined above) directly - the
   quick check's three pieces (essentials line, known compromises,
   facts) needed no new visual language of their own. */
.result-summary {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Compare Two Homes result layout ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 6px;
}

.compare-column h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.compare-column .result-list { margin-top: 8px; }

.compare-recommendation {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  border: 1px solid #d8e6fc;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

/* ---------- Search criteria result layout ---------- */
.criteria-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 6px;
}

.criteria-column {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
}

.criteria-column h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.criteria-column ul {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.75;
}

.criteria-column.is-must h3 { color: var(--danger-text, #b3261e); }
.criteria-column.is-important h3 { color: var(--warn-text, #8a6a12); }
.criteria-column.is-nice h3 { color: var(--ok-text); }

/* ---------- Free Tools hub ---------- */
.tools-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.tools-hub-card {
  display: block;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.tools-hub-card h2 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.tools-hub-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.tools-hub-card .tools-hub-cta {
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Related tools / cross-links ---------- */
.related-tools {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.related-tools a {
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 15px;
}

/* ---------- FAQ (reused across all Free Tools pages) ---------- */
.faq-list { display: grid; gap: 12px; margin-top: 24px; }

.faq-item {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid var(--border);
}

.faq-item h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.01em; }
.faq-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .tools-hub-grid,
  .criteria-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nav, .topbar-cta { display: none; }
  .mobile-nav { display: block; }

  /* Compact only - the bridge CTA must stay above the form and stay
     understandable, but on a short mobile screen it was eating 30-40% of
     the first viewport before any tool input became visible. Desktop's
     grid-template-columns/padding/gap/copy size are untouched; only this
     narrow breakpoint gets a smaller card, a tighter paragraph, and a
     normal (not full-width) button so the form starts sooner. */
  .bridge-cta {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0;
    padding: 14px 16px;
  }

  .bridge-cta-copy h2,
  .bridge-cta-copy strong.bridge-cta-title {
    font-size: 15px;
    margin-bottom: 2px;
  }

  .bridge-cta-copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  .bridge-cta .btn {
    width: auto;
    justify-self: start;
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
  }

  .bridge-cta-note {
    margin-top: 6px;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .tri-options {
    grid-template-columns: 1fr;
  }
}

/* ---------- Criteria AI reasoning ----------
   Sits below the three deterministic MUST/IMPORTANT/NICE columns. Those
   render instantly from local rules; these blocks arrive from one bounded
   model call, so they are visually distinct (and individually hidden when
   the model had nothing worth saying) rather than blending into the
   columns and implying the same provenance. */
.criteria-ai {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.criteria-ai-block {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
}

.criteria-ai-block[hidden] { display: none; }

.criteria-ai-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.criteria-ai-block p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.criteria-ai-block ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.criteria-ai-block.is-conflicts { background: var(--warn-soft, #fdf6e3); border-color: #f0e2bd; }
.criteria-ai-block.is-conflicts h3 { color: var(--warn-text, #8a6a12); }
.criteria-ai-block.is-conflicts strong { display: block; font-weight: 800; }

.criteria-ai-block.is-questions { background: #f6f8fd; border-color: #dce5f7; }
.criteria-ai-block.is-questions h3 { color: var(--primary-dark); }

.criteria-ai-status[hidden] { display: none; }
.criteria-ai-status.is-error { color: var(--danger-text, #b3261e); }

.tool-form button[disabled] { opacity: 0.6; cursor: progress; }

/* Secondary product-page path inside the bridge CTA. Deliberately a plain
   link, not a second button: install remains the one primary CTA. */
.bridge-cta-secondary {
  margin: 8px 0 0;
  font-size: 14px;
}

.bridge-cta-secondary a {
  color: var(--primary-dark);
  font-weight: 700;
}

/* "Keep this search and continue in QuickLead" - shown only after a result
   renders, reusing .result-panel/.field/.field-hint/.result-subtext for
   everything that already has an equivalent. */
.continuation-card { margin-top: 20px; }

.continuation-card h2 { margin-top: 0; }

.field-optional {
  font-weight: 400;
  color: var(--muted);
}

.continuation-legal {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.continuation-legal a { color: var(--primary-dark); font-weight: 700; }

.bridge-cta-secondary a::after { content: " \2192"; }

/* ---------- Shared AI-answer presentation ----------
   Used by Compare Two Homes (below its deterministic comparison) and by
   Viewing Questions (which has no deterministic half). Reuses .criteria-ai*
   spacing and typography deliberately: all three Free Tools should read as
   one product, and an AI-generated block should look the same wherever it
   appears so a visitor can always tell which part of the page was reasoned
   rather than calculated. */
.tool-ai {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.tool-ai[hidden] { display: none; }

.tool-ai-verdict {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
}

.tool-ai-block {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
}

.tool-ai-block[hidden] { display: none; }

.tool-ai-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.tool-ai-block p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.tool-ai-block ul,
.tool-ai-block ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

/* "Worth verifying" / "Before making an offer": things that are NOT known,
   flagged in the same warning tone the deterministic tools already use for
   an unknown field, never in an error tone - nothing here is a problem, it
   is simply unconfirmed. */
.tool-ai-block.is-verify { background: var(--warn-soft, #fdf6e3); border-color: #f0e2bd; }
.tool-ai-block.is-verify h3 { color: var(--warn-text, #8a6a12); }

.tool-ai-status[hidden] { display: none; }
.tool-ai-status.is-error { color: var(--danger-text, #b3261e); }

.tool-ai-disclaimer {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Viewing Questions list ----------
   Numbered because the model is asked to return them in priority order. */
.viewing-questions-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 16px;
}

.viewing-question-item h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.vq-question {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

/* The grounding line ("why this is worth asking") is secondary to the
   question itself - the visitor reads the question at the viewing, the
   reason only while deciding whether to keep it. */
.vq-reason {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Failure + manual retry ----------
   Viewing Questions has nothing to fall back to, so a failure is stated
   plainly and the visitor re-submits themselves. The application never
   retries the provider on its own. */
.tool-error {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid #f0c9c5;
  background: var(--danger-soft, #fdf1f0);
}

.tool-error[hidden] { display: none; }

.tool-error p {
  margin: 0 0 12px;
  color: var(--danger-text, #b3261e);
  font-size: 15px;
  line-height: 1.55;
}

/* Matches .tool-form button[disabled]: the retry control lives outside the
   form, so it needs its own in-flight affordance. */
.tool-error .btn { margin: 0; }
.tool-error .btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Optional free-text context ---------- */
.field-char-count {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

/* One-tap additions to the free-text box. Each chip appends a sentence the
   visitor can then edit - never a hidden flag, so what is sent is always
   exactly what they can see in the textarea. */
.context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.context-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.context-chip:hover {
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}