/* ============================================================
   ПОИСК ПО САЙТУ — общий виджет (триггер в шапке + оверлей)
   Подключается на верхнеуровневых plain-HTML страницах
   (navigator / theory / protocol). Источник правды по стилю —
   index.html; здесь те же правила, вынесенные в общий файл.
   ============================================================ */

/* — триггер в навигации. Поведение идентично index.html: полная плашка поиска
   на десктопе, свёрнутая иконка ≤980px. — */
.search-trigger{ display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 11px 0 13px;
  background:var(--surface); border:1px solid var(--border-accent); border-radius:var(--radius-sm);
  color:var(--text-muted); font:var(--text-body-sm); cursor:pointer; transition:border-color var(--dur), color var(--dur); width:188px; }
.search-trigger:hover{ border-color:var(--accent); color:var(--text-dark); }
.search-trigger svg{ width:16px; height:16px; flex:none; color:var(--accent); }
.search-trigger .st-label{ flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-trigger .st-kbd{ flex:none; font:var(--text-num-small); font-size:11px; letter-spacing:.5px; color:var(--text-muted);
  border:1px solid var(--border); border-radius:4px; padding:2px 7px; background:var(--bg-cream); }
.search-icon-btn{ display:none; width:40px; height:40px; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border-accent); border-radius:var(--radius-sm); cursor:pointer; color:var(--accent); }
.search-icon-btn:hover{ border-color:var(--accent); }
.search-icon-btn svg{ width:18px; height:18px; }

/* — оверлей (палитра команд) — */
.search-overlay{ position:fixed; inset:0; z-index:100; display:none; }
.search-overlay.open{ display:block; }
.search-overlay .scrim{ position:absolute; inset:0; background:rgba(26,20,16,.55); backdrop-filter:blur(4px); animation:fadeIn .2s var(--ease-out); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes panelIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:translateY(0); } }
.search-panel{ position:relative; max-width:720px; margin:7vh auto 0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 40px 120px rgba(26,20,16,.4);
  overflow:hidden; animation:panelIn .22s var(--ease-out); max-height:84vh; display:flex; flex-direction:column; }
.search-head{ display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); }
.search-head svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.search-head input{ flex:1; border:0; outline:0; background:transparent; font:var(--text-h4); font-weight:400;
  color:var(--text-dark); letter-spacing:0; text-transform:none; }
.search-head input::placeholder{ color:var(--text-muted); }
.search-head .esc{ font:var(--text-num-small); font-size:11px; color:var(--text-muted); border:1px solid var(--border);
  border-radius:4px; padding:3px 8px; background:var(--bg-cream); cursor:pointer; flex:none; }
.search-filters{ display:flex; gap:8px; padding:14px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap; align-items:center; }
.search-filters .fl-label{ font:var(--text-caption); letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-right:4px; }
.chip-f{ font:var(--text-body-sm); padding:6px 13px; border-radius:100px; border:1px solid var(--border-accent);
  background:transparent; color:var(--text-dark); cursor:pointer; transition:all var(--dur); }
.chip-f:hover{ border-color:var(--accent); color:var(--accent); }
.chip-f.on{ background:var(--accent-cta); border-color:var(--accent-cta); color:#fff; }
.search-results{ overflow-y:auto; padding:8px 0; }
.sr-section{ font:var(--text-caption); letter-spacing:1.4px; text-transform:uppercase; color:var(--text-muted);
  padding:14px 24px 8px; }
.sr-item{ display:grid; grid-template-columns:46px 1fr auto; gap:16px; align-items:center; padding:14px 24px;
  cursor:pointer; border-left:2px solid transparent; transition:background var(--dur); text-decoration:none; }
.sr-item:hover, .sr-item.sel{ background:var(--bg-warm); border-left-color:var(--accent); }
.sr-item .sr-num{ font-family:var(--font-serif); font-weight:600; font-size:24px; color:var(--accent); text-align:center; }
.sr-item .sr-title{ font:var(--text-h4); font-weight:500; font-style:italic; font-family:var(--font-serif);
  color:var(--text-dark); letter-spacing:0; text-transform:none; line-height:1.2; }
.sr-item .sr-meta{ font:var(--text-body-sm); color:var(--text-muted); margin-top:3px; }
.sr-item .sr-meta b{ color:var(--accent-dark); font-weight:500; }
.sr-item .sr-tag{ font:var(--text-caption); letter-spacing:.5px; color:var(--accent-dark); background:var(--accent-soft);
  border:1px solid var(--border-accent); border-radius:var(--radius-xs); padding:4px 10px; white-space:nowrap; }
.sr-empty{ padding:48px 24px; text-align:center; color:var(--text-muted); font:var(--text-body); }
.sr-empty b{ color:var(--text-dark); }
.search-foot{ display:flex; gap:18px; align-items:center; padding:13px 24px; border-top:1px solid var(--border);
  font:var(--text-caption); color:var(--text-muted); background:var(--bg-cream); }
.search-foot .kf{ display:inline-flex; align-items:center; gap:6px; }
.search-foot .kf kbd{ font-family:var(--font-number); font-size:11px; border:1px solid var(--border); border-radius:3px;
  padding:1px 6px; background:var(--surface); color:var(--text-dark); }
.search-foot .grow{ margin-left:auto; }

@media(max-width:980px){
  .search-trigger{ display:none; }
  .search-icon-btn{ display:flex; }
}
@media (max-width: 640px){
  .search-overlay{ padding: 0 12px; }
  .search-panel{ margin-top:4vh; }
}