/* ============================================================
   Calorie Tracker overlay — scoped under .cal-overlay.
   Magazine palette: black + cover-line yellow (#ffd200).
   ============================================================ */
.cal-overlay { position: fixed; inset: 0; z-index: 9980; display: none;
  background: rgba(0,0,0,.55); font-family: Verdana, Tahoma, sans-serif; }
.cal-overlay.cal-shown { display: block; }
.cal-shell { position: absolute; inset: 0; margin: 0 auto; max-width: 920px;
  display: flex; flex-direction: column; background: #0d0d0f; color: #f2f3f5;
  transform: translateY(100%); transition: transform .3s ease; }
.cal-overlay.cal-open .cal-shell { transform: none; }
@media (min-width: 960px) { .cal-shell { inset: 24px 0; border: 1px solid #2c2c31; border-radius: 14px; overflow: hidden; } }

/* header */
.cal-head { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #131316; border-bottom: 3px solid #ffd200; }
.cal-title { display: flex; align-items: center; gap: 12px; }
.cal-logo { font-size: 26px; }
.cal-name { font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.35rem;
  letter-spacing: .5px; text-transform: uppercase; }
.cal-sub { font-size: .68rem; color: #9aa0ab; letter-spacing: .04em; }
.cal-x { background: transparent; border: 1px solid #3a3a41; border-radius: 8px; color: #cfd3da;
  font-size: 15px; width: 38px; height: 38px; cursor: pointer; }
.cal-x:hover { border-color: #ffd200; color: #ffd200; }

/* tabs */
.cal-tabs { flex: none; display: flex; background: #131316; border-bottom: 1px solid #26262b; }
.cal-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 8px; background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: #9aa0ab; font-family: inherit; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.cal-tabico { font-size: 17px; }
.cal-tab.on { color: #ffd200; border-bottom-color: #ffd200; }

/* body */
.cal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 14px 30px; }
.cal-foot { flex: none; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: #131316;
  border-top: 1px solid #26262b; color: #7d838e; font-size: .64rem; text-align: center; }

/* hero: calories left */
.cal-hero { text-align: center; padding: 22px 14px 18px; margin-bottom: 14px;
  background: linear-gradient(180deg, #1b1b10, #131316); border: 1px solid #3d3413;
  border-radius: 14px; }
.cal-hero-n { font-family: Impact, "Arial Narrow", sans-serif; font-size: 4.2rem; line-height: 1;
  color: #ffd200; letter-spacing: 1px; }
.cal-hero-t { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #cfd3da; margin-top: 4px; }
.cal-hero-s { font-size: .72rem; color: #9aa0ab; margin-top: 6px; }
.cal-hero.over { border-color: #7a2222; background: linear-gradient(180deg, #1f1010, #131316); }
.cal-hero.over .cal-hero-n { color: #ff5a5a; }

/* cards */
.cal-card { background: #131316; border: 1px solid #26262b; border-radius: 12px;
  padding: 14px; margin-bottom: 14px; }
.cal-card-h { font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: .6px; color: #ffd200; margin-bottom: 10px; }
.cal-p { font-size: .8rem; line-height: 1.55; color: #cfd3da; margin: 0 0 10px; }
.cal-dim { color: #7d838e; }
.cal-empty { font-size: .78rem; color: #7d838e; margin: 4px 0; }

/* macro bars */
.cal-macro { margin-bottom: 12px; }
.cal-macro:last-child { margin-bottom: 0; }
.cal-macro-top { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: 4px; }
.cal-bar { height: 10px; border-radius: 6px; background: #232327; overflow: hidden; }
.cal-bar.slim { height: 6px; }
.cal-bar span { display: block; height: 100%; border-radius: 6px; }
.cal-bar span.k { background: #ffd200; }
.cal-bar span.m { background: #4ad991; }
.cal-bar span.o { background: #ff5a5a; }
.cal-macro.over .cal-bar span { background: #ff5a5a; }
.cal-left { font-size: .68rem; color: #9aa0ab; margin-top: 3px; }
.cal-left.bad { color: #ff8a8a; font-weight: 700; }

/* meal rows */
.cal-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-top: 1px solid #202025; font-size: .78rem; }
.cal-row:first-of-type { border-top: 0; }
.cal-rn { flex: 1 1 auto; min-width: 0; }
.cal-rn i { color: #8a91a0; font-style: normal; }
.cal-rn small { display: block; color: #7d838e; }
.cal-rk { flex: none; }
.cal-rm { flex: none; color: #9aa0ab; font-size: .68rem; }
.cal-del { flex: none; background: transparent; border: 1px solid #3a3a41; border-radius: 6px;
  color: #9aa0ab; width: 30px; height: 30px; cursor: pointer; }
.cal-del:hover { border-color: #ff5a5a; color: #ff5a5a; }

/* buttons + inputs */
.cal-btn { display: inline-block; padding: 10px 16px; background: #1c1c20; color: #e9eaf0;
  border: 1px solid #3a3a41; border-radius: 9px; font-family: inherit; font-size: .8rem;
  font-weight: 700; cursor: pointer; }
.cal-btn:hover { border-color: #ffd200; }
.cal-btn.primary { background: #ffd200; border-color: #ffd200; color: #111; }
.cal-btn.primary:hover { background: #ffdf47; }
.cal-btn.big { display: block; width: 100%; padding: 14px; font-size: .9rem; }
.cal-input { width: 100%; padding: 10px; background: #1a1a1e; color: #f2f3f5;
  border: 1px solid #33333a; border-radius: 8px; font-family: inherit; font-size: 16px; }
.cal-input.bad { border-color: #ff5a5a; }
.cal-lbl { display: flex; flex-direction: column; gap: 5px; font-size: .7rem; color: #9aa0ab;
  text-transform: uppercase; letter-spacing: .06em; }
.cal-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 640px) { .cal-grid4 { grid-template-columns: repeat(2, 1fr); } }

/* history */
.cal-hday { padding: 10px 2px; border-top: 1px solid #202025; }
.cal-hday:first-of-type { border-top: 0; }
.cal-hday-top { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: 5px; }
.cal-hd { color: #cfd3da; }
.cal-hday-m { font-size: .66rem; color: #7d838e; margin-top: 4px; }

/* Add tab hint + adopted scanner */
.cal-addhint { margin-bottom: 12px; }
.cal-scan-wrap { margin-top: 2px; }

/* page launcher (in the #food section) */
.cal-launch { text-align: center; margin-top: 10px; }
.cal-launch-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: min(420px, 100%); padding: 18px 24px; background: #854d0e; border: 2px solid #ffd200;
  border-radius: 8px; color: #fef9c3; font-family: inherit; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer; transition: background .2s; }
.cal-launch-btn:hover { background: #a16207; }
.cal-launch-big { font-size: 17px; margin-bottom: 4px; }
.cal-launch-sub { font-size: 10px; font-weight: 400; letter-spacing: .08em; color: #fde68a; text-transform: none; }
.cal-launch-note { font-size: .74rem; color: #ffd200; margin-top: 10px; min-height: 1em; }

/* light theme */
.cal-overlay.cal-light .cal-shell { background: #f4f5f7; color: #1c1e22; }
.cal-overlay.cal-light .cal-head, .cal-overlay.cal-light .cal-tabs,
.cal-overlay.cal-light .cal-foot { background: #ffffff; border-color: #e2e4e9; }
.cal-overlay.cal-light .cal-head { border-bottom-color: #eab308; }
.cal-overlay.cal-light .cal-name { color: #1c1e22; }
.cal-overlay.cal-light .cal-sub, .cal-overlay.cal-light .cal-tab { color: #5b6270; }
.cal-overlay.cal-light .cal-tab.on { color: #a16207; border-bottom-color: #eab308; }
.cal-overlay.cal-light .cal-card, .cal-overlay.cal-light .cal-hero { background: #ffffff; border-color: #e2e4e9; }
.cal-overlay.cal-light .cal-card-h { color: #a16207; }
.cal-overlay.cal-light .cal-hero-n { color: #a16207; }
.cal-overlay.cal-light .cal-hero-t, .cal-overlay.cal-light .cal-p, .cal-overlay.cal-light .cal-hd { color: #3a3f47; }
.cal-overlay.cal-light .cal-bar { background: #e7e9ee; }
.cal-overlay.cal-light .cal-bar span.k { background: #eab308; }
.cal-overlay.cal-light .cal-row, .cal-overlay.cal-light .cal-hday { border-top-color: #eceef2; }
.cal-overlay.cal-light .cal-btn { background: #fff; color: #1c1e22; border-color: #d4d7de; }
.cal-overlay.cal-light .cal-btn.primary { background: #eab308; border-color: #eab308; color: #111; }
.cal-overlay.cal-light .cal-input { background: #fff; color: #1c1e22; border-color: #d4d7de; }
.cal-overlay.cal-light .cal-x { color: #3a3f47; border-color: #d4d7de; }

/* phones */
@media (max-width: 640px) {
  .cal-body { padding: 12px 10px 26px; }
  .cal-hero-n { font-size: 3.4rem; }
  .cal-rm { display: none; }           /* keep meal rows one-line on small screens */
  .cal-tab { font-size: .64rem; }
}

/* ---- at-a-glance strip on the fitness page (stat tiles) ---- */
.cal-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 16px; }
@media (max-width: 560px) { .cal-glance { grid-template-columns: 1fr; } }
.cal-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left;
  padding: 14px 16px; background: #131316; border: 1px solid #2c2c31; border-radius: 12px;
  color: #f2f3f5; font-family: Verdana, Tahoma, sans-serif; cursor: pointer; transition: border-color .2s; }
.cal-tile:hover { border-color: #ffd200; }
.cal-tile-h { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9aa0ab; }
.cal-tile-v { display: flex; align-items: baseline; gap: 10px; }
.cal-chip { font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.5rem; letter-spacing: .5px; text-transform: uppercase; }
.cal-chip.g { color: #4ad991; }
.cal-chip.b { color: #ff5a5a; }
.cal-chip.w { color: #ffd200; }
.cal-chip.n { color: #9aa0ab; font-size: 1.1rem; }
.cal-tile-rate { font-size: .82rem; color: #cfd3da; font-weight: 700; }
.cal-tile-s { font-size: .68rem; color: #9aa0ab; line-height: 1.45; }
/* day dots: shape-coded (filled ✓ / hollow ✕ / dashed empty) — never color alone */
.cal-dots { display: flex; gap: 9px; padding: 2px 0; }
.cal-dcol { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cal-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; box-sizing: border-box; }
.cal-dot.hit { background: #4ad991; color: #0d0d0f; border: 2px solid #4ad991; }
.cal-dot.miss { background: transparent; color: #ff5a5a; border: 2px solid #ff5a5a; }
.cal-dot.nod { background: transparent; border: 2px dashed #46464e; }
.cal-dl { font-size: .58rem; color: #7d838e; text-transform: uppercase; }

/* segmented controls in the Goals calculator */
.cal-segrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-seg-l { flex: none; width: 52px; font-size: .68rem; color: #9aa0ab; text-transform: uppercase; letter-spacing: .06em; }
.cal-seg { display: flex; flex: 1; gap: 4px; background: #1a1a1e; border: 1px solid #2c2c31; border-radius: 9px; padding: 3px; }
.cal-seg-btn { flex: 1 1 0; min-width: 0; padding: 9px 6px; background: transparent; border: 0; border-radius: 7px;
  color: #9aa0ab; font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.cal-seg-btn.on { background: #ffd200; color: #111; }

/* light theme for the strip + segs */
.cal-overlay.cal-light .cal-seg { background: #eceef2; border-color: #d4d7de; }
.cal-overlay.cal-light .cal-seg-btn { color: #5b6270; }
.cal-overlay.cal-light .cal-seg-btn.on { background: #eab308; color: #111; }
html[data-theme="light"] .cal-tile { background: #ffffff; border-color: #e2e4e9; color: #1c1e22; }
html[data-theme="light"] .cal-tile-h, html[data-theme="light"] .cal-tile-s, html[data-theme="light"] .cal-dl { color: #5b6270; }
html[data-theme="light"] .cal-tile-rate { color: #3a3f47; }
html[data-theme="light"] .cal-chip.g { color: #0f8a54; }
html[data-theme="light"] .cal-chip.b { color: #d43535; }
html[data-theme="light"] .cal-chip.w { color: #a16207; }
html[data-theme="light"] .cal-dot.hit { background: #0f8a54; border-color: #0f8a54; color: #fff; }
html[data-theme="light"] .cal-dot.miss { color: #d43535; border-color: #d43535; }
html[data-theme="light"] .cal-dot.nod { border-color: #c3c8d1; }

/* keep the glance strip + launcher visually one unit, centered */
.cal-glance { max-width: 760px; margin-left: auto; margin-right: auto; }