/* Approved phone composition. Desktop/tablet rules remain in the base stylesheet. */
@media screen and (max-width: 600px) {
    .beam-topbar .beam-app-link { display: none; }

    html.beam-calculator-document,
    html.beam-calculator-document body {
        position: static;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: pan-x pan-y;
    }

    .beam-calculator-page {
        min-height: 100dvh;
        overflow: visible;
    }

    .beam-workspace {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .beam-settings-panel {
        display: block;
        min-height: 0;
        overflow: visible;
        border: 0;
    }

    .beam-settings-layout { display: contents; }

    .beam-settings-nav-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 76px;
        align-items: stretch;
        overflow: visible;
        border: 0;
        border-bottom: 1px solid var(--beam-border);
    }

    .beam-settings-fixed {
        position: static;
        min-width: 0;
        padding: 14px 9px 9px 12px;
    }

    .beam-page-intro { margin: 0 0 9px; }
    .beam-page-intro h1 {
        font-size: 19px;
        line-height: 1.15;
        letter-spacing: -0.035em;
    }
    .beam-page-intro .beam-intro-copy {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.35;
    }

    .beam-form {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: 4px 6px;
    }

    .beam-span-label-row { min-height: 17px; white-space: nowrap; }
    .beam-span-label-row .ty-field-label { margin: 0; font-size: 11px; }
    .beam-span-row { width: 100%; gap: 6px; flex-direction: row; }
    .beam-form > .beam-input-error { grid-column: 1 / -1; }
    .beam-span-examples { max-width: min(260px, calc(100vw - 100px)); }

    .beam-span-input.input-standard {
        height: 34px;
        padding: 5px 28px 5px 8px;
        font-size: 12px;
    }
    .beam-unit-label { right: 8px; font-size: 12px; }
    .beam-generate-button.btn-primary {
        display: grid;
        place-items: center;
        width: 38px;
        min-width: 38px;
        height: 34px;
        padding: 0;
        transition: background-color 120ms ease, transform 120ms ease;
    }
    .beam-generate-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .beam-generate-button::before {
        width: 0;
        height: 0;
        margin-left: 3px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 10px solid currentColor;
        content: "";
    }
    .beam-generate-button:active,
    .beam-add-tool-button:active { transform: scale(0.94); }

    .beam-left-stiffness { min-height: 0; margin-top: 2px; padding: 6px 0 0; border-top: 0; }
    .beam-tool-actions-header { display: none; }
    .beam-stiffness-row {
        grid-template-columns: max-content minmax(0, 0.8fr) max-content minmax(0, 1.2fr);
        gap: 5px;
    }
    .beam-stiffness-row .ty-field-label { font-size: 11px; }
    .beam-stiffness-input.input-standard {
        width: 100%;
        min-width: 0;
        height: 30px;
        padding: 4px 25px 4px 6px;
        font-size: 12px;
    }
    .beam-tool-actions {
        justify-content: flex-start;
        gap: 5px;
        margin-top: 7px;
        padding: 6px 0 4px;
        border-top: 1px solid var(--beam-border);
    }
    .beam-tool-actions-buttons { gap: 5px; }
    .beam-add-tool-button.btn-ghost {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 5px;
        border: 1px solid var(--beam-border);
        border-radius: 7px;
        background: color-mix(in srgb, #529774 3%, var(--beam-panel-bg));
        transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
    }

    .beam-settings-nav {
        display: flex;
        align-self: stretch;
        min-width: 0;
        margin: 0;
        padding: 12px 7px 10px;
        overflow: visible;
        border: 0;
        border-left: 1px solid var(--beam-border);
    }
    .beam-settings-tabs { flex: 1; flex-direction: column; flex-wrap: nowrap; gap: 5px; }
    .beam-settings-tab {
        flex: 0 0 auto;
        justify-content: center;
        width: 100%;
        min-height: 35px;
        padding: 5px 3px;
        border-radius: 6px;
        font-size: 10px;
        letter-spacing: 0.035em;
        text-align: center;
        transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
    }
    .beam-settings-tab:active { transform: scale(0.97); }

    .beam-settings-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 170px;
        padding: 10px 10px 11px;
        overflow: visible;
    }
    /* One shared track reserves the tallest panel, including inactive sections.
       The minimum also reserves a two-row load card before any loads exist. */
    .beam-settings-content > .beam-settings-section {
        grid-area: 1 / 1;
        min-width: 0;
        align-self: start;
    }
    .beam-settings-content > .beam-settings-section[hidden] {
        visibility: hidden;
        pointer-events: none;
    }
    /* Tailwind's [hidden] rule is !important inside base: unlayered !important
       cannot override it, regardless of selector specificity. */
    @layer base {
        .beam-settings-content > .beam-settings-section[hidden] {
            display: block !important;
        }
    }
    .beam-settings-section-heading { gap: 8px; margin-bottom: 8px; padding-bottom: 7px; }
    .beam-settings-section-heading h2 { font-size: 13px; }
    .beam-preset-grid {
        grid-auto-flow: column;
        grid-auto-columns: clamp(92.8px, 30.4vw, 115.2px);
        grid-template-columns: none;
        grid-template-rows: repeat(2, minmax(0, auto));
        gap: 7px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .beam-preset-grid::-webkit-scrollbar { display: none; }
    .beam-preset-button { padding: 2px; border-radius: 6px; }
    .beam-nodal-loads-list,
    .beam-span-list,
    .beam-hinges-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc(50vw - 14px);
        grid-template-columns: none;
        grid-template-rows: auto;
        align-items: start;
        gap: 7px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .beam-nodal-loads-list::-webkit-scrollbar,
    .beam-span-list::-webkit-scrollbar,
    .beam-hinges-list::-webkit-scrollbar { display: none; }
    .beam-nodal-loads-list { grid-auto-columns: calc(75vw - 21px); }
    .beam-load-row { min-width: 0; padding: 8px; border-radius: 8px; }
    .beam-load-row-header { gap: 6px; margin-bottom: 6px; }
    .beam-load-number { font-size: 11px; }
    .beam-load-span { font-size: 10px; }
    .beam-load-fields { gap: 6px; }
    .beam-load-field { font-size: 10px; line-height: 1.25; }
    .beam-load-input.input-standard { height: 30px; padding: 4px 28px 4px 6px; font-size: 12px; }
    .beam-load-fields--distributed .beam-load-input.input-standard { padding-right: 34px; }
    .beam-load-unit { right: 5px; font-size: 12px; }
    .beam-model-summary { display: none; }
    .beam-settings-panel > .beam-interaction-status {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 12px;
        border-radius: 0;
        font: 11px/1.35 var(--font-mono, "Geist Mono", monospace);
        text-align: left;
    }
    .beam-settings-panel > .beam-interaction-status.is-active {
        font-weight: 600;
    }

    .beam-canvas-panel {
        --beam-end-margin: 33.6px;
        display: block;
        min-height: 0;
        background: var(--beam-canvas-bg);
    }
    .beam-canvas-header { min-height: 39px; padding: 7px 11px; border-top: 1px solid var(--beam-border); }
    .beam-canvas-header h2 { font-size: 13px; }
    .beam-canvas-summary { margin-top: 2px; font-size: 10px; }
    .beam-canvas-frame { display: flex; height: auto; min-height: 0; flex-direction: column; overflow: visible; }
    .beam-schematic-plot { flex: none; height: 156px; min-height: 156px; border-bottom: 1px solid var(--beam-border); }
    .beam-moment-panel,
    .beam-shear-panel,
    .beam-deflection-panel { flex: none; height: 127px; min-height: 127px; overflow: visible; }
    .beam-moment-header { min-height: 29px; padding: 4px 10px; }
    .beam-moment-header h3 { font-size: 11px; }
    .beam-solver-status { max-width: 64%; font-size: 10px; }
    .beam-moment-plot,
    .beam-shear-plot,
    .beam-deflection-plot { height: 97px; min-height: 97px; }
    #beamCanvas,
    #beamMomentCanvas,
    #beamShearCanvas,
    #beamDeflectionCanvas { width: 100%; height: 100%; touch-action: pan-y; }
    .beam-canvas-footer { min-height: 32px; padding: 6px 10px; font-size: 10px; }
    .beam-canvas-cycle-hint { display: none; }
}

@media screen and (max-width: 600px) and (prefers-reduced-motion: reduce) {
    .beam-settings-tab,
    .beam-generate-button,
    .beam-add-tool-button { transition: none; }
}