/* tallrik — porcelain palette
   Echoes the classic Rörstrand blue-on-white plates: cream tablecloth, white
   porcelain "plates" (cards), deep cobalt ink, with ochre rim and terracotta
   accents for warmth. */

:root {
  --bg: #f4efe4;             /* warm cream — the tablecloth */
  --card: #ffffff;            /* porcelain white */
  --cream: #fbf7ee;           /* faint tint for nested panels */
  --line: #e5dccb;            /* warm hairline */
  --line-soft: #efe9d8;
  --ink: #243049;             /* near-black with a cool cast (a touch lighter) */
  --ink-muted: #687388;
  --ink-faint: #98a1b3;
  --cobalt: #2f4a92;          /* primary blue — slightly softened */
  --cobalt-deep: #20366e;
  --cobalt-soft: #8aa0cc;
  --cobalt-tint: rgba(47, 74, 146, 0.07);
  --cobalt-tint-strong: rgba(47, 74, 146, 0.14);
  --rim: #b9c4dc;             /* soft slate-blue used for secondary borders */
  --steel: #8aa0cc;           /* paler porcelain blue — protein */
  --ochre: #c39260;           /* gold rim — fat (slightly warmer/softer) */
  --terracotta: #b85a4d;      /* rust accent — carbs + danger (slightly less harsh) */

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 0 var(--line-soft), 0 18px 36px -22px rgba(40, 56, 110, 0.18);
}

/* Dark palette. Applied via the data-theme attribute set in the head script
   (and refreshed at runtime by applyTheme in app.js). Keeps the porcelain
   identity but swaps the cream "tablecloth" for ink and the porcelain card
   for a slightly lighter slate so the cards still float above the bg. */
:root[data-theme="dark"] {
  --bg: #131724;
  --card: #1d2535;
  --cream: #1a2030;
  --line: #2e3849;
  --line-soft: #252c3c;
  --ink: #e6e9f1;
  --ink-muted: #adb6c8;
  --ink-faint: #7a8398;
  --cobalt: #95acdb;
  --cobalt-deep: #c3d0ee;
  --cobalt-soft: #8aa0cc;
  --cobalt-tint: rgba(149, 172, 219, 0.10);
  --cobalt-tint-strong: rgba(149, 172, 219, 0.22);
  --rim: #3d4a66;
  --steel: #8aa0cc;
  --ochre: #d2a06d;
  --terracotta: #d97a6b;
  --shadow-card: 0 1px 0 var(--line-soft), 0 18px 36px -22px rgba(0, 0, 0, 0.55);
}
/* Submit buttons use --cobalt as background; in dark we need on-dark text. */
:root[data-theme="dark"] button[type=submit] { color: var(--bg); }
:root[data-theme="dark"] button[type=submit]:hover { color: var(--bg); }
:root[data-theme="dark"] .view-tabs button.active,
:root[data-theme="dark"] .mode-toggle button.active,
:root[data-theme="dark"] .meal-toggle button.active,
:root[data-theme="dark"] .unit-toggle button.active {
  color: var(--bg);
}
/* Month-grid heatmap cells use literal cobalt rgba values; reweight for dark. */
:root[data-theme="dark"] .month-grid .day.lvl-0 { background: var(--cream); color: var(--ink-faint); }
:root[data-theme="dark"] .month-grid .day.lvl-1 { background: rgba(149, 172, 219, 0.08); color: var(--ink-muted); }
:root[data-theme="dark"] .month-grid .day.lvl-2 { background: rgba(149, 172, 219, 0.18); color: var(--ink); }
:root[data-theme="dark"] .month-grid .day.lvl-3 { background: rgba(149, 172, 219, 0.32); color: var(--ink); }
:root[data-theme="dark"] .month-grid .day.lvl-4 { background: rgba(149, 172, 219, 0.50); color: var(--bg); }
:root[data-theme="dark"] .month-grid .day.lvl-over { background: var(--terracotta); color: var(--bg); }
:root[data-theme="dark"] .month-legend .legend-swatch.lvl-1 { background: rgba(149, 172, 219, 0.08); }
:root[data-theme="dark"] .month-legend .legend-swatch.lvl-2 { background: rgba(149, 172, 219, 0.18); }
:root[data-theme="dark"] .month-legend .legend-swatch.lvl-3 { background: rgba(149, 172, 219, 0.32); }
:root[data-theme="dark"] .month-legend .legend-swatch.lvl-4 { background: rgba(149, 172, 219, 0.50); }

