* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #000; font: 12px Verdana, Arial, sans-serif; }
main { width: min(100%, 570px); padding: 20px 12px 24px; }
.logo { display: block; width: 144px; height: auto; margin: 0 0 30px; }
.calculator { padding: 0 0 0 10px; }
.calculator .logo { width: 143px; margin-bottom: 17px; } /* Vanhan kuvarivin 2 px + 15 px väli. */
.calculator > fieldset { margin: 0 2px; padding: 3.5px 7.5px 6.25px; }
.calculator legend { font-size: 10px; }
.calculator form { margin: 10px; }
.calculator button[type=submit] { margin-top: 0; padding: 2px 12px; font-size: 10px; line-height: 10px; }
.calculator .result-details { margin: 10px; gap: 0; line-height: 20px; }
.calculator .results .button { margin: 0 10px 10px; }
.calculator > .terms { margin: 2px 5px 0; font-size: 10px; }
fieldset { margin: 0; border: 2px groove #ddd; padding: 12px 17px 16px; min-width: 0; }
legend { font-size: 11px; font-weight: bold; padding: 0 2px; }
.form-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; min-height: 20px; }
label { line-height: 20px; }
input, select { border: 1px solid #b11116; border-radius: 0; background: #fff; color: #000; height: 16px; padding: 0 3px; font: 11px Verdana, Arial, sans-serif; }
input { width: 86px; }
select { width: 80px; }
.weight-input { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
button, .button { display: inline-block; background: #b11116; border: 1px outset #c99; border-radius: 0; color: #fff; padding: 1px 12px; font: 11px Verdana, Arial, sans-serif; text-decoration: none; cursor: pointer; }
button[type=submit] { margin-top: 4px; }
.terms { display: inline-block; margin: 2px 3px 0; color: #000; font-size: 11px; font-weight: bold; text-decoration: none; }
.terms:hover { text-decoration: underline; }
.results { margin-top: 12px; }
.transport-terms { margin-top: 15px; line-height: 1.5; }
.transport-terms ul { margin: 8px 0 16px; padding-left: 24px; }
.result-details { display: grid; grid-template-columns: 200px 1fr; gap: 5px 0; margin: 2px 0 12px; line-height: 1.5; }
dt, dd { margin: 0; }
.error { color: #b11116; line-height: 1.5; }
:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
@media (max-width: 480px) {
    .form-row { grid-template-columns: 135px 1fr; }
    .result-details { grid-template-columns: 135px 1fr; }
    fieldset { padding: 10px; }
    .weight-input { flex-wrap: wrap; white-space: normal; padding: 2px 0; }
}
@media (max-width: 320px) {
    .form-row, .result-details { grid-template-columns: 1fr; gap: 3px; }
    .form-row { margin-bottom: 8px; }
    dd { margin-bottom: 8px; }
}
@media print {
    main { width: 100%; max-width: 700px; }
    button, .button { display: none; }
    .transport-terms { break-inside: auto; }
    .transport-terms li { break-inside: avoid; }
}