@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{color-scheme:dark;--on-accent:#1d0f11;--accent:#ff6a5c;--accent-d:#ff835f;--accent-2:#ffab57;--bg:#100b10;--surface:#19121a;--surface2:#241a25; --fg:#f4eef0;--muted:#b6a7ac;--line:rgba(255,255,255,.12);--radius:16px;--shadow:0 1px 3px rgba(0,0,0,.3),0 14px 40px -14px rgba(0,0,0,.55);--ok:#2fe08a;--warn:#ffb020;--bad:#ff6a5c;--good-bg:#157347;--warn-bg:#9a5f0a;--bad-bg:#c0392b; --grad:linear-gradient(135deg,#ff6a5c,#ffab57);--user:#ff9f5c; --disp:'Oswald',Impact,sans-serif;--body:'Manrope',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--fg-2:#d8ccd0;--card:#19121a} *{box-sizing:border-box}html{scroll-behavior:smooth} body{margin:0;font-family:var(--body);background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased;background-image:radial-gradient(1100px 700px at 88% -8%,rgba(255,106,92,.13),transparent 60%);background-attachment:fixed} a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline} .wrap{max-width:960px;margin:0 auto;padding:0 24px} /* Дашборды шире текстовых страниц: на мониторе 1440 треть ширины уходила в пустой фон, а таблица из пяти колонок при этом жалась в 960 и ехала в горизонтальный скролл. */ .wrap.wide{max-width:1320px} .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;max-width:960px;margin:0 auto} .brand{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:var(--fg)} .brand .dot{width:26px;height:26px;border-radius:7px;background:var(--grad);position:relative;box-shadow:0 0 16px rgba(255,106,92,.55)} .brand .dot::after{content:'';position:absolute;inset:7px;border:2px solid #fff;border-radius:3px;transform:rotate(45deg)} .crumb{font-size:14px;color:var(--muted)} .navleft{display:flex;align-items:center;gap:16px} /* колокольчик уведомлений */ .navright{display:flex;align-items:center;gap:10px} .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--fg);text-decoration:none} .bell:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)} .belldot{position:absolute;top:4px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--bad-bg);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1} /* аватар-меню (стандартный паттерн: аватар с инициалами → выпадашка) */ .usermenu{position:relative} .avbtn{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);border-radius:22px;padding:4px 8px 4px 4px;cursor:pointer;color:var(--fg);font:inherit;transition:background .12s,border-color .12s} .avbtn:hover{background:var(--surface2)} .usermenu.open .avbtn{background:var(--surface2);border-color:var(--line2,var(--line))} .avbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;flex:0 0 auto;background:linear-gradient(135deg,var(--user,#ff9f5c),#ffab57);letter-spacing:.3px} .av.adm{background:var(--grad)} .av.lg{width:40px;height:40px;font-size:15px;border-radius:12px} .caret{width:15px;height:15px;color:var(--muted);transition:transform .16s} .usermenu.open .caret{transform:rotate(180deg)} .umenu{position:absolute;right:0;top:calc(100% + 8px);min-width:244px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.16);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s;z-index:60} .usermenu.open .umenu{opacity:1;visibility:visible;transform:none} .umhead{display:flex;align-items:center;gap:11px;padding:11px 12px 9px} .umhead .umn{font-weight:700;font-size:14px;line-height:1.25} .umhead .ume{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:158px} .umrole{margin:0 12px 6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-block} .umrole.admin{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)} .umrole.user{color:var(--user,#ff9f5c);background:color-mix(in srgb,var(--user,#ff9f5c) 15%,transparent)} .umsep{height:1px;background:var(--line);margin:6px 4px} .umitem{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--fg);font-size:14px;cursor:pointer} .umitem:hover{background:var(--surface2);text-decoration:none} .umitem .umi{width:17px;text-align:center;color:var(--muted);font-size:15px} .umitem.danger{color:var(--bad)}.umitem.danger .umi{color:var(--bad)} .pipe{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;color:var(--fg);transition:transform .12s,border-color .15s} .pipe:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none} .pipe.soon{opacity:.6;pointer-events:none} .pipe .ic{width:44px;height:44px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;margin-bottom:16px} .pipe .ic.gray{background:var(--surface2);color:var(--muted)} .pipe h3{margin:0 0 6px;font-size:17px;letter-spacing:-.02em} .pipe p{margin:0;color:var(--muted);font-size:14px;line-height:1.5} .tag{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface2);border:1px solid var(--line);padding:3px 9px;border-radius:6px;margin-top:14px} .tag.soon{color:var(--muted);background:var(--surface2)} .nopii{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:10px;padding:10px 13px;margin-top:12px;font-size:13px;line-height:1.5;color:var(--fg-2)} .nopii b{color:var(--warn)} .nopii-s{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:8px} .filepick{margin-top:2px;border-radius:12px;transition:outline .12s,background .12s} .filepick.drag{outline:2px dashed var(--accent);outline-offset:4px;background:var(--accent-bg,rgba(255,106,92,.06))} .fplist{display:flex;flex-direction:column;gap:6px;margin-top:10px} .fpitem{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13.5px} .fpitem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fpitem button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:6px;flex:none} .fpitem button:hover{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)} /* фильтры пайпов на /app */ .pf{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px} .pf::-webkit-scrollbar{display:none} .pfchip{font-family:var(--mono);font-size:12.5px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;flex:none} .pfchip:hover{color:var(--fg);border-color:rgba(255,255,255,.28)} .pfn{font-size:11px;opacity:.65} #pc-all:checked~* [for=pc-all],#pc-tex:checked~* [for=pc-tex],#pc-prod:checked~* [for=pc-prod],#pc-etc:checked~* [for=pc-etc]{background:var(--grad);color:var(--on-accent);border-color:transparent} #pc-tex:checked~.pgrid [data-cat]{display:none}#pc-tex:checked~.pgrid [data-cat=tex]{display:block} #pc-prod:checked~.pgrid [data-cat]{display:none}#pc-prod:checked~.pgrid [data-cat=prod]{display:block} #pc-etc:checked~.pgrid [data-cat]{display:none}#pc-etc:checked~.pgrid [data-cat=etc]{display:block} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px} h1{font-family:var(--disp);font-weight:700;font-size:clamp(24px,6vw,34px);line-height:1.12;letter-spacing:-.01em;margin:0 0 10px;overflow-wrap:anywhere;word-break:normal} h2{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:0;margin:0 0 14px} .lead{color:var(--muted);font-size:17px;margin:0 0 28px;max-width:620px} .label{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 7px;display:block} .inp,textarea,.filewrap{width:100%;background:var(--bg);color:var(--fg);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font-size:16px;font-family:inherit;transition:border-color .15s,box-shadow .15s} .inp:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} textarea{min-height:150px;resize:vertical} .btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:12px;padding:13px 26px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s,transform .05s} .btn:hover{background:var(--accent-d)}.btn:active{transform:translateY(1px)}.btn.lg{padding:15px 30px;font-size:16px;width:100%} .btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--line)}.btn.ghost:hover{background:var(--surface2)} .btn.danger{background:transparent;color:var(--bad);border:1.5px solid color-mix(in srgb,var(--bad) 42%,var(--line))}.btn.danger:hover{background:var(--bad);color:var(--on-accent)} /* недоступная кнопка выглядела рабочей: «Добавить отмеченные» при нуле отметок ничем не отличалась */ .btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none} .btn:disabled:hover{background:var(--accent)}.btn.ghost:disabled:hover{background:transparent} /* выпадающий список: без стиля рисовался белым системным элементом на тёмной форме */ select.sel,select.inp{background:var(--bg);color:var(--fg);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-size:16px;font-family:inherit;min-height:44px;max-width:100%} select.sel:focus,select.inp:focus{outline:none;border-color:var(--accent)} .muted{color:var(--muted)}.small{font-size:13px} /* сегмент-контрол */ .seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--surface2);border-radius:12px;padding:4px;gap:2px;margin-bottom:16px} .seg label{padding:8px 20px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s} .vh{position:absolute;left:-9999px} .lg-foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding:16px 20px;font-size:12.5px} .lg-foot a{color:var(--muted)}.lg-foot a:hover{color:var(--fg)}.lg-foot .tm{width:100%;text-align:center;color:var(--muted);opacity:.7;margin-top:6px} /* согласие при регистрации */ .consent-box{margin:14px 0 4px;text-align:left}.consent-box label{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:8px 0;cursor:pointer} .consent-box input{margin-top:2px;flex:none}.consent-box a{color:var(--accent)} /* модалка предупреждения при загрузке чужих данных */ .dpwarn{border:1px solid var(--warn);background:rgba(230,180,60,.08);border-radius:12px;padding:12px 14px;margin:10px 0;font-size:12.5px} .dpwarn label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;margin-top:8px}.dpwarn input{margin-top:2px;flex:none} /* дисклеймер ИИ в отчёте (плашка) */ .ai-disc{border:1px solid var(--line);border-radius:10px;background:var(--card,rgba(255,255,255,.02));padding:10px 14px;margin:10px 0;font-size:12px;color:var(--muted);line-height:1.5} .panel{display:none} #t-url:checked~.seg [for=t-url],#t-file:checked~.seg [for=t-file],#t-text:checked~.seg [for=t-text]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)} #t-url:checked~#p-url,#t-file:checked~#p-file,#t-text:checked~#p-text{display:block} .filewrap{display:flex;align-items:center;gap:10px;cursor:pointer} .hint{font-size:13px;color:var(--muted);margin-top:12px} /* Блоки обучения — В ОБЩЕЙ теме, а не в одной страницы. Они были объявлены только на списке курсов, а главный рабочий экран автора (страница курса) остался без рамок уроков, отступов вариантов и оформления цитат: вопросы сливались в сплошной текст. */ .les{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-top:10px} .q{border-top:1px solid var(--line);padding:12px 0} .q:first-of-type{border-top:none} .q-bad{opacity:.65} /* Список вопросов читается как стена, если формулировка, эталон и цитата идут подряд одним размером. Видно вопрос и кнопки; разбор — по раскрытию. Ширина строки ограничена: длинная строка не читается. */ .q-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .q-head>.q-stem{min-width:0;flex:1} .q-stem{font-weight:600;font-size:14.5px;line-height:1.45;max-width:62ch} .q-act{flex-shrink:0;display:flex;gap:6px;align-items:center;white-space:nowrap} /* Кнопка «Подстроить» на время работы пишет «Читаю материал…» — без фиксированной ширины строка перескакивала и карточка ехала. */ .q-act .btn{min-width:104px;justify-content:center} .qpick{display:flex;align-items:center;margin-right:2px} .q-det{margin-top:8px} .q-det>summary{display:block;cursor:pointer;font-size:12px;color:var(--muted);list-style:none} .q-det>summary::-webkit-details-marker{display:none} .q-det>summary::before{content:'▸ ';color:var(--muted)} .q-det[open]>summary::before{content:'▾ '} .q-det>summary:hover{color:var(--fg-2)} .q-tag{display:inline-block;font-size:11px;padding:1px 7px;border:1px solid var(--line);border-radius:999px; margin:0 8px 0 2px;color:var(--fg-2)} .lesq{margin-top:6px} .lesq>summary{display:block;cursor:pointer;font-size:12.5px;color:var(--muted);padding:6px 0;list-style:none} .lesq>summary::-webkit-details-marker{display:none} .lesq>summary::before{content:'▸ ';color:var(--muted)} .lesq[open]>summary::before{content:'▾ '} .lesq>summary:hover{color:var(--fg)} .q-opt{font-size:13px;color:var(--fg-2);margin:6px 0 0 4px;line-height:1.5;max-width:70ch} .q-quote{font-size:12px;color:var(--muted);margin-top:8px;border-left:2px solid var(--line);padding-left:10px; line-height:1.5;max-width:70ch} .pmgrid{display:grid;grid-template-columns:1fr;gap:12px} .pmgrid .pchk{display:flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer;color:var(--fg)} .pchk{display:flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer;color:var(--fg)} .pchk input{accent-color:var(--accent);width:17px;height:17px;flex:0 0 auto;cursor:pointer} .btn.sm,.btn.small{padding:7px 14px;font-size:13px} /* Тост без ограничения ширины уезжал за левый край телефона — именно то сообщение, ради которого он показан, становилось нечитаемым. */ #toasts{max-width:min(92vw,420px)} #toasts>div{max-width:100%;overflow-wrap:anywhere;word-break:break-word} .ctxbox{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.ctxlab{display:block;font-weight:600;margin-bottom:8px} /* оценка отчёта (интерактивные звёзды + комментарий) */ .fbcard{margin-top:16px} .stars{display:inline-flex;gap:4px} .star{font-size:30px;line-height:1;color:var(--line);background:none;border:0;cursor:pointer;padding:0 1px;transition:color .1s;font-family:inherit} .star.on{color:#ffab57} .stars.ro .star{cursor:default;font-size:24px} .rate-line{display:inline-flex;align-items:center} .fb-cmt{margin-top:10px;font-size:14px;color:var(--fg-2,var(--fg));font-style:italic} .fb-saved{color:var(--ok);font-size:13px;font-weight:600;opacity:0;transition:opacity .2s} .fb-saved.show{opacity:1} .fb-reply{margin-top:14px;padding:12px 14px;background:var(--surface2);border-radius:10px;border-left:3px solid var(--accent);font-size:14px} /* блок «Как это работает» на форме запуска */ details.method{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);padding:0 26px;margin-top:20px} details.method>summary{list-style:none;cursor:pointer;padding:18px 0;font-family:var(--disp);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:space-between} details.method>summary::-webkit-details-marker{display:none} details.method>summary::after{content:'⌄';font-family:var(--body);font-size:20px;color:var(--muted);transition:transform .18s} details.method[open]>summary::after{transform:rotate(180deg)} details.method[open]{padding-bottom:22px}details.method .method-lead{margin-top:0} .method-lead{margin:0 0 14px;color:var(--fg)} .method-list{margin:0 0 14px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:7px 22px} .method-list li{position:relative;padding-left:23px;font-size:14px;color:var(--fg);line-height:1.45} .method-list li:before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:700} .method-trust{margin:0;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;line-height:1.5} /* бейджи/статусы */ .badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;display:inline-block} .rc-date{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap} .runcard .rc-top{padding-right:34px} .st-queued{background:#4b5563}.st-running{background:var(--warn-bg)}.st-done{background:var(--good-bg)}.st-error{background:var(--bad-bg)}.st-blocked{background:var(--warn-bg)}.st-canceling{background:#4b5563}.st-canceled{background:#6b7280} .pill{padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--line)} .steps{display:flex;flex-direction:column;gap:16px;margin:18px 0 24px} .stepn{display:flex;gap:14px;align-items:flex-start;flex-wrap:nowrap} .stepn .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface2);color:var(--fg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:1px} .stepn .txt{line-height:1.55} /* карточки истории */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px} .grid>*,.pgrid>*{min-width:0} .runcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;min-height:132px;transition:transform .1s,border-color .15s;text-decoration:none;color:var(--fg)} .runcard:hover{transform:translateY(-2px);border-color:var(--accent);text-decoration:none} .runcard .rc-title{color:var(--fg);font-weight:600;font-size:15.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:26px;overflow-wrap:anywhere;word-break:break-word} .runcard .rc-del{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:4px;border-radius:6px} .runcard .rc-del:hover{background:var(--surface2);color:var(--bad)} .rc-foot{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px} .rc-score{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1} .rc-verdict{font-size:13px;font-weight:600;margin-top:6px;color:var(--muted)} /* степпер */ .stepper{display:flex;flex-direction:column;gap:2px} .step{display:flex;align-items:center;gap:12px;padding:9px 0;color:var(--muted);font-size:14px} .step .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none} .step.done{color:var(--fg)}.step.done .dot{background:var(--good-bg);border-color:var(--good-bg);color:#fff} .step.active{color:var(--fg);font-weight:600}.step.active .dot{border-color:var(--accent);border-top-color:transparent;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .progress{height:8px;background:var(--surface2);border-radius:6px;overflow:hidden;margin:14px 0} .progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width .5s} .meterbar{height:9px;background:var(--surface2);border-radius:5px;overflow:hidden;margin:12px 0 2px} .meterbar>i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .4s} .result-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .gauge{--v:0;--c:var(--accent);width:104px;height:104px;border-radius:50%;flex:none; background:conic-gradient(var(--c) calc(var(--v)*1%),var(--surface2) 0);display:flex;align-items:center;justify-content:center} .gauge>div{width:82px;height:82px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center} .gauge b{font-size:30px;letter-spacing:-.02em}.gauge span{font-size:11px;color:var(--muted)} #rep{width:100%;min-height:400px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);display:block} .textprev{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;max-height:340px;overflow:auto;white-space:pre-wrap;font-size:13.5px;line-height:1.5} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .divider{height:1px;background:var(--line);margin:34px 0} footer{text-align:center;color:var(--muted);font-size:13px;padding:40px 0} footer a{color:var(--muted)}footer a:hover{color:var(--accent)} /* доступность: видимый фокус с клавиатуры для всех интерактивных элементов платформы */ a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* адаптив платформы (оболочка: витрина/форма/проверка/кабинет/админка) — раньше media-query не было вообще */ /* шапка страницы с кнопкой справа: на телефоне заголовок сжимался в колонку и рвался посреди слов */ .pagehead-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 16px;flex-wrap:wrap} .pagehead-row>:first-child{flex:1 1 320px;min-width:0} .pagehead-row h1{overflow-wrap:normal;word-break:normal;hyphens:manual} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}.pipe:hover,.runcard:hover{transform:none}} @media(max-width:640px){ .wrap{padding:0 14px} .card{padding:18px} .grid,.pgrid{grid-template-columns:1fr!important} .grid.tiles{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))!important} .nav{padding:16px 14px;gap:10px} .navleft{gap:10px;min-width:0;flex:1 1 auto} .brand{flex:0 0 auto;font-size:17px;letter-spacing:.1em} .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .navright{flex:0 0 auto} .g2{grid-template-columns:1fr!important} h2{font-size:18px}.lead{font-size:15.5px} .btn{padding:12px 18px}.btn.lg{padding:14px 22px} .rc-del{padding:10px;min-width:40px;min-height:40px} .runcard .rc-top{padding-right:46px} .fpitem button{padding:8px 12px;min-height:36px} .pfchip{padding:9px 14px} } /* Таблица на телефоне. Семь-десять колонок в карточке шириной 350 px живут в горизонтальной прокрутке: видно обрезанный фрагмент, и понять, к какой строке относится ячейка, нельзя. Ниже 640 px строка превращается в карточку: слева подпись колонки, справа значение. Подписи проставляет скрипт из шапки таблицы, поэтому разметку каждой таблицы править не нужно. */ @media(max-width:640px){ table.tbl-stack{display:block;width:100%;min-width:0;border-collapse:separate;border-spacing:0} table.tbl-stack tbody{display:block;width:100%;min-width:0} table.tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} table.tbl-stack tr{display:block;border:1px solid var(--line);border-radius:12px; padding:8px 10px;margin:0 0 10px;background:var(--surface)} table.tbl-stack td{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-start;justify-content:space-between; border:0;border-bottom:1px solid var(--line);padding:7px 0;text-align:left} table.tbl-stack tr td:last-child{border-bottom:0} table.tbl-stack td::before{content:attr(data-label);color:var(--muted);font-size:12px; flex:0 1 auto;min-width:34%;text-transform:none;letter-spacing:normal} /* у колонки-галочки заголовок пустой — в столбик строка выглядела как одинокая точка */ table.tbl-stack td.cbcol::before{content:'Выбрать'} /* ряд кнопок шире подписи — уводим его на свою строку, иначе наезжал на «Действие» */ table.tbl-stack td>.acts,table.tbl-stack td>.row{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap} table.tbl-stack td:empty{display:none} table.tbl-stack td.num,table.tbl-stack td.rd-pos{text-align:right} table.tbl-stack td,table.tbl-stack td *,table.tbl-stack td::before{white-space:normal!important;overflow-wrap:anywhere} table.tbl-stack td>*{min-width:0;max-width:100%} table.tbl-stack td .sel,table.tbl-stack td .inp{width:100%} /* Обёртка прокрутки в этом режиме не нужна: строки и так в столбик. */ .tbl-scroll:has(table.tbl-stack){overflow-x:visible;border:0} /* Часть обёрток задана инлайном (`style=overflow-x:auto`) — там нужен !important, иначе таблица в столбик живёт внутри лишней горизонтальной прокрутки. */ div:has(>table.tbl-stack){overflow-x:visible!important} } .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface); color:var(--fg);padding:10px 14px;border:1px solid var(--line);border-radius:0 0 10px 0} .skip:focus{left:0} :root{--motion-fast:140ms;--motion-open:220ms;--motion-enter:280ms; --motion-ease:cubic-bezier(.22,1,.36,1)} @keyframes ui-reveal{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}} @keyframes ui-fade{from{opacity:.55}to{opacity:1}} @media(prefers-reduced-motion:no-preference){ .panel,.acccb:checked~.acc-body,.fxcb:checked~.fxbody,.sectbody:not([hidden]), .modalbg .modal,.rd-ok,.rd-err{animation:ui-reveal var(--motion-open) var(--motion-ease)} .rd-spark>svg{animation:ui-fade var(--motion-enter) var(--motion-ease)} .progress>i,.meterbar>i,.rd-plan-t i{transition:width var(--motion-open) var(--motion-ease)} } .acccb:focus-visible~.acc-head-l,.fxcb:focus-visible~.fxhead-l{ outline:2px solid var(--accent,var(--g1));outline-offset:-2px;border-radius:12px} @supports (interpolate-size:allow-keywords) and (content-visibility:hidden){ @media(prefers-reduced-motion:no-preference){ details:not(.rc-tip):not(.rd-nav-menu)::details-content{interpolate-size:allow-keywords; block-size:0;overflow:clip;transition:block-size var(--motion-open) var(--motion-ease),content-visibility var(--motion-open) allow-discrete} details:not(.rc-tip):not(.rd-nav-menu)[open]::details-content{block-size:auto} } } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .pipe:hover,.runcard:hover,.htile:hover,.htile:focus-visible{transform:none!important} } @media print{ *,*::before,*::after{animation:none!important;transition:none!important} } .ui-icon{display:inline-block;flex:none;width:20px;height:20px;vertical-align:-4px} .ui-iconbox{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface));color:var(--accent)} .ui-iconbox .ui-icon{width:23px;height:23px} .htile .ui-iconbox{margin-bottom:16px} body .pipe .ic{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface)); color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));box-shadow:inset 0 1px 0 #ffffff08} body .pipe .ic .ui-icon{width:24px;height:24px} .umitem .umi{display:inline-flex;align-items:center;justify-content:center;width:20px} .umitem .ui-icon{width:18px;height:18px} body .rd-tab,body .rd-nav-menu>summary{display:inline-flex;align-items:center;gap:7px;min-height:42px} body .rd-nav-menu>summary{list-style:none;color:var(--muted);font-size:13px;padding:8px 12px} body .rd-nav-menu>summary::-webkit-details-marker{display:none} .rd-nav-menu>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0 5px;transition:transform var(--motion-fast)} .rd-nav-menu[open]>summary::after{transform:rotate(225deg)} body .rd-tab.on{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .rd-tab .ui-icon{width:16px;height:16px} body .rd-kpi{align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} body .rd-kpi>.card{box-shadow:0 4px 16px #00000012;padding:20px;gap:8px} body .rd-kpi-h{gap:7px;flex-wrap:wrap;min-height:0;align-items:center;line-height:1.5} body .rd-kpi-h>.ui-icon{color:var(--accent);width:18px;height:18px} body .rd-kpi-h .rd-how{margin-left:0;font-size:11px} body .rd-num{font-size:30px;letter-spacing:-.025em;overflow-wrap:anywhere} body .rd-kpi-s{line-height:1.65} .btn,.avbtn,.rd-tab,.rd-chip-f,.pfchip,.seg label,.umitem,.bell{ transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)} .inp,textarea,select{transition:border-color var(--motion-fast),box-shadow var(--motion-fast)} select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #pc-all:focus-visible~* [for=pc-all],#pc-tex:focus-visible~* [for=pc-tex], #pc-prod:focus-visible~* [for=pc-prod],#pc-etc:focus-visible~* [for=pc-etc]{ outline:2px solid var(--accent);outline-offset:2px} body .pipe,body .runcard,body .htile{transition:transform var(--motion-open) var(--motion-ease),border-color var(--motion-fast),box-shadow var(--motion-open)} body .htile{animation:none;box-shadow:0 2px 12px #00000018;background:var(--surface)} body .htile:hover,body .htile:focus-visible{box-shadow:0 8px 24px #00000030;transform:none} body .pipe:hover,body .runcard:hover{transform:none} @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ body .pipe:hover,body .runcard:hover,body .htile:hover{transform:translateY(-2px)} } @media(prefers-reduced-motion:no-preference){ #main>.hgrid>a,#main .pgrid>.pipe,#main>.rd-kpi>.card{animation:ui-reveal var(--motion-enter) var(--motion-ease)} .umenu,.rd-nav-menu[open]>.rd-tabs{animation:ui-fade var(--motion-open) var(--motion-ease)} .fpitem{animation:ui-reveal var(--motion-open) var(--motion-ease)} } @media(max-width:720px){ body .rd-kpi{grid-template-columns:1fr} body .rd-nav{gap:6px} body .rd-tab{font-size:13px;padding:8px 11px} body .rd-nav>.rd-tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} body .rd-nav>.rd-tabs>.rd-tab{justify-content:center} .btn.sm,.bell,.avbtn,.umitem{min-height:44px} } .ui-search{margin:16px 0}.ui-search[hidden],[data-empty][hidden]{display:none} .ui-search label{display:block;font-weight:600;margin-bottom:8px} .ui-search-row{display:flex;gap:10px;align-items:center}.ui-search-row .inp{flex:1;min-width:0;width:auto} .ui-search [data-count]{margin:8px 0}.ui-filtered{display:none!important} .ui-outline{margin:14px 0;font-size:14px;max-width:100%} .ui-outline>summary{cursor:pointer;color:var(--muted);padding:8px 0;width:fit-content} .ui-outline nav{display:flex;gap:8px;flex-wrap:wrap;padding:10px 0} .ui-outline a{border:1px solid var(--line);border-radius:9px;padding:8px 12px;text-decoration:none;max-width:100%;overflow-wrap:anywhere} .ui-outline a:hover{border-color:var(--accent)} #main h2{scroll-margin-top:90px}.lf-file:focus-within{outline:2px solid var(--accent);outline-offset:3px} .ui-table-sort{display:none} @media(max-width:640px){ .ui-table-sort{display:block;margin:0 0 12px} .ui-table-sort summary{cursor:pointer;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere} .ui-table-sort nav{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0} .ui-table-sort a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere} .ui-table-sort a[aria-current]{border-color:var(--accent)} table.ui-sortable thead{display:none!important} } .ui-input-focus{outline:2px solid var(--accent)!important;outline-offset:3px!important;border-radius:8px} body .lf-main{min-width:0;flex:1 1 220px;overflow-wrap:anywhere} body .lf-act{min-width:0;max-width:100%} body #toasts{position:fixed!important;left:auto!important;right:max(12px,env(safe-area-inset-right))!important; bottom:max(12px,env(safe-area-inset-bottom))!important;transform:none!important; width:420px;max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height:45vh;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;align-items:stretch;gap:8px;z-index:9999;pointer-events:none} .ui-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 16px;min-width:0; border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg); box-shadow:0 6px 24px #0004;pointer-events:auto;font-size:14px;line-height:1.55} .ui-toast-text{flex:1;min-width:0;overflow-wrap:anywhere} .ui-toast-error{border-color:var(--bad)} .ui-toast-close{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0; border-radius:8px;font-size:24px;background:transparent;color:var(--muted);cursor:pointer} .ui-toast-close:hover{color:var(--fg);background:var(--surface2)} .ui-toast-close:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} @media(prefers-reduced-motion:no-preference){.ui-toast{animation:ui-reveal var(--motion-open) var(--motion-ease)}} @media(max-width:720px){ body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=button]):not([type=submit]):not([type=color]), body textarea,body select{font-size:16px!important} body .lf-btn,body .lf-file,.ui-toast-close{min-height:44px} .ui-toast-close{width:44px} body .lf-ren{min-height:44px} } @media(max-width:560px){ body .shpop{bottom:max(12px,env(safe-area-inset-bottom));max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto;overscroll-behavior:contain} } .rd-chip{display:inline-block;font-size:12px;color:var(--muted);border:1px solid var(--line); border-radius:12px;padding:3px 10px;margin:0 6px 6px 0} .rd-why{color:var(--muted);opacity:.75;margin-left:6px} /* Бейдж происхождения числа. Мелкий и приглушённый: это не метрика, а пометка о способе сбора — она нужна, когда читатель спрашивает «откуда это», и не должна спорить с числом. */ .rd-how{display:inline-block;font-size:10.5px;letter-spacing:.02em;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:6px; vertical-align:middle;white-space:nowrap} .rd-chips{display:flex;flex-wrap:wrap} .rd-fresh{margin:12px 0 4px;font-size:13px;color:var(--muted)} .rd-fresh summary{cursor:pointer;color:var(--accent);text-decoration:underline dotted;padding:4px 0} .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top} /* Числа — по правому краю: при левом выравнивании «25,7 тыс» и «296» начинаются с одной координаты, и глаз не видит, что одно в восемьдесят семь раз больше другого. */ /* Табличных цифр здесь нет намеренно. В Manrope `tabular-nums` расширяет и ЗАПЯТУЮ до ширины цифры (замерено в браузере: «363,1» — 62,6px обычными против 72,4px табличными, из них ~3px добирает сама запятая), и число читается как «363, 1». Сопоставимость колонок даёт выравнивание по правому краю, а десятичный разделитель важнее ровных колонок: он меняет смысл числа. */ .tbl th.num,.tbl td.rd-pos,.tbl td.num{text-align:right;white-space:nowrap} .tbl th{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap} .tbl th a{color:inherit;text-decoration:underline dotted;cursor:pointer} .tbl th a:hover{color:var(--fg)} .tbl th .srt{opacity:.7;margin-left:3px} .tbl th a[aria-current] .srt,.tbl th[aria-sort] .srt{opacity:1} .tbl tbody tr:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)} .rd-nav{display:flex;align-items:start;flex-wrap:wrap;gap:6px;margin-top:14px}.rd-nav>.rd-tabs{margin:0}.rd-nav-menu{position:relative}.rd-nav-menu>summary{cursor:pointer;border:1px solid var(--line);border-radius:22px;padding:9px 14px;font-size:14px;color:var(--text)}.rd-nav-menu[open]{flex:1 0 100%}.rd-nav-menu[open]>.rd-tabs{margin:8px 0}.rd-nav :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .rd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0} .rd-tab{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px; text-decoration:none;color:var(--muted)} .rd-tab.on{border-color:var(--accent);color:var(--fg);font-weight:600} .rd-tabs-setup{margin-top:6px} .rd-tab.off{opacity:.5;cursor:not-allowed;border-style:dashed} .rd-tabs-setup .rd-tab{font-size:13px;padding:5px 12px;border-style:dashed; opacity:.85} .rd-tabs-setup .rd-tab.on{border-style:solid;opacity:1} /* Фильтры свёрнуты в одну строку. Развёрнутый блок занимал 157 пикселей на десктопе и 313 на телефоне — там первая цифра экрана оказывалась ниже сгиба целиком. Выбранное видно и в свёрнутом виде: человек не должен разворачивать блок, чтобы узнать, на что смотрит. Механизм — тот же `details`, что у строки свежести, без единой строчки JS. */ .rd-filters-d{margin:14px 0 2px} .rd-filters-s{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer; padding:9px 14px;border:1px solid var(--line);border-radius:12px;list-style:none} .rd-filters-s::-webkit-details-marker{display:none} .rd-filters-s:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .rd-filters-s:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .rd-pick{font-size:13.5px;font-weight:600} .rd-filters-more{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap} .rd-filters-more::after{content:" ▾"} .rd-filters-d[open] .rd-filters-more::after{content:" ▴"} .rd-filters-d[open]>.rd-filters-s{border-bottom-left-radius:0;border-bottom-right-radius:0; border-bottom-color:transparent} .rd-filters-d[open]>.rd-filters{border-top:0;border-radius:0 0 12px 12px;margin-top:0} .rd-filters{display:flex;flex-direction:column;gap:8px;margin:14px 0 2px;padding:12px 14px; border:1px solid var(--line);border-radius:12px} /* Подпись группы — отдельной колонкой, мелким шрифтом вразрядку и в верхнем регистре: раньше «регион» и «Москва» стояли рядом одинаковым кеглем, и было не понять, где название фильтра, а где кнопка выбора. */ .rd-fgroup{display:grid;grid-template-columns:132px 1fr;align-items:baseline;gap:8px} .rd-fgroup + .rd-fgroup{border-top:1px solid color-mix(in srgb,var(--fg) 7%,transparent);padding-top:8px} .rd-flabel{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase; padding-top:5px} .rd-fchips{display:flex;flex-wrap:wrap;gap:6px} .rd-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0} .rd-dates .inp{padding:5px 9px;font-size:16px;width:auto} .rd-dash{color:var(--muted)} .rd-chip-f{font-size:13px;padding:4px 11px;border-radius:999px;border:1px solid var(--line); color:var(--muted);text-decoration:none} .rd-chip-f:hover{border-color:var(--fg);color:var(--fg)} .rd-chip-f.on{border-color:var(--accent);color:var(--fg);font-weight:600; background:color-mix(in srgb,var(--accent) 14%,transparent)} .rd-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px;margin:16px 0} .rd-kpi .card{padding:14px 16px;display:grid;grid-template-rows:auto auto auto auto 1fr;gap:2px} .rd-kpi-h{font-size:13px;color:var(--muted);min-height:2.6em;display:flex;align-items:flex-start; line-height:1.3} .rd-kpi-s{font-size:12px;color:var(--muted);min-height:1.5em} .rd-num{font-size:26px;font-weight:700;line-height:1.15} .rd-spark{margin-top:10px;align-self:end} .rd-plan{margin-top:8px} .rd-plan-t{position:relative;height:8px;border-radius:999px;overflow:visible; background:color-mix(in srgb,var(--fg) 8%,transparent)} .rd-plan-t i{display:block;height:100%;border-radius:999px;background:var(--accent);min-width:2px} .rd-plan-t u{position:absolute;top:-3px;width:2px;height:14px;background:var(--fg);opacity:.7} .rd-plan-l{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4} .rd-plan-s{font-size:11px;color:var(--muted);opacity:.7;margin-top:2px} .rd-plan-none{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4} .rd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:16px;margin-top:16px} .rd-grid>.card{margin-top:0!important;padding:20px} .rd-empty{border:1px dashed var(--line);border-radius:12px;padding:16px;color:var(--muted)} .rd-h2{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0 0 6px} .rd-h2 h2{margin:0;font-size:18px} .rd-sig{display:flex;gap:10px;align-items:flex-start;padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent);font-size:14px} .rd-sig:last-child{border-bottom:none} /* Закрытый или снятый сигнал не прячем: вернувшийся после закрытия — новость важнее нового, и увидеть её можно только рядом с остальными. Приглушаем, чтобы не спорил за внимание. */ .rd-sig-off{opacity:.78} .rd-actform{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px 12px; margin:0 0 14px;align-items:end} .rd-actform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)} .rd-actform .inp,.rd-actform .sel{padding:7px 10px;font-size:16px;min-width:0;width:100%} .rd-actform .req{color:var(--accent)} .rd-ok{border:1px solid var(--ok);border-radius:10px;padding:10px 14px;margin:0 0 12px; font-size:13.5px;color:var(--fg)} .rd-err{border:1px solid var(--bad);border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:13.5px} /* Воронка блоками. Ширина полосы — порядок величины, содержимое — обычный HTML: так уровень можно сделать ссылкой, положить в него полосу выполнения и дату замера. На SVG-трапециях ничего этого не помещалось, а сами трапеции с острыми углами выглядели чертежом. */ .rd-fn{display:flex;flex-direction:column;align-items:center;gap:0} /* Сворачиваемый блок подробностей: нужен не каждый раз, а места занимает экран. */ .rd-fold>summary{cursor:pointer;list-style:none;padding:2px 0} .rd-fold>summary::-webkit-details-marker{display:none} .rd-fold>summary::before{content:"▸ ";color:var(--muted)} .rd-fold[open]>summary::before{content:"▾ "} .rd-fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* «Из чего состоит направление». Свёрнут по умолчанию: развёрнутым список страниц отодвигал вниз линию динамики, ради которой панель и раскрывают. Адреса настоящие и открываются в новой вкладке — число проверяют глазами на самом сайте. */ .rd-parts-box{margin:0 0 14px;border:1px solid var(--line);border-radius:12px; background:var(--surface2)} .rd-parts-box>summary{padding:10px 14px;font-size:12px;letter-spacing:.04em; text-transform:uppercase;color:var(--muted)} .rd-parts-in{padding:0 14px 12px} .rd-parts-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); margin:0 0 6px} ul.rd-parts + .rd-parts-h,.rd-fold + .rd-parts-h{margin-top:14px;padding-top:12px; border-top:1px solid var(--line)} ul.rd-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} /* Ссылка и подпись — В СТОЛБИК, а не по краям строки: разнесённые на всю ширину, они читались как два разных списка, и глаз не связывал адрес с тем, что про него написано. */ ul.rd-parts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px; align-items:baseline;min-width:0} ul.rd-parts a{min-width:0;overflow-wrap:anywhere} .rd-parts-w{grid-column:1/-1;color:var(--muted);font-size:12px;min-width:0} .rd-parts-n{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap; text-align:right} .rd-fn-wrap{width:100%;display:flex;justify-content:center} /* Плашки внутри карточек направлений — та же математика и те же блоки, но мельче: главный блок общих визитов один, и он должен читаться первым. */ .rd-fn-sm .rd-fn-row{padding:12px 16px 11px} .rd-fn-sm .rd-fn-fact{font-size:22px} .rd-fn-sm .rd-fn-name{font-size:11px} /* Уровень раскрывается по щелчку — это `details`, а не ссылка. Ссылкой блок целиком быть не должен: выделение мышью захватывало весь уровень и скопировать одно число было нельзя, а диктор читал ссылку длиной в абзац. Переход на экран показателя лежит внутри панели. */ .rd-fn-det{min-width:0} .rd-fn-row{display:block;text-decoration:none;color:inherit;border:1px solid var(--line); border-radius:16px;padding:16px 20px 14px;background:var(--surface2);min-width:0; cursor:pointer;list-style:none;transition:border-color .15s} .rd-fn-row::-webkit-details-marker{display:none} .rd-fn-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .rd-fn-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .rd-fn-det[open]>.rd-fn-row{border-bottom-left-radius:0;border-bottom-right-radius:0; border-bottom-color:transparent} .rd-fn-more{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)} .rd-fn-more::after{content:" ▾"} .rd-fn-det[open] .rd-fn-more::after{content:" ▴"} .rd-fn-dyn{border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px; padding:14px 20px 16px;background:var(--surface2)} .rd-fn-dyn svg{max-width:100%;height:auto} .rd-fn-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .rd-fn-name{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .rd-fn-state{font-size:11.5px;padding:3px 10px;border-radius:12px;border:1px solid var(--line); color:var(--muted);max-width:min(100%,420px);text-align:right;line-height:1.35} .rd-fn-state.rd-fs-ok{border-color:var(--ok);color:var(--ok)} .rd-fn-state.rd-fs-bad{border-color:var(--bad);color:var(--bad)} .rd-fn-nums{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:8px 0 10px} .rd-fn-fact{font-size:27px;font-weight:700;line-height:1.1} .rd-fn-of{font-size:13px;color:var(--muted)} .rd-fn-bar{position:relative;height:8px;border-radius:999px; background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:visible} .rd-fn-bar i{display:block;height:100%;border-radius:999px;background:var(--accent);min-width:2px; /* Полоса наполняется при открытии: видно, что число живое, а не картинка. */ animation:rdfill .9s cubic-bezier(.2,.75,.2,1) both} @keyframes rdfill{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}} /* Три числа года: набрано, прогноз, коридор. Раньше на плашке стоял один годовой темп, и он читался как «уже набрали столько» — четыре разных утверждения одной цифрой. */ /* Три числа года с ярлыками: замер, расчёт и решение — разной природы и разных периодов. */ /* СЕТКА, а не строка с переносом. Подпись прогноза бывает длинной («коридор появится, когда закроется пять месяцев»), и во flex-строке она растягивала свою ячейку на две трети плашки, сбрасывая план на вторую строку: три равных числа выглядели как два и обрывок. */ .rd-yr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:10px 24px;margin:2px 0 10px;align-items:start} /* Длинная оговорка — отдельной строкой, по левому краю и обычным текстом. */ .rd-fn-cav{font-size:12.5px;line-height:1.5;color:var(--muted);text-align:left; border-left:2px solid var(--line);padding:2px 0 2px 10px;margin:2px 0 10px} /* «Нет числа» — не большая цифра: тем же кеглем оно спорило бы с замерами соседних уровней. */ .rd-fn-none{font-size:16px;font-weight:600;color:var(--muted)} .rd-yc{min-width:0;display:flex;flex-direction:column;line-height:1.3; animation:rdrise .5s cubic-bezier(.2,.7,.2,1) both} .rd-yc:nth-child(2){animation-delay:.08s} .rd-yc:nth-child(3){animation-delay:.16s} /* Число — по левому краю своей колонки, а не во всю её ширину: у прогноза под числом стоит пунктир, и растянутый на колонку он читался как линейка-разделитель. */ .rd-yc>b{align-self:flex-start;font-size:18px;font-weight:700;letter-spacing:-.01em} .rd-yc>span{font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:baseline; flex-wrap:wrap} .rd-yc i{font-style:normal;opacity:.75} .rd-yc i::before{content:"· ";opacity:.6} /* Точка-разделитель нужна, только когда коридор стоит В СТРОКУ с подписью. На узком экране он переносится на свою строку, и точка начинала бы её, как маркер списка. */ @media (max-width:560px){.rd-yc i::before{content:none}} /* Прогноз — не замер, и выглядит иначе: пунктир снизу вместо сплошной линии. */ .rd-yc-fc b{border-bottom:2px dashed color-mix(in srgb,var(--accent) 55%,transparent); padding-bottom:1px} @keyframes rdrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Вердикт: попадает ли прогноз в план — вопрос, ради которого плашка и стоит. */ .rd-yv{font-size:12.5px;margin:0 0 6px;animation:rdrise .5s .2s cubic-bezier(.2,.7,.2,1) both} /* Как прогноз сдвинулся: движение числа, а не само число — потому строкой ниже вердикта и кеглем мельче. */ .rd-ymv{font-size:12px;color:var(--muted);margin:0 0 10px; animation:rdrise .5s .26s cubic-bezier(.2,.7,.2,1) both} .rd-ymv b{color:var(--fg)} /* Подпись под полосой: она объясняет, чей год отложен на чьей шкале. */ .rd-yb-n{font-size:11.5px;color:var(--muted);margin:-6px 0 10px;line-height:1.45} @media (prefers-reduced-motion:reduce){.rd-ymv{animation:none}} .rd-yv.rd-up{color:var(--ok)}.rd-yv.rd-warn{color:var(--warn)}.rd-yv.rd-down{color:var(--bad)} /* Полоса года: закрашено — набрано, штриховка — добавит прогноз, конец полосы — план. */ .rd-yb{position:relative;display:flex;height:10px;border-radius:999px;overflow:hidden; background:color-mix(in srgb,var(--fg) 8%,transparent);margin:0 0 12px} .rd-yb i{display:block;height:100%;background:var(--accent); animation:rdgrow .8s cubic-bezier(.2,.75,.2,1) both} .rd-yb u{display:block;height:100%;text-decoration:none; background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--accent) 45%,transparent) 0 6px, transparent 6px 12px); animation:rdgrow .8s .25s cubic-bezier(.2,.75,.2,1) both} @keyframes rdgrow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ .rd-yc,.rd-yv,.rd-yb i,.rd-yb u{animation:none} } /* Как прогноз сходился внутри месяца: пять снимков подряд. Без этого пять строк одного месяца в журнале читались как дубли. */ .rd-trail{display:flex;gap:4px;flex-wrap:wrap} .rd-tr{display:flex;flex-direction:column;align-items:center;min-width:42px; border:1px solid var(--line);border-radius:8px;padding:3px 5px;line-height:1.2} .rd-tr i{font-style:normal;font-size:10px;color:var(--muted)} .rd-tr b{font-size:12px;font-weight:700} @media (prefers-reduced-motion:reduce){.rd-fn-bar i{animation:none}} .rd-fn-bar u{position:absolute;top:-4px;width:2px;height:16px;background:var(--fg);opacity:.55} .rd-fn-row.rd-fs-none{border-style:dashed} .rd-fn-row.rd-fs-none .rd-fn-fact{color:var(--muted)} .rd-fn-row.rd-fs-none .rd-fn-bar i{background:color-mix(in srgb,var(--fg) 22%,transparent)} /* Итоговая строка выручки: компактная, без полосы и без крупного прочерка. */ /* Итог воронки: плашка того же вида, что уровни, но приземистее — у выручки нет замера. */ .rd-fn-row.rd-fn-money{padding:13px 20px 12px} .rd-fn-money-v{font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--muted)} .rd-fn-link{color:inherit;text-decoration:underline dotted;text-underline-offset:3px} .rd-fn-link:hover{color:var(--accent)} .rd-fn-row-unused{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface2))} .rd-fn-foot{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap} /* Спарклайну нужна коробка фиксированной ширины: сам SVG отдаётся с width:100%, и в строке без ограничителя он растягивается на всю карточку. */ .rd-fn-sparkbox{display:block;width:240px;flex:0 0 240px} .rd-fn-src{font-size:11.5px;color:var(--muted);margin-top:8px} .rd-fn-step{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted); padding:9px 0} .rd-fn-ar{color:var(--accent);font-size:15px;line-height:1.4} /* Подпись перехода: множитель крупно, природа числа — чипом, оговорка — строкой ниже. Одной строкой одного кегля главное число терялось среди ста пятидесяти знаков сноски. */ .rd-st{min-width:0;display:flex;flex-direction:column;gap:2px} .rd-st-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px} .rd-st-v{font-size:15px;font-weight:700;color:var(--fg);letter-spacing:-.01em} .rd-st-w{color:var(--fg);opacity:.85} .rd-st-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em; border:1px solid var(--line);border-radius:999px;padding:1px 7px;line-height:1.5} .rd-st-fact{color:var(--fg)} .rd-st-plan{color:var(--muted);border-style:dashed} .rd-st-p{font-size:12px;color:var(--muted)} /* Сноска — вторым уровнем: тот же смысл, что у «Осторожно» в подсказке. */ .rd-st-n{font-size:11.5px;line-height:1.45;color:var(--muted); border-left:2px solid var(--line);padding-left:8px;max-width:72ch;margin-top:2px} /* Динамика множителя: три подписанных числа вместо кривой. Множитель читают на ходу, и «0,27 → 0,34 → 0,38%» отвечает «растёт или падает» быстрее любого графика. */ .rd-st-3{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:2px 0} .rd-st-3>span{display:flex;flex-direction:column;line-height:1.25} .rd-st-3 b{font-size:14px;font-weight:700;color:var(--fg)} .rd-st-3 i{font-style:normal;font-size:10.5px;color:var(--muted)} .rd-st-tn{font-size:10.5px;color:var(--muted);align-self:center} /* Там, где недельная линия соврала бы, стоит слово, а не график. */ .rd-st-warn{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--warn); border:1px solid var(--warn);border-radius:999px;padding:1px 8px;line-height:1.5} @media(max-width:720px){.rd-fn-row{width:100%!important;padding:14px 16px} .rd-fn-fact{font-size:23px}} .rd-setup{font-size:12px;color:var(--accent);text-decoration:underline dotted; white-space:nowrap;margin-left:6px} /* Строка формы в ячейке таблицы. `wrap` обязателен: три поля и кнопка не влезают в колонку на узком экране, и без переноса поле значения сжималось до стрелок. */ .rd-gform{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .rd-gform .inp{flex:0 1 auto;min-width:0} .rd-gform .sel{padding:5px 8px;font-size:16px} .rd-tform{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:end;margin:0} .rd-tform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)} .rd-tform .inp{width:132px;padding:6px 9px;font-size:16px} .rd-tform label[style] .inp{width:100%} .rd-tform .sel{padding:6px 9px;font-size:16px} /* Полоса массового действия. Стоит НАД таблицей: решение «применить ко всем выбранным» принимают, глядя на список, а не пролистав его до конца. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .rd-bulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px; border:1px solid var(--line);border-radius:10px;font-size:13px} .rd-bulk-l{display:flex;gap:6px;align-items:center;color:var(--muted);cursor:pointer} /* Карточки потерь. Каждая — самостоятельный ответ «сколько и почему», поэтому у неё своя рамка; приглушённая (rd-loss-off) — та, что в общий счёт не идёт и стоит здесь как проверка. */ /* Итог: два числа рядом, одно главное. Годовая величина под месячной — потому что месячная рядом с планом в миллиарды выглядит мелочью и ни к чему не побуждает. */ /* Заголовок группы редких показателей: тема слева, частота замера рядом мелким. Одна подпись на все семь плиток врала про две трети источников — у каждой группы своя. */ /* Кто взял сигнал и до какого числа. Просроченное — акцентом: срок без подсветки не отличается от несрочного, и смысл срока теряется. */ /* Список фраз без спроса: чекбоксы в несколько колонок. Шестьдесят строк в столбик — это экран прокрутки ради одного решения. */ .rd-dead{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:4px 16px} .rd-dead-i{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:2px 0} .rd-dead-i input{flex:0 0 auto} .rd-sig-h{padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent); font-size:13px;line-height:1.5} .rd-sig-h:last-child{border-bottom:none} .rd-sig-h-d{display:inline-block;min-width:82px;color:var(--muted);font-size:12px} .rd-sig-h-w{font-weight:600} .rd-took{display:inline-block;font-size:11.5px;border:1px solid var(--line);border-radius:10px; padding:1px 8px;margin-right:8px;color:var(--fg)} .rd-took.rd-late{border-color:var(--bad);color:var(--bad)} /* Счётчики сигналов на «Сводке»: четыре числа как ссылки в соответствующий раздел «Работы». Лента с кнопками уехала на свою вкладку, здесь нужен только ответ «сколько просрочено, сколько в работе» и переход туда. */ .rd-sigsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px} .rd-sigsum-i{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px; border:1px solid var(--line);text-decoration:none;color:var(--fg)} .rd-sigsum-i:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .rd-sigsum-i b{font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums} .rd-sigsum-i span{font-size:12px;color:var(--muted)} .rd-sigsum-i.rd-late{border-color:var(--bad)} .rd-sigsum-i.rd-late b{color:var(--bad)} .rd-grp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:12px 0 6px; font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .rd-grp-n{text-transform:none;letter-spacing:normal;font-size:12.5px} .rd-total{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px} /* Итог: одно число крупно, уточнения мелким. Три равновеликие плашки не отвечали на вопрос «куда смотреть», а когда гипотез в расчёте нет, две из них показывали одно и то же. */ .rd-sum-l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); display:flex;align-items:center;gap:6px} .rd-sum-v{font-size:40px;font-weight:700;line-height:1.05;margin-top:6px;letter-spacing:-.02em} .rd-sum-v span{font-size:16px;font-weight:400;color:var(--muted);margin-left:8px; letter-spacing:0} .rd-sum-y{font-size:13.5px;color:var(--muted);margin-top:6px} .rd-sum-sub{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;padding-top:12px; border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent)} .rd-sum-x{font-size:13px;color:var(--muted)} .rd-sum-x b{color:var(--fg);font-weight:600} @media(max-width:560px){.rd-sum-v{font-size:32px}} /* Два слоя одной полосой и список строк от крупной к мелкой. Без них итог приходилось собирать глазами по карточкам в двух разделах, а исключённые из суммы стояли там же и сбивали счёт: «нет логики от общей цифры к драйверам её создания». */ .rd-split{margin-top:14px} .rd-split-bar{display:flex;height:14px;border-radius:999px;overflow:hidden; background:color-mix(in srgb,var(--fg) 9%,transparent)} .rd-split-bar i{display:block;height:100%} .rd-split-a{background:var(--accent)} .rd-split-b{background:color-mix(in srgb,var(--accent) 42%,transparent)} .rd-split-l{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font-size:13px} .rd-split-l span{display:flex;align-items:center;gap:7px} .rd-split-d1,.rd-split-d2{width:10px;height:10px;border-radius:3px;flex:0 0 auto} .rd-split-d1{background:var(--accent)} .rd-split-d2{background:color-mix(in srgb,var(--accent) 42%,transparent)} .rd-drv{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(90px,1fr) minmax(0,auto); gap:10px 16px;align-items:start;padding:11px 0; border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent)} .rd-drv:last-of-type{border-bottom:none} .rd-drv-n{font-size:13.5px;display:flex;flex-direction:column;gap:3px;min-width:0} .rd-drv-n>span:first-child{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .rd-drv-d{font-size:12px;color:var(--muted);line-height:1.45} .rd-drv-c{font-size:11px;color:var(--muted);border:1px solid var(--line); border-radius:10px;padding:1px 7px} .rd-drv-bar{height:9px;border-radius:999px; background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden} .rd-drv-bar i{display:block;height:100%;background:var(--accent);min-width:2px} .rd-drv-v{text-align:right;font-size:13.5px;white-space:nowrap} @media(max-width:700px){.rd-drv{grid-template-columns:1fr;gap:5px} .rd-drv-v{text-align:left}} .rd-total-c{border:1px solid var(--line);border-radius:12px;padding:14px 16px} .rd-total-l{font-size:13px;color:var(--muted);margin-bottom:4px} .rd-total-v{font-size:30px;font-weight:700;letter-spacing:-.02em} .rd-total-v span{font-size:14px;font-weight:400;color:var(--muted)} .rd-total-soft{color:var(--muted)} .rd-total-y{font-size:14px;margin-top:4px} .rd-losses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px} .rd-loss{border:1px solid var(--line);border-radius:12px;padding:14px 16px} /* Бледная пунктирная карточка = не входит в итог. Один цвет без подписи читался как «что-то сломалось»: рядом с ней надпись словами, а не только оформление. */ .rd-loss-off{opacity:.72;border-style:dashed} .rd-loss-off-l{margin-top:8px;display:inline-block;font-size:11.5px;color:var(--muted); border:1px dashed var(--line);border-radius:10px;padding:2px 9px} .rd-loss-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px} .rd-loss-v{font-size:24px;font-weight:700;letter-spacing:-.01em} .rd-loss-p{font-size:13px;font-weight:400;color:var(--muted)} .rd-upl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .rd-upl input[type=file]{font-size:12px;color:var(--muted);max-width:210px} .rd-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto} .rd-owner{display:inline-block;font-size:11px;font-weight:600;color:var(--fg); border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-right:7px} td.rd-pos{white-space:nowrap} .tbl td.rd-rivals{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Две точки перелома вместо четырёх: в диапазоне 560–640 страница успевала перекомпоноваться трижды — плитки уже в колонку, полосы ещё в десктопной сетке, карточки ещё с полем 26px. */ @media(max-width:720px){.rd-kpi{grid-template-columns:1fr}.rd-grid{grid-template-columns:1fr} .rd-fgroup{grid-template-columns:1fr;gap:4px} .rd-kpi-h{min-height:0}} /* Правки под телефон, снятые замерами на 360 px. Ширина уровня воронки задана инлайном на
, а медиазапрос перебивал её у — то есть у другого элемента, и правило было пустым. */ @media(max-width:720px){ .rd-fn-det{width:100%!important} .rd-fn-sparkbox{width:100%;max-width:240px;flex:1 1 160px} /* Раскрытая подсказка остаётся флекс-элементом рядом с заголовком: на 360 px ей доставалось 125 px, и абзац раскладывался в колонку шириной в три слова. */ .rd-kpi-h{flex-wrap:wrap} .rd-kpi-h>.rc-tip[open]{flex:1 0 100%;margin-left:0} /* Мишени под палец: чипы, вкладки и мелкие кнопки были 29-38 px при норме 40. */ .rd-chip-f,.rd-tab{min-height:40px;display:inline-flex;align-items:center} .rd-fchips{gap:8px} .rd-how{font-size:12px} .rd-flabel,.rd-fn-name{font-size:12.5px;letter-spacing:.02em} .rd-dates .inp{flex:1 1 140px;min-width:0;max-width:100%} } /* Длинный