/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-decimal-grid
 */
/*
 * decimal-grid — a 10×10 "one whole" hundredths grid. Tap cells to shade
 * hundredths; read-outs show the decimal / fraction / percent. Companion
 * idea to hundred-square, but the cells are deliberately unlabelled (the
 * whole square is one, not one hundred).
 */

.maths-activity .dg-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
}

.maths-activity .dg-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0;
    width: min(360px, 70vw);
    aspect-ratio: 1 / 1;
    /* Outer frame is heavier than the cell lines so "one whole" reads as a
     * single square that happens to be cut into a hundred. */
    border: 3px solid #1b5e20;
    background: #1b5e20;
    border-radius: 6px;
    overflow: hidden;
}

.maths-activity .dg-cell {
    appearance: none;
    border: 0.5px solid #9cc7a0;
    background: #ffffff;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 90ms ease-out;
}

.maths-activity .dg-cell:hover { background: #e8f5e9; }
.maths-activity .dg-cell:focus { outline: 2px solid var(--maths-primary, #2E7D32); outline-offset: -2px; }

.maths-activity .dg-cell.dg-shaded { background: #2E7D32; }
.maths-activity .dg-cell.dg-shaded:hover { background: #2E7D32; }

/* Read-outs to the side of the grid (or below on narrow screens). */
.maths-activity .dg-readouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 0.6rem 0.9rem;
}

.maths-activity .dg-readout {
    background: #ffffff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    text-align: center;
    min-width: 110px;
}

.maths-activity .dg-readout-label {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.68rem;
    color: #6b7280;
    margin-bottom: 0.15rem;
}

.maths-activity .dg-readout-value {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: #1b5e20;
    font-variant-numeric: tabular-nums;
}

.maths-activity .dg-mode-chip {
    display: inline-block;
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-top: 0.25rem;
}

.maths-activity .dg-target-label {
    font-weight: 800;
    color: #8d4e0b;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.maths-activity .dg-target-prompt { flex: 1; font-weight: 700; color: #1f2937; }

.maths-activity .dg-your-turn {
    margin-top: 1.25rem;
    background: #f1f8e9;
    border: 1px solid #aed581;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.maths-activity .dg-your-turn-label {
    font-weight: 800;
    color: #33691e;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.maths-activity .dg-your-turn-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #1f2937;
    font-weight: 600;
}

.maths-activity .dg-your-turn-list li { margin-bottom: 0.25rem; }

/* Display mode — read-only worked example. Cells locked, controls hidden,
 * the stage tightened so it doesn't dominate the lesson page. Your-turn
 * prompts stay (display-only discussion prompts). */
body.display-mode .dg-target-panel,
body.display-mode .dg-callout,
body.display-mode #challengeRunner { display: none !important; }

body.display-mode .dg-cell { cursor: default !important; pointer-events: none; }
body.display-mode .dg-cell:hover { background: #ffffff; }
body.display-mode .dg-cell.dg-shaded:hover { background: #2E7D32; }

body.display-mode .dg-stage {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

body.display-mode .dg-grid {
    width: min(300px, 60vw);
}