/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-number-line-jumps
 */
/*
 * number-line-jumps activity styles.
 *
 * The number line and jump arcs are rendered as an SVG so we get
 * crisp scaling on any IWB or tablet. Forward jumps draw an arc
 * above the line in primary blue; back-jumps draw an arc below in
 * accent orange. Each arc carries its size label at the apex.
 */

.nlj-mode-chip {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--maths-surface-alt);
    color: var(--maths-primary-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nlj-target-label {
    font-weight: 800;
    color: #8a5a00;
    font-size: 0.95rem;
    margin-right: 0.5rem;
}

.nlj-target-prompt {
    flex: 1 1 auto;
    color: #6b4500;
    font-weight: 700;
    font-size: 1rem;
}

.nlj-controls {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.nlj-control-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.nlj-control-label {
    font-weight: 700;
    color: var(--maths-ink);
}

.nlj-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--maths-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.nlj-step-btn {
    min-width: 48px;
    min-height: 44px;
    border: 0;
    background: var(--maths-surface-alt);
    color: var(--maths-primary-dark);
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0 0.45rem;
    border-right: 1px solid var(--maths-border);
}

.nlj-step-btn:last-of-type { border-right: 0; }
.nlj-step-btn:hover { background: var(--maths-surface); }
.nlj-step-btn:active { background: var(--maths-primary); color: #fff; }

.nlj-step-value {
    min-width: 3.6rem;
    min-height: 44px;
    border: 0;
    border-right: 1px solid var(--maths-border);
    background: #fff;
    color: var(--maths-primary-dark);
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 0 0.6rem;
}

.nlj-step-value:hover { background: var(--maths-surface-alt); }

.nlj-equation {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--maths-primary-dark);
    padding: 0.25rem 0.8rem;
    background: var(--maths-surface-alt);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.nlj-strategy-hint {
    color: var(--maths-accent-dark);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.25rem 0.65rem;
    background: #FFF7DE;
    border-radius: 8px;
}

.nlj-strategy-hint[hidden] { display: none; }

.nlj-jump-buttons {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.nlj-jump-group {
    flex: 1 1 280px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    border: 1px solid var(--maths-border);
    background: #FAFCFE;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
}

.nlj-jump-group-label {
    font-weight: 800;
    color: var(--maths-primary-dark);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.4rem;
}

.nlj-jump-btn {
    background: var(--maths-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    min-width: 56px;
    min-height: 44px;
    font-variant-numeric: tabular-nums;
    transition: background-color 160ms ease, transform 80ms ease;
}

.nlj-jump-btn:hover { background: var(--maths-primary-dark); }
.nlj-jump-btn:active { transform: translateY(1px); }
.nlj-jump-btn:disabled { background: #b5bcc8; cursor: not-allowed; }

.nlj-jump-btn-back {
    background: var(--maths-accent);
}

.nlj-jump-btn-back:hover { background: var(--maths-accent-dark); }

.nlj-stage {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 1rem;
}

.nlj-line-svg {
    width: 100%;
    height: auto;
    display: block;
    max-height: 280px;
}

.nlj-line { stroke: var(--maths-ink); stroke-width: 2; }
.nlj-tick { stroke: var(--maths-ink-muted); stroke-width: 1.5; }
.nlj-tick-major { stroke: var(--maths-ink); stroke-width: 2; }
/* The halo is load-bearing, not decoration: a backward jump arcs down through
   this label row (apex 200, labels at y 158) and there is nowhere else for
   either to go. Painting the number over the arc with a white outline behind it
   keeps the value legible where they cross — QA #238/#239. paint-order puts the
   stroke behind the fill so the digits keep their shape. */
.nlj-tick-label {
    fill: var(--maths-ink);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
}

.nlj-jump-arc-forward { fill: none; stroke: var(--maths-primary); stroke-width: 2.5; }
.nlj-jump-arc-back { fill: none; stroke: var(--maths-accent); stroke-width: 2.5; stroke-dasharray: 5 4; }

.nlj-jump-label {
    fill: #fff;
    stroke: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    text-anchor: middle;
}

.nlj-jump-pill-forward { fill: var(--maths-primary); }
.nlj-jump-pill-back { fill: var(--maths-accent); }

.nlj-marker { fill: var(--maths-primary); }
.nlj-marker-end { fill: var(--maths-success); }
/* Same halo as the tick labels, for the same reason: a forward jump arcs up
   through this row on its way to the pill, so the start and end values are
   drawn across. These are the two numbers the whole activity is about. */
.nlj-marker-label {
    fill: var(--maths-ink);
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 19px;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
}

.nlj-summary {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.nlj-summary-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.nlj-summary-label {
    font-weight: 700;
    color: var(--maths-ink-muted);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.nlj-summary-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--maths-ink);
    font-size: 1.1rem;
}

.nlj-summary-total {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--maths-primary-dark);
}

.nlj-your-turn {
    background: #FFF7DE;
    border: 1px solid #F0C14B;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-top: 1rem;
}

.nlj-your-turn-label { font-weight: 800; color: #8a5a00; margin-bottom: 0.4rem; }
.nlj-your-turn-list { margin: 0; padding-left: 1.2rem; color: #5e3c00; font-weight: 600; }

/* Display mode strips the jump-button bank entirely — the line already
 * shows the strategy as labelled arcs, the button bank is just clutter
 * for a teacher-led snapshot. The start-value stepper becomes bare text. */
body.display-mode .nlj-jump-buttons {
    display: none;
}

body.display-mode .nlj-step-btn { display: none; }
body.display-mode .nlj-step-value {
    background: transparent;
    border: 0;
    color: var(--maths-primary-dark);
    cursor: default;
    pointer-events: none;
}
body.display-mode .nlj-stepper {
    border: 2px solid transparent;
    background: transparent;
}

body.display-mode .nlj-controls {
    padding-bottom: 0.85rem;
}

/* Numeric keypad popover (same pattern as area-model / equal-groups) */
.nlj-keypad {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #fff;
    border: 2px solid var(--maths-primary);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18);
    padding: 0.8rem;
    width: min(360px, 92vw);
}

.nlj-keypad[hidden] { display: none; }

.nlj-keypad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.nlj-keypad-prompt {
    font-weight: 800;
    color: var(--maths-primary-dark);
}

.nlj-keypad-close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--maths-ink-muted);
}

.nlj-keypad-display {
    text-align: center;
    background: var(--maths-surface-alt);
    border-radius: 10px;
    padding: 0.6rem;
    font-size: 2rem;
    font-weight: 800;
    color: var(--maths-primary-dark);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.6rem;
}

.nlj-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.nlj-key {
    min-height: 54px;
    border: 2px solid var(--maths-border);
    border-radius: 10px;
    background: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--maths-primary-dark);
    cursor: pointer;
}

.nlj-key:hover { background: var(--maths-surface-alt); }
.nlj-key:active { background: var(--maths-primary); color: #fff; }
.nlj-key-back { color: var(--maths-danger); border-color: var(--maths-danger); }
.nlj-key-ok {
    color: #fff;
    background: var(--maths-primary);
    border-color: var(--maths-primary-dark);
}

/* "Type your own jump" buttons — dashed outline so they read as free entry,
   not another fixed size. Placed after the .nlj-jump-btn rules so the
   transparent fill wins on equal specificity. */
.nlj-jump-custom {
    background: transparent;
    color: var(--maths-primary);
    border: 2px dashed var(--maths-primary);
}
.nlj-jump-custom:hover { background: var(--maths-surface-alt); }
.nlj-jump-btn-back.nlj-jump-custom {
    color: var(--maths-accent);
    border-color: var(--maths-accent);
}

/* ---------- Competition layout (board) ----------
 * The jump buttons are the whole task, sixteen of them in two rows, and they were 17px.
 */
html.mcr-compete .maths-activity .nlj-jump-btn { font-size: 1.45rem; padding: 0.35rem 0.7rem; }
/* ---------- end competition layout ---------- */