/* The compatibility page: what you need, what Classglide works with, and when a page needs attention. */
html:root body[data-page="compatibility"] .compatibility-requirements { padding-block: 28px 56px; }
html:root body[data-page="compatibility"] .compatibility-intro { grid-template-columns: .7fr 1.3fr; gap: 64px; }
html:root body[data-page="compatibility"] .compatibility-intro p { font-size: 16px; line-height: 1.75; margin-top: 0; }
html:root body[data-page="compatibility"] .compatibility-formats { padding-block: 60px; background: #edf3ee; border: 0; }
html:root body[data-page="compatibility"] .compatibility-formats .section-head { margin-bottom: 32px; }
html:root body[data-page="compatibility"] .compatibility-formats .section-head p { max-width: 60ch; margin: 12px 0 0; color: #4e5853; font-size: 16px; line-height: 1.65; }
/* Supported formats: one card for each kind of work, each format with its check. */
html:root body[data-page="compatibility"] .format-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
html:root body[data-page="compatibility"] .format-group { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 26px 26px 28px; border: 1px solid #d3ded5; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px #1d2b210d, 0 10px 28px #1d2b2108; }
html:root body[data-page="compatibility"] .format-group-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
html:root body[data-page="compatibility"] .format-group-icon { flex: none; width: 64px; height: 64px; }
html:root body[data-page="compatibility"] .format-group h3 { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
html:root body[data-page="compatibility"] .format-group-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
html:root body[data-page="compatibility"] .format-list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
html:root body[data-page="compatibility"] .format-list li { position: relative; display: grid; gap: 4px; margin: 0; padding-left: 36px; list-style: none; }
html:root body[data-page="compatibility"] .format-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #d9eee0; }
html:root body[data-page="compatibility"] .format-list li::after { content: ''; position: absolute; left: 8px; top: 6px; width: 5px; height: 10px; border: solid #326147; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html:root body[data-page="compatibility"] .format-list strong { font-size: 16px; font-weight: 650; line-height: 1.45; letter-spacing: -.015em; color: var(--ink); }
html:root body[data-page="compatibility"] .format-list span { color: #4e5853; font-size: 15px; line-height: 1.6; }
html:root body[data-page="compatibility"] .format-group > .link { align-self: flex-start; margin-top: auto; font-size: 15px; font-weight: 600; }
html:root body[data-page="compatibility"] .limitations { padding-block: 64px; }
html:root body[data-page="compatibility"] .compatibility-limits { max-width: 900px; margin-top: 28px; }
html:root body[data-page="compatibility"] .compatibility-limits details { border-top: 1px solid var(--line); }
html:root body[data-page="compatibility"] .compatibility-limits details:last-child { border-bottom: 1px solid var(--line); }
html:root body[data-page="compatibility"] .compatibility-limits summary { position: relative; cursor: pointer; list-style: none; padding: 22px 35px 22px 0; font-size: 17px; font-weight: 650; }
html:root body[data-page="compatibility"] .compatibility-limits summary::-webkit-details-marker { display: none; }
html:root body[data-page="compatibility"] .compatibility-limits summary::after { content: '+'; position: absolute; right: 0; top: 20px; font-size: 23px; font-weight: 400; }
html:root body[data-page="compatibility"] .compatibility-limits details[open] summary::after { content: '−'; }
html:root body[data-page="compatibility"] .compatibility-limits p { max-width: 75ch; margin: 0 30px 24px 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
@media (max-width: 1000px) {
  html:root body[data-page="compatibility"] .format-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root body[data-page="compatibility"] .format-group:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  html:root body[data-page="compatibility"] .format-groups { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html:root body[data-page="compatibility"] .format-group { gap: 20px; padding: 22px 20px 24px; }
  html:root body[data-page="compatibility"] .format-group-head { padding-bottom: 18px; }
  html:root body[data-page="compatibility"] .format-group-icon { width: 52px; height: 52px; }
  html:root body[data-page="compatibility"] .format-group h3 { font-size: 19px; }
  html:root body[data-page="compatibility"] .compatibility-intro { grid-template-columns: 1fr; gap: 16px; }
  html:root body[data-page="compatibility"] .compatibility-requirements { padding-block: 12px 42px; }
  html:root body[data-page="compatibility"] .compatibility-formats,
  html:root body[data-page="compatibility"] .limitations { padding-block: 44px; }
  html:root body[data-page="compatibility"] .compatibility-limits summary { font-size: 16px; }
}