/* Site planner — layout tweaks on top of hydrocad-v2.css */

#areaMixCanvas {
    touch-action: none;
    display: block;
    width: 100%;
    cursor: default;
}

.site-planner-tc-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.65rem;
    line-height: 1.4;
}

.site-planner-storm-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: -0.35rem;
    line-height: 1.35;
}

.site-planner-purple-row {
    margin-top: 0.75rem;
    align-items: flex-start;
}

.purple-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.35;
    cursor: pointer;
    color: var(--text-main);
}

.purple-toggle-label input {
    margin-top: 0.2rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* Surface row “cards” — tints match chart / infographic colors in site-planner.js (SURFACES) */
.site-planner-surface-row {
    margin-bottom: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid transparent;
}

/* Prefer one line for labels: more width for text, compact CN column; (sq ft) uses nbsp in HTML */
.site-planner-surface-row.combo {
    flex-wrap: nowrap;
    gap: 12px;
}

.site-planner-surface-row .col:first-child {
    flex: 1 1 0%;
    min-width: min(100%, 13.5rem);
}

.site-planner-surface-row .col.mini {
    flex: 0 0 4.5rem;
    padding-left: 12px;
}

.site-planner-surface-row .col:not(.mini) > label {
    line-height: 1.3;
}

/* Hardscape #64748b */
.site-planner-surface-row--hardscape {
    background: rgba(100, 116, 139, 0.16);
    border-color: rgba(100, 116, 139, 0.32);
}

/* Landscape #16a34a */
.site-planner-surface-row--landscape {
    background: rgba(22, 163, 74, 0.14);
    border-color: rgba(22, 163, 74, 0.3);
}

/* Untreated roof #78716c */
.site-planner-surface-row--roof-un {
    background: rgba(120, 113, 108, 0.16);
    border-color: rgba(120, 113, 108, 0.32);
}

/* Treated roof #7e22ce */
.site-planner-surface-row--roof-treated {
    background: rgba(126, 34, 206, 0.12);
    border-color: rgba(126, 34, 206, 0.28);
}

body.dark-theme .site-planner-surface-row--hardscape {
    background: rgba(100, 116, 139, 0.22);
    border-color: rgba(100, 116, 139, 0.42);
}

body.dark-theme .site-planner-surface-row--landscape {
    background: rgba(22, 163, 74, 0.18);
    border-color: rgba(22, 163, 74, 0.38);
}

body.dark-theme .site-planner-surface-row--roof-un {
    background: rgba(120, 113, 108, 0.22);
    border-color: rgba(120, 113, 108, 0.42);
}

body.dark-theme .site-planner-surface-row--roof-treated {
    background: rgba(126, 34, 206, 0.18);
    border-color: rgba(126, 34, 206, 0.4);
}

.site-planner-surface-row .col.mini input[type="number"] {
    max-width: 100%;
}

/* Compact surface mix — leave vertical space for the hydrograph */
.site-planner-infographic-card.profile-strip {
    padding: 8px 12px 10px;
}

.site-planner-infographic-card .profile-strip-title {
    margin-bottom: 4px;
    padding-bottom: 6px;
}

.site-planner-infographic-card .profile-container.site-planner-infographic-wrap {
    flex: 0 0 auto;
    min-height: 0;
    height: 94px;
    max-height: 100px;
}

.site-planner-graph-container {
    /* Height comes from hydrocad-v2 .graph-container clamp; keep site planner from forcing a taller chart. */
    min-height: 0;
}

.site-planner-results .result-stat-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* [hidden] must win over .results-bar { display: flex } from hydrocad-v2.css */
.site-planner-results[hidden] {
    display: none !important;
}

.site-planner-viz-header .site-planner-chart-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 0.7rem;
}

.site-planner-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.site-planner-toggle input {
    cursor: pointer;
}

.site-planner-results-compare {
    flex-wrap: nowrap;
}

@media (max-width: 1200px) {
    .site-planner-results,
    .site-planner-results-compare {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;
    }

    .site-planner-results .result-stat {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .site-planner-results .result-stat-sub {
        white-space: nowrap;
    }
}

/*
 * Mobile header (this file loads only on site-planner.html).
 * Logo container uses flex-shrink:0 in hydrocad-v2.css — allow shrink so title + menu btn fit.
 */
@media (max-width: 1200px) {
    .app-header .logo-container {
        flex-shrink: 1;
        min-width: 0;
        align-items: flex-start;
    }

    .app-header .logo-text-wrapper {
        min-width: 0;
    }

    .app-header .logo-text {
        font-size: 1.05rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .app-header .subtext {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }

    .app-header .logo-icon {
        font-size: 1.5rem;
        line-height: 1;
        flex-shrink: 0;
    }

    .site-planner-viz-header {
        align-items: flex-start;
        gap: 0.65rem;
    }

    .site-planner-viz-header .site-planner-chart-toggles {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        gap: 0.45rem 0.65rem;
    }

    .site-planner-toggle {
        white-space: normal;
        font-size: 0.78rem;
        line-height: 1.25;
    }
}

@media (max-width: 1024px) {
    .site-planner-viz-header .controls-drawer-toggle {
        margin-left: 0;
    }

    .controls-panel .panel-header {
        align-items: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .controls-panel .status-indicator {
        order: 3;
    }

    .controls-panel .controls-drawer-close {
        margin-left: auto;
        width: 34px;
        height: 34px;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .site-planner-results,
    .site-planner-results-compare {
        gap: 10px;
    }

    .site-planner-results .result-stat {
        font-size: 0.78rem;
    }
}

@media (max-width: 380px) {
    .app-header .subtext {
        -webkit-line-clamp: 3;
        font-size: 0.6rem;
    }
}