/* The "Explore" applets of the maths course pages (mathcourse/applets.py):
 * what they share. The frame (.mc-applet, its lead, sliders and sentence) and
 * the facts list (.mc-det-facts) are in maths-course.css. An applet that
 * needs more than this keeps its own rules in its own block at the foot of
 * this file, under its name. */

.mca-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.mca-body.is-wide { grid-template-columns: minmax(0, 1fr); }
.mca-board { min-width: 0; }
.mca-side { display: grid; gap: 16px; min-width: 0; }
.mca-svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); touch-action: pan-y; user-select: none; }
.mca-grid { stroke: var(--line); stroke-width: 1; }
.mca-axis { stroke: var(--ink); stroke-width: 1.6; }
.mca-tick { font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.mca-axis-name { font-size: 12px; font-weight: 700; fill: var(--ink); }
.mca-failed .mca-board::after { content: "This did not load. Reload the page to try again."; display: block; padding: 16px; color: var(--muted); }

/* Lines and curves: ink first, then the accents. */
.mca-curve { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.mca-curve.is-b { stroke: var(--tangerine); }
.mca-curve.is-c { stroke: var(--teal-deep); }
.mca-curve.is-d { stroke: var(--gold); }
.mca-curve.is-thin { stroke-width: 1.6; }
.mca-dash { stroke-dasharray: 6 5; }
.mca-area { fill: color-mix(in srgb, var(--tangerine) 30%, transparent); stroke: none; }
.mca-area.is-b { fill: color-mix(in srgb, var(--teal) 28%, transparent); }
.mca-area.is-c { fill: color-mix(in srgb, var(--gold) 40%, transparent); }
.mca-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.mca-dot.is-b { fill: var(--tangerine); }
.mca-dot.is-c { fill: var(--teal-deep); }
.mca-dot.is-open { fill: var(--paper); stroke: var(--ink); }
.mca-note { font-size: 13px; font-weight: 700; fill: var(--ink); pointer-events: none; }
.mca-note.is-b { fill: var(--tangerine); }
.mca-note.is-c { fill: var(--teal-deep); }
.mca-note.is-soft { font-weight: 500; fill: var(--muted); }

/* Bars of a distribution or a chart. */
.mca-bar { fill: color-mix(in srgb, var(--ink) 14%, var(--paper)); stroke: var(--ink); stroke-width: 1; }
.mca-bar.is-on { fill: var(--tangerine); }
.mca-bar.is-b { fill: var(--teal); }
.mca-mark { stroke: var(--teal-deep); stroke-width: 2.4; stroke-dasharray: 6 4; }
.mca-bar-press { cursor: pointer; }
.mca-balance { fill: var(--teal-deep); }

/* A point to drag. */
.mca-handle { fill: var(--ink); stroke: var(--paper); stroke-width: 3; cursor: grab; touch-action: none; }
.mca-handle.is-b { fill: var(--tangerine); }
.mca-handle.is-c { fill: var(--teal-deep); }
.mca-handle.is-d { fill: var(--gold); }
.mca-handle.is-held { cursor: grabbing; }
.mca-handle:focus { outline: none; }
.mca-handle:focus-visible { stroke: var(--tangerine); stroke-width: 4; }
.mca-handle.is-b:focus-visible { stroke: var(--ink); }
.mca-handle-label { font-size: 16px; font-weight: 800; fill: var(--ink); pointer-events: none; }

/* Controls beside the board. */
.mca-controls { display: grid; gap: 12px; }
.mca-controls label { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mca-controls output { font-size: 1.1rem; font-weight: 800; color: var(--teal-deep); }
.mca-controls input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--tangerine); }
.mca-controls input[type="number"], .mca-controls select, .mca-num { min-height: 40px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font-size: 1rem; font-weight: 700; color: var(--ink); }
.mca-num { width: 5.2em; text-align: center; }
.mca-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.mca-row > label { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--ink); }
.mca-checks { display: grid; gap: 6px; }
.mca-checks label { display: flex; gap: 8px; align-items: center; min-height: 32px; font-weight: 600; color: var(--ink); }
.mca-checks input { width: 18px; height: 18px; accent-color: var(--tangerine); }
.mca-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mca-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; border: 2px solid var(--ink); border-radius: 22px; background: var(--ink); overflow: hidden; }
.mca-seg button { flex: 1 1 auto; min-height: 40px; padding: 0 16px; border: 0; background: var(--paper); font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mca-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.mca-seg button:focus-visible, .mca-num:focus-visible, .mca-controls select:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 2px; }
.mca-help { margin: 0; font-size: 0.86rem; color: var(--muted); }
.mca-working { margin: 0; padding: 12px 16px; border-left: 4px solid var(--tangerine); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--gold) 14%, var(--paper)); font-size: 1.02rem; font-weight: 700; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.mca-working small { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); }

