/* Shared Grid editor cells.
   Grid cells remain semantic buttons for keyboard/accessibility, but deliberately
   do not look like action buttons. Link this stylesheet from both Main and Console. */

.participant-grid-slots,
.grid-editor-slots,
.percussion-grid-slots,
.host-surface-preview {
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(78px,1fr));
  padding:10px;
  border:2px solid currentColor;
  background:color-mix(in srgb,var(--mmf-cyan,#42d8df) 6%,transparent);
}

.participant-grid-slot,
.grid-editor-slot,
.percussion-grid-slot,
.host-surface-cell {
  position:relative;
  min-height:62px;
  padding:10px 8px;
  border:2px solid color-mix(in srgb,currentColor 68%,transparent);
  border-radius:2px;
  box-shadow:none!important;
  transform:none!important;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  background:color-mix(in srgb,var(--mmf-cyan,#42d8df) 10%,#11151b);
  color:#f6f7f8;
}

.participant-grid-slot:hover,
.grid-editor-slot:hover,
.percussion-grid-slot:hover,
.host-surface-cell:hover {
  transform:none!important;
  border-color:var(--mmf-cyan,#42d8df);
  background:color-mix(in srgb,var(--mmf-cyan,#42d8df) 16%,#11151b);
}

.participant-grid-slot[data-slot-state="empty"],
.grid-editor-slot[data-slot-state="empty"],
.percussion-grid-slot[data-slot-state="empty"],
.host-surface-cell[data-slot-state="empty"] {
  border-style:dashed;
  color:#aeb4c5;
  background:color-mix(in srgb,#6f7480 12%,#11151b);
}

.participant-grid-slot[data-slot-state="assigned"],
.grid-editor-slot[data-slot-state="assigned"],
.percussion-grid-slot[data-slot-state="assigned"],
.host-surface-cell[data-slot-state="assigned"] {
  border-style:solid;
  background:color-mix(in srgb,var(--mmf-lime,#b9ff45) 14%,#11151b);
}

.participant-grid-slot.is-editing,
.participant-grid-slot.armed,
.grid-editor-slot.is-editing,
.grid-editor-slot.armed,
.percussion-grid-slot.is-editing,
.percussion-grid-slot.armed,
.host-surface-cell.is-editing,
.host-surface-cell.armed {
  border-color:var(--mmf-lime,#b9ff45);
  outline:3px solid color-mix(in srgb,var(--mmf-lime,#b9ff45) 38%,transparent);
  outline-offset:2px;
  background:color-mix(in srgb,var(--mmf-lime,#b9ff45) 22%,#11151b);
}

.participant-grid-slot.is-sounding,
.participant-grid-slot.sounding,
.grid-editor-slot.is-sounding,
.grid-editor-slot.sounding,
.percussion-grid-slot.is-sounding,
.percussion-grid-slot.sounding,
.host-surface-cell.is-sounding,
.host-surface-cell.sounding {
  background:var(--mmf-cyan,#42d8df);
  color:#071013;
}

.participant-grid-slot.error,
.grid-editor-slot.error,
.percussion-grid-slot.error,
.host-surface-cell.error {
  border-color:#ff5f6d;
  background:color-mix(in srgb,#ff5f6d 18%,#11151b);
}

.host-surface-cell:disabled {
  cursor:default;
  opacity:.84;
}

/* Console light theme overrides keep the same pad language without dark text on
   dark gray or the raised-action-button treatment. */
html:not([data-theme="dark"]) .console-workspace .grid-editor-slot,
html:not([data-theme="dark"]) .console-workspace .percussion-grid-slot,
html:not([data-theme="dark"]) .console-workspace .host-surface-cell {
  color:#0b0b0b;
  background:color-mix(in srgb,var(--cyan,#42d8df) 16%,#fffdf7);
}

html:not([data-theme="dark"]) .console-workspace .grid-editor-slot[data-slot-state="empty"],
html:not([data-theme="dark"]) .console-workspace .percussion-grid-slot[data-slot-state="empty"],
html:not([data-theme="dark"]) .console-workspace .host-surface-cell[data-slot-state="empty"] {
  color:#5f5c55;
  background:#eee9dc;
}

html:not([data-theme="dark"]) .console-workspace .grid-editor-slot[data-slot-state="assigned"],
html:not([data-theme="dark"]) .console-workspace .percussion-grid-slot[data-slot-state="assigned"],
html:not([data-theme="dark"]) .console-workspace .host-surface-cell[data-slot-state="assigned"] {
  background:color-mix(in srgb,var(--lime,#b9ff45) 26%,#fffdf7);
}