<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/modal_bg"
    android:orientation="vertical">

    <!-- Matches app edge-to-edge inset handling (see MotionActivity / AppUtil) -->
    <View
        android:id="@+id/fakeStatusBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/silabs_redtheme_status_bar_color" />

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/matter_1dp"
        android:background="@color/grey" />

    <!-- Figma: title start-aligned next to back affordance (not centered) -->
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/silabs_redtheme_tool_bar_color"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:navigationIconTint="@color/silabs_white"
        app:titleCentered="false"
        app:titleTextAppearance="@style/TextAppearance.ToolbarTitle"
        app:titleTextColor="@color/silabs_white" />

    <!-- Figma: empty space below card — card anchored top + horizontal center -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="@dimen/motion_card_height"
            android:layout_gravity="top|center_horizontal"
            android:layout_margin="16dp"
            app:cardBackgroundColor="@android:color/white"
            app:cardCornerRadius="@dimen/motion_card_corner_radius"
            app:cardElevation="@dimen/motion_card_elevation">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:paddingStart="@dimen/motion_card_inner_padding_horizontal"
                android:paddingTop="@dimen/motion_card_inner_padding_top"
                android:paddingEnd="@dimen/motion_card_inner_padding_horizontal"
                android:paddingBottom="@dimen/motion_card_inner_padding_bottom">

                <!-- GDX board scene — white matte matches Figma card interior -->
                <FrameLayout
                    android:id="@+id/car_animation"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:minHeight="140dp"
                    android:background="@android:color/transparent" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/space_S"
                    android:baselineAligned="false"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1">

                        <include
                            android:id="@+id/motionDemoOrientationParent"
                            layout="@layout/motiondemo_orientation"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal" />
                    </FrameLayout>

                    <View
                        android:id="@+id/divider"
                        android:layout_width="@dimen/motion_column_divider_width"
                        android:layout_height="match_parent"
                        android:layout_marginStart="@dimen/space_XS"
                        android:layout_marginEnd="@dimen/space_XS"
                        android:background="@color/silabs_inactive_light" />

                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1">

                        <include
                            android:id="@+id/motionDemoAccelerationParent"
                            layout="@layout/motiondemo_acceleration"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal" />
                    </FrameLayout>
                </LinearLayout>

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/calibrate"

                    android:layout_gravity="center_horizontal|center_vertical|center"
                    android:layout_width="122dp"
                    android:layout_height="@dimen/matter_30dp"
                    android:layout_marginTop="@dimen/space_M"
                    android:layout_marginBottom="@dimen/matter_20dp"
                    android:background="@drawable/motion_calibrate_button_bg"
                    android:minHeight="@dimen/motion_calibrate_min_height"
                    android:text="@string/motion_calibrate"
                    android:textAllCaps="false"
                    style="@style/tb_robo_medium_18dp_white" />
            </LinearLayout>
        </com.google.android.material.card.MaterialCardView>
    </FrameLayout>

</LinearLayout>
