/* Калькулятор металла — дополнение к ../assets/styles.css */
.m-wrap{max-width:1080px}
.m-wrap h1{margin-top:14px}

/* плитки видов проката */
.m-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:16px 0 4px}
.m-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 9px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:12.5px;line-height:1.2;text-align:center;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.m-tile svg{width:28px;height:28px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round;transition:stroke .15s}
.m-tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.m-tile:hover svg{stroke:var(--accent)}
.m-tile.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.m-tile.on svg{stroke:var(--accent)}
@media(max-width:900px){.m-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.m-tiles{display:flex;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}.m-tiles::-webkit-scrollbar{display:none}.m-tile{flex:0 0 86px}}

/* форма */
.m-card{padding:14px 18px 16px}
.m-form .form-row{padding:9px 0}
.m-form .form-row label{flex:1 1 180px}
.m-form select{max-width:300px}
.m-form input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.m-form .unit-sel{width:auto;min-width:62px;padding:9px 6px}
.m-form .hint{flex:1 1 100%;font-size:12px;color:var(--muted)}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg-b{font:inherit;font-size:14px;border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.seg-b:hover{color:var(--ink)}
.seg-b.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* результат */
.m-results{padding:14px 16px 10px}
.m-main{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.m-ml{font-weight:600}
.m-mv{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.m-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:6px}
.m-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.m-row span{color:var(--muted)}
.m-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){.m-rows{grid-template-columns:1fr}}
.m-notes{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.m-note{margin-top:6px;padding:7px 10px;border-radius:8px;background:#fff4e0;color:#6b4a0b}
.m-note.soft{background:var(--panel);color:var(--muted)}
.m-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.m-btn{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:filter .15s}
.m-btn:hover{filter:brightness(1.06)}
.m-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.m-btn.ghost:hover{border-color:var(--accent)}

/* сечение */
.scene-svg{--stl1:#d7dde4;--stl2:#8e9aa7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scene-svg{--stl1:#9aa6b3;--stl2:#56616d}}
.scene-svg .stl{fill:url(#stl);stroke:#4b5563;stroke-width:1.2}
.scene-svg .stl.side{filter:brightness(.8)}
.scene-svg .rib{stroke:#6b7682;stroke-width:3;stroke-linecap:round}
.scene-svg .rifl{fill:#b7c0ca;stroke:#6b7682;stroke-width:.8}
.scene-svg .bar{fill:url(#stl);stroke:#4b5563;stroke-width:.8}
.scene-svg .barend{fill:#aeb8c3;stroke:#4b5563;stroke-width:.8}

/* таблицы ГОСТ */
.m-gost{margin-top:30px}
.m-gost h2,.m-faq h2,.m-tags h2{font-size:22px;margin:0 0 10px}
.m-gost h3{font-size:17px;margin:22px 0 8px}
.gost-list{margin:0 0 10px;padding-left:18px;font-size:14px;color:var(--ink)}
.gost-list .st{color:var(--muted)}
.gost-hint{font-size:13px;color:var(--muted);margin:6px 0}
.gost-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.gost-wrap.collapsed{max-height:520px;overflow-y:hidden}
.gost-wrap.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--card));pointer-events:none}
.gost-more{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.gost-more:hover{border-color:var(--accent)}
.gost-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.gost-table th{position:sticky;top:0;background:var(--bar);color:var(--bar-ink);font-weight:600;text-align:right;padding:8px 10px;white-space:nowrap}
.gost-table th:first-child,.gost-table td:first-child{text-align:left}
.gost-table td{padding:7px 10px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.gost-table tbody tr{cursor:pointer;transition:background .12s}
.gost-table tbody tr:nth-child(even){background:var(--panel)}
.gost-table tbody tr:hover{background:var(--accent-soft)}
.gost-table tbody tr.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.gost-table sup{color:var(--accent);font-weight:700}
.gost-notes{font-size:12.5px;color:var(--muted);margin:8px 0 0;padding-left:18px}

/* статья, вопросы, теги, виджет */
.m-article{margin-top:30px}
.m-faq{margin-top:30px}
.m-faq details{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:8px 0;padding:0 16px;transition:border-color .15s}
.m-faq details[open]{border-color:var(--accent)}
.m-faq summary{cursor:pointer;padding:13px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
.m-faq details[open] summary::after{content:"−"}
.m-faq details p{margin:0 0 14px;color:var(--ink)}
.m-tags{margin-top:30px}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.tagcloud a{font-size:14px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:var(--card);transition:border-color .15s,color .15s}
.tagcloud a:hover{border-color:var(--accent);color:var(--accent)}
.tagcloud a.c{background:var(--panel)}
.tagcloud a.w{background:var(--accent-soft)}
.m-widget{margin-top:26px;border:1px dashed var(--line);border-radius:12px;padding:12px 16px;font-size:14px}
.m-widget summary{cursor:pointer;font-weight:600}
.m-widget textarea{width:100%;font:12px/1.4 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--panel);color:var(--ink);resize:vertical}

/* виджет на чужом сайте */
.m-embed{background:transparent}
.m-embed .wrap{padding:8px}
.m-src-link{font-size:12px;text-align:right;margin:6px 0 0}