/* ==========================================================================
   PowerTrans — Engineering Drawing Layer
   The drawing *is* the interface. Dimension lines, callout leaders, title
   blocks and revision marks become real UI components.
   Pure addition: loads after site.css, overrides nothing existing.
   ========================================================================== */

:root {
  --eng-grid:      rgba(11,16,20,.055);
  --eng-grid-major:rgba(11,16,20,.085);
  --eng-frame:     rgba(11,16,20,.42);
  --eng-line:      rgba(11,16,20,.72);
  --eng-accent:    #E0560B;
}

/* ---------- 1. Plate: clean, restrained. The part carries the frame. ----------
   Default is deliberately plain (white ground, single hairline). The full
   drawing-sheet furniture lives on .plate--sheet and is used sparingly —
   grids and rulers across a whole page fight the product and read cheap. */
.plate {
  position: relative;
  background: var(--canvas-soft, #F6F7F9);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.plate--sheet {
  background-color: #FBFCFD;
  background-image:
    linear-gradient(to right, var(--eng-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--eng-grid) 1px, transparent 1px),
    linear-gradient(to right, var(--eng-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--eng-grid-major) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}
.plate--sheet::before {
  content: ""; position: absolute; inset: 12px;
  border: 1.5px solid var(--eng-frame);
  pointer-events: none; z-index: 3;
}
.plate--sheet::after {
  content: ""; position: absolute; inset: 17px;
  border: 1px solid var(--eng-grid-major);
  pointer-events: none; z-index: 3;
}
/* corner register ticks */
.plate-tick { position: absolute; width: 11px; height: 11px; z-index: 4; pointer-events: none; }
.plate-tick--tl { left: 12px; top: 12px;    border-left: 2.5px solid var(--eng-accent); border-top: 2.5px solid var(--eng-accent); }
.plate-tick--tr { right: 12px; top: 12px;   border-right: 2.5px solid var(--eng-accent); border-top: 2.5px solid var(--eng-accent); }
.plate-tick--bl { left: 12px; bottom: 12px; border-left: 2.5px solid var(--eng-accent); border-bottom: 2.5px solid var(--eng-accent); }
.plate-tick--br { right: 12px; bottom: 12px;border-right: 2.5px solid var(--eng-accent); border-bottom: 2.5px solid var(--eng-accent); }

/* the part image itself */
.plate-part {
  position: absolute; inset: 9% 7% 20% 7%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.plate--sheet .plate-part { inset: 16% 9% 26% 9%; }
.plate-part img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;             /* white studio bg drops into the plate */
  filter: contrast(1.04) saturate(.94);
  transition: transform .8s var(--ease);
}
.plate:hover .plate-part img { transform: scale(1.035) rotate(-1.1deg); }

/* single spec note, top-left. One is enough; more is noise. */
.plate-lead {
  position: absolute; z-index: 5; left: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.92); padding: 3px 6px;
  border-left: 2px solid var(--eng-accent);
  white-space: nowrap; pointer-events: none;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.plate--sheet .plate-lead { font-size: 8.5px; padding: 2px 5px; }
.plate--sheet .plate-lead--a { left: 9%; top: 13%; }
.plate--sheet .plate-lead--c { left: 12%; top: auto; bottom: 29%; }

/* title block, bottom-right of the sheet */
.plate-titleblock {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  width: min(62%, 210px);
  border: 1.5px solid var(--eng-frame);
  background: rgba(255,255,255,.94);
  display: grid; grid-template-columns: 1fr auto;
}
.plate-titleblock i {
  font-style: normal; font-family: var(--font-mono);
  font-size: 7.5px; font-weight: 700; line-height: 1.35;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  padding: 3px 6px; display: block; border-bottom: 1px solid var(--eng-grid-major);
}
.plate-titleblock i:nth-child(1) { grid-column: 1 / -1; }
.plate-titleblock i:nth-child(2) { grid-column: 1 / -1; color: var(--muted); font-weight: 600; }
.plate-titleblock i:nth-child(3) { border-bottom: 0; color: var(--muted); font-weight: 600; }
.plate-titleblock i:nth-child(4) { border-bottom: 0; color: var(--muted); font-weight: 600; border-left: 1px solid var(--eng-grid-major); text-align: right; }

/* dimension strip along the bottom */
.plate-dim {
  position: absolute; left: 14%; right: 14%; bottom: 15px; z-index: 5;
  height: 1px; background: var(--eng-accent); opacity: .7; pointer-events: none;
}
.plate--sheet .plate-dim { left: 12%; right: 30%; bottom: 19px; opacity: .75; }
.plate-dim::before, .plate-dim::after {
  content: ""; position: absolute; top: -3.5px; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.plate-dim::before { left: 0;  border-right: 7px solid var(--eng-accent); }
.plate-dim::after  { right: 0; border-left: 7px solid var(--eng-accent); }
.plate-dim span {
  position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  color: var(--eng-accent); background: #FBFCFD; padding: 0 4px; white-space: nowrap;
}

/* ---------- 2. Sheet header: chapter title with drawing-sheet furniture ---------- */
.sheet-head { position: relative; padding-left: 0; }
.sheet-head .sheet-no {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--eng-accent);
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.sheet-head .sheet-no::after {
  content: ""; height: 1px; width: 46px; background: var(--eng-accent); opacity: .55;
}

/* ---------- 3. Spec row as dimension table ---------- */
.dimtable { width: 100%; border-collapse: collapse; }
.dimtable td {
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; vertical-align: top;
}
.dimtable tr:last-child td { border-bottom: 0; }
.dimtable td:first-child {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  width: 42%; padding-right: 16px;
}
.dimtable td:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- 4. Card: product card, restrained engineering accents ---------- */
.card--drawn { border-radius: 4px; }
.card--drawn .plate { border: 1px solid var(--line); }
.card--drawn .card-body { padding: 15px 17px 17px; }
.card-meta-spec {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card--drawn .card-sku {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--eng-accent);
}
.card--drawn h3 { font-size: 15.5px; margin-top: 7px; }
.card--drawn .card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--subtle);
}

/* ---------- 5. Dark "machine" chapter variant of the plate ---------- */
.plate--dark {
  background-color: #0B1014;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.085) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}
.plate--dark::before { border-color: rgba(255,255,255,.32); }
.plate--dark::after  { border-color: rgba(255,255,255,.1); }
.plate--dark .plate-part img { mix-blend-mode: normal; }
.plate--dark .plate-lead { background: rgba(11,16,20,.86); color: #fff; }
.plate--dark .plate-titleblock { background: rgba(11,16,20,.9); border-color: rgba(255,255,255,.32); }
.plate--dark .plate-titleblock i { color: #fff; border-bottom-color: rgba(255,255,255,.14); }
.plate--dark .plate-titleblock i:nth-child(2),
.plate--dark .plate-titleblock i:nth-child(3),
.plate--dark .plate-titleblock i:nth-child(4) { color: rgba(255,255,255,.55); }
.plate--dark .plate-titleblock i:nth-child(4) { border-left-color: rgba(255,255,255,.14); }
.plate--dark .plate-dim { background: var(--eng-accent); }
.plate--dark .plate-dim span { background: #0B1014; }

/* ---------- 6. Revision / data block ---------- */
.revblock {
  border: 1.5px solid var(--eng-frame); background: #fff;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; overflow: hidden;
}
.revblock-head {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--eng-grid-major);
}
.revblock-head span {
  padding: 7px 9px; font-weight: 700; color: var(--muted);
  border-right: 1px solid var(--eng-grid-major);
}
.revblock-head span:last-child { border-right: 0; }
.revblock-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.revblock-row span {
  padding: 8px 9px; color: var(--ink); font-weight: 600;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.revblock-row:last-child span { border-bottom: 0; }
.revblock-row span:last-child { border-right: 0; }

/* ---------- 7. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .plate:hover .plate-part img { transform: none; }
}