/* 力学的エネルギー保存のページ専用。共通の部品は style.css を使い、ここには、このページだけのものを書く */
.re-sim { --c-k: #1f5fd6; --c-u: #15803d; --c-q: #c2410c; --c-ref: #6d28d9; }
.re-sim [hidden], #rec-wrap[hidden] { display: none !important; }

#plot { display: block; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }

.re-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.re-tabs .btn { line-height: 1.3; padding: 6px 4px; font-size: 0.95rem; }
.re-tabs .btn[aria-selected="true"] { background: var(--blue); color: #fff; }
.re-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.re-presets .btn { font-size: 0.86rem; line-height: 1.3; padding: 6px 4px; }
.re-presets .btn[aria-pressed="true"] { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.re-kind { font-size: 0.82rem; font-weight: 700; color: var(--blue-dark); margin: 0; text-align: right; }
.re-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.re-small { font-size: 0.84rem; color: var(--muted); }
.re-rec { margin-top: 14px; }
.re-rec table { font-size: 0.86rem; }
.re-rec th, .re-rec td { white-space: nowrap; text-align: right; }
.re-force-table td:first-child, .re-force-table th:first-child { white-space: nowrap; }

/* 図の中：動きの図 */
.re-ground { fill: #eef1f6; }
.re-paper { fill: #fff; }
.re-surface { fill: none; stroke: #3b4457; stroke-width: 2.5; stroke-linejoin: round; }
.re-rough { stroke: #9a3412; stroke-width: 3.5; stroke-dasharray: 3 3; }
.re-dim { fill: none; stroke: #7a8499; stroke-width: 1.2; stroke-dasharray: 3 3; }
.re-stop { stroke: #9a3412; stroke-width: 2.5; }
.re-ref { stroke: var(--c-ref); stroke-width: 1.8; stroke-dasharray: 9 3 2 3; }
.re-handle, .re-handle * { cursor: ns-resize; touch-action: none; }
.re-sim .ctrl-group { min-width: 0; }
#speed { width: 100%; min-width: 0; }
.re-handle-box { fill: #f3edfd; stroke: var(--c-ref); stroke-width: 1.5; }
.re-handle-text { font-size: 11.5px; font-weight: 700; fill: #4c1d95; }
.re-block { fill: #1f5fd6; stroke: #0d2f73; stroke-width: 2; }
.re-ghost-block { fill: none; stroke: #9aa4b8; stroke-width: 1.2; stroke-dasharray: 3 3; }
.re-wall { fill: #d3dbe8; }
.re-spring { fill: none; stroke: #3b4457; stroke-width: 2; stroke-linejoin: round; }
.re-natural { stroke: #4c1d95; stroke-width: 1.5; stroke-dasharray: 9 3 2 3; }
.re-arrow { stroke-width: 3; }
.re-arrow.re-c-g { stroke: #1c2333; }
.re-arrow.re-c-n { stroke: #15803d; stroke-dasharray: 5 3; }
.re-arrow.re-c-f { stroke: #c2410c; stroke-dasharray: 2 2; }
.re-arrow.re-c-v { stroke: #1f5fd6; }
.re-head.re-c-g { fill: #1c2333; }
.re-head.re-c-n { fill: #15803d; }
.re-head.re-c-f { fill: #c2410c; }
.re-head.re-c-v { fill: #1f5fd6; }
.re-lab { font-size: 12.5px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-lab-g { fill: #1c2333; }
.re-lab-n { fill: #15803d; }
.re-lab-f { fill: #c2410c; }
.re-lab-v { fill: #1f5fd6; }
.re-lab-u { fill: #15803d; }

/* 図の中：エネルギー */
.re-title { font-size: 12.5px; font-weight: 700; fill: var(--text); }
.re-grid { stroke: #e8edf5; stroke-width: 1; }
.re-zero { stroke: #3b4457; stroke-width: 1.5; }
.re-tick { font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-axis-name { font-size: 11.5px; fill: var(--text); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-note { font-size: 11.5px; font-weight: 700; fill: #3b4457; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-small-note { font-size: 11px; fill: #3b4457; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-seg-k { fill: #bcd2fa; stroke: #1f5fd6; stroke-width: 1.5; }
.re-seg-u { fill: url(#re-hatch-u); stroke: #15803d; stroke-width: 1.5; }
.re-seg-q { fill: url(#re-dots-q); stroke: #c2410c; stroke-width: 1.5; }
.re-bar-label { font-size: 11.5px; font-weight: 700; fill: #1c2333; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-bar-tab { font-size: 11px; font-weight: 700; fill: #166534; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-line-k { fill: none; stroke: #1f5fd6; stroke-width: 3; }
.re-line-u { fill: none; stroke: #15803d; stroke-width: 3; stroke-dasharray: 8 4; }
.re-parabola { stroke-dasharray: none; }
.re-line-m { fill: none; stroke: #1c2333; stroke-width: 2; }
.re-q-area { stroke: none; }
.re-total { stroke: #7c2d12; stroke-width: 2; stroke-dasharray: 10 3 2 3; }
.re-total-label { font-size: 11.5px; font-weight: 700; fill: #7c2d12; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.re-foot { stroke: #7a8499; stroke-width: 1; stroke-dasharray: 2 3; }
.re-cursor { stroke: #7a8499; stroke-width: 1.2; }
.re-pt-k { fill: #1f5fd6; stroke: #fff; stroke-width: 2; }
.re-pt-u { fill: #15803d; stroke: #fff; stroke-width: 2; }
.re-pt-m { fill: #1c2333; stroke: #fff; stroke-width: 1.5; }
.re-part-u { stroke: #15803d; stroke-width: 4; }
.re-part-k { stroke: #1f5fd6; stroke-width: 4; }

/* 凡例 */
.lg-re-k { stroke: #1f5fd6; stroke-width: 3; }
.lg-re-u { stroke: #15803d; stroke-width: 3; stroke-dasharray: 8 4; }
.lg-re-u2 { stroke: #15803d; stroke-width: 3; }
.lg-re-m { stroke: #1c2333; stroke-width: 2; }
.lg-re-total { stroke: #7c2d12; stroke-width: 2; stroke-dasharray: 10 3 2 3; }
.lg-re-ref { stroke: #6d28d9; stroke-width: 2; stroke-dasharray: 9 3 2 3; }
.lg-re-bk { fill: #bcd2fa; stroke: #1f5fd6; }
.lg-re-bu { fill: #dcf3e4; stroke: #15803d; stroke-dasharray: 3 2; }
.lg-re-bq { fill: #fdf0e6; stroke: #c2410c; stroke-dasharray: 1 2; }
.lg-re-mg { stroke: #1c2333; stroke-width: 3; }
.lg-re-n { stroke: #15803d; stroke-width: 3; stroke-dasharray: 5 3; }
.lg-re-f { stroke: #c2410c; stroke-width: 3; stroke-dasharray: 2 2; }

/* 収支の練習 */
.re-led-form label { display: block; font-size: 0.92rem; margin: 8px 0 2px; }
.re-led-form input { width: 6em; font: inherit; padding: 4px 6px; border: 1px solid #aeb8cc; border-radius: 6px; min-height: 40px; }
.re-led-mark { display: inline-block; margin-left: 6px; font-size: 0.86rem; font-weight: 700; }
.re-led-mark.ok { color: #15803d; }
.re-led-mark.ng { color: #9a3412; }
#led-result { font-size: 0.92rem; margin: 8px 0 0; }
#led-text { background: var(--bg-soft); border-radius: 8px; padding: 8px 12px; }

@media (max-width: 620px) {
  .re-readouts { grid-template-columns: 1fr; }
}
.re-sim table.values th { white-space: normal; }