/*
 * LCA Maths activity skin.
 * Layered on top of activities/mfl/shared/css/activity-common.css.
 * Visual language: warmer, slightly more playful than skills-for-life,
 * aimed at LCA (Leaving Cert Applied) students 16–18; larger touch targets
 * for iPad/Chromebook; British/Irish English throughout.
 */

:root {
    --maths-primary: #1F6FB2;
    --maths-primary-dark: #155484;
    --maths-accent: #E86A33;
    --maths-accent-dark: #BA4C1A;
    --maths-success: #3E8E7E;
    --maths-warning: #D7A23E;
    --maths-danger: #B04A3F;
    --maths-bg: #F6F7FB;
    --maths-surface: #FFFFFF;
    --maths-surface-alt: #EEF3F9;
    --maths-border: #C7CFDB;
    --maths-ink: #1F2933;
    --maths-ink-muted: #556070;
    --maths-grid-line: #D6DDE8;
    --maths-focus-ring: #E86A33;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--maths-bg);
    color: var(--maths-ink);
    font-size: 1.05rem;
    line-height: 1.5;
}

.maths-activity .activity-header {
    border-radius: 10px !important;
    padding: 0.6rem 0.9rem;
    background: var(--maths-surface);
    border: 1px solid var(--maths-border) !important;
    box-shadow: none;
    margin-bottom: 0.75rem;
    gap: 0.6rem;
}

.maths-activity .header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.maths-activity .activity-instructions {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--maths-ink-muted);
    flex: 1 1 240px;
    min-width: 0;
}

.maths-activity .controls-container {
    flex-direction: row;
    align-items: center;
}

.maths-activity .btn-control {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    min-height: 36px;
}

.maths-activity h1,
.maths-activity h2,
.maths-activity h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--maths-primary);
    letter-spacing: -0.01em;
}

.maths-activity h2 { font-size: 1.6rem; }
.maths-activity h3 { font-size: 1.25rem; }

.maths-activity .btn-control {
    background: var(--maths-surface);
    border: 2px solid var(--maths-border);
    color: var(--maths-ink);
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    box-shadow: none;
    min-height: 44px;
}

.maths-activity .btn-control:hover {
    background: var(--maths-surface-alt);
    border-color: var(--maths-primary);
    transform: none;
    box-shadow: none;
}

.maths-activity .btn-primary-activity {
    background: var(--maths-primary);
    border: none;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    box-shadow: none;
    min-height: 48px;
}

.maths-activity .btn-primary-activity:hover {
    background: var(--maths-primary-dark);
    transform: none;
    box-shadow: none;
}

.maths-activity .btn-accent-activity {
    background: var(--maths-accent);
    border: none;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    box-shadow: none;
    min-height: 48px;
}

.maths-activity .btn-accent-activity:hover {
    background: var(--maths-accent-dark);
}

.maths-activity .maths-card {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 1.4rem;
    margin-bottom: 1.1rem;
}

