#js-tool-container-sewer-pipe-diameter-calculator .sw-app { display: flex; flex-direction: column; gap: 22px; color: var(--text-primary); --sw-accent: var(--accent-primary); } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px 16px; margin: 0 0 14px; } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-fieldset:last-of-type { margin-bottom: 0; } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-legend { padding: 0 6px; font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-grid { display: grid; gap: 14px 18px; } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-grid-2 { grid-template-columns: 1fr 1fr; } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-grid-3 { grid-template-columns: 1fr 1fr 1fr; } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-hint { font-size: 0.8rem; line-height: 1.35; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-outcome { display: flex; flex-direction: column; gap: 16px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-outcome { display: flex; flex-direction: column; gap: 20px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-app.is-warn { --sw-accent: var(--warning); } #js-tool-container-sewer-pipe-diameter-calculator .sw-app.is-danger { --sw-accent: var(--danger); } #js-tool-container-sewer-pipe-diameter-calculator .sw-panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) auto; gap: 10px 24px; align-items: center; padding: 20px 22px; border-radius: var(--radius-lg, 16px); border: 1px solid var(--border-color); background: linear-gradient(100deg, color-mix(in srgb, var(--sw-accent) 11%, transparent) 0%, transparent 55%); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-main, #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-aside { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-aside { padding-left: 24px; border-left: 1px solid var(--border-color); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-value { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-second { font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-row .tbcalc-unit { font-size: 1rem; font-weight: 600; color: var(--text-secondary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-sub { font-size: 0.78rem; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-chips { display: flex; flex-wrap: wrap; gap: 8px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-secondary, transparent); font-size: 0.82rem; } #js-tool-container-sewer-pipe-diameter-calculator .sw-chip-key { color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-chip-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-chip-unit { color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 132px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-svg { width: 108px; height: 108px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-track { fill: none; stroke: var(--bg-tertiary); stroke-width: 10; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-fill { fill: none; stroke: var(--sw-accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 1; transition: stroke-dasharray 480ms cubic-bezier(0.22, 0.61, 0.36, 1), stroke 240ms ease; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-center { position: absolute; top: 30px; display: flex; flex-direction: column; align-items: center; line-height: 1; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-score { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-total { font-size: 0.72rem; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-caption { font-size: 0.72rem; line-height: 1.3; text-align: center; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-note { grid-column: 1 / -1; margin: 0; font-size: 0.87rem; line-height: 1.5; color: var(--text-secondary); } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); border: 1px dashed color-mix(in srgb, var(--sw-accent) 45%, transparent); background: color-mix(in srgb, var(--sw-accent) 8%, transparent); font-size: 0.9rem; line-height: 1.5; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-checks { display: flex; flex-direction: column; gap: 10px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-caption { font-size: 0.84rem; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "mark name name" "mark fact rule" "gauge gauge gauge"; align-items: center; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary, transparent); transition: border-color 240ms ease; } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-mark { grid-area: mark; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.86rem; font-weight: 700; line-height: 1; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-name { grid-area: name; font-size: 0.84rem; line-height: 1.3; color: var(--text-secondary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-fact { grid-area: fact; font-size: 1.24rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-rule { grid-area: rule; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; text-align: right; } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-gauge { grid-area: gauge; position: relative; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--bg-tertiary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--success); transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-gauge-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--text-secondary); transition: left 420ms cubic-bezier(0.22, 0.61, 0.36, 1); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-row.sw-failed { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 6%, transparent); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-row.sw-failed .sw-trace-mark { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-row.sw-failed .sw-trace-name { color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-row.sw-failed .sw-trace-gauge-fill { background: var(--danger); } #js-tool-container-sewer-pipe-diameter-calculator .sw-canvas-wrap { width: 100%; } #js-tool-container-sewer-pipe-diameter-calculator .sw-section-canvas { width: 100%; display: block; } #js-tool-container-sewer-pipe-diameter-calculator .sw-canvas-desc { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--text-secondary); } #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-table-wrap { overflow-x: auto; } #js-tool-container-sewer-pipe-diameter-calculator .sw-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } #js-tool-container-sewer-pipe-diameter-calculator .sw-table-caption { text-align: left; padding-bottom: 8px; font-size: 0.84rem; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-table th, #js-tool-container-sewer-pipe-diameter-calculator .sw-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border-color); white-space: nowrap; } #js-tool-container-sewer-pipe-diameter-calculator .sw-table th:first-child, #js-tool-container-sewer-pipe-diameter-calculator .sw-table td:first-child { text-align: left; } #js-tool-container-sewer-pipe-diameter-calculator .sw-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); } #js-tool-container-sewer-pipe-diameter-calculator .sw-table tr.sw-row-accepted td { background: var(--accent-light); font-weight: 600; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-verdict-ok { color: var(--success); } #js-tool-container-sewer-pipe-diameter-calculator .sw-verdict-warn { color: var(--warning); } #js-tool-container-sewer-pipe-diameter-calculator .sw-verdict-bad { color: var(--danger); } #js-tool-container-sewer-pipe-diameter-calculator .sw-ledger { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ledger-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border-color); } #js-tool-container-sewer-pipe-diameter-calculator .sw-ledger-row dt { flex: 1 1 auto; min-width: 0; font-size: 0.86rem; color: var(--text-secondary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-ledger-row dd { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--text-primary); } #js-tool-container-sewer-pipe-diameter-calculator .sw-source { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); } @media (max-width: 600px) { #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-grid-2, #js-tool-container-sewer-pipe-diameter-calculator .tbcalc-grid-3 { grid-template-columns: 1fr; } #js-tool-container-sewer-pipe-diameter-calculator .sw-panel { grid-template-columns: 1fr auto; padding: 16px; gap: 14px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-hero-aside { padding-left: 0; border-left: none; border-top: 1px solid var(--border-color); padding-top: 12px; grid-column: 1 / -1; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring { width: 104px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-svg { width: 88px; height: 88px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-center { top: 22px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-score { font-size: 1.5rem; } #js-tool-container-sewer-pipe-diameter-calculator .sw-trace { grid-template-columns: 1fr; } #js-tool-container-sewer-pipe-diameter-calculator .sw-table th, #js-tool-container-sewer-pipe-diameter-calculator .sw-table td { padding: 7px 8px; } #js-tool-container-sewer-pipe-diameter-calculator .sw-ledger-row { flex-direction: column; gap: 2px; } } @media (prefers-reduced-motion: reduce) { #js-tool-container-sewer-pipe-diameter-calculator .sw-ring-fill, #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-gauge-fill, #js-tool-container-sewer-pipe-diameter-calculator .sw-trace-gauge-mark { transition: none; } }