/* MediLab: site-tail.css, made at build time from the sheets below (1.6.1). Do not edit: edit the sheets. */
/* ---- assets/icons.css ---- */
/* MediLab — animated line icons (Lucide geometry, CSS motion).
   Each icon is inline SVG; the wrapper carries .ai plus one .aa-* class.
   Motion fires on hover of the icon or of the link/button that holds it. */

.ai svg, .aa svg { width: 100%; height: 100%; display: block; }

/* ---- helpers ---------------------------------------------------------- */
@keyframes aa-draw   { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes aa-send   { 0%,100% { transform: none; } 45% { transform: translate(3px,-3px) scale(.8); } }
@keyframes aa-lift9  { 0%,100% { transform: none; } 45% { transform: translateY(-4px); } }
@keyframes aa-lift5  { 0%,100% { transform: none; } 45% { transform: translateY(-2.2px); } }
@keyframes aa-gavel  { 0% { transform: rotate(0); } 30% { transform: rotate(-20deg); } 65% { transform: rotate(25deg); } 100% { transform: rotate(0); } }
@keyframes aa-brain  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes aa-cap    { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-2.5px) rotate(-5deg); } 65% { transform: translateY(1px) rotate(4deg); } }
@keyframes aa-tassel { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }
@keyframes aa-play   { 0%,100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(-1.6px) rotate(-10deg); } 75% { transform: translateX(1.2px) rotate(0); } }
@keyframes aa-slide  { from { transform: translateX(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aa-pen    { 0%,100% { transform: none; } 30% { transform: translate(1.4px,-1.4px) rotate(-8deg); } 65% { transform: translate(-.6px,.6px) rotate(4deg); } }
@keyframes aa-hunt   { 0%,100% { transform: none; } 35% { transform: translate(-2px,-2.6px); } 70% { transform: translate(1.4px,1.2px); } }
@keyframes aa-spin   { to { transform: rotate(360deg); } }

/* every animated part rotates/moves around its own box, not the viewBox */
.aa [data-p] { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---- send ------------------------------------------------------------- */
.aa-send [data-p] { transition: transform .3s ease; }
a:hover .aa-send [data-p], button:hover .aa-send [data-p], .aa-send:hover [data-p] { animation: aa-send .5s ease; }

/* ---- earth (draws itself) --------------------------------------------- */
.aa-earth [data-p] { stroke-dasharray: 1; stroke-dashoffset: 0; }
a:hover .aa-earth [data-p], button:hover .aa-earth [data-p], .aa-earth:hover [data-p] { animation: aa-draw .7s linear both; }
.aa-earth [data-p="2"] { animation-delay: .08s; }
.aa-earth [data-p="3"] { animation-delay: .16s; }
.aa-earth [data-p="4"] { animation-delay: .24s; }

/* ---- brain ------------------------------------------------------------ */
.aa-brain svg { transform-origin: 50% 50%; }
a:hover .aa-brain svg, button:hover .aa-brain svg, .aa-brain:hover svg { animation: aa-brain 1.4s ease-in-out infinite; }

/* ---- layers ----------------------------------------------------------- */
a:hover .aa-layers [data-p="2"], button:hover .aa-layers [data-p="2"], .aa-layers:hover [data-p="2"] { animation: aa-lift9 .6s cubic-bezier(.3,1.4,.5,1); }
a:hover .aa-layers [data-p="3"], button:hover .aa-layers [data-p="3"], .aa-layers:hover [data-p="3"] { animation: aa-lift5 .6s cubic-bezier(.3,1.4,.5,1); }

/* ---- gavel ------------------------------------------------------------ */
.aa-gavel svg { transform-origin: 15% 85%; }
a:hover .aa-gavel svg, button:hover .aa-gavel svg, .aa-gavel:hover svg { animation: aa-gavel .8s ease; }

/* ---- message-circle-check --------------------------------------------- */
.aa-check [data-p] { stroke-dasharray: 1; stroke-dashoffset: 0; }
a:hover .aa-check [data-p], button:hover .aa-check [data-p], .aa-check:hover [data-p] { animation: aa-draw .45s ease-in-out both; }

/* ---- graduation cap --------------------------------------------------- */
a:hover .aa-cap [data-p="1"], a:hover .aa-cap [data-p="2"],
button:hover .aa-cap [data-p="1"], button:hover .aa-cap [data-p="2"],
.aa-cap:hover [data-p="1"], .aa-cap:hover [data-p="2"] { animation: aa-cap .8s ease; }
.aa-cap [data-p="3"] { transform-origin: 50% 0%; }
a:hover .aa-cap [data-p="3"], button:hover .aa-cap [data-p="3"], .aa-cap:hover [data-p="3"] { animation: aa-tassel .8s ease; }

/* ---- play ------------------------------------------------------------- */
a:hover .aa-play [data-p], button:hover .aa-play [data-p], .aa-play:hover [data-p],
[data-press]:hover .aa-play [data-p] { animation: aa-play .5s ease; }

/* ---- users-round ------------------------------------------------------ */
a:hover .aa-users [data-p="3"], button:hover .aa-users [data-p="3"], .aa-users:hover [data-p="3"] { animation: aa-slide .45s cubic-bezier(.3,1.3,.5,1) both; }

/* ---- square-pen ------------------------------------------------------- */
a:hover .aa-pen [data-p], button:hover .aa-pen [data-p], .aa-pen:hover [data-p] { animation: aa-pen .6s ease; }

/* ---- search ----------------------------------------------------------- */
a:hover .aa-search [data-p], button:hover .aa-search [data-p], .aa-search:hover [data-p],
.aa-search.is-live [data-p] { animation: aa-hunt 1s ease; }

/* ---- volume / read aloud ---------------------------------------------- */
@keyframes aa-wave      { 0% { opacity: 0; transform: translateX(-2px) scale(.8); } 55% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes aa-wave-loop { 0%,100% { opacity: .2; transform: translateX(-1.5px) scale(.9); } 50% { opacity: 1; transform: none; } }
.aa-vol [data-p] { transform-origin: 0% 50%; opacity: .45; transition: opacity .2s ease; }
a:hover .aa-vol [data-p], button:hover .aa-vol [data-p], .aa-vol:hover [data-p] { animation: aa-wave .5s ease both; }
.aa-vol [data-p="2"] { animation-delay: .12s; }
.aa-vol.is-live [data-p="1"] { animation: aa-wave-loop 1.1s ease-in-out infinite !important; }
.aa-vol.is-live [data-p="2"] { animation: aa-wave-loop 1.1s ease-in-out .18s infinite !important; }

@media (prefers-reduced-motion: reduce) { .aa * { animation: none !important; } .aa-vol [data-p] { opacity: 1; } }

/* ---- download / install ------------------------------------------------ */
.aa-down svg { animation: aa-drop 2.6s ease-in-out 2; }
button:hover .aa-down svg,
a:hover .aa-down svg { animation-duration: .85s; }
@keyframes aa-drop {
  0%, 70%, 100% { transform: none; }
  80%           { transform: translateY(2.5px); }
  90%           { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .aa-down svg { animation: none; } }

/* ---- home-screen install block ---------------------------------------- */
/* On a narrow screen it simply sits under the greeting. From tablet width up
   it floats into the empty corner beside the greeting, on the same left line
   as everything else on the page, so it never squeezes the content. */
.ml-getapps { display: flex; gap: 16px; margin-top: 24px; }
.ml-hero-rel { position: relative; }
@media (min-width: 980px) {
  .ml-getapps { position: absolute; left: 24px; top: 96px; margin: 0; }
}

/* ---- the prize wall folds ---------------------------------------------- */
.ml-fold-bar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 4px 0 16px; padding: 12px 16px;
  border: 1px solid var(--ml-line); border-radius: var(--ml-r-lg);
  background: var(--ml-tint); color: inherit;
  font-family: inherit; font-size: var(--ml-fs-3); font-weight: 700; text-align: start;
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.ml-fold-bar:hover { background: var(--ml-tint-2); border-color: var(--ml-line-strong); }
.ml-fold-txt { flex: none; }
.ml-fold-sub { flex: 1; font-size: var(--ml-fs-2); font-weight: 500; opacity: .72; }
.ml-fold-chev { flex: none; display: inline-flex; transition: transform .22s ease; }
.ml-fold-bar.is-open .ml-fold-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ml-fold-chev { transition: none; } }

/* ---- dashboard: prizes sit beside the medals ---------------------------- */
/* The prize card used to run the full width under the medals, leaving a hole
   next to them. On a wide screen it now takes the two free columns of the
   same row, so both cards start and end on the same lines as the rest. */
@media (min-width: 900px) {
  .d-grid.d-main > .d-card[style*="grid-column:1/-1"] { grid-column: span 2 !important; }
}

/* Closed prize wall: every category melts away and the won prizes stand in
   one row, so the page stays short. */
.ml-wall-flat { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.ml-wall-flat .mlx-tile { width: 132px; margin: 0; }

/* Open prize wall: the categories stand side by side instead of one long
   column, so the whole wall fits on a screen or two. */
.ml-wall-cols { columns: 2; column-gap: 24px; }
.ml-wall-cols > * { break-inside: avoid; }
.ml-wall-cols > .ml-cat-head { break-after: avoid; }
@media (min-width: 1200px) { .ml-wall-cols { columns: 3; } }
@media (max-width: 640px)  { .ml-wall-cols { columns: 1; } }

/* ---- downloads: a column in the personal area, a row on the front page -- */
/* .ml-getapps is the block in the signed-in hero. .ml-getapps-col is the pair
   on the public home page, and there the two tiles sit side by side. */
.ml-getapps { flex-direction: column; }
.ml-getapps-col { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }

/* ---- news and updates strip -------------------------------------------- */
.ml-news {
  margin-top: 20px;
  padding: 16px 16px;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-r-lg);
  background: var(--ml-glass);
  box-shadow: var(--ml-elev-1);
  text-align: right;
}
.ml-news.is-float { position: absolute; margin: 0; }

.ml-news-h {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-size: var(--ml-fs-3); font-weight: 800; color: var(--ml-accent-text);
  letter-spacing: .2px;
}
.ml-news-dot {
  flex: none; width: 8px; height: 8px; border-radius: var(--ml-r-full);
  background: var(--ml-danger);
  animation: ml-news-pulse 1.9s ease-in-out 4;
}
@keyframes ml-news-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.ml-news-vp {
  position: relative;
  height: 136px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
}
.ml-news.is-float .ml-news-vp { height: 176px; }

.ml-news-tr  { will-change: transform; }
/* standing still: one copy of the list, scrolled by hand */
.ml-news-vp.is-still { overflow-y: auto; overscroll-behavior: contain; }
.ml-news-tr.is-still { will-change: auto; }
.ml-news-tr.is-still > :not(:first-child) { display: none; }
.ml-news-tr.is-still > :first-child { padding-bottom: 12px !important; }
.ml-news-set { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }

.ml-news-i {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: var(--ml-fs-2); line-height: 1.55; color: var(--ml-ink);
}
.ml-news-i b { flex: none; color: var(--ml-accent-text); font-weight: 800; }

@media (max-width: 979px) {
  .ml-news { max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-news-dot { animation: none; }
}

/* ---- downloads: a row on phones, a column on desktop ------------------- */
@media (max-width: 979px) {
  .ml-getapps,
  .ml-getapps-col { flex-direction: row; flex-wrap: wrap; }
}

/* ---- the download button, a size down ---------------------------------- */
.ml-getapps [data-ml-install],
.ml-getapps-col [data-ml-install] {
  padding: 8px !important;
  font-size: var(--ml-fs-1) !important;
  border-radius: var(--ml-r-md) !important;
  gap: 4px !important;
}
.ml-getapps [data-ml-install] svg,
.ml-getapps-col [data-ml-install] svg { width: 12px; height: 12px; }

/* ---- open prize wall: wide rows, not tall columns ---------------------- */
.ml-wall-cols { columns: auto !important; }
.ml-wall-cols > div:not(.ml-cat-head) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}
.ml-wall-cols > .ml-cat-head { margin: 12px 0 8px !important; }
.ml-wall-cols .mlx-tile { width: auto !important; margin: 0 !important; }

/* Text that arrived the same colour as its own surface. */
html[data-ml-theme="dark"] .ml-ink.ml-ink { color: var(--ml-ink) !important; }

/* Course pages were authored with inline light-theme colours. Restrict these
   overrides to the course shell so every nested view remains readable at
   night without changing the intentional white scientific diagrams. */
html[data-ml-theme="dark"] .ml-course-screen { color: var(--ml-ink) !important; }

html[data-ml-theme="dark"] .ml-course-screen .ml-urow,
html[data-ml-theme="dark"] .ml-course-screen .ml-of {
  border-color: var(--ml-line-strong) !important;
}
html[data-ml-theme="dark"] .ml-course-screen button:disabled { color: var(--ml-text) !important; opacity: .76; }
html[data-ml-theme="dark"] .ml-course-screen footer { border-top: 1px solid var(--ml-line); }

/* ---- testimonial marquee: hands on ------------------------------------- */
.ml-marq-hold { position: relative; }
/* Once the script takes over, the CSS sweep steps aside and the strip becomes
   a real scroller, so a finger, a wheel or an arrow key can hold it on one
   card or move to another. */
.ml-marq.ml-marq-live {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  direction: ltr;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: pan-y;
}
.ml-marq.ml-marq-live::-webkit-scrollbar { width: 0; height: 0; }
.ml-marq.ml-marq-live.is-dragging { cursor: grabbing; user-select: none; }
.ml-marq.ml-marq-live .ml-marq-track { animation: none !important; }
.ml-marq.ml-marq-live:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 4px; }

.ml-marq-nav{position: absolute;top: 50%;transform: translateY(-50%);z-index: 3;display: inline-flex;align-items: center;justify-content: center;width: 44px;-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px)}
.ml-marq-nav:hover{transform: translateY(-50%) scale(1.06)}
.ml-marq-nav:focus-visible{outline-offset: 3px}
html[data-ml-theme="dark"] .ml-marq-nav:focus-visible{outline-color: var(--ml-accent)}
.ml-marq-prev { right: 8px; }
.ml-marq-next { left: 8px; }

@media (max-width: 640px) {
  .ml-marq-nav{width: 44px}
  .ml-marq-prev { right: 4px; }
  .ml-marq-next { left: 4px; }
}

/* ---- ml-marq-phone: the testimonial strip on a small screen ------------- */
/* A finger has to be able to push the strip sideways, so the strip keeps both
   pan axes. The class repeats to outrank the theme runtime. */
.ml-marq.ml-marq.ml-marq.ml-marq-live {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

@media (max-width: 640px) {
  /* Only the width changes on a phone. The card keeps its own build: the
     photo runs the full height of one side and meets the text with no seam. */
  .ml-marq.ml-marq.ml-marq .ml-marq-track > * {
    width: min(84vw, 340px) !important;
    min-width: min(84vw, 340px) !important;
    max-width: min(84vw, 340px) !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
  }

  .ml-marq-nav{width: 36px !important;opacity: .94}

  .ml-marq-prev { right: 0px !important; }
  .ml-marq-next { left: 0px !important; }
}

/* ---- the hero side column on the public home page ---------------------- */
/* The preview card now starts level with the headline, and the news strip
   drops in underneath it, opposite the row of numbers. */
.ml-hero-side {
  flex: none;
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}

.ml-hero-side .ml-hero-art {
  width: 100%;
  flex: none;
}

/* The strip fills whatever the preview card leaves, so it runs from under the
   card down to the foot of the column and shows more of the list. */
/* Every step of the chain takes its height from the space above it, never
   from its own content. With a basis of auto the strip fed its own growth:
   the ticker clones rows until the viewport is covered, the viewport grew
   with the rows, and the box ran away down the page. */
.ml-news-slot {
  flex: 1 1 0;
  display: flex;
  min-height: 0;
}

.ml-news-slot .ml-news {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ml-news-slot .ml-news-vp {
  flex: 1 1 0;
  height: auto;
  min-height: 120px;
  max-height: 100%;
}
.ml-news-slot:empty { display: none; }

.ml-news-slot .ml-news {
  margin-top: 0 !important;
  position: static !important;
  width: 100%;
}

@media (max-width: 979px) {
  .ml-hero-side {
    width: 100% !important;
    order: 2;
    align-self: auto;
  }

  .ml-news-slot { flex: 0 0 auto; display: block; }

  .ml-news-slot .ml-news-vp { flex: none; height: 176px !important; }
}

/* ---- a long testimonial ------------------------------------------------ */
/* Every card shows the same six lines, so the row keeps one height. A card
   whose words run past that grows a link, and the link opens the whole thing
   in a panel. Same behaviour on a phone and on a desktop. */
/* The quote sits inside a flex column, and a flex item cannot carry a line
   clamp: the browser turns the box back into a block and the clamp is lost.
   The card already cuts the overflow, so what was missing is the sign that
   something was cut. A card that runs long gets a soft fade over its last
   line and a link under it. */
.ml-marq .ml-quote.ml-qclamp { position: relative; }

.ml-marq .ml-qcut .ml-quote.ml-qclamp::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: var(--ml-surface);
  pointer-events: none;
}

html[data-ml-theme="dark"] .ml-marq .ml-qcut .ml-quote.ml-qclamp::after {
  background: var(--ml-surface);
}

.ml-qmore{align-self: flex-start;margin: 8px 0 0;font: inherit;text-underline-offset: 3px}

.ml-qmore:focus-visible{outline-offset: 3px}

.ml-qdlg {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ml-qdlg.is-open { display: flex; }

.ml-qdlg-veil {
  position: absolute;
  inset: 0;
  background: var(--ml-scrim);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ml-qdlg-panel {
  position: relative;
  display: flex;
  width: min(94vw, 660px);
  max-height: 86vh;
  background: var(--ml-surface);
  border-radius: var(--ml-r-xl);
  overflow: hidden;
  box-shadow: var(--ml-elev-3);
}

.ml-qdlg-photo {
  flex: 0 0 auto;
  width: 40%;
  align-self: stretch;
  object-fit: cover;
  object-position: 54% 46%;
  display: block;
}

.ml-qdlg-body {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  text-align: right;
  overflow: auto;
  overscroll-behavior: contain;
}

.ml-qdlg-text {
  margin: 8px 0 0;
  font-size: var(--ml-fs-3);
  line-height: var(--ml-lh-body);
  color: var(--ml-text);
  text-align: start;
}

.ml-qdlg-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ml-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ml-qdlg-name { font-weight: 700; color: var(--ml-ink); }
.ml-qdlg-score { font-weight: 700; color: var(--ml-accent-text); }

.ml-qdlg-x {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ml-r-full);
  background: var(--ml-glass);
  color: var(--ml-ink);
  box-shadow: var(--ml-elev-2);
  cursor: pointer;
}

.ml-qdlg-x:hover { background: var(--ml-surface); }

html[data-ml-theme="dark"] .ml-qdlg-panel { background: var(--ml-surface); }
html[data-ml-theme="dark"] .ml-qdlg-text { color: var(--ml-ink); }
html[data-ml-theme="dark"] .ml-qdlg-name { color: var(--ml-ink); }
html[data-ml-theme="dark"] .ml-qdlg-score { color: var(--ml-accent-text); }
html[data-ml-theme="dark"] .ml-qdlg-foot { border-top-color: var(--ml-line); }
html[data-ml-theme="dark"] .ml-qdlg-x { background: var(--ml-surface-2); color: var(--ml-ink); }

@media (max-width: 640px) {
  .ml-qdlg { padding: 12px; }

  .ml-qdlg-panel {
    flex-direction: column;
    width: 96vw;
    max-height: 88vh;
  }

  .ml-qdlg-photo {
    width: 100%;
    height: 168px;
    flex: 0 0 auto;
    align-self: auto;
  }

  /* In a column the text side must take its own height. With a basis of
     zero it collapsed and only the photo showed. */
  .ml-qdlg-body {
    padding: 16px 16px;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ---- the card holds its own type sizes --------------------------------- */
/* A phone browser is allowed to inflate text it thinks is too small for the
   screen, and inside a fixed-width card that lands as one word blown up over
   everything else. The card opts out and states its own sizes. */
.ml-marq .ml-marq-track > *,
.ml-marq .ml-marq-track > * * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.ml-marq .ml-qname,
.ml-marq .ml-qscore {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ml-marq .ml-qscore { white-space: nowrap; }

/* ---- the strip answers a mouse ----------------------------------------- */
.ml-marq.ml-marq-live.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.ml-marq.ml-marq-live.is-dragging * { cursor: grabbing; }

.ml-marq img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The arrows are the obvious way across, so they stay visible and solid. */
.ml-marq-nav{opacity: 1}

@media (max-width: 640px) {
  /* On a narrow card the numbers and the name step down with it. */
  .ml-marq.ml-marq.ml-marq .ml-qname { font-size: var(--ml-fs-3) !important; }
  .ml-marq.ml-marq.ml-marq .ml-qscore { font-size: var(--ml-fs-1) !important; }
  .ml-marq.ml-marq.ml-marq .ml-qscore b { font-size: var(--ml-fs-4) !important; }
  .ml-marq.ml-marq.ml-marq .ml-quote { font-size: var(--ml-fs-2) !important; }
  
}

/* ---- the questions stand side by side ---------------------------------- */
/* Each question keeps its own box, so opening one grows that box alone and
   the block stays short instead of running down the whole page. */
.ml-faq-grid > * {
  align-self: start;
  min-width: 0;
}

.ml-faq-grid > * > * { min-width: 0; }

@media (max-width: 640px) {
  .ml-faq-grid { grid-template-columns: 1fr !important; }
}

/* ---- the four entry cards move as one ---------------------------------- */
/* The waves idled at 55, 50 and 45 seconds while the open card ran at 3, 4
   and 5. Side by side that reads as a fault, so both states now share one
   pace and only the three layers drift slightly apart. */
.ml-ecard .wv,
.ml-ecard.playing .wv { animation-duration: 16s !important; }

.ml-ecard .wv:nth-of-type(2),
.ml-ecard.playing .wv:nth-of-type(2) { animation-duration: 14s !important; }

.ml-ecard .wv:nth-of-type(3),
.ml-ecard.playing .wv:nth-of-type(3) { animation-duration: 12s !important; }

@media (prefers-reduced-motion: reduce) {
  .ml-ecard .wv, .ml-ecard.playing .wv { animation: none !important; }
  
  .ml-marq-nav:hover{transform: translateY(-50%)}
}

/* ---- the name and the grade keep their size ---------------------------- */
/* Nothing outside the card may inflate this line: it sits at the foot of a
   fixed box and a larger size spills across the whole card. */
.ml-marq .ml-qname.ml-qname {
  font-size: var(--ml-fs-4) !important;
  line-height: 1.3 !important;
}

.ml-marq .ml-qscore.ml-qscore {
  font-size: var(--ml-fs-2) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  zoom: 1 !important;
  transform: none !important;
}

.ml-marq .ml-qscore.ml-qscore b {
  font-size: var(--ml-fs-5) !important;
  line-height: var(--ml-lh-display) !important;letter-spacing:var(--ml-ls-display);
}

/* and the card clips anything that still tries to run past its edge */
.ml-marq .ml-marq-track > * { overflow: hidden !important; }

/* ---- the bar a visitor meets ------------------------------------------- */
/* Three actions, in the shapes the site already uses: the filled pill for
   buying, a quiet outline for signing in, and a round icon for the cart. */
.ml-guest-acts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ml-guest-acts .ml-cta{display: inline-flex;align-items: center;gap: 8px}

.ml-guest-in{display: inline-flex;align-items: center;white-space: nowrap}

.ml-guest-cart{display: inline-flex;align-items: center;justify-content: center;width: 40px}

@media (max-width: 860px) {
  .ml-guest-acts { gap: 8px; }
  
  
  .ml-guest-cart{width: 40px}
}

/* ---- choosing which creature grows ------------------------------------- */
/* Two small pills under the avatar, each showing the grown form so the choice
   is made by looking rather than by reading. */
.ml-avpick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ml-avpick-t {
  font-size: var(--ml-fs-1);
  font-weight: 700;
  color: var(--ml-muted);
  margin-inline-end: 0px;
}

.ml-avpick-b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border: 1.5px solid var(--ml-accent-line);
  border-radius: var(--ml-r-full);
  background: var(--ml-glass);
  font: inherit;
  font-size: var(--ml-fs-2);
  font-weight: 700;
  color: var(--ml-accent-text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ml-avpick-b img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.ml-avpick-b:hover { background: var(--ml-surface); border-color: var(--ml-accent); }

.ml-avpick-b.is-on {
  border-color: var(--ml-accent);
  background: var(--ml-accent);
  color: var(--ml-on-accent);
}

.ml-avpick-b:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 3px; }

html[data-ml-theme="dark"] .ml-avpick-t { color: var(--ml-muted); }

html[data-ml-theme="dark"] .ml-avpick-b {
  background: var(--ml-tint-2);
  border-color: var(--ml-accent-line);
  color: var(--ml-accent-text);
}

html[data-ml-theme="dark"] .ml-avpick-b.is-on {
  background: var(--ml-accent);
  border-color: var(--ml-accent);
  color: var(--ml-on-accent);
}
/* ---- assets/mobile.css ---- */
/* MediLab — mobile / web-app layer. Loaded on every page after the page CSS. */

:root { --ml-hd-h: 92px; }

/* ---------- burger + drawer (hidden until mobile) ---------- */
.ml-burger{display: none;align-items: center;justify-content: center;width: 44px;flex: none;-webkit-tap-highlight-color: transparent}

/* ---------- mobile personal-area icon (hidden until mobile) ---------- */
/* Icon-only twin of .ml-cta, same 44px footprint as the term-search button
   it replaces in the mobile header bar (see the @media block below). */
.ml-cta-icon{display: none;align-items: center;justify-content: center;flex: none;width: 44px;box-sizing: border-box;-webkit-tap-highlight-color: transparent}

.ml-burger > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ml-burger i { display: block; width: 24px; height: 2.5px; border-radius: var(--ml-r-xs); background: var(--ml-inverse); transition: transform 220ms ease, opacity 140ms ease; }
.ml-burger.is-open i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.ml-burger.is-open i:nth-child(2) { opacity: 0; }
.ml-burger.is-open i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@keyframes ml-dr-in { from { transform: translateX(-100%); } }
@keyframes ml-dr-fade { from { opacity: 0; } }

.ml-scrim { position: fixed; inset: 0; z-index: 60; background: var(--ml-tint-2); animation: ml-dr-fade 180ms ease both; }
.ml-drawer { position: fixed; top: 0; left: 0; z-index: 61; width: min(86vw, 328px); height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--ml-surface); box-shadow: var(--ml-elev-3); animation: ml-dr-in 220ms cubic-bezier(.2,.8,.3,1) both; font-family: var(--ml-font); }
.ml-drawer a { text-decoration: none; }

.ml-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); border-bottom: 1px solid var(--ml-line); flex: none; }
.ml-drawer-brand { font-family: var(--ml-font); font-weight: 600; font-size: var(--ml-fs-4); line-height: var(--ml-lh-title); letter-spacing: -0.4px; color: var(--ml-accent-text); }
.ml-drawer-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; background: transparent; border: 0; border-radius: var(--ml-r-md); color: var(--ml-ink); cursor: pointer; }
.ml-drawer :focus-visible, .ml-tabbar :focus-visible, .ml-map-controls :focus-visible { outline: 3px solid var(--ml-acc,var(--ml-accent)); outline-offset: 2px; }
.ml-dr-theme .ml-switch:focus-within{outline-offset: 3px}
@media (prefers-reduced-motion: reduce) { .ml-drawer, .ml-dr-pane { animation: none !important; transition: none !important; } }
@media (max-width: 899.98px) {
  .ml-map-header { height: auto !important; min-height: 56px; flex-wrap: wrap; gap: 8px !important; padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important; }
  .ml-map-header button { flex-shrink: 0; padding-inline: 8px !important; }
  .ml-map-header-hint { order: 3; flex-basis: 100%; font-size: var(--ml-fs-1) !important; }
  .ml-map-controls { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}
.ml-drawer-x:active { background: var(--ml-accent-soft); }

.ml-drawer-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 0 12px; }

.ml-dr-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; background: transparent; border: 0; text-align: right; font-family: var(--ml-font); font-size: var(--ml-fs-3); font-weight: 700; color: var(--ml-ink); cursor: pointer; }
.ml-dr-row.is-active { color: var(--ml-accent-text); background: var(--ml-sunken); box-shadow: inset -3px 0 0 0 var(--ml-accent); }
.ml-dr-row:active { background: var(--ml-accent-soft); }
.ml-dr-lbl { flex: 1; }
.ml-dr-caret { flex: none; font-size: var(--ml-fs-4); line-height: var(--ml-lh-title); color: var(--ml-muted); }
.ml-dr-caret.is-open { transform: rotate(180deg); color: var(--ml-accent-text); }

/* Drawer panes. Tapping a section swaps the whole list instead of pushing the
   rows below it down: the new pane slides in from the forward side through a
   short blur, and the back button brings the previous one back the same way. */
@keyframes ml-dr-fwd { from { transform: translateX(-14%); opacity: 0; filter: blur(5px); } to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes ml-dr-rev { from { transform: translateX(14%); opacity: 0; filter: blur(5px); } to { transform: none; opacity: 1; filter: blur(0); } }
.ml-dr-fwd { animation: ml-dr-fwd 300ms cubic-bezier(.22,.7,.3,1) both; }
.ml-dr-rev { animation: ml-dr-rev 300ms cubic-bezier(.22,.7,.3,1) both; }
.ml-dr-back-btn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; background: var(--ml-sunken); border: 0; text-align: right; font-family: var(--ml-font); font-size: var(--ml-fs-3); font-weight: 700; color: var(--ml-accent-text); cursor: pointer; }
.ml-dr-back-btn:active { background: var(--ml-accent-soft); }
.ml-dr-back-ico { font-size: var(--ml-fs-4); line-height: var(--ml-lh-title); }
.ml-dr-panel { background: var(--ml-bg); box-shadow: inset 0 1px 0 0 var(--ml-line), inset 0 -1px 0 0 var(--ml-line); padding: 4px 0 8px; }
.ml-dr-all { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: var(--ml-fs-2); font-weight: 700; color: var(--ml-accent-text); }
.ml-dr-grp-t { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: var(--ml-fs-1); font-weight: 700; color: var(--ml-muted); }
.ml-dr-sub { display: flex; align-items: center; min-height: 44px; padding-inline-start: 36px; padding-inline-end: 16px; font-size: var(--ml-fs-3); color: var(--ml-ink); }
.ml-dr-sub:active { background: var(--ml-accent-soft); }

.ml-drawer-foot { flex: none; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ml-line); }
.ml-drawer-cta { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--ml-r-md); background: var(--ml-accent); color: var(--ml-on-accent); font-weight: 700; font-size: var(--ml-fs-3); }
.ml-drawer-cta:active { background: var(--ml-accent); }
.ml-drawer-out { display: block; width: 100%; margin-top: 8px; min-height: 44px; border: 0; border-radius: var(--ml-r-md); background: transparent; font-family: var(--ml-font); font-size: var(--ml-fs-2); font-weight: 700; color: var(--ml-muted); cursor: pointer; }
.ml-drawer-out:active { background: var(--ml-sunken); color: var(--ml-accent-text); }

/* horizontal-scroll wrapper added by mobile.js around wide tables */
.ml-scrollx { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The shared nav is imported into a wrapper div that is exactly as tall as the
   header, so `position: sticky` had nothing to stick inside and the bar always
   scrolled away. Collapsing the wrapper hands the header the page as its
   containing block, which is what the design intended. */
div:has(> header.ml-hd) { display: contents; }

/* A page wrapper with overflow-x:hidden computes to overflow-y:auto, which turns
   it into a scroll container and kills the sticky header. clip does the same
   clipping without the side effect. */
[style*="overflow-x:hidden"],
[style*="overflow-x: hidden"] { overflow-x: clip !important; }

/* Scroll-driven reveal. The page ships blur(10px) with a view() range that only
   resolves once an element is almost fully on screen — on a short phone viewport
   that reads as a heavy fog that clears late. Soften it and resolve it earlier.
   Also make sure a browser without view() timelines never leaves content hidden. */
@media (max-width: 900px) {
  /* On a phone the scroll-driven range never resolves until an element is
     almost at the top of a short viewport, so the blur reads as fog that
     lingers the whole way down. Show the content outright instead. */
  .ml-rv {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}
@supports not (animation-timeline: view()) {
  .ml-rv { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}


/* ===== responsive layer (generated: compact + hydrated spellings) ===== */
@media (max-width: 900px) {
  :root { --ml-hd-h: 64px; }

  /* clip, not hidden: overflow:hidden on <body> turns it into the scroll
     container, which breaks window scrolling and sticky positioning. */
  html { overflow-x: hidden; overflow-x: clip; }
  html, body { max-width: 100%; }
  img, svg, video, canvas { max-width: 100%; }

  /* header */
  .ml-nav-desk{ display: none !important; }
.ml-cta{display: none !important}
  .ml-burger{display: inline-flex}
  /* On a phone the term-search icon gives up its spot in the bar to the
     personal-area icon (login is one tap from there when signed out, since
     /personal redirects to /start); the glossary lookup stays reachable
     from the drawer and the מונחון page itself. */
  .ml-termsearch{display: none !important}
  .ml-cta-icon{display: inline-flex !important;margin-inline-start: auto}
  .ml-hd-in { height: 64px !important; padding: 0 16px !important; gap: 8px !important; }
  .ml-logo-mark { height: 40px !important; width: 32px !important; }
  .ml-logo-mark img { height: 40px !important; }
  .ml-wordmark { font-size: var(--ml-fs-3) !important; }
  #ml-ssr header nav { display: none !important; }
  #ml-ssr header > div { height: 64px !important; padding: 0 16px !important; }

  /* page shells */
  [style*="max-width:1160px"],
  [style*="max-width: 1160px"] { padding-inline: 16px !important; }
  [style*="max-width:1000px"],
  [style*="max-width: 1000px"],
  [style*="max-width:900px"],
  [style*="max-width: 900px"],
  [style*="max-width:860px"],
  [style*="max-width: 860px"],
  [style*="max-width:840px"],
  [style*="max-width: 840px"],
  [style*="max-width:820px"],
  [style*="max-width: 820px"],
  [style*="max-width:640px"],
  [style*="max-width: 640px"] { max-width: 100% !important; }

  /* two-column shells stack */
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:20px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 20px"],
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:24px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 24px"],
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:24px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 24px"],
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:24px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 24px"],
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:28px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 28px"],
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:32px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 32px"],
  [style*="display:flex"][style*="align-items:flex-start"][style*="gap:32px"],
  [style*="display: flex"][style*="align-items: flex-start"][style*="gap: 32px"] { flex-direction: column !important; gap: 16px !important; }
  /* stacked shells: content first, side rail after */
  main { order: 1; }
  aside { order: 2; }
  /* pinned side rails become full-width blocks */
  [style*="position:sticky"][style*="top:116px"],
  [style*="position: sticky"][style*="top: 116px"] { width: 100% !important; position: static !important; top: auto !important; box-sizing: border-box !important; }
  aside[style*="width:280px"],
  aside[style*="width: 280px"],
  aside[style*="width:248px"],
  aside[style*="width: 248px"] { width: 100% !important; position: static !important; top: auto !important; box-sizing: border-box !important; }

  /* grids collapse */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1.4fr 0.9fr"],
  [style*="grid-template-columns: 1.1fr 1.4fr 0.9fr"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:minmax(0,50%)"],
  [style*="grid-template-columns: minmax(0, 50%)"],
  [style*="grid-template-columns: minmax(0px, 50%)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,420px)"],
  [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 420px)"],
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 420px)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,300px)"],
  [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 300px)"],
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 300px)"],
  [style*="grid-template-columns:minmax(0,1.15fr)"],
  [style*="grid-template-columns: minmax(0, 1.15fr)"],
  [style*="grid-template-columns: minmax(0px, 1.15fr)"],
  [style*="grid-template-columns:minmax(0,1.05fr)"],
  [style*="grid-template-columns: minmax(0, 1.05fr)"],
  [style*="grid-template-columns: minmax(0px, 1.05fr)"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:8px"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 8px"] { grid-template-columns: minmax(0,1fr) !important; row-gap: 16px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* widths that would force sideways scroll */
  [style*="min-width:520px"],
  [style*="min-width: 520px"],
  [style*="min-width:380px"],
  [style*="min-width: 380px"],
  [style*="min-width:360px"],
  [style*="min-width: 360px"],
  [style*="min-width:320px"],
  [style*="min-width: 320px"] { min-width: 0 !important; }

  /* type scale */
  [style*="font-size:var(--ml-fs-7)"],
  [style*="font-size: var(--ml-fs-7)"] { font-size: var(--ml-fs-6) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-7)"],
  [style*="font-size: var(--ml-fs-7)"] { font-size: var(--ml-fs-6) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-7)"],
  [style*="font-size: var(--ml-fs-7)"] { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-7)"],
  [style*="font-size: var(--ml-fs-7)"] { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-7)"],
  [style*="font-size: var(--ml-fs-7)"] { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-7)"],
  [style*="font-size: var(--ml-fs-7)"] { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-6)"],
  [style*="font-size: var(--ml-fs-6)"] { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-6)"],
  [style*="font-size: var(--ml-fs-6)"] { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  [style*="font-size:var(--ml-fs-6)"],
  [style*="font-size: var(--ml-fs-6)"] { font-size: var(--ml-fs-4) !important; }
  [style*="font-size:var(--ml-fs-6)"],
  [style*="font-size: var(--ml-fs-6)"] { font-size: var(--ml-fs-4) !important; }
  [style*="font-size:var(--ml-fs-5)"],
  [style*="font-size: var(--ml-fs-5)"] { font-size: var(--ml-fs-4) !important; }
  [style*="font-size:var(--ml-fs-5)"],
  [style*="font-size: var(--ml-fs-5)"] { font-size: var(--ml-fs-4) !important; }
  [style*="font-size:var(--ml-fs-5)"],
  [style*="font-size: var(--ml-fs-5)"] { font-size: var(--ml-fs-4) !important; }
  [style*="font-size:var(--ml-fs-5)"],
  [style*="font-size: var(--ml-fs-5)"] { font-size: var(--ml-fs-4) !important; }
  [style*="font-size:var(--ml-fs-4)"],
  [style*="font-size: var(--ml-fs-4)"] { font-size: var(--ml-fs-4) !important; }

  /* cards, rows, gutters */
  [style*="gap:16px"][style*="padding:24px"],
  [style*="gap: 16px"][style*="padding: 24px"] { gap: 8px !important; padding: 16px !important; }
  [style*="width:56px"][style*="height:56px"][style*="border-radius:var(--ml-r-full)"],
  [style*="width: 56px"][style*="height: 56px"][style*="border-radius: var(--ml-r-full)"] { width: 44px !important; height: 44px !important; padding: 8px !important; }
  [style*="padding:24px"],
  [style*="padding: 24px"],
  [style*="padding:32px 24px"],
  [style*="padding: 32px 24px"],
  [style*="padding:32px"],
  [style*="padding: 32px"],
  [style*="padding:24px"],
  [style*="padding: 24px"] { padding: 20px 16px !important; }
  [style*="padding:36px 32px"],
  [style*="padding: 36px 32px"] { padding: 24px 16px !important; }
  [style*="padding:24px 24px 72px"],
  [style*="padding: 24px 24px 72px"] { padding: 16px 16px 56px !important; }
  /* full-width pill buttons: let long labels wrap inside the pill */
  [style*="min-height:56px"][style*="justify-content:center"][style*="border-radius:var(--ml-r-sm)"],
  [style*="min-height: 56px"][style*="justify-content: center"][style*="border-radius: var(--ml-r-sm)"],
  [style*="min-height:48px"][style*="justify-content:center"][style*="border-radius:var(--ml-r-sm)"],
  [style*="min-height: 48px"][style*="justify-content: center"][style*="border-radius: var(--ml-r-sm)"] { padding: 8px 16px !important; text-align: center; line-height: 1.45; }
  /* hero mock-up card stack shrinks instead of bleeding off-screen */
  [style*="width:472px"][style*="height:432px"],
  [style*="width: 472px"][style*="height: 432px"] { width: 100% !important; max-width: 100% !important; height: 328px !important; }
  [style*="position:absolute"][style*="width:320px"],
  [style*="position: absolute"][style*="width: 320px"] { width: min(100%, 300px) !important; }
  [style*="position:absolute"][style*="width:280px"],
  [style*="position: absolute"][style*="width: 280px"] { width: min(100%, 256px) !important; }
  [style*="position:absolute"][style*="width:328px"],
  [style*="position: absolute"][style*="width: 328px"] { width: min(100%, 292px) !important; }
  [style*="padding:84px 24px 0"],
  [style*="padding: 84px 24px 0"] { padding: 40px 16px 0 !important; }
  [style*="padding:44px 24px 40px"],
  [style*="padding: 44px 24px 40px"] { padding: 28px 16px 24px !important; }

  /* --- testimonials: a swipeable row instead of a tall stack --- */
  [style*="gap:64px 20px"],
  [style*="gap: 64px 20px"],
  [style*="row-gap:64px"],
  [style*="row-gap: 64px"] { display: flex !important; grid-template-columns: none !important; gap: 16px !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; padding-bottom: 56px !important; }
  [style*="gap:64px 20px"]::-webkit-scrollbar, [style*="gap: 64px 20px"]::-webkit-scrollbar, [style*="row-gap:64px"]::-webkit-scrollbar, [style*="row-gap: 64px"]::-webkit-scrollbar { display: none; }
  [style*="padding:24px 24px 72px"],
  [style*="padding: 24px 24px 72px"] { flex: 0 0 84% !important; scroll-snap-align: center; padding: 20px 16px 64px !important; }
  .ml-quote { text-align: right !important; font-size: var(--ml-fs-3) !important; line-height: var(--ml-lh-body) !important; }
  .ml-qname { font-size: var(--ml-fs-4) !important; }
  
  /* --- hero mock-up: real stacked cards, no absolute overlap --- */
  [style*="width:472px"][style*="height:432px"],
  [style*="width: 472px"][style*="height: 432px"] { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
  [style*="width:472px"][style*="height:432px"] > div, [style*="width: 472px"][style*="height: 432px"] > div { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
  
  /* --- locked preview: a hint, not a fog bank --- */
  [style*="filter:blur(7px)"],
  [style*="filter: blur(7px)"] { filter: blur(3.5px) !important; max-height: 168px; }
  
  /* --- footer: logo centred on its own line --- */
  footer > div { justify-content: center !important; text-align: center; gap: 8px 16px !important; padding: 24px 16px !important; }
  footer > div > a:first-child { flex: 0 0 100% !important; justify-content: center !important; }
  footer > div > span[style*="flex:1"],
  footer > div > span[style*="flex: 1"] { display: none !important; }
  
  /* justified copy turns into rivers in a narrow column */
  [style*="text-align:start"],
  [style*="text-align: start"] { text-align: right !important; }

  /* teacher console bar */
  header[style*="background:var(--ml-inverse)"], header[style*="background: var(--ml-inverse)"] { height: auto !important; min-height: 64px; }
  header[style*="background:var(--ml-inverse)"] > div, header[style*="background: var(--ml-inverse)"] > div { flex-wrap: wrap !important; padding: 8px 16px !important; gap: 8px !important; }
  header[style*="background:var(--ml-inverse)"] nav, header[style*="background: var(--ml-inverse)"] nav { flex: 1 1 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 16px !important; white-space: nowrap; padding-bottom: 4px; }

  /* lesson body */
  .ml-lesson { font-size: var(--ml-fs-3); }
  .ml-lesson h3 { font-size: var(--ml-fs-4) !important; }
  .ml-lesson p { text-align: right !important; }
  .ml-lesson table { font-size: var(--ml-fs-2); }
  .ml-lesson th, .ml-lesson td { padding: 8px; }
  .ml-lesson .ml-box { padding: 12px 16px; }
  body { overflow-wrap: anywhere; }
  a, button, [onclick] { -webkit-tap-highlight-color: rgb(20 116 143 / 0.12); }
}

@media (max-width: 560px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: minmax(0,1fr) !important; }
  [style*="max-width:1160px"],
  [style*="max-width: 1160px"] { padding-inline: 16px !important; }
  .ml-lesson { font-size: var(--ml-fs-3); }
}

/* installed web-app: keep the sticky header clear of the status bar */
@media (display-mode: standalone) {
  .ml-hd { padding-top: env(safe-area-inset-top); }
  body { overscroll-behavior-y: none; }
}


/* Plan comparison: on a phone the table keeps all three columns and scrolls
   sideways, so the whole point of the table survives. */
@media (max-width: 900px) {
  .ml-cmp { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
  .ml-cmp > div { min-width: 620px; }
  .ml-cmp [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  .ml-cmp [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
  }
}

/* The day/night switch shrinks with the bar and hides on the narrowest phones,
   where the drawer carries it instead. */
@media (max-width:1080px){ .ml-switch{width:48px}
  .ml-switch .sun-moon{width:20px;height:20px}
  .ml-switch input:checked + .slider .sun-moon{transform:translateX(20px)} }
@media (max-width:760px){ .ml-hd-in > .ml-switch{display:none} }

.ml-dr-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: var(--ml-fs-2); font-weight: 700; color: var(--ml-muted); box-shadow: inset 0 1px 0 0 var(--ml-line); }

/* Keep long account names readable beside the avatar on narrow phones. */
@media (max-width:430px){
  .ml-personal-hero > div{flex-direction:column!important;align-items:stretch!important;gap:20px!important}
  .ml-personal-hero > div > div:first-child{align-self:center!important}
  .ml-personal-hero > div > div{min-width:0!important;width:100%;box-sizing:border-box}
  .ml-personal-hero > div > div:first-child{width:152px}
  .ml-personal-hero h1{font-size:var(--ml-fs-4)!important;overflow-wrap:anywhere;flex-basis:100%}
  .ml-personal-hero .ml-logout{width:44px!important;min-width:44px!important;flex:0 0 44px!important}
}
/* ---- assets/theme.css ---- */
/* MediLab theme: dark-mode surfaces for classed prototype parts, and small
   layout fixes. Colours, type and components live in assets/ds/. */
html[data-ml-theme="dark"] body{background:var(--ml-bg) !important;color:var(--ml-ink)}

/* Testimonial score: success-green beside the name. */
.ml-qscore{color:var(--ml-mut)}
.ml-qscore b{color:var(--ml-success) !important}
html[data-ml-theme="dark"] .ml-qscore b{color:var(--ml-success) !important}

/* ------------------------------------------------------------------ loader */
/* Waiting (uiverse.io/Z4drus/polite-seahorse-77, MIT). */
.ml-loader{--uib-size:62px;--uib-speed:2.5s;--uib-color:var(--ml-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--uib-size);width:var(--uib-size)}
.ml-loader .slice{position:relative;height:calc(var(--uib-size) / 6);width:100%}
.ml-loader .slice::before,.ml-loader .slice::after{--uib-a:calc(var(--uib-speed) / -2);--uib-b:calc(var(--uib-speed) / -6);
  content:"";position:absolute;top:0;left:calc(50% - var(--uib-size) / 12);height:100%;width:calc(100% / 6);
  border-radius:var(--ml-r-full);background-color:var(--uib-color);flex-shrink:0;animation:ml-orbit var(--uib-speed) linear infinite}
.ml-loader .slice:nth-child(1)::after{animation-delay:var(--uib-a)}
.ml-loader .slice:nth-child(2)::before{animation-delay:var(--uib-b)}
.ml-loader .slice:nth-child(2)::after{animation-delay:calc(var(--uib-a) + var(--uib-b))}
.ml-loader .slice:nth-child(3)::before{animation-delay:calc(var(--uib-b) * 2)}
.ml-loader .slice:nth-child(3)::after{animation-delay:calc(var(--uib-a) + var(--uib-b) * 2)}
.ml-loader .slice:nth-child(4)::before{animation-delay:calc(var(--uib-b) * 3)}
.ml-loader .slice:nth-child(4)::after{animation-delay:calc(var(--uib-a) + var(--uib-b) * 3)}
.ml-loader .slice:nth-child(5)::before{animation-delay:calc(var(--uib-b) * 4)}
.ml-loader .slice:nth-child(5)::after{animation-delay:calc(var(--uib-a) + var(--uib-b) * 4)}
.ml-loader .slice:nth-child(6)::before{animation-delay:calc(var(--uib-b) * 5)}
.ml-loader .slice:nth-child(6)::after{animation-delay:calc(var(--uib-a) + var(--uib-b) * 5)}
@keyframes ml-orbit{
  0%{transform:translateX(calc(var(--uib-size) * 0.25)) scale(0.73684);opacity:0.65}
  25%{transform:translateX(0) scale(1);opacity:1}
  50%{transform:translateX(calc(var(--uib-size) * -0.25)) scale(0.73684);opacity:0.65}
  75%{transform:translateX(0) scale(1);opacity:1}
  100%{transform:translateX(calc(var(--uib-size) * 0.25)) scale(0.73684);opacity:0.65}
}
.ml-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 20px;text-align:center}
.ml-wait span{font-size:var(--ml-fs-2);color:var(--ml-mut)}
@media (prefers-reduced-motion:reduce){.ml-loader .slice::before,.ml-loader .slice::after{animation-duration:6s}}

/* ---- refinement pass 2 ---- */
/* The tinted band on the home page goes near-black in the dark. */

/* Anything authored in the off-white ink was always sitting on a colored fill;
   it stays white in both modes. */

/* The gradient check-button on the practice page brightens instead of recoloring. */

/* ---- refinement pass 3 ---- */
/* The practice counter beside the dots reads in both modes. */

/* ---- refinement pass 4 ---- */
/* (The animated testimonial frame was removed on request — cards run clean.) */

/* ---- refinement pass 5 ---- */
/* The deep-dive panel moved from rose to the cyan family, matching the term
   highlight. */
.bq-dmeta{background:var(--ml-card,var(--ml-surface));border-radius:var(--ml-r-md);padding:16px;box-shadow:inset 0 0 0 1.5px var(--ml-accent-line)}

/* ---- refinement pass 6 ---- */
/* React writes backgroundColor as "background-color: rgb(...)", which the
   value-matched ink rules can mistake for a text color. Pin the filled teal
   buttons back to cyan surface + white ink. */

/* Some widget scripts paint a cream page ground; pin the root to the theme. */
html{background:var(--ml-bg) !important}

/* ---- refinement pass 7 ---- */
/* Course progress squares that read in the dark: the empty state gets a real
   outline instead of a white fill, and the first step brightens. */

/* No sideways wiggle on phones, whatever a stray shadow or marquee reports. */
@media (max-width:900px){body{overflow-x:clip}}

/* ---- refinement pass 8: dark-mode legibility and compact course surfaces ---- */
/* Question help invitation: normal flow allows narrow screens and enlarged text. */
.bq-ask-upgrade{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;margin-top:16px;padding:24px 20px;border:1px solid var(--ml-line);border-radius:var(--ml-r-lg);background:var(--ml-card);color:var(--ml-ink);text-align:center}
.bq-ask-upgrade-icon{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--ml-r-md);background:var(--ml-accent-soft);color:var(--ml-acc)}
.bq-ask-upgrade-title{margin:0;max-width:504px;font-family:inherit;font-size:var(--ml-fs-4);font-weight:700;line-height:var(--ml-lh-title);color:var(--ml-ink);overflow-wrap:anywhere}
.bq-ask-upgrade-note{margin:0;max-width:448px;font-size:var(--ml-fs-3);line-height:var(--ml-lh-body);color:var(--ml-mut);overflow-wrap:anywhere}
.bq-ask-upgrade-cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:320px;margin-top:4px;font:inherit;text-align:center;white-space:normal;overflow-wrap:anywhere}

.bq-ask-upgrade-cta:focus-visible{outline-offset:4px}

@media(max-width:360px){.bq-ask-upgrade{padding:20px 16px}.bq-ask-upgrade-title{font-size:var(--ml-fs-3)}}

/* Compact chapter syllabus, retaining chronological RTL order and full-width checkpoints. */
.ml-topic-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
.ml-topic-grid-item{min-width:0}
.ml-topic-grid-wide{grid-column:1/-1;min-width:0}
.ml-topic-grid .ml-topic-card{height:100%;flex-wrap:wrap;gap:8px!important;padding:16px!important;align-content:center}
.ml-topic-card>span:nth-child(3){flex:1 1 calc(100% - 100px)!important;line-height:1.5}
html[data-ml-theme="dark"] .ml-topic-card{background-color:var(--ml-card)!important}
@media(min-width:1000px){.ml-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Accessible controls retain the existing card layout. */
button.bq-opt{width:100%;border:0;text-align:start;font:inherit;color:inherit}
button.bq-nb{border:0;font:inherit}
button.ml-hint{font:inherit}

.bq-opt:focus-visible,.bq-nb:focus-visible,img.bq-fig:focus-visible{outline:3px solid var(--ml-acc);outline-offset:4px}
.ml-hint:focus-visible,.ml-liq:focus-visible{outline-offset:4px}
/* ---- assets/gate.css ---- */
/* ==========================================================================
   The guest gate. A visitor who is not signed in reads the opening of a
   sub-topic, meets a veil over the rest, and gets the offer in a window.
   Selectors are doubled so the theme runtime does not win over them.
   ========================================================================== */

.ml-gate-mist.ml-gate-mist {
  filter: blur(4.5px) saturate(.85) !important;
  opacity: .48 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.ml-gate-gone.ml-gate-gone { display: none !important; }

.ml-gate-band.ml-gate-band {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 16px 0 24px !important;
  padding: 16px 20px !important;
  border-radius: var(--ml-r-xl) !important;
  border: 1px solid var(--ml-line) !important;
  background: var(--ml-glass) !important;
  box-shadow: var(--ml-elev-1) !important;
  font-size: var(--ml-fs-2) !important;
  line-height: var(--ml-lh-body) !important;
  color: var(--ml-ink) !important;
  text-align: right !important;
}

.ml-gate-band .ml-gate-band-i {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--ml-accent-text) !important;
}

.ml-gate-band .ml-gate-band-t { flex: 1 1 220px !important; }

.ml-gate-band .ml-gate-band-b {
  flex: none !important;
  padding: 8px 20px !important;
  border: 0 !important;
  border-radius: var(--ml-r-full) !important;
  background: var(--ml-accent) !important;
  font: inherit !important;
  font-weight: 700 !important;
  font-size: var(--ml-fs-2) !important;
  color: var(--ml-on-accent) !important;
  cursor: pointer !important;
}

html[data-ml-theme="dark"] .ml-gate-band.ml-gate-band {
  background: var(--ml-tint-2) !important;
  border-color: var(--ml-line) !important;
  color: var(--ml-ink) !important;
}

/* --- the window --- */

.ml-gate.ml-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.ml-gate.ml-gate.is-on { display: flex !important; }

html.ml-gate-still, html.ml-gate-still body { overflow: hidden !important; }

.ml-gate .ml-gate-veil {
  position: absolute !important;
  inset: 0 !important;
  background: var(--ml-scrim) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

.ml-gate .ml-gate-card {
  position: relative !important;
  width: 100% !important;
  max-width: 432px !important;
  max-height: 92vh !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  padding: 32px 28px 24px !important;
  border-radius: var(--ml-r-xl) !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-elev-3) !important;
  text-align: right !important;
  color: var(--ml-ink) !important;
  animation: ml-gate-rise .22s ease-out !important;
}

@keyframes ml-gate-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.ml-gate .ml-gate-x {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--ml-r-full) !important;
  background: var(--ml-tint) !important;
  color: var(--ml-muted) !important;
  cursor: pointer !important;
}

.ml-gate .ml-gate-x:hover { background: var(--ml-tint-2) !important; }

.ml-gate .ml-gate-kick {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px 8px 12px !important;
  border-radius: var(--ml-r-full) !important;
  background: var(--ml-accent-soft) !important;
  font-weight: 700 !important;
  font-size: var(--ml-fs-2) !important;
  color: var(--ml-accent-text) !important;
}

.ml-gate .ml-gate-kick svg { width: 16px !important; height: 16px !important; }

.ml-gate .ml-gate-h {
  margin: 16px 0 8px !important;
  font-family: var(--ml-font) !important;
  font-weight: 600 !important;
  font-size: var(--ml-fs-5) !important;
  line-height: var(--ml-lh-display) !important;
  color: var(--ml-ink) !important;letter-spacing:var(--ml-ls-display);
}

.ml-gate .ml-gate-sub {
  margin: 0 0 20px !important;
  font-size: var(--ml-fs-2) !important;
  line-height: var(--ml-lh-body) !important;
  color: var(--ml-muted) !important;
}

.ml-gate .ml-gate-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 0 4px !important;
}

.ml-gate .ml-gate-price b {
  font-family: var(--ml-font) !important;
  font-weight: 600 !important;
  font-size: var(--ml-fs-7) !important;
  line-height: var(--ml-lh-display) !important;
  color: var(--ml-ink) !important;letter-spacing:var(--ml-ls-display);
}

.ml-gate .ml-gate-price span {
  font-size: var(--ml-fs-3) !important;
  color: var(--ml-muted) !important;
}

.ml-gate .ml-gate-year {
  margin: 0 0 20px !important;
  font-size: var(--ml-fs-2) !important;
  line-height: 1.6 !important;
  color: var(--ml-accent-text) !important;
}

.ml-gate .ml-gate-buy {
  display: block !important;
  padding: 16px 24px !important;
  border-radius: var(--ml-r-full) !important;
  background: var(--ml-accent) !important;
  box-shadow: var(--ml-elev-3) !important;
  font-weight: 700 !important;
  font-size: var(--ml-fs-3) !important;
  color: var(--ml-on-accent) !important;
  text-align: center !important;
  text-decoration: none !important;
}

.ml-gate .ml-gate-buy:hover { filter: brightness(1.06) !important; }

.ml-gate .ml-gate-cpn {
  display: block !important;
  margin: 12px 0 0 !important;
  font-size: var(--ml-fs-2) !important;
  font-weight: 700 !important;
  color: var(--ml-accent-text) !important;
  text-align: center !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.ml-gate .ml-gate-inc {
  margin: 24px 0 0 !important;
  padding: 16px 16px !important;
  border-radius: var(--ml-r-lg) !important;
  background: var(--ml-accent-soft) !important;
}

.ml-gate .ml-gate-inc h3 {
  margin: 0 0 12px !important;
  font-size: var(--ml-fs-2) !important;
  font-weight: 700 !important;
  color: var(--ml-ink) !important;
}

.ml-gate .ml-gate-inc ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ml-gate .ml-gate-inc li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: var(--ml-fs-2) !important;
  line-height: 1.6 !important;
  color: var(--ml-ink) !important;
}

.ml-gate .ml-gate-i {
  flex: none !important;
  display: inline-flex !important;
  margin-top: 0px !important;
  color: var(--ml-accent-text) !important;
}

.ml-gate .ml-gate-foot {
  margin: 16px 0 0 !important;
  text-align: center !important;
  font-size: var(--ml-fs-2) !important;
  color: var(--ml-muted) !important;
}

.ml-gate .ml-gate-foot a {
  font-weight: 700 !important;
  color: var(--ml-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html[data-ml-theme="dark"] .ml-gate .ml-gate-card {
  background: var(--ml-surface) !important;
  color: var(--ml-ink) !important;
}

html[data-ml-theme="dark"] .ml-gate .ml-gate-h,
html[data-ml-theme="dark"] .ml-gate .ml-gate-price b,
html[data-ml-theme="dark"] .ml-gate .ml-gate-inc h3,
html[data-ml-theme="dark"] .ml-gate .ml-gate-inc li,
html[data-ml-theme="dark"] .ml-gate .ml-gate-foot a { color: var(--ml-ink) !important; }

html[data-ml-theme="dark"] .ml-gate .ml-gate-sub,
html[data-ml-theme="dark"] .ml-gate .ml-gate-price span,
html[data-ml-theme="dark"] .ml-gate .ml-gate-foot { color: var(--ml-text) !important; }

html[data-ml-theme="dark"] .ml-gate .ml-gate-year { color: var(--ml-accent-text) !important; }

html[data-ml-theme="dark"] .ml-gate .ml-gate-inc { background: var(--ml-tint-2) !important; }

html[data-ml-theme="dark"] .ml-gate .ml-gate-x {
  background: var(--ml-tint-2) !important;
  color: var(--ml-text) !important;
}

html[data-ml-theme="dark"] .ml-gate .ml-gate-cpn { color: var(--ml-accent-text) !important; }

@media (max-width: 640px) {
  .ml-gate.ml-gate { padding: 12px !important; align-items: flex-end !important; }

  .ml-gate .ml-gate-card {
    max-width: 100% !important;
    max-height: 90vh !important;
    padding: 24px 20px !important;
    border-radius: var(--ml-r-xl) !important;
  }

  .ml-gate .ml-gate-h { font-size: var(--ml-fs-5) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }
  .ml-gate .ml-gate-price b { font-size: var(--ml-fs-6) !important;letter-spacing:var(--ml-ls-display);line-height:var(--ml-lh-display); }

  .ml-gate-band.ml-gate-band { padding: 16px !important; }
  .ml-gate-band .ml-gate-band-b { width: 100% !important; }
}
/* ---- assets/ds/components.css ---- */
/* ==========================================================================
   MediLab components. Every interactive element has five explicit states:
   default, hover, active/pressed, loading (spinner) and disabled.
   Fields have default, focus (colored ring), error and warning.
   Class names from the prototype are kept, so templates and scripts need no
   renaming: each legacy class is mapped onto one design-system component.
   ========================================================================== */

/* ---------------------------------------------------------------- buttons */
/* Primary: filled blue. Standard buttons are about twice as wide as tall. */
.ml-b,
.ml-btn, .ml-glow, .ml-hd .ml-cta, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta,
.ml-btn-primary, a.d-cta:not(.is-ghost), .ml-send, .bq-ask-upgrade-cta, .mlp-actions .ml-btn-primary {
  --b-bg: var(--ml-accent);
  --b-bg-hover: var(--ml-accent-hover);
  --b-bg-press: var(--ml-accent-press);
  --b-fg: var(--ml-on-accent);
  --b-shadow: var(--ml-elev-accent);
  --b-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 2px 4px rgb(20 79 146 / 0.14), 0 8px 20px rgb(20 79 146 / 0.14);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-sp-2);
  box-sizing: border-box;
  min-height: var(--ml-control);
  min-width: calc(var(--ml-control) * 2);
  max-width: 100%;
  padding: 0 var(--ml-sp-5);
  border: 0;
  border-radius: var(--ml-r-md);
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: var(--b-shadow);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);
  font-weight: var(--ml-fw-bold);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease),
              transform var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease);
}
/* the prototype wraps some labels in a span: it carries no look of its own */
.ml-btn > span {
  display: contents;
}
.ml-b:hover, .ml-btn:hover, .ml-glow:hover, .ml-cta:hover, .ml-shop-go:hover, .ml-shop-buy:hover,
.ml-stick-cta:hover, .ml-btn-primary:hover, a.d-cta:not(.is-ghost):hover, .ml-send:hover, .bq-ask-upgrade-cta:hover {
  background: var(--b-bg-hover);
  color: var(--b-fg);
  box-shadow: var(--b-shadow-hover);
  text-decoration: none;
}
.ml-b:active, .ml-btn:active, .ml-glow:active, .ml-cta:active, .ml-shop-go:active, .ml-shop-buy:active,
.ml-stick-cta:active, .ml-btn-primary:active, a.d-cta:not(.is-ghost):active, .ml-send:active, .bq-ask-upgrade-cta:active {
  background: var(--b-bg-press);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
  transform: translateY(1px);
}
html[data-ml-theme="dark"] :is(.ml-b, .ml-btn, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary, a.d-cta:not(.is-ghost), .ml-send) {
  color: var(--ml-on-accent);
}

