/* Asciiscope XY face — character-grid phosphor (layout class node-matrix-display-*) */

.node-matrix-display-face {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 0.36fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(80, 140, 200, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(40, 20, 80, 0.14), transparent 42%),
    #020208;
  box-sizing: border-box;
}

.node-matrix-display-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(90, 160, 220, 0.3);
  border-radius: 4px;
  background: #010104;
}

/* image-rendering left to CSS default + .pixelated-canvas-zoom (LCD path). */
.node-matrix-display-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.node-matrix-display-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

.node-matrix-display-ramp-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: rgba(160, 210, 245, 0.88);
  font: 700 0.68rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.node-matrix-display-ramp-hint {
  color: rgba(120, 160, 200, 0.72);
  font-size: 0.58rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.node-matrix-display-glyph-ramp {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 4px 6px;
  resize: none;
  overflow: auto;
  border: 1px solid rgba(90, 160, 220, 0.3);
  border-radius: 4px;
  background: rgba(2, 6, 14, 0.92);
  color: #9fdcff;
  font: 600 0.78rem/1.35 "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

.node-matrix-display-glyph-ramp:focus {
  outline: 1px solid rgba(120, 210, 255, 0.55);
  outline-offset: 0;
}

.node-matrix-display-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.node-matrix-display-tool {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(90, 160, 220, 0.28);
  border-radius: 3px;
  background: rgba(8, 14, 24, 0.9);
  color: rgba(170, 210, 240, 0.9);
  font: 600 0.58rem/1.2 "Cascadia Mono", Consolas, monospace;
  cursor: var(--node-dot-cursor);
}

.node-matrix-display-tool:hover {
  border-color: rgba(120, 200, 255, 0.45);
  color: #dff4ff;
}

@container (max-width: 280px) {
  .node-matrix-display-face {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .node-matrix-display-side {
    grid-template-rows: auto minmax(48px, 72px) auto;
  }
}

/* Fallback stack before apply writes --node-module-stack-rows.
   LayoutA: header | io | face | params | inset */
.dsp-node.matrix-display-layout:not(.module-stack) {
  grid-template-rows:
    var(--node-header-height)
    minmax(var(--node-io-section-min-height), auto)
    var(--node-module-scope-height)
    auto
    var(--node-module-bottom-gap-track, minmax(2px, 1fr));
}

.dsp-node.matrix-display-layout:not(.module-stack) > .dsp-node-io-section {
  grid-row: 2;
}

.dsp-node.matrix-display-layout > .node-matrix-display-face {
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  pointer-events: auto;
}

.dsp-node.matrix-display-layout:not(.module-stack) > .node-matrix-display-face {
  grid-row: 3;
}