/* 探求できる説明（trials.mjs）。動かせる数字（.tg-adj）と計算結果（.tg-out / .tg-word）を見た目で分ける。
   色はレポートの共通トークン（--accent / --surface / --grid …）を使う。 */
.explorable{--tg-acc:var(--accent,#184f95);--tg-acc-bg:var(--filter-bg,#f0f3f7);--tg-out:var(--ink,#0b0b0b);--tg-flash:#fff3c4;--tg-mute:var(--sec,#52514e);--tg-line:var(--grid,#e1e0d9);
 margin:24px 0;padding:16px 0;border-top:1px solid var(--tg-line);border-bottom:1px solid var(--tg-line);scroll-margin-top:150px;font-size:.95rem;line-height:2}
.explorable h3{margin:0 0 6px;font-size:1.05rem;line-height:1.6}
.ota-ui .explorable>h3:first-child{margin-top:0}
.explorable p{margin:6px 0}
.tg-legend{font-size:.76rem;line-height:1.9;color:var(--tg-mute)}
.tg-adj{position:relative;display:inline-block;padding:0 .35em;margin:0 .1em;border-radius:6px;background:var(--tg-acc-bg);color:var(--tg-acc);
 font-weight:700;font-variant-numeric:tabular-nums;border-bottom:2px dotted var(--tg-acc);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.tg-adj::before{content:"↔";font-size:.7em;margin-right:.25em;opacity:.7}
.tg-adj:hover,.tg-adj:focus-visible,.tg-adj.is-dragging{background:var(--tg-acc);color:#fff;border-bottom-style:solid}
.tg-adj:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--tg-acc) 40%,transparent)}
.tg-adj::after{content:"← ドラッグ →";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);white-space:nowrap;font-size:.7rem;font-weight:400;line-height:1.4;
 padding:1px 8px;border-radius:4px;background:var(--tg-acc);color:#fff;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2}
.tg-adj:hover::after,.tg-adj:focus-visible::after,.tg-adj.is-dragging::after{opacity:1}
.tg-adj.is-changed{border-bottom-style:solid}
.tg-adj.is-changed::after{content:"基準 " attr(data-base-label) " から変更"}
.tg-adj.tg-sample{cursor:default;pointer-events:none}
.tg-out,.tg-word{font-weight:700;color:var(--tg-out);font-variant-numeric:tabular-nums;border-radius:4px;transition:background-color .9s}
.tg-out.is-flash{background:var(--tg-flash);transition:none}
.tg-ok{color:var(--e5,#1c5cab)}
.tg-late{color:var(--e1,#932427)}
.tg-reset{font:inherit;font-size:.8rem;padding:2px 12px;border:1px solid var(--tg-line);border-radius:999px;background:transparent;color:inherit;cursor:pointer}
.tg-note{font-size:.8rem;line-height:1.8;color:var(--tg-mute)}
.explorable details{font-size:.8rem;line-height:1.8;color:var(--tg-mute);margin-top:8px}
.explorable details summary{cursor:pointer}
@keyframes tg-pulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--tg-acc) 35%,transparent)}}
.explorable.is-intro .tg-adj:not(.tg-sample){animation:tg-pulse 1.1s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.explorable.is-intro .tg-adj{animation:none}}

/* 図の面（本文の図と同じ紙面） */
.tg-fig{background:var(--surface,#fcfcfb);border:1px solid var(--line,#c3c2b7);border-radius:6px;padding:14px 18px 6px;margin:12px 0;font-size:.9rem;line-height:1.8}
.tg-fig .sim-caption{font-size:.72rem;color:var(--sec,#52514e);margin:4px 0}
.tg-fig .tg-figtitle{font-size:.72rem;color:var(--sec,#52514e);margin:0 0 2px}
.tg-fig [data-fig=pickup]{padding-left:7.5em}
.tg-fig .oc-svg{display:block;width:100%;height:auto;overflow:visible}
.tg-fig .oc-ax{font-size:10px;fill:var(--muted,#898781)}
.tg-fig .oc-vl{font-size:13px;font-weight:600;fill:var(--ink,#0b0b0b)}
.tg-fig .oc-xl{font-size:12px;fill:var(--sec,#52514e)}
.trial-impact{border-top:1px solid var(--line,#c3c2b7);margin:14px 0 6px;padding-top:4px;font-size:.8rem;line-height:1.85}
.trial-impact>div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--grid,#e1e0d9)}
.trial-impact dt{font-weight:600}
.trial-impact dd{margin:0}

.pickup-axis{position:relative;margin:18px 0 32px}
.pickup-ruler{position:relative;height:1.35em;font-size:.72rem;color:var(--sec,#52514e)}
.pickup-ruler span{position:absolute;transform:translateX(-50%)}
.pickup-ruler span:first-child{transform:none}
.pickup-lanes{position:relative;padding-top:6px}
.pickup-lane{position:relative;height:30px;border-bottom:1px solid var(--grid,#e1e0d9)}
.pickup-track{position:absolute;inset:0}
.pickup-span{position:absolute;top:10px;height:9px;background:#e1e0d9}
.pickup-span.late{background:#f3c9c6}
.pickup-need{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--e1,#932427)}
.pickup-who{position:absolute;top:5px;font-size:.73rem;line-height:1.5;white-space:nowrap}
.pickup-who b{font-weight:600}
.pickup-who b.need{color:var(--e1,#932427);font-variant-numeric:tabular-nums}
.pickup-who b.ok{color:var(--accent,#184f95)}
.pickup-who b.late{color:var(--e1,#932427)}
.pickup-now{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--accent,#184f95)}
.pickup-now b{position:absolute;bottom:-18px;left:4px;font-size:.7rem;font-weight:600;color:var(--accent,#184f95);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:600px){
.tg-fig [data-fig=pickup]{padding-left:0}
.tg-fig .oc-vl{font-size:16px}.tg-fig .oc-xl{font-size:15px}.tg-fig .oc-ax{font-size:12px}
.trial-impact>div{grid-template-columns:1fr;gap:3px}
.pickup-lane{height:auto;padding:5px 0}
.pickup-track{position:relative;inset:auto;height:20px}
.pickup-who{position:static;display:block;left:auto!important;transform:none!important;font-size:.7rem;white-space:normal}
.pickup-now b{font-size:.66rem}
}
@media print{.pickup-now,.pickup-need{border-left-style:solid}}