/* AeroForge Minimal SaaS — results, saved designs and modal polish (02B).
   Presentation only. Preserve all result IDs, chart canvases and overlay classes. */

/* The initial state remains centered, with calmer hierarchy and less motion. */
.empty-state {
    min-height: 340px;
    padding: clamp(20px, 4vw, 52px) 18px;
    gap: 12px;
    color: var(--af-ink);
}

.empty-icon {
    font-size: clamp(3rem, 5vw, 4rem);
    opacity: 0.92;
    animation: none;
}

.empty-state h2 {
    color: var(--af-ink);
    font-size: clamp(1.28rem, 2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.empty-state p {
    max-width: 410px;
    color: var(--af-ink-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.empty-hint {
    color: var(--af-ink-subtle) !important;
}

.link-btn {
    color: var(--af-brand);
    font-weight: 650;
    text-underline-offset: 3px;
}

/* The navigation still scrolls to its existing targets in app.js. */
.results-nav-bar {
    gap: 7px;
    padding: 10px 0 14px;
    margin-bottom: 16px;
}

.results-nav-bar .nav-btn {
    min-height: 35px;
    padding: 7px 12px;
    border: 1px solid var(--af-line);
    background: var(--af-surface);
    border-radius: var(--af-radius-sm);
    color: var(--af-ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.results-nav-bar .nav-btn:focus-visible {
    outline: 2px solid var(--af-brand);
    outline-offset: 2px;
}

.result-summary {
    gap: 16px;
    padding: 19px 21px;
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-md);
}

.summary-name {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 720;
    letter-spacing: -0.035em;
}

.summary-meta {
    gap: 6px;
}

.badge {
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--af-brand-tint);
    border: 1px solid var(--af-line);
    color: var(--af-brand);
    font-weight: 600;
    letter-spacing: 0;
}

.summary-actions {
    gap: 8px;
    flex-wrap: wrap;
}

.summary-actions .btn {
    min-height: 34px;
}

.confidence-banner {
    gap: clamp(14px, 2vw, 26px);
    padding: 18px 21px;
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-md);
    background: var(--af-surface);
    box-shadow: var(--af-shadow);
}

.conf-score {
    font-weight: 740;
    letter-spacing: -0.045em;
}

.conf-label,
.conf-title {
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
    color: var(--af-ink-muted);
}

.conf-bar-wrap {
    height: 9px;
    background: var(--af-surface-raised);
    border-radius: 100px;
}

.conf-bar {
    border-radius: 100px;
}

/* Readable result density; inline grid-column preferences in existing
   calculation views are intentionally untouched. */
.metrics-grid {
    gap: 12px;
    max-width: none;
}

/* The analysis result grids use classes rather than HTML column counts.
   JS still owns #metrics-plm display:none/grid and all computed values. */
.panel-results .af-throttle-metrics,
.panel-results .af-plm-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.panel-results .af-throttle-metrics {
    margin-top: var(--af-space-6);
}
.panel-results .af-flight-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel-results .af-pinout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--af-space-4);
    margin-bottom: var(--af-space-8);
}
.panel-results .af-pinout-grid > .pinout-card {
    min-width: 0;
}
.panel-results .af-pinout-grid table {
    max-width: 100%;
}
@media (max-width: 1100px) {
    .panel-results .af-pinout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Tablet-sized desktop still has split input/results panes: use two
   columns before the conventional 900px single-pane breakpoint. */
@media (max-width: 1200px) {
    .panel-results .af-throttle-metrics,
    .panel-results .af-plm-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .panel-results .af-flight-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}


.metric-card {
    min-width: 0;
    padding: 17px 18px;
    box-shadow: var(--af-shadow);
}

.metric-value {
    font-size: 1.52rem;
    line-height: 1.2;
    letter-spacing: -0.045em;
    font-weight: 730;
    overflow-wrap: anywhere;
}

.metric-label {
    font-size: 0.77rem;
    font-weight: 580;
    color: var(--af-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
}

.metric-unit {
    color: var(--af-ink-subtle);
    font-size: 0.73rem;
}

.results-content .section-title {
    margin: 28px 0 13px;
    color: var(--af-ink);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.findings-list,
.recommendations-list,
.assumptions-list {
    gap: 9px;
}

.finding-card,
.rec-card,
.assumption-card,
.evidence-dim-card,
.pinout-card,
.trace-card {
    padding: 14px 16px;
    border-radius: var(--af-radius-sm);
    border-color: var(--af-line);
    box-shadow: none;
}

.rec-card,
.assumption-card,
.evidence-dim-card,
.pinout-card,
.trace-card {
    background: var(--af-surface);
}

.finding-title,
.rec-title {
    color: var(--af-ink);
    font-size: 0.88rem;
    font-weight: 660;
}

.finding-description,
.rec-explanation,
.assumption-desc {
    color: var(--af-ink-muted);
    line-height: 1.6;
}

.data-table {
    font-size: 0.83rem;
}

.data-table th {
    padding: 12px 13px;
    background: var(--af-surface-raised);
    color: var(--af-ink-muted);
    border-bottom: 1px solid var(--af-line);
}

.data-table td {
    padding: 11px 13px;
    border-color: var(--af-line);
}

.data-table tr:hover td {
    background: var(--af-brand-tint);
}

/* Design history remains managed by the original sidebar JS. */
.sidebar {
    background: var(--af-surface);
    border-color: var(--af-line);
    box-shadow: var(--af-shadow);
}

.sidebar-header {
    border-color: var(--af-line);
}

.design-item {
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-sm);
    background: var(--af-surface);
    padding: 12px;
    margin-bottom: 8px;
    gap: 7px;
}

.design-item:hover {
    background: var(--af-surface-raised);
    border-color: var(--af-line-strong);
}

.design-item.active {
    background: var(--af-brand-tint);
    border-left: 3px solid var(--af-brand);
}

.design-meta {
    color: var(--af-ink-subtle);
}

/* Modals are overlays over both light and dark mode without hiding controls.
   Existing .hidden and each original modal's inline max-width still apply. */
.modal-overlay:not(.hidden) {
    background: rgba(9, 18, 32, 0.64);
    backdrop-filter: blur(5px);
    padding: 16px;
}

.modal {
    width: 100%;
    max-height: min(90vh, 900px);
    max-height: min(90dvh, 900px);
    overflow-y: auto;
    background: var(--af-surface);
    color: var(--af-ink);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-lg);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
    padding: clamp(18px, 3vw, 28px);
}

.modal h2,
.modal h3,
.modal h4 {
    color: var(--af-ink);
    letter-spacing: -0.025em;
}

.modal p {
    color: var(--af-ink-muted);
    line-height: 1.65;
}

.compare-table th,
.compare-table td {
    border-color: var(--af-line);
}

.compare-table th {
    background: var(--af-surface-raised);
    color: var(--af-ink-muted);
}

/* The separate subscription modal has its own legacy card markup. */
.pricing-modal-content {
    max-height: 90dvh;
    overflow-y: auto;
    padding: clamp(20px, 3.5vw, 38px);
    border-color: var(--af-line);
    background: var(--af-surface);
    color: var(--af-ink);
    border-radius: var(--af-radius-lg);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
}

.pricing-title,
.pricing-card h3,
.pricing-card .price {
    color: var(--af-ink);
}

.pricing-subtitle,
.pricing-card .features li,
.pricing-card .price span {
    color: var(--af-ink-muted);
}

.pricing-card {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-md);
    box-shadow: none;
}

.pricing-card:hover {
    border-color: var(--af-line-strong);
    transform: none;
}

.pro-card {
    border-color: var(--af-brand);
    background: var(--af-brand-tint);
}

@media (max-width: 900px) {
    .pricing-cards {
        flex-wrap: wrap;
    }
    .pricing-card {
        flex: 1 1 220px;
    }
}

@media (max-width: 600px) {
    .empty-state {
        min-height: 280px;
        padding: 28px 12px;
    }
    .results-nav-bar {
        gap: 6px;
    }
    .result-summary,
    .confidence-banner {
        padding: 16px;
    }
    .confidence-banner {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 8px;
    }
    .conf-title {
        grid-column: 1 / -1;
    }
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .metric-card {
        padding: 13px;
    }
    .metric-value {
        font-size: 1.3rem;
    }
    .summary-actions {
        width: 100%;
    }
    .summary-actions .btn {
        flex: 1 1 auto;
    }
    .modal {
        padding: 18px;
    }
    .pricing-cards {
        flex-direction: column;
    }
}

/* UI component pass 04B — semantic result states. Classes and severities
   are still set exclusively by the existing analysis JavaScript. */

.panel-results .finding-card.critical {
    background: var(--af-danger-bg);
    border-color: var(--af-danger-border);
    border-left: 3px solid var(--af-danger-ink);
}
.panel-results .finding-card.warning {
    background: var(--af-warn-bg);
    border-color: var(--af-warn-border);
    border-left: 3px solid var(--af-warn-ink);
}
.panel-results .finding-card.info {
    background: var(--af-info-bg);
    border-color: var(--af-info-border);
    border-left: 3px solid var(--af-info-ink);
}
.panel-results .finding-card.critical .finding-severity {
    color: var(--af-danger-ink);
    background: var(--af-danger-bg);
    border: 1px solid var(--af-danger-border);
}
.panel-results .finding-card.warning .finding-severity {
    color: var(--af-warn-ink);
    background: var(--af-warn-bg);
    border: 1px solid var(--af-warn-border);
}
.panel-results .finding-card.info .finding-severity {
    color: var(--af-info-ink);
    background: var(--af-info-bg);
    border: 1px solid var(--af-info-border);
}
.panel-results .finding-severity {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.69rem;
    letter-spacing: 0.025em;
    line-height: 1.2;
}

.panel-results .metric-card.good .metric-value,
.panel-results .data-table .good { color: var(--af-ok-ink); }
.panel-results .metric-card.warn .metric-value,
.panel-results .data-table .warn { color: var(--af-warn-ink); }
.panel-results .metric-card.bad .metric-value,
.panel-results .metric-card.danger .metric-value,
.panel-results .data-table .bad { color: var(--af-danger-ink); }

.panel-results .loading-state {
    gap: 14px;
    color: var(--af-ink-muted);
}
.panel-results .loading-state .spinner {
    width: 42px;
    height: 42px;
    border: 3px solid var(--af-line);
    border-top-color: var(--af-brand);
}
.panel-results .loading-state p {
    color: var(--af-ink-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}
.panel-results .empty-state .empty-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--af-line);
    border-radius: 20px;
    background: var(--af-brand-tint);
    color: var(--af-brand);
}