.maths-activity .maths-card h3 {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

.maths-activity .maths-label {
    display: block;
    font-weight: 700;
    color: var(--maths-ink);
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.maths-activity .maths-hint {
    color: var(--maths-ink-muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.maths-activity input[type="number"],
.maths-activity input[type="text"],
.maths-activity select,
.maths-activity textarea {
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    padding: 0.55rem 0.75rem;
    border: 2px solid var(--maths-border);
    border-radius: 8px;
    background: var(--maths-surface);
    color: var(--maths-ink);
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

.maths-activity input[type="number"]:focus,
.maths-activity input[type="text"]:focus,
.maths-activity select:focus,
.maths-activity textarea:focus {
    outline: 3px solid var(--maths-focus-ring);
    outline-offset: 1px;
    border-color: var(--maths-primary);
}

.maths-activity input[type="range"] {
    width: 100%;
    accent-color: var(--maths-primary);
    height: 30px;
}

.maths-activity .maths-toggle-group {
    display: inline-flex;
    border: 2px solid var(--maths-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--maths-surface);
}

.maths-activity .maths-toggle-group button {
    background: transparent;
    border: none;
    padding: 0.6rem 1.1rem;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--maths-ink);
    cursor: pointer;
    min-height: 44px;
}

.maths-activity .maths-toggle-group button[aria-pressed="true"] {
    background: var(--maths-primary);
    color: #fff;
}

.maths-activity .maths-pill {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--maths-surface-alt);
    color: var(--maths-primary-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Shared challenge alert panel — the yellow banner at the top of an
 * activity that holds the target prompt, the Check button, and (after a
 * Check) the inline result message. Activities add `.maths-target-panel`
 * alongside their widget-prefixed class (e.g. `pvb-target-panel`) so any
 * widget-specific tweaks still apply as overrides. */
.maths-activity .maths-target-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem;
    background: #fff8e1;
    border: 1px solid #f0c14b;
    border-radius: 14px;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1rem;
}
.maths-activity .maths-target-panel[hidden] { display: none; }

/* Inline result message that appears as a full-width row inside the
 * target panel after the learner clicks Check. Variants: .success / .miss
 * / .warning. Markup also includes `aria-live="polite"` and
 * `role="status"` so screen readers announce the result. */
.maths-activity .maths-callout {
    box-sizing: border-box;
    flex: 0 0 100%;
    border-radius: 14px;
    padding: 0.75rem 0.875rem;
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1.35;
}

.maths-activity .maths-callout[hidden] { display: none; }

.maths-activity .maths-callout.success {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #66bb6a;
}

.maths-activity .maths-callout.miss {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #ef5350;
}

.maths-activity .maths-callout.warning {
    background: #FBF1DF;
    color: #8d4e0b;
    border: 1px solid var(--maths-warning);
}

/* Standard Check-button look. Activities add `.maths-check-btn`
 * alongside their widget-prefixed class. State classes
 * (.is-correct / .is-miss) are toggled in JS at the moment the result
 * lands so the button itself reflects the outcome — quick visual hit
 * paired with the explanatory callout below it. */
.maths-activity .maths-check-btn {
    background: var(--maths-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, transform 80ms ease;
}

.maths-activity .maths-check-btn:hover { background: var(--maths-primary-dark); }

.maths-activity .maths-check-btn.is-correct {
    background: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.25);
}

.maths-activity .maths-check-btn.is-miss {
    background: #c62828;
    animation: maths-check-shake 320ms ease-out;
}

@keyframes maths-check-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.maths-activity .maths-scoreboard {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0.9rem;
    background: var(--maths-surface-alt);
    border-radius: 999px;
    font-weight: 700;
    color: var(--maths-primary-dark);
}

.maths-activity .maths-scoreboard .score {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--maths-primary);
}

@media (max-width: 640px) {
    body { font-size: 1rem; }
    .maths-activity .activity-instructions { font-size: 0.9rem; }
    .maths-activity h2 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .maths-activity * { transition: none !important; animation: none !important; }
}

/*
 * Display mode — widgets rendered in content/introduction steps where
 * the widget is the explanation, not an activity. Two conventions are in
 * play across the maths widgets and both have to match here:
 *
 *   - `body[data-display-mode="true"]` — the newer LCA-era convention
 *     (coin-counter, trend-line, comparison-cards, shape-measurer,
 *     payslip-explorer).
 *   - `body.display-mode` — the older convention used by the primary
 *     maths widgets (place-value-blocks, fraction-strips, balance-scales,
 *     number-line, hundred-square, ...).
 *
 * The widget's own activity-header (instructions text + mode chip +
 * controls) is hidden entirely in either case: the parent lesson page
 * already has its own caption above the iframe, and display widgets are
 * flush snapshots with no controls to expose. Each widget's CSS still
 * disables interaction. Body padding is also stripped so the snapshot
 * sits flush against the iframe edges.
 */
.maths-activity[data-display-mode="true"] .activity-header,
body.display-mode .activity-header {
    display: none;
}

.maths-activity[data-display-mode="true"] .activity-container,
body.maths-activity[data-display-mode="true"],
body.display-mode .activity-container,
body.maths-activity.display-mode {
    padding: 0;
    margin: 0;
    background: transparent;
}