/* Targeted static adaptations of 21st table, TOC and filter patterns. */
.keynote-compare { margin:24px 0; border:1px solid var(--border2); border-radius:14px; background:var(--bg-card,var(--surface)); }
.keynote-compare summary,.component-toc-mobile summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:16px 20px; cursor:pointer; list-style:none; color:var(--text); font-weight:600; }
.keynote-compare summary::-webkit-details-marker,.component-toc-mobile summary::-webkit-details-marker { display:none; }
.keynote-compare summary span,.component-toc-mobile summary span { font-size:1.3rem; transition:transform 160ms ease; }
.keynote-compare[open] summary span,.component-toc-mobile[open] summary span { transform:rotate(45deg); }
.keynote-compare__scroll { overflow-x:auto; padding:0 20px 20px; }
.keynote-compare table { width:100%; min-width:640px; border-collapse:collapse; font-size:.8rem; line-height:1.6; }
.keynote-compare caption { text-align:left; color:var(--muted); padding:0 0 16px; }
.keynote-compare th,.keynote-compare td { padding:16px 14px; border-bottom:1px solid var(--border2); vertical-align:top; text-align:left; }
.keynote-compare thead { background:var(--bg-card2,var(--bg)); color:var(--text); }
.keynote-compare tbody th { width:32%; font-weight:600; }
.keynote-compare td:last-child { width:20%; white-space:nowrap; font-variant-numeric:tabular-nums; }
.keynote-compare a { color:var(--text); text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:4px; }
.keynote-compare tbody tr:hover { background:rgba(232,97,77,.05); }
.component-toc { max-height:calc(100vh - 190px); overflow:auto; }
.component-toc a[aria-current="location"],.component-toc-mobile a[aria-current="location"] { color:var(--coral); border-left-color:var(--coral); font-weight:600; }
.component-toc-mobile { display:none; border:1px solid var(--border2); border-radius:12px; margin-bottom:24px; }
.component-toc-mobile nav { max-height:45vh; overflow:auto; padding:0 20px 18px; }
.component-toc-mobile ol { padding-left:20px; }
.component-toc-mobile a { display:block; padding:6px 0; font-size:.8rem; }
.article-body h2[id] { scroll-margin-top:100px; }
.media-filters .filter-btn { min-height:44px; display:inline-flex; align-items:center; gap:9px; }
.media-filters .filter-btn[aria-pressed="true"] { box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--coral); }
.media-filter-count { font-size:.68rem; font-variant-numeric:tabular-nums; opacity:.85; }
.media-results { color:var(--muted); font-size:.82rem; margin:0 0 16px; }
.media-reset { background:transparent; color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:10px 14px; margin:0 0 20px; cursor:pointer; font:inherit; font-size:.8rem; }
.media-reset[hidden],#mentionsGrid [hidden] { display:none!important; }
.media-filters .filter-btn:focus-visible,.media-reset:focus-visible,.keynote-compare :focus-visible { outline:2px solid var(--coral); outline-offset:4px; }
@media(max-width:1060px) { .component-toc { display:none; } .component-toc-mobile { display:block; } }
@media(max-width:600px) { .media-filters { justify-content:flex-start; gap:10px; padding:20px; } .media-filters .filter-btn { padding:8px 12px; } }
@media(prefers-reduced-motion:reduce) { .keynote-compare summary span,.component-toc-mobile summary span { transition:none; } }
.component-toc { max-height:calc(100vh - 230px); }
.article-layout--toc .article-share__row { display:flex; flex-direction:row; gap:8px; }
#compare-keynotes,#media-filters { scroll-margin-top:100px; }