/* ==========================================================================
   MediLab base: document defaults that every page inherits.
   ========================================================================== */

/* The handwriting face of the learning content: Playpen Sans Hebrew (SIL Open
   Font License, the licence file sits next to the fonts). It is fetched only on
   a page that shows a term or a teacher's box. Two small files per weight: the
   Hebrew letters with nikud, and digits with punctuation. Latin letters use the
   interface font. This sheet is inlined into the page, and render.php points
   "../" at the plugin's assets folder. The hormone-unit lessons are sandboxed
   documents that cannot fetch these files; they carry the same face embedded. */
@font-face { font-family: "Playpen Sans Hebrew"; src: url("../ds/fonts/PlaypenSansHebrew-hebrew-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; size-adjust: 86%; }
@font-face { font-family: "Playpen Sans Hebrew"; src: url("../ds/fonts/PlaypenSansHebrew-hebrew-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; size-adjust: 86%; }
@font-face { font-family: "Playpen Sans Hebrew"; src: url("../ds/fonts/PlaypenSansHebrew-punct-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+00F7, U+2010-2027, U+2030-205E; size-adjust: 86%; }
@font-face { font-family: "Playpen Sans Hebrew"; src: url("../ds/fonts/PlaypenSansHebrew-punct-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+00F7, U+2010-2027, U+2030-205E; size-adjust: 86%; }

/* The static copy of the home page (#ml-ssr) is the visitor's landing page.
   A signed-in student sees only its header until the live home draws, so
   no "start free" button flashes past on a slow phone. If the live page
   never comes (JavaScript off), the copy shows after four seconds. */
html[data-ml-auth="member"][data-ml-page="home"] #ml-ssr .ml-home > :not(.sc-host) {
  visibility: hidden;
  animation: ml-ssr-late 1ms linear 4s forwards;
}
@keyframes ml-ssr-late { to { visibility: visible; } }


html {
  font-family: var(--ml-font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);
  line-height: var(--ml-lh-body);
  color: var(--ml-text);
  -webkit-tap-highlight-color: transparent;
}
html:not([data-ml-theme="dark"]) body,
html[data-ml-theme="dark"] body { background: var(--ml-bg) !important; }

/* one family everywhere, including controls that browsers style natively */
button, input, select, textarea, optgroup { font-family: inherit; }
/* the browser's 1px/6px button padding is off the 4pt grid */
:where(button) { padding: 0 var(--ml-sp-2); }

h1, h2, h3, h4 { color: var(--ml-ink); font-weight: var(--ml-fw-bold); }
/* unclassed headings get the scale: display tracking and a tight line for
   the large ones, a title line for the rest */
h1 { font-size: var(--ml-fs-6); letter-spacing: var(--ml-ls-display); line-height: var(--ml-lh-display); }
h2 { font-size: var(--ml-fs-5); letter-spacing: var(--ml-ls-display); line-height: var(--ml-lh-display); }
h3 { font-size: var(--ml-fs-4); letter-spacing: var(--ml-ls-title); line-height: var(--ml-lh-title); }
h4 { font-size: var(--ml-fs-3); line-height: var(--ml-lh-title); }
p { line-height: var(--ml-lh-body); }

/* links: blue means "you can act here" */
a { color: var(--ml-accent-text); text-decoration: none; }
a:hover { color: var(--ml-accent-hover); }
html[data-ml-theme="dark"] a:hover { color: var(--ml-ink); }
p a:not([class]), li a:not([class]), dd a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ml-accent-line);
}
p a:not([class]):hover, li a:not([class]):hover { text-decoration-color: currentColor; }

/* a visible, distinct focus ring for keyboard users only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 2px;
  border-radius: var(--ml-r-sm);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

::selection { background: var(--ml-accent-soft-2); color: var(--ml-ink); }

hr {
  height: 1px;
  margin: var(--ml-sp-6) 0;
  border: 0;
  background: var(--ml-line);
}

img, svg, video { max-width: 100%; }

/* text for screen readers only */
.ml-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------- touch targets
   Every control is at least 44 x 44 CSS px to the finger. Components that look
   smaller (chips, small buttons, switches) keep their size with a class rule
   and extend the hit area with a positioned ::before instead. Links inside
   running text are exempt, as WCAG 2.5.8 allows. */
:where(button, [role="button"], [role="tab"], [role="switch"], summary, select) { min-height: var(--ml-tap); }
:where(button, [role="button"], [role="tab"]) { min-width: var(--ml-tap); }
:where(a[href]:not(p a, li a, dd a, dt a, td a, th a, blockquote a, figcaption a, label a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, small a)) { min-height: var(--ml-tap); }

/* uppercase Latin labels (EXP, PDF, units) get air between letters */
.ml-upper, [style*="text-transform:uppercase"], [style*="text-transform: uppercase"] {
  letter-spacing: var(--ml-ls-label);
}

/* numbers line up in stats and tables */
.ml-num, table, [data-count], .d-num { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ml-tint-2); border-radius: var(--ml-r-full); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
/* the same when the visitor switches animations off in the menu */
html[data-ml-motion="reduced"] *, html[data-ml-motion="reduced"] *::before, html[data-ml-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
/* With animations off, a demo that fades its rows in and out shows them
   still, and a strip that rolls sideways scrolls by hand instead. */
@media (prefers-reduced-motion: reduce) {
  [style*="ml-step"] { opacity: 1 !important; animation: none !important; }
  .ml-marq, .ml-strip { overflow-x: auto !important; }
}
html[data-ml-motion="reduced"] [style*="ml-step"] { opacity: 1 !important; animation: none !important; }
html[data-ml-motion="reduced"] :is(.ml-marq, .ml-strip) { overflow-x: auto !important; }
html[data-ml-motion="reduced"]::view-transition-group(root),
html[data-ml-motion="reduced"]::view-transition-old(root),
html[data-ml-motion="reduced"]::view-transition-new(root) { animation: none !important; }

@keyframes ml-spin { to { transform: rotate(360deg); } }
@keyframes ml-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }