/* ============================================================
   MERION — PATTERNS / BLOCKS documentation layer
   ============================================================ */
.pattern-doc { padding: 46px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; }
.pattern-doc:last-of-type { border-bottom: none; }
.pattern-doc-head { margin-bottom: 20px; }
.pattern-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.pattern-tag .ic { font-size: 14px; }
.pattern-title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
.pattern-desc { font-size: 15px; line-height: 1.6; color: var(--muted-foreground); max-width: 680px; margin: 0; font-weight: 300; }
.pattern-desc strong { color: var(--foreground); font-weight: 600; }

/* framed live preview */
.pattern-preview { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); margin: 22px 0; }
.pattern-preview-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 50%, var(--card)); }
.pattern-preview-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.pattern-preview-bar .lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-left: 4px; }
.pattern-canvas { padding: 28px; background:
  repeating-linear-gradient(45deg, transparent, transparent 9px, color-mix(in srgb, var(--foreground) 2.5%, transparent) 9px, color-mix(in srgb, var(--foreground) 2.5%, transparent) 10px);
  display: flex; flex-direction: column; gap: 16px; }
.pattern-canvas.center { align-items: center; }
.pattern-canvas.dark { background: #081A1F; }

/* anatomy + rules columns */
.pattern-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
@media (max-width: 820px) { .pattern-cols { grid-template-columns: 1fr; } }
.pattern-block { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); padding: 20px 22px; }
.pattern-block-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 14px; }
.anat-list { display: flex; flex-direction: column; gap: 12px; }
.anat-item { display: flex; gap: 12px; align-items: flex-start; }
.anat-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }
.anat-body .t { font-size: 13.5px; font-weight: 600; }
.anat-body .d { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; margin-top: 1px; }

/* reuse .dodont/.dd-col/.dd-head from site.css inside the rules block */
.pattern-rules .dodont { grid-template-columns: 1fr; gap: 12px; }
.pattern-rules .dd-col { padding: 0; border: none; background: transparent; }
.pattern-rules .dd-head { margin-bottom: 8px; }

/* code */
.pattern-code { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--card); }
.pattern-code > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 13px 18px;
  font-size: 13px; font-weight: 600; color: var(--foreground); user-select: none; }
.pattern-code > summary::-webkit-details-marker { display: none; }
.pattern-code > summary .ic { font-size: 16px; color: var(--muted-foreground); transition: transform .18s ease; }
.pattern-code[open] > summary { border-bottom: 1px solid var(--border); }
.pattern-code[open] > summary .chev { transform: rotate(90deg); }
.pattern-code pre { margin: 0; padding: 18px 20px; overflow-x: auto; background: #06151A; color: #CFE9E4;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.7; }
.pattern-code pre .tok-tag { color: #00FFD4; }
.pattern-code pre .tok-attr { color: #9FD0FF; }
.pattern-code pre .tok-str { color: #D4FF8A; }
.pattern-code pre .tok-cmt { color: #5C7177; font-style: italic; }
.pattern-code pre::-webkit-scrollbar { height: 8px; }
.pattern-code pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }

/* meta chips (props/usage) */
.pattern-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pattern-chip { font-size: 11.5px; font-weight: 500; color: var(--muted-foreground); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px; }
.pattern-chip strong { color: var(--foreground); font-weight: 600; }

/* mini previews scale helper */
.mini-frame { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--background); }