/* Progress page: a left-aligned content column on the dark ground, sections split by rules */
.history-layout h1 {
    margin: 0 0 var(--space-6);
    font-size: var(--fs-3xl);
}

.history-section {
    padding-top: var(--space-5);
    margin-top: var(--space-6);
    border-top: 1px solid var(--hair);
}

.history-section h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-lg);
}

.history-section h3 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--fs-md);
    font-weight: 500;
}

.history-section > .btn {
    margin-bottom: var(--space-4);
}

/* One sign-in banner at the top; the section headings stay, their bodies are hidden */
.signin-banner {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--hair);
}

.signin-banner p {
    margin: 0;
}

.signed-out .signin-banner {
    display: flex;
}

.signed-out .history-section {
    display: none;
}

/* Empty-state lines go away once the section has data */
.history-section:has(#games-summary:not(.hidden)) > .when-empty,
.history-section:has(#games-list:not(.hidden)) > .when-empty {
    display: none;
}

.history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Session table */
.history-table th,
.history-table td {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    vertical-align: middle;
}

.history-table td:last-child {
    text-align: right;
    padding-right: 0;
}

.history-table .side-cell {
    text-transform: capitalize;
}

#load-more-button {
    margin-top: var(--space-4);
}

/* Charts */
.chart-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-8);
}

.chart-block {
    min-width: 0;
}

.chart-block h3 {
    margin-top: 0;
}

.chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.chart-wide {
    grid-column: 1 / -1;
}

.chart-summary {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chart-summary:empty {
    display: none;
}

.chart-empty {
    margin: 0;
    color: var(--ink-2);
}

.chart-box {
    border-bottom: 1px solid var(--hair);
    padding-bottom: var(--space-2);
}

.chart-box svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-box text {
    fill: var(--ink-3);
    font-size: var(--fs-xs);
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
}

.chart-box .chart-label {
    fill: var(--ink);
    font-weight: 600;
}

.chart-box .chart-grid {
    stroke: var(--hair);
    stroke-width: 1;
}

.chart-legend,
.bar-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-2);
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.chart-legend span,
.bar-key span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.bar-key {
    margin-top: var(--space-3);
}

/* Legend keys: small squares in the chart colours, a dot and a line for the accuracy chart */
.key {
    display: inline-block;
    flex-shrink: 0;
}

.key-drills,
.key-puzzles,
.key-lines {
    width: 10px;
    height: 10px;
}

.key-drills { background: #c9cdd4; }
.key-puzzles { background: var(--ink-2); }
.key-lines { background: #565b64; }

.key-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-2);
}

.key-line {
    width: 20px;
    height: 2px;
    background: var(--blue);
}

/* Weaknesses: one flat row per mistake type, split by hairlines */
.weakness-cards {
    margin-bottom: var(--space-4);
}

.weakness-card {
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) minmax(140px, 1fr) minmax(170px, 1fr) auto;
    grid-template-areas:
        "title meter trend action"
        "examples examples examples examples";
    align-items: center;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--hair);
}

.weakness-card:first-child {
    border-top: 0;
    padding-top: 0;
}

.weakness-card h3 {
    grid-area: title;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 500;
}

.weakness-card p {
    margin: 0;
}

.weakness-card > .btn {
    grid-area: action;
}

.weakness-meter {
    grid-area: meter;
}

.weakness-rate {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.weakness-track {
    display: block;
    height: 2px;
    margin-top: var(--space-2);
    background: var(--hair);
}

.weakness-fill {
    display: block;
    height: 100%;
    background: var(--ink-3);
}

.weakness-trend {
    grid-area: trend;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.weakness-trend.good { color: var(--green); }
.weakness-trend.bad { color: var(--red); }

.weakness-examples {
    grid-area: examples;
    list-style: none;
    margin: 0;
    padding: 0;
}

.weakness-examples li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

/* The phase, time-control and opening breakdowns sit below the cards, smaller */
.weakness-grid.compact {
    font-size: var(--fs-sm);
}

.weakness-grid.compact h3 {
    font-size: var(--fs-sm);
}

/* Weakness bars: block bars, label / bar / numbers */
.weakness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) var(--space-8);
}

.weakness-grid > div > h3:first-child {
    margin-top: 0;
}

.bar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label value"
        "track track";
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0 var(--space-3);
    border-bottom: 1px solid var(--hair);
}

.bar-row:has(.bar-action) {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "label value action"
        "track track track";
    align-items: center;
}

.bar-label {
    grid-area: label;
    font-weight: 500;
    text-transform: capitalize;
    overflow-wrap: anywhere;
}

.bar-value {
    grid-area: value;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bar-track {
    grid-area: track;
    display: flex;
    gap: 2px;
    height: 4px;
    background: var(--hair);
}

.bar-fill {
    display: block;
    height: 100%;
    background: var(--blue);
}

.bar-fill.bad { background: var(--red); }
.bar-fill.caution { background: var(--yellow); }

.bar-action {
    grid-area: action;
    min-height: 32px;
    padding: 4px 12px;
    font-size: var(--fs-sm);
}

.bar-empty {
    color: var(--ink-2);
    padding: var(--space-2) 0;
}

/* Worst moves: each carries the form marker and the link to the drill */
.worst-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.worst-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--hair);
}

.worst-text {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) 0;
    font-variant-numeric: tabular-nums;
}

.worst-list a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-2);
    font-weight: 500;
}

/* "Drill it" is a quiet row action, not a link: ink-2, no underline, ink on hover */
.worst-list a,
.weakness-examples a {
    color: var(--ink-2);
    text-decoration: none;
}

.worst-list a:hover,
.weakness-examples a:hover {
    color: var(--ink);
}

/* Tablet and phone */
@media (max-width: 1100px) {
    .weakness-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "title meter action"
            "trend trend trend"
            "examples examples examples";
    }

    .weakness-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

@media (max-width: 760px) {
    .history-layout h1 {
        font-size: var(--fs-2xl);
    }

    .chart-grid-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .weakness-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title action"
            "meter meter"
            "trend trend"
            "examples examples";
        gap: var(--space-2) var(--space-3);
    }

    .history-filters select,
    .history-filters .fc-select {
        flex: 1 1 100%;
    }

    /* Session table: stacked rows (global .stacked-table), the action cell last */
    .history-table td:last-child {
        padding-top: var(--space-3);
    }

    .history-table td:last-child .btn {
        width: 100%;
    }
}