/* Surfaces layout skeleton - scene agents append visuals below */

.surfaces {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

.surfaces .shell {
  display: grid;
  gap: 1.25rem;
}

.surfaces .section-head {
  max-width: 22ch;
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding-block: 0.15rem;
}

.surfaces .section-support {
  max-width: 48ch;
  margin-bottom: 0;
  /* Solid band so frosted sticky nav cannot ghost this copy onto the canvas. */
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding-block: 0.2rem;
}

.surface-stage {
  position: relative;
  width: 100%;
  /*
   * Height chosen so the width-fit figure's fixed FIT_MARGIN bands leave
   * ink occupying ≥88% of the stage (shorter stages drop below that floor).
   */
  /* Floor keeps fixed FIT_MARGIN from dropping ink fill below 88%. */
  height: clamp(640px, 72svh, 680px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

.surface-stage [data-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.surface-caption {
  min-height: 3.2rem;
  font-size: var(--type-support);
  line-height: var(--lh-support);
  color: var(--ink-muted);
  max-width: 42rem;
}

.surface-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.surface-controls [role="tab"] {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  padding: 1rem 0.9rem;
  text-align: left;
  border-right: 1px solid var(--line);
  color: var(--ink-muted);
  transition: color 180ms var(--ease-css), background 180ms var(--ease-css);
}

.surface-controls [role="tab"]:last-child {
  border-right: 0;
}

.surface-controls [role="tab"][aria-selected="true"] {
  color: var(--ink);
  background: var(--accent-soft);
}

.surface-controls .s-name {
  font-size: var(--type-support);
  font-weight: 600;
  color: inherit;
}

.surface-controls .s-scope {
  font-size: var(--type-support);
  line-height: 1.4;
  color: var(--ink-muted);
}

.surface-controls .s-state {
  font-family: var(--mono);
  font-size: var(--type-mono);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.surface-controls [role="tab"][aria-selected="true"] .s-state {
  color: var(--accent);
}

@media (max-width: 999px) {
  .surface-stage {
    height: clamp(520px, 68svh, 580px);
  }

  .surface-controls {
    grid-template-columns: 1fr 1fr;
  }

  .surface-controls [role="tab"]:nth-child(2) {
    border-right: 0;
  }

  .surface-controls [role="tab"]:nth-child(1),
  .surface-controls [role="tab"]:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 639px) {
  .surface-stage {
    height: clamp(420px, 62svh, 480px);
  }

  .surface-controls {
    grid-template-columns: 1fr;
  }

  .surface-controls [role="tab"] {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .surface-controls [role="tab"]:last-child {
    border-bottom: 0;
  }

  .surface-controls [role="tab"]:nth-child(1),
  .surface-controls [role="tab"]:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

/* scene-owned rules below */

.surfaces .shell {
  gap: 0.85rem;
}

.surface-stage {
  height: clamp(640px, 72svh, 680px);
  overflow: hidden;
}

.surface-caption {
  min-height: 1.35rem;
  margin: 0;
  padding: 0;
}

.surface-stage .surf-label {
  position: absolute;
  z-index: 2;
  max-width: 11rem;
  padding: 0.1rem 0.15rem;
  font-family: var(--mono);
  font-size: var(--type-mono);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  line-height: var(--lh-mono);
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}

.surface-stage .surf-label.is-left {
  transform: translateY(-50%);
  text-align: left;
}

.surface-stage .surf-label.is-right {
  transform: translate(-100%, -50%);
  text-align: right;
}

.surfaces .surface-controls [role="tab"] {
  background: transparent !important;
  background-color: transparent !important;
  transition: color 180ms var(--ease-css);
  box-shadow: none;
}

.surfaces .surface-controls [role="tab"][aria-selected="true"] {
  color: var(--ink);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: inset 0 2px 0 0 var(--accent);
}

.surfaces .surface-controls [role="tab"][aria-selected="true"] .s-name {
  color: var(--ink);
}

.surface-controls [role="tab"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

@media (max-width: 999px) {
  .surface-stage {
    height: clamp(520px, 68svh, 580px);
  }
}

@media (max-width: 639px) {
  .surface-stage {
    height: clamp(420px, 62svh, 480px);
  }

  .surface-stage .surf-label {
    max-width: 9rem;
    white-space: normal;
  }
}