body > .error-toast,
.error-toast {
    width: min(400px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 13px 16px;
    border: 1px solid var(--af-danger-border);
    border-radius: var(--af-radius-md);
    background: var(--af-surface);
    color: var(--af-ink);
    box-shadow: var(--af-shadow);
    overflow-wrap: anywhere;
}
.error-toast-title {
    color: var(--af-danger-ink);
    font-size: 0.83rem;
}

@media (prefers-reduced-motion: reduce) {
    .panel-results .loading-state .spinner {
        animation-duration: 2.4s;
    }
}

/* UI component pass 04C — modal layout and form polish.
   Modal visibility, handlers, input values and submission remain JS-owned. */
.modal-overlay:not(.hidden) {
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(12px, 3vw, 24px);
}

.modal-overlay > .modal,
.modal-overlay > .pricing-modal-content {
    box-sizing: border-box;
    min-width: 0;
    /* Keep legacy 700px default and each modal's existing inline limit. */
    max-height: min(90dvh, calc(100dvh - 32px));
    scrollbar-width: thin;
    scrollbar-color: var(--af-line-strong) transparent;
}

/* Keep existing per-dialog max-width values (including inline widths). */
.modal-overlay > .modal {
    background: var(--af-surface);
    border-color: var(--af-line);
    color: var(--af-ink);
}

/* Programmatic focus makes the dialog boundary perceivable to keyboard users.
   Does not alter layout, overlay display, or per-dialog dimensions. */
.modal-overlay > [role="dialog"]:focus {
    outline: 2px solid var(--af-brand);
    outline-offset: -2px;
}

.modal-overlay .modal :is(h2, h3, h4),
.modal-overlay .pricing-modal-content :is(h2, h3, h4) {
    color: var(--af-ink);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.modal-overlay .modal .field label {
    display: block;
    color: var(--af-ink-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 6px;
}

.modal-overlay .modal .field :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea
) {
    box-sizing: border-box;
    min-height: 40px;
    border: 1px solid var(--af-line-strong);
    border-radius: var(--af-radius-sm);
    background: var(--af-control);
    color: var(--af-ink);
    font-size: 0.86rem;
    line-height: 1.4;
}

.modal-overlay .modal .field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--af-brand);
    outline-offset: 2px;
}

