/* Портал развития СК Компакт. Оформление то же, что в Реестр.html и Источники.html: лист чертежа, основная надпись, моноширинные подписи полей. Ничего лишнего на экране. */ /* Экранные шрифты — свои файлы, без обращений к чужим серверам (как Manrope у входа). Inter — текст и цифры: сделан для экранов, цифры табличные, одной ширины. JetBrains Mono — только мелкие моноширинные подписи: мягче и разборчивее Menlo. */ @font-face{font-family:'Inter Portal';src:url('/static/fonts/inter-cyrillic-wght-normal.woff2') format('woff2'); font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Inter Portal';src:url('/static/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'JBMono Portal';src:url('/static/fonts/jetbrains-mono-cyrillic-wght-normal.woff2') format('woff2'); font-weight:100 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JBMono Portal';src:url('/static/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215} :root{ /* ── краски портала: один словарь на все темы ── Тема («Вид портала» в меню человека) переопределяет эти значения на . Компоненты ниже знают только имена — ни одного цвета в правилах напрямую, иначе тема его не достанет. */ /* лист и поверхности */ --paper:#EFF1F4; --panel:#fff; --panel2:#FBFCFD; --field:#fff; /* ховер строки — заметная голубая вуаль (по UniVue), зебра — шёпот чернил: оба полупрозрачные, чтобы ложились на любой лист, включая просвечивающие */ --hover:rgba(61,100,146,.09); --zebra:rgba(16,36,66,.03); --open:#F8FAFD; --us:#F4F7FB; --us-h:#EFF4FA; --cold:#FEFAF1; --cold-h:#FDF6E7; --soft-off:#EDEFF2; --code-bg:#F2F4F7; /* подложка страницы: цвет и слои-картинки порознь — в одном свойстве background цвет разрешён только в последнем слое, и многослойная тема молча теряла фон */ --bgc:#eef1f4; --bgi:radial-gradient(120% 110% at 50% -10%,#f3f5f7 0%,#e9edf2 52%,#e2e7ee 100%); --gapc:var(--paper); /* цвет разрыва вокруг раскрытой записи */ --pborder:var(--rule); /* кромка панелей */ --pblur:none; /* у тем с фоном панели чуть просвечивают */ /* чернила: значение темнее подписи, подпись темнее служебного */ --ink:#141821; --ink2:#5A6474; --ink3:#8A94A3; --val:#333B49; /* значения данных: спокойнее заголовков */ --name:#333B49; /* имена компаний в реестре */ --link:#3B5A82; /* тихая ссылка в данных: без подчёркивания */ --rule:#CBD2DB; --rule2:#E3E8EE; /* акценты */ --blue:#3D6492; --blue-deep:#2A4A70; --blue-soft:#E4EBF6; --blue-mid:#7C97C4; --btn:#3D6492; --btn-h:#0E3468; --rose:#C47B9E; --mark:#F0B429; --mark-soft:#FDF3DC; --mark-ink:#8A6A12; --gone:#9AA3AF; --alert:#9E2B1E; --alert-soft:#FBECEA; --ok:#1B6B4C; --ok-soft:#EAF3EE; --f-ok:#3E6B54; --f-mid:#8A6A12; --f-bad:#93493E; --star:#CDD3DB; --star-on:#E8A317; /* тона карточек: компания синеватая, объект зеленоватый, группа фиолетовая — с одного взгляда видно, в какой карточке находишься. Краска подмешивается в панели через color-mix, поэтому каждая тема даёт свой оттенок сама; тёмным темам ниже — светлые краски и доля побольше, иначе не разглядеть. */ --card-co:#3D6492; --card-ob:#317A57; --card-gr:#6C5CA8; --card-mix:6%; /* доля краски в панелях карточки */ --card-mix2:14%; /* доля краски в подложке окна-карточки */ /* ── контролы: один рост, один радиус, один голос (эталон — Master UniVue) ── Всё, чем человек управляет в строке (поиск, селект, кнопка, пилюля, кнопка-иконка), — высоты --ctl-h; маленькая кнопка в раскрытиях — --ctl-h-sm. Каретка селекта и лупа поиска — svg-картинки: в url() токен цвета не дотягивается, поэтому у тёмных тем и «Бумаги» свои копии нужного цвета. */ --ctl-h:28px; --ctl-h-sm:24px; --ctl-r:7px; --ctl-ring:0 0 0 3px rgba(61,100,146,.12); /* мягкое кольцо фокуса поля */ /* ── плотность реестров: одно место, откуда таблицы берут все свои числа ── Приём Master UniVue: высота строки, отступы и шрифты живут одним набором, а не расползаются по правилам отдельных экранов — иначе строка у одного реестра тихо вырастает, и при переходе между вкладками список едет. Наборов два, какой включён — выбор человека в «Виде портала» (html[data-density]). Правило: ни один экран не задаёт эти величины сам. */ --reg-row-h:27px; /* рост строки реестра — один на все экраны */ --reg-font:13px; /* шрифт ячейки */ --reg-name-font:13.5px; /* имя записи — на полтона крупнее остального */ --reg-line:20px; /* межстрочный: он же рост строки без отступов */ --reg-pad-y:2px; /* отступ ячейки сверху и снизу */ --reg-pad-x:10px; /* отступ ячейки слева и справа */ --reg-head-font:9.5px; /* шрифт шапки таблицы */ --reg-head-pad:5px; /* поле под подписью шапки */ --reg-head-h:23px; /* рост шапки: по нему липкие строки встают ПОД неё */ --reg-chip-font:10px; /* плашки и чипы внутри строки */ --reg-chip-pad:5px 7px; /* поля чипа: в плотном наборе они тоже ужимаются */ --reg-badge:18px; /* квадратик категории: он задаёт нижний предел строки */ --reg-ava:20px; /* кружок с лицом куратора */ --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238A94A3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%238A94A3' stroke-width='1.4'/%3E%3Cpath d='m9.4 9.4 3 3' stroke='%238A94A3' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); --btnr:var(--ctl-r); /* скругление кнопок: «Компакт» делает пилюли */ --dimf:brightness(.93); /* знак наведения на чип: тёмные темы светлеют */ /* шапка портала */ --top-bg:rgba(255,255,255,.92); --top-brand:#0F1B2D; --top-ink:#4B5B70; --top-on:var(--ink); --top-ink2:var(--ink3); /* тени: две сложенные полупрозрачные — приподнятость, а не «тень» */ --e1:0 1px 2px rgba(16,24,38,.05),0 1px 1px rgba(16,24,38,.03); --e2:0 18px 44px -18px rgba(16,24,38,.4); --disp:"Avenir Next",'Inter Portal',"Helvetica Neue",-apple-system,sans-serif; --body:'Inter Portal',"Helvetica Neue",-apple-system,"Segoe UI",sans-serif; --mono:'JBMono Portal',"Menlo","SF Mono",ui-monospace,monospace; --sp:clamp(16px,2.4vw,30px); } /* ─── темы («Вид портала», страница /look) ─── Правило одно, из мировой практики (Trello, Битрикс24): декоративный фон живёт ВОКРУГ карточек, сами таблицы с цифрами всегда на сплошной светлой или тёмной подложке — плотность и читаемость не спорят с красотой. */ /* Синева — фирменная: тёмно-синяя чертёжная подложка с сеткой, светлые листы */ [data-theme="sineva"]{ --bgc:#0E2136; --bgi:radial-gradient(90% 70% at 85% -10%,rgba(103,150,199,.28) 0%,rgba(103,150,199,0) 60%), radial-gradient(80% 90% at 0% 100%,rgba(26,58,92,.55) 0%,rgba(26,58,92,0) 55%), repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 56px), repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 56px); --paper:#122A44; --gapc:rgba(10,28,48,.12); --panel:rgba(250,252,254,.94); --pblur:blur(16px) saturate(1.3); --pborder:rgba(255,255,255,.45); --e1:0 1px 2px rgba(4,14,26,.2),0 10px 34px -18px rgba(4,14,26,.5); --top-bg:rgba(9,23,38,.78); --top-brand:#EAF1F8; --top-ink:#A9BDD3; --top-on:#fff; --top-ink2:#7E96AF; } /* Компакт — как витрина kompakt-24.com: светлая дымка, синий и роза, кнопки-пилюли */ [data-theme="kompakt"]{ --bgc:#E9EDF2; --bgi:radial-gradient(85% 70% at 18% 0%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 55%), radial-gradient(70% 80% at 100% 10%,rgba(124,151,196,.22) 0%,rgba(124,151,196,0) 55%), radial-gradient(60% 60% at 82% 96%,rgba(196,123,158,.12) 0%,rgba(196,123,158,0) 55%); --paper:#E9EDF2; --gapc:rgba(96,116,148,.13); --panel:rgba(253,254,255,.9); --pblur:blur(18px) saturate(1.25); --pborder:rgba(255,255,255,.75); --e1:0 1px 2px rgba(16,29,47,.05),0 16px 40px -26px rgba(16,29,47,.35); --top-bg:rgba(238,241,244,.72); --top-brand:#101D2F; --top-ink:#4B5B70; --btn:#3D6492; --btn-h:#2A4A70; --btnr:999px; } /* Небо — светлый воздух: мягкий рассветный градиент, панели чуть просвечивают */ [data-theme="nebo"]{ --bgc:#DEE6F1; --bgi:radial-gradient(55% 60% at 10% 0%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 60%), radial-gradient(60% 70% at 90% 6%,rgba(203,190,226,.5) 0%,rgba(203,190,226,0) 55%), radial-gradient(80% 90% at 50% 110%,rgba(168,199,219,.55) 0%,rgba(168,199,219,0) 60%); --paper:#E3E9F3; --gapc:rgba(96,116,148,.14); --panel:rgba(255,255,255,.86); --pblur:blur(20px) saturate(1.35); --pborder:rgba(255,255,255,.6); --e1:0 1px 2px rgba(40,54,80,.06),0 12px 36px -22px rgba(40,54,80,.35); --top-bg:rgba(255,255,255,.66); } /* Бумага — тёплый лист, никакой декорации, только типографика */ [data-theme="bumaga"]{ --bgc:#F3EFE7; --bgi:radial-gradient(120% 110% at 50% -10%,#F8F5EE 0%,#F1EDE4 60%,#ECE7DC 100%); --paper:#F3EFE7; --panel:#FDFCF9; --panel2:#F8F6F0; --field:#FDFCF9; --hover:rgba(74,96,118,.075); --zebra:rgba(62,52,20,.04); --open:#F8F5EC; --us:#F1EDE1; --us-h:#EDE8DA; --soft-off:#ECE8DD; --code-bg:#F0EBE0; --ink:#1E1B15; --ink2:#63604F; --ink3:#94907E; --val:#3B382E; --name:#3B382E; --link:#5A5340; --rule:#D5CFBF; --rule2:#E6E1D3; --blue:#4A6076; --blue-deep:#35485A; --blue-soft:#EAE5D8; --blue-mid:#97A4AC; --btn:#4A5568; --btn-h:#333D4D; --rose:#B08496; /* тона карточек — в приглушённом голосе «Бумаги», без экранной яркости */ --card-co:#4A6076; --card-ob:#547862; --card-gr:#75648F; --top-bg:rgba(252,250,245,.92); --top-brand:#25221B; --top-ink:#63604F; --ctl-ring:0 0 0 3px rgba(74,96,118,.13); --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2394907E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%2394907E' stroke-width='1.4'/%3E%3Cpath d='m9.4 9.4 3 3' stroke='%2394907E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Графит и Ночная смена — тёмные режимы: общий словарь… */ [data-theme="grafit"],[data-theme="nochnaya"]{ --paper:#0F1216; --panel:#171B21; --panel2:#1C212A; --field:#12161C; --hover:rgba(127,169,218,.10); --zebra:rgba(255,255,255,.03); --open:#1B212B; --us:#1C2530; --us-h:#212B38; --cold:#241F14; --cold-h:#2A2418; --soft-off:#242A33; --code-bg:#20252D; --gapc:#0C0F13; --pborder:#262C36; --ink:#E8EBF0; --ink2:#A7AFBC; --ink3:#737C8B; --val:#CBD2DD; --name:#D6DBE4; --link:#9DB6D4; --rule:#333B47; --rule2:#252B35; --blue:#7FA9DA; --blue-deep:#A5C4E8; --blue-soft:#1E2A3A; --blue-mid:#466182; --btn:#3E6DA0; --btn-h:#4F81B8; --mark:#D9A430; --mark-soft:#2C2514; --mark-ink:#D9B35C; --gone:#6C7480; --alert:#E0705F; --alert-soft:#33201C; --ok:#5FB08A; --ok-soft:#1B2B23; --f-ok:#7FBD9E; --f-mid:#D9B35C; --f-bad:#DE9184; --star:#3C444F; --star-on:#E0A93B; /* тона карточек: на тёмных панелях краска берётся светлее и гуще, иначе оттенок не разглядеть */ --card-co:#7FA9DA; --card-ob:#5FB08A; --card-gr:#A493D6; --card-mix:9%; --card-mix2:18%; --top-bg:rgba(15,18,22,.85); --top-brand:#EDF1F6; --top-ink:#9AA5B4; --top-on:#fff; --top-ink2:#6E7885; --ctl-ring:0 0 0 3px rgba(127,169,218,.16); --caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23737C8B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%23737C8B' stroke-width='1.4'/%3E%3Cpath d='m9.4 9.4 3 3' stroke='%23737C8B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); --dimf:brightness(1.22); --e1:0 1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.25); --e2:0 18px 44px -14px rgba(0,0,0,.7); } [data-theme="grafit"]{ --bgc:#101318; --bgi:radial-gradient(120% 110% at 50% -10%,#161A20 0%,#101318 55%,#0C0E12 100%); } /* …Ночная смена теплее: почти чёрное небо, янтарный прожектор и янтарные акценты */ [data-theme="nochnaya"]{ --bgc:#0C0E11; --bgi:radial-gradient(70% 55% at 88% -8%,rgba(242,169,59,.13) 0%,rgba(242,169,59,0) 60%), radial-gradient(100% 90% at 50% 115%,#121519 0%,rgba(18,21,25,0) 70%); --rose:#F2A93B; --btn:#8A6215; --btn-h:#A67A25; } *{box-sizing:border-box} html,body{margin:0} /* Место под полосу прокрутки занято всегда, даже когда прокручивать нечего. Иначе список из десяти записей идёт без полосы, из ста — с полосой, и при каждом переключении фильтра вся страница дёргается вбок на её ширину (жалоба Николая 20.09.2026: «переключаешь — весь экран прыгает»). */ html{scrollbar-gutter:stable} /* якорные ссылки («работа · финансы · сведения» на карточке) едут плавно, а не прыгают; цель не ныряет под липкую шапку. Явные прыжки скриптов (behavior:'instant') это правило не трогает, выключенная анимация — тоже */ @media (prefers-reduced-motion:no-preference){ html,.cardmodal-body{scroll-behavior:smooth} } :target{scroll-margin-top:56px} body{background-color:var(--bgc);background-image:var(--bgi); background-repeat:no-repeat;background-attachment:fixed; color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} a{color:var(--blue)} .mono{font-family:var(--mono)} .eyebrow{font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)} :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px} .muted{color:var(--ink3)} .dim{color:var(--ink2)} .sm{font-size:12.5px;color:var(--ink2)} /* счётчик занимает постоянное место: без этого «показано 12» и «показано 142» имеют разную ширину, и при переключении тумблера фильтры с кнопками уезжают */ .cnt{font:600 11px/1 var(--mono);color:var(--ink3);letter-spacing:.06em; font-variant-numeric:tabular-nums;min-width:92px} .nowrap{white-space:nowrap} .right{text-align:right} /* Цифры — как в Master UniView (просьба Николая 16.08): системный моноширинный ui-monospace (на Маке — SF Mono), обычный вес, табличные знаки. Цвет — спокойный графит, не чернильный: цифр на экране много, им нельзя кричать. */ .num{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-variant-numeric:tabular-nums;font-size:.93em;color:var(--val)} th.num{color:var(--ink3)} /* «21,8 млрд ₽» — одно число, а не две строки: сумму и единицу не разрывать */ td.num{white-space:nowrap} /* Число в реестре прижато вправо — и в шапке, и в ячейке. Разряды встают столбиком, и «9» против «124» видно как разные величины, не вчитываясь. Правило одно на все реестры: до 20.09.2026 вправо стояла только шапка ленты объектов, а у остальных и заголовок, и значение жались влево. */ .tbl.reg th.num,.tbl.reg td.num{text-align:right} /* ─── шапка одной строкой ─── Марка с синей точкой (как на витрине kompakt-24.com), разделы текстом, активный подчёркнут фирменной розой; справа дата, учебник-книжка и меню человека со служебными разделами. Никаких коробок и этажей. */ /* Плотный набор. Николай смотрит портал, уменьшив масштаб браузера примерно до 80%: строка в 27 точек становится 21,6, шрифт 13 — 10,4. То есть плотность UniVue он уже себе добывает лупой браузера, а текст от этого мылится. Здесь та же плотность при честных 100%: строка 20 точек, шрифт 11,5, и буквы остаются чёткими. Горизонтальные поля сжаты меньше — в ячейках не числа, а названия объектов и имена компаний, на двух точках они слипнутся. */ html[data-density="compact"]{ --reg-row-h:20px; --reg-font:11.5px; --reg-name-font:12px; --reg-line:17px; --reg-pad-y:1px; --reg-pad-x:8px; --reg-head-font:9px; --reg-head-pad:4px; --reg-head-h:20px; --reg-chip-font:9px; --reg-chip-pad:3px 6px; --reg-badge:15px; --reg-ava:16px; } .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:4px; height:46px;padding:0 var(--sp);background:var(--top-bg); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--pborder)} .brand{display:flex;align-items:baseline;gap:8px;margin-right:26px;text-decoration:none; font:600 15px/1 var(--disp);letter-spacing:-.01em;color:var(--top-brand);white-space:nowrap} .brand i{width:9px;height:9px;border-radius:50%;background:var(--blue);display:block; align-self:center} .brand .bsub{font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--top-ink2)} .nav{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{padding:14px 10px 12px;font:500 13px/1 var(--body);color:var(--top-ink);text-decoration:none; border-bottom:2px solid transparent;white-space:nowrap} .nav a:hover{color:var(--top-on)} .nav a.on{color:var(--top-on);font-weight:600;border-bottom-color:var(--rose)} .navgap{width:18px;flex:0 0 auto} /* «Ещё» в шапке: редкие разделы не занимают место в ряду, но и не прячутся совсем — открываются списком под своим словом. Стоит рядом с рядом разделов, а не внутри него: ряд умеет ездить вбок и обрезал бы список. */ .navmore{position:relative;flex:0 0 auto} .navmore>summary{list-style:none;cursor:pointer;padding:14px 10px 12px;white-space:nowrap; font:500 13px/1 var(--body);color:var(--top-ink);border-bottom:2px solid transparent} .navmore>summary::-webkit-details-marker{display:none} .navmore>summary:hover{color:var(--top-on)} .navmore>summary.on{color:var(--top-on);font-weight:600;border-bottom-color:var(--rose)} .navmore .chev{font-size:9px;color:var(--top-ink2);margin-left:5px} .navmore .menu{position:absolute;left:0;top:calc(100% - 4px);z-index:40;min-width:170px; background:var(--panel);-webkit-backdrop-filter:var(--pblur);backdrop-filter:var(--pblur); border:1px solid var(--pborder);border-radius:4px;box-shadow:var(--e2);padding:6px; display:flex;flex-direction:column} .navmore .menu a{display:block;padding:8px 10px;border-radius:2px; font:500 13px/1.2 var(--body);color:var(--ink2);text-decoration:none} .navmore .menu a:hover{background:var(--blue-soft);color:var(--ink)} /* подвкладки раздела в шапке линзы стоят сразу за названием — это переключатель взгляда, а не действие, и читается он в начале строки */ .lenshead .subtabs.mtabs{margin-left:2px} .topbar .spacer{flex:1} .topbar .today{font:500 11px/1 var(--mono);color:var(--top-ink2);white-space:nowrap;margin-right:2px} .tico{display:flex;align-items:center;padding:8px;color:var(--top-ink2);border-radius:3px} .tico:hover{color:var(--blue)} .tico.on{color:var(--blue)} /* меню человека: имя-кнопка, поповер со служебными разделами и выходом */ .usermenu{position:relative} .usermenu>summary{list-style:none;cursor:pointer;padding:8px 2px 8px 10px; font:500 13px/1 var(--body);color:var(--top-ink);white-space:nowrap} .usermenu>summary::-webkit-details-marker{display:none} .usermenu>summary:hover{color:var(--top-on)} .usermenu .chev{font-size:9px;color:var(--top-ink2);margin-left:5px} .usermenu .menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:210px; background:var(--panel);-webkit-backdrop-filter:var(--pblur);backdrop-filter:var(--pblur); border:1px solid var(--pborder);border-radius:4px; box-shadow:var(--e2);padding:6px;display:flex;flex-direction:column} .usermenu .who{padding:8px 10px 10px;font:600 12.5px/1.45 var(--body);color:var(--ink); border-bottom:1px solid var(--rule2);margin-bottom:5px} .usermenu .who .dim{font-weight:500;font-size:11px} .usermenu .menu a,.usermenu .menu button{display:block;width:100%;text-align:left;padding:8px 10px; border:0;background:none;border-radius:2px;font:500 13px/1.2 var(--body);color:var(--ink2); text-decoration:none;cursor:pointer} .usermenu .menu a:hover,.usermenu .menu button:hover{background:var(--blue-soft);color:var(--ink)} .usermenu .menu form{margin-top:4px;border-top:1px solid var(--rule2);padding-top:4px} main{margin:0 auto;padding:14px var(--sp) 70px} /* темы с декоративной подложкой: листам больше воздуха, скругление заметнее — фон должен дышать по краям, иначе зачем он */ [data-theme="sineva"] main,[data-theme="nebo"] main,[data-theme="kompakt"] main{ padding:22px calc(var(--sp) + 16px) 84px} [data-theme="sineva"] .panel,[data-theme="nebo"] .panel,[data-theme="kompakt"] .panel{ border-radius:9px} /* Широкая таблица (календарь) прокручивается внутри панели — страница вбок не ездит. */ .panel{background:var(--panel);-webkit-backdrop-filter:var(--pblur);backdrop-filter:var(--pblur); border:1px solid var(--pborder); border-radius:5px;box-shadow:var(--e1);padding:var(--sp);overflow-x:auto} .panel + .panel{margin-top:14px} /* у реестров верхнее поле меньше: экран должен начинаться с записей */ .panel.lens{padding-top:10px} /* на реестрах экран начинается с записей: поле над листом меньше, чем на страницах с текстом — каждые десять точек сверху это треть строки ленты */ main:has(> .panel.lens){padding-top:12px} h1{margin:0 0 4px;font:600 20px/1.25 var(--disp);letter-spacing:-.02em} h2{font:600 15px/1.3 var(--disp);letter-spacing:-.015em;margin:26px 0 10px; padding-top:16px;border-top:1px solid var(--rule2)} h2:first-child{margin-top:0;padding-top:0;border-top:0} h3{font:600 13px/1.3 var(--disp);margin:18px 0 8px} .lead{font:13px/1.55 var(--body);color:var(--ink2);max-width:78ch;margin:0 0 16px} /* ─── шапка линзы: одна строка вместо заголовка с абзацем ─── Название, сводка и действия в один этаж; объяснение «как читать» раскрывается по желанию — экран сразу начинается с записей, а не с текста. */ .lenshead{position:relative;display:flex;gap:6px 16px;align-items:center;flex-wrap:wrap; margin:0 0 8px} /* На рабочем экране шапка — всегда одна строка: при нехватке места сжимаются фильтры, а не переносится вся строка. Перенос уводил список на этаж вниз, и «Источники» начинались на 30 точек ниже «Заказчиков». На узком экране перенос снова разрешён — там сжимать уже нечего. */ @media (min-width:1400px){.lenshead{flex-wrap:nowrap}} /* поле поиска и фильтры стоят в этой же строке: пока они жили этажом ниже, две строки объектов уходили под них ни за что. Не хватило ширины — строка переносится сама, и вид тот же, что был раньше */ /* Не хватило ширины — сжимаются фильтры, а не переносится вся шапка: перенос уводил список на этаж вниз, и «Источники» начинались на 30 точек ниже «Заказчиков» (docs/23-UI-ЯДРО.md, правило «шапка — одна строка») */ .lenshead .bar{margin:0;flex:0 1 auto;min-width:0;gap:7px;flex-wrap:nowrap} /* на узком экране панель снова разрешает себе перенос — иначе она вылезет за край листа */ @media (max-width:900px){.lenshead .bar{flex-wrap:wrap}} .lenshead .bar .grow{flex:0 1 320px;min-width:170px} /* Селект показывает себя целиком, пока хватает ширины, и ужимается, когда её не хватает: на «Источниках» шесть фильтров в одной строке. Подрезанное значение целиком видно при раскрытии списка. */ .lenshead .bar select{flex:0 1 auto;min-width:96px} .lenshead h1{margin:0;font-size:17px} .lenshead .spacer{flex:1} .lenshead .sum{margin:0;padding:0;border:0;gap:16px} .lenshead .sum b{font-size:15px} .lenshead .sum span{max-width:none} details.lhelp{flex:0 0 auto} details.lhelp>summary{list-style:none;cursor:pointer;font:500 12px/1 var(--body); color:var(--ink3);white-space:nowrap} details.lhelp>summary::-webkit-details-marker{display:none} details.lhelp>summary::before{content:"?";display:inline-block;width:15px;height:15px; border:1px solid var(--rule);border-radius:50%;text-align:center;font:600 10px/15px var(--mono); margin-right:6px;vertical-align:-3px} details.lhelp>summary:hover{color:var(--blue)} details.lhelp[open]>summary{color:var(--ink)} /* открытое объяснение — карточка поверх таблицы, шапку не дёргает */ details.lhelp .in{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:12; background:var(--panel);-webkit-backdrop-filter:var(--pblur);backdrop-filter:var(--pblur); border:1px solid var(--pborder);border-radius:4px; box-shadow:var(--e2);padding:13px 16px; font:13px/1.55 var(--body);color:var(--ink2)} details.lhelp .in p{margin:0 0 8px} details.lhelp .in p:last-child{margin:0} /* «Добавить компанию» — та же кнопка в том же месте на всех реестрах; форма с ИНН выпадает поповером, не занимая своей строки */ details.addpop{position:relative} details.addpop>summary{list-style:none} details.addpop>summary::-webkit-details-marker{display:none} details.addpop .in{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:300px; background:var(--panel);-webkit-backdrop-filter:var(--pblur);backdrop-filter:var(--pblur); border:1px solid var(--pborder);border-radius:4px; box-shadow:var(--e2);padding:13px 14px} /* каркас шапки линзы и строки фильтров держит высоту при любом наборе кнопок */ .lenshead{min-height:30px} .lens .bar{min-height:var(--ctl-h)} .lenshead .subtabs{padding-top:0} /* ─── сообщения ─── */ .flash{margin:14px 0 0;padding:10px 13px;font-size:13.5px;border-left:2px solid var(--ok); background:var(--ok-soft)} .flash.bad{border-left-color:var(--alert);background:var(--alert-soft)} /* ─── сводные числа ─── */ .sum{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;padding-bottom:15px; margin-bottom:16px;border-bottom:1px solid var(--rule2)} .sum div{display:flex;align-items:baseline;gap:7px} /* плитка-ссылка выглядит как обычная плитка: фильтр, а не «синяя ссылка» */ .sum a{display:flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--ink)} .sum a:hover span{color:var(--blue)} .sum b{font:600 22px/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums; color:var(--val)} .sum b.mk{color:var(--mark-ink)} .sum b.al{color:var(--alert)} .sum b.ok{color:var(--ok)} .tbl b.al{color:var(--alert)} .sum span{font:600 9.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--ink3);max-width:14ch} /* ─── воронка ─── */ .funnel{display:flex;gap:1px;margin:6px 0 18px;flex-wrap:wrap} .fstep{flex:1;min-width:96px;background:var(--blue-soft);padding:9px 10px;border-radius:2px} .fstep .n{font:600 19px/1 var(--disp);color:var(--blue);font-variant-numeric:tabular-nums} .fstep .l{font:600 9px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink3);margin-top:5px} .fstep.hot{background:var(--mark-soft)} .fstep.hot .n{color:var(--mark-ink)} .fstep.off{background:var(--soft-off)} .fstep.off .n{color:var(--ink3)} /* сжатая воронка сводки: шаги не растягиваются во всю ширину, цифра и подпись в одну строку — полоса, а не плиты */ .funnel.slim{margin:12px 0 0} .funnel.slim .fstep{flex:0 1 auto;min-width:0;display:flex;align-items:baseline; gap:8px;padding:6px 12px} .funnel.slim .fstep .n{font-size:15px} .funnel.slim .fstep .l{margin-top:0} /* ─── панель фильтров: один этаж высоты --ctl-h ─── */ .bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px} /* поиск — полем размером с задачу, а не с экран; .lg — где поиск и есть задача */ .bar .grow{flex:0 1 300px;min-width:190px} .bar .grow.lg{flex:0 1 480px;min-width:280px} /* в строке фильтров поля идут в ряд, а не каждое на всю ширину; длинный вариант в селекте не раздувает полосу — список внутри всё равно полный */ .bar select,.bar input[type=text]{width:auto} .bar select{max-width:200px} .bar .grow input{width:100%} /* ─── поля: один рост, спокойный шрифт, мягкое кольцо фокуса (эталон UniVue) ─── */ input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{ height:var(--ctl-h);padding:0 9px;border:1px solid var(--rule); border-radius:var(--ctl-r);background:var(--field); font:400 13px/1.4 var(--body);color:var(--ink);width:100%} input::placeholder,textarea::placeholder{color:var(--ink3)} textarea{height:auto;min-height:56px;resize:vertical;line-height:1.5;padding:6px 9px} input[type=text]:hover,input[type=date]:hover,input[type=number]:hover, input[type=password]:hover,select:hover,textarea:hover{border-color:var(--blue-mid)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-mid); box-shadow:var(--ctl-ring)} /* селект — видно, что раскроется: своя каретка вместо системной ямки */ select{appearance:none;-webkit-appearance:none;padding:0 26px 0 9px;color:var(--ink2); background-image:var(--caret);background-repeat:no-repeat; background-position:right 8px center} /* фильтр с выбранным значением — «включён»: полные чернила и синяя кромка, класс ставит шаблон (селект сам не знает, что «любая» — это пусто) */ .bar select.on{color:var(--ink);border-color:var(--blue-mid)} /* поиск — то же поле с тихой лупой внутри, слева */ input.si{padding-left:30px;background-image:var(--lupa);background-repeat:no-repeat; background-position:left 9px center} /* ячейка формы: обычно это