/*
 * The result's score card and what stands in its place while a scan runs (index.html
 * only): the check grid's cells, the score card and its key, the phone score bar's strip,
 * the scan card, and the beam down the channel card. The score pill, .skeleton-bar and
 * its pulse are shared with other pages, so they stay in components.css.
 */

/* the check grid's cells (tokens.css grid tokens), told apart by fill as well as colour */
.check-cell {
    aspect-ratio: 1;
    border: 1.5px solid var(--cell-line);
    border-radius: 4px;
    background: var(--surface);
}
.check-cell-minor {
    border-color: var(--cell-minor-line);
    background: var(--cell-minor-bg);
}
.check-cell-medium {
    border-color: var(--cell-medium);
    background: var(--cell-medium);
}
.check-cell-heavy {
    border-color: var(--cell-heavy);
    background: var(--cell-heavy);
}
/* a check that could not run: hatched in the outline's grey */
.check-cell-skipped {
    border-style: dashed;
    background: repeating-linear-gradient(45deg, var(--cell-line) 0 1.5px, transparent 1.5px 5px);
}

/* the states a running scan's cells take (scan_progress.js): done, the one under way, still to come */
.check-cell-done {
    border-color: var(--cell-line);
    background: var(--cell-line);
}
.check-cell-active {
    border-color: var(--text);
    background: var(--surface-2);
}
.check-cell-waiting {
    border-style: dashed;
    background: transparent;
}

/*
 * The score card (index.html #score, check_grid.js): the percentage and its band, a
 * one-line summary, then the check grid, one cell per check, and its key. The grid is a
 * <ul> whose items say in words what each cell shows. Red and amber appear only in the
 * cells of a signal; the figure itself is ink.
 */
.score-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* "This result looks wrong?" (help_result.js), the card's last line; the card's gap spaces it */
.score-card .help-dispute-line {
    margin: 0;
}
.score-card-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#score_card {
    display: grid;
    gap: var(--space-3);
}
#score_card p {
    margin: 0;
}
.score-card-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
.score-card-num {
    font: 700 3.25rem/1 var(--font-display);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.score-card-figure .score-pill {
    font-size: var(--fs-sm);
    white-space: normal;
}
.score-card-summary {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* each item's words are visually hidden inside it */
.check-grid .check-cell {
    position: relative;
}
.check-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.check-key span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.check-key .check-cell {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
}

/* the bands under the grid, the current one in ink, and what a score is */
.score-legend {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}
.score-legend strong {
    font-weight: 600;
    color: var(--text);
}
.score-line {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

/* the phone's score bar's strip: the same cells, one dot per check (results_side.css .score-bar) */
.check-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.check-strip .check-cell {
    flex: none;
    width: 7px;
    height: 7px;
    border-width: 1px;
    border-radius: 2px;
}

/*
 * A running scan (scan_progress.js marks #content is-scanning; index.html's head script
 * marks <html> is-result before any script runs). The result keeps its shape: the main
 * column's skeletons are render.js's, and here the score card's place goes to the steps
 * and the filling grid (#scan_card), the rest of the side column, the offers and the
 * phone's score bar step aside, and a neutral beam passes down the channel card.
 */
.scan-card {
    display: none;
}
#content.is-scanning .scan-card,
html.is-result #content .scan-card {
    display: grid;
    gap: var(--space-3);
}
#content.is-scanning #score_card,
html.is-result #content #score_card,
#content.is-scanning .score-bar-slot,
html.is-result #content .score-bar-slot,
#content.is-scanning .results-side > :not(#score),
html.is-result #content .results-side > :not(#score),
#content.is-scanning .results-next,
html.is-result #content .results-next {
    display: none;
}
/* Nothing of the last result stays up or clickable while the next scan runs: Run again (there
   is no channel to read again before the first result; it keeps its place in the header), the
   read line, the kept notes, the next steps, the owner's notes under the list and "This result
   looks wrong?". */
#content.is-scanning #get_latest_btn,
html.is-result #content #get_latest_btn {
    visibility: hidden;
}
#content.is-scanning #read_from_youtube,
html.is-result #content #read_from_youtube,
#content.is-scanning #result_note,
html.is-result #content #result_note,
#content.is-scanning #viewer_actions,
html.is-result #content #viewer_actions,
#content.is-scanning .owner-videos-notes,
html.is-result #content .owner-videos-notes,
#content.is-scanning #help_dispute_line,
html.is-result #content #help_dispute_line {
    display: none;
}
/* the grid's place before the page knows how many checks run */
.check-grid.skeleton-bar {
    display: block;
    height: 2.5rem;
}

/* The beam: a neutral line passing down the channel card while the scan runs. Only with
   motion allowed and color-mix supported; otherwise the card stays still, and the steps
   and cells still show the scan's progress. Dropping is-scanning stops it. */
#content.is-scanning .channel-card,
html.is-result #content .channel-card {
    position: relative;
    overflow: hidden;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    @media (prefers-reduced-motion: no-preference) {
        #content.is-scanning .channel-card::after,
        html.is-result #content .channel-card::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            top: 0;
            height: 70px;
            background: linear-gradient(180deg, transparent,
                color-mix(in srgb, var(--text) 7%, transparent) 85%,
                color-mix(in srgb, var(--text) 40%, transparent) 86%, transparent 88%);
            pointer-events: none;
            animation: scan-beam 2.8s ease-in-out infinite;
        }
    }
}
@media (prefers-reduced-motion: no-preference) {
    .check-grid .check-cell-active {
        animation: check-pulse 1.2s ease-in-out infinite;
    }
}
@keyframes scan-beam {
    from {
        top: -70px;
    }
    to {
        top: 100%;
    }
}
@keyframes check-pulse {
    50% {
        background: var(--border-strong);
    }
}