/* ============================================================================
   GAS SPRING CALCULATOR
   Loaded only on /gas-spring-calculator/. Enqueued from functions.php behind
   an is_page() check, the same way legal.css is.

   The tool sits inside a Divi code module, so every type property it contests
   has to be restated at weight — Divi emits per-module type at (2,4,1) with
   !important and would otherwise reset the labels, hints and result figures.
   Everything else is token-driven from style.css.

   Spacing rhythm, so nothing drifts:
     card padding        --ls-space-5 (22px), --ls-space-6 (30px) >= 980px
     gap between cards   --ls-space-4 (16px)
     gap between rows    --ls-space-4 (16px)
     gap inside a row    --ls-space-3 (12px)
     label -> input      --ls-space-2 (8px)
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. SHELL
   ------------------------------------------------------------------------- */

.gsc {
    font-family: var(--ls-font-body);
    color: var(--ls-text-muted);
    max-width: 1240px;
    margin: 0 auto;
}

.gsc *,
.gsc *::before,
.gsc *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   2. UNIT TOGGLE
   ------------------------------------------------------------------------- */

.gsc-unitbar {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    margin-bottom: var(--ls-space-4);
}

.gsc-toggle {
    display: inline-flex;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-pill);
    padding: 3px;
    background: var(--ls-surface-2);
}

.gsc-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: var(--ls-btn-font-sm);
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    color: var(--ls-text-soft);
    padding: 0 18px;
    min-height: var(--ls-control-h-sm);
    border-radius: var(--ls-radius-pill);
    transition: background var(--ls-transition), color var(--ls-transition);
}

.gsc-toggle button[aria-pressed="true"] {
    background: var(--ls-red-btn);
    color: #fff;
}

.gsc-toggle button:focus-visible {
    outline: 0;
    box-shadow: var(--ls-focus-ring);
}

/* ----------------------------------------------------------------------------
   3. LAYOUT
   Inputs and results sit side by side wide enough to see both at once; the
   result card is what the customer is watching while they type, so it leads
   the right-hand column and sticks as they scroll the inputs.
   ------------------------------------------------------------------------- */

.gsc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ls-space-4);
    align-items: start;
}

@media (min-width: 980px) {
    .gsc-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.gsc-inputs,
.gsc-results {
    display: grid;
    gap: var(--ls-space-4);
    align-content: start;
    min-width: 0;
}

/* ----------------------------------------------------------------------------
   4. CARDS
   ------------------------------------------------------------------------- */

.gsc-card {
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
    padding: var(--ls-space-5);
}

@media (min-width: 980px) {
    .gsc-card { padding: var(--ls-space-6); }
}

.gsc .gsc-h {
    font-family: var(--ls-font-display) !important;
    font-size: var(--ls-h4) !important;
    font-weight: 700 !important;
    line-height: var(--ls-leading-snug) !important;
    color: var(--ls-text) !important;
    margin: 0 0 var(--ls-space-2) !important;
    padding: 0 !important;
}

.gsc .gsc-lead {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text-soft) !important;
    margin: 0 0 var(--ls-space-4) !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------------------------
   5. FIELDS
   ------------------------------------------------------------------------- */

.gsc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ls-space-3);
    margin-bottom: var(--ls-space-4);
}

.gsc-row:last-of-type { margin-bottom: 0; }

.gsc-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gsc-field--spacer { display: none; }

@media (min-width: 980px) {
    .gsc-field--spacer { display: block; }
}

.gsc .gsc-label {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-small) !important;
    font-weight: 600 !important;
    line-height: var(--ls-leading-snug) !important;
    color: var(--ls-text) !important;
    margin: 0 0 2px !important;
}

.gsc .gsc-u {
    font-weight: 400;
    color: var(--ls-text-faint);
}

.gsc .gsc-hint {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-micro) !important;
    line-height: 1.4 !important;
    color: var(--ls-text-faint) !important;
    margin: 0 0 var(--ls-space-2) !important;
}