.modal-overlay .modal .btn {
    min-height: 40px;
}

.modal-overlay :is(.btn-close, .modal-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: var(--af-radius-sm);
    color: var(--af-ink-muted);
}

.modal-overlay :is(.btn-close, .modal-close):focus-visible {
    outline: 2px solid var(--af-brand);
    outline-offset: 2px;
}

.modal-overlay :is(.btn-close, .modal-close) .lucide {
    width: 17px;
    height: 17px;
    margin-right: 0;
}

/* This element is hidden by inline display:none until auth.js sets it.
   No display override: just make the visible error readable in both themes. */
#auth-error {
    color: var(--af-danger-ink) !important;
    background: var(--af-danger-bg);
    border: 1px solid var(--af-danger-border);
    border-radius: var(--af-radius-sm);
    padding: 10px 12px;
    line-height: 1.5;
}

/* Comparison content can be wide; scroll inside its own modal rather than
   causing a third viewport scrollbar. */
#compare-results {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}
#compare-results .compare-table {
    min-width: 480px;
    margin-top: 14px;
}
#compare-results .compare-table th,
#compare-results .compare-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--af-line);
    color: var(--af-ink);
    font-size: 0.81rem;
}
#compare-results .compare-table th {
    background: var(--af-surface-raised);
    color: var(--af-ink-muted);
    font-weight: 650;
}

