/*
 * 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-digital-media-literacy-for-you-page
 */
/* for-you-page: Build Your For You Page. Builds on activity-common.css + maths-activity.css (the
 * header, its Reset and Fullscreen buttons, and display-mode header hiding come from those). The
 * look is the tester's: a light page (#f3f6fc), a white card with 24px corners and a #dde5f0 border,
 * text #1e293b, muted text #566179, bold rounded buttons (Like green, Skip grey, Build purple), and a
 * phone with an 8px #1e293b frame and 34px corners. Everything is scoped under .fy, except the page
 * colour on this page's own body class. Sizes inside .fy are in em, so one font size scales it all
 * on a board. */

body.fy-body { background: #f3f6fc; }
body.fy-body .activity-container { padding-bottom: 1rem; }

.fy {
    --fy-ink: #1e293b;
    --fy-muted: #566179;
    --fy-line: #dde5f0;
    --fy-phone-max: 300px;
    --fy-reserve: 12.25rem;    /* the frame height that is not phone, on a narrow frame */
    /* The phone: at most 300px wide (more only in full screen on a board), a 9:16 screen, and small
       enough that the phone, its counter and its buttons fit in the frame together. */
    --fy-phone-w: min(var(--fy-phone-max), calc((100vh - var(--fy-reserve) - 16px) * 0.5625 + 16px));
    display: block;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--fy-ink);
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.45;
}
.fy [hidden] { display: none !important; }
.fy *, .fy *::before, .fy *::after { box-sizing: border-box; }
.fy p, .fy h2, .fy h3, .fy h4, .fy ul { margin: 0; }

.fy-card {
    background: #fff;
    border: 1px solid var(--fy-line);
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 6px 20px rgba(30, 41, 59, 0.06);
}

/* ---- Words ---------------------------------------------------------------- */
.fy .fy-title {
    font-family: inherit;
    font-size: 1.32em;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--fy-ink);
}
.fy .fy-step-title {
    font-family: inherit;
    font-size: 1.1em;
    font-weight: 800;
    line-height: 1.25;
    color: var(--fy-ink);
}
.fy h4 { font-size: 1.02em; font-weight: 800; line-height: 1.3; color: var(--fy-ink); }
.fy-intro-text, .fy-lead { color: var(--fy-muted); font-size: 0.97em; }
.fy-lead { color: var(--fy-ink); font-weight: 600; }

