/* Kcalories shared UI audit: WCAG AA contrast, resilient layouts and motion. */
:root {
  --kcal-action-blue: #2563eb;
  --kcal-action-blue-dark: #1d4ed8;
  --kcal-action-green: #22c55e;
  --kcal-action-green-dark: #16a34a;
  --kcal-action-red: #b91c1c;
  --kcal-focus: #93c5fd;
  --kcal-on-green: #052e16;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
}

body :where(main, section, article, form, fieldset, .container, .wrap, .card, .panel, .sheet, .grid, [class*="grid"]) > * {
  min-width: 0;
}

body :where(img, video, canvas, svg):not(.kcalories-brand-logo):not(.kcal-ui-icon) {
  max-width: 100%;
}

body :where(h1, h2, h3, h4, p, label, legend, .muted, .hint, .sheet-title, .sheet-sub, .status, .msg) {
  overflow-wrap: anywhere;
}

body :where(input, select, textarea) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body :where(table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body :where(.actions, .btn-row, .page-actions, .dz-actions, .custom-range) {
  flex-wrap: wrap;
}

body :where(.btn, .button, [class*="btn"], .tab, .range-btn, .choice-card) {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}

/* High-contrast action palette. Green buttons use dark ink; red is darkened. */
body :where(.btn-primary, .btn-blue, .kcalpro-btn--blue) {
  color: #fff !important;
  background: linear-gradient(180deg, var(--kcal-action-blue), var(--kcal-action-blue-dark)) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

body :where(.btn-green, .kcalpro-btn--green) {
  color: var(--kcal-on-green) !important;
  background: linear-gradient(180deg, #4ade80, var(--kcal-action-green)) !important;
  border-color: rgba(255, 255, 255, .26) !important;
  text-shadow: none !important;
}

body.kcal-reg .btn-primary {
  color: var(--kcal-on-green) !important;
  background: linear-gradient(180deg, #4ade80, var(--kcal-action-green)) !important;
}

body :where(.btn-danger, button.danger, [class*="delete"]):not([disabled]) {
  color: #fff !important;
}

body .btn-danger {
  background: linear-gradient(180deg, var(--kcal-action-red), #991b1b) !important;
  border-color: rgba(254, 202, 202, .34) !important;
}

body :where(.btn-ghost, .btn:not(.btn-primary):not(.btn-blue):not(.btn-green):not(.btn-danger), .kcalpro-btn:not(.kcalpro-btn--blue):not(.kcalpro-btn--green)) {
  color: #f8fafc !important;
  background-color: #17233a !important;
  border-color: #53627a !important;
}

body :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--kcal-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .34) !important;
}

body :where(button, .btn, .button, .tab, .range-btn, input, select) {
  min-height: 44px;
}

body :where(button, .btn, .button, .tab, .range-btn)[disabled] {
  cursor: not-allowed;
  opacity: .58;
}

/* Shared app logo, kept crisp in the navigation and dialogs. */
.kcalories-brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  max-width: none;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(147, 197, 253, .38);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16), 0 10px 24px rgba(0, 0, 0, .34);
}

.kcalories-brand-logo--small {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

/* Code-native photo/AI icon family. */
.kcal-ui-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.kcal-ai-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  color: #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(37, 99, 235, .3), rgba(34, 197, 94, .16));
  border: 1px solid rgba(147, 197, 253, .34);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 12px 28px rgba(0, 0, 0, .25);
}

.kcal-ai-icon .kcal-ui-icon {
  width: 28px;
  height: 28px;
}

.choice-card:hover .kcal-ai-icon,
.choice-card:focus-visible .kcal-ai-icon {
  color: #dcfce7;
  border-color: rgba(74, 222, 128, .55);
  transform: translateY(-2px) rotate(-2deg);
}

.choice-card .kcal-ai-icon {
  transition: transform .22s ease, color .22s ease, border-color .22s ease;
}

/* More polished sheets and loaders, including AI analysis. */
.sheet .overlay,
.kcalpro-login-backdrop {
  background: rgba(2, 6, 23, .76) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.sheet .panel,
.kcalpro-login-card {
  max-width: calc(100vw - 16px);
  isolation: isolate;
}

.sheet.active .panel,
.kcalpro-login-modal.is-open .kcalpro-login-card {
  animation: kcal-modal-arrive .36s cubic-bezier(.2, .9, .22, 1.08) both;
}

.loader-card {
  overflow: hidden;
  border-color: rgba(147, 197, 253, .3) !important;
  background: linear-gradient(155deg, rgba(15, 23, 42, .96), rgba(7, 18, 32, .94)) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 0 48px rgba(37, 99, 235, .13) !important;
  animation: kcal-loader-arrive .34s cubic-bezier(.2, .9, .22, 1.05) both;
}

.loader-card::before {
  content: "";
  position: absolute;
  inset: -70% -30%;
  z-index: -1;
  background: conic-gradient(from 90deg, transparent, rgba(37, 99, 235, .14), transparent 30%, rgba(34, 197, 94, .1), transparent 60%);
  animation: kcal-aurora 7s linear infinite;
}

.loader .ring,
.loader .loader-ring {
  filter: drop-shadow(0 0 18px rgba(37, 99, 235, .28));
}

.loader .ring::after {
  content: "" !important;
  width: 58px;
  height: 58px;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 68% 28%, #dcfce7 0 3px, transparent 4px),
    linear-gradient(145deg, rgba(37, 99, 235, .96), rgba(34, 197, 94, .88));
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 10px 26px rgba(0, 0, 0, .3);
  animation: kcal-ai-breathe 1.8s ease-in-out infinite;
}

.loader-text {
  color: #f8fafc !important;
}

.loader-sub {
  color: #cbd5e1 !important;
}

@keyframes kcal-modal-arrive {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes kcal-loader-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes kcal-aurora {
  to { transform: rotate(360deg); }
}

@keyframes kcal-ai-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.92) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) scale(1.04) rotate(2deg); }
}

/* Responsive forms, actions, dialogs and generated content. */
@media (max-width: 680px) {
  body :where(.sheet .panel, .modal-card, .kcalpro-login-card) {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 20px !important;
  }

  body :where(.actions, .btn-row, .page-actions, .dz-actions, .custom-range) {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch;
  }

  body :where(.actions, .btn-row, .page-actions, .dz-actions) > :where(.btn, button, a) {
    width: 100%;
    flex: 1 1 100% !important;
  }

  body :where(.grid-2, .grid-3, .photo-grid, .custom-range, .summary-grid, .profile-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .kcalpro-title {
    max-width: min(36vw, 150px) !important;
  }

  .kcalories-brand-logo {
    width: 34px;
    height: 34px;
  }

  .loader-card {
    width: calc(100vw - 24px) !important;
  }
}

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