/* Scribe - components */

/* ---------- topbar: чип активного канала ---------- */
.chan-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 13rem; padding: .3rem .65rem; margin-left: .35rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: var(--t-fast); }
.chan-chip:hover { color: var(--text); border-color: var(--border-strong); }
.chan-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.chan-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .chan-chip span { display: none; } .chan-chip { max-width: none; } }

/* ---------- ptabs: вкладки внутри панели (страница проекта, правила) ---------- */
.ptabs { display: flex; gap: .1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.ptab { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .7rem; margin-bottom: -1px; color: var(--text-dim); font-size: .9rem; font-weight: 500; line-height: 1; }
.ptab svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.ptab:hover { color: var(--text); }
.ptab.is-on { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- form fields ---------- */
/* Общий инпут/textarea приложения: тёмная тема, единый вид во всех вьюхах (не дублировать локально). */
.fld { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .7rem; color: var(--text); font-size: .9rem; font-family: inherit; transition: var(--t-fast); }
.fld:focus { outline: none; border-color: var(--accent); }
textarea.fld { resize: vertical; line-height: 1.55; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .58rem .95rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .875rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: var(--t-fast); white-space: nowrap; min-height: 40px; }
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; stroke-width: 1.8; }
.btn-primary { background: linear-gradient(140deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-1); }
.btn-primary:hover { filter: brightness(1.07); background: linear-gradient(140deg, var(--accent), var(--accent-2)); }
.btn-spark { background: linear-gradient(140deg, var(--spark), var(--spark-2)); border-color: transparent; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: .38rem .65rem; min-height: 34px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn-danger { color: var(--err); border-color: var(--err-bg); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); }

/* icon-button: компактная иконка-действие (save/edit/close) - только иконка + tooltip + aria-label, без текста */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-dim); cursor: pointer; transition: var(--t-fast); }
.icon-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.8; }

/* Подсказка из data-tooltip (+ aria-label), без атрибута title. Рисует её app.js одним слоем в body:
   ::after у самой кнопки обрезался окнами и блоками с overflow. Светлее фона и с тенью - в тон фона
   она терялась на тёмных карточках. .tip-below у кнопки - показывать снизу (кнопки у верхней кромки). */
/* position: relative остался от прежней подсказки на ::after: на него уже опираются значки внутри кнопок (счётчик у меню). */
[data-tooltip] { position: relative; }
.scribe-tip { position: fixed; top: 0; left: 0; z-index: 300; max-width: min(22rem, calc(100vw - 16px)); white-space: normal;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .35rem .6rem; font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-pop);
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.scribe-tip.is-on { opacity: 1; visibility: visible; }
/* деструктивная иконка-кнопка: красный ховер */
.icon-btn-danger:hover { color: var(--err); background: var(--err-bg); border-color: var(--err-bg); }
/* иконка внутри строки текста (копировать адрес): мельче, чтобы не раздувать строку; на тач-экране - как остальные */
.icon-btn-inline { width: 26px; height: 26px; vertical-align: middle; }
/* адрес с кнопкой копирования внутри абзаца: адрес переносится по символам, а не вылезает за экран */
.copy-inline { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; max-width: 100%; }
.copy-inline code { overflow-wrap: anywhere; min-width: 0; }

/* превью YouTube-видео: обложка 16:9 */
.vid-thumb { display: block; width: 7rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-elev); flex: none; }
.vid-thumb-lg { width: 9.5rem; }

/* ---------- pills / chips / tags ---------- */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; background: var(--surface-2); color: var(--text-muted); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.pill.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; } .pill.ok .dot { background: var(--ok); }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; } .pill.warn .dot { background: var(--warn); }
.pill.err { color: var(--err); background: var(--err-bg); border-color: transparent; } .pill.err .dot { background: var(--err); }
.pill.pending { color: var(--pending); background: var(--pending-bg); border-color: transparent; } .pill.pending .dot { background: var(--pending); }
.pill.accent { color: var(--accent); background: var(--accent-glow); border-color: transparent; } .pill.accent .dot { background: var(--accent); }

/* фильтр-чипы (тоггл) */
.chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: .4rem .72rem; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; background: var(--surface-2); color: var(--text-muted); transition: var(--t-fast); white-space: nowrap; }
.chip:hover { color: var(--text); background: var(--surface-3); }
.chip.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.chip .c-count { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .7; margin-left: .2rem; }

