/* The shared progress gate in training.css is limited to the exercise card. */
body:not(.solar-system-ready) .progress-ring-value,
body:not(.solar-system-ready) .smartscore_progress_fill { transition: none !important; }

.main_wrapper { min-height: 660px; }

.solar_system[hidden],
.solar_system [hidden] { display: none !important; }

.solar_system {
    align-items: center;
    gap: 24px;
    color: var(--main);
    text-align: center;
}

.solar_system *,
.solar_system *::before,
.solar_system *::after { box-sizing: border-box; }

.solar_system .ss_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 980px;
    min-width: 0;
}

.solar_system .ss_rule {
    width: 100%;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.6;
}

.solar_system .ss_rule p { margin: 0 0 16px; }
.solar_system .ss_rule p:last-child { margin-bottom: 0; }

.solar_system .ss_planet_facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.solar_system .ss_planet_fact {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: var(--border);
    border-radius: var(--radius);
    text-align: left;
}

.solar_system .ss_fact_visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
}

.solar_system .ss_fact_visual .ss_planet {
    width: calc(var(--ss-size) * 1.15);
    height: calc(var(--ss-size) * 1.15);
}

.solar_system .ss_fact_copy { min-width: 0; }
.solar_system .ss_fact_title { margin: 0 0 6px; font-size: 18px; line-height: 1.4; }
.solar_system .ss_fact_text { margin: 0; font-size: 15px; line-height: 1.5; }

.solar_system .ss_task {
    margin: 0;
    font-size: clamp(23px, 2.6vw, 30px);
    font-weight: var(--main_bolder_weight);
    line-height: 1.5;
}

.solar_system .ss_instruction {
    margin: 0;
    color: var(--secondary);
    font-size: 16px;
    line-height: 1.5;
}

.solar_system .ss_workspace {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0;
}

.solar_system .ss_board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.solar_system .ss_sun {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.4;
}

.solar_system .ss_direction { color: var(--secondary); font-size: 13px; }