* { box-sizing: border-box; -webkit-tap-highlight-color: var(--cobalt-tint-strong); }

[hidden] { display: none !important; }

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}

input, button, select, textarea {
  font: inherit;
  font-size: 16px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease;
}

input:focus, button:focus-visible, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cobalt-soft);
  box-shadow: 0 0 0 4px var(--cobalt-tint);
}

button { cursor: pointer; }

button[type=submit] {
  background: var(--cobalt);
  color: white;
  border-color: var(--cobalt);
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 46px;
  border-radius: var(--radius-md);
}
button[type=submit]:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }

header {
  background: var(--card);
  color: var(--ink);
  padding: 0.95rem 1.1rem 0.8rem;
  padding-top: max(0.95rem, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(40, 56, 110, 0.04);
}

header h1 {
  margin: 0;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.55rem;
  color: var(--cobalt);
  letter-spacing: 0.04em;
}

.view-tabs {
  display: inline-flex;
  border: 1px solid var(--rim);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-tabs button {
  background: var(--card);
  color: var(--cobalt);
  border: none;
  border-radius: 0;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  min-height: 38px;
}
.view-tabs button + button { border-left: 1px solid var(--rim); }
.view-tabs button:hover { background: var(--cobalt-tint); }
.view-tabs button.active {
  background: var(--cobalt);
  color: white;
}

.day-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.day-nav span { min-width: 9rem; text-align: center; font-size: 0.95rem; color: var(--ink-muted); }
.day-nav button {
  background: var(--card);
  color: var(--cobalt);
  border: 1px solid var(--rim);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  min-height: 38px;
  min-width: 38px;
  font-size: 0.95rem;
}
.day-nav button:hover { background: var(--cobalt-tint); border-color: var(--cobalt-soft); }

.avatar-btn {
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--rim);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn svg { width: 100%; height: 100%; display: block; }
.avatar-btn:hover { box-shadow: 0 0 0 4px var(--cobalt-tint); border-color: var(--cobalt-soft); }

/* Profile dialog */
.user-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 50px -12px rgba(20, 39, 95, 0.45);
  max-width: min(420px, calc(100vw - 1.5rem));
  width: 100%;
}
.user-dialog::backdrop {
  background: rgba(20, 39, 95, 0.32);
}
.user-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.1rem 1.2rem;
}
.user-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -0.2rem;
}
.user-dialog-head h2 {
  margin: 0;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--cobalt);
  text-transform: none;
  letter-spacing: 0.02em;
}
.user-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.user-form .field > span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 600;
}
.user-form .field em { font-style: normal; color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.user-form .field-note {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  margin-top: 0.2rem;
}
.user-form input { width: 100%; }

.user-form .user-ok {
  align-self: flex-end;
  min-width: 5.5rem;
  padding-inline: 1.4rem;
  margin-top: 0.25rem;
}

.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: flex-start;
}
.mode-toggle button {
  background: var(--card);
  color: var(--ink);
  border: 0;
  padding: 0.4rem 0.85rem;
  font: inherit;
  cursor: pointer;
}
.mode-toggle button + button { border-left: 1px solid var(--line); }
.mode-toggle button.active {
  background: var(--cobalt);
  color: #fff;
}
.mode-toggle button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.data-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.data-btn {
  background: var(--card);
  color: var(--cobalt);
  border: 1px solid var(--rim);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-weight: 500;
}
.data-btn:hover { background: var(--cobalt-tint); border-color: var(--cobalt-soft); }

.meal-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.meal-toggle button {
  flex: 1 1 auto;
  background: var(--card);
  color: var(--cobalt);
  border: 1px solid var(--rim);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-weight: 500;
  min-width: 4rem;
}
.meal-toggle button:hover { background: var(--cobalt-tint); border-color: var(--cobalt-soft); }
.meal-toggle button.active {
  background: var(--cobalt);
  color: white;
}

