/*
 * 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-slant
 */
/* slant - Digital Media Literacy "Slant". Builds on activity-common.css and
 * maths-activity.css (the header, its controls and the display-mode header-hiding
 * come from those). Everything here sits under .slant. */

.slant {
    --sl-ink: #14282a;
    --sl-soft: #4b5f62;
    --sl-line: #cdd6cd;
    --sl-card: #ffffff;
    --sl-page: #F6F7FB;
    --sl-board: #0f3b3a;
    --sl-board-2: #1b5553;
    --sl-mark-bg: #fff3cf;
    --sl-mark-ink: #6b4b00;
    --sl-go: #137a50;
    --sl-go-bg: #dcf3e6;
    --sl-stop: #bf2c44;
    --sl-warn: #a35f00;
    --sl-warn-bg: #fdeed0;
    font-size: clamp(16px, calc(8px + 1vw), 24px);
    line-height: 1.4;
    color: var(--sl-ink);
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2px 14px;
    overflow-wrap: break-word;
}
.slant [hidden] { display: none !important; }
.slant p { margin: 0; }
.slant [tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- one job */
.sl-job {
    display: grid;
    gap: .65em;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "panel" "post" "bars" "rows";
}
.sl-tag { grid-area: tag; font-weight: 800; color: var(--sl-board-2); font-size: .9em; }
.sl-job.is-extra .sl-tag {
    justify-self: start;
    color: var(--sl-mark-ink);
    background: var(--sl-mark-bg);
    border: 1.5px solid #e6c56a;
    border-radius: 999px;
    padding: .15em .8em;
}
.sl-job > .sl-panel { grid-area: panel; }
.sl-postcol { grid-area: post; min-width: 0; }
.sl-barsblock { grid-area: bars; min-width: 0; }
.sl-rowsblock { grid-area: rows; min-width: 0; }

@media (min-width: 700px) {
    .sl-job {
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
        column-gap: 1.1em;
        row-gap: .6em;
        grid-template-areas: "post tag" "post panel" "post bars" "post rows";
        grid-template-rows: auto auto auto 1fr;
    }
    .sl-postcol { position: sticky; top: 8px; align-self: start; }
}

/* A phone: the bars stay in sight while the edits are pressed below them. */
@media (max-width: 699px) {
    .sl-barsblock {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--sl-page);
        padding: .35em 0 .45em;
        box-shadow: 0 8px 8px -8px rgba(20, 40, 42, .35);
    }
}

