/* ============================================================
   Components
   ============================================================ */

/* — Flash / feedback — */
.flash {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  border-left-width: 3px;
  font-size: var(--text-sm);
}

.flash h2 {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

.flash ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.notice {
  background-color: var(--cool-tint);
  border-color: var(--cool);
  color: var(--cool-strong);
}

.alert {
  background-color: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger);
}

/* — Post card — */
.post-card {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background-color: var(--paper);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.post-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow);
}

.post-card h3 {
  margin-bottom: var(--space-2);
}

.post-card p {
  color: var(--ink-muted);
  font-family: var(--font-serif);
}

/* ------------------------------------------------------------
   The word counter — the signature element.
   A calm Calamine-Blue rule grows along the bottom as the
   writer nears 500 words, then the whole chip blooms into a
   Lemon-Yellow highlight when the goal is reached.
   `--progress` (0–1) is set by the word-counter Stimulus controller.
   ------------------------------------------------------------ */
.word-count,
.word-counter {
  --progress: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  /* progress rule, painted along the bottom edge */
  background-image: linear-gradient(var(--cool), var(--cool));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: calc(var(--progress, 0) * 100%) 2px;
  transition: background-size var(--transition), color var(--transition),
    background-color var(--transition);
}

/* Block variant used on the new/edit forms */
.word-counter {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--ink-muted);
  background-color: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  display: inline-block;
}

/* Goal reached — the earned highlight. */
.word-count.goal-reached,
.word-counter.goal-reached {
  color: var(--ink);
  font-weight: 600;
  background-image: none;
  background-color: var(--reward);
  border-color: var(--reward);
  animation: goal-pop var(--transition);
}

.document-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
}

@keyframes goal-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .word-count,
  .word-counter,
  .btn {
    transition: none;
  }
  .word-count.goal-reached,
  .word-counter.goal-reached {
    animation: none;
  }
}