/* Indoor Plant Finder — public UI v2
   An editorial consultation interface, intentionally unlike generic SaaS/AI quiz UIs. */
.ipf-finder {
  --ipf-forest: #183a2b;
  --ipf-forest-2: #244b39;
  --ipf-cream: #f2efe6;
  --ipf-paper: #fffefa;
  --ipf-ink: #1c241f;
  --ipf-muted: #69716b;
  --ipf-faint: #90968f;
  --ipf-line: #dadbd4;
  --ipf-line-dark: #c6c9c1;
  --ipf-select: #edf2ed;
  --ipf-danger: #a44a43;
  --ipf-warning: #8a6a23;
  --ipf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  max-width: 1180px;
  margin: 30px auto;
  color: var(--ipf-ink);
  font-family: var(--ipf-font);
  font-size: 14px;
  line-height: 1.5;
}
.ipf-finder *, .ipf-finder *::before, .ipf-finder *::after { box-sizing: border-box; }
.ipf-finder button, .ipf-finder input { font: inherit; }
.ipf-finder button:focus-visible, .ipf-finder input:focus-visible { outline: 2px solid #6e907d; outline-offset: 2px; }
.ipf-finder svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.ipf-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 690px;
  border: 1px solid #cfd1c9;
  background: var(--ipf-paper);
  overflow: hidden;
}

