/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-see-field-survey
 *
 * Height budget, and it is not generous. InlineActivityBuilder.BuildSteInteractiveHtml
 * gives an interactive-mode iframe a FIXED 620px that never resizes — display-resize.js
 * posts contentResize only in display mode — so the tally view must fit 620 with no
 * scrolling. Display mode starts at 480 and may grow to a hard cap of 700.
 * That is why pooling SWAPS the view instead of appearing below it.
 */

/* Palette, the display-caption override and the [hidden] fix all live in
 * ../shared/css/see-activity.css, loaded before this file. */

.fs-container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ----------------------------------------------------------------- pickers */
.fs-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    align-items: center;
}

.fs-picker {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.fs-picker-label {
    font-weight: 800;
    color: var(--see-ink);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.fs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.fs-chip {
    min-height: 40px;
    padding: .3rem .85rem;
    border-radius: 999px;
    border: 2px solid var(--maths-border);
    background: #fff;
    color: var(--see-ink);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
}

.fs-chip.is-active {
    background: var(--see-accent);
    border-color: var(--see-accent);
    color: #fff;
}

.fs-chip:focus-visible {
    outline: 3px solid var(--maths-focus-ring);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- tally grid
 * Large hit targets: this runs on an interactive whiteboard with a teacher's
 * finger on it, and on a clipboard at a road junction. 88px minimum.
 */
.fs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
}

.fs-cat {
    --fs-cat-colour: var(--see-accent);
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .5rem .4rem;
    border-radius: 14px;
    border: 2px solid var(--maths-border);
    border-left: 8px solid var(--fs-cat-colour);
    background: #fff;
    color: var(--maths-ink);
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    text-align: center;
    transition: transform .09s ease-out;
}

.fs-cat:focus-visible {
    outline: 3px solid var(--maths-focus-ring);
    outline-offset: 2px;
}

.fs-cat > i {
    font-size: 1.3rem;
    color: var(--fs-cat-colour);
}

.fs-cat-label {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.15;
}

.fs-cat-read {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 26px;
    color: var(--maths-ink-muted);
    font-weight: 700;
}

.fs-cat-num {
    font-weight: 800;
    color: var(--see-ink);
    font-variant-numeric: tabular-nums;
}

.fs-cat-num-big { font-size: 1.6rem; }

.fs-marks line {
    stroke: var(--see-ink);
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* checklist */
.fs-grid[data-entry="checklist"] .fs-cat.is-on {
    background: var(--see-subtle);
    border-color: var(--see-accent);
}

.fs-bump { transform: scale(1.06); }

/* ---------------------------------------------------------------- notes
 * The thing that fit no box. A child writing "a horse" rather than forcing it
 * into "car" is the difference between data and compliance.
 */
.fs-notes {
    border-top: 1px dashed var(--maths-border);
    padding-top: .4rem;
}

.fs-notes-label {
    font-weight: 700;
    font-size: .88rem;
    color: var(--maths-ink-muted);
}

.fs-notes-row {
    display: flex;
    gap: .4rem;
    margin-top: .25rem;
}

.fs-note-input {
    flex: 1 1 auto;
    min-height: 44px;
    padding: .35rem .7rem;
    border-radius: 10px;
    border: 2px solid var(--maths-border);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
}

.fs-note-input:focus-visible {
    outline: 3px solid var(--maths-focus-ring);
    outline-offset: 1px;
}

.fs-note-add { min-height: 44px; white-space: nowrap; }

.fs-note-list {
    list-style: none;
    margin: .3rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.fs-note-list li {
    background: var(--see-subtle);
    border: 1px solid var(--see-bright);
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .9rem;
    color: var(--see-ink);
}

/* --------------------------------------------------------------- actions */
.fs-actions {
    display: flex;
    justify-content: center;
    padding-top: .15rem;
}

.fs-pool { min-height: 48px; font-size: 1.02rem; }

/* ---------------------------------------------------------------- pooled */
.fs-pooled-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.fs-pooled-title {
    margin: 0;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--see-ink);
}

.fs-table-wrap { overflow-x: auto; }

.fs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito', sans-serif;
}

.fs-table th,
.fs-table td {
    border: 1px solid var(--maths-grid-line);
    padding: .3rem .55rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fs-table thead th {
    background: var(--see-subtle);
    color: var(--see-ink);
    font-weight: 800;
}

.fs-table .fs-th-cat,
.fs-table .fs-row-cat {
    text-align: left;
    font-weight: 700;
}

.fs-table .fs-th-total,
.fs-table .fs-td-total {
    background: var(--see-soft);
    font-weight: 800;
}

.fs-swatch {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    margin-right: .4rem;
    vertical-align: -1px;
}

/* Cap both axes. A bar chart does not need 1100px of width, and at full width
 * a 640-wide viewBox scales its height past the whole iframe budget. */
.fs-chart-wrap { max-width: 660px; }
.fs-chart { width: 100%; height: auto; max-height: 210px; }

.fs-chart-label {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    fill: var(--see-ink);
}

.fs-chart-label.end { text-anchor: end; }
.fs-chart-label.start { text-anchor: start; }
.fs-chart-label.muted { fill: var(--maths-ink-muted); font-weight: 600; }

.fs-pooled-notes {
    list-style: disc;
    margin: .25rem 0 0 1.1rem;
    padding: 0;
    color: var(--maths-ink-muted);
    font-size: .9rem;
}

.fs-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.2rem;
    color: var(--maths-ink-muted);
    justify-content: center;
}

/* ----------------------------------------------------------- display mode
 * The header (and with it Reset and Fullscreen) is hidden by the shared rules,
 * so nothing here may depend on a teacher pressing anything.
 */
body.display-mode .fs-tally,
body.display-mode .fs-back,
body.display-mode .fs-notes,
body.display-mode .fs-actions {
    display: none !important;
}

body.display-mode .fs-container { gap: .35rem; }

body.display-mode .fs-pooled-title {
    font-size: 1.25rem;
    text-align: center;
    width: 100%;
}

body.display-mode .fs-table th,
body.display-mode .fs-table td {
    padding: .35rem .7rem;
    font-size: 1.05rem;
}

body.display-mode .fs-chart-label { font-size: 15px; }

@media (max-width: 560px) {
    .fs-grid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
    .fs-notes-row { flex-wrap: wrap; }
}


/* =====================================================================
 * Forms pass (31 Oct 2026): running total, 44px targets, board scale
 * Display mode is not touched (the tally view is hidden there).
 * ===================================================================== */
.fs-total {
    flex: 1 1 100%;
    font-weight: 800;
    font-size: .95rem;
    color: var(--see-accent);
    font-variant-numeric: tabular-nums;
}
.fs-total[hidden] { display: none; }

@media (min-width: 700px) {
    body.maths-activity:not(.display-mode) .fs-chip { min-height: 44px; }
    body.maths-activity:not(.display-mode) .fs-cat-num { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode) .fs-notes-label { font-size: .95rem; }
    body.maths-activity:not(.display-mode) .fs-note-add,
    body.maths-activity:not(.display-mode) .fs-note-input { min-height: 48px; }
    body.maths-activity:not(.display-mode) .fs-note-list li { font-size: 1rem; padding: .25rem .8rem; }
}

@media (min-width: 1500px) and (min-height: 760px) {
    body.maths-activity:not(.display-mode) .fs-tally,
    body.maths-activity:not(.display-mode) .fs-pooled { width: 100%; max-width: 1500px; margin-inline: auto; }
    body.maths-activity:not(.display-mode) .fs-container { gap: 1rem; padding-top: 1rem; }
    body.maths-activity:not(.display-mode) .fs-pickers { gap: .6rem 2rem; }
    body.maths-activity:not(.display-mode) .fs-picker-label { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode) .fs-chip { min-height: 56px; font-size: 1.15rem; padding: .3rem 1.2rem; }
    body.maths-activity:not(.display-mode) .fs-total { font-size: 1.25rem; }
    body.maths-activity:not(.display-mode) .fs-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
    body.maths-activity:not(.display-mode) .fs-cat { min-height: clamp(170px, 27vh, 300px); gap: .5rem; border-radius: 18px; }
    body.maths-activity:not(.display-mode) .fs-cat > i { font-size: 2.4rem; }
    body.maths-activity:not(.display-mode) .fs-cat-label { font-size: 1.35rem; }
    body.maths-activity:not(.display-mode) .fs-cat-read { min-height: 44px; }
    body.maths-activity:not(.display-mode) .fs-cat-num { font-size: 1.4rem; }
    body.maths-activity:not(.display-mode) .fs-cat-num-big { font-size: 2.4rem; }
    body.maths-activity:not(.display-mode) .fs-marks { height: 38px; width: auto; }
    body.maths-activity:not(.display-mode) .fs-notes-label { font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .fs-note-input { font-size: 1.15rem; min-height: 56px; }
    body.maths-activity:not(.display-mode) .fs-note-add { min-height: 56px; font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .fs-note-list li { font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .fs-pool { min-height: 60px; font-size: 1.2rem; padding-inline: 2rem; }
    body.maths-activity:not(.display-mode) .fs-pooled-title { font-size: 1.5rem; }
    body.maths-activity:not(.display-mode) .fs-table th,
    body.maths-activity:not(.display-mode) .fs-table td { padding: .55rem .8rem; font-size: 1.15rem; }
    body.maths-activity:not(.display-mode) .fs-chart-wrap { max-width: 900px; }
    body.maths-activity:not(.display-mode) .fs-chart { max-height: 340px; }
    body.maths-activity:not(.display-mode) .fs-chart-label { font-size: 15px; }
    body.maths-activity:not(.display-mode) .fs-pooled-notes { font-size: 1.1rem; }
}