/* ==========================================================================
   LazyLean — Swiss poster
   Off-white ground, black rules, one signal red. Archivo across its width
   axis: condensed for numbers and headlines; the wordmark spans the whole
   axis, LAZY at its widest and LEAN at its narrowest. Square corners, no
   shadows, no ornament; hierarchy comes from size, weight and the grid.
   The menu flips the poster to its negative.
   ========================================================================== */

:root {
  --ground: #f2f1ec;
  --ground-deep: #e6e5de;
  --field: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #5c5b56;
  --hair: #c8c7bf;
  /* --red fills (white type sits on it); --red-text is red type on the ground */
  --red: #d40a00;
  --red-deep: #a30800;
  --red-text: #d40a00;
  --on-red: #ffffff;

  --rule: 3px solid var(--ink);
  --rule-thin: 1px solid var(--ink);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: var(--on-red); }

:focus-visible { outline: 3px solid var(--red-text); outline-offset: 2px; }

.shell { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: 20px; }

main.shell { flex: 1; padding-top: 22px; padding-bottom: 72px; }

a { color: inherit; }

.muted { color: var(--ink-soft); font-weight: 400; }

/* read aloud, never drawn */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the one ornament: a small red square that marks a label */
.eyebrow::before,
.sum-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  background: var(--red);
}

/* --------------------------------------------------------------------------
   Header & nav
   -------------------------------------------------------------------------- */

.site-header { border-bottom: var(--rule); }

.header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 12px;
}

.brand { text-decoration: none; display: flex; align-items: baseline; gap: 16px; min-width: 0; }

/* the name, set as its meaning: lazy sprawls, lean is condensed and red */
.brand-mark {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-lazy { font-stretch: 125%; }

.brand-lean { font-stretch: 62%; color: var(--red-text); }

.brand-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.brand-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}

.site-nav { border-top: var(--rule-thin); }

.nav-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.nav-link + .nav-link { border-left: var(--rule-thin); }

.nav-num { font-weight: 400; }

.nav-link:hover { color: var(--red-text); }

.nav-link.is-active { background: var(--ink); color: var(--ground); }

/* --------------------------------------------------------------------------
   Day pager
   -------------------------------------------------------------------------- */

.day-pager {
  display: grid;
  /* minmax(0, …) lets the link cells shrink below their nowrap content so
     narrow phones truncate labels instead of overflowing the page. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: var(--rule-thin);
  padding: 0 0 2px;
  margin-bottom: 22px;
}

.pager-prev { display: flex; justify-content: flex-start; min-width: 0; }
.pager-next { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }

.pager-link {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  padding: 13px 0;
  display: inline-flex;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

/* the label truncates on narrow phones; the arrow beside it never does */
.pager-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pager-glyph { flex: none; }

.pager-link:hover { color: var(--red-text); }
.pager-glyph { color: var(--red-text); }

.pager-stamp {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Type & section furniture
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 10px;
}

.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--red-text); }

/* Today's prompt: a section heading under the day's headline number */
.capture-title {
  font-size: clamp(21px, 4vw, 26px);
  font-weight: 900;
  font-stretch: 110%;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

/* every other page leads with a condensed poster headline */
.page-title {
  font-size: clamp(44px, 11vw, 88px);
  font-weight: 900;
  font-stretch: 62%;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}

.capture-title em, .page-title em { font-style: normal; color: var(--red-text); }

.page-sub { font-size: 17px; color: var(--ink-soft); margin: 0 0 28px; max-width: 52ch; }

.ledger-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 36px 0 0;
  padding-bottom: 5px;
  border-bottom: var(--rule);
}

.ledger-head h2 {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0;
  white-space: nowrap;
}

.ledger-head .rule { flex: 1; }

.empty-state {
  font-size: 15px;
  color: var(--ink-soft);
  padding: 22px 0;
  margin: 0;
  border-bottom: var(--rule-thin);
}

/* --------------------------------------------------------------------------
   Day summary — the headline number
   -------------------------------------------------------------------------- */

.day-summary { margin-bottom: 30px; }

.sum-label {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.sum-total { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin: 8px 0 0; }

.sum-num {
  font-size: clamp(104px, 32vw, 184px);
  font-weight: 900;
  font-stretch: 62%;
  line-height: .8;
  letter-spacing: -.035em;
}

.sum-unit {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  font-stretch: 110%;
  line-height: 1;
  color: var(--red-text);
}

.sum-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0 0;
  border-top: var(--rule);
  border-bottom: var(--rule-thin);
}

.macro-cell { padding: 8px 0 10px; }

