/* Ask, then write: the board's notation, layout and intentional teaching motion. */
@font-face {
    font-family: 'Figtree';
    src: url('../../shared/fonts/figtree/figtree-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
body.maths-app[data-maths-view="model-board"] {
    overflow: hidden;
    --ground: 124px;
    --cla-ground: 124px;
    --cloud-a: left 760px top 22px;
    --cloud-b: left 1010px top 58px;
}
.maths-model-board {
    --app: var(--lime); --app-tint: var(--lime-tint); --app-deep: var(--lime-deep);
    --gutter: 32px; --tap: 56px; --tap-l: 72px; --tap-dock: 84px; --soil-h: 16px;
    --edge: 3px; --lift: 6px; --float: var(--cla-float);
    --cla-square: 78px; --cla-square-r: var(--ctl-square-r); --cla-square-word: 18px; --cla-square-icon: 32px;
    --cla-tap: 56px; --cla-pad: 8px; --cla-edge: 3px; --cla-tools-flex: 0 1 auto;
    --cla-tools-order: 0; --cla-tools-margin: 0 auto 6px; --cla-tool-gap: 8px;
    color: var(--ink); letter-spacing: 0; pointer-events: none;
}
.maths-model-board[data-method="subtraction"] { --app: var(--cla-aqua); --app-tint: var(--cla-aqua-tint); --app-deep: var(--cla-aqua-deep); }
.maths-model-board[data-method="multiplication"] { --app: var(--sky); --app-tint: var(--sky-tint); --app-deep: var(--sky-deep); }
.maths-model-board *, .maths-model-board *::before, .maths-model-board *::after { box-sizing: border-box; }
.maths-model-board :is(p, h3) { margin: 0; }
.maths-model-board button { font-variant-numeric: normal; }
.maths-model-board :focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
.maths-model-board .stage { pointer-events: auto; }
.maths-model-board .plate { background: var(--page); border: 3px solid var(--wash-2); border-radius: 28px; }
.maths-model-board .panel.is-tint { background: var(--app-tint); }
body[data-world="sky"] .maths-model-board .side { background: var(--page); box-shadow: inset 0 0 0 3px var(--line-soft); }
.maths-app[data-maths-view="model-board"] .app-header.is-model-board {
    position: relative; z-index: 1; zoom: var(--model-zoom, 1); width: auto;
    padding: 16px 32px 0; min-height: 0; margin: 0;
}
.app-header.is-model-board .topic-operation { width: 48px; height: 48px; border: 3px solid var(--topic-edge); border-radius: 14px; margin: 0; font: 700 34px/1 'Figtree', sans-serif; }
.app-header.is-model-board .maths-title .title-art { width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); }
.app-header.is-model-board .header-class-name { font: 500 24px/1.2 var(--display); }
.maths-model-board .btn {
    --c: var(--page);
    --c-deep: var(--ink);
    --c-line: var(--ink);
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--tap);
    margin: 0 0 var(--lift);
    padding: 0 var(--s-5);
    font: 600 var(--t-ui) / 1.1 var(--display);
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    background: var(--c);
    border: var(--edge) solid var(--c-line);
    border-radius: var(--r-m);
    box-shadow: 0 var(--lift) 0 var(--c-deep);
    cursor: pointer;
    transition: transform var(--settle) var(--spring), box-shadow var(--settle) var(--spring);
    -webkit-tap-highlight-color: transparent;
}
.maths-model-board .btn:active {
    transform: translateY(var(--lift));
    box-shadow: 0 0 0 var(--c-deep);
    transition-duration: var(--press);
    transition-timing-function: ease-out;
}
.maths-model-board .btn .ic { font-size: 1.15em; }
.maths-model-board .btn.is-go { --c: var(--gold); --c-deep: var(--gold-deep); --c-line: var(--gold-deep); }
.maths-model-board .tool {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-4);
    font: 600 var(--t-ui) / 1 var(--display);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: var(--edge) solid transparent;
    border-radius: var(--r-m);
    cursor: pointer;
    transition: transform var(--settle) var(--spring);
}
.maths-model-board .tool:hover { background: var(--wash); }
.maths-model-board .tool:active { transform: scale(0.93); transition-duration: var(--press); }
.maths-model-board .tool .ic { font-size: 24px; }
.maths-model-board .seg { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--wash); border-radius: calc(var(--r-m) + var(--s-1)); }
.maths-model-board .seg .tool { min-height: calc(var(--tap) - var(--s-2)); }
.maths-model-board .seg .tool.is-on,
.maths-model-board .seg .tool[aria-current] { background: var(--app); border-color: var(--app-deep); }
.maths-model-board .dock {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--soil-h);
    display: flex;
    align-items: flex-end;
    gap: var(--s-4);
    pointer-events: none;
}
.maths-model-board .dock > * { pointer-events: auto; flex: none; }
.maths-model-board .dock .tool { padding: 0 var(--s-3); }
.maths-model-board .dock .toolbar { margin: 0 auto var(--lift); }
.maths-model-board .pop { position: relative; }
.maths-model-board .menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--s-4));
    z-index: 5;
    width: 360px;
    display: grid;
    gap: 2px;
    padding: var(--s-2);
    background: var(--page);
    border: var(--edge) solid var(--ink);
    border-radius: var(--r-l);
    box-shadow: var(--float);
}
.maths-model-board .menu-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--tap);
    padding: 0 var(--s-4);
    font: 600 var(--t-ui) / 1.1 var(--display);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--r-m);
    cursor: pointer;
}
.maths-model-board .menu-item:hover { background: var(--wash); }

