/* SHIFT CALCULATE FORM V1 */
/* Only the calculation form. Sotis remains unchanged. */

body.calculate-redesign .calculate-page .calculate-cosmic-header {
    padding-top: 52px;
}

body.calculate-redesign .calculate-page .calculate-section {
    border: 1px solid rgba(167, 158, 255, 0.30);
    background: linear-gradient(
        145deg,
        rgba(19, 25, 68, 0.92),
        rgba(10, 14, 43, 0.90)
    );
    box-shadow: 0 14px 34px rgba(0, 3, 29, 0.18);
    backdrop-filter: blur(12px);
}

body.calculate-redesign .calculate-page .calculate-section h3 {
    color: #f4f3ff;
    font-family: Georgia, "Times New Roman", serif;
}

body.calculate-redesign .calculate-page .calculate-section p {
    color: #c9cde9;
    line-height: 1.55;
}

body.calculate-redesign .calculate-page .calculate-section
:is(.calculate-planet-name, .calculate-house-name) {
    color: #e4e1ff;
}

body.calculate-redesign .calculate-page .calculate-section label span {
    color: #d8dcf8;
}

body.calculate-redesign .calculate-page .calculate-planet-row {
    border: 1px solid rgba(167, 158, 255, 0.18);
    background: rgba(143, 131, 255, 0.09);
}

body.calculate-redesign .calculate-page .calculate-section
:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border: 1px solid rgba(167, 158, 255, 0.30);
    background: rgba(9, 15, 46, 0.82);
    color: #f4f3ff;
    color-scheme: dark;
}

body.calculate-redesign .calculate-page .calculate-section
:is(input, select, textarea):focus {
    border-color: #aaa1ff;
    box-shadow: 0 0 0 3px rgba(143, 131, 255, 0.18);
}

body.calculate-redesign .calculate-page .calculate-section input::placeholder {
    color: #a9afd0;
}

body.calculate-redesign .calculate-page .calculate-actions button {
    border: 1px solid rgba(186, 177, 255, 0.38);
    background: linear-gradient(135deg, #7568dc, #574cba);
    color: #ffffff;
}

body.calculate-redesign .calculate-page .calculate-actions button:hover {
    background: linear-gradient(135deg, #9387f4, #695cd1);
}

/* SHIFT CALCULATE LAYOUT V2 */

/* Outer glass panel matching the SHIFT catalogues. */
body.calculate-redesign .main-content > .calculate-page {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(167, 158, 255, 0.30);
    border-radius: 26px;
    background: linear-gradient(
        145deg,
        rgba(18, 25, 67, 0.78),
        rgba(10, 14, 43, 0.76)
    );
    box-shadow: 0 16px 42px rgba(0, 3, 29, 0.18);
}

/* Compact header: centered message above left-aligned title. */
body.calculate-redesign .calculate-page .calculate-cosmic-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-top: 0;
}

body.calculate-redesign .calculate-page .calculate-cosmic-method {
    order: -1;
    box-sizing: border-box;
    align-self: center;
    width: min(100%, 470px);
    max-width: 470px;
    margin: 0 auto;
}

body.calculate-redesign .calculate-page .calculate-cosmic-heading {
    align-self: stretch;
    text-align: left;
}

@media (max-width: 640px) {
    body.calculate-redesign .main-content > .calculate-page {
        padding: 16px;
        border-radius: 20px;
    }

    body.calculate-redesign .calculate-page .calculate-cosmic-method {
        width: 100%;
        max-width: none;
    }
}

/* SHIFT CALCULATE HEADER V3 */

/* Title on the left, Placidus note on the right. */
body.calculate-redesign .calculate-page .calculate-cosmic-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 24px;
    padding-top: 0;
}

body.calculate-redesign .calculate-page .calculate-cosmic-heading {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    text-align: left;
}

body.calculate-redesign .calculate-page .calculate-cosmic-method {
    order: 0;
    flex: 0 1 440px;
    align-self: center;
    width: auto;
    max-width: 440px;
    margin: 0;
}

/* Remove unnecessary space inside the outer panel. */
body.calculate-redesign .main-content > .calculate-page {
    padding: 16px 22px 22px;
}

