/* Guides: stat cards, figures, the example box and the sources list. Every value is a token from the theme's site.css. */

.legal-body .mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); margin: var(--s6) 0; padding: 0; list-style: none; }
.mk-stat { border: 1px solid var(--line); border-top: 4px solid var(--p, var(--c-research)); border-radius: var(--r-tile); padding: var(--s5); background: var(--bg-panel); display: grid; gap: var(--s2); align-content: start; margin: 0; }
.mk-stat .mk-ico { width: 32px; height: 32px; color: var(--p-text, var(--fg)); }
.legal-body .mk-stat .mk-num { font: 800 clamp(34px, 4.2vw, 46px)/1 var(--f-display); letter-spacing: -.03em; color: var(--p-text, var(--fg)); }
.mk-stat .mk-what { font-size: 15px; line-height: 1.45; color: var(--fg); }
.legal-body .mk-stat .mk-src { font: 500 12px/1.45 var(--f-mono); color: var(--fg-muted); }
.legal-body .mk-stat .mk-src a { color: inherit; }

.legal-body .mk-fig { margin: var(--s6) 0; }
.mk-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bg-panel); }
.mk-fig figcaption { margin-top: var(--s2); font: 500 13px/1.5 var(--f-mono); color: var(--fg-muted); }
.mk-fig figcaption a { color: inherit; }

.legal-body .mk-example { border: 1px solid var(--line); border-left: 4px solid var(--p, var(--c-create)); border-radius: var(--r-tile); padding: var(--s5) var(--s6); background: var(--bg-panel); margin: var(--s6) 0; }
.mk-example .mk-label { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font: 600 var(--t-label)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.mk-example .mk-label .mk-ico { width: 20px; height: 20px; color: var(--p-text, var(--fg)); }
.mk-example > :last-child { margin-bottom: 0; }

.legal-body .mk-sources { font-size: 15px; line-height: 1.5; color: var(--fg-muted); }
.legal-body .mk-sources li { margin: 0 0 var(--s2); }

/* A size table: scrolls sideways inside its own box on a phone, never the page. */
.legal-body .mk-table { margin: var(--s6) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bg-panel); -webkit-overflow-scrolling: touch; }
.mk-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.mk-table th { text-align: left; font: 600 var(--t-label)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
.mk-table tr:last-child td { border-bottom: 0; }
.mk-table td:first-child { font-weight: 700; }
.mk-table:not(.mk-table--text) td:nth-child(2), .mk-table:not(.mk-table--text) td:nth-child(3) { font-family: var(--f-mono); white-space: nowrap; }
.mk-table--text table { min-width: 560px; }

/* A link that leaves the site says so. */
.legal-body a[rel~="external"]::after { content: "\2009\2197"; font-size: .85em; }

.mk-ico { flex: none; display: inline-block; vertical-align: middle; }