/* Teaching simulations: slide rule and astrolabe.
   Text and chrome use the host page variables; instrument faces use a fixed ivory/brass palette. */
.sim {
  --sim-ivory: #f3e9cf;
  --sim-ivory-2: #e4d5aa;
  --sim-ivory-3: #d3c08a;
  --sim-brass: #b08a3a;
  --sim-brass-dk: #6b4f14;
  --sim-ink: #2a2114;
  --sim-red: #b3261e;
  --sim-focus: #1a56db;
  margin: 1.5rem 0;
  padding: 12px;
  border: 1px solid var(--rule, #d9d6cf);
  border-radius: 12px;
  background: var(--panel, transparent);
  color: var(--body, inherit);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.45;
  box-sizing: border-box;
  max-width: 100%;
}
.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }
.sim-title { margin: 0 0 4px; font-weight: 700; color: var(--ink, inherit); font-size: 1.05rem; }
.sim-intro { margin: 0 0 10px; color: var(--quiet, inherit); font-size: .92rem; }
.sim-stage { width: 100%; min-height: 40px; }
.sim-svg { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.sim-svg text { pointer-events: none; font-family: var(--serif, Georgia, serif); }
.sim-svg [role="slider"] { outline: none; cursor: grab; }
.sim-svg [role="slider"]:active { cursor: grabbing; }
.sim-svg .sim-focusbox { fill: none; stroke: none; pointer-events: none; }
.sim-svg [role="slider"]:focus-visible .sim-focusbox { stroke: var(--sim-focus); stroke-width: 3; stroke-dasharray: 6 3; }

/* readout and text blocks */
.sim-readout { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule, #d9d6cf); background: var(--panel, transparent); color: var(--ink, inherit); font-variant-numeric: tabular-nums; }
.sim-readout .sim-main { font-weight: 700; font-size: 1.02rem; margin: 0; }
.sim-readout .sim-sub { margin: 4px 0 0; color: var(--quiet, inherit); font-size: .9rem; }
.sim-note { margin: 8px 0 0; color: var(--quiet, inherit); font-size: .88rem; }
.sim-how { margin: 10px 0 0; font-size: .92rem; color: var(--body, inherit); }
.sim-how strong { color: var(--ink, inherit); }

/* controls */
.sim-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; align-items: center; }
.sim-btn, .sim-select, .sim-toggle {
  min-height: 44px; min-width: 44px; padding: 0 14px; font: inherit; font-size: .95rem;
  color: var(--ink, inherit); background: var(--panel, transparent);
  border: 1px solid var(--rule, #bbb); border-radius: 8px; cursor: pointer;
}
.sim-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sim-btn:hover, .sim-select:hover, .sim-toggle:hover { border-color: var(--accent, #5b2a9e); }
.sim-btn:focus-visible, .sim-select:focus-visible, .sim-toggle:focus-within, .sim-chip:focus-visible { outline: 3px solid var(--sim-focus); outline-offset: 2px; }
.sim-btn.sim-primary { background: var(--accent, #5b2a9e); border-color: var(--accent, #5b2a9e); color: #fff; }
.sim-toggle { display: inline-flex; align-items: center; gap: 8px; }
.sim-toggle input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent, #5b2a9e); }
.sim-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink, inherit); font-size: .95rem; }
.sim-ctl-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* star chips */
.sim-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 10px 0 0; }
.sim-chip { min-height: 48px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--rule, #bbb); background: var(--panel, transparent); color: var(--ink, inherit); font: inherit; font-size: .88rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.sim-chip .sim-chip-alt { color: var(--quiet, inherit); font-variant-numeric: tabular-nums; font-size: .82rem; }
.sim-chip[aria-pressed="true"] { border-color: var(--accent, #5b2a9e); box-shadow: inset 0 0 0 2px var(--accent, #5b2a9e); font-weight: 700; }
.sim-chip.sim-down { opacity: .6; }

/* challenges */
.sim-challenge { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule, #d9d6cf); }
.sim-challenge h4 { margin: 0 0 6px; font-size: 1rem; color: var(--ink, inherit); }
.sim-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sim-task { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--rule, #d9d6cf); border-radius: 8px; }
.sim-task .sim-mark { font-size: 1.3rem; line-height: 1; text-align: center; color: var(--quiet, inherit); }
.sim-task.sim-done { border-color: var(--accent2, #1f5fae); }
.sim-task.sim-done .sim-mark { color: var(--accent2, #1f5fae); }
.sim-task .sim-task-text { color: var(--ink, inherit); }
.sim-task .sim-task-hint { display: block; color: var(--quiet, inherit); font-size: .85rem; }
.sim-task.sim-wide { grid-template-columns: 28px 1fr; }
.sim-task.sim-wide .sim-btn { grid-column: 2; justify-self: start; }
.sim-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* slide rule drawing */
.sr-stator { fill: var(--sim-ivory-2); stroke: var(--sim-brass-dk); stroke-width: 1.5; }
.sr-slide { fill: var(--sim-ivory); stroke: var(--sim-brass-dk); stroke-width: 1.5; }
.sr-groove { stroke: var(--sim-brass-dk); stroke-width: 1.5; }
.sr-t { fill: none; stroke: var(--sim-ink); stroke-linecap: butt; }
.sr-t-maj { stroke-width: 1.7; }
.sr-t-half { stroke-width: 1.3; }
.sr-t-ten { stroke-width: 1; }
.sr-t-min { stroke-width: .8; }
.sr-t-idx { stroke: var(--sim-red); stroke-width: 2; }
.sr-num { fill: var(--sim-ink); text-anchor: middle; font-weight: 700; }
.sr-num-half, .sr-num-ten { font-weight: 400; }
.sr-letter { fill: var(--sim-brass-dk); font-weight: 700; font-style: italic; }
.sr-glass { fill: rgba(160, 205, 235, .22); stroke: rgba(40, 90, 130, .75); stroke-width: 1.2; }
.sr-hair { stroke: var(--sim-red); stroke-width: 1.6; }
.sr-handle { fill: var(--sim-red); stroke: #fff; stroke-width: 1.5; }
.sr-grip { fill: var(--sim-brass-dk); opacity: .55; }
.sr-readflag { fill: var(--sim-ink); font-size: 11px; }

/* astrolabe drawing */
.as-plate { fill: var(--sim-ivory); stroke: var(--sim-brass-dk); stroke-width: 2; }
.as-shade { fill: rgba(70, 50, 15, .17); stroke: none; fill-rule: evenodd; }
.as-alm { fill: none; stroke: var(--sim-brass); stroke-width: 1; }
.as-horizon { fill: none; stroke: var(--sim-ink); stroke-width: 2.2; }
.as-dec { fill: none; stroke: var(--sim-brass); stroke-width: 1; stroke-dasharray: 5 4; }
.as-line { stroke: var(--sim-brass); stroke-width: 1; }
.as-txt { fill: var(--sim-ink); font-size: 10.5px; paint-order: stroke; stroke: var(--sim-ivory); stroke-width: 3px; stroke-linejoin: round; }
.as-txt-b { font-weight: 700; font-size: 12.5px; }
.as-ring-am { fill: var(--sim-ivory-3); stroke: var(--sim-brass-dk); stroke-width: 1.5; }
.as-ring-pm { fill: var(--sim-brass); stroke: var(--sim-brass-dk); stroke-width: 1.5; }
.as-ring-tick { stroke: var(--sim-ink); stroke-width: 1.2; }
.as-ring-num { fill: var(--sim-ink); text-anchor: middle; dominant-baseline: central; font-weight: 700; font-size: 12px; }
.as-corner { fill: var(--ink, currentColor); font-weight: 700; font-size: 13px; font-family: var(--sans, system-ui, sans-serif); }
.as-ecl { fill: none; stroke: var(--sim-brass-dk); stroke-width: 2; }
.as-ecl-tick { stroke: var(--sim-brass-dk); stroke-width: 1.2; }
.as-mdot { fill: var(--sim-brass-dk); }
.as-star { fill: var(--sim-ink); stroke: var(--sim-ivory); stroke-width: 1; }
.as-star.as-below { opacity: .4; }
.as-star-ring { fill: none; stroke: var(--sim-red); stroke-width: 2.4; }
.as-sun-body { fill: #e8a317; stroke: var(--sim-brass-dk); stroke-width: 1.2; }
.as-sun-ray { stroke: #c27d0e; stroke-width: 1.6; }
.as-starlabel { fill: var(--sim-ink); font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--sim-ivory); stroke-width: 3.5px; stroke-linejoin: round; }
.as-starlabel.as-below { opacity: .55; }
.as-hand { stroke: var(--sim-red); stroke-width: 2; stroke-dasharray: 7 4; }
.as-hand-dot { fill: var(--sim-red); stroke: #fff; stroke-width: 1.5; }
.as-hit { fill: transparent; cursor: grab; touch-action: none; }
.as-hit:active { cursor: grabbing; }
.as-note-small { font-size: .85rem; color: var(--quiet, inherit); margin: 6px 0 0; }

@media (max-width: 480px) {
  .sim { padding: 10px; }
  .sim-controls .sim-btn { flex: 1 1 calc(50% - 8px); }
  .as-txt { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sim * { transition: none !important; } }