:root{color-scheme:light dark;--s1:#e3eefc;--s2:#c4dbf7;--s3:#9cc2f0;--bg:#f5f5f7;--surface:#fff;--sunken:#f2f2f5;--text:#1d1d1f;
--muted:#5f5f66;--line:#e3e3e8;--line-strong:#c4c4cc;--accent:#1d1d1f;--on-accent:#fff;
--link:#0058b0;--focus:#0a74e0;--ok:#146c34;--ok-bg:#e7f4eb;--bad:#b3261e;--bad-bg:#fcecea;
--warn:#7a4c00;--warn-bg:#fdf3dc;--info:#0b4f99;--info-bg:#e9f1fc;--r:14px;--r-sm:10px;--pad:20px;
--shadow:0 1px 2px rgb(0 0 0/.05),0 4px 16px rgb(0 0 0/.04)}
@media (prefers-color-scheme:dark){:root{--s1:#15263c;--s2:#1d3a5e;--s3:#285184;--bg:#0c0c0d;--surface:#1c1c1e;--sunken:#262629;
--text:#f2f2f7;--muted:#a3a3ab;--line:#2e2e32;--line-strong:#4a4a50;--accent:#f2f2f7;
--on-accent:#111;--link:#72b6ff;--focus:#5aaeff;--ok:#62d387;--ok-bg:#12291a;--bad:#ff8a80;
--bad-bg:#361512;--warn:#f3c262;--warn-bg:#302409;--info:#93c7ff;--info-bg:#10233a;--shadow:none}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
font:1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
@media (min-width:768px){.wrap{padding:0 24px}}
@media (max-width:480px){:root{--pad:16px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:20}
.skip:focus{left:8px}

.top{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:4px;min-height:56px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--text);
margin-right:8px;white-space:nowrap;letter-spacing:-.01em}
.brand span{color:var(--muted);font-weight:500}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:4px;flex:1;min-width:0}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
color:var(--muted);font-weight:500;white-space:nowrap}
.nav a:hover{background:var(--sunken);color:var(--text);text-decoration:none}
.nav a[aria-current=page]{background:var(--accent);color:var(--on-accent)}
.top form{margin:0}
@media (max-width:480px){.brand span{display:none}.nav a{padding:0 10px}}

main.wrap{padding-top:28px;padding-bottom:72px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:12px 24px;margin-bottom:20px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.875rem;color:var(--muted);margin:0 0 4px}
/* Инлайн-ссылке отступ строку не двигает, а область касания растит до 44 px (отрицательное
   поле по бокам возвращает крошке её место). */
.crumbs a{color:var(--muted);padding:12px 4px;margin:0 -4px}
.todo a{padding:12px 0}
td>a{padding:12px 4px;margin:0 -4px}
h1{font-size:1.625rem;line-height:1.2;margin:0;letter-spacing:-.02em}
@media (min-width:768px){h1{font-size:1.875rem}}
h1 .badge{vertical-align:middle;margin-left:8px}
.lead{margin:6px 0 0;color:var(--muted);max-width:68ch}
h2{font-size:1.125rem;line-height:1.3;margin:0;letter-spacing:-.01em}
p{margin:0 0 12px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:var(--pad);box-shadow:var(--shadow);margin-bottom:16px}
.card-head{margin-bottom:16px}
.card-hint{margin:4px 0 0;color:var(--muted);font-size:.875rem;max-width:72ch}
.card-accent{border-color:var(--info);border-width:2px}
.card-danger{border-color:var(--bad)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:980px){.split{grid-template-columns:minmax(0,1fr) 320px}
.split>aside{position:sticky;top:72px;order:2}}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.two{grid-template-columns:1fr 1fr}}
.two{margin-bottom:16px}
.two>.card{margin-bottom:0}

.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 16px}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wide{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:.875rem;font-weight:600}
.req{color:var(--bad)}
.hint{font-size:.8125rem;line-height:1.4;color:var(--muted)}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;font:inherit;color:var(--text);
background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
textarea{min-height:104px;resize:vertical;line-height:1.45}
input[type=file]{padding:8px 10px}
input::file-selector-button{font:inherit;font-weight:600;margin-right:12px;padding:6px 12px;
border:1px solid var(--line-strong);border-radius:999px;background:var(--sunken);color:var(--text);cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);
box-shadow:0 0 0 3px rgb(10 116 224/.25)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.actions .hint{flex:1 1 220px}

