/* =========================================================================
   Community pages (PW-10) and the action types (PW-19)

   The action block is the one part of this product where the rules have to
   be at least as prominent as the thing they govern. So the rules band is
   not a footnote treatment: it sits above the actions, at the same width,
   with the same weight of type. If it ever starts looking like fine print,
   that is a regression.
   ========================================================================= */

.pw-community__header {
  max-inline-size: var(--pw-measure);
  padding-block: var(--pw-space-5) var(--pw-space-5);
}

.pw-community__title {
  margin: var(--pw-space-3) 0 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-community__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: baseline;
  margin: var(--pw-space-4) 0 0;
}

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

/* --- Narrative sections -------------------------------------------------- */

.pw-community__section {
  max-inline-size: var(--pw-measure);
  padding-block: var(--pw-space-6);
  border-block-start: 1px solid var(--pw-border);
}

.pw-community__section--wide {
  max-inline-size: var(--pw-container-max);
}

.pw-community__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-community__prose {
  margin: 0;
  line-height: var(--pw-leading-relaxed);
}

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

.pw-community__locals {
  display: grid;
  gap: var(--pw-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-community-link__icon {
  font-size: var(--pw-text-xl);
  line-height: 1;
}

/* --- Proposed actions ---------------------------------------------------- */

.pw-community__proposed {
  margin-block-end: var(--pw-space-6);
  padding: var(--pw-space-4) var(--pw-space-5);
  border-inline-start: 4px solid var(--pw-primary);
  border-radius: 0 var(--pw-radius-md) var(--pw-radius-md) 0;
  background: var(--pw-bg-subtle);
}

.pw-community__proposedLabel {
  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;
}

/* No anonymous call to collective action — PRD §20.1. */
.pw-community__attribution {
  margin: var(--pw-space-3) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  line-height: var(--pw-leading-relaxed);
}

/* --- The rules band ------------------------------------------------------ */

.pw-actions__rules {
  margin-block-end: var(--pw-space-6);
  padding: var(--pw-space-5);
  border: 2px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-surface);
}

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

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

.pw-actions__ruleList {
  display: grid;
  gap: var(--pw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-actions__rule {
  display: flex;
  gap: var(--pw-space-3);
  align-items: flex-start;
}

.pw-actions__ruleMark {
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  color: var(--pw-success);
  transform: translateY(0.2em);
}

.pw-actions__ruleTitle {
  margin: 0;
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

.pw-actions__ruleBody {
  margin: var(--pw-space-1) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

/* --- The four types ------------------------------------------------------ */

.pw-actions__title {
  margin: 0 0 var(--pw-space-4);
  font-size: var(--pw-text-lg);
  font-weight: var(--pw-weight-semibold);
}

.pw-actions__list {
  display: grid;
  gap: var(--pw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-action {
  display: flex;
  gap: var(--pw-space-4);
  align-items: flex-start;
  padding: var(--pw-space-5);
  border: 1px solid var(--pw-border);
  border-inline-start: 4px solid var(--pw-accent-color, var(--pw-primary));
  border-radius: var(--pw-radius-md);
  background: var(--pw-surface);
}

.pw-action__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--pw-radius-md);
  background: var(--pw-bg-subtle);
  color: var(--pw-accent-color, var(--pw-primary));
}

.pw-action__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

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

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

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

.pw-action__example {
  margin: var(--pw-space-3) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  font-style: italic;
  line-height: var(--pw-leading-relaxed);
}

/* The evidence requirement is a condition, not a caption, so it is boxed and
   carries an icon rather than sitting in small grey type at the bottom. */
.pw-action__evidence {
  display: flex;
  gap: var(--pw-space-3);
  align-items: flex-start;
  margin: var(--pw-space-4) 0 0;
  padding: var(--pw-space-3) var(--pw-space-4);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius-sm);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

.pw-action__evidenceIcon {
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  transform: translateY(0.2em);
}

/* --- The limits ---------------------------------------------------------- */

.pw-actions__limits {
  margin-block-start: var(--pw-space-6);
}

.pw-actions__limitsTitle {
  margin: 0 0 var(--pw-space-4);
  color: var(--pw-danger);
  font-size: var(--pw-text-lg);
  font-weight: var(--pw-weight-semibold);
}

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

.pw-actions__limit {
  display: flex;
  gap: var(--pw-space-3);
  align-items: baseline;
  padding-block: var(--pw-space-3);
  border-block-start: 1px solid var(--pw-border-subtle);
  line-height: var(--pw-leading-normal);
}

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

.pw-actions__limitMark {
  flex: 0 0 auto;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--pw-danger);
  transform: translateY(0.15em);
}

/* --- Joining ------------------------------------------------------------- */

.pw-community__join {
  max-inline-size: var(--pw-measure);
  margin-block-end: var(--pw-space-8);
  padding-block: var(--pw-space-6);
  border-block-start: 1px solid var(--pw-border);
}

.pw-community__join .pw-button {
  margin-block-start: var(--pw-space-4);
}

/* Not a footnote: somebody who clicks Join has to know at once that nothing
   was recorded and nobody was told. */
.pw-community__joinMock {
  margin: var(--pw-space-3) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

.pw-change__body {
  max-inline-size: var(--pw-measure);
  margin-inline: auto;
  padding-inline: var(--pw-gutter);
}

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