/* «Рука на пульсе → Воронка сводная» (msg 18863, funnel.js). Плотная таблица, как лист партнёра (msg 18910): строка в
   одну линию 25 px, шрифт 11 px, тонкая сетка у всех ячеек, граница группы толще; дни заказов и выкупов по 35 px, блоки
   по три дня по 44 px, шапка мелко в 2-4 строки. Закреплены шапка в две строки (группы и столбцы; высоту первой ставит
   страница: --fn-head) и столбец артикула. Инлайн-стилей нет (CSP): всё классами, градиент - ступени h0..h10 из heat.css.
   Цвета - только переменные: тема из app.css, палитра листа партнёра - здесь, на .funnel; в тёмной теме те же оттенки
   приглушены смесью с --surface. Мелкий текст - на усиленных цветах темы (опровергатель 08.10: в светлой --muted на
   белом 4,4:1, оранжевый 3,8:1 при норме 4,5:1): смесь с --text темнит их в светлой теме и светлит в тёмной. */
.funnel{--fn-muted:color-mix(in srgb,var(--muted) 78%,var(--text));--fn-orange:color-mix(in srgb,var(--orange) 70%,var(--text));
  --fn-grid:var(--line);--fn-group:color-mix(in srgb,var(--muted) 50%,var(--line));
  --fn-good:var(--green);--fn-bad:color-mix(in srgb,var(--red) 80%,var(--text));
  --fn-sky:color-mix(in srgb,#e0f7fa 80%,var(--surface));--fn-sand:color-mix(in srgb,#fff2cc 75%,var(--surface));
  --fn-rose:color-mix(in srgb,#fff2f8 90%,var(--surface));--fn-pink:color-mix(in srgb,#f4cccc 60%,var(--surface));
  --fn-mint:color-mix(in srgb,#d9ead3 70%,var(--surface))}
html[data-theme=dark] .funnel{--fn-sky:color-mix(in srgb,#4fc3d1 13%,var(--surface));
  --fn-sand:color-mix(in srgb,#e8b931 12%,var(--surface));--fn-rose:color-mix(in srgb,#e070a8 9%,var(--surface));
  --fn-pink:color-mix(in srgb,#e06666 15%,var(--surface));--fn-mint:color-mix(in srgb,#6aa84f 14%,var(--surface))}
/* шапка страницы в одну строку и панель: таблица начинается выше и тянется до низа окна (--fn-top меряет страница) */
.page.funnel{max-width:none;padding:12px 20px 14px}
.fn-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:8px}
/* шапка как у остальных экранов (msg 21634): название - в крошках полосы, h1 в DOM для aria-labelledby, визуально скрыт */
.fn-head h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fn-head p{margin:0;font-size:11px;line-height:1.4;color:var(--fn-muted)}
.fn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px;font-size:11px}
.fn-day{display:inline-flex;align-items:center;gap:6px;color:var(--fn-muted)}
.fn-day input{padding:4px 7px;font-size:11px}
.fn-search input{width:180px;padding-top:5px;padding-bottom:5px}
.fn-search span{font-size:17px}
.fn-btn{padding:5px 10px;font-size:11px}
.fn-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--fn-muted);white-space:nowrap}
.fn-toggle input{accent-color:var(--green)}
.fn-help{padding:4px 2px;color:var(--fn-muted);text-decoration:underline dotted;text-underline-offset:3px}
/* чипы сезонов (msg 22571): вид сводной РНП (.rnp-schips, rnp.css), высота - как у поля поиска и кнопок панели */
.fn-seasons{--rh:29px;min-width:0}
.fn-seasons .rnp-schips{justify-content:flex-start}
/* точка «Осень/весна» в светлой теме - темнее, как в РНП (rnp.css темнит --orange только внутри #rnp-page): 3,6 -> ~5:1 */
html:not([data-theme=dark]) .funnel .pv-dot.s-demi{background:var(--fn-orange)}
.fn-help[aria-expanded=true]{color:var(--text)}
.fn-notes{margin:0 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:11px;line-height:1.55;color:var(--fn-muted)}
.fn-notes p{margin:0 0 4px;font-size:11px;line-height:1.55;color:var(--text)}
.fn-notes ul{margin:6px 0 0;padding-left:16px}
.fn-sw{display:inline-flex;vertical-align:-2px;margin-right:6px;border:1px solid var(--fn-group)}
.fn-sw i{display:block;width:11px;height:11px}
.fn-tip{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12px}
.fn-tip b{color:var(--text)}
.fn-tip p{flex:1 1 100%;margin:0;color:var(--text);font-size:12px;line-height:1.55}
.fn-tip p.muted{color:var(--fn-muted)}
.fn-tip p.fn-nosrc{color:var(--fn-orange)}
.fn-tip .text-btn{margin-left:auto;color:var(--fn-muted)}
/* таблица */
.fn-wrap{overflow:auto;width:fit-content;max-width:100%;max-height:max(320px,calc(100vh - var(--fn-top,250px) - 14px));border:1px solid var(--fn-group);border-radius:8px;background:var(--surface)}
@supports(height:100dvh){.fn-wrap{max-height:max(320px,calc(100dvh - var(--fn-top,250px) - 14px))}}
.fn-wrap:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.fn-table{border-collapse:separate;border-spacing:0;width:min-content;font-size:11px;line-height:14px;font-variant-numeric:tabular-nums}
.fn-table th,.fn-table td{padding:5px 4px;border:0 solid var(--fn-grid);border-width:0 1px 1px 0;text-align:right;white-space:nowrap;background:var(--surface)}
.fn-table .ge{border-right:2px solid var(--fn-group)}
.fn-table thead th{position:sticky;top:0;z-index:3;padding:3px;background:var(--bg);color:var(--fn-muted);font-size:10px;line-height:12px;font-weight:600;white-space:normal;vertical-align:bottom}
.fn-table thead tr.fn-r2 th{top:var(--fn-head,19px);border-bottom:2px solid var(--fn-group)}
.fn-table th.fn-a{position:sticky;left:0;z-index:2;width:136px;min-width:136px;max-width:136px;padding:5px 6px;text-align:left;border-right:2px solid var(--fn-group);color:var(--text);font-weight:500}
.fn-table thead th.fn-a{z-index:5;padding:3px 6px;border-bottom:2px solid var(--fn-group)}
.fn-corner span{display:block;color:var(--text);font-size:11px}
.fn-corner small{display:block;font-size:9px;font-weight:400;color:var(--fn-muted)}
.fn-table th.fn-g{text-align:center;color:var(--text)}
.fn-gbtn{border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.fn-gbtn:hover{color:var(--green)}
.fn-range{font-size:9px;font-weight:400;color:var(--fn-muted);white-space:nowrap}
.fn-table th.w35{width:35px;min-width:35px}
.fn-table th.w44{width:44px;min-width:44px}
.fn-table th.w50{width:50px;min-width:50px}
.fn-table th.w56{width:56px;min-width:56px}
.fn-table th.w64{width:64px;min-width:64px}
.fn-table th.w150{width:150px;min-width:150px}
.fn-sort{border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:600;text-align:right;cursor:pointer}
.fn-h.w35 .fn-sort,.fn-h.w44 .fn-sort{display:block;width:100%;text-align:center}
.fn-sort:hover,.fn-h.on .fn-sort{color:var(--text)}
.fn-table thead th.fn-h.on{background:var(--green-soft)}
.fn-h[aria-sort]::after{position:absolute;top:1px;right:1px;padding:0 1px;border-radius:2px;background:var(--green-soft);font-size:9px;line-height:10px;color:var(--green)}
.fn-h[aria-sort=descending]::after{content:"↓"}
.fn-h[aria-sort=ascending]::after{content:"↑"}
.fn-hl{font-weight:600}
.fn-lbl{position:relative;display:block}
.fn-lbl .fn-sort,.fn-lbl .fn-hl{display:block;width:100%;text-indent:11px}
.fn-lbl .fn-i{position:absolute;left:0;top:0;padding:0;line-height:12px}
.fn-lbl .fn-sort::before{content:"";float:right;width:8px;height:1px}   /* место под стрелку: она не закрывает букву */
.fn-i{border:0;background:none;padding:0 0 0 2px;color:var(--fn-muted);font:inherit;font-size:10px;font-weight:400;cursor:pointer;vertical-align:baseline}
.fn-i:hover{color:var(--green)}
.fn-table th.nosrc small{display:block;font-size:9px;font-weight:500;color:var(--fn-orange)}
.fn-table td.na{color:var(--fn-muted);text-align:center;cursor:help}
.fn-table td.inc{box-shadow:inset 0 0 0 100px var(--orange-soft)}
.funnel td.inc:is(.h0,.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9,.h10){box-shadow:inset 0 0 0 2px var(--fn-orange)}
.fn-table td.why{color:var(--fn-muted);text-align:center;cursor:help}
.funnel .fn-table td:is(.h0,.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9,.h10){color:var(--heat-text)}   /* сильнее серого td.why на ступени */
.fn-table td[data-fn-note]:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.fn-table td.hint{text-decoration:underline dotted var(--muted);text-underline-offset:3px;cursor:help}
.fn-table td.mark{font-style:italic}
.fn-table td.txt{text-align:left}
.fn-clip{display:block;max-width:142px;overflow:hidden;text-overflow:ellipsis}
/* артикул в одну строку: миниатюра 18×24 не раздвигает строку (отрицательные поля), рейтинг мелко справа */
.fn-card{display:flex;align-items:center;gap:5px;width:124px;overflow:hidden}
.fn-card .thumb.sm{width:18px;height:24px;margin:-5px 0;border-radius:3px}
.fn-card .art{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600}
.fn-card>b{font-weight:600}
.fn-rate{flex:none;margin-left:auto;font-size:9px;font-weight:500;color:var(--fn-orange)}
.fn-all{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin:-2px 0;border-radius:3px;background:var(--green-soft);color:var(--green);font-weight:700}
.fn-total-season .pv-dot{margin:0 5px}                 /* итог сезона: точка сезона на месте ∑ (ширина 18 px) */
.fn-table tr.fn-total>*{background:var(--bg);font-weight:600;border-bottom:2px solid var(--fn-group)}
.fn-table tr.fn-row:hover>*{background-image:linear-gradient(color-mix(in srgb,var(--text) 6%,transparent),color-mix(in srgb,var(--text) 6%,transparent))}
.fn-table tr.fn-still>*{background:var(--bg)}
.fn-table th.fn-wide{position:static;width:auto;min-width:0;max-width:none;border-right:0}
.fn-wide>*{position:sticky;left:6px;display:inline-block}
.fn-still-btn{border:0;background:none;padding:0;color:var(--fn-muted);font:inherit;font-size:11px;cursor:pointer}
.fn-still-btn:hover{color:var(--text)}
.fn-table tr.fn-quiet td{color:var(--fn-muted);text-align:left}
.fn-quiet-td>span{position:sticky;left:142px;display:inline-block}
.fn-table tr.fn-msg th{font-weight:400;color:var(--fn-muted)}
/* раскраска как в листе партнёра: градиент ступенями h0..h10 - общий, heat.css; здесь заливки столбцов листа */
.funnel .f-sky{background:var(--fn-sky)}
.funnel .f-sand{background:var(--fn-sand)}
.funnel .f-rose{background:var(--fn-rose)}
.funnel .f-pink{background:var(--fn-pink)}
.funnel .f-mint{background:var(--fn-mint)}
.funnel .good{color:var(--fn-good);font-weight:600}
.funnel .bad{color:var(--fn-bad);font-weight:600}
@media(max-width:720px){
  .page.funnel{padding:10px 10px 16px}
  .fn-bar{gap:6px 10px}
  .fn-search{flex:1 1 100%}
  .fn-search input{width:100%}
  .fn-seasons{--rh:32px;flex:1 1 100%}               /* чипы своей строкой под поиском, палец попадает */
  .fn-wrap{max-height:none}                          /* одна прокрутка страницы, как у сводной РНП: таблица не прячет низ */
  .fn-table th.fn-a{width:96px;min-width:96px;max-width:96px;padding:5px 4px}
  .fn-card{width:88px}
  .fn-quiet-td>span{left:102px}
  .fn-card .thumb,.fn-card .fn-rate,.fn-all{display:none}
}
/* Подпись архива (решение 10.10): цвет текста, не --muted (12px на фоне muted меньше 4,5:1) */
.fn-archive{margin:0 0 12px;padding-left:10px;border-left:3px solid var(--line);color:var(--text);font-size:12px}