#machine-trip-calculator { box-sizing: border-box; width: 100%; max-width: 640px; margin: 1.5rem auto; padding: clamp(12px, 4vw, 24px); border: 1px solid #1b563e; border-radius: 12px; color: #23352b; background: #f5faf7; font-family: system-ui, Arial, sans-serif; overflow-wrap: anywhere; }
#machine-trip-calculator * { box-sizing: border-box; min-width: 0; }
#machine-trip-calculator label { display: block; min-height: 44px; margin-top: 1rem; font-weight: 600; }
#machine-trip-calculator input[type="text"], #machine-trip-calculator select { display: block; width: 100%; max-width: 100%; min-height: 44px; margin-top: .35rem; padding: .6rem; border: 1px solid #66776e; border-radius: 6px; background: #fff; color: #23352b; font: inherit; }
#machine-trip-calculator button { width: 100%; min-height: 44px; margin-top: 1rem; padding: .7rem; border: 2px solid #1b563e; border-radius: 6px; color: #fff; background: #1b563e; font: inherit; font-weight: 600; white-space: normal; cursor: pointer; }
#machine-trip-calculator button:disabled { opacity: .6; cursor: default; }
#machine-trip-calculator :focus-visible { outline: 3px solid #8a5500; outline-offset: 3px; }
#machine-trip-calculator [aria-invalid="true"] { border: 2px solid #9b2525; }
#machine-trip-calculator #mt-status { min-height: 1.5em; }
#machine-trip-calculator #mt-result { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid #1b563e; }
#machine-trip-calculator output { display: block; font-weight: 600; overflow-wrap: anywhere; }
#machine-trip-calculator [hidden] { display: none; }