@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/roboto-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --md-primary: #1a73e8;
  --md-primary-dark: #1558b3;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;

  --md-error: #d93025;
  --md-on-error: #ffffff;
  --md-error-container: #fce8e6;
  --md-on-error-container: #5f1412;

  --md-background: #f1f3f9;
  --md-surface: #ffffff;
  --md-surface-variant: #eef1f6;
  --md-on-surface: #1f1f1f;
  --md-on-surface-variant: #5f6368;
  --md-outline: #dadce0;
  --md-outline-variant: #eceef1;

  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-full: 999px;

  --md-elevation-1: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --md-elevation-2: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #a8c7fa;
    --md-primary-dark: #c3d9fc;
    --md-on-primary: #063077;
    --md-primary-container: #0a4aa8;
    --md-on-primary-container: #d3e3fd;

    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;

    --md-background: #131316;
    --md-surface: #1e1f22;
    --md-surface-variant: #2a2b2f;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #9aa0a6;
    --md-outline: #444649;
    --md-outline-variant: #303134;

    --md-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .3);
    --md-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, .5), 0 2px 6px 2px rgba(0, 0, 0, .3);
  }
}

/* Color scheme overrides — "blue" is the :root default above, applied when
   data-theme is unset/unrecognized, so it needs no block of its own here. */
html[data-theme="green"] {
  --md-primary: #1e8e3e;
  --md-primary-dark: #137333;
  --md-on-primary: #ffffff;
  --md-primary-container: #ceead6;
  --md-on-primary-container: #0d652d;
}

html[data-theme="purple"] {
  --md-primary: #8430ce;
  --md-primary-dark: #6a1fb0;
  --md-on-primary: #ffffff;
  --md-primary-container: #ead1ff;
  --md-on-primary-container: #380a5c;
}

html[data-theme="orange"] {
  --md-primary: #e8710a;
  --md-primary-dark: #b85c00;
  --md-on-primary: #ffffff;
  --md-primary-container: #ffdcb8;
  --md-on-primary-container: #7a3e00;
}

html[data-theme="teal"] {
  --md-primary: #00897b;
  --md-primary-dark: #00695c;
  --md-on-primary: #ffffff;
  --md-primary-container: #a3ede0;
  --md-on-primary-container: #00382f;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="green"] {
    --md-primary: #6dd58c;
    --md-primary-dark: #89e6a3;
    --md-on-primary: #0a3818;
    --md-primary-container: #0f5223;
    --md-on-primary-container: #ceead6;
  }

  html[data-theme="purple"] {
    --md-primary: #d0a3ff;
    --md-primary-dark: #e0bfff;
    --md-on-primary: #3a0a63;
    --md-primary-container: #5c1a99;
    --md-on-primary-container: #ead1ff;
  }

  html[data-theme="orange"] {
    --md-primary: #ffb680;
    --md-primary-dark: #ffc99e;
    --md-on-primary: #4a2600;
    --md-primary-container: #7a3e00;
    --md-on-primary-container: #ffdcb8;
  }

  html[data-theme="teal"] {
    --md-primary: #5cd6c0;
    --md-primary-dark: #80e0cf;
    --md-on-primary: #00332b;
    --md-primary-container: #00382f;
    --md-on-primary-container: #a3ede0;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Roboto", system-ui, sans-serif;
  background: var(--md-background);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-2);
}

.topbar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem max(1.5rem, env(safe-area-inset-right)) 1.25rem max(1.5rem, env(safe-area-inset-left));
}

.topbar h1 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 500;
}

.topbar nav {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.nav-item {
  display: inline-flex;
  flex-shrink: 0;
}

.nav-overflow {
  flex-shrink: 0;
  position: relative;
}

.nav-overflow summary {
  list-style: none;
  cursor: pointer;
  color: var(--md-on-primary);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.7rem;
  border-radius: var(--md-radius-full);
  opacity: 0.92;
  transition: background .15s, opacity .15s;
}

.nav-overflow summary::-webkit-details-marker,
.nav-overflow summary::marker {
  display: none;
  content: "";
}

.nav-overflow summary:hover,
.nav-overflow[open] summary {
  background: rgba(255, 255, 255, .16);
  opacity: 1;
}

.nav-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 170px;
  padding: 0.4rem;
  background: var(--md-primary);
  border-radius: var(--md-radius-sm);
  box-shadow: var(--md-elevation-2);
  z-index: 20;
}

.nav-overflow-menu .nav-item {
  display: flex;
}

.nav-overflow-menu a,
.nav-overflow-menu button.logout {
  color: var(--md-on-primary);
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: var(--md-radius-sm);
  opacity: 1;
}

.nav-overflow-menu a:hover,
.nav-overflow-menu button.logout:hover {
  background: rgba(255, 255, 255, .16);
}

