/* SPDX-License-Identifier: AGPL-3.0-or-later */
  /* Patterns: one column of cards (Pattern A). Header row, kind filter,
     the cards, a footnote restating the help text. */
  #pat-kinds { margin-top: .9rem; }
  #pat-notice { margin-top: .9rem; }
  #pat-notice:empty { display: none; }
  #pat-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
  .pattern .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; }
  .pattern h3 { font-size: 1.15rem; font-weight: 600; color: var(--accent); min-width: 0; text-wrap: pretty; }
  .pattern .kind { font: .78rem var(--font-ui); color: var(--text-dim); white-space: nowrap; }
  .pattern .dismiss { margin-left: auto; min-height: 1.8rem; padding: .2rem .6rem; font-size: .78rem; }
  .pattern p { margin: .6rem 0 0; text-wrap: pretty; }
  .pat-trigger { color: var(--text-dim); font-style: italic; font-size: .92rem; }
  .pat-toggle {
    margin-top: .9rem; border: 0; background: transparent; color: var(--text-dim);
    font: .78rem var(--font-ui); padding: 0; display: inline-flex; align-items: center; gap: .4rem; min-height: 1.6rem;
  }
  .pat-toggle:hover { color: var(--text); }
  .pat-toggle .caret { font-size: .7rem; }
  .pat-instances {
    margin-top: .5rem; display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: .35rem .9rem; font: .82rem/1.5 var(--font-ui); color: var(--text-dim);
    border-top: 1px solid var(--border); padding-top: .7rem;
  }
  .pat-instances[hidden] { display: none; }
  .pat-instances .d { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
  .pat-instances .n { text-wrap: pretty; }
  #pat-empty { margin-top: 1.2rem; }