button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
min-width:44px;padding:10px 20px;border:1px solid transparent;border-radius:999px;font:inherit;font-weight:600;
line-height:1.2;cursor:pointer;background:var(--accent);color:var(--on-accent);touch-action:manipulation;
transition:opacity .15s ease-out,transform .1s ease-out}
.btn:hover{text-decoration:none}
/* Наведение — только там, где оно есть: на телефоне :hover «залипает» после касания. Нажатие
   отвечает сразу, на pointer-down (скиллы apple-design, ui-ux-pro-max: отклик за 100 мс). */
@media (hover:hover){button:hover,.btn:hover{opacity:.86}}
button:active,.btn:active{opacity:.72}
@media (prefers-reduced-motion:no-preference){button:active,.btn:active{transform:scale(.97)}}
.btn-quiet{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn-danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.btn-link{min-height:44px;padding:6px 10px;background:none;color:var(--link);font-weight:500}
.btn-link.danger{color:var(--bad)}
.btn-block{width:100%}
button[disabled]{opacity:.4;cursor:not-allowed}

.table-wrap{overflow-x:auto;margin:0 calc(-1*var(--pad));padding:0 var(--pad)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
th{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.act{text-align:right;white-space:nowrap;padding-top:2px;padding-bottom:2px;vertical-align:middle}
.sub{display:block;font-size:.8125rem;color:var(--muted)}
.section-title{font-size:.8125rem;font-weight:600;color:var(--muted);text-transform:uppercase;
letter-spacing:.05em;margin:4px 0 8px}
.grid-table td{padding:6px 6px;vertical-align:middle}
.grid-table th{padding:8px 6px}
.grid-table input{min-height:44px;padding:8px 10px}
.grid-table .cell-n{color:var(--muted);font-variant-numeric:tabular-nums;width:32px;padding-left:0}
.grid-table .cell-title input{min-width:220px}
.grid-table .cell-title .badge{margin-top:4px}
.grid-table .cell-cat input{min-width:130px}
.grid-table .cell-qty input{width:84px}
.grid-table .cell-money input{width:124px}
input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--bad)}
input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 3px rgb(179 38 30/.18)}
.row-bad td{background:var(--bad-bg)}
a.btn-link{display:inline-flex;align-items:center}
/* Необязательное — свёрнуто, обязательное — на виду. */
.grid-form .opt-col{display:none}
.grid-form:has(.more-cols:checked) .opt-col{display:table-cell}
.more-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 8px;
font-size:.875rem;font-weight:600;color:var(--link);cursor:pointer}
.more-toggle input{accent-color:var(--link)}
details.opt{margin-top:12px}
details.opt>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;
list-style:none;color:var(--link);font-weight:500}
details.opt>summary::-webkit-details-marker{display:none}
details.opt>summary::before{content:"+";width:22px;height:22px;border-radius:50%;display:flex;
align-items:center;justify-content:center;background:var(--info-bg);color:var(--link);font-weight:700}
details.opt[open]>summary::before{content:"−"}
details.opt>div{margin-top:10px}
.fold>summary{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:44px;
cursor:pointer;list-style:none;padding-right:32px;position:relative}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";position:absolute;right:0;top:0;width:24px;height:24px;
border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--info-bg);color:var(--link);font-weight:700}
.fold[open]>summary::after{content:"−"}
.fold-title{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.fold .card-hint{margin:0}
.fold-body{margin-top:16px}
.card-finish{border-color:var(--accent);border-width:2px}
.summary{color:var(--muted);font-size:.9375rem}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;
border:1px solid var(--line-strong);background:var(--surface);font-weight:500}
.chip input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field legend{padding:0;margin-bottom:6px}
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:12px 0;border-top:1px solid var(--line)}
.todo li:first-child{border-top:0;padding-top:0}
.todo a{font-weight:600}
.search{display:flex;gap:8px;margin:0 0 12px}
.search input{flex:1}
.chips .count{font-weight:500;color:var(--muted)}
.chips [aria-current]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.chips [aria-current] .count{color:inherit}
.chips{margin-bottom:12px}
.btn-small{min-height:44px;padding:8px 14px}
.statusbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
margin:0 0 16px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid;border-left-width:4px}
.statusbar span{flex:1 1 260px}
.statusbar-ok{background:var(--ok-bg);border-color:var(--ok)}
.statusbar-warn{background:var(--warn-bg);border-color:var(--warn)}
.statusbar-info{background:var(--info-bg);border-color:var(--info)}
#draft-form>.card{scroll-margin-top:72px}
/* Таблица позиций на телефоне: строка — карточка с подписанными полями, без прокрутки вбок. */
@media (max-width:719px){
.grid-table{overflow:visible;margin:0;padding:0}
.grid-table table,.grid-table tbody,.grid-table tfoot,.grid-table tr,.grid-table td{display:block;width:100%}
.grid-table thead{display:none}
.grid-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;
padding:12px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.grid-table tbody td{padding:0;border:0}
.grid-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;
font-size:.75rem;font-weight:600;color:var(--muted)}
.grid-table .cell-n{grid-column:1/-1;width:auto;font-weight:700;color:var(--text)}
.grid-table .cell-n::before{content:"Строка "}
.grid-table .cell-title,.grid-table .cell-cat{grid-column:1/-1}
.grid-table .cell-title input,.grid-table .cell-cat input,.grid-table .cell-qty input,
.grid-table .cell-money input{width:100%;min-width:0;min-height:44px}
.grid-table .cell-sum{text-align:left}
.grid-table .cell-drop{text-align:left;align-self:end}
.grid-table tfoot tr{display:flex;justify-content:space-between;gap:12px;padding:8px 0}
.grid-table tfoot td{padding:0;border:0}
.grid-table tfoot td:empty{display:none}
.grid-form:has(.more-cols:checked) .grid-table td.opt-col{display:block}
.grid-form:has(.more-cols:checked) .grid-table tfoot td.opt-col{display:none}
}
.rows-to{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.rows-to label{font-size:.875rem;font-weight:600}
.rows-to input{width:88px}
@media (max-width:639px){.opt{display:none}}
.strong{font-weight:700}

.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
font-size:.8125rem;font-weight:600;line-height:1.6;white-space:nowrap;background:var(--sunken);color:var(--muted)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}

