/* Final overrides for the interactive food portion plate. Loaded after app.css. */
.portion-visualizer {
  grid-template-columns: minmax(190px, 1fr) 320px;
}

.plate-stage {
  min-height: 304px;
}

.plate-shell {
  width: 280px;
  height: 280px;
}

.plate-center {
  width: 154px;
  height: 120px;
  padding: 10px 11px;
  border-width: 2px;
  border-radius: 38px;
}

.plate-calorie-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .25rem;
}

.plate-calorie-value strong {
  font-size: 1.3rem;
}

.plate-calorie-value span {
  font-size: .56rem !important;
}

.plate-center-macros {
  display: grid;
  width: 100%;
  margin-top: .4rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(51, 45, 40, .23);
  grid-template-columns: repeat(3, 1fr);
  gap: .28rem;
}

.plate-center-macros span {
  display: flex;
  min-width: 0;
  padding: .25rem .12rem;
  border: 1px solid rgba(51, 45, 40, .16) !important;
  border-radius: 7px;
  flex-direction: column;
  align-items: center;
  color: #332d28 !important;
}

.plate-center-macros span.protein { background: rgba(120, 183, 152, .24); }
.plate-center-macros span.carbs { background: rgba(240, 195, 79, .25); }
.plate-center-macros span.fat { background: rgba(133, 191, 218, .27); }
.plate-center-macros b { font-size: .68rem; line-height: 1.15; }
.plate-center-macros small { font-size: .38rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.plate-center-macros .protein b { color: #3b8063; }
.plate-center-macros .carbs b { color: #a87900; }
.plate-center-macros .fat b { color: #317f9f; }

@media (max-width: 680px) {
  .portion-visualizer { grid-template-columns: 1fr; }
  .plate-quick-picks > div { justify-content: center; }
  .plate-stage { min-height: 280px; }
  .plate-shell { width: 250px; height: 250px; }
  .plate-center { width: 144px; height: 112px; padding: 8px 9px; }
  .plate-center-macros b { font-size: .62rem; }
  .plate-center-macros small { font-size: .35rem; }
}