/* ==================================================================
   Daily plan — the day list, calories and the end-of-day summary
   Loaded after style.css, so it can lean on the same variables.
   ================================================================== */

.pill-info   { background: #e8f1fb; color: #1a5c96; border-color: #c3ddf5; }
.pill-danger { background: #ffeaec; color: #a32330; border-color: #ffc9ce; }

.ls-pos { color: #8a5a00; }
.ls-neg { color: #1c7a43; }

/* ---------- Collapsible sections in forms ---------- */
.ls-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 14px;
  background: #fbfcfe;
}
.ls-fold > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-soft);
  list-style: none;
  padding: 2px 0;
}
.ls-fold > summary::-webkit-details-marker { display: none; }
.ls-fold > summary::before { content: '▸ '; }
.ls-fold[open] > summary::before { content: '▾ '; }
.ls-fold[open] > summary { margin-bottom: 10px; color: var(--text); }

/* ---------- Trainer: energy snapshot ---------- */
.ls-energy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ls-e-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fbfcfe;
  display: flex; flex-direction: column; gap: 2px;
}
.ls-e-lbl { font-size: .78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; }
.ls-e-val { font-size: 1.35rem; font-weight: 700; }
.ls-e-sub { font-size: .78rem; color: var(--text-soft); }

/* ---------- Day groups (trainer, three days at a time) ---------- */
.ls-daygroup { margin-bottom: 18px; }
/* Moving the three-day window. A view control only — nothing it does
   changes a plan, so it sits above the days rather than inside them. */
.ls-daynav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ls-daynav .muted { font-size: .88rem; }
.ls-daynav-jump { margin-left: auto; }
.ls-daynav-jump input[type="date"] {
  font: inherit; font-size: .85rem; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}

.ls-daygroup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.ls-daygroup-head .muted { margin-left: auto; font-size: .82rem; }

.ls-occ {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--surface);
}
.ls-occ-time { font-weight: 700; font-variant-numeric: tabular-nums; }
/* THE MIDDLE COLUMN HAS TO BE ALLOWED TO SHRINK. .ls-occ is a three-column
   grid (58px / 1fr / auto). A grid item's min-width defaults to auto, which
   means min-content — and the min-content of this column is a long entry
   title plus a run of .pill badges that are white-space: nowrap and cannot
   break. So a plan entry with a long name and four badges (single, paused,
   pinned, plus its status) would push the row wider than its card instead
   of wrapping inside it. min-width: 0 lets the column give way, which is what
   the 1fr was asking for in the first place. */
.ls-occ-main { min-width: 0; }
.ls-occ-meta { font-size: .82rem; }
.ls-occ-off  { opacity: .5; }
.ls-occ-done    { border-left: 4px solid #1c7a43; }
.ls-occ-skipped { border-left: 4px solid #8a5a00; }
.ls-occ-missed  { border-left: 4px solid #a32330; }
.ls-occ-pending { border-left: 4px solid var(--border); }

.ls-occ-actions > summary {
  list-style: none; cursor: pointer;
}
.ls-occ-actions > summary::-webkit-details-marker { display: none; }
/* OPENED, IT TAKES THE WHOLE ROW. Its panel is a full form; left in the
   third (auto) column it widened that column to the form's width and crushed
   the entry's own text to a sliver — "Bre / akf / ast", one syllable a line. */
.ls-occ-actions[open] { grid-column: 1 / -1; }
.ls-occ-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  min-width: 260px;
}

/* ---------- Scope selector in the edit modal ---------- */
.ls-scope {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fbfcfe;
  margin-bottom: 14px;
}
.ls-scope .ls-switch { display: flex; gap: 8px; margin: 6px 0; }

.ls-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}

/* ---------- Client: day navigation ----------

   SCOPED TO .card. A bare .ls-daynav here — the same class the trainer's
   three-day window control above uses — would win by being later in the
   file, and the trainer's nav would silently pick up this block's
   justify-content:space-between and padding:12px 16px. With
   .ls-daynav-jump { margin-left: auto } already pushing the date jump to the
   right, space-between would shove the arrows and the title to opposite
   edges with a gap of nothing down the middle.

   The client's markup is <div class="card ls-daynav"> and the trainer's is a
   plain <div class="ls-daynav">, so scoping to .card targets exactly the one
   these rules were written for and leaves the trainer's alone. */
.card.ls-daynav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
}
.card.ls-daynav .ls-daynav-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }

