/* =============================================================
   Enex Engineering — CNC drawing-vocabulary layer
   Additive. Layers on top of _shared.css with engineering-
   drawing motifs: title blocks, dimension lines, corner crops,
   GD&T symbols, blueprint grids, sheet refs.
   ============================================================= */

/* ── Blueprint surfaces ────────────────────────────── */
.cnc-grid {
  background-color: var(--bg-page);
  background-image:
    linear-gradient(to right, rgba(46, 64, 96, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46, 64, 96, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cnc-grid-fine {
  background-color: var(--bg-section-alt);
  background-image:
    linear-gradient(to right, rgba(46, 64, 96, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46, 64, 96, 0.04) 1px, transparent 1px),
    linear-gradient(to right, rgba(46, 64, 96, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46, 64, 96, 0.08) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
}
.cnc-hatch {
  background-image: repeating-linear-gradient(-45deg,
    transparent, transparent 6px,
    rgba(15, 27, 45, 0.08) 6px, rgba(15, 27, 45, 0.08) 7px);
}
.cnc-hatch-orange {
  background-image: repeating-linear-gradient(-45deg,
    transparent, transparent 6px,
    rgba(194, 90, 26, 0.20) 6px, rgba(194, 90, 26, 0.20) 7px);
}

/* ── Drawing sheet (bordered frame with zone labels) ─ */
.cnc-sheet {
  position: relative;
  border: 1.5px solid var(--fg-heading);
  background: var(--bg-page);
}
.cnc-sheet--inner {
  position: relative;
  margin: 14px;
  border: 1px solid var(--border);
  padding: 28px;
}
.cnc-sheet-zones {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-dim);
  letter-spacing: 0.1em;
}
.cnc-sheet-zones span {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
}

/* ── Corner registration marks (L-shaped crop ticks) ─ */
.cnc-corners {
  position: relative;
}
.cnc-corners::before,
.cnc-corners::after,
.cnc-corners > .cnc-corner-tl,
.cnc-corners > .cnc-corner-tr,
.cnc-corners > .cnc-corner-bl,
.cnc-corners > .cnc-corner-br {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1.5px solid var(--accent);
  pointer-events: none; z-index: 2;
}
.cnc-corners::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}
.cnc-corners::after {
  top: -1px; right: -1px;
  border-left: 0; border-bottom: 0;
}
.cnc-corners > .cnc-corner-bl {
  bottom: -1px; left: -1px;
  border-right: 0; border-top: 0;
}
.cnc-corners > .cnc-corner-br {
  bottom: -1px; right: -1px;
  border-left: 0; border-top: 0;
}
/* Variant: dark corners */
.cnc-corners--dark::before,
.cnc-corners--dark::after,
.cnc-corners--dark > .cnc-corner-bl,
.cnc-corners--dark > .cnc-corner-br {
  border-color: var(--fg-heading);
}

/* ── Title block (engineering-drawing legend) ────── */
.cnc-titleblock {
  display: grid;
  grid-template-columns: 56px 1fr 90px 90px 90px;
  border: 1px solid var(--fg-heading);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-heading); background: var(--bg-page);
}
.cnc-titleblock > div {
  padding: 8px 12px; border-right: 1px solid var(--fg-heading);
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  min-height: 46px;
}
.cnc-titleblock > div:last-child { border-right: 0; }
.cnc-titleblock label {
  font-size: 8px; color: var(--fg-dim); letter-spacing: 0.18em;
}
.cnc-titleblock b {
  font-weight: 700; color: var(--fg-heading); font-size: 11px; letter-spacing: 0.04em;
}
.cnc-titleblock .cell-num {
  background: var(--fg-heading); color: var(--bg-page);
  font-size: 18px; letter-spacing: 0; font-family: var(--font-display);
  align-items: center; justify-content: center; text-align: center;
  padding: 8px;
}
.cnc-titleblock .cell-title b {
  font-family: var(--font-sans); font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em; color: var(--fg-heading);
}
.cnc-titleblock .cell-rev {
  background: var(--accent); color: var(--fg-on-orange);
}
.cnc-titleblock .cell-rev label,
.cnc-titleblock .cell-rev b { color: var(--fg-on-orange); }

@media (max-width: 700px) {
  .cnc-titleblock { grid-template-columns: 48px 1fr 80px; }
  .cnc-titleblock > div:nth-child(3),
  .cnc-titleblock > div:nth-child(4) { display: none; }
}

/* ── Dimension line (extension + line + arrows + value) */
.cnc-dim {
  position: relative;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-dim); letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.cnc-dim .line {
  position: relative; flex: 1; min-width: 60px; height: 1px;
  background: var(--fg-dim);
}
.cnc-dim .line::before,
.cnc-dim .line::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}
.cnc-dim .line::before { left: 0; border-right: 6px solid var(--fg-dim); }
.cnc-dim .line::after  { right: 0; border-left: 6px solid var(--fg-dim); }
.cnc-dim .val { color: var(--fg-heading); font-weight: 700; }