/* ---------------------------------------------------------------- the post */
.sl-post { background: var(--sl-card); border: 2px solid var(--sl-line); border-radius: 14px; overflow: hidden; }
.sl-acct { display: flex; align-items: center; gap: .5em; padding: .4em .7em; font-weight: 800; }
.sl-avatar {
    width: 1.9em; height: 1.9em; flex: none; border-radius: 50%;
    background: var(--sl-board-2); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.sl-acct-name { min-width: 0; }
.sl-kind {
    margin-left: auto; flex: none;
    font-size: .8em; font-weight: 800; color: #fff; background: #c8324a;
    border-radius: 999px; padding: .1em .65em;
}
.sl-frame { background: #000; line-height: 0; overflow: hidden; }
.sl-frame svg { display: block; width: 100%; height: auto; transition: filter .35s ease; }
.sl-cap { padding: .5em .75em .25em; font-weight: 700; min-height: 2.2em; }
.sl-cap.empty { color: var(--sl-soft); font-weight: 400; font-style: italic; }
.sl-print { padding: 0 .75em .35em; font-size: .85em; color: var(--sl-soft); }
.sl-note { padding: 0 .75em .5em; font-size: .88em; color: var(--sl-soft); font-weight: 700; }
.sl-madeup { margin-top: .7em; font-size: .8em; color: var(--sl-soft); }

/* ---------------------------------------------------------------- the job panel */
.sl-panel {
    padding: .7em .9em;
    background: var(--sl-card);
    border: 2px solid var(--sl-line);
    border-radius: 12px;
    display: grid;
    gap: .45em;
    align-content: start;
    scroll-margin: 10px;
}
.sl-panel.key { background: #eaf3ec; border-color: #b3cfbd; }
.sl-panel.warn { background: var(--sl-warn-bg); border-color: var(--sl-warn); }
.sl-panel.good { background: var(--sl-go-bg); border-color: var(--sl-go); }
.slant .sl-panel h2,
.slant .sl-end h2 {
    margin: 0;
    font-size: 1.15em;
    line-height: 1.25;
    color: var(--sl-ink);
    letter-spacing: 0;
}
.slant .sl-end h2 { font-size: 1.45em; }
.sl-status { display: grid; gap: .25em; }
.sl-lead { font-size: 1.05em; font-weight: 700; }
.sl-ask { font-weight: 800; }
.sl-check { display: block; }
.sl-mark { font-weight: 800; margin-right: .15em; }
.sl-mark.yes { color: var(--sl-go); }
.sl-mark.no { color: var(--sl-stop); }
.sl-btnrow { display: flex; flex-wrap: wrap; gap: .5em; }

/* ---------------------------------------------------------------- the bars */
.slant .sl-h { margin: 0 0 .3em; font-size: .95em; font-weight: 800; color: var(--sl-ink); letter-spacing: 0; }
.sl-bars { display: grid; gap: .35em .9em; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-bar { display: grid; gap: .12em; }
.sl-bar-top { display: flex; justify-content: space-between; gap: .3em; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-bar-name { min-width: 0; }
.sl-bar.goal .sl-bar-top { font-weight: 800; }
.sl-track { position: relative; display: block; height: .75em; background: #dfe6df; border-radius: 9px; }
.sl-track i { display: block; height: 100%; width: 0; max-width: 100%; border-radius: 9px; background: var(--sl-board-2); transition: width .35s ease; }
.sl-bar.goal .sl-track i { background: #d99700; }
.sl-bar.goal.met .sl-track i { background: var(--sl-go); }
.sl-goalline { position: absolute; top: -.22em; bottom: -.22em; left: 70%; width: .2em; background: var(--sl-ink); border-radius: 2px; }
@media (max-width: 699px) {
    .slant .sl-barsblock .sl-h { font-size: .85em; margin-bottom: .15em; }
    .sl-bars { gap: .2em .6em; font-size: .86em; }
    .sl-track { height: .6em; }
}

/* ---------------------------------------------------------------- the edits */
.sl-rows { display: grid; gap: .55em; }
.sl-row { display: grid; gap: .25em; }
.sl-lab { font-weight: 800; }
.sl-opts { display: flex; flex-wrap: wrap; gap: .4em; }
@media (min-width: 700px) {
    .sl-row { grid-template-columns: 5.4em minmax(0, 1fr); align-items: start; column-gap: .6em; }
    .sl-lab { padding-top: .5em; }
}

.sl-b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-height: 44px;
    padding: .4em .8em;
    border: 2px solid #8fa39b;
    border-radius: 10px;
    background: var(--sl-card);
    color: var(--sl-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-align: left;
    line-height: 1.25;
}
.sl-b:hover:not(:disabled) { border-color: var(--sl-board); background: #f0f6f0; }
.sl-b:disabled { cursor: default; opacity: .6; }
.sl-b[aria-pressed="true"],
.sl-b[aria-pressed="true"]:hover:not(:disabled) { background: var(--sl-mark-bg); border-color: var(--sl-mark-ink); }
.sl-b[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }
.sl-b[aria-pressed="true"]:disabled { opacity: .9; }
.sl-b.primary { background: var(--sl-board); border-color: var(--sl-board); color: #f5f7ee; }
.sl-b.primary:hover:not(:disabled) { background: var(--sl-board-2); border-color: var(--sl-board-2); }
.slant .sl-b:focus-visible { outline: 3px solid #1F4E8C; outline-offset: 2px; }

/* ---------------------------------------------------------------- what you found */
.sl-end { display: grid; gap: .8em; max-width: 52em; margin: 0 auto; }
.sl-found { margin: 0; padding-left: 1.4em; display: grid; gap: .45em; }
.sl-close { gap: .3em; }
.sl-close p { font-weight: 800; font-size: 1.05em; }
.sl-invite { background: var(--sl-mark-bg); border-color: #e6c56a; }
.sl-invite .fa-star { color: #c99400; }

/* ---------------------------------------------------------------- Rusty's clip */
.sl-scene-rusty .sl-rusty-run {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: sl-rusty-run 5.2s ease-in-out infinite;
}
@keyframes sl-rusty-run {
    0%   { transform: translate(80px, 236px) scale(1, 1); }
    46%  { transform: translate(318px, 236px) scale(1, 1); }
    50%  { transform: translate(318px, 236px) scale(-1, 1); }
    96%  { transform: translate(80px, 236px) scale(-1, 1); }
    100% { transform: translate(80px, 236px) scale(1, 1); }
}
.sl-scene-rusty .sl-rusty-bob { animation: sl-rusty-bob .34s ease-in-out infinite alternate; }
@keyframes sl-rusty-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.sl-scene-rusty .sl-leg {
    transform-box: fill-box;
    transform-origin: 50% 10%;
    animation: sl-rusty-leg .34s ease-in-out infinite alternate;
}
.sl-scene-rusty .sl-leg.b { animation-direction: alternate-reverse; }
@keyframes sl-rusty-leg { from { transform: rotate(30deg); } to { transform: rotate(-30deg); } }
.sl-scene-rusty .sl-tail {
    transform-box: fill-box;
    transform-origin: 100% 100%;
    animation: sl-rusty-wag .26s ease-in-out infinite alternate;
}
@keyframes sl-rusty-wag { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.sl-scene-rusty .sl-clipbar {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: sl-rusty-clip 10.4s linear infinite;
}
@keyframes sl-rusty-clip { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Slow motion where the browser cannot change an animation's speed itself. */
.sl-scene-rusty.is-slow .sl-rusty-run { animation-duration: 14.9s; }
.sl-scene-rusty.is-slow .sl-rusty-bob,
.sl-scene-rusty.is-slow .sl-leg { animation-duration: .97s; }
.sl-scene-rusty.is-slow .sl-tail { animation-duration: .74s; }
.sl-scene-rusty.is-slow .sl-clipbar { animation-duration: 29.7s; }

/* ---------------------------------------------------------------- the board */
body.display-mode .slant { font-size: clamp(18px, calc(9px + 1.15vw), 28px); }
html:fullscreen .slant { max-width: 1700px; }

@media (prefers-reduced-motion: reduce) {
    .slant *, .slant *::before, .slant *::after { transition: none !important; }
    .sl-scene-rusty * { animation: none !important; }
    .sl-scene-rusty .sl-rusty-run { transform: translate(200px, 236px); }
}