/* Find It — search-specific styles layered on the shared North Star app.css */
.navrow{display:flex;gap:4px;margin-left:8px}
.navlink{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#c2cbe0;text-decoration:none;padding:8px 12px;border-radius:4px}
.navlink:hover{background:rgba(255,255,255,.10);color:#fff}
.navlink.on{color:#fff;background:rgba(255,255,255,.14)}
.shell.wide{max-width:1180px}

/* Hero search */
.hero{background:linear-gradient(160deg,#22335a 0%,#192645 100%);color:#fff;
  margin:-48px -28px 36px;padding:64px 28px 56px}
.hero .inner{max-width:880px;margin:0 auto}
.hero .eyebrow{color:#aeb9d6}
.hero .eyebrow::before{background:var(--gold)}
.hero h1{font-size:40px;font-weight:800;letter-spacing:-.02em;margin:14px 0 8px;line-height:1.08}
.hero p{color:#c2cbe0;font-size:16px;max-width:60ch}
.searchbar{display:flex;gap:10px;margin-top:26px;background:#fff;border-radius:10px;padding:8px;
  box-shadow:0 24px 60px rgba(8,14,34,.4)}
.searchbar input{flex:1;border:none;outline:none;font-size:17px;padding:14px 16px;color:var(--ink);
  font-family:var(--arial);background:transparent}
.searchbar button{border:none;background:var(--navy);color:#fff;font-family:var(--mono);font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:0 26px;border-radius:7px;cursor:pointer}
.searchbar button:hover{background:var(--navy-d)}
.examples{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.examples .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fa0c4}
.examples a{font-size:13px;color:#dde4f3;text-decoration:none;border:1px solid rgba(255,255,255,.22);
  border-radius:99px;padding:5px 13px;transition:background .15s}
.examples a:hover{background:rgba(255,255,255,.12)}

/* Results */
.resrecap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.resrecap h2,.resrecap{font-size:15px}
.aimsg{background:#fff;border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:8px;
  padding:16px 18px;margin-bottom:22px;color:var(--ink);font-size:15px;line-height:1.5}
.aimsg .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:6px}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.icard{background:#fff;border:1px solid var(--hair);border-radius:9px;padding:20px;display:flex;
  flex-direction:column;transition:box-shadow .15s,border-color .15s}
.icard:hover{box-shadow:0 14px 34px rgba(20,30,60,.09);border-color:var(--navy-l)}
.icard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.icard .pn{font-family:var(--mono);font-size:12.5px;color:var(--navy);font-weight:700;word-break:break-all}
.icard .qty{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  background:#e6f4ec;color:#1c7a45;border-radius:99px;padding:4px 10px;white-space:nowrap}
.icard .qty.low{background:#fbf1e0;color:#8a6d2f}
.icard .desc{font-size:14.5px;color:var(--ink);margin:12px 0;line-height:1.45;flex:1}
.icard .why{font-size:13px;color:#5b6373;background:var(--panel);border-radius:6px;padding:10px 12px;margin-bottom:14px}
.icard .why b{color:var(--navy-d)}
.icard .mfr{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a93a6;margin-top:2px}
.icard .acts{display:flex;gap:8px;margin-top:auto}
.icard .acts .btn{flex:1;text-align:center;font-size:11px;padding:10px 8px}

/* No-match / request */
.nomatch{background:#fff;border:1px dashed var(--hair);border-radius:10px;padding:34px;text-align:center}
.nomatch h3{font-size:21px;color:var(--navy-d);font-weight:800}
.nomatch p{color:#67707f;max-width:54ch;margin:10px auto 22px}
.nomatch .btn{margin:0 6px}

/* Capture modal */
.modal{position:fixed;inset:0;background:rgba(15,22,44,.55);display:none;align-items:center;
  justify-content:center;padding:24px;z-index:50}
.modal.on{display:flex}
.modal .box{background:#fff;border-radius:12px;max-width:460px;width:100%;padding:32px;
  box-shadow:0 30px 70px rgba(10,18,40,.4)}
.modal h3{font-size:20px;color:var(--navy-d);font-weight:800}
.modal p.sub{color:#67707f;font-size:14px;margin:8px 0 20px}
.modal .x{float:right;cursor:pointer;border:none;background:none;font-size:22px;color:#9aa3b3;line-height:1}

/* Photo drop */
.drop{border:2px dashed var(--hair);border-radius:10px;padding:30px;text-align:center;cursor:pointer;
  background:var(--panel);transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--navy-l);background:#eef2f8}
.drop .ico{font-size:30px;display:block;margin-bottom:8px}
.drop .t{font-weight:700;color:var(--navy-d)}
.drop .s{font-size:12.5px;color:#8a93a6;margin-top:4px}
.thinking{display:none;align-items:center;gap:10px;color:var(--navy);font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:14px}
.thinking.on{display:flex}
.spinner{width:15px;height:15px;border:2px solid var(--hair);border-top-color:var(--navy);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ok-note{background:#e6f3ec;color:#1c6a3f;font-size:13px;padding:11px 14px;border-radius:6px;margin-top:14px}
@media(max-width:560px){.hero h1{font-size:30px}.searchbar{flex-direction:column}.searchbar button{padding:14px}}