.macro-cell + .macro-cell { padding-left: 12px; border-left: var(--rule-thin); }

.macro-cell dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.macro-cell dd {
  margin: 0;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 1.1;
}

/* the label, and a cheat day's stamp at the far end of its row */
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* a cheat day (#166): the one red block on the page */
.cheat-stamp {
  padding: 6px 9px 5px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--on-red);
  background: var(--red);
}

.cheat-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 4px; }

.cheat-note { margin: 0 auto 0 0; font-size: 14px; line-height: 1.35; color: var(--ink-soft); }

.cheat-toggle .card-action { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; white-space: nowrap; }

/* an open square: the day isn't flagged */
.cheat-mark::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; }

/* --------------------------------------------------------------------------
   Capture form
   -------------------------------------------------------------------------- */

.capture-box textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 11px 13px;
  background: var(--field);
  resize: none;
  font-family: var(--sans);
  /* ≥16px keeps iOS Safari from zooming the page when the field gets focus */
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}

.capture-box textarea::placeholder { color: var(--ink-soft); }

.capture-box textarea:focus { outline: none; border-color: var(--red-text); box-shadow: inset 0 0 0 1px var(--red-text); }

.capture-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.photo-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}

.photo-button:hover { background: var(--ink); color: var(--ground); }

.photo-button:focus-within { outline: 3px solid var(--red-text); outline-offset: 2px; }

.photo-button input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.when-field {
  min-height: 44px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0 10px;
}

.when-field:focus { outline: none; border-color: var(--red-text); box-shadow: inset 0 0 0 1px var(--red-text); }

.log-button {
  min-height: 46px;
  padding: 0 24px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--on-red);
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.log-button:hover { background: var(--red-deep); border-color: var(--red-deep); }

.capture-row .log-button { flex: 1 1 120px; min-height: 44px; }

.capture-photo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px;
  background: var(--field);
  border: var(--rule-thin);
}

.capture-photo-preview img { width: 44px; height: 44px; object-fit: cover; display: block; }

