/* Summit Pollinizer Finder — scoped styles.
   Everything lives under .spf-app so nothing leaks into the theme,
   and no theme/global :root custom properties get overridden. */

.spf-app{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F8F8F8;
  --ink:#333333;
  --ink-muted:#747474;
  --accent:#4B7A29;
  --accent-strong:#365A1D;
  --accent-tint:#EAF3E0;
  --brand-green:#6EB43F;
  --leaf:#4B7A29;
  --leaf-tint:#EAF3E0;
  --caution:#A17A17;
  --caution-tint:#FBF3D6;
  --border:#E3E3E3;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  .spf-app:not([data-theme="light"]){
    --bg:#1C1C19; --surface:#242420; --surface-2:#2C2C27;
    --ink:#EDEDE8; --ink-muted:#B2AFA6;
    --accent:#8FD65C; --accent-strong:#B6E792; --accent-tint:#26331C;
    --brand-green:#8FD65C;
    --leaf:#8FD65C; --leaf-tint:#26331C;
    --caution:#E3B84C; --caution-tint:#3A2E14;
    --border:#3B3B35;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
.spf-app[data-theme="dark"]{
  --bg:#1C1C19; --surface:#242420; --surface-2:#2C2C27;
  --ink:#EDEDE8; --ink-muted:#B2AFA6;
  --accent:#8FD65C; --accent-strong:#B6E792; --accent-tint:#26331C;
  --brand-green:#8FD65C;
  --leaf:#8FD65C; --leaf-tint:#26331C;
  --caution:#E3B84C; --caution-tint:#3A2E14;
  --border:#3B3B35;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}

.spf-app{ box-sizing:border-box; }
.spf-app *, .spf-app *::before, .spf-app *::after{ box-sizing:border-box; }
.spf-app{
  background:var(--bg); color:var(--ink);
  font-family:"PT Sans", Arial, sans-serif;
  padding-block:24px 48px;
  font-size:15px;
  line-height:1.5;
}
.spf-app .wrap{ width:100%; max-width:780px; margin:0 auto; padding-inline:20px; }
.spf-app .hidden{ display:none !important; }

.spf-app .eyebrow{
  font-family:"PT Sans", Arial, sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fruit,var(--accent));
  margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.spf-app h1{
  font-family:"PT Sans", Arial, sans-serif; font-weight:700;
  font-size:clamp(24px,4vw,32px); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 10px; text-wrap:balance;
}
.spf-app .lede{ font-size:15.5px; line-height:1.6; color:var(--ink-muted); max-width:58ch; margin:0 0 28px; }

/* home fruit grid */
.spf-app .fruit-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-bottom:8px; }
.spf-app .fruit-card{
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  padding:20px; box-shadow:var(--shadow); cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  font-family:inherit; width:100%;
}
.spf-app .fruit-card:hover:not(.disabled){ border-color:var(--accent); }
.spf-app .fruit-card.disabled{ cursor:default; opacity:.55; }
.spf-app .fruit-card .dot{ width:36px; height:36px; border-radius:4px; background:var(--fruit-tint); display:flex; align-items:center; justify-content:center; font-size:19px; }
.spf-app .fruit-card h3{ font-family:"PT Sans", Arial, sans-serif; font-weight:600; font-size:19px; margin:0; }
.spf-app .fruit-card p{ font-size:12.5px; color:var(--ink-muted); margin:0; line-height:1.4; }
.spf-app .fruit-card .soon{
  font-family:"PT Sans", Arial, sans-serif; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-muted); background:var(--surface-2);
  padding:3px 8px; border-radius:999px; align-self:flex-start;
}

.spf-app .back-btn{
  display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  font-family:"PT Sans", Arial, sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-muted); padding:0; margin-bottom:18px;
}
.spf-app .back-btn:hover{ color:var(--fruit,var(--accent)); }

