/* Fiber loss budget: inputs on the left, the power staircase on the right. */
.xr-budget-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.xr-budget-inputs input[type=range] { width: 100%; }
.xr-budget-steppers { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; }
.xr-budget-stepper { display: grid; grid-template-columns: 44px 3ch 44px; align-items: center; gap: 6px; }
.xr-budget-stepper .xr-label { grid-column: 1 / -1; margin-bottom: 0; }
.xr-budget-stepper .xr-button { padding: 0; font-size: 18px; }
.xr-budget-stepper output { text-align: center; font: 500 18px/1 var(--mono); color: #e6f7fb; }
.xr-budget-dirty { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: #d2e7ef; font: 500 13px/1.4 var(--sans); cursor: pointer; }
.xr-lesson .xr-budget-dirty input[type=checkbox] { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: #f2b56b; }

.xr-budget-chart { padding: 10px 8px 4px; border: 1px solid #35505d; border-radius: 8px; background: #0a1d27; }
.xr-budget-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.xr-budget-zone-fail { fill: #ff7b6b33; }
.xr-budget-zone-margin { fill: #f2b56b38; }
.xr-budget-zone-ok { fill: #72e5ef1f; }
.xr-budget-limit { stroke: #f2b56b; stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; }
.xr-budget-limit-text { fill: #f2c58b; font: 500 11px var(--mono); }
.xr-budget-axis { fill: #8fa9b6; font: 400 11px var(--mono); }
.xr-budget-trace { fill: none; stroke: #72e5ef; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px #72e5ef88); }
.xr-budget-event { stroke: #07151d; stroke-width: 1.5; }
.xr-budget-connector { fill: #e6f7fb; }
.xr-budget-splice { fill: #72e5ef; }
circle.xr-budget-bad { fill: #ff8a73; stroke: #ffd1c7; animation: xr-budget-pulse 1.6s ease-in-out infinite; }
@keyframes xr-budget-pulse { 50% { opacity: .45; } }

.xr-budget-sum { display: grid; gap: 2px; margin: 12px 0 0; font: 400 13px/1.5 var(--mono); }
.xr-budget-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px solid #1d3742; }
.xr-budget-sum dt { color: #9bb5c3; }
.xr-budget-sum dd { margin: 0; color: #e6f7fb; text-align: right; }
.xr-budget-sum .xr-budget-total dd, .xr-budget-sum .xr-budget-measured dd { color: #b3f4f8; font-weight: 600; }
.xr-budget-sum .xr-budget-measured dd { color: #ffb4a6; }
.xr-budget-sum [hidden] { display: none; }

.xr-budget-verdict { margin-top: 20px; padding: 14px 18px; border-left: 3px solid #72e5ef; border-radius: 0 8px 8px 0; background: #0d2631; }
.xr-budget-verdict[data-tone=warn] { border-color: #f2b56b; background: #2a22152e; }
.xr-budget-verdict[data-tone=fail], .xr-budget-verdict[data-tone=hot] { border-color: #ff7b6b; background: #2e161430; }
.xr-budget-verdict p { margin: 0; color: #cfe3ea; font: 400 14px/1.6 var(--sans); }
.xr-budget-verdict .xr-budget-verdict-label { margin-bottom: 4px; color: #e6f7fb; font: 600 16px/1.35 var(--sans); }
.xr-budget .xr-note a { color: #8de4ed; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .xr-budget-grid { grid-template-columns: 1fr; }
}