/* Small-screen layout. On screens 768px wide or less the settings panels collapse to their
   headings, the projection charts hide behind a "Projection" heading, the results stack in one
   column, and the Run button is pinned to the bottom of the screen. Above 768px the layout is
   the desktop one and every panel is forced open. Pure CSS; the page's scripts are untouched. */

/* Wide screens: panels and projections are <details> but always shown open, so their headings
   are plain headings. */
@media (min-width: 769px) {
    summary {
        cursor: default;
    }

    details::details-content {
        content-visibility: visible;
    }
}

@media (max-width: 768px) {
    body {
        padding: var(--space-small-screen);
        padding-bottom: calc(var(--run-bar-height) + var(--space-small-screen));
    }

    /* Header: title only; the run controls become the bottom bar below */
    .header {
        margin-bottom: var(--space-small-screen);
    }

    h1 {
        font-size: 1.2em;
    }

    .run-controls {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        height: var(--run-bar-height);
        padding: 0 var(--space-small-screen);
        background: var(--colour-card-background);
        box-shadow: var(--shadow-run-bar);
    }

    .run-btn {
        min-height: var(--touch-target);
        font-size: var(--font-size-input-touch);
    }

    .progress-container {
        flex: 1;
        width: auto;
    }

    .progress-text {
        min-width: 0;
    }

    /* One column: settings, then results. The page scrolls as a whole. */
    .main-layout {
        display: block;
        height: auto;
        overflow: visible;
    }

    .config-column,
    .results-column {
        overflow: visible;
    }

    .results-column {
        margin-top: var(--space-small-screen);
    }

    /* Collapsible panel headings */
    summary {
        cursor: pointer;
    }

    .panel > summary > h2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: var(--touch-target);
        margin: 0;
    }

    .panel[open] > summary > h2 {
        margin-bottom: var(--space-small-screen);
    }

    .panel > summary > h2::after,
    .trajectory-column-header::after {
        content: '+';
        color: var(--colour-text-muted);
        font-weight: normal;
    }

    .panel[open] > summary > h2::after,
    .trajectory-column[open] > .trajectory-column-header::after {
        content: '\2212';
    }

    /* Panels with a projection: inputs, then the projection, in one column */
    .panel-with-trajectories::details-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .trajectory-column-header {
        display: flex;
        align-items: center;
        min-height: var(--touch-target);
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .trajectory-column-header::after {
        margin-left: auto;
    }

    .trajectory-column[open] > .trajectory-column-header {
        margin-bottom: var(--space-small-screen);
        border-bottom: var(--border-projection-heading);
    }

    .trajectory-chart-container {
        height: var(--projection-height-small);
    }

    /* Touch-sized inputs */
    .input-group select,
    .input-group input[type="number"],
    .dist-config input,
    .dist-type-row select,
    .event-row input,
    .event-row select {
        min-height: var(--touch-target);
        font-size: var(--font-size-input-touch);
    }

    .event-row button,
    .add-event-btn {
        min-height: var(--touch-target);
        font-size: var(--font-size-input-touch);
    }

    .slider-container {
        min-height: var(--touch-target);
    }

    .slider-container input[type="range"] {
        height: var(--slider-track-touch);
    }

    .slider-container input[type="range"]::-webkit-slider-thumb {
        width: var(--slider-thumb-touch);
        height: var(--slider-thumb-touch);
    }

    .slider-container input[type="range"]::-moz-range-thumb {
        width: var(--slider-thumb-touch);
        height: var(--slider-thumb-touch);
    }

    .dist-type-row label {
        min-width: 0;
    }

    /* Tooltips: shown by tapping the ?, as a bar above the Run bar instead of beside the ? */
    .tooltip {
        position: static;
        cursor: pointer;
    }

    .tooltip::after {
        position: fixed;
        left: var(--space-small-screen);
        right: var(--space-small-screen);
        bottom: calc(var(--run-bar-height) + var(--space-small-screen));
        width: auto;
        transform: none;
    }

    .tooltip::before {
        display: none;
    }

    .help-icon {
        width: 22px;
        height: 22px;
    }

    /* Results: one chart per row at a fixed height */
    .charts-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .chart-container {
        min-height: 0;
    }

    .chart-wrapper {
        flex: none;
        position: relative;
        height: var(--chart-height-small);
    }

    /* Summary table: median with the outer percentiles; P25 and P75 are dropped to fit */
    .percentile-table th:nth-child(3),
    .percentile-table td:nth-child(3),
    .percentile-table th:nth-child(5),
    .percentile-table td:nth-child(5) {
        display: none;
    }

    #breakdownTableContainer {
        padding: var(--space-small-screen);
    }
}