.notice{margin:0 0 16px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid;
border-left-width:4px;background:var(--surface)}
.notice>b{display:block;margin-bottom:2px}
.notice ul{margin:4px 0 0;padding-left:20px}
.notice-ok{background:var(--ok-bg);border-color:var(--ok)}
.notice-bad{background:var(--bad-bg);border-color:var(--bad)}
.notice-warn{background:var(--warn-bg);border-color:var(--warn)}
.notice-info{background:var(--info-bg);border-color:var(--info)}

.help{margin:0 0 16px;border-radius:var(--r-sm);background:var(--info-bg)}
.help summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;
cursor:pointer;list-style:none;font-weight:600;color:var(--info)}
.help summary::-webkit-details-marker{display:none}
.help summary::before{content:"?";flex:none;width:22px;height:22px;border-radius:50%;display:flex;
align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;background:var(--info);color:var(--surface)}
.help summary::after{content:"показать";margin-left:auto;font-size:.8125rem;font-weight:500}
.help[open] summary::after{content:"скрыть"}
.help>div{padding:0 16px 14px 46px;max-width:80ch}
.help ol,.help ul{margin:4px 0 8px;padding-left:20px}
.help li+li{margin-top:4px}
.help p:last-child{margin-bottom:0}

.checks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:.9375rem;line-height:1.4}
.mark{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:.8125rem;font-weight:700}
.mark-ok{background:var(--ok-bg);color:var(--ok)}
.mark-no{background:var(--bad-bg);color:var(--bad)}
.mark-wait{background:var(--sunken);color:var(--muted)}
.mark-warn{background:var(--warn-bg);color:var(--warn)}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.stat-v{display:block;font-size:1.375rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
overflow-wrap:anywhere}
.stat-k{font-size:.8125rem;color:var(--muted)}