.meal-header {
  list-style: none;
  padding: 0.55rem 0 0.2rem;
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-weight: 700;
  border: none;
  background: transparent;
  cursor: default;
}
.meal-header:first-child { padding-top: 0; }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
}
.avatar-tile {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 50%;
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.avatar-tile svg { width: 100%; height: 100%; display: block; }
.avatar-tile:hover { border-color: var(--cobalt-soft); }
.avatar-tile.selected {
  border-color: var(--cobalt);
  transform: scale(1.04);
}

@media (max-width: 480px) {
  .avatar-grid { grid-template-columns: repeat(3, 1fr); }
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.85rem;
  padding-left: max(0.85rem, env(safe-area-inset-left));
  padding-right: max(0.85rem, env(safe-area-inset-right));
}

section {
  background: var(--card);
  padding: 1.15rem 1.1rem;
  border-radius: var(--radius-lg);
  margin-bottom: 0.95rem;
  box-shadow: var(--shadow-card);
}

h2 {
  margin-top: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.summary { padding-block: 0.95rem; }

.gauges {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rings {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 1px 1px rgba(20, 39, 95, 0.06));
}

.rings circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  /* Start the stroke at 7:30 so the 90° gap sits symmetrically at the bottom. */
  transform: rotate(135deg);
  transform-origin: 60px 60px;
}

.rings .bg { stroke: var(--line-soft); }
.rings .ring { transition: stroke-dashoffset 0.35s ease; }
.rings .ring[data-key="kcal"]    { stroke: var(--cobalt); }
.rings .ring[data-key="protein"] { stroke: var(--steel); }
.rings .ring[data-key="fat"]     { stroke: var(--ochre); }
.rings .ring.over { stroke: var(--terracotta); }

.legends {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.legend {
  display: grid;
  grid-template-columns: 12px 4.2rem 1fr;
  align-items: center;
  gap: 0.5rem;
}

.legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legend[data-key="kcal"]    .dot { background: var(--cobalt); }
.legend[data-key="protein"] .dot { background: var(--steel); }
.legend[data-key="fat"]     .dot { background: var(--ochre); }

.legend-label {
  font-size: 0.95rem;
  color: var(--ink-muted);
  font-weight: 500;
}

/* 5-column grid keeps consumed value / unit / "/" / input / unit aligned
   across every row, even though the kcal row has empty unit cells. */
.legend-numbers {
  display: grid;
  grid-template-columns: 1fr 0.7em auto 4.2rem 0.7em;
  align-items: baseline;
  column-gap: 0.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

.legend-numbers .goal-consumed {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}
.legend-numbers .sep { color: var(--ink-faint); text-align: center; }
.legend-numbers .unit { color: var(--ink-faint); font-size: 0.8rem; text-align: left; }
.legend-numbers .goal-input {
  width: 100%;
  padding: 0.3rem 0.45rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* The native spinner buttons overlap 4-digit kcal values inside the tight
   legend grid. Hide them — arrow keys still work, and goals don't need
   click-to-step. */
.legend-numbers .goal-input::-webkit-inner-spin-button,
.legend-numbers .goal-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.legend-numbers .goal-input { -moz-appearance: textfield; appearance: textfield; }

.legend.over .goal-consumed { color: var(--terracotta); }

/* Width is now driven by the grid template; keep the rule for any consumer
   that targets it outside the legend (currently none). */
.goal-input {
  padding: 0.3rem 0.45rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.search { position: relative; margin-bottom: 0.5rem; }
.search-row { display: flex; gap: 0.4rem; align-items: stretch; }
.search input[type=search] { flex: 1 1 auto; min-width: 0; width: 100%; }
.scan-btn {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--rim);
  color: var(--cobalt);
  border-radius: var(--radius-sm);
  padding: 0 0.7rem;
  min-width: 46px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scan-btn:hover { background: var(--cobalt-tint); border-color: var(--cobalt-soft); }
.scan-btn svg { width: 22px; height: 22px; display: block; }

.scan-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 50px -12px rgba(20, 39, 95, 0.45);
  max-width: min(420px, calc(100vw - 1.5rem));
  width: 100%;
  overflow: hidden;
}
.scan-dialog::backdrop { background: rgba(20, 39, 95, 0.55); }
.scan-viewport {
  position: relative;
  background: #000;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.scan-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scan-target {
  position: absolute;
  inset: 18% 10%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.scan-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem 0.8rem;
}
.scan-status {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Shared visual styling for #search-results (autofill) and #similar-results
   (picked-food neighbours). Position/anchoring is set per list below. */
.food-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 32px -14px rgba(40, 56, 110, 0.18);
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.food-list li {
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.food-list li:last-child { border-bottom: none; }
.food-list li:hover,
.food-list li.active,
.food-list li:active {
  background: var(--cobalt-tint);
}
.food-list li.search-placeholder {
  color: var(--ink-faint);
  font-style: italic;
  justify-content: flex-start;
  background: transparent;
  cursor: default;
}
.food-list li.search-placeholder:hover { background: transparent; }

.food-list .kcal {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.food-list .macro-chart { flex: 0 0 auto; pointer-events: none; }

.food-list .food-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Autofill drops out of the search input. */
ul#search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
}

/* Similar-foods list drops out of the picked-head, same anchor pattern as autofill. */
ul#similar-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
}

.picked-similar { font-size: 1.2rem; line-height: 1; }

.picked {
  border: 1px solid var(--cobalt-tint-strong);
  background: var(--cream);
  border-radius: 12px;
  padding: 0.95rem;
  margin-bottom: 0.75rem;
}

.picked-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
  position: relative;  /* anchor for #similar-results popover */
}

.picked-head strong {
  font-size: 1.05rem;
  font-weight: 600;
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
  color: var(--ink);
}
.picked-head .macro-chart { flex: 0 0 auto; }

button.link {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
button.link:active { background: var(--cobalt-tint); }

.picked-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#picked-amount-input { width: 6.5rem; }

.unit-toggle {
  display: inline-flex;
  border: 1px solid var(--rim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
}

.unit-toggle button {
  background: var(--card);
  border: none;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  border-radius: 0;
  color: var(--cobalt);
  font-weight: 500;
}

.unit-toggle button + button { border-left: 1px solid var(--rim); }

.unit-toggle button.active {
  background: var(--cobalt);
  color: white;
}

.portion-size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.portion-size input { width: 4.5rem; }

table.nutrients {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
}

table.nutrients th,
table.nutrients td {
  text-align: right;
  padding: 0.32rem 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.nutrients th:nth-child(2),
table.nutrients td:nth-child(2),
table.nutrients th:nth-child(3),
table.nutrients td:nth-child(3) {
  width: 5.5rem;
}

table.nutrients th { color: var(--ink-faint); font-weight: 500; font-size: 0.85rem; }
table.nutrients th:first-child,
table.nutrients td:first-child {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
}

table.nutrients tbody tr:last-child td { border-bottom: none; }
table.nutrients .kcal-row td { font-weight: 700; color: var(--ink); }
table.nutrients tr.edited td:nth-child(2) { color: var(--cobalt); font-weight: 600; }
table.nutrients tr.secondary td { color: var(--ink-muted); }

table.nutrients tr.editable { cursor: pointer; }
table.nutrients tr.editable:hover td:first-child { color: var(--cobalt); }
table.nutrients tr.editable.active { background: var(--cobalt-tint); }

.nutrients-wrap { position: relative; }

button.link.inline {
  display: inline;
  min-width: 0;
  min-height: 0;
  font-size: inherit;
  padding: 0 0.1rem;
  color: var(--cobalt);
  text-decoration: underline;
}

.more-nutrients {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cobalt);
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  margin-top: 0.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.more-nutrients:hover { background: var(--cobalt-tint); border-color: var(--cobalt-tint-strong); }

.nutrient-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 0.4rem 0.2rem 0;
  font-variant-numeric: tabular-nums;
}
.nutrient-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nutrient-summary > .nut-kcal { justify-content: flex-end; }
.nutrient-summary .ok    { color: var(--cobalt); }
.nutrient-summary .warn  { color: var(--ochre); }
.nutrient-summary .danger { color: var(--terracotta); }
.nutrient-summary .label { color: var(--ink-faint); font-size: 0.78rem; }

.mass-snap {
  background: transparent;
  border: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 0 0.15rem;
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s, background-color 0.15s;
}
.mass-snap:hover { text-decoration-color: currentColor; background: var(--cobalt-tint); }
.mass-snap:active { background: var(--cobalt-tint-strong); }
.mass-snap.ok { color: var(--cobalt); }
.mass-snap.warn { color: var(--ochre); }
.mass-snap.danger { color: var(--terracotta); }
.mass-snap:disabled {
  cursor: default;
  text-decoration: none;
  background: transparent;
}

.nutrient-popup {
  position: absolute;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--cobalt-tint-strong);
  border-radius: 12px;
  box-shadow: 0 14px 30px -8px rgba(20, 39, 95, 0.28);
  padding: 0.4rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 88px;
}

.popup-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
}
.popup-close:active { background: var(--cobalt-tint); }

.nutrient-popup input[type=number] {
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.3rem;
  font-size: 14px;
}

.nutrient-popup input[type=range] {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-rl;
  direction: rtl;
  width: 28px;
  height: 110px;
  padding: 0;
  margin: 0;
  accent-color: var(--cobalt);
}

.variant-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.variant-row input { flex: 1 1 12rem; min-width: 0; }

.variant-preview {
  flex: 1 1 100%;
  font-size: 0.8rem;
  color: var(--cobalt);
  font-style: italic;
}

.macro-chart .arc-bg,
.macro-chart .arc-fg {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transform: rotate(135deg);
  transform-origin: 50px 50px;
}
.macro-chart .arc-bg { stroke: var(--line-soft); }
.macro-chart .arc-fg { stroke: var(--cobalt); transition: stroke-dasharray 0.3s ease; }
.macro-chart .arc-fg.over { stroke: var(--terracotta); }

.macro-chart .slice {
  stroke: var(--card);
  stroke-width: 0.8;
  fill: var(--line);
}
.macro-chart .slice.protein { fill: var(--steel); }
.macro-chart .slice.fat     { fill: var(--ochre); }
.macro-chart .slice.carbs   { fill: var(--terracotta); }
.macro-chart .slice.empty   { fill: var(--line); stroke: none; }

.picked-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--cobalt);
  color: white;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

ul#search-results li.custom .food-name::after {
  content: 'custom';
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--cobalt);
  color: white;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

#picked button[type=submit] { width: 100%; }

footer {
  text-align: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  color: var(--ink-faint);
  font-size: 0.85rem;
}

footer a { color: var(--cobalt); }

form#entry-form {
  display: grid;
  grid-template-columns: 1fr 5rem 4rem auto;
  gap: 0.5rem;
}

form#entry-form button[type=submit] { padding-inline: 1.25rem; }

ul#entries {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul#entries li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

ul#entries li:last-child { border-bottom: none; }

ul#entries .entry-summary {
  background: none;
  border: none;
  padding: 0.2rem 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 40px;
  border-radius: var(--radius-sm);
}

