/* ============================================================
   Field Notebook — Spotlight search overlay.
   Token-driven (var(--paper), --ink, --sage, --bone …) so it follows
   light and dark automatically. Loaded site-wide.
   ============================================================ */
html.fn-search-lock{overflow:hidden}

.fn-search{
  position:fixed;inset:0;z-index:1100;display:grid;
  grid-template-rows:1fr;align-items:start;justify-items:center;
  padding:clamp(4.5rem,14vh,9rem) 1.1rem 1.1rem;
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease,ease),visibility .26s;
}
.fn-search.is-open{opacity:1;visibility:visible}

.fn-search__scrim{position:absolute;inset:0;background:rgba(20,19,14,.5);backdrop-filter:blur(5px)}
:root[data-theme="dark"] .fn-search__scrim{background:rgba(0,0,0,.62)}

.fn-search__panel{
  position:relative;width:100%;max-width:640px;
  background:var(--paper);border:1px solid var(--bone);border-radius:16px;
  box-shadow:0 40px 100px -40px rgba(28,28,28,.55);overflow:hidden;
  transform:translateY(-16px) scale(.985);opacity:.6;
  transition:transform .3s var(--ease,cubic-bezier(.22,.61,.36,1)),opacity .3s;
}
.fn-search.is-open .fn-search__panel{transform:none;opacity:1}
:root[data-theme="dark"] .fn-search__panel{box-shadow:0 40px 100px -36px rgba(0,0,0,.9)}

.fn-search__bar{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-bottom:1px solid var(--bone)}
.fn-search__mag{width:22px;height:22px;flex:none;fill:none;stroke:var(--grey);stroke-width:1.8;stroke-linecap:round}
.fn-search__input{
  flex:1;border:0;background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:1.25rem;line-height:1.2;padding:.2rem 0;
}
.fn-search__input:focus{outline:none}
.fn-search__input::placeholder{color:var(--grey)}
.fn-search__esc{
  flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);background:transparent;border:1px solid var(--bone-2);border-radius:6px;padding:.35em .55em;cursor:pointer;
}
.fn-search__esc:hover{border-color:var(--sage);color:var(--sage-deep)}

.fn-search__results{max-height:min(52vh,460px);overflow-y:auto;overflow-x:hidden;padding:.5rem;position:relative}
.fn-search__results.is-loading::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:36%;background:var(--sage);
  border-radius:2px;animation:fnSearchBar 1s ease-in-out infinite;
}
@keyframes fnSearchBar{0%{left:-36%}100%{left:100%}}

.fn-search__hint{padding:1.8rem 1rem;text-align:center;color:var(--grey);font-size:.92rem}

.fn-search__group{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-deep);padding:.9rem .8rem .35rem;
}
.fn-search__row{
  display:flex;align-items:center;gap:.85rem;padding:.6rem .7rem;border-radius:10px;
  color:var(--ink);text-decoration:none;transition:background .12s;
}
.fn-search__row.is-active,.fn-search__row:hover{background:var(--sage-tint)}
.fn-search__thumb{width:44px;height:44px;flex:none;border-radius:8px;background-size:cover;background-position:center;background-color:var(--paper-deep)}
.fn-search__ic{width:44px;height:44px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--sage-tint);color:var(--sage-deep)}
.fn-search__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fn-search__tx{flex:1;min-width:0}
.fn-search__title{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-search__ex{display:block;font-size:.8rem;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.fn-search__meta{display:block;font-family:var(--mono);font-size:.72rem;color:var(--sage-deep);margin-top:.15rem}
.fn-search__badge{
  flex:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--bone-2);border-radius:999px;padding:.2em .55em;
}
.fn-search__row.is-active .fn-search__badge{border-color:var(--sage);color:var(--sage-deep)}

.fn-search__foot{
  display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;
  padding:.7rem 1rem;border-top:1px solid var(--bone);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--grey);
}
.fn-search__foot kbd{
  font-family:var(--mono);border:1px solid var(--bone-2);border-radius:4px;
  padding:.05em .4em;margin-right:.15em;color:var(--ink-soft);
}
@media (max-width:560px){
  .fn-search{padding-top:1.1rem}
  .fn-search__foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fn-search,.fn-search__panel{transition:none}
  .fn-search__panel{transform:none}
  .fn-search__results.is-loading::after{animation:none}
}