/* =========================================================
   PenguinArchive NEW — search.css (clean, no-jump overlay)
   - Compact input (desktop + mobile)
   - SR-only label utility
   - Bottom-right penguin background
   - Clear (X) button + inline spinner in same spot
   - Results as ABSOLUTE overlay (prevents input “jump”)
   - Species icons via single vertical sprite (6 icons)
   ========================================================= */

/* =========================
   Base reset & utilities
   ========================= */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   Loading overlay
   ========================= */
#loading-overlay{
  position: fixed;
  inset: 0;
  background: #f1f8fc;
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity 200ms ease;
}

#loading-overlay.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.spinner{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(120,100,90,.25);
  border-top-color: #e48b5a;
  animation: spin .8s linear infinite;
}

@keyframes spin{ to{ transform: rotate(360deg); } }

/* =========================
   Page layout
   ========================= */
.page{
  min-height: 100vh;
  background: #f1f8fc url("../assets/tawaki-calling.png") no-repeat right bottom;
  background-size: auto min(50vh, max(360px));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.top-wrap{
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 36px;
}

@media (max-width: 520px){
  .top-wrap{ min-height: 200px; }
}

/* =========================
   Logo + stack
   ========================= */
.stack{
  --pad-x: 24px;
  --logo-h: 84px;
  width: min(720px, 90vw);
  display: flex;
  flex-direction: column;
}

.logo{
  height: var(--logo-h);
  width: auto;
  align-self: flex-end;
  margin: 0 var(--pad-x) -6px 0;
  user-select: none;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Mobile-only: prevent logo overflow without touching desktop */
@media (max-width: 520px){
  .logo{
    max-width: calc(100% - (2 * var(--pad-x)));
  }
}

/* =========================
   Search input (baseline)
   ========================= */
.search{
  width: 100%;
  height: 50px;

  /* left padding leaves room for magnifying glass
     right padding leaves room for clear/spinner control */
  padding: 0 calc(var(--pad-x) + 40px) 0 46px;

  border: 0;
  border-radius: 10px;
  font-size: 15px;
  color: #333;
  background-color: #fff;

  /* magnifying glass */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='11' cy='11' r='7'/>\
<line x1='16.65' y1='16.65' x2='21' y2='21'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: 18px 50%;
  background-size: 16px;

  box-shadow:
    0 2px 12px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.05);

  /* helps prevent tiny repaint jitter on some mobiles */
  transform: translateZ(0);
  .pa-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: 51px;                 /* below divider */
  z-index: 6;

  margin-top: 0;             /* IMPORTANT: no gap */
  background: rgba(255,255,255,.96);

  /* make it the bottom half of the combined shape */
  border-radius: 0 0 12px 12px;
  overflow: hidden;

  box-shadow:
    0 18px 50px rgba(0,0,0,.14),
    0 2px 10px rgba(0,0,0,.08);
}
position: relative;
  z-index: 1;
}

