:root {
  color-scheme: light dark;

  --background-photo-layer: none;
  --background-photo-overlay: linear-gradient(
    rgb(240 234 223 / 82%),
    rgb(232 225 214 / 88%)
  );
  --page-background: linear-gradient(180deg, #e7e1d6 0%, #ded8ce 100%);
  --color-bg: #e2dcd1;
  --color-surface: #f0eadf;
  --color-surface-strong: #e8e1d6;
  --color-surface-muted: #ded6c9;
  --color-surface-subtle: #e5ded2;
  --color-surface-floating: #eee7dc;
  --color-ink: #211f1b;
  --color-muted: #625d53;
  --color-line: #b9af9f;
  --color-panel-line: #afa493;
  --color-leaf: #2f6f55;
  --color-leaf-p3: color(display-p3 0.18 0.44 0.33);
  --color-leaf-dark: #245642;
  --color-leaf-soft: #e8f1ec;
  --color-leaf-line: #b7d4c6;
  --color-on-leaf: #fff;
  --color-tomato: #d85b45;
  --color-danger: #9f3929;
  --color-danger-bg: #f7e8e4;
  --color-danger-line: #efc8bf;
  --color-danger-bg-hover: #f0d2ca;
  --color-gold: #e3ae3f;
  --color-cream: #e7ddc9;
  --color-photo-bg: #e8e3d6;
  --color-photo-line: #aaa18f;
  --color-photo-text: #8b8579;
  --color-plate-text: #8b7752;
  --color-plate-inner: #f7f3eb;
  --color-plate-ring: #e2d8c8;
  --color-today-text: #6d5730;
  --color-banner: rgb(35 35 31 / 96%);
  --color-banner-text: #fff;
  --color-banner-muted: rgb(255 255 255 / 75%);
  --color-focus-ring: rgb(47 111 85 / 14%);
  --color-outline-ring: rgb(47 111 85 / 25%);
  --radius: 8px;
  --radius-pill: 999px;
  --control-hit-size: 2.75rem;
  --switch-height: 1.85rem;
  --switch-padding: 0.16rem;
  --switch-thumb-size: 1.53rem;
  --switch-width: 3.15rem;
  --surface-panel: var(--color-surface);
  --surface-card: var(--color-surface-strong);
  --surface-control: var(--color-surface-muted);
  --surface-subtle: var(--color-surface-subtle);
  --surface-floating: var(--color-surface-floating);
  --border-default: var(--color-line);
  --border-panel: var(--color-panel-line);
  --focus-shadow: 0 0 0 3px var(--color-focus-ring);
  --motion-fast: 160ms ease;
  --motion-standard: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-emphasized: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ios-spring: 420ms cubic-bezier(0.2, 1.35, 0.28, 1);
  --motion-ios-settle: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --pressed-scale: 0.965;
  --shadow-panel: 0 4px 12px rgb(43 40 31 / 5%);
  --shadow-floating: 0 6px 14px rgb(43 40 31 / 10%);
  --shadow-banner: 0 12px 36px rgb(35 35 31 / 24%);
  --glass-backdrop: blur(24px) saturate(1.2);
  --glass-border: rgb(255 255 255 / 34%);
  --glass-highlight: rgb(255 255 255 / 34%);
  --glass-panel: linear-gradient(
    145deg,
    rgb(248 245 237 / 74%),
    rgb(235 231 220 / 48%)
  );
  --glass-floating: linear-gradient(
    145deg,
    rgb(248 245 237 / 82%),
    rgb(235 231 220 / 58%)
  );
  --glass-control: rgb(244 240 231 / 70%);
  --liquid-edge:
    inset 0 1px 0 rgb(255 255 255 / 38%), inset 0 -1px 0 rgb(67 55 35 / 8%);
  --tab-bar-bg: rgb(239 232 220 / 86%);
  --tab-bar-border: rgb(197 188 173 / 58%);
  --tab-bar-shadow: 0 8px 24px rgb(43 40 31 / 10%);
  --tab-bar-active-bg: rgb(33 31 27 / 10%);
  --tab-bar-active-border: rgb(98 93 83 / 24%);
  --tab-item-size: 3.45rem;
  --tab-item-gap: 0.35rem;
  --tab-bar-padding: 0.35rem;
  --tab-action-size: calc(var(--tab-item-size) + (var(--tab-bar-padding) * 2));
  --floating-actions-bottom-gap: max(0.45rem, env(safe-area-inset-bottom));
  --bottom-navigation-clearance: calc(
    var(--tab-action-size) + var(--floating-actions-bottom-gap) +
      var(--space-5) + var(--visual-viewport-bottom-offset)
  );
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --visual-viewport-bottom-offset: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --page-background:
      radial-gradient(
        circle at top left,
        rgb(87 146 115 / 22%),
        transparent 28rem
      ),
      linear-gradient(135deg, #131714 0%, #171c19 52%, #201918 100%);
    --color-bg: #131714;
    --color-surface: rgb(29 33 30 / 92%);
    --color-surface-strong: #202520;
    --color-surface-muted: #262b26;
    --color-surface-subtle: #242923;
    --color-surface-floating: rgb(30 35 31 / 96%);
    --color-ink: #f2efe8;
    --color-muted: #b5afa3;
    --color-line: #464137;
    --color-panel-line: rgb(96 87 72 / 80%);
    --color-leaf: #72c69c;
    --color-leaf-dark: #5cb285;
    --color-leaf-soft: #20392e;
    --color-leaf-line: #3f745a;
    --color-tomato: #ff927d;
    --color-danger: #ffac9c;
    --color-danger-bg: #42221f;
    --color-danger-line: #74443d;
    --color-danger-bg-hover: #54302b;
    --color-gold: #c99a3b;
    --color-cream: #312a20;
    --color-photo-bg: #232720;
    --color-photo-line: #68604f;
    --color-photo-text: #aaa395;
    --color-plate-text: #d2c6a8;
    --color-plate-inner: #272c26;
    --color-plate-ring: #4a4132;
    --color-today-text: #e4c987;
    --color-banner: rgb(244 240 231 / 96%);
    --color-banner-text: #1d211e;
    --color-banner-muted: rgb(29 33 30 / 72%);
    --color-focus-ring: rgb(114 198 156 / 20%);
    --color-outline-ring: rgb(114 198 156 / 30%);
    --shadow-panel: 0 18px 50px rgb(0 0 0 / 36%);
    --shadow-floating: 0 8px 24px rgb(0 0 0 / 32%);
    --shadow-banner: 0 12px 36px rgb(0 0 0 / 32%);
    --glass-border: rgb(255 255 255 / 14%);
    --glass-highlight: rgb(255 255 255 / 16%);
    --glass-panel: linear-gradient(
      145deg,
      rgb(33 38 34 / 78%),
      rgb(23 27 24 / 48%)
    );
    --glass-floating: linear-gradient(
      145deg,
      rgb(41 47 42 / 86%),
      rgb(29 34 30 / 58%)
    );
    --glass-control: rgb(30 35 31 / 62%);
    --tab-bar-bg: rgb(30 35 31 / 72%);
    --tab-bar-border: rgb(255 255 255 / 10%);
    --tab-bar-shadow: 0 8px 28px rgb(0 0 0 / 22%);
    --tab-bar-active-bg: rgb(242 239 232 / 10%);
    --tab-bar-active-border: rgb(181 175 163 / 20%);
    --background-photo-overlay: linear-gradient(
      rgb(20 24 21 / 78%),
      rgb(17 21 18 / 86%)
    );
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page-background:
    radial-gradient(
      circle at top left,
      rgb(87 146 115 / 22%),
      transparent 28rem
    ),
    linear-gradient(135deg, #131714 0%, #171c19 52%, #201918 100%);
  --color-bg: #131714;
  --color-surface: rgb(29 33 30 / 92%);
  --color-surface-strong: #202520;
  --color-surface-muted: #262b26;
  --color-surface-subtle: #242923;
  --color-surface-floating: rgb(30 35 31 / 96%);
  --color-ink: #f2efe8;
  --color-muted: #b5afa3;
  --color-line: #464137;
  --color-panel-line: rgb(96 87 72 / 80%);
  --color-leaf: #72c69c;
  --color-leaf-dark: #5cb285;
  --color-leaf-soft: #20392e;
  --color-leaf-line: #3f745a;
  --color-tomato: #ff927d;
  --color-danger: #ffac9c;
  --color-danger-bg: #42221f;
  --color-danger-line: #74443d;
  --color-danger-bg-hover: #54302b;
  --color-gold: #c99a3b;
  --color-cream: #312a20;
  --color-photo-bg: #232720;
  --color-photo-line: #68604f;
  --color-photo-text: #aaa395;
  --color-plate-text: #d2c6a8;
  --color-plate-inner: #272c26;
  --color-plate-ring: #4a4132;
  --color-today-text: #e4c987;
  --color-banner: rgb(244 240 231 / 96%);
  --color-banner-text: #1d211e;
  --color-banner-muted: rgb(29 33 30 / 72%);
  --color-focus-ring: rgb(114 198 156 / 20%);
  --color-outline-ring: rgb(114 198 156 / 30%);
  --shadow-panel: 0 18px 50px rgb(0 0 0 / 36%);
  --shadow-floating: 0 8px 24px rgb(0 0 0 / 32%);
  --shadow-banner: 0 12px 36px rgb(0 0 0 / 32%);
  --glass-border: rgb(255 255 255 / 14%);
  --glass-highlight: rgb(255 255 255 / 16%);
  --glass-panel: linear-gradient(
    145deg,
    rgb(33 38 34 / 78%),
    rgb(23 27 24 / 48%)
  );
  --glass-floating: linear-gradient(
    145deg,
    rgb(41 47 42 / 86%),
    rgb(29 34 30 / 58%)
  );
  --glass-control: rgb(30 35 31 / 62%);
  --tab-bar-bg: rgb(30 35 31 / 72%);
  --tab-bar-border: rgb(255 255 255 / 10%);
  --tab-bar-shadow: 0 8px 28px rgb(0 0 0 / 22%);
  --tab-bar-active-bg: rgb(242 239 232 / 10%);
  --tab-bar-active-border: rgb(181 175 163 / 20%);
  --background-photo-overlay: linear-gradient(
    rgb(20 24 21 / 78%),
    rgb(17 21 18 / 86%)
  );
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-image: var(--page-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-ink);
  dynamic-range-limit: standard;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-block: hidden;
  overflow-inline: hidden;
  overflow: hidden;
  overscroll-behavior: none;
}

button,
input,
textarea {
  font: inherit;
}

button,
label,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
input:not([type="checkbox"], [type="date"], [type="time"]),
textarea {
  -webkit-appearance: none;
  appearance: none;
}

[hidden] {
  display: none !important;
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip-path: inset(50%);
}

h1,
h2 {
  line-height: 1.05;
  margin: 0;
  text-wrap: pretty;
}

h1 {
  font-size: 2.75rem;
}

h2 {
  font-size: 1.85rem;
}

.eyebrow {
  color: var(--color-leaf);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}

/* Layout */
.auth-shell {
  align-items: center;
  display: grid;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior-y: contain;
  overflow-block: auto;
  overflow-inline: hidden;
  overflow-y: auto;
  padding: var(--space-4);
  scroll-padding-bottom: max(
    var(--space-5),
    var(--bottom-navigation-clearance)
  );
  scroll-padding-top: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.auth-shell,
.entry-panel,
.day-panel,
.meal-suggestions {
  scrollbar-width: none;
}

.auth-shell::-webkit-scrollbar,
.entry-panel::-webkit-scrollbar,
.day-panel::-webkit-scrollbar,
.meal-suggestions::-webkit-scrollbar {
  display: none;
}

.auth-panel,
.entry-panel,
.day-panel {
  background: var(--surface-panel);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  transform: translateZ(0);
}

.auth-panel {
  animation: panel-enter var(--motion-ios-settle) both;
  display: grid;
  gap: var(--space-4);
  margin: 0 auto;
  padding: var(--space-5);
  scroll-snap-align: center;
  width: min(100%, 25rem);
}

.auth-panel h1 {
  font-size: 2.6rem;
}

.auth-heading-row {
  align-items: start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.app {
  align-items: start;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  padding: 2rem 0;
  width: min(74rem, calc(100% - 2rem));
}

.entry-panel {
  align-self: start;
  max-height: calc(100dvh - 4rem);
  overscroll-behavior-y: contain;
  overflow-block: auto;
  overflow-inline: hidden;
  overflow-y: auto;
  padding: var(--space-5);
  position: sticky;
  scroll-padding-bottom: max(
    var(--space-5),
    var(--bottom-navigation-clearance)
  );
  scroll-padding-top: var(--space-5);
  top: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.day-panel {
  max-height: calc(100dvh - 4rem);
  min-height: 0;
  overscroll-behavior-y: contain;
  overflow-block: auto;
  overflow-inline: hidden;
  overflow-y: auto;
  padding: var(--space-5);
  scroll-padding-bottom: max(
    var(--space-5),
    var(--bottom-navigation-clearance)
  );
  scroll-padding-top: 5rem;
  -webkit-overflow-scrolling: touch;
}

.app > .day-panel {
  min-width: 0;
}

.app > .entry-panel[hidden] + .day-panel {
  grid-column: 1 / -1;
}

.app.is-tab-add .entry-panel {
  grid-column: 1 / -1;
  justify-self: center;
  max-height: calc(100dvh - 4rem);
  position: relative;
  top: auto;
  width: min(100%, 34rem);
}

.app.is-tab-add .entry-panel,
.app.is-tab-history .day-view,
.app.is-tab-settings .settings-panel,
.app.is-tab-notifications .notification-panel,
.app.is-tab-users .admin-panel {
  animation: view-enter var(--motion-ios-settle) both;
}

.brand-row,
.day-header {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  margin-bottom: var(--space-3);
  width: 100%;
}

.entry-panel .brand-row {
  margin-bottom: var(--space-3);
  padding-right: 0;
  scroll-snap-align: start;
}

.day-header {
  display: grid;
  gap: 0.55rem;
}

.app.is-tab-history .day-header {
  background: transparent;
  margin: 0 0 var(--space-4);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.app:not(.is-tab-history) .day-header {
  display: none;
}

.section-heading:not(.sr-only) {
  display: none;
}

.offline-status {
  align-items: center;
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 0.45rem;
  margin: 0 0 var(--space-3);
  max-width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
}

.offline-status-dot {
  background: var(--color-leaf);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 0.55rem;
  width: 0.55rem;
}

.offline-status-count {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  line-height: 1;
  min-width: 1.25rem;
  padding: 0.22rem 0.4rem;
  text-align: center;
}

.offline-status.is-offline .offline-status-dot,
.offline-status.is-error .offline-status-dot {
  background: var(--color-danger);
}

.offline-status.is-syncing .offline-status-dot,
.offline-status.is-pending .offline-status-dot {
  background: var(--color-gold);
}

.day-controls,
.auth-actions {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.day-controls {
  flex: 1 1 auto;
  justify-content: start;
  min-width: 0;
  width: 100%;
}

.day-header input {
  border-radius: var(--radius-pill);
  flex: 1 1 auto;
  font-size: clamp(1.05rem, 4.7vw, 1.35rem);
  font-weight: 700;
  min-height: 3.35rem;
  min-width: 0;
  padding: 0.65rem 1rem;
  text-align: center;
  width: 100%;
}

.today-return-button {
  align-items: center;
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  min-height: 3.35rem;
  padding: 0.35rem 1rem;
  touch-action: manipulation;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-ios-settle);
  -webkit-tap-highlight-color: transparent;
}

.day-share-button {
  align-items: center;
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 3.35rem;
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-ios-settle);
  width: 3.35rem;
  -webkit-tap-highlight-color: transparent;
}

.day-share-button svg {
  fill: none;
  height: 1.35rem;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1.35rem;
}

.today-return-button:hover {
  background: var(--color-cream);
  color: var(--color-ink);
}

.day-share-button:hover {
  background: var(--color-cream);
  color: var(--color-ink);
}

.today-return-button:focus-visible,
.day-share-button:focus-visible {
  outline: 3px solid var(--color-outline-ring);
  outline-offset: 3px;
}

.day-view {
  contain: layout paint;
  touch-action: pan-y;
}

.app.is-tab-history .day-view {
  padding-bottom: var(--bottom-navigation-clearance);
}

.auth-copy {
  color: var(--color-muted);
  margin: -0.35rem 0 0;
  text-wrap: pretty;
}

.today-badge {
  background: var(--color-cream);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-today-text);
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  align-items: center;
  display: inline-flex;
  min-height: var(--control-hit-size);
  padding: 0.45rem 0.85rem;
}

.brand-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.entry-panel .brand-actions {
  justify-content: space-between;
  width: 100%;
}

.appearance-controls {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.35rem;
}

.accent-color-picker {
  align-items: center;
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: var(--control-hit-size);
  justify-content: center;
  overflow: hidden;
  padding: 0.2rem;
  position: relative;
  touch-action: manipulation;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    transform var(--motion-ios-settle);
  width: var(--control-hit-size);
  -webkit-tap-highlight-color: transparent;
}

.accent-color-input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.accent-color-swatch {
  background: var(--accent-picker-color, var(--color-leaf));
  border-radius: 50%;
  display: block;
  height: 1.25rem;
  pointer-events: none;
  width: 1.25rem;
}

.accent-color-picker:hover {
  border-color: var(--color-leaf);
}

.accent-color-picker:focus-within {
  outline: 3px solid var(--color-outline-ring);
  outline-offset: 3px;
}

.theme-toggle-button {
  align-items: center;
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  height: var(--control-hit-size);
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-ios-settle);
  width: var(--control-hit-size);
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-button:hover {
  background: var(--color-cream);
  color: var(--color-ink);
}

.theme-toggle-button:focus-visible {
  outline: 3px solid var(--color-outline-ring);
  outline-offset: 3px;
}

.theme-toggle-button svg {
  fill: none;
  height: 1.2rem;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1.2rem;
}

.navigation-visibility-button[aria-pressed="true"] {
  color: var(--color-leaf);
}

.navigation-eye-open,
.navigation-eye-pupil,
.navigation-eye-closed {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.navigation-eye-closed {
  opacity: 0;
  transform: scaleX(0.72) scaleY(0.45);
}

.navigation-visibility-button[aria-pressed="true"] .navigation-eye-open {
  opacity: 0;
  transform: scaleX(0.9) scaleY(0.12);
}

.navigation-visibility-button[aria-pressed="true"] .navigation-eye-pupil {
  opacity: 0;
  transform: scale(0.25);
}

.navigation-visibility-button[aria-pressed="true"] .navigation-eye-closed {
  opacity: 1;
  transform: scale(1);
}

:root[data-navigation-mode="food-only"] .security-toggle-button,
:root[data-navigation-mode="food-only"] .notifications-toggle-button,
:root[data-navigation-mode="food-only"] .users-toggle-button,
:root[data-navigation-mode="food-only"] .logout-action-button {
  display: none;
}

:root[data-navigation-mode="food-only"] .view-actions {
  gap: 0.25rem;
}

:root[data-navigation-mode="food-only"] .tab-active-indicator {
  display: none;
}

:root[data-navigation-mode="food-only"] .add-toggle-button,
:root[data-navigation-mode="food-only"] .history-toggle-button {
  gap: 0.45rem;
  min-width: 7.25rem;
  padding: 0 0.9rem;
  width: auto;
}

:root[data-navigation-mode="food-only"]
  .view-actions
  .add-toggle-button.is-active,
:root[data-navigation-mode="food-only"]
  .view-actions
  .history-toggle-button.is-active {
  background: var(--tab-bar-active-bg);
  border-color: var(--tab-bar-active-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

:root[data-navigation-mode="food-only"] .add-toggle-button .nav-label,
:root[data-navigation-mode="food-only"] .history-toggle-button .nav-label {
  clip-path: none;
  font-size: 0.78rem;
  font-weight: 800;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.theme-mode-select {
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  min-height: var(--control-hit-size);
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
}

.theme-mode-select:focus-visible {
  outline: 3px solid var(--color-outline-ring);
  outline-offset: 3px;
}

/* Forms and buttons */
label {
  display: grid;
  gap: 0.35rem;
}

.meal-description-field {
  position: relative;
}

label span {
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 800;
}

input,
textarea {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--color-ink);
  min-height: var(--control-hit-size);
  min-width: 0;
  outline: none;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

input:focus,
textarea:focus {
  border-color: var(--color-leaf);
  box-shadow: var(--focus-shadow);
}

input[type="date"],
input[type="time"] {
  appearance: none;
  display: block;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  -webkit-appearance: none;
}

input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: center;
  width: 100%;
}

textarea {
  resize: vertical;
}

.meal-suggestions {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  gap: 0.45rem;
  max-width: 100%;
  overscroll-behavior-x: contain;
  overflow: auto hidden;
  padding: 0.15rem 0 0.05rem;
  position: static;
  scroll-padding-inline: var(--space-3);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.meal-suggestion-option {
  background: rgb(114 198 156 / 10%);
  border: 1px solid rgb(114 198 156 / 16%);
  border-radius: var(--radius-pill);
  color: var(--color-leaf);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.1;
  max-width: min(13rem, 76vw);
  scroll-snap-align: start;
  min-height: 2.25rem;
  overflow: hidden;
  padding: 0.45rem 0.7rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-suggestion-option:hover,
.meal-suggestion-option.is-active {
  background: rgb(114 198 156 / 18%);
  border-color: rgb(114 198 156 / 24%);
  color: var(--color-leaf);
}

.meal-suggestion-match {
  background: transparent;
  color: var(--color-leaf);
  font: inherit;
  font-weight: 850;
}

.meal-suggestion-option.is-active .meal-suggestion-match,
.meal-suggestion-option:hover .meal-suggestion-match {
  color: inherit;
}

.field-grid,
.field-grid > label {
  min-width: 0;
  width: 100%;
}

.field-grid,
.meal-form {
  display: grid;
}

.field-grid {
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

.meal-form {
  gap: var(--space-3);
}

.is-meal-focus-mode .app.is-tab-add {
  align-items: end;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.is-meal-focus-mode .app.is-tab-add .entry-panel {
  align-self: end;
  inset: auto 0.5rem calc(var(--visual-viewport-bottom-offset) + 0.75rem);
  max-height: calc(100dvh - var(--visual-viewport-bottom-offset) - 1rem);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-4);
  position: fixed;
  scroll-snap-type: none;
  width: min(calc(100dvw - 1rem), 34rem);
  z-index: 900;
}

.is-meal-focus-mode .app.is-tab-add .entry-panel .brand-row,
.is-meal-focus-mode .app.is-tab-add .offline-status,
.is-meal-focus-mode .app.is-tab-add .field-grid,
.is-meal-focus-mode .app.is-tab-add .photo-picker,
.is-meal-focus-mode .app.is-tab-add .meal-form-status:empty {
  display: none;
}

.is-meal-focus-mode .app.is-tab-add .meal-form {
  gap: var(--space-2);
}

.is-meal-focus-mode .app.is-tab-add .meal-description-field,
.is-meal-focus-mode .app.is-tab-add .snack-toggle-field,
.is-meal-focus-mode .app.is-tab-add .primary-button {
  animation: panel-enter var(--motion-ios-settle) both;
}

.is-meal-focus-mode .app.is-tab-add .primary-button {
  min-height: 3.2rem;
}

.primary-button,
.secondary-button,
.delete-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 900;
  min-height: var(--control-hit-size);
  touch-action: manipulation;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    filter var(--motion-fast),
    transform var(--motion-ios-settle),
    box-shadow var(--motion-fast);
  -webkit-tap-highlight-color: transparent;
}

.primary-button {
  background: var(--color-leaf-p3);
  border: 1px solid transparent;
  box-shadow: 0 0.25rem 0.85rem
    color-mix(in srgb, var(--color-leaf) 18%, transparent);
  color: var(--color-on-leaf);
  color: contrast-color(var(--color-leaf-p3));
  padding: 0.9rem var(--space-4);
}

.primary-button:disabled {
  cursor: default;
  opacity: 0.72;
}

.primary-button:hover {
  background: var(--color-leaf-dark);
}

.primary-button:active,
.secondary-button:active,
.delete-button:active,
.theme-toggle-button:active,
.accent-color-picker:active,
.logout-button:active,
.today-return-button:active,
.day-share-button:active {
  filter: brightness(0.98);
  transform: scale(var(--pressed-scale));
}

.secondary-button {
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  color: var(--color-ink);
  padding: 0.9rem var(--space-4);
}

.secondary-button:hover {
  background: var(--color-cream);
}

.compact-button {
  padding: 0.55rem 0.75rem;
}

.delete-button {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-line);
  color: var(--color-danger);
  margin-right: 0;
  padding: 0.65rem 0.8rem;
}

.delete-button:hover {
  background: var(--color-danger-bg-hover);
}

.auth-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-line);
  border-radius: var(--radius);
  color: var(--color-danger);
  font-weight: 800;
  margin: 0;
  padding: 0.7rem 0.85rem;
}

.meal-form-status {
  color: var(--color-leaf);
  font-size: 0.9rem;
  font-weight: 800;
  margin: calc(-1 * var(--space-2)) 0 0;
  min-height: 1.2rem;
  text-align: center;
}

.meal-form-status:empty {
  visibility: hidden;
}

.meal-form-status.is-error {
  color: var(--color-danger);
}

.meal-form-status.is-pending {
  color: var(--color-muted);
}

/* Meal form */
.photo-picker {
  align-items: center;
  background: var(--color-photo-bg);
  border: 1px dashed var(--color-photo-line);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  min-height: clamp(10rem, 30dvh, 16rem);
  overflow: hidden;
  position: relative;
}

.snack-toggle-field {
  align-items: center;
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: var(--control-hit-size);
  padding: 0.55rem 0.75rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.snack-toggle-field:has(input:focus-visible) {
  outline: 3px solid var(--color-outline-ring);
  outline-offset: 3px;
}

.snack-toggle-field input {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.snack-toggle-text {
  color: var(--color-ink);
  display: block;
  font-size: 0.96rem;
  font-weight: 900;
}

.snack-toggle-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.snack-toggle-hint {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
}

.snack-switch,
.notification-switch {
  background: var(--border-default);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgb(10 25 18 / 8%);
  display: inline-flex;
  flex: 0 0 auto;
  height: var(--switch-height);
  padding: var(--switch-padding);
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
  width: var(--switch-width);
}

.snack-switch::before,
.notification-switch::before {
  background: var(--surface-card);
  border-radius: 50%;
  box-shadow: 0 0.15rem 0.45rem rgb(10 25 18 / 20%);
  content: "";
  display: block;
  height: var(--switch-thumb-size);
  transform: translateX(0);
  transition: transform var(--motion-fast);
  width: var(--switch-thumb-size);
}

.snack-toggle-field input:checked + .snack-toggle-copy + .snack-switch {
  background: var(--color-leaf);
}

.snack-toggle-field input:checked + .snack-toggle-copy + .snack-switch::before {
  transform: translateX(1.3rem);
}

.snack-toggle-field:active .snack-switch::before {
  transform: scale(0.92);
}

.snack-toggle-field:active
  input:checked
  + .snack-toggle-copy
  + .snack-switch::before {
  transform: translateX(1.3rem) scale(0.92);
}

.photo-picker input {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.photo-picker img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.photo-empty {
  place-items: center center;
  color: var(--color-muted);
  display: grid;
  font-weight: 800;
  gap: var(--space-2);
}

.photo-hint {
  color: var(--color-photo-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.photo-icon {
  align-items: center;
  background: var(--color-leaf);
  border-radius: var(--radius-pill);
  color: var(--color-on-leaf);
  color: contrast-color(var(--color-leaf));
  display: flex;
  font-size: 2rem;
  height: 3.4rem;
  justify-content: center;
  line-height: 1;
  width: 3.4rem;
}

/* Day view */
.stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-4);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.stats div {
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--color-muted);
  display: grid;
  font-size: 0.9rem;
  gap: 0.15rem;
  padding: 0.85rem;
}

.stats span {
  color: var(--color-ink);
  font-size: 1.55rem;
  font-weight: 900;
}

.meal-list {
  display: grid;
  gap: 0.85rem;
}

.meal-interval {
  align-items: center;
  color: var(--color-muted);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
  margin: -0.25rem 0;
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}

.meal-interval span {
  border-top: 1px solid var(--border-default);
  min-width: 0;
}

.meal-interval p {
  background: var(--surface-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 800;
  margin: 0;
  max-width: min(100%, 28rem);
  overflow-wrap: anywhere;
  padding: 0.45rem 0.75rem;
  text-align: center;
}

.meal-interval.is-current p {
  background: var(--color-leaf-soft);
  border-color: var(--color-leaf-line);
  color: var(--color-leaf);
}

.meal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  content-visibility: auto;
  contain-intrinsic-size: auto 8rem;
  min-height: 8rem;
  overflow: hidden;
  position: relative;
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
  touch-action: pan-y;
  transition:
    box-shadow var(--motion-fast),
    filter var(--motion-fast),
    transform var(--motion-ios-settle);
  user-select: none;
  -webkit-user-select: none;
  animation: meal-card-enter var(--motion-ios-settle) both;
  -webkit-tap-highlight-color: transparent;
}

.meal-card-content {
  align-items: center;
  background: var(--surface-card);
  display: grid;
  gap: 0.9rem;
  grid-template-areas: "media info";
  grid-template-columns: 8rem minmax(0, 1fr);
  min-height: 8rem;
  position: relative;
  z-index: 1;
}

.meal-card:active {
  filter: brightness(0.985);
  transform: scale(0.992);
}

.meal-card img,
.meal-placeholder {
  aspect-ratio: 1;
  align-self: stretch;
  grid-area: media;
  height: 100%;
  min-height: 8rem;
  width: 8rem;
}

.meal-card img {
  animation: meal-photo-reveal 220ms ease-out both;
  object-fit: cover;
}

.meal-placeholder,
.empty-plate {
  background:
    radial-gradient(circle, var(--color-plate-inner) 0 42%, transparent 43%),
    radial-gradient(circle, var(--color-plate-ring) 0 64%, transparent 65%),
    var(--color-gold);
}

.meal-placeholder {
  align-items: center;
  background:
    radial-gradient(circle, var(--color-plate-inner) 0 38%, transparent 39%),
    radial-gradient(circle, var(--color-plate-ring) 0 62%, transparent 63%),
    var(--color-cream);
  color: var(--color-plate-text);
  display: flex;
  font-size: 0.88rem;
  font-weight: 900;
  justify-content: center;
  text-align: center;
}

.meal-info {
  grid-area: info;
  min-width: 0;
  padding: 0.8rem 0.85rem 0.35rem 0;
}

.meal-time {
  color: var(--color-leaf);
  font-size: 0.92rem;
  font-weight: 900;
  margin: 0 0 0.15rem;
}

.meal-title {
  font-size: 1.18rem;
  font-weight: 900;
  margin: 0;
  overflow-wrap: anywhere;
}

.meal-sync-status {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0.2rem 0 0;
}

.meal-sync-status.is-conflict {
  color: var(--color-danger);
}

.meal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.meal-badge {
  background: var(--color-leaf-soft);
  border: 1px solid var(--color-leaf-line);
  border-radius: var(--radius-pill);
  color: var(--color-leaf);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  padding: 0.32rem 0.5rem;
}

.meal-actions {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip-path: inset(50%);
}

.meal-edit-button,
.meal-delete-button {
  justify-content: center;
  min-height: 2.55rem;
  margin-right: 0;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}

.meal-action-dialog {
  background: transparent;
  border: 0;
  color: var(--color-ink);
  inset: auto 0 0;
  margin: 0 auto;
  max-width: min(100% - 1rem, 31rem);
  opacity: 0;
  padding: 0 0 calc(0.75rem + env(safe-area-inset-bottom));
  transform: translate3d(0, 1rem, 0) scale(0.985);
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    overlay 220ms allow-discrete,
    display 220ms allow-discrete;
  width: 100%;
}

.meal-action-dialog[open] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.meal-action-dialog::backdrop {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgb(0 0 0 / 46%);
  transition:
    background 220ms cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 220ms cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@starting-style {
  .meal-action-dialog[open] {
    opacity: 0;
    transform: translate3d(0, 1rem, 0) scale(0.985);
  }

  .meal-action-dialog[open]::backdrop {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background: rgb(0 0 0 / 0%);
  }
}

.meal-action-dialog-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: calc(var(--radius) * 1.35);
  box-shadow: var(--shadow-floating);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.meal-action-dialog-panel h3 {
  font-size: 1.2rem;
  margin: 0;
}

.meal-action-dialog-panel p {
  color: var(--color-muted);
  font-weight: 700;
  margin: 0.35rem 0 0;
}

.meal-action-date-time {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meal-action-date-time label {
  min-width: 0;
}

.meal-action-date-time input {
  box-sizing: border-box;
}

.meal-action-dialog-actions {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr 1fr;
}

.meal-action-dialog-actions .delete-button,
.meal-action-dialog-actions .primary-button,
.meal-action-dialog-actions .secondary-button {
  min-height: 2.75rem;
}

@keyframes meal-card-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.55rem, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.65rem, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.45rem, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes nav-icon-pop {
  0% {
    transform: scale(0.84);
  }

  65% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scroll-reveal {
  from {
    opacity: 0.62;
    transform: translate3d(0, 0.75rem, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes meal-photo-reveal {
  from {
    opacity: 0;
    transform: scale(1.015);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.meal-note {
  color: var(--color-muted);
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.empty-state {
  place-items: center center;
  color: var(--color-muted);
  display: grid;
  gap: 0.85rem;
  padding: 4rem var(--space-4);
  text-align: center;
  text-wrap: pretty;
}

.empty-plate {
  border-radius: var(--radius-pill);
  height: 7rem;
  width: 7rem;
}

.empty-state[hidden] {
  display: none;
}

/* Security and admin */
.admin-panel,
.notification-panel {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.admin-panel {
  display: grid;
  gap: var(--space-5);
  scroll-snap-align: start;
}

.security-panel,
.notification-panel,
.passkey-list,
.session-list,
.user-list {
  display: grid;
}

.security-panel,
.notification-panel {
  gap: var(--space-4);
  scroll-snap-align: start;
}

.passkey-list,
.session-list,
.user-list {
  gap: var(--space-2);
}

.security-panel h3 {
  font-size: 1.15rem;
  margin: 0;
}

.security-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}

.appearance-settings-card {
  gap: var(--space-3);
}

.appearance-settings-options {
  display: grid;
  gap: var(--space-2);
}

.appearance-setting-row {
  align-items: center;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-3);
}

.appearance-setting-copy,
.background-setting-heading {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.appearance-setting-copy strong,
.background-setting-heading strong {
  font-size: 0.95rem;
}

.appearance-setting-copy span,
.background-setting-heading span {
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.appearance-setting-row .theme-toggle-button,
.appearance-setting-row .theme-mode-select,
.appearance-setting-row .accent-color-picker {
  flex: 0 0 auto;
}

.background-photo-preview {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: var(--surface-subtle);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius);
  color: var(--color-muted);
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.background-photo-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.background-photo-actions {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr 1fr;
}

.background-photo-select {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  width: 100%;
}

.background-photo-select input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.notification-form,
.security-actions,
.admin-form,
.admin-section,
.admin-grid,
.registration-link-list {
  display: grid;
  gap: var(--space-3);
}

.admin-section {
  gap: var(--space-3);
  min-width: 0;
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}

.admin-section + .admin-section {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-5);
}

.admin-section-title {
  display: grid;
  gap: 0.15rem;
}

.admin-section-title h3 {
  margin: 0;
}

.admin-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.notification-form {
  align-items: end;
  grid-template-columns: 1fr;
}

.notification-toggle-field {
  align-items: center;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3);
  -webkit-tap-highlight-color: transparent;
}

.notification-toggle-field input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.notification-toggle-text {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 900;
}

.notification-switch {
  box-sizing: border-box;
}

.notification-switch::before {
  box-sizing: border-box;
}

.notification-toggle-field input:checked + .notification-toggle-text {
  color: var(--color-ink);
}

.notification-toggle-field input:checked ~ .notification-switch {
  background: var(--color-leaf);
  border-color: transparent;
}

.notification-toggle-field input:checked ~ .notification-switch::before {
  background: var(--surface-card);
  transform: translateX(1.3rem);
}

.notification-toggle-field:active .notification-switch::before {
  transform: scale(0.92);
}

.notification-toggle-field:active input:checked ~ .notification-switch::before {
  transform: translateX(1.3rem) scale(0.92);
}

.notification-toggle-field:focus-within {
  border-color: var(--color-leaf);
  box-shadow: var(--focus-shadow);
}

.notification-reminder-list {
  display: grid;
  gap: var(--space-2);
}

.notification-reminder-row {
  align-items: end;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) 6.75rem;
  padding: var(--space-2);
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}

.notification-time-field {
  display: grid;
  gap: 0.25rem;
}

.notification-time-field input {
  min-height: 3rem;
}

.notification-reminder-delete {
  margin-right: 0;
  min-height: 3rem;
  padding: 0.45rem var(--space-2);
  width: 100%;
}

.notification-add-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem var(--space-4);
  width: 100%;
}

.notification-interval-card {
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2);
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}

.notification-interval-card .notification-toggle-field {
  background: transparent;
}

.notification-interval-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.notification-select-field {
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: flex;
  min-height: 3rem;
  overflow: hidden;
}

.notification-select-field select {
  -webkit-backdrop-filter: none;
  appearance: auto;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-ink);
  font: inherit;
  font-weight: 800;
  min-height: 0;
  padding: 0.75rem var(--space-3);
  width: 100%;
}

.notification-device-card {
  align-items: center;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: var(--space-3);
  scroll-margin-top: 5rem;
  scroll-snap-align: start;
}

.notification-device-card div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.notification-device-card strong,
.notification-device-card span {
  overflow-wrap: anywhere;
}

.notification-device-card span {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.web-push-toggle-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin-right: 0;
  min-height: 2.75rem;
  min-width: 7.5rem;
  white-space: nowrap;
}

.security-actions {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 11rem) auto;
}

.security-actions p {
  color: var(--color-muted);
  font-weight: 800;
  margin: 0;
}

.security-message {
  color: var(--color-leaf);
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0;
}

.security-message:empty {
  display: none;
}

.security-message.is-error {
  color: var(--color-danger);
}

.passkey-list-section {
  border-top: 1px solid var(--border-default);
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.passkey-list-header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.passkey-list-header h4 {
  font-size: 1rem;
  margin: 0;
}

.passkey-list-header span,
.session-current-badge {
  background: var(--color-leaf-soft);
  border: 1px solid var(--color-leaf-line);
  border-radius: var(--radius-pill);
  color: var(--color-leaf);
}

#webPushBadge:not(.is-linked) {
  background: var(--surface-control);
  border-color: var(--border-default);
  color: var(--color-muted);
}

.passkey-list-header span {
  align-items: center;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 900;
  height: 1.65rem;
  justify-content: center;
  min-width: 1.65rem;
  padding: 0 0.45rem;
}

#passkeyCount,
#sessionCount {
  font-variant-numeric: tabular-nums;
  width: auto;
}

.passkey-row,
.session-row,
.user-row,
.registration-link-row {
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  min-height: var(--control-hit-size);
  padding: 0.75rem 0.85rem;
}

.passkey-row,
.session-row {
  background: var(--surface-subtle);
}

.registration-link-row {
  background: var(--surface-subtle);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.registration-link-row.is-used {
  opacity: 0.62;
}

.passkey-details,
.session-details,
.user-details,
.registration-link-details {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.registration-link-details span {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.passkey-row strong,
.session-row strong,
.user-row strong,
.registration-link-row strong,
.session-details span,
.registration-link-details span {
  overflow-wrap: anywhere;
}

.passkey-row span,
.session-row span,
.registration-link-row span,
.passkey-empty,
.user-role {
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.user-passkey {
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 900;
  justify-self: start;
  padding: 0.2rem 0.45rem;
}

.user-passkey.is-enabled {
  background: var(--color-leaf-soft);
  border: 1px solid var(--color-leaf-line);
  color: var(--color-leaf);
}

.user-passkey.is-disabled {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-line);
  color: var(--color-danger);
}

.passkey-empty {
  margin: 0;
}

.session-current-badge {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
}

.session-delete-button,
.user-delete-button {
  flex: 0 0 auto;
  padding: 0.45rem 0.65rem;
}

.passkey-retire-button {
  flex: 0 0 auto;
  min-width: 7.5rem;
}

.passkey-migration-hint {
  color: var(--color-danger) !important;
}

.user-impersonate-button,
.user-delete-button {
  min-height: 2.4rem;
  min-width: 5.8rem;
}

.session-delete-button,
.user-actions .delete-button {
  margin-right: 0;
}

.user-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.registration-link-actions {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr 1fr;
  justify-content: end;
  width: 100%;
}

.registration-link-delete {
  margin-right: 0;
}

.user-impersonate-button:disabled,
.user-delete-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.admin-form .checkbox-field {
  align-self: end;
  padding-bottom: 0;
}

.admin-form .primary-button {
  min-height: 3rem;
}

.checkbox-field {
  align-content: end;
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-height: var(--control-hit-size);
  padding-bottom: 0.8rem;
}

.checkbox-field input {
  accent-color: var(--color-leaf);
  flex: 0 0 auto;
  height: 2rem;
  width: 2rem;
}

.floating-actions-row {
  align-items: center;
  bottom: calc(
    var(--floating-actions-bottom-gap) + var(--visual-viewport-bottom-offset)
  );
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  left: 50%;
  position: fixed;
  transform: translateX(-50%) translateZ(0);
  transition:
    bottom 180ms ease,
    opacity 160ms ease,
    transform var(--motion-ios-settle);
  width: max-content;
  will-change: bottom, transform;
  z-index: 1000;
}

.is-keyboard-open .floating-actions-row {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(1rem) translateZ(0);
}

.is-meal-focus-mode .floating-actions-row {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(1rem) translateZ(0);
}

.view-actions {
  background: var(--tab-bar-bg);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--tab-bar-shadow);
  display: flex;
  gap: var(--tab-item-gap);
  padding: var(--tab-bar-padding);
  position: relative;
  transform: translateZ(0);
}

.tab-active-indicator {
  background: var(--tab-bar-active-bg);
  border: 1px solid var(--tab-bar-active-border);
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 0 0 1px rgb(181 175 163 / 8%);
  height: var(--tab-item-size);
  left: 0;
  position: absolute;
  top: var(--tab-bar-padding);
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 180ms ease,
    width var(--motion-ios-spring);
  will-change: transform;
  width: var(--tab-item-size);
  z-index: 0;
}

.logout-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: var(--tab-item-size);
  justify-content: center;
  padding: 0;
  position: relative;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-ios-settle);
  width: var(--tab-item-size);
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.logout-button svg {
  fill: none;
  height: 1.55rem;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1.55rem;
}

.logout-action-button {
  background: var(--tab-bar-bg);
  border-color: var(--tab-bar-border);
  box-shadow: var(--tab-bar-shadow);
  height: var(--tab-action-size);
  width: var(--tab-action-size);
  z-index: 0;
}

.logout-button:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-ink);
}

#logoutButton:hover {
  background: var(--tab-bar-bg);
  border-color: var(--tab-bar-border);
  color: var(--color-muted);
}

#logoutButton.logout-action-button:hover {
  background: var(--tab-bar-bg);
  color: var(--color-ink);
}

.add-toggle-button.is-active:hover,
.history-toggle-button.is-active:hover,
.security-toggle-button.is-active:hover,
.notifications-toggle-button.is-active:hover,
.users-toggle-button.is-active:hover {
  color: var(--color-leaf);
}

.logout-button:active {
  transform: scale(var(--pressed-scale));
}

.logout-button:focus-visible {
  outline: 3px solid var(--color-outline-ring);
  outline-offset: 3px;
}

.add-toggle-button.is-active,
.history-toggle-button.is-active,
.security-toggle-button.is-active,
.notifications-toggle-button.is-active,
.users-toggle-button.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-leaf);
}

.add-toggle-button.is-active::before,
.history-toggle-button.is-active::before,
.security-toggle-button.is-active::before,
.notifications-toggle-button.is-active::before,
.users-toggle-button.is-active::before {
  content: none;
}

.add-toggle-button.is-active svg,
.history-toggle-button.is-active svg,
.security-toggle-button.is-active svg,
.notifications-toggle-button.is-active svg,
.users-toggle-button.is-active svg,
.add-toggle-button.is-active .nav-label,
.history-toggle-button.is-active .nav-label,
.security-toggle-button.is-active .nav-label,
.notifications-toggle-button.is-active .nav-label,
.users-toggle-button.is-active .nav-label {
  color: var(--color-leaf);
}

.add-toggle-button.is-active svg,
.history-toggle-button.is-active svg,
.security-toggle-button.is-active svg,
.notifications-toggle-button.is-active svg,
.users-toggle-button.is-active svg {
  animation: nav-icon-pop var(--motion-ios-spring) both;
}

.nav-label {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip-path: inset(50%);
}

.update-banner {
  align-items: center;
  background: var(--color-banner);
  border: 1px solid var(--color-panel-line);
  border-radius: var(--radius);
  bottom: var(--bottom-navigation-clearance);
  box-shadow: var(--shadow-banner);
  color: var(--color-banner-text);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  left: 50%;
  padding: 0.85rem;
  position: fixed;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), 32rem);
  z-index: 1200;
}

.update-banner div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.update-banner strong {
  font-size: 0.95rem;
}

.update-banner span {
  color: var(--color-banner-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.update-banner .secondary-button {
  background: var(--color-leaf);
  border-color: transparent;
  color: var(--color-on-leaf);
  flex: 0 0 auto;
}

.update-banner .secondary-button:disabled {
  cursor: wait;
  opacity: 0.75;
}

@supports (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .meal-action-dialog-panel {
    -webkit-backdrop-filter: var(--glass-backdrop);
    backdrop-filter: var(--glass-backdrop);
    background: var(--glass-panel);
    border-color: var(--glass-border);
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      var(--shadow-floating);
  }

  .auth-panel,
  .entry-panel,
  .day-panel,
  .meal-card-content,
  .security-card,
  .snack-toggle-field,
  .notification-toggle-field,
  .notification-device-card,
  .notification-interval-card,
  .notification-reminder-row,
  .passkey-row,
  .session-row,
  .user-row,
  .registration-link-row,
  .stats div {
    -webkit-backdrop-filter: var(--glass-backdrop);
    backdrop-filter: var(--glass-backdrop);
    background: var(--glass-panel);
    border-color: var(--glass-border);
    box-shadow:
      var(--liquid-edge),
      inset 0 1px 0 var(--glass-highlight),
      var(--shadow-panel);
  }

  .theme-toggle-button,
  .accent-color-picker,
  .view-actions,
  .logout-action-button,
  .update-banner {
    -webkit-backdrop-filter: var(--glass-backdrop);
    backdrop-filter: var(--glass-backdrop);
    background: var(--glass-floating);
    border-color: var(--glass-border);
    box-shadow:
      var(--liquid-edge),
      inset 0 1px 0 var(--glass-highlight),
      var(--shadow-floating);
  }

  input,
  textarea,
  .today-badge,
  .today-return-button,
  .day-share-button,
  .meal-interval p,
  .notification-select-field {
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    background: var(--glass-control);
    border-color: var(--glass-border);
    box-shadow:
      var(--liquid-edge),
      inset 0 1px 0 var(--glass-highlight);
  }
}

@supports (animation-timeline: view()) {
  .app.is-tab-history .stats div,
  .app.is-tab-history .meal-interval,
  .app.is-tab-history .meal-card {
    animation-name: scroll-reveal;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }

  .app.is-tab-history .meal-card {
    animation-duration: auto;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .meal-action-dialog-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-card);
    border-color: var(--border-default);
    box-shadow: var(--shadow-floating);
  }
}

:root[data-theme="light"] .meal-action-dialog-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface-card);
  border-color: var(--border-default);
  box-shadow: var(--shadow-floating);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .auth-panel,
  :root:not([data-theme]) .entry-panel,
  :root:not([data-theme]) .day-panel,
  :root:not([data-theme]) .meal-card-content,
  :root:not([data-theme]) .security-card,
  :root:not([data-theme]) .snack-toggle-field,
  :root:not([data-theme]) .notification-toggle-field,
  :root:not([data-theme]) .notification-device-card,
  :root:not([data-theme]) .notification-interval-card,
  :root:not([data-theme]) .notification-reminder-row,
  :root:not([data-theme]) .passkey-row,
  :root:not([data-theme]) .session-row,
  :root:not([data-theme]) .user-row,
  :root:not([data-theme]) .registration-link-row,
  :root:not([data-theme]) .stats div,
  :root:not([data-theme]) input,
  :root:not([data-theme]) textarea,
  :root:not([data-theme]) .today-badge,
  :root:not([data-theme]) .today-return-button,
  :root:not([data-theme]) .day-share-button,
  :root:not([data-theme]) .meal-interval p,
  :root:not([data-theme]) .notification-select-field {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  :root:not([data-theme]) .auth-panel,
  :root:not([data-theme]) .entry-panel,
  :root:not([data-theme]) .day-panel {
    background: var(--surface-panel);
    border-color: var(--border-panel);
    box-shadow: var(--shadow-panel);
  }

  :root:not([data-theme]) .meal-card-content,
  :root:not([data-theme]) .security-card,
  :root:not([data-theme]) .snack-toggle-field,
  :root:not([data-theme]) .notification-toggle-field,
  :root:not([data-theme]) .notification-device-card,
  :root:not([data-theme]) .notification-interval-card,
  :root:not([data-theme]) .notification-reminder-row,
  :root:not([data-theme]) .passkey-row,
  :root:not([data-theme]) .session-row,
  :root:not([data-theme]) .user-row,
  :root:not([data-theme]) .registration-link-row,
  :root:not([data-theme]) .stats div {
    background: var(--surface-card);
    border-color: var(--border-default);
  }

  :root:not([data-theme]) input,
  :root:not([data-theme]) textarea,
  :root:not([data-theme]) .today-badge,
  :root:not([data-theme]) .today-return-button,
  :root:not([data-theme]) .day-share-button,
  :root:not([data-theme]) .meal-interval p,
  :root:not([data-theme]) .notification-select-field,
  :root:not([data-theme]) .notification-toggle-field {
    background: var(--surface-control);
    border-color: var(--border-default);
  }
}

:root[data-theme="light"] .auth-panel,
:root[data-theme="light"] .entry-panel,
:root[data-theme="light"] .day-panel,
:root[data-theme="light"] .meal-card-content,
:root[data-theme="light"] .security-card,
:root[data-theme="light"] .snack-toggle-field,
:root[data-theme="light"] .notification-toggle-field,
:root[data-theme="light"] .notification-device-card,
:root[data-theme="light"] .notification-interval-card,
:root[data-theme="light"] .notification-reminder-row,
:root[data-theme="light"] .passkey-row,
:root[data-theme="light"] .session-row,
:root[data-theme="light"] .user-row,
:root[data-theme="light"] .registration-link-row,
:root[data-theme="light"] .stats div,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .today-badge,
:root[data-theme="light"] .today-return-button,
:root[data-theme="light"] .day-share-button,
:root[data-theme="light"] .meal-interval p,
:root[data-theme="light"] .notification-select-field {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

:root[data-theme="light"] .auth-panel,
:root[data-theme="light"] .entry-panel,
:root[data-theme="light"] .day-panel {
  background: var(--surface-panel);
  border-color: var(--border-panel);
  box-shadow: var(--shadow-panel);
}

:root[data-theme="light"] .meal-card-content,
:root[data-theme="light"] .security-card,
:root[data-theme="light"] .snack-toggle-field,
:root[data-theme="light"] .notification-toggle-field,
:root[data-theme="light"] .notification-device-card,
:root[data-theme="light"] .notification-interval-card,
:root[data-theme="light"] .notification-reminder-row,
:root[data-theme="light"] .passkey-row,
:root[data-theme="light"] .session-row,
:root[data-theme="light"] .user-row,
:root[data-theme="light"] .registration-link-row,
:root[data-theme="light"] .stats div {
  background: var(--surface-card);
  border-color: var(--border-default);
}

:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .today-badge,
:root[data-theme="light"] .today-return-button,
:root[data-theme="light"] .day-share-button,
:root[data-theme="light"] .meal-interval p,
:root[data-theme="light"] .notification-select-field,
:root[data-theme="light"] .notification-toggle-field {
  background: var(--surface-control);
  border-color: var(--border-default);
}

.notification-select-field select,
:root[data-theme="light"] .notification-select-field select {
  -webkit-backdrop-filter: none;
  appearance: auto;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  color: var(--color-ink);
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .security-card .security-card,
  :root:not([data-theme]) .notification-reminder-row,
  :root:not([data-theme]) .notification-device-card,
  :root:not([data-theme]) .notification-toggle-field {
    background: var(--surface-subtle);
  }
}

:root[data-theme="light"] .security-card .security-card,
:root[data-theme="light"] .notification-reminder-row,
:root[data-theme="light"] .notification-device-card,
:root[data-theme="light"] .notification-toggle-field {
  background: var(--surface-subtle);
}

@media (prefers-reduced-transparency: reduce) {
  .meal-action-dialog-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-card);
  }

  .auth-panel,
  .entry-panel,
  .day-panel,
  .meal-card-content,
  .security-card,
  .snack-toggle-field,
  .notification-toggle-field,
  .notification-device-card,
  .notification-interval-card,
  .notification-reminder-row,
  .passkey-row,
  .session-row,
  .user-row,
  .registration-link-row,
  .stats div,
  .meal-suggestions,
  .theme-toggle-button,
  .accent-color-picker,
  .logout-action-button,
  .view-actions,
  .update-banner,
  input,
  textarea,
  .today-badge,
  .today-return-button,
  .day-share-button,
  .meal-interval p {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .auth-panel,
  .entry-panel,
  .day-panel {
    background: var(--surface-panel);
  }

  .meal-card-content,
  .security-card,
  .snack-toggle-field,
  .notification-toggle-field,
  .notification-device-card,
  .notification-interval-card,
  .notification-reminder-row,
  .passkey-row,
  .session-row,
  .user-row,
  .registration-link-row,
  .stats div {
    background: var(--surface-card);
  }

  .theme-toggle-button,
  .accent-color-picker,
  .logout-action-button {
    background: var(--surface-floating);
  }

  .view-actions {
    background: var(--tab-bar-bg);
  }

  input,
  textarea,
  .today-badge,
  .today-return-button,
  .day-share-button,
  .meal-interval p {
    background: var(--surface-control);
  }

  .update-banner {
    background: var(--color-banner);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Responsive */

@media (width <= 960px) and (width >= 561px) {
  .security-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(9rem, 12rem)
      auto;
  }
}

@media (width <= 860px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: var(--space-4) 0;
  }

  .app.is-tab-add {
    grid-template-rows: minmax(0, 1fr);
  }

  .entry-panel {
    max-height: min(34rem, 52dvh);
    position: relative;
    top: auto;
  }

  .day-panel {
    align-self: stretch;
    height: 100%;
    max-height: 100%;
  }

  .app > .entry-panel[hidden] + .day-panel {
    height: calc(100dvh - (var(--space-4) * 2));
    max-height: none;
  }

  .app.is-tab-add .entry-panel {
    align-self: stretch;
    height: 100%;
    max-height: 100%;
  }
}

@media (width <= 560px) {
  :root {
    --floating-actions-bottom-gap: max(0.75rem, env(safe-area-inset-bottom));
  }

  .meal-action-date-time {
    grid-template-columns: minmax(0, 1fr);
  }

  h1 {
    font-size: 2.45rem;
  }

  h2 {
    font-size: 2.1rem;
  }

  .app {
    padding-bottom: var(--bottom-navigation-clearance);
    width: min(100% - 1rem, 74rem);
  }

  .entry-panel {
    max-height: min(31rem, 50dvh);
    padding-bottom: max(var(--space-5), var(--bottom-navigation-clearance));
  }

  .day-panel {
    padding-bottom: max(var(--space-5), var(--bottom-navigation-clearance));
  }

  .app > .entry-panel[hidden] + .day-panel {
    height: calc(100dvh - var(--space-4) - var(--bottom-navigation-clearance));
    max-height: none;
  }

  .web-push-toggle-button {
    width: 100%;
  }

  .brand-row,
  .day-header,
  .security-actions {
    display: grid;
  }

  .day-header input {
    font-size: clamp(1.05rem, 4.4vw, 1.25rem);
    min-height: 3.15rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .field-grid,
  .admin-form,
  .admin-grid,
  .notification-form,
  .notification-interval-grid,
  .notification-reminder-row,
  .security-actions,
  .notification-device-card {
    grid-template-columns: 1fr;
  }

  .stats {
    gap: 0.45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-3);
  }

  .stats div {
    border-radius: calc(var(--radius) * 0.85);
    font-size: clamp(0.7rem, 2.8vw, 0.82rem);
    gap: 0.05rem;
    min-width: 0;
    padding: 0.55rem 0.45rem;
  }

  .stats span {
    font-size: clamp(1.05rem, 5.2vw, 1.38rem);
    line-height: 1.05;
  }

  .admin-panel {
    gap: var(--space-4);
  }

  .admin-section {
    gap: var(--space-3);
  }

  .admin-section + .admin-section {
    padding-top: var(--space-4);
  }

  .admin-section-title h3,
  .security-card h3 {
    font-size: 1.45rem;
    line-height: 1.08;
  }

  .admin-grid,
  .admin-form,
  .registration-link-list,
  .user-list {
    min-width: 0;
  }

  .admin-grid .security-card {
    padding: var(--space-4);
  }

  .admin-form .primary-button,
  .compact-button,
  .user-impersonate-button,
  .user-delete-button {
    min-height: var(--control-hit-size);
  }

  .passkey-list-header {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .passkey-list-header .compact-button {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .passkey-list-header span {
    justify-self: end;
    width: auto;
  }

  .photo-picker {
    min-height: clamp(8.25rem, 28dvh, 12rem);
  }

  .checkbox-field {
    padding-bottom: 0;
  }

  .notification-reminder-row {
    grid-template-columns: minmax(0, 1fr) 6.75rem;
  }

  .meal-card {
    min-height: 7.6rem;
    padding: 0;
  }

  .meal-card-content {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-areas: "media info";
    grid-template-columns: 6.1rem minmax(0, 1fr);
    min-height: 7.6rem;
  }

  .meal-card img,
  .meal-placeholder {
    align-self: stretch;
    aspect-ratio: auto;
    grid-area: media;
    height: 100%;
    min-height: 7.6rem;
    object-fit: cover;
    object-position: center;
    width: 6.1rem;
  }

  .meal-info {
    grid-area: info;
    min-width: 0;
    padding: 0.85rem 0.95rem;
  }

  .meal-time {
    font-size: 0.86rem;
    margin-bottom: 0.1rem;
  }

  .meal-title {
    font-size: clamp(1.05rem, 5.6vw, 1.38rem);
    line-height: 1.12;
  }

  .meal-actions {
    margin: -1px;
  }

  .meal-edit-button,
  .meal-delete-button {
    font-size: 0.88rem;
    min-height: 2.65rem;
    min-width: 0;
    padding: 0.55rem 0.45rem;
  }

  .session-row,
  .registration-link-row {
    align-items: start;
    display: grid;
    grid-template-columns: 1fr;
  }

  .user-row {
    align-items: start;
    display: grid;
  }

  .user-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
  }

  .user-actions button {
    flex: 1 1 8rem;
  }

  .registration-link-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .user-impersonate-button,
  .user-delete-button {
    font-size: 0.95rem;
    min-width: 0;
    padding: 0.5rem 0.7rem;
  }

  .session-delete-button {
    justify-self: start;
  }

  .floating-actions-row {
    bottom: calc(
      var(--floating-actions-bottom-gap) + var(--visual-viewport-bottom-offset)
    );
  }

  .update-banner {
    align-items: stretch;
    display: grid;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    transform: none;
    width: auto;
  }
}

@media (hover: none) {
  .primary-button:hover {
    background: var(--color-leaf);
  }

  .secondary-button:hover,
  .theme-toggle-button:hover,
  .accent-color-picker:hover,
  .today-return-button:hover,
  .day-share-button:hover,
  .logout-button:hover {
    background: transparent;
    color: inherit;
  }

  .add-toggle-button.is-active:hover,
  .history-toggle-button.is-active:hover,
  .security-toggle-button.is-active:hover,
  .notifications-toggle-button.is-active:hover,
  .users-toggle-button.is-active:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--color-leaf);
  }

  #logoutButton:hover {
    background: var(--tab-bar-bg);
    border-color: var(--tab-bar-border);
    color: var(--color-muted);
  }
}

@supports (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .update-banner .secondary-button {
    background: var(--color-leaf);
    border-color: transparent;
    color: var(--color-on-leaf);
    box-shadow: none;
  }

  @media (width <= 560px) {
    .update-banner {
      background: var(--glass-floating);
      border-color: var(--glass-border);
      box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        var(--shadow-floating);
    }

    .view-actions {
      -webkit-backdrop-filter: blur(28px) saturate(1.6);
      backdrop-filter: blur(28px) saturate(1.6);
      background: var(--tab-bar-bg);
      box-shadow: var(--tab-bar-shadow);
    }
  }
}

/* A user photo belongs only to the main app panels. */
:root[data-custom-background="true"]
  :is(.auth-panel, .entry-panel, .day-panel) {
  background-image:
    var(--background-photo-overlay), var(--background-photo-layer);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}