.photo-name {
  font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-clear {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.photo-clear:hover { color: var(--red-text); }

.form-error {
  font-size: 14px;
  font-weight: 700;
  color: var(--red-text);
  border: 2px solid var(--red-text);
  padding: 8px 12px;
  margin: 0 0 12px;
}

.setup-note {
  font-size: 14px;
  border: 2px solid var(--red-text);
  padding: 10px 14px;
  margin: 12px 0 0;
}

.setup-note code { font-family: var(--mono); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Meal rows — a timetable: time · photo · what · kcal
   -------------------------------------------------------------------------- */

/* The list owns the columns and each row borrows them (subgrid), so text
   lines up down the list whether or not a row has a time or a photo. An
   empty column collapses to nothing; spacing comes from margins, not gaps. */
.meal-list { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; }

.meal-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: var(--rule-thin);
  animation: card-in .35s ease both;
}

@keyframes card-in { from { opacity: 0; } }

.meal-time {
  grid-column: 1;
  margin-right: 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.meal-photo { grid-column: 2; align-self: start; }

.meal-photo img {
  display: block;
  width: 60px;
  height: 60px;
  margin-right: 14px;
  object-fit: cover;
}

/* no photo, no placeholder: the column stays empty */
.meal-glyph { display: none; }

.meal-body { grid-column: 3; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.meal-name {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}

.meal-desc { margin: 0; color: var(--ink-soft); font-size: 14px; }

.meal-kcal {
  grid-column: 4;
  margin: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.meal-kcal strong {
  font-size: 28px;
  font-weight: 900;
  font-stretch: 75%;
  line-height: 1;
}

.kcal-unit {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

.meal--pending .meal-kcal strong, .meal--failed .meal-kcal strong { color: var(--ink-soft); }

.meal-numbers { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }

.macro-chip { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* confidence reads as a filled, half-filled, red or open square */
.conf-stamp, .use-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.conf-stamp::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  flex: none;
}

.conf--high::before { background: currentColor; }
.conf--medium::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.conf--low { color: var(--red-text); }
.conf--low::before { background: currentColor; }
.conf--manual { color: var(--ink-soft); }
.conf--menu { color: var(--ink-soft); }
.conf--menu::before { display: none; }

.use-chip { color: var(--ink-soft); }

.estimating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--red-text);
}

.estimating-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* the dots belong to the word, not a flex gap away from it */
.estimating .ellipsis { margin-left: -8px; }

.ellipsis::after {
  content: "";
  animation: dots 1.4s steps(4, end) infinite;
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.meal-detail summary {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  width: fit-content;
}

.meal-detail summary::-webkit-details-marker { display: none; }

.meal-detail summary::before { content: "+ "; color: var(--red-text); }

.meal-detail[open] summary::before { content: "− "; }

.meal-detail summary:hover { color: var(--ink); }

.item-list { list-style: none; margin: 6px 0 0; padding: 0; max-width: 480px; border-top: var(--rule-thin); }

.item-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  font-size: 13.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--hair);
}

.item-name { min-width: 0; }

.item-kcal { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

.meal-notes { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 0; max-width: 60ch; }

.meal-notes::before { content: "Assumed — "; font-weight: 800; color: var(--ink); }

.meal-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--red-text); }

.meal-failed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 2px; }

.meal-failed-actions .mini-button, .meal-failed-actions .mini-link { white-space: nowrap; }

.mini-button {
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ground);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.mini-button:hover { background: var(--red); color: var(--on-red); }

.mini-link {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

.mini-link:hover { color: var(--red-text); }

.meal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 2px;
}

.inline-form { display: inline; }

.card-action {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.card-action:hover { color: var(--ink); }

.card-action.danger:hover { color: var(--red-text); }

/* --------------------------------------------------------------------------
   History
   -------------------------------------------------------------------------- */

.stat-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  border-top: var(--rule);
}

.board-cell {
  padding: 10px 10px 12px 0;
  border-bottom: var(--rule-thin);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.board-cell:not(:nth-child(3n+1)) { padding-left: 12px; border-left: var(--rule-thin); }

.board-num {
  font-size: clamp(34px, 9vw, 60px);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 1;
  letter-spacing: -.01em;
}

.board-cell--accent .board-num { color: var(--red-text); }

.board-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}

/* under an average: the ordinary days' own */
.board-note { font-size: 11px; line-height: 1.3; color: var(--ink-soft); margin-top: 3px; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 220px;
  padding-top: 14px;
  border-bottom: var(--rule-thin);
}

.bar-slot {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

.bar-slot:hover { background: var(--ground-deep); }

.bar {
  display: block;
  width: 100%;
  background: var(--ink);
  transform-origin: bottom;
  animation: grow .5s cubic-bezier(.22, .8, .36, 1) both;
}

.bar-slot:hover .bar, .bar-slot.is-today .bar { background: var(--red); }

.bar-slot.is-zero .bar { background: var(--hair); }

/* a cheat day: an outline with ink drawn across it — red when it is today
   or under the pointer, like any bar */
.bar-slot.is-cheat .bar {
  background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 5px);
  border: 1.5px solid var(--ink);
}

.bar-slot.is-cheat:hover .bar, .bar-slot.is-cheat.is-today .bar {
  background: repeating-linear-gradient(135deg, var(--red) 0 1.5px, transparent 1.5px 5px);
  border-color: var(--red);
}

@keyframes grow { from { transform: scaleY(0); } }

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 6px;
}

.chart-axis span:last-child { color: var(--red-text); }

.chart-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chart-legend::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 5px);
}

.journal-list { list-style: none; margin: 0; padding: 0; }

.journal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  border-bottom: var(--rule-thin);
  text-decoration: none;
}

.journal-row:hover { color: var(--red-text); }

.journal-date { font-size: 15px; font-weight: 700; }

.journal-dots { flex: 1; }

.journal-kcal { font-size: 19px; font-weight: 900; font-stretch: 75%; }

/* a filled red square, the way a rough guess is stamped */
.journal-cheat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--red-text);
}

.journal-cheat::before { content: ""; width: 8px; height: 8px; background: currentColor; }

/* --------------------------------------------------------------------------
   Edit & settings forms
   -------------------------------------------------------------------------- */

.edit-form { max-width: 560px; }

.edit-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.edit-form input[type="text"],
.edit-form input[type="email"],
.edit-form input[type="password"],
.edit-form input[type="number"],
.edit-form input[type="datetime-local"],
.edit-form textarea {
  font-family: var(--sans);
  /* ≥16px keeps iOS Safari from zooming the page when a field gets focus */
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
}

.edit-form input:focus, .edit-form textarea:focus {
  outline: none;
  border-color: var(--red-text);
  box-shadow: inset 0 0 0 1px var(--red-text);
}

.edit-form ::placeholder { color: var(--ink-soft); }

.field-group { margin-bottom: 16px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.numbers-row { grid-template-columns: repeat(4, 1fr); }

.edit-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.edit-photo img { display: block; }

/* a photo button is a label too; keep it a button inside the form */
.edit-form label.photo-button { flex-direction: row; font-size: 13px; letter-spacing: .04em; }

.photo-button.standalone { margin-bottom: 16px; width: fit-content; }

.edit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }

