/* MediLab: site-head.css, made at build time from the sheets below (1.6.1). Do not edit: edit the sheets. */
/* ---- assets/ds/tokens.css ---- */
/* ==========================================================================
   MediLab design tokens. The single source of truth for colour, type,
   spacing, radius, elevation and motion. Every other stylesheet, template
   and script reads these variables; none of them hard-codes a value.

   Rules enforced here (from the interface spec):
   - 4pt grid: every spacing token is a multiple of 4px.
   - One sans-serif family for the whole interface.
   - Semantic colour: blue = action/trust, green = success, yellow = warning,
     red = danger. No other hue carries meaning.
   - Depth: light mode uses soft multi-layer shadows with a top highlight;
     dark mode uses surface lightness steps and 10-15% white borders only.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- type ------------------------------------------------------------ */
  --ml-font: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* The book's handwriting voice, for learning content only: terms, the
     teacher's boxes, flash-card fronts, the sample answer and the deep
     explanation. Navigation, buttons, forms and running text stay in the
     site face. If the script face fails to load, the site face stands in. */
  --ml-font-voice: "Playpen Sans Hebrew", var(--ml-font);

  --ml-fs-1: 12px;   /* captions, badges, fine print */
  --ml-fs-2: 14px;   /* secondary text, compact controls */
  --ml-fs-3: 16px;   /* body, buttons, inputs */
  --ml-fs-4: 20px;   /* card titles */
  --ml-fs-5: 24px;   /* section titles; the dashboard ceiling */
  --ml-fs-6: 32px;   /* landing section titles, phone hero */
  --ml-fs-7: 40px;   /* landing hero */
  --ml-fs-section: 24px;   /* landing section titles: 24 on phones, 32 from 720px */
  --ml-fs-hero: 32px;      /* landing hero: 32 on phones, 40 from 720px */

  --ml-lh-display: 1.15;
  --ml-lh-title: 1.3;
  --ml-lh-ui: 1.4;
  --ml-lh-body: 1.6;

  --ml-ls-display: -0.025em;
  --ml-ls-title: -0.01em;
  --ml-ls-label: 0.05em;

  --ml-fw-regular: 400;
  --ml-fw-medium: 600;
  --ml-fw-bold: 700;
  --ml-fw-heavy: 800;

  /* ---- spacing: 4pt grid ------------------------------------------------ */
  --ml-sp-0: 0;
  --ml-sp-1: 4px;
  --ml-sp-2: 8px;
  --ml-sp-3: 12px;
  --ml-sp-4: 16px;
  --ml-sp-5: 20px;
  --ml-sp-6: 24px;
  --ml-sp-8: 32px;
  --ml-sp-10: 40px;
  --ml-sp-12: 48px;
  --ml-sp-14: 56px;
  --ml-sp-16: 64px;
  --ml-sp-20: 80px;
  --ml-sp-24: 96px;

  /* one alignment axis per container */
  --ml-gutter: 16px;
  --ml-container: 1152px;
  --ml-reading: 720px;

  /* ---- radius ----------------------------------------------------------- */
  --ml-r-xs: 4px;
  --ml-r-sm: 8px;
  --ml-r-md: 12px;
  --ml-r-lg: 16px;
  --ml-r-xl: 24px;
  --ml-r-full: 999px;

  /* ---- sizing ----------------------------------------------------------- */
  --ml-tap: 44px;          /* minimum touch target */
  --ml-control-sm: 36px;   /* visual height; the hit area still reaches 44px */
  --ml-control: 44px;
  --ml-control-lg: 52px;
  --ml-header-h: 64px;
  --ml-tabbar-h: 64px;

  /* ---- colour: light --------------------------------------------------- */
  --ml-bg: #F5F7F9;
  --ml-surface: #FFFFFF;
  --ml-surface-2: #FFFFFF;
  --ml-surface-3: #FFFFFF;
  --ml-sunken: #EDF0F4;
  --ml-sunken-2: #E3E7EC;

  --ml-ink: #161F2A;       /* headings */
  --ml-text: #37414D;      /* body: a step softer than headings */
  --ml-muted: #5C646F;     /* secondary text, 5.6:1 on the page */
  --ml-subtle: #6B7280;    /* meta text, placeholders: 4.8:1 on white */

  --ml-line: rgb(22 31 42 / 0.08);        /* dividers: 8% */
  --ml-line-strong: rgb(22 31 42 / 0.14); /* field outlines */
  --ml-tint: rgb(22 31 42 / 0.05);
  --ml-tint-2: rgb(22 31 42 / 0.09);

  --ml-accent: #2E6FBE;          /* blue: action and trust */
  --ml-accent-hover: #1F5FA9;
  --ml-accent-press: #144F92;
  --ml-accent-text: #2463AE;
  --ml-accent-soft: #EAF3FE;
  --ml-accent-soft-2: #D3E7FF;
  --ml-accent-line: rgb(46 111 190 / 0.35);
  --ml-on-accent: #FFFFFF;
  --ml-on-accent-muted: rgb(255 255 255 / 0.92);
  --ml-on-accent-tint: rgb(255 255 255 / 0.18);

  --ml-success: #1D7D3E;
  --ml-success-soft: #E6FAE9;
  --ml-warning: #EFBD24;
  --ml-warning-text: #7E4F04;
  --ml-warning-soft: #FFF7D9;
  --ml-danger: #C52B30;
  --ml-danger-soft: #FFEEEE;

  --ml-inverse: #1A2532;         /* a dark block inside a light page */
  --ml-on-inverse: #FFFFFF;
  --ml-on-inverse-muted: rgb(255 255 255 / 0.72);

  --ml-glass: rgb(255 255 255 / 0.78);    /* translucent bars over content */
  --ml-scrim: rgb(9 14 20 / 0.48);         /* behind sheets and dialogs */
  --ml-media-scrim: linear-gradient(180deg, rgb(9 14 20 / 0) 0%, rgb(9 14 20 / 0.18) 40%, rgb(9 14 20 / 0.72) 100%);

  /* brand wordmark, as printed */
  --ml-brand-blue: #2E6FBE;
  --ml-brand-green: #3FA54B;
  --ml-brand-ink: #161F2A;

  /* ---- elevation: light (top highlight + diffused low-opacity drop) ---- */
  --ml-elev-0: none;
  --ml-elev-1: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(22 31 42 / 0.05), 0 4px 16px rgb(22 31 42 / 0.05);
  --ml-elev-2: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 2px 4px rgb(22 31 42 / 0.05), 0 12px 32px rgb(22 31 42 / 0.08);
  --ml-elev-3: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 4px 8px rgb(22 31 42 / 0.06), 0 24px 56px rgb(22 31 42 / 0.12);
  --ml-elev-accent: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(20 79 146 / 0.14), 0 4px 12px rgb(20 79 146 / 0.12);
  --ml-sunken-shadow: inset 0 1px 2px rgb(22 31 42 / 0.08), inset 0 -1px 0 rgb(255 255 255 / 0.7);
  --ml-ring-line: inset 0 0 0 1px var(--ml-line);
  --ml-ring-accent: inset 0 0 0 2px var(--ml-accent);
  --ml-focus-ring: 0 0 0 3px var(--ml-surface), 0 0 0 5px var(--ml-accent);

  /* ---- motion ------------------------------------------------------------ */
  --ml-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ml-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ml-dur-1: 120ms;
  --ml-dur-2: 200ms;
  --ml-dur-3: 320ms;

  /* ---- layers ------------------------------------------------------------- */
  --ml-z-header: 40;
  --ml-z-tabbar: 60;
  --ml-z-dropdown: 80;
  --ml-z-sheet: 1000;
  --ml-z-menu: 1050;
  --ml-z-toast: 1100;
  --ml-z-coach: 1200;
}

