/* =====================================================================
   experimentLab：斜面を下る台車の運動（Ver.0.11.0）
   横から見た斜面・ばねばかり・記録・0.1秒ごとに線を引く・方眼紙・表
   ===================================================================== */
.exl-ct-bench{position:relative;background:#2a2825}
.exl-ct-hz[hidden]{display:none}
.exl-ct-board{position:relative;padding:4px}
.exl-ct-svg{display:block;width:100%;height:auto;max-height:calc(var(--exl-sh, 100dvh) - 70px);touch-action:none;user-select:none;-webkit-user-select:none;border-radius:10px}
.exl-ct-bench.tray .exl-ct-svg{max-height:calc(var(--exl-sh, 100dvh) - 140px)}
.exl-ct-zask{top:auto;bottom:8%}
.exl-ct-slowtag{position:absolute;left:12px;top:10px;z-index:2;padding:3px 10px;border-radius:999px;background:rgba(31,52,90,.9);color:#eef4ff;font-weight:700;font-size:13px;pointer-events:none}
.exl-ct-slowtag[hidden]{display:none}
/* 傾きの操作 */
.exl-ct-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 8px;background:#33302a;color:#f3e6c4}
.exl-ct-ctl[hidden]{display:none}
.exl-ct-ctl .exl-btn{min-height:44px;min-width:0;margin:0;padding:0 12px;font-size:14.5px}
.exl-ct-ang{font-weight:700;font-size:15px;padding:4px 10px;border-radius:10px;background:#3c3528}
.exl-ct-ang b{font-size:19px;margin-left:4px}
.exl-ct-ang.ok{background:#1f5a3c;color:#eafff2}
.exl-ct-ang.ng{background:#7a2a14;color:#fff}
.exl-ct-tray .exl-tm-card svg{height:40px;width:auto;max-width:100px}
/* 図 */
.exl-ct-wall{fill:#e9e3d4}
.exl-ct-desk{fill:#c9a36b}
.exl-ct-board-r{fill:#d8b77a;stroke:#8a6a3a;stroke-width:1.5}
.exl-ct-board-t{stroke:#6b4f26;stroke-width:3}
.exl-ct-stop{fill:#5a5f66;stroke:#2c3035;stroke-width:1.5}
.exl-ct-block{fill:#b0703a;stroke:#6b3f18;stroke-width:1.5}
.exl-ct-lab{font-size:15px;font-weight:700;fill:#3a2a14;paint-order:stroke;stroke:#fff8e6;stroke-width:3px}
.exl-ct-lab.w{fill:#fff;stroke:none}
.exl-ct-lab.s{font-size:12.5px}
.exl-ct-cbody{fill:#d0473a;stroke:#7a1f16;stroke-width:1.5}
.exl-ct-bump{fill:#333}
.exl-ct-cstripe{fill:#f1d2cc}
.exl-ct-wheel{fill:#2d2f33;stroke:#111;stroke-width:1.5}
.exl-ct-hub{fill:#b9bec4}
.exl-ct-hook{fill:none;stroke:#555;stroke-width:2.2}
.exl-ct-tbase{fill:#9aa0a6;stroke:#555}
.exl-ct-tbody{fill:#2f5f9e;stroke:#1d3c66;stroke-width:1.5}
.exl-ct-tape{stroke:#fbf8ee;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 1px #8a7a5a)}
.exl-ct-tape.gone{opacity:.45}
.exl-ct-tapeend{fill:#fbf8ee;stroke:#a99c78}
.exl-ct-tapehit{stroke:rgba(0,0,0,.001)!important;pointer-events:stroke;cursor:pointer}
.exl-ct-shook{stroke:#555;stroke-width:2.4}
.exl-ct-sbody{fill:#e8eef2;stroke:#5a6772;stroke-width:1.6}
.exl-ct-swin{fill:#fff}
.exl-ct-spring{fill:none;stroke:#8a96a0;stroke-width:1.4}
.exl-ct-sring{fill:none;stroke:#5a6772;stroke-width:3}
.exl-ct-guide{stroke:#1f8a4c;stroke-width:3;stroke-dasharray:8 6}
.exl-ct-hand rect{fill:#f2c9a0;stroke:#9a6a3e;stroke-width:1.2}
.exl-ct-hand.dock rect{fill:#f7d6b4}
.exl-ct-mark{stroke:#1f5a9e;stroke-width:3}
.exl-ct-zone{stroke:#e0a020;stroke-width:6;stroke-dasharray:6 5;stroke-linecap:round}
.exl-ct-gauge{pointer-events:none}
.exl-ct-garc{fill:none;stroke:#555;stroke-width:2}
.exl-ct-gband{fill:none;stroke:#2bb36a;stroke-width:12;opacity:.8}
.exl-ct-gtk{stroke:#555;stroke-width:1.5}
.exl-ct-gtx{font-size:13px;fill:#3a2a14;font-weight:700}
.exl-ct-gneedle{stroke:#d0302a;stroke-width:2.5}
.exl-ct-gval{font-size:20px;font-weight:700;fill:#b0281c;paint-order:stroke;stroke:#fff;stroke-width:4px}
.exl-ct-inbox{fill:#eef1f3;stroke:#8a9198;stroke-width:2}
.exl-ct-gap rect{fill:rgba(255,255,255,.6);stroke:#8a9198;stroke-dasharray:4 3;cursor:pointer}
.exl-ct-gap{cursor:pointer}
/* 目盛りを読む */
.exl-view[data-v="read"]{background:#2a2825;padding:8px}
.exl-ct-readw{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.exl-ct-big{width:150px;height:min(52vh,380px);height:min(52dvh,380px)}
.exl-ct-readq{flex:1 1 220px;max-width:420px}
.exl-ct-swin2{fill:#fff;stroke:#9aa5ae}
.exl-ct-stk{stroke:#333;stroke-width:1.2}
.exl-ct-snum{font-size:15px;font-weight:700;fill:#222}
.exl-ct-snum.s{font-size:13px}
.exl-ct-sptr{fill:#d0302a}
.exl-ct-sptl{stroke:#d0302a;stroke-width:2.5}
.exl-ct-slab{font-size:15px;font-weight:700;fill:#f3e3b8}
.exl-ct-scales{display:flex;justify-content:center;gap:6px;background:#1d1f20;border-radius:12px;padding:6px}
.exl-ct-scales .exl-ct-big{width:min(23%,130px);height:auto;max-height:290px}
.exl-ct-ftbl td,.exl-ct-ftbl th{text-align:center}
/* 線を引く */
.exl-view[data-v="lines"]{background:#2a2825}
.exl.is-full .exl-view[data-v="lines"],.exl.is-full .exl-view[data-v="read"]{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.exl-ct-ln{padding:8px;display:flex;flex-direction:column;gap:6px}
.exl-ct-lq{margin:0}
.exl-ct-blank{margin:0 0 8px;padding:6px 10px;border-radius:8px;background:#fff6dc;color:#2a2416;font-weight:700;font-size:15px;line-height:1.6}
.exl-ct-blank b{display:inline-block;min-width:2.2em;text-align:center;border-bottom:2px solid #7a5418;color:#b0281c}
.exl-ct-blank.done{margin:0;background:#1f5a3c;color:#eafff2}
.exl-ct-blank.done b{color:#ffe7a8;border-color:#ffe7a8}
.exl-ct-inst{margin:0;color:#fff;font-size:15px;line-height:1.5}
.exl-ct-inst b{color:#ffe7a8}
.exl-ct-tv.tapping{box-shadow:0 0 0 3px #ffd75e;cursor:pointer}
.exl-tm-tv-r.unused{fill:#efe9da;opacity:.75}
.exl-ct-cutl{stroke:#d0302a;stroke-width:2.2}
.exl-ct-l0{font-size:13px;font-weight:700;fill:#d0302a}
.exl-ct-secn{font-size:15px;font-weight:700;fill:#1f4a8a}
.exl-ct-cnt{font-size:10.5px;font-weight:700;fill:#1f6a3c}
.exl-ct-cnt.hint{fill:#b06a00}
.exl-ct-rest{margin:0;color:#e8dcc0;font-size:13.5px}
.exl-ct-cutb{font-size:17px;min-height:50px}
/* 方眼紙 */
.exl-ct-gw{background:#fbf6e8;border-radius:12px;padding:6px}
.exl-ct-gpair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.exl-ct-gtitle{margin:0 0 2px;font-weight:700;font-size:14px;color:#3a2a14}
.exl-ct-graph{display:block;width:100%;height:auto;max-height:min(62vh,520px);max-height:min(62dvh,520px)}
.exl-ct-grid{stroke:#bfe0c8;stroke-width:.8}
.exl-ct-grid.b{stroke:#8cc49e;stroke-width:1.1}
.exl-ct-axis{stroke:#333;stroke-width:1.6}
.exl-ct-gax{font-size:11px;fill:#444}
.exl-ct-gt{font-size:11.5px;font-weight:700;fill:#2a2416}
.exl-ct-piece{fill:#fffdf6;stroke:#a99c78;stroke-width:1}
.exl-ct-piece.t1{fill:#dce9fb;stroke:#3a6fb8}
.exl-ct-piece.t2{fill:#fbdcd6;stroke:#c0392b}
.exl-ct-piece.new{animation:exl-ct-pop .38s ease-out}
@keyframes exl-ct-pop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.exl-ct-tops{fill:none;stroke:#d0302a;stroke-width:2.2}
.exl-ct-tops.t1,.exl-ct-dcurve.t1,.exl-ct-ml.t1{stroke:#2f6bc0}
.exl-ct-tops.t2,.exl-ct-dcurve.t2,.exl-ct-ml.t2{stroke:#d0302a}
.exl-ct-topd{fill:#d0302a}
.exl-ct-topd.t1{fill:#2f6bc0}
.exl-ct-dcurve{fill:none;stroke-width:2.2}
/* 表 */
.exl-ct-tblw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.exl-ct-tbl{border-collapse:collapse;background:#fbf6e8;font-size:13.5px;line-height:1.35;min-width:100%}
.exl-ct-tbl th,.exl-ct-tbl td{border:1px solid #d9caa2;padding:4px 6px;text-align:center;white-space:nowrap;color:#2a2416}
.exl-ct-tbl thead th{background:#3a3428;color:#f3e3b8}
.exl-ct-tbl tbody th{background:#efe6cc;text-align:left;font-size:12.5px;position:sticky;left:0;z-index:1}
.exl-ct-tbl tbody th small{font-weight:400}
.exl-ct-tbl td.new{background:#fff2c2;animation:exl-ct-flash .6s ease-out}
.exl-ct-tbl td.na{background:#e9e2cf}
.exl-ct-tbl tr.diff td{color:#1f5a3c;font-weight:700;background:#eaf6ee}
@keyframes exl-ct-flash{from{background:#ffd75e}}
.exl-ct-sum{margin-top:8px}
.exl-ct-dist{margin-top:8px}
.exl-ct-dist>.exl-btn{min-height:42px;font-size:14px}
.exl-ct-distw{margin-top:6px;background:#fbf6e8;border-radius:12px;padding:8px}
.exl-ct-dnote{margin:4px 0 0;color:#2a2416;font-size:14px;line-height:1.55}
/* 考察のグラフのカード */
.exl-ct-mgs .exl-th-opt{flex:1 1 calc(50% - 8px);padding:4px}
.exl-ct-mg{width:100%;max-width:170px;height:auto;display:block;margin:0 auto}
.exl-ct-mgt{font-size:9px;fill:#444}
.exl-ct-ml{fill:none;stroke-width:3}
.exl-ct-sumg{display:flex;justify-content:center}
.exl-ct-mgw{text-align:center;font-size:13px;font-weight:700}
@media (max-width:640px){
  .exl-ct-ctl{gap:4px;padding:4px 6px}
  .exl-ct-ctl .exl-btn{padding:0 8px;font-size:13px}
  .exl-ct-ang{font-size:13px;padding:2px 6px}
  .exl-ct-gpair{grid-template-columns:1fr}
  .exl-ct-tbl{font-size:12px}
  .exl-ct-big{width:120px}
  .exl-ct-blank{font-size:14px}
}
@media (max-height:520px){
  .exl-ct-svg{max-height:calc(var(--exl-sh, 100dvh) - 56px)}
  .exl-ct-bench.tray .exl-ct-svg{max-height:calc(var(--exl-sh, 100dvh) - 112px)}
  .exl-ct-ctl .exl-btn{min-height:36px}
}
.exl-ct-gw{max-width:620px;margin:0 auto;width:100%;box-sizing:border-box}
.exl-ct-gpair .exl-ct-gw{max-width:none}
.exl-ct-distw .exl-ct-graph{max-width:560px;margin:0 auto}
.exl-ct-gt .lg1{fill:#2f6bc0}.exl-ct-gt .lg2{fill:#d0302a}
.exl-ct-mgw i{font-style:normal;font-size:12px}.exl-ct-mgw i.t1{color:#2f6bc0}.exl-ct-mgw i.t2{color:#d0302a}
/* 横向きのスマホ：傾きの操作と器具の一覧は右に置く（下に置くと、図が小さくなる） */
@media (max-height:520px) and (min-aspect-ratio:4/3){
  .exl-ct-bench.side{display:grid;grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:auto auto 1fr;grid-template-areas:"hz hz" "board ctl" "board tray"}
  .exl-ct-bench.side .exl-ct-hz{grid-area:hz}
  .exl-ct-bench.side .exl-ct-board{grid-area:board;min-width:0}
  .exl-ct-bench.side .exl-ct-ctl{grid-area:ctl;flex-direction:column;align-items:stretch;gap:4px}
  .exl-ct-bench.side .exl-ct-ctl .exl-btn{min-height:38px}
  .exl-ct-bench.side .exl-ct-tray{grid-area:tray;flex-direction:column;align-items:stretch;min-height:0}
  .exl-ct-bench.side .exl-tm-cards{flex-direction:column;overflow-y:auto;overflow-x:hidden;max-height:calc(var(--exl-sh, 100dvh) - 70px)}
  .exl-ct-bench.side .exl-ct-svg,.exl-ct-bench.side.tray .exl-ct-svg{max-height:calc(var(--exl-sh, 100dvh) - 54px)}
}
/* 「✋ 手をはなす」（Ver.0.11.4）：図の左上（斜面は右上がりなので、左上はあいている） */
.exl-ct-relb{position:absolute;left:14px;top:14px;min-height:50px;padding:0 22px;font-size:17px;z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.exl-ct-relb[hidden]{display:none}