/* search */
.spf-app .search-card{
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  box-shadow:var(--shadow); padding:6px; position:relative; margin-bottom:10px;
}
.spf-app .search-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; }
.spf-app .search-row svg{ flex:none; color:var(--ink-muted); }
.spf-app .search-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
  font-size:16.5px; font-family:"PT Sans", Arial, sans-serif; color:var(--ink);
}
.spf-app .search-input:disabled{ opacity:.6; }
.spf-app .search-input::placeholder{ color:var(--ink-muted); }
.spf-app .clear-btn{
  border:0; background:var(--surface-2); color:var(--ink-muted); width:24px;height:24px;border-radius:50%;
  display:none; align-items:center; justify-content:center; cursor:pointer; flex:none; font-size:14px; line-height:1;
}
.spf-app .clear-btn.show{ display:flex; }
.spf-app .suggest{
  position:absolute; left:6px; right:6px; top:calc(100% + 6px); background:var(--surface);
  border:1px solid var(--border); border-radius:4px; box-shadow:var(--shadow);
  max-height:340px; overflow-y:auto; z-index:20; display:none;
}
.spf-app .suggest.open{ display:block; }
.spf-app .suggest button{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; text-align:left;
  padding:10px 14px; border:0; background:transparent; cursor:pointer; font:inherit; font-size:14.5px;
  color:var(--ink); border-bottom:1px solid var(--border);
}
.spf-app .suggest button:last-child{ border-bottom:0; }
.spf-app .suggest button:hover, .spf-app .suggest button.active{ background:var(--surface-2); }
.spf-app .suggest .tag{
  font-family:"PT Sans", Arial, sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); flex:none;
}
.spf-app .hint{ font-size:12.5px; color:var(--ink-muted); margin:0 0 32px; padding-left:4px; }

.spf-app #denseResult, .spf-app #sparseResult{ display:none; }
.spf-app #denseResult.show, .spf-app #sparseResult.show{ display:block; }
.spf-app .result-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--border);
}
.spf-app .result-head h2{ font-family:"PT Sans", Arial, sans-serif; font-weight:600; font-size:26px; margin:0 0 8px; text-wrap:balance; }
.spf-app .badges{ display:flex; flex-wrap:wrap; gap:8px; }
.spf-app .pill{
  display:inline-flex; align-items:center; gap:6px; font-family:"PT Sans", Arial, sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.spf-app .pill-fruit{ background:var(--surface-2); color:var(--ink); }
.spf-app .pill-leaf{ background:var(--leaf-tint); color:var(--leaf); }
.spf-app .pill-caution{ background:var(--caution-tint); color:var(--caution); }
.spf-app .pill-neutral{ background:var(--surface-2); color:var(--ink-muted); }
.spf-app .pill-dot{ width:6px;height:6px;border-radius:50%; background:currentColor; }
.spf-app .self-note{ font-size:13px; color:var(--ink-muted); max-width:34ch; text-align:right; }

.spf-app .banner{
  display:flex; gap:12px; align-items:flex-start; border-radius:4px; padding:14px 16px; margin-bottom:22px;
}
.spf-app .banner.caution{ background:var(--caution-tint); border:1px solid color-mix(in srgb, var(--caution) 35%, transparent); }
.spf-app .banner.leaf{ background:var(--leaf-tint); border:1px solid color-mix(in srgb, var(--leaf) 35%, transparent); }
.spf-app .banner svg{ flex:none; margin-top:2px; }
.spf-app .banner.caution svg{ color:var(--caution); }
.spf-app .banner.leaf svg{ color:var(--leaf); }
.spf-app .banner p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink); }
.spf-app .banner strong{ color: inherit; }

.spf-app .section-title{
  font-family:"PT Sans", Arial, sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); display:flex; align-items:center; gap:10px; margin:0 0 12px;
}
.spf-app .section-title .count{ font-family:"PT Sans", Arial, sans-serif; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--ink-muted); }

