/*
 * Coding Ireland proprietary interactive activity module
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-see-shared-css
 *
 * Shared chrome for every SEE interactive. Loaded after maths-activity.css and
 * before the widget's own stylesheet.
 *
 * Two jobs, both of which every SEE widget would otherwise repeat:
 *
 * 1. The palette. `.maths-activity` is mandatory — the shared display-mode rules
 *    key on it — and it carries the maths blue. Re-declaring the --maths-* names
 *    (rather than inventing --see-* ones) is what makes the SHARED chrome take
 *    SEE's colours, because that chrome reads --maths-* and would never see a new
 *    name. Hues are the earth set from course-pipeline's subject_palette.py, where
 *    white text on the accent holds at 6.8:1.
 *
 * 2. Making `hidden` work. Any author rule with a `display:` value beats the UA
 *    stylesheet's `[hidden] { display: none }`, so a flex container that is also
 *    toggled with the hidden attribute stays on screen. This bit us on the very
 *    first widget: field-survey's "nothing to count yet" message sat under the
 *    pooled results table. Every SEE widget toggles `hidden`, so fix it once.
 */

.see-activity {
    --see-accent: #7c5228;
    --see-ink: #4a3117;
    --see-subtle: #f9f2e9;
    --see-bright: #c99a5f;
    --see-soft: rgba(124, 82, 40, .12);

    --maths-primary: #7c5228;
    --maths-primary-dark: #4a3117;
    --maths-accent: #c99a5f;
    --maths-accent-dark: #a97a3f;
    --maths-bg: #fdfaf6;
    --maths-surface: #ffffff;
    --maths-surface-alt: #f9f2e9;
    --maths-border: #ddc9b0;
    --maths-ink: #2c2116;
    --maths-ink-muted: #6b5844;
    --maths-grid-line: #e6d8c5;
    --maths-focus-ring: #c99a5f;
}

/* display-resize.js injects this caption in display mode, and maths-activity.css
 * hardcodes its background and border as literal greens — not variables — so the
 * custom properties above cannot reach them. */
.see-activity .maths-display-caption {
    color: var(--see-ink);
    background: var(--see-subtle);
    border: 1px solid var(--see-bright);
}

.see-activity [hidden] { display: none !important; }