/* Shared Hebrew/English exercise surfaces. No page-level overrides. */
.tm-sim, .tm-breath, .tm-decision {
  --interaction-win: #80e3c2;
  --interaction-loss: #ffad9f;
  color: var(--text-primary, #e8edf5);
  min-width: 0;
  /* Do not let the deliberately scrollable chart widen a parent grid track. */
  contain: inline-size;
}
.tm-sim, .tm-breath {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--border-default, #2e3644);
  border-radius: 20px;
  background: radial-gradient(ellipse at 90% 0%, #18362f40, transparent 55%), var(--bg-surface, #10141c);
}
.tm-interaction-eyebrow {
  margin: 0 0 8px;
  color: var(--heat-lo, #7edcc9);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .035em;
}
.tm-interaction-title { margin: 0 0 10px; font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.25; }
.tm-interaction-note { margin: 8px 0 14px; color: var(--text-secondary, #a9b4c4); font-size: .92rem; line-height: 1.65; }
.tm-interaction-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 12px; }
.tm-interaction-controls .btn { min-height: 44px; padding: 9px 14px; font-size: .92rem; }
.tm-interaction-controls .btn--ghost { border-color: var(--border-interactive, #6e7c8f); }
.tm-interaction-controls .btn:focus-visible,
.tm-sim-speed select:focus-visible, .tm-sim-ledger summary:focus-visible,
.tm-sim-ledger button:focus-visible, .tm-sim-chart-wrap:focus-visible {
  outline: 2px solid var(--heat-lo, #7edcc9); outline-offset: 4px;
}
.tm-sim [hidden] { display: none !important; }
.tm-sim-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 24px 0 20px; border: 1px solid var(--border-default, #2e3644); border-radius: 12px; overflow: hidden; background: var(--border-default, #2e3644); }
.tm-sim-stat { display: flex; flex-direction: column; gap: 5px; padding: 15px 12px; background: var(--bg-raised, #171c26); }
.tm-sim-stat strong { align-self: flex-start; font-family: var(--font-num, monospace); font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 600; }
.tm-sim-stat span { color: var(--text-secondary, #a9b4c4); font-size: .82rem; line-height: 1.3; }
.tm-sim-chart-wrap { overflow-x: auto; border: 1px solid var(--border-default, #2e3644); border-radius: 12px; direction: ltr; background: var(--bg-terminal, #050810); scrollbar-color: #536879 #10141c; }
.tm-sim-chart { display: block; width: 100%; min-width: 680px; height: auto; direction: ltr; touch-action: pan-x pan-y; }
.tm-sim-grid { stroke: #283744; stroke-width: 1; stroke-dasharray: 2 5; }
.tm-sim-zero { stroke: #80929f; stroke-width: 1.2; }
.tm-sim-axis, .tm-sim-axis-title { fill: #b6c4d2; font-size: 13px; font-family: var(--font-ui, sans-serif); }
.tm-sim-axis { font-family: var(--font-num, monospace); }
.tm-sim-area { fill: #4fc8b00a; }
.tm-sim-line { stroke: #86b6c8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-sim-crosshair { stroke: #d9e9ef; stroke-width: 1; stroke-dasharray: 4 5; opacity: .65; pointer-events: none; }
.tm-sim-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; }
.tm-sim-dot { fill: var(--interaction-win); stroke: #050810; stroke-width: 2; }
.tm-sim-marker[data-result="loss"] .tm-sim-dot { fill: var(--interaction-loss); }
.tm-sim-number { fill: #cbd7e2; font: 600 12px var(--font-num, monospace); paint-order: stroke; stroke: #050810; stroke-width: 3; stroke-linejoin: round; }
.tm-sim-marker { cursor: pointer; outline: none; }
.tm-sim-marker:hover .tm-sim-hit, .tm-sim-marker[data-selected="true"] .tm-sim-hit { stroke: #b6d7e1; fill: #b6d7e10a; }
.tm-sim-marker:focus-visible .tm-sim-hit { stroke: #fff; stroke-width: 2.5; }
.tm-sim-marker[data-selected="true"] .tm-sim-number { fill: #fff; font-weight: 700; }
.tm-sim-speed { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--text-secondary, #a9b4c4); font-size: .85rem; }
.tm-sim-speed select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-interactive, #6e7c8f); background: var(--bg-raised, #171c26); color: var(--text-primary, #e8edf5); border-radius: 8px; font: inherit; direction: ltr; }
.tm-sim-status { min-height: 1.6em; margin: 14px 0; color: var(--text-secondary, #a9b4c4); font-size: .9rem; line-height: 1.6; }
.tm-sim-detail { margin: 16px 0; padding: 18px; border: 1px solid #496963; border-inline-start: 3px solid var(--interaction-win); border-radius: 10px; background: #0c171b; }
.tm-sim-detail[data-result="loss"] { border-inline-start-color: var(--interaction-loss); }
.tm-sim-detail h4 { margin: 0 0 14px; font-size: 1rem; }
.tm-sim-detail dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; }
.tm-sim-detail dt { color: var(--text-secondary, #a9b4c4); font-size: .8rem; }
.tm-sim-detail dd { width: fit-content; margin: 5px 0 0; font: 600 1.08rem var(--font-num, monospace); }
.tm-sim-detail [data-result="win"] { color: var(--interaction-win); }
.tm-sim-ledger { border-block-start: 1px solid var(--border-default, #2e3644); margin-top: 20px; }
.tm-sim-ledger summary { cursor: pointer; padding: 16px 2px; color: var(--text-primary, #e8edf5); font-weight: 600; }
.tm-sim-table-wrap { overflow-x: auto; }
.tm-sim-ledger table { width: 100%; min-width: 500px; border-collapse: collapse; text-align: start; font-size: .86rem; }
.tm-sim-ledger caption { padding: 0 0 10px; color: var(--text-secondary, #a9b4c4); text-align: start; }
.tm-sim-ledger th, .tm-sim-ledger td { padding: 10px; border-block-end: 1px solid var(--border-default, #2e3644); text-align: start; white-space: nowrap; }
.tm-sim-ledger thead th { color: var(--text-secondary, #a9b4c4); font-weight: 600; }
.tm-sim-ledger td { font-family: var(--font-num, monospace); text-align: center; }
.tm-sim-ledger tr[data-selected="true"] { background: #4fc8b011; }
.tm-sim-ledger .btn { min-width: 40px; min-height: 36px; padding: 4px 10px; border-color: var(--border-interactive, #6e7c8f); font: inherit; }

.tm-breath { text-align: center; max-width: 720px; margin-inline: auto; }
.tm-breath .tm-interaction-controls { justify-content: center; }
.tm-breath-visual { position: relative; width: min(240px, 100%); aspect-ratio: 1; margin: 25px auto 20px; }
.tm-breath-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tm-breath-track { stroke: #33474c; stroke-width: 2; }
.tm-breath-arc { stroke: var(--heat-lo, #7edcc9); stroke-width: 4; stroke-linecap: round; }
.tm-breath-orb { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid #589d91; background: radial-gradient(circle at 40% 30%, #327d6f, #133b3d 70%); box-shadow: 0 0 42px #4fc8b011, inset 0 0 24px #4fc8b011; transform: scale(var(--breath-scale, .74)); }
.tm-breath-phase-number { position: absolute; inset: 0; display: grid; place-items: center; font: 400 2.5rem var(--font-num, monospace); color: #e6fff8; }
.tm-breath-word { margin: 0; min-height: 1.7em; font-size: 1.15rem; color: var(--text-primary, #e8edf5); line-height: 1.6; }
.tm-breath-count { margin: 6px 0 16px; color: var(--text-secondary, #a9b4c4); font-size: .88rem; font-variant-numeric: tabular-nums; }
.tm-breath-progress { display: block; width: min(280px, 100%); height: 4px; margin: 0 auto 16px; border: 0; border-radius: 10px; accent-color: var(--heat-lo, #7edcc9); }
.tm-breath-progress::-webkit-progress-bar { background: #33474c; border-radius: 10px; }
.tm-breath-progress::-webkit-progress-value { background: var(--heat-lo, #7edcc9); border-radius: 10px; }
.tm-breath-progress::-moz-progress-bar { background: var(--heat-lo, #7edcc9); border-radius: 10px; }
.tm-breath-safety { max-width: 54ch; margin: 18px auto 0; color: var(--text-secondary, #a9b4c4); font-size: .84rem; line-height: 1.65; }
.tm-breath[data-state="paused"] .tm-breath-orb { background: #193036; border-color: #7d9caa; }
.tm-breath[data-state="complete"] .tm-breath-orb { border-color: var(--heat-lo, #7edcc9); }
.tm-decision .drill-line, .tm-decision .drill-timer { max-width: none; }
.tm-decision .drill-line { border-radius: 12px; }
.tm-decision .drill-clock { height: 6px; }
.tm-decision .drill-clock i { transition: none; }
.tm-decision .drill-left { text-align: end; min-width: 8em; color: var(--text-secondary, #a9b4c4); font-size: .85rem; }
.tm-decision .explain { padding: 16px; border-inline-start: 3px solid var(--heat-lo, #7edcc9); background: var(--bg-raised, #171c26); border-radius: 8px; }
@media (max-width: 620px) {
  .tm-sim, .tm-breath { padding: 16px; border-radius: 14px; }
  .tm-sim-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-sim-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-sim-speed { margin-inline-start: 0; }
  .tm-interaction-controls .btn { flex: 1 1 auto; }
  .tm-decision .drill-timer { align-items: flex-start; flex-direction: column-reverse; gap: 8px; }
  .tm-decision .drill-clock { width: 100%; flex: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-breath-orb { transform: none; box-shadow: none; }
  .tm-sim *, .tm-breath *, .tm-decision * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tm-interaction-controls .btn:hover { transform: none; }
}
@media (forced-colors: active) {
  .tm-sim-grid, .tm-sim-zero, .tm-sim-line, .tm-sim-crosshair, .tm-breath-track, .tm-breath-arc { stroke: CanvasText; }
  .tm-sim-axis, .tm-sim-axis-title, .tm-sim-number, .tm-sim-dot { fill: CanvasText; }
  .tm-sim-marker[data-selected="true"] .tm-sim-hit { stroke: Highlight; }
  .tm-breath-orb { border: 2px solid CanvasText; }
}