/* /cut-list-optimizer/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts).
   The diagram SVG on the page is coloured by these rules; the downloaded SVG/PNG carries its own fixed colours. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

@media(min-width:920px){.cl-duo{grid-template-columns:minmax(23rem,.9fr) minmax(0,1.25fr)}}
.duo>.pane-result.cl-result{position:static}
.cl-result{display:grid;gap:1rem;align-content:start}
.cl-input{padding:1rem}
@media(min-width:520px){.cl-input{padding:1.25rem}}

.cl-top{display:flex;flex-wrap:wrap;gap:0.5rem}
.cl-modes{margin:0;flex:1 1 12rem}
.cl-units{flex:0 1 9.5rem}
.cl-modes button{min-height:2.5rem}

.cl-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:1rem 0 0.5rem}
.cl-sumcard .cl-sec,.cl-export .cl-sec{margin-top:0}
.cl-k{display:block;font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:0.375rem}
.cl-k .u{text-transform:none}

/* rows: name, length, width, qty, grain, remove */
.cl-list{display:grid;gap:0.375rem}
.cl-item,.cl-head{display:grid;gap:0.375rem;align-items:center}
.cl-head{font-family:var(--mono);font-size:0.6875rem;text-transform:none;letter-spacing:.03em;color:var(--muted);margin-bottom:0.25rem}
.cl-head:empty{display:none}
.cl-spart>.cl-item,.cl-head.cl-spart{grid-template-columns:minmax(0,1fr) 4.6rem 4.6rem 3.1rem 2.6rem 2rem}
.cl-lpart>.cl-item,.cl-head.cl-lpart{grid-template-columns:minmax(0,1fr) 5.5rem 3.4rem 2rem}
.cl-sstock>.cl-item,.cl-head.cl-sstock{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 5rem 2rem}
.cl-lstock>.cl-item,.cl-head.cl-lstock{grid-template-columns:minmax(0,1fr) 5rem 2rem}
.cl-list>.note{grid-column:1/-1}
/* phone: the name gets its own line above the sizes */
@media(max-width:430px){
  .cl-spart>.cl-item,.cl-head.cl-spart{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 3.1rem 2.6rem 2rem}
  .cl-head.cl-spart .h-name{display:none}
  .cl-spart>.cl-item{padding:0.375rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
  .cl-spart>.cl-item>.cl-name{grid-column:1/-1}
  .cl-head.cl-spart{padding:0 0.375rem}
}
.cl-item input[type=text],.cl-item input[type=number]{padding:0.5rem 0.5rem;min-height:2.5rem;font-variant-numeric:tabular-nums}
.cl-item .cl-num,.cl-item .cl-qty,.cl-settings input{font-family:var(--mono);font-size:0.875rem}
.cl-item input[aria-invalid="true"],.cl-settings input[aria-invalid="true"]{border-color:var(--bad)}
.cl-grain{display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;font-size:0.625rem;color:var(--muted);font-family:var(--mono)}
.cl-grain input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.cl-del{border:1px solid var(--line-2);background:var(--surface);color:var(--muted);border-radius:0.5rem;min-height:2.5rem;font:inherit;font-size:1.125rem;line-height:1;cursor:pointer;padding:0}
.cl-del:hover{color:var(--bad);border-color:var(--bad)}

.cl-row{display:flex;flex-wrap:wrap;gap:0.5rem 0.75rem;align-items:center}
.cl-add{margin-top:0.625rem}
.btn.cl-small{padding:0.5rem 0.875rem;min-height:2.5rem;font-size:0.875rem}
.cl-link{border:0;background:none;padding:0.25rem 0;color:var(--muted);font:inherit;font-size:0.8125rem;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cl-link:hover{color:var(--accent)}
.cl-inline{padding:0;font-size:inherit}
.cl-file{display:inline-block}

.cl-paste{margin-top:0.75rem;border:1px solid var(--line);border-radius:0.5rem;padding:0.5rem 0.75rem;background:var(--surface-2)}
.cl-paste summary{cursor:pointer;font-size:0.875rem;font-weight:600}
.cl-paste textarea{margin:0.5rem 0;font-family:var(--mono);font-size:0.8125rem;resize:vertical}
.cl-paste code,.explainer code{font-family:var(--mono);font-size:0.875em;overflow-wrap:anywhere}

.cl-presets{margin-top:0.5rem}
.cl-presets .cl-k{margin:0}
.cl-chip{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;padding:0.375rem 0.75rem;min-height:2.25rem;font:inherit;font-size:0.8125rem;cursor:pointer;font-variant-numeric:tabular-nums}
.cl-chip:hover{border-color:var(--accent);color:var(--accent)}

.cl-settings{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:1rem}
.cl-in{display:block;min-width:0}
.cl-in input,.cl-in select{width:100%}
.cl-in[hidden]{display:none}
.cl-make{width:100%;margin-top:1rem}
.cl-save{margin-top:0.75rem}

.note{font-size:0.8125rem;color:var(--muted);margin:0.5rem 0.125rem 0;line-height:1.5}
.note.bad{color:var(--bad);font-weight:600}

.cl-summary{margin:0;font-size:0.9375rem;color:var(--ink);font-variant-numeric:tabular-nums}
.cl-unfit{margin-top:0.75rem;padding:0.5rem 0.75rem;border:1px solid var(--bad);border-left:0.25rem solid var(--bad);border-radius:0.5rem;color:var(--ink);font-size:0.875rem}
.cl-unfit[hidden]{display:none}
.cl-unfit b{color:var(--bad)}
.cl-unfit ul{margin:0.25rem 0 0;padding-left:1.25rem}
.cl-method{margin-top:0.625rem}

.cl-diagrams{display:grid;gap:1rem}
.cl-fig{margin:0;padding:0.875rem}
.cl-cap{font-family:var(--mono);font-size:0.8125rem;font-weight:600;color:var(--ink);margin-bottom:0.5rem}
.cl-svgbox{border-radius:0.375rem;overflow:hidden}
.cl-svgbox svg{display:block;width:100%;height:auto}
.cl-stat,.cl-off{margin:0.5rem 0 0;font-size:0.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cl-off{font-family:var(--mono);font-size:0.75rem;overflow-wrap:anywhere}
.cl-cuts{margin-top:0.5rem;font-size:0.8125rem}
.cl-cuts summary{cursor:pointer;font-weight:600}
.cl-cuts ol,.cl-boards{margin:0.375rem 0 0;padding-left:1.75rem;color:var(--ink-2);font-size:0.8125rem;font-variant-numeric:tabular-nums}
.cl-boards li{margin-bottom:0.25rem}

/* the diagram, in the page's own theme */
.cl-svg .cl-sheet{fill:var(--surface-2);stroke:var(--ink)}
.cl-svg .cl-use{fill:var(--surface)}
.cl-svg .cl-off,.cl-svg .cl-left{fill:var(--surface-2);stroke:var(--line-2);stroke-dasharray:4 3}
.cl-svg .cl-offt{fill:var(--muted)}
.cl-svg .cl-part{fill:var(--accent-soft);stroke:var(--accent)}
.cl-svg .cl-pt{fill:var(--ink);font-weight:600}
.cl-svg .cl-ps{fill:var(--ink-2)}
.cl-svg .cl-lab{fill:var(--ink)}
.cl-svg text{font-family:var(--sans)}
.cl-svg .cl-cut{stroke:var(--bad);stroke-dasharray:6 4;opacity:.85}
.cl-svg .cl-cn{fill:var(--bad)}
.cl-svg .cl-cnt{fill:var(--surface);font-weight:700}

.cl-export .cl-paper{flex:1 1 10rem}
.cl-export .cl-row>.btn{flex:1 1 8rem}
.cl-dl{margin-top:0.75rem}
.cl-dl .btn{flex:1 1 6rem}
.cl-share{margin-top:0.75rem;font-family:var(--mono);font-size:0.75rem}
#copyShare{margin-top:0.5rem}
.btn:disabled{opacity:.5;cursor:default;filter:none}

.cl-shared{margin:0 0 1rem;padding:0.75rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);font-size:0.9375rem}
.cl-shared[hidden]{display:none}
.cl-shared p{margin:0 0 0.5rem}

.modes button:focus-visible,.btn:focus-visible,.cl-link:focus-visible,.cl-chip:focus-visible,.cl-del:focus-visible,.cl-paste summary:focus-visible,.cl-cuts summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.explainer .cl-steps,.explainer .cl-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .cl-steps li,.explainer .cl-cannot li{margin:0 0 0.5rem}
.explainer .cl-steps b,.explainer .cl-cannot b{color:var(--ink)}