/* ========================================
   Your Classling (your-classling.html, js/your-classling.js)
   A teacher's own Classling, drawn as a pupil's My Classling page is (classlings-home.css): only what differs
   is here. There are four slots, not eight, and the panel under the window says where it goes and whether it's
   saved.
   ======================================== */

/* The page reaches the window's edges, as a pupil's does (student.css takes every margin away there). */
body.cla-pupil-page { margin: 0; overflow-x: hidden; }

/* hidden means hidden, whatever display the kit gives a part. */
.clh [hidden] { display: none !important; }

/* The window's canvas fills it, as a pupil's does (#clhStage). */
#ycStage { display: block; width: 100%; height: 100%; cursor: pointer; }

/* Four slots fill the row, as eight do on a pupil's page. */
@media (min-width: 1024px) {
    .clh-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.yc-where { padding: var(--s-3) var(--s-5); }
.yc-where p b { margin-bottom: var(--s-1); }
.yc-where p span { display: block; }
.yc-saved { margin-top: var(--s-1); font-weight: 700; }
.yc-saved.is-bad { color: var(--bad, #c0392b); }
.yc-state .btn { margin-top: var(--s-2); }

/* A school laptop (1366 x 540 to 600 of page): the page stays still, as a pupil's does from 560 px up
   (classlings-home.css), down to 460 px here. A pupil's page scrolls below 560 px because Undo and Save need room
   under the window; this page saves as they choose, so the window gives up height instead and "Saved" stays in
   view while they try things from the long drawer. */
@media (min-width: 1024px) and (min-height: 460px) and (max-height: 559px) {
    #ycRoot { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
    #ycRoot > .clh-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--s-4); }
    #ycRoot .clh-locker { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
    #ycRoot .clh-side { display: flex; flex-direction: column; min-height: 0; }
    #ycRoot .clh-window { flex: 0 1 var(--show-h); min-height: 160px; }
    #ycRoot .clh-show { height: 100%; }
    #ycRoot .clh-level { flex: none; }
    #ycRoot .clh-main { display: flex; flex-direction: column; min-height: 0; }
    #ycRoot .clh-slots { flex: none; }
    #ycRoot .clh-drawer {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--wash-2) transparent;
        padding: var(--s-1) var(--s-3) var(--s-4) var(--s-4);
        background: var(--page);
        border: var(--edge) solid var(--wash-2);
        border-radius: var(--r-xl);
    }
}

/* A tablet or a phone: the panel comes straight after the window, so where it walks is read before the long
   drawer (a pupil's level comes last). A save that didn't work comes up from the foot, with Try again, where it's
   seen however far down the drawer they are; the rest of the page stays where it is. */
@media (max-width: 1023px) {
    #ycRoot .clh-locker { grid-template-areas: "banner" "window" "level" "slots" "drawer"; }
    #ycRoot.yc-problem .yc-state {
        position: fixed;
        left: var(--s-4);
        right: var(--s-4);
        bottom: var(--s-4);
        z-index: 30;
        padding: var(--s-3) var(--s-5);
        background: var(--app-tint);
        border-radius: var(--r-xl);
        box-shadow: 0 6px 0 var(--wash-2);
    }
    #ycRoot.yc-problem .yc-saved { margin-top: 0; }
}

/* Not signed in, or the account couldn't be read: a card and the way back. */
.yc-gate { display: grid; justify-items: start; gap: var(--s-3); max-width: 560px; margin: var(--s-6) auto; padding: var(--s-5) var(--s-6); border-radius: var(--r-l); }
.yc-gate h2 { font: 700 var(--t-m) / 1.15 var(--display); }