/* ============================================================
   //nutri — app shell styles. Layout + a few overrides only.
   Everything visual comes from the design system (.in-* classes,
   tokens.css). No hard-coded hex that exists as a token.
   Light mode only (the app is light-only by design).
   ============================================================ */

html, body { height: 100%; }
body { min-height: 100dvh; }

/* The `hidden` attribute must always win over author display rules
   (e.g. .auth{display:flex}); author styles otherwise beat the UA rule. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   LOGIN
--------------------------------------------------------------- */
.auth {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sp-6) + var(--safe-top)) var(--sp-5) calc(var(--sp-6) + var(--safe-bottom));
}
.auth__box { width: 100%; max-width: 360px; }
.auth__mark {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 44px; letter-spacing: -2px; line-height: .95;
}
.auth__sub { margin-top: var(--sp-3); }
.auth__form { margin-top: var(--sp-6); }
.auth__note { min-height: 20px; margin: var(--sp-3) 0 0; }
.auth__note.is-error { color: var(--sig-red); }

/* ---------------------------------------------------------------
   SHELL — mobile first (single column, fixed bottom nav)
--------------------------------------------------------------- */
.shell { min-height: 100dvh; }
.shell__sidebar { display: none; }
.shell__main {
  padding-bottom: calc(72px + var(--safe-bottom));  /* clears fixed bottom nav */
  max-width: 720px;
  margin: 0 auto;
}
.shell__statusbar { padding-top: calc(6px + var(--safe-top)); }

.page { padding: 0 var(--sp-5); }

/* directional page transition is driven by pageTransition() (design v6, inline styles) */

/* ---------------------------------------------------------------
   CAPTURE
--------------------------------------------------------------- */
.capture {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
}
.capture__well {
  /* the shared .in-recwell is 132px; nutri wants the hero size */
  width: 200px; height: 200px;
}
.capture__well::before { width: 184px; height: 184px; }
.capture__well .in-rec {
  width: 148px; height: 148px;
  box-shadow: 0 6px 0 rgba(19,19,22,.16), 0 14px 26px rgba(19,19,22,.2);
}
.capture__well .in-rec:active { box-shadow: inset 0 3px 10px rgba(0,0,0,.3); }
/* Guarantee the REC state colours on the hero-sized key (our .capture__well .in-rec
   sizing selector ties specificity with the lib's state rules; restate the state
   backgrounds at higher specificity so recording=red, thinking=ink, result=green
   always win). Red appears only while recording — the one allowed red zone. */
.capture__well .in-rec[data-state="ready"]     { background: var(--live); }
.capture__well .in-rec[data-state="recording"] { background: var(--sig-red); }
.capture__well .in-rec[data-state="thinking"]  { background: var(--ink); }
.capture__well .in-rec[data-state="result"]    { background: var(--sig-green); }
.capture__well .in-rec__label { font-size: 16px; }
.capture__well .in-rec__bars { height: 40px; gap: 4px; }
.capture__well .in-rec__bars > span { width: 5px; }
.capture__well .in-rec__spin { width: 32px; height: 32px; }
.capture__well .in-rec__check { width: 40px; height: 40px; }

.capture__caption { text-align: center; min-height: 52px; }
.capture__sub { font-size: 17px; font-weight: 700; }
.capture__quote { font-style: italic; margin-top: 4px; }

.capture__text { width: 100%; max-width: 440px; margin-top: var(--sp-2); }
.capture__text-row { display: flex; gap: var(--sp-2); align-items: center; }
.capture__text-row .in-field { flex: 1; }

/* review + result + error cards */
.review, .result, .capture__error {
  width: 100%; max-width: 440px;
  margin: var(--sp-5) auto 0;
}
.review__text { margin-top: var(--sp-3); }
.review__actions,
.result__actions,
.capture__error-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.review__actions .in-btn,
.result__actions .in-btn { flex: 1; height: 44px; }