.topbar nav a {
  color: var(--md-on-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: var(--md-radius-full);
  opacity: 0.92;
  transition: background .15s, opacity .15s;
}

.topbar nav a:hover {
  background: rgba(255, 255, 255, .16);
  opacity: 1;
}

.topbar nav form {
  margin: 0;
  display: contents;
}

.topbar nav button.logout {
  background: none;
  color: var(--md-on-primary);
  border: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: var(--md-radius-full);
  opacity: 0.92;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}

.topbar nav button.logout:hover {
  background: rgba(255, 255, 255, .16);
  opacity: 1;
}

.date-nav {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.topbar .date-nav a,
.topbar .date-nav button {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--md-on-primary);
  text-decoration: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: var(--md-radius-full);
  opacity: 0.92;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, opacity .15s;
}

.topbar .date-nav a:hover,
.topbar .date-nav button:hover {
  background: rgba(255, 255, 255, .16);
  opacity: 1;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem max(1rem, env(safe-area-inset-right)) max(3rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

a {
  color: var(--md-primary);
  font-weight: 500;
}

/* Cards */
section,
.card {
  background: var(--md-surface);
  border-radius: var(--md-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--md-elevation-1);
  margin-bottom: 1.25rem;
}

section h2,
.card h2,
.section-toggle summary {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 500;
}

.section-toggle summary {
  cursor: pointer;
  user-select: none;
}

.hint {
  color: var(--md-on-surface-variant);
  font-size: 0.85rem;
  margin: -0.4rem 0 0.9rem;
}

.balance-over {
  color: var(--md-error);
}

.card form+ul {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--md-outline-variant);
}

/* "+" toggle that reveals an add-entry form (<details>), so the form
   itself doesn't take up space until you actually want it. */
.add-toggle>summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--md-elevation-1);
  transition: background .15s, box-shadow .15s, transform .15s;
}

.add-toggle>summary::-webkit-details-marker,
.add-toggle>summary::marker {
  display: none;
  content: "";
}

.add-toggle>summary:hover {
  background: var(--md-primary-dark);
  box-shadow: var(--md-elevation-2);
}

.add-toggle[open]>summary {
  transform: rotate(45deg);
}

.add-toggle .stack-form {
  margin-top: 0.9rem;
}

/* Used after a list within a card (add meal/add activity on the
   dashboard): separates the toggle from the list above with a divider. */
.add-toggle--divider {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--md-outline-variant);
}

/* Used standalone at the top of a page (add product/add activity type). */
.add-toggle--page {
  margin-bottom: 1.25rem;
}

/* Totals hero */
.totals {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--md-radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--md-elevation-1);
  margin-bottom: 1.25rem;
}

.totals div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

.totals strong {
  font-size: 1.4rem;
  font-weight: 600;
  opacity: 1;
}

.totals.totals-narrow .totals-extra {
  display: none;
}

.totals.totals-narrow.totals-expanded .totals-extra {
  display: flex;
}

.totals.totals-narrow {
  cursor: pointer;
}

code {
  background: var(--md-surface-variant);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0.1rem 0.5rem;
  border-radius: var(--md-radius-full);
}

.diff-before {
  color: var(--md-on-surface-variant);
  text-decoration: line-through;
  text-decoration-color: var(--md-outline);
}

.diff-arrow {
  color: var(--md-on-surface-variant);
  margin: 0 0.15rem;
}

.diff-after {
  font-weight: 500;
}

/* Meal groups */
.meal-group {
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--md-outline-variant);
}

.meal-group:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.meal-group summary {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  user-select: none;
}

.meal-group summary .computed {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Lists */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

li:last-child {
  border-bottom: none;
}

li.empty {
  color: var(--md-on-surface-variant);
  font-style: italic;
  border-bottom: none;
  padding: 0.3rem 0;
}

.actions {
  display: flex;
  gap: 0.05rem;
  flex-shrink: 0;
}

/* Entry row content (meals, activities, catalog entries) */
li.entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.15rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

li.entry-row:last-child {
  border-bottom: none;
}

.entry-main {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 60%;
  /* не даёт имени сжиматься в узкую полоску раньше времени */
}

.entry-time {
  color: var(--md-on-surface-variant);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.entry-name {
  color: var(--md-on-surface);
  font-weight: 500;
}

.entry-tail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  /* прижимает вправо и на общей строке, и на перенесённой */
  flex-shrink: 0;
}

.entry-meta {
  color: var(--md-on-surface-variant);
  font-size: 0.8rem;
  white-space: nowrap;
}

.entry-row .actions {
  display: inline-flex;
  gap: 0.05rem;
}

/* Forms */
form {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

form.entry {
  flex: 1;
  margin-top: 0;
}

form.entry input,
form.entry select {
  flex: 1 1 auto;
  min-width: 0;
}

input,
select {
  font-family: inherit;
  /* 16px+ so iOS Safari doesn't zoom the page in on focus. */
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  transition: border-color .15s, box-shadow .15s;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-container);
}

/* Hide the native up/down stepper on number inputs (weight, calories,
   duration, ...) — plain typing/backspace works fine without it. */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.search-field {
  width: 100%;
  border-radius: var(--md-radius-full);
  /* Sits directly on the page background (unlike other --md-surface-variant
     fields, which sit inside a white .card) — that background is too close
     in lightness to --md-background to read as a distinct field, so this
     one uses --md-surface plus a real border and shadow instead. */
  background: var(--md-surface);
  border-color: var(--md-outline);
  box-shadow: var(--md-elevation-1);
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  margin-bottom: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368' width='18' height='18'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
}

.search-field:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-container);
}