/* Ghost: no background at rest, a subtle fill only on hover. Pairs with a primary. */
.ml-b--ghost,
.ml-btn2, .ml-fill, a.d-cta.is-ghost, .ml-flip-cta, .ml-dl, .ml-guest-in, .ml-shop-try, .ml-wa,
.ml-btn-secondary, .ml-btn-quiet, .ml-hint, .auth-skip, .auth-plans, .ml-qmore {
  --b-bg: transparent;
  --b-bg-hover: var(--ml-accent-soft);
  --b-bg-press: var(--ml-accent-soft-2);
  --b-fg: var(--ml-accent-text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-sp-2);
  box-sizing: border-box;
  min-height: var(--ml-control);
  min-width: calc(var(--ml-control) * 2);
  max-width: 100%;
  padding: 0 var(--ml-sp-4);
  border: 0;
  border-radius: var(--ml-r-md);
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: none;
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);
  font-weight: var(--ml-fw-bold);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.ml-b--ghost:hover, .ml-btn2:hover, .ml-fill:hover, a.d-cta.is-ghost:hover, .ml-flip-cta:hover, .ml-dl:hover, .ml-guest-in:hover,
.ml-shop-try:hover, .ml-wa:hover, .ml-btn-secondary:hover, .ml-btn-quiet:hover, .ml-hint:hover, .auth-skip:hover, .auth-plans:hover, .ml-qmore:hover {
  background: var(--b-bg-hover);
  color: var(--b-fg);
  text-decoration: none;
}
.ml-b--ghost:active, .ml-btn2:active, .ml-fill:active, a.d-cta.is-ghost:active, .ml-flip-cta:active, .ml-dl:active, .ml-guest-in:active,
.ml-shop-try:active, .ml-wa:active, .ml-btn-secondary:active, .ml-btn-quiet:active, .ml-hint:active, .auth-skip:active, .auth-plans:active, .ml-qmore:active {
  background: var(--b-bg-press);
  transform: translateY(1px);
}
/* a ghost button beside running text stays compact */
.ml-qmore, .ml-shop-try { min-width: 0; padding: 0 var(--ml-sp-3); font-size: var(--ml-fs-2); }
.ml-wa svg { width: 20px; height: 20px; flex: none; }

