/* Cut list planner + quote page cut list summary. */

.cutl { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); padding-block: var(--s-6) var(--sec); align-items: start; }
.cutl__plan { grid-column: 1; min-width: 0; }
.cutl__side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--top) + var(--hdr) + 20px); }
.cutl__layouts { grid-column: 1; min-width: 0; margin-top: var(--s-5); }
@media (max-width: 1080px) {
	.cutl { grid-template-columns: 1fr; }
	.cutl__side { grid-column: 1; grid-row: auto; position: static; }
}
.cutl__tools { display: flex; gap: var(--s-4); align-items: center; }

/* Rows: a table on wide screens, cards on phones. */
.cutl__head, .crow { display: grid; grid-template-columns: 22px minmax(190px, 1fr) 60px 82px 82px 124px 118px 92px; gap: 8px; align-items: start; }
.cutl__head { padding: 0 var(--s-3) .5rem; font: 600 .78rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--steel); border-bottom: 2px solid var(--ink); }
.cutl__rows { list-style: none; margin: 0; padding: 0; }
.crow { position: relative; padding: var(--s-3); border-bottom: 1px solid var(--line); }
.crow:nth-child(even) { background: #FAFBFB; }
.crow.is-bad { background: #FEF3F3; }
.crow__n { font: 600 .9rem/48px var(--f-mono); color: var(--steel); }
.crow__mat { display: grid; gap: 6px; min-width: 0; }
.crow__mat select { padding-left: 2.6rem; background-image: var(--sw), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B2B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); background-size: 26px 26px, 16px; background-position: .5rem center, right .7rem center; background-repeat: no-repeat; background-color: #fff; text-overflow: ellipsis; }
.crow__label input { min-height: 38px; font-size: .9rem; border-style: dashed; }
.crow__lbl { display: none; font: 600 .74rem var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--steel); }
.crow__num input { text-align: right; font-family: var(--f-mono); padding-inline: .5rem; }
.crow__edge { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; align-items: center; }
.crow__et { min-height: 38px; font-size: .8rem; padding: .3rem 1.8rem .3rem .4rem; background-position: right .4rem center; background-size: 12px; }
.crow__et:disabled { opacity: .45; }
.crow__holes { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; }
.crow__holes input { text-align: center; font-family: var(--f-mono); padding-inline: .3rem; }
.crow__holes select { padding: .3rem 1.6rem .3rem .45rem; font-size: .85rem; background-position: right .35rem center; background-size: 12px; }
.crow__holes select:disabled { opacity: .45; }
.crow__tools { display: flex; gap: 2px; justify-content: flex-end; }
.crow__tools .iconbtn { width: 30px; height: 48px; border-color: transparent; background: transparent; }
.crow__tools .iconbtn:hover { border-color: var(--line); background: #fff; }
.crow__tools .iconbtn .ico { width: 19px; height: 19px; }
.crow__mat select { text-align: left; }
.crow__holes select { min-width: 0; }
.crow__grain[aria-pressed="false"] { color: var(--steel); }
.crow__msg { grid-column: 2 / -1; margin: 0; font-size: .84rem; color: var(--red-ui); }
.crow__msg:empty { display: none; }

/* Edge picker: a little board; tap a side to band it. */
.edgepick { position: relative; width: 56px; height: 48px; }
.edgepick__face { position: absolute; inset: 9px; display: grid; place-items: center; background: var(--avg, var(--paper-2)); background-image: var(--sw); background-size: cover; border: 1px solid var(--grey-300); font: 600 .62rem var(--f-mono); color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; }
.edgepick__e { position: absolute; display: block; background: transparent; z-index: 1; }
.edgepick__e::after { content: ""; position: absolute; background: var(--grey-300); transition: background-color .15s; }
.edgepick__l1 { left: 9px; right: 9px; top: 0; height: 12px; }
.edgepick__l2 { left: 9px; right: 9px; bottom: 0; height: 12px; }
.edgepick__w1 { top: 9px; bottom: 9px; left: 0; width: 12px; }
.edgepick__w2 { top: 9px; bottom: 9px; right: 0; width: 12px; }
.edgepick__l1::after, .edgepick__l2::after { left: 0; right: 0; height: 3px; top: 50%; transform: translateY(-50%); }
.edgepick__w1::after, .edgepick__w2::after { top: 0; bottom: 0; width: 3px; left: 50%; transform: translateX(-50%); }
.edgepick__e:hover::after { background: var(--steel); }
.edgepick__e[aria-pressed="true"]::after { background: var(--red-ui); height: 5px; }
.edgepick__w1[aria-pressed="true"]::after, .edgepick__w2[aria-pressed="true"]::after { width: 5px; height: auto; }
.edgepick__e:focus-visible { outline: 2px solid var(--erb-blue); outline-offset: 0; }

@media (max-width: 1240px) and (min-width: 1081px) { .cutl { grid-template-columns: minmax(0, 1fr); } .cutl__side { grid-column: 1; grid-row: auto; position: static; } }
@media (max-width: 1300px) and (min-width: 901px) { .cutl__plan.panel { padding-inline: 1rem; } }
@media (max-width: 900px) {
	.cutl__head { display: none; }
	.crow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; padding: var(--s-4) var(--s-3); grid-template-areas: "n n n t t t" "m m m m m m" "q q l l w w" "e e e h h h"; }
	.crow__n { grid-area: n; line-height: 40px; font-size: 1rem; color: var(--ink); }
	.crow__n::before { content: "Part "; font-family: var(--f-display); font-weight: 600; color: var(--steel); }
	.crow__mat { grid-area: m; }
	.crow > .crow__qty { grid-area: q; }
	.crow > .crow__num:nth-child(4) { grid-area: l; }
	.crow > .crow__num:nth-child(5) { grid-area: w; }
	.crow__edge { grid-area: e; grid-template-columns: 56px minmax(0, 1fr); }
	.crow__holes { grid-area: h; }
	.crow__tools { grid-area: t; }
	.crow__lbl { display: block; grid-column: 1 / -1; margin-bottom: 2px; }
	.crow__num { display: grid; }
	.crow__msg { grid-column: 1 / -1; }
}
.cutl__add { margin-top: var(--s-4); }
.cutl__help { margin-top: var(--s-5); background: var(--paper); padding: var(--s-3) var(--s-4); border-radius: var(--r); }
.cutl__help summary { font: 600 .95rem var(--f-display); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.cutl__help ul { margin: var(--s-3) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--ink-2); }
.cutl__help li + li { margin-top: .4em; }

/* Result panel */
.cutl__sum .h3 { margin-bottom: var(--s-4); }
.need { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.need:first-child { border-top: 0; padding-top: 0; }
.need__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.need__head img { width: 44px; height: 44px; object-fit: cover; }
.need__head p { margin: 0; line-height: 1.25; }
.need__head strong { display: block; font: 600 .98rem var(--f-display); }
.need__head small { font: 500 .74rem var(--f-mono); color: var(--steel); }
.need__n { text-align: right; font-size: .8rem; color: var(--steel); line-height: 1; }
.need__n b { display: block; font: 700 2rem/1 var(--f-display); color: var(--ink); }
.need__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: .84rem; }
.need__list li { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.need__list span { color: var(--steel); }
.need__list b { font: 500 .84rem var(--f-mono); }
.need--sm { padding: var(--s-3) 0; }
.cutl__actions { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.cutl__minor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cutl__sum .hint { margin-top: var(--s-3); }

/* Sheets */
.cutl__sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-5); }
.csheet { margin: 0; }
.csheet figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-bottom: var(--s-3); font-size: .85rem; }
.csheet figcaption strong { font-family: var(--f-display); }
.csheet figcaption span { color: var(--steel); font-family: var(--f-mono); font-size: .78rem; }
.sheet { width: 100%; height: auto; overflow: visible; }
.sheet__board { fill: #F1EEE8; stroke: var(--ink); stroke-width: 4; }
.sheet__trim { fill: url(#none); fill: rgb(141 143 143 / .14); stroke: var(--grey-300); stroke-width: 2; stroke-dasharray: 10 8; }
.sheet__part rect:first-child { fill: #fff; stroke: var(--ink-2); stroke-width: 2.5; }
.sheet__band { fill: var(--red-ui); stroke: none; }
.sheet text { text-anchor: middle; fill: var(--ink); }
.sheet__n { font-family: var(--f-display); font-weight: 700; }
.sheet__dim { font-family: var(--f-mono); fill: var(--steel); font-size: .8em; }
.sheet__cuts line { stroke: var(--erb-blue); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; }
.csheet.is-cut .sheet__cuts line { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-in-out) calc(var(--c) * 25ms); }
@media (prefers-reduced-motion: reduce) { .sheet__cuts line { stroke-dashoffset: 0; } }

/* Quote page summary */
.cutsum__parts { margin: var(--s-3) 0; }
.cutsum__parts summary { cursor: pointer; font: 600 .9rem var(--f-display); min-height: 36px; display: flex; align-items: center; }
.cutsum__parts pre { white-space: pre-wrap; font: 500 .8rem/1.6 var(--f-mono); background: var(--paper); padding: var(--s-3); margin: var(--s-2) 0 0; overflow-x: auto; }

.dlg textarea { font-family: var(--f-mono); font-size: .9rem; }

/* Print: the list + layouts, or the blank template. */
.cutprint { display: none; }
@media print {
	html.print-cutlist body > *:not(.cutprint) { display: none !important; }
	html.print-cutlist .cutprint { display: block; font: 11pt/1.45 var(--f-body); color: #000; }
	.cutprint__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2pt solid #000; padding-bottom: 8pt; margin-bottom: 12pt; }
	.cutprint__head svg { height: 34pt; width: auto; }
	.cutprint__head div { text-align: right; }
	.cutprint__head strong { display: block; font: 700 16pt var(--f-display); }
	.cutprint h2 { font: 700 13pt var(--f-display); margin: 12pt 0 4pt; }
	.cutprint h2 small { font: 500 9pt var(--f-mono); color: #444; }
	.cutprint ol { font: 500 10pt/1.6 var(--f-mono); padding-left: 2.2em; }
	.cutprint__sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 14pt; margin-top: 14pt; }
	.cutprint__sheets .csheet { break-inside: avoid; }
	.cutprint__sheets .sheet__cuts line { stroke-dashoffset: 0; }
	.cutprint table { width: 100%; border-collapse: collapse; font-size: 10pt; }
	.cutprint th, .cutprint td { border: 1pt solid #000; padding: 4pt 6pt; height: 24pt; text-align: left; vertical-align: bottom; }
	.cutprint th small { font-weight: 400; }
	.cutprint__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12pt; margin-bottom: 12pt; }
	.cutprint__fields span { border-bottom: 1pt solid #000; padding: 14pt 0 2pt; font-size: 9pt; }
	.cutprint__eg { font: 500 9pt var(--f-mono); margin-top: 8pt; }
	@page { margin: 12mm; }
}