/* =========================================================
   show_AEM (v4, rev 2) — additions to show-motion.css:
   display mathematics, the readouts, five steps in the nav
   ========================================================= */

.sa-page .sm-nav{ gap:clamp(2px,1.3vw,22px); }
#sm-gl.slide{ cursor:ew-resize; }
#sm-gl.point{ cursor:pointer; }

.sm-lab .mi{ font-family:"STIX Two Text","Times New Roman",serif; font-style:italic; text-transform:none; letter-spacing:0; font-size:1.18em; }

/* display mathematics: centred on its own line; a stacked fraction */
.sm-step .md.w{ display:block; text-align:center; margin:.6em 0 .65em; font-size:1.13em; white-space:nowrap; }
.sm-step .fr{ display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; line-height:1.12; margin:0 .1em; font-size:.94em; }
.sm-step .fr > span:first-child{ border-bottom:1px solid currentColor; padding:0 .18em .1em; }
.sm-step .fr > span:last-child{ padding:.1em .18em 0; }
.sm-step .m sup{ font-size:.68em; }
.sm-step .acc .m, .sm-step .m.acc{ color:#32d2e6; }

.sa-m{ font-family:"STIX Two Text","Times New Roman",serif; font-size:1.05rem; letter-spacing:0; text-transform:none; color:var(--dim); }
.sa-m i{ font-style:italic; }

/* readouts */
.sa-ls{ display:grid; grid-template-columns:1fr auto; gap:5px 14px; margin:0; font-size:.9rem; }
.sa-ls dt{ color:var(--faint); }
.sa-ls dd{ margin:0; text-align:right; color:var(--txt); font-variant-numeric:tabular-nums; }
.sa-ls dd.acc, .sa-ls .acc{ color:#32d2e6; }
.sa-ls .m{ font-family:"STIX Two Text","Times New Roman",serif; font-style:normal; }
.sa-ls i{ font-style:italic; }
.sa-ls sub, .sa-ls sup{ font-size:.68em; }
.sa-ls .ka{ color:#32d2e6; } .sa-ls .kb{ color:#ffb36b; }

.sm-ctrl[data-ctrl="2"].on{ gap:12px; }
/* 05: the colours of the landmarks */
.sa-key{ display:flex; flex-wrap:wrap; gap:4px 13px; margin:0; font-size:.84rem; color:var(--faint); }
.sa-key span{ white-space:nowrap; }
.sa-key i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:.04em; box-shadow:0 0 0 1.5px rgba(15,15,15,.7); }
.sa-page .sm-panel[data-step] .sm-fine{ display:block; }      /* (show-motion.css hides it in step 03 of the old demo) */
.sa-page .sm-panel .sm-fine:empty{ display:none; }

@media (max-width:860px){
  .sa-page .sm-nav button:not(.sm-next) span{ display:none; }
}