/* Small: 36px to the eye, 44px to the finger. */
.ml-b--sm, .ml-dl, .ml-flip-cta, .ml-guest-in, .ml-shop-go, .ml-hint {
  min-height: var(--ml-control-sm);
  padding: 0 var(--ml-sp-4);
  font-size: var(--ml-fs-2);
}
.ml-b--sm::before, .ml-dl::before, .ml-flip-cta::before, .ml-guest-in::before, .ml-shop-go::before, .ml-hint::before {
  content: "";
  position: absolute;
  inset: calc((var(--ml-control-sm) - var(--ml-tap)) / 2) 0;
}
.ml-b--lg, .ml-btn, .ml-glow, .ml-stick-cta { min-height: var(--ml-control-lg); padding: 0 var(--ml-sp-6); }
.ml-b--block { display: flex; width: 100%; }

/* Danger: only for destructive actions. */
.ml-b--danger { --b-bg: var(--ml-danger); --b-bg-hover: color-mix(in srgb, var(--ml-danger) 88%, black); --b-bg-press: color-mix(in srgb, var(--ml-danger) 78%, black); --b-fg: #FFFFFF; --b-shadow: none; }

/* Loading: the label steps aside for an integrated spinner; the width holds. */
:is(.ml-b, .ml-b--ghost, .ml-btn, .ml-btn2, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary,
    .d-cta, .ml-send, .ml-fill, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta, .ml-btn-secondary, .ml-btn-quiet)[aria-busy="true"],
:is(.ml-b, .ml-btn, .ml-btn-primary).is-loading {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
:is(.ml-b, .ml-b--ghost, .ml-btn, .ml-btn2, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary,
    .d-cta, .ml-send, .ml-fill, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta, .ml-btn-secondary, .ml-btn-quiet)[aria-busy="true"] > *:not(.ml-spin) {
  visibility: hidden;
}

/* Any other button that waits on the network gets the same integrated spinner. */
:where(button, [role="button"], a)[aria-busy="true"]:has(> .ml-spin) {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
:where(button, [role="button"], a)[aria-busy="true"]:has(> .ml-spin) > :not(.ml-spin) { visibility: hidden; }

/* Disabled: muted grey, no depth, no pointer. */
:is(.ml-b, .ml-b--ghost, .ml-btn, .ml-btn2, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary,
    .d-cta, .ml-send, .ml-fill, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta, .ml-btn-secondary, .ml-btn-quiet):is(:disabled, [aria-disabled="true"], .is-disabled) {
  background: var(--ml-sunken-2) !important;
  color: var(--ml-subtle) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* ------------------------------------------------------ spinner (shared) */
.ml-spin {
  --ml-spin-color: var(--ml-accent-text);
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: var(--ml-r-full);
  border: 2px solid var(--ml-spin-color, currentColor);
  border-inline-end-color: transparent;
  animation: ml-spin 700ms linear infinite;
  visibility: visible !important;
  -webkit-text-fill-color: initial;
  pointer-events: none;
}
.ml-busy-host { position: relative; }
:is(.ml-b, .ml-btn, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary, a.d-cta:not(.is-ghost), .ml-send) .ml-spin { --ml-spin-color: var(--ml-on-accent); }
:is(.ml-b--ghost, .ml-btn2, .ml-fill, .d-cta.is-ghost, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta) .ml-spin { --ml-spin-color: var(--ml-accent-text); }

/* ------------------------------------------------ generic interactive state */
/* Prototype buttons carry their own inline look; the states come from
   filters and transforms, which inline styles leave alone. */
@media (hover: hover) {
  :where(button, [role="button"], summary, a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(0.97);
  }
  html[data-ml-theme="dark"] :where(button, [role="button"], summary, a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.12);
  }
}
:where(button, [role="button"], a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):active {
  filter: brightness(0.93);
  transform: translateY(1px);
}
html[data-ml-theme="dark"] :where(button, [role="button"], a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):active {
  filter: brightness(1.2);
}
:where(button, [role="button"], a):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.48;
  filter: grayscale(1);
  cursor: not-allowed;
}
/* A checked question locks its answers to show the result. Those answers
   are results, not unavailable controls: they keep their green and red and
   stay fully readable. Before 1.3.0 the rule above turned them grey. */
:where(.mlp-option, .bq-opt, .opt, .slot, .node, .lbl-badge, .mlu-qdot, [data-ml-result]):is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  filter: none;
  cursor: default;
}
:where(button, [role="button"], a, summary)[aria-busy="true"] {
  -webkit-text-fill-color: transparent;
  cursor: progress;
  pointer-events: none;
}
:where(button, [role="button"], a, summary)[aria-busy="true"] > :not(.ml-spin) { visibility: hidden; }
:where(button, a, summary, [role="button"]) {
  transition: filter var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease);
}

