/* ─── Calorie Tracker — editorial minimalist PWA ─── */

html, body { margin: 0; padding: 0; background: #f0eee9; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ─── design tokens ─── */
.phone {
  --bg:        #f5f1e8;
  --fg:        #1a1612;
  --fg-dim:    #8a8073;
  --fg-faint:  #b5ab9c;
  --rule:      #d9d2be;
  --rule-soft: #e6dfcc;
  --accent:    #b5341c;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.phone.dark {
  --bg:        #1a1612;
  --fg:        #f0e9d9;
  --fg-dim:    #7a7063;
  --fg-faint:  #524a3f;
  --rule:      #3a342a;
  --rule-soft: #2a251e;
  --accent:    #d94b2f;
}

@media (prefers-color-scheme: dark) {
  .phone:not(.light) {
    --bg:        #1a1612;
    --fg:        #f0e9d9;
    --fg-dim:    #7a7063;
    --fg-faint:  #524a3f;
    --rule:      #3a342a;
    --rule-soft: #2a251e;
    --accent:    #d94b2f;
  }
  html, body { background: #0e0c09; }
}

/* ─── phone frame ─── */
.phone {
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  overflow-x: hidden;
  font-feature-settings: "ss01" 1;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* on desktop, render within a centered frame */
@media (min-width: 768px) {
  html, body { min-height: 100vh; }
  body {
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: #f0eee9;
  }
  @media (prefers-color-scheme: dark) { body { background: #0e0c09; } }
  .phone {
    width: 390px;
    min-height: 844px;
    max-height: 92vh;
    height: 844px;
    overflow: hidden;
    border-radius: 36px;
    box-shadow: 0 1px 3px rgba(80,60,40,0.08), 0 18px 48px rgba(80,60,40,0.14);
  }
  @media (prefers-color-scheme: dark) {
    .phone { box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 18px 48px rgba(0,0,0,0.5); }
  }
}

/* type helpers */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }
.italic { font-style: italic; }
.accent { color: var(--accent); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }

/* rules */
.rule      { height: 1px; background: var(--rule); width: 100%; }
.rule-soft { height: 1px; background: var(--rule-soft); width: 100%; }

/* layout */
.screen { display: flex; flex-direction: column; min-height: 100%; position: relative; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 120px; }
.pad { padding: 0 24px; }

/* top nav */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 12px;
  font-family: var(--mono); font-size: 13px;
  position: sticky; top: 0; background: var(--bg); z-index: 10;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.nav .back { color: var(--fg-dim); cursor: pointer; padding: 8px 0; margin: -8px 0; }
.nav .title { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--fg); }
.nav .action { color: var(--fg-dim); cursor: pointer; padding: 8px 0; margin: -8px 0; background: transparent; border: 0; font-family: inherit; font-size: inherit; }
.nav .action.primary { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }

/* home indicator removed in real PWA — OS handles it */

/* FAB */
.fab {
  position: fixed; right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  background: var(--fg); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 32px; font-weight: 300;
  line-height: 1;
  border-radius: 2px;
  border: 0;
  user-select: none;
  cursor: pointer;
  z-index: 20;
}
@media (min-width: 768px) {
  .fab { position: absolute; }
}
.fab:active { transform: translateY(1px); }

/* list rows */
.row {
  display: grid; grid-template-columns: 52px 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.row .time  { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); letter-spacing: 0; text-align: left; }
.row .name  { font-family: var(--serif); font-size: 17px; color: var(--fg); text-align: left; word-break: break-word; }
.row .kcal  { font-family: var(--mono); font-size: 14px; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.row.weight .name { color: var(--fg-dim); font-style: italic; }
.row.weight .kcal { color: var(--fg-dim); }

/* buttons */
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }

/* progress hairline */
.bar { position: relative; height: 1px; background: var(--rule); width: 100%; }
.bar > i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--fg); transition: width 240ms ease; display: block; }
.bar.over > i { background: var(--accent); }

/* sheet */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(26,22,18,0.35);
  z-index: 40;
  animation: fade 180ms ease both;
}
.phone.dark .backdrop { background: rgba(0,0,0,0.55); }
@media (min-width: 768px) {
  .backdrop { position: absolute; border-radius: inherit; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 41;
  max-height: 92%;
  overflow-y: auto;
  animation: slideUp 240ms cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 768px) {
  .sheet { position: absolute; border-radius: 16px 16px 0 0; }
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-grabber {
  width: 36px; height: 4px; background: var(--rule);
  margin: 0 auto 8px;
  border-radius: 2px;
}

/* inputs */
input.field, textarea.field {
  font-family: var(--serif); font-size: 20px;
  background: transparent; border: 0; outline: 0;
  color: var(--fg); width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  resize: none;
}
input.field::placeholder, textarea.field::placeholder { color: var(--fg-faint); }
input.field:focus, textarea.field:focus { border-bottom-color: var(--fg); }

input.num-field {
  font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1.1;
  background: transparent; border: 0; outline: 0;
  color: var(--fg); width: 100%;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--fg);
  font-variant-numeric: tabular-nums;
}
input.time-field {
  font-family: var(--mono); font-size: 18px;
  background: transparent; border: 0; outline: 0;
  color: var(--fg); width: 100%;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
input.weight-field {
  font-family: var(--serif); font-size: 44px; font-weight: 300;
  background: transparent; border: 0; outline: 0;
  color: var(--fg); width: 100%;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--fg);
  font-variant-numeric: tabular-nums;
}

/* settings row */
.setrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.setrow .label { font-family: var(--serif); font-size: 16px; color: var(--fg); white-space: nowrap; }
.setrow .val   { font-family: var(--mono); font-size: 13px; color: var(--fg-dim); white-space: nowrap; }
.setrow .val.on { color: var(--accent); }

.section-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-dim);
  padding: 28px 0 8px;
}

