/* ウェイト&バランス（wb.js）。パソコンは左に電卓・右に Z/F・T/O・L/D の3段、スマホは電卓が画面の下から出る */
.wb { --wb-ok: var(--vmc, #1d7a46); }
.wb-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.wb .card { padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow); }
.wb-h { margin: 0 0 10px; font-size: 1.05rem; }
.wb-h::before { content: ""; display: inline-block; width: 4px; height: 1.05em; margin-right: 8px; vertical-align: -.15em; border-radius: 2px; background: var(--accent); }
.wb-handle { display: none; }
.wb-handle, .wb-keys button, .wb-chip, .wb-pick button { -webkit-tap-highlight-color: transparent; }

/* 電卓 */
.wb-calc { position: sticky; top: 12px; }
.wb-disp { background: var(--field, var(--card)); border: 2px solid var(--field-line, var(--line)); border-radius: 10px; padding: 6px 12px; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* 上は小さく答え（＝のあとは計算した式）、下は大きく打っている式（＝のあとは答え） */
.wb-exp { min-height: 1.45em; font-size: 1rem; color: var(--muted); overflow-x: auto; white-space: nowrap; }
.wb-exp.bad { color: var(--imc, #b3261e); font-family: system-ui, sans-serif; font-weight: 700; }
.wb-res { font-size: 1.9rem; font-weight: 700; line-height: 1.25; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.wb-res::-webkit-scrollbar { display: none; }
.wb-chiprow { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 8px 0 2px; }
.wb-chip-hint { font-size: .8rem; color: var(--muted); }
.wb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 10px; border: 2px solid var(--accent); background: var(--card); color: var(--accent); font: 700 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: 0 2px 6px rgb(24 70 120 / .18); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wb-chip::before { content: "⠿"; color: var(--muted); font-size: 1rem; }
.wb-ghost { height: auto !important; position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; background: var(--card); box-shadow: 0 12px 24px rgb(24 70 120 / .35); cursor: grabbing; }
body.wb-dragging, body.wb-dragging * { cursor: grabbing !important; user-select: none; }
.wb-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
.wb-keys button { height: 46px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 600 1.15rem system-ui, sans-serif; box-shadow: 0 1px 0 var(--line); cursor: pointer; touch-action: manipulation; }
.wb-keys button:active { transform: translateY(1px); box-shadow: none; }
.wb-keys .op { background: var(--accent-soft); color: var(--accent); }
.wb-keys .cl { color: var(--imc, #b3261e); }
.wb-keys .eq { background: var(--btn, var(--accent)); color: var(--accent-text); border: 0; }
.wb-help { margin: 10px 0 0; }

/* Z/F・T/O・L/D の段 */
.wb-row { display: grid; grid-template-columns: 120px 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wb-nm { font-weight: 800; font-size: 1.2rem; line-height: 1.3; }
.wb-nm small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); }
.wb-slot { display: block; margin: 0; border: 2px dashed var(--field-line, var(--line)); border-radius: 10px; padding: 5px 10px; background: var(--card); transition: background .2s, border-color .2s; }
.wb-slot span { display: block; font-size: .74rem; color: var(--muted); }
.wb-slot input { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font: 700 1.2rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); outline: none; }
.wb-slot input::placeholder { font: 400 .9rem system-ui, sans-serif; color: var(--muted); opacity: .6; }
.wb-slot.filled { border-style: solid; }
.wb-slot:focus-within { border-color: var(--accent); }
.wb-slot.over { border-style: dashed; border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px rgb(26 98 194 / .15); }
.wb-slot.flash { animation: wb-flash .7s ease-out; }
@keyframes wb-flash { from { background: var(--accent-soft); border-color: var(--accent); } }
.wb-cols { display: none; }
.wb-cg { border-radius: 10px; padding: 5px 12px; min-height: 58px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.wb-cg span { display: block; font-size: .72rem; white-space: nowrap; }
.wb-cg b { font-weight: 400; font-size: .82rem; }
.wb-cg.on { background: color-mix(in srgb, var(--wb-ok) 10%, var(--card)); border-color: color-mix(in srgb, var(--wb-ok) 35%, var(--card)); color: var(--wb-ok); }
.wb-cg.on b { font: 800 1.35rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wb-actions { text-align: right; margin-top: 10px; }
.wb-actions button { font: inherit; font-size: .85rem; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }

/* どこに入れる？ */
.wb-pick { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(14 23 38 / .4); }
.wb-pick-box { width: min(420px, 100%); padding: 14px; border-radius: 16px; background: var(--card); border: 2px solid var(--accent); box-shadow: 0 10px 30px rgb(24 70 120 / .35); }
.wb-pick-box p { margin: 0 0 10px; font-weight: 700; }
.wb-pick-box p b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); }
.wb-pick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wb-pick-btns button { padding: 10px 6px; border-radius: 10px; border: 0; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.wb-pick-btns button:hover, .wb-pick-btns button:focus-visible { background: var(--accent); color: var(--accent-text); }
.wb-pick-cancel { display: block; width: 100%; margin-top: 8px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; cursor: pointer; }

@media (max-width: 899px) and (min-width: 641px) {
  .wb-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .wb-row { grid-template-columns: 1fr 1fr; }
  .wb-nm { grid-column: 1 / -1; }
  .wb-cg { grid-column: 1 / -1; min-height: 0; }
}

/* スマホ：電卓は画面の下に固定（ウェイト&バランスのタブのときだけ）、欄は上で縦に並べる */
@media (max-width: 640px) {
  body[data-tab="wb"] { padding-bottom: var(--wb-sheet-h, 0px); }
  .wb-grid { display: block; }
  .wb .wb-table { padding: 12px; }
  /* ウェイト&バランスのときは見出しの空を低くして、欄を電卓の上に収める */
  body[data-tab="wb"] header.wrap { padding-top: 16px; padding-bottom: 58px; }
  body[data-tab="wb"] header .lead { display: none; }
  body[data-tab="wb"] main.wrap { margin-top: -38px; }
  .tabs a { padding: 5px 12px; font-size: .82rem; }
  /* 電卓のキーを大きくした分、1段＝「名前・重量・モーメント・CG」の1行にまとめて、電卓の上に3段が収まるようにする */
  .wb-row { grid-template-columns: 2.7em minmax(0, 1fr) minmax(0, 1fr) 4.4em; gap: 5px; padding: 4px 0; }
  .wb-nm { font-size: .95rem; }
  .wb-nm small { display: none; }
  /* 欄の名前（重量・モーメント・CG）は各欄に書かず、上に1行だけ出す */
  .wb-cols { display: grid; grid-template-columns: 2.7em minmax(0, 1fr) minmax(0, 1fr) 4.4em; gap: 5px; font-size: .68rem; font-weight: 700; color: var(--muted); }
  .wb-cols span:last-child { text-align: right; padding-right: 6px; }
  .wb-slot { padding: 4px 7px; border-radius: 8px; }
  .wb-slot span, .wb-cg span { display: none; }
  .wb-slot input { font-size: 1rem; }
  .wb-cg { min-height: 0; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; border-radius: 8px; }
  .wb-cg:not(.on) b { display: none; }
  .wb-cg.on b { font-size: 1.02rem; }
  .wb-actions { margin-top: 6px; }
  .wb-actions button { padding: 2px 10px; font-size: .78rem; }
  .wb-calc { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; margin: 0; padding: 4px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-width: 1px 0 0; background: var(--bg); box-shadow: 0 -8px 24px rgb(24 70 120 / .2); }
  .wb-handle { display: block; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
  .wb-handle::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--field-line, var(--line)); }
  .wb-help, .wb-table .wb-h, .wb-chip-hint { display: none; }
  /* 電卓の見出し（「電卓（Normal）」「電卓（時間計算用）」）は取っ手の横に小さく出し、電卓の高さは変えない */
  .wb-calc .wb-h { position: absolute; top: 5px; left: 14px; margin: 0; font-size: .7rem; font-weight: 700; color: var(--muted); pointer-events: none; }
  .wb-calc .wb-h::before { width: 3px; margin-right: 5px; }
  /* 答えのチップは表示の左に並べて、電卓の高さを抑える */
  .wb-top { display: flex; flex-direction: row-reverse; align-items: stretch; gap: 8px; }
  .wb-disp { flex: 1; min-width: 0; padding: 2px 12px 0; }
  .wb-exp { min-height: 1.3em; font-size: .95rem; }
  .wb-res { font-size: 2.3rem; line-height: 1.2; }
  .wb-chiprow { min-height: 0; margin: 0; }
  .wb-chip { height: 100%; font-size: 1rem; }
  /* キーは iPhone の計算アプリくらい大きく丸く（2026-10-27 クロノコ指示）。背の低い画面では少し低くして、上の欄を残す */
  .wb-keys { gap: 9px; margin-top: 9px; }
  .wb-keys button { height: clamp(50px, 8.6dvh, 72px); border-radius: 999px; font-size: 1.75rem; font-weight: 500; }
  .wb-keys .op, .wb-keys .eq { font-size: 1.95rem; }
  .wb-calc.folded .wb-keys { display: none; }
  .wb-calc.folded .wb-exp { display: none; }
}