:root {
    --color-hot: #c62828;
    --color-cold: #1565c0;
    --color-hot-bg: rgba(229, 57, 53, 0.12);
    --color-cold-bg: rgba(30, 136, 229, 0.12);
    --color-hot-border: rgba(229, 57, 53, 0.3);
    --color-cold-border: rgba(30, 136, 229, 0.3);
    --breadcrumb-color: #495866;
    --psychro-color-leaving: #00796b;
    --result-card-text: #fff;
}

/* Mobile list version of the weather-station results. Hidden by default;
   mobile.css swaps which view is visible. */
.station-results-list {
    display: none;
}

/* === Sidebar footer rows ===
   Used by SidebarNav (desktop) and the MobileHomePage nav (which replicates
   the sidebar as the mobile home screen). */
.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    gap: 8px;
}

.sidebar-link-primary,
.sidebar-link-secondary,
.sidebar-link-tertiary {
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.03em;
}

.sidebar-link-primary,
.sidebar-link-secondary {
    color: #fff !important;
}

.sidebar-link-primary .mud-icon-root,
.sidebar-link-secondary .mud-icon-root {
    color: #fff !important;
}

.sidebar-link-primary {
    background: color-mix(in srgb, var(--mud-palette-primary) 90%, white);
}

.sidebar-link-secondary {
    background: color-mix(in srgb, var(--mud-palette-secondary) 90%, white);
}

.sidebar-link-tertiary {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 90%, white);
    justify-content: space-evenly;
    padding: 0 !important;
    gap: 0;
}

.sidebar-link-tertiary .mud-icon-button {
    color: #495866 !important;
    padding: 0 !important;
}

.sidebar-footer-copyright {
    min-height: 40px;
}

.sidebar-weather-station {
    background: transparent;
    border: none;
    color: var(--mud-palette-text-secondary);
    text-align: left;
    width: 100%;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.sidebar-weather-station:hover {
    background: color-mix(in srgb, var(--mud-palette-action-default) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.sidebar-weather-station .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.sidebar-weather-station:hover .mud-icon-root {
    color: var(--mud-palette-primary);
}

.sidebar-weather-station--set {
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    min-height: 52px;
    align-items: stretch;
}

/* Unset state: draw attention so users know to set their location.
   Both the row background and the icon pulse in sync. */
.sidebar-weather-station--unset {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    border-bottom: none;
    animation: sidebar-weather-station-bg-pulse 3s ease-in-out infinite;
}

.sidebar-weather-station--unset:hover {
    color: var(--mud-palette-text-primary);
    animation-play-state: paused;
    background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
}

.sidebar-weather-station--unset .mud-icon-root {
    color: var(--mud-palette-info);
    animation: sidebar-weather-station-icon-pulse 3s ease-in-out infinite;
}

.sidebar-weather-station--unset:hover .mud-icon-root {
    color: var(--mud-palette-info);
    animation-play-state: paused;
}

@keyframes sidebar-weather-station-bg-pulse {
    0%, 100% { background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent); }
    50%      { background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent); }
}

@keyframes sidebar-weather-station-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-weather-station--unset,
    .sidebar-weather-station--unset .mud-icon-root {
        animation: none;
    }
    .sidebar-weather-station--unset {
        background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    }
}

.sidebar-weather-station-main {
    background: transparent;
    border: none;
    color: inherit;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px 6px 16px;
    text-align: left;
}

.sidebar-weather-station-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
}

.sidebar-weather-station-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

.sidebar-weather-station-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.sidebar-weather-station-edit {
    background: transparent;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
}

.sidebar-weather-station-edit:hover {
    color: var(--mud-palette-primary);
}

/* === Page Header (used by PageHeader.razor) === */
.page-header {
    flex-wrap: nowrap !important;
    background: var(--mud-palette-secondary);
    color: #fff;
}

.page-header h1 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
    color: #fff;
}

.page-header h1:focus-visible {
    outline: none;
}

.page-header-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.page-header-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.85);
}

/* === Card Grids (Home + Category Pages) === */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
    padding: 16px;
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
}

.card-link > .mud-card {
    flex: 1;
    transition: box-shadow 0.2s ease;
}

.card-grid-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.card-grid-text {
    flex: 1;
}

