/* Programming Mechatronics: the closed loop control simulator.
   Uses the theme's custom properties so light and dark mode both work. */
.mech-sim {
  margin: 1.5rem 0;
  padding: 1.1rem;
  border-radius: 14px;
  background: var(--pc-sheet, var(--bg-secondary));
  box-shadow: inset 0 0 0 1px var(--pc-rule, var(--border)), var(--shadow-sm);
  color: var(--text-primary);
  font-size: .9rem;
}
.mech-sim h4 { margin: 0 0 .25rem; font-size: 1.05rem; }
.mech-sim .ms-lead { margin: 0 0 .9rem; color: var(--text-secondary); font-size: .9rem; }
.mech-sim .ms-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 10px; background: var(--pc-kraft, var(--bg)); margin-bottom: .9rem; }
.mech-sim .ms-btn {
  font: 600 .82rem/1.2 var(--font-body, inherit);
  padding: .5rem .8rem; min-height: 40px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
}
.mech-sim .ms-btn:hover { color: var(--text-primary); }
.mech-sim .ms-seg .ms-btn[aria-pressed="true"] { background: var(--pc-cream, var(--surface)); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.mech-sim .ms-btn-quiet { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); }
.mech-sim .ms-btn:focus-visible,
.mech-sim input:focus-visible,
.mech-sim summary:focus-visible { outline: 2px solid var(--pc-plum, var(--accent)); outline-offset: 2px; }

.mech-sim .ms-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1.2rem; margin-bottom: .8rem; }
.mech-sim .ms-ctl[hidden] { display: none; }
.mech-sim .ms-ctl-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.mech-sim .ms-ctl label { font-weight: 600; font-size: .82rem; }
.mech-sim .ms-val { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--text-secondary); text-align: right; }
.mech-sim input[type="range"] { width: 100%; accent-color: var(--pc-plum, var(--accent)); min-height: 28px; }
.mech-sim .ms-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .9rem; }
.mech-sim .ms-check { font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; }
.mech-sim .ms-check input { width: 18px; height: 18px; accent-color: var(--pc-plum, var(--accent)); }