/* категорийный тег рецепта */
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .5rem; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--accent)); }
.tag { color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); }
.cat-hook { --c: var(--cat-hook); } .cat-structure { --c: var(--cat-structure); } .cat-retention { --c: var(--cat-retention); }
.cat-pacing { --c: var(--cat-pacing); } .cat-narrative { --c: var(--cat-narrative); } .cat-emotion { --c: var(--cat-emotion); }
.cat-cta { --c: var(--cat-cta); } .cat-packaging { --c: var(--cat-packaging); }

.kind-badge { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); background: var(--surface-2); border-radius: 4px; padding: .1rem .4rem; text-transform: lowercase; }

/* ---------- cards / panels ---------- */
.card { background: var(--surface); border-radius: var(--radius); transition: var(--t-fast); }
a.card { color: var(--text); }   /* карточка-ссылка: заголовок нейтральный, не акцентный */
.panel { background: var(--surface); border-radius: var(--radius-lg); padding: 1.05rem 1.1rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; }
.panel-head h3 { font-size: 1.02rem; }

/* ---------- filters bar ---------- */
.filters { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem; }
.filter-search { position: relative; }
.filter-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .62rem .8rem .62rem 2.3rem; color: var(--text); font-size: .9rem; min-height: 42px; }
.filter-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.filter-search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-dim); }
.filter-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem 1.9rem .45rem .7rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); min-height: 38px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23645B7C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
.result-count { font-size: var(--fs-sm); color: var(--text-dim); font-family: var(--font-mono); }

/* ---------- recipe card (база знаний) ---------- */
.rlist { display: flex; flex-direction: column; gap: .55rem; }
.recipe-card { position: relative; display: block; padding: .85rem .95rem .85rem 1.15rem; overflow: hidden; }
.recipe-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--accent)); }
.recipe-card:hover { background: var(--surface-2); }
.rc-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.rc-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; margin-right: auto; }
.rc-statement { color: var(--text-muted); font-size: .88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-meta { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--font-mono); flex-wrap: wrap; }
.rc-meta b { color: var(--text-muted); font-weight: 600; }
.rc-stat { display: inline-flex; align-items: center; gap: .3rem; }
.rc-stat svg { width: 13px; height: 13px; }

/* quality meter */
.quality { display: inline-flex; align-items: center; gap: .4rem; }
.q-bar { width: 46px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.q-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.q-val { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); }

/* ---------- rows (generic list: видео, проекты, журнал) ---------- */
.rows { display: flex; flex-direction: column; gap: .4rem; }
.row { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: var(--radius-sm); background: var(--surface); transition: var(--t-fast); }
.row:hover { background: var(--surface-2); }
.row-thumb { width: 56px; height: 36px; border-radius: 6px; flex: none; object-fit: cover; background: var(--surface-3); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--font-mono); margin-top: 2px; }
.row-aside { flex: none; display: flex; align-items: center; gap: .5rem; }

/* status dot */
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sdot.ok { background: var(--ok); } .sdot.warn { background: var(--warn); } .sdot.err { background: var(--err); }
.sdot.pending { background: var(--pending); } .sdot.idle { background: var(--text-dim); }

/* ---------- triage / stat cards (дашборд) ---------- */
.triage { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.tcard { padding: .9rem; display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; }
.tcard:hover { background: var(--surface-2); }
.tcard .t-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.tcard .t-num { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tcard .t-foot { font-size: var(--fs-xs); color: var(--text-dim); display: flex; align-items: center; gap: .3rem; }
.tcard.accent .t-num { color: var(--accent); } .tcard.spark .t-num { color: var(--spark); }
.tcard.ok .t-num { color: var(--ok); } .tcard.warn .t-num { color: var(--warn); }

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.stat { padding: .8rem .9rem; background: var(--surface-2); }
.stat .s-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.stat .s-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ---------- timecode deep-link ---------- */
.tc { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); background: var(--accent-glow); padding: .12rem .42rem; border-radius: 5px; font-weight: 600; }
.tc:hover { color: #fff; background: var(--accent-2); }
.tc svg { width: 11px; height: 11px; }

/* ---------- candidate (майнинг: кандидат-рецепт на ревью) ---------- */
.candidate { padding: 0; overflow: hidden; }
.cand-body { padding: .9rem 1rem; border-left: 4px solid var(--c, var(--accent)); }
.cand-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.cand-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-right: auto; }
.cand-statement { font-size: .9rem; line-height: 1.55; margin-bottom: .55rem; }
.cand-field { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: .3rem; }
.cand-field b { color: var(--text); font-weight: 600; }
.cand-excerpt { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; border-left: 2px solid var(--border-strong); padding: .3rem 0 .3rem .65rem; margin: .5rem 0; }
.cand-actions { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--border); background: var(--bg-elev); }
.cand-actions .spacer { flex: 1; }
.candidate.accepted { opacity: .6; } .candidate.accepted .cand-body { border-left-color: var(--ok); }
.candidate.rejected { opacity: .42; }
.candidate.rejected .cand-body { border-left-color: var(--err); }
.candidate.rejected .cand-statement, .candidate.rejected .cand-title { text-decoration: line-through; }