/* A field with no hint still has to line its input up with the one beside it
   that does, or the two columns stagger. */
.gsc-label + .gsc-input { margin-top: var(--ls-space-2); }

.gsc .gsc-input {
    font-family: var(--ls-font-body) !important;
    font-size: var(--ls-body) !important;
    color: var(--ls-text) !important;
    background: var(--ls-surface-2) !important;
    border: 1px solid var(--ls-hairline-input) !important;
    border-radius: var(--ls-radius-md) !important;
    min-height: var(--ls-control-h-sm) !important;
    height: var(--ls-control-h-sm) !important;
    padding: 0 var(--ls-control-pad-x) !important;
    width: 100%;
    margin: auto 0 0 !important;
    transition: border-color var(--ls-transition), box-shadow var(--ls-transition);
}

.gsc .gsc-input:focus {
    outline: 0;
    border-color: var(--ls-red) !important;
    box-shadow: var(--ls-focus-ring);
}

.gsc .gsc-input[readonly] {
    color: var(--ls-text-soft) !important;
    background: var(--ls-surface-3) !important;
}

select.gsc-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px !important;
}

.gsc-check {
    display: flex;
    align-items: center;
    gap: var(--ls-space-2);
    margin-top: var(--ls-space-4);
    cursor: pointer;
}

.gsc-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--ls-red-btn);
    flex: 0 0 auto;
    margin: 0;
}

.gsc .gsc-check span {
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-snug) !important;
    color: var(--ls-text-muted) !important;
}

/* ----------------------------------------------------------------------------
   6. RESULT
   ------------------------------------------------------------------------- */

.gsc-card--result {
    background: var(--ls-surface-3);
    border-color: var(--ls-hairline);
    position: relative;
    overflow: hidden;
}

/* The gradient rule the rest of the site puts across the top of a card. */
.gsc-card--result::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--ls-card-line-h);
    background: var(--ls-gradient-ui);
}

.gsc .gsc-big {
    font-family: var(--ls-font-display) !important;
    font-weight: 700 !important;
    font-size: clamp(2.75rem, 1.9rem + 3.2vw, 4rem) !important;
    line-height: 1 !important;
    color: var(--ls-text) !important;
    margin: var(--ls-space-3) 0 0 !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ls-space-2);
    padding: 0 !important;
}

.gsc .gsc-big em {
    font-family: var(--ls-font-body) !important;
    font-style: normal;
    font-weight: 400;
    font-size: var(--ls-body) !important;
    color: var(--ls-text-soft) !important;
}

.gsc .gsc-alt {
    padding: 0 !important;
    font-size: var(--ls-small) !important;
    color: var(--ls-text-faint) !important;
    margin: var(--ls-space-1) 0 0 !important;
}

.gsc-specs {
    margin: var(--ls-space-5) 0 0;
    padding: var(--ls-space-4) 0 0;
    border-top: 1px solid var(--ls-hairline-faint);
    display: grid;
    gap: var(--ls-space-3);
}

.gsc-specs > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ls-space-3);
}

.gsc .gsc-specs dt {
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-snug) !important;
    color: var(--ls-text-soft) !important;
    margin: 0 !important;
}

.gsc .gsc-specs dd {
    font-family: var(--ls-font-display) !important;
    font-weight: 700 !important;
    font-size: var(--ls-h5) !important;
    line-height: 1 !important;
    color: var(--ls-text) !important;
    margin: 0 !important;
    white-space: nowrap;
}

.gsc-specs--sub dd {
    font-size: var(--ls-body) !important;
    color: var(--ls-text-muted) !important;
}

/* When the geometry cannot work, the headline figure is meaningless — dim it
   so the warning underneath is what reads first. */
.gsc.is-blocked .gsc-big,
.gsc.is-blocked .gsc-specs dd {
    color: var(--ls-text-ghost) !important;
}