/* Vertical dim variant */
.cnc-dim-v {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim);
  letter-spacing: 0.08em;
}
.cnc-dim-v .line {
  position: relative; width: 1px; flex: 1; min-height: 60px; background: var(--fg-dim);
}
.cnc-dim-v .line::before,
.cnc-dim-v .line::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  transform: translateX(-50%);
}
.cnc-dim-v .line::before { top: 0; border-bottom: 6px solid var(--fg-dim); }
.cnc-dim-v .line::after  { bottom: 0; border-top: 6px solid var(--fg-dim); }

/* ── Coordinate / datum readout ──────────────────── */
.cnc-coord {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-dim); letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; gap: 14px; align-items: center;
}
.cnc-coord b { color: var(--fg-heading); font-weight: 700; }
.cnc-coord .ax {
  display: inline-block; padding: 2px 6px;
  background: var(--fg-heading); color: var(--bg-page);
  font-weight: 700; font-size: 9px;
}

/* ── Datum / detail bubble (circled letter) ──────── */
.cnc-datum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  color: var(--accent); background: var(--bg-page);
  letter-spacing: 0;
}
.cnc-datum--dark { background: var(--fg-heading); color: var(--accent); border-color: var(--accent); }

/* ── Revision triangle marker (▲ with letter) ──── */
.cnc-rev {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase;
}
.cnc-rev::before {
  content: ""; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 10px solid var(--accent);
}

/* ── Tolerance bar ──────────────────────────────── */
.cnc-tol {
  display: inline-flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cnc-tol .bar {
  position: relative; height: 6px;
  background: repeating-linear-gradient(
    to right,
    var(--border), var(--border) 1px,
    transparent 1px, transparent 8px
  );
  border-top: 1px solid var(--fg-heading);
  border-bottom: 1px solid var(--fg-heading);
}
.cnc-tol .bar .pin {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent);
}

/* ── GD&T symbol stamp (used inline) ────────────── */
.cnc-gdt {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-heading);
  border: 1px solid var(--fg-heading); padding: 2px 8px;
  letter-spacing: 0.04em;
}
.cnc-gdt b { color: var(--accent); font-weight: 700; font-size: 13px; }

/* ── Engineering spec block (key-value, mono) ──── */
.cnc-spec {
  display: grid; grid-template-columns: max-content 1fr; gap: 0;
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border); background: var(--bg-page);
}
.cnc-spec dt, .cnc-spec dd {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.cnc-spec dt {
  background: var(--bg-section-alt); color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.14em;
  border-right: 1px solid var(--border); min-width: 140px;
}
.cnc-spec dd { color: var(--fg-heading); font-weight: 700; letter-spacing: 0.02em; }
.cnc-spec dt:last-of-type, .cnc-spec dd:last-of-type { border-bottom: 0; }

/* ── Approval stamp (rotated, certified-look) ──── */
.cnc-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border: 2px solid var(--accent); color: var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  transform: rotate(-6deg);
  background: var(--bg-page);
  text-align: center; line-height: 1.2;
}
.cnc-stamp small {
  display: block; font-size: 8px; letter-spacing: 0.18em;
  font-weight: 400; opacity: 0.7; margin-top: 2px;
}

/* ── Section header — "DWG / SHEET / SCALE" ─────── */
.cnc-section-head {
  display: flex; align-items: stretch; gap: 0;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 32px;
  border: 1px solid var(--border);
  background: var(--bg-page);
}
.cnc-section-head > span {
  padding: 10px 16px; border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; color: var(--fg-dim);
}
.cnc-section-head > span:last-child { border-right: 0; margin-left: auto; }
.cnc-section-head b { color: var(--fg-heading); font-weight: 700; }
.cnc-section-head .dwg { background: var(--fg-heading); color: var(--bg-page); }
.cnc-section-head .dwg b { color: var(--bg-page); }

/* ── Inline diameter / tolerance symbols ────────── */
.cnc-sym {
  font-family: var(--font-mono); color: var(--accent); font-weight: 700;
}

/* ── Crosshair (center mark) ────────────────────── */
.cnc-cross {
  position: relative; width: 24px; height: 24px;
}
.cnc-cross::before,
.cnc-cross::after {
  content: ""; position: absolute; background: var(--fg-dim);
}
.cnc-cross::before {
  left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
}
.cnc-cross::after {
  top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%);
}

/* ── Process arrow (between flow steps) ─────────── */
.cnc-arrow {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.cnc-arrow::after {
  content: ""; display: inline-block;
  width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--fg-dim);
  margin-left: 6px;
}

/* ── Status chip (live readouts) ──────────────── */
.cnc-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--border);
  background: var(--bg-page);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-dim); letter-spacing: 0.16em; text-transform: uppercase;
}
.cnc-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2A8C5C; animation: pulse-soft 2s ease-in-out infinite;
}
.cnc-status b { color: var(--fg-heading); font-weight: 700; }

/* ── "DO NOT SCALE" footer ribbon ───────────────── */
.cnc-ribbon {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 18px;
  background: var(--fg-heading); color: var(--bg-page);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.cnc-ribbon span { display: inline-flex; align-items: center; gap: 8px; }
.cnc-ribbon .accent { color: var(--accent); }