/* ---------- recommendation card (этап 2) ---------- */
.rec-card { padding: .95rem 1rem; position: relative; }
.rec-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--surface-2); }
.rec-top { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.rec-score { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: .95rem; color: var(--accent); background: var(--accent-glow); }
.rec-headings { flex: 1; min-width: 0; }
.rec-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.rec-reason { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin: .35rem 0 .6rem; }
.rec-reason b { color: var(--accent); font-weight: 600; }
.rec-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-strong); flex: none; display: grid; place-items: center; transition: var(--t-fast); }
.rlist[data-single] .check { border-radius: 50%; }   /* одиночный выбор разбора - radio-вид */
.rec-card.selected .check { background: var(--accent); border-color: var(--accent); }
.check svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.rec-card.selected .check svg { opacity: 1; }

/* ---------- progress ---------- */
.progress { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s; }

/* ---------- steps / pipeline indicator ---------- */
.steps { display: flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-dim); flex-wrap: wrap; }
.steps .s { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: 99px; background: var(--surface-2); }
.steps .s.done { color: var(--ok); } .steps .s.active { color: var(--accent); background: var(--accent-glow); }
.steps .arrow { color: var(--text-dim); }

/* ---------- tabs / segment ---------- */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: .6rem .8rem; font-weight: 600; font-size: .875rem; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: var(--t-fast); }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- topbar: чип активного канала ---------- */
.chan-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 13rem; padding: .3rem .65rem; margin-left: .35rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: var(--t-fast); }
.chan-chip:hover { color: var(--text); border-color: var(--border-strong); }
.chan-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.chan-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .chan-chip span { display: none; } .chan-chip { max-width: none; } }

/* ---------- ptabs: вкладки внутри панели (страница проекта, правила) ---------- */
.ptabs { display: flex; gap: .1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.ptab { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .7rem; margin-bottom: -1px; color: var(--text-dim); font-size: .9rem; font-weight: 500; line-height: 1; }
.ptab svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.ptab:hover { color: var(--text); }
.ptab.is-on { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- form fields ---------- */
.field { margin-bottom: .85rem; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; }
.field input, .field textarea, .field select { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; color: var(--text); font-size: .9rem; transition: var(--t-fast); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.field textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.field .hint { font-size: var(--fs-xs); color: var(--text-dim); margin-top: .3rem; }

/* ---------- empty / loading states ---------- */
.empty { text-align: center; padding: 2.5rem 1.2rem; }
.empty-ic { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto .8rem; display: grid; place-items: center; background: var(--surface-2); color: var(--text-dim); }
.empty-ic svg { width: 26px; height: 26px; }
.empty h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.empty p { color: var(--text-muted); font-size: .88rem; max-width: 38ch; margin: 0 auto 1.1rem; }

.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- bottom sheet (add action) ---------- */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; opacity: 0; pointer-events: none; transition: var(--t); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--bg-elev); border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; padding: 1rem 1rem calc(1.2rem + var(--safe-b)); transform: translateY(100%); transition: transform var(--t); box-shadow: var(--shadow-pop); }
.sheet-open .sheet { transform: none; } .sheet-open .sheet-scrim { opacity: 1; pointer-events: auto; }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--border-strong); margin: 0 auto .9rem; }
.sheet h3 { font-size: 1.05rem; margin-bottom: .8rem; padding: 0 .2rem; }
.sheet-opt { display: flex; align-items: center; gap: .8rem; padding: .85rem; border-radius: var(--radius); transition: var(--t-fast); }
.sheet-opt:hover { background: var(--surface-2); }
.sheet-opt .so-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; }
.sheet-opt .so-ic.a { background: linear-gradient(140deg, var(--spark), var(--spark-2)); }
.sheet-opt .so-ic.b { background: linear-gradient(140deg, var(--accent), var(--accent-2)); }
.sheet-opt .so-ic svg { width: 21px; height: 21px; }
.sheet-opt b { font-size: .95rem; } .sheet-opt p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + 1rem + var(--safe-b)); transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none; }
.toast { background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text); padding: .6rem .9rem; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-pop); animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 900px) { .toast-wrap { bottom: 1.4rem; } }

