/* =====================================================================
   CALORIE (Nov 6 2026), from the Agents Lens tracker's Calorie tab, in the app's look.
   Same rules as css/quran.css (tools/lint-ui.js): classes start pp-, and this section's
   own colours live in the one :root block below, the only place a raw colour may sit.
   Classes are pp-kc-*: the app's date picker already owns pp-cal-*.
   ===================================================================== */

:root {
  /* A warm orange for food, apart from the app's red so "over" still reads as a warning. */
  --kc: #F59E57;
  --kc-hi: #FFB98A;
  --kc-ink: #1E0F04;
  --kc-soft: rgba(245, 158, 87, 0.14);
  --kc-line: rgba(255, 185, 138, 0.38);
  --kc-over: #FF7468;
  /* the three macros */
  --kc-pro: #F07C6C;
  --kc-carb: #6FA8DC;
  --kc-fat: #E7C468;
  /* the health score's four bands (Yuka's colours) and its additive chips */
  --kc-excellent: #3FB96B;
  --kc-good: #9CCC5A;
  --kc-poor: #E8A13C;
  --kc-bad: #E0584F;
  --kc-band-ink: #0B0D10;
  --kc-risk-high: rgba(224, 88, 79, 0.16);
  --kc-risk-mod: rgba(232, 161, 60, 0.16);
  --kc-risk-low: rgba(255, 255, 255, 0.06);
  --kc-camera: #000000;
}

.pp-kc { padding-bottom: 48px; }
.pp-tkh-stat.is-kc b { color: var(--kc-hi); }
.pp-kc .pp-tkh-stat b small { font-size: 15px; font-weight: 600; color: var(--text-faint); margin-left: 2px; }
.pp-kc-bar { justify-content: flex-end; }
.pp-kc-btn.pp-btn-primary { background: var(--kc); border-color: var(--kc); color: var(--kc-ink); }
.pp-kc .pp-linkbtn, .pp-kc-sheet .pp-linkbtn { color: var(--kc-hi); }

/* ---- cards ---- */
.pp-kc-card {
  background: var(--surface-2);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-card);
  padding: 18px;
  min-width: 0;
}
.pp-kc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pp-kc-card-head > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.pp-kc-card-head > span .pp-ic { color: var(--kc); }
.pp-kc-card-head small { font-size: 14px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }

.pp-kc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; margin-top: 18px; }

