/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-see-then-and-now
 *
 * Budget: a FIXED 620px iframe in explore. Two panels plus a verdict row per
 * aspect, so the panels stay small and the grid does the work.
 * Palette + [hidden] fix: ../shared/css/see-activity.css
 */

.tn-container { display: flex; flex-direction: column; gap: .35rem; }

.tn-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.tn-panel { margin: 0; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.tn-cap { display: flex; align-items: baseline; gap: .4rem; }

.tn-when {
    font-weight: 800;
    color: var(--see-ink);
    font-size: .92rem;
}

.tn-date { font-size: .76rem; color: var(--maths-ink-muted); font-weight: 700; }

.tn-stage { min-height: 132px; max-height: 156px; }
.tn-stage .sv-viewport { min-height: 116px; }

.tn-sub { margin: 0; font-size: .78rem; color: var(--maths-ink-muted); line-height: 1.25; }

/* ------------------------------------------------------------- the grid
 * The finished grid IS the lesson's product - a row per aspect, a verdict per
 * row - so it is styled to be readable from the back of a room, not tucked
 * under the pictures. */
/* The grid is the product and must be fully visible, so the PANELS give way
 * to it rather than the other way round. The cap is a safety net for a lesson
 * with many aspects: inside a fixed 620px iframe something has to yield, and
 * an unreachable last row is worse than a scroll. */
.tn-grid-wrap { overflow: auto; max-height: 236px; }

.tn-groups { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .25rem; }

.tn-group {
    min-height: 34px;
    padding: .15rem .7rem;
    border-radius: 999px;
    border: 2px solid var(--maths-border);
    background: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    color: var(--see-ink);
    cursor: pointer;
}

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

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

.tn-grid th, .tn-grid td {
    border: 1px solid var(--maths-grid-line);
    padding: .1rem .4rem;
    text-align: center;
}

.tn-grid thead th {
    background: var(--see-subtle);
    color: var(--see-ink);
    font-weight: 800;
    font-size: .82rem;
}

.tn-th-aspect, .tn-row-aspect { text-align: left; font-weight: 700; font-size: .86rem; }
.tn-row-aspect { cursor: pointer; }

.tn-vote {
    width: 100%;
    min-height: 36px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--see-accent);
    border-radius: 6px;
}

/* "chosen", never "correct": nothing in this interactive is marked */
.tn-vote.is-chosen, .tn-grid td.is-chosen {
    background: var(--see-soft);
    color: var(--see-accent);
}

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

.tn-detail-row td {
    text-align: left;
    background: var(--maths-surface-alt);
    font-size: .82rem;
    line-height: 1.3;
}

.tn-detail-row p { margin: 0 0 .15rem; }
.tn-detail-row strong { color: var(--see-ink); }

.tn-summary {
    margin: 0;
    padding: .28rem .7rem;
    border-radius: 10px;
    background: var(--see-subtle);
    border: 1px solid var(--see-bright);
    color: var(--see-ink);
    font-weight: 700;
    font-size: .95rem;
}

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

#tnSyncBtn.is-on { background: var(--see-subtle); border-color: var(--see-bright); }

/* ----------------------------------------------------------- display mode */
body.display-mode .tn-groups { display: none !important; }
body.display-mode .tn-container { gap: .25rem; }
body.display-mode .tn-stage { min-height: 168px; max-height: 200px; }
body.display-mode .tn-stage .sv-viewport { min-height: 152px; }
body.display-mode .tn-grid-wrap { max-height: 300px; }
body.display-mode .tn-grid th, body.display-mode .tn-grid td { font-size: .92rem; padding: .18rem .5rem; }
body.display-mode .tn-summary { text-align: center; }

@media (max-width: 640px) {
    .tn-panels { grid-template-columns: 1fr; }
    .tn-stage { min-height: 150px; max-height: 180px; }
    .tn-stage .sv-viewport { min-height: 134px; }
}


