/* Smart board: mobile-like arrangement at a normal reading scale (98–100" panels are already large). */
/* Scales with the panel: 18px on a 1080p board, the same proportions on 4K without OS scaling. */
html { font-size: clamp(16px, min(1.667vh, .9375vw), 34px); }
:root { --tap: 3.1rem; }
.area-dashboard:not(.page-question) { --under-h: 4rem; }

html, body {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
img, svg, a { -webkit-user-drag: none; }
input, .input { -webkit-user-select: text; user-select: text; caret-color: var(--primary); }

.main { max-width: 61rem; padding: 1.5rem 1.5rem 2rem; }
.site-header { min-height: 3.55rem; }
.site-header .mode-switch__btn, .site-footer .mode-switch__btn { min-height: 2.45rem; padding-inline: .9em; }

/* One row however many items there are (teachers and admins get extra ones), so it never covers the page. */
.under-menu { min-height: var(--under-h); padding-inline: max(1rem, calc((100vw - 61rem) / 2)); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.under-menu__item { min-height: var(--under-h); font-size: .78rem; }
.under-menu__item .icon { width: 1.5rem; height: 1.5rem; }

/* Hit-slop: touches slightly outside a button's edge still land on it. */
.btn::after { content: ""; position: absolute; inset: -.35rem; }

.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.q-layout--single { grid-template-columns: minmax(0, 1fr); max-width: 42rem; margin: 0 auto; width: 100%; }
.plane-tools { flex-wrap: nowrap; justify-content: flex-start; }

.fball { width: 3.35rem; height: 3.35rem; }
.stepper__btn { width: 4rem; height: 4rem; }
.stepper__value { font-size: 2.6rem; min-width: 4.5rem; }
.switch__track { width: 4rem; height: 2.2rem; }
.switch__thumb { width: calc(2.2rem - 6px); height: calc(2.2rem - 6px); }
.switch[aria-checked="true"] .switch__thumb { left: calc(100% - 2.2rem + 4px); }
.chip { min-height: 2.9rem; }
.result-total { font-size: 5rem; }
.page-question .q-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* Learn player: both columns end on the same line. The shorter side stretches: the step card grows
   (controls stay at its bottom) or the plane's card grows with the plane centred inside it. */
.learn-player .q-layout:not(.q-layout--single) { align-items: stretch; }
.learn-player .q-layout:not(.q-layout--single) > .q-visual { justify-content: center; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; box-shadow: 0 5px 0 var(--edge); }
.learn-player .q-layout:not(.q-layout--single) > .q-visual .plane { border: 0; box-shadow: none; background: transparent; }
.learn-player .q-answer { display: flex; flex-direction: column; }
.learn-player .q-answer > .learn-steps { flex: 1; }
.learn-player .learn-steps .learn-controls { margin-top: auto; }
/* Desktop keeps the formula row reserved so the layout does not jump between steps. */
.learn-player .learn-steps__math.is-empty { display: block; visibility: hidden; }
.learn-player .learn-steps__math.is-empty::before { content: "0"; }
.learn-player .learn-steps__text { min-height: 2.9em; min-height: 2lh; }

/* Teacher class pages use the whole panel width. */
.page-tclass .main, .page-tclasses .main { max-width: none; padding-inline: 2rem; }
.page-teacher-event .main { max-width: 80rem; }