/* Стили страниц поверх дизайн-системы (tokens.css, bundle.css). Цвета, шрифт, отступы, скругления — только var(--…). */
*{box-sizing:border-box}
html,body{margin:0}
a{color:var(--brand-blue)}
a:hover{color:var(--brand-blue-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-8)}
@media (max-width:640px){
  .wrap{padding:0 var(--space-6)}
  .h1{font-size:30px;line-height:34px}
  .display{font-size:36px;line-height:40px}
}

header.top{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:var(--space-2) var(--space-6);flex-wrap:wrap}
.logo{display:block;padding:var(--space-4) 0}
.logo img{display:block;height:36px;width:auto}
nav.main{display:flex;gap:var(--space-1);flex-wrap:wrap}
nav.main a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink-muted);font-size:15px;line-height:20px;font-weight:600}
nav.main a.on,nav.main a:hover{color:var(--ink);background:var(--brand-soft)}
@media (max-width:1040px){nav.main{padding-bottom:var(--space-3)}}
@media (max-width:640px){
  .logo{padding:var(--space-3) 0}
  .logo img{height:28px}
  nav.main{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--space-6) * -1);padding:0 var(--space-6) var(--space-3);width:calc(100% + var(--space-6) * 2)}
  nav.main a{white-space:nowrap}
}

main h1{margin:var(--space-8) 0 var(--space-4)}
main h2{margin:var(--space-16) 0 var(--space-4)}
main h3{margin:var(--space-6) 0 var(--space-2)}
@media (max-width:640px){main h2{margin-top:var(--space-12)}}
.crumbs{font-size:14px;line-height:20px;color:var(--ink-muted);margin-top:var(--space-4)}
.crumbs a{color:var(--ink-muted)}
.lead{color:var(--ink-muted);max-width:68ch;margin:0 0 var(--space-6)}
.prose{max-width:720px}
.note{color:var(--ink-muted);margin:var(--space-2) 0 0}
.updated{margin-top:var(--space-8)}
.na{color:var(--ink-muted)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin:var(--space-2) 0 var(--space-6)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4);margin:0 0 var(--space-2)}
.tile{display:block;position:relative;overflow:hidden;text-decoration:none;color:var(--ink);padding:var(--space-4)}
.tile b,.tile span{position:relative}
.tile-ic{position:absolute;right:var(--space-3);bottom:var(--space-3);width:64px;height:64px;color:var(--bg)}
.tile:hover .tile-ic{color:var(--brand-soft)}
.tile:hover{border-color:var(--brand-blue);color:var(--ink)}
.tile b{display:block;font-size:17px;line-height:27px;font-weight:600}
.tile span{color:var(--ink-muted);font-size:14px;line-height:20px}

.filters{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin:0 0 var(--space-4)}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font:inherit;font-size:15px;line-height:20px;font-weight:600;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--on-brand)}
.filters label{display:flex;gap:var(--space-2);align-items:center;font-size:14px;line-height:20px;color:var(--ink-muted);margin-left:var(--space-2)}

.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
table{border-collapse:collapse;width:100%;min-width:860px;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);background:var(--bg);white-space:nowrap;cursor:default}
th[data-sort]{cursor:pointer}
tr:last-child td{border-bottom:0}
tr[hidden]{display:none}
tbody tr:hover td{background:var(--brand-soft)}
td.name a{font-weight:600;text-decoration:none;color:var(--ink)}
td.name a:hover{color:var(--brand-blue)}
.cmp td:first-child{color:var(--ink-muted);width:30%}

.grid2{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:var(--space-6);align-items:start}
dl.spec{display:grid;grid-template-columns:200px 1fr;margin:0}
dl.spec dt,dl.spec dd{padding:var(--space-2) 0;border-bottom:1px solid var(--border);margin:0}
dl.spec dt{color:var(--ink-muted);font-size:14px;line-height:20px;padding-right:var(--space-4)}
.cta{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--space-4)}
.cta-box{display:flex;flex-direction:column;gap:var(--space-3)}
.cta .pa-btn{width:100%}
.cta p{margin:0}
.claims{background:var(--brand-soft);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:14px;line-height:20px;margin-top:var(--space-4)}
.src{font-size:14px;line-height:20px;word-break:break-all}
.back{text-decoration:none}
@media (max-width:860px){.grid2{grid-template-columns:1fr}.cta{position:static}}
@media (max-width:640px){dl.spec{grid-template-columns:1fr} dl.spec dt{border-bottom:0;padding-bottom:0}}

.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.calc .pa-field{margin-bottom:var(--space-4)}
.results{display:flex;flex-direction:column;gap:var(--space-6)}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

ol.steps,ul.points{padding-left:var(--space-6);max-width:720px}
ol.steps li,ul.points li{margin:var(--space-2) 0}
.faq{max-width:720px}
.faq p{margin:0 0 var(--space-4)}
.schema{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2);color:var(--ink);margin:0 0 var(--space-4)}
.schema svg{width:100%;height:auto;display:block}
.schema figcaption{font-size:14px;line-height:20px;color:var(--ink-muted);margin-top:var(--space-2)}

footer{margin-top:var(--space-16);background:var(--bg);color:var(--ink-muted);font-size:14px;line-height:20px}
footer .wrap{padding-top:var(--space-8);padding-bottom:calc(var(--space-16) + var(--space-4))}
footer .logo{padding:0 0 var(--space-4)}
footer .logo img{height:32px}
footer nav.foot{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
footer p{margin:0}
footer a{color:var(--brand-blue)}
footer a:hover{color:var(--brand-blue-hover)}
td .pa-badge{white-space:nowrap}

.city-pick{margin-left:auto;width:216px}
.city-pick .pa-input{height:36px;padding:0 var(--space-2);font-size:15px;line-height:20px}
.city-note{font-size:12px;line-height:16px;color:var(--ink-muted);margin-top:2px}
@media (max-width:1240px){.city-pick{margin-left:0;width:100%;max-width:320px;padding-bottom:var(--space-3)}}

.to-top{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:6;box-shadow:var(--shadow-pop)}
.to-top[hidden]{display:none}
@media (min-width:641px){footer .wrap{display:flex;flex-direction:column;align-items:flex-end;text-align:right}}