/* =====================================================================
 * Board pass (31 Oct 2026): readable type, 44px targets, fits the frame
 * The pictures were capped at 156px and the verdict grid was 11-14px type in a
 * box sized for a 620px lesson frame. Laptop and board frames get 44px targets
 * and larger type, and the pictures take the frame height the grid leaves.
 * Display mode is not touched.
 * ===================================================================== */
.tn-look {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.tn-look:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; border-radius: 4px; }
.tn-group:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }
#tnSyncBtn:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

@media (min-width: 700px) {
    body.maths-activity:not(.display-mode) .tn-grid th.tn-row-aspect,
    body.maths-activity:not(.display-mode) .tn-grid th.tn-th-aspect { text-align: left; padding-left: .6rem; }
    body.maths-activity:not(.display-mode) .tn-when { font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .tn-date { font-size: .9rem; }
    body.maths-activity:not(.display-mode) .tn-sub { font-size: .92rem; }
    body.maths-activity:not(.display-mode) .tn-group { min-height: 44px; font-size: .95rem; padding: .15rem 1rem; }
    body.maths-activity:not(.display-mode) .tn-grid thead th { font-size: .95rem; }
    body.maths-activity:not(.display-mode) .tn-th-aspect,
    body.maths-activity:not(.display-mode) .tn-row-aspect { font-size: 1.02rem; }
    body.maths-activity:not(.display-mode) .tn-look { min-height: 44px; line-height: 44px; }
    body.maths-activity:not(.display-mode) .tn-vote { min-height: 44px; font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .tn-detail-row td { font-size: .98rem; }
    body.maths-activity:not(.display-mode) .tn-summary { font-size: 1.05rem; padding: .4rem .8rem; }
    body.maths-activity:not(.display-mode) .tn-grid-wrap { max-height: 42dvh; }
}
@media (min-width: 1000px) and (min-height: 600px) {
    body.maths-activity:not(.display-mode) .tn-container {
        height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden;
        padding-top: .6rem; padding-bottom: .6rem;
    }
    body.maths-activity:not(.display-mode) .activity-header { flex: 0 0 auto; }
    body.maths-activity:not(.display-mode) .tn-panels { flex: 1 1 0; min-height: 150px; grid-template-rows: minmax(0, 1fr); }
    body.maths-activity:not(.display-mode) .tn-panel { min-height: 0; }
    body.maths-activity:not(.display-mode) .tn-stage { flex: 1 1 auto; min-height: 0; max-height: none; display: flex; flex-direction: column; box-sizing: border-box; }
    body.maths-activity:not(.display-mode) .tn-stage .sv-viewport { flex: 1 1 auto; height: auto; min-height: 0; }
    body.maths-activity:not(.display-mode) .tn-grid-wrap { flex: 0 0 auto; max-height: 45dvh; }
    body.maths-activity:not(.display-mode) .tn-summary,
    body.maths-activity:not(.display-mode) .tn-groups { flex: 0 0 auto; }
}
@media (min-width: 1500px) and (min-height: 760px) {
    body.maths-activity:not(.display-mode) .tn-container { gap: .6rem; }
    body.maths-activity:not(.display-mode) .tn-panels { gap: 1rem; }
    body.maths-activity:not(.display-mode) .tn-when { font-size: 1.4rem; }
    body.maths-activity:not(.display-mode) .tn-date { font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .tn-sub { font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .tn-group { min-height: 52px; font-size: 1.1rem; }
    body.maths-activity:not(.display-mode) .tn-grid thead th { font-size: 1.15rem; padding: .3rem .5rem; }
    body.maths-activity:not(.display-mode) .tn-th-aspect,
    body.maths-activity:not(.display-mode) .tn-row-aspect { font-size: 1.3rem; padding-left: .7rem; }
    body.maths-activity:not(.display-mode) .tn-look { min-height: 56px; line-height: 56px; }
    body.maths-activity:not(.display-mode) .tn-vote { min-height: 56px; font-size: 1.4rem; }
    body.maths-activity:not(.display-mode) .tn-detail-row td { font-size: 1.2rem; padding: .4rem .8rem; }
    body.maths-activity:not(.display-mode) .tn-summary { font-size: 1.3rem; padding: .6rem 1rem; }
}