/* ---- the ring ---- */
.pp-kc-ringcard { display: flex; flex-direction: column; align-items: center; }
.pp-kc-ring { position: relative; width: 200px; height: 200px; }
.pp-kc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.pp-kc-ring-track { fill: none; stroke: var(--w-line); stroke-width: 12; }
.pp-kc-ring-prog { fill: none; stroke: var(--kc); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.pp-kc-ring-prog.is-over { stroke: var(--kc-over); }
.pp-kc-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pp-kc-ring-in b { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-kc-ring-in span { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.pp-kc-ring-in em { font-style: normal; font-size: 13px; font-weight: 650; color: var(--kc-hi); margin-top: 8px; }
.pp-kc-ring-in em.is-over { color: var(--kc-over); }

/* The Fitbit's calories burned: a note, never part of the eaten / left maths. */
.pp-kc-burn { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--w-line); font-size: 13px; color: var(--text-dim); }
.pp-kc-burn .pp-ic { color: var(--kc); }
.pp-kc-burn b { color: var(--text); font-variant-numeric: tabular-nums; }
.pp-kc-burn small { margin-left: auto; font-size: 11px; color: var(--text-faint); }

/* ---- macros ---- */
.pp-kc-macros { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.pp-kc-macros .pp-kc-card-head { margin-bottom: 0; }
.pp-kc-macro-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pp-kc-macro-top span { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.pp-kc-macro-top b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pp-kc-macro-top b small { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.pp-kc-macro-bar { height: 8px; border-radius: 999px; background: var(--w-line); overflow: hidden; }
.pp-kc-macro-bar i { display: block; height: 100%; border-radius: inherit; transition: width .4s var(--ease); }
.pp-kc-macro-bar.is-pro i { background: var(--kc-pro); }
.pp-kc-macro-bar.is-carb i { background: var(--kc-carb); }
.pp-kc-macro-bar.is-fat i { background: var(--kc-fat); }

/* ---- today's food ---- */
.pp-kc-list { margin-top: 14px; padding: 6px 6px 4px; }
.pp-kc-list .pp-kc-card-head { padding: 12px 12px 8px; margin-bottom: 0; }
.pp-kc-food { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--w-line); }
.pp-kc-food-main {
  flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 12px;
  border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; border-radius: var(--radius-sm);
}
.pp-kc-food-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-kc-food-name b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-kc-food-name small { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-kc-food-kcal { flex: none; min-width: 44px; text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pp-kc-food-x { flex: none; color: var(--text-faint); }
.pp-kc-empty { margin: 0; padding: 14px 12px; border-top: 1px solid var(--w-line); color: var(--text-faint); font-size: 14px; }
.pp-kc-add {
  width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 8px; padding: 0 12px; margin-top: 2px;
  border: 0; border-top: 1px solid var(--w-line); background: transparent; color: var(--kc-hi); font-size: 14px; font-weight: 650; cursor: pointer;
}

/* ---- health score ---- */
.pp-kc-score {
  flex: none; display: inline-flex; align-items: baseline; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px;
  border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--kc-band-ink); line-height: 24px; font-variant-numeric: tabular-nums;
}
.pp-kc-score.is-big { min-width: 58px; height: 44px; font-size: 20px; line-height: 44px; border-radius: 11px; }
.pp-kc-score.is-big small { font-size: 11px; font-weight: 700; opacity: .7; }
.pp-kc-score.is-excellent { background: var(--kc-excellent); }
.pp-kc-score.is-good { background: var(--kc-good); }
.pp-kc-score.is-poor { background: var(--kc-poor); }
.pp-kc-score.is-bad { background: var(--kc-bad); }
.pp-kc-health { margin-top: 14px; border: 1px solid var(--w-line); border-radius: var(--radius-card); background: var(--w-card); }
.pp-kc-health.is-none { margin: 14px 0 0; padding: 12px 14px; font-size: 13px; color: var(--text-faint); }
.pp-kc-health-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: transparent; color: var(--text-dim); text-align: left; cursor: pointer; }
.pp-kc-health-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pp-kc-health-txt b { font-size: 16px; }
.pp-kc-health-txt b.is-excellent { color: var(--kc-excellent); }
.pp-kc-health-txt b.is-good { color: var(--kc-good); }
.pp-kc-health-txt b.is-poor { color: var(--kc-poor); }
.pp-kc-health-txt b.is-bad { color: var(--kc-bad); }
.pp-kc-health-txt small { font-size: 12px; color: var(--text-faint); }
.pp-kc-health-body { padding: 4px 14px 12px; border-top: 1px solid var(--w-line); }
.pp-kc-health-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--text-faint); }
.pp-kc-health-row b { color: var(--text); font-weight: 600; text-align: right; }
.pp-kc-adds { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.pp-kc-additive { display: inline-flex; padding: 4px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--kc-risk-low); }
.pp-kc-additive.is-high { background: var(--kc-risk-high); color: var(--kc-bad); }
.pp-kc-additive.is-moderate { background: var(--kc-risk-mod); color: var(--kc-poor); }
.pp-kc-health-foot { margin: 6px 0 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

/* ---- the sheet ---- */
.pp-kc-scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pp-kc-sheet {
  width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--w-card-hi); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card-hi);
}
.pp-kc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--w-line); }
.pp-kc-sheet-head h2 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.pp-kc-sheet-body { padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.pp-kc-sheet .pp-fld { display: block; margin: 0 0 14px; }
.pp-kc-sheet .pp-lbl { display: block; }
.pp-kc-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-kc-three .pp-input { text-align: center; }
.pp-kc-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.pp-kc-hint { display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 14px; font-size: 13px; color: var(--text-faint); line-height: 1.45; }
.pp-kc-hint .pp-ic { flex: none; margin-top: 1px; color: var(--kc); }
.pp-kc-hint.is-err { color: var(--late); }
.pp-kc-msg { margin: 0; padding: 18px 8px; text-align: center; font-size: 14px; color: var(--text-faint); }
.pp-kc-msg.is-err { color: var(--late); }

.pp-kc-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pp-kc-method, .pp-kc-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--w-line); background: var(--w-card); color: var(--text-dim); font-size: 14px; font-weight: 650; cursor: pointer;
}
.pp-kc-method .pp-ic { color: var(--kc); }
.pp-kc-method.is-on, .pp-kc-pill.is-on { border-color: var(--kc); background: var(--kc-soft); color: var(--text); }