.card-link:hover > .mud-card {
    box-shadow: var(--card-hover-shadow);
    background-color: var(--card-hover-bg);
}

/* === Tool Page === */

.tool-detail-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.tool-detail-row .detail-icon {
    color: var(--mud-palette-info);
    margin-top: 2px;
    flex-shrink: 0;
}

.tool-detail-row .detail-label {
    display: block;
}

.tool-detail-row .detail-value {
    display: block;
    font-size: 14px;
    padding-right: 16px;
    color: var(--mud-palette-text-primary);
}

.variables-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin-top: 4px;
    padding-left: 16px;
    align-items: baseline;
}

.variable-name {
}

.meta-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
}
.meta-label--bold {
    font-weight: 600;
}

.variable-def {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.calculator-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.calculator-results-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    min-width: var(--results-panel-min-width, 255px);
    align-items: stretch;
    align-content: stretch;
    flex: 1;
    align-self: stretch;
}

.calculator-results-panel--stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Calculator === */
.calculator-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 0 50%;
    min-width: 0;
}

.calculator-form-paired {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 12px;
}

.calculator-form-paired > * {
    flex: 1 1 calc(50% - 6px);
    min-width: 300px;
}

.section-label {
    margin: 4px 0 -16px 0;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 6px;
}

.section-label:first-child {
    margin-top: 0;
}

.field-hint-row {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    padding-left: 14px;
}

/* === Result Display === */
.result-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
    background: var(--mud-palette-background);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-info);
    text-align: center;
    flex: 1 1 calc(50% - 8px);
    min-width: 150px;
}

.result-label {
}

.result-value {
    font-size: 24px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.result-display.highlight .result-value {
    color: var(--mud-palette-primary);
}

.results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* === Explain Tooltip Icon === */
.explain-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 4px;
    cursor: help;
    color: var(--mud-palette-text-secondary);
    vertical-align: middle;
}

/* === Elevation Lookup Adornment === */
.elevation-lookup-field .mud-input-adornment-end {
    cursor: pointer;
}

/* === Utility Classes === */

/* 1. Card with info border */
.info-card { border: 1px solid var(--mud-palette-info); }

/* 2. Card icon (primary color, 2.5rem) */
.card-icon { color: var(--mud-palette-primary); font-size: 2.75rem !important; }

/* 3. Card title */
.card-title { font-weight: 500 !important; line-height: 1.3 !important; align-self: baseline !important; margin-bottom: 4px !important; }

/* 4. Muted text */
.text-muted { opacity: 0.6; }

/* 5. External link indicator */
.text-faint { opacity: 0.3; }

/* 10. Close button positioning */
.close-btn-float { position: absolute !important; top: 8px; right: 8px; opacity: 0.5; }

/* 11. Card content relative */
.card-content-relative { position: relative !important; }

/* 12. Show details button */
.btn-show-details { text-transform: none !important; opacity: 0.6; margin-top: 8px !important; }

/* 13. No padding card content */
.card-content-flush { padding: 0 !important; }

/* 14. Dialog icon vertical align */
.icon-valign { vertical-align: middle; }

/* === Cooling Load Calculator === */
.cooling-load-layout .calculator-form-paired > * {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 200px;
}

.cooling-load-layout .section-label--spaced,
.psych-chart-results .section-label--spaced {
    margin-top: 40px !important;
}

.cooling-load-layout .calculator-results-panel .psych-results-placeholder,
.psych-chart-results .calculator-results-panel .psych-results-placeholder {
    flex-basis: 100%;
}

.cooling-load-layout .calculator-results-panel,
.psych-chart-results .calculator-results-panel {
    align-items: flex-start;
    align-content: flex-start;
}

.cooling-load-layout .calculator-results-panel .section-label,
.psych-chart-results .calculator-results-panel .section-label {
    flex-basis: 100%;
    margin: 0;
}

