/* Classlings tokens, world and style B bar for Maths Practice, the only page that loads this file (the Cup
   keeps its own in apps/behaviour-battler/css/classlings-app.css). Every rule is narrowed to body.maths-app,
   so nothing here can reach the Cup; :where() keeps each rule's weight as it was. The tokens keep the weight
   they had in the Cup's own file, so the page colour beats ClassSlate's own body rule. */
body.maths-app {
    --cla-ink: #1e1b3a;
    --cla-aqua: #2ec4b6; --cla-aqua-tint: #d8f5f1; --cla-aqua-deep: #12867b;
    --cla-periwinkle: #8fa8ff; --cla-periwinkle-tint: #e9edff; --cla-periwinkle-deep: #4d63d6;
    --cla-ink-2: #4a4766;
    --cla-page: #ffffff;
    --cla-card: #fffefb;
    --cla-muted: #636e72;
    --cla-line: #e4dfd3;
    --cla-wash: #f3f2f9;
    --cla-wash-2: #e4e1f1;
    --cla-grape: #a07cff;
    --cla-grape-deep: #6a45dc;
    --cla-grape-tint: #eee8ff;
    --cla-gold: #f7c230;
    --cla-gold-deep: #c98a12;
    --cla-gold-light: #ffe08a;
    --cla-gold-tint: #fff3c4;
    --cla-lime: #7ed957;
    --cla-lime-deep: #3e9a2a;
    --cla-minus: #ffe2dc;
    --cla-minus-deep: #d9604f;
    --cla-tangerine-tint: #ffeddf;
    --cla-tangerine-deep: #cf5a12;
    --cla-sky: #4d9de0;
    --cla-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
    --cla-ui: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Sizes: the bar's controls are 56 px tall in an 8 px padded, 3 px edged bar, 78 px in all; Home
       and Menu are 78 px squares with the bar's corners. Things you press sit on a 6 px base. Narrower
       windows change these, step by step (the end of this file). */
    --cla-gutter: 32px;
    --cla-tap: 56px;
    --cla-pad: 8px;
    --cla-edge: 3px;
    --cla-bar: calc(var(--cla-tap) + var(--cla-pad) * 2 + var(--cla-edge) * 2);
    --cla-lift: 6px;
    --cla-gap: 16px;
    /* Inside the toolbar: the space between tools, the extra room either side of a dividing line, the
       padding round Points | Leaderboard, and the size of the words. */
    --cla-tool-gap: 8px;
    --cla-sep: 12px;
    --cla-switch-pad: 4px;
    --cla-word: 20px;
    /* Home, Choose and Menu: their size, and their words and pictures. */
    --cla-square: var(--ctl-square);
    --cla-square-word: 18px;
    --cla-square-icon: 32px;
    /* The standard's squares (shared/css/classlings-controls.css): 78 px with corners 28; on phones 64 px with
       corners 20 (the end of this file). They're rounded squares (style B) at every size, never circles. */
    --cla-square-r: var(--ctl-square-r);

    /* What the bar shows, and how it's laid out: narrower windows hide words and take two rows (the
       end of this file). Each is a display value, or the layout's own. */
    --cla-view-word: inline;
    --cla-view-icon: none;
    --cla-tables-word: inline;
    --cla-tables-icon: none;
    --cla-undo-word: inline;
    --cla-choose-word: block;
    --cla-choose-pad: 14px;
    --cla-last-who: inline;
    --cla-last-n: inline-grid;
    --cla-sign-who: block;
    --cla-sign-pad: var(--cla-px);
    --cla-wrap: nowrap;
    --cla-rows-gap: 0px;
    --cla-ends: flex;
    --cla-bar-justify: space-between;
    --cla-tools-order: 0;
    --cla-tools-flex: 0 1 auto;
    --cla-tools-margin: 0 auto var(--cla-lift);
    --cla-tools-justify: flex-start;
    --cla-menu-order: 1;
    --cla-sign-order: 2;
    --cla-r-l: 28px;
    --cla-r-m: 20px;
    --cla-r-s: 14px;
    --cla-float: 0 8px 0 rgba(30, 27, 58, 0.13);
    /* The bar stands this far above the bottom edge: on the soil band in the sky world. */
    --cla-soil: 16px;
    /* From the bottom edge to the top of the bar: where pop-ups and messages stop. */
    --cla-dock: calc(var(--cla-soil) + var(--cla-lift) + var(--cla-bar));
    /* The Showdown sign: Pixel Quest's gold face on a 4 px pixel grid, with a stepped ink outline. */
    --cla-px: 4px;
    --cla-sign-h: 56px;
    --cla-ring: 0 calc(var(--cla-px) * -1) 0 var(--cla-ink), 0 var(--cla-px) 0 var(--cla-ink),
        calc(var(--cla-px) * -1) 0 0 var(--cla-ink), var(--cla-px) 0 0 var(--cla-ink);

    /* Pixel Quest's world (body.cla-sky), drawn as pixel pictures 4 screen pixels to an art pixel. */
    --cla-world: #7cc6f2;
    --cla-grass: #5fbf5a;
    --cla-soil-colour: #7a4a26;
    --cla-ground: 124px;
    --cla-art-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 9' width='32' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M11 0h5v1h-5zM9 1h9v1h-9zM5 2h14v1h-14zM20 2h5v1h-5zM3 3h25v1h-25zM2 4h28v1h-28zM1 5h30v1h-30zM0 6h32v1h-32z'/%3E%3Cpath fill='%23d4ecfb' d='M0 7h32v1h-32zM1 8h30v1h-30z'/%3E%3C/svg%3E");
    --cla-art-puff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5' width='20' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M6 0h4v1h-4zM4 1h8v1h-8zM13 1h3v1h-3zM2 2h16v1h-16zM0 3h20v1h-20z'/%3E%3Cpath fill='%23d4ecfb' d='M1 4h18v1h-18z'/%3E%3C/svg%3E");
    --cla-art-tufts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 3' width='16' height='3' shape-rendering='crispEdges'%3E%3Cpath fill='%235fbf5a' d='M2 0h1v1h-1zM12 0h1v1h-1zM1 1h3v1h-3zM6 1h1v1h-1zM11 1h3v1h-3zM15 1h1v1h-1zM0 2h16v1h-16z'/%3E%3C/svg%3E");
    --cla-art-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 2' width='16' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%233f9a44' d='M0 0h2v1h-2zM5 0h4v1h-4zM11 0h3v1h-3zM0 1h16v1h-16z'/%3E%3C/svg%3E");

    background: var(--cla-page);
}

