/* ── Feed ── */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-6);
}
.feed-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.feed-card--mine { animation: feed-land var(--dur-base) var(--ease-out); }
@keyframes feed-land { from { transform: translateY(-8px); opacity: 0; } }

.feed-card__photo {
  width: 88px;
  height: 88px;
  font-size: var(--fs-2xl);
}
.feed-card__body { flex: 1; min-width: 0; }
.feed-card__who {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.feed-card__when { font-weight: var(--fw-regular); color: var(--c-kicap-3); }
.feed-card__dish {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.feed-card__venue { font-size: var(--fs-sm); color: var(--c-kicap-2); }
.feed-card__note {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
}

/* ── Placeholder screens (Search) ── */
.placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}
.placeholder__text { color: var(--c-kicap-2); }

/* ── Profile: test results ── */
.profile { padding: 0 var(--sp-4) var(--sp-8); }
.profile__section { margin-top: var(--sp-6); }
.profile__h {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.profile__p { font-size: var(--fs-sm); color: var(--c-kicap-2); }
.timings {
  width: 100%;
  margin: var(--sp-3) 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.timings th, .timings td {
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--c-line);
  text-align: right;
}
.timings th:first-child, .timings td:first-child { text-align: left; }
.timings th { font-weight: var(--fw-semibold); color: var(--c-kicap-2); }
.timings__over { color: var(--c-chilli); font-weight: var(--fw-bold); }
.timings__summary { font-weight: var(--fw-semibold); }
.profile__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}
/* Decide table: the outcome column is text, so it reads left-aligned. */
.timings--decide th:nth-child(2), .timings--decide td:nth-child(2) { text-align: left; }