/* ============================================================
Deal Network · DN-DESIGN-02 · стиль Steep в действующем интерфейсе
Токены и правила — docs/design/DESIGN.md. Шрифты — /static/fonts/fonts.css (SIL OFL 1.1).
Один общий дизайн для всех маршрутов; цвета только функциональные:
peach — единственный хроматический сигнал «требует внимания».
============================================================ */
:root{
--paper:#ffffff; --fog:#fafafb; --mist:#f2f2f3;
--ink:#17191c; --slate:#5b5f69;
--line:#e6e7ea; --line-strong:#cfd1d6;
--peach:#fbe1d1; --brown:#5d2a1a;
--r-card:24px; --r-elev:20px; --r-sm:16px; --r-pill:9999px;
--serif:'Source Serif 4','Georgia','Times New Roman',ui-serif,serif;
--sans:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--wrap:1200px; --tap:40px; --dur:160ms;
}
@media (max-width:720px){ :root{ --tap:44px; } }
@media (prefers-reduced-motion:reduce){ :root{ --dur:0ms; } *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font:400 15px/1.5 var(--sans); font-feature-settings:"cv05" 1; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-0.015em; color:var(--ink); overflow-wrap:anywhere; }
h1{ font-size:32px; line-height:1.2; }
h2{ font-size:22px; line-height:1.25; letter-spacing:-0.01em; }
h3{ font-size:19px; line-height:1.3; letter-spacing:-0.005em; }
@media (max-width:720px){ h1{ font-size:26px; } h2{ font-size:20px; } }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.93em; }
.num{ font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; }
.muted{ color:var(--slate); }
.small{ font-size:13px; line-height:1.45; }
.pre{ white-space:pre-wrap; overflow-wrap:anywhere; }
.na{ color:var(--slate); font-weight:400; }
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
@media (max-width:720px){ .wrap{ padding:0 16px; } }
.stack > * + *{ margin-top:16px; }
/* Фокус — одна видимая рамка для всех интерактивных элементов */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-sm); }
.btn:focus-visible,.nav a:focus-visible,.chip:focus-visible,summary:focus-visible,.pager a:focus-visible{ border-radius:var(--r-pill); }
.tchip:focus-within,.check:focus-within{ outline:2px solid var(--ink); outline-offset:2px; }
.tchip:focus-within{ border-radius:var(--r-pill); }
.check:focus-within{ border-radius:var(--r-sm); }
.tchip input:focus-visible,.check input:focus-visible{ outline:none; }
.skip{ position:absolute; left:16px; top:-64px; z-index:100; background:var(--ink); color:#fff; padding:12px 16px; min-height:44px; display:inline-flex; align-items:center; border-radius:var(--r-pill); text-decoration:none; }
.skip:focus{ top:12px; }
/* Шапка */
.top{ border-bottom:1px solid var(--line); background:var(--paper); }
.top__in{ display:flex; align-items:center; gap:12px 20px; min-height:64px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
.brand{ font-family:var(--serif); font-size:22px; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; min-height:var(--tap); }
.menu{ flex:1; min-width:0; }
.menu > summary{ list-style:none; cursor:pointer; display:none; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:0 16px; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-weight:500; user-select:none; }
.menu > summary::-webkit-details-marker{ display:none; }
.menu > summary::after{ content:""; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.menu[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.menu__panel{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; }
.nav{ display:flex; gap:4px; flex-wrap:wrap; }
.nav a{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 14px; border-radius:var(--r-pill); text-decoration:none; color:var(--slate); font-weight:500; white-space:nowrap; }
.nav a:hover{ background:var(--fog); color:var(--ink); }
.nav a[aria-current="page"]{ background:var(--mist); color:var(--ink); }
.nav--staff{ padding-left:12px; border-left:1px solid var(--line); }
.who{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; line-height:1.3; min-width:0; }
.who span{ overflow-wrap:anywhere; }
.logout{ margin:0; }
.staff-bar{ background:var(--ink); color:#fff; font-size:13px; padding:8px 0; }
.staff-bar .wrap{ display:flex; gap:8px 16px; align-items:center; flex-wrap:wrap; }
.staff-bar b{ font-weight:600; }
@media (max-width:720px){
.top__in{ gap:8px 12px; }
.brand{ flex:1; }
.menu{ order:3; flex-basis:100%; }
.menu > summary{ display:inline-flex; width:100%; }
.menu__panel{ flex-direction:column; align-items:stretch; gap:8px; padding-top:12px; }
.nav{ gap:6px; }
.nav a{ white-space:normal; }
.nav--staff{ padding-left:0; border-left:0; padding-top:8px; border-top:1px solid var(--line); }
.who{ margin-left:0; align-items:flex-start; padding-top:8px; border-top:1px solid var(--line); }
}
main{ flex:1; padding-top:28px; padding-bottom:64px; }
@media (max-width:720px){ main{ padding-top:20px; padding-bottom:48px; } }
footer{ border-top:1px solid var(--line); padding:20px 0 32px; font-size:13px; color:var(--slate); }
footer .wrap{ display:flex; gap:8px 24px; flex-wrap:wrap; justify-content:space-between; }
/* Заголовок экрана и крошки */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:20px; }
.page-head .lead{ max-width:64ch; color:var(--slate); margin-top:6px; }
.page-head .btn-row{ flex:none; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--slate); margin-bottom:8px; flex-wrap:wrap; }
.crumbs a{ color:var(--slate); text-decoration:none; display:inline-flex; align-items:center; min-height:24px; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
@media (max-width:720px){ .crumbs a{ min-height:var(--tap); } }
.meta{ display:flex; gap:6px 18px; flex-wrap:wrap; color:var(--slate); font-size:14px; margin-top:10px; }
/* Кнопки — pill, filled + ghost парой */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:0 18px; border-radius:var(--r-pill); border:1px solid var(--ink); background:var(--ink); color:#fff; font-weight:500; text-decoration:none; cursor:pointer; transition:background var(--dur), color var(--dur), border-color var(--dur); white-space:nowrap; font-size:15px; line-height:1.2; }
.btn:hover{ background:#000; border-color:#000; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--fog); }
.btn--quiet{ background:transparent; border-color:transparent; color:var(--ink); }
.btn--quiet:hover{ background:var(--fog); }
.btn--sm{ min-height:36px; padding:0 14px; font-size:14px; }
@media (max-width:720px){ .btn--sm{ min-height:var(--tap); } .btn{ white-space:normal; text-align:center; } }
.btn[disabled],.btn[aria-disabled="true"]{ background:var(--mist); border-color:var(--mist); color:var(--slate); cursor:not-allowed; }
.btn--ghost[disabled]{ background:transparent; border-color:var(--line); }
.btn--block{ width:100%; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-row form{ margin:0; display:contents; }
.inline{ display:inline; }
/* Чипы состояний и типов */
.chip{ display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:2px 10px; border-radius:var(--r-pill); font-size:13px; line-height:1.3; font-weight:500; background:var(--mist); color:var(--ink); white-space:nowrap; }
.chip--outline{ background:transparent; border:1px solid var(--line-strong); }
.chip--ink{ background:var(--ink); color:#fff; }
.chip--warm{ background:var(--peach); color:var(--brown); }
.chip--claim{ background:var(--mist); color:var(--slate); }
.chip--ok{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.chip--muted{ background:transparent; border:1px dashed var(--line-strong); color:var(--slate); }
.chip svg{ width:12px; height:12px; flex:none; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
@media (max-width:720px){ .chip{ white-space:normal; } }
/* Карточки и поверхности */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; min-width:0; }
.card--mist{ background:var(--mist); border-color:transparent; }
.card--fog{ background:var(--fog); }
.card--peach{ background:var(--peach); color:var(--brown); border-color:transparent; }
.card--peach h2,.card--peach h3{ color:var(--brown); }
.card + .card,.card + form,form + .card,.card + .state,.state + .card{ margin-top:16px; }
.card > h2,.card > h3{ margin-bottom:12px; }
.card > h2 + .lead,.card > h3 + .lead{ margin-top:-6px; margin-bottom:12px; }
.card .note,.card h2 .note{ font-family:var(--sans); font-size:13px; color:var(--slate); margin-left:8px; letter-spacing:0; font-weight:400; }
.request-head-state{ margin-top:8px; }
.request-owner-actions{ margin-top:12px; }
.request-moderation-actions .moderation-section{ margin-top:18px; }
.request-moderation-actions .request-publish-form{ display:grid; gap:14px; margin-bottom:18px; }
.request-moderation-actions .request-change-form .field{ gap:10px; }
.request-moderation-actions .request-change-form .field + .btn-row{ margin-top:12px; }
.lead{ color:var(--slate); max-width:64ch; }
.callout{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-sm); font-size:14px; }
.callout--peach{ background:var(--peach); color:var(--brown); }
.callout--mist{ background:var(--mist); color:var(--ink); }
.callout svg{ flex:none; width:18px; height:18px; margin-top:2px; }
.callout + .callout,.callout + .btn-row,.btn-row + .callout,.callout + .kv,.kv + .callout,.callout + p,p + .callout{ margin-top:12px; }
.alert{ margin-bottom:16px; }
.alert ul{ margin:4px 0 0; padding-left:18px; }
.alert ul li + li{ margin-top:4px; }
.token{ display:block; word-break:break-all; background:var(--paper); border:1px solid var(--line-strong); padding:10px 12px; border-radius:var(--r-sm); margin-top:8px; }
/* Формы */
form{ margin:0; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > span,.field > .lbl{ font-size:13px; color:var(--slate); font-weight:500; }
.field .hint{ font-size:13px; color:var(--slate); }
.field + .field,.form-grid + .field,.field + .form-grid,.form-grid + .form-grid,.field + .types,.types + .field,.types + .form-grid,.field + .hint,.form-grid + .hint,.hint + .field,.hint + .form-grid{ margin-top:14px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; align-items:end; }
.form-grid--3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:720px){ .form-grid,.form-grid--3{ grid-template-columns:1fr; } }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ctl{ width:100%; min-height:var(--tap); padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font:inherit; line-height:1.4; -moz-appearance:textfield; }
.ctl::-webkit-outer-spin-button,.ctl::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ctl::placeholder{ color:#6b6f78; opacity:1; }
textarea.ctl{ padding:10px 14px; min-height:96px; resize:vertical; }
select.ctl{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
select.ctl option{ color:var(--ink); }
input.ctl[type="date"]{ padding-right:10px; }
fieldset.types{ border:0; padding:0; margin:0; min-width:0; }
.types{ display:flex; gap:10px 10px; flex-wrap:wrap; align-items:center; }
.types > .lbl,.types > legend{ flex-basis:100%; padding:0; float:left; width:100%; margin-bottom:2px; font-size:13px; color:var(--slate); font-weight:500; }
.tchip{ position:relative; display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); padding:0 14px 0 12px; border:1px solid var(--line-strong); border-radius:var(--r-pill); cursor:pointer; user-select:none; font-weight:500; background:var(--paper); transition:background var(--dur), color var(--dur), border-color var(--dur); }
.tchip:hover{ background:var(--fog); }
.tchip input{ appearance:none; -webkit-appearance:none; margin:0; width:14px; height:14px; flex:none; border:1px solid var(--line-strong); border-radius:4px; background:var(--paper); cursor:pointer; display:inline-block; }
.tchip input:checked{ background:#fff; border-color:#fff; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; }
.tchip:has(input:checked){ background:var(--ink); color:#fff; border-color:var(--ink); }
.check{ display:flex; align-items:flex-start; gap:10px; min-height:var(--tap); padding:6px 0; cursor:pointer; }
.check input{ appearance:none; -webkit-appearance:none; margin:3px 0 0; width:18px; height:18px; flex:none; border:1px solid var(--line-strong); border-radius:5px; background:var(--paper); cursor:pointer; }
.check input:checked{ background:var(--ink); border-color:var(--ink); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; }
.form-foot{ display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; margin-top:20px; }
.form-foot .hint{ flex-basis:100%; font-size:13px; color:var(--slate); }
.narrow{ max-width:440px; }
.narrow .btn{ width:100%; }
.narrow .field + .field{ margin-top:14px; }
.narrow .form-foot{ margin-top:18px; }
.inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
.inline-form .field{ flex:1 1 220px; }
.inline-form select.ctl{ width:auto; min-width:200px; flex:1 1 200px; }
.request-offer-form select.ctl{ width:100%; min-width:0; max-width:100%; flex:none; }
.offer__interest-note{ margin-top:12px; }
/* Фильтры каталога */
.filters{ margin-bottom:20px; padding:0; }
.filters > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--tap); padding:16px 20px; font-family:var(--serif); font-size:20px; user-select:none; border-radius:var(--r-card); }
.filters > summary::-webkit-details-marker{ display:none; }
.filters > summary .hint{ font-family:var(--sans); font-size:13px; color:var(--slate); }
.filters > summary::after{ content:"Показать"; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); margin-left:auto; }
.filters[open] > summary::after{ content:"Свернуть"; }
.filters__body{ padding:4px 20px 20px; }
.filters__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 16px; align-items:end; }
.filters__grid .field + .field{ margin-top:0; }
.filters__types{ margin-top:14px; }
.filters__foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
@media (max-width:1024px){ .filters__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .filters__grid{ grid-template-columns:1fr; } .filters > summary{ font-size:18px; padding:12px 16px; } .filters__body{ padding:0 16px 16px; } }
/* Результаты и списки карточек */
.toolbar{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.toolbar .count{ font-family:var(--serif); font-size:20px; }
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .grid{ grid-template-columns:1fr; } }
.list{ display:grid; gap:12px; }
.ocard{ display:flex; flex-direction:column; gap:12px; min-height:100%; min-width:0; border:1px solid var(--line); border-radius:var(--r-card); padding:18px 18px 16px; background:var(--paper); color:var(--ink); transition:border-color var(--dur), background var(--dur); }
.ocard:hover{ border-color:var(--line-strong); background:var(--fog); }
.ocard--off{ background:var(--fog); }
.ocard__top{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.ocard__top .when{ font-size:13px; color:var(--slate); white-space:nowrap; padding-top:3px; }
.ocard h3 a{ text-decoration:none; }
.ocard h3 a:hover{ text-decoration:underline; }
.ocard h3 a::after{ content:""; position:absolute; inset:0; }
.ocard{ position:relative; }
.ocard .btn,.ocard form{ position:relative; z-index:1; }
.ocard__geo{ color:var(--slate); font-size:14px; }
.ocard__nums{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding-top:12px; border-top:1px solid var(--line); margin-top:auto; }
.ocard__nums .k{ display:block; font-size:12px; color:var(--slate); }
.ocard__nums .v{ font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.ocard__nums .v.na{ color:var(--slate); font-weight:400; }
.ocard__nums .sub{ display:block; font-size:12px; color:var(--slate); font-weight:400; }
.ocard__trust{ display:flex; gap:6px; flex-wrap:wrap; }
.ocard--row{ flex-direction:row; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; min-height:0; }
.ocard--row > .ocard__main{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.ocard--row > .btn-row{ flex:none; }
.pager{ display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 0; }
.pager a,.pager .cur{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap); min-height:var(--tap); padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--r-pill); text-decoration:none; font-weight:500; }
.pager a:hover{ background:var(--fog); }
.pager .cur{ background:var(--ink); color:#fff; border-color:var(--ink); }
.state{ text-align:center; padding:48px 24px; border:1px dashed var(--line-strong); border-radius:var(--r-card); }
.state h1,.state h2{ margin-bottom:8px; }
.state p{ color:var(--slate); max-width:46ch; margin:0 auto; }
.state p + p{ margin-top:8px; }
.state .btn-row{ justify-content:center; margin-top:18px; }
.state .chips{ justify-content:center; margin-bottom:14px; }
@media (max-width:720px){ .state{ padding:32px 16px; } }
/* Экран объекта / запроса: две колонки */
.layout{ display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:24px; align-items:start; }
.layout > *{ min-width:0; }
.obj__head{ grid-column:1 / -1; }
.obj__head h1{ max-width:34ch; margin-top:10px; }
.obj__main > * + *,.aside > * + *{ margin-top:16px; }
.aside .btn--block + .btn--block{ margin-top:8px; }
@media (max-width:1024px){ .layout{ grid-template-columns:minmax(0,1fr); } .aside{ order:0; } }
.aside--first{ order:0; }
@media (min-width:1025px){ .aside--first{ order:1; } }
.kv{ width:100%; border-collapse:collapse; }
.kv th,.kv td{ text-align:left; vertical-align:top; padding:10px 0; border-top:1px solid var(--line); font-weight:400; overflow-wrap:anywhere; }
.kv tr:first-child th,.kv tr:first-child td{ border-top:0; }
.kv th{ color:var(--slate); width:40%; padding-right:16px; }
.kv td{ font-weight:500; }
.kv td .chip{ margin-left:8px; vertical-align:middle; }
.kv td .chip:first-child{ margin-left:0; }
.kv td .sub{ display:block; color:var(--slate); font-weight:400; font-size:13px; margin-top:2px; }
.kv td.plain{ font-weight:400; }
.kv .chips{ margin-top:4px; }
@media (max-width:720px){ .kv tr{ display:block; padding:10px 0; border-top:1px solid var(--line); } .kv tr:first-child{ border-top:0; } .kv th,.kv td{ display:block; width:auto; padding:0; border-top:0; } .kv th{ font-size:12px; padding-bottom:2px; } .kv td .chip{ margin-left:0; margin-top:4px; display:inline-flex; } .kv td .chip:first-child{ margin-top:0; } }
.parties dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:14px; }
.parties dt{ color:var(--slate); }
.parties dd{ margin:0; font-weight:500; overflow-wrap:anywhere; }
.preview{ border:1px dashed var(--line-strong); border-radius:var(--r-card); padding:16px; }
.preview > .card{ border-color:var(--line); }
.preview .card + .card{ margin-top:12px; }
details.more{ margin-top:12px; }
details.more > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; min-height:var(--tap); padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-weight:500; font-size:14px; user-select:none; }
details.more > summary::-webkit-details-marker{ display:none; }
details.more[open] > summary{ background:var(--mist); border-color:transparent; }
details.more > .card,details.more > .kv{ margin-top:12px; }
/* Отклики */
.offer{ border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px; background:var(--paper); min-width:0; }
.offer + .offer{ margin-top:12px; }
.offer--off{ background:var(--fog); }
.offer--off .offer__snap{ color:var(--slate); }
.offer__head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.offer__head > div{ min-width:0; flex:1 1 240px; }
.offer__snap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 16px; margin:14px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:720px){ .offer__snap{ grid-template-columns:1fr 1fr; } }
.offer__snap .k{ display:block; font-size:12px; color:var(--slate); }
.offer__snap .v{ font-weight:500; overflow-wrap:anywhere; }
.offer__foot{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.offer__who{ font-size:13px; color:var(--slate); }
/* Очередь и таблицы: таблица на desktop, стопка на mobile (подписи из data-l) */
.qtable{ width:100%; border-collapse:collapse; font-size:14px; }
.qtable th{ text-align:left; font-weight:500; color:var(--slate); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; padding:0 12px 12px 0; }
.qtable td{ padding:14px 12px 14px 0; border-top:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
.qtable td:last-child,.qtable th:last-child{ padding-right:0; }
.qtable .title{ font-weight:500; max-width:38ch; }
.qtable .sub{ display:block; color:var(--slate); font-weight:400; font-size:13px; margin-top:2px; }
.qtable .actions{ white-space:nowrap; }
.qtable .actions .btn-row{ justify-content:flex-end; }
.qtable .presentation-list-actions .btn-row{ justify-content:flex-start; flex-wrap:nowrap; gap:16px; }
@media (max-width:720px){
.qtable,.qtable tbody{ display:block; }
.qtable thead{ display:none; }
.qtable tr{ display:grid; gap:6px; padding:14px 0; border-top:1px solid var(--line); }
.qtable tr:first-child{ border-top:0; }
.qtable td{ display:block; padding:0; border:0; }
.qtable td[data-l]::before{ content:attr(data-l); display:block; font-size:12px; color:var(--slate); }
.qtable .actions{ white-space:normal; padding-top:6px; }
.qtable td a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.qtable .actions .btn-row{ justify-content:flex-start; }
.qtable .presentation-list-actions .btn-row{ margin-top:10px; }
}
/* Клиентская страница (DN-04): водяной знак с обезличенным кодом передачи поверх содержимого,
клики проходят сквозь него; защиты от снимка экрана он не даёт и не обещает. */
body.client .top__in{ justify-content:space-between; }
.wm{ position:fixed; inset:0; z-index:5; pointer-events:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-content:space-evenly; justify-items:center; overflow:hidden; }
.wm span{ font:500 13px/1 var(--sans); color:var(--ink); opacity:.07; transform:rotate(-24deg); white-space:nowrap; letter-spacing:.08em; user-select:none; }
@media print{ .wm{ position:absolute; } }
.qtable td.num,.qtable .code{ white-space:nowrap; }
/* Обращения организатора (DN-05): группы фильтров-чипов со счётчиками и история изменений */
.fgroups{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-bottom:8px; }
.fgroup{ display:flex; flex-direction:column; gap:6px; }
.fgroup > .lbl{ font-size:12px; color:var(--slate); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
.fchips{ display:flex; flex-wrap:wrap; gap:8px; }
.fchips a{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-pill); text-decoration:none; font-size:14px; font-weight:500; color:var(--ink); background:var(--paper); }
.fchips a:hover{ background:var(--fog); }
.fchips a[aria-current="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.fchips .n{ color:var(--slate); font-weight:400; }
.fchips a[aria-current="true"] .n{ color:#fff; opacity:.8; }
.fgroups + .hint{ margin-bottom:16px; }
@media (max-width:720px){ .fchips a{ min-height:var(--tap); } .fgroups{ gap:12px 16px; } .kv td a{ display:inline-flex; align-items:center; min-height:var(--tap); } }
.qtable td.title{ min-width:16rem; overflow-wrap:normal; }
.qtable td.title .sub{ overflow-wrap:anywhere; }
.qtable td.step{ min-width:12rem; max-width:40ch; }
@media (max-width:720px){ .qtable td.title{ min-width:0; overflow-wrap:anywhere; } .qtable td.step{ max-width:none; } }
.hist{ list-style:none; margin:0; padding:0; }
.hist > li{ padding:12px 0; border-top:1px solid var(--line); }
.hist > li:first-child{ border-top:0; padding-top:0; }
.hist__head{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:14px; }
.hist__lines{ margin:6px 0 0; padding-left:18px; font-size:14px; }
.hist__lines li + li{ margin-top:2px; }
/* NDA (DN-06A): текст документа и хэши */
.nda-hash{ font-size:13px; word-break:break-all; }
.nda-text{ font-size:14px; line-height:1.55; max-width:80ch; margin:0; }
.nda-textarea{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; min-height:280px; }
.nda-banner{ margin-bottom:16px; }
.nda-form .check{ margin-top:4px; }
.btn[disabled]{ cursor:not-allowed; }
/* TA-01: «В работе», подборки, сравнение */
.nav .n{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-size:12px; line-height:1; }
.nav a[aria-current="page"] .n{ background:var(--ink); color:#fff; }
.ocard__act{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; position:relative; z-index:1; margin-top:auto; }
.ocard__act form{ margin:0; display:contents; }
.toolbar .btn{ margin-left:auto; }
.wtable tr.row--off{ background:var(--fog); }
.wtable td.title .title{ font-weight:500; display:inline-flex; align-items:center; min-height:24px; }
.wtable td.title a.title{ text-decoration:none; }
.wtable td.title a.title:hover{ text-decoration:underline; }
.wtable td.title .chips{ margin-bottom:4px; }
.wtable .check{ min-height:24px; padding:0; }
.wsave .btn-row{ margin-top:12px; }
.wsave .hint{ margin-top:10px; }
.page-head .count{ font-family:var(--serif); font-size:22px; white-space:nowrap; }
@media (max-width:720px){ .wtable .check{ min-height:var(--tap); } .wtable td.title a.title{ min-height:var(--tap); } .toolbar .btn{ margin-left:0; } .page-head .count{ white-space:normal; } }
/* Сравнение: прокрутка только внутри контейнера, подписи строк закреплены слева */
.cmp__wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin:0 -4px; padding:0 4px; }
.cmp__wrap:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-sm); }
.cmp{ border-collapse:separate; border-spacing:0; font-size:14px; min-width:100%; }
.cmp th,.cmp td{ padding:12px 14px; border-top:1px solid var(--line); vertical-align:top; text-align:left; min-width:220px; overflow-wrap:anywhere; }
.cmp thead th{ border-top:0; vertical-align:bottom; padding-bottom:14px; }
.cmp th.cmp__lbl{ position:sticky; left:0; z-index:1; background:var(--paper); color:var(--slate); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; min-width:150px; max-width:190px; box-shadow:1px 0 0 var(--line); }
.cmp thead th.cmp__lbl{ vertical-align:bottom; }
.cmp__col .chips{ margin-bottom:6px; }
.cmp__col--off{ background:var(--fog); }
.cmp__title{ display:inline-flex; align-items:center; min-height:var(--tap); font-family:var(--serif); font-size:17px; line-height:1.3; letter-spacing:-0.005em; text-decoration:none; }
a.cmp__title:hover{ text-decoration:underline; }
.cmp__rm{ margin-top:4px; }
.cmp__v .num{ font-weight:500; }
.cmp__v--na .na,.cmp__v--not_applicable .na,.cmp__v--unavailable .na{ color:var(--slate); }
@media (min-width:721px){ .cmp{ table-layout:fixed; width:100%; } .cmp th,.cmp td{ min-width:0; } .cmp th.cmp__lbl{ width:18%; } }
/* TA-01A: читаемость без клиппинга. Отступы измеряются harness'ом/тестами по getBoundingClientRect. */
main.wrap{ padding-top:28px; padding-bottom:64px; } /* F5: объявленный main{padding} перебивался .wrap{padding:0 24px} */
@media (max-width:720px){ main.wrap{ padding-top:20px; padding-bottom:48px; } }
.cmp-form{ margin-bottom:14px; } /* F4: compare-форма → заголовок таблицы */
.wtable .area-na{ color:#6b6f78; white-space:nowrap; } /* F6: «не указана» светлее подписи (измерено 5.04:1 на paper), одной строкой */
.obj__status{ margin-top:10px; } /* F7.1 / F9: статус владельца под чипами */
.card__act{ margin-top:14px; } /* F7.2 / F8: действия карточки после пояснения */
.parties + .callout{ margin-top:12px; } /* F7.3: callout после сторон сделки */
.col-pick{ margin-top:14px; } /* F3: подборки — список с полным видимым именем */
.col-pick__list{ border:0; margin:0; padding:0; min-width:0; }
.col-pick__list > .lbl{ display:block; font-size:13px; color:var(--slate); font-weight:500; margin-bottom:4px; }
.col-pick__list .check{ padding:4px 0; }
.col-pick__list .check input{ appearance:none; -webkit-appearance:none; margin:3px 0 0; width:18px; height:18px; flex:none; border:1px solid var(--line-strong); border-radius:50%; background:var(--paper); cursor:pointer; }
.col-pick__list .check input:checked{ border-color:var(--ink); background:radial-gradient(circle, var(--ink) 40%, transparent 46%); }
.col-pick__list .check span{ overflow-wrap:anywhere; min-width:0; }
/* C2: при 20–100 активных подборках список не растёт вместе со страницей. Ограничение по высоте
+ собственная вертикальная прокрутка; имена не сокращаются, radio/label/submit не меняются.
max-height 264px — это 6 строк с коротким именем (44px = --tap на ≤720) или 5 строк с именем
в две строки (53px, измерено); в обоих случаях следующая строка видна частично, поэтому
прокрутка очевидна. Горизонтальные padding/margin дают место outline фокуса у опций
(.check:focus-within, offset 2px), scroll-padding — чтобы он не упирался в край при
прокрутке к опции. */
.col-pick__scroll{ max-height:264px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 10px; margin:0 -10px; scroll-padding:6px; }
.col-pick__scroll:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-sm); }
@media (max-width:720px){
.cmp__wrap{ margin:0; padding:0; }
/* C1: подпись строки — метка таблицы по DESIGN.md §3 (Inter 500, 12px, uppercase); слова целиком
(без overflow-wrap:anywhere). 130px при padding 6px дают 118px под текст: самое широкое слово
подписи «КОММУНИКАЦИИ» = 111.9px при tracking 0.02em (запас 6.1px, измерено в Chromium на
360/390). box-shadow закрывает субпиксельный край предыдущей колонки и рисует разделитель */
.cmp th.cmp__lbl{ min-width:130px; max-width:130px; width:130px; padding-left:6px; padding-right:6px; font-size:12px; letter-spacing:0.02em; overflow-wrap:normal; word-break:normal; box-shadow:2px 0 0 var(--paper), 3px 0 0 var(--line); }
/* видимая область = viewport − поля .wrap (2×16) − рамка .card (2×1) − padding .card (2×20) − подпись 130 */
.cmp th,.cmp td{ width:calc(100vw - 204px); min-width:calc(100vw - 204px); }
.cmp__title{ font-size:15px; font-weight:400; line-height:1.35; } /* F1: меньше и не жирно */
}
@media (max-width:400px){
/* mobile 390 и narrow 360 (≤400px): геометрия подписи та же, что и на ≤720 (12px / 130px).
На 360 px место делят подпись (130) и колонка (156). Чтобы длинные слова помещались целиком
без уменьшения текста, горизонтальные поля ячеек колонки сокращены с 14 до 8 px (шаг сетки
DESIGN.md §4): подпись 118px под «КОММУНИКАЦИИ» 111.9px (запас 6.1), ячейка 140px под
«Производственный» 134px (запас 6.0). Подпись сохраняет собственные поля 6 px. */
.cmp thead th.cmp__col, .cmp tbody td{ padding-left:8px; padding-right:8px; }
.cmp__title{ font-size:14px; }
}
/* --- TA-02: презентация подборки, медиа объекта, служебная карточка выпуска ------------------
Токены и шаги сетки — docs/design/DESIGN.md; собственных цветов и шрифтов раздел не вводит.
Медиа адаптивны по ширине контейнера, поэтому мобильная раскладка не переполняется. */
.pres{ display:grid; gap:20px; }
.pres__head h1{ margin-bottom:8px; }
.pres__head .meta{ display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--slate); font-size:13px; }
.pres__head .lead{ margin-top:12px; }
.pres__items{ display:grid; gap:20px; }
.pres-nav{ background:var(--fog); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 16px; }
.pres-nav__list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.pres-nav__list a{ display:flex; align-items:center; gap:10px; min-height:var(--tap); padding:2px 6px; margin:0 -6px; border-radius:var(--r-sm); text-decoration:none; }
.pres-nav__list a:hover{ background:var(--mist); }
.pres-nav__list a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.pres-nav__t{ overflow-wrap:anywhere; min-width:0; }
@media (min-width:721px){ .pres-nav__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.pres-item__head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.pres-item__no{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border-radius:var(--r-pill); background:var(--mist); font-size:13px; font-weight:500; }
.pres-item .kv{ margin-top:12px; }
.pres-item h3{ margin-top:16px; margin-bottom:8px; }
.pres-media{ margin-top:14px; }
.pres-media__grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.pres-media__grid img{ display:block; width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--fog); }
.pres-media__empty{ margin:0; }
.pres-map{ margin-top:16px; }
.pres-map__geo{ font-family:var(--serif); font-size:18px; margin-bottom:6px; }
.pres-similar__list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px; }
@media (min-width:721px){ .pres-similar__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.pres-similar__item{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; min-width:0; }
.pres-similar__item h3{ font-size:17px; margin-bottom:4px; }
.pres-similar__item a{ display:inline-block; min-height:var(--tap); line-height:var(--tap); text-decoration:underline; overflow-wrap:anywhere; }
.pres-similar__item a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.pres-contact__name{ font-family:var(--serif); font-size:19px; margin-bottom:6px; }
.pres-contact a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.pres-back a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.pres-preview{ border:1px dashed var(--line-strong); border-radius:var(--r-card); padding:20px; margin-bottom:16px; background:var(--fog); }
@media (max-width:720px){ .pres-preview{ padding:14px; } }
/* Конфигуратор состава: ограниченный по высоте список позиций подборки (приём TA-01B). */
.pres-pick{ border:0; margin:14px 0 0; padding:0; min-width:0; }
.pres-pick > .lbl{ display:block; font-size:13px; color:var(--slate); font-weight:500; margin-bottom:4px; }
.pres-pick__scroll{ max-height:360px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 10px; margin:0 -10px; scroll-padding:6px; }
.pres-pick__scroll:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-sm); }
.pres-pick__row{ padding:8px 0; border-top:1px solid var(--line); min-width:0; }
.pres-pick__row:first-child{ border-top:0; }
.pres-pick__row .check span{ overflow-wrap:anywhere; min-width:0; }
.pres-pick__row a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.field--sm > span{ font-size:12px; }
.media-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.media-list__item{ border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; min-width:0; display:grid; gap:6px; }
.media-list__item img{ display:block; width:100%; height:auto; border-radius:var(--r-sm); background:var(--fog); }
.media-list__blocked{ display:flex; align-items:center; justify-content:center; min-height:120px; background:var(--mist); border-radius:var(--r-sm); }
.staff-item pre{ font-size:12px; overflow-x:auto; }
.staff-item details{ margin-top:10px; }
.staff-item summary{ min-height:var(--tap); display:flex; align-items:center; cursor:pointer; }
/* Owner UAT 2026-09-11: field rhythm, actions, client contact and protected card media. */
.objform .field + .field, .objform .form-grid + .hint, .objform .hint + .field{ margin-top:18px; }
.objform section > h2 + .lead{ margin-bottom:22px; }
.objform .tchips{ margin-top:10px; margin-bottom:20px; }
.objform select[name="deal_type"]{ margin-bottom:8px; }
.objform input[name="commission_terms"]{ margin-bottom:22px; }
.objform select[name="client_kind"]{ margin-top:8px; }
.object-card-media{ margin-bottom:24px; }
.object-card-media h2{ margin-bottom:16px; }
.media-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.media-grid img{ width:100%; height:auto; max-height:440px; object-fit:cover; border-radius:var(--r-sm); background:var(--mist); }
.share-url{ margin:12px 0 16px; overflow-wrap:anywhere; }
.stats{ display:grid; grid-template-columns:minmax(170px,1fr) auto; gap:8px 18px; margin:14px 0 16px; }
.pres-contact h2{ margin-bottom:16px; }
.pres-contact__name{ margin:0 0 8px; }
.pres-contact .num{ margin:4px 0; }
.obj + .obj{ margin-top:18px; }
@media(max-width:720px){ .media-grid{ grid-template-columns:1fr; } .objform .field + .field{ margin-top:20px; } }
/* Owner UAT correction package 2026-09-12. */
.staff-item-redact{ margin-top:18px; }
.staff-item-redact .btn{ margin-top:14px; }
.issued-links-heading{ margin-top:36px; }
.issued-link-actions .btn-row{ flex-wrap:nowrap; gap:14px; }
.preview-explainer{ margin:20px 0 24px; }
.presentation-release-form .recipient-field{ padding:10px 12px 4px; margin:0 -12px; }
.preview-confirm{ margin:18px 0; }
.release-actions{ margin-top:20px; }
.released-url-actions{ margin-top:16px; }
.released-back{ margin-top:24px; }
.presentation-how{ margin-top:28px; }
.case-reopen-heading{ margin-top:24px; }
.case-next-step textarea{ min-height:72px; }
.case-next-step .hint{ max-width:318px; }
.case-next-step .hint > span:first-child{ display:inline-block; width:100%; text-align:justify; text-align-last:justify; }
@media (max-width:720px){
footer{ font-size:8px; letter-spacing:-.02em; }
footer .wrap{ display:grid; gap:6px; }
footer .wrap > span{ white-space:nowrap; }
.case-offer-row td{ padding-top:12px; }
.case-next-step .hint{ max-width:none; }
.case-next-step .hint > span:first-child{ display:inline; width:auto; text-align:initial; }
.desktop-only{ display:none; }
.issued-link-actions .btn-row{ margin-top:10px; gap:14px; }
.presentation-how{ margin-top:24px; }
}
@media (max-width:340px){
footer .wrap{ padding-left:4px; padding-right:4px; }
}