/* search */
.pp-kc-results { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.pp-kc-result {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--w-line); background: var(--w-card); color: var(--text); text-align: left; cursor: pointer;
}
.pp-kc-result > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-kc-result b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-kc-result small { font-size: 12px; color: var(--text-faint); }
.pp-kc-result em { flex: none; font-style: normal; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* steppers and totals */
.pp-kc-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pp-kc-qty .pp-lbl { margin: 0; }
.pp-kc-step { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.pp-kc-step button { width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.pp-kc-step button:disabled { color: var(--text-faint); opacity: .5; cursor: default; }
.pp-kc-step input, .pp-kc-step b { width: 56px; text-align: center; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pp-kc-step input { height: var(--tap); border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: transparent; color: var(--text); outline: none; -moz-appearance: textfield; }
.pp-kc-step input::-webkit-outer-spin-button, .pp-kc-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-kc-step.is-sm button { width: 36px; height: 36px; }
.pp-kc-step.is-sm b { width: 34px; font-size: 14px; }
.pp-kc-totals { margin-top: 14px; }
.pp-kc-totals-kcal { display: flex; flex-direction: column; align-items: center; padding: 6px 0 12px; }
.pp-kc-totals-kcal b { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--kc-hi); font-variant-numeric: tabular-nums; }
.pp-kc-totals-kcal span { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.pp-kc-three.is-read > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--radius-sm); background: var(--w-card); border: 1px solid var(--w-line); }
.pp-kc-three.is-read span { font-size: 12px; color: var(--text-faint); }
.pp-kc-three.is-read b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* coffee */
.pp-kc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pp-kc-mixins { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pp-kc-mixin { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; }
.pp-kc-mixin > span { font-size: 15px; font-weight: 600; }
.pp-kc-mixin small { font-size: 13px; color: var(--text-faint); }

/* barcode */
.pp-kc-reader {
  position: relative; width: 100%; min-height: 220px; border-radius: var(--radius-card); overflow: hidden; background: var(--kc-camera);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pp-kc-reader-wait { position: absolute; font-size: 13px; color: var(--text-faint); }
.pp-kc-reader-box { position: relative; width: 100%; }
.pp-kc-reader video { width: 100% !important; height: auto !important; display: block; }
.pp-kc-row { display: flex; gap: 8px; }
.pp-kc-row .pp-input { flex: 1; min-width: 0; }

/* a stop on the way: not connected, nothing found, something failed */
.pp-kc-note { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 4px 0; }
.pp-kc-note > .pp-ic { color: var(--kc); }
.pp-kc-note h3 { margin: 10px 0 6px; font-size: 17px; }
.pp-kc-note p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.pp-kc-note code { font-size: 13px; color: var(--text); }
.pp-kc-note .pp-kc-acts { justify-content: center; }

/* photo and describe */
.pp-kc-file { display: none; }
.pp-kc-drop {
  width: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--kc-line); border-radius: var(--radius-card); background: var(--kc-soft); color: var(--text); cursor: pointer; margin-bottom: 14px;
}
.pp-kc-drop .pp-ic { color: var(--kc); }
.pp-kc-drop small { font-size: 13px; color: var(--text-faint); }
.pp-kc-describe { min-height: 92px; resize: vertical; line-height: 1.45; font-family: var(--font); }
.pp-kc-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }
.pp-kc-busy img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-card); }
.pp-kc-busy p { margin: 0; font-size: 14px; color: var(--text-dim); }
.pp-kc-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--w-line); border-top-color: var(--kc); animation: pp-kc-spin .9s linear infinite; }
@keyframes pp-kc-spin { to { transform: rotate(360deg); } }
.pp-kc-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pp-kc-review-head img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.pp-kc-review-head div { display: flex; flex-direction: column; gap: 2px; }
.pp-kc-review-head b { font-size: 16px; }
.pp-kc-review-head small { font-size: 13px; color: var(--text-faint); }
.pp-kc-review { display: flex; flex-direction: column; gap: 8px; }
.pp-kc-review-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 10px; border: 1px solid var(--w-line); border-radius: var(--radius-sm); background: var(--w-card); }
.pp-kc-review-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-kc-review-name .pp-input { min-height: 38px; padding: 6px 10px; }
.pp-kc-review-name small { font-size: 12px; color: var(--text-faint); padding-left: 2px; }
.pp-kc-review-kcal { flex: none; min-width: 52px; text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pp-kc-review-kcal small { font-size: 11px; font-weight: 500; color: var(--text-faint); }
.pp-kc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 0; font-size: 14px; color: var(--text-dim); }
.pp-kc-total b { font-size: 18px; color: var(--kc-hi); font-variant-numeric: tabular-nums; }

