/* v2 baseline layout lab — variants scoped by data-layout on .nr-v2-baseline-inner */

/* --- Shared horizontal legend --- */
.v2-fs-legend--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  align-content: flex-start;
}

.v2-fs-legend--horizontal .fs-legend-title {
  width: 100%;
  margin-bottom: 4px;
  font-size: 10px;
}

.v2-fs-legend--horizontal .fs-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  margin: 0;
  font-size: 9px;
}

.v2-fs-legend--horizontal .fs-legend-dot {
  width: 8px;
  height: 8px;
}

/* --- Multi-column legend (stack + unified) --- */
.v2-fs-legend--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  align-content: start;
}

.v2-fs-legend--grid .fs-legend-title {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.v2-fs-legend--grid .fs-legend-item {
  display: flex;
  align-items: center;
  margin: 2px 0;
}

@media (min-width: 420px) {
  .nr-v2-baseline-inner[data-layout="stack"] .v2-fs-legend--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- stack: canvas → layer board → legend --- */
.nr-v2-baseline-inner[data-layout="stack"] .v2-fs-legend.fs-legend {
  order: 4;
}

.nr-v2-baseline-inner[data-layout="stack"] .fs-inspector {
  order: 3;
}

/* --- unified: single meta card below canvas --- */
.nr-v2-baseline-inner[data-layout="unified"] .v2-fs-panel .fs-inspector {
  display: none;
}

.nr-v2-baseline-inner[data-layout="unified"] > .v2-fs-legend {
  display: none;
}

.nr-v2-baseline-inner[data-layout="unified"] .nr-v2-meta-card {
  order: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--nr-border, #30363d);
  border-radius: 8px;
  background: var(--nr-panel, #161b22);
}

.nr-v2-baseline-inner[data-layout="unified"] .nr-v2-meta-card .fs-inspector {
  order: unset;
  max-height: 160px;
  border: none;
  padding: 0;
  background: transparent;
}

.nr-v2-baseline-inner[data-layout="unified"] .nr-v2-meta-card .v2-fs-legend {
  order: unset;
  max-height: none;
  overflow: visible;
  border: none;
  padding: 0;
  background: transparent;
}

.nr-v2-baseline-inner[data-layout="unified"] .v2-fs-legend--grid .fs-legend-item {
  display: flex;
  margin: 2px 0;
}

@media (max-width: 380px) {
  .nr-v2-baseline-inner[data-layout="unified"] .nr-v2-meta-card {
    grid-template-columns: 1fr;
  }
}

/* --- legend-footer: reserved strip inside canvas wrap --- */
.nr-v2-baseline-inner[data-layout="legend-footer"] .nr-v2-baseline-canvas-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.nr-v2-baseline-inner[data-layout="legend-footer"] .nr-v2-canvas-stage {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.nr-v2-baseline-inner[data-layout="legend-footer"] .nr-v2-baseline-canvas-wrap .v2-fs-legend {
  flex: 0 0 auto;
  order: unset;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: none;
  border-top: 1px solid var(--nr-border, #30363d);
  border-radius: 0;
  background: var(--nr-panel, #161b22);
}

/* --- legend-inset: single column in top-left diagram gap --- */
.nr-v2-baseline-inner[data-layout="legend-inset"] .nr-v2-baseline-canvas-wrap {
  position: relative;
  justify-content: center;
  align-items: center;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .nr-v2-canvas-stage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .nr-v2-canvas-legend-anchor {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .nr-v2-canvas-legend-anchor .v2-fs-canvas {
  display: block;
  max-width: 100%;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .nr-v2-canvas-legend-anchor .v2-fs-legend {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2;
  order: unset;
  width: auto;
  max-width: min(148px, 42%);
  max-height: 38%;
  margin: 0;
  padding: 8px 9px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--nr-border, #30363d);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.92);
  pointer-events: none;
  font-size: 10px;
  line-height: 1.3;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .v2-fs-legend--inset-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .v2-fs-legend--inset-column .fs-legend-title {
  margin-bottom: 4px;
  font-size: 9px;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .v2-fs-legend--inset-column .fs-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  font-size: 8px;
  line-height: 1.25;
  white-space: normal;
}

.nr-v2-baseline-inner[data-layout="legend-inset"] .v2-fs-legend--inset-column .fs-legend-dot {
  width: 7px;
  height: 7px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Layout lab picker (step 0 only) */
.nr-v2-layout-lab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px dashed var(--nr-border, #30363d);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.04);
  font-size: 11px;
}

.nr-v2-layout-lab label {
  color: var(--nr-dim, #8b949e);
  white-space: nowrap;
}

.nr-v2-layout-lab select {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--nr-border, #30363d);
  background: var(--nr-panel, #161b22);
  color: var(--nr-text, #c9d1d9);
}

.nr-v2-step-0 .nr-v2-layout-lab {
  display: flex;
}

.nr-v2-layout-lab[hidden] {
  display: none !important;
}