/* Matrix Workbench — tool-specific styles */

.mx-size-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 575.98px) { .mx-size-row { grid-template-columns: 1fr; } }
.mx-custom .form-label { font-size: 0.7rem; }

/* Grid wrap with overflow */
.mx-grid-wrap {
  margin-top: 0.4rem;
  overflow-x: auto;
}
.mx-grid {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 5%, transparent);
  border-radius: 0.6rem;
  min-width: fit-content;
  border-left: 3px solid var(--cluster-dark, #1A237E);
  border-right: 3px solid var(--cluster-dark, #1A237E);
}
.mx-grid-vector { max-width: 100px; }
.mx-cell {
  min-width: 60px;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: 0.4rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  text-align: right;
  background: var(--bs-body-bg, #fff);
  color: var(--evvy-text, #1e293b);
}
.mx-cell:focus {
  outline: none;
  border-color: var(--cluster-dark, #1A237E);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cluster-dark, #1A237E) 25%, transparent);
}

/* Operation grid */
.mx-op-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.4rem;
}
@media (max-width: 767.98px) { .mx-op-grid { grid-template-columns: repeat(2, 1fr); } }
.mx-op-chip {
  padding: 0.5rem 0.45rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  background: var(--bs-body-bg, #fff);
  border-radius: 0.55rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--evvy-text-secondary, #555);
  cursor: pointer; transition: all 180ms ease;
}
.mx-op-chip:hover {
  border-color: var(--cluster-dark, #1A237E);
  color: var(--cluster-dark, #1A237E);
  transform: translateY(-1px);
}
.mx-op-chip.mx-active {
  background: var(--cluster-dark, #1A237E);
  color: var(--cluster-text, #fff);
  border-color: var(--cluster-dark, #1A237E);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cluster-dark, #1A237E) 25%, transparent);
}

/* Output card */
.mx-output-card {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  background: var(--bs-body-bg, #fff);
  overflow-x: auto;
}
.mx-output-header {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--cluster-dark, #1A237E);
  margin-bottom: 0.55rem;
}
.mx-output-grid {
  display: grid;
  gap: 0.25rem;
  padding: 0.4rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 4%, transparent);
  border-radius: 0.5rem;
  border-left: 3px solid var(--cluster-dark, #1A237E);
  border-right: 3px solid var(--cluster-dark, #1A237E);
  min-width: fit-content;
}
.mx-out-cell {
  background: var(--bs-body-bg, #fff);
  border-radius: 0.3rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 50px;
}

/* Eigenvalue list */
.mx-eig-row {
  padding: 0.55rem 0.75rem;
  margin-top: 0.4rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 6%, transparent);
  border-radius: 0.5rem;
  border-left: 3px solid var(--cluster-dark, #1A237E);
}
.mx-eig-row strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--cluster-dark, #1A237E); }
.mx-eig-vec { font-size: 0.78rem; color: var(--evvy-text-secondary, #777); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }

/* Properties summary */
.mx-props {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  margin-top: 1rem;
}
@media (max-width: 575.98px) { .mx-props { grid-template-columns: repeat(2, 1fr); } }
.mx-prop {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 5%, transparent);
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  text-align: center;
}
.mx-prop span { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--evvy-text-secondary, #777); font-weight: 700; }
.mx-prop strong { display: block; margin-top: 0.15rem; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--cluster-dark, #1A237E); }

[data-bs-theme="dark"] .mx-output-card { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 6%, #1a1a1a); }
[data-bs-theme="dark"] .mx-output-grid { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 10%, #1a1a1a); }
[data-bs-theme="dark"] .mx-out-cell { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 4%, #1a1a1a); }
[data-bs-theme="dark"] .mx-cell { background: #1e1e1e; color: #fafafa; border-color: rgba(255,255,255,0.1); }
[data-bs-theme="dark"] .mx-grid { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 14%, #1a1a1a); }

/* Pro blocks */
.mx-pro-block {
  margin-top: 1.1rem;
  padding: 1rem 1.15rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 14%, transparent);
  background: var(--bs-body-bg, #fff);
}
.mx-pro-header {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--cluster-dark, #1A237E);
  margin-bottom: 0.6rem;
}
.mx-pro-tease {
  padding: 0.85rem 1rem;
  background: var(--cluster-surface, #E8EAF6);
  border-radius: 0.65rem;
  font-size: 0.85rem; text-align: center; line-height: 1.55;
  color: var(--evvy-text-secondary, #555);
}
.mx-pro-tease i.bi-lock-fill { display: block; font-size: 1.25rem; margin-bottom: 0.3rem; color: var(--evvy-subscriber-color, #b97a30); }
.mx-pro-tease .evvy-premium-badge { display: inline-block; margin-top: 0.45rem; text-decoration: none; }
[data-bs-theme="dark"] .mx-pro-block { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 6%, #1a1a1a); }
[data-bs-theme="dark"] .mx-pro-tease { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 14%, #1a1a1a); }

/* Steps */
.mx-steps { max-height: 380px; overflow-y: auto; }
.mx-step {
  margin-top: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 4%, transparent);
  border-radius: 0.5rem;
}
.mx-step-desc { font-size: 0.78rem; font-weight: 600; color: var(--cluster-dark, #1A237E); margin-bottom: 0.3rem; }
.mx-step-grid {
  display: grid; gap: 0.2rem;
  font-size: 0.72rem;
}
.mx-step-grid .mx-out-cell { padding: 0.2rem 0.35rem; min-width: 40px; }
.mx-step-more { padding: 0.5rem; text-align: center; color: var(--evvy-text-secondary, #777); font-size: 0.78rem; }

.mx-def-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
@media (max-width: 575.98px) { .mx-def-card { grid-template-columns: 1fr; } }