@media (hover: hover) {
  .pp-kc-food-main:hover, .pp-kc-result:hover { background: var(--w-card); }
  .pp-kc-result:hover, .pp-kc-method:hover, .pp-kc-pill:hover { border-color: var(--kc-line); }
}

/* ---- phone ---- */
@media (max-width: 760px) {
  .pp-kc-top { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  .pp-kc-card { padding: 16px; }
  .pp-kc-ring { width: 180px; height: 180px; }
  .pp-kc-ring-in b { font-size: 38px; }
  /* the sheet rises from the bottom, the whole width of the phone */
  .pp-kc-scrim { align-items: flex-end; padding: 0; }
  .pp-kc-sheet { width: 100%; max-height: calc(100vh - 40px); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; padding-bottom: var(--safe-bottom); }
  .pp-kc-sheet-body { padding: 14px 16px 18px; }
  .pp-kc-methods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; }
  .pp-kc-methods::-webkit-scrollbar { display: none; }
  .pp-kc-method { flex: none; }
  .pp-kc-mixin { grid-template-columns: minmax(0, 1fr) auto 56px; gap: 8px; }
  .pp-kc-review-row { flex-wrap: wrap; }
  .pp-kc-review-name { flex-basis: 100%; }
  .pp-kc-review-row .pp-kc-step { margin-right: auto; }
}

/* the Home card */
.pp-wcal { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pp-wcal-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pp-wcal-num { display: flex; align-items: baseline; gap: 8px; }
.pp-wcal-num b { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-wcal-num small { font-size: 12px; color: var(--text-faint); }
.pp-wcal-bar { height: 8px; border-radius: 999px; background: var(--w-line); overflow: hidden; }
.pp-wcal-bar i { display: block; height: 100%; border-radius: 999px; background: var(--kc); transition: width .4s var(--ease); }
.pp-wcal-bar i.is-over { background: var(--kc-over); }
.pp-wcal-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-faint); }
.pp-wcal-foot span:first-child { color: var(--kc-hi); font-weight: 600; }
.pp-wcal-foot span.is-over { color: var(--kc-over); }
.pp-wcal-log { justify-content: center; gap: 6px; min-height: var(--tap); }