/* =========================================================================
   Topic detail (PW-04) and Changes We Made Together (PW-11)

   Two list screens that share a layout idea: a header carrying the subject,
   then content at card width. They live in one file because they are one
   pattern, and splitting them would mean maintaining the same header rules
   twice.
   ========================================================================= */

/* --- Topic header -------------------------------------------------------- */

.pw-topic__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-4);
  align-items: flex-start;
  padding-block: var(--pw-space-6) var(--pw-space-5);
}

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

.pw-topic__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.pw-topic__header > div:not(.pw-topic__mark) {
  flex: 1 1 18rem;
  min-inline-size: 0;
}

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

.pw-topic__lead {
  max-inline-size: var(--pw-measure);
  margin: var(--pw-space-3) 0 0;
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

.pw-topic__cta {
  flex: 0 0 auto;
}

/* --- Search -------------------------------------------------------------- */

.pw-topic__searchRow {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
  max-inline-size: var(--pw-measure);
  padding-block-end: var(--pw-space-5);
  border-block-end: 1px solid var(--pw-border);
}

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

.pw-topic__results {
  padding-block-end: var(--pw-space-8);
}

/* --- Impact -------------------------------------------------------------- */

.pw-impact__header {
  max-inline-size: var(--pw-measure);
  padding-block: var(--pw-space-6) var(--pw-space-4);
}

.pw-impact__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-impact__lead {
  margin: var(--pw-space-4) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

.pw-impact__note {
  margin: var(--pw-space-4) 0 0;
  padding-inline-start: var(--pw-space-4);
  border-inline-start: 3px solid var(--pw-success);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

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

.pw-impact-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pw-space-3);
  padding: var(--pw-space-6);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-surface);
}

.pw-impact-story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: center;
  margin: 0;
}

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

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

.pw-impact-story__title a {
  color: inherit;
  text-decoration: none;
}

.pw-impact-story__title a:hover {
  text-decoration: underline;
}

.pw-impact-story__summary {
  max-inline-size: var(--pw-measure);
  margin: 0;
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

.pw-impact-story__count {
  margin: 0;
  font-size: var(--pw-text-sm);
}

/* The sequence is the content, so it reads as one chain rather than three
   loose chips. The arrow between steps is decorative and generated. */
.pw-impact-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2) var(--pw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-impact-step {
  display: inline-flex;
  gap: var(--pw-space-2);
  align-items: center;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-impact-step:not(:last-child)::after {
  color: var(--pw-border-strong);
  content: "→";
}

.pw-impact-step__mark {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--pw-success);
}

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

.pw-impact__footerTitle {
  margin: 0;
  font-size: var(--pw-text-xl);
  font-weight: var(--pw-weight-semibold);
}

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

.pw-impact__footerActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
}

/* =========================================================================
   Public profile (PW-12) and the local-eligibility gate (PW-22)
   ========================================================================= */

.pw-profile__title {
  margin: 0;
  padding-block-start: var(--pw-space-6);
  font-size: var(--pw-text-2xl);
  font-weight: var(--pw-weight-bold);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight);
}

.pw-profile__lead {
  max-inline-size: var(--pw-measure);
  margin: var(--pw-space-3) 0 var(--pw-space-5);
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

/* --- The public card ----------------------------------------------------- */

.pw-profile-card {
  display: flex;
  gap: var(--pw-space-5);
  align-items: flex-start;
  max-inline-size: var(--pw-measure);
  padding: var(--pw-space-5);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-surface);
}

.pw-profile-card__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  overflow: hidden;
  border-radius: var(--pw-radius-full);
  background: var(--pw-bg-subtle);
  color: var(--pw-primary);
}

.pw-profile-card__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.pw-profile-card__avatar .pw-icon {
  inline-size: 2rem;
  block-size: 2rem;
}

.pw-profile-card__body {
  min-inline-size: 0;
}

.pw-profile-card__nickname {
  margin: 0;
  font-size: var(--pw-text-xl);
  font-weight: var(--pw-weight-semibold);
  overflow-wrap: anywhere;
}

.pw-profile-card__meta,
.pw-profile-card__interests {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin: var(--pw-space-3) 0 0;
  padding: 0;
  list-style: none;
}

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

/* --- Three indicators, never one score ----------------------------------- */

.pw-indicators {
  max-inline-size: var(--pw-container-max);
  margin-block: var(--pw-space-6);
}

.pw-indicators__note {
  max-inline-size: var(--pw-measure);
  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-indicators__grid {
  display: grid;
  gap: var(--pw-space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

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

.pw-indicator__label {
  margin: 0;
  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-indicator__value {
  margin: var(--pw-space-2) 0 0;
  font-size: var(--pw-text-xl);
  font-weight: var(--pw-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pw-indicator__meter {
  block-size: 6px;
  margin-block-start: var(--pw-space-3);
  overflow: hidden;
  border-radius: var(--pw-radius-full);
  background: var(--pw-surface-sunken);
}

/* Discrete steps rather than a computed width: a strict CSP forbids the style
   attribute, so the fill cannot carry an inline percentage. */
.pw-indicator__meterFill {
  display: block;
  block-size: 100%;
  background: var(--pw-primary);
}

.pw-indicator__meterFill[data-step="0"] {
  inline-size: 0;
}
.pw-indicator__meterFill[data-step="1"] {
  inline-size: 25%;
}
.pw-indicator__meterFill[data-step="2"] {
  inline-size: 50%;
}
.pw-indicator__meterFill[data-step="3"] {
  inline-size: 75%;
}
.pw-indicator__meterFill[data-step="4"] {
  inline-size: 100%;
}

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

/* --- Editing ------------------------------------------------------------- */

.pw-profile__editor {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-6);
  max-inline-size: var(--pw-measure);
  margin-block: var(--pw-space-6) var(--pw-space-8);
  padding-block-start: var(--pw-space-6);
  border-block-start: 1px solid var(--pw-border);
}

.pw-profile__editorTitle {
  margin: 0;
  font-size: var(--pw-text-xl);
  font-weight: var(--pw-weight-semibold);
}

.pw-profile__field {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
}

.pw-profile__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  align-items: center;
}

.pw-profile__inline .pw-input {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.pw-profile__locked {
  display: flex;
  gap: var(--pw-space-3);
  align-items: center;
  padding: var(--pw-space-3) var(--pw-space-4);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius-md);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-profile__lockedIcon {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* --- The eligibility gate (PW-22) ---------------------------------------- */

/* Where the support button would be. It explains rather than simply being
   absent: a control that vanishes without a reason reads as a bug, and the
   reason here is a product rule people are entitled to disagree with. */
.pw-support__gate {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-4);
  align-items: center;
  max-inline-size: 44ch;
  margin: var(--pw-space-5) auto 0;
  padding: var(--pw-space-4) var(--pw-space-5);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius-md);
}

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