/*
 * coin-counter — Irish-euro tally widget. Two-panel layout: denomination
 * rail (coins + notes) on the left, tray with live total on the right.
 * Stylised CSS-only coin and note faces — no imagery — to keep the
 * widget lightweight and avoid reproducing copyrighted banknote designs.
 */

.maths-activity .cn-mode-chip {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--maths-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.maths-activity .cn-mode-chip.cn-mode-challenge {
    background: var(--maths-primary);
}

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

.maths-activity .cn-target-label i {
    margin-right: 0.4rem;
    color: var(--maths-primary);
}

.maths-activity .cn-target-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--maths-primary-dark);
    font-variant-numeric: tabular-nums;
    flex: 1;
    min-width: 120px;
}

.maths-activity .cn-check-btn {
    min-width: 140px;
}

.maths-activity .cn-check-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Main two-panel layout */
.maths-activity .cn-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.3fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.maths-activity .cn-rail {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 10px;
    padding: 0.85rem;
}

.maths-activity .cn-section-heading {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--maths-ink-muted);
}

.maths-activity .cn-section-heading + .cn-section-heading {
    margin-top: 1rem;
}

.maths-activity .cn-rail-grid {
    display: grid;
    gap: 0.5rem;
}

.maths-activity .cn-rail-coins {
    grid-template-columns: repeat(4, 1fr);
}

.maths-activity .cn-rail-notes {
    grid-template-columns: repeat(3, 1fr);
}

/* Denomination buttons (rail) */
.maths-activity .cn-denom-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    transition: transform 0.08s ease, border-color 0.1s ease, background 0.1s ease;
}

.maths-activity .cn-denom-btn:hover {
    background: var(--maths-surface-alt);
    border-color: var(--maths-border);
}

.maths-activity .cn-denom-btn:focus-visible {
    outline: 3px solid var(--maths-focus-ring);
    outline-offset: 2px;
}

.maths-activity .cn-denom-btn:active {
    transform: scale(0.96);
}

/* Coin faces — circular, two-tone colours loosely based on Irish euro coins */
.maths-activity .cn-coin {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #2a2012;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.01em;
    position: relative;
    flex-shrink: 0;
}