.mech-sim .ms-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0; padding: 0; font-size: .78rem; color: var(--text-secondary); }
.mech-sim .ms-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.mech-sim .ms-legend li[hidden] { display: none; }
.mech-sim .ms-sw { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--pc-teal, #2a6f73); }
.mech-sim .ms-sw.is-sp { border-top: 2px dashed var(--pc-plum, #5b4bdb); }
.mech-sim .ms-sw.is-sensor { border-top: 1px solid var(--text-muted); }
.mech-sim .ms-sw.is-band { height: 10px; border: 0; background: var(--pc-plum, #5b4bdb); opacity: .25; }
.mech-sim .ms-chart { width: 100%; margin: .2rem 0 .6rem; }
.mech-sim .ms-svg { display: block; width: 100%; height: auto; }
.mech-sim .ms-grid { stroke: var(--pc-rule, var(--border)); stroke-width: 1; }
.mech-sim .ms-tick { fill: var(--text-muted); font-size: 11px; }
.mech-sim .ms-axis { fill: var(--text-muted); font-size: 11px; font-style: italic; }
.mech-sim .ms-note { fill: var(--text-secondary); font-size: 11.5px; }
.mech-sim .ms-temp { stroke: var(--pc-teal, #2a6f73); stroke-width: 2.4; fill: none; stroke-linejoin: round; }
.mech-sim .ms-sensor { stroke: var(--text-muted); stroke-width: 1; fill: none; opacity: .75; }
.mech-sim .ms-sp { stroke: var(--pc-plum, #5b4bdb); stroke-width: 1.6; stroke-dasharray: 6 4; fill: none; }
.mech-sim .ms-band { fill: var(--pc-plum, #5b4bdb); opacity: .13; }
.mech-sim .ms-door { fill: var(--pc-mustard, #e0a93b); opacity: .18; }
.mech-sim .ms-heater { stroke: var(--pc-terracotta, #c4553b); stroke-width: 1.8; fill: none; }
.mech-sim .ms-heater-fill { fill: var(--pc-terracotta, #c4553b); opacity: .16; }
.mech-sim .ms-cursor-line { stroke: var(--text-primary); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.mech-sim .ms-dot { fill: var(--pc-teal, #2a6f73); stroke: var(--surface); stroke-width: 2; }

.mech-sim .ms-cursor { margin-bottom: .8rem; }
.mech-sim .ms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin: 0 0 .8rem; }
.mech-sim .ms-stats > div { padding: .55rem .7rem; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.mech-sim .ms-stats dt { font-size: .72rem; color: var(--text-muted); margin: 0 0 .15rem; }
.mech-sim .ms-stats dd { margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mech-sim .ms-summary { margin: 0 0 .8rem; padding: .7rem .85rem; border-left: 4px solid var(--pc-teal, #2a6f73); background: var(--surface); border-radius: 0 10px 10px 0; font-size: .9rem; line-height: 1.55; }
.mech-sim .ms-table { margin: 0 0 .8rem; }
.mech-sim .ms-table summary { cursor: pointer; font-weight: 600; font-size: .85rem; padding: .3rem 0; }
.mech-sim .ms-try { margin: 0; font-size: .85rem; color: var(--text-secondary); }

@media (max-width: 480px) {
  .mech-sim { padding: .85rem; }
  .mech-sim .ms-seg { display: flex; width: 100%; }
  .mech-sim .ms-seg .ms-btn { flex: 1 1 auto; padding: .5rem .4rem; }
}

/* Labs built on the shared kit (css/labs.css) */
.mech-in { width: 4.5rem; }
.lab .lab-stage svg { color: var(--text-secondary); }
.mech-txt { fill: var(--text-secondary); font-family: var(--font-body); font-size: calc(13px * var(--u, 1)); }
.mech-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.mech-dim { stroke: var(--text-secondary); stroke-width: 1.5; }
.mech-wave { stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; }
.mech-step { stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.mech-ideal { stroke: var(--text-secondary); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mech-mark { stroke: var(--text-primary); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mech-dot { fill: #d9534a; }
.mech-arm-stage svg { max-height: 320px; }
.mech-floor { stroke: var(--border-strong); stroke-width: 2; }
.mech-link { stroke: var(--text-primary); stroke-width: 9; stroke-linecap: round; opacity: .85; }
.mech-joint { fill: var(--surface); stroke: var(--text-primary); stroke-width: 3; }
.mech-end { fill: #d9534a; stroke: var(--surface); stroke-width: 2; }
.mech-reach { fill: var(--primary); opacity: .22; }
.mech-fsm-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 .8rem; }
.mech-fsm-state { display: grid; gap: .15rem; place-items: center; padding: .9rem .5rem; border: 3px solid var(--border-strong); border-radius: 999px; background: var(--bg-tertiary); text-align: center; opacity: .6; transition: opacity .15s, transform .15s; }
.mech-fsm-state small { color: var(--text-secondary); }
.mech-fsm-state.is-now { opacity: 1; transform: scale(1.04); }
.mech-fsm-state.is-green.is-now { border-color: #2f9461; background: var(--lab-good); color: var(--lab-good-ink); }
.mech-fsm-state.is-yellow.is-now { border-color: #d9a020; background: var(--lab-warn); color: var(--lab-warn-ink); }
.mech-fsm-state.is-red.is-now { border-color: #d9534a; background: var(--lab-bad); color: var(--lab-bad-ink); }
.mech-fsm-state.is-now small { color: inherit; }
.mech-fsm-log { margin: .8rem 0; padding-left: 1.3rem; font-size: .9rem; }
.mech-fsm-log li:last-child { font-weight: 700; }
@media (max-width: 480px) { .mech-fsm-stage { grid-template-columns: minmax(0, 1fr); } }