/* Chép từ jc_nutrition_connector (public/widgets/src/shared/macros.css), NUT-34, đã bỏ phần nước, tách kcal theo macro,
   drill vào thành phần và các gloss rượu/caffeine mà Remembite không có dữ liệu.
   Dải macro nằm trong một .panel, không phải một card riêng. Bố cục theo role (xem macros.js):
     cal    vòng kcal + con số
     macro  một trong ba thanh protein/carbs/fat
     limit  một ô của hàng dưới (fiber, sugar, sat fat, sodium)
   Cần ring.css đi kèm. */

/* Bố cục theo bề rộng của CHÍNH dải (container query), không theo viewport: từ 1100px thanh nav bên chiếm chỗ nên panel hẹp hơn
   viewport, và breakpoint theo viewport làm tên chỉ số bị cắt ("PROT...", "S..."). Container `strip` quyết định cỡ chữ và việc
   khối kcal nằm trên hay bên cạnh; container `sg` (riêng vùng lưới) quyết định số cột của hàng limit. */
.strip {
  container: strip / inline-size;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Điện thoại: kcal nằm trên các lưới. Từ 700px khối kcal sang bên cạnh, ngăn bằng một vạch. */
.srow {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sgrids {
  container: sg / inline-size;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* ---- Kcal ---- */
.cal {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 12px;
  padding: 3px 4px;
  margin: 0 -4px;
}
.cal .ring {
  width: 52px;
  height: 52px;
  --ring-w: 7px;
  flex: none;
}
/* Có goal thì giữa vòng chỉ ghi %, vì con số đã nằm ngay bên cạnh gấp ba lần cỡ. Không goal thì ghi giá trị vào vòng. */
.cal .ring-center .rp {
  font-size: 11px;
  margin-top: 0;
}
.cal .ring-center .rv {
  font-size: 12px;
}
.cal .ring-center .ru {
  font-size: var(--fs-label);
  margin-top: 0;
}
.cal-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-lab {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cal-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* NUT-155: "1,893 / 2,000" là một tỉ số, không bao giờ tách hai dòng. */
.cal-val {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.cal-val .cal-goal {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-dim);
  margin-left: 3px;
}
.cal-left {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Khoảng kcal và độ tin cậy: caption nhỏ dưới hàng kcal (chỉ có ở Remembite). */
.cal-note {
  font-size: var(--fs-label);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- Ô macro và ô limit ----
   Cùng một kiểu cho cả hai hàng: tên + con số, một thanh mỏng, một caption. Số cột đến từ markup qua --lc (điện thoại) và --lcw (rộng). */
.mgrid {
  display: grid;
  grid-template-columns: repeat(var(--lc, 3), minmax(0, 1fr));
  gap: 9px;
}
.mgrid.lim {
  gap: 9px 14px;
}
.mtile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 5px 3px;
  border-radius: 10px;
  min-width: 0;
  position: relative;
}
.mtop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
/* Con số không bao giờ xuống dòng hay co lại: nó là nội dung. Tên mới là thứ nhường chỗ (ellipsis),
   vì track là minmax(0, 1fr) và hai phần tử nowrap trong cột ~84px sẽ đè lên nhau mà không có thanh cuộn nào báo. */
.mkey {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.mnum {
  flex: none;
  font-size: var(--fs-small);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mnum .msub {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-dim);
}
/* Ba cột trên điện thoại thì "125/160 g" chạm vào tên. Đơn vị bỏ trước, caption của macro cũng bỏ.
   Ẩn kiểu visually-hidden chứ không display:none, để trình đọc màn hình vẫn đọc đủ đơn vị. */
.mnum .munit,
.mgrid:not(.lim) .mcap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Số 0 ở ô hiển thị thì ghi bằng chữ, vì 0 ở chỗ con số trông như một phép đo. */
.mnum .mnone {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
}
.mbar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
/* Thanh giữ màu chuỗi kể cả khi đầy 100%. Quá goal chỉ đổi màu CON SỐ sang --over, không bao giờ tô lại chuỗi. */
.mfill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 0%);
  background: var(--c);
  border-radius: 999px;
}
.mnum.over,
.cal-val .cv.over,
.ring-center .rp.over {
  color: var(--over);
}
.mcap {
  font-size: var(--fs-label);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Caption của limit là chỗ duy nhất ghi limit, nên nó xuống dòng chứ không chạy sang cột bên cạnh. */
.mgrid.lim .mcap {
  white-space: normal;
  line-height: 1.3;
}
/* Các ô limit cao khác nhau, nên canh theo nhãn thay vì canh giữa từng ô. Hàng macro vẫn canh giữa. */
.mgrid.lim .mtile {
  justify-content: flex-start;
}
/* Ô không có goal chỉ ghi tên và con số (không thanh xám phẳng, không caption), nên canh giữa theo chiều dọc và không cần cao như ô có thanh.
   Vùng chạm vẫn >= 36px (WCAG 2.2 yêu cầu 24px). */
.mgrid .mtile.nogoal,
.mgrid.lim .mtile.nogoal {
  justify-content: center;
}
.mtile.interactive.nogoal {
  min-height: 36px;
}
.mgrid.lim {
  row-gap: 2px;
}
/* Số quá goal trên nền ô đang mở (accent 12%): --over thuần chỉ còn 3.94:1 ở theme sáng, nên pha 15% --text để đạt AA (4.86:1). */
.mtile.open .mnum.over,
.cal.open .cv.over,
.cal.open .rp.over {
  color: color-mix(in srgb, var(--over) 85%, var(--text));
}

/* ---- Chạm vào một chỉ số ---- */
.mhint {
  font-size: var(--fs-label);
  color: var(--text-dim);
  padding: 0 3px;
}
.mhint[hidden] {
  display: none;
}
.mtile.interactive,
.cal.interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, outline-color 0.15s ease;
}
/* Ô là vùng chạm, mà ô nhãn + thanh tự nhiên chỉ cao ~30px, thấp hơn một ngón tay. */
.mtile.interactive {
  min-height: 44px;
}
/* NUT-159 (uma P2-6): chỉ thiết bị có chuột. Trên màn chạm, :hover dính lại ở chỗ vừa chạm (vd sau Accept notice, banner biến mất
   và vòng calo trượt lên đúng chỗ ngón tay) thành ô xám. */
@media (hover: hover) {
  .mtile.interactive:hover,
  .cal.interactive:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
  }
}
.mtile.interactive:focus-visible,
.cal.interactive:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.mtile.open,
.cal.open {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1px;
}
/* Caption của ô đang mở lên full --text: --text-dim trên nền accent 12% chỉ còn 4.35:1 ở theme sáng, dưới ngưỡng AA 4.5:1. */
.mtile.open .mkey,
.mtile.open .mcap,
.mtile.open .msub,
.cal.open .cal-lab,
.cal.open .cal-left,
.cal.open .cal-goal,
.cal.open .cal-note {
  color: var(--text);
}

/* ---- Danh sách bữa đóng góp cho chỉ số vừa chạm ---- */
.macro-detail {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.macro-detail[hidden] {
  display: none;
}
.md-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.md-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.md-title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.md-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.md-close:hover {
  background: var(--track);
  color: var(--text);
}
/* minmax(0, ...) chứ không phải 1fr: sàn auto của 1fr là min-content, mà một tên bữa dài nowrap sẽ nới track quá card. */
.md-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 28px;
  align-content: start;
}
/* Một bữa và các món của nó là MỘT ô lưới, để hai cột không cắt đôi một bữa. Mọi hàng dùng cùng ba cột
   (số lượng | tên | giờ) nên số lượng, tên và giờ thẳng hàng giữa bữa và món. */
.md-meal {
  min-width: 0;
}
.md-row {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--panel-border);
}
/* Giá trị ghi bằng --text (chấm màu chuỗi nằm ở tiêu đề): màu cam của kcal trên nền trắng chỉ đạt 2.06:1 nếu làm màu chữ. */
.md-val {
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.md-val .md-unit {
  font-size: var(--fs-label);
  font-weight: 600;
  margin-left: 2px;
  color: var(--text-dim);
}
.md-name {
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-sub {
  text-align: right;
  font-size: var(--fs-label);
  color: var(--text-dim);
}
.md-item {
  border-top: none;
  padding: 1px 0;
  color: var(--text-dim);
}
.md-item .md-name {
  padding-left: 12px;
}
.md-item .md-val {
  font-weight: 600;
}
.md-empty {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--text-dim);
  padding: 6px 0 0;
}

/* Hàng limit: số cột theo bề rộng vùng lưới. Bốn ô chỉ ra một hàng khi mỗi ô còn >= ~118px (tên + số như "SODIUM 2,600 mg" không bị cắt);
   hẹp hơn thì giữ 2x2. Ba ô trở xuống luôn một hàng, riêng vùng rất hẹp (điện thoại nhỏ) gập thành hai hàng. */
@container sg (min-width: 520px) {
  .mgrid.lim {
    grid-template-columns: repeat(var(--lcw, 3), minmax(0, 1fr));
  }
}
@container sg (max-width: 310px) {
  .mgrid.lim {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Ba cột macro trên vùng ~300px chỉ còn ~96px cho "PROTEIN 148/160": thu bớt khoảng cách chữ trước khi để tên bị cắt. */
@container sg (max-width: 320px) {
  .mkey {
    font-size: var(--fs-label);
    letter-spacing: 0.02em;
  }
}
/* Viewport 320px: ô macro còn ~83px, "PROTEIN" + "148/160" không vừa một dòng. Cho số xuống dòng dưới tên thay vì cắt tên. */
@container sg (max-width: 290px) {
  .mtop {
    flex-wrap: wrap;
  }
}
/* NUT-155: điện thoại (vùng lưới < 400px, tức viewport tới ~450px), ba ô macro luôn xếp tên TRÊN số: ô ~83-120px không đủ cho
   "PROTEIN" + "123/130" trên một dòng (bị cắt thành "PROTE..." ở 360-390px), còn wrap theo nội dung thì chỉ Protein xuống dòng,
   lệch với Carbs/Fat. Xếp dọc cả ba nên tên luôn đủ chữ và ba ô cùng một khuôn. Hàng limit (2 cột, ô rộng) giữ nguyên. */
@container sg (max-width: 399px) {
  .mgrid:not(.lim) .mtop {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .mgrid:not(.lim) .mkey {
    max-width: 100%;
  }
  /* Canh trên cả ô có thanh lẫn ô không goal, để ba tên và ba con số nằm trên cùng một đường. */
  .mgrid:not(.lim) .mtile,
  .mgrid:not(.lim) .mtile.nogoal {
    justify-content: flex-start;
  }
}

/* NUT-155: viewport dưới 360px, tỉ số kcal và "107 kcal under" không vừa một hàng: câu phụ xuống dưới con số, canh trái. */
@media (max-width: 359px) {
  .cal-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* Hai bậc theo bề rộng dải.
   500px: chữ to hơn, hiện " g" và caption macro, danh sách bữa thành hai cột.
   700px: khối kcal sang bên cạnh lưới (rộng cố định, để phần còn lại đủ cho ba cột macro). */
@media (min-width: 560px) {
  .strip {
    gap: 10px;
  }
}
@container strip (min-width: 500px) {
  .srow,
  .sgrids {
    gap: 10px;
  }
  .mgrid {
    gap: 16px;
  }
  .mgrid.lim {
    gap: 2px 14px;
  }
  .mtile {
    gap: 5px;
    padding: 5px 4px;
  }
  .mkey,
  .mnum .msub,
  .mcap,
  .mhint,
  .cal-note {
    font-size: var(--fs-label);
  }
  .mnum {
    font-size: 12.5px;
  }
  .mnum .munit,
  .mgrid:not(.lim) .mcap {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }
  .mnum .munit {
    display: inline;
  }
  .mbar {
    height: 6px;
  }
  .macro-detail {
    gap: 8px;
  }
  .md-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .md-row {
    grid-template-columns: 5.4em minmax(0, 1fr) auto;
  }
  .md-val {
    font-size: 12.5px;
  }
  .md-name {
    font-size: 12.5px;
  }
}

@container strip (min-width: 700px) {
  .srow {
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
  }
  .cal {
    flex: none;
    margin: 0;
    padding: 0 18px 0 0;
    border-right: 1px solid var(--panel-border);
  }
  .cal.interactive {
    padding: 3px 18px 3px 4px;
    margin-left: -4px;
  }
  .cal .ring {
    width: 56px;
    height: 56px;
  }
  .cal .ring-center .rp {
    font-size: 11.5px;
  }
  .cal-txt {
    flex: none;
    width: 9.5rem;
    gap: 1px;
  }
  .cal-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .cal-val {
    font-size: 19px;
  }
  .cal-val .cal-goal {
    font-size: 12px;
  }
  .cal-left {
    font-size: var(--fs-label);
  }
  .sgrids {
    flex: 1;
  }
}