/* Composite / Natal desktop grid.
   WIDE  = 1080/1200. Chart wheel and aspect table stay here. Untouched.
   TIGHT = 960. Reading blocks, titles, copy, filters.
   HALF  = 470. One form column. Two halves + 20px gutter = 960.
   Loaded LAST. REVERT: delete this file and its <link> in the calculator template. */

@media (min-width: 769px) {
    .chart-container #natalPatternsBlock,
    .chart-container #natalPatternsRow,
    .chart-container #natalPatternAllowWrap,
    .chart-container #natalReadingsRow,
    .chart-container #natalAdvancedDivider,
    .chart-container #natalOrbShareRow,
    .chart-container #extraToggle,
    .chart-container #natalAspectTableActions,
    .chart-container #natalTransitBarBelow,
    .chart-container #result .natal-positions-wrap:not(.natal-positions-wrap--transit),
    .chart-container #result .natal-positions-wrap.natal-positions-wrap--transit,
    .chart-container #result .natal-elements-cusps-row,
    .chart-container #aspectLists:not(.natal-aspect-lists--dual),
    .chart-container #aspectLists.natal-aspect-lists--dual {
        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* Positions: title + copy stay on 960. Table is left HALF.
       Transits fill the right HALF so the left columns do not move. */
    .chart-container #result .natal-positions-wrap table.natal-positions-table {
        width: 470px !important;
        max-width: 470px !important;
        table-layout: fixed;
        margin-left: 0;
        margin-right: 0;
    }

    .chart-container #result .natal-positions-wrap table.natal-positions-table--transit {
        width: 960px !important;
        max-width: 960px !important;
    }

    .chart-container #result table.natal-positions-table th,
    .chart-container #result table.natal-positions-table td {
        overflow: hidden;
        box-sizing: border-box;
    }

    .chart-container #result table.natal-positions-table .np-th-planet,
    .chart-container #result table.natal-positions-table td:first-child {
        width: 178px;
    }

    .chart-container #result table.natal-positions-table .np-th-natal-pos,
    .chart-container #result table.natal-positions-table .np-deg {
        width: 188px;
    }

    .chart-container #result table.natal-positions-table .np-th-natal-h,
    .chart-container #result table.natal-positions-table td.np-house:not(.np-transit-house) {
        width: 104px;
    }

    .chart-container #result table.natal-positions-table--transit th.np-th-transit.np-transit-col-first,
    .chart-container #result table.natal-positions-table--transit td.np-transit-col-first {
        width: 245px;
    }

    .chart-container #result table.natal-positions-table--transit .np-th-transit-in-natal-h,
    .chart-container #result table.natal-positions-table--transit .np-transit-house {
        width: 245px;
    }

    /* Keep only Composite Position and Transit position headers. Columns stay. */
    .chart-container #result table.natal-positions-table thead th.np-th-planet,
    .chart-container #result table.natal-positions-table thead th.np-th-natal-h,
    .chart-container #result table.natal-positions-table thead th.np-th-transit-in-natal-h {
        font-size: 0 !important;
        line-height: 0;
        color: transparent !important;
    }

    .chart-container #result table.natal-positions-table thead th.np-th-natal-pos,
    .chart-container #result table.natal-positions-table thead th.np-th-transit:not(.np-th-transit-in-natal-h) {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .chart-container #result table.natal-positions-table thead th.np-th-natal-pos {
        padding-left: 4px;
    }

    /* Elements left HALF, House Cusps right HALF. Same 20px gutter as the forms. */
    .chart-container #result .natal-elements-cusps-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 20px;
        background: transparent;
        padding: 0;
    }

    .chart-container #result .natal-elements-cusps-row .natal-elements-section,
    .chart-container #result .natal-elements-cusps-row .natal-house-cusps-plain {
        flex: 0 0 470px;
        width: 470px;
        max-width: 470px;
        background: #fff;
        padding: 20px 22px;
        box-sizing: border-box;
    }

    /* Aspect lists: titles, copy, and dividers stay 960.
       Composite list stays left HALF. Mood | Season fill 960. */
    .chart-container #aspectLists:not(.natal-aspect-lists--dual) .natal-aspect-lists-body,
    .chart-container #aspectLists.natal-aspect-lists--dual .natal-aspect-lists-body,
    .chart-container #aspectLists .natal-aspect-lists-col {
        width: 100%;
        max-width: 960px;
        margin-left: 0;
        margin-right: 0;
    }

    .chart-container #aspectLists #natalAspectListsContent ul,
    .chart-container #aspectLists .natal-natal-aspects-fold-body {
        width: 470px;
        max-width: 470px;
    }

    .chart-container #aspectLists .natal-transit-tier-row--mood-season {
        display: grid;
        grid-template-columns: 470px 470px;
        column-gap: 20px;
        width: 960px;
        max-width: 960px;
    }

    .chart-container #aspectLists .natal-aspect-lists-filters {
        justify-content: flex-end;
        width: 100%;
        flex-wrap: nowrap;
    }

    /* Natal product buttons: three even cells across the 960 row.
       Keep the original desktop height. Mobile sizes stay in relationship-insights.css. */
    .chart-container #natalReadingsRow {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 960px;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        gap: 8px;
        padding-left: 0;
        padding-right: 0;
    }

    .chart-container #natalReadingsRow .natal-reading-btn-wrap {
        flex: none;
        min-width: 0;
        max-width: none;
        width: auto;
    }

    .chart-container #natalReadingsRow .natal-cert-entry-btn,
    .chart-container #natalReadingsRow .natal-rw-entry-btn,
    .chart-container #natalReadingsRow .natal-love-entry-btn {
        width: 100%;
        max-width: none;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 16px;
        white-space: nowrap;
    }

    .chart-container,
    .chart-container #result,
    .chart-container #aspectGrid {
        overflow-anchor: none;
    }
}