/* ----------------------------------------------------------------------------
   7. WARNINGS
   ------------------------------------------------------------------------- */

.gsc-warnings {
    list-style: none !important;
    margin: var(--ls-space-5) 0 0 !important;
    padding: 0 !important;
    display: grid;
    gap: var(--ls-space-2);
}

.gsc .gsc-w {
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    margin: 0 !important;
    padding: var(--ls-space-3) var(--ls-space-4);
    border-radius: var(--ls-radius-md);
    border-left: 3px solid;
}

.gsc .gsc-w--stop {
    color: #ffd9e2 !important;
    background: rgba(255, 0, 68, 0.10);
    border-left-color: var(--ls-red);
}

.gsc .gsc-w--warn {
    color: #ffe9c9 !important;
    background: rgba(251, 188, 6, 0.10);
    border-left-color: var(--ls-amber);
}

.gsc .gsc-w--note {
    color: var(--ls-text-muted) !important;
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--ls-hairline-strong);
}

/* ----------------------------------------------------------------------------
   8. DIAGRAMS
   ------------------------------------------------------------------------- */

.gsc-measure,
.gsc-diagram,
.gsc-curveplot {
    display: block;
    width: 100%;
    height: auto;
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-md);
}

.gsc-measure {
    margin-bottom: var(--ls-space-4);
    color: var(--ls-text-faint);   /* arrowheads inherit this */
}

/* --- The static measuring diagram --- */

/* The truck: everything that is context rather than measurement sits back at
   ghost weight so the floor, the hinge and the strut carry the drawing. */
