/* FabForge CNC module (Build 4). Written from scratch. Shares the Laser layout classes (lp-*) and adds these. */
.cn-card .card-h .badge { margin-left: auto; }
.cn-h3 { margin: 18px 0 8px; font-size: 15px; color: var(--steel2); }
.cn-feat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--bg2); }
.cn-feat > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cn-add, .cn-imp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.cn-imp .muted { flex: 1 1 320px; }
.fld.wide { grid-column: 1 / -1; }
.cn-bpwrap { position: relative; margin: 12px 0 8px; }
.cn-bp { display: block; width: 100%; height: 420px; border-radius: 10px; border: 1px solid var(--line); background: #14171b; touch-action: none; cursor: grab; }
.cn-bp:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.cn-views { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.cn-views .btn { background: rgba(20, 23, 27, .85); }
.cn-code { max-height: 340px; }
.cn-gates { margin: 12px 0; }
.cn-area { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-weight: 600; }
.cn-area textarea { width: 100%; box-sizing: border-box; font: 12.5px/1.45 var(--mono); background: #0d0f12; color: #d5dae0; border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; resize: vertical; min-height: 140px; }
.cn-area textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.cn-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cn-cols h4 { margin: 10px 0 6px; font-size: 14px; }
.cn-det { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: var(--bg2); }
.cn-det summary { cursor: pointer; font-size: 15px; }
.cn-ex td { vertical-align: top; }
.cn-ex code { font: 12.5px var(--mono); white-space: pre-wrap; word-break: break-word; }
.cn-ex tr.bad td { background: var(--redbg); }
.cn-ex tr.warn td { background: var(--amberbg); }
.cn-ex b.bad, .lp-checks .bad, span.bad { color: var(--red); }
.cn-ex b.warn, span.warn { color: var(--amber2); }
.cn-list { margin: 8px 0; padding-left: 20px; line-height: 1.5; }
.cn-list li { margin: 4px 0; }
.cn-next { margin: 12px 0 0; padding-left: 18px; line-height: 1.5; }
.cn-tt .fld { margin: 0; min-width: 110px; position: relative; }   /* Build 6 fix: keeps the hidden label inside the scrolling table on a phone */
.cn-tt .fld .fl-l { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cn-tt td { vertical-align: middle; }
@media (max-width: 900px) { .cn-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cn-bp { height: 320px; } .cn-views { position: static; margin-bottom: 6px; } }
@media print { .cn-bpwrap, .cn-views, .lp-play { display: none; } }
.cn-cols > * { min-width: 0; } .cn-cols pre, .cn-cols textarea { max-width: 100%; box-sizing: border-box; overflow: auto; }
/* Long option names (machines, materials, posts, control families) get two grid columns on wider screens so they are not cut off. */
@media (min-width: 761px) {
  .fx-in .fld:has(select[data-k="cn.mach"], select[data-k="cn.lmach"], select[data-k="cn.mat"], select[data-k="cn.post"], select[data-k="cn.lpost"], select[data-k="cn.exDialect"], select[data-k="cn.swStyle"], select[data-k="cn.cycFmt"], select[data-k="cn.lcycle"]) { grid-column: span 2; }
}