/* 鉛直投げ上げのページ専用。共通の部品は style.css を使い、ここには、このページだけのものを書く */
.en-sim, #read { --c-yline: #1c2333; --c-vline: #1f5fd6; --c-a: #c2410c; --c-q: #6d28d9; }

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

.en-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.en-presets .btn { font-size: 0.86rem; line-height: 1.3; padding: 6px 4px; }
.en-presets .btn[aria-pressed="true"], .en-dir .btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.en-dir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.en-dir .btn { font-size: 0.9rem; padding: 6px 4px; }
.en-kind { font-size: 0.82rem; font-weight: 700; color: var(--blue-dark); margin: 0; text-align: right; }

.en-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.en-small { font-size: 0.84rem; color: var(--muted); }
#q-row[hidden], #q-box[hidden] { display: none; }

/* 図の中 */
.en-title { font-size: 12.5px; font-weight: 700; fill: var(--text); }
.en-grid { stroke: #e8edf5; stroke-width: 1; }
.en-grid-strong { stroke: #d3dbe8; }
.en-zero { stroke: #3b4457; stroke-width: 1.5; }
.en-tick { font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.en-axis-name { font-size: 11.5px; fill: var(--text); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.en-note { font-size: 11.5px; font-weight: 700; fill: #9a3412; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.en-ground { stroke: #3b4457; stroke-width: 2.5; }
.en-ground-fill { fill: #eef1f6; }
.en-ground-line { stroke: #9a3412; stroke-width: 1.5; }
.en-bld { fill: #eef1f6; stroke: #c3cbd9; }
.en-rail { stroke: #c3cbd9; stroke-width: 1; stroke-dasharray: 3 4; }
.en-mark { fill: #fff; stroke: #1c2333; stroke-width: 1.3; }
.en-yline { fill: none; stroke: var(--c-yline); stroke-width: 2.8; stroke-linejoin: round; }
.en-vline { fill: none; stroke: var(--c-vline); stroke-width: 3.2; }
.en-ghost { fill: none; stroke: #8a93a6; stroke-width: 2; stroke-dasharray: 6 4; }
.en-area { stroke: none; }
.en-area-label { font-size: 12px; font-weight: 700; fill: #174aa8; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; }
.en-area-label-d { fill: #9a3412; }
.en-slope { stroke: #15803d; stroke-width: 2; stroke-dasharray: 2 3; }
.en-slope-label { font-size: 11.5px; font-weight: 700; fill: #15803d; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.en-cursor { stroke: #7a8499; stroke-width: 1.2; }
.en-link { stroke: #7a8499; stroke-width: 1; stroke-dasharray: 2 3; }
.en-pt-y { fill: #1c2333; stroke: #fff; stroke-width: 2; }
.en-pt-v { fill: var(--c-vline); stroke: #fff; stroke-width: 2; }
.en-top-pt { fill: #fff; stroke: #9a3412; stroke-width: 2; }
.en-ball { fill: #1f5fd6; stroke: #0d2f73; stroke-width: 2; }
.en-arrow { stroke-width: 3.5; }
.en-arrow.en-c-v { stroke: var(--c-vline); }
.en-arrow.en-c-a { stroke: var(--c-a); stroke-dasharray: 5 3; stroke-width: 3; }
.en-head.en-c-v { fill: var(--c-vline); }
.en-head.en-c-a { fill: var(--c-a); }
.en-lab { font-size: 12.5px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.en-lab-v { fill: var(--c-vline); }
.en-lab-a { fill: var(--c-a); }
.en-q { stroke: var(--c-q); stroke-width: 1.6; stroke-dasharray: 8 3 2 3; }
.en-q-pt { fill: #fff; stroke: var(--c-q); stroke-width: 2.2; }
.en-q-guide { stroke: var(--c-q); stroke-width: 1; stroke-dasharray: 2 3; }

/* 凡例 */
.lg-en-y { stroke: #1c2333; stroke-width: 2.8; }
.lg-en-v { stroke: #1f5fd6; stroke-width: 3.2; }
.lg-en-a { stroke: #c2410c; stroke-width: 3; stroke-dasharray: 5 3; }
.lg-en-q { stroke: #6d28d9; stroke-width: 2; stroke-dasharray: 8 3 2 3; }
.lg-en-up { fill: #e6eefc; stroke: #1f5fd6; }
.lg-en-down { fill: #fdf0e6; stroke: #c2410c; stroke-dasharray: 3 2; }

/* グラフを読む練習 */
.en-read-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px 18px; align-items: start; }
.en-read-form label { display: block; font-size: 0.92rem; margin: 8px 0 2px; }
.en-read-form input { width: 6em; font: inherit; padding: 4px 6px; border: 1px solid #aeb8cc; border-radius: 6px; min-height: 40px; }
.en-read-mark { display: inline-block; margin-left: 6px; font-size: 0.86rem; font-weight: 700; }
.en-read-mark.ok { color: #15803d; }
.en-read-mark.ng { color: #9a3412; }
#read-result { font-size: 0.92rem; margin: 8px 0 0; }

@media (max-width: 860px) {
  .en-read-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .en-readouts { grid-template-columns: 1fr; }
  .en-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}