.search::placeholder{ color: #7a7a7a; }

.search:focus{
  outline: none;
  box-shadow:
    0 0 0 1px #2a74ff,
    0 0 0 3px rgba(42,116,255,.25),
    0 2px 12px rgba(0,0,0,.08);
}

@media (max-width: 520px){
  .search{
    height: 56px;
    font-size: 16px; /* prevents iOS focus zoom */
    padding-left: 50px;
  }
}

/* =========================
   Wrapper + right-side control (X/spinner)
   ========================= */
/* Combined focus ring around input + dropdown */
.search-wrap{
  position: relative; /* anchors button + overlay */
  --input-h: 50px;  /* desktop input height */
  --dd-h: 0px;      /* dropdown height (set by JS) */
}

@media (max-width: 520px){
  .search-wrap{ --input-h: 56px; }  /* mobile input height */
}

/* When open + focused: draw one outline around the whole “stack” */
.search-wrap.is-open.is-focus::after{
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;

  /* input + divider(1px) + dropdown height */
  height: calc(var(--input-h) + 1px + var(--dd-h) + 2px);

  border-radius: 12px;
  pointer-events: none;

  /* hairline + soft outer glow */
  box-shadow:
    0 0 0 1px #2a74ff,
    0 0 0 3px rgba(42,116,255,.22);
}

/* When open, let wrapper ring be the focus indicator (avoid double ring) */
.search-wrap.is-open .search:focus{
  box-shadow: none;
}


.search-wrap.is-open .search{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* X button (small icon, decent hit-target) */
.search-clear{
  position: absolute;
  right: 10px;
  top: 9px;

  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;

  display: grid;
  place-items: center;

  color: rgba(0,0,0,0.45);
  z-index: 3; /* above input */
}

.search-clear svg{
  width: 16px; /* match magnifying glass */
  height: 16px;
}

.search-clear:hover{
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.65);
}

.search-clear:active{ transform: translateY(1px); }

.search-clear[hidden]{ display: none; }

/* Inline spinner (same spot/size as X) */
.search-spin{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.18);
  border-top-color: rgba(0,0,0,0.55);
  animation: paSpin 0.75s linear infinite;
}

@keyframes paSpin{
  to { transform: rotate(360deg); }
}

/* =========================
   Results overlay (NO layout growth = NO jump)
   ========================= */

/* Keep wrapper inert; results are overlayed */
.search-wrap.is-open{
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Divider overlay */
.search-divider{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--input-h);               /* matches .search height on desktop */
  height: 1px;
  background: rgba(0,0,0,.10);
  z-index: 5;
}

/* Results overlay panel */
.pa-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--input-h) + 1px);                /* below divider */
  z-index: 6;

  margin-top: 0px;           /* small gap so input feels anchored */
  background: rgba(255,255,255,.96);
  border-radius: 0 0 12px 12px;
  overflow: hidden;

  box-shadow:
    0 18px 50px rgba(0,0,0,.14),
    0 2px 10px rgba(0,0,0,.08);
}

.pa-suggest[hidden]{ display: none; }

.pa-suggest-list{
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;         /* scroll instead of pushing page */
  overflow-y: auto;
}

@media (max-width: 520px){
  .search-divider{ top: 56px; } /* matches .search height on mobile */
  .pa-suggest{ top: 57px; }
  .pa-suggest-list{ max-height: 300px; }
}

/* =========================
   Result rows (compact)
   ========================= */
.pa-suggest-item{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.pa-suggest-item + .pa-suggest-item{
  border-top: 1px solid rgba(0,0,0,.08);
}

.pa-suggest-item:hover,
.pa-suggest-item.is-active{
  background: rgba(0,0,0,.05);
}

.pa-avatar{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

/* Species icon sprite (6 stacked icons) */
.pa-species-icon{
  width: 36px;
  height: 36px;
  background-image: url("../assets/species-icons.png");
  background-repeat: no-repeat;
  background-size: 100% 600%;
  background-position-x: 50%;
}

.pa-species-icon[data-s="yep"]{ background-position-y: 0%; }
.pa-species-icon[data-s="fip"]{ background-position-y: 20%; }
.pa-species-icon[data-s="snp"]{ background-position-y: 40%; }
.pa-species-icon[data-s="ecp"]{ background-position-y: 60%; }
.pa-species-icon[data-s="erp"]{ background-position-y: 80%; }
.pa-species-icon[data-s="lbp"]{ background-position-y: 100%; }
.pa-species-icon[data-s="unknown"]{ background-image: none; }

/* Text */
.pa-main{
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.pa-title{
  font-size: 20px;
  font-weight: 600;
  color: #222;
}

.pa-title b{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pa-meta{
  font-size: 14px;
  color: rgba(0,0,0,.5);
}

@media (max-width: 520px){
  .pa-title{ font-size: 18px; }
  .pa-meta{ font-size: 13px; }
}