/* VISNE LAB P9-03 — visual and interaction polish */

/* Make wide light workspaces read as one continuous surface. */
@media (min-width: 1101px) {
  .chamber,
  .method {
    width: 100%;
    padding-left: max(32px, calc((100% - var(--max)) / 2));
    padding-right: max(32px, calc((100% - var(--max)) / 2));
  }
}

/* Keep the selected system visually connected to its detail layer. */
.system-item {
  position: relative;
}
.system-item.selected {
  padding-left: 18px;
  background: linear-gradient(90deg, rgba(126, 35, 61, .38), rgba(94, 20, 40, .08) 72%, transparent);
  box-shadow: inset 3px 0 #d66c88;
}
.system-item.selected::after {
  content: "";
  position: absolute;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e88aa2;
  box-shadow: 0 0 18px rgba(232, 138, 162, .72);
}

/* Desktop trace becomes a centred system chamber aligned to the LAB grid. */
@media (min-width: 901px) {
  .system-trace {
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vw, 72px);
  }
  .trace-shell {
    width: min(980px, 100%);
    height: auto;
    max-height: calc(100svh - clamp(64px, 10vw, 144px));
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid rgba(224, 83, 114, .28);
    box-shadow: 0 28px 110px rgba(0, 0, 0, .55);
    transform: translateY(18px) scale(.985);
    opacity: 0;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .32s ease;
  }
  .system-trace.ready .trace-shell {
    transform: none;
    opacity: 1;
  }
  .trace-record dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 70px);
    margin-bottom: 30px;
  }
  .trace-record dl > div:first-child,
  .trace-record dl > div:last-child {
    grid-column: 1 / -1;
  }
  .trace-record dl > div { padding: 15px 0; }
  .trace-actions { display: flex; align-items: center; gap: 22px; }
}

/* Mobile keeps the successful full-screen chamber, with immediate visible feedback. */
@media (max-width: 900px) {
  .system-item.selected { padding-left: 14px; }
  .system-trace { align-items: stretch; }
  .trace-shell {
    width: 100%;
    height: 100svh;
    padding: 24px 20px max(28px, env(safe-area-inset-bottom));
    scroll-padding-top: 24px;
    scroll-behavior: smooth;
  }
  .trace-record dl { margin-bottom: 28px; }
  .trace-record dl > div { padding: 14px 0; }
  .trace-actions { display: grid; gap: 10px; }
}

/* Technical typography remains compact, but no longer fades into the surface. */
.core-orbit .orbit-label {
  font-size: max(10px, .66rem);
  line-height: 1.42;
  letter-spacing: .11em;
  color: #b8aeb3;
}
.system-name small,
.system-item > em,
.telemetry-readout,
.trace-record dt {
  font-size: 10px;
  line-height: 1.45;
}
.telemetry-readout { color: #aaa0a5; }

@media (max-width: 520px) {
  .core-orbit .orbit-label { font-size: 9px; }
  .system-name small,
  .system-item > em { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .trace-shell { transition: none; scroll-behavior: auto; }
}