/* css/search.css — поиск (лист 34, js/search.js): лупа 40 в шапке · поле 48
   маркером вместо заголовка (240) · панель результатов (телефон — под шапкой,
   десктоп ≥880 — панель 480 под полем) · чипы охвата 32 · строки 56 ·
   <mark> = маркер. Только transform/opacity (§1); тьма — токенами. */

/* Лупа в шапке убрана — вход в поиск через «искать» в меню Карандашика
   (js/search.js #m-search). Поле поиска ниже занимает шапку по body.searching. */

/* поле занимает шапку: заголовок/счёт/кнопки уезжают влево и гаснут (240) */
header.app{position:relative;}
header.app .logo, header.app .score, header.app .hdr-actions, header.app .hdr-left{
  transition:transform .24s ease, opacity .24s ease;
}
body.searching header.app .hdr-left,
body.searching header.app .score,
body.searching header.app .hdr-actions{
  transform:translateX(-40px); opacity:0; pointer-events:none;
}
.sk-search{
  position:absolute; left:14px; right:14px; top:50%; margin-top:-24px;
  display:flex; gap:8px; align-items:center;
  transform:translateY(-64px); opacity:0; pointer-events:none;
  transition:transform .24s ease, opacity .24s ease;
}
body.searching .sk-search{transform:none; opacity:1; pointer-events:auto;}
.sk-search-in{
  position:relative; flex:1; min-width:0; display:flex; align-items:center;
  gap:8px; min-height:48px; padding:0 12px; border-radius:12px;
  background:var(--marker);
}
.sk-search-in::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.sk-search-in > svg{width:24px; height:24px; flex:none; color:var(--graphite);}
.sk-search-in input{flex:1; min-width:0; border:none; background:none; font:inherit;
  font-size:16px; color:var(--graphite); outline:none;}
.sk-search-in input::placeholder{color:var(--graphite-soft); font-style:italic;}
/* малый ✕ 24 чистит текст (мишень 40 через ::after) */
.sk-search-in .clr{position:relative; width:24px; height:24px; flex:none;
  border:none; background:none; cursor:pointer; color:var(--graphite-soft);
  border-radius:6px; display:flex; align-items:center; justify-content:center;}
.sk-search-in .clr::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite-soft); border-radius:6px; filter:url(#squiggle);}
.sk-search-in .clr::after{content:""; position:absolute; inset:-8px;}
.sk-search-in .clr svg{width:14px; height:14px;}
.sk-search-x{
  position:relative; width:40px; height:40px; flex:none; border:none;
  background:none; cursor:pointer; color:var(--graphite); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.sk-search-x::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.6px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.sk-search-x svg{width:22px; height:22px;}

/* ── панель результатов ── */
#search-pane{
  /* z-index ВЫШЕ дока (.sk-dock 70) и маскота (.mascot 71), ниже тостов (95):
     на телефоне панель — во весь экран (top:56→bottom:0), и без этого композер+
     таб-бар дока и пузырь Карандашика (оба fixed, z 70/71) проступали ПОВЕРХ
     результатов поиска (баг: поиск открывается из меню маскота, а его пузырь
     оставался висеть на панели). На десктопе панель — плавающий бокс 480, с
     доком/маскотом не пересекается, подъём z безвреден. */
  position:fixed; left:0; right:0; top:56px; bottom:0; z-index:80;
  background:var(--paper); overflow-y:auto; overscroll-behavior:contain;
  padding:0 16px calc(24px + var(--safe-bottom,0px));
}
#search-pane[hidden]{display:none;}
/* десктоп (лист 34·2 / 31): панель 480 под полем, не весь экран */
@media (min-width:880px){
  #search-pane{
    left:auto; right:24px; top:64px; bottom:auto; width:480px;
    max-height:min(640px, calc(100vh - 96px)); border-radius:16px;
    background:var(--paper2); padding:0 16px 16px;
  }
  :root[data-theme="dark"] #search-pane{background:var(--card);}
  #search-pane::before{content:""; position:fixed; inset:0; z-index:-1;}
  #search-pane::after{content:""; position:absolute; inset:0; pointer-events:none;
    border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
}