.psych-chart-results-card {
    border: 1px solid var(--mud-palette-info);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.psych-chart-results-card > .mud-card-content {
    flex: 1;
}

.psych-chip-edit-dialog .mud-dialog-content {
    padding: 8px !important;
}

/* === Psychrometric Chart Layout === */
.psychro-hover-tooltip {
    position: absolute;
    background: var(--mud-palette-info);
    color: var(--result-card-text);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    pointer-events: none;
    display: flex;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.psychro-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.psychro-chart {
    width: 100%;
    min-width: 0;
}

.psychrometric-chart-svg {
    width: 100%;
    display: block;
    cursor: crosshair;
    border: 1px solid var(--mud-palette-info);
    border-radius: 4px;
}

/* === Airflow Comparison calculator layout === */

.airflow-comparison-layout .calculator-results-panel {
    min-width: 500px;
}

.airflow-comparison-layout .comparison-note,
.airflow-comparison-layout .sweep-caption,
.airflow-comparison-layout .empty-state {
    margin: 0.5rem 0;
}

.airflow-comparison-layout .sweep-block {
    margin-top: 1rem;
}

@media (max-width: 1500px) {
    .calculator-layout.airflow-comparison-layout {
        flex-direction: column;
    }
    .calculator-layout.airflow-comparison-layout > .mud-divider {
        display: none;
    }
    /* Once stacked, both panes should span the full container width instead of
       keeping their side-by-side column widths. */
    .airflow-comparison-layout .calculator-form,
    .airflow-comparison-layout .calculator-results-panel {
        min-width: 0;
        max-width: 100%;
        flex-basis: auto;
        width: 100%;
    }
}

.cooling-condition-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin: 4px 0 -16px 0;
    padding-bottom: 4px;
}

.cooling-condition-section-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    flex: 1 1 auto;
    min-width: 0;
}

/* Soft discharge warning rendered between the Dry Bulb and Known Property fields. */
.cooling-condition-warning {
    display: block;
    margin: 4px 0 -8px 0;
    line-height: 1.3;
}

.psychro-sidebar {
    width: 100%;
}

/* 6. Psychrometric result chip */
.psychro-result-chip { background: var(--mud-palette-info) !important; color: var(--result-card-text) !important; padding: 4px 10px; border-radius: 4px; }
.psychro-result-chip--selectable { cursor: pointer; }
.psychro-result-chip--selectable:hover { filter: brightness(1.1); }

/* 11. Process line section labels */
.psychro-process-label { display: block; }
.psychro-process-label--leaving { color: var(--psychro-color-leaving); }
.psychro-process-header { display: flex; justify-content: space-between; align-items: center; }

/* 7. Psychrometric result caption */
.psychro-result-caption { opacity: 0.85; }

/* 8. Psychrometric result value */
.psychro-result-value { font-weight: 600; }

/* 9. Result unit span */
.psychro-result-unit { font-size: 0.65em; font-weight: 400; opacity: 0.85; }

/* === Detail tables === */
.table-wrapper {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow-x: auto;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 13px;
}

.detail-table th,
.detail-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid var(--mud-palette-divider);
}

