/* =========================================================
   matrix-summary.css - V4.3 Editable Summary review
   Three-column row (label / value / edit). Mobile collapses
   to label+edit on top row, value below.
   ========================================================= */

.matrix-summary .summary-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 14px 4px;
  border-top: 1px solid rgba(166, 124, 82, 0.18);
}

.matrix-summary .summary-row:first-of-type {
  border-top-color: rgba(166, 124, 82, 0.35);
}

.summary-label {
  font-family: "JetBrains Mono", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass, #a67c52);
  margin: 4px 0 0;
}

.summary-value {
  min-width: 0;
}

.summary-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(166, 124, 82, 0.40);
  background: rgba(16, 37, 30, 0.30);
  font-family: "Newsreader", Georgia, serif;
  font-size: 13px;
  color: var(--ivory, #ece4d2);
}

.summary-single {
  font-family: "Newsreader", Georgia, serif;
  font-size: 15px;
  color: var(--ivory, #ece4d2);
  overflow-wrap: anywhere;
}

.summary-empty {
  color: var(--stone-dim, #7a7264);
  font-style: italic;
}

.summary-edit {
  background: transparent;
  border: 1px solid rgba(166, 124, 82, 0.40);
  color: var(--brass-bright, #c79c70);
  font-family: "JetBrains Mono", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}

.summary-edit:hover {
  border-color: var(--brass-bright, #c79c70);
  color: var(--ivory, #ece4d2);
}

@media (max-width: 640px) {
  .matrix-summary .summary-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label edit" "value value";
    gap: 8px;
  }
  .summary-label { grid-area: label; }
  .summary-edit { grid-area: edit; }
  .summary-value { grid-area: value; }
}