/* Forces a field onto its own full-width row within a flex-wrap form,
   instead of sitting inline at its natural/shrunk width — e.g. the name
   field on the products/activity-types pages, which needs more room than
   the short calorie/weight fields next to it. */
.field-full {
  flex: 1 1 100%;
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--md-on-surface-variant);
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--md-primary);
  cursor: pointer;
}

.food-filter {
  /* Lives inside .combobox now rather than being a direct flex child of
     the form, so flex-basis alone won't size it — needs an explicit
     width to fill that wrapper. */
  width: 100%;
  border-radius: var(--md-radius-full);
  background: var(--md-surface-variant);
  border-color: transparent;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368' width='18' height='18'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
}

.food-filter:focus {
  background-color: var(--md-surface);
  box-shadow: 0 0 0 3px var(--md-primary-container);
}

/* Custom dropdown, replacing a native <select> so long "name (NNN
   ккал/…)" labels can wrap onto more than one line — something no browser
   lets you do with a real <select>'s closed box — and so the popup's own
   size/position is fully ours to control instead of the OS's. .picker
   (<details>/<summary>) is used for the activity-type and date pickers;
   .combobox (a plain text filter + menu) is used for the food picker, so
   typing opens the matching list directly instead of needing a separate
   select. Both share .picker-menu/.picker-option/.picker-value below. */
.picker,
.combobox {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

.picker summary {
  display: block;
  list-style: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  padding: 0.6rem 2.2rem 0.6rem 0.75rem;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  background-color: var(--md-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368' width='18' height='18'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  color: var(--md-on-surface);
  white-space: normal;
  overflow-wrap: break-word;
}

.picker summary::-webkit-details-marker,
.picker summary::marker {
  display: none;
  content: "";
}

.picker[open] summary {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-container);
}

.picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.3rem);
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.3rem;
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  box-shadow: var(--md-elevation-2);
  z-index: 20;
}

.picker-option {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  background: none;
  border: none;
  padding: 0.55rem 0.6rem;
  border-radius: var(--md-radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--md-on-surface);
  cursor: pointer;
}

.picker-option:hover,
.picker-option:focus-visible {
  background: var(--md-surface-variant);
  outline: none;
}

.picker-empty {
  margin: 0;
  padding: 0.55rem 0.6rem;
  color: var(--md-on-surface-variant);
  font-style: italic;
  font-size: 0.9rem;
}

/* Custom calendar for the date field, replacing a native
   <input type="date">: that control's popup calendar can't really be
   styled and, once restyled itself, rendered misaligned/off-screen on
   several mobile browsers. Reuses the .picker look above but stays a
   compact, auto-width pill inline with the arrows/button instead of
   claiming a full row, and gets topbar-appropriate (light-on-blue) colors
   instead of the card colors the food/activity pickers use. */
.date-picker {
  flex: 0 0 auto;
}

