/*
  The styles of the MoodTracker website, in the look of the app: the Fluent (Windows 11) tokens of
  moodtracker.client/src/styles/_tokens.scss and the colors of the logo.
*/
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;

  --accent: #0f7b7a;
  --accent-hover: #0d6f6e;
  --accent-pressed: #0b6463;
  --accent-soft: #dcefee;
  --accent-text: #0b6463;

  --text: #1b1b1b;
  --text-body: #3c4043;
  --text-muted: #5f6368;
  --text-subtle: #8a8a8a;

  --window: linear-gradient(120deg, #e6efef 0%, #f1eff4 55%, #f2f1ec 100%);
  --card: #ffffff;
  --subtle-fill: #f3f3f3;
  --stroke: #e3e3e3;
  --stroke-card: #e6e6e6;

  --mood-red-tint: #f6d7e0;
  --mood-yellow-tint: #fdf0cd;
  --mood-green-tint: #e3f5d2;
  --mood-red-ink: #7d1d3b;
  --mood-yellow-ink: #765607;
  --mood-green-ink: #2c6411;

  /* The logo: its dark background and the colors of its two hemispheres. */
  --night: #0f242b;
  --night-high: #1d3f4a;
  --logo-teal: #2dd4bf;
  --logo-yellow: #ffd166;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 16px 36px rgba(15, 36, 43, 0.14), 0 2px 6px rgba(15, 36, 43, 0.06);

  color-scheme: light;
}

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

html {
  background: #ebf0f0 var(--window) fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a {
  color: var(--accent-text);
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 20;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}

.skip:focus {
  top: 12px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--accent);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s;
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:active {
  background: var(--accent-pressed);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  stroke-width: 2.2;
}

.btn-small {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
}

.btn-large {
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 17px;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 32px;
}

.cta-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 600;
}

/* Header */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(240, 242, 242, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
}

.top-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  padding: 6px 12px;
  border-radius: 5px;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}

.nav a:hover,
.lang summary:hover {
  background: rgba(0, 0, 0, 0.05);
}

.lang {
  position: relative;
}

.lang summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 15px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang summary svg {
  width: 18px;
  height: 18px;
}

.lang .chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.15s;
}

.lang[open] .chevron {
  transform: rotate(180deg);
}

.lang ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-float);
  list-style: none;
}

.lang li a {
  display: block;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}

.lang li a:hover {
  background: var(--subtle-fill);
}

.lang li a[aria-current],
.foot-langs a[aria-current] {
  color: var(--accent-text);
  font-weight: 600;
}

/* Hero */

.hero {
  padding: 72px 0 32px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Each sentence of the headline on its own line. */
h1 span {
  display: block;
}

h1 .accent {
  color: var(--accent);
}

.lead {
  max-width: 34em;
  margin: 20px 0 0;
  color: var(--text-body);
  font-size: clamp(17px, 1.6vw, 19px);
}

.hero-meta {
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.hero-art {
  position: relative;
  isolation: isolate;
  padding: 30px 0 100px;
}

/* A soft glow in the colors of the logo behind the illustration. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(45, 212, 191, 0.28), transparent),
    radial-gradient(closest-side at 75% 70%, rgba(255, 209, 102, 0.3), transparent);
  filter: blur(12px);
}

.window {
  margin-left: 36px;
  padding: 18px 20px 32px;
  border: 1px solid var(--stroke-card);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(15, 36, 43, 0.14), 0 2px 8px rgba(15, 36, 43, 0.06);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.arrows {
  display: flex;
  gap: 4px;
  color: var(--text-subtle);
}

.arrows svg {
  width: 20px;
  height: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

/* A day of the illustrated month, like a day of the calendar of the app. */
.day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 0.86;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--subtle-fill);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.day b {
  align-self: flex-end;
  font-size: 15px;
  line-height: 1.1;
}

.day.g {
  background: var(--mood-green-tint);
  color: var(--mood-green-ink);
}

.day.y {
  background: var(--mood-yellow-tint);
  color: var(--mood-yellow-ink);
}

.day.r {
  background: var(--mood-red-tint);
  color: var(--mood-red-ink);
}

.day.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.day.future {
  background: #f8f8f8;
  color: var(--text-subtle);
}

.day.out {
  background: none;
  color: #c4c4c4;
}

.float {
  position: absolute;
  border: 1px solid var(--stroke-card);
  background: var(--card);
  box-shadow: var(--shadow-float);
}

.float-chip {
  top: 0;
  right: -8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

.chip-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mood-yellow-tint);
  color: var(--mood-yellow-ink);
}

.chip-icon svg {
  width: 18px;
  height: 18px;
}

.chip-check {
  width: 18px;
  height: 18px;
  color: var(--mood-green-ink);
  stroke-width: 2.4;
}

.float-stat {
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 250px;
  max-width: 340px;
  padding: 14px 18px 16px;
  border-radius: 12px;
}