.maths-model-board [hidden] { display: none !important; }
.maths-model-board {
    --numeral: 'Figtree', 'Fredoka', system-ui, sans-serif;
    --mark: var(--cla-periwinkle-deep);
    --S: 120px;
    --F: calc(var(--S) * 0.92);
    --stage-top: 92px;
    --stage-bottom: 132px;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    font-family: var(--display);
}
.maths-model-board .n { font-family: var(--numeral); font-weight: 700; letter-spacing: 0; }
.maths-model-board .stage {
    position: absolute;
    top: var(--stage-top);
    bottom: var(--stage-bottom);
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    gap: var(--s-6);
}
.maths-model-board .work {
    flex: none;
    display: grid;
    place-content: center;
    padding: var(--s-3) var(--s-4);
}
.maths-model-board .sum { position: relative; }
.maths-model-board .heads { position: relative; height: 40px; }
.maths-model-board .heads span {
    position: absolute;
    top: 0;
    width: var(--S);
    font: 600 var(--t-s) / 40px var(--display);
    text-align: center;
    color: var(--ink-2);
}
.maths-model-board .heads span.is-now { color: var(--ink); font-weight: 700; }
.maths-model-board .paper {
    position: relative;
    background-color: var(--page);
}
.maths-model-board .paper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--wash-2) 2px, transparent 2px),
        linear-gradient(to bottom, var(--wash-2) 2px, transparent 2px);
    background-size: var(--S) var(--S);
    background-position: -1px -1px;
    box-shadow: inset 0 0 0 1px var(--wash-2);
}
.maths-model-board .now-col { position: absolute; top: 0; bottom: 0; z-index: 0; width: var(--S); background: var(--app-tint); }
.maths-model-board .lit { position: absolute; z-index: 2; border-radius: var(--r-s); background: var(--gold-tint); box-shadow: inset 0 0 0 4px var(--gold); }
.maths-model-board .stage > * { position: relative; }
.maths-model-board .rule { position: absolute; left: 0; right: 0; z-index: 5; height: 6px; margin-top: -3px; background: var(--ink); border-radius: 3px; }
.maths-model-board .place {
    position: absolute;
    z-index: 2;
    background: var(--page);
    border-radius: var(--r-s);
    box-shadow: inset 0 0 0 3px var(--line-soft);
}
.maths-model-board .place.is-sel { background: var(--gold-tint); box-shadow: inset 0 0 0 6px var(--gold-deep); }
.maths-model-board .place.is-target { box-shadow: inset 0 0 0 4px var(--app-deep); }
.maths-model-board .place.is-target.is-sel { background: var(--gold-tint); box-shadow: inset 0 0 0 6px var(--gold-deep); }
.maths-model-board .band { position: absolute; left: 0; right: 0; z-index: 0; background: var(--wash); }
.maths-model-board .band.is-on { background: var(--gold-tint); box-shadow: inset 0 0 0 4px var(--gold); }
.maths-model-board .g {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.maths-model-board .g > span {
    display: block;
    font: 700 var(--fs) / 1 var(--numeral);
    letter-spacing: 0;
    white-space: nowrap;
    transform: translate(var(--dx, 0px), var(--dy, 0px));
}
.maths-model-board .g.is-mark > span { color: var(--mark); }
.maths-model-board .strike {
    position: absolute;
    z-index: 4;
    height: 10px;
    margin: -5px 0 0;
    background: var(--mark);
    border-radius: 5px;
    pointer-events: none;
}
.maths-model-board .strike.is-thin { height: 7px; margin-top: -3.5px; border-radius: 4px; }
.maths-model-board .tap { position: absolute; z-index: 6; background: transparent; border: 0; padding: 0; cursor: pointer; }
.maths-model-board .side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-xl);
}
.maths-model-board .side .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    font: 600 var(--t-label) / 1.1 var(--display);
    white-space: nowrap;
}
.maths-model-board .side .top .count { color: var(--ink-2); }
.maths-model-board[data-world="sky"] { --cloud-a: left 760px top 22px; --cloud-b: left 1010px top 58px; }
.maths-model-board[data-world="sky"].is-narrow { --cloud-a: left 690px top 22px; --cloud-b: left -400px top 0; }
.maths-model-board .kind {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 48px;
    margin-bottom: 4px;
    padding: 0 var(--s-4) 0 var(--s-3);
    font: var(--ctl-small-font);
    color: var(--ink);
    background: var(--page);
    border: var(--edge) solid var(--ink);
    border-radius: var(--r-s);
    box-shadow: 0 4px 0 var(--ink);
    --ring-lift: 4px; /* what takes a press reaches over its lift (classlings-controls.css) */
    cursor: pointer;
}
.maths-model-board .kind:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.maths-model-board .kind svg { flex: none; width: 24px; height: 24px; }
.maths-model-board .kind[aria-expanded="true"] { color: var(--page); background: var(--ink); }
/* The words on the button and in its menu are Fredoka, digits too (the notation's Figtree is for the sums). */
.maths-model-board .kind .n,
.maths-model-board .kinds .kw .n { font-family: var(--display); font-weight: 600; }
.maths-model-board .kinds {
    top: calc(100% + var(--s-2));
    bottom: auto;
    left: 0;
    right: auto;
    width: max-content;
    z-index: 30;
    grid-template-columns: max-content max-content;
    gap: 2px var(--s-6);
}
.maths-model-board .kind-item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 56px; }
.maths-model-board .kind-item .ex { font: 700 var(--t-ui) / 1 var(--numeral); color: var(--ink-2); text-align: right; }
.maths-model-board .kind-item.is-on { background: var(--app-tint); box-shadow: inset 0 0 0 var(--edge) var(--app-deep); }
.maths-model-board.is-narrow .kinds { column-gap: var(--s-4); }
.maths-model-board.is-narrow .kind-item { padding: 0 var(--s-3); font-size: 18px; }
.maths-model-board.is-narrow .kind-item .ex { font-size: 18px; }
.maths-model-board .say { font: 600 var(--t-l) / 1.15 var(--display); white-space: nowrap; }
.maths-model-board .say.is-two { white-space: normal; text-wrap: balance; }
.maths-model-board .say .n { font-weight: 700; }
.maths-model-board .sentence { font: 700 80px / 1.1 var(--numeral); letter-spacing: 0; white-space: nowrap; }
.maths-model-board .sentence .q {
    display: inline-block;
    vertical-align: middle;
    min-width: 1.6em;
    height: 1.12em;
    margin-top: -0.1em;
    padding: 0 0.12em;
    text-align: center;
    line-height: 1.12em;
    background: var(--page);
    border-radius: var(--r-s);
    box-shadow: inset 0 0 0 3px var(--line-soft);
}
.maths-model-board .sentence .q.is-sel { background: var(--gold-tint); box-shadow: inset 0 0 0 6px var(--gold-deep); }
.maths-model-board .sentence .q.is-wrong { box-shadow: inset 0 0 0 6px var(--tangerine-deep); }
.maths-model-board .sentence .q[data-tap] { cursor: pointer; }
.maths-model-board .card.is-try { flex: none; padding: var(--s-3) var(--s-5); }
.maths-model-board .side .grow { flex: 1; min-height: 0; }
.maths-model-board .card {
    display: grid;
    align-content: center;
    gap: var(--s-3);
    flex: 1;
    min-height: 0;
    padding: var(--s-4) var(--s-5);
    background: var(--page);
    border-radius: var(--r-l);
}
.maths-model-board .card { grid-template-columns: minmax(0, 1fr); }
.maths-model-board .card .sentence { font-size: 96px; }
.maths-model-board .card.has-chart { display: flex; flex-direction: column; justify-content: center; }
.maths-model-board .card .chart { position: relative; flex: 1; min-height: 0; max-height: 330px; }
.maths-model-board .card .chart.is-now { justify-content: center; }
.maths-model-board .card .chart.is-now .pv { flex: 0 1 60%; }
.maths-model-board .card .chart .pv { box-shadow: inset 0 0 0 3px var(--wash-2); }
.maths-model-board .counter.is-flying { position: absolute; z-index: 5; margin: 0; }
.maths-model-board .counter.p3 { font-size: calc(var(--c) * 0.3); }
.maths-model-board .card .sentence .t { display: inline-block; }
.maths-model-board .card .sentence .q { will-change: transform; }
.maths-model-board .card-foot { min-height: 1.2em; font: 600 var(--t-m) / 1.2 var(--display); }
.maths-model-board .card .sentence .grp { display: inline-block; padding: 0 0.12em; border-radius: var(--r-s); background: var(--gold-tint); box-shadow: inset 0 -6px 0 var(--gold); }
.maths-model-board .card .sentence .grp.is-done { box-shadow: inset 0 0 0 4px var(--gold); }
.maths-model-board.is-narrow .side { padding: var(--s-4) var(--s-4); }
.maths-model-board.is-narrow .card { padding: var(--s-3) var(--s-3); }
.maths-model-board .chart { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: var(--s-3); }
.maths-model-board .chart .pv {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3) var(--s-3);
    background: var(--page);
    border-radius: var(--r-l);
}
.maths-model-board .chart .pv h3 { font: 600 var(--t-label) / 1.2 var(--display); text-align: center; color: var(--ink-2); }
.maths-model-board .chart .pv.is-now h3 { color: var(--ink); }
.maths-model-board .chart .arrow { flex: none; align-self: center; width: 36px; height: 36px; color: var(--ink); }
.maths-model-board .chart .arrow.is-left { transform: scaleX(-1); }
.maths-model-board .counters { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center; gap: var(--s-2); }
.maths-model-board .frame { display: grid; grid-template-columns: repeat(var(--cols, 2), var(--c)); grid-auto-flow: row; gap: 6px; padding: 6px; border-radius: 14px; }
.maths-model-board .frame.is-ten { box-shadow: inset 0 0 0 3px var(--ink-2); }
.maths-model-board .counter {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--c);
    height: var(--c);
    font: 700 calc(var(--c) * 0.38) / 1 var(--numeral);
    letter-spacing: 0;
    border-radius: 50%;
    background: var(--cf);
    box-shadow: inset 0 0 0 3px var(--ce);
}
.maths-model-board .counter.p0 { --cf: var(--gold-light); --ce: var(--gold-deep); }
.maths-model-board .counter.p1 { --cf: var(--sky-tint); --ce: var(--sky-deep); }
.maths-model-board .counter.p2 { --cf: var(--grape-tint); --ce: var(--grape-deep); }
.maths-model-board .counter.p3 { --cf: var(--tangerine-tint); --ce: var(--tangerine-deep); }
.maths-model-board .counter.is-new { box-shadow: inset 0 0 0 5px var(--mark); }
.maths-model-board .counter.is-gone { opacity: 0.4; }
.maths-model-board .counter.is-gone::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 5px;
    margin-top: -2.5px;
    background: var(--mark);
    border-radius: 3px;
    transform: rotate(42deg);
}
.maths-model-board .counter.is-blank { visibility: hidden; }
.maths-model-board .keys { display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; gap: var(--s-2) var(--s-3); }
.maths-model-board .keys .btn { min-height: 72px; margin-bottom: 6px; padding: 0; font: 700 48px / 1 var(--numeral); border-radius: var(--r-m); }
.maths-model-board .keys .btn.is-word { font: 600 var(--t-ui) / 1 var(--display); }
.maths-model-board .keys .btn.is-clear { grid-column: 6; grid-row: 1 / span 2; height: auto; }
.maths-model-board .pieces { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); }
.maths-model-board .pieces .digits { display: flex; gap: var(--s-2); }
.maths-model-board .pieces.is-tiles { justify-content: flex-start; }
.maths-model-board .piece {
    appearance: none;
    display: grid;
    place-items: center;
    width: 68px;
    height: 84px;
    margin: 0 0 6px;
    padding: 0;
    font: 700 54px / 1 var(--numeral);
    color: var(--ink);
    background: var(--page);
    border: var(--edge) solid var(--ink);
    border-radius: var(--r-m);
    box-shadow: 0 6px 0 var(--ink);
    cursor: grab;
    touch-action: none;
}
.maths-model-board .piece:active:not(.is-used):not(.ghost) { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.maths-model-board .piece.is-pending:active { box-shadow: 0 0 0 var(--gold-deep); }
.maths-model-board .piece.is-pending { background: var(--gold); border-color: var(--gold-deep); box-shadow: 0 6px 0 var(--gold-deep); }
.maths-model-board .piece.is-used { opacity: 0.3; box-shadow: none; transform: translateY(6px); cursor: default; }
.maths-model-board .piece.is-mark { color: var(--mark); }
.maths-model-board .piece.ghost { position: absolute; z-index: 60; margin: 0; pointer-events: none; box-shadow: 0 10px 0 rgba(30, 27, 58, 0.25); }
.maths-model-board .choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.maths-model-board .choice .btn { min-height: 96px; font-size: var(--t-m); }
.maths-model-board .card .note { min-height: 1.25em; font: 600 26px / 1.25 var(--display); color: var(--ink-2); white-space: normal; }
.maths-model-board .card .note.is-error { color: var(--tangerine-deep); }
.maths-model-board .card.is-try.is-setup { padding: var(--s-4) var(--s-5); }
.maths-model-board .dock .tool svg,
.maths-model-board .dock .square svg,
.maths-model-board .dock .btn svg { flex: none; width: 24px; height: 24px; }
.maths-model-board .dock .square svg { width: 32px; height: 32px; }
.maths-model-board .next { padding: 0 var(--s-6); font-size: var(--t-s); }
.maths-model-board .next.is-hidden { visibility: hidden; }


.maths-model-board .btn.is-big { min-height: 72px; padding: 0 32px; font-size: 28px; border-radius: 28px; --lift: 7px; }
.maths-model-board .tool:disabled { color: var(--ink-2); opacity: .4; cursor: default; }
.maths-model-board .toolbar .gap { width: 3px; align-self: stretch; margin: 8px 4px; background: var(--wash-2); border-radius: 3px; }
.maths-model-board .dock .cla-bar-square svg { width: 32px; height: 32px; }
.maths-model-board .card.is-try .sentence { font-size: 80px; }
.maths-model-board .choice .btn { min-height: 96px; font-size: 36px; }
.maths-model-board .g > span, .maths-model-board .n, .maths-model-board .sentence { font-variant-numeric: normal; }
.maths-model-board .tap { border-radius: 12px; }
.maths-model-board .kind-item:focus-visible { outline-offset: -4px; }
.maths-model-board .g > span { line-height: 1; }
.maths-model-board .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-header.is-model-board .topic-operation { color: var(--ink); padding-bottom: 2px; }

.app-header.is-model-board .model-board-n { font: 700 1em/1.2 Figtree, sans-serif; font-variant-numeric: normal; }

.maths-model-board .cla-bar-square { font-weight: 600; }
.maths-model-board .choice .btn { --c: var(--preparation-fill); --c-deep: var(--preparation-edge); --c-line: var(--preparation-edge); }