/* study999-score-columns-natural-v3 */

/*
 * 次数 | 日期 | 时间 | 正确率标签 | 数值 | 等级
 * 正确率数字紧跟标签；等级始终从固定列开始。
 */
#app .study999-score-line {
    display: grid !important;
    grid-template-columns:
        5.8em 10ch 8ch max-content 6ch max-content !important;

    column-gap: 4px !important;
    row-gap: 3px !important;
    justify-content: start !important;
    align-items: baseline !important;

    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
}

#app .study999-score-line > span {
    min-width: 0 !important;
    white-space: nowrap !important;
}

/* “正确率：”与数值靠近 */
#app .study999-score-line > .study999-score-label {
    padding-left: 0 !important;
    margin: 0 !important;
}

#app .study999-score-line > .study999-score-value {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 不显示额外的分号列，避免把等级挤到下一行 */
#app .study999-score-line > .study999-score-separator {
    display: none !important;
}

/* 等级固定在最后一列，与数值保持适当距离 */
#app .study999-score-line > span:last-child {
    grid-column: 6 !important;
    grid-row: 1 !important;
    margin-left: 12px !important;
    white-space: nowrap !important;
}

/*
 * 窄屏采用两行布局：
 * 第一行：次数、日期、时间
 * 第二行：正确率、数值、等级
 */
@media (max-width: 600px) {
    #app .study999-score-line {
        grid-template-columns:
            5.8em 10ch max-content !important;
        column-gap: 5px !important;
        row-gap: 3px !important;
    }

    #app .study999-score-order {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #app .study999-score-date {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #app .study999-score-time {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    #app .study999-score-label {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #app .study999-score-value {
        grid-column: 2 !important;
        grid-row: 2 !important;
        text-align: left !important;
    }

    #app .study999-score-line > span:last-child {
        grid-column: 3 !important;
        grid-row: 2 !important;
        margin-left: 12px !important;
    }
}