.gsc-t-ghost {
    fill: none;
    stroke: var(--ls-text-ghost);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gsc-t-wheel {
    fill: none;
    stroke: var(--ls-text-ghost);
    stroke-width: 2;
}

.gsc-t-ground {
    stroke: var(--ls-hairline);
    stroke-width: 1;
}

.gsc-t-frame {
    stroke: var(--ls-text-faint);
    stroke-width: 2;
    stroke-linecap: round;
}

/* The bed floor is the panel every number on the page is about, so it is the
   brightest line in the drawing. */
.gsc-t-floor {
    stroke: var(--ls-text);
    stroke-width: 4;
    stroke-linecap: round;
}

.gsc-t-floorunder {
    stroke: var(--ls-text-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* --- The scissor hinge, in side profile ---
   Line art off the real part: trussed arms bowing between two bolt plates.
   Stroked rather than filled so it stays legible at any size on black. */
.gsc-h-plate {
    fill: none;
    stroke: var(--ls-text);
    stroke-width: 2;
}

.gsc-h-arm {
    fill: none;
    stroke: var(--ls-text);
    stroke-width: 2;
    stroke-linecap: round;
}

.gsc-h-rung {
    fill: none;
    stroke: var(--ls-text-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.gsc-h-bolt {
    fill: none;
    stroke: var(--ls-text-soft);
    stroke-width: 1.5;
}

.gsc-h-pivotbolt {
    fill: var(--ls-bg);
    stroke: var(--ls-text);
    stroke-width: 2;
}

.gsc-m-note--hinge {
    fill: var(--ls-text-soft);
}

.gsc-m-strut {
    stroke: var(--ls-cyan);
    stroke-width: 4;
    stroke-linecap: round;
}

.gsc-m-pt {
    fill: var(--ls-cyan);
}

.gsc-m-pivot {
    fill: var(--ls-red);
}

.gsc-m-dim {
    stroke: var(--ls-text-faint);
    stroke-width: 1.25;
}

.gsc-m-tick {
    stroke: var(--ls-hairline);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.gsc-m-dimlbl {
    fill: var(--ls-text);
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: 19px;
    text-anchor: middle;
}

.gsc-m-note {
    fill: var(--ls-text-faint);
    font-family: var(--ls-font-body);
    font-size: 12px;
}

/* --- The live geometry drawing --- */

.gsc-panel {
    stroke: var(--ls-text);
    stroke-width: 4;
    stroke-linecap: round;
}

.gsc-strut {
    stroke: var(--ls-cyan);
    stroke-width: 4;
    stroke-linecap: round;
}

.gsc-ghost {
    opacity: 0.28;
}

.gsc-arc {
    fill: none;
    stroke: var(--ls-hairline);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.gsc-ground {
    stroke: var(--ls-hairline-faint);
    stroke-width: 1;
}

.gsc-pt   { fill: var(--ls-cyan); }
.gsc-pivot { fill: var(--ls-red); }

.gsc-lbl {
    fill: var(--ls-text-faint);
    font-family: var(--ls-font-body);
    font-size: 11px;
    letter-spacing: var(--ls-tracking-eyebrow);
}

/* --- The force curve --- */

.gsc-curve {
    fill: none;
    stroke: var(--ls-red);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.gsc-zero {
    stroke: var(--ls-hairline-strong);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.gsc-axis {
    fill: var(--ls-text-ghost);
    font-family: var(--ls-font-body);
    font-size: 10px;
    letter-spacing: var(--ls-tracking-eyebrow);
}

.gsc-axis-end { text-anchor: end; }

/* ----------------------------------------------------------------------------
   9. DISCLAIMER
   ------------------------------------------------------------------------- */

.gsc .gsc-disclaimer {
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text-faint) !important;
    margin: var(--ls-space-6) 0 0 !important;
    padding: var(--ls-space-4) var(--ls-space-5) !important;
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-md);
}

.gsc .gsc-disclaimer strong {
    color: var(--ls-text) !important;
}

/* ----------------------------------------------------------------------------
   10. MOBILE
   The two-up field rows stay two-up down to 480px — these are short numbers
   and stacking them makes the form twice as long for no gain — but the
   mounting-point rows carry longer labels, so they get more room.
   ------------------------------------------------------------------------- */

@media (max-width: 479px) {
    .gsc-row {
        grid-template-columns: 1fr;
        gap: var(--ls-space-4);
    }

    .gsc-card { padding: var(--ls-space-4); }

    .gsc-specs > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .gsc-unitbar {
        justify-content: space-between;
    }

}

/* ----------------------------------------------------------------------------
   11. TAP TARGETS
   Same rule and same breakpoint as css/mobile.css section 8: 44 CSS pixels
   minimum on touch, applied as a real min-height because each of these owns
   its own box. Left off desktop deliberately, exactly as that sheet does —
   the 40px control height there is measured against the rest of the theme.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .gsc .gsc-input {
        min-height: var(--ls-tap, 44px) !important;
        height: var(--ls-tap, 44px) !important;
    }

    .gsc-toggle button {
        min-height: var(--ls-tap, 44px);
        padding: 0 20px;
    }

    .gsc-check {
        min-height: var(--ls-tap, 44px);
    }

    .gsc-check input {
        width: 22px;
        height: 22px;
    }
}

/* ----------------------------------------------------------------------------
   12. SLIDERS
   Mounting position is the lever that actually moves the answer, so it gets a
   control you can drag. The number input above stays authoritative for anyone
   who has measured; the slider is for the "what if the bracket went here"
   pass that used to mean re-running the sums by hand.
   ------------------------------------------------------------------------- */

.gsc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    margin: var(--ls-space-2) 0 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.gsc-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--ls-surface-raised);
    border: 1px solid var(--ls-hairline-faint);
}

.gsc-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--ls-surface-raised);
    border: 1px solid var(--ls-hairline-faint);
}

.gsc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 0;
    border-radius: 50%;
    background: var(--ls-red-btn);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
    transition: transform var(--ls-transition);
}

.gsc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--ls-red-btn);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}

.gsc-slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.gsc-slider:focus { outline: 0; }
.gsc-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--ls-focus-ring); }

