.train-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.train-isoflop img { max-width: 600px; margin: 0 auto; }
.packing-example table { min-width: 540px; }
.packing-example caption { text-align: left; color: var(--navy); font-weight: 600; margin-bottom: 10px; }
.packing-matrix td { text-align: center; }
.hd-body table.packing-matrix th { text-transform: none; }
.packing-matrix td.pack-allow { background: #dceee6; color: #15543d; font-weight: 700; }
.packing-matrix td.pack-block { background: #f3f4f6; color: #677485; }
.packing-example .pack-ignore { color: #8b3548; background: #fcecef; }
.train-planner { padding: 20px; box-sizing: border-box; }
.train-planner h4 { margin-top: 0; font-size: 17px; color: var(--navy); }
.train-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.train-controls label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.train-controls input { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: white; padding: 8px; border: 1px solid #8798ad; border-radius: 4px; }
.train-controls input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#plan-result { border-top: 1px solid var(--rule); padding-top: 12px; font-variant-numeric: tabular-nums; }
#plan-result dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 15px; }
#plan-result dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.train-small { font-size: 13px; color: var(--muted); }
.bonus-note > summary { color: var(--navy); }
@media (max-width: 480px) { .train-controls, #plan-result dl { grid-template-columns: 1fr; } }
@media print { .train-planner { display: none; } .train-figure { break-inside: avoid; } details.ans.bonus-note > summary { display: block; font-weight: 700; } }