ul#entries .entry-summary .entry-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

ul#entries .entry-summary .macro-chart { pointer-events: none; }

ul#entries .entry-summary:hover { color: var(--cobalt); }
ul#entries .entry-summary span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ul#entries li.editing { background: var(--cobalt-tint); border-radius: var(--radius-sm); }
ul#entries li.editing .entry-summary { color: var(--cobalt); padding-inline: 0.4rem; }

ul#entries .meta {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

ul#entries li > div:last-child {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}

ul#entries .kcal {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

ul#entries button.delete {
  background: transparent;
  color: var(--terracotta);
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

ul#entries button.delete:active { background: rgba(176, 74, 60, 0.10); }

@media (max-width: 480px) {
  main { padding: 0.5rem; }
  section { padding: 0.95rem 0.85rem; border-radius: 12px; margin-bottom: 0.6rem; }

  header h1 { font-size: 1.4rem; }
  .day-nav span { min-width: 7.5rem; font-size: 0.9rem; }

  form#entry-form { grid-template-columns: 1fr 1fr; }
  form#entry-form #name { grid-column: 1 / -1; }
  form#entry-form button[type=submit] { grid-column: 1 / -1; }

  #picked-amount-input { flex: 1 1 6rem; }
  .unit-toggle { flex: 1 1 auto; }
  .unit-toggle button { flex: 1 1 0; }

  .rings { width: 96px; height: 96px; }
  .legend { grid-template-columns: 10px 3.6rem 1fr; gap: 0.4rem; }
  .legend-label { font-size: 0.9rem; }
  .legend-numbers { grid-template-columns: 1fr 0.7em auto 3.4rem 0.7em; font-size: 0.9rem; }

  .nutrient-popup { width: 78px; }
  .nutrient-popup input[type=range] { height: 110px; width: 24px; }
  table.nutrients th:nth-child(2),
  table.nutrients td:nth-child(2),
  table.nutrients th:nth-child(3),
  table.nutrients td:nth-child(3) {
    width: 4.6rem;
  }
  table.nutrients th, table.nutrients td { padding: 0.3rem 0.35rem; }
}

