/* Share one scroll area instead of stacking independent fixed panels. */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}
.observation-panels { display: contents; }
.observation-panels.is-hidden { display: none; }
.observation-panels[data-section="controls"] .eclipse-panel,
.observation-panels[data-section="eclipses"] .panel { display: none; }
.info .fact { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.6; color: #f2eee5; }
.info h2 { font-size: 22px; margin-bottom: 12px; padding-right: 44px; }
#info-details { margin-top: 14px; border-top: 1px solid #45505a; }
#info-details summary { min-height: 44px; padding: 12px 0; color: #e8bd7a; cursor: pointer; font-size: 14px; }
.eclipse-intro { font-size: 16px; line-height: 1.6; margin-bottom: 12px; color: #f2eee5; }
.eclipse-buttons .btn, #eclipse-play, #north-view { min-height: 44px; }
#north-view { margin-bottom: 14px; }
.info .close { width: 44px; height: 44px; }
.hint { font-size: 12px; line-height: 1.4; }
#controls-panel #load-status {
    position: static; margin-bottom: 12px; font-size: 12px;
    line-height: 1.6; text-align: left; overflow-wrap: anywhere;
}
@media (max-width: 768px), (max-width: 1000px) and (max-height: 500px) {
    .overlay { --sheet-top: 132px; height: 100vh; height: 100dvh; }
    .title { top: calc(16px + var(--safe-top)); left: calc(12px + var(--safe-left)); font-size: 21px; }
    .title span { display: none; }
    .title small { font-size: 8px; letter-spacing: 1px; }
    .toolbar { top: calc(78px + var(--safe-top)); left: calc(12px + var(--safe-left)); right: auto; }
    .toolbar .btn { min-height: 44px; padding: 8px; font-size: 10px; }
    .observation-panels, .info {
        position: absolute;
        top: calc(var(--sheet-top) + var(--safe-top));
        bottom: calc(140px + var(--safe-bottom));
        left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right));
        width: auto; max-height: none; transform: none;
        overflow-y: auto; overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .observation-panels {
        display: flex; flex-direction: column; gap: 10px; z-index: 8; pointer-events: auto;
        bottom: auto;
        max-height: calc(100vh - var(--sheet-top) - 140px - var(--safe-top) - var(--safe-bottom));
        max-height: calc(100dvh - var(--sheet-top) - 140px - var(--safe-top) - var(--safe-bottom));
    }
    .observation-panels.is-hidden { display: none; visibility: hidden; pointer-events: none; }
    .observation-panels .panel, .observation-panels .eclipse-panel {
        position: static; flex: 0 0 auto; width: 100%; max-height: none;
        overflow: visible; padding: 14px; margin: 0;
    }
    .info {
        bottom: auto;
        max-height: calc(100vh - var(--sheet-top) - 140px - var(--safe-top) - var(--safe-bottom));
        max-height: calc(100dvh - var(--sheet-top) - 140px - var(--safe-top) - var(--safe-bottom));
        padding: 16px; background: #0e161f; transition: none;
    }
    .info h2 { font-size: 22px; padding-right: 44px; }
    .info-item { gap: 10px; font-size: 12px; }
    .info-item span { min-width: 0; overflow-wrap: anywhere; }
    .info-header { position: sticky; top: -16px; margin: -16px -16px 12px; padding: 16px; background: #0e161f; z-index: 1; }
    .info-header h2 { margin: 0; min-height: 28px; }
    .info .close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; margin: 0; background: #26333f; }
    #planet-dock {
        bottom: calc(8px + var(--safe-bottom));
        left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right));
        transform: none; width: auto; max-width: none; height: 88px;
        padding: 4px; gap: 4px; justify-content: flex-start; z-index: 10;
        overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    }
    .planet-chip { flex: 0 0 55px; min-width: 55px; }
    .hint { bottom: calc(102px + var(--safe-bottom)); left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); transform: none; max-width: none; font-size: 12px; pointer-events: none; }
}
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
    .title { top: calc(14px + var(--safe-top)); font-size: 16px; }
    .title small { display: none; }
    .toolbar { top: calc(6px + var(--safe-top)); left: auto; right: calc(12px + var(--safe-right)); }
    .overlay { --sheet-top: 60px; }
}