/* Keep form values legible in narrow panels, tables and mobile layouts. */
form, form label, .form-grid > *, .mini-form > * { min-width: 0; }
form label { overflow-wrap: anywhere; }
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]),
form select { min-height: 42px; line-height: 1.4; font-weight: 400; box-sizing: border-box; }
form select:not([multiple]) { padding-right: 30px; }
form textarea { box-sizing: border-box; min-height: 90px; max-width: 100%; line-height: 1.5; font-weight: 400; }
.mini-fields label { width: auto; flex: 1 1 180px; }
.filters { flex-wrap: wrap; }
.filters > label { flex: 1 1 180px; }
.filters > input, .filters > select { flex: 1 1 180px; width: auto; min-width: 0; }
.form-value-readable { display: block; margin-top: 5px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; font-weight: 500; color: #344b43; }
.form-value-readable[hidden] { display: none; }
.form-readable-wrapper { display: grid; min-width: 0; max-width: 100%; align-content: start; }
@media (min-width: 701px) and (max-width: 1200px) {
    .form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .form-grid.compact { grid-template-columns: minmax(0, 1fr); }
    .form-grid.compact > .span-2 { grid-column: 1 / -1; }
    form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), form select, form textarea { font-size: 16px; }
    .mini-fields label { max-width: 100%; }
}