/* ==============================================================
   THE UNSENT LETTER · page styles
   File: /unsent-letter/unsent-letter.css
   Colours, font and buttons come from /assets/css/site.css.
   The "How it helps" section uses shared styles (site.css, section 13).

   Sections:
     1  The desk (intro and layout)
     2  The sheet of paper
     3  The still copy and the dissolving ink
     4  "Gone" message
     5  Controls: starting points, buttons, confirmation
   ============================================================== */


/* --------------------------------------------------------------
   1 · THE DESK
   Intro on the left, letter on the right (stacked on small screens).
   The background drifts from sky to water.
   -------------------------------------------------------------- */
.desk {
  padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5.5rem);
  background: linear-gradient(var(--c-sky-top), color-mix(in srgb, var(--c-water-far) 40%, var(--bg)));
}
.desk__inner {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.desk__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
.desk__title {
  margin-bottom: .45em;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  font-weight: var(--weight-light);
  letter-spacing: -.025em;
}
.desk__lede {
  margin-bottom: 1rem;
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: 1.45;
}
.desk__who,
.desk__note {
  color: var(--muted);
  font-size: 1rem;
}
.desk__note { margin-top: .75rem; }
.desk__start { display: none; margin-top: 1.25rem; }

@media (max-width: 900px) {
  .desk__inner { grid-template-columns: 1fr; }
  .desk__intro { position: static; }
  .desk__start { display: inline-flex; }
}


/* --------------------------------------------------------------
   2 · THE SHEET OF PAPER
   The paper stays light in dark mode too, like real paper would.
   -------------------------------------------------------------- */
.sheet {
  --ink-soft: color-mix(in srgb, var(--c-ink) 55%, transparent);
  --rule: color-mix(in srgb, var(--c-ink) 12%, transparent);
  --letter-size: 1.15rem;
  --letter-line: 1.9rem;

  position: relative;
  min-height: 30rem;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3.25rem);
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 30, 36, .08), 0 24px 48px -24px rgba(20, 30, 36, .4);
}

.sheet__date {
  margin-bottom: 1.5rem;
  text-align: right;
  font-size: .9rem;
  color: var(--ink-soft);
}

.sheet__to,
.sheet__from {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--letter-size);
}
.sheet__to { margin-bottom: .75rem; }
.sheet__from { justify-content: flex-end; margin-top: 1.25rem; }

.sheet input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 17rem;
  padding: .1rem .25rem;
  border: 0;
  border-bottom: 1.5px dashed var(--rule);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: var(--weight-regular) var(--letter-size)/1.4 var(--font-main);
}
.sheet__from input { flex-grow: 0; width: 12rem; }

.sheet textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--letter-line) * 9 + .7rem);
  padding: .35rem .1rem;
  resize: none;                          /* it grows by itself as you write */
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: var(--weight-light) var(--letter-size)/var(--letter-line) var(--font-main);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--letter-line) - 1px),
      var(--rule) calc(var(--letter-line) - 1px), var(--rule) var(--letter-line)) 0 .35rem / 100% var(--letter-line) local;
}

.sheet ::placeholder { color: var(--ink-soft); opacity: 1; }
.sheet input:focus,
.sheet textarea:focus { outline: none; }
.sheet input:focus { border-bottom: 1.5px solid var(--accent); }
.sheet textarea:focus { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }


/* --------------------------------------------------------------
   3 · THE STILL COPY AND THE DISSOLVING INK
   Just before dissolving, the letter is copied word by word so each
   word can fade exactly as the water reaches it. Sizes match the
   fields above, so nothing jumps.
   -------------------------------------------------------------- */
.snap__to,
.snap__from {
  font-size: var(--letter-size);
  line-height: 1.4;
  padding: .1rem 0;
}
.snap__to { margin-bottom: .75rem; }
.snap__from { margin-top: 1.25rem; text-align: right; }

.snap__body {
  min-height: calc(var(--letter-line) * 9 + .7rem);
  padding: .35rem .1rem;
  font-weight: var(--weight-light);
  font-size: var(--letter-size);
  line-height: var(--letter-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--letter-line) - 1px),
      var(--rule) calc(var(--letter-line) - 1px), var(--rule) var(--letter-line)) 0 .35rem / 100% var(--letter-line);
}

/* Each word fades as the water reaches it */
.snap-word { transition: opacity .35s ease, filter .35s ease; }
.snap-word.is-gone { opacity: 0; filter: blur(3px); }

/* Reduced motion: every word simply fades together */
.sheet__snapshot.is-fading .snap-word { transition-duration: 1.4s; }

.sheet__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
}


/* --------------------------------------------------------------
   4 · "GONE" MESSAGE
   -------------------------------------------------------------- */
.sheet__gone {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  min-height: 22rem;
  text-align: center;
  animation: gone-in 1.2s ease both;
}
.sheet__gone p { max-width: 24rem; color: var(--ink-soft); }
.sheet__gone .sheet__gone-title {
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  color: var(--c-ink);
}
.sheet__gone-title:focus { outline: none; }
.sheet__gone .btn--quiet { color: var(--c-ink); border-color: var(--rule); }
.sheet__gone .btn--quiet:hover { border-color: var(--c-ink); }

@keyframes gone-in {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* --------------------------------------------------------------
   5 · CONTROLS
   -------------------------------------------------------------- */
.letter__controls {
  margin-top: 1.75rem;
  transition: opacity .3s ease;
}
.letter__controls.is-busy { opacity: .4; }

.prompts__label {
  margin-bottom: .6rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.prompts__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  appearance: none;
  min-height: 40px;
  padding: .4rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: var(--weight-regular) .95rem/1.2 var(--font-main);
  cursor: pointer;
  transition: border-color .2s ease;
}
.chip:hover { border-color: var(--text); }

.letter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
}

.letter__confirm {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.letter__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .9rem;
}

.letter__status {
  min-height: 1.65em;
  margin-top: 1rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  .letter__actions .btn,
  .letter__confirm-actions .btn { flex: 1 1 100%; }
}