/* ---- colour: dark (depth from surface lightness, never from shadow) ---- */
html[data-ml-theme="dark"] {
  color-scheme: dark;
  --ml-bg: #111418;          /* L* 6 */
  --ml-surface: #202328;     /* L* 14 */
  --ml-surface-2: #2E3237;   /* L* 21 */
  --ml-surface-3: #3E4146;   /* L* 27 */
  --ml-sunken: #0B0F13;
  --ml-sunken-2: #161A1E;

  --ml-ink: #EFF2F5;
  --ml-text: #D1D5D9;
  --ml-muted: #A0A5AC;
  --ml-subtle: #949AA1;

  --ml-line: rgb(255 255 255 / 0.10);
  --ml-line-strong: rgb(255 255 255 / 0.15);
  --ml-tint: rgb(255 255 255 / 0.05);
  --ml-tint-2: rgb(255 255 255 / 0.09);

  --ml-accent: #2E6FBE;
  --ml-accent-hover: #3D7ECE;
  --ml-accent-press: #2863AB;
  --ml-accent-text: #81B4F6;
  --ml-accent-soft: #1C2633;     /* desaturated chip fill */
  --ml-accent-soft-2: #223144;
  --ml-accent-line: rgb(129 180 246 / 0.35);

  --ml-success: #7CCD8E;
  --ml-success-soft: #1E3022;
  --ml-warning: #F4C855;
  --ml-warning-text: #EFCD79;
  --ml-warning-soft: #352D19;
  --ml-danger: #F07F77;
  --ml-danger-soft: #402625;
  /* the same hues one step below the card surface: notes inside a card */
  --ml-well-accent: #141B24;
  --ml-well-warning: #211C10;
  --ml-well-danger: #26181A;
  --ml-well-success: #13201A;

  --ml-inverse: #2E3237;         /* dark blocks lift above the page, like any card */
  --ml-on-inverse: #EFF2F5;
  --ml-on-inverse-muted: rgb(239 242 245 / 0.72);

  --ml-glass: rgb(32 35 40 / 0.78);
  --ml-scrim: rgb(0 0 0 / 0.56);

  --ml-brand-blue: #81B4F6;
  --ml-brand-green: #7CCD8E;
  --ml-brand-ink: #EFF2F5;

  /* no drop shadows: a lighter surface, a top highlight and a 10-15% border */
  --ml-elev-1: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px rgb(255 255 255 / 0.10);
  --ml-elev-2: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.12);
  --ml-elev-3: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.15);
  --ml-elev-accent: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 1px rgb(255 255 255 / 0.10);
  --ml-sunken-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.04);
}

