@font-face {
  font-family: "Meal DM Sans";
  src: url("/fonts/meal-dm-sans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Meal Spectral";
  src: url("/fonts/meal-spectral-medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.add-meal-panel, .meal-entry, .food-dialog:has(.product-fields) {
  --meal-heading: "Meal Spectral", Georgia, serif;
  --meal-text: "Meal DM Sans", system-ui, sans-serif;
  --meal-ink: #263e30;
  --meal-secondary: #48624e;
  font-family: var(--meal-text);
  color: var(--meal-ink);
  line-height: 1.5;
}

.add-meal-panel {
  padding: clamp(1rem, 2.4vw, 2rem);
  border-top: 2px solid #bdcdb5;
  background: #f7f8f2;
}

.add-meal-panel > h4, .food-dialog:has(.product-fields) h2 {
  margin: 0;
  color: var(--meal-ink);
  font: 500 clamp(1.75rem, 1.42rem + 1.15vw, 2.5rem)/1.12 var(--meal-heading);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.add-meal-panel > h4 { margin-bottom: 1.25rem; }
.meal-entry { gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meal-entry > *, .meal-entry .ingredient-quantity > * { min-width: 0; }
.meal-entry > [data-meal-estimate]:empty { display: none; }

.meal-entry label, .product-reader > label, .product-fields label {
  color: var(--meal-ink);
  font: 650 1.03rem/1.4 var(--meal-text);
  letter-spacing: -.012em;
}

.meal-entry :is(input:not([type=checkbox]), select, textarea),
.food-dialog:has(.product-fields) :is(.food-search input, .product-fields input, .product-fields select) {
  font: 450 1.0625rem/1.45 var(--meal-text);
  letter-spacing: normal;
  color: var(--meal-ink);
}

.meal-entry input::placeholder, .meal-entry textarea::placeholder,
.food-dialog:has(.product-fields) input::placeholder { color: #637267; opacity: 1; }
.meal-entry .file-input { font-size: 1rem !important; }
.meal-entry ::file-selector-button {
  font: 600 1rem/1.4 var(--meal-text);
  color: var(--meal-ink);
  background: #e8eee2;
  border: 0;
  border-radius: .35rem;
  padding: .35rem .6rem;
  margin-inline-end: .6rem;
}

.meal-entry .ingredient-row {
  padding: .8rem clamp(.75rem, 1.8vw, 1.4rem) 1rem;
  background: #fffefa;
}

.meal-entry .ingredient-row legend, .meal-entry .meal-estimate h4 {
  color: var(--meal-ink);
  font: 500 clamp(1.4rem, 1.26rem + .55vw, 1.8rem)/1.2 var(--meal-heading);
  letter-spacing: -.025em;
}

.meal-entry .ingredient-results button {
  font: 550 1.05rem/1.4 var(--meal-text);
  padding-block: .65rem;
  overflow-wrap: anywhere;
}

.meal-entry .ingredient-results small { font-size: .92rem; font-weight: 400; }
.meal-entry .ingredient-row-actions .text-link { font: 600 .98rem/1.45 var(--meal-text); }
.meal-entry .ingredient-row-actions [data-use-label] { text-decoration: underline; text-underline-offset: .23em; }
.meal-entry summary, .product-fields summary { font: 600 1.04rem/1.45 var(--meal-text); }
.meal-entry .button, .food-dialog:has(.product-fields) :is(.button, .photo-actions label, .food-match) {
  font: 650 1.03rem/1.4 var(--meal-text);
  letter-spacing: -.01em;
  white-space: normal;
}

.meal-entry .product-result { padding: clamp(.9rem, 1.7vw, 1.4rem); }
.ingredient-total-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
}

.ingredient-total-heading > span, .meal-entry .estimate-total > span {
  font: 500 1.4rem/1.3 var(--meal-heading);
  letter-spacing: -.025em;
}

.ingredient-total-heading > strong, .meal-entry .estimate-total > strong {
  font: 650 1.35rem/1.3 var(--meal-text);
  color: var(--meal-ink);
}

.meal-entry .ingredient-feedback, .meal-entry .estimate-line, .product-fields output { font-size: 1.03rem; }
.meal-entry .ingredient-feedback, .meal-entry .product-result, .meal-entry .meal-estimate,
.product-fields { font-variant-numeric: tabular-nums; }
.meal-entry .macro-values:not(.compact), .product-fields .macro-values:not(.compact) {
  margin: .85rem 0 0;
  gap: .6rem 1rem;
  color: var(--meal-secondary);
}

.meal-entry .macro-values:not(.compact) b, .product-fields .macro-values:not(.compact) b {
  font: 650 1.14rem/1.4 var(--meal-text);
}

.meal-entry .macro-values.compact { font-size: .96rem; }

@media (max-width: 540px) {
  .meal-entry { column-gap: .65rem; }
  .meal-entry .ingredient-results button { flex-wrap: wrap; justify-content: start; gap: .1rem .6rem; }
  .meal-entry .ingredient-results small { text-align: start; }
  .meal-entry .ingredient-quantity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-dialog:has(.product-fields) .food-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .meal-entry, .meal-entry .ingredient-quantity,
  .food-dialog:has(.product-fields) .food-pair { grid-template-columns: minmax(0, 1fr); }
  .meal-entry .ingredient-results small { width: 100%; }
}

.add-meal-panel {
  overflow: hidden;
  padding: clamp(1.15rem, 2.5vw, 2rem);
  border: 1px solid #dfe7dc;
  border-top: 3px solid #789576;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8faf5 0%, #f3f6ef 100%);
}
.meal-entry-heading { margin: 0 0 1.35rem; }
.meal-entry-heading > span {
  color: #71876e;
  font: 750 .76rem/1.4 var(--meal-text);
  letter-spacing: .14em;
}
.meal-entry-heading > h4 {
  margin: .35rem 0 .3rem;
  color: var(--meal-ink);
  font: 500 clamp(1.8rem, 1.55rem + 1vw, 2.45rem)/1.1 var(--meal-heading);
  letter-spacing: -.035em;
}
.meal-entry-heading > p { max-width: 46rem; margin: 0; color: #667668; font-size: 1rem; line-height: 1.55; }
.meal-entry { gap: 1rem 1.2rem; }
.meal-entry > label:not(.meal-photo-label) { display: grid; align-content: start; gap: .35rem; }
.meal-entry :is(input:not([type=checkbox]), select, textarea) {
  min-height: 3.15rem;
  padding: .78rem .9rem;
  border: 1px solid #cbd7c7;
  border-radius: 11px;
  background-color: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.meal-entry :is(input:not([type=checkbox]), select, textarea):focus-visible,
.product-fields :is(input:not([type=checkbox]), select):focus-visible {
  outline: none;
  border-color: #6d8d6b;
  box-shadow: 0 0 0 3px #6d8d6b24;
}
.meal-entry .ingredient-row {
  margin-block: .2rem .35rem;
  padding: 1rem clamp(.85rem, 1.8vw, 1.3rem) 1.05rem;
  border-color: #dce5d8;
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 0 5px 18px #3146320b;
}
.meal-entry .ingredient-row legend { padding-inline: .45rem; font-size: clamp(1.25rem, 1.1rem + .45vw, 1.55rem); }
.meal-entry .ingredient-search input { margin-top: .35rem; }
.meal-entry .ingredient-row-actions { align-items: center; justify-content: flex-start; gap: .7rem; margin-top: .85rem; }
.meal-entry .ingredient-row-actions .text-link { padding: .45rem .25rem; }
.label-product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .62rem .9rem;
  border: 1px solid #bdcdb8;
  border-radius: 10px;
  background: #f3f7ef;
  color: #3e5e43;
  font: 650 1rem/1.35 var(--meal-text);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.label-product-button:hover { border-color: #91a78c; background: #eaf1e5; transform: translateY(-1px); }
.label-product-button > span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #dfe9d9; font-size: 1.2rem; }
.meal-entry .meal-description {
  padding: .6rem .9rem;
  border: 1px solid #e0e7dc;
  border-radius: 12px;
  background: #fffefa;
}
.meal-entry .meal-description summary { font-size: 1rem; }
.meal-entry .meal-description label { display: grid; gap: .35rem; margin-top: .65rem; }
.meal-entry .meal-photo-label { display: grid; gap: .4rem; }
.meal-entry .button[type=submit] { min-height: 3.35rem; border-radius: 11px; font-size: 1.05rem; }
.meal-entry .button[type=submit]:disabled { cursor: wait; opacity: .65; }

.food-dialog:has(.national-product-form) { width: min(640px, calc(100% - 24px)); }
.national-product-form { gap: 1rem; padding: clamp(1rem, 2.5vw, 1.6rem); }
.national-product-form .product-flow { display: flex; flex-wrap: wrap; gap: .5rem; }
.national-product-form .product-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .35rem .65rem;
  border-radius: 8px;
  background: #eef3ea;
  color: #587258;
  font: 700 .8rem/1.3 var(--meal-text);
  letter-spacing: .015em;
}
.product-intro { margin: -.25rem 0 .1rem; color: #637264; font-size: 1rem; line-height: 1.6; }
.product-identity-grid, .product-quantity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.product-identity-grid label, .product-quantity-grid label { display: grid; align-content: start; gap: .35rem; }
.national-product-form :is(input:not([type=checkbox]),select) { min-height: 3rem; margin: 0; padding: .72rem .85rem; border-radius: 10px; }
.label-capture {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 90px;
  padding: 1rem;
  overflow: hidden;
  border: 1px dashed #9fb39a;
  border-radius: 14px;
  background: #f5f8f1;
  cursor: pointer;
}
.label-capture:hover { border-color: #668465; background: #edf4e9; }
.label-capture:focus-within { outline: 3px solid #6d8d6b2b; outline-offset: 2px; }
.label-capture-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; background: #e4eddf; color: #557653; }
.label-capture-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.label-capture > span:nth-child(2) { display: grid; gap: .2rem; }
.label-capture strong { color: #35523b; font: 700 1rem/1.35 var(--meal-text); }
.label-capture small { color: #738174; font: 450 .9rem/1.4 var(--meal-text); }
.label-capture input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.label-read-state { padding: .75rem .9rem; border-radius: 10px; background: #f1f4ed; color: #667566; font: 500 .94rem/1.5 var(--meal-text); }
.label-read-state.is-reading { background: #f4f2e8; color: #716744; }
.label-read-state.is-success { background: #eaf3e7; color: #416346; }
.label-read-state.is-error { background: #fbefeb; color: #8b5548; }
.national-product-form .label-preview { justify-self: stretch; max-width: 100%; max-height: 260px; width: 100%; object-fit: contain; border: 1px solid #e2e7dd; border-radius: 11px; background: #fff; }
.national-product-form .quantity-choice { display: flex; align-items: center; gap: .55rem; min-height: 42px; cursor: pointer; }
.national-product-form .quantity-choice input { width: 1.2rem; height: 1.2rem; min-height: 0; margin: 0; padding: 0; accent-color: #547752; }
.product-quantity-note { margin: -.55rem 0 0; color: #748174; font: 450 .88rem/1.5 var(--meal-text); }
.national-product-form .button { min-height: 3.2rem; border-radius: 11px; }
.national-product-form .button:disabled { cursor: not-allowed; opacity: .52; }

@media (max-width: 560px) {
  .add-meal-panel { padding: 1rem; border-radius: 15px; }
  .meal-entry-heading { margin-bottom: 1rem; }
  .meal-entry-heading > p { font-size: .95rem; }
  .product-identity-grid, .product-quantity-grid { grid-template-columns: minmax(0,1fr); }
  .label-capture { align-items: flex-start; min-height: 84px; padding: .85rem; }
  .national-product-form .product-flow span { font-size: .75rem; }
}