/* ------------------------------------------------------------ icon buttons */
.ml-ib,
.ml-guest-cart, .ml-cta-icon, .ml-burger, .ml-termsearch, .auth-theme, .ml-marq-nav, .qm-i, .ml-share > .sh {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ml-tap);
  height: var(--ml-tap);
  min-width: var(--ml-tap);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--ml-r-full);
  background: transparent;
  color: var(--ml-text);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.ml-ib:hover, .ml-guest-cart:hover, .ml-cta-icon:hover, .ml-burger:hover, .ml-termsearch:hover, .auth-theme:hover, .ml-marq-nav:hover, .qm-i:hover, .ml-share > .sh:hover {
  background: var(--ml-tint);
  color: var(--ml-ink);
}
.ml-ib:active, .ml-guest-cart:active, .ml-cta-icon:active, .ml-burger:active, .ml-termsearch:active, .auth-theme:active, .ml-marq-nav:active, .qm-i:active {
  background: var(--ml-tint-2);
  transform: scale(0.96);
}
.ml-ib svg, .ml-guest-cart svg, .ml-cta-icon svg, .ml-termsearch svg, .ml-marq-nav svg { width: 20px; height: 20px; }
/* The personal-area icon is the phone's stand-in for the labelled "אזור אישי"
   button (mobile.css shows it at 900px and below). On a wider screen the
   labelled button is there, so the icon would be a second copy of it. */
@media (min-width: 901px) { .ml-cta-icon { display: none; } }
/* Controls that sit on photos get their own contrasted, outlined disc. */
.ml-ib--media, .ml-marq-nav {
  background: rgb(9 14 20 / 0.52);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ml-ib--media:hover, .ml-marq-nav:hover { background: rgb(9 14 20 / 0.68); color: #FFFFFF; }

/* ------------------------------------------------------------------ chips */
.ml-chip, .bq-chip, .ml-tab-choice, .bq-filter, .gl-chip, .mlp-pill, .ml-engagement-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-sp-1);
  box-sizing: border-box;
  min-height: var(--ml-control-sm);
  padding: 0 var(--ml-sp-3);
  border: 0;
  border-radius: var(--ml-r-full);
  background: var(--ml-sunken);
  color: var(--ml-text);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-2);
  font-weight: var(--ml-fw-medium);
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: none;
}
button.ml-chip, button.bq-chip, .ml-tab-choice, .bq-filter, .gl-chip { cursor: pointer; user-select: none; }
button.ml-chip::before, .ml-tab-choice::before, .bq-filter::before, .gl-chip::before {
  content: ""; position: absolute; inset: calc((var(--ml-control-sm) - var(--ml-tap)) / 2) 0;
}
.ml-chip:hover, .ml-tab-choice:hover, .bq-filter:hover, .gl-chip:hover { background: var(--ml-sunken-2); }
.ml-chip:active, .bq-filter:active, .gl-chip:active { transform: translateY(1px); }
.ml-chip:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-on, .is-active),
.ml-tab-choice.is-active, .bq-filter.is-active, .gl-chip.is-on {
  background: var(--ml-accent-soft);
  color: var(--ml-accent-text);
  box-shadow: inset 0 0 0 1px var(--ml-accent-line);
}
html[data-ml-theme="dark"] .bq-filter.is-active,
html[data-ml-theme="dark"] .ml-tab-choice.is-active { background: var(--ml-accent-soft) !important; color: var(--ml-accent-text) !important; }

/* Badges: minimal, one fact each. */
.ml-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-sp-1);
  min-height: 24px;
  padding: 0 var(--ml-sp-2);
  border-radius: var(--ml-r-full);
  background: var(--ml-tint);
  color: var(--ml-muted);
  font-size: var(--ml-fs-1);
  font-weight: var(--ml-fw-bold);
  line-height: 1;
  white-space: nowrap;
}
.ml-badge--accent { background: var(--ml-accent-soft); color: var(--ml-accent-text); }
.ml-badge--success { background: var(--ml-success-soft); color: var(--ml-success); }
.ml-badge--warning { background: var(--ml-warning-soft); color: var(--ml-warning-text); }
.ml-badge--danger { background: var(--ml-danger-soft); color: var(--ml-danger); }

/* Segmented control: one sunken track, the active segment lifts. */
.ml-seg {
  display: inline-flex;
  gap: var(--ml-sp-1);
  padding: var(--ml-sp-1);
  border-radius: var(--ml-r-md);
  background: var(--ml-sunken);
  box-shadow: var(--ml-sunken-shadow);
}
.ml-seg > * { border-radius: var(--ml-r-sm) !important; box-shadow: none !important; min-height: 36px; }

/* ------------------------------------------------------------------ fields */
/* Element selectors sit in :where() so a page's own field class (search
   fields with an icon inset, for example) keeps its padding and size. */
.ml-input,
:where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"],
input[type="password"], input[type="url"], input[type="date"], input:not([type]), select, textarea) {
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--ml-sp-3) var(--ml-sp-4);
  border: 1px solid var(--ml-line-strong);
  border-radius: var(--ml-r-md);
  background-color: var(--ml-surface);
  color: var(--ml-ink);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);   /* 16px also stops iOS from zooming the page */
  line-height: var(--ml-lh-ui);
  box-shadow: var(--ml-sunken-shadow);
  transition: border-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease);
}
:where(textarea) { min-height: 112px; resize: vertical; }
::placeholder { color: var(--ml-subtle); opacity: 1; }
:is(.ml-input, input, select, textarea):hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--ml-ink) 28%, transparent); }
:is(.ml-input, input, select, textarea):focus,
:is(.ml-input, input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--ml-accent);
  box-shadow: 0 0 0 3px var(--ml-accent-line);
}
:is(.ml-input, input, select, textarea):is([aria-invalid="true"], .is-error) {
  border-color: var(--ml-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-danger) 20%, transparent);
}
:is(.ml-input, input, select, textarea):is([data-state="warning"], .is-warning) {
  border-color: var(--ml-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-warning) 26%, transparent);
}
:is(.ml-input, input, select, textarea):disabled {
  background: var(--ml-sunken-2);
  color: var(--ml-subtle);
  box-shadow: none;
  cursor: not-allowed;
}
.ml-field-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--ml-sp-2);
  margin: var(--ml-sp-2) 0 0;
  font-size: var(--ml-fs-2);
  line-height: var(--ml-lh-ui);
  color: var(--ml-muted);
}
.ml-field-msg::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--ml-r-full);
  background: currentColor;
  -webkit-mask: var(--ml-msg-icon) center / contain no-repeat;
  mask: var(--ml-msg-icon) center / contain no-repeat;
}
.ml-field-msg.is-error { color: var(--ml-danger); --ml-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E"); }
.ml-field-msg.is-warning { color: var(--ml-warning-text); --ml-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z'/%3E%3C/svg%3E"); }
.ml-field-msg:not(.is-error):not(.is-warning)::before { display: none; }
.ml-label { display: block; margin: 0 0 var(--ml-sp-2); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); color: var(--ml-ink); }

/* The prototype's underline field becomes a regular field. */
.ml-field input, .ml-field textarea {
  border: 1px solid var(--ml-line-strong) !important;
  border-radius: var(--ml-r-md) !important;
  background: var(--ml-surface) !important;
  padding: var(--ml-sp-3) var(--ml-sp-4) !important;
}

/* Checkbox. The label is the 44px target; the box is 20px. */
.ml-cbx { display: inline-flex; align-items: center; gap: var(--ml-sp-3); min-height: var(--ml-tap); cursor: pointer; }
.ml-cbx span:first-child {
  flex: none;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid color-mix(in srgb, var(--ml-ink) 36%, transparent) !important;
  border-radius: var(--ml-r-xs) !important;
  background: var(--ml-surface) !important;
  transition: background-color var(--ml-dur-1) var(--ml-ease), border-color var(--ml-dur-1) var(--ml-ease);
}
.ml-cbx:hover span:first-child { border-color: var(--ml-accent) !important; }
.ml-cbx-in:checked + .ml-cbx span:first-child { background: var(--ml-accent) !important; border-color: var(--ml-accent) !important; }
.ml-cbx-in:focus-visible + .ml-cbx span:first-child { box-shadow: 0 0 0 3px var(--ml-accent-line); }
.ml-cbx-in:disabled + .ml-cbx { opacity: 0.48; cursor: not-allowed; }

/* Answer mark inside an option: a plain radio, no gradient ring. */
.ml-ck {
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--ml-ink) 36%, transparent);
  border-radius: var(--ml-r-full);
  background: var(--ml-surface);
  transition: border-color var(--ml-dur-1) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-ck svg { display: none; }
.bq-opt:hover .ml-ck { border-color: var(--ml-accent); }
.ml-ck.is-on { border-color: var(--ml-accent); background: radial-gradient(circle, var(--ml-accent) 0 5px, var(--ml-surface) 5.5px); }
.ml-ck.is-bad { border-color: var(--ml-danger); background: var(--ml-danger-soft); }
/* the right answer, once checked: a filled green circle with a check */
.ml-ck.is-ok { border-color: var(--ml-success); background: var(--ml-success); }
.ml-ck.is-ok::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ml-on-accent); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); line-height: 1;
}
.ml-ck.is-bad::after {
  content: "✕";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ml-danger); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); line-height: 1;
}

/* Switches: 52x32 track, the whole label reaches 44px. */
.ml-switch, .ml-liq { position: relative; display: inline-block; width: 52px; height: 32px; min-height: 0; flex: none; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; }
.ml-switch::before, .ml-liq::before { content: ""; position: absolute; inset: -6px -4px; }
.ml-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.ml-switch .slider, .ml-liq .lw {
  position: absolute; inset: 0;
  border-radius: var(--ml-r-full);
  background: var(--ml-sunken-2);
  box-shadow: var(--ml-sunken-shadow);
  transition: background-color var(--ml-dur-2) var(--ml-ease);
  overflow: hidden;
}
.ml-switch .sun-moon, .ml-liq .lo {
  position: absolute; top: 4px; left: 4px; right: auto; bottom: auto;
  width: 24px; height: 24px;
  border-radius: var(--ml-r-full);
  background: var(--ml-surface);
  box-shadow: 0 1px 2px rgb(22 31 42 / 0.2), 0 2px 6px rgb(22 31 42 / 0.12);
  transition: transform var(--ml-dur-2) var(--ml-ease), background-color var(--ml-dur-2) var(--ml-ease);
  animation: none !important;
}
.ml-switch input:checked + .slider, .ml-liq.on .lw { background: var(--ml-accent); box-shadow: none; }
.ml-switch input:checked + .slider .sun-moon, .ml-liq.on .lo { transform: translateX(20px); background: #FFFFFF; }
.ml-liq { direction: ltr; }
.ml-liq .lo { left: auto; right: 4px; }
.ml-liq.on .lo { transform: translateX(-20px); }
.ml-switch input:focus-visible + .slider, .ml-liq:focus-visible .lw { box-shadow: 0 0 0 3px var(--ml-accent-line); }
.ml-switch .stars, .ml-switch .moon-dot, .ml-switch .cloud-light, .ml-switch .cloud-dark, .ml-switch .light-ray { display: none !important; }
html[data-ml-theme="dark"] .ml-switch .sun-moon, html[data-ml-theme="dark"] .ml-liq .lo { background: var(--ml-surface-3); box-shadow: none; }
html[data-ml-theme="dark"] .ml-switch input:checked + .slider .sun-moon, html[data-ml-theme="dark"] .ml-liq.on .lo { background: #FFFFFF; }

/* ------------------------------------------------------------------- cards */
.ml-card {
  box-sizing: border-box;
  padding: var(--ml-sp-4);
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface);
  box-shadow: var(--ml-elev-1);
}
@media (min-width: 720px) { .ml-card { padding: var(--ml-sp-6); } }
a.ml-card, button.ml-card, .ml-card--interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-2) var(--ml-ease);
}
a.ml-card:hover, button.ml-card:hover, .ml-card--interactive:hover { box-shadow: var(--ml-elev-2); transform: translateY(-2px); }
/* inside a card, groups are separated by space and type, never by another card */
.ml-card__section + .ml-card__section { margin-top: var(--ml-sp-4); padding-top: var(--ml-sp-4); box-shadow: inset 0 1px 0 var(--ml-line); }
.ml-card__title { margin: 0; font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-title); color: var(--ml-ink); }
.ml-card__meta { margin: var(--ml-sp-1) 0 0; font-size: var(--ml-fs-2); color: var(--ml-muted); }

.ml-divider { height: 1px; margin: var(--ml-sp-4) 0; border: 0; background: var(--ml-line); }

/* Wells: progress tracks, recessed tables, quote boxes. */
.ml-well { background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); border-radius: var(--ml-r-md); }
.ml-progress { height: 8px; border-radius: var(--ml-r-full); background: var(--ml-sunken-2); box-shadow: var(--ml-sunken-shadow); overflow: hidden; }
.ml-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ml-accent); transition: width var(--ml-dur-3) var(--ml-ease); }
.ml-progress.is-done > span { background: var(--ml-success); }
/* Progress tracks in lessons and practice are wells in both themes. */
.mlp-track.mlp-track { background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); }

/* Notes inside a card are wells, not second cards. In the dark theme the
   soft semantic fills sit a step lighter than the card surface and would
   read as another raised card, so a note inside a card takes a deeper shade
   of its own hue and the sunken inset. */
html[data-ml-theme="dark"] :is([style*="background:var(--ml-surface)"], [style*="background: var(--ml-surface)"], .ml-card, .mlp-card, .auth-card)
  :is(div, p, aside, section):is(
    [style*="background:var(--ml-accent-soft)"], [style*="background: var(--ml-accent-soft)"],
    [style*="background:var(--ml-warning-soft)"], [style*="background: var(--ml-warning-soft)"],
    [style*="background:var(--ml-danger-soft)"], [style*="background: var(--ml-danger-soft)"],
    [style*="background:var(--ml-success-soft)"], [style*="background: var(--ml-success-soft)"]),
html[data-ml-theme="dark"] .auth-status {
  --ml-accent-soft: var(--ml-well-accent);
  --ml-warning-soft: var(--ml-well-warning);
  --ml-danger-soft: var(--ml-well-danger);
  --ml-success-soft: var(--ml-well-success);
  box-shadow: var(--ml-sunken-shadow);
}
html[data-ml-theme="dark"] .mlp-track.mlp-track { background: var(--ml-sunken-2); }
html[data-ml-theme="dark"] .mlc-note.mlc-note,
html[data-ml-theme="dark"] .mlc-comment.mlc-comment { background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); }

/* Accordions */
summary { list-style: none; cursor: pointer; min-height: var(--ml-tap); display: flex; align-items: center; gap: var(--ml-sp-2); }
summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------- legacy cards, calmer now */
/* Topic cards: the swinging colour sheet behind the card is retired;
   hover lifts the card toward the user instead. */
.ml-of { position: relative; z-index: 0; }
.ml-of::before, .ml-of::after { content: none !important; }
a.ml-of:hover, button.ml-of:hover { box-shadow: var(--ml-elev-2) !important; }

