/* «Що покращити?» (feedback-04, 04.10.2026; LOGIC-feedback.md, доски 14.1-14.6): значок в шапке вкладки, лист заметки,
   у Кирила список «Нотатки» и открытая заметка. Значения только через var(--...); цвета темы Кирила (тема Б) приходят из тех же переменных. */

@layer screens {
  /* ---------- значок в шапке (14.1): реплика 24, ink-2, без подложки ---------- */
  .k-fbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--target);       /* на доске зона 40 × 44; аудит QA требует не меньше 44 в обе стороны */
    height: var(--target);
    margin-inline: calc(var(--sp-1) * -1); /* вплотную к соседям: ряд кнопок сдвигается на 40, а не на 48 */
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--ink-2);
  }
  .k-fbtn .k-icon { width: 24px; height: 24px; }
  /* Точка 10 цвета акцента с кольцом цвета фона: у Кирила есть непрочитанные заметки Кати. */
  .k-fbtn__dot {
    position: absolute;
    top: 6px;
    right: 7px;
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 2px var(--bg);
  }
  .k-fbtn--dot .k-fbtn__dot { display: block; }
  /* «Гардероб» у Кирила (34, около 126 px) не должен переноситься посреди слова, когда в шапке три кнопки, значок и кружок:
     по решению к листу 14 сжимаются отступы кнопок, а не название. */
  :root[data-edition="kirill"] .sh > .k-thead { column-gap: var(--sp-1); }
  :root[data-edition="kirill"] .sh .k-thead__actions { gap: 2px; }
  :root[data-edition="kirill"] .sh .k-thead__actions > .k-avatar { margin-left: 0; }
  :root[data-edition="kirill"] .sh .k-fbtn { margin-inline: -2px; }
  :root[data-edition="kirill"] .sh .k-thead__title { overflow-wrap: normal; white-space: nowrap; }

  /* ---------- лист «Що покращити?» (14.2, 14.3) ---------- */
  .fb { display: flex; flex-direction: column; gap: var(--sp-3); }
  .fb__warn { margin: calc(var(--sp-1) * -1) 0 0; color: var(--danger); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .fb__add { align-self: flex-start; }
  .fb .k-area > .k-ibtn { top: 8px; right: 4px; bottom: auto; }
  .fb .k-area > .k-ibtn[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
  .fb__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-1); }
  .fb__thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--r-photo-s);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .fb__thumb > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
  /* Крестик нарисован 24, зона касания 44: выступает за угол снимка. */
  .fb__x {
    position: absolute;
    top: -14px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
  }
  .fb__x > span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 0 0 2px var(--surface);
  }
  .fb__x .k-icon { width: 14px; height: 14px; }
  .fb-foot { flex-direction: column; align-items: stretch; gap: var(--sp-2); box-shadow: inset 0 1px 0 var(--line); }
  .fb-foot > .k-btn { flex: none; width: 100%; }
  .fb__ctx { margin: 0; color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  /* Значок в тосте «Записано. Дякую!» и «Збережено...» (14.4). */
  .k-toast > .fb-toast__ic { flex: none; width: 22px; height: 22px; margin-right: calc(var(--sp-1) * -1); }

  /* ---------- «Нотатки» у Кирила (14.5) ---------- */
  .fbn { display: flex; flex-direction: column; gap: var(--sp-3); }
  .fbn__filters {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: var(--sp-3);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
  }
  .fbn__list { display: flex; flex-direction: column; gap: var(--sp-3); }
  .fbn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
  }
  /* Новая (непрочитанная при открытии): полоса акцента по левому краю. */
  .fbn-card--new::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--acc); }
  /* Карточка целиком кнопка под содержимым: текст не перехватывает касание, переключатель и снимки перехватывают. */
  .fbn-card__open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; }
  .fbn-card > :not(.fbn-card__open) { position: relative; pointer-events: none; }
  .fbn-done, .fbn-thumb { pointer-events: auto; }
  .fbn-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--target); }
  .fbn-done { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target); color: var(--ink-2); font: 500 var(--fs-caption)/1 var(--font-ui); }
  .fbn-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-badge);
    font: 600 var(--fs-label)/1 var(--font-ui);
  }
  .fbn-pill--bug { background: var(--danger-soft); color: var(--danger); }
  .fbn-pill--idea { background: var(--olive-soft); color: var(--olive-ink); }
  .fbn-pill--dislike { background: #F5EBCB; color: #6E5410; }
  .fbn-card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font: 400 var(--fs-body-s)/1.4 var(--font-ui);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .fbn-card__thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .fbn-thumb { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .fbn-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fbn-lost { color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .fbn-card__meta { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .fbn-card__who { flex: none; font-weight: 600; }
  /* Сделанная: всё бледнее, переключатель остаётся ярким. */
  .fbn-card--done .fbn-pill, .fbn-card--done .fbn-card__text, .fbn-card--done .fbn-card__thumbs, .fbn-card--done .fbn-card__meta { opacity: .55; }

  /* ---------- заметка открыта (14.6) ---------- */
  .fbn-detail { display: flex; flex-direction: column; gap: var(--sp-3); }
  .fbn-detail__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .fbn-detail__top .fbn-card__who { color: var(--ink-2); font: 500 var(--fs-caption)/1 var(--font-ui); }
  .fbn-detail__text { margin: 0; font: 400 var(--fs-body)/1.45 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
  .fbn-pics { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-card-l); }
  .fbn-pics::-webkit-scrollbar { display: none; }
  .fbn-plate {
    display: grid;
    flex: 0 0 100%;
    place-items: center;
    min-height: 240px;
    max-height: 440px;
    padding: var(--sp-4);
    border: 0;
    border-radius: var(--r-card-l);
    background: var(--surface-2);
    scroll-snap-align: center;
  }
  .fbn-plate > img { max-width: 100%; max-height: 400px; border-radius: 12px; object-fit: contain; }
  .fbn-plate--lost { color: var(--ink-2); font: 500 var(--fs-hint)/1.3 var(--font-ui); }
  .fbn-dots { display: flex; justify-content: center; gap: var(--sp-2); }
  .fbn-dots > span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
  .fbn-dots > span.on { background: var(--ink); }
  .fbn-detail__line { margin: 0; font: 600 var(--fs-body-s)/1.3 var(--font-ui); }
  .fbn-detail__sub { margin: calc(var(--sp-2) * -1) 0 0; color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .fbn-donerow { border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .fb-zoom { display: grid; place-items: center; width: 100%; height: 100%; }
  .fb-zoom > img { max-width: 100%; max-height: 100%; object-fit: contain; }
}