.detail-table thead th {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.detail-table tbody td {
    color: var(--mud-palette-text-primary);
}

.detail-table .row-label {
    text-align: center;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.monthly-table td,
.monthly-table th {
    min-width: 52px;
}

/* === Weather Station === */
.search-container {
    max-width: 900px;
}

.detail-container {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.detail-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-section-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.detail-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.data-groups {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.data-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
}

.data-card {
    display: flex;
    flex-direction: column;
}

.data-card .data-label {
}

.data-card .data-value {
    font-size: 20px;
    font-weight: 500;
    margin: 2px 0;
    color: var(--mud-palette-text-primary);
}

.data-card .data-sublabel {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
}

.data-card.accent-hot .data-value {
    color: var(--color-hot);
}

.data-card.accent-cold .data-value {
    color: var(--color-cold);
}

.col-hot {
    background-color: var(--color-hot-bg);
}

.col-cold {
    background-color: var(--color-cold-bg);
}

thead .col-hot {
    color: var(--color-hot);
    font-weight: 600;
}

thead .col-cold {
    color: var(--color-cold);
    font-weight: 600;
}

/* Legend */
.table-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-hot .legend-swatch {
    background-color: var(--color-hot-bg);
    border: 1px solid var(--color-hot-border);
}

.legend-cold .legend-swatch {
    background-color: var(--color-cold-bg);
    border: 1px solid var(--color-cold-border);
}

/* === Calculator layout divider === */
.calculator-layout > .mud-divider-vertical {
    border-color: var(--mud-palette-info) !important;
}

/* === Responsive === */
@media (min-width: 1600px) {
    .psychro-layout {
        flex-direction: row;
        gap: 24px;
    }

    .psychro-chart {
        flex: 3;
        min-width: 0;
    }

    .psychro-sidebar {
        flex: 1;
    }

    .psychro-sidebar .psychro-results > .mud-paper {
        width: 100%;
    }
}

@media (min-width: 1920px) {
    .psychro-sidebar .psychro-results > .mud-paper {
        width: calc(50% - 6px);
    }
}

@media (min-width: 2560px) {
    .psychro-sidebar .psychro-results > .mud-paper {
        width: calc(33.33% - 8px);
    }
}

@media (max-width: 960px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .calculator-layout {
        flex-direction: column;
    }
    .calculator-layout > .mud-divider-vertical {
        display: none;
    }
    .calculator-form {
        max-width: 100%;
        flex-basis: auto;
        width: 100%;
    }
    .calculator-results-panel {
        width: 100%;
        position: static;
    }
}

@media (max-width: 600px) {
    .result-display {
        width: 100%;
        min-width: unset;
    }
    .results {
        grid-template-columns: 1fr;
    }
}

/* === Expandable Section ===
   Animates open/close of info cards and their "Show..." button rows.
   Pair two siblings with opposite data-show values to cross-fade. */
.expandable-section {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    /* No transition by default — only active under body[data-ui-ready]. */
}

.expandable-section[data-show="true"] {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

/* === Required Airflow Calculator — RTU/Paragon output sheet ===
   Ported from the Load Calculator's rtu-comparison component. Kept global (this app
   does not bundle component-scoped .razor.css) and namespaced under .rtu-comparison. */

.rtu-comparison {
    display: block;
}

/* Tables */
.rtu-comparison .rtu-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

.rtu-comparison .rtu-table th,
.rtu-comparison .rtu-table td {
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-divider);
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--mud-palette-text-primary);
}

.rtu-comparison .rtu-table th {
    font-weight: 500;
    background-color: var(--mud-palette-background-grey);
}

.rtu-comparison .rtu-table .name-cell {
    text-align: left;
}

.rtu-comparison .rtu-table .unit-label {
    font-size: 0.8em;
    color: var(--mud-palette-text-secondary);
}

.rtu-comparison .overage-pct {
    font-size: 0.8em;
    color: var(--mud-palette-error);
    margin-left: 0.4rem;
    white-space: nowrap;
}

.rtu-comparison .na-value {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* Captions */
.rtu-comparison .rtu-caption {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 0.75rem;
    padding: 0 1.5rem;
    line-height: 1.4;
}

.rtu-comparison .rtu-caption::before {
    content: "* ";
    color: var(--mud-palette-error);
    font-weight: bold;
    font-style: normal;
}

.rtu-comparison .chart-section-title {
    text-align: center;
    font-size: 1.1rem;
    padding-bottom: 0.75rem;
    margin-top: 1.5rem;
    color: var(--mud-palette-text-primary);
}

/* Charts */
.rtu-comparison .rtu-chart {
    width: 100%;
    margin: 0.5rem 0 1rem;
}

.rtu-comparison .rtu-chart-svg {
    width: 100%;
    height: 280px;
    display: block;
}

.rtu-comparison .chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.rtu-comparison .chart-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rtu-comparison .legend-line {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.rtu-comparison .legend-dash {
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px);
    mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px);
}

.rtu-comparison .legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Blower savings cards */
.rtu-comparison .blower-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 0.6rem;
}

.rtu-comparison .blower-card {
    flex: 1 1 0;
    min-width: 130px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.rtu-comparison .blower-card .card-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.rtu-comparison .blower-card .card-value {
    margin: 0.3rem 0 0.2rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--mud-palette-text-primary);
}

.rtu-comparison .blower-card .card-sub {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.rtu-comparison .blower-card.is-highlight {
    border: 1px solid #b7e0c6;
    background: #eef9f2;
}

.rtu-comparison .blower-card.is-highlight .card-label {
    color: #2e8b57;
}

.rtu-comparison .blower-card.is-highlight .card-value {
    color: #1e7d46;
}

/* The highlight card has a fixed light-green background, so its sub-label must use a
   fixed dark colour too — otherwise it inherits the theme's (light) secondary text
   colour and disappears on the green in dark mode. */
.rtu-comparison .blower-card.is-highlight .card-sub {
    color: rgba(0, 0, 0, 0.55);
}

/* Dark mode: the light-green highlight card looks harsh on a dark surface. Give it a
   dark green-tinted background with lighter green text instead. */
.rtu-comparison.rtu-dark .blower-card.is-highlight {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
}

.rtu-comparison.rtu-dark .blower-card.is-highlight .card-label {
    color: color-mix(in srgb, var(--mud-palette-success) 75%, #fff);
}

.rtu-comparison.rtu-dark .blower-card.is-highlight .card-value {
    color: color-mix(in srgb, var(--mud-palette-success) 60%, #fff);
}

.rtu-comparison.rtu-dark .blower-card.is-highlight .card-sub {
    color: var(--mud-palette-text-secondary);
}

/* RTU Applied Capacity readout colours by % band: red when undersized (negative), orange
   when more than 5% oversized. The acceptable 0–5% band carries no extra class and keeps the
   base .blower-card look (white box / black text in light + print). Dark-mode + print
   variants follow the .is-highlight pattern. */
.rtu-comparison .blower-card.applied-cap--neg {
    border: 1px solid #f3c0bb;
    background: #fdecea;
}
.rtu-comparison .blower-card.applied-cap--neg .card-label { color: #c0392b; }
.rtu-comparison .blower-card.applied-cap--neg .card-value { color: #b71c1c; }
.rtu-comparison .blower-card.applied-cap--neg .card-sub   { color: rgba(0, 0, 0, 0.55); }

.rtu-comparison .blower-card.applied-cap--over {
    border: 1px solid #ffd9a8;
    background: #fff4e5;
}
.rtu-comparison .blower-card.applied-cap--over .card-label { color: #b35f00; }
.rtu-comparison .blower-card.applied-cap--over .card-value { color: #a85400; }
.rtu-comparison .blower-card.applied-cap--over .card-sub   { color: rgba(0, 0, 0, 0.55); }

.rtu-comparison.rtu-dark .blower-card.applied-cap--neg {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
}
.rtu-comparison.rtu-dark .blower-card.applied-cap--neg .card-label { color: color-mix(in srgb, var(--mud-palette-error) 78%, #fff); }
.rtu-comparison.rtu-dark .blower-card.applied-cap--neg .card-value { color: color-mix(in srgb, var(--mud-palette-error) 62%, #fff); }
.rtu-comparison.rtu-dark .blower-card.applied-cap--neg .card-sub   { color: var(--mud-palette-text-secondary); }

.rtu-comparison.rtu-dark .blower-card.applied-cap--over {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
}
.rtu-comparison.rtu-dark .blower-card.applied-cap--over .card-label { color: color-mix(in srgb, var(--mud-palette-warning) 80%, #fff); }
.rtu-comparison.rtu-dark .blower-card.applied-cap--over .card-value { color: color-mix(in srgb, var(--mud-palette-warning) 65%, #fff); }
.rtu-comparison.rtu-dark .blower-card.applied-cap--over .card-sub   { color: var(--mud-palette-text-secondary); }

/* Required-airflow driver tint on the comparison table: blue = sensible-driven CFM,
   green = latent-driven. Matches the legend swatches below the table. */
.rtu-comparison .rtu-table td.cfm-sensible {
    background: #e8f1fb;
    color: #1f5fa6;
    font-weight: 700;
}
.rtu-comparison .rtu-table td.cfm-latent {
    background: #eef9f2;
    color: #1e7d46;
    font-weight: 700;
}
.rtu-comparison.rtu-dark .rtu-table td.cfm-sensible {
    background: color-mix(in srgb, #3f86d6 22%, var(--mud-palette-surface));
    color: color-mix(in srgb, #3f86d6 65%, #fff);
}
.rtu-comparison.rtu-dark .rtu-table td.cfm-latent {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-success) 62%, #fff);
}

/* Compact legend under the comparison table explaining the driver tints. */
.rtu-comparison .cfm-driver-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}
.rtu-comparison .cfm-driver-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.rtu-comparison .cfm-driver-legend .legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.rtu-comparison .cfm-driver-legend .cfm-sensible-swatch { background: #2f6fb3; }
.rtu-comparison .cfm-driver-legend .cfm-latent-swatch   { background: #2e8b57; }

.rtu-comparison .blower-basis {
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.4;
}

/* Input-form divider above the "RTU Spec/RTU Replacement Comparison Tool" section,
   delineating it from the Airflow Design inputs above. Clearly visible (lines-inputs)
   and theme-aware. */
.airflow-comparison-layout .calculator-form .form-section-divider {
    border-top: 2px solid var(--mud-palette-lines-inputs);
    margin: 1.5rem 0 1.25rem;
}

/* RTU Spec / RTU Replacement applied-capacity block — spaced from the Modern HVAC
   output above it. No divider line (the section is delineated by its own header). */
.rtu-comparison .rtu-applied-section {
    margin-top: 1.25rem;
}

.rtu-comparison .applied-note {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--mud-palette-text-primary);
}

.rtu-comparison .applied-note--undersized {
    color: var(--mud-palette-error);
}

/* The all-N/A dehumidification warning leads the asterisked caption block, so it needs
   its own bottom gap (the base .applied-note has none — it normally hugs the cards above). */
.rtu-comparison .applied-note--spaced {
    margin-bottom: 1rem;
}

/* The in-sheet section label (e.g. "Required Airflow vs. Unit Discharge Temperature")
   normally has a negative bottom margin to pull form inputs up; here a chart follows,
   so give it a little breathing room instead. */
.rtu-comparison .section-label {
    margin-bottom: 0.75rem;
}

/* Results header: the first section label plus a right-aligned print icon, sharing
   one row. Mirrors the .section-label look but carries the underline on the row. */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 6px;
    margin: 0 0 4px 0;
}

.results-header-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
}

.results-header .results-print-btn {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

/* === Print: Required Airflow Calculator — results only ===
   Scoped with :has() so ONLY this page is affected; every other page prints normally.
   Tuned to fit the whole report on a single page (Load Calculator parity). */
@media print {
    @page {
        margin: 0.4in;
    }

    .no-print {
        display: none !important;
    }

    body:has(.airflow-comparison-layout) * {
        visibility: hidden;
    }

    body:has(.airflow-comparison-layout) .calculator-results-panel,
    body:has(.airflow-comparison-layout) .calculator-results-panel * {
        visibility: visible;
    }

    body:has(.airflow-comparison-layout) .calculator-results-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #fff !important;   /* clean white report — drop the grey panel */
        box-shadow: none !important;

        /* Force background colours to render in the PDF. Browsers strip backgrounds
           when printing unless this opts in; without it the legend swatches, the
           blue/green driver-tinted table cells, and the colour summary cards all wash
           out (the swatches are pure background, so they vanish entirely). Inherited,
           so setting it on the panel covers every descendant. */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;

        /* Force light-theme palette so printing from dark mode comes out readable.
           The SVG charts bake in var(--mud-palette-*), so overriding the variables
           here fixes chart text/gridlines, tables, and captions all at once. */
        --mud-palette-text-primary: rgba(0, 0, 0, 0.87);
        --mud-palette-text-secondary: rgba(0, 0, 0, 0.54);
        --mud-palette-divider: rgba(0, 0, 0, 0.12);
        --mud-palette-lines-default: rgba(0, 0, 0, 0.12);
        --mud-palette-background-grey: #f5f5f5;
        --mud-palette-surface: #ffffff;
        --mud-palette-error: #f44336;
        color: rgba(0, 0, 0, 0.87) !important;
    }

    /* Pin both cards to their light appearance regardless of the dark-mode overrides. */
    body:has(.airflow-comparison-layout) .blower-card {
        background: #fff !important;
        border-color: #e2e8f0 !important;
    }
    body:has(.airflow-comparison-layout) .blower-card.is-highlight {
        background: #eef9f2 !important;
        border-color: #b7e0c6 !important;
    }
    body:has(.airflow-comparison-layout) .blower-card.is-highlight .card-label {
        color: #2e8b57 !important;
    }
    body:has(.airflow-comparison-layout) .blower-card.is-highlight .card-value {
        color: #1e7d46 !important;
    }
    body:has(.airflow-comparison-layout) .blower-card.is-highlight .card-sub {
        color: rgba(0, 0, 0, 0.55) !important;
    }

    /* Pin the applied-capacity colour states + driver tints to their light appearance
       so they print correctly from dark mode (overrides both screen and .rtu-dark rules). */
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--neg {
        background: #fdecea !important;
        border-color: #f3c0bb !important;
    }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--neg .card-label { color: #c0392b !important; }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--neg .card-value { color: #b71c1c !important; }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--neg .card-sub   { color: rgba(0, 0, 0, 0.55) !important; }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--over {
        background: #fff4e5 !important;
        border-color: #ffd9a8 !important;
    }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--over .card-label { color: #b35f00 !important; }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--over .card-value { color: #a85400 !important; }
    body:has(.airflow-comparison-layout) .blower-card.applied-cap--over .card-sub   { color: rgba(0, 0, 0, 0.55) !important; }
    body:has(.airflow-comparison-layout) .rtu-table td.cfm-sensible {
        background: #e8f1fb !important;
        color: #1f5fa6 !important;
    }
    body:has(.airflow-comparison-layout) .rtu-table td.cfm-latent {
        background: #eef9f2 !important;
        color: #1e7d46 !important;
    }
    body:has(.airflow-comparison-layout) .cfm-driver-legend .cfm-sensible-swatch { background: #2f6fb3 !important; }
    body:has(.airflow-comparison-layout) .cfm-driver-legend .cfm-latent-swatch   { background: #2e8b57 !important; }

    /* Compress vertical rhythm so it fits one page. The SVG charts scale with their
       CSS height (unlike a Chart.js canvas), so shrink them here. */
    body:has(.airflow-comparison-layout) .rtu-chart-svg {
        height: 185px;
    }
    body:has(.airflow-comparison-layout) .rtu-chart {
        margin: 0.15rem 0 0.4rem;
    }
    body:has(.airflow-comparison-layout) .chart-legend {
        margin-top: 0.15rem;
    }
    body:has(.airflow-comparison-layout) .blower-cards {
        margin: 0.25rem 0 0.3rem;
    }
    body:has(.airflow-comparison-layout) .blower-card {
        padding: 0.5rem 0.8rem;
        box-shadow: none !important;
    }
    body:has(.airflow-comparison-layout) .blower-card .card-value {
        font-size: 1.5rem;
    }
    body:has(.airflow-comparison-layout) .blower-basis {
        margin: 0 0 0.4rem;
    }
    body:has(.airflow-comparison-layout) .rtu-table {
        margin-bottom: 0.4rem;
    }
    body:has(.airflow-comparison-layout) .rtu-caption {
        margin-bottom: 0.3rem;
        font-size: 0.72rem;
    }
    body:has(.airflow-comparison-layout) .rtu-comparison .section-label,
    body:has(.airflow-comparison-layout) .results-header {
        margin-top: 0.35rem;
        padding-bottom: 4px;
    }

    /* Match the gap above the two in-sheet section headers ("Required Airflow vs. Unit
       Discharge Temperature" and "RTU Spec / RTU Replacement Comparison"): give both the
       same top margin, and strip the screen-only divider + padding the applied-capacity
       block carries so its header doesn't float far below the discharge-temp notes. */
    body:has(.airflow-comparison-layout) .rtu-comparison .section-label--spaced {
        margin-top: 1.1rem;
    }
    body:has(.airflow-comparison-layout) .rtu-comparison .rtu-applied-section {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    /* Remove page chrome and container outlines that otherwise print as a left edge
       line (fixed drawer) and a thick bottom bar (dark app bar / wrapping card). */
    body:has(.airflow-comparison-layout) .mud-appbar,
    body:has(.airflow-comparison-layout) .mud-drawer,
    body:has(.airflow-comparison-layout) .mud-drawer-overlay,
    body:has(.airflow-comparison-layout) .mud-overlay,
    body:has(.airflow-comparison-layout) .breadcrumb-bar,
    body:has(.airflow-comparison-layout) .mud-breadcrumbs {
        display: none !important;
    }

    body:has(.airflow-comparison-layout) .mud-paper,
    body:has(.airflow-comparison-layout) .mud-card,
    body:has(.airflow-comparison-layout) .mud-main-content,
    body:has(.airflow-comparison-layout) main,
    body:has(.airflow-comparison-layout) .layout-content {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* The lines were the page/layout background (grey in light, near-black in dark)
       printing in the margins around the absolutely-positioned report. Force white. */
    html:has(.airflow-comparison-layout),
    body:has(.airflow-comparison-layout),
    body:has(.airflow-comparison-layout) .mud-layout {
        background: #ffffff !important;
    }
}

body[data-ui-ready] .expandable-section {
    transition: grid-template-rows 250ms ease, opacity 250ms ease, visibility 0ms 250ms;
}

body[data-ui-ready] .expandable-section[data-show="true"] {
    transition: grid-template-rows 250ms ease, opacity 250ms ease, visibility 0ms 0ms;
}

.expandable-section__inner {
    overflow: hidden;
    min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
    body[data-ui-ready] .expandable-section,
    body[data-ui-ready] .expandable-section[data-show="true"] {
        transition: none;
    }
}

.details-button-row {
    display: flex;
    justify-content: flex-end;
    padding: 4px 16px;
}

/* === Outdoor Air calculator layout === */
.oa-outdoor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.oa-outdoor-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    flex: 1 1 auto;
    min-width: 0;
}

.oa-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px 0;
}

.oa-result-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.oa-result-group > .section-label {
    margin-bottom: 0;
}

.oa-result-chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.oa-result-chips .psychro-result-chip,
.oa-summary-chips .psychro-result-chip {
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.oa-chip-value-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    width: 100%;
}

.oa-chip-designation {
    font-size: 0.7em;
    font-weight: 400;
    opacity: 0.75;
    white-space: nowrap;
    flex-shrink: 0;
}

.oa-station-cta {
    margin: 0 0 12px 0;
    align-items: center;
}

.oa-station-cta .mud-alert-message {
    width: 100%;
    flex: 1 1 auto;
    align-self: center;
}

.oa-station-cta .mud-alert-icon {
    align-self: center;
}

.oa-station-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

.oa-chip {
    min-width: 0;
}

/* === Psychrometric chart process loads (top inputs row) === */
.psychro-top-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

@media (min-width: 600px) {
    .psychro-top-inputs {
        gap: 16px;
    }

    .psychro-top-inputs > .mud-input-control {
        flex: 1;
        min-width: 180px;
    }
}

.psychro-process-loads {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}

.psychro-results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* === Field hint row (for NumericInputField with Hint + Explain) === */
.field-hint-row {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    padding-left: 14px;
}

.field-hint-row .explain-icon {
    margin-left: 6px;
    opacity: 0.5;
}

.explain-icon-wrap {
    display: inline-flex;
    align-items: center;
    cursor: help;
    user-select: none;
    padding: 2px;
}

.field-explain-inline {
    position: relative;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    padding: 8px 36px 8px 12px;
    background: color-mix(in srgb, var(--mud-palette-info) 6%, transparent);
    border-left: 2px solid var(--mud-palette-info);
    border-radius: 0 4px 4px 0;
}

.field-explain-text {
    display: block;
}

.field-explain-close {
    position: absolute !important;
    top: 2px;
    right: 2px;
    opacity: 0.45;
}

.field-explain-close:hover {
    opacity: 0.85;
}


.detail-value--multiline {
    white-space: pre-line;
}

.variables-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin-top: 4px;
    padding-left: 16px;
    align-items: baseline;
}

.meta-label--bold {
    font-weight: 600;
}

.variable-def {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.description-body {
    line-height: 1.7;
    white-space: pre-line;
}

.related-card-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.close-btn-float {
    position: absolute !important;
    top: 8px;
    right: 8px;
    opacity: 0.5;
}

.tool-detail-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.tool-detail-row .detail-icon {
    color: var(--mud-palette-info);
    margin-top: 2px;
    flex-shrink: 0;
}

.tool-detail-row .detail-value {
    display: block;
    font-size: 14px;
    padding-right: 16px;
    color: var(--mud-palette-text-primary);
}