.stat-label {
  color: var(--text-muted);
  font-size: 13px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.spark {
  flex: 1;
  height: 36px;
  color: var(--accent);
  stroke-width: 2.5;
}

.spark circle {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 2;
}

.stat-delta {
  color: var(--mood-green-ink);
  font-size: 13px;
  font-weight: 600;
}

/* Sections */

.section {
  padding: 88px 0;
}

.section-title {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  padding: 28px;
  border: 1px solid var(--stroke-card);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.card h3 {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.card p {
  margin: 0;
  color: var(--text-muted);
}

.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.icon svg {
  width: 24px;
  height: 24px;
}

.icon-teal {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.icon-yellow {
  background: var(--mood-yellow-tint);
  color: var(--mood-yellow-ink);
}

.icon-green {
  background: var(--mood-green-tint);
  color: var(--mood-green-ink);
}

/*
  The screenshots: a track of full-width slides that scrolls sideways and snaps to each of them, so swiping
  and the arrow keys work without the script. The script adds the arrows, the dots and the caption.
*/
.carousel-frame {
  position: relative;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--card);
  border: 1px solid var(--stroke-card);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 36, 43, 0.12);
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.slide img {
  width: 100%;
  height: auto;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--stroke-card);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.15s, color 0.15s;
}

.carousel-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.carousel-arrow svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}

.carousel-prev {
  left: -24px;
}

.carousel-next {
  right: -24px;
}

.carousel-arrow[hidden],
.carousel-dots[hidden] {
  display: none;
}

.carousel-caption {
  min-height: 1.6em;
  margin: 18px 0 0;
  color: var(--text-muted);
  text-align: center;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}

/* A 24-pixel target around a small dot; the current screenshot's dot is a wider bar. */
.carousel-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #c4cacc;
  transition: width 0.2s, background-color 0.2s;
}

.carousel-dots button:hover::before {
  background: var(--text-subtle);
}

.carousel-dots button[aria-current="true"] {
  width: 36px;
}

.carousel-dots button[aria-current="true"]::before {
  width: 24px;
  background: var(--accent);
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  padding: 24px;
}

.feature h3 {
  margin: 16px 0 12px;
}

.checks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 28px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.5;
}

.checks li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6463' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Privacy: a dark band in the colors of the logo. */

.band {
  padding: 88px 0;
  background: linear-gradient(160deg, var(--night-high), var(--night));
  color: #c9dadd;
}

.band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.band .eyebrow {
  background: rgba(45, 212, 191, 0.14);
  color: var(--logo-teal);
}

.band .section-title {
  margin-bottom: 16px;
  color: #fff;
  text-align: left;
}

.band-text {
  margin: 0;
  font-size: 18px;
}

.band-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--logo-teal);
  font-weight: 600;
}

.band-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.band-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}

.band-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--logo-teal);
  stroke-width: 2.4;
}

/* FAQ */

.faq {
  display: grid;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}

.faq details {
  border: 1px solid var(--stroke-card);
  border-radius: 10px;
  background: var(--card);
}

.faq summary {
  position: relative;
  padding: 18px 56px 18px 22px;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}

.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq details p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--text-body);
}

/* The last call to action */

.final {
  padding-top: 24px;
}

.final-card {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 32px;
  border: 1px solid var(--stroke-card);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.final-card img {
  margin: 0 auto 20px;
}

.final-card .section-title {
  margin-bottom: 12px;
}

.final-card p {
  max-width: 32em;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 18px;
  text-wrap: balance;
}

.final-card .cta {
  align-items: center;
}

.final-card .cta-note {
  font-size: 14px;
}

/* Footer */

.foot {
  padding: 36px 0 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 14px;
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
}

.foot-brand small {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}

.foot-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-langs a {
  color: var(--text-muted);
  text-decoration: none;
}

.foot-langs a:hover {
  text-decoration: underline;
}

.foot-note {
  flex-basis: 100%;
  margin: 0;
}

/* Smaller screens */

@media (max-width: 1000px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .hero {
    padding: 40px 0 64px;
  }

  .hero-inner,
  .band-inner,
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-inner,
  .band-inner {
    gap: 40px;
  }

  .hero-art {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .section,
  .band {
    padding: 64px 0;
  }

  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the arrows stand inside the screenshot; swiping does the same. */
  .carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .carousel-arrow svg {
    width: 20px;
    height: 20px;
  }

  .carousel-prev {
    left: 8px;
  }

  .carousel-next {
    right: 8px;
  }
}

/* On a phone the cards of the illustration stand above and below the month instead of over it. */
@media (max-width: 560px) {
  .wrap {
    padding: 0 16px;
  }

  .hero-art {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .float {
    position: static;
  }

  .float-chip {
    align-self: flex-start;
  }

  .float-stat {
    align-self: flex-end;
    max-width: 100%;
  }

  .window {
    margin-left: 0;
    padding: 14px;
  }

  .hero-art::before {
    inset: 0;
  }

  .grid {
    gap: 4px;
  }

  .day {
    padding: 3px 5px;
    font-size: 11px;
  }

  .day b {
    font-size: 13px;
  }

  .final-card {
    padding: 40px 20px;
  }
}

@media (max-width: 420px) {
  .lang-name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .carousel-track {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}