.solar_system .ss_orbits {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solar_system .ss_orbit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solar_system .ss_position {
    color: var(--secondary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.solar_system .ss_slot,
.solar_system .ss_choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    color: var(--main);
    font: inherit;
    font-style: normal;
    line-height: 1.4;
    text-transform: none;
}

.solar_system .ss_slot {
    flex-direction: column;
    width: 100%;
    min-height: 124px;
    padding: 16px 2px 12px;
}

.solar_system .ss_name {
    position: relative;
    z-index: 1;
    min-height: 1.4em;
    max-width: 100%;
    font-size: 13px;
    font-weight: var(--main_bolder_weight);
    line-height: 1.4;
    white-space: nowrap;
}

.solar_system .ss_name.is_concealed { visibility: hidden; }
.solar_system .ss_slot.is_fixed { border-color: transparent; box-shadow: none; cursor: default; }
.solar_system .ss_slot.btn.secondary.is_fixed::before {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.solar_system .ss_slot:disabled,
.solar_system .ss_choice:disabled { color: var(--main) !important; opacity: 1; }

.solar_system .ss_slot.is_selected,
.solar_system .ss_choice.is_selected {
    --ss-border: var(--secondary);
    --ss-background: var(--secondary_background);
}

.solar_system .ss_slot.is_hint {
    --ss-border: var(--orange);
    --ss-background: color-mix(in srgb, var(--orange) 10%, var(--white));
}

.solar_system .ss_hint_name,
.solar_system .ss_select_hint {
    color: var(--main);
    font-size: 13px;
    font-weight: var(--main_bolder_weight);
    line-height: 1.4;
}

.solar_system .ss_slot.is_wrong {
    --ss-border: var(--red);
    --ss-background: color-mix(in srgb, var(--red) 10%, var(--white));
}

.solar_system .ss_slot.is_correct {
    --ss-border: var(--green);
    --ss-background: color-mix(in srgb, var(--green) 10%, var(--white));
}

.solar_system .ss_slot.btn.secondary:is(.is_selected, .is_hint, .is_wrong, .is_correct)::before,
.solar_system .ss_choice.btn.secondary.is_selected::before {
    border-color: var(--ss-border);
    background: var(--ss-background);
    box-shadow: 0 2px 0 var(--ss-border);
}

.solar_system .ss_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--secondary);
    font-size: 28px;
    line-height: 1;
}

/* Illustrative planet bodies: the exercise teaches order, not scale. */
.solar_system .ss_planet {
    --ss-size: 38px;
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: var(--ss-size);
    height: var(--ss-size);
    border-radius: 50%;
    background: #aaa;
    box-shadow: inset -7px -4px 9px #0005, inset 3px 3px 5px #ffffff35;
}

.solar_system .ss_planet[data-planet="0"] {
    --ss-size: 28px;
    background:
        radial-gradient(circle at 35% 34%, #726960 0 11%, transparent 13%),
        radial-gradient(circle at 62% 61%, #827970 0 14%, transparent 16%),
        radial-gradient(circle at 25% 75%, #777069 0 8%, transparent 10%),
        #b5aba0;
}

.solar_system .ss_planet[data-planet="1"] {
    --ss-size: 34px;
    background: repeating-linear-gradient(155deg, #d2a052 0 7px, #e6ba75 9px 14px, #c39048 17px 19px);
}

.solar_system .ss_planet[data-planet="2"] {
    --ss-size: 36px;
    background:
        radial-gradient(ellipse at 35% 30%, #75b86a 0 19%, transparent 21%),
        radial-gradient(ellipse at 40% 57%, #75b86a 0 12%, transparent 14%),
        radial-gradient(ellipse at 70% 67%, #8cc77a 0 17%, transparent 19%),
        radial-gradient(ellipse at 60% 8%, #eef6eb 0 9%, transparent 11%),
        #398dcc;
}

.solar_system .ss_planet[data-planet="3"] {
    --ss-size: 31px;
    background:
        radial-gradient(ellipse at 38% 36%, #b05a3b 0 17%, transparent 20%),
        radial-gradient(ellipse at 73% 71%, #b96749 0 15%, transparent 19%),
        #d7865e;
}

.solar_system .ss_planet[data-planet="4"] {
    --ss-size: 46px;
    background:
        radial-gradient(ellipse at 68% 67%, #b66b4a 0 10%, transparent 12%),
        repeating-linear-gradient(177deg, #e2c6a7 0 5px, #ba8a68 7px 11px, #eed5b7 13px 17px, #cf9f78 19px 24px);
}

.solar_system .ss_planet[data-planet="5"] {
    --ss-size: 37px;
    background: repeating-linear-gradient(168deg, #d5b67f 0 6px, #e7cd9d 8px 13px, #c4a16e 15px 17px);
}

.solar_system .ss_planet[data-planet="5"]::after {
    position: absolute;
    z-index: 1;
    top: 27%;
    left: -28%;
    width: 156%;
    height: 42%;
    border: 5px solid #d9c294;
    border-top-color: #b99c6c;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #79664566;
    transform: rotate(-23deg);
    content: "";
    pointer-events: none;
}

.solar_system .ss_planet[data-planet="6"] {
    --ss-size: 39px;
    background: linear-gradient(120deg, #b1e3e4, #7ac7d2 55%, #64a8ba);
}

.solar_system .ss_planet[data-planet="7"] {
    --ss-size: 38px;
    background: repeating-linear-gradient(175deg, #5182d5 0 10px, #4473c8 12px 17px, #5585d9 19px 25px);
}

.solar_system .ss_planet.ss_sun_body {
    --ss-size: 50px;
    background: radial-gradient(circle at 33% 30%, #ffe6a0, #ffc353 48%, #e98d2f);
    box-shadow: 0 0 18px #ffc04b38, 0 0 40px #ffc04b18, inset -4px -3px 7px #d27d3840;
}

.solar_system .ss_bank {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 720px;
    align-self: center;
}

.solar_system .ss_choice { min-height: 60px; padding: 10px 8px; }
.solar_system .ss_choice .ss_planet { flex: 0 0 26px; width: 26px; height: 26px; }
.solar_system .ss_choice .ss_name { font-size: 15px; }
.solar_system .ss_choice .ss_planet[data-planet="5"]::after { border-width: 3px; }
.solar_system .ss_choice.is_placed { opacity: .4; }

.solar_system .ss_choice.is_draggable,
.solar_system .ss_slot.is_draggable {
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.solar_system.ss_is_dragging,
.solar_system.ss_is_dragging .is_draggable {
    cursor: grabbing;
}

.solar_system .ss_dragging_source {
    opacity: 0.45;
}

.solar_system .ss_slot.is_drop_target {
    border-color: var(--secondary);
    background: var(--secondary_background);
    box-shadow: 0 0 0 2px var(--secondary);
}

.solar_system .ss_drag_preview {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 145px;
    min-height: 58px;
    padding: 8px 14px;
    border: 2px solid var(--secondary);
    border-radius: var(--radius);
    background: var(--secondary_background);
    color: var(--main);
    box-shadow: 0 5px 22px #0003;
    pointer-events: none;
}

.solar_system .ss_drag_preview .ss_planet {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.solar_system .ss_drag_preview .ss_name {
    font-size: 13px;
}

.solar_system button:focus-visible,
.solar_system .ss_select:focus-visible {
    outline: 2px solid var(--secondary) !important;
    outline-offset: 3px;
}

.solar_system .ss_select_wrap { display: none; }

.solar_system .ss_controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.solar_system .ss_controls .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    color: var(--accent);
}

.solar_system .ss_controls svg { width: 20px; height: 20px; flex: 0 0 20px; }
.solar_system .ss_controls:not(:has(.btn:not([hidden]))) { display: none; }

.solar_system .ss_status {
    display: grid;
    width: 100%;
    min-height: 48px;
}

.solar_system .ss_status > * { grid-area: 1 / 1; }
.solar_system .ss_status .ss_diagram_note { align-self: center; }
.solar_system .ss_status.has_feedback .ss_diagram_note { visibility: hidden; }

.solar_system .ss_feedback {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 20px;
    line-height: 1.5;
}

.solar_system .ss_feedback[aria-hidden="true"] { visibility: hidden; }
.solar_system .ss_feedback_title { color: var(--green); }
.solar_system .ss_feedback.is_wrong .ss_feedback_title { color: var(--red); }
.solar_system .ss_answer_actions { width: 100%; max-width: 360px; }
.solar_system .ss_answer_actions .btn { width: 100%; }
.solar_system .ss_diagram_note { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.5; }

@media (min-width: 768px) and (max-width: 1100px) {
    .solar_system .ss_orbits { gap: 4px; }
    .solar_system .ss_name { font-size: 11px; }
    .solar_system .ss_slot .ss_planet { width: calc(var(--ss-size) * .84); height: calc(var(--ss-size) * .84); }
}

@media (max-width: 767px) {
    .main_wrapper { min-height: calc(100svh - var(--nav_height)); }
    .solar_system { gap: 20px; }
    .solar_system .ss_body { gap: 20px; }
    .solar_system .ss_task { font-size: 22px; }
    .solar_system .ss_instruction { font-size: 15px; }
    .solar_system .ss_planet_facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .solar_system .ss_planet_fact { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px; }
    .solar_system .ss_fact_visual { width: 52px; height: 64px; }
    .solar_system .ss_fact_visual .ss_planet { width: var(--ss-size); height: var(--ss-size); }
    .solar_system .ss_fact_title { font-size: 17px; }
    .solar_system .ss_fact_text { font-size: 14px; }
    .solar_system .ss_orbits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .solar_system .ss_slot { min-height: 114px; }
    .solar_system .ss_name { font-size: 14px; }
    .solar_system[data-mode="order"] .ss_orbits { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .solar_system[data-mode="order"] .ss_orbit { flex-direction: row; gap: 12px; }
    .solar_system[data-mode="order"] .ss_position { flex: 0 0 20px; }
    .solar_system[data-mode="order"] .ss_slot {
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        min-height: 48px;
        padding: 6px 12px;
    }
    .solar_system[data-mode="order"] .ss_slot .ss_planet { width: 28px; height: 28px; }
    .solar_system[data-mode="order"] .ss_slot .ss_planet[data-planet="5"]::after { border-width: 4px; }
    .solar_system .ss_select_wrap { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
    .solar_system .ss_select_control { align-self: flex-start; }
    .solar_system .ss_select_control.opened { z-index: 10; }
    .solar_system .ss_select_options {
        min-width: 180px;
        max-width: calc(100vw - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .solar_system .ss_select_options [role="option"] { min-height: 44px; }
    .solar_system .ss_select_options .is_keyboard_option:not(.active) { background: var(--secondary_background); }
    .solar_system .ss_select_control.opens_up .dropdown { top: auto; bottom: calc(100% + 9px); }
    .solar_system .ss_select_control.opens_up::before {
        top: auto;
        bottom: calc(100% + 2px);
        border-top: 9px solid var(--lightgray);
        border-bottom: 0;
    }
    .solar_system .ss_select_control.opens_up::after {
        top: auto;
        bottom: calc(100% + 5px);
        border-top: 6px solid var(--white);
        border-bottom: 0;
    }
    .solar_system .ss_select_control .ss_select {
        min-height: 44px;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        background: var(--white);
        color: var(--main);
        font: inherit;
        font-size: 16px;
        box-shadow: none;
    }
    .solar_system .ss_select:disabled { opacity: 1; cursor: default; }
    .solar_system .ss_select_control.opened .ss_select,
    .solar_system .ss_select:focus { border-color: var(--secondary); }
    .solar_system .ss_answer_actions { max-width: none; }
    .solar_system .ss_controls { gap: 10px; }
    .solar_system .ss_controls .btn { padding-left: 8px; padding-right: 8px; }
    .solar_system .ss_status { min-height: 56px; }
    .solar_system .ss_feedback { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .solar_system *,
    .solar_system *::before,
    .solar_system *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}