/*
 * unit-converter — place-value ladder.
 *
 * The ladder presents the units of a category as rungs (km, m, cm, mm
 * for length); the gaps between rungs carry the multiplier chips
 * (×10, ×100, ×1000). Each rung has a digit-place strip aligned to a
 * shared decimal-point column, so when the unit changes the digits
 * visibly land in different columns — the place-value rule is what
 * pupils watch happen.
 */

.maths-activity .uc-category-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--maths-border, #e0e7ef);
}

.maths-activity .uc-tab {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--maths-text-muted, #6b7280);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 150ms, border-color 150ms;
}

.maths-activity .uc-tab:hover { color: var(--maths-primary, #2E7D32); }
.maths-activity .uc-tab.is-active {
    color: var(--maths-primary-dark, #1b5e20);
    border-bottom-color: var(--maths-primary, #2E7D32);
}

/* ------ Ladder stage ------ */

.maths-activity .uc-ladder-stage {
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
    margin-bottom: 1rem;
}

.maths-activity .uc-value-editor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
}

.maths-activity .uc-value-editor-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--maths-text-muted, #6b7280);
    margin: 0;
}

.maths-activity .uc-value-editor-input {
    flex: 0 1 9rem;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    outline: none;
    transition: border-color 150ms;
    text-align: right;
}

.maths-activity .uc-value-editor-input:focus {
    border-color: var(--maths-primary, #2E7D32);
}

.maths-activity .uc-value-editor-unit {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--maths-text, #25303f);
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    transition: border-color 150ms;
}

.maths-activity .uc-value-editor-unit:focus {
    outline: none;
    border-color: var(--maths-primary, #2E7D32);
}

.maths-activity .uc-ladder {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.maths-activity .uc-rung {
    display: grid;
    grid-template-columns: 12rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.75rem 0.55rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 150ms, box-shadow 150ms, padding 200ms, opacity 200ms;
    position: relative;
    background: transparent;
    border: 1px solid transparent;
}

/* Side-stripe on From / To rungs — sits flush at the rung's left edge,
   colour-coded so a teacher reads From vs To at IWB distance. */
.maths-activity .uc-rung.is-from::before,
.maths-activity .uc-rung.is-to::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 6px 0 0 6px;
}
.maths-activity .uc-rung.is-from::before { background: var(--maths-primary, #2E7D32); }
.maths-activity .uc-rung.is-to::before   { background: #f4a23c; }

/* Inactive rungs — the ladder reference points the eye doesn't need
   to land on. Smaller height, dimmer, no digit strip. */
.maths-activity .uc-rung.is-inactive {
    padding: 0.15rem 0.75rem 0.15rem 1rem;
    opacity: 0.5;
    cursor: pointer;
}
.maths-activity .uc-rung.is-inactive:hover { opacity: 0.85; background: var(--maths-primary-soft, #e8f5e9); }
.maths-activity .uc-rung.is-inactive .uc-rung-label { font-size: 1rem; }
.maths-activity .uc-rung.is-inactive .uc-rung-fullname { font-size: 0.78rem; }
.maths-activity .uc-rung.is-inactive .uc-digit-strip { display: none; }
.maths-activity .uc-rung.is-inactive .uc-rung-hint { display: none; }

.maths-activity .uc-rung-hint {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--maths-text-muted, #6b7280);
    text-align: right;
    white-space: nowrap;
    padding-left: 0.5rem;
}

.maths-activity .uc-rung.is-from .uc-rung-hint,
.maths-activity .uc-rung.is-to .uc-rung-hint,
.maths-activity .uc-rung.is-passed .uc-rung-hint {
    color: var(--maths-text, #25303f);
}

.maths-activity .uc-rung:hover {
    background: var(--maths-primary-soft, #e8f5e9);
}

.maths-activity .uc-rung.is-from {
    background: var(--maths-primary-soft, #e8f5e9);
    border-color: var(--maths-primary, #2E7D32);
}

.maths-activity .uc-rung.is-to {
    background: #fff5e6;
    border-color: #f4a23c;
}

.maths-activity .uc-rung.is-passed {
    background: #fff8e6;
}

/* Per-step feedback after Check — each rung the learner filled on the
   chain is marked correct (green) or wrong (red), readable at IWB
   distance. Overrides the From/To/passed tints and side-stripe. */
.maths-activity .uc-rung.is-correct {
    background: var(--maths-primary-soft, #e8f5e9);
    border-color: var(--maths-primary, #2E7D32);
}
.maths-activity .uc-rung.is-miss {
    background: #fdecea;
    border-color: #d93025;
}
.maths-activity .uc-rung.is-correct::before,
.maths-activity .uc-rung.is-miss::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 6px 0 0 6px;
}
.maths-activity .uc-rung.is-correct::before { background: var(--maths-primary, #2E7D32); }
.maths-activity .uc-rung.is-miss::before    { background: #d93025; }
.maths-activity .uc-rung.is-correct .uc-digit-cell.is-editable { border-bottom-color: var(--maths-primary, #2E7D32); }
.maths-activity .uc-rung.is-miss .uc-digit-cell.is-editable    { border-bottom-color: #d93025; }

.maths-activity .uc-rung-label {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--maths-primary-dark, #1b5e20);
    line-height: 1;
    flex-wrap: wrap;
}

.maths-activity .uc-rung-fullname {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--maths-text-muted, #6b7280);
    letter-spacing: 0.01em;
}

.maths-activity .uc-rung.is-from .uc-rung-fullname,
.maths-activity .uc-rung.is-to .uc-rung-fullname {
    color: var(--maths-text, #25303f);
}

.maths-activity .uc-rung-label .uc-rung-tag {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--maths-text-muted, #6b7280);
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    line-height: 1;
}

.maths-activity .uc-rung.is-from .uc-rung-tag { background: var(--maths-primary, #2E7D32); }
.maths-activity .uc-rung.is-to .uc-rung-tag   { background: #f4a23c; }

/* ------ Gap (×10 / ×100 / ×1000 chips) ------ */

/* The gap is a vertical stack: short dashed line segment, chip pill,
   short dashed line segment. The two segments meet at the chip's top
   and bottom edges so the pill reads as a marker on a continuous line
   between two rungs. */
.maths-activity .uc-gap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.15rem 0;
    gap: 0;
}

.maths-activity .uc-gap-line {
    width: 0;
    height: 0.7rem;
    border-left: 2px dashed var(--maths-border, #cfd8e3);
}

.maths-activity .uc-gap.is-empty .uc-gap-line {
    height: 0.45rem;
}

.maths-activity .uc-gap-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f3f7fb;
    border: 1px solid var(--maths-border, #cfd8e3);
    color: var(--maths-text, #25303f);
    font-weight: 800;
    font-size: 0.875rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    z-index: 1;
    transition: background-color 200ms, color 200ms, transform 200ms;
}

.maths-activity .uc-gap-chip.is-active {
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    border-color: var(--maths-primary-dark, #1b5e20);
}

.maths-activity .uc-gap-chip.is-pulsing {
    animation: uc-pulse 1.4s ease-in-out infinite;
}

@keyframes uc-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.35); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }
}

/* ------ Digit strip ------ */

.maths-activity .uc-digit-strip {
    display: grid;
    align-items: center;
    justify-content: start;
    justify-self: start;
    width: max-content;
    gap: 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    user-select: none;
}

.maths-activity .uc-digit-cell {
    width: 1.35rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--maths-primary-dark, #1b5e20);
    border-bottom: 1px solid transparent;
    transition: color 250ms, transform 250ms;
}

.maths-activity .uc-digit-cell.is-decimal {
    width: 0.4rem;
    color: var(--maths-text, #25303f);
    font-size: 1.6rem;
    line-height: 1;
}

.maths-activity .uc-digit-cell.is-comma {
    width: 0.4rem;
    color: var(--maths-text-muted, #6b7280);
    font-size: 1.4rem;
    line-height: 1;
    align-items: flex-end;
}

.maths-activity .uc-digit-cell.is-empty { color: transparent; }
.maths-activity .uc-digit-cell.is-zero-fill { color: #bcd7c2; }

.maths-activity .uc-rung.is-to .uc-digit-cell { color: #8d4e0b; }

/* Animated digit slide — when a digit cell switches state, it nudges
   from its previous column into its new one. Implemented via a CSS
   custom property the JS sets on the cell. */
.maths-activity .uc-digit-cell.is-sliding {
    animation: uc-slide 450ms ease-out;
}

@keyframes uc-slide {
    0%   { transform: translateX(var(--uc-slide-from, 0)); opacity: 0.4; }
    60%  { opacity: 1; }
    100% { transform: translateX(0); }
}

/* Editable digit cells in challenge mode. */
.maths-activity .uc-digit-cell.is-editable {
    border-bottom: 2px solid #f4a23c;
    cursor: text;
    background: #fffaf0;
    border-radius: 4px 4px 0 0;
}

.maths-activity .uc-digit-cell.is-editable:focus {
    outline: 2px solid #f4a23c;
    outline-offset: 2px;
}

/* ------ Conversion summary ------ */

.maths-activity .uc-conversion-summary {
    margin-top: 0.75rem;
    background: var(--maths-primary-soft, #e8f5e9);
    color: var(--maths-primary-dark, #1b5e20);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    min-height: 1.6rem;
}

.maths-activity .uc-conversion-summary:empty {
    background: transparent;
    padding: 0;
    min-height: 0;
}

.maths-activity .uc-conversion-summary .uc-summary-multiplier {
    color: #fff;
    background: var(--maths-primary, #2E7D32);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin: 0 0.35rem;
    font-weight: 800;
}

/* ------ Target / mode chip / your-turn (kept) ------ */

.maths-activity .uc-target-label {
    font-weight: 800;
    color: #8d4e0b;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.maths-activity .uc-target-prompt { flex: 1; font-weight: 700; color: #1f2937; }

.maths-activity .uc-mode-chip {
    display: inline-block;
    background: var(--maths-primary-soft, #e8f5e9);
    color: var(--maths-primary-dark, #1b5e20);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.maths-activity .uc-your-turn {
    margin-top: 1rem;
    background: #f3f7fb;
    border: 1px dashed var(--maths-border, #bac6d4);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.maths-activity .uc-your-turn-label { font-weight: 800; color: var(--maths-primary-dark, #1b5e20); margin-bottom: 0.5rem; }
.maths-activity .uc-your-turn-list { margin: 0; padding-left: 1.25rem; }

/* ------ Narrow viewport ------ */

@media (max-width: 640px) {
    .maths-activity .uc-rung {
        grid-template-columns: 8rem 1fr;
        gap: 0.5rem;
    }
    .maths-activity .uc-rung-label { font-size: 1.15rem; }
    .maths-activity .uc-rung-fullname { font-size: 0.75rem; }
    .maths-activity .uc-rung-label .uc-rung-tag { font-size: 0.65rem; padding: 0.12rem 0.45rem; }
    .maths-activity .uc-digit-cell { width: 1.05rem; height: 2rem; font-size: 1.15rem; }
    .maths-activity .uc-digit-cell.is-decimal { width: 0.3rem; }
    .maths-activity .uc-rung-hint { display: none; }
}

/* ------ Display mode ------
 * Content snapshot — the unit ladder with its from/to highlights and the
 * conversion summary are the explanation. Hide the category switcher,
 * value editor, target panel, callout and challenge runner. Your-turn
 * prompts stay — those are display-only discussion prompts.
 */
body.display-mode .uc-category-tabs,
body.display-mode .uc-target-panel,
body.display-mode .uc-callout,
body.display-mode .uc-value-editor,
body.display-mode #challengeRunner { display: none !important; }

body.display-mode .uc-rung { cursor: default; }
body.display-mode .uc-rung:hover { background: transparent; }
body.display-mode .uc-rung.is-from:hover { background: var(--maths-primary-soft, #e8f5e9); }
body.display-mode .uc-rung.is-to:hover { background: #fff5e6; }

body.display-mode .uc-ladder-stage {
    margin-top: 0;
}

body.display-mode .uc-conversion-summary {
    margin-top: 0.5rem;
    padding: 0.45rem 0.85rem;
}