/* A small table of values the reader can type in. */
.mca-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.95rem; }
.mca-table tbody th { width: 4.6em; white-space: nowrap; }
.mca-table th, .mca-table td { padding: 6px 2px; border-bottom: 1px solid var(--line); text-align: center; }
.mca-table thead th, .mca-table tbody th { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.mca-table input { width: 100%; min-width: 0; min-height: 38px; padding: 2px 1px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: 0.95rem; font-weight: 700; text-align: center; color: var(--ink); }
.mca-table input:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 1px; }
.mca-table .is-on td, .mca-table td.is-on { background: color-mix(in srgb, var(--tangerine) 16%, var(--paper)); }

.mca-ask { display: grid; gap: 8px; margin: 22px 0 0; padding-left: 22px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.mca-ask li::marker { color: var(--tangerine); font-weight: 800; }

/* The teachers' page that lists them. */
.mca-page .mc-applet { margin-top: 0; }
.mca-group h2 { margin: 28px 0 10px; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.mca-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mca-list a { display: block; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); font-weight: 700; text-decoration: none; color: var(--ink); }
.mca-list a:hover, .mca-list a:focus-visible { background: var(--mint); box-shadow: 4px 4px 0 color-mix(in srgb, var(--tangerine) 40%, var(--paper)); }

@media (max-width: 860px) {
    .mca-body { grid-template-columns: minmax(0, 1fr); }
}

/* A larger, invisible target under each handle: a fingertip needs about 44 px. */
.mca-hit { fill: transparent; stroke: none; cursor: grab; touch-action: none; }

/* A number box beside a slider, to type a value. */
.mca [hidden] { display: none !important; }
.mca-valrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; }
.mca-controls input.mca-typed { width: 5.6em; min-height: 36px; padding: 2px 8px; text-align: center; font-size: 0.98rem; }
.mca-typed-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.95rem; }
.mca-typed:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 2px; }

/* The board page a teacher puts on the projector: use the width of the screen,
 * and never a drawing taller than the screen. */
.mca-page.mca-one { max-width: min(1760px, 96vw); }
.mca-page.mca-one .mca-svg[style*="--mca-ar"] { width: min(100%, calc((100vh - 170px) * var(--mca-ar))); width: min(100%, calc((100dvh - 170px) * var(--mca-ar))); margin-inline: auto; }
@media (min-width: 861px) { .mca-page.mca-one .mca-body { grid-template-columns: minmax(0, 3fr) minmax(280px, 1.2fr); } }

/* Full screen. */
.mca.mca-has-fs, .mc-applet.mca-has-fs { position: relative; }
.mca-fs { position: absolute; top: 14px; right: 16px; z-index: 3; min-height: 40px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); font-size: 0.9rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.mca-fs:hover { background: var(--mint); }
.mca-fs:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 2px; }
.mca-has-fs > .mc-block-h { padding-right: 140px; }
html.mca-locked { overflow: hidden; }
.mc-applet.is-full {
    position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; gap: 10px;
    width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: 12px clamp(14px, 2vw, 32px) 16px;
    border: 0; border-radius: 0; overflow: auto; overscroll-behavior: contain; background: var(--paper);
    font-size: clamp(1.05rem, calc(0.6vw + 1.6vh), 1.9rem);
}
.mc-applet.is-full .mca-fs { position: fixed; top: 10px; right: 14px; background: var(--ink); color: var(--paper); }
.mc-applet.is-full .mc-block-h { margin: 4px 0 0; font-size: 1.2em; }
.mc-applet.is-full .mc-applet-lead { margin: 0; }
.mc-applet.is-full .mca-ask { display: none; }
.mc-applet.is-full .mca-body { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) minmax(300px, 28vw); gap: clamp(14px, 2vw, 32px); }
.mc-applet.is-full .mca-svg[style*="--mca-ar"] { width: min(100%, calc((100vh - 150px) * var(--mca-ar))); width: min(100%, calc((100dvh - 150px) * var(--mca-ar))); margin-inline: auto; }
.mc-applet.is-full .mca-controls label, .mc-applet.is-full .mca-working, .mc-applet.is-full .mca-seg button { font-size: 1em; }
.mc-applet.is-full .mca-controls output { font-size: 1.2em; }
.mc-applet.is-full .mc-applet-say { margin: 0; font-size: 1em; }
@media (max-width: 860px) {
    .mc-applet.is-full .mca-body { grid-template-columns: minmax(0, 1fr); }
    .mca-has-fs > .mc-block-h { padding-right: 0; padding-top: 44px; }
}