/* The four ways into the question bank: calm cards, no spinning liquid. */
.ml-ecard {
  position: relative;
  overflow: hidden;
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface);
  color: var(--ml-ink);
  box-shadow: var(--ml-elev-1);
  cursor: pointer;
  transition: box-shadow var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-2) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-ecard .wv { display: none !important; }
.ml-ecard:hover { box-shadow: var(--ml-elev-2); transform: translateY(-2px); }
.ml-ecard.playing { background: var(--ml-accent-soft); box-shadow: inset 0 0 0 2px var(--ml-accent), var(--ml-elev-1); }
.ml-ecard .in { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--ml-sp-1); padding: var(--ml-sp-4); min-height: 96px; text-align: start; }
.ml-ecard .in b { font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); color: var(--ml-ink); }
.ml-ecard .in span { font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); color: var(--ml-muted); }

/* The overview block: a quiet inverse surface, no corner glows or beams. */
.ml-fb {
  position: relative;
  border-radius: var(--ml-r-xl);
  padding: var(--ml-sp-8);
  color: var(--ml-on-inverse);
  background: var(--ml-inverse);
  background-image: none !important;
  box-shadow: var(--ml-elev-2);
}
.ml-fb .fbb { display: none !important; }
.ml-fb .fbtitle { margin: 0; font-size: var(--ml-fs-section); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-display); letter-spacing: var(--ml-ls-display); color: var(--ml-on-inverse); }
.ml-fb .fbsub { margin: var(--ml-sp-2) 0 0; max-width: 62ch; font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); color: var(--ml-on-inverse-muted); }
.ml-fb .fblist { margin: var(--ml-sp-6) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: var(--ml-sp-3) var(--ml-sp-6); }
.ml-fb .fbi { display: flex; align-items: flex-start; gap: var(--ml-sp-3); }
.ml-fb .fbck { flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: var(--ml-r-full); background: var(--ml-accent); display: flex; align-items: center; justify-content: center; }
.ml-fb .fbck svg { width: 12px; height: 12px; fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ml-fb .fbi span { font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); color: var(--ml-on-inverse); }
.ml-fb .fbfoot { margin-top: var(--ml-sp-6); display: flex; align-items: center; gap: var(--ml-sp-4); flex-wrap: wrap; }
.ml-fb .fbnote { font-size: var(--ml-fs-1); color: var(--ml-on-inverse-muted); }
@media (max-width: 560px) { .ml-fb { padding: var(--ml-sp-6) var(--ml-sp-4); } }
html[data-ml-theme="dark"] .ml-fb { box-shadow: var(--ml-elev-2); }

/* Plans: the recommended plan is marked by an accent outline, not animation. */
.ml-plan-hot {
  border: 0 !important;
  background: var(--ml-surface) !important;
  animation: none !important;
  box-shadow: inset 0 0 0 2px var(--ml-accent), var(--ml-elev-2) !important;
}
.ml-planx {
  border-radius: var(--ml-r-xl);
  background: var(--ml-surface);
  box-shadow: var(--ml-elev-1);
  transition: transform var(--ml-dur-2) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease);
}
.ml-planx:hover { transform: translateY(-2px); box-shadow: var(--ml-elev-2); }

/* Info rows: one quiet list, grouped by a divider not by boxes. */
.ml-info {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ml-sp-3);
  min-height: 48px; padding: 0 var(--ml-sp-4);
  border-radius: 0; background: transparent;
  box-shadow: inset 0 -1px 0 var(--ml-line);
  font-size: var(--ml-fs-2);
}
.ml-info b { color: var(--ml-ink); }
.ml-info span { color: var(--ml-muted); }

/* Illustrations and logos drawn for a white page sit on a plate. */
.ml-value-ico { background: var(--ml-surface); border-radius: var(--ml-r-lg); padding: var(--ml-sp-3); box-sizing: content-box; box-shadow: var(--ml-elev-1); }
img[src*="logo-full"] { background: #FFFFFF; border-radius: var(--ml-r-md); padding: var(--ml-sp-2) var(--ml-sp-3); box-sizing: content-box; box-shadow: none; }
html[data-ml-theme="dark"] .ml-flip-art,
html[data-ml-theme="dark"] img[src*="/tour/"] { background: #F2F4F7; border-radius: var(--ml-r-lg); padding: var(--ml-sp-2); box-sizing: border-box; }
html[data-ml-theme="dark"] img[src*="/edu/"] { background: #F2F4F7; border-radius: var(--ml-r-sm); padding: var(--ml-sp-2); box-sizing: content-box; }
html[data-ml-theme="dark"] .ml-bookimg { mix-blend-mode: normal !important; background: #F2F4F7; border-radius: var(--ml-r-md); padding: var(--ml-sp-2); box-sizing: border-box; }

/* The classroom slideshow keeps its frame still. */
.ml-hh::after { content: none !important; }

/* Favourite and share: 44px icon buttons, accent when on. */
.ml-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ml-tap); height: var(--ml-tap); padding: 0;
  border: 0; border-radius: var(--ml-r-full);
  background: transparent; box-shadow: none; cursor: pointer;
  transition: background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-fav:hover { background: var(--ml-tint); }
.ml-fav svg { width: 20px; height: 20px; fill: none; stroke: var(--ml-muted); stroke-width: 2; transition: fill var(--ml-dur-1), stroke var(--ml-dur-1); }
.ml-fav.is-on svg { fill: var(--ml-accent); stroke: var(--ml-accent); }
.ml-share {
  position: relative; display: inline-flex; align-items: center;
  height: var(--ml-tap); max-width: none; overflow: visible;
  border-radius: var(--ml-r-full); background: transparent; box-shadow: none;
}
.ml-share .nets { display: none; }

/* Hint: a quiet ghost with a leading icon. */
.ml-hint { font-size: var(--ml-fs-2); }
.ml-hint::after { content: none !important; }

/* Sign out: a plain ghost button with its icon; nothing slides. */
.ml-logout {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: row;
  gap: var(--ml-sp-2);
  width: auto; min-width: var(--ml-tap); height: var(--ml-tap); padding: 0 var(--ml-sp-3);
  border: 0; border-radius: var(--ml-r-md);
  background: transparent; color: var(--ml-muted); box-shadow: none;
  font: var(--ml-fw-medium) var(--ml-fs-2)/1 var(--ml-font);
  overflow: visible; cursor: pointer;
}
.ml-logout .sign { width: auto; display: inline-flex; }
.ml-logout .sign svg { width: 16px; height: 16px; }
.ml-logout .sign svg path { fill: currentColor; }
.ml-logout .text { position: static; width: auto; opacity: 1; color: inherit; font-size: inherit; padding: 0; }
.ml-logout:hover { width: auto; border-radius: var(--ml-r-md); background: var(--ml-tint); color: var(--ml-ink); }
.ml-logout:hover .sign, .ml-logout:hover .text { width: auto; padding: 0; }
.ml-logout:active { transform: translateY(1px); background: var(--ml-tint-2); }

/* Loader: calm, accent-coloured. */
.ml-loader { --uib-color: var(--ml-accent); }

/* Terms in running text */
.ml-qterm, .bq-term {
  color: var(--ml-accent-text) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ml-accent-line) !important;
  border-radius: 0 !important;
}
.ml-qterm:hover, .bq-term:hover { background: var(--ml-accent-soft) !important; border-bottom-color: currentColor !important; }

/* The sticky call to action bar for guests */
.ml-stick { background: var(--ml-glass) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--ml-elev-2) !important; }

/* Wordmark: the printed logo's colours in both modes. */
.ml-wm-name { color: var(--ml-brand-blue); }
.ml-wm-mid { color: var(--ml-brand-green); }
.ml-wm-tld { color: var(--ml-brand-ink); }

/* Testimonial quote marks are decoration: no semantic hue. */
svg[fill="#F4845F"] { fill: var(--ml-accent-line); }
svg [stop-color="#e81cff"], svg [stop-color="#40c9ff"] { stop-color: var(--ml-accent); }

/* ------------------------------------------- sound, touch and motion menu */
/* Each setting is a switch with its state written next to it, so on and
   off read without colour. */
.ml-fxset { display: grid; }
.ml-fxrow { display: flex; align-items: center; gap: var(--ml-sp-4); padding: var(--ml-sp-3) 0; box-shadow: inset 0 -1px 0 var(--ml-line); }
.ml-fxrow:last-child { box-shadow: none; }
.ml-fxrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ml-sp-1); }
.ml-fxrow-t b { font-size: var(--ml-fs-3); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-ui); color: var(--ml-ink); }
.ml-fxrow-t span { font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); color: var(--ml-muted); }
.ml-fxrow-t .ml-fxrow-note { color: var(--ml-warning-text); }
.ml-fxrow.is-off .ml-fxrow-t b { color: var(--ml-muted); }
.ml-fxtry { padding: 0 0 var(--ml-sp-3); box-shadow: inset 0 -1px 0 var(--ml-line); }
.ml-fxsw {
  flex: none; display: inline-flex; align-items: center; gap: var(--ml-sp-2);
  min-height: var(--ml-tap); min-width: 96px; padding: 0 var(--ml-sp-1); border: 0; border-radius: var(--ml-r-md);
  background: none; color: var(--ml-text); font: inherit; font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); cursor: pointer;
}
.ml-fxsw-t {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--ml-r-full);
  background: var(--ml-sunken-2); box-shadow: var(--ml-sunken-shadow);
  transition: background-color var(--ml-dur-2) var(--ml-ease);
}
.ml-fxsw-t::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--ml-r-full);
  background: var(--ml-surface); box-shadow: 0 1px 2px rgb(22 31 42 / 0.2), 0 2px 6px rgb(22 31 42 / 0.12);
  transition: transform var(--ml-dur-2) var(--ml-ease);
}
.ml-fxsw[aria-checked="true"] .ml-fxsw-t { background: var(--ml-accent); box-shadow: none; }
/* the same direction as the night-mode switch in the header */
.ml-fxsw[aria-checked="true"] .ml-fxsw-t::after { transform: translateX(18px); }
.ml-fxsw[aria-checked="true"] .ml-fxsw-l { color: var(--ml-accent-text); }
.ml-fxsw[aria-disabled="true"] { cursor: not-allowed; opacity: 0.56; }

/* the menu row that opens those settings */
.ml-dr-fx {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ml-sp-3);
  width: 100%; min-height: 52px; padding: var(--ml-sp-3) var(--ml-sp-4); border: 0;
  background: transparent; color: var(--ml-muted); font: inherit; font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold);
  text-align: start; cursor: pointer; box-shadow: inset 0 1px 0 0 var(--ml-line);
}
.ml-dr-fx:hover { background: var(--ml-tint); color: var(--ml-ink); }
.ml-dr-fx-state { font-weight: var(--ml-fw-medium); color: var(--ml-muted); white-space: nowrap; }

/* The moments themselves: short, once, and only where they explain what
   happened. Correct answers lift a little, wrong ones shake briefly,
   finishing something glows once. */
@keyframes ml-fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes ml-fx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ml-fx-glow { from { outline: 6px solid color-mix(in srgb, var(--ml-success) 32%, transparent); outline-offset: 0; } to { outline: 6px solid transparent; outline-offset: 8px; } }
.ml-fx-pop { animation: ml-fx-pop 320ms var(--ml-ease) both; }
.ml-fx-shake { animation: ml-fx-shake 360ms var(--ml-ease) both; }
.ml-fx-glow { animation: ml-fx-glow 700ms var(--ml-ease) both; }

/* ------------------------------------------------------- segmented control */
/* A small set of views over the same content. The chosen view sits on a
   raised white segment in bold, so the state reads without colour. On a
   phone the row scrolls instead of wrapping into a grid. */
.ml-seg {
  display: flex; gap: var(--ml-sp-1); width: fit-content; max-width: 100%;
  margin-bottom: var(--ml-sp-4); padding: var(--ml-sp-1);
  border-radius: var(--ml-r-lg); background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow);
  overflow-x: auto; scrollbar-width: none; box-sizing: border-box;
}
.ml-seg::-webkit-scrollbar { display: none; }
.ml-seg > [role="tab"], .ml-seg > button {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--ml-sp-2);
  min-height: var(--ml-tap); padding: 0 var(--ml-sp-4); border: 0; border-radius: var(--ml-r-md);
  background: transparent; color: var(--ml-text); font: inherit; font-size: var(--ml-fs-3); font-weight: var(--ml-fw-medium);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-1) var(--ml-ease);
}
.ml-seg > :hover { background: var(--ml-tint); color: var(--ml-ink); }
.ml-seg > [aria-selected="true"], .ml-seg > [aria-pressed="true"] {
  background: var(--ml-surface); color: var(--ml-accent-text); font-weight: var(--ml-fw-bold); box-shadow: var(--ml-elev-1);
}
html[data-ml-theme="dark"] .ml-seg > [aria-selected="true"], html[data-ml-theme="dark"] .ml-seg > [aria-pressed="true"] { background: var(--ml-surface-2, var(--ml-surface)); }
@media (max-width: 640px) { .ml-seg > [role="tab"], .ml-seg > button { padding: 0 var(--ml-sp-3); font-size: var(--ml-fs-2); } }


/* ------------------------------------------------------------------ score
   A score is a result the student earned, so it reads first: a large number
   in the colour of its band, with a word that says what the band means
   (colour is never the only signal). 80 and up: green. 55 to 79: amber.
   Below 55: red. The badge sits in lists; the ring opens a result screen. */
.ml-score {
  display: inline-flex; align-items: center; gap: var(--ml-sp-2); flex: none;
  min-height: 36px; padding: var(--ml-sp-1) var(--ml-sp-3);
  border-radius: var(--ml-r-full);
  background: var(--ml-score-soft); color: var(--ml-score-ink);
  font-weight: var(--ml-fw-bold); line-height: 1; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ml-score-ring) 40%, transparent);
}
.ml-score b { font-size: var(--ml-fs-5); font-weight: var(--ml-fw-heavy); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ml-score small { font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); }
.ml-score--high { --ml-score-soft: var(--ml-success-soft); --ml-score-ink: var(--ml-success); --ml-score-ring: var(--ml-success); }
.ml-score--mid  { --ml-score-soft: var(--ml-warning-soft); --ml-score-ink: var(--ml-warning-text); --ml-score-ring: var(--ml-warning); }
.ml-score--low  { --ml-score-soft: var(--ml-danger-soft);  --ml-score-ink: var(--ml-danger);  --ml-score-ring: var(--ml-danger); }
.ml-score--none { --ml-score-soft: var(--ml-sunken); --ml-score-ink: var(--ml-muted); --ml-score-ring: var(--ml-line-strong); }
.ml-score--none b { font-size: var(--ml-fs-2); }

.ml-score-hero { display: grid; justify-items: center; gap: var(--ml-sp-3); }
.ml-score-ring { position: relative; width: 148px; height: 148px; }
.ml-score-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ml-score-ring .trk { fill: none; stroke: var(--ml-sunken-2); stroke-width: 12; }
.ml-score-ring .arc { fill: none; stroke: var(--ml-score-ring); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1100ms var(--ml-ease); }
.ml-score-ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ml-score-ring .num b { font-size: 52px; line-height: 1; font-weight: var(--ml-fw-heavy); color: var(--ml-score-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.ml-score-ring .num small { margin-top: var(--ml-sp-1); font-size: var(--ml-fs-2); color: var(--ml-muted); font-weight: var(--ml-fw-medium); }
.ml-score-word {
  display: inline-flex; align-items: center; gap: var(--ml-sp-2);
  min-height: 36px; padding: var(--ml-sp-1) var(--ml-sp-4); border-radius: var(--ml-r-full);
  background: var(--ml-score-soft); color: var(--ml-score-ink);
  font-size: var(--ml-fs-3); font-weight: var(--ml-fw-bold);
}

/* ------------------------------------------------------------ EXP gained
   Points show where they were earned: a gold "+N EXP" rises from the answer
   or the activity, with a short coin sound, and a bar under the header fills
   toward the next level. A new level gets its own moment with confetti.
   Without animations the same information appears without movement. */
:root { --ml-xp-bg: #FFC83D; --ml-xp-ink: #3A2600; --ml-xp-glow: rgb(255 184 0 / 0.45); }
html[data-ml-theme="dark"] { --ml-xp-bg: #F4C855; --ml-xp-ink: #2A1C00; --ml-xp-glow: rgb(244 200 85 / 0.35); }
.ml-xp-star { width: 18px; height: 18px; flex: none; }
.ml-xp-float {
  position: fixed; z-index: calc(var(--ml-z-toast) + 1); pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 12px; border-radius: var(--ml-r-full);
  background: var(--ml-xp-bg); color: var(--ml-xp-ink);
  font-size: var(--ml-fs-4); font-weight: var(--ml-fw-heavy); line-height: 1; white-space: nowrap;
  box-shadow: 0 0 0 4px var(--ml-xp-glow), var(--ml-elev-2);
  transform: translate(-50%, -50%);
  animation: ml-xp-rise 1600ms var(--ml-ease) forwards;
}
.ml-xp-float bdi { direction: ltr; unicode-bidi: isolate; }
.ml-xp-float.is-still { animation: none !important; transform: translate(-50%, -60%); }
@keyframes ml-xp-rise {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  16%  { opacity: 1; transform: translate(-50%, -60%) scale(1.18); }
  28%  { transform: translate(-50%, -70%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

.ml-xpbar {
  position: fixed; z-index: var(--ml-z-toast); pointer-events: none;
  top: calc(var(--ml-hd-h, 64px) + var(--ml-sp-3)); inset-inline: 0; margin-inline: auto;
  width: min(440px, calc(100% - 2 * var(--ml-sp-4)));
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ml-sp-2) var(--ml-sp-3);
  padding: var(--ml-sp-3) var(--ml-sp-4); box-sizing: border-box;
  border-radius: var(--ml-r-lg); background: var(--ml-inverse); color: var(--ml-on-inverse);
  box-shadow: var(--ml-elev-3);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-2) var(--ml-ease);
}
html[data-ml-theme="dark"] .ml-xpbar { background: var(--ml-surface-3); color: var(--ml-ink); }
.ml-xpbar.is-on { opacity: 1; transform: none; }
.ml-xpbar-gain {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px;
  padding: var(--ml-sp-2) var(--ml-sp-3); border-radius: var(--ml-r-full);
  background: var(--ml-xp-bg); color: var(--ml-xp-ink);
  font-size: var(--ml-fs-3); font-weight: var(--ml-fw-heavy); white-space: nowrap;
}
.ml-xpbar-gain bdi { direction: ltr; unicode-bidi: isolate; }
.ml-xpbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ml-sp-3); font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); }
.ml-xpbar-top b { font-size: var(--ml-fs-3); }
.ml-xpbar-top span { opacity: 0.8; white-space: nowrap; }
.ml-xpbar-track { height: 10px; border-radius: var(--ml-r-full); background: rgb(255 255 255 / 0.16); overflow: hidden; }
html[data-ml-theme="dark"] .ml-xpbar-track { background: var(--ml-sunken-2); }
.ml-xpbar-fill { display: block; height: 100%; border-radius: inherit; background: var(--ml-xp-bg); box-shadow: 0 0 12px var(--ml-xp-glow); transition: width 1000ms var(--ml-ease); }
.ml-xpbar.is-level { box-shadow: 0 0 0 3px var(--ml-xp-bg), var(--ml-elev-3); }
.ml-xpbar.is-level .ml-xpbar-top b { color: var(--ml-xp-bg); font-size: var(--ml-fs-4); }
html[data-ml-theme="dark"] .ml-xpbar.is-level .ml-xpbar-top b { color: var(--ml-warning-text); }
.ml-confetti { position: fixed; z-index: calc(var(--ml-z-toast) + 2); pointer-events: none; width: 0; height: 0; }
.ml-confetti i {
  position: absolute; left: 0; top: 0; width: 8px; height: 12px; border-radius: 2px; background: var(--c);
  animation: ml-confetti 1300ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes ml-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .ml-confetti { display: none; } }
html[data-ml-motion="reduced"] .ml-confetti { display: none; }
/* ---- assets/ds/patterns.css ---- */
/* ==========================================================================
   MediLab interaction patterns: header, floating tab bar, hub page, bottom
   sheet, toast, long-press menu, first-run coach mark, search zero-state,
   contextual action bar, media overlays and screen transitions.
   ========================================================================== */

/* ------------------------------------------------------------------ header */
/* The glass lives on a pseudo-element: a backdrop-filter on the header itself
   would make it the containing block of every fixed child, and the hub that
   opens from it would be squeezed into the header's 64px. */
.ml-hd {
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--ml-line) !important;
}
.ml-hd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ml-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ml-hd::before { background: var(--ml-surface); }
}
/* the logo is one image: mark + wordmark, never clipped */
.ml-logo { min-width: 0; }
.ml-wordmark {
  display: block;
  flex: 0 1 auto;
  height: 24px;
  aspect-ratio: 9360 / 951;
  max-width: 100%;
  background: url("/wp-content/plugins/medilab-site/assets/ds/wordmark-light.svg") no-repeat center / contain;
  font-size: 0 !important;
}
html[data-ml-theme="dark"] .ml-wordmark { background-image: url("/wp-content/plugins/medilab-site/assets/ds/wordmark-dark.svg"); }
@media (max-width: 900px) { .ml-wordmark { height: 20px; } }
@media (max-width: 440px) { .ml-wordmark { height: 16px; } }