/* ---------- callout ---------- */
.callout { display: flex; gap: .6rem; padding: .75rem .9rem; border-radius: var(--radius); background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: var(--fs-sm); color: var(--text); }
.callout svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }
.callout.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .callout.warn svg { color: var(--warn); }

/* ---------- разбор = один документ: абзацы с заголовками тем (без боксов/оглавления) ---------- */
.doc { padding: 1.35rem 1.5rem; }
.doc.editing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); outline: none; }
.doc h3 { font-size: 1.06rem; margin: 1.6rem 0 .55rem; }
.doc h3:first-child { margin-top: 0; }
.doc p { font-size: .95rem; line-height: 1.78; margin-bottom: .8rem; color: var(--text); }
.doc p:last-child { margin-bottom: 0; }
.doc p b { font-weight: 600; }

/* ---------- пайплайн разбора: авто-шаги с лоадером + клик для просмотра текста ---------- */
.pipe { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-xs); }
.pipe .arrow { color: var(--text-dim); }
.pstep { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 99px; background: var(--surface-2); color: var(--text-dim); border: none; font: inherit; line-height: 1.5; }
.pstep.done { color: var(--ok); }
.pstep.done::before { content: '✓'; }
.pstep.run { color: var(--accent); background: var(--accent-glow); }
.pstep.run::before { content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
.pstep.pending { color: var(--text-dim); opacity: .5; }
button.pstep { cursor: pointer; transition: var(--t-fast); }
button.pstep.done:hover { background: var(--surface-3); color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

.tview { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.tview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.tview-head b { font-size: var(--fs-sm); }
.tview pre { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.72; color: var(--text-muted); white-space: pre-wrap; max-height: 230px; overflow: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .85rem; margin: 0; }

.panel[data-script].editing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); outline: none; }

/* ---------- refine: авто-цикл правки (фидбек → тюнинг промпта → прогон → критик → гейт) ---------- */
.refine-run { margin-top: .85rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.refine-intent { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: .6rem; }
.refine-intent b { color: var(--accent); font-weight: 600; }
.refine-loop { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin: 0 0 .7rem; padding: 0; }
.rli { display: flex; flex-direction: column; gap: .2rem; padding: .5rem .65rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.rli-act { display: inline-flex; align-items: center; gap: .45rem; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; }
.rli-act::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-dim); }
.rli.run .rli-act::before { border: 1.5px solid var(--accent); border-top-color: transparent; background: transparent; animation: spin .7s linear infinite; }
.rli.wait .rli-act::before { background: var(--warn); }
.rli.ok .rli-act::before { background: var(--ok); }
.rli-verdict { color: var(--text-muted); font-size: var(--fs-sm); padding-left: 1.05rem; }
.rli.ok .rli-verdict { color: var(--ok); }

.refine-diff { margin-bottom: .7rem; font-size: var(--fs-sm); }
.refine-diff summary { cursor: pointer; color: var(--text-muted); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.refine-diff summary::before { content: '＋'; font-family: var(--font-mono); color: var(--text-dim); }
.refine-diff[open] summary::before { content: '－'; }
.refine-diff summary:hover { color: var(--text); }
.refine-diff .diff-body { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7; margin-top: .5rem; background: var(--bg-elev); border-radius: var(--radius-sm); padding: .6rem .75rem; color: var(--text-muted); }
.refine-diff .dl { display: block; white-space: pre-wrap; }
.refine-diff .dl.del { color: var(--err); }
.refine-diff .dl.add { color: var(--ok); }

.refine-gate { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; padding: .7rem .8rem; border-radius: var(--radius-sm); background: var(--accent-glow); }
.gate-verdict { font-size: var(--fs-sm); color: var(--text); font-weight: 600; flex: 1; min-width: 12ch; }
.gate-actions { display: flex; gap: .4rem; flex: none; }

/* ---------- segmented control (тип источника: видео / текст) ---------- */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); border: none; transition: var(--t-fast); }
.seg-btn svg { width: 15px; height: 15px; stroke-width: 1.8; }
.seg-btn.active { background: var(--accent); color: var(--on-accent); }
.seg-btn:not(.active):hover { color: var(--text); }

