/* Layout glue only. Key drawing comes from the unmodified eDEX-UI CSS
   in /vendor/edex/keyboard.css, isolated inside <edex-original-keyboard>. */
@media (min-width: 901px) {
  .edex-grid { grid-template-rows: minmax(0, 1fr) 33vh; }
}

.keyboard-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(170, 207, 209, 0.38);
  border-top: 1px solid rgba(170, 207, 209, 0.3);
  border-radius: 0;
  background: linear-gradient(90deg, #05080d 1.85vh, transparent 1%) center,
    linear-gradient(#05080d 1.85vh, transparent 1%) center,
    #262828;
  background-size: 2.04vh 2.04vh;
  box-shadow: none;
  opacity: 1;
  transform: none;
  overflow: hidden;
}
.keyboard-panel.is-deployed { animation: none; opacity: 1; transform: none; }
.keyboard-panel::before,
.keyboard-panel::after,
.keyboard-panel.is-deployed::before,
.keyboard-panel.is-typing::after { display: none !important; animation: none !important; }
.keyboard-panel > .edex-strip,
.keyboard-panel .keyboard-live,
.keyboard-panel .mobile-keyboard-footer { display: none !important; }
.keyboard-panel edex-original-keyboard { flex: 0 0 100%; width: 100%; height: 100%; }

@media (min-width: 1440px) {
  .edex-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .edex-grid > .system-rail { grid-column: 1 / 3; }
  .edex-grid > .terminal-panel { grid-column: 3 / 11; }
  .edex-grid > .network-rail { grid-column: 11 / 13; }
  .edex-grid > .filesystem-panel { grid-column: 1 / 5; }
  .edex-grid > .keyboard-panel { grid-column: 5 / 13; }
}

@media (max-width: 900px) {
  .keyboard-panel,
  .edex-shell.is-mobile-landscape .keyboard-panel.is-mobile-current {
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}

.keyboard-preview-page {
  margin: 0;
  min-height: 100vh;
  color: #aacfd1;
  background: linear-gradient(90deg, #05080d 1.85vh, transparent 1%) center,
    linear-gradient(#05080d 1.85vh, transparent 1%) center,
    #262828;
  background-size: 2.04vh 2.04vh;
  font-family: "SF Mono", Menlo, monospace;
}
.keyboard-preview-stage {
  display: grid;
  grid-template-columns: 44.5vw 55.5vw;
  grid-template-rows: minmax(0, 1fr) 33vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.keyboard-preview-source {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 2;
  color: #aacfd1;
  font: 400 11px/1.5 "SF Mono", Menlo, monospace;
}
.keyboard-preview-source a { color: inherit; text-underline-offset: 3px; }
.keyboard-preview-stage > .keyboard-panel {
  grid-column: 2;
  grid-row: 2;
  width: 55.5vw;
  height: 33vh;
}
@media (max-width: 900px) {
  .keyboard-preview-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) min(250px, 37vh);
  }
  .keyboard-preview-stage > .keyboard-panel {
    grid-column: 1;
    width: 100vw;
    height: min(250px, 37vh);
  }
}