/* Warstwa rysunku technicznego. Wszystkie wartości pochodzą z tokens.css. */

.scene-tech { position: relative; overflow: hidden; }

/* Siatka modułowa - wygaszana ku krawędziom, żeby nie walczyła z tekstem. */
.tech-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0, 91, 147, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 91, 147, 0.18) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 30%, transparent 100%);
}

.scene-tech > .wrap { position: relative; z-index: 2; }

/* Celowniki kadrujące */
.crop { position: absolute; z-index: 1; width: 26px; height: 26px; pointer-events: none;
        border: 1px solid rgba(79, 179, 232, 0.5); }
.crop-tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.crop-tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.crop-bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.crop-br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

/* Pasek telemetrii */
.hud {
  display: flex; flex-wrap: wrap; gap: var(--gap-s) var(--gap-m);
  margin-block-start: var(--gap-m);
  padding-block-start: var(--gap-s);
  border-top: 1px solid rgba(0, 91, 147, 0.45);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
  max-width: none;
}
.hud b { color: var(--ink-blue); font-weight: 400; }

/* Kreski rysunku */
.dwg { display: block; width: 100%; height: auto; overflow: visible; margin-block-start: var(--gap-m); }
.dwg-line   { fill: none; stroke: var(--ink-blue); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.dwg-ghost  { fill: none; stroke: #1F5A7C;        stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.dwg-dim    { fill: none; stroke: #66757F;        stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.dwg-part   { fill: none; stroke: #B9E0F7;        stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dwg-txt    { font-family: var(--font-mono); fill: #8B98A2; font-size: 3.1px; letter-spacing: 0.09em; }
.dwg-txt-hi { fill: var(--ink-blue); }

/* Detal nieokreślony rozstrzyga się w konkretny kształt, gdy scena jest już
   dobrze w kadrze. Klasę .is-resolved nadaje wyzwalacz [data-resolve] w draw.js.

   Przezroczystość siedzi na grupach, a kreski mają własne klasy - inaczej
   reguła z fill:none trafiłaby też w tekst "? ? ?" i uczyniła go niewidocznym. */
.dwg-dash {
  fill: none; stroke: #6E7A84; stroke-width: 1.5;
  vector-effect: non-scaling-stroke; stroke-dasharray: 4 3;
}
.part-unknown { opacity: 0.55; transition: opacity 0.6s ease; }
.part-known   { opacity: 0;    transition: opacity 0.7s ease 0.15s; }
.is-resolved .part-unknown { opacity: 0; }
.is-resolved .part-known   { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .part-unknown { opacity: 0; }
  .part-known { opacity: 1; transition: none; }
}