/*
 * Kickopedia Engineering Foundations v12.4
 * Small additions to the shared Knowledge Depth layout.
 */

.engineering-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.engineering-principle {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.engineering-principle strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--accent-strong);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.engineering-principle p {
  margin: 0;
  color: var(--text-soft);
  font-size: .9rem;
}

.engineering-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.engineering-tool {
  display: flex;
  min-height: 24rem;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}

.engineering-tool h3 {
  margin: .9rem 0 .6rem;
}

.engineering-tool > p {
  color: var(--text-soft);
  font-size: .9rem;
}

.engineering-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: auto;
}

.engineering-fields.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.engineering-field {
  display: grid;
  gap: .35rem;
}

.engineering-field label {
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 700;
}

.engineering-field input,
.engineering-field select {
  width: 100%;
  min-height: 2.8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

.engineering-result {
  min-height: 5.2rem;
  margin: 1rem 0 0;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  color: var(--text-soft);
  font-size: .85rem;
}

.engineering-result strong {
  color: var(--text);
}

.engineering-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .55rem;
}

.engineering-mode-list span {
  display: inline-flex;
  padding: .25rem .48rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text-soft);
  font-size: .68rem;
}

.engineering-equation {
  margin: 1rem 0;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
}

.engineering-checklist {
  counter-reset: engineering-check;
  display: grid;
  gap: .65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.engineering-checklist li {
  counter-increment: engineering-check;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin: 0;
}

.engineering-checklist li::before {
  content: counter(engineering-check, decimal-leading-zero);
  color: var(--accent-strong);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
}

@media (max-width: 64rem) {
  .engineering-tools {
    grid-template-columns: 1fr;
  }

  .engineering-tool {
    min-height: 0;
  }
}

@media (max-width: 46rem) {
  .engineering-principles {
    grid-template-columns: 1fr;
  }

  .engineering-fields.three {
    grid-template-columns: 1fr;
  }
}