/* Week + month views
   ─────────────────────────────────────────────────────────────────────── */
.week-view, .month-view { padding-block: 1.1rem; }
.week-view h2, .month-view h2 { margin-bottom: 0.6rem; }

.week-chart {
  width: 100%;
  height: 240px;
}
.week-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.week-chart .bar-group { cursor: pointer; }
.week-chart .bar-group:hover .day-label { fill: var(--cobalt); font-weight: 700; }
.week-chart .bar-group.today .day-label { fill: var(--cobalt); font-weight: 700; }
.week-chart .seg-protein { fill: var(--steel); }
.week-chart .seg-fat     { fill: var(--ochre); }
.week-chart .seg-carbs   { fill: var(--terracotta); }
.week-chart .seg-other   { fill: var(--cobalt-soft); opacity: 0.55; }
.week-chart .goal-line   { stroke: var(--cobalt); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.75; }
.week-chart .goal-label  { fill: var(--cobalt); font-size: 10px; }
.week-chart .day-label   { fill: var(--ink-muted); font-size: 11px; text-anchor: middle; }
.week-chart .day-kcal    { fill: var(--ink); font-size: 10px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.week-chart .axis        { stroke: var(--line); stroke-width: 1; }

.week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  align-items: center;
}
.week-legend .swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: -2px;
}
.week-legend .swatch.protein { background: var(--steel); }
.week-legend .swatch.fat     { background: var(--ochre); }
.week-legend .swatch.carbs   { background: var(--terracotta); }
.week-legend .swatch.other   { background: var(--cobalt-soft); opacity: 0.55; }
.week-legend .swatch.goal    { background: transparent; border-top: 2px dashed var(--cobalt); height: 0; width: 1.2rem; border-radius: 0; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 0.5rem;
}
.month-grid .dow {
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding-bottom: 0.2rem;
}
.month-grid .day {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.18rem 0.3rem;
  font-size: 0.7rem;
  color: var(--ink-muted);
  transition: transform 0.12s;
  font-variant-numeric: tabular-nums;
}
.month-grid .day:hover { transform: scale(1.04); border-color: var(--cobalt); }
.month-grid .day.empty {
  background: transparent;
  border: 1px dashed var(--line-soft);
  cursor: default;
  color: transparent;
}
.month-grid .day.empty:hover { transform: none; border-color: var(--line-soft); }
.month-grid .day.today { border-color: var(--cobalt); border-width: 2px; }

