/* =========================================================================
   Doctrine pages — PW-16, PW-17, PW-18

   The three commitment pages: how AI is used, the ethics committee, and
   donations. They are the one place in PeopleWill where long prose is the
   point, so the rules here are the inverse of the homepage's: a narrow
   measure, generous leading, and no composition competing with the text.

   Everything reads inside var(--pw-measure). A civic promise that a reader
   gives up on halfway across the line has not been made.

   Accents come from data-accent, never from an inline style — the CSP in
   index.html sets style-src 'self' with no 'unsafe-inline'.
   ========================================================================= */

.pw-doctrine__header,
.pw-doctrine__body,
.pw-doctrine__status,
.pw-doctrine__related {
  max-inline-size: var(--pw-measure);
  margin-inline: auto;
  padding-inline: var(--pw-gutter);
}

/* --- The claim ----------------------------------------------------------- */

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

.pw-doctrine__kicker {
  margin: 0 0 var(--pw-space-2);
  color: var(--pw-accent-color, var(--pw-text-secondary));
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase;
}

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

/* The sentence we want quoted back at us, so it is set to be quotable: large,
   alone, and marked by the accent rule rather than by a box. */
.pw-doctrine__claim {
  margin: var(--pw-space-6) 0 0;
  padding-inline-start: var(--pw-space-5);
  border-inline-start: 4px solid var(--pw-accent-color, var(--pw-primary));
  font-size: var(--pw-text-xl);
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

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

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

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

.pw-doctrine__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-doctrine__prose {
  margin: 0;
  font-size: var(--pw-text-base);
  line-height: var(--pw-leading-relaxed);
}

/* --- Named parts (dl) ---------------------------------------------------- */

.pw-doctrine__points {
  margin: var(--pw-space-5) 0 0;
}

.pw-doctrine__pointTitle {
  margin-block-start: var(--pw-space-5);
  color: var(--pw-text);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

.pw-doctrine__points > .pw-doctrine__pointTitle:first-child {
  margin-block-start: 0;
}

.pw-doctrine__pointBody {
  margin: var(--pw-space-2) 0 0;
  padding-inline-start: var(--pw-space-4);
  border-inline-start: 2px solid var(--pw-border);
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

/* --- Lists --------------------------------------------------------------- */

.pw-doctrine__items {
  margin: var(--pw-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.pw-doctrine__item {
  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-doctrine__item:first-child {
  border-block-start: 0;
}

/* The boundary list. The mark is an icon with a text label, not a colour:
   "this is a prohibition" must survive a monochrome screen and a screen
   reader alike. */
.pw-doctrine__itemMark {
  flex: 0 0 auto;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--pw-danger);
  transform: translateY(0.15em);
}

.pw-doctrine__section[data-tone="boundary"] .pw-doctrine__sectionTitle {
  color: var(--pw-danger);
}

/* --- What runs today ----------------------------------------------------- */

/* Every one of these pages describes behaviour Phase 1 does not implement.
   This note is the same promise as the homepage's demonstration-data notice
   and is styled to match it: informative, permanent, not dismissible. */
.pw-doctrine__status {
  display: flex;
  gap: var(--pw-space-4);
  align-items: flex-start;
  margin-block: var(--pw-space-7);
  padding: var(--pw-space-5);
  border: 1px solid var(--pw-border);

  /* The note is identified by its fill, its icon and its heading — the rule is
     not load-bearing, which is why it is --pw-border and not --pw-border-strong.
     --pw-border-strong does not reach 3:1 against the sunken surface in light
     theme (2.94:1), and darkening a token used on every border in the product
     to satisfy one decorative rule is the wrong trade. */
  border-inline-start: 4px solid var(--pw-text-secondary);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-surface-sunken);
}

.pw-doctrine__statusIcon {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--pw-text-secondary);
}

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

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

/* --- The other two claims ------------------------------------------------ */

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

.pw-doctrine__relatedGrid {
  display: grid;
  gap: var(--pw-space-4);
  grid-template-columns: 1fr;
}

.pw-doctrine__relatedCard {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-1);
  min-block-size: var(--pw-target-min);
  padding: var(--pw-space-4) 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);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--pw-duration-fast) var(--pw-ease-out);
}

.pw-doctrine__relatedCard:hover {
  border-color: var(--pw-border-strong);
  border-inline-start-color: var(--pw-accent-color, var(--pw-primary));
}

.pw-doctrine__relatedKicker {
  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-doctrine__relatedTitle {
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

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