/* =========================================================
   show_IEM (v4) — additions to show-motion.css:
   seven steps in the nav, the inset labels, the line-search
   readouts and checks, the metric keys, the beta chart
   ========================================================= */

.si-page .sm-nav{ gap:clamp(2px,1.1vw,20px); }
.si-page .sm-nav button{ padding:8px 4px; }
#sm-gl.orbit{ cursor:grab; }
#sm-gl.slide{ cursor:ew-resize; }

/* labels in the corner insets (the map, or the landscape in step 07) */
.sm-lab.si-inset{ font-size:.84rem; text-align:center; }
.sm-lab.si-inset small{ margin-bottom:2px; letter-spacing:.16em; }
.sm-lab.si-inset span{ font-size:.8rem; font-variant-numeric:tabular-nums; }
.sm-lab .mi{ font-family:"STIX Two Text","Times New Roman",serif; font-style:italic; text-transform:none; letter-spacing:0; font-size:1.12em; }
.sm-lab .lm{ display:block; font-family:"STIX Two Text","Times New Roman",serif; font-weight:400; font-size:1.08rem; color:var(--txt); line-height:1.25; }
.sm-lab .lm sup, .sm-lab .lm sub{ font-size:.66em; }

/* the step text: one more emphasis colour, the hue of the CG direction */
.sm-step .dir{ color:#32d2e6; font-weight:400; }
.sm-step .grd{ color:#ff9a6b; font-weight:400; }
.sm-step .grd .m, .sm-step .dir .m, .sm-step .acc .m{ color:inherit; }
.sm-step .m.acc{ color:#32d2e6; }
/* display mathematics: centred on its own line; a stacked fraction; lim inf with its limit set below */
.sm-step .md.w{ display:block; text-align:center; margin:.55em 0 .6em; font-size:1.13em; white-space:nowrap; }
.sm-step .md.sub{ margin-bottom:1.2em; }                       /* room for the limits below an operator */
.sm-step .m sup{ font-size:.68em; }
.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 .op{ position:relative; display:inline-block; }
.sm-step .op small{ position:absolute; left:50%; top:2.05em; transform:translateX(-50%); font-size:.6em; white-space:nowrap; }

/* the colour bar of the volume distortion */
.si-legend i{ background:linear-gradient(90deg, rgb(25,70,180), rgb(50,210,230) 33%, rgb(255,230,80) 66%, rgb(210,50,45)); }

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

/* step 04: what the two arrows are */
.si-keys{ display:flex; gap:22px; font-family:"STIX Two Text","Times New Roman",serif; font-size:1.02rem; color:var(--dim); }
.si-keys span{ display:flex; align-items:center; gap:8px; }
.si-keys i{ display:inline-block; width:18px; height:2px; border-radius:1px; }
.si-keys .g i{ background:#ff9a6b; }
.si-keys .h i{ background:#f2f2f2; }
.si-keys b{ font-weight:400; }
.si-keys sub, .si-keys sup{ font-size:.66em; }

/* step 05: the numbers of the line search, and the two conditions */
.si-ls{ display:grid; grid-template-columns:1fr auto; gap:5px 14px; margin:0; font-size:.9rem; }
.si-ls dt{ color:var(--faint); }
.si-ls dd{ margin:0; text-align:right; color:var(--txt); font-variant-numeric:tabular-nums; }
.si-ls dd.acc{ color:#32d2e6; }
.si-ls .m, .si-checks .m{ font-family:"STIX Two Text","Times New Roman",serif; font-style:normal; }
.si-ls sub, .si-checks sub{ font-size:.68em; }
.si-checks{ display:flex; flex-direction:column; gap:7px; padding-top:4px; border-top:1px solid var(--line); }
.si-checks div{ display:grid; grid-template-columns:18px auto 1fr; align-items:baseline; gap:8px; font-size:.86rem; color:var(--dim); }
.si-checks b{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line-2); align-self:center; position:relative; transition:background .2s, border-color .2s; }
.si-checks b::after{ content:""; position:absolute; left:4px; top:1.5px; width:4px; height:7px; border:solid #151515; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); opacity:0; }
.si-checks div.ok b{ background:#6fe3b0; border-color:#6fe3b0; }
.si-checks div.ok b::after{ opacity:1; }
.si-checks div.no b{ background:none; border-color:#e8907e; }
.si-checks div.no span{ color:#e8907e; }
.si-checks em{ text-align:right; color:var(--faint); font-size:.92rem; white-space:nowrap; }
.si-checks em i{ font-style:italic; }
.si-cs{ margin:0; font-size:.78rem; color:var(--faint); }
.si-cs .m{ font-family:"STIX Two Text","Times New Roman",serif; font-size:1.08em; }
.si-cs i{ font-style:italic; } .si-cs sub{ font-size:.68em; }
.si-btn{
  align-self:flex-start; background:none; border:1px solid var(--line-2); border-radius:3px; color:var(--dim);
  font:inherit; font-size:.82rem; padding:5px 11px; cursor:pointer; transition:color .2s, border-color .2s, opacity .3s;
}
.si-btn:hover{ color:var(--txt); border-color:rgba(255,255,255,.6); }
.si-btn[hidden]{ display:none; }

#si-bchart{ height:76px; }
#si-energy{ height:80px; cursor:pointer; }
#si-hist{ height:50px; }
.sm-ctrl[data-ctrl="4"].on, .sm-ctrl[data-ctrl="6"].on{ gap:9px; }
.si-ls dd.grd{ color:#ff9a6b; }
.si-ls dd .acc{ color:#32d2e6; }
.si-ls dd i, .si-ls dt i{ font-style:italic; }
.si-page .sm-panel[data-step] .sm-fine{ display:block; }      /* one provenance note per step (show-motion.css hides it in step 03) */
.si-page .sm-panel .sm-fine:empty{ display:none; }
#sm-gl.vslide{ cursor:ns-resize; }

@media (max-width:860px){
  .si-page .sm-nav button:not(.sm-next) span{ display:none; }
  .sm-lab[data-lab="inset"]{ display:none; }          /* the small map keeps its place, its caption would cover the arrows */
}