/* Keep the layout readable on smaller screens. */
@media (max-width: 900px) {
    body.calculate-redesign .calculate-page .calculate-cosmic-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    body.calculate-redesign .calculate-page .calculate-cosmic-method {
        flex: none;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 640px) {
    body.calculate-redesign .main-content > .calculate-page {
        padding: 16px;
    }
}

/* SHIFT CALCULATE TYPOGRAPHY V1 */

/* Unified base typography. */
body.calculate-redesign .calculate-page {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

body.calculate-redesign .calculate-page
:is(input, select, textarea, button) {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* Editorial headings. */
body.calculate-redesign .calculate-page :is(
    .calculate-cosmic-heading h1,
    .calculate-cosmic-intro h2,
    .sotis-import-panel h3,
    .calculate-section h3
) {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

body.calculate-redesign .calculate-page
:is(.calculate-cosmic-intro h2, .sotis-import-panel h3) {
    font-size: 24px;
}

body.calculate-redesign .calculate-page .calculate-section h3 {
    font-size: 24px;
}

/* Descriptions and help text. */
body.calculate-redesign .calculate-page :is(
    .calculate-cosmic-intro .section-note,
    .sotis-import-panel .section-note,
    .calculate-section p
) {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

body.calculate-redesign .calculate-page :is(
    .sotis-import-help,
    .calculate-cosmic-method p
) {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* Labels and planet names. */
body.calculate-redesign .calculate-page :is(
    .calculate-form label span,
    .calculate-birth-data label span,
    .sotis-import-controls label span,
    .sotis-import-chart-type__title
) {
    font-size: 13px;
    font-weight: 700;
}

body.calculate-redesign .calculate-page .calculate-planet-name {
    font-size: 14px;
    font-weight: 700;
}

/* SHIFT SOTIS STATUS V1 */

body.calculate-redesign .calculate-page .sotis-import-status {
    padding: 14px 18px;
    border: 1px solid rgba(167, 158, 255, 0.30);
    border-radius: 14px;
    background: rgba(143, 131, 255, 0.13);
    color: #e5e2ff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

body.calculate-redesign .calculate-page
.sotis-import-status--success {
    border-color: rgba(167, 158, 255, 0.42);
    background: rgba(100, 90, 195, 0.19);
    color: #e9e6ff;
}

body.calculate-redesign .calculate-page
.sotis-import-status--error {
    border-color: rgba(255, 153, 178, 0.40);
    background: rgba(155, 35, 64, 0.16);
    color: #ffc3d0;
}

/* SHIFT CALCULATE DESKTOP GEOMETRY V1 */
/* Match the approved /natives/ desktop layout. */

@media (min-width: 1401px) and (hover: hover) and (pointer: fine) {

    body.calculate-redesign.shift-ui .main-content {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding:
            72px
            clamp(24px, 6vw, 110px)
            64px
            calc(clamp(400px, 25vw, 455px) + 25px);
    }

    body.calculate-redesign.shift-ui .orb-menu {
        width: 170px;
        height: 170px;
    }

    body.calculate-redesign.shift-ui .orb-menu__toggle {
        width: 98px;
        height: 98px;
    }

    body.calculate-redesign.shift-ui .orb-menu__branch {
        left: -70px;
        width: 330px;
        height: min(700px, 82dvh);
    }

    body.calculate-redesign.shift-ui .orb-menu__panel {
        left: 94px;
        width: 282px;
        gap: 8px;
        padding: 18px 0 18px 62px;
    }

    body.calculate-redesign.shift-ui .orb-menu__item {
        width: 248px;
        min-height: 42px;
        height: 42px;
    }

    body.calculate-redesign.shift-ui .orb-menu__item-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    body.calculate-redesign.shift-ui .orb-menu__item-body {
        min-height: 42px;
        height: 42px;
        padding: 0 12px 0 16px;
    }

    body.calculate-redesign.shift-ui .orb-menu__text {
        font-size: 13px;
    }
}

/* SHIFT CALCULATE PLANET SYMBOLS V1 */
body.calculate-redesign.shift-ui .calculate-planet-name {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.calculate-redesign.shift-ui .calculate-planet-symbol {
    flex: 0 0 24px;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: #d5c2ff;
}

/* SHIFT DESKTOP PLANET SYMBOLS V2 */
/* Desktop only: symbol above planet name. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {

    body.calculate-redesign.shift-ui .calculate-planet-name {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-align: center;
    }

    body.calculate-redesign.shift-ui .calculate-planet-symbol {
        flex: 0 0 auto;
        width: 100%;
        font-size: 35px;
        line-height: 1.1;
        text-align: center;
    }

    body.calculate-redesign.shift-ui .calculate-planet-name > span:last-child {
        line-height: 1.25;
    }
}

/* SHIFT RARE PLANET SVG V1 */
body.calculate-redesign.shift-ui img.calculate-planet-symbol--svg {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(85%);
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    body.calculate-redesign.shift-ui img.calculate-planet-symbol--svg {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }
}

/* SHIFT RARE PLANET SYMBOL ALIGNMENT V2 */
body.calculate-redesign.shift-ui .calculate-planet-symbol--svg {
    display: block;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    align-self: center;
    background-color: #d5c2ff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

body.calculate-redesign.shift-ui .calculate-planet-symbol--proserpina {
    -webkit-mask-image: url("../icons/proserpina.svg");
    mask-image: url("../icons/proserpina.svg");
}

body.calculate-redesign.shift-ui .calculate-planet-symbol--selena {
    -webkit-mask-image: url("../icons/selena.svg");
    mask-image: url("../icons/selena.svg");
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    body.calculate-redesign.shift-ui .calculate-planet-symbol--svg {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }
}