/* ---------- desktop layout helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.split { display: flex; flex-direction: column; gap: 1.2rem; }
@media (min-width: 760px) {
  .triage { grid-template-columns: repeat(4, 1fr); }
  .statgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .split { flex-direction: row; align-items: flex-start; }
  .split > * { min-width: 0; }
  .split-main { flex: 1.6; } .split-aside { flex: 1; position: sticky; top: calc(var(--topbar-h) + 1rem); }
}

/* ---------- справка раздела: кнопка «?» у заголовка + отдельная страница ---------- */
/* Иконка мелкая, а палец нет: зона нажатия 44px за счёт паддинга, отрицательный margin
   возвращает её визуальное место рядом с заголовком. */
.help-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-dim);
  padding: .7rem; margin: -.7rem -.7rem -.7rem -.45rem; border-radius: 50%; }
.help-btn svg { width: 1.1rem; height: 1.1rem; stroke-width: 1.7; }
.help-btn:hover, .help-btn:focus-visible { color: var(--accent); }

/* Страница справки - карточка во всю ширину страницы, как остальные разделы. «Назад» один, в шапке. */
.help-page { margin: .5rem 0 2rem; padding: 1.3rem 1.5rem 1.7rem; background: var(--surface); border-radius: var(--radius-lg); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.help-page h1 { font-size: var(--fs-xl); margin: .25rem 0 .9rem; }
@media (max-width: 640px) { .help-page { margin: 0 0 1.5rem; padding: 1rem 1rem 1.3rem; } }

/* Окно подтверждения (scribeConfirm в app.js) вместо системного confirm(). */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px); animation: modal-in .12s ease; }
.modal { width: min(30rem, 100%); padding: 1.2rem 1.25rem 1rem; background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal-text { white-space: pre-line; font-size: .92rem; line-height: 1.55; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
/* Кнопка-иконка с рамкой, как у обычной кнопки: подпись - в подсказке (data-tooltip и aria-label). */
.btn.btn-icon { width: 40px; padding: 0; flex: none; }
.btn.btn-icon svg { width: 18px; height: 18px; }
/* Кнопка «Наверх» (app.js): справа внизу, на телефоне над нижней навигацией. */
.to-top { position: fixed; right: 1rem; bottom: calc(var(--bottomnav-h) + var(--safe-b) + .8rem); z-index: 45; width: 44px; height: 44px;
  border-radius: 50%; background: var(--surface-3); border-color: var(--border-strong); color: var(--text); box-shadow: var(--shadow-pop); }
.to-top:hover { border-color: var(--accent); color: var(--accent); }
.to-top svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .to-top { right: 1.4rem; bottom: 1.4rem; } }
/* Значок сохранения (scribeSaveState в app.js). */
.save-ind { display: inline-flex; width: 14px; height: 14px; flex: none; }
.save-ind[data-state="saving"]::before { content: ''; width: 12px; height: 12px; margin: 1px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: save-spin .7s linear infinite; }
.save-ind[data-state="saved"]::before { content: ''; width: 14px; height: 14px; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.save-ind[data-state="error"]::before { content: '!'; width: 14px; height: 14px; border-radius: 50%; background: #E5484D; /* --err в основной теме приглушённо-розовый и на значке читался как украшение, а не ошибка */
  color: #fff; font-size: 10px; font-weight: 800; line-height: 14px; text-align: center; }
@keyframes save-spin { to { transform: rotate(360deg); } }

/* Отказ в шаге ИИ сервиса из JSON-действия: тот же блок, что флеш страницы, но поверх - кнопку могли
   нажать в середине длинной страницы, и флеш сверху никто бы не увидел (app.js, showNotice). */
.notice-wrap { position: fixed; top: calc(var(--topbar-h) + .6rem); left: 50%; transform: translateX(-50%); z-index: 90;
  width: min(40rem, calc(100vw - 2rem)); }
.notice-wrap .callout { margin: 0; box-shadow: var(--shadow-pop); align-items: center; background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--surface-2); }
.notice-wrap .callout span { flex: 1; }
.notice-close { flex: none; margin-left: auto; }

/* Ссылка «назад» / «к разделу» - капсулой: одна для всех страниц («к проектам», «к каналам», «Назад» в справке). */
.back-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; padding: 0 .8rem 0 .5rem; color: var(--text-muted);
  font-size: .85rem; font-weight: 600; text-decoration: none; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.back-link-fwd { padding: 0 .5rem 0 .8rem; }
.back-link svg { width: 1rem; height: 1rem; flex: none; }
.back-link:hover, .back-link:focus-visible { color: var(--text); border-color: var(--text-dim); background: var(--surface-2); }
@media (max-width: 640px) { .back-link { min-height: 2.75rem; } }
@media (min-width: 900px) { .help-page h1 { font-size: var(--fs-2xl); } }

/* текст справки: первый абзац - суть, дальше разбор */
.help-body { font-size: .92rem; line-height: 1.62; color: var(--text-muted); }
.help-body > p:first-child { font-size: 1rem; color: var(--text); font-weight: 500; margin-bottom: 1rem; }
.help-body h2 { font-size: .98rem; color: var(--text); margin: 1.4rem 0 .5rem; }
.help-body h3 { font-size: .92rem; color: var(--text); margin: 1rem 0 .4rem; }
.help-body p { margin-bottom: .7rem; }
.help-body ul, .help-body ol { margin: 0 0 .8rem 1.1rem; }
.help-body li { margin-bottom: .35rem; }
.help-body li::marker { color: var(--text-dim); }
.help-body strong { color: var(--text); font-weight: 600; }
.help-body code { background: var(--surface-2); border-radius: 4px; padding: .08em .35em; font-size: .87em; }
.help-body a { color: var(--accent); }
.help-body > *:last-child { margin-bottom: 0; }

/* ---------- складной блок: редкие формы и служебные поля не занимают экран ----------
   Сводка в заголовке показывает текущее состояние, поэтому раскрывать нужно только для правки. */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem;
  min-height: 2.5rem; font-weight: 600; font-size: .92rem; color: var(--text); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '＋'; font-family: var(--font-mono); font-weight: 500; color: var(--text-dim); width: 1rem; flex: none; }
.fold[open] > summary::before { content: '－'; }
.fold > summary:hover { color: var(--accent); }
.fold-meta { display: flex; flex-wrap: wrap; gap: .3rem; font-weight: 500; }
.fold-meta .pill { font-size: var(--fs-xs); padding: .15rem .5rem; }
.fold-count { font-weight: 500; font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--font-mono); }
.fold-body { padding-top: .35rem; }
.fold + .fold, .panel + .fold, .fold + .panel { margin-top: .6rem; }
/* тихий складной блок: строка-факт с действием по раскрытию («Вышел 14 сентября · исправить дату») */
.fold-quiet > summary { font-weight: 500; font-size: var(--fs-xs); color: var(--text-muted); min-height: 2rem; }
.fold-quiet > summary::before { content: none; }

