/* Category picker */
.category-picker {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.category-picker button {
  position: relative;
  min-width: 0;
  min-height: 78px;
  aspect-ratio: auto;
  padding: 9px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 18px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.category-picker button:active { transform: scale(.95); }
.category-picker button.selected {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(72, 137, 210, .16);
}
.category-picker button.selected::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 6px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  font-size: .52rem;
  font-weight: 900;
}
.category-picker .category-glyph {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.category-picker button.selected .category-glyph { transform: translateY(-1px) scale(1.08); }
.category-picker strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: .66rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-picker small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: .5rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-note {
  margin: 0 2px 18px;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.55;
}

/* Data actions */
.data-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.secondary-button {
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 84%, var(--accent-soft));
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 850;
}
.data-actions .primary-button { width: 100%; }

/* Mobile form resilience */
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid > .field,
.field input,
.field select,
.field textarea {
  min-width: 0;
  max-width: 100%;
}
#drink-time {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Theme control */
.theme-button {
  width: 68px;
  height: 42px;
  padding: 4px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(70, 115, 161, .14);
}
.theme-button-track {
  position: relative;
  width: 58px;
  height: 32px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  background: linear-gradient(135deg, #dff1ff, #b9dcff);
  transition: background .3s ease, border-color .3s ease;
}
.theme-button-track::before,
.theme-button-track::after {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  font-size: .72rem;
  line-height: 1;
  transition: opacity .25s ease, transform .25s ease;
}
.theme-button-track::before {
  content: "☀";
  left: 8px;
  color: #e49a2d;
}
.theme-button-track::after {
  content: "☾";
  right: 8px;
  color: #365f91;
  opacity: .62;
}
.theme-button-knob {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(45, 94, 143, .22);
  transform: translateX(0);
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), background .3s ease, box-shadow .3s ease;
}
:root[data-theme="dark"] .theme-button-track {
  background: linear-gradient(135deg, #1b3551, #274d75);
  border-color: rgba(152, 200, 255, .22);
}
:root[data-theme="dark"] .theme-button-track::before { opacity: .45; }
:root[data-theme="dark"] .theme-button-track::after { color: #d8eaff; opacity: 1; transform: translateY(-50%) scale(1.08); }
:root[data-theme="dark"] .theme-button-knob {
  margin: 0 !important;
  background: #eaf5ff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transform: translateX(28px);
}

/* Clear navigation state */
.nav-item {
  min-height: 66px;
  padding: 6px 5px;
  border-radius: 18px;
  transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-item .nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-item .nav-icon svg { width: 20px; height: 20px; }
.nav-item.active {
  color: var(--accent-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), color-mix(in srgb, var(--accent-soft) 38%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 7px 18px rgba(70, 130, 195, .1);
  transform: translateY(-2px);
}
.nav-item.active .nav-icon {
  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  box-shadow: 0 6px 14px rgba(63, 134, 209, .25);
  transform: scale(1.04);
}
.nav-item.active small { color: var(--accent-strong); font-weight: 900; }

/* Motion and tactile feedback */
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.icon-button,
.text-button,
.primary-button,
.secondary-button,
.danger-button,
.quick-card,
.record-card,
.calendar-day,
.settings-row,
.fab {
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.icon-button:active,
.text-button:active,
.primary-button:active,
.secondary-button:active,
.danger-button:active,
.quick-card:active,
.record-card:active,
.calendar-day:active,
.settings-row:active {
  transform: translateY(1px) scale(.97);
}
.fab:active { transform: translateX(-50%) scale(.91); }
.nav-item:active:not(.active) { transform: scale(.95); }

.view.active { animation: viewEnter .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(9px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sheet[open]::backdrop,
.login-dialog[open]::backdrop { animation: backdropIn .25s ease both; }
.sheet[open] .sheet-panel { animation: sheetEnter .36s cubic-bezier(.16, 1, .3, 1) both; }
.login-dialog[open] .login-card { animation: cardEnter .3s cubic-bezier(.16, 1, .3, 1) both; }
.sheet.is-closing::backdrop,
.login-dialog.is-closing::backdrop { animation: backdropOut .18s ease both; }
.sheet.is-closing .sheet-panel { animation: sheetLeave .18s ease both; }
.login-dialog.is-closing .login-card { animation: cardLeave .18s ease both; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetEnter { from { opacity: .35; transform: translate(-50%, 28px) scale(.985); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes sheetLeave { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, 22px) scale(.99); } }
@keyframes cardEnter { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cardLeave { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.97); } }

.sheet-panel {
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sheet-panel::-webkit-scrollbar { display: none; }
.sheet-head {
  position: sticky;
  top: -10px;
  z-index: 6;
  padding: 12px 0 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 98%, transparent) 72%, transparent);
  backdrop-filter: blur(12px);
}
.sheet-actions {
  position: sticky;
  z-index: 5;
  bottom: calc(-20px - var(--safe-bottom));
  padding: 14px 0 calc(20px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-strong) 96%, transparent) 24%);
}

@media (hover: hover) {
  .icon-button:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .quick-card:hover,
  .record-card:hover { filter: brightness(1.02); transform: translateY(-1px); }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .time-field { grid-column: 1 / -1; }
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
  .sheet-panel { padding-inline: 18px; }
}

@media (max-width: 420px) {
  .category-picker { gap: 6px; }
  .category-picker button { min-height: 72px; padding-inline: 2px; }
  .category-picker .category-glyph { font-size: 1.5rem; }
  .category-picker strong { font-size: .61rem; }
  .category-picker small { font-size: .46rem; }
  .theme-button { width: 64px; }
  .theme-button-track { width: 54px; }
  :root[data-theme="dark"] .theme-button-knob { transform: translateX(24px); }
}

@media (max-width: 350px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .time-field { grid-column: auto; }
  .data-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .sheet[open]::backdrop,
  .login-dialog[open]::backdrop,
  .sheet[open] .sheet-panel,
  .login-dialog[open] .login-card,
  .sheet.is-closing::backdrop,
  .login-dialog.is-closing::backdrop,
  .sheet.is-closing .sheet-panel,
  .login-dialog.is-closing .login-card { animation: none !important; }
}