.date-picker summary {
  background-color: rgba(255, 255, 255, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' width='18' height='18'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  border-color: rgba(255, 255, 255, .35);
  color: var(--md-on-primary);
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.date-picker[open] summary {
  border-color: var(--md-on-primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.date-picker-menu {
  position: fixed;
  left: 50%;
  right: auto;
  top: 0;
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 2rem));
  max-height: none;
  overflow-y: visible;
  padding: 0.7rem;
  /* Same color as the topbar itself. */
  background: var(--md-primary);
  border-color: transparent;
  color: var(--md-on-primary);
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.date-picker-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-on-primary);
  text-transform: capitalize;
}

/* Everything below is qualified with the .date-picker ancestor (rather
   than bare .date-picker-nav/.date-picker-day) so it reliably outweighs
   ".topbar .date-nav button" (2 classes + a type selector) — without that
   extra edge, that earlier, more specific rule's background:none and
   box-shadow:none silently win and erase these buttons' fill/ring even
   though the is-today/is-selected classes are correctly applied. */
.date-picker .date-picker-nav {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--md-on-primary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.date-picker .date-picker-nav:hover {
  background: color-mix(in srgb, var(--md-on-primary) 16%, transparent);
}

.date-picker-weekdays,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.date-picker-weekdays {
  margin-bottom: 0.3rem;
}

.date-picker-weekdays span {
  text-align: center;
  padding: 0.2rem 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-on-primary);
  opacity: 0.75;
}

.date-picker .date-picker-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-on-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-picker .date-picker-day:hover {
  background-color: color-mix(in srgb, var(--md-on-primary) 16%, transparent);
}

.date-picker .date-picker-day.is-outside {
  color: var(--md-on-primary);
  opacity: 0.55;
}

.date-picker .date-picker-day.is-today {
  box-shadow: inset 0 0 0 1px var(--md-on-primary);
  font-weight: 600;
}

.date-picker .date-picker-day.is-selected {
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* Selected day gets the ring in a color that reads against its own fill,
   instead of losing the "today" marker entirely when the two coincide. */
.date-picker .date-picker-day.is-selected.is-today {
  box-shadow: inset 0 0 0 2px var(--md-primary);
}

/* Buttons */
button {
  font-family: inherit;
  cursor: pointer;
}

button[type="submit"] {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: var(--md-radius-full);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--md-elevation-1);
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
}

button[type="submit"]:hover {
  background: var(--md-primary-dark);
  box-shadow: var(--md-elevation-2);
}

button[type="submit"]:active {
  box-shadow: none;
}

button.edit,
button.delete,
button.cancel,
a.cancel,
a.history {
  background: none;
  border: none;
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: background .15s, color .15s;
}

button.edit,
button.delete,
a.history {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  padding: 0;
}

button.edit:hover,
a.history:hover {
  background: var(--md-primary-container);
  color: var(--md-primary);
}

button.delete {
  color: var(--md-error);
}

button.delete:hover {
  background: var(--md-error-container);
}

button.cancel,
a.cancel {
  padding: 0.5rem 0.9rem;
  border-radius: var(--md-radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-block;
  cursor: pointer;
}

button.cancel:hover,
a.cancel:hover {
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
}

/* Auth pages */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  margin-bottom: 0;
}

.auth-card h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.auth-card form {
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
}

.auth-card input {
  width: 100%;
}

.auth-card button[type="submit"] {
  margin-top: 0.25rem;
}

.auth-card p {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}

.error {
  color: var(--md-error);
  background: var(--md-error-container);
  border-radius: var(--md-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin: 0 0 0.9rem;
}

/* Pinned to the top of the viewport (not just the top of the page), so an
   error from the add-meal/add-activity forms further down the page is
   still visible on a phone without scrolling back up. */
#form-error {
  position: sticky;
  top: 0.75rem;
  z-index: 30;
  box-shadow: var(--md-elevation-2);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

#form-error-text {
  flex: 1;
}

.error-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.error-close:hover {
  opacity: 1;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.theme-picker {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.theme-picker form {
  margin: 0;
}

button.theme-swatch {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--md-elevation-1);
  transition: transform .15s, border-color .15s;
}

button.theme-swatch:hover {
  transform: scale(1.08);
}

button.theme-swatch-active {
  border-color: var(--md-on-surface);
}

button.theme-swatch-blue,
button.theme-swatch-blue:hover {
  background: #1a73e8;
}

button.theme-swatch-green,
button.theme-swatch-green:hover {
  background: #1e8e3e;
}

button.theme-swatch-purple,
button.theme-swatch-purple:hover {
  background: #8430ce;
}

button.theme-swatch-orange,
button.theme-swatch-orange:hover {
  background: #e8710a;
}

button.theme-swatch-teal,
button.theme-swatch-teal:hover {
  background: #00897b;
}

/* Small screens: stack multi-field entry forms into one full-width column
   instead of letting fields wrap into an uneven grid, and trim outer
   padding a bit so more content fits without crowding the edges. */
@media (max-width: 480px) {
  .topbar-inner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .page {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  section,
  .card {
    padding: 1rem;
  }

  .stack-form {
    flex-direction: column;
    align-items: stretch;
    /* Rows like the edit-in-place <li><form class="stack-form"> in the
       product/activity-type lists are flex containers themselves
       (li { display:flex }), which otherwise leaves the form sized to its
       content instead of filling the row. */
    width: 100%;
  }

  .stack-form input:not([type="checkbox"]),
  .stack-form select,
  .stack-form button[type="submit"] {
    width: 100%;
  }

  .stack-form>.cancel {
    align-self: flex-start;
  }
}