/* ---- Buttons: bold and rounded ---------------------------------------------- */
.fy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fy .fy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-height: 48px;
    padding: 0.5em 1.1em;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1.12em;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(15, 23, 42, 0.2);
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.fy .fy-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.fy .fy-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.2); }
.fy .fy-btn:focus-visible { outline: 3px solid var(--fy-ink); outline-offset: 3px; }
.fy .fy-btn:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; }
.fy .fy-btn-like { background: linear-gradient(180deg, #22c55e 0%, #15803d 100%); }
.fy .fy-btn-like.is-liked { background: linear-gradient(180deg, #15803d 0%, #14532d 100%); }
.fy .fy-btn-skip { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); }
.fy .fy-btn-build { background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%); }
.fy .fy-btn-plain {
    background: #fff;
    color: var(--fy-ink);
    border: 2px solid var(--fy-line);
    text-shadow: none;
    box-shadow: none;
    font-size: 1.02em;
}
.fy .fy-btn-plain:hover:not(:disabled) { border-color: #b8c4d6; filter: none; }

/* ---- Step 1 --------------------------------------------------------------- */
.fy-teach {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "text" "rate" "foot";
}
.fy-intro { grid-area: intro; display: grid; gap: 4px; }
.fy-step1-text { grid-area: text; display: grid; gap: 2px; }
.fy-rate { grid-area: rate; display: grid; gap: 10px; }
.fy-step1-foot { grid-area: foot; display: grid; gap: 8px; }

.fy-rcard {
    --fy-c: #94a3b8;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 2px solid var(--fy-line);
    border-left: 8px solid var(--fy-c);
    border-radius: 18px;
    background: #fff;
}
.fy-rcard.is-new { animation: fy-pop 0.22s ease-out; }
.fy-rcard-emoji { flex: none; font-size: 2.3em; line-height: 1; }
.fy-rcard-words { display: grid; gap: 4px; min-width: 0; }
.fy-rcard-title { font-size: 1.2em; font-weight: 800; line-height: 1.2; }
.fy-chip {
    justify-self: start;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.92em;
    font-weight: 800;
}
.fy-rate-row .fy-btn { flex: 1 1 0; }
.fy-allrated {
    padding: 14px 16px;
    border: 2px dashed #a855f7;
    border-radius: 18px;
    background: #f5f3ff;
    font-weight: 800;
    font-size: 1.1em;
    text-align: center;
}
.fy-tally { font-weight: 800; }
.fy-build-row .fy-btn-build { flex: 1 1 auto; }

@keyframes fy-pop {
    0% { transform: scale(0.96); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- Step 2 --------------------------------------------------------------- */
.fy-feed {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "phone" "bars" "end";
}
.fy-feed-head { grid-area: head; display: grid; gap: 2px; }
.fy-phone-col { grid-area: phone; display: grid; justify-items: center; gap: 8px; align-content: start; }
.fy-counter { font-weight: 800; color: var(--fy-muted); }
.fy-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}
.fy .fy-controls .fy-btn { padding: 0.5em 0.7em; }
.fy .fy-controls .fy-btn-wide { grid-column: 1 / -1; }

.fy-phone {
    width: min(var(--fy-phone-w), 100%);
    border: 8px solid #1e293b;
    border-radius: 34px;
    background: #1e293b;
    box-shadow: 0 12px 28px rgba(30, 41, 59, 0.22);
}
.fy-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: 26px;
    color: #fff;
    background: #334155;
    container-type: inline-size;
}
/* A slow shimmer across the screen. */
.fy-screen-video::before {
    content: '';
    position: absolute;
    inset: -10% -70%;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.26) 50%, transparent 58%);
    transform: translateX(-45%);
    animation: fy-shimmer 4.8s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
}
.fy-pills {
    position: absolute;
    top: 4%;
    left: 4%;
    right: 4%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.fy-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.6em;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    font-weight: 800;
    font-size: 12px;
    font-size: 5cqw;
    line-height: 1.2;
    white-space: nowrap;
}
.fy-dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: #ef4444;
    animation: fy-pulse 1.3s ease-in-out infinite;
    will-change: transform, opacity;
}
.fy-vid-emoji {
    position: absolute;
    left: 0;
    right: 0;
    top: 27%;
    z-index: 2;
    text-align: center;
    font-size: 84px;
    font-size: 34cqw;
    line-height: 1;
    animation: fy-bob 2.4s ease-in-out infinite;
    will-change: transform;
}
.fy-side {
    position: absolute;
    right: 3%;
    bottom: 22%;
    z-index: 2;
    display: grid;
    gap: 9px;
    gap: 3.6cqw;
    justify-items: center;
}
.fy-side-item {
    display: grid;
    justify-items: center;
    font-weight: 800;
    font-size: 11px;
    font-size: 4.7cqw;
    line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.fy-side-icon { font-size: 22px; font-size: 9cqw; line-height: 1.1; }
.fy-side-heart.is-liked { animation: fy-thump 0.45s ease-out; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); }
.fy-caption {
    position: absolute;
    left: 5%;
    right: 21%;
    bottom: 7%;
    z-index: 2;
    display: grid;
    gap: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.fy-vid-title { font-weight: 900; font-size: 15px; font-size: 6.7cqw; line-height: 1.2; }
.fy-vid-topic { font-weight: 700; font-size: 12px; font-size: 5.3cqw; }
.fy-progress {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 3.2%;
    z-index: 2;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.fy-progress-fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transform-origin: left center;
    transform: scaleX(0);
    animation: fy-progress 6s linear infinite;
    will-change: transform;
}
.fy-float {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 4px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fy-float 1.35s ease-out forwards;
}
.fy-float-heart { font-size: 60px; font-size: 26cqw; line-height: 1; }
.fy-float-text {
    padding: 0.15em 0.7em;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    font-weight: 900;
    font-size: 16px;
    font-size: 7cqw;
    white-space: nowrap;
}

/* The end of the feed, and the empty feed. */
.fy-screen-note {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10%;
    text-align: center;
    background: linear-gradient(165deg, #64748b 0%, #334155 55%, #1e293b 100%);
}
.fy-screen-note.is-end { background: linear-gradient(165deg, #c084fc 0%, #7c3aed 55%, #3b0764 100%); }
.fy-note-box { display: grid; gap: 10px; justify-items: center; }
.fy-note-emoji { font-size: 56px; font-size: 24cqw; line-height: 1; }
.fy-note-box p { font-weight: 800; font-size: 15px; font-size: 6.9cqw; line-height: 1.3; }
.fy-note-box .fy-note-title { font-weight: 900; font-size: 19px; font-size: 8.8cqw; line-height: 1.2; }

/* The bars. */
.fy-bars {
    grid-area: bars;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--fy-line);
    border-radius: 18px;
    background: #f8fafd;
}
.fy-note { color: var(--fy-muted); font-size: 0.95em; }
.fy-bar-list { list-style: none; padding: 0; display: grid; gap: 9px; margin-top: 2px; }
.fy-bar-row { display: grid; gap: 3px; }
.fy-bar-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; }
.fy-bar-name { font-weight: 800; }
.fy-bar-text { font-weight: 700; }
.fy-bar-track { height: 14px; border-radius: 99px; background: #e5eaf2; overflow: hidden; }
.fy-bar-fill { height: 100%; width: 0; border-radius: inherit; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fy-bars.is-entering .fy-bar-fill { transform-origin: left center; animation: fy-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.fy-bar-row.is-gone .fy-bar-name,
.fy-bar-row.is-gone .fy-bar-text { color: var(--fy-muted); }

/* The end of Step 2. */
.fy-end { grid-area: end; display: grid; gap: 12px; }
.fy-think {
    display: grid;
    gap: 6px;
    padding: 12px 16px;
    border: 2px solid #fde68a;
    border-radius: 18px;
    background: #fffbeb;
}
.fy-think ul { padding-left: 1.2em; display: grid; gap: 6px; }

.fy-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes fy-shimmer { 0% { transform: translateX(-45%); } 100% { transform: translateX(45%); } }
@keyframes fy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@keyframes fy-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.6); opacity: 0.4; }
}
@keyframes fy-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fy-thump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes fy-float {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    100% { opacity: 0; transform: translate(-50%, -125%) scale(1); }
}

/* ---- A wider frame: two columns ------------------------------------------------ */
@media (min-width: 700px) {
    .fy { --fy-reserve: 13.5rem; }
    .fy-card { padding: 18px 22px; }
    .fy .fy-title { font-size: 1.5em; }
    .fy .fy-step-title { font-size: 1.18em; }

    .fy-teach {
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
        grid-template-areas: "intro rate" "text rate" "foot rate";
        grid-template-rows: auto auto 1fr;
        column-gap: 28px;
        row-gap: 12px;
        align-items: start;
    }
    .fy-rate { align-self: center; }
    .fy-rcard { flex-direction: column; gap: 8px; padding: 18px 16px; text-align: center; }
    .fy-rcard-emoji { font-size: 3.6em; }
    .fy-rcard-words { justify-items: center; }
    .fy-chip { justify-self: center; }
    .fy-step1-foot { align-self: end; }

    .fy-feed {
        grid-template-columns: max(250px, var(--fy-phone-w)) minmax(0, 1fr);
        grid-template-areas: "phone head" "phone bars" "phone end";
        grid-template-rows: auto auto 1fr;
        column-gap: 26px;
        row-gap: 12px;
        align-items: start;
    }
    .fy-controls { max-width: none; }
}

/* ---- Full screen on a board: use the space, readable from the back ------------------ */
@media (min-width: 1500px) and (min-height: 760px) {
    .fy { --fy-phone-max: 420px; max-width: 1640px; font-size: 1.22rem; }
    .fy-card { padding: 24px 32px; }
    .fy-teach { column-gap: 48px; }
    .fy-feed { column-gap: 44px; }
    .fy .fy-btn { min-height: 64px; }
    .fy-bar-track { height: 20px; }
    .fy-controls { max-width: 480px; }
    .fy-rcard { padding: 28px 24px; }
    .fy-rcard-emoji { font-size: 5em; }
    .fy-rcard-title { font-size: 1.5em; }
}

/* ---- Display mode: the board view. The header is hidden and the frame grows to fit, so the
   phone keeps a fixed size rather than one read from the frame height. ------------------------ */
body.display-mode .fy { font-size: 1.15rem; --fy-phone-w: var(--fy-phone-max); }

@media (prefers-reduced-motion: reduce) {
    .fy-screen-video::before { display: none; }
    .fy-float { opacity: 1; }
}

/* ---- A device too slow for the looping decorations (for-you-page.js measures it once, when the first feed
   starts): they stand still, and the one-off movements are skipped. ------------------------------------------- */
.fy.fy-still .fy-screen-video::before { display: none; }
.fy.fy-still .fy-vid-emoji,
.fy.fy-still .fy-dot,
.fy.fy-still .fy-rcard.is-new,
.fy.fy-still .fy-side-heart.is-liked { animation: none; }
.fy.fy-still .fy-progress-fill { animation: none; transform: scaleX(0.3); }
.fy.fy-still .fy-bars.is-entering .fy-bar-fill { animation: none; }
.fy.fy-still .fy-bar-fill { transition: none; }
.fy.fy-still .fy-float { animation: none; opacity: 1; }
.fy.fy-still .fy-btn { transition: none; }