/* LUMA - the nutrition screen (Layer 5)
   Sheet 7 of 9. Source order decides the cascade - see the link tags in luma.html. */

/* ============================================================
   LAYER 5 — NUTRITION
   ============================================================ */

/* ---------- 1. Header ---------- */
.nutrition-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  margin-bottom: 20px;
  gap: 10px;
}

.nutrition-header .day-topbar-left { min-width: 0; }

#tab-nutrition .day-stack { padding-bottom: 64px; }

/* ---------- 2. Calorie strategy ---------- */
.phase-timeline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 14px;
  height: 60px;
  position: relative;
}

.phase-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  position: relative;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out),
              filter var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out);
  min-height: 20px;
}

.phase-bar:active { opacity: 0.7; }
.phase-bar.active { filter: drop-shadow(0 0 6px var(--lime-glow)); }

.phase-bar-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-num);
  font-size: 9px;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur-mid) var(--ease-out);
}

.phase-bar.active .phase-bar-label { color: var(--lime); }

/* The labels hang 18px below the bars — the detail block needs that room back.
   .card-accent carries only the lime left border, so the fill lives here. */
.phase-detail {
  margin-top: 32px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.phase-detail-kcal {
  display: flex;
  align-items: baseline;
}

.phase-detail-kcal .num {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-1);
}

.phase-detail-unit {
  font-family: var(--font-ka);
  font-size: 13px;
  color: var(--text-2);
  margin-left: 5px;
}

/* The deficit line carries the whole argument for the big number above it:
   what she burns, and how much is being held back. Dim on purpose — the target
   is what she acts on, this is what makes it credible. */
.phase-detail-deficit {
  font-family: var(--font-ka);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
}

.phase-detail-deficit .num { color: var(--text-2); }

.phase-detail-label {
  font-family: var(--font-ka);
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
  margin-bottom: 2px;
}

.phase-detail-note {
  font-family: var(--font-ka);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 6px;
}

/* ---------- 2b. Why these calories (Layer 7) ----------
   Uses the .hidden + fadeIn idiom the weight form already established, not a
   max-height transition — there are none anywhere in this file. */
.phase-why-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ka);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}

.phase-why-link:active { color: var(--lime); }
.phase-why-link.is-open { color: var(--lime); }

.phase-why {
  margin-top: 12px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  animation: fadeIn var(--dur-mid) var(--ease-out) both;
}

.phase-why.hidden { display: none; }

.phase-why-title {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 700;
  color: var(--lime);
  margin-bottom: 10px;
}

/* Inter on the block so the digits inside these Georgian sentences render as
   numbers; kaWrap() puts the Georgian runs back into Noto (rule 3). */
.phase-why-body {
  font-family: var(--font-num);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.6;
}

.phase-why-para { margin-bottom: 8px; }

.phase-why-item {
  position: relative;
  padding-left: 14px;
  margin-bottom: 7px;
}

.phase-why-item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
}

/* The table is four short columns and fits 375px, but the wrapper keeps rule 6
   true if a phase label is ever lengthened. */