/* ----------------------------------------------------------------------------
   13. PLAY AND SCRUB
   ------------------------------------------------------------------------- */

.gsc-cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ls-space-3);
}

.gsc-play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    min-height: var(--ls-control-h-sm);
    padding: 0 16px;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-pill);
    background: var(--ls-surface-2);
    color: var(--ls-text);
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: var(--ls-btn-font-sm);
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ls-transition), border-color var(--ls-transition);
}

.gsc-play:hover {
    background: var(--ls-surface-raised);
    border-color: var(--ls-hairline-strong);
}

.gsc-play:focus-visible { outline: 0; box-shadow: var(--ls-focus-ring); }

/* Triangle that becomes a square while the sweep runs. */
.gsc-play__icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--ls-red);
}

.gsc-play.is-playing .gsc-play__icon {
    width: 10px;
    height: 10px;
    border: 0;
    background: var(--ls-red);
    border-radius: 1px;
}

.gsc-scrub {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    margin-top: var(--ls-space-3);
}

.gsc-scrubber {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 20px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.gsc-scrubber::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ls-surface-raised) 0%, rgba(0,222,239,0.35) 100%);
    border: 1px solid var(--ls-hairline-faint);
}

.gsc-scrubber::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--ls-surface-raised);
    border: 1px solid var(--ls-hairline-faint);
}

.gsc-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border: 0;
    border-radius: 50%;
    background: var(--ls-cyan);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}

.gsc-scrubber::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--ls-cyan);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}

.gsc-scrubber:focus { outline: 0; }
.gsc-scrubber:focus-visible::-webkit-slider-thumb { box-shadow: var(--ls-focus-ring); }

.gsc .gsc-scrub__val {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: right;
    font-family: var(--ls-font-display) !important;
    font-weight: 700;
    font-size: var(--ls-h5) !important;
    color: var(--ls-cyan) !important;
    line-height: 1 !important;
}

.gsc-atangle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ls-space-3);
    margin: var(--ls-space-4) 0 0;
    padding: var(--ls-space-4) 0 0;
    border-top: 1px solid var(--ls-hairline-faint);
}

.gsc .gsc-atangle dt {
    font-size: var(--ls-micro) !important;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint) !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
}

.gsc .gsc-atangle dd {
    font-family: var(--ls-font-display) !important;
    font-weight: 700;
    font-size: var(--ls-h5) !important;
    color: var(--ls-text) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

/* Marker tying the force curve to the angle the drawing is showing. */
.gsc-at {
    stroke: var(--ls-cyan);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    opacity: 0.8;
}

/* ----------------------------------------------------------------------------
   14. COPY BUTTON
   ------------------------------------------------------------------------- */

.gsc-copy {
    display: block;
    width: 100%;
    min-height: var(--ls-control-h-sm);
    margin: var(--ls-space-4) 0 0;
    padding: 0 16px;
    border: 1px dashed var(--ls-hairline-strong);
    border-radius: var(--ls-radius-md);
    background: transparent;
    color: var(--ls-text-muted);
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    cursor: pointer;
    transition: color var(--ls-transition), border-color var(--ls-transition), background var(--ls-transition);
}

.gsc-copy:hover {
    color: var(--ls-text);
    border-color: var(--ls-text-soft);
    background: rgba(255, 255, 255, 0.03);
}

.gsc-copy.is-done {
    color: var(--ls-green) !important;
    border-color: var(--ls-green);
    border-style: solid;
}

.gsc-copy:focus-visible { outline: 0; box-shadow: var(--ls-focus-ring); }

/* ----------------------------------------------------------------------------
   15. "WILL OUR LIFTS DO IT"
   The one block on the page that answers a question about OUR product rather
   than about gas springs in general, so it is styled as its own panel inside
   the result card and takes the verdict colour.
   ------------------------------------------------------------------------- */

.gsc-lift {
    margin: var(--ls-space-5) 0 0;
    padding: var(--ls-space-4) var(--ls-space-4) var(--ls-space-4) calc(var(--ls-space-4) - 3px);
    border: 1px solid var(--ls-hairline-faint);
    border-left: 3px solid var(--ls-hairline-strong);
    border-radius: var(--ls-radius-md);
    background: rgba(255, 255, 255, 0.03);
}

.gsc-lift.is-yes {
    border-left-color: var(--ls-green);
    background: rgba(5, 157, 88, 0.09);
}

.gsc-lift.is-no {
    border-left-color: var(--ls-red);
    background: rgba(255, 0, 68, 0.08);
}

.gsc-lift__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    margin-bottom: var(--ls-space-2);
}

