/* AbildskovUndervisning - abildskovundervisning.dk */

.double-half-menu .addition-menu-header { margin-bottom: 5px; }
.double-half-menu .page-title { font-size: clamp(1.7rem, 5vh, 2.4rem); margin-bottom: 4px; }
.double-half-menu .addition-setting-section { margin-bottom: 5px; }
.double-half-menu .addition-setting-title { font-size: 1rem; margin-bottom: 3px; }
.double-half-menu .addition-option-button { min-height: 34px; padding: 4px 8px; }
.double-half-menu .addition-menu-actions { margin-top: 5px; }
.double-half-menu-options { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.double-half-ranges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.double-half-types .addition-prefill-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.double-half-line-pair, .double-half-figure-pair {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.double-half-line-grid, .double-half-figure-grid {
    display: block;
    flex: 0 0 auto;
    width: min(42vw, 220px, calc((var(--app-vh, 100vh) - 320px) * 0.9));
    height: auto;
    border: 2px solid #770000;
    background: #1a0000;
    touch-action: none;
}
.double-half-line-grid .double-half-tick { stroke-width: 0.035; }
.double-half-line-grid, .double-half-figure-grid {
    width: min(42vw, 220px, calc((var(--app-vh, 100vh) - 320px) * 0.72));
}
.double-half-line-grid .double-half-reference { stroke-width: 0.2; }
.double-half-line-grid .double-half-drawn { stroke-width: 0.2; }
.figure-filled { fill: #ffd44d; stroke: #770000; stroke-width: 0.05; }
.figure-empty { fill: #1a0000; stroke: #4a0000; stroke-width: 0.05; }
.figure-clickable { cursor: pointer; }
.figure-selected { fill: #4cd964; background: #4cd964 !important; }
.figure-mirror-line { stroke: #4cd964; stroke-width: 0.12; pointer-events: none; }
.double-half-figure-choices {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: min(35vw, 145px, calc((var(--app-vh, 100vh) - 320px) * 0.62));
}
.double-half-choice-cell {
    aspect-ratio: 1;
    border: 1px solid #770000;
    background: #1a0000;
    cursor: pointer;
}

.double-half-tick { stroke: #775050; stroke-width: 1; }
.double-half-reference { stroke: #ff4d4d; stroke-width: 7; stroke-linecap: round; }
.double-half-start { fill: #4cd964; }
.double-half-drawn { stroke: #4cd964; stroke-width: 6; stroke-linecap: round; }

.double-half-result.addition-training-result { width: min(96vw, 920px); margin: 0 auto; padding: 4px; gap: 5px; }
.double-half-result .addition-training-result-title,
.double-half-result .addition-training-result-score { margin: 0; font-size: 1.1rem; }
.double-half-result .addition-training-result-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    max-height: none;
    overflow: visible;
}
.double-half-result .addition-training-result-row { padding: 3px 6px; font-size: 0.9rem; }
.double-half-result .addition-training-result-question,
.double-half-result .addition-training-result-correction { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 600px), (max-height: 500px) {
    .double-half-result .addition-training-result-list { grid-template-columns: 1fr; }
    .double-half-ranges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .double-half-line-grid, .double-half-figure-grid { width: min(40vw, 200px); }
}