/* ==========================================
   Aircraft Checklist v1.0
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    background:#000;

}

body{

    background:#000;
    color:#fff;

    font-family:
        "Segoe UI",
        "Yu Gothic UI",
        sans-serif;

    min-height:100vh;

    overflow-x:hidden;

}

#app{

    width:100%;
    max-width:430px;

    margin:auto;

    padding:

        calc(env(safe-area-inset-top) + 25px)

        20px

        calc(env(safe-area-inset-bottom) + 25px);

}

/* ==========================
   Screen
========================== */

.screen{

    display:block;

}

.hidden{

    display:none;

}

/* ==========================
   Title
========================== */

.title{

    text-align:center;

    font-size:42px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:45px;

}

/* ==========================
   Aircraft Cards
========================== */

.aircraftCard{

    border:2px solid #fff;

    border-radius:20px;

    padding:24px;

    margin-bottom:25px;

}

.aircraftName{

    font-size:34px;

    margin-bottom:25px;

}

.disabled{

    opacity:.35;

}

.comingSoon{

    text-align:center;

    font-size:18px;

}

/* ==========================
   Buttons
========================== */

button{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:#fff;

    color:#000;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    transition:.15s;

}

button:active{

    transform:scale(.98);

}

button:disabled{

    background:#333;

    color:#777;

    cursor:not-allowed;

}

/* ==========================
   Checklist Header
========================== */

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

#homeButton{

    width:auto;

    height:42px;

    padding:0 18px;

    font-size:16px;

}

#phaseCounter{

    font-size:15px;

    color:#bbb;

}

#phaseTitle{

    font-size:28px;

    margin-bottom:28px;

}

/* ==========================
   Checklist
========================== */

#checklistContainer{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:35px;

}

.item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    font-size:18px;

    line-height:1.5;

}

.item input{

    width:28px;

    height:28px;

    flex-shrink:0;

    margin-top:2px;

}

/* ==========================
   Next Button
========================== */

#nextButton{

    margin-top:10px;

}

/* ==========================
   Scrollbar
========================== */

::-webkit-scrollbar{

    width:6px;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}