/* =========================================================================
   Request detail — PW-07

   The screen where someone decides whether to add themselves to a demand.
   It reads top to bottom on every width: no sidebar, no sticky rail, nothing
   that competes with the one action on the page. The support block is the
   only element allowed to be visually louder than the text around it.

   Measure is narrow for prose and wide for cards, which is why the sections
   set their own max-inline-size rather than sitting in one container.
   ========================================================================= */

.pw-detail__header,
.pw-detail__section,
.pw-support {
  max-inline-size: var(--pw-measure);
  margin-inline: auto;
  padding-inline: var(--pw-gutter);
}

/* --- Header -------------------------------------------------------------- */

.pw-detail__header {
  padding-block: var(--pw-space-5) var(--pw-space-6);
}

.pw-detail__back {
  margin-block-end: var(--pw-space-5);
}

.pw-detail__backLink {
  display: inline-flex;
  gap: var(--pw-space-2);
  align-items: center;
  min-block-size: var(--pw-target-min);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  text-decoration: none;
}

.pw-detail__backLink:hover {
  color: var(--pw-text);
  text-decoration: underline;
}

.pw-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: center;
  margin-block-end: var(--pw-space-4);
}

.pw-detail__title {
  margin: 0;
  font-size: var(--pw-text-3xl);
  font-weight: var(--pw-weight-bold);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight);
}

.pw-detail__summary {
  margin: var(--pw-space-4) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

/* --- Sections ------------------------------------------------------------ */

.pw-detail__section {
  padding-block: var(--pw-space-6);
  border-block-start: 1px solid var(--pw-border);
}

.pw-detail__sectionTitle {
  margin: 0 0 var(--pw-space-4);
  font-size: var(--pw-text-xl);
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

.pw-detail__prose {
  margin: 0;
  line-height: var(--pw-leading-relaxed);
}

/* A stated rule about how the section behaves, not a caption. It sits above
   the content it governs so it is read before, not after. */
.pw-detail__note {
  margin: 0 0 var(--pw-space-5);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

/* --- Support ------------------------------------------------------------- */

.pw-support {
  margin-block: var(--pw-space-6);
  padding-block: var(--pw-space-6);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-surface);
  text-align: center;
}

.pw-support__figure {
  margin: 0;
  line-height: var(--pw-leading-snug);
}

.pw-support__count {
  display: block;
  font-size: var(--pw-text-3xl);
  font-weight: var(--pw-weight-bold);
  letter-spacing: var(--pw-tracking-tight);
}

.pw-support__label {
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-base);
}

.pw-support .pw-flag-list {
  justify-content: center;
  margin-block: var(--pw-space-4) 0;
}

.pw-support__button {
  margin-block-start: var(--pw-space-5);
}

/* The wording rule from PRD §13 lives with the button because the person about
   to act is the one who needs it. Never "vote", never "referendum". */
.pw-support__note {
  max-inline-size: 48ch;
  margin: var(--pw-space-4) auto 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  line-height: var(--pw-leading-relaxed);
}

/* --- Latest update and next milestone ------------------------------------ */

.pw-detail__progressHead {
  display: grid;
  gap: var(--pw-space-4);
  margin-block-end: var(--pw-space-6);
}

.pw-latest,
.pw-next-milestone {
  padding: var(--pw-space-4) var(--pw-space-5);
  border-radius: var(--pw-radius-md);
  background: var(--pw-bg-subtle);
}

.pw-latest__label,
.pw-next-milestone__label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin: 0 0 var(--pw-space-2);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase;
}

.pw-latest__body,
.pw-next-milestone__body {
  margin: 0;
  line-height: var(--pw-leading-normal);
}

/* --- Timeline ------------------------------------------------------------ */

.pw-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-timeline__step {
  position: relative;
  display: grid;
  gap: var(--pw-space-4);
  grid-template-columns: auto 1fr;
  padding-block-end: var(--pw-space-6);
}

.pw-timeline__step:last-child {
  padding-block-end: 0;
}

/* The connecting line spans the step, from under its marker to the next one,
   so the chain reads as one sequence. It hangs off the step rather than the
   marker: the marker is only 2rem tall, so a line anchored to it has nowhere
   to reach. The last step has none — the chain ends, it does not trail off.
   1rem is the marker's half-width, less 1px for the line's own. */
.pw-timeline__step:not(:last-child)::after {
  position: absolute;
  inset-block: 2rem var(--pw-space-2);
  inset-inline-start: calc(1rem - 1px);
  inline-size: 2px;
  background: var(--pw-border);
  content: "";
}

.pw-timeline__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 2px solid var(--pw-success);
  border-radius: var(--pw-radius-full);
  background: var(--pw-surface);
  color: var(--pw-success);
}

.pw-timeline__icon {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Pending steps are dashed and muted. The word "not yet happened" carries the
   meaning; this only reinforces it. */
.pw-timeline__step[data-pending="true"] .pw-timeline__marker {
  border-style: dashed;
  border-color: var(--pw-border-strong);
  color: var(--pw-text-secondary);
}

.pw-timeline__content {
  min-inline-size: 0;
}

.pw-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2) var(--pw-space-3);
  align-items: baseline;
  margin: 0 0 var(--pw-space-1);
}

.pw-timeline__milestone {
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase;
}

.pw-timeline__date,
.pw-timeline__pending {
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
}

.pw-timeline__pending {
  font-style: italic;
}

.pw-timeline__title {
  margin: 0;
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

.pw-timeline__body {
  margin: var(--pw-space-2) 0 0;
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

/* --- Original expressions ------------------------------------------------ */

.pw-expressions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-expression {
  padding-block: var(--pw-space-4);
  border-block-start: 1px solid var(--pw-border-subtle);
}

.pw-expression:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.pw-expression__quote {
  margin: 0;
  padding-inline-start: var(--pw-space-4);
  border-inline-start: 3px solid var(--pw-border-strong);
}

.pw-expression__quote p {
  margin: 0;
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

.pw-expression__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  margin: var(--pw-space-2) 0 0;
  padding-inline-start: calc(var(--pw-space-4) + 3px);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
}

.pw-expression__country {
  display: inline-flex;
  gap: var(--pw-space-1);
  align-items: center;
}

/* --- Community link ------------------------------------------------------ */

.pw-community-link {
  display: flex;
  gap: var(--pw-space-4);
  align-items: center;
  min-block-size: var(--pw-target-min);
  padding: var(--pw-space-4) var(--pw-space-5);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--pw-duration-fast) var(--pw-ease-out);
}

.pw-community-link:hover {
  border-color: var(--pw-border-strong);
}

.pw-community-link__icon {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--pw-primary);
}

.pw-community-link__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
}

.pw-community-link__name {
  font-weight: var(--pw-weight-semibold);
}

.pw-community-link__count {
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

/* Related requests need card width, not prose width. */
.pw-detail__section:has(.pw-grid--requests) {
  max-inline-size: var(--pw-container-max);
}

@media (min-width: 768px) {
  .pw-detail__progressHead {
    grid-template-columns: 1fr 1fr;
  }
}