.phase-tbl-wrap {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.phase-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.phase-tbl th {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-align: left;
  padding: 0 8px 6px 0;
  white-space: nowrap;
}

.phase-tbl td {
  font-family: var(--font-ka);
  color: var(--text-2);
  padding: 7px 8px 7px 0;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

.phase-tbl td .num { font-family: var(--font-num); }

.phase-tbl tr.is-current td {
  color: var(--lime);
  font-weight: 600;
}

/* ---------- 3. Daily targets ---------- */
.targets-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.target-card { padding: 14px; }

.target-label {
  font-family: var(--font-ka);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.target-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.target-value .num { font-size: 24px; font-weight: 800; color: var(--text-1); }
.target-sep { font-family: var(--font-num); font-size: 14px; color: var(--text-3); }
.target-value .num.target-max { font-size: 14px; font-weight: 600; color: var(--text-2); }

.target-unit {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
}

.target-remaining {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
}

/* ---------- 4. Weekly meal plan, from a Nourish import (Layer 7) ---------- */
.nourish-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 18px 12px;
  background: none;
  border: 2px dashed var(--lime);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-mid) var(--ease-out);
}

.nourish-drop:active { background: var(--lime-dim); }
.nourish-drop-icon { font-size: 18px; }

.nourish-drop-label {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 600;
  color: var(--lime);
}

/* The hint carries a literal \n from S, so it is laid out rather than escaped. */
.nourish-hint {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 10px;
  white-space: pre-line;
}

.nourish-actions {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.nourish-actions.hidden { display: none; }
.nourish-clear { color: var(--text-3) !important; }

/* ---------- Generated plan rows ---------- */
.wp-day { border-bottom: 1px solid var(--border); }
.wp-day:last-child { border-bottom: none; }

.wp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  cursor: pointer;
}

.wp-head:active { opacity: 0.7; }

.wp-dow {
  flex: 0 0 30px;
  font-family: var(--font-ka);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

/* min-width:0 is what lets a long comma-joined list of recipe names ellipsis
   instead of pushing the kcal column off a 375px screen (rule 6). */
.wp-names {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ka);
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-kcal {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--lime);
}

/* Amber, not red: the day is still usable, it just missed the +/-150 window. */
.wp-kcal.is-off { color: var(--amber); }

.wp-day.open .wp-dow,
.wp-day.open .wp-names { color: var(--lime); }

.wp-detail {
  padding: 4px 0 12px;
  animation: fadeIn var(--dur-mid) var(--ease-out) both;
}

.wp-meal {
  display: flex;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.wp-meal:active { opacity: 0.7; }
.wp-meal:last-child { margin-bottom: 0; }

.wp-meal-add {
  justify-content: center;
  border: 1px dashed var(--border-2);
  background: none;
}

.wp-meal-add .wp-meal-name { color: var(--text-3); font-size: 12px; }

.wp-cover {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
}

.wp-cover img { width: 100%; height: 100%; object-fit: cover; }

.wp-meal-body { flex: 1 1 auto; min-width: 0; }

.wp-meal-slot {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 2px;
}

.wp-meal-name {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.wp-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.wp-macro {
  font-family: var(--font-ka);
  font-size: 10px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  white-space: nowrap;
}

.wp-macro .num { font-family: var(--font-num); }

.wp-ing-label {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 9px;
}

.wp-ing { margin-top: 4px; }

.wp-ing-row {
  font-family: var(--font-ka);
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.5;
}

.wp-ing-row .num { font-family: var(--font-num); color: var(--text-1); }

/* Swap sheet rows — same shape as a plan meal, inside the .free-scroll box. */
.wp-swap-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.wp-swap-item:active { opacity: 0.7; }

/* Bug fix: this rule lost its selector in a Layer 7 edit, so the declarations
   sat orphaned after .wp-swap-item:active and the row never became a flex row —
   emoji, name, timing and check circle stacked vertically. */
.supplement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.supplement-row:last-child { border-bottom: none; }
.supplement-row:active { opacity: 0.7; }

/* ---- The glow cards (2026-09-16) --------------------------------
   Each supplement is its own card lit from below, instead of three flat rows
   divided by hairlines inside one grey card.

   It is the app's own `.card`, not a new component: that class already carries
   `border-radius: 16px`, `padding: 16px`, a 1px hairline, `position: relative`
   AND `overflow: hidden` — which is every structural line of Giorgi's spec, and
   the last two are exactly what the glow needs to be positioned and clipped to
   the rounded corners. Only the background, the glow and the shadow are new.

   `.supplement-row` STAYS on the element as well. Every done-state rule below
   is written against `.supplement-row.done` — the teal check, the spring on the
   tick, the struck-through name — and
   toggleSupplement() flips `done` on the live node. Keeping the class means none
   of that has to be touched or re-tested.

   The selector repeats `.supplement-row` so it cannot lose on source order to
   the base rule above it. Same trap as the splash button's glow and
   `.plank-ring-fill`. */
.supplement-row.sup-card {
  background: var(--sup-card-bg);
  padding: 16px;                 /* .card's own value; restated because the base
                                    .supplement-row rule sets `12px 0`. */
  border-bottom: 1px solid var(--border);   /* .card's hairline, not a divider */
  /* Drawn OUTSIDE the border box, so `overflow: hidden` does not clip it: the
     halo escapes the card while the gradient stays inside it. That split is the
     whole effect — a lit object, not a coloured rectangle.

     The brief said 20px blur at 0.35. Shot at that: three haloes 10px apart on a
     near-black page merged into one another and bled orange up over the meal-plan
     card above, so the section read as a smear rather than three lit objects.
     0.16 at 18px keeps every card's own light and stops them touching. The spec's
     numbers come from a phone shadow API where a shadow is grey; a COLOURED one
     at the same values is far louder. */
  box-shadow: 0 6px 18px rgba(var(--sup-glow), 0.16);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* The light source sitting below the card: a hot spot on the bottom edge that
   falls off sideways as well as upward. A linear band would glow evenly across
   the full width and read as a coloured underline instead.

   THE LAST STOP MUST BE `rgba(…, 0)`, NEVER `transparent`. `transparent` is
   defined as transparent BLACK, so a coloured gradient fading to it interpolates
   through grey and leaves a dirty haze over the glow. */
.sup-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%,
    rgba(var(--sup-glow), 0.25) 0%,
    rgba(var(--sup-glow), 0.10) 45%,
    rgba(var(--sup-glow), 0)    100%);
  transition: opacity var(--dur-mid) var(--ease-out);
}

/* Taken: the light goes out. Dimming rather than recolouring keeps the done
   state carried by the teal tick alone, so the card does not gain a second
   colour on top of its own. */
.supplement-row.sup-card.done { box-shadow: 0 6px 18px rgba(var(--sup-glow), 0.06); }
.sup-card.done::after { opacity: 0.4; }

/* The section lost its wrapping card, so the header now sits directly on the
   page and the cards stack under it. */
.sup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A glow is a translucent wash over a dark surface — the effect this setting
   exists to opt out of. The cards keep their border and stay perfectly legible. */
@media (prefers-reduced-transparency: reduce) {
  .sup-card::after { display: none; }
  .supplement-row.sup-card { box-shadow: none; }
}

.supplement-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.supplement-info { flex: 1; min-width: 0; }

.supplement-name {
  font-family: var(--font-ka);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  transition: color var(--dur-mid) var(--ease-out);
}

.supplement-row.done .supplement-name {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
}

.supplement-when {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.supplement-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background var(--dur-mid) var(--ease-spring),
              border-color var(--dur-mid) var(--ease-spring);
}

.supplement-row.done .supplement-check {
  background: var(--teal);
  border-color: var(--teal);
}

.supplement-check svg {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-mid) var(--ease-spring),
              transform var(--dur-mid) var(--ease-spring);
}

.supplement-row.done .supplement-check svg {
  opacity: 1;
  transform: scale(1);
}

/* ---------- 6. Fat-loss hack ---------- */
.tip-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tip-icon { font-size: 18px; line-height: 1; }

.tip-title {
  font-family: var(--font-ka);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}

/* Inter base, kaWrap() puts the Georgian half back on the Georgian face — the
   hacks mix scripts ("30გ ცილა", "+30%", "80/20"). */
.tip-text {
  font-family: var(--font-num);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ---------- 7. Real Life ---------- */
.real-life-section { margin-top: 4px; }

.real-life-label {
  font-family: var(--font-ka);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.real-life-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.real-life-btn {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-out);
  text-align: left;
  line-height: 1.4;
}

.real-life-btn:active {
  transform: scale(0.96);
  background: var(--surface-2);
}

.real-life-advice-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.real-life-advice-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.real-life-advice-label {
  font-family: var(--font-ka);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* Same mixed-script reasoning as .tip-text — "≈ 180 კკალ · 3გ ცილა". */
.real-life-advice-text {
  font-family: var(--font-num);
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.5;
}

/* ---------- Log picker + confirm sheets ---------- */
.nut-sheet-list { padding: 4px 16px; }

.nut-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
  font-family: var(--font-ka);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}

.nut-sheet-item:last-child { border-bottom: none; }
.nut-sheet-item:active { opacity: 0.7; }

.nut-sheet-item .habit-icon-wrap { flex: 0 0 auto; }

.nut-sheet-btns {
  display: flex;
  gap: 10px;
  padding: 8px 16px 0;
}

.nut-sheet-btns .btn { flex: 1; }
.real-life-advice-list + .nut-sheet-btns { padding-top: 16px; }

/* Where the multiplier came from (2026-09-18). Quieter than .phase-detail-note
   above it: the note is the coaching line, this is the receipt for the number. */
.phase-detail-activity {
  font-family: var(--font-ka);
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}