/* Markdown formatting reference/playground — split out of style.css. Used on formatting.php (the playground itself) plus edit_readme.php, mod_faq_edit.php and packaging.php (which all embed the same reference cards/scheme toggle), so this stays an @import in style.css rather than a per-page . */ .fmt-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; } .fmt-ref-card { padding: 0.9rem 1rem; } .fmt-ref-card h3 { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .fmt-ref-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .fmt-ref-table td { padding: 0.2rem 0.4rem 0.2rem 0; vertical-align: middle; } .fmt-ref-table td:first-child { white-space: nowrap; padding-right: 1rem; } .fmt-ref-pre { margin: 0; font-size: 0.8rem; white-space: pre; overflow-x: auto; } .fmt-layout-toggle { font-size: 0.78rem; padding: 0.2rem 0.55rem; vertical-align: middle; margin-left: 0.6rem; display: inline-flex; align-items: center; gap: 0.3em; } .fmt-playground { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 400px; } .fmt-playground--stacked { grid-template-columns: 1fr; } .fmt-playground--stacked .fmt-pane:first-child { order: 2; } .fmt-playground--stacked .fmt-pane:last-child { order: 1; } .fmt-pane { display: flex; flex-direction: column; } .fmt-pane-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text-muted); margin-bottom: 0.4rem; } .fmt-scheme-toggle { display: inline-flex; gap: 0.2rem; } .fmt-scheme-btn { padding: 0.05rem 0.4rem; font-size: 0.9rem; line-height: 1.4; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); color: var(--clr-text-muted); cursor: pointer; } .fmt-scheme-btn:hover { border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); } .fmt-scheme-btn.active { border-color: var(--clr-link); color: var(--clr-link); } .fmt-textarea { flex: 1; min-height: 360px; padding: 0.75rem; font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace; font-size: 0.875rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); color: var(--clr-text); resize: vertical; } .fmt-textarea:focus { outline: none; border-color: var(--clr-link); } .fmt-textarea--dragover { border-color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface)); } .fmt-preview { flex: 1; min-height: 360px; padding: 0.75rem 1rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); overflow-y: auto; } /* Force a color-scheme on just the preview subtree, independent of the site-wide theme — color-scheme is inherited, so light-dark() in every descendant re-resolves against it. Base text color needs an explicit re-declaration here since color is otherwise inherited as an already-resolved value from rather than recomputed against the overridden scheme. */ .fmt-preview--light, .fmt-preview--dark { color: var(--clr-text); } .fmt-preview--light { color-scheme: light; } .fmt-preview--dark { color-scheme: dark; }