/* Урок Просто — окно «Найти документ» поверх любого экрана кабинета (x-search.css, techkarta-back#257).
   На макете (SearchUp.dc.html) поиск — отдельный артборд со своими файлами: up-home.css (строка результата up-ntf, плитка up-tile,
   кнопка up-btn) и up-acct.css (само окно up-acct-search). В коде окно открывается над любым экраном, а эти файлы включены не на
   всех (в «Моих документах» нет ни того, ни другого). Поэтому нужные правила повторены здесь дословно, под корнем окна .up-find, —
   вне окна они ничего не меняют; на экранах, где исходные файлы включены, значения те же. Менять вид — сначала в исходных файлах.
   Своё здесь — только последний раздел «чего на макете нет». */

/* ---------- из up-home.css: кнопка, строка результата, плитка ---------- */
.up .up-find .up-btn { --go-bg: var(--ws-accent); --go-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: 999px;
  background: var(--go-bg); color: var(--go-fg); font-family: inherit; font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(31, 27, 58, .2), 0 12px 26px -10px rgba(75, 64, 184, .65);
  transition: transform .12s var(--ease-out), box-shadow .2s, background-color .2s var(--ease-out), opacity .2s; }
.up .up-find .up-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(31, 27, 58, .2), 0 16px 30px -10px rgba(75, 64, 184, .75); }
.up .up-find .up-btn:active:not(:disabled) { transform: scale(.97); }
.up[data-theme="dark"] .up-find .up-btn.f-btn-accent { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -10px rgba(123, 98, 255, .6); }
.up[data-theme="dark"] .up-find .up-btn.f-btn-accent:hover:not(:disabled) { background: var(--primary-hover); }
.up .up-find .up-ntf { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 14px; min-height: 0; color: inherit; text-decoration: none; transition: background-color .18s var(--ease-out); }
.up .up-find .up-ntf:hover { background: var(--surface-2); }
.up .up-find .up-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--ws-icon-bg); color: var(--ws-icon);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.up .up-find .up-ntf .up-tile { width: 40px; height: 40px; }
.up .up-find .up-ntf-t { display: grid; gap: 1px; min-width: 0; }
.up .up-find .up-ntf-t b { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.up .up-find .up-ntf-t span { font-size: 13px; line-height: 17px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up .up-find .up-ntf-d { font-size: 12.5px; line-height: 16px; color: var(--text-2); white-space: nowrap; }
.up .up-find .up-ntf:hover .up-tile { background: var(--ws-accent-soft); color: var(--ws-accent); }

/* ---------- из up-acct.css: тексты пустого состояния и окно быстрого поиска ---------- */
.up .up-find .up-acct-text { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); text-wrap: pretty; }
.up .up-find .up-acct-text.is-2 { font-size: 14.5px; line-height: 21px; color: var(--text-2); }
.up .up-find .up-acct-empty-t { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 800; color: var(--ink); }
.up .up-find .up-acct-sover { align-items: start; padding-top: max(24px, 11vh); }
.up .up-find .up-acct-search { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 640px; padding: 0; gap: 0; max-height: min(620px, calc(100vh - 48px)); max-height: min(620px, calc(100dvh - 48px)); overflow: hidden; }
.up .up-find .up-acct-sbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.up .up-find .up-acct-sic { display: inline-grid; color: var(--ws-icon); }
.up .up-find .up-acct-sin { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); outline: none; font-family: inherit; font-size: 18px; line-height: 26px; }
.up .up-find .up-acct-sin::placeholder { color: var(--text-2); opacity: .8; }
.up .up-find .up-acct-sin::-webkit-search-cancel-button { display: none; }
.up .up-find .up-acct-sbar .up-mc-x { margin: 0; }
.up .up-find .up-acct-sbody { overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 10px; }
.up .up-find .up-acct-sg { display: grid; gap: 4px; padding-top: 6px; }
.up .up-find .up-acct-sg > .up-caps { padding: 4px 10px; }
.up .up-find .up-acct-sl { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.up .up-find .up-acct-sr { grid-template-columns: 40px minmax(0, 1fr) auto 16px; padding: 8px 10px; }
.up .up-find .up-acct-sr[data-on="true"] { background: var(--surface-2); }
.up .up-find .up-acct-sr[data-on="true"] .up-tile { background: var(--ws-accent-soft); color: var(--ws-accent); }
.up .up-find .up-acct-sr .up-ntf-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 21px; }  /* у up-ntf-t b — flex с зазором: подсветка рвала бы слово */
.up .up-find .up-acct-sr mark { padding: 0 1px; border-radius: 4px; background: var(--ws-accent-soft); color: var(--ws-accent-ink); }
.up .up-find .up-acct-enter { display: inline-grid; color: var(--ws-accent); opacity: 0; transition: opacity .15s var(--ease-out); }
.up .up-find .up-acct-sr[data-on="true"] .up-acct-enter { opacity: 1; }
.up .up-find .up-acct-snone { display: grid; justify-items: center; gap: 10px; padding: 28px 20px 24px; text-align: center; }
.up .up-find .up-acct-snone .up-btn { margin-top: 4px; max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; padding: 10px 18px 10px 16px; }
.up .up-find .up-acct-sfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 16px 12px 18px; border-top: 1px solid var(--line); }
.up .up-find .up-acct-sfoot .up-link { margin-left: auto; }

@media (max-width: 639px) {
  .up .up-find .up-ntf { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .up .up-find .up-acct-sover { padding: 12px; }
  .up .up-find .up-acct-search { max-height: calc(100dvh - 24px); }
  .up .up-find .up-acct-sbar { padding: 8px 8px 8px 14px; }
  .up .up-find .up-acct-sr { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 8px 6px; }
  .up .up-find .up-acct-sr .up-tile { width: 36px; height: 36px; }
  .up .up-find .up-acct-enter { display: none; }
}

/* ---------- чего на макете нет ---------- */
/* ссылки окна — без подчёркивания на любом экране (на экранах «acct» это даёт up-acct.css: .up-acct .up-btn) */
.up .up-find a { text-decoration: none; }
/* результаты появляются лесенкой при открытии окна; смена результатов при вводе — без повторной анимации (ключ строки — документ) */
.up .up-find .up-acct-sl > li { animation: x-find-in .28s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 24ms); }
.up .up-find .up-acct-snone { animation: x-find-in .28s var(--ease-out) both; }
@keyframes x-find-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* пока список документов грузится — три строки-заготовки: окно не меняет высоту рывком */
.up .up-find .up-find-wait { display: grid; gap: 2px; padding: 34px 0 0; }
.up .up-find .up-find-wait span { display: block; height: 56px; margin: 0 2px; border-radius: 14px; background: var(--surface-2); opacity: .7; animation: x-find-wait 1.2s ease-in-out infinite alternate; }
.up .up-find .up-find-wait span:nth-child(2) { animation-delay: .15s; }
.up .up-find .up-find-wait span:nth-child(3) { animation-delay: .3s; }
@keyframes x-find-wait { from { opacity: .35; } to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .up .up-find .up-acct-sl > li, .up .up-find .up-acct-snone, .up .up-find .up-find-wait span { animation: none !important; }
}