/* Principles list (design-direction.md #6). Root class: .mm-pl */
.mm-pl { display: grid; gap: var(--mm-space-6); list-style: none; margin: 0; padding: 0; }
/* list-style is inherited, so setting it on the list above is not enough on its own for the
   bullets/features layouts (<ul><li>): the parent theme's compiled style.css carries a
   directly-matching `ul li{list-style:disc}` rule, which wins over an inherited value from an
   ancestor regardless of specificity (same trap as the hero diagram's labels -- see that
   package's CSS). Repeating list-style:none here, on the item's own class, fixes it; harmless
   on the numbered/qa layouts (an <ol> the parent theme's rule doesn't target, and a plain <div>). */
.mm-pl__item { position: relative; min-width: 0; list-style: none; }
.mm-pl__title { display: block; font-family: var(--mm-font-display); font-size: var(--mm-font-size-h4); line-height: 1.3; font-weight: var(--mm-weight-semibold); color: var(--mm-text); }
.mm-pl__text { display: block; margin-top: var(--mm-space-2); }
.mm-pl--numbered .mm-pl__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--mm-space-4); padding-top: var(--mm-space-5); border-top: 1px solid var(--mm-border); }
.mm-pl__num { font: 700 2rem/1 var(--mm-font-display); color: var(--mm-accent); font-variant-numeric: lining-nums tabular-nums; }
.mm-pl--bullets { gap: 0; border-top: 1px solid var(--mm-border); }
.mm-pl--bullets .mm-pl__item { padding: var(--mm-space-5) 0 var(--mm-space-5) 1.75rem; border-bottom: 1px solid var(--mm-border); }
.mm-pl--bullets .mm-pl__item::before, .mm-pl--features .mm-pl__item::before { content: ""; position: absolute; left: 0; width: 0.5rem; height: 1rem; background: linear-gradient(180deg, var(--mm-rule) 0 76%, var(--mm-rule-tip) 76% 100%); }
.mm-pl--bullets .mm-pl__item::before { top: calc(var(--mm-space-5) + 0.3rem); }
.mm-pl--features .mm-pl__item { padding-left: 1.75rem; }
.mm-pl--features .mm-pl__item::before { top: 0.3rem; }
.mm-pl--qa .mm-pl__item { padding-top: var(--mm-space-5); border-top: 1px solid var(--mm-border); }
@media (min-width: 690px) {
  .mm-pl--numbered, .mm-pl--features, .mm-pl--qa { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mm-space-7); row-gap: var(--mm-space-6); }
}

/* Rich text (a rule with its own paragraphs and examples list) inside .mm-pl__text. */
div.mm-pl__text > * + * { margin-top: 0.75em; }
div.mm-pl__text ul { margin-left: 0; padding-left: 1.25em; list-style: disc; }
div.mm-pl__text li + li { margin-top: 0.35em; }