/* fix-bug1-capture-reach-single-block.css
 * Bug 1: Capture row + Reach row should read as ONE grouped card.
 *
 * Before: two visually separate rectangles for one mental concept
 *         ("the person you capture is the person you reach").
 * After:  one card with hairline divider between the capture buttons (top)
 *         and the reach buttons (bottom), shared background and border.
 *
 * Design philosophy: Quiet Operator — flat by default, depth from hairline
 * borders. Mental model and visual model now match.
 */

.capture-block {
  padding: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  box-shadow: none;
  margin-bottom: 14px;
}

/* heading sits flush inside the card, no extra padding */
.capture-block > .ph {
  padding: 0 4px 10px 4px !important;
  margin: 0;
}

/* capture buttons row — no rounding on bottom corners, sits flush against divider */
.capture-block .cap3 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.capture-block .cap3 > button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 13px/1 var(--body, system-ui);
  color: var(--ink, #1a1a1a);
  transition: background 0.15s;
}

.capture-block .cap3 > button.primary {
  background: var(--sage900);
  color: var(--on-primary, #fff);
}

.capture-block .cap3 > button:hover:not(.primary) {
  background: var(--sage100, rgba(0,0,0,0.04));
}

.capture-block .cap3 > button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* vertical hairline dividers between the three capture buttons */
.capture-block .cap3 > .hl {
  background: var(--line, rgba(0,0,0,0.08));
  width: 1px;
  margin: 8px 0;
  align-self: stretch;
}

/* the horizontal hairline that joins capture and reach — this is the key fix */
.capture-block .reach {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 12px 0 0 0 !important;
  padding: 12px 0 0 0 !important;
  border-top: 1px solid var(--line, rgba(0,0,0,0.08)) !important;
}

.capture-block .reach > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.capture-block .reach > button:hover {
  background: var(--sage100, rgba(0,0,0,0.04));
}

.capture-block .reach > button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sage800, #2d5a3d);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capture-block .reach > button span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #6b6b6b);
}

/* mobile: stack capture vertically, keep reach in 5-up but smaller */
@media (max-width: 720px) {
  .capture-block .cap3 {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto 1px auto;
    gap: 0;
  }
  .capture-block .cap3 > .hl {
    width: auto;
    height: 1px;
    margin: 0 8px;
  }
}