/**
 * Concrete Calculator — scoped styles.
 * Mobile-first: targets one-screen fit on 375 px viewport.
 * Reuses ci-form, ci-insights, result-block, result-primary,
 * result-row from main.css — never redefines them.
 */

/* ── Mode tabs ────────────────────────────────────────────────────────────── */
.cc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cc-tabs::-webkit-scrollbar { display: none; }

.cc-tab {
    flex: 1;                                /* fill available width equally */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-2);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    /* Minimum 44 px touch target height */
    min-height: 44px;
}
.cc-tab:hover { color: var(--color-text-1); }
.cc-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ── Dimension panels ─────────────────────────────────────────────────────── */

/* 3-field panel (slab / column): 3 columns side-by-side on all widths */
.cc-panel--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--space-2);
}

/* 2-field panel (cylinder): 2 columns side-by-side on all widths */
.cc-panel--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-2);
}

/* Tighter form-group spacing inside panels */
.cc-panel .form-group {
    margin-bottom: var(--space-3);
}

/* Compact label — slightly smaller than default inside panels */
.cc-panel .form-label {
    font-size: var(--text-xs);
}

/* ── Shared row: quantity + waste pills ───────────────────────────────────── */
.cc-shared-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

/* Quantity: fixed narrow width so waste pills get the rest */
.cc-qty-group {
    flex: 0 0 72px;
    margin-bottom: 0;
}

.cc-waste-group {
    flex: 1;
    margin-bottom: 0;
}

/* Waste pill radio group */
.cc-waste-options {
    display: flex;
    gap: var(--space-2);
    flex-wrap: nowrap;    /* pills stay in one row */
}

/* Pure-pill radio: hide the native radio input, style the label */
.cc-waste-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-2);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast),
                background var(--transition-fast);
    user-select: none;
    /* Minimum 44 px touch target height */
    min-height: 36px;
    white-space: nowrap;
}

/* Hide native radio visually but keep it accessible */
.cc-waste-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cc-waste-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-text-1);
}

.cc-waste-pill:has(input:checked) {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-dim);
}

/* ── Result block overrides — tighter for mobile ──────────────────────────── */
.cc-result-block {
    min-height: 80px;        /* override main.css 120 px to save space */
    margin-top: var(--space-3);
    padding: var(--space-4);
}

/* ── Result header: primary value + share in one row ─────────────────────── */
.cc-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Compact primary result — remove tall top/bottom padding from main.css */
.cc-result-primary {
    padding: 0;
    margin-bottom: 0;
    text-align: left;       /* left-align on mobile for compactness */
}

/* Liters shown inline below the m³ value — smaller, subdued */
.cc-liters-sub {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    font-variant-numeric: tabular-nums;
    margin-top: var(--space-1);
}

/* Share button aligned top-right */
.cc-share-btn {
    flex-shrink: 0;
    margin-top: var(--space-1);
}

/* Tighter stats section */
.cc-stats {
    margin-bottom: var(--space-2);
}

/* ── Insights collapsible ─────────────────────────────────────────────────── */
.cc-insights-wrap {
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.cc-insights-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--transition-fast);
}
.cc-insights-toggle::-webkit-details-marker { display: none; }
.cc-insights-toggle::before {
    content: '▸';
    font-size: var(--text-xs);
    transition: transform var(--transition-fast);
    color: var(--color-text-3);
}
.cc-insights-wrap[open] .cc-insights-toggle::before {
    transform: rotate(90deg);
}
.cc-insights-toggle:hover {
    color: var(--color-text-2);
}

/* Slightly reduced spacing on insights inside the collapsed section */
.cc-insights-wrap .ci-insights {
    margin-top: var(--space-2);
}

/* ── Field validation ─────────────────────────────────────────────────────── */
.form-input[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error);
}

/* ── Responsive — loosen layout on wider screens ─────────────────────────── */
@media (min-width: 480px) {
    .cc-shared-row {
        gap: var(--space-4);
    }
    .cc-result-primary {
        text-align: center;
    }
    .cc-panel--3col,
    .cc-panel--2col {
        gap: 0 var(--space-4);
    }
    .cc-tabs {
        margin-bottom: var(--space-4);
    }
    .cc-result-block {
        padding: var(--space-5);
    }
}