.ghost-button {
  min-height: 46px;
  padding: 0 20px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.ghost-button:hover { background: var(--ink); color: var(--ground); }

.estimator-status, .account-status, .assistant-access {
  margin-top: 40px;
  border-top: var(--rule);
  padding-top: 10px;
  max-width: 600px;
}

.estimator-status h2, .account-status h2, .assistant-access h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 8px;
}

.estimator-status p, .account-status p { margin: 0; font-size: 15px; color: var(--ink-soft); }

.account-status strong { color: var(--ink); }

/* estimator on: a filled square; off: a red one */
.estimator-status h2::after { content: ""; width: 9px; height: 9px; background: var(--ink); }

.estimator-status.is-off h2::after { background: var(--red); }

.signout-form { margin-top: 14px; }

/* Sign-in: the edit-form look, held to a reading-width column */
.signin-form { max-width: 420px; }

.settings-page code, .signin-page code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--ground-deep);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Assistant access: the MCP address to hand out, then one row per connection */
.assistant-access p { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }

/* Addresses can be long: let these chips wrap */
.server-url code, .consent-warning code, .signin-page p > code { white-space: normal; overflow-wrap: anywhere; }

/* the address and its copy button share one outline, the button butted on */
.server-url { display: flex; align-items: stretch; width: fit-content; max-width: 100%; margin: 0 0 18px; }

.server-url code {
  font-size: 14px;
  padding: 8px 12px;
  user-select: all;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
}

.server-url .ghost-button { display: grid; place-items: center; min-height: 0; margin-left: -2px; padding: 0 11px; }

.connections { list-style: none; margin: 16px 0 0; padding: 0; border-top: var(--rule-thin); }

.connection { padding: 12px 0 14px; border-bottom: var(--rule-thin); }

/* a connection that reads nothing any more goes grey by colour, not opacity,
   so its text keeps its contrast */
.connection.is-revoked .connection-head strong,
.connection.is-expired .connection-head strong,
.connection.is-abandoned .connection-head strong { color: var(--ink-soft); }

.connection-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }

.connection-head strong { font-size: 17px; font-weight: 800; }

.connection-host { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

/* Two connections to one assistant look alike; the short id tells them apart */
.connection-id { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

.connection-state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.connection-state::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; }

.is-connected .connection-state::before { background: currentColor; }

.is-expired .connection-state { color: var(--red-text); }

.is-revoked .connection-state, .is-abandoned .connection-state { color: var(--ink-soft); }

.assistant-access .connection-meta { margin: 6px 0 0; font-size: 13.5px; }

.assistant-access .connection-note { margin: 4px 0 0; font-size: 13.5px; color: var(--ink); }

.connection .ghost-button { margin-top: 10px; padding: 0 14px; font-size: 11.5px; }

.connections-empty { color: var(--ink-soft); }

/* Consent: a loopback redirect means any local program could have asked */
.consent-warning { border: 2px solid var(--red-text); padding: 10px 14px; }

/* --------------------------------------------------------------------------
   Flashes & footer
   -------------------------------------------------------------------------- */

.flashes {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 460px);
  pointer-events: none;
}

.flash {
  pointer-events: auto;
  background: var(--ink);
  color: var(--ground);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  animation: flash-in .25s ease both,
             flash-out .4s ease 4.2s both;
}

.flash--alert { background: var(--red); color: var(--on-red); }

.flash a { color: inherit; text-underline-offset: 3px; }

@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } }

@keyframes flash-out { to { opacity: 0; visibility: hidden; } }

.site-footer { border-top: var(--rule); padding: 12px 0 28px; }