.q{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:16px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0;padding-top:0}
.q-n{grid-row:span 2;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-weight:700;background:var(--info-bg);color:var(--info)}
.q-text{font-weight:600;margin:3px 0 8px;overflow-wrap:anywhere}
.q-foot{display:flex;justify-content:flex-end;margin-top:4px}
.q textarea{min-height:64px}

.empty{text-align:center;padding:40px 20px}
.empty h2{margin-bottom:8px}
.empty p{color:var(--muted);max-width:52ch;margin:0 auto 20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .btn{min-height:44px;padding:8px 16px}
.muted{color:var(--muted)}

.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.auth .card{width:100%;max-width:400px;padding:28px}
.auth h1{font-size:1.5rem;margin:4px 0 20px}
.auth .brand{display:block;margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.top .aside{display:flex;align-items:center;gap:4px}
.top .aside .navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
     border-radius:999px;color:var(--muted);font-weight:500;white-space:nowrap}
.top .aside .navlink:hover{background:var(--sunken);color:var(--text);text-decoration:none}
.top .aside .navlink[aria-current=page]{background:var(--accent);color:var(--on-accent)}
@media (max-width:480px){.top .aside .navlink{padding:0 10px}}

.ask{position:relative;display:inline-flex;align-items:center;justify-content:center;
     width:18px;height:18px;margin-left:6px;border:1px solid var(--line-strong);border-radius:50%;
     background:var(--surface);color:var(--muted);font-weight:700;font-size:.6875rem;line-height:1;text-transform:none;
     letter-spacing:0;cursor:help;vertical-align:middle}
@media (pointer:coarse){.ask::after{content:"";position:absolute;inset:-13px} /* палец: 44×44 */
.market-table th:nth-child(n+2) .ask::after{inset:-13px 0 -13px -26px}}  /* у края — внутрь */
.ask:hover,.ask:focus-visible{color:var(--text);border-color:var(--line-strong);background:var(--sunken)}
.ask:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Облачко раскрывается от левого края знака (у правых колонок — от правого): по центру оно
   вылезало за край экрана на 390 px и за край таблицы в первой колонке. */
.bubble{position:absolute;top:calc(100% + 9px);left:-9px;z-index:30;width:max-content;
     max-width:min(280px,68vw);padding:10px 12px;border-radius:var(--r-sm);background:var(--text);
     color:var(--bg);font-weight:400;font-size:.8125rem;line-height:1.45;text-align:left;text-transform:none;
     letter-spacing:normal;white-space:normal;box-shadow:0 8px 28px rgb(0 0 0/.22);
     opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease-out,
     transform .15s ease-out,visibility .15s}
.ask:hover .bubble,.ask:focus .bubble{opacity:1;visibility:visible;transform:translateY(0)}
.bubble::before{content:"";position:absolute;bottom:100%;left:13px;
     border:6px solid transparent;border-bottom-color:var(--text)}
/* У правого края облачко упирается в край таблицы: без прокрутки её ничто не поглощает. */
.ask-right .bubble{left:auto;right:0}
.ask-right .bubble::before{left:auto;right:3px}
/* Свод не прокручивается вбок ни на одной ширине, поэтому облачку заголовка ничто не мешает:
   прежняя внутренняя прокрутка обрезала его, и место приходилось отыгрывать отступом. */
.market-table .table-wrap{overflow:visible;margin:0;padding:0}
/* Телефон: облачко там же, у знака (владелец: «как на компьютере»). Знаки на телефоне стоят у
   левого края — подписи фильтров и карточек, — поэтому облачко открывается вправо и в экран
   помещается; ширина ограничена экраном. */
@media (max-width:720px){
.bubble{max-width:calc(100vw - 48px)}
.ask-right .bubble{left:-9px;right:auto}
.ask-right .bubble::before{left:13px;right:auto}
.stack .bubble{max-width:calc(100vw - 96px)}
}
@media (prefers-reduced-motion:reduce){.bubble{transition:none}}

/* Заголовок-ссылка и липкая шапка — только у свода: `thead th{position:sticky}` без области
   действия попадал и на таблицы склада, а они живут внутри своей прокрутки. */
/* Заголовок-ссылка: на планшете это цель касания — отступ растит её до 44 px, подчёркивание
   пунктиром вместо рамки, чтобы отступ его не уводил вниз. */
.market-table th a{color:inherit;padding:14px 6px;margin:0 -6px;
     text-decoration:underline dashed var(--line-strong);text-underline-offset:3px}
.market-table th a:hover{color:var(--text);text-decoration-color:var(--text)}
.market-table th[aria-sort] a{text-decoration:none;color:var(--text)}
.market-table th[aria-sort]{color:var(--text)}
.market-table .sort-mark{color:var(--muted);font-weight:400}
.cell-label{display:none}
.cell-value{display:contents}
.market-table td.model{overflow-wrap:anywhere}
.market-table .sub{margin-top:2px}
/* Цена — строкой на состояние: подпись приглушена, цифра в цвете текста. */
.market-table .cond{display:block;line-height:1.35}
.market-table .cond+.cond{margin-top:2px}
.market-table .cond-name{color:var(--muted);font-size:.8125rem}
.market-table .cond{white-space:normal}
.market-table .cond-count{color:var(--muted);font-size:.8125rem;white-space:nowrap}
.market-search{display:flex;gap:8px;margin:0 0 12px}
.market-search input{flex:1 1 auto;min-width:0}

/* Раскладка задана, а не выведена из содержимого: ячейка цены с тремя состояниями забирала
   406 px, колонке «Модель» оставалось 90 px, и имя ломалось в столбик на восемь строк. */
@media (min-width:900px){
/* Доли, а не пиксели: на 900 px и на 1920 px колонки сжимаются и растут вместе, и ни одна
   подпись не выходит за свою ячейку. Знак «?» у чисел — в углу ячейки: в потоке он уводил
   подпись на вторую строку, и шапка читалась рваной. */
.market-table table{table-layout:fixed}
.market-table th{white-space:normal}
.market-table th:nth-child(n+2){padding-right:26px}   /* липкая ячейка сама держит облачко */
.market-table th:nth-child(n+2) .ask{position:absolute;top:9px;right:0;margin:0}
/* Восемь колонок (05.10 без «Снято»): период, срок, всего, примерки, цена, наличие, спрос; имени — остаток. */
.market-table th:nth-child(2){width:10%}
.market-table th:nth-child(3),.market-table th:nth-child(4){width:7%}
.market-table th:nth-child(5){width:10%}
.market-table th:nth-child(7),.market-table th:nth-child(9){width:9%}
.market-table th:nth-child(6){width:20%}
.market-table th:nth-child(8){width:8%}
.market-table thead th{position:sticky;top:56px;z-index:2;background:var(--surface)}
.market-table thead th:hover,.market-table thead th:focus-within{z-index:3}
.market-table tbody tr:hover{background:var(--sunken)}
}
/* До 1100 px восьми колонкам не хватает места: подписи уходили под «?», цена налезала на
   «уценено» (аудит 05.10), а шапку приходилось мельчить до 11 px. Прячем те же две, что и на
   телефоне (срок, всего), остальным — шире доли; скрытые ячейки тоже считаются в nth-child. */
@media (min-width:900px) and (max-width:1099px){.market-table .opt{display:none}
.market-table th{letter-spacing:0}
.market-table th:nth-child(2){width:13%}
.market-table th:nth-child(5){width:13%}
.market-table th:nth-child(6){width:20%}
.market-table th:nth-child(7){width:12%}
.market-table th:nth-child(8),.market-table th:nth-child(9){width:10%}}
/* Таблица, которой не хватает ширины (`ui.table(stack=True)`): уже 900 px строка становится
   карточкой с подписанными ячейками — как таблица позиций поставки; прокрутки вбок нет ни у
   одной таблицы на телефоне (SC-016). Первая ячейка — заголовок карточки во всю ширину. */
@media (max-width:899px){
.stack{overflow:visible;margin:0;padding:0}
.stack table,.stack tbody,.stack tfoot,.stack tr,.stack td{display:block;width:100%}
.stack thead{display:none}
.stack tbody tr{display:block;padding:12px 14px 6px;margin-bottom:10px;border:1px solid var(--line);
     border-radius:var(--r-sm);background:var(--surface)}
/* Строка карточки: подпись слева, значение справа — как список настроек; поля разной высоты
   (цена по состояниям) не рвут сетку, а просто занимают свои строки. */
.stack tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
     padding:7px 0;border:0;border-top:1px solid var(--line);text-align:left;white-space:normal}
.stack tbody td:first-child{display:block;border-top:0;padding:0 0 8px;font-weight:600}
.stack tbody td.act{display:block;border-top:0;padding:8px 0 4px;text-align:left}
.stack .cell-label{display:inline-flex;align-items:center;flex:0 0 auto;font-size:.8125rem;
     font-weight:500;color:var(--muted)}
.stack .cell-value{display:block;flex:1 1 auto;min-width:0;text-align:right;
     font-variant-numeric:tabular-nums}
.stack .cell-value .sub{text-align:right}
/* В карточке знак стоит после подписи, посреди строки: облачко привязано к подписи, а не к знаку —
   раскрывается от левого края строки и в экран помещается всегда (и на планшете — в своей
   колонке); область касания знака при этом накрывает всю подпись, что для пальца удобнее. */
.stack .cell-label{position:relative}
.stack .ask{position:static}
.stack .bubble{left:0;right:auto}
/* Облачко карточки — над соседними карточками: на планшете `columns` делает карточку своим
   слоем, и следующая карточка ложилась поверх облачка предыдущей. */
.stack tbody tr:hover{position:relative;z-index:3}
.stack tbody tr:focus-within{position:relative;z-index:4}   /* фокус сильнее наведённой мыши */
.stack tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 0 0}
.stack tfoot td{padding:0;border:0;width:auto}
.stack tfoot td:empty{display:none}
}
@media (max-width:639px){.stack tbody td.opt{display:none}}
/* Планшет: карточка в две колонки сеткой, а не `columns` — многоколоночная разбивка рисовала
   облачко под соседней колонкой (Chrome красит вылет из колонки ниже следующей). */