/* Small phones: avoid dense dialog grids and clipped action rows. */
@media (max-width: 600px) {
    .modal-overlay > .modal,
    .modal-overlay > .pricing-modal-content {
        padding: 17px;
        max-height: calc(100dvh - 24px);
    }

    .modal-overlay .modal .field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    #compare-results .compare-table {
        min-width: 440px;
    }
}


/* Shared result spacing for backend-generated metric-grid cards. */
.panel-results :is(#power-budget-container, #cable-analysis-container, #bom-container) {
    min-width: 0;
    margin-block: var(--af-space-4);
}
.panel-results :is(#power-budget-container, #cable-analysis-container) .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--af-space-3);
    margin-block: var(--af-space-3) var(--af-space-4);
    align-items: stretch;
}
.panel-results :is(#power-budget-container, #cable-analysis-container) .metric-card {
    min-width: 0;
    min-height: 90px;
    padding: var(--af-space-4);
    box-sizing: border-box;
}
.panel-results #pinout-warnings > .assumption-card {
    margin-bottom: var(--af-space-3);
    line-height: 1.5;
}
.panel-results .af-pinout-grid > .pinout-card {
    overflow-x: auto;
    padding: var(--af-space-4);
}
.panel-results #plm-power-rails {
    margin-block: var(--af-space-4);
    min-width: 0;
}
.panel-results #plm-power-rails-content {
    gap: var(--af-space-3);
}
.panel-results #plm-power-rails-content > * {
    max-width: 100%;
    min-width: min(100%, 150px);
}
@media (min-width: 901px) {
    .panel-results #power-budget-container .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* The analysis error is placed next to its submit button. */
.analysis-feedback {
    margin-top: var(--af-space-3);
    padding: var(--af-space-4);
    border: 1px solid var(--af-danger-border);
    border-left: 3px solid var(--af-danger-ink);
    border-radius: var(--af-radius-md);
    background: var(--af-danger-bg);
    color: var(--af-ink);
    font-size: 0.87rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.analysis-feedback.hidden { display: none; }
.analysis-feedback-heading {
    display: flex;
    align-items: center;
    gap: var(--af-space-2);
    margin-bottom: var(--af-space-2);
    color: var(--af-danger-ink);
    font-weight: 700;
}
.analysis-feedback p { margin: 0; color: var(--af-ink); }
@media (max-width: 900px) {
    .panel-results :is(#power-budget-container, #cable-analysis-container) .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .panel-results :is(.result-summary, .confidence-banner, .metric-card,
        .pinout-card, .trace-card, .result-section) {
        box-sizing: border-box;
        max-width: 100%;
    }
    .panel-results .results-content > .section-title {
        margin-block: var(--af-space-6) var(--af-space-3);
    }
}


/* The table's own viewport consumes horizontal drags. The containing Results
   pane must stay fixed in width, including when translated headers are long. */
.panel-results,
.panel-results .results-content,
.panel-results :is(#bom-container, #cable-analysis-container) {
    min-width: 0;
    max-width: 100%;
}
.panel-results .af-result-table-scroll {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-sm);
    margin-block: var(--af-space-3) var(--af-space-5);
}
.panel-results .af-result-table-scroll:focus-visible {
    outline: 2px solid var(--af-brand);
    outline-offset: 2px;
}
.panel-results .af-result-table-scroll > .data-table {
    width: max-content;
    min-width: 100%;
    margin-top: 0;
}
.panel-results #cable-analysis-container .af-result-table-scroll > .data-table {
    min-width: 710px;
}
.panel-results #bom-container .af-result-table-scroll > .data-table {
    min-width: 680px;
}
.panel-results .af-result-table-scroll th,
.panel-results .af-result-table-scroll td {
    white-space: nowrap;
}
/* Match BOM totals to the shared metric-card spacing without changing the
   calculation, currency or the existing dynamic DOM IDs. */
.panel-results #bom-container .metric-grid.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--af-space-3);
    margin-block: var(--af-space-3) var(--af-space-4);
}
.panel-results #bom-container .metric-grid.cols-3 > .metric-card {
    min-width: 0;
    box-sizing: border-box;
    padding: var(--af-space-4);
}
@media (max-width: 900px) {
    .panel-results #bom-container .metric-grid.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .panel-results #bom-container .metric-grid.cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Generic opt-in adapter: engineering modules may render an ordinary table
   instead of .data-table. Each remains scrollable without widening Results. */
.panel-results .af-result-table-scroll > table {
    display: table;
    width: max-content !important;
    min-width: 100%;
    max-width: none;
    border-collapse: collapse;
}
.panel-results .af-result-table-scroll > table th,
.panel-results .af-result-table-scroll > table td {
    white-space: nowrap;
}
@media (max-width: 900px) {
    .panel-results .af-result-table-scroll > table {
        min-width: max(600px, 100%);
    }
    .panel-results .af-result-table-scroll {
        touch-action: pan-x pan-y;
    }
}