/* Left consultation rail */
.ipf-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 26px 24px;
  background: var(--ipf-forest);
  color: #edf0ea;
}
.ipf-brand { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .025em; }
.ipf-brandmark { width: 24px; height: 24px; color: #c7d4c8; }
.ipf-rail-copy { margin-top: 78px; }
.ipf-rail-copy > span, .ipf-rail-result > span { display: block; margin-bottom: 9px; color: #aebfb3; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ipf-rail-copy h2 { margin: 0 !important; color: #fff !important; font-size: 27px !important; line-height: 1.08 !important; font-weight: 560 !important; letter-spacing: -.035em !important; }
.ipf-rail-copy p { margin: 14px 0 0 !important; color: #bdc9c0 !important; font-size: 11px !important; line-height: 1.6 !important; }
.ipf-steps { display: flex; flex-direction: column; gap: 0; margin: 42px 0 0; padding: 0; list-style: none; }
.ipf-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; min-height: 46px; border-top: 1px solid rgba(255,255,255,.11); color: #8fa297; }
.ipf-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.ipf-steps li > span { font-size: 9px; font-variant-numeric: tabular-nums; }
.ipf-steps li b { font-size: 10.5px; font-weight: 550; }
.ipf-steps li.is-current { color: #fff; }
.ipf-steps li.is-current > span { color: #d5dfd7; }
.ipf-steps li.is-done { color: #b6c6ba; }
.ipf-steps li.is-done > span::after { content: " ✓"; }
.ipf-rail-foot { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 24px; color: #92a398; font-size: 9px; }
.ipf-rail-result { margin-top: 54px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.ipf-rail-result strong { display: block; color: #fff; font-size: 18px; font-weight: 560; }
.ipf-rail-result p { margin: 9px 0 0 !important; color: #b9c6bd !important; font-size: 10.5px !important; line-height: 1.55 !important; }
.ipf-mobile-brand { display: none; }

/* Main workspace */
.ipf-main { min-width: 0; padding: 42px 46px 36px; background: var(--ipf-paper); }
.ipf-stage-head { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 15px; max-width: 760px; margin-bottom: 32px; }
.ipf-stage-number { display: block; padding-top: 2px; color: var(--ipf-forest); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ipf-overline { display: block; margin: 0 0 7px !important; color: #66776c; font-size: 9px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: .135em !important; text-transform: uppercase; }
.ipf-stage-head h3, .ipf-results-head h3, .ipf-loading h3, .ipf-result-message h3 { margin: 0 !important; color: var(--ipf-ink) !important; font-size: 27px !important; line-height: 1.12 !important; font-weight: 560 !important; letter-spacing: -.03em !important; }
.ipf-stage-head p, .ipf-results-head p { max-width: 650px; margin: 9px 0 0 !important; color: var(--ipf-muted) !important; font-size: 11.5px !important; line-height: 1.6 !important; }

/* Choices */
.ipf-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.ipf-choice-grid.is-compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ipf-choice {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0,1fr) 19px;
  gap: 11px;
  align-items: start;
  min-height: 78px;
  height: auto;
  overflow: visible;
  padding: 13px 12px;
  border: 1px solid var(--ipf-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ipf-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease;
}
.ipf-choice:hover { border-color: #aeb5ad; background: #fff; }
.ipf-choice.is-selected { border-color: #718f7d; background: var(--ipf-select); box-shadow: inset 3px 0 0 var(--ipf-forest); }
.ipf-choice-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 1px solid #e0e2dc; border-radius: 4px; background: #f8f8f4; color: #56665b; }
.ipf-choice.is-selected .ipf-choice-icon { border-color: #cad7ce; background: #f7faf7; color: var(--ipf-forest); }
.ipf-choice-copy strong { display: block; margin-top: 1px; color: var(--ipf-ink); font-size: 11.5px; line-height: 1.25; font-weight: 650; }
.ipf-choice-copy small { display: block; margin-top: 4px; color: var(--ipf-muted); font-size: 9.5px; line-height: 1.4; }
.ipf-choice-check { display: none; width: 18px; height: 18px; padding: 3px; color: var(--ipf-forest); }
.ipf-choice.is-selected .ipf-choice-check { display: block; }

.ipf-question { padding: 24px 0; border-top: 1px solid #e7e7e1; }
.ipf-question:first-of-type { border-top: 0; padding-top: 0; }
.ipf-question-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.ipf-question-title b { color: var(--ipf-ink); font-size: 10.5px; font-weight: 680; letter-spacing: .01em; }
.ipf-question-title span { color: var(--ipf-faint); font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ipf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ipf-two-col .ipf-question { border-top: 1px solid #e7e7e1; }

.ipf-pet-policy { display: grid; grid-template-columns: minmax(180px,1fr) auto auto; gap: 8px; align-items: center; margin-top: 10px; padding: 11px 12px; border: 1px solid #d8ddd7; background: #f7f8f4; }
.ipf-pet-policy strong { display: block; font-size: 10px; font-weight: 650; }
.ipf-pet-policy > div > span { display: block; margin-top: 2px; color: var(--ipf-muted); font-size: 8.8px; }
.ipf-pet-policy label { cursor: pointer; }
.ipf-pet-policy input { position: absolute; opacity: 0; }
.ipf-pet-policy label > span { display: inline-flex; align-items: center; min-height: 29px; padding: 0 9px; border: 1px solid #cfd3cd; border-radius: 4px; background: #fff; color: #59635c; font-size: 9px; font-weight: 650; }
.ipf-pet-policy input:checked + span { border-color: #799481; background: var(--ipf-select); color: var(--ipf-forest); }

.ipf-inline-error { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 11px; border-left: 3px solid var(--ipf-danger); background: #fcf2f0; color: #7f3f39; font-size: 10px; font-weight: 600; }
.ipf-inline-error[hidden] { display: none; }
.ipf-inline-error svg { width: 16px; height: 16px; flex: 0 0 16px; }

.ipf-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid #ddded7; }
.ipf-soft-note { max-width: 430px; color: var(--ipf-faint); font-size: 9.5px; line-height: 1.45; }
.ipf-next, .ipf-find, .ipf-back, .ipf-restart, .ipf-adjust { min-height: 38px; padding: 0 14px; border-radius: 5px; font-size: 10.5px; font-weight: 650; cursor: pointer; transition: background .13s ease, border-color .13s ease; }
.ipf-next, .ipf-find { margin-left: auto; border: 1px solid var(--ipf-forest); background: var(--ipf-forest); color: #fff; }
.ipf-next:hover, .ipf-find:hover { background: #102e21; border-color: #102e21; }
.ipf-next span, .ipf-find span { margin-left: 9px; }
.ipf-back, .ipf-restart, .ipf-adjust { border: 1px solid #c7cbc4; background: #fff; color: #4b5650; }
.ipf-back:hover, .ipf-restart:hover, .ipf-adjust:hover { background: #f6f6f2; border-color: #aeb3ad; }

/* Loading / message */
.ipf-loading, .ipf-result-message { max-width: 600px; padding: 86px 0; }
.ipf-loading-mark, .ipf-message-icon { display: block; width: 42px; height: 42px; margin-bottom: 22px; color: var(--ipf-forest); }
.ipf-loading p, .ipf-result-message p { max-width: 520px; margin: 11px 0 19px !important; color: var(--ipf-muted) !important; font-size: 11px !important; line-height: 1.6 !important; }
.ipf-loading-line { width: min(360px, 70%); height: 2px; margin-top: 25px; background: #e4e5df; overflow: hidden; }
.ipf-loading-line span { display: block; width: 38%; height: 100%; background: var(--ipf-forest); animation: ipfLoading 1.2s ease-in-out infinite; }
@keyframes ipfLoading { 0%{transform:translateX(-105%)} 100%{transform:translateX(370%)} }

/* Results */
.ipf-results-head { max-width: 720px; margin-bottom: 28px; }
.ipf-results-list { display: flex; flex-direction: column; border-top: 1px solid var(--ipf-line-dark); }
.ipf-result-card { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 0; border-bottom: 1px solid var(--ipf-line-dark); background: transparent; }
.ipf-result-card.is-top { grid-template-columns: 230px minmax(0,1fr); background: #fbfaf5; }
.ipf-result-image { position: relative; min-height: 190px; background: #eceee9; overflow: hidden; }
.ipf-result-card.is-top .ipf-result-image { min-height: 235px; }
.ipf-result-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ipf-best { position: absolute; top: 11px; left: 11px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.74); border-radius: 3px; background: rgba(24,58,43,.91); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ipf-result-body { position: relative; padding: 19px 20px 20px; }
.ipf-result-index { margin-bottom: 10px; color: #8b918c; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.ipf-result-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ipf-result-title h4 { margin: 0 !important; color: var(--ipf-ink) !important; font-size: 19px !important; line-height: 1.15 !important; font-weight: 570 !important; letter-spacing: -.025em !important; }
.ipf-result-card.is-top .ipf-result-title h4 { font-size: 22px !important; }
.ipf-result-title em { display: block; margin-top: 3px; color: var(--ipf-muted); font-size: 9.5px; font-style: italic; }
.ipf-score { flex: 0 0 auto; min-width: 58px; text-align: right; }
.ipf-score strong { display: block; color: var(--ipf-forest); font-size: 18px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; }
.ipf-score span { display: block; margin-top: 3px; color: var(--ipf-faint); font-size: 7.5px; letter-spacing: .04em; text-transform: uppercase; }
.ipf-result-status { margin-top: 9px; }
.ipf-result-status > span { display: inline-flex; min-height: 20px; align-items: center; padding: 0 6px; border: 1px solid #d9ddd7; border-radius: 3px; color: #6b746d; font-size: 8px; font-weight: 650; }
.ipf-result-status .pet-safe { border-color: #c4d7ca; background: #f0f6f1; color: #356249; }
.ipf-result-status .pet-toxic { border-color: #e6c9c4; background: #fbf1ef; color: #92443e; }
.ipf-result-status .pet-caution { border-color: #e4d5ad; background: #fbf7e9; color: #7a621f; }
.ipf-summary { max-width: 660px; margin: 12px 0 0 !important; color: #57615b !important; font-size: 10.5px !important; line-height: 1.55 !important; }
.ipf-reasons { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 13px; }
.ipf-reasons span { display: inline-flex; align-items: center; gap: 4px; color: #395747; font-size: 9px; font-weight: 600; }
.ipf-reasons svg { width: 12px; height: 12px; }
.ipf-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 16px 0 0; border-top: 1px solid #e1e2dc; border-bottom: 1px solid #e1e2dc; }
.ipf-facts > div { padding: 9px 8px 9px 0; border-right: 1px solid #e1e2dc; }
.ipf-facts > div:not(:first-child) { padding-left: 9px; }
.ipf-facts > div:last-child { border-right: 0; }
.ipf-facts dt { color: var(--ipf-faint); font-size: 7.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ipf-facts dd { margin: 3px 0 0; color: #465149; font-size: 9px; line-height: 1.35; }
.ipf-cautions { margin-top: 12px; }
.ipf-cautions summary { color: var(--ipf-warning); font-size: 9px; font-weight: 650; cursor: pointer; }
.ipf-cautions p { margin: 6px 0 0 !important; color: #70664d !important; font-size: 9px !important; line-height: 1.5 !important; }
.ipf-tip { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e5e5df; }
.ipf-tip b { color: var(--ipf-ink); font-size: 8.5px; font-weight: 700; }
.ipf-tip span { color: #687069; font-size: 9px; line-height: 1.45; }
.ipf-result-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

@media (max-width: 980px) {
  .ipf-shell { grid-template-columns: 250px minmax(0,1fr); }
  .ipf-rail { padding: 24px 20px; }
  .ipf-rail-copy { margin-top: 55px; }
  .ipf-main { padding: 36px 30px 30px; }
  .ipf-choice-grid.is-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ipf-two-col { grid-template-columns: 1fr; gap: 0; }
  .ipf-result-card, .ipf-result-card.is-top { grid-template-columns: 170px minmax(0,1fr); }
}

@media (max-width: 740px) {
  .ipf-finder { margin: 16px 0; }
  .ipf-shell { display: block; min-height: 0; }
  .ipf-rail { display: none; }
  .ipf-main { padding: 22px 18px 24px; }
  .ipf-mobile-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; padding-bottom: 13px; border-bottom: 1px solid #dedfd9; color: var(--ipf-forest); font-size: 10px; }
  .ipf-mobile-brand > span { width: 22px; height: 22px; }
  .ipf-stage-head { grid-template-columns: 34px minmax(0,1fr); gap: 8px; margin-bottom: 24px; }
  .ipf-stage-head h3, .ipf-results-head h3, .ipf-loading h3, .ipf-result-message h3 { font-size: 23px !important; }
  .ipf-choice-grid, .ipf-choice-grid.is-compact { grid-template-columns: 1fr; }
  .ipf-choice { min-height: 68px; }
  .ipf-pet-policy { grid-template-columns: 1fr 1fr; }
  .ipf-pet-policy > div { grid-column: 1 / -1; }
  .ipf-result-card, .ipf-result-card.is-top { grid-template-columns: 118px minmax(0,1fr); }
  .ipf-result-image, .ipf-result-card.is-top .ipf-result-image { min-height: 170px; }
  .ipf-result-body { padding: 15px; }
  .ipf-facts { grid-template-columns: repeat(2,1fr); }
  .ipf-facts > div:nth-child(2) { border-right: 0; }
  .ipf-facts > div:nth-child(-n+2) { border-bottom: 1px solid #e1e2dc; }
  .ipf-facts > div:nth-child(3) { padding-left: 0; }
}

@media (max-width: 520px) {
  .ipf-main { padding: 19px 14px 22px; }
  .ipf-stage-head { grid-template-columns: 1fr; }
  .ipf-stage-number { display: none; }
  .ipf-result-card, .ipf-result-card.is-top { display: block; }
  .ipf-result-image, .ipf-result-card.is-top .ipf-result-image { position: relative; min-height: 0; aspect-ratio: 16 / 9; }
  .ipf-result-image img { position: absolute; }
  .ipf-result-title { gap: 10px; }
  .ipf-footer { align-items: stretch; flex-wrap: wrap; }
  .ipf-soft-note { width: 100%; }
  .ipf-next, .ipf-find { margin-left: auto; }
}