.image-grid {
    display: grid;
    gap: 0;
    margin: auto;
    border: 0;
}

.image-grid.correct {
    border: 10px solid lightgreen;
}

.image-grid.wrong {
    border: 10px solid #fb6565;
}

.image-grid .row {
    display: contents;
    border: none;
    margin: 0;
    padding: 0;
}

.image-grid .cell {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #444444;
}

.content-grid {
    display: grid;
    gap: 0;
    margin: auto;
    border: none;
    font-size: 18px;
}

.content-grid .row {
    display: contents;
    border: none;
}

.content-grid .cell {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.color-patch {
    width: 3em;
    height: 1.4em;
    padding: 0;
}

table, th, td {
    border: 2px solid #444444;
    border-collapse: collapse;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    width: calc(100% - 20px);
    margin-right: 10px;
    background-color: #ffffff;
}

th {
    text-align: center;
}

td {
    text-align: center;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.text-input {
    width: calc(100% - 25px);
    border: 2px solid #444444;
    background-color: #ffffff;
    color: black;
    font-size: 18px;
    resize: none;
    vertical-align: bottom;
    overflow-y: auto; /* vertical scrollbar when needed */
    overflow-x: hidden; /* no horizontal scroll */
    white-space: pre-wrap; /* keep user newlines */
    word-break: break-word; /* wrap long tokens */
    font-variant-numeric: tabular-nums;
}

/* === overlay highlighter (fixed scrolling) === */
.text-input.editor-wrap {
    position: relative; /* anchor abs children */
    overflow: auto; /* <-- wrapper scrolls */
    padding: 0;
    background-color: #f3f6ff;
}

/* both layers fill the wrapper; DO NOT make them scroll */
.text-input.editor-wrap .editor-input,
.text-input.editor-wrap .editor-overlay {
    position: absolute;
    inset: 0;
    padding: 6px 10px; /* keep in sync for 1:1 alignment */
    font: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    /* removed: overflow-y/x: auto;  (let wrapper scroll) */
}

/* user types here; keep caret visible and ABOVE overlay */
.text-input.editor-wrap .editor-input {
    z-index: 2; /* <-- on top so caret shows */
    background: transparent;
    color: transparent; /* text invisible */
    caret-color: black; /* caret visible */
    outline: none;
    border: none;
}

/* highlights render below; never intercept clicks or scroll */
.text-input.editor-wrap .editor-overlay {
    z-index: 1; /* <-- below editor */
    pointer-events: none;
    background: transparent;
}

.text-input.editor-wrap .editor-overlay .wrong {
    background: #ffcfcf;
}


.text-input.correct {
    background-color: lightgreen;
}

.text-input .wrong {
    background-color: #ffcfcf;
}

.number-input-td {
    padding: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #f3f6ff;
}

.number-input-td.correct {
    background-color: lightgreen;
}

.number-input-td.correct input {
    background-color: lightgreen;
}

.number-input-td.wrong {
    background-color: #ffcfcf;
}

.number-input-td.wrong input {
    background-color: #ffcfcf;
}

.number-input {
    width: 80px;
    font-size: 18px;
    text-align: center;
    border: none;
    background-color: #f3f6ff;
}

.number-input.correct {
    background-color: lightgreen;
}

.number-input.wrong {
    background-color: #ffcfcf;
}


.number-input:focus {
    border: none;
    outline: none;
}

.crossed {
    position: relative; /* needed for absolutely positioned lines */
}

/* tune once here */
:root {
    --cross-thickness: 2px;
    --cross-color: red;
}

.crossed::before,
.crossed::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 30%;
    width: 40%; /* ~√2 * 100% to cover corner-to-corner */
    height: 0; /* we're drawing a line via border */
    border-top: var(--cross-thickness) solid var(--cross-color);
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 2;
    pointer-events: none; /* clicks go through */
}

.crossed::before {
    transform: rotate(45deg);
}

.crossed::after {
    transform: rotate(-45deg);
}

.crossed.contrast {
    --cross-color: white;
}

.paint-brush {
    cursor: url(../img/brush.png), auto;
}