/* ---------- Client: calorie hero ---------- */
.ls-cal-hero {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 8px 0 4px;
}
.ls-cal-block { display: flex; flex-direction: column; align-items: center; min-width: 92px; }
.ls-cal-num { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ls-cal-num.is-neg { color: #1c7a43; }
.ls-cal-num.is-pos { color: #8a5a00; }
.ls-cal-lbl { font-size: .78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; }
.ls-cal-op { font-size: 1.4rem; color: var(--text-soft); }

.ls-goal-line {
  margin-top: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: #f4f7fb;
  font-size: .9rem;
}

.ls-breakdown { display: flex; flex-direction: column; gap: 2px; }
.ls-brow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .9rem;
}
/* The figure on the right keeps its number and unit together ("1,820 kcal / day"
   broke into three lines on a phone); the words on the left take the wrapping. */
.ls-brow > span { min-width: 0; }
.ls-brow > b { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.ls-brow.ls-bsub { font-size: .8rem; color: var(--text-soft); padding-left: 14px; border-bottom: none; }
.ls-brow.ls-btotal { font-weight: 700; border-bottom: none; border-top: 2px solid var(--border); margin-top: 4px; }

.ls-est { margin-top: 10px; font-size: .88rem; color: var(--text-soft); min-height: 1.2em; }

/* ---------- Client: timeline entries ---------- */
.ls-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-tl-meta { font-size: .84rem; }
.ls-link { font-size: .86rem; }

.ls-act {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;
  margin-top: 10px;
}
.ls-act-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ls-act-fold > summary { list-style: none; cursor: pointer; display: inline-block; }
.ls-act-fold > summary::-webkit-details-marker { display: none; }
.ls-mini   { width: 74px; }
.ls-notein { max-width: 220px; }
.ls-delay-panel {
  margin-top: 8px; padding: 10px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: #fbfcfe;
}

.ls-two-col {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px;
}
@media (max-width: 820px) {
  .ls-two-col { grid-template-columns: 1fr; }
  .ls-occ { grid-template-columns: 52px 1fr; }
  .ls-occ-actions { grid-column: 1 / -1; }
}

/* ---------- Digest card ---------- */
.dg-card { border: 1px solid var(--border); }
.dg-card.dg-new { border-color: var(--red); box-shadow: var(--shadow-md); }
.dg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dg-headline { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }

.dg-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.dg-stat { display: flex; flex-direction: column; }
.dg-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.dg-lbl { font-size: .74rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; }

.dg-energy {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 14px; background: #fbfcfe;
}
.dg-erow { display: flex; justify-content: space-between; padding: 4px 0; font-size: .9rem; }
.dg-erow.dg-etotal { font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.dg-neg { color: #1c7a43; }
.dg-pos { color: #8a5a00; }

.dg-section { margin-bottom: 12px; }
.dg-section h4 { margin: 0 0 6px; font-size: .92rem; }
.dg-list { list-style: none; padding: 0; margin: 0; }
.dg-list li { padding: 3px 0; font-size: .9rem; }
.dg-time { display: inline-block; min-width: 44px; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.dg-foot { font-size: .82rem; margin-bottom: 0; }

/* ==================================================================
   Energy meter — fills with what you burn, drains with what you eat
   ================================================================== */

.ls-meter {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
}

.ls-meter-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 10px; margin-bottom: 12px;
}
.ls-meter-big { display: flex; align-items: baseline; gap: 6px; }
.ls-meter-num {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #1c7a43;
  transition: color .3s ease;
}
.ls-meter-unit { font-size: 1rem; font-weight: 600; color: var(--text-soft); }
.ls-meter-cap  { font-size: .86rem; color: var(--text-soft); }

.ls-meter.is-over .ls-meter-num { color: #b3261e; }

/* The bar. Burn is the track that fills; food is drawn over it, so the
   uncovered part of the fill IS the remaining number, visually. */
.ls-meter-bar {
  position: relative; height: 18px; border-radius: 9px;
  background: #eceff3; overflow: hidden;
}
.ls-meter-fill, .ls-meter-eat {
  position: absolute; top: 0; left: 0; bottom: 0;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.ls-meter-fill { background: linear-gradient(90deg, #2f9e63 0%, #37b874 100%); }
.ls-meter-eat  { background: repeating-linear-gradient(
                   135deg, #f0a02a 0 6px, #e8942099 6px 12px); opacity: .95; }

.ls-meter.is-over .ls-meter-eat {
  background: repeating-linear-gradient(135deg, #d2453b 0 6px, #c2392f99 6px 12px);
}

.ls-meter-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px; font-size: .82rem; color: var(--text-soft);
}
.ls-lg { display: inline-flex; align-items: center; gap: 6px; }
.ls-lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ls-lg-out i { background: #37b874; }
.ls-lg-eat i { background: #f0a02a; }
.ls-lg b { color: var(--text); font-variant-numeric: tabular-nums; }
.ls-lg-note { margin-left: auto; font-style: italic; }

@media (max-width: 520px) {
  .ls-meter-num { font-size: 2rem; }
  .ls-lg-note { margin-left: 0; width: 100%; }
}

/* ---- trainer-side weekly strip ---- */
.ls-week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; margin: 10px 0 4px;
}
.ls-ws-day {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 4px; text-align: center; background: #fff;
}
.ls-ws-dow  { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); }
.ls-ws-num  { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }
.ls-ws-day.is-deficit .ls-ws-num { color: #1c7a43; }
.ls-ws-day.is-surplus .ls-ws-num { color: #b3261e; }
.ls-ws-day.is-blank   { background: #f7f8fa; }
.ls-ws-day.is-blank .ls-ws-num { color: var(--text-soft); font-weight: 500; }
.ls-ws-sum { font-size: .88rem; color: var(--text-soft); margin-top: 6px; }
.ls-ws-sum b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- factor suggestion ---- */
.ls-suggest {
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 8px; background: #fbfcfe; font-size: .86rem;
}
.ls-suggest b { font-variant-numeric: tabular-nums; }
.ls-suggest .ls-sg-why { color: var(--text-soft); display: block; margin-top: 3px; }

/* PLANNED VERSUS ACTUAL on a day's entry. The plan is stated quietly and the
   real figure is the one that carries weight, because the real figure is what
   the energy meter counted and what the person actually did. */
.ls-tl-meta .ls-planned { opacity: .7; }
.ls-tl-meta b { font-weight: 700; }
.ls-tl-meta .ls-over  { color: var(--warn, #b45309); }
.ls-tl-meta .ls-under { color: var(--ok, #0f766e); }

/* ------------------------------------------------------------------ */
/* A MEASURED WORKOUT ON THE DAY                                       */
/* ------------------------------------------------------------------ */

/* Set apart from the typed entries around it, because it is a different kind
   of thing: this one was recorded off a body rather than planned by a person,
   and what can be done to it is different too. */
.ls-wk {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ac-border, #dfe8e6);
  border-left: 3px solid #c1121f;
  border-radius: 10px;
  background: #fff;
}
.ls-wk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ls-wk-tag {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c1121f;
}
.ls-wk-facts { font-size: .8rem; color: var(--muted, #6b7f7b); }

/* The person's own figure, stated next to the measured one rather than
   replacing it — both are true about different things. */
.ls-wk-over {
  font-size: .84rem;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #f0dfae;
}
.ls-wk-over em { color: var(--muted, #6b7f7b); font-style: italic; }
.ls-wk .ls-act { margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* THE DAY, PHOTOGRAPHED                                               */
/* ------------------------------------------------------------------ */

/* A thin strip under each day's entries: small enough to skim past when
   nothing is odd, big enough to recognise a plate. Clicking opens the full
   picture — the entries themselves are edited right above it. */
.fp-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
}
.fp-shot {
  flex: 0 0 auto;
  width: 96px;
  text-decoration: none;
  color: var(--muted, #6b7f7b);
}
.fp-shot img {
  width: 96px;
  height: 72px;
  object-fit: contain;            /* A meal photo is evidence — show all of it */
  background: var(--surface-2, #f4f7f6);
  border-radius: 8px;
  border: 1px solid var(--ac-border, #dfe8e6);
  display: block;
}
.fp-shot span {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  margin-top: 3px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* THE DAY NAVIGATION ON A PHONE                                       */
/* ------------------------------------------------------------------ */

/*
   Previous / the date / next / jump-to share one flex row, which on a
   narrow screen would wrap into a column — each control on its own line,
   four lines deep, pushing the day itself below the fold.

   Below 560px they become a fixed grid instead: the two arrows keep their
   ends, the title takes the middle, and the date picker sits underneath on
   its own full-width row where it is actually usable with a thumb.
*/
/*
   SCOPED TO .card — this grid belongs to the CLIENT's day nav only.

   It names three areas, prev / title / next, and fills them by position:
   the first <a> is prev, the last <a> is next, .ls-daynav-title is the
   middle. That describes the client's markup exactly, and describes the
   TRAINER's not at all. The trainer's window control is a different shape —
   two arrows, a plain <span> with the date range, a conditional "Back to
   today" and the date jump — and it wears the same bare .ls-daynav class, so
   under 560px a bare selector would fold it into this grid too. There, "Back
   to today" would become the last <a> and take the next cell from "Later →";
   the date range and "Later →" would match no area and be auto-placed into
   implicit rows underneath; and the title cell, which nothing on the
   trainer's nav claims, would sit empty in the middle — a nav in four ragged rows
   with a hole in it.

   The client's wrapper is <div class="card ls-daynav">, the trainer's is a
   plain <div class="ls-daynav">, so .card is what tells them apart.
*/
@media (max-width: 560px) {
  .card.ls-daynav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "prev title next"
      "jump jump jump";
    align-items: center;
    gap: 8px 10px;
  }
  .card.ls-daynav > a:first-of-type,
  .card.ls-daynav > .btn:first-of-type { grid-area: prev; }
  .card.ls-daynav .ls-daynav-title { grid-area: title; text-align: center; min-width: 0; }
  .card.ls-daynav .ls-daynav-title strong { display: block; overflow-wrap: break-word; }
  .card.ls-daynav > a:last-of-type,
  .card.ls-daynav > .btn:last-of-type { grid-area: next; }
  .card.ls-daynav .ls-daynav-jump {
    grid-area: jump;
    margin-left: 0;
    display: flex;
    justify-content: center;
  }
  .card.ls-daynav .ls-daynav-jump input[type="date"] { width: 100%; max-width: 260px; }

  /* The trainer's window control simply wraps, which is what it was built
     to do; this grid must not catch it. */
  .ls-daynav:not(.card) { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ */
/* The AI plan draft — a proposal, and it must never look like a saved */
/* Plan. The banner and the tinted table are the whole point: a        */
/* Trainer glancing at this screen has to be able to tell in one look  */
/* That nothing has happened yet.                                      */
/* ------------------------------------------------------------------ */
.ai-draft-banner {
    background: #fff6e5;
    border: 1px solid #f0c987;
    border-left: 4px solid #e8a13c;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .92rem;
    color: #6b4a12;
}
.ai-draft-concerns {
    margin-top: 12px;
    background: var(--surface-2, #f6f8f9);
    border: 1px solid var(--border, #dfe5e8);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .9rem;
}
.ls-cat-pill {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-2, #eef2f4);
    color: var(--muted, #5c6b73);
    margin-left: 6px;
    vertical-align: middle;
}

/* =====================================================================
   the client's plan page, tidied.

   A line where a line will do, the day itself above the sections that are
   answered once a day, and an action row (a dropdown, a number box and five
   buttons) that does not wrap into a thicket. Layout only — no behaviour.
   ===================================================================== */

/* The day selector. The arrows are arrows, the date never wraps (a link
   label could wrap to one letter per line on a narrow phone), and it shrinks
   rather than stacking. */
/* Scoped to .card for the same reason as the block above: nowrap on a bare
   .ls-daynav would also reach the trainer's nav, which has five children and
   needs to wrap. */
.card.ls-daynav { flex-wrap: nowrap; gap: 8px; }
.ls-daynav-arrow { flex: 0 0 auto; padding: 6px 12px; font-size: 1.05rem; line-height: 1; }
.card.ls-daynav .ls-daynav-title {
  flex: 1 1 auto; min-width: 0; justify-content: center;
  flex-wrap: wrap; text-align: center;
}
.card.ls-daynav .ls-daynav-title strong { white-space: nowrap; }
.ls-daynav-today { font-size: .8rem; }
@media (max-width: 420px) {
  .card.ls-daynav .ls-daynav-title strong { font-size: .95rem; }
  .ls-daynav-arrow { padding: 6px 9px; }
}

/* A card header that holds a title and one action without the action
   floating over the title on a narrow screen. */
.ls-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}

/* Entry rows: the title line breathes, and the controls sit in one tidy
   band at the bottom instead of trailing off the side. */
.ls-tl-head { gap: 6px 8px; line-height: 1.35; }
.ls-tl-head strong { flex: 1 1 auto; min-width: 0; }
.ls-act {
  gap: 6px; align-items: center;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.ls-act .btn { flex: 0 0 auto; }
.ls-act-form { gap: 5px; }
.ls-mini { width: auto; min-width: 84px; }
.ls-notein { max-width: 180px; flex: 1 1 140px; }
@media (max-width: 560px) {
  .ls-act, .ls-act-form { width: 100%; }
  .ls-act .btn, .ls-act-form .btn { flex: 1 1 auto; }
  .ls-notein { max-width: none; }
}

/* The week ahead carries the person's own to-dos beside the plan. */
.ls-week-todo span:last-child { color: var(--text-soft); }

/* Folded sections read as headings, not as browser widgets. */
.ls-fold > summary { cursor: pointer; padding: 4px 0; }
.ls-fold > summary strong { font-size: 1.02rem; }

/* The description a trainer wrote against a plan entry, shown inside
   the entry. Quiet enough not to compete with the title, wide enough to read
   a list of sets or ingredients. */
.ls-tl-details {
  margin: 4px 0 0; padding-left: 2px;
  font-size: .88rem; line-height: 1.45; color: var(--text-soft);
  white-space: normal;
}

/* carbs, protein and fat — a day's summary line and the optional boxes on meal forms */
.ls-macros { display: inline; line-height: 1.6; }
.ls-macros .ls-macro-bit { white-space: nowrap; }
.ls-macros .ls-macro-bit b { font-weight: 600; }
.ls-daygroup > .ls-macros { margin: 2px 0 8px; }