@media (min-width: 720px) {
  :root { --ml-gutter: 24px; --ml-fs-section: 32px; --ml-fs-hero: 40px; }
}

/* ---- legacy names -----------------------------------------------------------
   Older stylesheets and scripts still read these. They are aliases now, so the
   whole site answers to one palette. */
:root, html[data-ml-theme="dark"] {
  --ml-card: var(--ml-surface);
  --ml-page: var(--ml-bg);
  --ml-mut: var(--ml-muted);
  --ml-acc: var(--ml-accent-text);
  --ml-a1: var(--ml-accent);
  --ml-a2: var(--ml-accent);
  --ml-grad: var(--ml-accent);
}

/* Inverse surfaces: dark panels inside the light theme (and their twins in
   the dark theme) re-map the text and line tokens, so any token-coloured
   text placed on them reads on the dark ground. */
.ml-inverse, .ml-fb,
[style*="background:var(--ml-inverse)"], [style*="background: var(--ml-inverse)"],
[style*="background-color:var(--ml-inverse)"], [style*="background-color: var(--ml-inverse)"] {
  --ml-ink: #EFF2F5;
  --ml-text: #D1D5D9;
  --ml-muted: #A0A5AC;
  --ml-subtle: #949AA1;
  --ml-line: rgb(255 255 255 / 0.10);
  --ml-line-strong: rgb(255 255 255 / 0.15);
  --ml-tint: rgb(255 255 255 / 0.05);
  --ml-tint-2: rgb(255 255 255 / 0.09);
  --ml-sunken: rgb(0 0 0 / 0.24);
  --ml-accent-text: #81B4F6;
  --ml-accent-soft: #1C2633;
  --ml-accent-soft-2: #223144;
  --ml-success: #7CCD8E;
  --ml-danger: #F07F77;
  --ml-warning-text: #EFCD79;
  color: var(--ml-on-inverse);
}

/* Elevation on filled surfaces. The light elevations carry a bright top
   highlight: on a white surface it is felt, not seen, but on an accent or
   inverse fill it draws a hard white line along the top edge. A filled
   surface takes a highlight of the fill's own strength over the same soft
   drops. The dark theme's elevations are built for dark fills already. */
html:not([data-ml-theme="dark"]) :is(
  [style*="background:var(--ml-accent)"], [style*="background: var(--ml-accent)"],
  [style*="background-color:var(--ml-accent)"], [style*="background-color: var(--ml-accent)"],
  .lbl-badge) {
  --ml-elev-1: var(--ml-elev-accent);
  --ml-elev-2: var(--ml-elev-accent);
  --ml-elev-3: var(--ml-elev-accent);
}
html:not([data-ml-theme="dark"]) :is(.ml-inverse, .ml-fb, .ml-mapwrap,
  [style*="background:var(--ml-inverse)"], [style*="background: var(--ml-inverse)"],
  [style*="background-color:var(--ml-inverse)"], [style*="background-color: var(--ml-inverse)"]) {
  --ml-elev-1: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 1px 2px rgb(22 31 42 / 0.05), 0 4px 16px rgb(22 31 42 / 0.05);
  --ml-elev-2: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 2px 4px rgb(22 31 42 / 0.05), 0 12px 32px rgb(22 31 42 / 0.08);
  --ml-elev-3: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 4px 8px rgb(22 31 42 / 0.06), 0 24px 56px rgb(22 31 42 / 0.12);
}

/* Landing pages (home for visitors, pricing, shop, about) use six sizes:
   the smallest step becomes 14px there. The member home is a dashboard:
   nothing on it is set larger than 24px. */
html:is([data-ml-page="home"], [data-ml-page="pricing"], [data-ml-page="shop"], [data-ml-page="about"]) { --ml-fs-1: 14px; }
html[data-ml-page="home"][data-ml-auth="member"], html[data-ml-page="personal"] {
  --ml-fs-6: 24px; --ml-fs-7: 24px; --ml-fs-section: 24px; --ml-fs-hero: 24px;
}

/* 1.6.2 (p180): pictures inside lesson text. Width by the picture's shape, one height cap for all. */
:root {
  --ml-fig-w-wide: 720px;
  --ml-fig-w-land: 600px;
  --ml-fig-w-square: 460px;
  --ml-fig-w-tall: 360px;
  --ml-fig-h: min(480px, 58vh);
}
@media (max-width: 620px) {
  :root { --ml-fig-w-wide: 100%; --ml-fig-w-land: 100%; --ml-fig-w-square: 100%; --ml-fig-w-tall: 100%; --ml-fig-h: min(460px, 56vh); }
}
/* ---- assets/ds/base.css ---- */
/* ==========================================================================
   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; } }