/* ------------------------------------------------------- floating tab bar */
/* Four destinations, 44px+ targets, blurred glass, a shadow you feel. */
.ml-tabbar {
  inset-inline: var(--ml-sp-3) !important;
  bottom: calc(var(--ml-sp-3) + env(safe-area-inset-bottom, 0px)) !important;
  grid-template-columns: repeat(var(--ml-tab-count, 4), 1fr) !important;
  height: var(--ml-tabbar-h);
  padding: var(--ml-sp-1) !important;
  border-radius: var(--ml-r-xl);
  background: var(--ml-glass) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--ml-elev-2) !important;
  font-family: var(--ml-font) !important;
  transition: transform var(--ml-dur-3) var(--ml-ease), opacity var(--ml-dur-2) var(--ml-ease);
}
html[data-ml-theme="dark"] .ml-tabbar { box-shadow: var(--ml-elev-2) !important; }
.ml-tabbar a, .ml-tabbar button {
  min-height: var(--ml-tap) !important;
  min-width: var(--ml-tap);
  padding: var(--ml-sp-1) var(--ml-sp-1) !important;
  border-radius: var(--ml-r-lg) !important;
  gap: var(--ml-sp-1) !important;
  font-size: var(--ml-fs-1) !important;
  font-weight: var(--ml-fw-bold) !important;
  color: var(--ml-muted) !important;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease);
}
.ml-tabbar a:hover, .ml-tabbar button:hover { background: var(--ml-tint) !important; color: var(--ml-ink) !important; }
.ml-tabbar a:active, .ml-tabbar button:active { background: var(--ml-tint-2) !important; transform: scale(0.97); }
.ml-tabbar .is-on, .ml-tabbar [aria-expanded="true"] { color: var(--ml-accent-text) !important; background: var(--ml-accent-soft) !important; }
.ml-tabbar .ml-tb-i { width: 24px !important; height: 24px !important; }
.ml-tabbar .ml-tb-dot { display: none !important; }
/* Detail and edit screens hide the bar and surface their own controls. */
html.ml-mode-detail .ml-tabbar,
html.ml-kb-open .ml-tabbar { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
html.ml-mode-detail body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

/* ----------------------------------------------------------- hub (was drawer) */
/* A dedicated full-screen hub, like a notebook's home page: grouped rows,
   drill-down panes, one purpose per screen. */
@media (max-width: 900px) {
  .ml-drawer {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    border-radius: 0 !important;
    background: var(--ml-bg) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) !important;
    animation: ml-hub-in var(--ml-dur-3) var(--ml-ease) both;
  }
  .ml-drawer-top {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 64px; padding: 0 var(--ml-sp-4) !important;
    background: transparent !important; box-shadow: none !important;
  }
  .ml-drawer-top::before {
    content: "תפריט";
    font-size: var(--ml-fs-5); font-weight: var(--ml-fw-heavy); letter-spacing: var(--ml-ls-display); color: var(--ml-ink);
  }
  .ml-drawer-brand { display: none !important; }
  .ml-drawer-x { width: var(--ml-tap) !important; height: var(--ml-tap) !important; border-radius: var(--ml-r-full) !important; background: var(--ml-tint) !important; color: var(--ml-ink) !important; border: 0 !important; }
  .ml-drawer-list {
    flex: 1 1 auto; overflow-y: auto;
    margin: var(--ml-sp-2) var(--ml-sp-4) 0 !important;
    padding: var(--ml-sp-1) 0 !important;
    border-radius: var(--ml-r-lg);
    background: var(--ml-surface);
    box-shadow: var(--ml-elev-1);
    align-self: stretch;
    max-height: none !important;
  }
  .ml-dr-row, .ml-dr-all, .ml-dr-back-btn {
    display: flex !important; align-items: center; gap: var(--ml-sp-3);
    width: 100%; min-height: 52px !important; padding: 0 var(--ml-sp-4) !important;
    border: 0 !important; background: transparent !important;
    color: var(--ml-ink) !important; font: var(--ml-fw-medium) var(--ml-fs-3)/1.3 var(--ml-font) !important;
    text-align: start; text-decoration: none;
    box-shadow: inset 0 -1px 0 var(--ml-line) !important;
  }
  .ml-dr-pane > :last-child { box-shadow: none !important; }
  .ml-dr-row:hover, .ml-dr-all:hover, .ml-dr-back-btn:hover { background: var(--ml-tint) !important; }
  .ml-dr-row.is-active { color: var(--ml-accent-text) !important; }
  .ml-dr-row .ai { color: var(--ml-accent-text); }
  .ml-dr-lbl { flex: 1 1 auto; }
  .ml-dr-caret { color: var(--ml-subtle); font-size: var(--ml-fs-4); }
  .ml-dr-back-btn { color: var(--ml-accent-text) !important; font-weight: var(--ml-fw-bold) !important; }
  .ml-dr-all { color: var(--ml-accent-text) !important; }
  .ml-dr-theme {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; margin: var(--ml-sp-3) var(--ml-sp-4) 0 !important; padding: 0 var(--ml-sp-4) !important;
    border-radius: var(--ml-r-lg); background: var(--ml-surface); box-shadow: var(--ml-elev-1) !important;
    color: var(--ml-ink) !important; font-size: var(--ml-fs-3) !important;
  }
  .ml-dr-fx {
    width: auto; min-height: 56px; margin: var(--ml-sp-2) var(--ml-sp-4) 0; padding: 0 var(--ml-sp-4);
    border-radius: var(--ml-r-lg); background: var(--ml-surface); box-shadow: var(--ml-elev-1);
    color: var(--ml-ink); font-size: var(--ml-fs-3); font-weight: var(--ml-fw-medium);
  }
  .ml-dr-fx-state { font-size: var(--ml-fs-2); }
  .ml-drawer-foot {
    display: flex; gap: var(--ml-sp-3);
    padding: var(--ml-sp-3) var(--ml-sp-4) var(--ml-sp-4) !important;
    background: transparent !important; box-shadow: none !important;
  }
  .ml-drawer-cta {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--ml-sp-2);
    min-height: var(--ml-control-lg); border-radius: var(--ml-r-md);
    background: var(--ml-accent) !important; color: var(--ml-on-accent) !important;
    font-weight: var(--ml-fw-bold); box-shadow: var(--ml-elev-accent) !important;
  }
  .ml-drawer-out {
    min-height: var(--ml-control-lg); padding: 0 var(--ml-sp-5); border: 0; border-radius: var(--ml-r-md);
    background: transparent !important; color: var(--ml-muted) !important; font: var(--ml-fw-bold) var(--ml-fs-3) var(--ml-font);
  }
  .ml-drawer-out:hover { background: var(--ml-tint) !important; color: var(--ml-ink) !important; }
  .ml-scrim { display: none !important; }
}
@keyframes ml-hub-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ bottom sheet */
.ml-sheet-host { position: fixed; inset: 0; z-index: var(--ml-z-sheet); pointer-events: none; }
.ml-sheet-host.is-open { pointer-events: auto; }
.ml-sheet-scrim {
  position: absolute; inset: 0; background: var(--ml-scrim);
  opacity: 0; transition: opacity var(--ml-dur-3) var(--ml-ease);
}
.ml-sheet-host.is-open .ml-sheet-scrim { opacity: 1; }
.ml-sheet {
  position: absolute; inset-inline: 0; bottom: 0;
  max-height: min(88vh, 88dvh);
  display: flex; flex-direction: column;
  border-radius: var(--ml-r-xl) var(--ml-r-xl) 0 0;
  background: var(--ml-surface-2);
  box-shadow: var(--ml-elev-3);
  transform: translateY(100%);
  transition: transform var(--ml-dur-3) var(--ml-ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  outline: none;
}
.ml-sheet-host.is-open .ml-sheet { transform: translateY(var(--ml-sheet-drag, 0px)); }
.ml-sheet-host.is-dragging .ml-sheet { transition: none; }
@media (min-width: 720px) {
  .ml-sheet { inset-inline: auto; left: 50%; width: min(560px, 100%); margin-left: -280px; border-radius: var(--ml-r-xl) var(--ml-r-xl) 0 0; }
}
.ml-sheet-grab { flex: none; display: flex; justify-content: center; padding: var(--ml-sp-3) 0 var(--ml-sp-1); cursor: grab; touch-action: none; }
.ml-sheet-grab::before { content: ""; width: 40px; height: 4px; border-radius: var(--ml-r-full); background: var(--ml-line-strong); }
.ml-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ml-sp-3); padding: 0 var(--ml-sp-4) var(--ml-sp-2) var(--ml-sp-2); }
.ml-sheet-title { margin: 0; font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-title); color: var(--ml-ink); }
.ml-sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--ml-sp-2) var(--ml-sp-4) var(--ml-sp-4); color: var(--ml-text); font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); }
.ml-sheet-foot { flex: none; display: flex; gap: var(--ml-sp-3); padding: var(--ml-sp-3) var(--ml-sp-4) var(--ml-sp-4); box-shadow: inset 0 1px 0 var(--ml-line); }
.ml-sheet-foot > * { flex: 1; }
/* The page behind a sheet steps back: slightly smaller, rounded, dimmed. */
html.ml-sheet-open { background: #05070A !important; }
html.ml-sheet-open body { background: #05070A !important; overflow: hidden; }
#dc-root, #ml-ssr { transition: transform var(--ml-dur-3) var(--ml-ease), border-radius var(--ml-dur-3) var(--ml-ease), filter var(--ml-dur-3) var(--ml-ease); transform-origin: 50% 0; }
html.ml-sheet-open #dc-root, html.ml-sheet-open #ml-ssr {
  /* the page keeps its own ground while it steps back, so the dark stage
     shows only around the rounded edges */
  background: var(--ml-bg);
  transform: scale(0.94) translateY(calc(env(safe-area-inset-top, 0px) + 8px));
  border-radius: var(--ml-r-xl);
  overflow: hidden;
  filter: brightness(0.9);
}
html.ml-sheet-open .ml-tabbar { transform: translateY(calc(100% + 32px)); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.ml-sheet-open, html.ml-sheet-open body { background: var(--ml-bg) !important; }
  html.ml-sheet-open #dc-root, html.ml-sheet-open #ml-ssr { transform: none; filter: none; border-radius: 0; }
}
/* the question-bank info sheet joins the same pattern */
.qm-sheet .qm-card { border-radius: var(--ml-r-xl) var(--ml-r-xl) 0 0 !important; background: var(--ml-surface-2) !important; box-shadow: var(--ml-elev-3) !important; padding: var(--ml-sp-3) var(--ml-sp-4) var(--ml-sp-5) !important; }
.qm-sheet .qm-bd { background: var(--ml-scrim) !important; }
.qm-sheet .qm-x { min-height: var(--ml-control) !important; border: 0 !important; background: var(--ml-accent) !important; color: var(--ml-on-accent) !important; font-weight: var(--ml-fw-bold) !important; opacity: 1 !important; }

/* -------------------------------------------------------------------- toast */
.ml-toasts {
  position: fixed; z-index: var(--ml-z-toast);
  inset-inline: var(--ml-sp-4);
  bottom: calc(var(--ml-tabbar-h) + var(--ml-sp-6) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: var(--ml-sp-2);
  pointer-events: none;
}
@media (min-width: 900px) { .ml-toasts { bottom: var(--ml-sp-8); } }
html.ml-mode-detail .ml-toasts { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.ml-toast {
  display: flex; align-items: center; gap: var(--ml-sp-3);
  max-width: min(480px, 100%);
  min-height: 48px; padding: var(--ml-sp-3) var(--ml-sp-4);
  border-radius: var(--ml-r-md);
  background: var(--ml-inverse); color: var(--ml-on-inverse);
  box-shadow: var(--ml-elev-3);
  font-size: var(--ml-fs-2); font-weight: var(--ml-fw-medium); line-height: var(--ml-lh-ui);
  pointer-events: auto;
  animation: ml-toast-in var(--ml-dur-3) var(--ml-ease) both;
}
html[data-ml-theme="dark"] .ml-toast { background: var(--ml-surface-3); color: var(--ml-ink); }
.ml-toast.is-leaving { animation: ml-toast-out var(--ml-dur-2) var(--ml-ease-in) both; }
.ml-toast-ico { flex: none; width: 20px; height: 20px; border-radius: var(--ml-r-full); display: inline-flex; align-items: center; justify-content: center; }
.ml-toast.is-success .ml-toast-ico { background: var(--ml-success); color: #FFFFFF; }
.ml-toast.is-warning .ml-toast-ico { background: var(--ml-warning); color: #1B1300; }
.ml-toast.is-error .ml-toast-ico { background: var(--ml-danger); color: #FFFFFF; }
.ml-toast.is-info .ml-toast-ico { background: var(--ml-accent); color: #FFFFFF; }
.ml-toast-ico svg { width: 12px; height: 12px; }
@keyframes ml-toast-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ml-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------ long-press menu */
.ml-ctx-host { position: fixed; inset: 0; z-index: var(--ml-z-menu); }
.ml-ctx-backdrop {
  position: absolute; inset: 0;
  background: rgb(9 14 20 / 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  animation: ml-fade var(--ml-dur-2) var(--ml-ease) both;
}
.ml-ctx-preview {
  position: fixed; margin: 0; pointer-events: none;
  border-radius: var(--ml-r-lg);
  box-shadow: var(--ml-elev-3);
  transform-origin: center;
  animation: ml-ctx-zoom var(--ml-dur-3) var(--ml-ease) both;
  overflow: hidden;
}
.ml-ctx-menu {
  position: fixed; min-width: 232px; max-width: calc(100vw - 32px);
  padding: var(--ml-sp-1);
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface-2);
  box-shadow: var(--ml-elev-3);
  animation: ml-rise var(--ml-dur-2) var(--ml-ease) both;
}
.ml-ctx-menu button {
  display: flex; align-items: center; gap: var(--ml-sp-3);
  width: 100%; min-height: var(--ml-tap); padding: 0 var(--ml-sp-3);
  border: 0; border-radius: var(--ml-r-md);
  background: transparent; color: var(--ml-ink);
  font: var(--ml-fw-medium) var(--ml-fs-3)/1.3 var(--ml-font); text-align: start; cursor: pointer;
}
.ml-ctx-menu button + button { box-shadow: inset 0 1px 0 var(--ml-line); }
.ml-ctx-menu button:hover { background: var(--ml-tint); }
.ml-ctx-menu button:active { background: var(--ml-tint-2); }
.ml-ctx-menu button svg { width: 20px; height: 20px; flex: none; color: var(--ml-muted); }
@keyframes ml-ctx-zoom { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes ml-fade { from { opacity: 0; } to { opacity: 1; } }
[data-ml-pressing] { transform: scale(0.98); transition: transform 400ms var(--ml-ease); }

/* ------------------------------------------------------- first-run coach */
.ml-coach { position: fixed; inset: 0; z-index: var(--ml-z-coach); }
.ml-coach-hole {
  position: fixed;
  border-radius: var(--ml-r-lg);
  box-shadow: 0 0 0 9999px rgb(9 14 20 / 0.72), 0 0 0 4px var(--ml-accent), 0 0 0 8px rgb(46 111 190 / 0.35);
  pointer-events: none;
  transition: all var(--ml-dur-3) var(--ml-ease);
  animation: ml-coach-pulse 1.6s var(--ml-ease) 0.4s 3;
}
.ml-coach-tip {
  position: fixed; inset-inline: var(--ml-sp-4); max-width: 400px; margin-inline: auto;
  padding: var(--ml-sp-5);
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface-2); color: var(--ml-text);
  box-shadow: var(--ml-elev-3);
  animation: ml-rise var(--ml-dur-3) var(--ml-ease) both;
}
.ml-coach-step { margin: 0 0 var(--ml-sp-1); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); letter-spacing: var(--ml-ls-label); color: var(--ml-accent-text); }
.ml-coach-title { margin: 0; font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-title); color: var(--ml-ink); }
.ml-coach-text { margin: var(--ml-sp-2) 0 0; font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); color: var(--ml-text); }
.ml-coach-acts { display: flex; gap: var(--ml-sp-3); margin-top: var(--ml-sp-4); }
@keyframes ml-coach-pulse { 50% { box-shadow: 0 0 0 9999px rgb(9 14 20 / 0.72), 0 0 0 4px var(--ml-accent), 0 0 0 16px rgb(46 111 190 / 0.12); } }

/* ------------------------------------------------------ search zero-state */
.ml-zero {
  display: flex; flex-direction: column; align-items: center; gap: var(--ml-sp-3);
  padding: var(--ml-sp-8) var(--ml-sp-4);
  text-align: center;
}
.ml-zero-ico {
  width: 64px; height: 64px; border-radius: var(--ml-r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); color: var(--ml-muted);
}
.ml-zero-ico svg { width: 28px; height: 28px; }
.ml-zero-title { margin: 0; font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-title); color: var(--ml-ink); overflow-wrap: anywhere; }
.ml-zero-text { margin: 0; max-width: 40ch; font-size: var(--ml-fs-3); color: var(--ml-muted); }
.ml-zero-sugs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ml-sp-2); margin-top: var(--ml-sp-1); }
.ml-zero .ml-zero-clear { margin-top: var(--ml-sp-2); }
/* compact variant inside a dropdown */
.ml-zero.is-compact { padding: var(--ml-sp-5) var(--ml-sp-4); gap: var(--ml-sp-2); }
.ml-zero.is-compact .ml-zero-ico { width: 44px; height: 44px; }
.ml-zero.is-compact .ml-zero-ico svg { width: 20px; height: 20px; }
.ml-zero.is-compact .ml-zero-title { font-size: var(--ml-fs-3); }
.ml-zero.is-compact .ml-zero-text { font-size: var(--ml-fs-2); }

/* ------------------------------------------------- contextual action bar */
.ml-ctxbar {
  position: fixed; z-index: var(--ml-z-tabbar);
  inset-inline: var(--ml-sp-3);
  bottom: calc(var(--ml-sp-3) + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: var(--ml-sp-2);
  min-height: var(--ml-tabbar-h); padding: var(--ml-sp-2);
  border-radius: var(--ml-r-xl);
  background: var(--ml-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--ml-elev-2);
  box-sizing: border-box;
}
html.ml-mode-detail .ml-ctxbar { display: flex; animation: ml-rise var(--ml-dur-3) var(--ml-ease) both; }
.ml-ctxbar .ml-ctxbar-title { flex: 1 1 auto; min-width: 0; padding: 0 var(--ml-sp-2); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); color: var(--ml-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-ctxbar .ml-b { min-width: 0; }
@media (min-width: 900px) {
  .ml-ctxbar { inset-inline: auto; left: 50%; transform: translateX(-50%); width: min(640px, calc(100% - 48px)); }
}

/* ------------------------------------------------------------ media */
/* Text on photos sits on a progressive scrim; the photo stays visible above. */
.ml-media-text { position: relative; isolation: isolate; }
.ml-media-text::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ml-media-scrim);
  border-radius: inherit; pointer-events: none;
}

/* ------------------------------------------------ screen transitions */
/* Pages slide like app screens. RTL: a new screen enters from the left, the
   one behind it shifts 35% to the right; back reverses it. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: var(--ml-dur-3); animation-timing-function: var(--ml-ease); }
html:active-view-transition-type(ml-forward)::view-transition-old(root) { animation: ml-vt-shift-out var(--ml-dur-3) var(--ml-ease) both; }
html:active-view-transition-type(ml-forward)::view-transition-new(root) { animation: ml-vt-enter var(--ml-dur-3) var(--ml-ease) both; }
html:active-view-transition-type(ml-back)::view-transition-old(root) { animation: ml-vt-leave var(--ml-dur-3) var(--ml-ease) both; z-index: 2; }
html:active-view-transition-type(ml-back)::view-transition-new(root) { animation: ml-vt-shift-in var(--ml-dur-3) var(--ml-ease) both; }
@keyframes ml-vt-enter { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ml-vt-shift-out { to { transform: translateX(35%); filter: brightness(0.9); } }
@keyframes ml-vt-leave { to { transform: translateX(-100%); } }
@keyframes ml-vt-shift-in { from { transform: translateX(35%); filter: brightness(0.9); } to { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
/* the live swipe: the current screen follows the finger, the scrim fades */
html.ml-swiping #dc-root, html.ml-swiping #ml-ssr { transition: none; transform: translateX(var(--ml-swipe-x, 0px)); box-shadow: var(--ml-elev-3); }
html.ml-swipe-settle #dc-root, html.ml-swipe-settle #ml-ssr { transition: transform var(--ml-dur-2) var(--ml-ease); transform: translateX(var(--ml-swipe-x, 0px)); }

/* -------------------------------------------------------------- guest gate */
/* The offer window: primary and ghost actions, 44px close, and on phones a
   bottom sheet with a grab handle that the finger can pull down. */
.ml-gate.ml-gate .ml-gate-x { width: var(--ml-tap) !important; height: var(--ml-tap) !important; top: var(--ml-sp-3) !important; left: var(--ml-sp-3) !important; }
.ml-gate.ml-gate .ml-gate-buy {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--ml-control-lg);
  padding: 0 var(--ml-sp-6) !important;
  border-radius: var(--ml-r-md) !important;
  box-shadow: var(--ml-elev-accent) !important;
  transition: background-color var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.ml-gate.ml-gate .ml-gate-buy:hover { background: var(--ml-accent-hover) !important; filter: none !important; }
.ml-gate.ml-gate .ml-gate-buy:active { background: var(--ml-accent-press) !important; transform: translateY(1px); }
.ml-gate.ml-gate .ml-gate-cpn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--ml-tap);
  margin: var(--ml-sp-1) 0 0 !important;
  border-radius: var(--ml-r-md);
  text-decoration: none !important;
  transition: background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-gate.ml-gate .ml-gate-cpn:hover { background: var(--ml-accent-soft); }