.month-grid .day.lvl-0   { background: var(--cream); color: var(--ink-faint); }
.month-grid .day.lvl-1   { background: rgba(31, 58, 138, 0.10); color: var(--ink-muted); }
.month-grid .day.lvl-2   { background: rgba(31, 58, 138, 0.22); color: var(--ink); }
.month-grid .day.lvl-3   { background: rgba(31, 58, 138, 0.38); color: var(--card); }
.month-grid .day.lvl-4   { background: rgba(31, 58, 138, 0.58); color: var(--card); }
.month-grid .day.lvl-over{ background: var(--terracotta); color: var(--card); }

.month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.month-legend .legend-swatch {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  border: 1px solid var(--line-soft);
  margin-right: 0.15rem;
  vertical-align: -3px;
}
.month-legend .legend-swatch.lvl-0   { background: var(--cream); }
.month-legend .legend-swatch.lvl-1   { background: rgba(31, 58, 138, 0.10); }
.month-legend .legend-swatch.lvl-2   { background: rgba(31, 58, 138, 0.22); }
.month-legend .legend-swatch.lvl-3   { background: rgba(31, 58, 138, 0.38); }
.month-legend .legend-swatch.lvl-4   { background: rgba(31, 58, 138, 0.58); }
.month-legend .legend-swatch.lvl-over{ background: var(--terracotta); }