.maths-activity .cn-coin::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.maths-activity .cn-coin-copper {
    background: radial-gradient(circle at 35% 30%, #d98c5c, #a65a2a 75%);
    color: #3a1b0a;
}

.maths-activity .cn-coin-gold {
    background: radial-gradient(circle at 35% 30%, #f4d77a, #c89a2e 75%);
}

.maths-activity .cn-coin-twotone-silver {
    background: radial-gradient(circle at 35% 30%, #f1efe6, #c7bfa8 60%);
    border: 3px solid #d8b94f;
    box-sizing: border-box;
}

.maths-activity .cn-coin-twotone-gold {
    background: radial-gradient(circle at 35% 30%, #f4d77a, #d1a23a 60%);
    border: 3px solid #c7bfa8;
    box-sizing: border-box;
}

/* Note faces — rounded-rect, colours loosely based on euro notes */
.maths-activity .cn-note {
    width: 78px;
    height: 42px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    position: relative;
}

.maths-activity .cn-note::before,
.maths-activity .cn-note::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transform: translateY(-50%);
    pointer-events: none;
}

.maths-activity .cn-note::before { left: 4px; }
.maths-activity .cn-note::after  { right: 4px; }

.maths-activity .cn-note-grey    { background: linear-gradient(135deg, #8b8fa8, #6d7192); }
.maths-activity .cn-note-red     { background: linear-gradient(135deg, #d55a59, #a43c3b); }
.maths-activity .cn-note-blue    { background: linear-gradient(135deg, #4e91c8, #265e8e); }
.maths-activity .cn-note-orange  { background: linear-gradient(135deg, #e09558, #b8682d); }
.maths-activity .cn-note-green   { background: linear-gradient(135deg, #5fa77f, #2f7351); }

/* Tray and total */
.maths-activity .cn-tray-wrap {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 10px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
}

.maths-activity .cn-total-bar {
    background: var(--maths-surface-alt);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.maths-activity .cn-total-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--maths-ink-muted);
}

.maths-activity .cn-total-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--maths-primary-dark);
    font-variant-numeric: tabular-nums;
    flex: 1;
    line-height: 1;
    min-width: 110px;
}

.maths-activity .cn-total-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--maths-ink-muted);
}

.maths-activity .cn-tray {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem;
    background: repeating-linear-gradient(
        45deg,
        #fafbfd,
        #fafbfd 10px,
        #f3f5fa 10px,
        #f3f5fa 20px
    );
    border: 2px dashed var(--maths-border);
    border-radius: 10px;
    min-height: 160px;
    align-content: flex-start;
}

.maths-activity .cn-tray:empty + .cn-tray-empty {
    display: flex;
}

.maths-activity .cn-tray-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--maths-ink-muted);
    font-size: 0.95rem;
    margin-top: -160px;
    height: 160px;
    pointer-events: none;
    text-align: center;
    padding: 0 1rem;
}

.maths-activity .cn-tray-empty i {
    font-size: 1.3rem;
    color: var(--maths-accent);
}

/* Tray items are buttons (click to remove) wrapping a coin/note face */
.maths-activity .cn-tray-item {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0.25rem;
    cursor: pointer;
    position: relative;
    transition: transform 0.08s ease, border-color 0.1s ease;
}

.maths-activity .cn-tray-item:hover {
    border-color: var(--maths-danger);
}

.maths-activity .cn-tray-item:hover::after {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--maths-danger);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.maths-activity .cn-tray-item:focus-visible {
    outline: 3px solid var(--maths-focus-ring);
    outline-offset: 2px;
}

/* Result callout (challenge mode) */

/* Your turn */
.maths-activity .cn-your-turn {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-left: 6px solid var(--maths-accent);
    border-radius: 10px;
    padding: 0.9rem 1.15rem;
}

.maths-activity .cn-your-turn-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--maths-accent-dark);
    margin-bottom: 0.5rem;
}

.maths-activity .cn-your-turn-label i {
    margin-right: 0.4rem;
}

.maths-activity .cn-your-turn-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--maths-ink);
    font-size: 1rem;
    line-height: 1.5;
}

.maths-activity .cn-your-turn-list li + li {
    margin-top: 0.35rem;
}

@media (max-width: 720px) {
    .maths-activity .cn-layout {
        grid-template-columns: 1fr;
    }
    .maths-activity .cn-rail-coins {
        grid-template-columns: repeat(4, 1fr);
    }
    .maths-activity .cn-rail-notes {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 420px) {
    .maths-activity .cn-rail-coins {
        grid-template-columns: repeat(4, 1fr);
    }
    .maths-activity .cn-rail-notes {
        grid-template-columns: repeat(3, 1fr);
    }
    .maths-activity .cn-coin {
        width: 44px;
        height: 44px;
        font-size: 0.8rem;
    }
    .maths-activity .cn-note {
        width: 64px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* Display mode — content-step explainer. The tray with its preset
 * coins/notes is the focus; the live total moves to the left as a
 * compact stacked readout (label / value / count) so the lesson page
 * uses the horizontal room that the rail would have taken. Hide the
 * rail (interactive add surface), target panel, callout, challenge
 * runner, and the empty-tray hint (display lessons preset the tray
 * contents, so it's never empty). Your-turn prompts stay — those are
 * display-only discussion prompts.
 */
body.display-mode .cn-rail,
body.display-mode .cn-target-panel,
body.display-mode .cn-callout,
body.display-mode .cn-tray-empty,
body.display-mode #challengeRunner {
    display: none !important;
}

body.display-mode .cn-layout {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

body.display-mode .cn-tray-wrap {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 1rem;
    align-items: stretch;
    padding: 0.75rem;
}

body.display-mode .cn-total-bar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0;
    gap: 0.35rem;
}

body.display-mode .cn-tray {
    min-height: 120px;
    margin-top: 0;
}

body.display-mode .cn-tray-item {
    cursor: default;
    pointer-events: none;
}

body.display-mode .cn-tray-item::after {
    display: none !important;
}