/* строки служебных полей внутри складного блока */
.meta-row { display: flex; align-items: center; gap: .45rem .6rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid var(--border); }
.meta-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.meta-select { width: auto; }
.meta-reason { flex: 1; width: auto; min-width: 12rem; }
.meta-hint, .meta-row > .hint { flex-basis: 100%; margin: 0; }

/* источник разбора: превью + ссылка одной строкой */
.bd-source { display: flex; align-items: center; gap: .7rem; max-width: 58rem; margin: 0 0 .8rem; font-size: .9rem; }
.bd-source .vid-thumb { width: 7.5rem; }
.bd-source .dim { font-size: var(--fs-xs); }

/* ---------- карточка ролика (разборы, кандидаты радара): превью + заголовок, метки на всю ширину ---------- */
.vcard { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .3rem;
  align-items: start; padding: .75rem .85rem; }
.vcard-thumb { grid-row: 1 / span 2; display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-elev); }
.vcard-main { min-width: 0; }
.vcard-title { font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--text); }
a.vcard-title:hover { color: var(--accent); }
.vcard-sub { margin-top: .2rem; font-size: var(--fs-xs); color: var(--text-dim); }
.vcard-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
.vcard-tags .pill { font-size: var(--fs-xs); padding: .18rem .5rem; position: relative; z-index: 1; }
.vcard-tags .muted { font-size: var(--fs-xs); }
.vcard-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: .3rem; }
.vcard-cover { position: absolute; inset: 0; border-radius: inherit; }   /* вся карточка - ссылка, кнопки и метки над ней */
.vcard-actions, .vcard-tags a { position: relative; z-index: 1; }

@media (max-width: 899px) {
  .bd-source .vid-thumb { width: 4.5rem; }
  .vcard { grid-template-columns: 5.6rem minmax(0, 1fr); column-gap: .55rem; padding: .5rem .4rem; }
  .vcard-thumb { grid-row: auto; }
  .vcard-title { font-size: .9rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .vcard-tags, .vcard-actions { grid-column: 1 / -1; grid-row: auto; }
  .vcard-actions { justify-content: flex-end; }
  .vcard-hide-sm { display: none; }
  .meta-reason { min-width: 100%; }
}

/* ---------- форма «ссылка + кнопка» в одну строку (разборы, проекты по ссылке) ---------- */
.add-form { max-width: 58rem; margin-bottom: .9rem; }
.add-form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: .4rem; }
.add-form-row { display: flex; gap: .5rem; align-items: stretch; }
.add-form-row .fld { flex: 1; min-width: 0; width: auto; }
.add-form-row .btn { flex: none; }
.add-form .hint { display: block; margin-top: .45rem; }