.ml-gate.ml-gate .ml-gate-inc { background: var(--ml-sunken) !important; }
.ml-gate.ml-gate .ml-gate-foot a { display: inline-flex; align-items: center; min-height: var(--ml-tap); }
.ml-gate-band.ml-gate-band { border: 0 !important; background: var(--ml-surface) !important; }
.ml-gate-band .ml-gate-band-b.ml-gate-band-b { min-height: var(--ml-control); padding: 0 var(--ml-sp-5) !important; border-radius: var(--ml-r-md) !important; box-shadow: var(--ml-elev-accent); }
.ml-gate-band .ml-gate-band-b.ml-gate-band-b:hover { background: var(--ml-accent-hover) !important; }
@media (max-width: 640px) {
  .ml-gate.ml-gate { padding: 0 !important; align-items: flex-end !important; }
  .ml-gate.ml-gate .ml-gate-card {
    max-height: 92vh !important;
    padding: var(--ml-sp-8) var(--ml-sp-5) calc(var(--ml-sp-6) + env(safe-area-inset-bottom)) !important;
    border-radius: var(--ml-r-xl) var(--ml-r-xl) 0 0 !important;
    animation: ml-sheet-up var(--ml-dur-3) var(--ml-ease) !important;
    transition: transform var(--ml-dur-2) var(--ml-ease);
  }
  .ml-gate.ml-gate .ml-gate-card::before {
    content: "";
    position: absolute;
    top: var(--ml-sp-2);
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: var(--ml-r-full);
    background: var(--ml-line-strong);
  }
}
@keyframes ml-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ------------------------------------------------------- welcome dialog */
.ml-wel-av {
  flex: 1;
  display: grid;
  gap: var(--ml-sp-2);
  justify-items: center;
  min-height: var(--ml-tap);
  padding: var(--ml-sp-3) var(--ml-sp-2);
  border: 0;
  border-radius: var(--ml-r-lg);
  background: var(--ml-sunken);
  color: var(--ml-ink);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.ml-wel-av:hover { background: var(--ml-sunken-2); }
.ml-wel-av:active { transform: translateY(1px); }
.ml-wel-av[aria-pressed="true"] { background: var(--ml-accent-soft); box-shadow: inset 0 0 0 2px var(--ml-accent); }
.ml-wel-chip { min-height: var(--ml-control-sm); }
.ml-wel-card .ml-b { min-width: 0; }
@media (max-width: 640px) {
  .ml-wel.ml-wel { place-items: end stretch !important; padding: 0 !important; }
  .ml-wel .ml-wel-card {
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: var(--ml-r-xl) var(--ml-r-xl) 0 0 !important;
    padding-bottom: calc(var(--ml-sp-6) + env(safe-area-inset-bottom)) !important;
    animation: ml-sheet-up var(--ml-dur-3) var(--ml-ease);
  }
}

/* ---------------------------------------------------------- purchase sheet */
.ml-buy-head { display: flex; align-items: center; gap: var(--ml-sp-4); }
.ml-buy-cover {
  flex: none;
  width: 88px;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: var(--ml-r-md);
  background: var(--ml-sunken);
  overflow: hidden;
}
.ml-buy-cover img { display: block; width: 72%; height: auto; border-radius: 2px; box-shadow: var(--ml-elev-2); }
.ml-buy-meta { margin: 0; color: var(--ml-muted); font-size: var(--ml-fs-2); line-height: var(--ml-lh-body); }
.ml-buy-unit { margin: var(--ml-sp-1) 0 0; color: var(--ml-muted); font-size: var(--ml-fs-2); }
.ml-buy-unit b { color: var(--ml-ink); font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); font-variant-numeric: tabular-nums; }
.ml-buy-q { margin-top: var(--ml-sp-6); }
.ml-buy-label { display: block; margin-bottom: var(--ml-sp-2); color: var(--ml-ink); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); }
.ml-buy-chips { display: flex; gap: var(--ml-sp-2); }
.ml-buy-chips .ml-chip { min-width: 56px; justify-content: center; font-variant-numeric: tabular-nums; }
.ml-buy-bar { display: flex; flex-direction: column; gap: var(--ml-sp-1); }
.ml-buy-cta, .ml-buy-sample { width: 100%; }

/* ------------------------------------------------------------- chip rows */
/* Filter chips wrap on a wide screen; on a phone they stay in one row that
   scrolls sideways, so the page keeps a single direction of flow. */
.gl-letter { min-width: var(--ml-tap); padding: 0 var(--ml-sp-2); }
@media (max-width: 640px) {
  .ml-chiprow {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;   /* centred overflow would cut off the first chip */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--ml-sp-1);
    margin-block: calc(var(--ml-sp-1) * -1);
  }
  .ml-chiprow::-webkit-scrollbar { display: none; }
  .ml-chiprow > * { flex: none; }
}
/* ---- assets/ds/pages.css ---- */
/* ==========================================================================
   Page-level layout rules. Loaded last, after components and patterns.
   ========================================================================== */

/* The illustrated backdrop is retired: depth comes from the surface ramp,
   and the page is one calm colour in both themes. */
body::before { content: none !important; }
html[data-ml-theme] body.ml-bg-body,
body { background-color: var(--ml-bg) !important; }

/* ------------------------------------------------------------------ footer */
.ml-foot { row-gap: var(--ml-sp-3) !important; }
.ml-footmark { display: inline-flex; align-items: center; gap: var(--ml-sp-2); }
.ml-footmark img { display: block; width: 28px; height: 32px; }
.ml-footmark .ml-wordmark { height: 16px; }
.ml-footnav { display: flex; align-items: center; gap: var(--ml-sp-1) var(--ml-sp-4); margin-inline-start: auto; }
.ml-footnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ml-tap);
  min-width: var(--ml-tap);
  color: var(--ml-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ml-dur-1) var(--ml-ease);
}
.ml-footnav a:hover { color: var(--ml-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .ml-foot { flex-direction: column; align-items: flex-start !important; gap: var(--ml-sp-3) !important; padding-bottom: calc(var(--ml-tabbar-h) + var(--ml-sp-10)) !important; }
  /* one direction on phones: the links scroll sideways in a single row */
  .ml-footnav {
    align-self: stretch;
    margin-inline: calc(var(--ml-gutter) * -1);
    padding-inline: var(--ml-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ml-footnav::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------------- home */
.ml-statrow .ml-stat { flex: none; }
/* "מה יש בפנים": the line under the tabs names the chosen view */
.ml-xpanel { min-width: 0; }
.ml-xdesc { margin: 0 0 var(--ml-sp-4); font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); color: var(--ml-muted); }
/* The two app downloads are a side offer next to the main action: quiet
   buttons, not a second and a third primary. */
.ml-getapps [data-ml-install], .ml-getapps-col [data-ml-install] { background: var(--ml-accent-soft) !important; color: var(--ml-accent-text) !important; box-shadow: none !important; }
.ml-getapps [data-ml-install]:hover, .ml-getapps-col [data-ml-install]:hover { background: var(--ml-accent-soft-2) !important; }
@media (max-width: 640px) {
  /* subject tiles: a carousel instead of a two-column grid */
  .ml-tiles.ml-tiles {
    display: flex !important;
    gap: var(--ml-sp-3) !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    margin-inline: calc(var(--ml-gutter) * -1);
    padding: var(--ml-sp-1) var(--ml-gutter) var(--ml-sp-3);
    scroll-padding-inline: var(--ml-gutter);
    scrollbar-width: none;
  }
  .ml-tiles::-webkit-scrollbar { display: none; }
  .ml-tiles.ml-tiles > * { flex: 0 0 40%; scroll-snap-align: start; }
  /* value cards: one column */
  .ml-values.ml-values { grid-template-columns: minmax(0, 1fr); gap: var(--ml-sp-6); }
}

/* --------------------------------------------------------------- personal */
@media (max-width: 640px) {
  /* The award wall and the journey medals scroll in one row, never a 2-D
     grid. Closed, the won awards share a single row; open, every category
     scrolls in a row of its own under its title. */
  .ml-wall-flat.ml-wall-flat,
  .ml-wall-cols.ml-wall-cols > div:not(.ml-cat-head),
  .ml-medals.ml-medals {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .ml-wall-flat::-webkit-scrollbar, .ml-wall-cols > div::-webkit-scrollbar, .ml-medals::-webkit-scrollbar { display: none; }
  /* room for the tiles' soft drop inside the scroller */
  .ml-wall-flat.ml-wall-flat, .ml-wall-cols.ml-wall-cols > div:not(.ml-cat-head) { padding-block: var(--ml-sp-3) !important; }
  .ml-wall-flat.ml-wall-flat .mlx-tile { flex: 0 0 132px; scroll-snap-align: start; }
  .ml-wall-cols.ml-wall-cols > div:not(.ml-cat-head) > * { flex: 0 0 40%; scroll-snap-align: start; }
  .ml-medals.ml-medals { scroll-padding-inline: var(--ml-sp-4); }
  .ml-medals.ml-medals > * { flex: 0 0 64px; scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- pricing */
.ml-cmp-seg { display: none; }
@media (max-width: 640px) {
  /* one plan at a time: a segmented control picks it, the table is one column */
  .ml-cmp-seg { display: flex; margin-top: var(--ml-sp-4); }
  .ml-cmp-seg > button {
    flex: 1;
    min-height: var(--ml-control-sm);
    border: 0;
    background: transparent;
    color: var(--ml-muted);
    font: inherit;
    font-size: var(--ml-fs-2);
    font-weight: var(--ml-fw-bold);
    cursor: pointer;
    position: relative;
  }
  .ml-cmp-seg > button::before { content: ""; position: absolute; inset: -4px 0; }
  .ml-cmp-seg > button[aria-selected="true"] { background: var(--ml-surface) !important; color: var(--ml-ink); box-shadow: var(--ml-elev-1) !important; }
  .ml-cmp.ml-cmp { overflow: hidden !important; }
  .ml-cmp.ml-cmp > div { min-width: 0 !important; }
  .ml-cmp [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) minmax(88px, auto) !important; }
  .ml-cmp[data-plan="1"] :is(.ml-c2, .ml-c3),
  .ml-cmp[data-plan="2"] :is(.ml-c1, .ml-c3),
  .ml-cmp[data-plan="3"] :is(.ml-c1, .ml-c2) { display: none; }
}

/* ------------------------------------------------------------ action rows */
@media (max-width: 640px) {
  /* a row of actions that would wrap into a grid stacks instead, full width:
     the primary first, the ghost under it */
  [style*="flex-wrap:wrap"]:has(> :is(.ml-b, .ml-btn, .ml-btn2, .ml-glow, .ml-fill, .ml-btn-primary, .ml-btn-secondary, .ml-wa, .ml-dl)
      ~ :is(.ml-b, .ml-btn, .ml-btn2, .ml-glow, .ml-fill, .ml-btn-primary, .ml-btn-secondary, .ml-wa, .ml-dl, a, button)) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* credential pills and similar short labels list down the page */
  .ml-stack-sm { flex-direction: column !important; align-items: flex-start !important; }
}

/* ------------------------------------------------------------ data tables */
/* Tables that arrive inside content (solutions, lessons) carry their own
   light hairlines; in the dark theme they take a 12% white line, inside the
   10-15% range the dark theme allows. */
html[data-ml-theme="dark"] :is(table, th, td) { border-color: rgb(255 255 255 / 0.12) !important; }

/* contact links that stand alone (phone, e-mail, WhatsApp) are 44px targets */
:where(a[href^="mailto:"], a[href^="tel:"], a[href*="wa.me/"]):not(p a, li a, dd a, td a, .ml-b, .ml-btn, .ml-wa) {
  display: inline-flex;
  align-items: center;
  min-height: var(--ml-tap);
}

/* ------------------------------------------------------------ course page */
/* During a quiz the quiz's own buttons are the main action. The large
   "next part" button steps back to a quiet row labelled "אחרי הבוחן". */
.ml-lesson-next.is-quiet { background: var(--ml-surface) !important; box-shadow: var(--ml-elev-1) !important; }
.ml-lesson-next.is-quiet > div:first-child, .ml-lesson-next.is-quiet > div:first-child > div { color: var(--ml-ink) !important; }
.ml-lesson-next.is-quiet > div:first-child > div:first-child { color: var(--ml-muted) !important; }
.ml-lesson-next.is-quiet > div:last-child { background: var(--ml-accent-soft) !important; color: var(--ml-accent-text) !important; }
/* Answer marks in lesson practice: the words under the option carry the
   result, so it does not rest on the colour alone. */
.mlp-option { flex-wrap: wrap; }
.mlp-option > .mlu-mark { flex-basis: 100%; padding-inline-start: 36px; font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-ui); }
.mlp-option.is-correct > .mlu-mark { color: var(--ml-success); }
.mlp-option.is-wrong > .mlu-mark { color: var(--ml-danger); }


/* The unit's progress scale. Every step of the unit in teaching order: its
   sections (or lessons) and its quizzes. A step is a button that opens it.
   The state is written under the step, and the dot repeats it: a check for
   done, an accent ring for in progress, an empty ring for not started. A
   finished quiz shows its score in the colour of its band. */
.ml-mastery { margin-top: var(--ml-sp-6); padding: var(--ml-sp-5) var(--ml-sp-6); border-radius: var(--ml-r-xl); background: var(--ml-surface); box-shadow: var(--ml-elev-1); }
.ml-mastery-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ml-sp-3); flex-wrap: wrap; }
.ml-mastery-head h2 { margin: 0; font-size: var(--ml-fs-4); line-height: var(--ml-lh-title); font-weight: var(--ml-fw-bold); color: var(--ml-ink); letter-spacing: var(--ml-ls-title); }
.ml-mastery-sum { font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); color: var(--ml-accent-text); }
.ml-mastery-bar { margin-top: var(--ml-sp-3); height: 8px; border-radius: var(--ml-r-full); background: var(--ml-sunken-2); overflow: hidden; }
.ml-mastery-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ml-accent); transition: width 600ms var(--ml-ease); }
.ml-mastery-steps { list-style: none; margin: var(--ml-sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--ml-sp-2); }
.ml-mastery-steps li { margin: 0; }
.ml-mastery-steps button {
  width: 100%; min-height: 84px; display: grid; justify-items: center; align-content: start; gap: var(--ml-sp-1);
  padding: var(--ml-sp-2) var(--ml-sp-1); border: 0; border-radius: var(--ml-r-md); background: transparent;
  font: inherit; color: var(--ml-ink); cursor: pointer; text-align: center;
}
.ml-mastery-steps button:hover { background: var(--ml-tint); }
.ml-mastery-steps .dot {
  width: 36px; height: 36px; border-radius: var(--ml-r-full); display: grid; place-items: center;
  font-size: var(--ml-fs-2); font-weight: var(--ml-fw-heavy); font-variant-numeric: tabular-nums;
  background: var(--ml-surface); color: var(--ml-muted); box-shadow: inset 0 0 0 2px var(--ml-line-strong);
}
.ml-mastery-steps .lab { font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
.ml-mastery-steps .is-quiz .lab { direction: rtl; }
.ml-mastery-steps .sub { font-size: var(--ml-fs-1); line-height: 1.3; color: var(--ml-muted); }
.ml-mastery-steps .is-done .dot { background: var(--ml-accent); color: var(--ml-on-accent); box-shadow: none; }
.ml-mastery-steps .is-progress .dot { background: var(--ml-accent-soft); color: var(--ml-accent-text); box-shadow: inset 0 0 0 2px var(--ml-accent); }
.ml-mastery-steps .is-quiz .dot { border-radius: var(--ml-r-md); width: 44px; }
.ml-mastery-steps .is-quiz.is-done .dot { background: var(--ml-score-soft, var(--ml-accent)); color: var(--ml-score-ink, var(--ml-on-accent)); box-shadow: inset 0 0 0 2px var(--ml-score-ring, transparent); font-size: var(--ml-fs-3); }
.ml-mastery-steps .is-quiz.is-done .sub { color: var(--ml-score-ink, var(--ml-muted)); font-weight: var(--ml-fw-bold); }
.ml-mastery-legend { display: flex; flex-wrap: wrap; gap: var(--ml-sp-2) var(--ml-sp-4); margin: var(--ml-sp-3) 0 0; font-size: var(--ml-fs-1); color: var(--ml-muted); }
.ml-mastery-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ml-mastery-legend span::before { content: ""; width: 12px; height: 12px; border-radius: var(--ml-r-full); box-shadow: inset 0 0 0 2px var(--ml-line-strong); }
.ml-mastery-legend .is-done::before { background: var(--ml-accent); box-shadow: none; }
.ml-mastery-legend .is-progress::before { background: var(--ml-accent-soft); box-shadow: inset 0 0 0 2px var(--ml-accent); }
.ml-mastery-note { margin: var(--ml-sp-2) 0 0; font-size: var(--ml-fs-2); line-height: var(--ml-lh-body); color: var(--ml-muted); }
@media (max-width: 640px) {
  .ml-mastery { padding: var(--ml-sp-4); }
  .ml-mastery-steps { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* The quiz row in the unit's list: a white row with an accent outline (the
   page behind it is gray), its score as a badge next to the button. */
.ml-quizrow { display: flex; align-items: center; gap: var(--ml-sp-4); padding: var(--ml-sp-4) var(--ml-sp-5); border-radius: var(--ml-r-xl); background: var(--ml-surface); box-shadow: inset 0 0 0 1.5px var(--ml-accent-line), var(--ml-elev-1); }
.ml-quizrow .ml-score { margin-inline-start: auto; }
@media (max-width: 600px) { .ml-quizrow { flex-wrap: wrap; } .ml-quizrow > button { margin-inline-start: auto; } }
/* the book's section number under a lesson name */
.ml-bookref { display: block; margin-top: 2px; font-size: var(--ml-fs-1); font-weight: var(--ml-fw-medium); color: var(--ml-muted); }
.ml-bookref:empty { display: none; }
/* the practice score beside a lesson of unit 9: the score badge, one size down */
.ml-topic-score.ml-score, html[data-ml-theme="dark"] .ml-topic-score.ml-score { min-width: 52px; min-height: 36px; justify-content: center; border-radius: var(--ml-r-full); background: var(--ml-score-soft); color: var(--ml-score-ink); }
.ml-topic-score.ml-score b { font-size: var(--ml-fs-4); }
.ml-topic-score.ml-score--none b { font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); }
/* the "next" button under a result names the next lesson: a long name wraps
   inside the button instead of running out of it */
.mlp-result-actions .mlp-next { white-space: normal; height: auto; min-height: var(--ml-control); padding-block: var(--ml-sp-2); line-height: 1.35; text-wrap: balance; }


/* ==========================================================================
   Phones (1.5.0). The student scrolls one way, and less. Nothing runs past
   the screen edge, nothing hides behind a fixed bar, short lists wrap.
   ========================================================================== */
/* the logo fits beside the guest actions: the wordmark may shrink */
.ml-logo .ml-wordmark { min-width: 0; }
@media (max-width: 400px) { .ml-hd .ml-wordmark { height: 14px; } }
@media (max-width: 370px) { .ml-hd .ml-wordmark { height: 12px; } .ml-guest-in { padding-inline: var(--ml-sp-3) !important; } }

@media (max-width: 640px) {
  /* ---- footer: lines wrap; the tab bar's space is kept once, by the body */
  .ml-foot { padding-bottom: var(--ml-sp-6) !important; }
  .ml-foot > span { white-space: normal !important; max-width: 100%; overflow-wrap: anywhere; }
  .ml-footnav.ml-footnav {
    flex-wrap: wrap !important; overflow: visible !important;
    margin-inline: 0 !important; padding-inline: 0 !important;
    column-gap: var(--ml-sp-4) !important; row-gap: 0 !important;
  }
  .ml-footnav a { min-height: 40px; }
  .ml-home { padding-bottom: 0 !important; }
  /* the guest's sticky offer sat behind the tab bar on a phone */
  .ml-stick { display: none !important; }

  /* ---- chip rows wrap: every chip in sight, no sideways scrolling */
  .ml-chiprow.ml-chiprow { flex-wrap: wrap !important; overflow: visible !important; margin-block: 0 !important; padding-block: 0 !important; }
  .ml-chiprow.ml-chiprow > * { flex: 0 1 auto; max-width: 100%; }
  .ml-chiprow input[type="date"] { min-width: 0; max-width: 100%; }

  /* ---- the home page's numbers: two by two */
  .ml-statrow.ml-statrow { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ml-sp-3) var(--ml-sp-4) !important; }
  .ml-statrow .ml-stat { min-width: 0; flex: none; }

  /* ---- the values: a short list, a small icon beside each */
  .ml-values.ml-values { grid-template-columns: minmax(0, 1fr) !important; gap: var(--ml-sp-5) !important; }
  .ml-value.ml-value {
    display: grid !important; grid-template-columns: 64px minmax(0, 1fr); align-items: start; justify-items: start;
    column-gap: var(--ml-sp-4) !important; row-gap: var(--ml-sp-1) !important; padding: 0 !important; text-align: start !important;
  }
  .ml-value .ml-value-ico { grid-row: 1 / span 2; width: 64px !important; height: 64px !important; padding: 0 !important; }
  .ml-value b { font-size: var(--ml-fs-4) !important; }
  .ml-value .ml-value-txt { max-width: none !important; text-align: start !important; text-align-last: auto !important; font-size: var(--ml-fs-3) !important; }

  /* ---- testimonials: the photo above the words */
  .ml-marq.ml-marq .ml-marq-track > * { flex-direction: column !important; }
  .ml-marq .ml-qimg.ml-qimg {
    width: 100% !important; height: 168px; flex: none !important; align-self: stretch;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
  .ml-marq .ml-marq-track > * > div { padding: 4px 16px 12px !important; }
  .ml-marq .ml-quote.ml-qclamp { -webkit-line-clamp: 5; }

  /* ---- the personal area: the award wall and the medals wrap into grids */
  .ml-wall-flat.ml-wall-flat,
  .ml-wall-cols.ml-wall-cols > div:not(.ml-cat-head) {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important; gap: var(--ml-sp-3) var(--ml-sp-2) !important;
  }
  .ml-wall-flat.ml-wall-flat .mlx-tile,
  .ml-wall-cols.ml-wall-cols > div:not(.ml-cat-head) > * { flex: none !important; min-width: 0; }
  .ml-medals.ml-medals { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; overflow: visible !important; gap: var(--ml-sp-3) var(--ml-sp-1) !important; }
  .ml-medals.ml-medals > * { flex: none !important; min-width: 0; }
  /* the three numbers under the greeting fit the screen */
  .ml-personal-hero [data-no-count] { min-width: 0 !important; width: 100%; box-sizing: border-box; padding: 16px 8px !important; }
  .ml-personal-hero [data-no-count] > div { padding: 0 8px !important; }

  /* ---- a question's dots wrap into rows */
  .mlu-qdots.mlu-qdots { flex-wrap: wrap !important; overflow: visible !important; }

  /* ---- the points card: compact, one line of title */
  .ml-xpbar { padding: var(--ml-sp-2) var(--ml-sp-3); gap: 4px var(--ml-sp-3); top: calc(var(--ml-hd-h, 56px) + var(--ml-sp-2)); }
  .ml-xpbar-gain { grid-row: 1; padding: 4px var(--ml-sp-2); font-size: var(--ml-fs-2); }
}
/* ---- testimonials at every width: the arrows sit under the strip, never on a card; a quote that runs long ends
   on a whole line that fades out (the old cover was solid and cut a line in half); the names in the handwriting */
.ml-marq-hold { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ml-sp-3); }
.ml-marq-hold > .ml-marq { flex: 0 0 100%; }
/* a line break between the strip and the arrows (the strip's full-bleed margins would leave room beside it) */
.ml-marq-hold::before { content: ""; order: 1; flex: 0 0 100%; height: 0; }
.ml-marq-hold > .ml-marq-nav.ml-marq-nav { position: static !important; transform: none !important; order: 2; width: var(--ml-tap) !important; opacity: 1; }
.ml-marq-hold > .ml-marq-nav.ml-marq-nav:hover { transform: scale(1.06) !important; }
.ml-marq-hold > .ml-marq-next { order: 3; }
.ml-marq .ml-qcut .ml-quote.ml-qclamp::after,
html[data-ml-theme="dark"] .ml-marq .ml-qcut .ml-quote.ml-qclamp::after { height: 1.6em; background: linear-gradient(to bottom, transparent, var(--ml-surface)); }
.ml-marq .ml-qname, .ml-qdlg-name { font-family: var(--ml-font-voice) !important; font-weight: 700; letter-spacing: 0; }

