#option-canvas { height: calc(680px + 5.25rem); width: 100%; }
#option-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; padding: 1rem; }
.option-key { border: 0; border-left: 4px solid var(--contract-color); background: #f8fafc; color: var(--fg); padding: .5rem; font-family: inherit; font-size: .8rem; min-width: 0; text-align: left; cursor: pointer; }
.option-key.selected { background: #e8f4ef; box-shadow: inset 0 0 0 2px var(--accent); }
.option-key:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.option-key strong { display: block; overflow-wrap: anywhere; }
#option-fit { padding: .5rem .8rem; cursor: pointer; }
#option-status.error { color: var(--danger); }
.option-shift-controls { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
.option-shift-controls button { min-width: 2.1rem; padding: .6rem .4rem; }
@media (max-width: 900px) {
  #option-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #option-canvas { height: calc(680px + 13.125rem); }
}
@media (max-width: 600px) { #option-canvas { height: calc(520px + 13.125rem); } .chart-header { align-items: start; flex-direction: column; } }