/* Zen Moments · page.css
   Page compositions: the home steps, the email picture, the guided
   breath on /moment/, contact cards, notes and the button.
   The one animation is the breath; it is CSS-only and stops under
   prefers-reduced-motion, where the words do the guiding instead. */

/* Numbered steps. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
}

.steps li,
.steps li + li {
  position: relative;
  margin: 0;
  padding-left: calc(2.25rem + var(--space-3));
  min-height: 2.25rem;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background: var(--color-surface-container);
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 2.25rem;
  text-align: center;
}

/* A quiet note on sand. */
.note {
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  background: var(--color-surface-sand);
  border-radius: var(--radius-md);
}

.note > :last-child {
  margin-bottom: 0;
}

/* A link dressed as a button. It is still a link. */
.button {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-button-primary-bg);
  color: var(--color-button-text-on-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.button:hover {
  background: var(--color-button-primary-hover);
  color: var(--color-button-text-on-primary);
}

/* The one real button: the confirm page of /unsubscribe/ submits a form.
   A button element keeps its own border, font and cursor unless told. */
button.button {
  border: 0;
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

/* The picture of our email (/emails/). */
.mail {
  margin: var(--space-5) 0 var(--space-6);
  border: var(--border-thin) solid var(--color-border-container);
  border-radius: var(--radius-md);
  background: var(--color-surface-page);
  box-shadow: var(--shadow-low);
  overflow: hidden;
}

.mail__head {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-container);
}

.mail__head dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.mail__head dt {
  color: var(--color-text-secondary);
}

.mail__head dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 479px) {
  .mail__head dl {
    grid-template-columns: 1fr;
  }

  .mail__head dt {
    margin-top: var(--space-2);
  }

  .mail__head dt:first-child {
    margin-top: 0;
  }
}

.mail__body {
  padding: var(--space-5);
}

.mail__body p {
  margin-bottom: var(--space-2);
}

.mail__code {
  margin: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xlg);
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
}

.mail figcaption {
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-thin) solid var(--color-border-container);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Contact cards. */
.contacts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.contacts li,
.contacts li + li {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
}

.contacts strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.contacts a {
  overflow-wrap: anywhere;
}

/* The guided breath (/moment/). One breath is --breath-cycle long:
   the circle grows for the first 40% (4 s) and settles over the rest (6 s).
   Six rounds, then a closing line fades in. */
.breath {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  margin: var(--space-6) 0;
  background: var(--color-surface-container);
  border-radius: var(--radius-lg);
}

.breath h2 {
  margin-top: 0;
  margin-bottom: 0;
}

.breath__ring {
  width: min(220px, 60vw);
  height: auto;
}

.breath__halo {
  fill: var(--color-shape-mist);
}

.breath__circle {
  --breath-scale: 1.45;
  fill: var(--color-shape-sage);
  transform-box: fill-box;
  transform-origin: center;
  animation: breathe var(--breath-cycle) ease-in-out var(--breath-rounds);
}

.breath__labels {
  position: relative;
  width: 100%;
  min-height: 1.6em;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.breath__label {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: var(--breath-cycle) linear var(--breath-rounds) both;
}

.breath__label--in {
  animation-name: label-in;
}

.breath__label--out {
  animation-name: label-out;
}

.breath__done {
  margin: 0;
  opacity: 0;
  color: var(--color-text-secondary);
  animation: appear 1.2s ease-out calc(var(--breath-cycle) * var(--breath-rounds)) 1 forwards;
}

.breath__guide {
  margin: 0;
  max-width: var(--measure-narrow);
}

.breath__static {
  display: none;
  margin: 0;
  max-width: var(--measure-narrow);
}

/* The pause control: a checkbox (checked = paused) with a visible label.
   It is a control, not a form; nothing is submitted. */
.breath__pause-label {
  order: 10;
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border-container);
  border-radius: var(--radius-pill);
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.breath__pause:focus-visible + .breath__pause-label {
  outline: var(--outline-width) solid var(--color-focus);
  outline-offset: var(--outline-offset);
}

.breath__pause:checked + .breath__pause-label {
  background: var(--color-surface-sand);
}

.breath__pause:checked ~ .breath__ring .breath__circle,
.breath__pause:checked ~ .breath__labels .breath__label,
.breath__pause:checked ~ .breath__done {
  animation-play-state: paused;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(var(--breath-scale, 1.2));
  }

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

@keyframes label-in {
  0% {
    opacity: 1;
  }

  34% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes label-out {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  46% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breath__circle,
  .breath__label,
  .breath__done {
    animation: none;
  }

  .breath__labels,
  .breath__done,
  .breath__pause,
  .breath__pause-label {
    display: none;
  }

  .breath__static {
    display: block;
  }

  .button {
    transition: none;
  }
}

/* Not found. */
.notfound h1 {
  margin-bottom: var(--space-4);
}

/* The unsubscribe confirm and done pages (served by unsubd, _unsubd/). */
.unsubscribe h1 {
  margin-bottom: var(--space-4);
}

.unsubscribe form {
  margin: var(--space-5) 0;
}