/* Camber Shim Calculator — Rush Auto Works */
/* Reuses site .container, font vars, and color tokens */

.csc-wrap {
    padding: 3rem 0;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-primary, #e0e0e0);
}

/* Cards */
.csc-card {
    background: var(--bg-secondary, #0a2a52);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.25rem;
}

.csc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.csc-card-header .csc-card-title {
    margin-bottom: 0;
}

.csc-reset-link {
    background: none;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
    padding: 0;
}

.csc-reset-link:hover {
    color: var(--raw-cyan, #47C7FC);
}

.csc-card-title {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-bottom: 1rem;
}

/* Calibration grid */
.csc-cal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.csc-cal-note {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    line-height: 1.5;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 128, 0, 0.04);
    border-radius: 4px;
    border-left: 3px solid var(--raw-orange, #FF8000);
    margin-top: 4px;
}

/* Labels & inputs */
.csc-lbl {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-bottom: 5px;
}

.csc-wrap input[type="number"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary, #e0e0e0);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s;
}

.csc-wrap input[type="number"]:focus {
    border-color: var(--raw-orange, #FF8000);
}

.csc-sub-note {
    font-size: 0.85rem;
    color: rgba(255, 200, 0, 0.7);
    margin-top: 4px;
    font-style: italic;
}

.csc-limit-tag {
    font-size: 0.85rem;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 200, 0, 0.85);
    margin-top: 4px;
    display: block;
}

.csc-fld + .csc-fld { margin-top: 12px; }

/* Axle labels */
.csc-axle-label {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    text-align: center;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 14px 0 6px;
}

/* Corner grid */
.csc-corner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 14px 0;
}

.csc-corner-label {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.csc-pos-tag {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}

.csc-tag-f { background: rgba(255, 128, 0, 0.1); color: var(--raw-orange, #FF8000); border: 1px solid rgba(255, 128, 0, 0.25); }
.csc-tag-r { background: rgba(71, 199, 252, 0.08); color: var(--raw-cyan, #47C7FC); border: 1px solid rgba(71, 199, 252, 0.2); }

/* Shim inputs */
.csc-shim-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.csc-shim-lbl {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-bottom: 5px;
    gap: 4px;
}

.csc-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.csc-dot-s { background: #5b9bd5; }
.csc-dot-m { background: #e8a020; }
.csc-dot-l { background: #d44030; }

.csc-installed-mm {
    font-size: 0.85rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    margin-top: 6px;
    text-align: center;
}

/* Calculate button */
.csc-btn {
    width: 100%;
    background: var(--raw-orange, #FF8000);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 13px;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 4px;
}

.csc-btn:hover { opacity: 0.85; }

/* Results */
.csc-result-card {
    background: var(--bg-secondary, #0a2a52);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 14px;
}

.csc-res-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Result cards — two-column: shims left, info right */
.csc-rc {
    background: var(--bg-secondary, #0a2a52);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 16px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
}

.csc-rc-change { border-color: var(--raw-orange, #FF8000); }
.csc-rc-ok { border-color: #2ecc71; }

/* Left column: shim stack */
.csc-rc-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.csc-rc-shim-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.csc-rc-shims {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

/* Right column: info */
.csc-rc-right { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.csc-rc-lbl {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 2px;
}

.csc-rc-camber {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 900;
    font-size: 2.4rem;
    line-height: 1;
    color: #2ecc71;
}

.csc-rc-meta {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    color: var(--text-primary, #e0e0e0);
    line-height: 1.6;
}

.csc-rc-dim { color: rgba(255, 255, 255, 0.4); }

.csc-rc-bolt {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
}
.csc-bolt-ok { color: #2ecc71; }
.csc-bolt-warn { color: rgba(255, 200, 0, 0.85); }

.csc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 4px;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 80px;
}

.csc-chip-l { background: rgba(212, 64, 48, 0.22); color: #f07060; border: 1px solid rgba(212, 64, 48, 0.4); }
.csc-chip-m { background: rgba(232, 160, 32, 0.18); color: #f0b840; border: 1px solid rgba(232, 160, 32, 0.38); }
.csc-chip-s { background: rgba(91, 155, 213, 0.18); color: #80b8f0; border: 1px solid rgba(91, 155, 213, 0.38); }
.csc-chip-0 { color: var(--text-primary, #e0e0e0); font-size: 0.9rem; font-weight: 500; }

.csc-rc-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}

.csc-badge-chg { background: rgba(255, 128, 0, 0.2); color: #ff7060; }
.csc-badge-ok { background: rgba(46, 204, 113, 0.14); color: #2ecc71; }

.csc-rc-margin { font-size: 0.85rem; color: var(--text-primary, #e0e0e0); margin-top: 2px; }
.csc-rc-margin span { font-weight: 700; }
.csc-mg-tight { color: rgba(255, 200, 0, 0.85); }
.csc-mg-good { color: #2ecc71; }
.csc-mg-wide { color: rgba(255, 255, 255, 0.5); }

.csc-err { color: var(--raw-orange, #FF8000); font-size: 0.85rem; margin-top: 6px; }

.csc-rc-clamped {
    font-size: 0.85rem;
    color: rgba(255, 200, 0, 0.85);
    margin-top: 3px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .csc-cal-grid { grid-template-columns: 1fr 1fr; }
    .csc-corner-grid { grid-template-columns: 1fr; }
    .csc-res-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .csc-cal-grid { grid-template-columns: 1fr; }
}