.result { border-color: var(--sig-green); padding: var(--sp-4); box-shadow: var(--e-2); }
.result__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.result__name { font-size: 17px; font-weight: 700; margin-top: 2px; }
.result__kcal { font-size: 24px; font-weight: 600; color: var(--cal); }
.result__macros { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.result__macro {
  flex: 1; text-align: center; padding: 6px;
  border-radius: var(--r-1); background: var(--recess);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.result__macro--protein { color: var(--protein); }
.result__macro--carb { color: var(--carb); }
.result__macro--fat { color: var(--fat); }

.capture__error { border-color: var(--sig-red); text-align: center; }
.capture__error-head { display: flex; justify-content: center; }
.capture__error-title { font-size: 18px; font-weight: 700; margin-top: var(--sp-3); }
.capture__error-text { margin: var(--sp-2) auto var(--sp-4); max-width: 30ch; }
.capture__error-actions { justify-content: center; }

/* ---------------------------------------------------------------
   JOURNAL
--------------------------------------------------------------- */
.journal { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-2); }
.journal__left { display: flex; flex-direction: column; gap: var(--sp-4); }

.journal-hero { border-radius: var(--r-4); }
.journal-hero__head { display: flex; justify-content: space-between; align-items: baseline; }
.journal-hero__goal { font-size: 12px; color: rgba(255,255,255,.5); }
.journal-hero__odo { margin-top: 4px; }
/* nutri hero readout: mono, fits SE (375) with 4 digits + separator */
.journal-hero__odo .in-odo--xl { font-size: 60px; letter-spacing: -3px; }
.journal-hero__odo .in-odo--xl .in-odo__unit { font-size: 18px; margin: 0 0 8px 6px; }
.journal-hero__bar {
  height: 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); margin-top: var(--sp-3); overflow: hidden;
}
.journal-hero__fill { height: 100%; border-radius: var(--r-pill); background: var(--cal); width: 0; transition: width var(--d-4) var(--ease-out); }

.macros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.macro-tile { padding: var(--sp-3); }
.macro-tile__val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.macro-tile__unit { font-size: 12px; color: var(--ink-3); margin-left: 3px; }
.macro-tile .in-bar { margin-top: 6px; }
.macro-tile .in-bar__track { height: 4px; }

.journal__entries-head { margin-bottom: var(--sp-2); }
.entry {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--hairline);
  cursor: pointer; width: 100%; background: none; border-left: none;
  border-right: none; border-bottom: none; text-align: left; font: inherit; color: inherit;
}
.entry:hover { background: var(--recess); }
.entry__body { flex: 1; min-width: 0; }
.entry__title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry__meta { margin-top: 1px; }
.entry__kcal { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--cal); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   REPAS ENREGISTRÉS
--------------------------------------------------------------- */
.repas { padding-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.template {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--hairline); border-radius: var(--r-3);
  background: var(--panel);
}
.template__body { flex: 1; min-width: 0; cursor: pointer; }
.template__name { font-size: 15px; font-weight: 600; }
.template__meta { margin-top: 1px; }
.template__kcal { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--cal); font-variant-numeric: tabular-nums; }
.template__add {
  width: 40px; height: 40px; flex: none;
  border: none; border-radius: var(--r-2);
  background: var(--live); color: #fff; font-size: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 var(--live-press);
  transition: transform var(--d-1) var(--ease-spring), box-shadow var(--d-1);
}
.template__add:active { transform: translateY(2px); box-shadow: none; }
.template__add:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash), 0 2px 0 var(--live-press); }
.template__add .in-glyph { width: 20px; height: 20px; stroke: #fff; }

.settings { padding-top: var(--sp-2); }

/* ---------------------------------------------------------------
   SHEET forms (add template, edit entry)
--------------------------------------------------------------- */
.sheet-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.sheet-form .in-field-label { margin-top: var(--sp-2); }
.sheet-form__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.sheet-form__actions .in-btn { flex: 1; }

/* empty state helper */
.empty-wrap { padding-top: var(--sp-6); }

/* ---------------------------------------------------------------
   DESKTOP (≥ 900px): 216px sidebar + content, journal 2-col
--------------------------------------------------------------- */
@media (min-width: 900px) {
  .shell { display: flex; align-items: stretch; }
  .shell__sidebar { display: flex; position: sticky; top: 0; height: 100dvh; }
  .shell__bottomnav { display: none; }
  .shell__statusbar { display: none; }
  .shell__main {
    flex: 1; min-width: 0; max-width: none;
    padding: var(--sp-4) var(--sp-6) var(--sp-7);
  }
  .page { padding: 0; max-width: 1100px; }

  /* capture stays centred, comfortable */
  .capture { padding-top: var(--sp-6); }

  /* journal becomes two columns: total+channels left, entries right */
  .journal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sp-5); align-items: start;
  }
  .journal-hero__odo .in-odo--xl { font-size: 72px; }
  .macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal__right {
    border: 1px solid var(--hairline); border-radius: var(--r-4);
    background: var(--panel); overflow: hidden;
    padding: var(--sp-4);
  }
  .repas { max-width: 640px; }
}

/* on wide desktop, show all 4 macro channels in a single row */
@media (min-width: 1200px) {
  .macros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}