.phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}

.phase-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.phase-grid span {
  display: block;
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.phase-grid b { display: block; margin-top: 2px; font-size: 14px; }
.phase-grid p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.weather em {
  display: block;
  width: max-content;
  margin-bottom: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff0dc;
  color: #92551e;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.xhs-pending {
  margin-top: 14px;
  padding: 20px;
  border: 1px dashed #d8aeb4;
  border-radius: 12px;
  background: #fff;
}

.xhs-pending b { color: #b94d5b; font-size: 13px; }
.xhs-pending p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.source-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.source-pills a {
  padding: 5px 9px;
  border: 1px solid #dfd9cb;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}

.source-pills a:hover { border-color: var(--green); }

.food-block { background: #fffdf8; }

.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.food-card {
  padding: 16px;
  border: 1px solid #e6dfd1;
  border-radius: 12px;
  background: #faf8f1;
}

.food-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.food-title h4 { margin: 0; font-size: 14px; }
.food-title span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff0dc;
  color: #92551e;
  font-size: 9px;
  font-weight: 800;
}

.food-card p { margin: 8px 0 0; color: #53605a; font-size: 11px; line-height: 1.6; }
.food-card p b { color: var(--ink); }
.food-card .food-risk { color: #8b4c3e; }
.food-empty { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

@media (max-width: 800px) {
  .phase-grid { grid-template-columns: 1fr; }
  .food-grid { grid-template-columns: 1fr; }
}

@media print {
  .phase-grid { grid-template-columns: repeat(4, 1fr); }
}