/* mibl_search.css — the site search's styles, moved out of mibl_search.php (audit P1 #9, 2026-10-02).
   ~7 KB of inline <style> re-sent byte-identical with every page view; no PHP was interpolated into it.
   Loaded from the position the inline block had, so the cascade is unchanged. */
/* ── trigger ─────────────────────────────────────────────────────────────── */
.msl-trigger{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  min-height:40px; padding:0 12px; border-radius:10px; cursor:pointer;
  font-family:'Vazirmatn',sans-serif; font-size:13px; font-weight:600;
  color:#94a3b8; background:rgba(148,163,184,.06);
  border:1px solid rgba(148,163,184,.16);
  transition:color .2s,background .2s,border-color .2s,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .2s;
}
.msl-trigger:hover{
  color:#e0f7ff; background:rgba(0,212,255,.08); border-color:rgba(0,212,255,.28);
  transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,212,255,.12);
}
.msl-trigger:active{ transform:scale(.96) }
.msl-trigger:focus-visible{ outline:2px solid #00d4ff; outline-offset:2px }
.msl-trigger svg{ width:16px; height:16px; flex:none }
.msl-trigger .msl-t-label{ white-space:nowrap }
/* The keycap is a hint, not a control — it goes first on a wide header and vanishes
   before the label does, because the word is what makes the button understandable. */
.msl-key{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; line-height:1;
  padding:3px 6px; border-radius:5px; color:#7c8aa3;
  background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.18);
}
@media (max-width:1180px){ .msl-key{ display:none } }
@media (max-width:860px){ .msl-trigger .msl-t-label{ display:none } .msl-trigger{ padding:0 10px } }

/* ── overlay ─────────────────────────────────────────────────────────────── */
.msl-ov{
  position:fixed; inset:0; z-index:9500; display:none;
  background:rgba(4,7,16,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:clamp(12px,8vh,110px) 16px 16px;
}
.msl-ov.on{ display:block }
.msl-panel{
  width:min(640px,100%); margin:0 auto; max-height:min(72vh,640px);
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,rgba(21,28,46,.98),rgba(13,18,31,.98));
  border:1px solid rgba(148,163,184,.18); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.06) inset;
}
@media (prefers-reduced-motion:no-preference){
  .msl-ov.on .msl-panel{ animation:mslIn .22s cubic-bezier(.16,1,.3,1) both }
  @keyframes mslIn{ from{ opacity:0; transform:translateY(-10px) scale(.985) } to{ opacity:1; transform:none } }
}

/* ── input row ───────────────────────────────────────────────────────────── */
.msl-bar{ display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(148,163,184,.14) }
.msl-bar svg{ width:19px; height:19px; color:#00d4ff; flex:none }
.msl-input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
  font-family:'Vazirmatn',sans-serif; font-size:16.5px; font-weight:500; color:#eaf2ff;
}
.msl-input::placeholder{ color:#7c8aa3 }
.msl-x{
  flex:none; width:30px; height:30px; border-radius:8px; border:0; cursor:pointer;
  background:rgba(148,163,184,.1); color:#9aa3b6; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.18s;
}
.msl-x:hover{ background:rgba(148,163,184,.2); color:#fff }
.msl-x:focus-visible{ outline:2px solid #00d4ff; outline-offset:2px }

/* ── results ─────────────────────────────────────────────────────────────── */
.msl-body{ overflow-y:auto; overscroll-behavior:contain; padding:6px 0 10px; flex:1 1 auto }
.msl-group-h{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#6b7794; padding:12px 18px 6px;
}
.msl-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:9px 18px; text-decoration:none; color:inherit; cursor:pointer;
  border:0; background:transparent; text-align:inherit; font-family:inherit;
}
.msl-row .msl-ico{
  flex:none; width:34px; height:34px; border-radius:9px; display:flex;
  align-items:center; justify-content:center;
  background:rgba(0,212,255,.09); color:#00d4ff; border:1px solid rgba(0,212,255,.16);
}
.msl-row .msl-ico svg{ width:17px; height:17px }
.msl-txt{ min-width:0; flex:1 1 auto }
.msl-lbl{
  /* display:block is load-bearing: these are <span>s inside a <span>, so without it
     the title and its album run together on one line — «باران روی شیشه»Mohsen Moussawi. */
  display:block;
  font-size:14.5px; font-weight:600; color:#e8eefc;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* A Persian title beside a Latin one must not throw its full stop to the far side. */
  unicode-bidi:plaintext;
}
.msl-sub{
  display:block;
  font-size:12px; color:#8794ac; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; unicode-bidi:plaintext;
}
/* The "go to" arrow points the way the language reads. Everything else in this set is
   symmetrical or pictorial, so this is the only glyph that needs mirroring. */
[dir="rtl"] .msl-ico-place svg{ transform:scaleX(-1) }
.msl-row.sel,.msl-row:hover{ background:rgba(0,212,255,.08) }
.msl-row.sel .msl-ico{ background:rgba(0,212,255,.18); border-color:rgba(0,212,255,.3) }
.msl-row:focus-visible{ outline:2px solid #00d4ff; outline-offset:-2px }

/* ── states ──────────────────────────────────────────────────────────────── */
.msl-state{ padding:34px 24px; text-align:center; color:#8794ac }
.msl-state b{ display:block; color:#c9d3e6; font-size:15px; font-weight:700; margin-bottom:5px }
.msl-state span{ font-size:13px; line-height:1.7 }
.msl-foot{
  display:flex; gap:14px; align-items:center; justify-content:flex-start;
  padding:9px 16px; border-top:1px solid rgba(148,163,184,.12);
  font-size:11px; color:#6b7794;
}
.msl-foot kbd{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px;
  padding:2px 5px; border-radius:4px; background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.18); color:#8794ac;
}
@media (max-width:640px){
  .msl-ov{ padding:0 }
  .msl-panel{ width:100%; max-height:100%; height:100%; border-radius:0; border:0 }
  .msl-bar{ padding:14px 14px calc(14px + env(safe-area-inset-top,0px)) }
  .msl-row{ padding:12px 16px }          /* comfortable thumb targets */
  .msl-row .msl-ico{ width:38px; height:38px }
  .msl-foot{ display:none }              /* no keyboard to hint at */
}