.gsc .gsc-lift__title {
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: var(--ls-h5);
    line-height: 1.2;
    color: var(--ls-text);
}

.gsc .gsc-lift__pill {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: var(--ls-radius-pill);
    background: var(--ls-surface-raised);
    color: var(--ls-text-soft);
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

.gsc-lift.is-yes .gsc-lift__pill { background: var(--ls-green-btn); color: #fff; }
.gsc-lift.is-no  .gsc-lift__pill { background: var(--ls-red-btn);   color: #fff; }

.gsc .gsc-lift__say {
    font-size: var(--ls-small) !important;
    line-height: var(--ls-leading-body) !important;
    color: var(--ls-text) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gsc .gsc-lift__checks {
    list-style: none !important;
    margin: var(--ls-space-3) 0 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 6px;
}

.gsc .gsc-lift__check {
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 22px !important;
    font-size: var(--ls-small) !important;
    line-height: 1.45 !important;
    color: var(--ls-text-muted) !important;
}

/* Tick and cross drawn rather than iconed, so nothing extra has to load. */
.gsc .gsc-lift__check::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.gsc .gsc-lift__check.is-ok::before  { content: "\2713"; color: var(--ls-green); }
.gsc .gsc-lift__check.is-bad::before { content: "\2717"; color: var(--ls-red); }

.gsc-lift__cta {
    margin-top: var(--ls-space-4);
}

.gsc .gsc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ls-space-2);
    flex-wrap: wrap;
    min-height: var(--ls-btn-h);
    padding: 0 var(--ls-btn-pad-x);
    border-radius: var(--ls-btn-radius);
    background: var(--ls-red-btn);
    color: #fff !important;
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: var(--ls-btn-font);
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    transition: background var(--ls-transition);
}

.gsc .gsc-btn:hover { background: var(--ls-red-btn-hover); color: #fff !important; }
.gsc .gsc-btn:focus-visible { outline: 0; box-shadow: var(--ls-focus-ring); }

.gsc .gsc-btn em {
    font-family: var(--ls-font-body);
    font-style: normal;
    font-weight: 400;
    font-size: var(--ls-small);
    letter-spacing: normal;
    text-transform: none;
    opacity: 0.9;
}

.gsc .gsc-btn em .amount,
.gsc .gsc-btn em bdi { color: #fff !important; }

/* The CTA only earns its place when the answer is yes. */
.gsc-lift:not(.is-yes) .gsc-lift__cta { display: none; }

.gsc .gsc-lift__foot {
    font-size: var(--ls-micro) !important;
    line-height: 1.5 !important;
    color: var(--ls-text-faint) !important;
    margin: var(--ls-space-3) 0 0 !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------------------------
   16. PRODUCT STRIP
   ------------------------------------------------------------------------- */

.gsc-prods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ls-space-3);
}

.gsc .gsc-prod {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-2);
    padding: var(--ls-space-3);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-md);
    background: var(--ls-surface-2);
    color: var(--ls-text) !important;
    text-decoration: none !important;
    transition: border-color var(--ls-transition), transform var(--ls-transition), background var(--ls-transition);
}

.gsc .gsc-prod:hover {
    border-color: var(--ls-red);
    background: var(--ls-surface-raised);
    transform: translateY(-2px);
    color: var(--ls-text) !important;
}

.gsc-prod__img {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--ls-radius-sm);
    overflow: hidden;
    background: var(--ls-surface-1);
}