/* chart */
.chart-svg { display: block; width: 100%; }

/* tag strip */
.tagstrip {
  display: flex; gap: 20px; font-family: var(--mono); font-size: 13px;
  color: var(--fg-dim);
}
.tagstrip button { padding: 4px 0; color: inherit; }
.tagstrip button.on { color: var(--accent); }

/* day group header */
.dayhead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.dayhead .date { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--fg); white-space: nowrap; }
.dayhead .date.today { color: var(--accent); }
.dayhead .tot  { font-family: var(--mono); font-size: 13px; color: var(--fg); white-space: nowrap; }
.dayhead .tot.over { color: var(--accent); }

/* undo toast */
.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: 12px;
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 30;
  animation: slideUp 180ms ease both;
}
@media (min-width: 768px) {
  .toast { position: absolute; }
}
.toast .act { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; background: transparent; border: 0; padding: 0; font: inherit; }

/* helpers */
.flex { display: flex; }
.between { justify-content: space-between; }
.baseline { align-items: baseline; }
.center { align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }

/* date heading */
.greet {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--fg-dim);
  padding-top: 14px; padding-bottom: 24px;
}

.hero-num {
  font-family: var(--serif); font-size: 72px; font-weight: 300;
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero-unit {
  font-family: var(--mono); color: var(--fg-dim); font-size: 13px;
  padding-bottom: 14px;
}
.hero-sub {
  font-family: var(--mono); color: var(--fg-dim); font-size: 12px;
  margin-top: 6px; margin-bottom: 14px;
}

.kicker {
  font-family: var(--mono); color: var(--fg-dim); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 0;
}

/* empty state */
.empty {
  padding: 40px 0;
  text-align: center;
  font-family: var(--serif); font-style: italic;
  color: var(--fg-faint);
  font-size: 15px;
}

/* ─── Phase 6b.1: toast slot (#toast) + login layout ───
   The older .toast class (L276) belongs to the localStorage
   undo pattern and is removed in 6b.5 when app.js drops its
   inline toast DOM. Selectors are disjoint (id vs class) so
   they coexist harmlessly during the migration. */

#toast {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--fg, #1a1612);
  color: var(--bg, #f5f1e8);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.4;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}
#toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (min-width: 768px) {
  #toast { position: absolute; }
}
#toast .toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
#toast .toast-action {
  flex: 0 0 auto;
  color: var(--accent, #b5341c);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
#toast .toast-action[hidden] { display: none; }

/* Login page layout (login.html). Wrapped in .phone so it
   inherits design tokens and auto light/dark + the desktop
   phone-frame treatment. */
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  text-align: center;
  gap: 12px;
}
@media (min-width: 768px) {
  .login { min-height: 100%; height: 100%; }
}
.login-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--fg);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.login-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-dim);
  margin: 0 0 48px;
}
.login-cta {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 14px 20px;
  cursor: pointer;
}
.login-cta:active { transform: translateY(1px); }