/* ---------------------------------------------------------------- the sky and grass */

/* A flat sky with two still pixel clouds, and grass with tufts and a soil band along the foot, which
   the bar stands on. Nothing else moves; text straight on the sky stays ink (8.8 to 1). */
body.maths-app[data-world="sky"]:is([data-maths-view="teacher-dashboard"], [data-maths-view="pupil-progress"]) {
    background:
        var(--cla-art-cloud) left 47.5% top 14px / calc(var(--cla-px) * 32) calc(var(--cla-px) * 9) no-repeat,
        var(--cla-art-puff) left 68% top 46px / calc(var(--cla-px) * 20) calc(var(--cla-px) * 5) no-repeat,
        var(--cla-art-edge) left 0 bottom var(--cla-soil) / calc(var(--cla-px) * 16) calc(var(--cla-px) * 2) repeat-x,
        linear-gradient(var(--cla-soil-colour), var(--cla-soil-colour)) left 0 bottom 0 / 100% var(--cla-soil) no-repeat,
        var(--cla-art-tufts) left 0 bottom var(--cla-ground) / calc(var(--cla-px) * 16) calc(var(--cla-px) * 3) repeat-x,
        linear-gradient(var(--cla-grass), var(--cla-grass)) left 0 bottom 0 / 100% var(--cla-ground) no-repeat,
        var(--cla-world);
}

:where(body.maths-app) .cla-bar-square {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    align-content: center;
    gap: 2px;
    width: var(--cla-square);
    min-width: 0;
    height: var(--cla-square);
    margin: 0 0 var(--cla-lift);
    padding: 0;
    font: 600 var(--cla-square-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    text-decoration: none;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-square-r);
    box-shadow: 0 var(--cla-lift) 0 var(--cla-ink);
    --ring-lift: var(--cla-lift); /* what takes a press reaches over its lift (classlings-controls.css) */
    cursor: pointer;
    transform: none;
    transition: transform 460ms cubic-bezier(0.28, 1.9, 0.5, 1), box-shadow 460ms cubic-bezier(0.28, 1.9, 0.5, 1);
}

:where(body.maths-app) .cla-bar-square:active {
    transform: translateY(var(--cla-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: 70ms;
}

:where(body.maths-app) .cla-bar-square svg {
    width: var(--cla-square-icon);
    height: var(--cla-square-icon);
}

:where(body.maths-app) .cla-bar-tools {
    position: relative;
    display: flex;
    flex: var(--cla-tools-flex);
    flex-wrap: nowrap;
    align-items: center;
    justify-content: var(--cla-tools-justify);
    gap: var(--cla-tool-gap);
    min-width: 0;
    order: var(--cla-tools-order);
    margin: var(--cla-tools-margin);
    padding: var(--cla-pad);
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: var(--cla-float);
}

/* Phones (under 600 px): the standard's squares are 64 px with corners 20, and the bar's tools 48 px, so the bar
   is as tall as the squares (48 + 2 x 5 + 2 x 3 = 64). */
@media (max-width: 599px) {
    body.maths-app {
        --cla-square: var(--ctl-square-phone);
        --cla-square-r: var(--ctl-r);
        --cla-tap: 48px;
        --cla-pad: 5px;
    }
}