.skq-chips{display:flex; gap:8px; flex-wrap:wrap; padding-top:12px;}
.skq-chip{
  position:relative; min-height:32px; padding:0 12px; border:none; cursor:pointer;
  background:var(--paper2); border-radius:8px; font-family:'Neucha',cursive;
  font-size:13px; color:var(--graphite);
}
:root[data-theme="dark"] .skq-chip{background:var(--card);}
.skq-chip::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.skq-chip::after{content:""; position:absolute; inset:-4px;}
.skq-chip.on{background:var(--marker); font-weight:700;}
.skq-chip.blue{color:var(--ink-blue);}

.skq-cap{display:flex; align-items:center; min-height:32px; margin-top:12px;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--graphite-soft);}
.skq-cap span{flex:1;}
.skq-clear{border:none; background:none; cursor:pointer; font:inherit;
  font-size:12px; letter-spacing:0; text-transform:none; color:var(--pencil);}
.skq-clear:hover{color:var(--graphite);}

.skq-list{display:flex; flex-direction:column; gap:8px;}
.skq-rec{
  position:relative; display:flex; align-items:center; gap:12px; min-height:48px;
  padding:0 12px; border:none; cursor:pointer; background:var(--paper2);
  border-radius:12px; font:inherit; font-size:15px; color:var(--graphite);
  text-align:left;
}
:root[data-theme="dark"] .skq-rec{background:var(--card);}
.skq-rec::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.skq-rec svg{width:24px; height:24px; flex:none; color:var(--pencil);}

/* строка результата 56: тик/иконка · титул + мета · <mark> маркером */
.skq-row{
  position:relative; display:flex; align-items:center; gap:12px; min-height:56px;
  width:100%; padding:4px 12px; border:none; cursor:pointer;
  background:var(--paper2); border-radius:14px; font:inherit;
  color:var(--graphite); text-align:left;
}
:root[data-theme="dark"] .skq-row{background:var(--card);}
.skq-row::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:14px; filter:url(#squiggle);}
.skq-row.kb-sel::before, .skq-rec.kb-sel::before{border-width:2.5px;}
.skq-row > svg{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.skq-row > svg.gold{color:var(--gold);}
.skq-row .tick{position:relative; width:24px; height:24px; flex:none; border-radius:6px;}
.skq-row .tick::before{content:""; position:absolute; inset:0;
  border:2px solid var(--graphite); border-radius:6px; filter:url(#squiggle);}
.skq-row .tick[data-on]::after{content:"✓"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:16px; font-weight:700;}
.skq-row .col{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.skq-row .t1{font-size:15px; line-height:19px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.skq-row .t2{font-size:12px; line-height:15px; color:var(--meta); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.skq-row.done .t1{color:var(--graphite-soft); text-decoration:line-through;}
#search-pane mark{background:var(--marker); color:inherit; border-radius:3px; padding:0 1px;}

/* «ещё N →» ghost 40 */
.skq-more{
  position:relative; min-height:40px; border:none; cursor:pointer; background:none;
  border-radius:10px; font-family:'Neucha',cursive; font-size:14px;
  color:var(--graphite-soft);
}
.skq-more::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--graphite-soft); border-radius:10px; filter:url(#squiggle);}
.skq-more:hover{color:var(--graphite);}
.skq-mk{
  position:relative; width:100%; min-height:40px; margin-top:16px; border:none;
  cursor:pointer; background:none; border-radius:10px;
  font-family:'Neucha',cursive; font-size:14px; color:var(--graphite-soft);
}
.skq-mk::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--graphite-soft); border-radius:10px; filter:url(#squiggle);}

.skq-hint{font-size:12px; line-height:1.4; color:var(--graphite-soft); margin-top:4px;}
.skq-hint.blue{color:var(--ink-blue); font-size:11px; margin-top:8px;}
.skq-empty{display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:24px 16px 0; text-align:center;}
.skq-empty svg{width:32px; height:32px; color:var(--pencil);}
.skq-empty .t{font-size:15px; font-style:italic; color:var(--pencil); max-width:300px;}
.skq-empty .s{font-size:13px; color:var(--graphite-soft);}
.skq-goes{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px;}

@media (prefers-reduced-motion:reduce){
  header.app .logo, header.app .score, header.app .hdr-actions, header.app .hdr-left,
  .sk-search{transition:none;}
}