/* Shared guide enhancements — theme-agnostic, works on any app palette (light or dark).
   Table/TOC/callout styling uses :where() (zero specificity) so an app's own rules always win. */

/* Responsive tables — fixes mobile horizontal overflow */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4em 0; }
.table-wrap :where(table) { border-collapse: collapse; width: 100%; }
.table-wrap :where(th, td) { padding: 9px 13px; border-bottom: 1px solid rgba(128, 128, 128, .16); text-align: left; vertical-align: top; }
.table-wrap :where(thead th) { border-bottom-width: 2px; font-weight: 700; }
.table-wrap :where(tbody tr:nth-child(even)) { background: rgba(128, 128, 128, .05); }

/* Auto table of contents */
.guide-toc { border: 1px solid rgba(128, 128, 128, .2); border-radius: 12px; padding: 15px 18px; margin: 28px 0; background: rgba(128, 128, 128, .05); }
.guide-toc .toc-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .55; margin: 0 0 9px; font-weight: 700; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.guide-toc li { margin: 0 0 7px; break-inside: avoid; }
.guide-toc a { font-size: 14px; opacity: .85; text-decoration: none; border: 0; }
.guide-toc a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 560px) { .guide-toc ul { columns: 1; } }

/* Callout boxes (opt-in via class) */
.callout { border-left: 3px solid currentColor; background: rgba(128, 128, 128, .07); border-radius: 0 8px 8px 0; padding: 13px 18px; margin: 1.4em 0; }
.callout > :last-child { margin-bottom: 0; }
.callout .callout-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; font-weight: 700; margin-bottom: 5px; }

html { scroll-behavior: smooth; }