/* ——— Shaping Meta ——— */
.shaping-meta {
  display: flex;
  gap: 24px;
  margin-top: 20px;
}

.meta-item {
  font-size: 0.78rem;
  color: var(--dust);
}

.meta-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
  margin-right: 6px;
}


/* ——— Source Quotes ——— */
.source-quotes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  max-width: 640px;
}

.source-quotes blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid var(--chalk);
}

.source-quotes blockquote p {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.source-quotes cite {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-style: normal;
  color: var(--sand);
}


/* ——— Problem / Outcome ——— */
.problem-outcome {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 20px;
  max-width: 800px;
}

.po-block {
  flex: 1;
  padding: 20px;
  border-radius: 4px;
}

.po-problem {
  background: #fef7f2;
  border: 1px solid #f0ddd4;
}

.po-outcome {
  background: #f0faf9;
  border: 1px solid #d0e8e6;
}

.po-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.po-problem .po-label { color: var(--ember); }
.po-outcome .po-label { color: #0D9488; }

.po-block p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.po-arrow {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: var(--sand);
  flex-shrink: 0;
}


/* ——— Requirements Table ——— */
.req-table {
  margin-top: 20px;
  background: white;
  border: 1px solid var(--chalk);
  border-radius: 4px;
  overflow: hidden;
  max-width: 700px;
}

.req-row {
  display: grid;
  grid-template-columns: 40px 1fr 70px;
  border-bottom: 1px solid #f5f3f0;
}

.req-row:last-child { border-bottom: none; }

.req-header {
  background: #faf9f7;
}

.req-header > div {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
}

.req-id {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--dust);
}

.req-desc {
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--ink);
  border-left: 1px solid #f5f3f0;
  border-right: 1px solid #f5f3f0;
}

.req-status {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.req-core { color: var(--ember); }
.req-must { color: var(--ink); }
.req-nice { color: var(--sand); }


/* ——— Parts Tables ——— */
.parts-table {
  margin-top: 20px;
  background: white;
  border: 1px solid var(--chalk);
  border-radius: 4px;
  overflow: hidden;
  max-width: 700px;
}

.parts-table-dim {
  opacity: 0.7;
}

.parts-header {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
  padding: 10px 16px;
  background: #faf9f7;
  border-bottom: 1px solid #f5f3f0;
}

.parts-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  border-bottom: 1px solid #f5f3f0;
}

.parts-row:last-child { border-bottom: none; }

.parts-flagged {
  background: #fef7f2;
}

.parts-id {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--dust);
  border-right: 1px solid #f5f3f0;
}

.parts-desc {
  padding: 10px 16px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
}

.parts-flag {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ember);
  margin-left: 6px;
}

code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: #f0ede8;
  padding: 1px 5px;
  border-radius: 3px;
}


/* ——— Shape Badges ——— */
.shape-badge {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 8px;
}

.shape-selected {
  background: var(--ember);
  color: white;
}

.shape-rejected {
  background: #eee;
  color: var(--sand);
}


/* ——— Fit Check Table ——— */
.fit-table {
  margin-top: 20px;
  background: white;
  border: 1px solid var(--chalk);
  border-radius: 4px;
  overflow: hidden;
  max-width: 700px;
}

.fit-row {
  display: grid;
  grid-template-columns: 36px 1fr 50px 40px 40px 40px;
  border-bottom: 1px solid #f5f3f0;
}

.fit-row:last-child { border-bottom: none; }

.fit-header {
  background: #faf9f7;
}

.fit-header > div {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}

.fit-total {
  background: #faf9f7;
  font-weight: 700;
}

.fit-id {
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--dust);
}

.fit-desc {
  padding: 8px 10px;
  font-size: 0.72rem;
  color: var(--ink);
  border-left: 1px solid #f5f3f0;
}

.fit-pri {
  padding: 8px 6px;
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sand);
  text-align: center;
  border-left: 1px solid #f5f3f0;
}

.fit-a, .fit-b, .fit-c {
  padding: 8px 6px;
  text-align: center;
  font-size: 0.78rem;
  border-left: 1px solid #f5f3f0;
}

.fit-pass { color: #16a34a; }
.fit-fail { color: #dc2626; }

.fit-header .fit-a {
  background: rgba(212, 88, 10, 0.08);
  color: var(--ember);
}


/* ——— Breadboard Grid ——— */
.breadboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
  max-width: 700px;
}

.bb-card {
  background: white;
  border: 1px solid var(--chalk);
  padding: 16px;
  border-radius: 4px;
  text-align: center;
}

.bb-num {
  font-family: var(--sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.bb-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 8px;
}

.bb-detail {
  font-size: 0.65rem;
  color: var(--dust);
  line-height: 1.4;
}


/* ——— Spike Steps ——— */
.spike-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
}

.spike-step {
  display: grid;
  grid-template-columns: 28px 200px 1fr;
  gap: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--chalk);
}

.spike-step:last-child { border-bottom: none; }

.spike-num {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ember);
  padding-top: 2px;
}

.spike-file {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--dust);
  padding-top: 2px;
}

.spike-desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
}

.spec-list {
  padding-left: 20px;
  margin: 12px 0;
}

.spec-list li {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 4px;
}


/* ——— Mobile ——— */
@media (max-width: 640px) {
  .shaping-meta {
    flex-direction: column;
    gap: 8px;
  }

  .problem-outcome {
    flex-direction: column;
  }

  .po-arrow {
    transform: rotate(90deg);
    justify-content: center;
  }

  .fit-row {
    grid-template-columns: 28px 1fr 40px 32px 32px 32px;
  }

  .breadboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spike-step {
    grid-template-columns: 28px 1fr;
  }

  .spike-file {
    grid-column: 2;
    margin-bottom: 4px;
  }

  .spike-desc {
    grid-column: 2;
  }
}