@media (min-width:640px) and (max-width:899px){
.stack tbody tr{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.stack tbody td:first-child,.stack tbody td.act{grid-column:1/-1}
.stack .bubble{max-width:calc(50vw - 80px)}       /* облачко — в пределах своей колонки */
}
/* На телефоне «Рынок» стоит в одном ряду с пунктами меню, а не строкой выше рядом с «Выйти»:
   шапка — сетка, обёртка кнопок раскрывается (display:contents), каждый элемент — в свою ячейку. */
@media (max-width:480px){
.top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
     gap:8px;min-height:0;padding-top:0;padding-bottom:0}
.top .aside{display:contents}
.brand{grid-area:1/1}
.top form{grid-area:1/2;justify-self:end}
.nav{grid-area:2/1;overflow-x:auto}
.top .aside .navlink{grid-area:2/2}
}

/* Фильтры-чипы и страница выбора (SC-018): один механизм на телефоне, планшете и компьютере. */
.filter-chips{margin-bottom:8px}
/* Телефон: семь чипов фильтров в три строки отодвигали данные на экран вниз — один ряд с
   прокруткой вбок, как у сортировки. */
/* До 900 px — панель «Фильтры · Период · Сортировка» и выбранные чипами с крестиком (SC-023);
   шире — ряд фильтров с переносом и заголовки таблицы. */
