/* 化学平衡の移動のページ専用。共通の部品は style.css を使い、ここには、このページだけのものを書く */
.khe-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.khe-tabs .btn { line-height: 1.3; padding: 8px 4px; min-height: 44px; }
.khe-tabs .btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.khe-eq { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-size: 0.92rem; line-height: 1.7; overflow-wrap: anywhere; }
.khe-eq b { font-size: 1.05rem; }
.khe-eq .khe-note { color: var(--muted); font-size: 0.82rem; }

.khe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px 18px; align-items: start; }
.khe-stage { min-width: 0; }
.khe-side { min-width: 0; }
#box-wrap { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
#box { display: block; width: 100%; height: 250px; }
.khe-mols { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.khe-mols span.khe-mol { display: inline-flex; align-items: center; gap: 4px; }
.khe-mols svg { flex: none; }
.khe-status { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--blue); background: var(--bg-soft); border-radius: 0 8px 8px 0; font-size: 0.92rem; line-height: 1.7; min-height: 5.1em; }
.khe-note-model { margin: 4px 0 8px; font-size: 0.82rem; color: var(--muted); }

.khe-graph { margin-top: 8px; }
.khe-graph svg { display: block; width: 100%; }
#g-conc { height: 260px; }
#g-rate { height: 170px; }
.khe-oplog { display: flex; flex-wrap: wrap; gap: 2px 12px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.84rem; color: var(--muted); }
.khe-oplog li { margin: 0; }
.khe-oplog b { color: var(--text); }

.khe-side .ctrl-group { margin-bottom: 10px; }
.khe-out { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin: 0 0 6px; font-size: 0.88rem; font-weight: 700; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.khe-out span { min-width: 0; }
.khe-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.khe-btns .btn { line-height: 1.3; font-size: 0.86rem; padding: 6px 4px; min-height: 42px; }
.khe-btns .btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.khe-btns.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.khe-btns.one { grid-template-columns: minmax(0, 1fr); }
.khe-mt { margin-top: 6px; }
.khe-sp { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; margin: 0 0 6px; }
.khe-sp b { font-size: 0.92rem; }
.khe-sp .btn { line-height: 1.25; font-size: 0.84rem; padding: 4px 2px; min-height: 42px; }
.khe-msg { margin: 0 0 8px; font-size: 0.84rem; color: #9a3412; min-height: 1.3em; }

.khe-readouts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; margin-top: 12px; }
.khe-dir { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; color: var(--blue-dark); }
.khe-dir .arrow { display: inline-block; min-width: 1.4em; }
.khe-qk-line { margin: 2px 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.khe-qk-line b { color: var(--blue-dark); }
#qk { display: block; width: 100%; height: 86px; margin: 4px 0; }
.khe-table { font-size: 0.86rem; }
.khe-table td { font-weight: 600; white-space: nowrap; }
.khe-table thead th { line-height: 1.25; }
.khe-table td.is-pending { color: var(--muted); font-weight: 500; }
.khe-table tr.is-sum th, .khe-table tr.is-sum td { color: var(--muted); font-weight: 500; }
.khe-check { margin: 8px 0 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.khe-tint { margin: 8px 0 0; font-size: 0.86rem; }
.khe-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.khe-chip { border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px; text-align: center; line-height: 1.3; background: #fff; }
.khe-chip .sw { display: block; height: 22px; border-radius: 4px; border: 1px solid var(--line); margin-bottom: 2px; }
.khe-chip .lab { display: block; font-size: 0.76rem; color: var(--muted); }
.khe-chip .val { display: block; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.84rem; }

/* グラフの中 */
.khe-gtitle { font-size: 12px; font-weight: 700; fill: var(--text); }
.khe-gridline { stroke: #e8edf5; stroke-width: 1; }
.khe-axis { stroke: #3b4457; stroke-width: 1.5; }
.khe-tick { font-size: 11.5px; fill: var(--muted); }
.khe-axis-name { font-size: 11.5px; fill: var(--text); }
.khe-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.khe-line-ref { fill: none; stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0.75; }
.khe-end { font-size: 12px; font-weight: 700; }
.khe-opline { stroke: #7a8499; stroke-width: 1; stroke-dasharray: 3 3; }
.khe-opnum { font-size: 12px; font-weight: 700; fill: #3b4457; }
.khe-pt-after { fill: #fff; stroke-width: 2; }
.khe-qk-axis { stroke: #3b4457; stroke-width: 2; }
.khe-qk-text { font-size: 12px; fill: var(--muted); }
.khe-qk-k { font-size: 12.5px; font-weight: 700; fill: var(--text); }
.khe-qk-q { font-size: 12.5px; font-weight: 700; fill: var(--blue-dark); }

/* 本文 */
.khe-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.khe-step { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg-soft); text-align: center; min-width: 0; }
.khe-step b { display: block; font-size: 0.86rem; }
.khe-step .sw { display: block; height: 30px; border-radius: 6px; border: 1px solid var(--line); margin: 4px 0; }
.khe-step .sw-1 { background: rgba(146,72,12,0.275); }
.khe-step .sw-2 { background: rgba(146,72,12,0.55); }
.khe-step .sw-3 { background: rgba(146,72,12,0.429); }
.khe-step .v { font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 700; }
.khe-drill-q { font-weight: 700; }
.khe-drill-btns { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0; }
.khe-drill-btns .btn { font-size: 0.92rem; }
.khe-drill-res { min-height: 3em; font-size: 0.94rem; line-height: 1.7; }

@media (max-width: 860px) {
  /* スマホでは、容器 → 説明 → 操作 → グラフの順にする。操作するあいだ容器の図が見えるように上に留める */
  .khe-layout { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .khe-stage { display: contents; }
  .khe-side { order: 1; margin-top: 4px; }
  .khe-after { order: 2; }
  .khe-readouts { grid-template-columns: minmax(0, 1fr); }
  #box { height: 200px; }
}
@media (max-width: 860px) and (min-height: 560px) {
  #box-wrap { position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 6px rgba(28, 35, 51, 0.18); }
}
@media (max-width: 360px) {
  .khe-readouts .readout-box { padding: 8px 6px; }
  .khe-table { font-size: 0.72rem; }
  .khe-table th, .khe-table td { padding: 2px 2px; }
}
@media (min-width: 361px) and (max-width: 480px) {
  .khe-tabs .btn { font-size: 0.8rem; }
  .khe-table { font-size: 0.8rem; }
  .khe-table th, .khe-table td { padding: 3px 3px; }
  #g-conc { height: 230px; }
  .khe-steps { gap: 4px; }
  .khe-step { padding: 6px 4px; }
}