/* Sling load calculator */
.calc { display: grid; gap: 12px; }
@media (min-width: 1100px) { .calc { grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; } }
.calc-card, .calc-result { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-card); }
@media (min-width: 768px) { .calc-card, .calc-result { padding: 32px; } }
.calc-card { background: var(--surface); border: 1px solid var(--line); }
.calc-label { font-size: 16px; font-weight: 700; }
.calc-legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .calc-legs { display: flex; flex-wrap: wrap; } }
.calc-configs { display: flex; flex-direction: column; gap: 8px; }
.calc-opt { display: flex; align-items: center; justify-content: center; min-width: 72px; height: 52px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-size: 15.5px; }
.calc-opt-wide { width: 100%; height: auto; min-height: 52px; padding-block: 10px; justify-content: space-between; gap: 12px; text-align: left; }
.calc-opt[aria-checked="true"] { border-color: var(--accent-ink); background: rgba(201, 164, 101, .14); font-weight: 700; }
.calc-factor { color: var(--muted); white-space: nowrap; }
.calc-opt[aria-checked="true"] .calc-factor { color: var(--ink); }
.calc-result { background: linear-gradient(150deg, var(--violet-deep), var(--violet)); color: var(--white); }
.calc-figure { display: flex; align-items: baseline; gap: 8px; }
.calc-figure [data-calc-result] { font-size: clamp(72px, 7.2vw, 104px); line-height: .9; font-weight: 800; font-stretch: 116%; letter-spacing: -.04em; }
.calc-unit { font-size: 30px; font-weight: 700; }
.calc-sum { font-size: 15px; color: var(--lilac); }
.calc-note { font-size: 14px; line-height: 1.55; color: var(--lilac); margin-top: auto; }

/* Sling colour code */
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) { .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.swatch { display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.swatch-colour { height: 56px; }
@media (min-width: 768px) { .swatch-colour { height: 72px; } }
.swatch-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 768px) { .swatch-body { padding: 14px 16px; } }
.swatch-body strong { font-size: 20px; font-weight: 800; }
@media (min-width: 768px) { .swatch-body strong { font-size: 22px; } }
.swatch-body span { font-size: 14px; color: var(--muted); }
.swatch-violet { background: #8A16F5; }
.swatch-green { background: #2F8D55; }
.swatch-yellow { background: #F2C230; }
.swatch-grey { background: #8C8A92; }
.swatch-red { background: #D4342E; }
.swatch-brown { background: #7A4A2A; }
.swatch-blue { background: #1F5FBF; }
.swatch-orange { background: #F07F1E; }

/* Testing and documentation */
.testing { display: grid; gap: 24px; }
@media (min-width: 1000px) { .testing { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }
.testing-art { border-radius: var(--radius-lg); overflow: hidden; height: 240px; }
@media (min-width: 1000px) { .testing-art { height: 440px; } }
.testing-art .ph { height: 100%; }
.testing-copy { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1000px) { .testing-copy { gap: 22px; } }
.testing-lede { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
@media (min-width: 768px) { .testing-lede { font-size: 17.5px; } }
.testing-list li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.testing-list .i { color: var(--accent-ink); width: 22px; height: 22px; margin-top: 2px; }
.testing-list div { display: flex; flex-direction: column; gap: 4px; }
.testing-list strong { font-size: 17px; font-weight: 700; }
.testing-list span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }