body {
    margin: 0 ;
    min-height: 100vh ;
    display: flex ;
    flex-direction: column ;
}

.page_wrapper {
    margin: 0 2rem ;
}

#sessions_container {
    display: flex ;
    flex-direction: row ;
    flex-wrap: wrap ;
    gap: 15px ;
    width: 100% ;
    margin-bottom: 40px ;
}

#sessions_container:empty::before, #sessions_container:has(> div:empty)::before {
    content: "No active scoreboards.  Create one with the form below." ;
}

.card_actions {
    display: flex ;
    flex-wrap: wrap ;
    gap: 0.6rem ;
    width: 100% ;
    margin-top: 0.6rem ;
}

.btn {
    flex: 1 ;
    display: flex ;
    gap: 5px ;
}

.btn svg {
    width: 1em ;
    height: 1em ;
}

.new_scoreboard {
    border-left: 4px solid var(--accent-border) ;
}

.new_scoreboard .session_name {
    margin: 0 0 12px ;
}

#create_scoreboard {
    display: flex ;
    flex-direction: column ;
    gap: 10px ;
    width: 100% ;

    label {
        display: block ;
        font-size: 0.85rem ;
        color: var(--text-dim) ;
        white-space: nowrap ;
        margin-bottom: 4px ;
    }
}

.form_group {
    display: flex ;
    flex-direction: column ;

    input[type="text"] {
        min-width: 0 ;
        width: 100% ;
        background: var(--surface-sunken) ;
        border: 0.5px solid var(--surface-sunken-border) ;
        color: var(--text) ;
        border-radius: 8px ;
        padding: 8px 10px ;
        font-size: 13px ;
        font-family: inherit ;
    }

    input[type="text"]:focus {
        outline: none ;
        border-color: var(--accent-border) ;
    }
}

.form_row {
    display: flex ;
    flex-wrap: wrap ;
    gap: 12px ;
    margin-bottom: 14px ;
}

.form_row .venue { flex: 3 1 8rem }
.form_row .court { flex: 1 1 6rem }

.stepper {
    display: flex ;
    align-items: center ;
    background: var(--surface-sunken) ;
    border: 0.5px solid var(--surface-sunken-border) ;
    border-radius: 8px ;
    overflow: hidden ;
    height: 2rem ;
}

.stepper button {
    flex: 0 0 2rem ;
    background: transparent ;
    border: none ;
    color: var(--text) ;
    font-size: 1rem ;
    padding: 8px 0 ;
    cursor: pointer ;
    font-family: inherit ;
}

.stepper button:hover, .stepper button:focus-visible {
  background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.08));
  outline: none ;
}

.stepper span {
    flex: 1 ;
    text-align: center ;
    font-size: 13px ;
    font-weight: 500 ;
}

@media (max-width: 480px) {
    .page_wrapper {
        margin: 0 0.5rem ;
    }
}

@media (max-width: 400px) {
    .page_wrapper {
        margin: 0 ;
    }

    .page_title {
        font-size: 1.5rem ;
    }
}

@media (max-width: 300px) {
    .new_scoreboard {
        max-width: 100% ;
    }

    #create_scoreboard label {
        white-space: unset ;
    }
}