/* the points card's title never breaks into letters: title and "עוד X לרמה" stack */
.ml-xpbar-top { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.ml-xpbar-top b { white-space: nowrap; }
.ml-xpbar-track { grid-column: 1 / -1; }

/* ---- the menu: the links get the height, the two buttons share a row */
@media (max-width: 900px) {
  .ml-drawer-foot.ml-drawer-foot { flex-direction: row; align-items: stretch; }
  .ml-drawer-foot .ml-drawer-cta { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .ml-drawer-foot .ml-drawer-out.ml-drawer-out { flex: 0 0 auto; width: auto !important; margin: 0 !important; white-space: nowrap; }
  .ml-drawer-list.ml-drawer-list { flex: 0 1 auto; min-height: 168px; }
  .ml-drawer-foot.ml-drawer-foot { margin-top: auto; }
}

/* ---- after an answer the explanation scrolls into view clear of the bars */
.mlu-explain, .mlp-feedback, .bq-result, .bq-why { scroll-margin-top: calc(var(--ml-hd-h, 64px) + 16px); scroll-margin-bottom: calc(var(--ml-tabbar-h, 64px) + 96px); }

@media (max-width: 640px) {
  /* the personal area on a phone: a little more room, the week fits, a course's note under its bar */
  .ml-personal-body.ml-personal-body { padding-inline: var(--ml-sp-4) !important; }
  .ml-personal-body aside { width: 100% !important; }
  .ml-personal-body aside > div, .ml-personal-body main > div { padding: var(--ml-sp-5) var(--ml-sp-4) !important; }
  .ml-week.ml-week { gap: 4px !important; }
  .ml-course-row.ml-course-row { flex-wrap: wrap; row-gap: var(--ml-sp-1) !important; }
  .ml-course-row > span:last-child { flex-basis: 100% !important; padding-inline-start: 60px; box-sizing: border-box; max-width: 100%; }
  .ml-wall-flat.ml-wall-flat .mlx-tile,
  .ml-wall-cols.ml-wall-cols .mlx-tile { width: auto !important; }
}
@media (max-width: 400px) {
  .ml-wall-flat.ml-wall-flat,
  .ml-wall-cols.ml-wall-cols > div:not(.ml-cat-head) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---- where to study after an answer (1.5.0) */
.mlu-study-row { margin: var(--ml-sp-2) 0 0; }
.mlu-study { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ml-sp-3); border-radius: var(--ml-r-full); background: var(--ml-accent-soft); color: var(--ml-accent-text) !important; font-weight: var(--ml-fw-bold); text-decoration: none; }
.mlu-study:hover { background: var(--ml-accent-soft-2); }
.mlu-weak .mlu-study { min-height: 32px; margin-block: 2px; }


/* ---- page structure (1.5.0): the skip link, visible only when it has the keyboard focus */
.ml-skip {
  position: fixed; inset-inline-start: var(--ml-sp-3); top: -64px; z-index: 2147483647;
  padding: var(--ml-sp-2) var(--ml-sp-4); border-radius: var(--ml-r-md);
  background: var(--ml-accent); color: var(--ml-on-accent) !important; font: var(--ml-fw-bold) var(--ml-fs-2) var(--ml-font);
  text-decoration: none; box-shadow: var(--ml-elev-2); transition: top var(--ml-dur-1) var(--ml-ease);
}
.ml-skip:focus, .ml-skip:focus-visible { top: var(--ml-sp-3); outline: 2px solid var(--ml-on-accent); outline-offset: 2px; }
#ml-main:focus { outline: none; }
.ml-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the bottom bar's action, when the screen's primary is not ready yet */
.ml-ctxbar [data-act="next"]:disabled { opacity: .5; cursor: default; }

/* ---- the unit's list of parts: one row on a phone, open on demand */
.ml-railtoggle { display: none; }
@media (max-width: 900px) {
  .ml-railtoggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ml-sp-2);
    width: 100%; min-height: var(--ml-tap); padding: 0 var(--ml-sp-2); border: 0; background: transparent;
    font: var(--ml-fw-bold) var(--ml-fs-3) var(--ml-font); color: var(--ml-ink); cursor: pointer; text-align: start;
  }
  .ml-railtoggle-c { transition: transform var(--ml-dur-2) var(--ml-ease); color: var(--ml-muted); }
  .ml-rail.is-open .ml-railtoggle-c { transform: rotate(180deg); }
  .ml-rail:not(.is-open) > :not(.ml-railtoggle) { display: none !important; }
  .ml-rail.ml-rail { padding: var(--ml-sp-2) var(--ml-sp-3) !important; }
}

/* ---- sharing a question: a real button, the icon at the size of its neighbours, a small menu */
.ml-share > .sh { border: 0; background: transparent; }
.ml-share > .sh svg { width: 20px; height: 20px; }
.ml-share.is-open .nets {
  display: flex; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 30;
  gap: 4px; padding: 6px; border-radius: var(--ml-r-lg); background: var(--ml-surface); box-shadow: var(--ml-elev-2);
}
.ml-share .nets a, .ml-share .nets button {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--ml-r-full); background: transparent; color: var(--ml-text); cursor: pointer;
}
.ml-share .nets a:hover, .ml-share .nets button:hover { background: var(--ml-tint); }
.ml-share .nets svg { width: 20px; height: 20px; }

/* ---- a toast's link */
.ml-toast-link { margin-inline-start: var(--ml-sp-2); color: inherit; font-weight: var(--ml-fw-bold); text-decoration: underline; text-underline-offset: 3px; }


/* ---- the header on a wide screen (1.5.0): nothing overlaps at any width */
@media (min-width: 1101px) {
  /* the links are all in view, so the menu button would only repeat them */
  .ml-hd-in > .ml-burger { display: none !important; }
}
@media (min-width: 901px) {
  .ml-hd-in.ml-hd-in { gap: 8px !important; }
}
@media (min-width: 901px) and (max-width: 1300px) {
  .ml-nav-desk .ml-tab > span:first-child { display: none !important; }
  .ml-nav-desk .ml-tab { padding-inline: 8px !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* the links and the theme switch give way to the menu button; both are in the menu */
  .ml-hd-in > .ml-nav-desk, .ml-hd-in > .ml-switch { display: none !important; }
  .ml-hd-in > .ml-termsearch { margin-inline-start: auto; }
  .ml-hd-in > .ml-burger { display: inline-flex !important; }
}

/* ---- the visitor's shop stands apart from signing in and buying a track */
.ml-guest-acts .ml-guest-cart { position: relative; margin-inline-start: 8px; }
.ml-guest-acts .ml-guest-cart::before {
  content: ""; position: absolute; inset-inline-start: -8px; top: 25%; bottom: 25%; width: 1px; background: var(--ml-line-strong);
}
.ml-guest-cart-t { display: none; }
@media (min-width: 1101px) {
  .ml-guest-acts .ml-guest-cart { width: auto !important; min-width: 0; gap: 6px; padding-inline: 12px 14px; margin-inline-start: 12px; }
  .ml-guest-acts .ml-guest-cart::before { inset-inline-start: -10px; }
  .ml-guest-cart-t { display: inline; font: var(--ml-fw-bold) var(--ml-fs-2) var(--ml-font); color: inherit; }
}


/* ---- a lesson or a quiz on its way (1.5.0): the placeholder keeps the screen's height, so what follows the lesson
   (the "next" button, the unit list, the footer) is below the fold until the content arrives and nothing jumps */
.ml-lesson > .ml-wait,
.ml-lesson .mlu > .mlu-wait { min-height: max(320px, calc(100vh - 160px)); box-sizing: border-box; }
@media (max-width: 640px) { .ml-objective.is-wait { min-height: 83px; box-sizing: border-box; } }
/* the menu's placeholder, before the menu is drawn, has the phone header's height (64px), not the computer's (92px):
   every page moved up by 28px when the menu arrived */
@media (max-width: 900px) { .sc-host[data-sc-name="MediLab Nav"] > .sc-placeholder { height: 64px !important; } }
/* the student's static home is a greeting, not the visitor's landing page: it shows at once (base.css hides the
   landing sections from a student for four seconds) */
html[data-ml-auth="member"][data-ml-page="home"] #ml-ssr .ml-home > .ml-ssr-member { visibility: visible; animation: none; }
/* the student's home: the hero keeps room for the board until the board is drawn, so what follows is below the fold */
html[data-ml-auth="member"] .ml-hero-rel:not(:has(#ml-dash[data-painted="1"])) { min-height: 150vh; }


/* ---- 1.5.1: the student's home holds still while the account's data arrives.
   The line that names the last lesson keeps its room from the first paint (a title on two lines and the unit line on
   a phone, 74px; one and one on a wider screen, 48px), hidden until it is filled. */
.ml-resume-where { box-sizing: border-box; min-height: 48px; }
.ml-resume-where.is-wait { visibility: hidden; }
/* 1.6.1: the room is kept even before the script that makes the line has run: the row under the greeting holds it
   as padding (12px margin + the line), and hands it to the line when the line arrives */
html[data-ml-auth="member"] .ml-hero-rel > div:has(> #ml-resume):not(:has(+ .ml-resume-where)) { padding-bottom: 60px; }
@media (max-width: 440px) {
  html[data-ml-auth="member"] .ml-hero-rel > div:has(> #ml-resume):not(:has(+ .ml-resume-where)) { padding-bottom: 86px; }
}
@media (max-width: 440px) {
  .ml-resume-where { min-height: 74px; }
  /* the two buttons stand one above the other from the first paint: the continue button's final label is longer than
     the first one and pushed the second button to a new row */
  html[data-ml-auth="member"] .ml-hero-rel > div:has(> #ml-resume) { flex-direction: column; align-items: stretch; }
  html[data-ml-auth="member"] .ml-hero-rel > div:has(> #ml-resume) > a { justify-content: center; text-align: center; }
  /* a quiz's goals take three lines on a phone: the box keeps them while they load */
  .ml-objective.is-wait.is-quiz { min-height: 109px; }
}


/* ---- 1.6.0: a finished step's line (what was finished) reads in the accent colour, a step in progress stays grey */
.ml-mastery-steps .is-done:not(.is-quiz) .sub { color: var(--ml-accent-text); font-weight: var(--ml-fw-bold); }


/* ---- 1.6.0: the settings panel (assets/settings.js) ---- */
.ml-set { gap: var(--ml-sp-5); }
.ml-set-sec { display: grid; }
.ml-set-h { margin: 0 0 var(--ml-sp-1); font-size: var(--ml-fs-4); line-height: var(--ml-lh-title); font-weight: var(--ml-fw-bold); color: var(--ml-ink); }
.ml-set-note { margin: 0 0 var(--ml-sp-2); font-size: var(--ml-fs-2); line-height: var(--ml-lh-body); color: var(--ml-muted); }
.ml-set-choice { flex-wrap: wrap; }
.ml-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--ml-r-md); background: var(--ml-sunken); }
.ml-seg-b { min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; border-radius: var(--ml-r-sm); background: transparent;
  color: var(--ml-text); font: inherit; font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); cursor: pointer; }
.ml-seg-b[aria-pressed="true"] { background: var(--ml-surface); color: var(--ml-accent-text); box-shadow: var(--ml-elev-1); }
.ml-seg-b:focus-visible, .ml-footset:focus-visible, .ml-hd-gear:focus-visible { outline: 3px solid var(--ml-accent); outline-offset: 2px; }
.ml-set-tools { display: flex; flex-wrap: wrap; gap: var(--ml-sp-2) var(--ml-sp-4); align-items: center; padding: var(--ml-sp-3) 0; }
.ml-set-links { display: grid; gap: 4px; }
.ml-set-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ml-accent-text); font-weight: var(--ml-fw-bold);
  text-decoration: underline; text-underline-offset: 3px; }
.ml-set-adult { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--ml-fs-2); color: var(--ml-text); }
.ml-set-adult input { width: 22px; height: 22px; margin: 0; accent-color: var(--ml-accent); }
.ml-footset { appearance: none; display: inline-flex; align-items: center; min-height: var(--ml-tap); padding: 0; border: 0; background: transparent;
  font: inherit; color: var(--ml-muted); cursor: pointer; white-space: nowrap; }
.ml-footset:hover { color: var(--ml-ink); text-decoration: underline; text-underline-offset: 3px; }
.ml-hd-gear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: var(--ml-r-full); background: transparent; color: var(--ml-muted); cursor: pointer; }
.ml-hd-gear:hover { background: var(--ml-tint); color: var(--ml-ink); }
.ml-hd-gear svg { width: 22px; height: 22px; display: block; }
@media (max-width: 1100px) { .ml-hd-in > .ml-hd-gear { display: none !important; } }

/* ---- 1.6.0: accessibility adjustments (the settings panel; applied before the first paint) ---- */
:root[data-ml-text="lg"] { --ml-fs-1: 14px; --ml-fs-2: 16px; --ml-fs-3: 18px; --ml-fs-4: 22px; --ml-fs-5: 26px; }
:root[data-ml-text="xl"] { --ml-fs-1: 16px; --ml-fs-2: 18px; --ml-fs-3: 20px; --ml-fs-4: 24px; --ml-fs-5: 28px; }
:root[data-ml-contrast="high"] { --ml-text: #1B232C; --ml-muted: #2B333D; --ml-subtle: #2B333D; --ml-line: rgb(22 31 42 / 0.3);
  --ml-line-strong: rgb(22 31 42 / 0.55); --ml-accent-text: #144F92; }
:root[data-ml-contrast="high"][data-ml-theme="dark"] { --ml-text: #EFF2F5; --ml-muted: #E3E6E9; --ml-subtle: #E3E6E9;
  --ml-line: rgb(255 255 255 / 0.32); --ml-line-strong: rgb(255 255 255 / 0.55); --ml-accent-text: #A9CCFA; }
:root[data-ml-contrast="high"] :focus-visible { outline: 3px solid var(--ml-accent) !important; outline-offset: 2px !important; }
:root[data-ml-links="on"] a[href] { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; }
:root[data-ml-font="plain"] { --ml-font-voice: var(--ml-font); }
:root[data-ml-font="plain"] .mlu { --font-voice: var(--ml-font); --font-head: var(--ml-font); }
:root[data-ml-font="plain"] body, :root[data-ml-font="plain"] body * { font-family: var(--ml-font) !important; }
:root[data-ml-spacing="wide"] { --ml-lh-body: 1.9; --ml-lh-title: 1.45; }
:root[data-ml-spacing="wide"] :is(p, li, dd, td) { word-spacing: 0.08em; }


/* ---- 1.6.0: news strip items that link, the advertising mark, and the pause button ---- */
.ml-news-i a { color: inherit; text-decoration: underline; text-decoration-color: var(--ml-accent-line); text-underline-offset: 3px;
  min-height: 0; } /* a link inside a line of text: no 44px box (base.css gives stand-alone links one), so a one-line item stays one line */
.ml-news-i a:hover { color: var(--ml-accent-text); text-decoration-color: currentColor; }
.ml-news-i a:focus-visible { outline: 3px solid var(--ml-accent); outline-offset: 2px; border-radius: 4px; }
.ml-news-ad { flex: none; font-style: normal; font-size: var(--ml-fs-1); line-height: 1.7; font-weight: var(--ml-fw-bold);
  color: var(--ml-warning-text); background: var(--ml-warning-soft); border-radius: 4px; padding: 0 6px; }
.ml-news-pp { appearance: none; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ml-r-full); background: transparent; color: var(--ml-muted); cursor: pointer; }
.ml-news-pp:hover { background: var(--ml-tint); color: var(--ml-ink); }
.ml-news-pp:focus-visible { outline: 3px solid var(--ml-accent); outline-offset: 2px; }
.ml-news-pp svg { width: 16px; height: 16px; display: block; }
.ml-news.is-still .ml-news-pp { display: none; }


/* ---- 1.6.0: how to cancel, next to the link, on the home page footer ---- */
.ml-foot-cancel { flex-basis: 100%; margin: 0; font-size: var(--ml-fs-2); line-height: 1.7; color: var(--ml-muted); }
.ml-foot-cancel a { color: var(--ml-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ml-foot-tel { white-space: nowrap; unicode-bidi: isolate; }


/* ---- 1.6.0: notices at data capture ---- */
.ml-buy-note { margin: var(--ml-sp-3) 0 0; font-size: var(--ml-fs-1); line-height: 1.7; color: var(--ml-muted); }
/* 1.6.1: how the books are received, and the summary */
.ml-buy-perk { margin: var(--ml-sp-3) 0 0; color: var(--ml-accent-text); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); }
.ml-buy-how { margin: var(--ml-sp-6) 0 0; padding: 0; border: 0; min-width: 0; }
.ml-buy-how legend { padding: 0; }
.ml-buy-opt { display: flex; align-items: flex-start; gap: var(--ml-sp-3); min-height: var(--ml-tap); padding: var(--ml-sp-3) var(--ml-sp-4);
  border: 1px solid var(--ml-line); border-radius: var(--ml-r-md); cursor: pointer; background: var(--ml-surface); }
.ml-buy-opt + .ml-buy-opt { margin-top: var(--ml-sp-2); }
.ml-buy-opt:has(input:checked) { border-color: var(--ml-accent-line); background: var(--ml-accent-soft); }
.ml-buy-opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ml-accent); }
.ml-buy-opt b { display: block; color: var(--ml-ink); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); }
.ml-buy-opt small { display: block; margin-top: 2px; color: var(--ml-muted); font-size: var(--ml-fs-1); line-height: 1.6; }
.ml-buy-sum { margin: var(--ml-sp-4) 0 0; display: grid; gap: var(--ml-sp-1); font-size: var(--ml-fs-2); color: var(--ml-text); }
.ml-buy-sum .r { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ml-sp-3); }
.ml-buy-sum .r b { color: var(--ml-ink); font-variant-numeric: tabular-nums; text-align: end; }
.ml-buy-sum .r.is-total { margin-top: var(--ml-sp-1); padding-top: var(--ml-sp-2); border-top: 1px solid var(--ml-line); font-weight: var(--ml-fw-bold); color: var(--ml-ink); }
.ml-buy-pick { margin: 0; color: var(--ml-muted); font-size: var(--ml-fs-2); }
.ml-buy-sum.is-nudge .ml-buy-pick { color: var(--ml-ink); font-weight: var(--ml-fw-bold); }
.ml-buy-cta.is-off { opacity: .72; cursor: default; }
.ml-buy-note a { color: var(--ml-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.mlc-privacy { margin-top: 8px; font-size: var(--ml-fs-1); }


/* ---- 1.6.0: degrees as text, not university logos ---- */
.ml-crest-t { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--ml-r-full);
  background: var(--ml-surface); box-shadow: inset 0 0 0 1px var(--ml-line); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); color: var(--ml-muted); }