/* Workshop settings: a card per section, the sheet and solid wood ones with
   a small drawing of what their sizes mean, in the cut list's colours
   (beige parts, hatched waste, red saw cuts, orange dimensions). */

.ws-form { padding-bottom: 4.5rem; }

.ws-card { margin: 0 0 1rem; padding: 0 1.25rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ws-card legend { float: left; width: 100%; margin: 0 0 0.85rem; padding: 0.85rem 0 0.6rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.ws-card legend + * { clear: both; }
.ws-card > .field__hint { margin-bottom: 0.75rem; }
.ws-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.ws-card__fields .field:last-child { margin-bottom: 0; }

/* A setting per row: what it is on the left, a box sized for a few
   millimetres on the right, the number next to its unit */
.ws-card__fields .field { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-rows: auto auto; column-gap: 1.5rem; row-gap: 0.15rem; align-items: center; margin: 0; padding: 0.7rem 0; }
.ws-card__fields .field + .field { border-top: 1px solid var(--line); }
.ws-card__fields .field:first-child { padding-top: 0; }
.ws-card__fields .field label { grid-column: 1; grid-row: 1; }
.ws-card__fields .field__hint { grid-column: 1; grid-row: 2; }
.ws-card__fields .field__unit { grid-column: 2; grid-row: 1 / span 2; }
.ws-card__fields .field__unit input { text-align: right; }

.ws-drawing { display: grid; place-items: center; align-self: stretch; margin: 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: #fbf9f5; }
.ws-drawing svg { display: block; width: 100%; max-width: 21rem; height: auto; overflow: visible; }
.ws-drawing__sheet { fill: #fff; stroke: #6f6455; stroke-width: 1; }
.ws-drawing__hatch { stroke: #cfc5b6; stroke-width: 1; }
.ws-drawing__stock { fill: #fff; }
.ws-drawing__part { fill: #e8d3a6; stroke: #2b2620; stroke-width: 1.25; }
.ws-drawing__mark { fill: #8a4418; opacity: 0.5; font: 900 22px "Archivo", var(--font); text-anchor: middle; dominant-baseline: middle; }
.ws-drawing__cut { stroke: #c2391b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ws-drawing__dim { stroke: #b5652b; stroke-width: 1; }
.ws-drawing__label { fill: #b5652b; font: 500 10.5px "IBM Plex Mono", var(--mono); }
.ws-drawing__label--cut { fill: #c2391b; }
.ws-drawing__label--dark { fill: #5b5146; }
.ws-drawing__caption { fill: var(--muted); font: 500 9.5px "IBM Plex Mono", var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }

.sheet-sizes .sheet-sizes__table { width: auto; max-width: 100%; table-layout: auto; }
.sheet-sizes__table th:nth-child(2), .sheet-sizes__table th:nth-child(3) { width: 8.5rem; }
.sheet-sizes__table td:first-child { min-width: 14rem; }
.sheet-sizes__table input { text-align: right; }
.sheet-sizes__table input, .sheet-sizes__table select { padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 0.9rem; }
.sheet-sizes__table input:focus, .sheet-sizes__table select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Tools on hand, as chips to switch on and off */
.ws-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ws-tool { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 0.9rem; cursor: pointer; user-select: none; transition: background 0.1s, border-color 0.1s; }
.ws-tool:hover { border-color: var(--muted); }
.ws-tool input { margin: 0; accent-color: var(--accent); }
.ws-tool:has(input:checked) { border-color: var(--accent); background: #f6e6d8; color: #6b3510; }
.ws-tool:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Save stays in reach at the bottom of a long page */
.ws-actions { position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--line); background: var(--bg); }

@media (max-width: 640px) {
  .ws-card { min-width: 0; padding-inline: 1rem; } /* a fieldset is otherwise as wide as its table */
  .ws-card__body { grid-template-columns: minmax(0, 1fr); }
  .ws-card__fields .field { grid-template-columns: minmax(0, 1fr) 6.5rem; column-gap: 1rem; }
  .sheet-sizes .sheet-sizes__table { width: 100%; }
  .sheet-sizes__table th:nth-child(2), .sheet-sizes__table th:nth-child(3) { width: 5.5rem; }
  .sheet-sizes__table td:first-child { min-width: 0; }
  .sheet-sizes__table th, .sheet-sizes__table td { padding-inline: 0.25rem; }
  .sheet-sizes__table input, .sheet-sizes__table select { width: 100%; }
}