.spf-app .crab-toggle{
  margin-left:auto; font-family:"PT Sans", Arial, sans-serif; font-size:12.5px; font-weight:700; text-transform:none; letter-spacing:0;
  background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:999px; padding:6px 14px; cursor:pointer;
}
.spf-app .crab-toggle:hover{ border-color:var(--fruit); color:var(--fruit); }
.spf-app .crab-toggle[aria-pressed="true"]{ background:var(--fruit); border-color:var(--fruit); color:#fff; }

.spf-app .bloom-group{ margin-bottom:22px; }
.spf-app .bloom-group h3{ font-family:"PT Sans", Arial, sans-serif; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.spf-app .bloom-group h3 .pill-dot{ width:8px;height:8px; }
.spf-app .chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.spf-app .chip{
  background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:8px 12px;
  font-size:13.5px; cursor:pointer; box-shadow:0 1px 1px rgba(0,0,0,.02);
}
.spf-app .chip:hover{ border-color:var(--fruit); color:var(--fruit); }
.spf-app .chip .sub{ font-family:"PT Sans", Arial, sans-serif; font-size:10px; color:var(--ink-muted); margin-left:6px; }

.spf-app .chip.allele-best, .spf-app .chip.allele-self{
  border:2.5px solid var(--leaf); background:var(--leaf-tint);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--leaf) 16%, transparent);
  padding:7.5px 12px;
}
.spf-app .chip.allele-best:hover, .spf-app .chip.allele-self:hover{ border-color:var(--leaf); color:var(--ink); }
.spf-app .chip.allele-partial{
  border:2.5px dashed var(--caution); background:var(--caution-tint);
  padding:7.5px 12px;
}
.spf-app .chip.allele-partial:hover{ border-color:var(--caution); color:var(--ink); }
.spf-app .chip .sub.allele-best, .spf-app .chip .sub.allele-self{ color:var(--leaf); font-weight:800; }
.spf-app .chip .sub.allele-partial{ color:var(--caution); font-weight:800; }
.spf-app .check-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--leaf); color:#fff;
  font-size:10.5px; font-weight:900; margin-left:6px; line-height:1; flex:none;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

.spf-app .allele-key{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
.spf-app .key-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-weight:600; }
.spf-app .key-dot{ width:16px; height:16px; border-radius:3px; background:var(--surface); flex:none; display:inline-flex; align-items:center; justify-content:center; }
.spf-app .key-dot.best{ border:2.5px solid var(--leaf); background:var(--leaf-tint); color:var(--leaf); font-size:10px; font-weight:900; }
.spf-app .key-dot.self{ border:2.5px solid var(--leaf); background:var(--leaf-tint); color:var(--leaf); font-size:9px; font-weight:900; }
.spf-app .key-dot.partial{ border:2.5px dashed var(--caution); background:var(--caution-tint); }
.spf-app .empty-state{ font-size:14px; color:var(--ink-muted); background:var(--surface-2); border-radius:4px; padding:14px 16px; }

.spf-app details.collapse{ margin-top:8px; margin-bottom:32px; border-top:1px solid var(--border); padding-top:16px; }
.spf-app details.collapse summary{
  cursor:pointer; list-style:none; font-family:"PT Sans", Arial, sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); display:flex; align-items:center; gap:8px;
}
.spf-app details.collapse summary::-webkit-details-marker{ display:none; }
.spf-app details.collapse summary .chev{ transition:transform .15s ease; }
.spf-app details.collapse[open] summary .chev{ transform:rotate(90deg); }
.spf-app details.collapse .chip-grid{ margin-top:14px; }
.spf-app details.collapse .note{ margin-top:10px; font-size:12.5px; color:var(--ink-muted); }

.spf-app .browse{ margin-top:56px; border-top:1px solid var(--border); padding-top:28px; }
.spf-app .browse > .section-title{ margin-bottom:16px; }
.spf-app .browse-group{ margin-bottom:18px; }
.spf-app .browse-group summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; font-family:"PT Sans", Arial, sans-serif;
  font-weight:700; font-size:14px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:4px;
}
.spf-app .browse-group summary::-webkit-details-marker{ display:none; }
.spf-app .browse-group summary .chev{ transition:transform .15s ease; margin-left:auto; color:var(--ink-muted); }
.spf-app .browse-group[open] summary .chev{ transform:rotate(90deg); }
.spf-app .browse-group .chip-grid{ padding:14px 4px 4px; }

.spf-app footer{ margin-top:40px; padding-top:20px; border-top:1px solid var(--border); font-size:12px; line-height:1.6; color:var(--ink-muted); }
.spf-app footer p{ margin:0 0 8px; }

.spf-app .spf-loading{ font-size:13px; color:var(--ink-muted); padding:24px 4px; }
.spf-app .spf-error{ font-size:13px; color:var(--caution); background:var(--caution-tint); border-radius:4px; padding:14px 16px; }