/* A bright, high-contrast result panel for the focused calculator. */
.result-card {
  background: #edf2e5;
  color: #20372b;
  border: 1px solid #cbd6bf;
  box-shadow: 0 10px 30px rgb(39 61 50 / 5%);
}
.result-card .result-header { color: #435c37; }
.result-card .result-header .eyebrow { font-size: 11px; }
.result-card h2,
.result-card #result-title { color: #20372b; font-size: 23px; font-weight: 700; }
.result-card p { color: #435342; font-size: 14px; }
.result-card .placeholder-amount,
.result-card .result-amount { color: #20372b; }
.result-card .placeholder-amount > span,
.result-card .unit > span { color: #435342; }
.result-card .result-amount > #result-grams {
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -4px;
}
.result-card .unit { font-size: 29px; font-weight: 600; }
.result-card .unit > span { font-size: 15px; font-weight: 500; }
.result-card .result-summary { font-size: 15px; margin-top: 12px; }
.result-card .classification { color: #20372b !important; font-size: 16px !important; }
.result-card .result-divider { background: #c1ceb5; }
.result-card .formula-box { background: #fffefa; border: 1px solid #d5deca; padding: 16px 18px; }
.result-card .formula-box > span { color: #52644b; font-size: 12px; }
.result-card .formula-box > strong { color: #20372b; font-size: 21px; font-weight: 600; }
.result-card .result-note { color: #435342; font-size: 13px !important; border-left-color: #728d57; }
.result-card .result-total-note { font-size: 13px; line-height: 1.9; margin: 23px 0 6px; }
.result-card .copy-button { background: #273d32; color: #fffefa; font-size: 14px; padding: 16px; }
.result-card .copy-button:hover { background: #395340; }
.result-card .copy-status { color: #354b30; font-size: 12px !important; }
.result-card .changed { color: #8c3d21 !important; font-size: 13px !important; }
.workspace { margin-bottom: 56px; }
@media (max-width: 500px) {
  .result-card .result-amount > #result-grams { font-size: clamp(48px, 16vw, 66px); letter-spacing: -3px; }
  .result-card .unit { font-size: 24px; }
  .result-card .unit > span { font-size: 13px; }
  .result-card h2, .result-card #result-title { font-size: 21px; }
  .result-card .result-summary { font-size: 14px; }
  .workspace { margin-bottom: 32px; }
}