/* Gachi stylesheet: base.css. Base/reset plus body.is-* state classes for native app, keyboard and text-entry. */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

/* ------------------------------ */
/* Base / Reset */
/* ------------------------------ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background:
    radial-gradient(circle at top, rgba(118, 203, 184, 0.2), transparent 30%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

body {
  font-family: "Nunito", sans-serif;
  color: var(--text-main);
  background: transparent;
}

body.is-ios-installed-web-app {
  --ios-installed-bottom-reach: clamp(0px, calc(var(--safe-bottom) - 14px), 20px);
  --bottom-nav-y-offset: clamp(0px, calc(var(--safe-bottom) - 23px), 12px);
}

@media (max-width: 560px) {
  body.is-ios-browser-web-app {
    --bottom-nav-y-offset: clamp(3px, 0.8svh, 7px);
  }
}

@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    :root {
      --ios-installed-bottom-reach: clamp(0px, calc(var(--safe-bottom-env) - 14px), 20px);
      --bottom-nav-y-offset: clamp(0px, calc(var(--safe-bottom-env) - 23px), 12px);
    }
  }

  @media (display-mode: standalone) and (max-width: 560px) {
    .page {
      bottom: calc(-1 * var(--ios-installed-bottom-reach));
    }
  }
}

body.is-native-app.is-native-bottom-overlaid {
  --native-bottom-reserve: var(--native-bottom-measured-reserve);
}

body.is-native-app .page {
  position: fixed;
  inset: 0;
  overflow: hidden;
  padding: 0;
}

body.is-native-app .screen[data-screen="step-3"],
body.is-native-app .screen[data-screen="step-5"],
body.is-native-app .screen[data-screen="step-6"] {
  height: var(--app-height);
  min-height: 0;
}

body.is-native-app .screen[data-screen="step-1"],
body.is-native-app .screen[data-screen="step-2"],
body.is-native-app .screen[data-screen="step-3"],
body.is-native-app .screen[data-screen="step-5"] {
  padding-bottom: 0;
}

body.is-native-app [data-screen="step-1"] .step-1-form,
body.is-native-app [data-screen="step-2"] .step-2-form,
body.is-native-app [data-screen="step-3"] .step-3-form,
body.is-native-app [data-screen="step-5"] > .question-form {
  padding-bottom: calc(112px + var(--safe-bottom) + var(--native-bottom-reserve));
}

body.is-native-app .screen[data-screen="step-3"],
body.is-native-app .screen[data-screen="step-5"] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  overscroll-behavior-y: contain;
}

body.is-native-app [data-screen="step-3"] .step-3-form,
body.is-native-app [data-screen="step-5"] > .question-form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body.is-native-app [data-screen="step-6"] .step-6-scroll-area,
body.is-native-app [data-screen="official-summary"] .step-6-scroll-area {
  padding-bottom: calc(112px + var(--safe-bottom) + var(--native-bottom-reserve));
  touch-action: pan-y;
}

body.is-native-app.is-native-keyboard-active .form-actions,
body.is-native-app.is-native-keyboard-active .invite-response-block,
body.is-native-app.is-native-keyboard-active #summary-response-block {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body:not(.is-native-app).is-text-entry-active [data-screen="step-1"] .form-actions,
body:not(.is-native-app).is-text-entry-active [data-screen="step-2"] .form-actions,
body:not(.is-native-app).is-text-entry-active [data-screen="step-3"] .form-actions,
body:not(.is-native-app).is-text-entry-active [data-screen="step-5"] .form-actions,
body:not(.is-native-app).is-text-entry-active [data-screen="step-6"] .form-actions {
  bottom: 0;
  --bottom-bar-underfill: 0px;
}

@supports (-webkit-touch-callout: none) {
  body:not(.is-native-app).is-summary-message-entry-active [data-screen="step-6"] .form-actions {
    --bottom-bar-underfill: max(34px, var(--safe-bottom), var(--viewport-bottom-offset));
    --bottom-bar-solid-fill: var(--surface-solid);
  }
}

body.is-native-app.is-native-text-entry-active [data-screen="challenge-detail"] .detail-actions,
body.is-native-app [data-screen="challenge-detail"]:has(#detail-chat-input:focus) .detail-actions,
body.is-native-app [data-screen="challenge-detail"]:has(#detail-official-chat-input:focus) .detail-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-text-entry-active .screen,
body.is-text-entry-active .dashboard-panel,
body.is-text-entry-active .hero-main,
body.is-text-entry-active .step-6-scroll-area {
  scroll-padding-bottom: var(--keyboard-scroll-padding);
}

@supports (-webkit-touch-callout: none) {
  body:not(.is-native-app).is-custom-duration-entry-active .page::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 34;
    height: var(--keyboard-bottom-inset);
    background:
      linear-gradient(180deg, rgba(31, 76, 91, 0.98), var(--bg-bottom));
    pointer-events: none;
    transform: translateZ(0);
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 10px,
      transparent 10px,
      transparent 20px
    );
  pointer-events: none;
}

body.is-dashboard-day-completion-pulsing::after {
  content: "";
  position: fixed;
  inset: -28%;
  z-index: 1200;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      transparent 33%,
      rgba(245, 255, 251, 0.08) 42%,
      rgba(245, 255, 251, 0.46) 49%,
      rgba(174, 243, 223, 0.2) 55%,
      transparent 66%
    ),
    linear-gradient(
      135deg,
      transparent 38%,
      rgba(111, 224, 192, 0.08) 47%,
      rgba(255, 255, 255, 0.2) 51%,
      rgba(111, 224, 192, 0.08) 57%,
      transparent 68%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-34%, -34%, 0) rotate(0.001deg);
  animation: dashboardDayCompletionSweep 2080ms cubic-bezier(0.16, 0.9, 0.28, 1) both;
}

@keyframes dashboardDayCompletionSweep {
  0% {
    opacity: 0;
    transform: translate3d(-34%, -34%, 0) rotate(0.001deg);
  }
  18% {
    opacity: 0.88;
  }
  62% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translate3d(34%, 34%, 0) rotate(0.001deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-dashboard-day-completion-pulsing::after {
    animation-duration: 240ms;
  }
}

button,
input,
textarea,
select {
  font: inherit;
}

button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
a:focus,
a:focus-visible {
  outline: none;
}

button {
  border: 0;
}

button,
a[role="button"] {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

[hidden] {
  display: none !important;
}