/* строка над списком: счётчик слева, редкие массовые действия справа */
.list-tools { max-width: 58rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .45rem; padding: 0 .1rem; }
.list-tools .muted { font-size: var(--fs-sm); }
.list-tools .btn svg { width: 15px; height: 15px; }
.bd-list { max-width: 58rem; }

/* выбор разборов для переноса: чекбокс в углу карточки, появляется в режиме переноса */
.bd-pick { position: absolute; top: .45rem; left: .45rem; z-index: 3; display: none; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.bd-pick input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin: 0; }
.vcard.is-pending { opacity: .9; }
/* панель переноса: прилипает к низу экрана, пока отмечаешь разборы (на телефоне - над нижним меню) */
.bd-movebar { position: sticky; bottom: 1rem; z-index: 5; max-width: 58rem; margin-top: .8rem; padding: .6rem .8rem;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-2);
  align-items: center; gap: .5rem .6rem; flex-wrap: wrap; }
.bd-movebar .muted { font-size: var(--fs-sm); }
.bd-movebar select { width: auto; min-width: 12rem; margin-left: auto; }

@media (max-width: 899px) {
  .bd-movebar { bottom: calc(var(--bottomnav-h) + var(--safe-b) + .4rem); padding: .5rem; }
  .help-page { padding: .9rem .9rem 1.2rem; }
  .help-page h1 { font-size: 1.22rem; }
  .bd-movebar select { order: -1; flex: 1 1 100%; margin-left: 0; min-width: 0; }
  /* Длинные пояснения под заголовками блоков: на телефоне их заменяет справка раздела «?».
     Правило здесь, а не в app.css: components.css грузится позже и иначе перебивает display. */
  .hint-long { display: none !important; }
  .add-form { margin-bottom: .6rem; }
  .add-form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .list-tools { padding: 0 .3rem; }
}

/* ---------- список каналов (лобби) ---------- */
.new-box { max-width: 58rem; }
.stack-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stack-form .fld { flex: 1 1 12rem; width: auto; }
.stack-form .fld-wide { flex-basis: 16rem; flex-grow: 2; }
.ch-list { display: flex; flex-direction: column; gap: .5rem; max-width: 58rem; margin-top: .8rem; }
.ch-card { display: flex; align-items: center; gap: .7rem; padding: .85rem; }
.ch-card.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ch-name { flex: 1; min-width: 0; color: inherit; }
.ch-name:hover .ch-title { color: var(--accent); }
.ch-title { font-weight: 600; font-size: .98rem; color: var(--text); transition: color var(--t-fast); }
.ch-name .pill { font-size: var(--fs-xs); padding: .12rem .5rem; margin-left: .3rem; vertical-align: 1px; }
.ch-url { display: block; margin-top: .2rem; font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-links { display: flex; align-items: center; gap: .2rem; flex: none; }
.ch-links form { display: contents; }
.ch-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); color: var(--text-dim); transition: var(--t-fast); }
.ch-link:hover { color: var(--text); background: var(--surface-2); }
.ch-link svg { width: 17px; height: 17px; stroke-width: 1.8; }
.ch-link-label { display: none; }
@media (max-width: 899px) {
  .ch-list { margin-top: .6rem; gap: .4rem; }
  .ch-card { flex-direction: column; align-items: stretch; gap: .4rem; padding: .6rem .4rem .2rem !important; }
  .ch-links { justify-content: space-between; border-top: 1px solid var(--border); padding-top: .15rem; }
  .ch-link { flex: 1; height: auto; min-height: 2.9rem; padding: .3rem 0; }
  .ch-link-label { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .01em; }
}

