.cut-rows { display: grid; gap: 1rem; margin-block: 1rem; }
.cut-row { display: grid; grid-template-columns: minmax(8rem, 1.5fr) minmax(7rem, 1fr) minmax(5rem, .65fr) auto; align-items: end; gap: .8rem; border-bottom: 1px solid var(--line, #314445); padding-block: .4rem 1rem; min-width: 0; }
.cut-row .workbench-field { min-width: 0; }
.cut-row .button { margin-bottom: 0; min-height: 44px; }
.cut-bar-card { margin-block: 1.2rem; border: 1px solid var(--line, #314445); border-radius: .75rem; padding: 1rem; break-inside: avoid; }
.cut-bar-card h3 { font-size: 1.2rem; margin: 0 0 .6rem; }
.cut-bar-card p { overflow-wrap: anywhere; }
.cut-bar-visual { display: flex; height: 2rem; background: #223039; border: 1px solid #91a4a4; border-radius: .25rem; overflow: hidden; margin-block: 1rem; }
.cut-bar-piece { background: #50ccb9; box-shadow: inset -1px 0 #153b36; box-sizing: border-box; flex-shrink: 0; min-width: 0; }
.cut-bar-piece:nth-child(4n + 1) { background: #83e4d2; }
.cut-bar-kerf { background: #f4c36a; flex-shrink: 0; }
.cut-legend { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; font-size: .9rem; }
.cut-legend span::before { content: ''; display: inline-block; width: .8rem; height: .8rem; margin-inline-end: .4rem; vertical-align: baseline; border: 1px solid #91a4a4; }
.cut-legend-piece::before { background: #50ccb9; }
.cut-legend-kerf::before { background: #f4c36a; }
.cut-legend-offcut::before { background: #223039; }
.cut-bar-card summary { cursor: pointer; padding-block: .5rem; font-weight: 650; }
.cut-bar-card li { margin-block: .4rem; overflow-wrap: anywhere; }
#cut-status[data-error="true"] { color: #ffd19e; }
@media (max-width: 680px) {
  .cut-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cut-row .workbench-field:first-child { grid-column: 1 / -1; }
  .cut-row .button { grid-column: 1 / -1; justify-self: start; }
}
@media print {
  #cut-form, .cut-result-actions, .cut-legend { display: none !important; }
  #cut-results { color: #000; background: #fff; }
  .cut-bar-card { border-color: #777; }
  .cut-bar-card details:not([open]) > *:not(summary) { display: block !important; }
  .cut-bar-visual { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}