/* /methodology - light "how we measured". shared.css carries the chrome. */

.meth { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }
@media (min-width: 760px) { .meth { padding-block: var(--bdri-space-9); } }
.meth__inner { max-width: var(--measure); }
.meth__h2 { font-family: var(--bdri-text-h2-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-snug); color: var(--color-text-default); margin-block: var(--bdri-space-6) var(--bdri-space-3); }
.meth__inner > .meth__h2:first-child { margin-top: 0; }
.meth__p { font-size: var(--bdri-size-body-lg); line-height: var(--bdri-lh-loose); color: var(--color-text-subtle); }

.meth__sources { list-style: none; padding: 0; margin: var(--bdri-space-2) 0 0; display: grid; gap: var(--bdri-space-3); }
.meth__sources li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--bdri-space-3); align-items: baseline;
  padding: var(--bdri-space-3) var(--bdri-space-4);
  background: var(--color-surface-subtle); border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card); color: var(--color-text-subtle);
}
.meth__src-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-accent-graphic); color: var(--color-text-default); font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); font-weight: var(--bdri-weight-semibold); }

.meth__caveat {
  margin-top: var(--bdri-space-6);
  background: var(--color-surface-callout-info);
  border: var(--bw-divider) solid color-mix(in srgb, var(--color-accent-primary) 24%, transparent);
  border-left: var(--bw-accent) solid var(--color-accent-primary);
  border-radius: var(--radius-card); padding: var(--bdri-space-6);
}
.meth__caveat-body { color: var(--color-text-default); line-height: var(--bdri-lh-loose); margin-top: var(--bdri-space-2); }

.meth__more { margin-top: var(--bdri-space-7); padding-top: var(--bdri-space-6); border-top: var(--bw-divider) solid var(--color-border-subtle); }
.meth__more .btn { margin-top: var(--bdri-space-4); }