/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.results_and_details {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.results { grid-area: 1 / 1 / 6 / 3; }
.details { grid-area: 1 / 3 / 6 / 9; }

/*h1 {*/
/*    --pico-font-family: Pacifico, cursive;*/
/*    --pico-font-weight: 400;*/
/*    --pico-typography-spacing-vertical: 0.5rem;*/
/*}*/

.debug {
    turbo-frame {
        border: 1px dashed red;
        display: block;

        &::before {
            content: "Frame #" attr(id) " src=" attr(src) " loading=" attr(loading);
            font-size: 0.75rem;
            padding: 0.25rem;
            border: 1px dashed red;
            background: white;
        }
    }
}

.alert {
    color: red;
}

.notice {
    color: green;
}

.results {
    .active {
        background-color: #f0f0f0;
    }
}