@import url("rscable-calculator-spacing.css?v=9a6c208247c5");
.rscable-winding { min-width: 0; padding-bottom: 48px; color: var(--basic_text_black, #555558); }
.rscable-winding *, .rscable-winding *::before, .rscable-winding *::after { box-sizing: border-box; }
.rscable-winding [hidden] { display: none !important; }
.rscable-winding h1 { margin: 0 0 16px; }
.rscable-winding__panel, .rscable-winding__result { padding: 24px; margin: 24px 0; background: var(--black_bg_black, #fff); }
.rscable-winding__line { border: 0; border-bottom: 1px solid var(--stroke_black, #ebedef); padding: 0 0 24px; margin: 0 0 24px; min-width: 0; }
.rscable-winding__line legend { font-size: 16px; font-weight: 500; border: 0; margin-bottom: 16px; }
.rscable-winding__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(130px, .6fr); gap: 16px; }
.rscable-winding__field { min-width: 0; }
.rscable-winding__field label { display: block; font-size: 14px; margin: 0 0 8px; }
.rscable-winding .form-control { width: 100%; min-width: 0; }
.rscable-winding select.form-control { margin-top: 8px; }
.rscable-winding__selected { overflow-wrap: anywhere; margin: 8px 0; }
.rscable-winding__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rscable-winding .btn { min-height: 44px; height: auto; white-space: normal; }
.rscable-winding__remove { margin-top: 12px; }
.rscable-winding__hint { color: var(--secondary, #8d8d8d); margin: 12px 0 0; }
.rscable-winding__more { margin-top: 8px; }
.rscable-winding__result { overflow-wrap: anywhere; }
.rscable-winding__result dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rscable-winding__result dd { margin: 4px 0 0; font-weight: 500; }
.rscable-winding__result dt { font-weight: 400; }
.rscable-winding__seo { margin-top: 32px; }
.rscable-winding__comparison { margin: 24px 0; }
.rscable-winding__comparison summary { cursor: pointer; font-weight: 500; padding: 12px 0; }
.rscable-winding__table-scroll { max-width: 100%; overflow: auto; margin: 16px 0; border: 1px solid var(--stroke_black, #ebedef); border-radius: var(--border-radius, 6px); }
.rscable-winding__table-scroll table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 14px; }
.rscable-winding__table-scroll th, .rscable-winding__table-scroll td { padding: 12px; min-width: 110px; border-right: 1px solid var(--stroke_black, #ebedef); border-bottom: 1px solid var(--stroke_black, #ebedef); text-align: left; vertical-align: middle; }
.rscable-winding__table-scroll th { font-weight: 500; background: var(--darkerblack_bg_black, #f8f8f8); }
.rscable-winding__matrix { max-height: 520px; }
.rscable-winding__matrix thead th { position: sticky; top: 0; z-index: 2; }
.rscable-winding__matrix th:first-child { position: sticky; left: 0; z-index: 1; }
.rscable-winding__matrix thead th:first-child { z-index: 3; }
.rscable-winding__matrix td { padding: 0; }
.rscable-winding__matrix td button { display: block; width: 100%; min-height: 44px; padding: 12px; border: 0; color: inherit; background: transparent; font: inherit; text-align: center; cursor: pointer; }
.rscable-winding .is-axis, .rscable-winding .is-result-row > *, .rscable-winding .is-suitable > * { background: color-mix(in srgb, var(--theme-base-color, #257de3) 12%, var(--black_bg_black, #fff)); }
.rscable-winding .is-cell { background: var(--theme-base-color, #257de3); color: #fff; }
.rscable-winding [data-matrix] { scroll-margin-top: 100px; }
.rscable-winding [data-share-url] { margin-top: 12px; }
.rscable-winding :focus-visible { outline: 2px solid var(--theme-base-color, #257de3); outline-offset: 2px; }
@media (max-width: 767px) {
    .rscable-winding__fields, .rscable-winding__result dl { grid-template-columns: minmax(0, 1fr); }
    .rscable-winding__panel, .rscable-winding__result { padding: 16px; }
    .rscable-winding__actions .btn { flex: 1 1 180px; }
}

/* Постоянная отметка барабана из справочника не зависит от hover матрицы. */
.rscable-winding tr.is-requested-drum > * { box-shadow: inset 3px 0 var(--theme-base-color, #257de3); font-weight: 600; }
.rscable-winding__matrix .is-requested-drum { background: color-mix(in srgb, var(--theme-base-color, #257de3) 22%, var(--black_bg_black, #fff)) !important; font-weight: 600; }
.rscable-winding__matrix .is-requested-drum.is-cell { background: var(--theme-base-color, #257de3) !important; }

/* Compact input rows: labels and controls; search choices live in a bounded popup. */
.rscable-winding [data-winding-form] { padding: 16px; }
.rscable-winding__line { padding: 0 0 12px; margin: 0 0 12px; }
.rscable-winding__line legend { font-size: 14px; margin-bottom: 6px; }
.rscable-winding__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(100px, .5fr) auto; gap: 12px; align-items: start; }
.rscable-winding__field label { margin-bottom: 4px; font-size: 12px; }
.rscable-winding__selected { margin: 4px 0 0; font-size: 12px; line-height: 16px; }
.rscable-winding__selected:empty, .rscable-winding [data-message]:empty { display: none; }
.rscable-winding__remove { margin: 22px 0 0; }
.rscable-winding__lookup { position: relative; }
.rscable-winding__popup { position: absolute; top: 70px; left: 0; right: 0; z-index: 20; max-height: 300px; overflow-y: auto; padding: 6px; border: 1px solid var(--stroke_black, #ebedef); border-radius: var(--border-radius, 6px); background: var(--black_bg_black, #fff); box-shadow: 0 6px 20px #0002; }
.rscable-winding__option { display: block; width: 100%; border: 0; padding: 10px; min-height: 40px; font: inherit; font-size: 14px; text-align: left; color: inherit; background: transparent; cursor: pointer; overflow-wrap: anywhere; }
.rscable-winding__option:hover, .rscable-winding__option:focus-visible, .rscable-winding__option[aria-selected=true] { background: color-mix(in srgb, var(--theme-base-color, #257de3) 10%, var(--black_bg_black, #fff)); }
.rscable-winding__more { width: 100%; margin: 8px 0 0; }
.rscable-winding__help { margin-top: 12px; font-size: 13px; }
.rscable-winding__help summary { cursor: pointer; }
.rscable-winding [data-share] { margin-top: 8px; }
.rscable-winding__matrix { max-height: none; overflow: visible; margin: 12px 0; }
.rscable-winding__matrix table { table-layout: fixed; font-size: clamp(9px, .85vw, 12px); line-height: 14px; }
.rscable-winding__matrix th, .rscable-winding__matrix td { min-width: 0; padding: 0 1px; text-align: center; }
.rscable-winding__matrix thead th, .rscable-winding__matrix th:first-child { position: static; }
.rscable-winding__matrix thead th { padding: 4px 0; color: var(--white_text_black, #222228); }
.rscable-winding__matrix thead small { display: block; font-size: .85em; font-weight: 400; white-space: nowrap; }
.rscable-winding__matrix td button { min-height: 0; padding: 0; line-height: 14px; white-space: nowrap; }
.rscable-winding__matrix tbody tr:nth-child(even) td:not(.is-axis):not(.is-cell):not(.is-requested-drum) { background: color-mix(in srgb, var(--theme-base-color, #257de3) 3%, var(--black_bg_black, #fff)); }
.rscable-winding__matrix tbody tr.is-result-row td { background: color-mix(in srgb, var(--theme-base-color, #257de3) 12%, var(--black_bg_black, #fff)) !important; }
.rscable-winding [data-matrix] { padding: 16px; }
.rscable-winding [data-matrix] h2 { margin: 0 0 8px; }
.rscable-winding [data-matrix] p { font-size: 12px; line-height: 18px; margin: 4px 0; }
.rscable-winding [data-matrix-selection] { min-height: 18px; }
.rscable-winding__matrix-pages { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rscable-winding__matrix-pages > div { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.rscable-winding__result { padding: 16px; }
.rscable-winding__result dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; font-size: 13px; }
@media (max-width: 767px) {
    .rscable-winding__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .rscable-winding__remove { align-self: end; margin: 0; }
    .rscable-winding__result dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rscable-winding__actions { gap: 8px; }
    .rscable-winding__actions .btn { flex: 1 1 auto; font-size: 13px; }
    .rscable-winding__matrix table { font-size: 12px; line-height: 24px; }
    .rscable-winding__matrix td button { min-height: 28px; line-height: 28px; }
    .rscable-winding__popup { min-width: 240px; }
    .rscable-winding__lookup:nth-child(2) .rscable-winding__popup { left: auto; }
}

.rscable-winding__selected { display: none; } /* Full selected name is the wrapping line legend. */
.rscable-winding__line legend { overflow-wrap: anywhere; }
.rscable-winding__fields .rscable-winding__field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.rscable-winding__remove { margin-top: 0; }
.rscable-winding__popup { top: 48px; }

.rscable-winding__actions { align-items: center; }
.rscable-winding__actions .rscable-winding__help { margin: 0; position: relative; }
.rscable-winding__help[open] { flex-basis: 100%; order: 5; }
.rscable-winding__actions [data-message] { margin: 0; font-size: 12px; }
.rscable-winding__actions [data-share] { margin-top: 0; }

.rscable-winding__length { position: relative; }
.rscable-winding__length .form-control { padding-right: 32px; }
.rscable-winding__unit { position: absolute; right: 12px; top: 11px; font-size: 14px; color: var(--secondary, #8d8d8d); pointer-events: none; }

/* Independent cable facets and the requested reference-row result. */
.rscable-winding__fields { grid-template-columns: minmax(150px, 1.5fr) minmax(100px, .8fr) minmax(100px, 1fr) minmax(120px, 1fr) minmax(100px, .8fr) auto; align-items: end; }
.rscable-winding__fields .rscable-winding__field label { position: static; width: auto; height: auto; margin: 0 0 4px; clip-path: none; overflow: visible; }
.rscable-winding select.form-control { margin: 0; }
.rscable-winding__lookup .rscable-winding__popup { top: 70px; }
.rscable-winding__execution { grid-column: 1 / -1; order: 10; }
.rscable-winding__selection-status { grid-column: 1 / -1; order: 11; margin: 0; }
.rscable-winding__selection-status:empty { display: none; }
.rscable-winding__unit { top: auto; bottom: 11px; }
.rscable-winding__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .6fr); gap: 20px; margin: 12px 0 20px; align-items: center; }
.rscable-winding__result .rscable-winding__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.rscable-winding__metrics > div { padding: 12px; border-radius: var(--border-radius, 6px); background: color-mix(in srgb, var(--theme-base-color, #257de3) 8%, var(--black_bg_black, #fff)); }
.rscable-winding__metrics dt { font-size: 12px; line-height: 18px; }
.rscable-winding__metrics dd { font-size: 24px; line-height: 30px; color: var(--white_text_black, #222228); }
.rscable-winding__result-note { font-size: 13px; line-height: 20px; margin: 8px 0; }
.rscable-winding__drawing { margin: 0; min-width: 0; }
.rscable-winding__views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rscable-winding__drawing svg { width: 100%; height: 190px; display: block; color: var(--theme-base-color, #257de3); }
.rscable-winding__drawing figcaption { font-size: 11px; line-height: 16px; color: var(--secondary, #8d8d8d); }
.rscable-winding__outline { fill: color-mix(in srgb, var(--theme-base-color, #257de3) 8%, var(--black_bg_black, #fff)); stroke: currentColor; stroke-width: 2; }
.rscable-winding__dimension { fill: none; stroke: currentColor; stroke-width: 1.5; }
.rscable-winding__svg-labels { fill: var(--white_text_black, #222228); font-size: 20px; font-family: inherit; }
.rscable-winding__result .rscable-winding__norm-strip { display: grid; grid-template-columns: repeat(23, minmax(0, 1fr)); gap: 0; border: 1px solid var(--stroke_black, #ebedef); margin: 12px 0; font-size: clamp(9px, .8vw, 11px); line-height: 20px; }
.rscable-winding__norm-strip > div { min-width: 0; text-align: center; border-right: 1px solid var(--stroke_black, #ebedef); }
.rscable-winding__norm-strip dt { white-space: nowrap; font-size: inherit; background: var(--darkerblack_bg_black, #f8f8f8); padding: 3px 0; }
.rscable-winding__norm-strip dd { margin: 0; padding: 3px 0; white-space: nowrap; font-weight: 500; }
.rscable-winding__norm-strip > .is-suitable { background: color-mix(in srgb, var(--theme-base-color, #257de3) 12%, var(--black_bg_black, #fff)); }
.rscable-winding__norm-strip .is-selected-drum { box-shadow: inset 0 -3px var(--theme-base-color, #257de3); }
.rscable-winding__suitable { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); gap: 4px; margin: 16px 0; padding: 3px; overflow-x: auto; }
.rscable-winding__suitable-card { display: block; width: 100%; min-width: 0; text-align: left; font: inherit; color: inherit; background: var(--black_bg_black, #fff); cursor: pointer; border: 1px solid var(--stroke_black, #ebedef); border-radius: var(--border-radius, 6px); padding: 6px 4px; }
.rscable-winding__suitable-card .rscable-winding__card-title { display: block; font-weight: 600; margin: 0 0 8px; }
.rscable-winding__suitable-card > span { display: block; font-size: 13px; line-height: 20px; margin: 4px 0; }
@media (max-width: 1099px) {
    .rscable-winding__fields { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
    .rscable-winding__remove { grid-column: 5; }
    .rscable-winding__hero { grid-template-columns: minmax(0, 1fr); }
    .rscable-winding__drawing { max-width: 420px; width: 100%; justify-self: center; }
}
@media (max-width: 767px) {
    .rscable-winding__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rscable-winding__remove { grid-column: auto; font-size: 12px; padding-inline: 6px; }
    .rscable-winding__field label { font-size: 11px; line-height: 16px; }
    .rscable-winding__fields .form-control { padding-inline: 8px; font-size: 13px; }
    .rscable-winding__length .form-control { padding-right: 24px; }
    .rscable-winding__lookup .rscable-winding__popup { top: 64px; }
    .rscable-winding__result .rscable-winding__metrics { gap: 8px; }
    .rscable-winding__metrics > div { padding: 8px; }
    .rscable-winding__metrics dd { font-size: 18px; line-height: 24px; }
    .rscable-winding__metrics dt { font-size: 11px; line-height: 16px; }
    .rscable-winding__result .rscable-winding__norm-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 13px; }
    .rscable-winding__norm-strip > div { border-bottom: 1px solid var(--stroke_black, #ebedef); }
}

/* Readable drawing and a clear order: summary, loads, cable mass, drum dimensions. */
.rscable-winding__hero { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); align-items: start; }
.rscable-winding__drawing svg { height: 250px; }
.rscable-winding__drawing figcaption { margin-top: 8px; color: var(--basic_text_black, #555558); font-size: 12px; line-height: 18px; }
.rscable-winding__drawing figcaption p { margin: 2px 0; }
.rscable-winding__drawing figcaption small { font-size: 11px; color: var(--secondary, #8d8d8d); }
.rscable-winding__loads { padding: 14px 16px; border: 1px solid var(--stroke_black, #ebedef); border-left: 3px solid var(--theme-base-color, #257de3); border-radius: var(--border-radius, 6px); }
.rscable-winding__loads h3 { margin: 0 0 12px; }
.rscable-winding__loads > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 10px; }
.rscable-winding__loads strong { font-size: 18px; line-height: 24px; font-weight: 500; color: var(--white_text_black, #222228); }
.rscable-winding__loads span { font-size: 13px; line-height: 20px; }
.rscable-winding__result .rscable-winding__cable-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.rscable-winding__cable-facts dt { font-size: 12px; line-height: 18px; }
.rscable-winding__cable-facts dd { font-size: 16px; line-height: 22px; color: var(--white_text_black, #222228); }
.rscable-winding__result .rscable-winding__norm-strip { grid-template-columns: repeat(var(--norm-count, 5), minmax(0, 1fr)); font-size: clamp(10px, 1vw, 14px); }
@media (max-width: 1099px) {
    .rscable-winding__hero { grid-template-columns: minmax(0, 1fr); }
    .rscable-winding__drawing { max-width: 540px; }
}
@media (min-width: 768px) and (max-width: 900px) {
    .rscable-winding__result .rscable-winding__norm-strip { font-size: 10px; }
}
@media (max-width: 767px) {
    .rscable-winding__drawing svg { height: 210px; }
    .rscable-winding__loads { padding: 12px; }
    .rscable-winding__loads > div { flex-direction: column; }
    .rscable-winding__result .rscable-winding__norm-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 13px; }
}
@media (max-width: 600px) {
    .rscable-winding__views { grid-template-columns: minmax(0, 1fr); max-width: 280px; margin-inline: auto; }
}

/* Two-part result and a compact share action. */
.rscable-winding__share { position: relative; display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; padding: 0; border: 0; border-radius: var(--border-radius, 6px); background: transparent; color: var(--theme-base-color, #257de3); cursor: pointer; }
.rscable-winding__share:hover, .rscable-winding__share:focus-visible { background: transparent; color: var(--theme-base-color, #257de3); }
.rscable-winding__share { color: var(--basic_text_black, #555); }
.rscable-winding__share svg { transition: transform .12s ease; }
.rscable-winding__share:active svg { transform: translateY(2px) scale(.94); }
.rscable-winding__share [role=tooltip] { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: 240px; padding: 8px 10px; border-radius: var(--border-radius, 6px); color: var(--button_color_text, #fff); background: var(--white_text_black, #222228); font-size: 12px; line-height: 18px; font-weight: 400; visibility: hidden; opacity: 0; pointer-events: none; z-index: 25; }
.rscable-winding__share:hover [role=tooltip], .rscable-winding__share:focus-visible [role=tooltip] { visibility: visible; opacity: 1; }
.rscable-winding__hero { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 28px; }
.rscable-winding__hero > div { min-width: 0; }
.rscable-winding__loads { border: 0; border-top: 1px solid var(--stroke_black, #ebedef); border-bottom: 1px solid var(--stroke_black, #ebedef); border-radius: 0; padding: 12px 0; margin-top: 12px; }
.rscable-winding__loads h3 { font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.rscable-winding__loads strong { font-size: 16px; }
.rscable-winding__views { gap: 16px; }
.rscable-winding__view-title { margin: 0 0 4px; font-size: 14px; line-height: 20px; }
.rscable-winding__drawing figcaption { padding: 0; }
.rscable-winding__result .rscable-winding__norm-strip { border: 0; gap: 6px; align-items: stretch; }
.rscable-winding__norm-strip > div { border: 1px solid var(--stroke_black, #ebedef); border-radius: var(--border-radius, 6px); padding: 4px 2px; }
.rscable-winding__norm-strip dt { background: transparent; }
.rscable-winding__norm-strip > .is-selected-drum { border: 2px solid var(--theme-base-color, #257de3); box-shadow: none; padding: 3px 1px; }
.rscable-winding__chosen { display: block; color: var(--theme-base-color, #257de3); font-size: 11px; line-height: 16px; font-weight: 500; }
@media (max-width: 1099px) {
    .rscable-winding__hero { grid-template-columns: minmax(0, 1fr); }
    .rscable-winding__result .rscable-winding__norm-strip { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); font-size: 13px; }
}
@media (max-width: 600px) {
    .rscable-winding__drawing { max-width: 280px; }
    .rscable-winding__views { margin: 0; }
}

.rscable-winding__result-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.rscable-winding__result-heading h2 { min-width: 0; margin: 8px 0 0; }
.rscable-winding__suitable-card.is-selected-drum { border-color: var(--theme-base-color, #257de3); background: color-mix(in srgb, var(--theme-base-color, #257de3) 6%, var(--black_bg_black, #fff)); }
.rscable-winding__suitable-card .rscable-winding__chosen { margin-bottom: 4px; }
.rscable-winding .rscable-winding__result-heading { align-items: center; }
.rscable-winding .rscable-winding__result-heading h2 { margin: 0; }
.rscable-winding .rscable-winding__result-heading .rscable-winding__share { margin: 0; }

.rscable-winding__suitable-card:hover, .rscable-winding__suitable-card:focus-visible { border-color: var(--theme-base-color, #257de3); }

/* Compact single row with dimensions always visible. Status rows keep titles aligned. */
.rscable-winding__result { scroll-margin-top: 100px; }
.rscable-winding__suitable-card { display: grid; grid-template-rows: 20px minmax(24px, auto) 14px 14px 12px 12px; align-content: start; text-align: center; overflow-wrap: normal; }
.rscable-winding__suitable-card > span { margin: 0; font-size: 11px; line-height: 14px; }
.rscable-winding__suitable-card .rscable-winding__card-title { margin: 0; font-size: 16px; line-height: 20px; white-space: nowrap; }
.rscable-winding__suitable-card .rscable-winding__card-dimensions { align-self: center; font-size: 9px; line-height: 12px; }
.rscable-winding__suitable-card .rscable-winding__card-mass { font-weight: 600; }
.rscable-winding__suitable-card .rscable-winding__recommended { font-size: 8px; line-height: 12px; overflow-wrap: anywhere; color: var(--theme-base-color, #257de3); }
.rscable-winding__suitable-card .rscable-winding__chosen { margin: 0; font-size: 10px; line-height: 12px; }