.site-footer p { margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Menu — the poster in negative
   -------------------------------------------------------------------------- */

/* The menu inverts the poster: black ground, off-white ink, the same red.
   Everything styled via var(--*) follows on its own; red type is lifted a
   step so it still reads on black. */
.theme-carbon {
  --ground: #0a0a0a;
  --ground-deep: #1d1d1b;
  --field: #161615;
  --ink: #f2f1ec;
  --ink-soft: #a3a29b;
  --hair: #3a3a37;
  --red-text: #ff4d3d;
  /* a custom property resolves var() where it is declared, so the rules
     must be restated here to pick up this ink */
  --rule: 3px solid var(--ink);
  --rule-thin: 1px solid var(--ink);

  color-scheme: dark;
}

/* the page scrollbar follows the root, not the body */
:root:has(> body.theme-carbon) { color-scheme: dark; }

/* the world-shift reads as one move — Turbo runs the flip inside a view
   transition (days views carry <meta name="view-transition">); a body
   transition can't do this, since Turbo replaces the body on navigation */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* ↻ Menu / ↩ Back to now — a .photo-button worn by a link */
.flip-glyph { font-size: 15px; line-height: 1; }

/* past-mode capture box: the hint line stands in for the textarea */
.capture-hint {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

.menu { margin-top: 30px; }

.menu > .meal-list { border-top: var(--rule); }

.recents .ledger-head { margin-top: 40px; }

/* the whole row is the tap target — the footer button stretches over it */
.repeat-card { position: relative; cursor: pointer; }

.repeat-card:hover .meal-name, .repeat-card:focus-within .meal-name { color: var(--red-text); }

.repeat-card .repeat-action { color: var(--red-text); }

.repeat-card .repeat-action::after { content: ""; position: absolute; inset: 0; }

/* edit, remove and ★ sit above the stretched log target */
.card-action.raised { position: relative; z-index: 1; }

/* the search past twelve dishes */
.menu-search {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 8px;
  font-family: var(--sans);
  /* ≥16px keeps iOS Safari from zooming the page when the field gets focus */
  font-size: 16px;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0 12px;
}

.menu-search::placeholder { color: var(--ink-soft); }

.menu-search:focus { outline: none; border-color: var(--red-text); box-shadow: inset 0 0 0 1px var(--red-text); }

/* the rest of the menu, folded under a square button */
.menu-fold { margin-top: 16px; }

.menu-fold > summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--ink);
}

.menu-fold > summary::-webkit-details-marker { display: none; }

.menu-fold > summary::after { content: "+"; margin-left: 10px; color: var(--red-text); }

.menu-fold[open] > summary::after { content: "−"; }

.menu-fold > summary:hover { background: var(--ink); color: var(--ground); }

.menu-fold > summary:hover::after { color: inherit; }

.menu-fold > .meal-list { border-top: var(--rule); }

/* the edit form's warning: the dish changes, the ledger does not */
.dish-note {
  max-width: 560px;
  margin: 0 0 26px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Reveal choreography
   -------------------------------------------------------------------------- */

.reveal { animation: rise .45s cubic-bezier(.22, .8, .36, 1) both; }

.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .1s; }
.reveal-3 { animation-delay: .15s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }

  /* a blink cut to .01ms could freeze on its hidden frame; hold it lit */
  .estimating-dot { animation: none; }

  .ellipsis::after { animation: none; content: "…"; }

  /* the universal zero delay would fire flash-out at once and hide every
     flash; keep its hold, only the motion goes */
  .flash { animation-delay: 0s, 4.2s !important; }

  /* the universal rule can't reach the view-transition pseudo tree */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .brand-tag { display: none; }

  .brand-mark { font-size: 25px; }

  /* the nav runs edge to edge; its first label lines up with the content */
  .nav-inner { padding-inline: 0; }

  .nav-link { padding: 0 10px; font-size: 12.5px; gap: 6px; }

  .nav-link:first-child { padding-left: 20px; }

  .pager-link, .pager-stamp { font-size: 11px; letter-spacing: .04em; }

  .capture-row { gap: 8px; }

  .when-field { flex: 1 1 140px; }

  .capture-row .log-button { flex-basis: 100%; order: 10; }

  .chart { gap: 2px; height: 170px; }

  /* Paired fields stack; the four macro numbers stay two-up. */
  .field-row { grid-template-columns: 1fr; }

  .numbers-row { grid-template-columns: 1fr 1fr; }

  .meal-photo img { width: 48px; height: 48px; margin-right: 12px; }

  .meal-time { margin-right: 12px; }

  .meal-kcal { margin-left: 12px; }

  .meal-kcal strong { font-size: 25px; }

  .board-cell:not(:nth-child(3n+1)) { padding-left: 8px; }
}

@media (max-width: 360px) {
  /* "03 Settings" needs every pixel of a 106px cell */
  .nav-link { gap: 4px; padding: 0 8px; letter-spacing: .02em; }

  .nav-link:first-child { padding-left: 20px; }

  /* placeholders wrap to a third line here; show all of it */
  .capture-box textarea, .edit-form textarea { min-height: 100px; }
}

/* --------------------------------------------------------------------------
   Touch devices — no hover to reveal, no focus zoom
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .card-action { padding: 6px 0; }

  /* ≥16px keeps iOS Safari from zooming the page when the picker opens */
  .when-field { font-size: 16px; }

  /* a tap leaves :hover stuck, and this button stays on the page after one */
  .server-url .ghost-button:hover { background: transparent; color: var(--ink); }
}