/* Stability Calculator — sc- prefix, mirrors payload-calculator (pc-) conventions */

.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
@media (max-width: 860px) { .sc-grid { grid-template-columns: 1fr; } }

.sc-section { margin-bottom: 1.75rem; }
.sc-section-title { font-size: 1.05rem; margin: 0 0 .6rem; }
.sc-muted { color: #777; }

.sc-select { width: 100%; padding: .5rem .6rem; font-size: 1rem; }
.sc-platform-note { font-size: .85rem; color: #777; margin: .4rem 0 0; }

.sc-field { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.sc-field__label { min-width: 11rem; font-weight: 600; font-size: .95rem; }
.sc-field__hint { font-size: .85rem; color: #777; }

.sc-stepper { display: inline-flex; align-items: center; gap: .4rem; }
.sc-stepper__btn { width: 2rem; height: 2rem; font-size: 1.1rem; cursor: pointer; }
.sc-stepper__value { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }

.sc-fill-btn, .sc-share-btn, .sc-seg__btn { padding: .35rem .7rem; cursor: pointer; font-size: .85rem; }
.sc-seg { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.sc-seg__btn--on { background: #333; color: #fff; }

.sc-roof-item { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.sc-roof-item__label { font-size: .95rem; }

.sc-result { position: sticky; top: 5.5rem; border: 1px solid #ddd; border-radius: 8px; padding: 1.25rem; background: #fff; }
.sc-result__headline { border-radius: 6px; padding: 1rem; text-align: center; color: #fff; margin-bottom: 1rem; }
.sc-result__headline--green { background: #5B8C5A; }
.sc-result__headline--amber { background: #C9963A; }
.sc-result__headline--red { background: #B14242; }
.sc-result__big { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-result__caption { font-size: .8rem; opacity: .9; }
.sc-result__rows { display: grid; grid-template-columns: auto auto; gap: .3rem .8rem; font-size: .9rem; margin: 0 0 .8rem; }
.sc-result__rows dt { color: #666; }
.sc-result__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sc-result__rating { font-size: .9rem; font-weight: 600; }
.sc-result__warn { font-size: .9rem; color: #B14242; font-weight: 600; }
.sc-result__note { font-size: .78rem; color: #777; }

.sc-badge { display: inline-block; font-size: .8rem; padding: .25rem .6rem; border-radius: 4px; margin-bottom: .75rem; }
.sc-badge--fallback { background: #C9963A; color: #fff; }

.sc-disclaimer { font-size: .9rem; color: #555; border-left: 4px solid #B14242; padding-left: 1rem; }
.sc-faq h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.sc-faq p { margin: 0 0 .5rem; }
.sc-crosslink { margin-top: 1.25rem; font-weight: 600; }

/* Visualizer */
.sc-viz__svg { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }
.sc-viz__horizon { stroke: #bbb; }
.sc-viz__ground { stroke: #444; stroke-width: 3; }
.sc-viz__wheel { fill: #222; }
.sc-viz__body { fill: #8a97a5; stroke: #4a555f; stroke-width: 2; }
.sc-viz__plumb { stroke: #333; }
.sc-viz__cg--green { fill: #5B8C5A; }
.sc-viz__cg--amber { fill: #C9963A; }
.sc-viz__cg--red { fill: #B14242; }
.sc-viz__controls { max-width: 640px; margin: .75rem auto 0; }
.sc-viz__controls input[type="range"] { width: 100%; }
.sc-viz__msg { font-size: .9rem; font-weight: 600; }
.sc-viz__msg--green { color: #5B8C5A; }
.sc-viz__msg--amber { color: #C9963A; }
.sc-viz__msg--red { color: #B14242; }

/* Comparison bars */
.sc-compare__row { display: grid; grid-template-columns: 14rem 1fr 6rem; gap: .6rem; align-items: center; padding: .25rem 0; }
@media (max-width: 640px) { .sc-compare__row { grid-template-columns: 1fr; gap: .15rem; } }
.sc-compare__row--active { background: #f4f1ea; border-radius: 4px; }
.sc-compare__name { font-size: .9rem; }
.sc-compare__track { position: relative; height: 12px; background: #eee; border-radius: 6px; overflow: hidden; }
.sc-compare__bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.sc-compare__bar--green { background: #5B8C5A; }
.sc-compare__bar--amber { background: #C9963A; }
.sc-compare__bar--red { background: #B14242; }
.sc-compare__val { font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }