/* enzyme/enzyme.css: what the enzyme lesson adds to css/lesson-shell.css.
   The callouts' colours, the activity meter and
   the curves over the temperature and pH sliders. Shell tokens only. */

.enz-canvas { display: block; touch-action: none; cursor: grab; }
.enz-canvas:active { cursor: grabbing; }

/* ---------- callouts: lib/annotate.js, dot and leader in the named thing's colour ---------- */
.enz-notes .annot-dot { left: -5.5px; top: -5.5px; width: 11px; height: 11px; border: 2px solid var(--c); }
.enz-notes .annot-leader { border-top: 1.5px solid var(--c); }
.enz-notes .annot > * { transition: opacity 0.35s ease; }
.enz-notes .annot.enz-off > * { opacity: 0; pointer-events: none; }

/* ---------- panel pieces ---------- */
.lshell-panel .segmented .enz-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: 0; }
.lshell-panel .segmented .is-on .enz-dot { box-shadow: 0 0 0 1.5px #fff; }

.lshell-panel .stat-value.bump { animation: enz-bump 0.45s ease; }
@keyframes enz-bump {
  0% { transform: scale(1); color: var(--accent); }
  35% { transform: scale(1.12); color: var(--accent); }
  100% { transform: scale(1); }
}

.lshell-panel .enz-meter { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lshell-panel .enz-meter .value { font-size: 22px; }
.lshell-panel .enz-bar { margin-top: 10px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lshell-panel .enz-bar i { display: block; height: 100%; border-radius: inherit; transition: width 0.25s ease, background 0.25s ease; }
.lshell-panel .enz-status { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.lshell-panel .enz-status i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lshell-panel [data-state="good"] { background: var(--accent); }
.lshell-panel [data-state="mid"] { background: var(--sun); }
.lshell-panel [data-state="bad"] { background: #c8423c; }

/* the curve sits over the slider track, inset by half the 20px thumb */
.lshell-panel .enz-chart { position: relative; height: 52px; margin: 0 10px -6px; }
.lshell-panel .enz-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lshell-panel .enz-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.lshell-panel .enz-chart .area { fill: var(--accent); opacity: 0.1; }
.lshell-panel .enz-chart .vline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); opacity: 0.25; }
.lshell-panel .enz-chart .mk {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px var(--accent);
}