.gsc .gsc-prod__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gsc-prod__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gsc .gsc-prod__name {
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ls-text);
}

.gsc .gsc-prod__price {
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: var(--ls-h5);
    line-height: 1.2;
    color: var(--ls-text);
}

.gsc .gsc-prod__price .amount,
.gsc .gsc-prod__price bdi,
.gsc .gsc-prod__price del,
.gsc .gsc-prod__price ins {
    color: var(--ls-text) !important;
    background: none;
    text-decoration: none;
}

.gsc .gsc-prod__price del { opacity: 0.45; }

/* ----------------------------------------------------------------------------
   17. TAP TARGETS FOR THE NEW CONTROLS
   Same 44px rule and breakpoint as section 11.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .gsc-play,
    .gsc-copy {
        min-height: var(--ls-tap, 44px);
    }

    .gsc-slider,
    .gsc-scrubber {
        height: var(--ls-tap, 44px);
    }

    .gsc-slider::-webkit-slider-thumb { margin-top: -6px; }
    .gsc-scrubber::-webkit-slider-thumb { margin-top: -7px; }

    .gsc-cardhead {
        flex-direction: column;
        align-items: stretch;
    }

    .gsc-play { justify-content: center; }

    .gsc-atangle {
        grid-template-columns: 1fr;
        gap: var(--ls-space-3);
    }
}

/* ----------------------------------------------------------------------------
   18. LIVE DRAWING: FLOOR AND FRAME
   The scale drawing borrows the vocabulary of the measuring illustration —
   a floor with an underside, a frame rail with two edges — so the two read as
   the same truck. Geometry is untouched; only the rendering changed.
   ------------------------------------------------------------------------- */

.gsc-panelunder {
    stroke: var(--ls-text-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.gsc-frame {
    stroke: var(--ls-text-faint);
    stroke-width: 1.5;
}

/* Leader line from the callout to the hinge. */
.gsc-m-leader {
    fill: none;
    stroke: var(--ls-text-ghost);
    stroke-width: 1;
}

/* ----------------------------------------------------------------------------
   19. FIELD ALIGNMENT ACROSS A MIXED ROW
   A field with a slider carries 26px of extra furniture under its input (18px
   track + 8px margin). Its neighbour without one therefore floated its input
   26px lower and the two inputs in the row no longer lined up. Reserve the
   same space in the plain field so every input in a row sits on one line.
   Keyed with :has() so it only applies in rows that actually mix the two.
   ------------------------------------------------------------------------- */

.gsc-row:has(.gsc-field--slider) .gsc-field:not(.gsc-field--slider) {
    padding-bottom: 26px;
}

/* The spacer is empty furniture and must not take the reservation too. */
.gsc-row:has(.gsc-field--slider) .gsc-field--spacer {
    padding-bottom: 0;
}

/* Product names run to different line counts, which left the three prices
   floating at three different heights. Push each price to the bottom of its
   card so they line up along one edge. */
.gsc .gsc-prod__body {
    flex: 1 1 auto;
}

.gsc .gsc-prod__price {
    margin-top: auto;
    padding-top: var(--ls-space-2);
}

/* ----------------------------------------------------------------------------
   20. DRAWING TYPE ON SMALL SCREENS
   The drawings scale to the column, so at 375px the measuring illustration
   renders at 0.57 of its authored size and its 12px notes came out at under
   7 device pixels — present but unreadable. Type inside an SVG scales with the
   viewBox, so the fix is to author it larger at this breakpoint rather than to
   touch the geometry.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .gsc-m-note   { font-size: 20px; }
    .gsc-m-dimlbl { font-size: 26px; }
    .gsc-lbl      { font-size: 18px; }
    .gsc-axis     { font-size: 16px; }
}