/* Composer - Digital Media Literacy.
   Three rails: what you build with, the piece, what the selected thing can do.
   Deliberately plain: the piece the student makes should be the only loud thing on screen. */

.cmp-brief {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 4px solid #667eea;
    background: #f4f5ff;
    border-radius: 6px;
    font-size: 14px;
}

.cmp-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 240px;
    gap: 14px;
    align-items: start;
}

.cmp-rail {
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}

.activity-header .activity-title { margin: 0 0 2px; }
.activity-header .activity-instructions { margin: 0; }

/* ---- full screen ----
   The canvas is a replaced element with auto width and height, so capping its
   height alone keeps it square: the browser scales both sides to fit. Without
   the cap a 1920-wide screen gives the middle column ~1100px, and the piece
   runs off the bottom of the very screen the teacher just filled.

   The other two rules take the scrollbar off a screen that is exactly 100vh:
   activity-common.css pins the container to 100vh and then adds padding on top
   of it, and the body keeps the browser's default 8px margin.

   All of it is scoped to :fullscreen, so the in-lesson layout is untouched.
   The -webkit- forms are separate rules on purpose - one selector a browser
   does not know would void the whole list. */
:fullscreen #cmpCanvas { max-height: 74vh; }
:fullscreen .activity-container { box-sizing: border-box; }
:fullscreen body { margin: 0; }
:fullscreen .cmp-canvas-wrap { width: fit-content; margin: 0 auto; }

:-webkit-full-screen #cmpCanvas { max-height: 74vh; }
:-webkit-full-screen .activity-container { box-sizing: border-box; }
:-webkit-full-screen body { margin: 0; }
:-webkit-full-screen .cmp-canvas-wrap { width: fit-content; margin: 0 auto; }

/* ---- tabs ---- */
.cmp-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.cmp-tab {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cmp-tab.is-active { border-color: #667eea; background: #667eea; color: #fff; }
.cmp-panel { display: none; }
.cmp-panel.is-active { display: block; }

/* ---- library ---- */
.cmp-search, .cmp-select {
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}
.cmp-select--sm { width: auto; margin: 0; }

.cmp-library {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}
/* The square comes from percentage padding, NOT from aspect-ratio.
 *
 * `aspect-ratio` on an item in a `1fr` column does not feed back into an `auto` grid row, so
 * the rows sized themselves to roughly nothing (a 10px pitch) while each tile still painted
 * 74px tall. Every row was buried under the next one: only a sliver of each picture could be
 * clicked, and a tap in the middle of a picture placed a different picture. Percentage padding
 * resolves against the item's own inline size and DOES size the row, so the grid stays square
 * at every breakpoint. */
.cmp-asset {
    position: relative;
    padding: 0 0 100%;
    height: 0;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
}
.cmp-asset img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.cmp-asset:hover { border-color: #667eea; }
.cmp-asset:focus-visible { outline: 3px solid #667eea; outline-offset: 2px; }

/* The licence is the teaching, so it is always visible, never a hover. */
.cmp-asset__lic {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px 3px;
    text-align: center;
    color: #fff;
}
.cmp-asset__lic--free { background: #2e7d32; }
.cmp-asset__lic--credit { background: #ef6c00; }
.cmp-asset__lic--restricted { background: #c62828; }
.cmp-asset--restricted { opacity: .72; }

.cmp-hint { font-size: 12px; color: #666; margin: 8px 0 0; }

.cmp-add {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 9px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.cmp-add:hover { border-color: #667eea; }

/* ---- credits ---- */
.cmp-credits { font-size: 12px; }
.cmp-credit { padding: 6px 0; border-bottom: 1px solid #eee; }
.cmp-credit__line { font-weight: 600; color: #333; }
.cmp-credit__note { color: #777; }
.cmp-credit--warn .cmp-credit__line { color: #c62828; }

/* ---- stage ---- */
.cmp-stage { min-width: 0; }
.cmp-stagebar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.cmp-inline { font-size: 12px; font-weight: 600; color: #555; display: inline-flex; align-items: center; gap: 6px; }
.cmp-spacer { flex: 1; }
.cmp-icon {
    width: 34px; height: 34px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.cmp-icon:hover { border-color: #667eea; color: #667eea; }

/* Any `display` rule outranks the UA's [hidden] { display: none }, so an element the JS
 * hides by setting .hidden stays on screen. That is how the Version A/B control appeared in
 * all six lessons, including the four whose brief never mentions a second version. */
[hidden] { display: none !important; }

.cmp-versions { display: inline-flex; align-items: center; gap: 4px; }
.cmp-versions__label { font-size: 12px; font-weight: 600; color: #555; }
.cmp-ver {
    width: 28px; height: 28px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.cmp-ver.is-active { border-color: #667eea; background: #667eea; color: #fff; }

.cmp-canvas-wrap {
    background: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 50% / 18px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    justify-content: center;
}
#cmpCanvas {
    max-width: 100%;
    height: auto;
    background: #fff;
    touch-action: none;              /* pointer drags must not scroll the page */
    cursor: default;
}
.cmp-status { font-size: 12px; color: #666; margin: 8px 0 0; min-height: 1.2em; }

/* ---- inspector ---- */
.cmp-field { margin-bottom: 10px; }
.cmp-field > label { display: block; font-size: 12px; font-weight: 700; color: #555; margin-bottom: 3px; }
.cmp-field input[type="text"], .cmp-field textarea, .cmp-field select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}
.cmp-field textarea { resize: vertical; min-height: 54px; }
.cmp-field input[type="range"] { width: 100%; }
.cmp-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.cmp-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; padding: 0; }
.cmp-swatch.is-active { border-color: #333; transform: scale(1.12); }
.cmp-rowbtns { display: flex; gap: 5px; flex-wrap: wrap; }
.cmp-rowbtns button {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cmp-rowbtns button.is-active { border-color: #667eea; background: #667eea; color: #fff; }

/* ---- display mode: the board shows the piece, not the tools ----
   The header (and with it Start again / Full screen) is hidden by the shared
   maths-activity.css display-mode rule, so it is not repeated here. */
body.display-mode .cmp-rail,
body.display-mode .cmp-stagebar,
body.display-mode .cmp-status { display: none; }
body.display-mode .cmp-shell { grid-template-columns: minmax(0, 1fr); }
body.display-mode .activity-container { min-height: 0; }

/* ---- narrow screens: rails stack under the piece ---- */
@media (max-width: 900px) {
    .cmp-shell { grid-template-columns: minmax(0, 1fr); }
    .cmp-rail--right { order: 3; }
    .cmp-library { grid-template-columns: repeat(4, 1fr); max-height: 220px; }
}