/* ---------- радар конкурентов ---------- */
.radar-status { max-width: 58rem; display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.radar-switch-form { display: inline-flex; }
.radar-state { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.radar-state b { font-size: .92rem; }
.radar-state .muted { font-size: var(--fs-xs); }
.radar-limits { display: flex; gap: .6rem; flex-wrap: wrap; }
.radar-limits label { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); white-space: nowrap; }
.radar-limits .fld { width: 3.6rem; padding: .3rem .4rem; text-align: center; }
.radar-limits .fld-views { width: 6.2rem; }
.radar-note { max-width: 58rem; margin-top: .6rem; }
.radar-block { max-width: 58rem; margin-top: .75rem; }
.radar-block-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.25rem; }
.radar-block-head h3 { margin: 0; font-size: .95rem; }
.radar-block-head h3 .pill { font-size: var(--fs-xs); padding: .12rem .5rem; margin-left: .25rem; vertical-align: 1px; }
.radar-block-head form { display: inline-flex; }
.radar-block .hint { margin: .35rem 0 .1rem; }
.cv-list { margin-top: .5rem; }
.cv-card .vcard-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cv-card .vcard-actions form { display: inline-flex; }
.cv-spark { width: 5.4rem; height: 1.4rem; opacity: .9; display: block; }
.cv-card .vcard-tags { grid-column: 2; }
.vcard-spark { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
.src-check { display: flex; align-items: center; gap: .55rem; cursor: pointer; min-height: 2.25rem; }

/* строки источников: галочка, название, удалить */
.check-line { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-xs); color: var(--text-muted); margin: .2rem 0 .5rem; cursor: pointer; }
.check-line input { accent-color: var(--accent); margin-top: .1rem; flex: none; }
.src-rows { display: flex; flex-direction: column; margin-bottom: .5rem; }
.src-row { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; border-bottom: 1px solid var(--border); }
.src-row:last-child { border-bottom: 0; }
.src-row input[type=checkbox] { accent-color: var(--accent); flex: none; }
.src-name { flex: 1; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.src-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.src-add > form { display: flex; }
.src-add-form { display: flex; gap: .4rem; flex: 1; min-width: 14rem; align-items: center; }
.src-add-form .fld { flex: 1; width: auto; min-width: 0; }

@media (max-width: 899px) {
  .radar-status { gap: .35rem .6rem; }
  .radar-limits { width: 100%; padding-top: .35rem; border-top: 1px solid var(--border); }
  .radar-block { margin-top: .5rem; }
  /* у кандидата кнопки встают в строку меток справа, а не отдельной строкой: минус 44px на карточку */
  /* у кандидата: метки строкой на всю ширину, ниже искра роста слева и кнопки справа в одной строке */
  .cv-card.vcard { grid-template-columns: 5.6rem minmax(0, 1fr) auto; }
  .cv-card .vcard-main { grid-column: 2 / -1; }
  .cv-card .vcard-tags { grid-column: 1 / -1; }
  .cv-card .vcard-spark { grid-column: 1 / 3; grid-row: 3; justify-self: start; }
  .cv-card .vcard-actions { grid-column: 3; grid-row: 3; }
  .radar-limits { justify-content: flex-start; gap: 1.2rem; }
  .src-add-form { min-width: 100%; }
}


/* ============ МОБАЙЛ: переопределения компонентов ============
   Держать этот блок последним в файле: он обязан перебивать базовые правила выше.
   !important - только там, где у разметки есть инлайн-стили, которые иначе не перебить. */
@media (max-width: 899px) {
  .panel { padding: .65rem .3rem !important; }
  .card, .breakdown-doc, [data-pane="read"] { padding-left: .4rem !important; padding-right: .4rem !important; }
  .rlist { gap: .4rem; }
  .breakdown-doc ul, .breakdown-doc ol { padding-left: 1.15rem; }
  .callout { padding: .55rem .6rem; }
  .empty { padding: 1.4rem .8rem; }

  /* iPhone увеличивает страницу при фокусе на поле со шрифтом меньше 16px и не возвращает масштаб:
     после ввода экран остаётся приближенным и едет вбок. 16px ровно - порог Safari. */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea { font-size: 16px !important; }
  input, select, textarea { max-width: 100%; }
  input[type=checkbox], input[type=radio] { width: 1.15rem !important; height: 1.15rem !important; flex: none; }
  /* выбор базовой версии сценария: длинные подписи вариантов распирали строку шире экрана */
  :has(> label > .base-sel), label:has(> .base-sel) { max-width: 100%; min-width: 0; }
  .base-sel { min-width: 0 !important; flex: 1 1 auto; }
}

/* Палец крупнее курсора: зона нажатия 40px. Узкая ширина тоже в условии - часть мобильных
   браузеров и эмуляторов не сообщает pointer: coarse. */
@media (pointer: coarse), (max-width: 899px) {
  .icon-btn { width: 40px; height: 40px; }
  .btn-sm { min-height: 38px; }
  details > summary { padding-block: .35rem; }
}