.filter-bar,.active-filters{margin-bottom:8px}
.filter-bar .btn,.active-filters .btn{white-space:nowrap}
@media (max-width:899px){.filter-chips{display:none}}
@media (min-width:900px){.filter-bar,.active-filters{display:none}}
.pick-value{margin-left:auto;padding-left:12px;color:var(--muted);text-align:right}
details.about{margin:4px 0 12px}
details.about summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--link)}
.card.narrow{max-width:560px}
.pick{list-style:none;margin:0;padding:0}
.pick li+li{border-top:1px solid var(--line)}
.pick a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
     padding:10px 0;color:var(--text)}
.pick a:hover{text-decoration:none;color:var(--link)}
.pick a[aria-current=true]{font-weight:700}
.pick .count{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}
.dates{margin-top:16px}
/* Числа «от и до» (SC-025): пара полей в строку и на телефоне — числа короткие. */
.range-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.ranges .range+.range{margin-top:14px}
.facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px;color:var(--muted)}
.facts b{color:var(--text);font-variant-numeric:tabular-nums}
.sort-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.sort-chips .btn{flex:0 0 auto;white-space:nowrap}
@media (min-width:900px){.sort-chips{display:none}}
@media (max-width:899px){
.stack td[data-sorted] .cell-label{color:var(--text)}
.stack td[data-sorted] .cell-value{font-weight:700;color:var(--text)}
.stack td.model{position:relative;padding-right:24px}
.stack td.model::after{content:"›";position:absolute;right:2px;top:-4px;font-size:1.625rem;
     line-height:1;color:var(--muted)}
}
/* Страница модели (макет 05.10): главное за период, цена и сигналы рядом, матрица размеров. */
.model-periods{margin:0 0 16px}
.kpi{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:12px}
.kpi-hero{display:grid;align-content:center;gap:2px}
.kpi-v{font-size:3rem;line-height:1;font-weight:700;letter-spacing:-.02em}
.kpi-k{color:var(--muted)}
.kpi .stat{align-content:start}
.stat-note{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}
.model-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.model-pair>.card{margin:0}
.model-pair .stats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:0}
.model-pair .stat-v{white-space:nowrap}   /* цена не рвётся посреди числа */
.matrix-wrap{overflow-x:auto}
.market-matrix{border-collapse:separate;border-spacing:3px;width:100%;font-variant-numeric:tabular-nums}
.market-matrix th{text-align:left;white-space:nowrap}
.market-matrix th.num{text-align:right}
.market-matrix tbody th{font-size:.875rem;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0}
.m-cell{border-radius:8px;padding:0;vertical-align:top}
.m-cell a{display:grid;min-height:64px;padding:8px 10px;border-radius:8px;color:var(--text)}
.m-cell a:hover{text-decoration:none;outline:2px solid var(--line-strong)}
.m-sold{font-size:1.25rem;font-weight:700;line-height:1.1}
.m-price{font-size:.8125rem}.m-stock{font-size:.75rem}   /* на заливке приглушённый серый не держит контраст 4,5 */
.m-total{padding:8px 10px;vertical-align:top}
.m-total b{display:block;font-size:1.25rem}.m-total span{font-size:.75rem;color:var(--muted)}
.s0{background:var(--sunken)}.s1{background:var(--s1)}.s2{background:var(--s2)}.s3{background:var(--s3)}
.size-cards{display:grid;gap:10px}
.size-card{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.size-card header{display:grid;padding:10px 12px;border-bottom:1px solid var(--line)}
.size-card header span{font-size:.8125rem;color:var(--muted)}
.size-line{display:grid;grid-template-columns:1fr auto;grid-template-areas:"c s" "p k";gap:0 8px;
min-height:44px;padding:8px 12px;color:var(--text);border-top:1px solid var(--line)}
.size-line:first-of-type{border-top:0}.size-line:hover{text-decoration:none;background:var(--sunken)}
.sl-cond{grid-area:c;font-weight:600}.sl-price{grid-area:p;font-size:.875rem}
.sl-sold{grid-area:s;font-size:.8125rem;font-weight:600;padding:0 8px;border-radius:999px;align-self:center}
.sl-sold.s0{background:transparent;color:var(--muted);font-weight:500}
.sl-stock{grid-area:k;font-size:.8125rem;color:var(--muted);text-align:right}
.matrix-legend{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem}
.legend-scale{display:inline-flex;gap:2px;flex:none;margin-top:3px}
.legend-scale i{width:16px;height:12px;border-radius:3px}
@media (max-width:639px){.matrix-wrap{display:none}}
@media (min-width:640px){.size-cards{display:none}}
@media (max-width:899px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-hero{grid-column:1/-1}
.model-pair{grid-template-columns:1fr}}